/* responsive: estilos migrados preservando el diseño original. */

/* ============================================================================
   ANTHORIA — MOBILE V2
   Responsive styles shared across Anthoria.
   Page-specific responsive rules should remain in each page CSS.
   Desktop is untouched because the responsive rules are inside max-width: 768px.
============================================================================ */
/* Oculta la X en la versión de ordenador */
.menu-close {
    display: none;
}

/* El acceso adicional pertenece únicamente al menú móvil. */
.client-portal-nav-link {
    display: none;
}

@media (max-width: 768px) {

    body header .nav-links.show .client-portal-nav-link {
        display: flex;
    }

    :root {
        --anthoria-bg: #f4ede2;
        --anthoria-panel: rgba(255, 252, 247, 0.88);
        --anthoria-gold: #b98227;
        --anthoria-gold-dark: #98651f;
        --anthoria-text: #29251f;
        --anthoria-muted: rgba(45, 41, 36, 0.74);
        --anthoria-header-h: 82px;
    }

    body.dark-theme {
        --anthoria-bg: #050605;
        --anthoria-panel: #0b0c0b;
        --anthoria-gold: #d0a457;
        --anthoria-gold-dark: #b67b28;
        --anthoria-text: #f5f0e8;
        --anthoria-muted: rgba(245, 240, 232, 0.72);
    }

    html {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;

        background: var(--anthoria-bg);

        scroll-behavior: smooth;
        color-scheme: light;
    }

    html:has(body.dark-theme) {
        color-scheme: dark;
    }

    html body.home-page:not(.dark-theme),
    html body.home-page.dark-theme {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        background: var(--anthoria-bg);
        color: var(--anthoria-text);
    }

    body.home-page,
    body.home-page main,
    body.home-page header,
    body.home-page footer,
    body.home-page section,
    body.home-page #services {
        max-width: 100%;
    }

    body.home-page *,
    body.home-page *::before,
    body.home-page *::after {
        box-sizing: border-box;
    }

    body.home-page img,
    body.home-page svg,
    body.home-page video {
        max-width: 100%;
        height: auto;
    }

    body.home-page main {
        position: relative;

        width: 100%;
        margin: 0;
        padding: 0;
        overflow: visible;
        background: var(--anthoria-bg);
    }


    /* ------------------------------------------------------------------------
       HEADER
    ------------------------------------------------------------------------- */

    body>header {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: var(--anthoria-header-h);
        margin: 0;
        padding: 16px 22px 0;
        background:
            linear-gradient(to bottom,
                rgba(244, 237, 226, 0.96),
                rgba(244, 237, 226, 0));
        pointer-events: auto;
    }

    /* ==========================================================
   ANTHORIA — MENÚ MÓVIL MODAL GLOBAL
   ========================================================== */

    /* Bloquea el desplazamiento cuando el menú está abierto */

    body.menu-open {
        overflow: hidden;
    }

    /* Fondo que cubre toda la pantalla */

    body.menu-open::before {
        content: "";

        position: fixed;
        inset: 0;
        z-index: 8000;

        background: rgba(33, 27, 20, 0.34);

        backdrop-filter: blur(9px);
        -webkit-backdrop-filter: blur(9px);

        animation: anthoria-overlay-open 0.25s ease both;
    }

    body.menu-open header {
        z-index: 9000;
    }

    /* Ventana flotante central — Ivory Theme */

    body header .nav-links.show {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        z-index: 9001;

        display: flex;
        flex-direction: column;
        gap: 5px;

        width: min(330px, calc(100vw - 42px));
        max-height: calc(100svh - 70px);

        margin: 0;
        padding: 66px 18px 20px;

        overflow: hidden;

        border: 1px solid rgba(152, 101, 31, 0.30);
        border-radius: 28px;

        background:
            radial-gradient(circle at 100% 0%,
                rgba(185, 130, 39, 0.16),
                transparent 32%),
            linear-gradient(145deg,
                rgba(255, 255, 255, 0.94),
                rgba(250, 244, 234, 0.88));

        box-shadow:
            0 35px 90px rgba(50, 35, 17, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.95);

        backdrop-filter: blur(26px);
        -webkit-backdrop-filter: blur(26px);

        transform: translate(-50%, -50%);

        isolation: isolate;

        animation:
            anthoria-modal-open 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Cabecera decorativa de la ventana */

    body header .nav-links.show::before {
        content: "ANTHORIA  /  NAVIGATION";

        position: absolute;
        top: 27px;
        left: 50%;

        width: max-content;

        color: rgba(152, 101, 31, 0.72);

        font-family: Arial, sans-serif;
        font-size: 0.57rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.22em;
        text-align: center;

        transform: translateX(-50%);

        pointer-events: none;
    }

    /* Línea tecnológica superior */

    body header .nav-links.show::after {
        content: "";

        position: absolute;
        top: 49px;
        left: 22px;
        right: 22px;

        height: 1px;

        background:
            linear-gradient(90deg,
                var(--anthoria-gold),
                rgba(185, 130, 39, 0.10),
                transparent);

        box-shadow:
            0 0 12px rgba(185, 130, 39, 0.25);

        pointer-events: none;
    }

    /* Botón X */

    body header .nav-links.show .menu-close {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;
        padding: 0;

        border: 1px solid rgba(152, 101, 31, 0.24);
        border-radius: 50%;

        background: rgba(255, 255, 255, 0.52);
        color: #98651f;

        font-family: Arial, sans-serif;
        font-size: 1.35rem;
        font-weight: 300;
        line-height: 1;

        cursor: pointer;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.85),
            0 8px 24px rgba(75, 52, 21, 0.10);

        transition:
            transform 0.22s ease,
            background 0.22s ease,
            border-color 0.22s ease;
    }

    body header .nav-links.show .menu-close:hover,
    body header .nav-links.show .menu-close:active {
        border-color: rgba(185, 130, 39, 0.48);
        background: rgba(185, 130, 39, 0.10);

        transform: rotate(90deg);
    }

    /* Enlaces */

    body header .nav-links.show a {
        position: relative;

        display: flex;
        align-items: center;

        width: 100%;
        min-height: 52px;
        padding: 0 48px 0 18px;

        border: 1px solid transparent;
        border-radius: 15px;

        color: rgba(41, 37, 31, 0.84);

        font-size: 0.96rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.025em;

        text-decoration: none;

        transition:
            color 0.22s ease,
            background 0.22s ease,
            border-color 0.22s ease,
            transform 0.22s ease;
    }

    /* Flecha tecnológica */

    body header .nav-links.show a::after {
        content: "→";

        position: absolute;
        right: 18px;

        color: rgba(190, 139, 54, 0.78);

        font-family: Arial, sans-serif;
        font-size: 0.82rem;
        font-weight: 300;
        line-height: 1;

        opacity: 0.85;

        transition:
            color 0.22s ease,
            transform 0.22s ease;
    }

    /* Página actual */

    body header .nav-links.show a.active-page {
        border-color: rgba(185, 130, 39, 0.24);

        background:
            linear-gradient(90deg,
                rgba(185, 130, 39, 0.13),
                rgba(185, 130, 39, 0.025));

        color: #98651f;
    }

    body header .nav-links.show a.active-page::after {
        display: none;
    }

    /* Interacción */

    body header .nav-links.show a:hover,
    body header .nav-links.show a:active {
        border-color: rgba(185, 130, 39, 0.18);
        background: rgba(185, 130, 39, 0.08);
        color: #98651f;

        transform: translateX(3px);
    }

    body header .nav-links.show a:hover::after,
    body header .nav-links.show a:active::after {
        color: var(--anthoria-gold);
        transform: translate(2px, -2px);
    }

    /* Dark Theme */

    body.dark-theme.menu-open::before {
        background: rgba(0, 0, 0, 0.62);
    }

    body.dark-theme header .nav-links.show {
        border-color: rgba(208, 164, 87, 0.30);

        background:
            radial-gradient(circle at 100% 0%,
                rgba(208, 164, 87, 0.15),
                transparent 32%),
            linear-gradient(145deg,
                rgba(18, 19, 17, 0.94),
                rgba(6, 7, 6, 0.90));

        box-shadow:
            0 38px 100px rgba(0, 0, 0, 0.60),
            inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    body.dark-theme header .nav-links.show::before {
        color: rgba(208, 164, 87, 0.72);
    }

    body.dark-theme header .nav-links.show .menu-close {
        border-color: rgba(208, 164, 87, 0.25);
        background: rgba(255, 255, 255, 0.035);
        color: var(--anthoria-gold);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 8px 24px rgba(0, 0, 0, 0.25);
    }

    body.dark-theme header .nav-links.show .menu-close:hover,
    body.dark-theme header .nav-links.show .menu-close:active {
        background: rgba(208, 164, 87, 0.10);
    }

    body.dark-theme header .nav-links.show a {
        color: rgba(245, 240, 232, 0.82);
    }

    body.dark-theme header .nav-links.show a.active-page {
        border-color: rgba(208, 164, 87, 0.24);

        background:
            linear-gradient(90deg,
                rgba(208, 164, 87, 0.13),
                rgba(208, 164, 87, 0.025));

        color: var(--anthoria-gold);
    }

    body.dark-theme header .nav-links.show a:hover,
    body.dark-theme header .nav-links.show a:active {
        background: rgba(208, 164, 87, 0.08);
        color: var(--anthoria-gold);
    }

    /* Animaciones */

    @keyframes anthoria-overlay-open {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes anthoria-modal-open {
        from {
            opacity: 0;

            transform:
                translate(-50%, -46%) scale(0.92);
        }

        to {
            opacity: 1;

            transform:
                translate(-50%, -50%) scale(1);
        }
    }

    body.dark-theme>header {
        background:
            linear-gradient(to bottom,
                rgba(5, 6, 5, 0.96),
                rgba(5, 6, 5, 0));
    }

    body header nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 46px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: auto;
    }

    body header .logo {
        display: flex;
        align-items: center;

        width: 145px;
        height: 42px;

        margin-left: -15px;
        overflow: visible;
        flex-shrink: 0;

        transform: none;
    }

    body header .logo img {
        position: static;

        display: block;

        width: 145px;
        height: auto;
        max-width: none;

        object-fit: contain;
        object-position: left center;

        opacity: 0.75;

        transform: none;
    }

    body header .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--anthoria-gold);
        cursor: pointer;

        position: relative;
        right: -6px;
        top: -6px;
    }


    body header nav .menu-toggle span {
        display: block;
        width: 21px;
        height: 2px;
        border-radius: 999px;
        background: var(--anthoria-gold);
        opacity: 0.4;
    }

    body header .nav-links:not(.show),
    body header .portal-button {
        display: none;
    }


    /* ------------------------------------------------------------------------
       HERO
    ------------------------------------------------------------------------- */

    body.home-page .home-hero {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        min-height: 100svh;
        margin: 0;
        padding: 132px 24px 72px;
        overflow: hidden;
        isolation: isolate;
        background:
            linear-gradient(to bottom,
                rgba(255, 252, 247, 0.04) 0%,
                rgba(255, 252, 247, 0.08) 48%,
                rgba(244, 237, 226, 0.86) 94%,
                #f4ede2 100%),
            url(../../assets/images/home-mobile-ivory.jpg) center top / cover no-repeat;

    }

    body:not(.dark-theme).home-page .home-hero h1 {
        color: #29251f;
        text-shadow:
            0 3px 18px rgba(255, 255, 255, 0.45);
    }

    body:not(.dark-theme).home-page .hero-description {
        color: rgba(45, 41, 36, 0.78);
        text-shadow: none;
    }

    body:not(.dark-theme).home-page .home-hero h1 .gold-text {
        color: #b98227;
    }

    body.dark-theme.home-page .home-hero {
        background:
            linear-gradient(to bottom,
                rgba(5, 6, 5, 0.05) 0%,
                rgba(5, 6, 5, 0.12) 48%,
                rgba(5, 6, 5, 0.96) 94%,
                #050605 100%),
            url(../../assets/images/home-mobile-dark.jpg) center top / cover no-repeat;
    }

    body.home-page .hero-kicker {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0 0 18px;
    }

    body.home-page .hero-kicker p {
        margin: 0;
        color: var(--anthoria-gold);
        font-size: 0.62rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.home-page .hero-kicker-line {
        display: block;

        width: 10px;
        height: 6px;
        flex: 0 0 60px;

        background: linear-gradient(to right,
                rgba(185, 130, 39, 0.35),
                rgba(185, 130, 39, 0.85));

        clip-path: polygon(0 42%,
                88% 42%,
                100% 50%,
                88% 58%,
                0 58%);
    }

    body.home-page .home-hero h1 {
        width: 100%;
        max-width: 9.5ch;
        margin: 0;
        color: var(--anthoria-text);
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(2.8rem, 12vw, 4rem);
        font-weight: 500;
        line-height: 0.94;
        letter-spacing: -0.035em;
        text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    }

    body.home-page .home-hero h1 .gold-text {
        color: var(--anthoria-gold);
    }

    body.home-page .home-hero h1 .no-break {
        white-space: normal;
    }

    body.home-page .hero-description {
        position: relative;
        max-width: 29ch;
        margin: 24px 0 0;
        padding-left: 18px;
        color: var(--anthoria-muted);
        font-size: 0.9rem;
        line-height: 1.55;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    }

    body.home-page .hero-description::before {
        content: "";
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: 0;
        width: 2px;
        background: var(--anthoria-gold);
    }

    body.home-page .hero-description br {
        display: none;
    }

    body.home-page .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 330px;
        margin-top: 28px;
    }

    body.home-page .hero-action-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 50px;
        padding: 0 18px;
        border-radius: 14px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
    }

    body.home-page .hero-action-primary {
        border: 1px solid rgba(208, 164, 87, 0.72);
        background: rgba(5, 6, 5, 0.72);
        color: var(--anthoria-text);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.home-page .hero-action-secondary {
        border: 1px solid var(--anthoria-gold);
        background: linear-gradient(135deg, #e0b45f 0%, var(--anthoria-gold-dark) 100%);
        color: #11100d;
        box-shadow: 0 10px 30px rgba(183, 123, 40, 0.28);
    }

    body.home-page .hero-action-arrow {
        font-size: 1rem;
        line-height: 1;
    }

    /* ------------------------------------------------------------------------
       STACKED SERVICE CARDS
       The large negative margin creates the visible deck.
       Sticky keeps each card pinned while the next card covers it.
    ------------------------------------------------------------------------- */

    body.home-page #services {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        min-height: auto;
        margin: 0;
        padding: 34px 16px 120px;
        overflow: visible;
        background:
            radial-gradient(circle at 80% 0%,
                rgba(185, 130, 39, 0.12),
                transparent 30%),
            #f4ede2;
    }

    body.dark-theme.home-page #services {
        background:
            radial-gradient(circle at 80% 0%,
                rgba(208, 164, 87, 0.10),
                transparent 30%),
            #050605;
    }

    body.home-page #services .service-card {
        position: sticky;
        top: 92px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
        min-height: calc(100svh - 132px);
        margin: 0;
        padding: 30px 26px;
        overflow: hidden;
        border: 1px solid rgba(208, 164, 87, 0.42);
        border-radius: 28px;
        background:
            radial-gradient(circle at 78% 18%, rgba(208, 164, 87, 0.12), transparent 36%),
            linear-gradient(145deg, rgba(18, 19, 17, 0.98), rgba(7, 8, 7, 0.99));
        box-shadow:
            0 24px 70px rgba(0, 0, 0, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.045);
        color: var(--anthoria-text);
        text-decoration: none;
        transform-origin: center top;
    }

    body:not(.dark-theme).home-page #services .service-card {
        border-color: rgba(183, 138, 61, 0.48);

        background:
            radial-gradient(circle at 78% 18%,
                rgba(185, 130, 39, 0.13),
                transparent 36%),
            linear-gradient(145deg,
                rgba(255, 253, 248, 0.98),
                rgba(237, 225, 205, 0.98));

        color: #29251f;

        box-shadow:
            0 24px 60px rgba(76, 52, 21, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }

    body:not(.dark-theme).home-page #services .service-card h2 {
        color: #29251f;
    }

    body:not(.dark-theme).home-page #services .service-card p {
        color: rgba(45, 41, 36, 0.72);
    }

    body:not(.dark-theme).home-page #services .service-card>span {
        color: #a87525;
    }

    body:not(.dark-theme).home-page #services .visual-maintenance::after {
        background: rgba(247, 239, 225, 0.96);
    }

    body:not(.dark-theme).home-page #services .visual-software::before {
        box-shadow:
            -26px -22px 0 -1px rgba(247, 239, 225, 0.96),
            -26px -22px 0 0 rgba(183, 138, 61, 0.38),
            26px 22px 0 -1px rgba(247, 239, 225, 0.96),
            26px 22px 0 0 rgba(183, 138, 61, 0.38);
    }

    body:not(.dark-theme).home-page #services .visual-software span {
        background: rgba(247, 239, 225, 0.96);
    }

    body.home-page #services .service-card-visual {
        position: absolute;
        top: 60%;
        left: 50%;

        width: 150px;
        height: 150px;

        transform: translate(-50%, -50%);

        opacity: 0.42;
        pointer-events: none;
    }

    /* ==========================================================
       HOME IVORY — ANIMACIONES CON MAYOR CONTRASTE
       ========================================================== */

    body:not(.dark-theme).home-page #services .service-card-visual {
        opacity: 0.78;
        filter:
            contrast(1.18) saturate(1.22);
    }

    body:not(.dark-theme).home-page #services .visual-web {
        border-color: rgba(152, 101, 31, 0.88);
    }

    body:not(.dark-theme).home-page #services .visual-web::before {
        border-left-color: rgba(152, 101, 31, 0.82);
        border-right-color: rgba(152, 101, 31, 0.82);
    }

    body:not(.dark-theme).home-page #services .visual-web::after {
        background:
            linear-gradient(90deg,
                transparent,
                rgba(152, 101, 31, 1),
                transparent);

        box-shadow:
            0 0 10px rgba(152, 101, 31, 0.34);
    }

    body:not(.dark-theme).home-page #services .visual-web span {
        border-color: rgba(152, 101, 31, 0.70);
    }

    body:not(.dark-theme).home-page #services .visual-maintenance {
        border-color: rgba(152, 101, 31, 0.62);
    }

    body:not(.dark-theme).home-page #services .visual-maintenance::before {
        background:
            repeating-conic-gradient(from 0deg,
                rgba(152, 101, 31, 0.92) 0deg 8deg,
                transparent 8deg 30deg);
    }

    body:not(.dark-theme).home-page #services .visual-maintenance::after,
    body:not(.dark-theme).home-page #services .visual-maintenance span {
        border-color: rgba(152, 101, 31, 0.90);
    }

    body:not(.dark-theme).home-page #services .visual-ai::before {
        background:
            conic-gradient(transparent 0deg 40deg,
                rgba(152, 101, 31, 1) 40deg 65deg,
                transparent 65deg 150deg,
                rgba(152, 101, 31, 0.72) 150deg 170deg,
                transparent 170deg 270deg,
                rgba(152, 101, 31, 1) 270deg 295deg,
                transparent 295deg 360deg);
    }

    body:not(.dark-theme).home-page #services .visual-ai span,
    body:not(.dark-theme).home-page #services .visual-data span {
        background: #98651f;

        box-shadow:
            0 0 8px rgba(152, 101, 31, 0.82),
            0 0 20px rgba(152, 101, 31, 0.42);
    }

    body:not(.dark-theme).home-page #services .visual-data::before {
        border-left-color: rgba(152, 101, 31, 0.82);
        border-bottom-color: rgba(152, 101, 31, 0.82);

        filter: contrast(1.25);
    }

    body:not(.dark-theme).home-page #services .visual-data::after {
        background:
            linear-gradient(90deg,
                transparent,
                rgba(152, 101, 31, 1),
                transparent);

        box-shadow:
            0 0 12px rgba(152, 101, 31, 0.42);
    }

    body.home-page #services .visual-web {
        border: 1px solid rgba(208, 164, 87, 0.7);
        border-radius: 50%;

        animation: anthoria-float 6s ease-in-out infinite;
    }

    body.home-page #services .visual-web::before {
        content: "";
        position: absolute;

        top: 18px;
        bottom: 18px;
        left: 42px;
        right: 42px;

        border-left: 1px solid rgba(208, 164, 87, 0.7);
        border-right: 1px solid rgba(208, 164, 87, 0.7);
        border-radius: 50%;
    }

    body.home-page #services .visual-web::after {
        content: "";
        position: absolute;

        top: 50%;
        left: 8px;
        right: 8px;

        height: 1px;

        background: linear-gradient(90deg,
                transparent,
                var(--anthoria-gold),
                transparent);

        animation: anthoria-scan 4s ease-in-out infinite;
    }

    body.home-page #services .visual-web span {
        position: absolute;

        top: 60%;
        left: 50%;

        width: 185px;
        height: 70px;

        border: 1px solid rgba(208, 164, 87, 0.45);
        border-radius: 50%;

        transform: translate(-50%, -50%) rotate(-18deg);

        animation: anthoria-orbit 10s linear infinite;
    }

    body.home-page #services .visual-maintenance {
        display: flex;
        align-items: center;
        justify-content: center;

        border: 1px solid rgba(208, 164, 87, 0.35);
        border-radius: 50%;

        animation: anthoria-float 6s ease-in-out infinite;
    }

    body.home-page #services .visual-maintenance::before {
        content: "";
        position: absolute;

        width: 105px;
        height: 105px;

        border-radius: 50%;

        background:
            repeating-conic-gradient(from 0deg,
                rgba(208, 164, 87, 0.75) 0deg 8deg,
                transparent 8deg 30deg);

        animation: maintenance-rotate 14s linear infinite;
    }

    body.home-page #services .visual-maintenance::after {
        content: "";
        position: absolute;

        width: 72px;
        height: 72px;

        border: 1px solid rgba(208, 164, 87, 0.75);
        border-radius: 50%;

        background: rgba(5, 6, 5, 0.92);
    }

    body.home-page #services .visual-maintenance span {
        position: absolute;
        z-index: 2;

        width: 24px;
        height: 24px;

        border: 1px solid rgba(208, 164, 87, 0.85);
        border-radius: 50%;

        box-shadow:
            0 0 18px rgba(208, 164, 87, 0.25),
            inset 0 0 10px rgba(208, 164, 87, 0.15);
    }

    body.home-page #services .visual-software {
        display: flex;
        align-items: center;
        justify-content: center;

        animation: anthoria-float 6s ease-in-out infinite;
    }

    body.home-page #services .visual-software::before {
        content: "";
        position: absolute;

        width: 110px;
        height: 78px;

        border: 1px solid rgba(208, 164, 87, 0.75);
        border-radius: 16px;

        box-shadow:
            -26px -22px 0 -1px rgba(5, 6, 5, 0.95),
            -26px -22px 0 0 rgba(208, 164, 87, 0.35),
            26px 22px 0 -1px rgba(5, 6, 5, 0.95),
            26px 22px 0 0 rgba(208, 164, 87, 0.35);

        animation: software-pulse 5s ease-in-out infinite;
    }

    body.home-page #services .visual-software::after {
        content: "";
        position: absolute;

        width: 1px;
        height: 118px;

        background: linear-gradient(to bottom,
                transparent,
                rgba(208, 164, 87, 0.8),
                transparent);

        transform: rotate(90deg);

        animation: software-scan 4s ease-in-out infinite;
    }

    body.home-page #services .visual-software span {
        position: absolute;
        z-index: 2;

        width: 34px;
        height: 34px;

        border: 1px solid rgba(208, 164, 87, 0.85);
        border-radius: 10px;

        background: rgba(5, 6, 5, 0.9);

        box-shadow:
            0 0 18px rgba(208, 164, 87, 0.22),
            inset 0 0 10px rgba(208, 164, 87, 0.12);

        animation: software-core 3.5s ease-in-out infinite;
    }

    body.home-page #services .visual-ai {
        display: flex;
        align-items: center;
        justify-content: center;

        animation: anthoria-float 6s ease-in-out infinite;
    }

    body.home-page #services .visual-ai::before {
        content: "";
        position: absolute;

        width: 110px;
        height: 110px;

        border-radius: 50%;

        background:
            conic-gradient(transparent 0deg 40deg,
                rgba(208, 164, 87, .9) 40deg 65deg,
                transparent 65deg 150deg,
                rgba(208, 164, 87, .5) 150deg 170deg,
                transparent 170deg 270deg,
                rgba(208, 164, 87, .9) 270deg 295deg,
                transparent 295deg 360deg);

        -webkit-mask: radial-gradient(circle, transparent 52px, #000 53px);
        mask: radial-gradient(circle, transparent 52px, #000 53px);

        animation: ai-orbit 5s linear infinite;
    }

    body.home-page #services .visual-ai::after {
        content: "";
        position: absolute;

        width: 72px;
        height: 72px;

        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(208, 164, 87, .22),
                transparent 70%);

        animation: ai-pulse 3s ease-in-out infinite;
    }

    body.home-page #services .visual-ai span {
        position: absolute;
        z-index: 2;

        width: 18px;
        height: 18px;

        border-radius: 50%;

        background: rgba(208, 164, 87, .95);

        box-shadow:
            0 0 8px rgba(208, 164, 87, .8),
            0 0 20px rgba(208, 164, 87, .45),
            0 0 40px rgba(208, 164, 87, .2);

        animation: ai-core 2.5s ease-in-out infinite;
    }

    body.home-page #services .visual-data {
        display: flex;
        align-items: center;
        justify-content: center;

        animation: anthoria-float 6s ease-in-out infinite;
    }

    body.home-page #services .visual-data::before {
        content: "";
        position: absolute;

        width: 112px;
        height: 82px;

        border-left: 1px solid rgba(208, 164, 87, 0.6);
        border-bottom: 1px solid rgba(208, 164, 87, 0.6);

        background:
            linear-gradient(to top,
                rgba(208, 164, 87, 0.55) 0 38%,
                transparent 38%) 14px bottom / 14px 100% no-repeat,
            linear-gradient(to top,
                rgba(208, 164, 87, 0.7) 0 58%,
                transparent 58%) 40px bottom / 14px 100% no-repeat,
            linear-gradient(to top,
                rgba(208, 164, 87, 0.85) 0 78%,
                transparent 78%) 66px bottom / 14px 100% no-repeat,
            linear-gradient(to top,
                rgba(208, 164, 87, 0.65) 0 50%,
                transparent 50%) 92px bottom / 14px 100% no-repeat;

        animation: data-bars 4s ease-in-out infinite;
    }

    body.home-page #services .visual-data::after {
        content: "";
        position: absolute;

        width: 118px;
        height: 2px;

        background: linear-gradient(90deg,
                transparent,
                rgba(208, 164, 87, 0.95),
                transparent);

        transform: rotate(-24deg);

        box-shadow:
            0 0 10px rgba(208, 164, 87, 0.35);

        animation: data-line 4s ease-in-out infinite;
    }

    body.home-page #services .visual-data span {
        position: absolute;
        z-index: 2;

        width: 9px;
        height: 9px;

        border-radius: 50%;

        background: rgba(208, 164, 87, 1);

        box-shadow:
            0 0 10px rgba(208, 164, 87, 0.8),
            0 0 24px rgba(208, 164, 87, 0.35);

        animation: data-point 2.8s ease-in-out infinite;
    }

    body.home-page main>.weather-widget {
        position: absolute;
        top: calc(100svh - 165px);
        left: 0;
        right: 0;
        z-index: 5;

        display: flex;
        align-items: center;
        justify-content: center;

        width: calc(100% - 48px);
        max-width: none;

        margin-left: auto;
        margin-right: auto;
        padding: 0;

        text-align: center;
        transform: none;
    }

    body.home-page main>.weather-widget>* {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    body.home-page main>.hero-actions {
        position: absolute;
        top: calc(100svh - 105px);
        left: 24px;
        z-index: 6;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;

        width: calc(100% - 48px);
        max-width: none;
        height: auto;

        margin: 0;

        transform: none;
    }

    body.home-page main>.hero-actions .hero-action-button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 54px;
        margin: 0;
        padding: 0 10px;

        border: 1px solid rgba(208, 164, 87, 0.72);
        border-radius: 13px;

        background: rgba(5, 6, 5, 0.28);

        color: var(--anthoria-gold);

        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.12em;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.025),
            0 0 20px rgba(208, 164, 87, 0.035);

        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    body.home-page main>.hero-actions .hero-action-primary,
    body.home-page main>.hero-actions .hero-action-secondary {
        border: 1px solid rgba(208, 164, 87, 0.72);
        background: rgba(5, 6, 5, 0.28);
        color: var(--anthoria-gold);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.025),
            0 0 20px rgba(208, 164, 87, 0.035);
    }

    body:not(.dark-theme).home-page main>.hero-actions .hero-action-button {
        border-color: rgba(183, 138, 61, 0.64);

        background:
            rgba(255, 252, 247, 0.62);

        color: #9b6c25;

        box-shadow:
            0 12px 28px rgba(76, 52, 21, 0.11),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    body:not(.dark-theme).home-page main>.hero-actions .hero-action-primary {
        background:
            linear-gradient(135deg,
                #d6aa58,
                #b98227);

        color: #fffaf0;
    }

    body:not(.dark-theme).home-page main>.hero-actions .hero-action-secondary {
        background: rgba(255, 252, 247, 0.68);
        color: #98651f;
    }

    body.home-page #services::after {
        content: "";
        display: block;
        height: calc(100svh - 120px);
        pointer-events: none;
    }

    @keyframes anthoria-float {

        0%,
        100% {
            transform: translate(-50%, -50%) translateY(0);
        }

        50% {
            transform: translate(-50%, -50%) translateY(-10px);
        }
    }

    @keyframes anthoria-orbit {
        from {
            transform: translate(-50%, -50%) rotate(-18deg);
        }

        to {
            transform: translate(-50%, -50%) rotate(342deg);
        }
    }

    @keyframes anthoria-scan {

        0%,
        100% {
            opacity: 0.3;
            transform: translateY(-34px);
        }

        50% {
            opacity: 1;
            transform: translateY(34px);
        }

    }

    @keyframes maintenance-rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }

    }

    @keyframes software-pulse {

        0%,
        100% {
            opacity: 0.55;
            transform: scale(0.96);
        }

        50% {
            opacity: 1;
            transform: scale(1.04);
        }
    }

    @keyframes software-scan {

        0%,
        100% {
            opacity: 0.25;
            transform: rotate(90deg) translateY(-30px);
        }

        50% {
            opacity: 1;
            transform: rotate(90deg) translateY(30px);
        }
    }

    @keyframes software-core {

        0%,
        100% {
            transform: rotate(0deg) scale(1);
        }

        50% {
            transform: rotate(45deg) scale(1.08);
        }
    }

    @keyframes ai-orbit {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes ai-pulse {

        0%,
        100% {
            transform: scale(.85);
            opacity: .35;
        }

        50% {
            transform: scale(1.2);
            opacity: 1;
        }

    }

    @keyframes ai-core {

        0%,
        100% {
            transform: scale(0.8);
            opacity: 0.65;

            box-shadow:
                0 0 8px rgba(208, 164, 87, 0.7),
                0 0 18px rgba(208, 164, 87, 0.35);
        }

        50% {
            transform: scale(1.5);
            opacity: 1;

            box-shadow:
                0 0 14px rgba(208, 164, 87, 1),
                0 0 32px rgba(208, 164, 87, 0.65),
                0 0 55px rgba(208, 164, 87, 0.3);
        }
    }

    @keyframes data-bars {

        0%,
        100% {
            opacity: 0.55;
            transform: scaleY(0.92);
        }

        50% {
            opacity: 1;
            transform: scaleY(1.05);
        }
    }

    @keyframes data-line {

        0%,
        100% {
            opacity: 0.35;
            transform: rotate(-24deg) translateX(-8px);
        }

        50% {
            opacity: 1;
            transform: rotate(-24deg) translateX(8px);
        }
    }

    @keyframes data-point {

        0%,
        100% {
            transform: translate(-34px, 18px) scale(0.8);
            opacity: 0.55;
        }

        50% {
            transform: translate(34px, -18px) scale(1.35);
            opacity: 1;
        }
    }

    body.home-page #services .service-card+.service-card {
        margin-top: 32px;
    }

    body.home-page #services .service-card:nth-child(1) {
        top: 92px;
        z-index: 1;
    }

    body.home-page #services .service-card:nth-child(2) {
        top: 108px;
        z-index: 2;
    }

    body.home-page #services .service-card:nth-child(3) {
        top: 124px;
        z-index: 3;
    }

    body.home-page #services .service-card:nth-child(4) {
        top: 140px;
        z-index: 4;
    }

    body.home-page #services .service-card:nth-child(5) {
        top: 156px;
        z-index: 5;
    }

    body.home-page #services .service-card h2 {
        position: relative;
        width: 100%;
        max-width: none;
        margin: 0 0 26px;
        padding-top: 18px;
        color: var(--anthoria-text);
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(1.75rem, 7.2vw, 2.35rem);
        font-weight: 500;
        line-height: 1.02;
        letter-spacing: -0.03em;
        white-space: normal;
    }

    body.home-page #services .service-card h2::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 34px;
        height: 2px;
        background: var(--anthoria-gold);
    }

    body.home-page #services .service-card p {
        margin: 0 0 auto;
        max-width: 31ch;
        color: var(--anthoria-muted);
        font-size: 0.98rem;
        line-height: 1.55;
    }

    body.home-page #services .service-card>span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        margin-top: 42px;
        color: var(--anthoria-gold);
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    body.home-page #services .service-card>span::after {
        content: "→";
        font-size: 1.1rem;
    }

    body.home-page #services .service-card:active {
        transform: scale(0.988);
    }

    /* Remove light backgrounds inherited from desktop CSS. */
    body.home-page footer {
        background: var(--anthoria-bg);
        color: var(--anthoria-text);
    }

    body.home-page main>.weather-widget {
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.dark-theme.home-page main>.weather-widget,
    body.dark-theme.home-page main>.weather-widget p,
    body.dark-theme.home-page main>.weather-widget span,
    body.dark-theme.home-page main>.weather-widget h2,
    body.dark-theme.home-page main>.weather-widget h3,
    body.dark-theme.home-page main>.weather-widget strong,
    body.dark-theme.home-page main>.weather-widget small {
        color: #d0a457;
    }

    body:not(.dark-theme).home-page main>.weather-widget,
    body:not(.dark-theme).home-page main>.weather-widget p,
    body:not(.dark-theme).home-page main>.weather-widget span,
    body:not(.dark-theme).home-page main>.weather-widget h2,
    body:not(.dark-theme).home-page main>.weather-widget h3,
    body:not(.dark-theme).home-page main>.weather-widget strong,
    body:not(.dark-theme).home-page main>.weather-widget small {
        color: #9b6c25;
    }

    /* ==========================================================
       WEB DEVELOPMENT — MOBILE
       Corrige services.html sin afectar Home ni escritorio
       ========================================================== */

    body:has(.services-page) {
        width: 100%;
        min-height: 100%;
        margin: 0;
        overflow-x: hidden;
    }

    body:has(.services-page) main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    body:has(.services-page) header {
        width: 100%;
        max-width: none;
    }

    body:has(.services-page) main>section:first-child {
        width: 100%;
        max-width: none;
    }

    .services-page {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        max-width: none;
        min-height: auto;

        margin: 0;
        padding: 20px 20px 70px;

        overflow: visible;
    }

    .services-page .web-development-content {
        display: contents;
    }

    .services-page .service-label {
        order: 1;
    }

    .services-page .web-development-content h1 {
        order: 2;
    }

    .services-page .service-subtitle {
        order: 3;
    }

    .services-page .service-divider {
        order: 4;
    }

    .services-page .service-description {
        order: 5;
    }

    .services-page .service-features {
        order: 6;
    }

    .services-page .service-extra-description {
        order: 7;
    }

    .services-page .web-development-devices {
        order: 8;
    }

    .services-page .service-price-card {
        order: 9;
    }

    /* Contenido de texto */

    .services-page .web-development-content {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        transform: none;
        text-align: left;
    }

    .services-page .service-label {
        display: block;

        margin: 0 0 24px;

        color: #b98227;

        font-size: 0.72rem;
        line-height: 1;
        letter-spacing: 0.28em;
        text-align: left;

        transform: none;
    }

    .services-page .web-development-content h1 {
        width: 100%;
        max-width: none;

        margin: 0 0 20px;
        padding: 0;

        font-size: clamp(2.2rem, 10vw, 4rem);
        line-height: 0.94;
        letter-spacing: -0.035em;

        text-align: left;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .services-page .service-subtitle {
        width: 100%;
        max-width: 31ch;

        margin: 0 auto 30px;

        font-size: 1.05rem;
        line-height: 1.55;

        text-align: left;
        text-wrap: pretty;
    }

    .services-page .service-divider {
        width: 100%;
        max-width: none;

        margin: 0 auto 32px;
    }

    .services-page .service-description {
        width: 100%;
        max-width: 35ch;

        margin: 0 0 34px;

        font-size: 0.96rem;
        line-height: 1.75;

        text-align: left;
        text-wrap: pretty;
        overflow-wrap: normal;
        word-break: normal;
    }

    .services-page .service-extra-description {
        width: 100%;
        max-width: 35ch;

        margin: 0 0 38px;

        text-align: left;
        line-height: 1.75;
    }

    /* Tarjeta del precio:
       deja de estar flotando encima del texto */

    .services-page .service-price-card {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        z-index: 3;

        width: 100%;
        max-width: none;

        margin: 0 0 30px;
        padding: 22px;

        transform: none;
        transform-style: flat;
    }

    .services-page .service-price-card:hover {
        transform: none;
    }

    .services-page .price-information {
        gap: 12px;
        width: 100%;
    }

    .services-page .price-information strong {
        font-size: 1.85rem;
        white-space: nowrap;
    }

    .services-page .service-quote-button {
        width: 100%;
        min-height: 54px;
        padding: 14px 16px;
    }

    /* Beneficios */

    .services-page .service-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;

        width: 100%;
        max-width: none;

        margin: 0 0 40px;
    }

    .services-page .feature-item {
        width: 100%;
        min-width: 0;
        min-height: 128px;

        padding: 17px 15px;

        overflow: hidden;
    }

    .services-page .feature-item strong {
        display: block;

        margin: 0 0 8px;

        font-size: 0.87rem;
        line-height: 1.3;

        overflow-wrap: normal;
        word-break: normal;
    }

    .services-page .feature-item span {
        display: block;

        font-size: 0.76rem;
        line-height: 1.5;

        overflow-wrap: normal;
        word-break: normal;
    }

    /* Portátil y teléfono */

    .services-page .web-development-devices {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: none;

        margin: 10px 0 0;

        animation: device-soft-float 3.5s ease-in-out infinite;
    }

    .services-page .web-development-devices img {
        display: block;

        width: 112%;
        max-width: none;
        height: auto;

        margin: 0 -6%;
    }

    /* Oculta la nota pequeña superpuesta en móvil.
       Después crearemos una versión móvil apropiada. */

    .services-page .phone-business-note {
        display: none;
    }

    /* ==========================================================
       WEB DEVELOPMENT — MÓDULOS TECNOLÓGICOS
       ========================================================== */

    .services-page .service-features .feature-item {
        position: relative;
        isolation: isolate;

        min-height: 128px;
        padding: 22px 18px 18px;

        overflow: hidden;

        background-color: #0b0c0b;

        background-image:
            radial-gradient(circle at 88% 15%,
                rgba(208, 164, 87, 0.20),
                transparent 35%),
            linear-gradient(145deg,
                rgba(24, 22, 18, 0.98),
                rgba(8, 9, 8, 0.99));

        border: 1px solid rgba(208, 164, 87, 0.58);
        border-radius: 18px;

        color: #f5f0e8;

        box-shadow:
            0 16px 34px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .services-page .feature-item strong {
        position: relative;
        z-index: 2;

        color: var(--anthoria-text);
    }

    .services-page .feature-item span {
        position: relative;
        z-index: 2;

        color: var(--anthoria-muted);
    }

    /* Línea energética superior */

    .services-page .feature-item::before {
        content: "";

        position: absolute;
        top: 0;
        left: 16px;
        z-index: 2;

        width: 46px;
        height: 2px;

        background:
            linear-gradient(to right,
                var(--anthoria-gold),
                rgba(208, 164, 87, 0.15));

        box-shadow:
            0 0 8px rgba(208, 164, 87, 0.65),
            0 0 18px rgba(208, 164, 87, 0.28);
    }

    /* Punto de estado */

    .services-page .feature-item::after {
        content: "";

        position: absolute;
        right: 15px;
        bottom: 15px;
        z-index: 2;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: var(--anthoria-gold);

        box-shadow:
            0 0 0 4px rgba(208, 164, 87, 0.10),
            0 0 12px rgba(208, 164, 87, 0.75),
            0 0 24px rgba(208, 164, 87, 0.35);

        animation:
            anthoria-status-pulse 2.4s ease-in-out infinite;
    }

    @keyframes anthoria-status-pulse {

        0%,
        100% {
            opacity: 0.45;
            transform: scale(0.82);
        }

        50% {
            opacity: 1;
            transform: scale(1.2);
        }
    }

    /* ==========================================================
   AI & AUTOMATION — HEADER MÓVIL
   ========================================================== */

    body.ai-automation-page-body>header {
        padding-left: 22px;
        padding-right: 22px;

        border: none;
        border-bottom: none;

        background: transparent;

        box-shadow: none;
        filter: none;
    }

    body.ai-automation-page-body>header nav {
        border: none;
        border-bottom: none;

        background: transparent;

        box-shadow: none;
        filter: none;
    }

    /* Elimina la franja decorativa solo en AI móvil */
    body.ai-automation-page-body>header::before,
    body.ai-automation-page-body>header::after,
    body.ai-automation-page-body>header nav::before,
    body.ai-automation-page-body>header nav::after {
        display: none;
        content: none;
    }

    /* Sube todo el contenido de AI & Automation */
    body.ai-automation-page-body main>section.ai-automation-page {
        padding-top: 105px;
    }

    /* Alinea el encabezado a la izquierda */
    body.ai-automation-page-body .ai-automation-intro {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    body.ai-automation-page-body .ai-automation-title {
        width: 100%;
        max-width: none;
        text-align: left;
    }

    /* Organiza Anthory y sus funciones en móvil */
    body.ai-automation-page-body .anthory-workspace {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;

        width: 100%;
        min-height: 0;
        margin-top: 55px;
    }

    /* El chat ocupa las dos columnas */
    body.ai-automation-page-body .anthory-chat {
        position: relative;
        top: auto;
        left: auto;

        grid-column: 1 / -1;
        grid-row: 1;

        width: 100%;
        min-height: 610px;
        margin: 0 0 28px;

        transform: none;
    }

    /*
       nth-of-type(n) iguala la especificidad de las posiciones
       utilizadas en ai-automation.css.
    */
    body.ai-automation-page-body .ai-capability-card:nth-of-type(n) {
        display: block;
        position: relative;
        inset: auto;

        width: 100%;
        min-width: 0;
        min-height: 86px;
        padding: 13px 10px;

        transform: none;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(3) {
        grid-column: 1;
        grid-row: 3;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(4) {
        grid-column: 2;
        grid-row: 3;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(5) {
        grid-column: 1;
        grid-row: 4;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(6) {
        grid-column: 2;
        grid-row: 4;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(7) {
        grid-column: 1;
        grid-row: 5;
    }

    body.ai-automation-page-body .ai-capability-card:nth-of-type(8) {
        grid-column: 2;
        grid-row: 5;
    }

    /* ==========================================================
   BLOGS — SELECTOR DE ARTÍCULOS TIPO VIDEOJUEGO
   SOLO MÓVIL
   ========================================================== */

    body:has(.blogs-section) .blogs-layout {
        display: block;
        width: 100%;
        overflow: visible;
    }

    /* Contenedor principal */

    body:has(.blogs-section) #blogCarousel {
        position: relative;

        width: calc(100% + 40px);
        margin: 6px -20px 48px;

        padding: 34px 0 66px;

        overflow: hidden;

        background:
            radial-gradient(circle at 50% 45%,
                rgba(185, 130, 39, 0.14),
                transparent 48%);

        perspective: 1000px;
        isolation: isolate;
    }

    /* Etiqueta superior */

    body:has(.blogs-section) #blogCarousel::before {
        content: "SELECT AN INSIGHT";

        position: absolute;
        top: 3px;
        left: 50%;

        z-index: 8;

        color: rgba(152, 101, 31, 0.76);

        font-family: Arial, sans-serif;
        font-size: 0.58rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.25em;

        transform: translateX(-50%);

        pointer-events: none;
    }

    /* Línea decorativa superior */

    body:has(.blogs-section) #blogCarousel::after {
        content: "";

        position: absolute;
        top: 20px;
        left: 50%;

        z-index: 8;

        width: 88px;
        height: 1px;

        background:
            linear-gradient(90deg,
                transparent,
                var(--anthoria-gold),
                transparent);

        box-shadow:
            0 0 12px rgba(185, 130, 39, 0.34);

        transform: translateX(-50%);

        pointer-events: none;
    }

    /* Área de las tarjetas */

    body:has(.blogs-section) #blogCarousel .carousel-inner {
        position: relative;

        width: 100%;
        height: 430px;

        overflow: visible;

        transform-style: preserve-3d;
    }

    /* Todas las diapositivas se colocan en el mismo centro */

    body:has(.blogs-section) #blogCarousel .carousel-item {
        position: absolute;
        top: 0;
        left: 50%;

        display: block;

        width: min(76vw, 300px);
        height: 390px;

        margin: 0;

        opacity: 0;
        visibility: hidden;

        transform:
            translateX(-50%) scale(0.72) translateZ(-120px);

        transform-origin: center center;

        transition:
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.4s ease,
            filter 0.4s ease;

        pointer-events: none;
    }

    /* Tarjeta activa */

    body:has(.blogs-section) #blogCarousel .carousel-item.active {
        z-index: 4;

        opacity: 1;
        visibility: visible;

        transform:
            translateX(-50%) scale(1) translateZ(0);

        filter: none;

        pointer-events: auto;
    }

    /* Tarjeta que sale hacia la izquierda */

    body:has(.blogs-section) #blogCarousel .carousel-item.carousel-item-start,
    body:has(.blogs-section) #blogCarousel .carousel-item.carousel-item-prev {
        z-index: 2;

        opacity: 0.54;
        visibility: visible;

        transform:
            translateX(-112%) scale(0.78) rotateY(9deg) translateZ(-100px);

        filter:
            brightness(0.72) blur(0.6px);
    }

    /* Tarjeta que entra desde la derecha */

    body:has(.blogs-section) #blogCarousel .carousel-item.carousel-item-end,
    body:has(.blogs-section) #blogCarousel .carousel-item.carousel-item-next {
        z-index: 2;

        opacity: 0.54;
        visibility: visible;

        transform:
            translateX(12%) scale(0.78) rotateY(-9deg) translateZ(-100px);

        filter:
            brightness(0.72) blur(0.6px);
    }

    /* Enlace completo */

    body:has(.blogs-section) #blogCarousel .blog-slide-link {
        display: block;

        width: 100%;
        height: 100%;

        color: inherit;
        text-decoration: none;
    }

    /* Tarjeta */

    body:has(.blogs-section) #blogCarousel .blog-slide {
        position: relative;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border: 1px solid rgba(185, 130, 39, 0.40);
        border-radius: 26px;

        background: #111;

        box-shadow:
            0 30px 65px rgba(71, 49, 21, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.22) inset,
            0 0 36px rgba(185, 130, 39, 0.10);

        transform: none;
    }

    /* Resplandor alrededor de la tarjeta elegida */

    body:has(.blogs-section) #blogCarousel .carousel-item.active .blog-slide {
        animation:
            anthoria-selected-card 3.2s ease-in-out infinite;
    }

    /* Imagen */

    body:has(.blogs-section) #blogCarousel .blog-image {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transform: scale(1.03);

        transition:
            transform 5s ease;
    }

    body:has(.blogs-section) #blogCarousel .carousel-item.active .blog-image {
        transform: scale(1.10);
    }

    /* Oscurecimiento para que el texto se lea */

    body:has(.blogs-section) #blogCarousel .blog-slide::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(to bottom,
                rgba(8, 8, 7, 0.04) 14%,
                rgba(8, 8, 7, 0.24) 43%,
                rgba(8, 8, 7, 0.94) 100%);

        pointer-events: none;
    }

    /* Marco interior tecnológico */

    body:has(.blogs-section) #blogCarousel .blog-slide::after {
        content: "";

        position: absolute;
        inset: 11px;
        z-index: 2;

        border:
            1px solid rgba(208, 164, 87, 0.24);

        border-radius: 18px;

        pointer-events: none;
    }

    /* Texto */

    body:has(.blogs-section) #blogCarousel .blog-slide-content {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 28px 24px 26px;

        color: #fff;

        text-align: left;

        transform: none;
    }

    /* Categoría */

    body:has(.blogs-section) #blogCarousel .blog-category {
        margin: 0 0 12px;

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.63rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.19em;
        text-transform: uppercase;
    }

    /* Título */

    body:has(.blogs-section) #blogCarousel .blog-slide-content h2 {
        width: 100%;
        max-width: none;

        margin: 0 0 12px;

        color: #fff;

        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(1.55rem, 7vw, 2rem);
        font-weight: 500;
        line-height: 1.02;
        letter-spacing: -0.025em;

        text-shadow:
            0 3px 15px rgba(0, 0, 0, 0.55);
    }

    /* Descripción */

    body:has(.blogs-section) #blogCarousel .blog-slide-content>p:last-child {
        display: block;

        max-width: 31ch;
        margin: 0;

        color: rgba(255, 255, 255, 0.76);

        font-family: Arial, sans-serif;
        font-size: 0.78rem;
        line-height: 1.48;
    }

    /* Estado de selección */

    body:has(.blogs-section) #blogCarousel .carousel-item.active .blog-slide-content::before {
        content: "SELECTED";

        display: none;
        align-items: center;

        min-height: 25px;

        margin-bottom: 13px;
        padding: 0 10px;

        border:
            1px solid rgba(208, 164, 87, 0.48);

        border-radius: 999px;

        background:
            rgba(7, 8, 7, 0.44);

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.52rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.18em;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Flechas de navegación */

    body:has(.blogs-section) #blogCarousel .carousel-control-prev,
    body:has(.blogs-section) #blogCarousel .carousel-control-next {
        position: absolute;
        top: auto;
        bottom: 7px;
        z-index: 10;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        border:
            1px solid rgba(185, 130, 39, 0.38);

        border-radius: 50%;

        background:
            rgba(255, 252, 247, 0.68);

        opacity: 1;

        box-shadow:
            0 10px 25px rgba(71, 49, 21, 0.13);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    body:has(.blogs-section) #blogCarousel .carousel-control-prev {
        left: calc(50% - 66px);
    }

    body:has(.blogs-section) #blogCarousel .carousel-control-next {
        right: calc(50% - 66px);
    }

    /* Sustituye el icono de Bootstrap */

    body:has(.blogs-section) #blogCarousel .carousel-control-prev-icon,
    body:has(.blogs-section) #blogCarousel .carousel-control-next-icon {
        width: auto;
        height: auto;

        background: none;

        color: #98651f;

        font-family: Arial, sans-serif;
        font-size: 1.1rem;
        line-height: 1;
    }

    body:has(.blogs-section) #blogCarousel .carousel-control-prev-icon::before {
        content: "←";
    }

    body:has(.blogs-section) #blogCarousel .carousel-control-next-icon::before {
        content: "→";
    }

    /* Dark Theme */

    body.dark-theme:has(.blogs-section) #blogCarousel {
        background:
            radial-gradient(circle at 50% 45%,
                rgba(208, 164, 87, 0.13),
                transparent 48%);
    }

    body.dark-theme:has(.blogs-section) #blogCarousel .carousel-control-prev,
    body.dark-theme:has(.blogs-section) #blogCarousel .carousel-control-next {
        border-color: rgba(208, 164, 87, 0.34);

        background:
            rgba(10, 11, 10, 0.72);

        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.34);
    }

    body.dark-theme:has(.blogs-section) #blogCarousel .carousel-control-prev-icon,
    body.dark-theme:has(.blogs-section) #blogCarousel .carousel-control-next-icon {
        color: var(--anthoria-gold);
    }

    /* Animación del marco seleccionado */

    @keyframes anthoria-selected-card {

        0%,
        100% {
            box-shadow:
                0 30px 65px rgba(71, 49, 21, 0.28),
                0 0 0 1px rgba(255, 255, 255, 0.20) inset,
                0 0 24px rgba(185, 130, 39, 0.08);
        }

        50% {
            box-shadow:
                0 35px 75px rgba(71, 49, 21, 0.34),
                0 0 0 1px rgba(208, 164, 87, 0.42) inset,
                0 0 42px rgba(185, 130, 39, 0.22);
        }
    }

    /* Evita movimiento intenso si el usuario lo prefiere */

    @media (prefers-reduced-motion: reduce) {

        body:has(.blogs-section) #blogCarousel .carousel-item,
        body:has(.blogs-section) #blogCarousel .blog-image,
        body:has(.blogs-section) #blogCarousel .blog-slide {
            animation: none !important;
            transition: none !important;
        }
    }

    /* ==========================================================
   BLOGS — SEGUNDO SELECTOR: LATEST INSIGHTS
   SOLO MÓVIL
   ========================================================== */

    /* Cuadro exterior */

    body:has(.blogs-section) .insights-panel {
        position: relative;

        display: block;

        width: calc(100% + 40px);
        margin: 0 -20px 54px;
        padding: 66px 0 72px;

        overflow: hidden;

        border-top:
            1px solid rgba(185, 130, 39, 0.18);

        border-bottom:
            1px solid rgba(185, 130, 39, 0.18);

        background:
            radial-gradient(circle at 50% 30%,
                rgba(185, 130, 39, 0.14),
                transparent 48%);

        isolation: isolate;
    }

    /* Título principal del cuadro */

    body:has(.blogs-section) .insights-panel-title {
        position: absolute;
        top: 21px;
        left: 50%;
        z-index: 8;

        width: max-content;
        margin: 0;

        color: rgba(152, 101, 31, 0.78);

        font-family: Arial, sans-serif;
        font-size: 0.58rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.25em;
        text-transform: uppercase;

        transform: translateX(-50%);
    }

    /* Línea tecnológica debajo del título */

    body:has(.blogs-section) .insights-panel-title::after {
        content: "";

        position: absolute;
        top: 22px;
        left: 50%;

        width: 92px;
        height: 1px;

        background:
            linear-gradient(90deg,
                transparent,
                var(--anthoria-gold),
                transparent);

        box-shadow:
            0 0 12px rgba(185, 130, 39, 0.32);

        transform: translateX(-50%);
    }

    /* Convierte los cinco enlaces en una fila desplazable */

    body:has(.blogs-section) .insights-panel {
        white-space: nowrap;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc((100vw - min(76vw, 300px)) / 2);

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    body:has(.blogs-section) .insights-panel::-webkit-scrollbar {
        display: none;
    }

    /* El título no forma parte de la fila */

    body:has(.blogs-section) .insights-panel-title {
        white-space: normal;
    }

    /* Todos los enlaces se convierten en tarjetas */

    body:has(.blogs-section) .insights-panel>.insight-card-link,
    body:has(.blogs-section) .small-insights-grid>.insight-card-link {
        display: inline-block;

        width: min(76vw, 300px);
        height: 390px;

        margin: 0 7px;

        vertical-align: top;

        white-space: normal;

        color: inherit;
        text-decoration: none;

        scroll-snap-align: center;
        scroll-snap-stop: always;

        transform: scale(0.92);

        transition:
            transform 0.35s ease,
            opacity 0.35s ease,
            filter 0.35s ease;
    }

    /* Espacio inicial para centrar la primera tarjeta */

    body:has(.blogs-section) .insights-panel>.insight-card-link:first-of-type {
        margin-left:
            calc((100vw - min(76vw, 300px)) / 2);
    }

    /* El contenedor de las cuatro tarjetas deja de ser cuadrícula */

    body:has(.blogs-section) .small-insights-grid {
        display: inline;

        width: auto;
        margin: 0;
        padding: 0;

        white-space: nowrap;
    }

    /* Espacio final para centrar la última tarjeta */

    body:has(.blogs-section) .small-insights-grid>.insight-card-link:last-child {
        margin-right:
            calc((100vw - min(76vw, 300px)) / 2);
    }

    /* Todas las tarjetas tendrán la misma forma */

    body:has(.blogs-section) .featured-insight,
    body:has(.blogs-section) .small-insight-card {
        position: relative;

        display: block;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border:
            1px solid rgba(185, 130, 39, 0.40);

        border-radius: 26px;

        background: #111;

        box-shadow:
            0 28px 62px rgba(71, 49, 21, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.20),
            0 0 30px rgba(185, 130, 39, 0.09);

        transform: none;
    }

    /* Todas las imágenes ocupan la tarjeta completa */

    body:has(.blogs-section) .featured-insight-image,
    body:has(.blogs-section) .small-insight-card>img {
        position: absolute;
        inset: 0;

        display: block;
        z-index: 0;
        visibility: visible;
        opacity: 1;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transform: scale(1.04);

        transition:
            transform 4s ease;
    }

    /* Degradado oscuro */

    body:has(.blogs-section) .featured-insight::before,
    body:has(.blogs-section) .small-insight-card::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        background:
            linear-gradient(to bottom,
                rgba(8, 8, 7, 0.03) 12%,
                rgba(8, 8, 7, 0.24) 44%,
                rgba(8, 8, 7, 0.95) 100%);

        pointer-events: none;
    }

    /* Marco interior */

    body:has(.blogs-section) .featured-insight::after,
    body:has(.blogs-section) .small-insight-card::after {
        content: "";

        position: absolute;
        inset: 11px;
        z-index: 2;

        border:
            1px solid rgba(208, 164, 87, 0.24);

        border-radius: 18px;

        pointer-events: none;
    }

    /* Contenido textual */

    body:has(.blogs-section) .featured-insight-content,
    body:has(.blogs-section) .small-insight-content {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        padding: 28px 24px 26px;

        color: #fff;

        text-align: left;

        transform: none;
    }

    /* Categoría */

    body:has(.blogs-section) .insights-panel .blog-category {
        margin: 0 0 12px;

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* Títulos */

    body:has(.blogs-section) .featured-insight-content h3,
    body:has(.blogs-section) .small-insight-content h3 {
        width: 100%;
        max-width: none;

        margin: 0;

        color: #fff;

        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: clamp(1.5rem, 6.8vw, 1.95rem);
        font-weight: 500;
        line-height: 1.04;
        letter-spacing: -0.025em;

        text-shadow:
            0 3px 15px rgba(0, 0, 0, 0.55);
    }

    /* Etiqueta visual en cada tarjeta */

    body:has(.blogs-section) .featured-insight-content::before,
    body:has(.blogs-section) .small-insight-content::before {
        content: "LATEST INSIGHT";

        display: none;
        align-items: center;

        min-height: 25px;

        margin-bottom: 13px;
        padding: 0 10px;

        border:
            1px solid rgba(208, 164, 87, 0.46);

        border-radius: 999px;

        background:
            rgba(7, 8, 7, 0.46);

        color: #e1b55f;

        font-family: Arial, sans-serif;
        font-size: 0.50rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.17em;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Texto inferior de ayuda */

    body:has(.blogs-section) .insights-panel::after {
        content: "SWIPE TO EXPLORE  •  05 ARTICLES";

        position: absolute;
        bottom: 24px;
        left: 50%;
        z-index: 8;

        width: max-content;

        color: rgba(152, 101, 31, 0.60);

        font-family: Arial, sans-serif;
        font-size: 0.52rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.19em;

        transform: translateX(-50%);

        pointer-events: none;
    }

    /* Pulsación táctil */

    body:has(.blogs-section) .insights-panel .insight-card-link:active {
        transform: scale(0.89);
    }

    /* Dark Theme */

    body.dark-theme:has(.blogs-section) .insights-panel {
        border-color:
            rgba(208, 164, 87, 0.17);

        background:
            radial-gradient(circle at 50% 30%,
                rgba(208, 164, 87, 0.13),
                transparent 48%);
    }

    body.dark-theme:has(.blogs-section) .featured-insight,
    body.dark-theme:has(.blogs-section) .small-insight-card {
        border-color:
            rgba(208, 164, 87, 0.38);

        box-shadow:
            0 30px 68px rgba(0, 0, 0, 0.50),
            inset 0 1px 0 rgba(255, 255, 255, 0.045),
            0 0 32px rgba(208, 164, 87, 0.08);
    }

    /* Pantallas muy estrechas */

    @media (max-width: 390px) {

        body:has(.blogs-section) .insights-panel>.insight-card-link,
        body:has(.blogs-section) .small-insights-grid>.insight-card-link {
            width: 78vw;
            height: 372px;
        }

        body:has(.blogs-section) .insights-panel>.insight-card-link:first-of-type {
            margin-left: 11vw;
        }

        body:has(.blogs-section) .small-insights-grid>.insight-card-link:last-child {
            margin-right: 11vw;
        }
    }

    /* ==========================================================
   BLOGS — ANIMACIÓN AMBIENTAL DEL SEGUNDO SELECTOR
   SOLO CSS / SOLO MÓVIL
   ========================================================== */

    /* Movimiento suave del fondo del cuadro */

    body:has(.blogs-section) .insights-panel {
        background-size: 160% 160%;

        animation:
            anthoria-insights-background 10s ease-in-out infinite alternate;
    }

    /* Tarjetas con movimiento alternado */

    body:has(.blogs-section) .insights-panel>.insight-card-link,

    body:has(.blogs-section) .small-insights-grid>.insight-card-link {
        animation:
            anthoria-insight-float-left 5.8s ease-in-out infinite;
    }

    /* Las tarjetas pares se mueven en sentido contrario */

    body:has(.blogs-section) .small-insights-grid>.insight-card-link:nth-child(even) {
        animation-name:
            anthoria-insight-float-right;

        animation-duration: 6.6s;
    }

    /* Variación para evitar que todas se muevan a la vez */

    body:has(.blogs-section) .insights-panel>.insight-card-link:first-of-type {
        animation-delay: -1.4s;
    }

    body:has(.blogs-section) .small-insights-grid>.insight-card-link:nth-child(1) {
        animation-delay: -2.8s;
    }

    body:has(.blogs-section) .small-insights-grid>.insight-card-link:nth-child(2) {
        animation-delay: -4.1s;
    }

    body:has(.blogs-section) .small-insights-grid>.insight-card-link:nth-child(3) {
        animation-delay: -1.9s;
    }

    body:has(.blogs-section) .small-insights-grid>.insight-card-link:nth-child(4) {
        animation-delay: -3.5s;
    }

    /* Zoom lento de las imágenes */

    body:has(.blogs-section) .insights-panel .featured-insight-image,

    body:has(.blogs-section) .insights-panel .small-insight-card>img {
        animation:
            anthoria-insight-image-breathe 9s ease-in-out infinite alternate;
    }

    /* Variación de velocidad entre imágenes */

    body:has(.blogs-section) .small-insights-grid .insight-card-link:nth-child(even) .small-insight-card>img {
        animation-duration: 11s;
        animation-direction: alternate-reverse;
    }

    /* Resplandor que recorre el marco interior */

    body:has(.blogs-section) .featured-insight::after,
    body:has(.blogs-section) .small-insight-card::after {
        border-color:
            rgba(208, 164, 87, 0.22);

        box-shadow:
            inset 0 0 16px rgba(208, 164, 87, 0.03);

        animation:
            anthoria-insight-frame-glow 4.8s ease-in-out infinite;
    }

    /* Indicador inferior con pulso suave */

    body:has(.blogs-section) .insights-panel::after {
        animation:
            anthoria-insight-label-pulse 2.8s ease-in-out infinite;
    }

    /* Movimiento hacia la izquierda */

    @keyframes anthoria-insight-float-left {

        0%,
        100% {
            transform:
                translate3d(0, 0, 0) scale(0.92);
        }

        50% {
            transform:
                translate3d(-5px, -7px, 0) scale(0.935);
        }
    }

    /* Movimiento hacia la derecha */

    @keyframes anthoria-insight-float-right {

        0%,
        100% {
            transform:
                translate3d(0, -3px, 0) scale(0.92);
        }

        50% {
            transform:
                translate3d(5px, 5px, 0) scale(0.94);
        }
    }

    /* Respiración de las imágenes */

    @keyframes anthoria-insight-image-breathe {
        0% {
            transform:
                scale(1.04) translate3d(-1%, 0, 0);
        }

        100% {
            transform:
                scale(1.12) translate3d(1%, -1%, 0);
        }
    }

    /* Movimiento de la iluminación del cuadro */

    @keyframes anthoria-insights-background {
        0% {
            background-position:
                40% 30%;
        }

        100% {
            background-position:
                62% 48%;
        }
    }

    /* Pulso del marco */

    @keyframes anthoria-insight-frame-glow {

        0%,
        100% {
            border-color:
                rgba(208, 164, 87, 0.18);

            box-shadow:
                inset 0 0 14px rgba(208, 164, 87, 0.02);
        }

        50% {
            border-color:
                rgba(208, 164, 87, 0.42);

            box-shadow:
                inset 0 0 22px rgba(208, 164, 87, 0.09);
        }
    }

    /* Pulso del texto inferior */

    @keyframes anthoria-insight-label-pulse {

        0%,
        100% {
            opacity: 0.45;
            letter-spacing: 0.19em;
        }

        50% {
            opacity: 0.9;
            letter-spacing: 0.22em;
        }
    }

    /* Detiene la flotación durante el toque para facilitar el deslizamiento */

    body:has(.blogs-section) .insights-panel .insight-card-link:active {
        animation-play-state: paused;

        transform:
            scale(0.89);
    }

    /* Accesibilidad */

    @media (prefers-reduced-motion: reduce) {

        body:has(.blogs-section) .insights-panel,

        body:has(.blogs-section) .insights-panel .insight-card-link,

        body:has(.blogs-section) .insights-panel img,

        body:has(.blogs-section) .featured-insight::after,

        body:has(.blogs-section) .small-insight-card::after,

        body:has(.blogs-section) .insights-panel::after {
            animation: none !important;
        }
    }

    /* ----------------------------------------------------------
       BLOGS — TARJETAS GRANDES DEL CARRUSEL
       ---------------------------------------------------------- */

    /* Capa para mantener legibles los textos de Blogs */

    body:has(.blogs-section) #blogCarousel .blog-slide::before {
        background:
            linear-gradient(to bottom,
                rgba(8, 8, 7, 0.08) 10%,
                rgba(8, 8, 7, 0.30) 48%,
                rgba(8, 8, 7, 0.94) 100%);
    }


    /* ----------------------------------------------------------
       HOME — CINCO TARJETAS GRANDES DE SERVICIOS
       ---------------------------------------------------------- */

    body:not(.dark-theme).home-page #services .service-card {
        background:
            linear-gradient(to bottom,
                rgba(255, 252, 247, 0.38) 0%,
                rgba(244, 237, 226, 0.52) 55%,
                rgba(244, 237, 226, 0.78) 100%),
            url(../../assets/images/home-mobile-ivory.jpg) right 52% / 175% auto no-repeat;
    }

    body.dark-theme.home-page #services .service-card {
        background:
            linear-gradient(to bottom,
                rgba(5, 6, 5, 0.70) 0%,
                rgba(5, 6, 5, 0.84) 55%,
                rgba(5, 6, 5, 0.97) 100%),
            url(../../assets/images/home-mobile-dark.jpg) right 55% / 190% auto no-repeat;
    }


    /* ==========================================================
       WEB DEVELOPMENT — CUADROS EN MODO IVORY
       ========================================================== */

    body:not(.dark-theme):has(.services-page) .services-page .service-features .feature-item {
        background-color: #f7efe3;

        background-image:
            radial-gradient(circle at 88% 15%,
                rgba(185, 130, 39, 0.16),
                transparent 38%),
            linear-gradient(145deg,
                rgba(255, 253, 248, 0.98),
                rgba(235, 222, 201, 0.96));

        border: 1px solid rgba(183, 138, 61, 0.48);
        color: #29251f;

        box-shadow:
            0 16px 34px rgba(76, 52, 21, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    /* Títulos de los cuadros */

    body:not(.dark-theme):has(.services-page) .services-page .feature-item strong {
        color: #29251f;
    }

    /* Textos pequeños de los cuadros */

    body:not(.dark-theme):has(.services-page) .services-page .feature-item span {
        color: rgba(45, 41, 36, 0.74);
    }

    /* ==========================================================
       FONDO GENERAL MÓVIL
       Imagen de Home detrás de Blogs y Services
       ========================================================== */

    body:has(.blogs-section),
    body:has(.services-page) {
        min-height: 100svh;

        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    /* ----------------------------------------------------------
       IVORY
       ---------------------------------------------------------- */

    body:not(.dark-theme):has(.blogs-section),
    body:not(.dark-theme):has(.services-page) {
        background-image:
            linear-gradient(rgba(244, 237, 226, 0.76),
                rgba(244, 237, 226, 0.86)),
            url(../../assets/images/home-mobile-ivory.jpg);

        background-color: #f4ede2;
    }

    /* ----------------------------------------------------------
       DARK
       ---------------------------------------------------------- */

    body.dark-theme:has(.blogs-section),
    body.dark-theme:has(.services-page) {
        background-image:
            linear-gradient(rgba(5, 6, 5, 0.78),
                rgba(5, 6, 5, 0.88)),
            url(../../assets/images/home-mobile-dark.jpg);

        background-color: #050605;
    }

    /* ----------------------------------------------------------
       Contenedores transparentes
       ---------------------------------------------------------- */

    body:has(.blogs-section) main,
    body:has(.blogs-section) main>section.blogs-section,
    body:has(.services-page) main,
    body:has(.services-page) main>section.services-page {
        background: transparent;
        background-color: transparent;
    }

    /* ==========================================================
       CONTACT — DISEÑO EXCLUSIVO PARA MÓVIL
       ========================================================== */

    body:has(.contact-section),
    body:has(.contact-section) main {
        width: 100%;
        min-height: 100svh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body:has(.contact-section) main>section.contact-section {
        position: relative;

        width: 100%;
        max-width: none;
        height: 100svh;
        min-height: 700px;

        margin: 0;
        padding: 0;
        overflow: hidden;

        background-position: center bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    body:not(.dark-theme):has(.contact-section) main>section.contact-section {
        background-image:
            linear-gradient(to bottom,
                #f4ede2 0%,
                rgba(244, 237, 226, 0.80) 6%,
                rgba(244, 237, 226, 0) 18%,
                rgba(244, 237, 226, 0) 82%,
                rgba(244, 237, 226, 0.80) 94%,
                #f4ede2 100%),
            url(../../assets/images/contact-showcase-mobile.jpg);
    }

    body.dark-theme:has(.contact-section) main>section.contact-section {
        background-image:
            linear-gradient(to bottom,
                #050605 0%,
                rgba(5, 6, 5, 0.82) 6%,
                rgba(5, 6, 5, 0) 18%,
                rgba(5, 6, 5, 0) 82%,
                rgba(5, 6, 5, 0.82) 94%,
                #050605 100%),
            url(../../assets/images/contact-showcase-mobile-dark.jpg);
    }

    /* Contenedor de Email, WhatsApp y Appointment */

    body:has(.contact-section) .phone-contact-panels {
        position: absolute;
        inset: 0;
        z-index: 5;

        display: block;

        width: 100%;
        height: 100%;
        margin: 0;

        transform: none;
        pointer-events: none;
    }

    /* Tres tarjetas */

    body.contact-page .contact-section .phone-contact-panels .phone-contact-card {
        position: absolute;

        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;

        width: min(33vw, 145px);
        min-height: 66px;
        margin: 0;
        padding: 8px 11px;

        border-radius: 13px;

        background:
            linear-gradient(135deg,
                rgba(221, 181, 108, 0.30),
                rgba(165, 111, 42, 0.22));

        transform: translate(-50%, -50%);
        transform-origin: center;

        pointer-events: auto;
    }

    body.contact-page .contact-section .phone-contact-panels .phone-contact-card:nth-child(1) {
        top: 23.8%;
        left: 30.5%;
        transform: translate(-46%, -30%);
    }

    body.contact-page .contact-section .phone-contact-panels .phone-contact-card:nth-child(2) {
        top: 51.8%;
        left: 32.5%;
        transform: translate(-52%, -47%) rotate(-0.4deg);
    }

    body.contact-page .contact-section .phone-contact-panels .phone-contact-card:nth-child(3) {
        top: 79.5%;
        left: 40.5%;
        transform: translate(-53%, -47%) rotate(-0.5deg);
    }

    body.contact-page .contact-section .phone-contact-label {
        margin-bottom: 3px;

        color: #8f5c18;

        font-size: 0.49rem;
        font-weight: 400;
        letter-spacing: 0.15em;

        text-shadow:
            0 1px 2px rgba(255, 248, 232, 0.90),
            0 0 8px rgba(185, 130, 39, 0.30);
    }

    body:has(.contact-section) .phone-contact-card strong {
        font-size: 1.08rem;
        line-height: 1;
    }

    body:has(.contact-section) .phone-contact-arrow {
        margin-left: 8px;
        font-size: 1.05rem;
    }

    /* Mensaje situado en la parte superior del teléfono */

    body:has(.contact-section) .customer-care-message {
        position: absolute;
        top: auto;
        bottom: 3%;
        left: 50%;
        right: auto;
        z-index: 5;

        width: min(90vw, 390px);
        height: auto;
        margin: 0;
        padding: 0;

        border: none;
        border-radius: 0;

        background: transparent;

        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        transform: translateX(-50%);
    }

    /* Oculta la burbuja grande de escritorio */

    body:has(.contact-section) .customer-care-bubble {
        display: none;
    }

    body:has(.contact-section) .customer-care-content {
        position: static;

        display: flex;
        flex-direction: column;
        gap: 5px;

        text-align: center;
    }

    body:has(.contact-section) .customer-care-title {
        display: block;

        width: min(92vw, 200px);
        margin: 0 auto;

        color: #8f5c18;

        font-family: "Montserrat", sans-serif;
        font-size: 0.42rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.15em;
        text-transform: uppercase;

        white-space: nowrap;
        text-align: center;

        text-shadow:
            0 1px 2px rgba(255, 248, 232, 0.90),
            0 0 8px rgba(185, 130, 39, 0.30);
    }

    /* Contact Dark — título más limpio y legible */

    body.dark-theme:has(.contact-section) .customer-care-title {
        transform: translateX(-15px);

        color: #d6a957;

        font-family: "Montserrat", sans-serif;
        font-size: 0.40rem;
        font-weight: 300;
        line-height: 1.15;
        letter-spacing: 0.07em;

        opacity: 1;

        text-shadow: none;
        filter: none;

        -webkit-text-stroke: 0 transparent;
    }

    /* Oculta el subtítulo solamente en móvil */

    body:has(.contact-section) .customer-care-text {
        display: none;
    }

    /* Formulario por encima de toda la página */

    body:has(.contact-section) .contact-form-overlay {
        z-index: 10000;
    }

    /* ==========================================================
   WEB MAINTENANCE — VENTANA FLOTANTE DEL PRECIO
   ========================================================== */

    /* Pestaña lateral cerrada */

    body:has(.maintenance-page) .maintenance-price-card {
        position: absolute;

        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        z-index: 20;

        display: flex;
        align-items: center;

        width: 46px;
        height: 112px;

        padding: 15px 38px 15px 16px;

        overflow: hidden;

        background: rgba(203, 151, 59, 0.78);

        border: 1px solid rgba(255, 225, 168, 0.48);
        border-radius: 0 18px 18px 0;

        clip-path: none;

        box-shadow:
            8px 14px 30px rgba(61, 42, 18, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        transform: translateY(-50%);

        cursor: pointer;
    }

    body:has(.maintenance-page) .maintenance-price-card::after {
        content: "›";

        position: absolute;
        top: 50%;
        right: 12px;

        color: #fff8e9;
        font-size: 1.5rem;
        line-height: 1;

        transform: translateY(-50%);
    }

    /* El contenido permanece oculto mientras está cerrada */

    body:has(.maintenance-page) .maintenance-price-content {
        width: 240px;
        min-width: 240px;

        opacity: 0;
        visibility: hidden;

        transform: translateX(-15px);
    }

    /* Fondo detrás de la ventana */

    .maintenance-price-backdrop {
        position: fixed;

        inset: 0;
        z-index: 9997;

        background: rgba(24, 18, 11, 0.24);

        opacity: 0;
        visibility: hidden;

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
    }

    .maintenance-price-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* Ventana abierta */

    body:has(.maintenance-page) .maintenance-price-card.is-open {
        position: fixed;

        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        z-index: 9998;

        width: calc(100vw - 46px);
        max-width: 340px;
        height: auto;
        min-height: 210px;

        padding: 34px 30px 28px;

        overflow: visible;

        background:
            linear-gradient(145deg,
                rgba(255, 252, 246, 0.88),
                rgba(224, 200, 158, 0.70));

        border: 1px solid rgba(185, 130, 39, 0.48);
        border-radius: 26px;

        box-shadow:
            0 34px 85px rgba(59, 40, 17, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.90);

        backdrop-filter: blur(20px) saturate(120%);
        -webkit-backdrop-filter: blur(20px) saturate(120%);

        transform: translate(-50%, -50%);
    }

    body:has(.maintenance-page) .maintenance-price-card.is-open .maintenance-price-content {
        width: 100%;
        min-width: 0;

        /* Keeps the price copy clear of the close control. */
        padding-right: 34px;

        opacity: 1;
        visibility: visible;

        transform: none;
    }

    /* Botón X */

    body:has(.maintenance-page) .maintenance-price-close {
        position: absolute;

        top: 16px;
        right: 16px;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        padding: 0;

        appearance: none;
        -webkit-appearance: none;

        background:
            linear-gradient(145deg,
                rgba(255, 255, 255, 0.82),
                rgba(244, 229, 203, 0.62));

        border: 1px solid rgba(152, 101, 31, 0.34);
        border-radius: 50%;

        color: transparent;

        font-family: Arial, sans-serif;
        font-size: 0;
        line-height: 1;

        box-shadow:
            0 8px 20px rgba(74, 49, 18, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.86);

        cursor: pointer;

        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease;
    }

    body:has(.maintenance-page) .maintenance-price-close::before {
        content: "\00d7";

        display: block;

        color: #8f621f;

        font-family: Arial, sans-serif;
        font-size: 1.55rem;
        font-weight: 300;
        line-height: 1;

        transform: translateY(-1px);
    }

    body:has(.maintenance-page) .maintenance-price-close:hover,
    body:has(.maintenance-page) .maintenance-price-close:focus-visible {
        background:
            linear-gradient(145deg,
                rgba(255, 255, 255, 0.96),
                rgba(238, 214, 173, 0.78));

        border-color: rgba(152, 101, 31, 0.58);

        box-shadow:
            0 10px 24px rgba(74, 49, 18, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }

    body:has(.maintenance-page) .maintenance-price-close:active {
        transform: scale(0.94);
    }

    /* Textos */

    body:has(.maintenance-page) .maintenance-price-content span {
        color: #a87525;

        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.18em;
    }

    body:has(.maintenance-page) .maintenance-price-content strong {
        margin-top: 14px;

        color: #2c241a;

        font-size: 2rem;
        line-height: 1.05;
    }

    body:has(.maintenance-page) .maintenance-price-content small {
        margin-top: 18px;

        color: rgba(54, 43, 30, 0.72);

        font-size: 0.74rem;
        line-height: 1.5;
    }

    /* Dark */

    body.dark-theme:has(.maintenance-page) .maintenance-price-card.is-open {
        background:
            linear-gradient(145deg,
                rgba(31, 26, 20, 0.90),
                rgba(12, 10, 8, 0.78));

        border-color: rgba(208, 164, 87, 0.42);

        box-shadow:
            0 36px 90px rgba(0, 0, 0, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    body.dark-theme:has(.maintenance-page) .maintenance-price-content strong {
        color: #f3eadc;
    }

    body.dark-theme:has(.maintenance-page) .maintenance-price-content small {
        color: rgba(243, 234, 220, 0.68);
    }

    body.dark-theme:has(.maintenance-page) .maintenance-price-close {
        background:
            linear-gradient(145deg,
                rgba(48, 40, 31, 0.94),
                rgba(18, 15, 12, 0.88));

        border-color: rgba(208, 164, 87, 0.46);

        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    body.dark-theme:has(.maintenance-page) .maintenance-price-close::before {
        color: #e1b96f;
    }

    body.dark-theme:has(.maintenance-page) .maintenance-price-close:hover,
    body.dark-theme:has(.maintenance-page) .maintenance-price-close:focus-visible {
        background:
            linear-gradient(145deg,
                rgba(62, 50, 38, 0.98),
                rgba(24, 20, 16, 0.94));

        border-color: rgba(225, 185, 111, 0.68);
    }

    /* ==========================================================
   WEB MAINTENANCE — PESTAÑA CERRADA JUNTO A LOS ENGRANAJES
   ========================================================== */

    /* Cuando está cerrada, queda arriba y no tapa el texto */

    body:has(.maintenance-page) .maintenance-price-card:not(.is-open) {
        top: 30px;
        right: auto;
        bottom: auto;
        left: 0;

        width: 44px;
        height: 92px;

        transform: none;
    }

    /* Oculta la X cuando la ventana está cerrada */

    body:has(.maintenance-page) .maintenance-price-card:not(.is-open) .maintenance-price-close {
        display: none;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Muestra únicamente la flecha blanca cuando está cerrada */

    body:has(.maintenance-page) .maintenance-price-card:not(.is-open)::after {
        content: "›";

        position: absolute;
        top: 50%;
        right: 11px;

        display: block;

        color: #ffffff;

        font-family: Arial, sans-serif;
        font-size: 1.55rem;
        font-weight: 300;
        line-height: 1;

        opacity: 1;
        visibility: visible;

        transform: translateY(-50%);
    }

    /* Al abrirse, recupera la X */

    body:has(.maintenance-page) .maintenance-price-card.is-open .maintenance-price-close {
        display: flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* Dentro de la ventana abierta no aparece la flecha */

    body:has(.maintenance-page) .maintenance-price-card.is-open::after {
        display: none;
        content: none;
    }

    /* ==========================================================
   WEB MAINTENANCE — TÍTULO MÁS PEQUEÑO
   ========================================================== */

    body:has(.maintenance-page) .maintenance-content h1 {
        width: 100%;
        max-width: 100%;

        margin: 0 0 22px;

        font-size: 2.2rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.025em;

        text-align: left;
    }

    body:has(.maintenance-page) .maintenance-content h1 span {
        display: block;
        width: 100%;

        text-align: left;
    }

    body:has(.maintenance-page) .maintenance-content {
        align-items: flex-start;
        text-align: left;
    }

    body:has(.maintenance-page) .maintenance-subtitle,
    body:has(.maintenance-page) .maintenance-content>p {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    /* Business Software: contener texto y separar el esquema */

    /* La tarjeta crece según la cantidad de texto */
    body.business-software-page-body .business-software-page .business-software-card {
        height: auto;
        min-height: 0;
        padding-bottom: 42px;
        overflow: hidden;

        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(200, 173, 127, 0.76);
        box-shadow: none;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Evita que el contenido conserve una altura limitada */
    body:has(.business-software-page) .business-software-card .web-development-content {
        height: auto;
        min-height: 0;
    }

    /* Igual distancia superior que Web Maintenance */

    body.business-software-page-body main>.business-software-page {
        padding-top: 105px;
    }

    /* Baja la animación del esquema */
    body:has(.business-software-page) .software-visual {
        margin-top: 105px;
    }

    /* ==========================================================
   DATA & BUSINESS INTELLIGENCE — TARJETAS VERTICALES
   SOLO MÓVIL
   ========================================================== */

    body:has(.data-intelligence-page) .data-intelligence-grid {
        display: flex;
        flex-direction: column;
        gap: 28px;

        /* Ancho calculado respecto a la pantalla, no al contenedor padre */
        width: calc(100vw - 24px);
        max-width: none;

        /* Centra el bloque aunque el padre tenga padding */
        margin-left: calc(50% - 50vw + 12px);
        margin-right: 0;

        padding: 0;
        box-sizing: border-box;
    }

    body:has(.data-intelligence-page) .data-intelligence-card {
        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;
        max-width: none;

        height: auto;
        min-height: 610px;

        margin: 0;

        /* Más espacio entre el texto y los bordes */
        padding: 34px 28px;

        box-sizing: border-box;
    }
}