/* =====================================================================
   TIPOGRAFIAS AUTOALOJADAS
   Los tres subconjuntos latinos de Schibsted Grotesk, Onest y JetBrains
   Mono, servidos desde aqui. Ni un viaje a fonts.googleapis.com: menos
   latencia y la IP del visitante no sale del servidor (RGPD).
   ===================================================================== */
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Onest · latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Onest · latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Schibsted Grotesk · latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Schibsted Grotesk · latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   Amber · sistema visual 2026
   Dirección "El desfile": papel claro, objeto oscuro flotando, y la
   página toma el color del producto que se está mirando.
   Sin tarjetas: la jerarquía la hacen el filete, la banda y el tamaño.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
    color-scheme: light;

    --paper:      #FAFAF8;
    --paper-2:    #F2F1EE;
    --ink:        #121016;
    --ink-dim:    #5E5964;
    --ink-faint:  #938D9A;
    --rule:       rgba(18, 16, 22, 0.12);
    --rule-soft:  rgba(18, 16, 22, 0.07);

    --deep:       #0B0A0F;
    --on-deep:    #F6F4F2;
    --on-deep-dim: rgba(246, 244, 242, 0.62);
    --deep-rule:  rgba(246, 244, 242, 0.14);

    /* marca */
    --pink: #FF6B9D;
    --magenta: #C84B9E;
    --purple: #8B5CF6;
    --grad: linear-gradient(100deg, #FF6B9D 0%, #C84B9E 48%, #8B5CF6 100%);

    /* productos: cada uno con su color real */
    --p-boda: #E8B36A;
    --p-brandapp: #3FA9B4;
    --p-yuau: #E0507F;
    --p-posiciona: #E06A3C;
    --p-memorina: #D0348A;
    --p-remansia: #6D4FD0;

    /* acento vivo: lo reescribe el desfile */
    --accent: var(--magenta);

    --shell: min(1180px, 100%);
    --gut: clamp(1.25rem, 5vw, 4rem);
    --f-disp: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        /* La paleta del Amber de siempre: superficie violacea, no negro.
           Los valores son los del sitio anterior, tal cual. */
        --paper: #111219;                        /* era --surface   */
        --paper-2: #171822;                      /* era --surface-2 */
        --ink: #FAFAFA;                          /* era --light     */
        --ink-dim: rgba(250, 250, 250, 0.64);    /* era --text-dim  */
        --ink-faint: rgba(250, 250, 250, 0.44);  /* era --text-faint*/
        --rule: rgba(255, 255, 255, 0.14);       /* --hairline-strong */
        --rule-soft: rgba(255, 255, 255, 0.07);  /* --hairline      */
        --deep: #050508;                         /* era --darker    */
        --on-deep: #FAFAFA;
        --on-deep-dim: rgba(250, 250, 250, 0.64);
        --deep-rule: rgba(255, 255, 255, 0.10);
        /* la aurora de marca detras del titular, como en la web anterior:
           solo rosa, magenta y morado. En claro no existe. */
        --aurora:
            radial-gradient(ellipse 62% 42% at 78% 4%, rgba(139, 92, 246, 0.34), transparent 62%),
            radial-gradient(ellipse 54% 38% at 12% 26%, rgba(200, 75, 158, 0.29), transparent 64%),
            radial-gradient(ellipse 70% 40% at 50% 96%, rgba(255, 107, 157, 0.16), transparent 68%);
        --p-brandapp: #4FD1DB;
        --p-yuau: #FF7BA8;
        --p-posiciona: #FF8A5B;
        --p-memorina: #E8449B;
        --p-remansia: #8B6BF0;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    /* La paleta del Amber de siempre: superficie violacea, no negro.
       Los valores son los del sitio anterior, tal cual. */
    --paper: #111219;                        /* era --surface   */
    --paper-2: #171822;                      /* era --surface-2 */
    --ink: #FAFAFA;                          /* era --light     */
    --ink-dim: rgba(250, 250, 250, 0.64);    /* era --text-dim  */
    --ink-faint: rgba(250, 250, 250, 0.44);  /* era --text-faint*/
    --rule: rgba(255, 255, 255, 0.14);       /* --hairline-strong */
    --rule-soft: rgba(255, 255, 255, 0.07);  /* --hairline      */
    --deep: #050508;                         /* era --darker    */
    --on-deep: #FAFAFA;
    --on-deep-dim: rgba(250, 250, 250, 0.64);
    --deep-rule: rgba(255, 255, 255, 0.10);
    /* la aurora de marca detras del titular, como en la web anterior:
       solo rosa, magenta y morado. En claro no existe. */
    --aurora:
        radial-gradient(ellipse 62% 42% at 78% 4%, rgba(139, 92, 246, 0.34), transparent 62%),
        radial-gradient(ellipse 54% 38% at 12% 26%, rgba(200, 75, 158, 0.29), transparent 64%),
        radial-gradient(ellipse 70% 40% at 50% 96%, rgba(255, 107, 157, 0.16), transparent 68%);
    --p-brandapp: #4FD1DB;
    --p-yuau: #FF7BA8;
    --p-posiciona: #FF8A5B;
    --p-memorina: #E8449B;
    --p-remansia: #8B6BF0;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.62;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.shell {
    width: var(--shell); margin-inline: auto;
    padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.eyebrow {
    font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.17em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem;
}
.eyebrow b { color: var(--accent); font-weight: 500; }
.salta {
    position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
    padding: 0.7rem 1rem; z-index: 200;
}
.salta:focus { left: 0; }

/* ---------- botones ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--f-body); font-size: 0.92rem; font-weight: 600;
    padding: 0.85rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
    text-decoration: none; cursor: pointer; transition: transform 200ms ease, opacity 200ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-main { background: var(--grad); color: #fff; }
.btn-main:hover { opacity: 0.92; }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; }

/* ---------- navegación ---------- */
.nav {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--rule-soft);
}
.nav-in { display: flex; align-items: center; gap: 1.1rem; height: 66px; }
.nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav-logo img { height: 27px; width: auto; }
.nav-logo .claro { display: block; }
.nav-logo .oscuro { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-logo .claro { display: none; }
    :root:not([data-theme="light"]) .nav-logo .oscuro { display: block; }
}
:root[data-theme="dark"] .nav-logo .claro { display: none; }
:root[data-theme="dark"] .nav-logo .oscuro { display: block; }
.nav-links { display: none; gap: 1.5rem; margin-left: auto; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
    font-size: 0.88rem; color: var(--ink-dim); text-decoration: none;
    padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav-acts { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
@media (min-width: 900px) { .nav-acts { margin-left: 1.4rem; } }
.btn-tema {
    width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--rule); background: transparent;
    color: var(--ink-dim); cursor: pointer; padding: 0; flex: 0 0 auto;
}
.btn-tema:hover { color: var(--ink); border-color: var(--accent); }
.btn-tema svg { width: 17px; height: 17px; }
.btn-tema .ico-sol { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-tema .ico-luna { display: none; }
    :root:not([data-theme="light"]) .btn-tema .ico-sol { display: block; }
}
:root[data-theme="dark"] .btn-tema .ico-luna { display: none; }
:root[data-theme="dark"] .btn-tema .ico-sol { display: block; }
.nav-menu { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
@media (min-width: 900px) { .nav-menu { display: none; } }
.nav-movil { display: none; border-top: 1px solid var(--rule-soft); padding-block: 0.8rem 1.2rem; }
.nav-movil.abierto { display: block; }
@media (min-width: 900px) { .nav-movil, .nav-movil.abierto { display: none; } }
.nav-movil a { display: block; padding: 0.6rem 0; font-size: 1.05rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule-soft); }

/* ---------- portada ---------- */
.hero { position: relative; z-index: 0; padding-block: clamp(3.5rem, 11vw, 7.5rem) clamp(2rem, 5vw, 3.5rem); }
/* El ambiente del oscuro. Una sola regla para los dos modos: en claro
   --aurora no esta definida y el fondo cae a none, asi que no pinta nada. */
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: -140px;
    left: 50%;
    width: 100vw;
    height: calc(100% + 220px);
    transform: translateX(-50%);
    background: var(--aurora, none);
    -webkit-mask-image: radial-gradient(ellipse 92% 62% at 50% 6%, #000 32%, transparent 100%);
            mask-image: radial-gradient(ellipse 92% 62% at 50% 6%, #000 32%, transparent 100%);
}
.hero h1 {
    font-weight: 900; font-size: clamp(2.3rem, 8.4vw, 5.6rem);
    line-height: 0.93; letter-spacing: -0.05em; margin-bottom: 1.4rem; max-width: 16ch;
}
.hero h1 i {
    font-style: normal; color: inherit; position: relative;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background-image: var(--grad); background-repeat: no-repeat;
    background-size: 100% 0.09em; background-position: 0 0.93em;
    padding-bottom: 0.04em;
}
.hero-lede { font-size: clamp(1rem, 2.1vw, 1.18rem); color: var(--ink-dim); max-width: 56ch; margin-bottom: 2rem; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(2.5rem, 7vw, 4.5rem); border-top: 1px solid var(--rule); }
.cifras div { padding: 1.3rem 0.4rem 0 0; }
.cifras div + div { border-left: 1px solid var(--rule); padding-left: clamp(0.8rem, 3vw, 2rem); }
.cifras b { display: block; font-family: var(--f-disp); font-weight: 800; font-size: clamp(1.5rem, 5vw, 2.6rem); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.4rem; font-variant-numeric: tabular-nums; }
.cifras span { font-size: 0.8rem; color: var(--ink-dim); line-height: 1.35; display: block; }

/* =====================================================================
   EL DESFILE · un objeto fijo, el catálogo pasando por dentro
   ===================================================================== */
.desfile { position: relative; height: 380vh; height: 380svh; }
.desfile-pin {
    position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 480px;
    overflow: hidden; display: grid; place-items: center;
    border-block: 1px solid var(--rule);
}
.desfile-wash {
    position: absolute; inset: 0; opacity: 0.17; pointer-events: none;
    transition: background 800ms ease;
}
.desfile-stage {
    position: relative; z-index: 2; width: var(--shell); margin-inline: auto;
    padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
    display: grid; gap: clamp(0.8rem, 2vw, 1.3rem); justify-items: center;
}
.desfile-kicker { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.desfile-name {
    font-family: var(--f-disp); font-weight: 900;
    font-size: clamp(2rem, 8.5vw, 5.2rem); line-height: 0.9; letter-spacing: -0.055em;
    text-align: center; transition: color 500ms ease;
}
.desfile-line { color: var(--ink-dim); font-size: clamp(0.88rem, 2.1vw, 1.05rem); text-align: center; max-width: 40ch; min-height: 7.2em; }
@media (min-width: 700px) { .desfile-line { min-height: 4.8em; } }
.desfile-screens {
    position: relative; width: min(820px, 100%); aspect-ratio: 1100 / 500;
    /* la ventana recorta, para que el producto siguiente se vea entrar por
       el canto derecho en vez de aparecer de la nada */
    border-radius: 14px;
    overflow: hidden; overflow: clip;
    box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.55);
}
.desfile-screens img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    border-radius: 14px; opacity: 0; transform: translate3d(100%, 0, 0);
    /* sin transición a propósito: la posición y la opacidad las escribe
       el scroll fotograma a fotograma. Es lo que hace que se note que
       manda el dedo y no un carrusel automático. */
    will-change: transform, opacity;
}
/* reserva: si el script no llega a ejecutarse, el primero se ve igual */
.desfile-screens img.on { opacity: 1; transform: translate3d(0, 0, 0); }
.desfile-pie { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }
/* el carril no decora: es un mando. Se rellena de forma continua con el
   scroll y cada tramo lleva a su producto. */
.desfile-rail { display: flex; gap: 5px; }
.desfile-rail .rail-i {
    appearance: none; -webkit-appearance: none; background: none; border: 0;
    padding: 0; margin: 0; cursor: pointer; display: grid; place-items: center;
    width: 30px; height: 24px; border-radius: 4px;
}
.desfile-rail .rail-i i {
    display: block; width: 28px; height: 3px; border-radius: 2px;
    background: var(--rule); transition: height 200ms ease;
}
.desfile-rail .rail-i:hover i { height: 6px; }
.desfile-rail .rail-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.desfile-count { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.desfile-count b { color: var(--ink); font-weight: 500; }
.desfile-link { font-size: 0.85rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.desfile-estado { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

/* el aviso: la causa de que tres personas creyeran que la web se acababa
   aquí era que nada decía lo contrario. Ahora lo dice. */
.desfile-ayuda {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-dim);
    margin-top: 0.2rem; text-align: center;
}
.desfile-ayuda svg {
    width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent);
    animation: bajaChevron 1.9s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes bajaChevron {
    0%, 100% { transform: translateY(-2px); opacity: 0.4; }
    50%      { transform: translateY(3px);  opacity: 1; }
}
.desfile-ayuda.fin svg { animation-duration: 1.15s; }

/* =====================================================================
   SERVICIOS · bandas, no tarjetas
   ===================================================================== */
.srv {
    position: relative;
    padding-block: clamp(3.5rem, 9vw, 7rem);
    border-bottom: 1px solid var(--rule);
    /* clip recorta igual que hidden pero no crea contenedor de desplazamiento,
       que es lo que rompía el sticky. hidden queda de reserva. */
    overflow: hidden;
    overflow: clip;
}
.srv-marca {
    position: absolute; right: -0.06em; top: 0.06em; z-index: 0;
    font-family: var(--f-disp); font-weight: 900; font-size: clamp(8rem, 24vw, 21rem);
    line-height: 0.74; letter-spacing: -0.07em; color: var(--accent); opacity: 0.085;
    pointer-events: none; user-select: none; font-variant-numeric: tabular-nums;
    transition: color 700ms ease; will-change: transform;
}
.srv-head { position: relative; z-index: 1; display: grid; gap: 1.3rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
@media (min-width: 880px) { .srv-head { grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; } }
.srv-col h2 { font-size: clamp(1.9rem, 5.4vw, 3.2rem); line-height: 1; }
.srv-col2 { display: grid; gap: 1.2rem; align-content: end; min-width: 0; }
.srv-col2 .srv-pie { margin-top: 0; }
.srv-lede { color: var(--ink-dim); font-size: 0.97rem; max-width: 48ch; }
.srv-num { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 0.9rem; }
.srv-num b { color: var(--accent); font-weight: 500; }
.puntos { position: relative; z-index: 1; display: grid; border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) { .puntos { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); } }
.punto {
    display: grid; grid-template-columns: 1fr; gap: 0.5rem; align-content: start;
    padding-block: 1.4rem; border-top: 1px solid var(--rule); min-width: 0;
}
.punto h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.025em; }
.punto p { color: var(--ink-dim); font-size: 0.92rem; }
.punto ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.7rem; }
.punto li { font-size: 0.83rem; color: var(--ink-dim); display: flex; gap: 0.45rem; align-items: baseline; min-width: 0; }
.punto li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; transform: translateY(-2px); }
.srv-pie { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.srv-pie a { font-size: 0.88rem; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

/* =====================================================================
   PROCESO · el esqueleto se dibuja y encima se posa lo terminado
   ===================================================================== */
.proceso { background: var(--deep); color: var(--on-deep); padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.proceso .eyebrow { color: var(--on-deep-dim); }
.proceso-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 880px) { .proceso-grid { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; } }
.proceso h2 { font-size: clamp(1.75rem, 5vw, 2.8rem); margin-bottom: 1.1rem; }
.proceso .lede { color: var(--on-deep-dim); margin-bottom: 1.8rem; font-size: 0.97rem; max-width: 46ch; }
.pasos { display: grid; gap: 0; }
.paso {
    display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.8rem;
    padding-block: 0.85rem; border-top: 1px solid var(--deep-rule);
    color: var(--on-deep-dim); transition: color 400ms ease;
}
.paso:last-child { border-bottom: 1px solid var(--deep-rule); }
.paso b { font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; color: var(--on-deep-dim); transition: color 400ms ease; }
.paso.hecho { color: var(--on-deep); }
.paso.hecho b { color: var(--accent); }
.paso span { font-size: 0.92rem; }
.lienzo { position: relative; aspect-ratio: 1100 / 500; width: 100%; }
.lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lienzo svg * { fill: none; stroke: var(--on-deep); stroke-width: 1.4; opacity: 0.45; stroke-dasharray: var(--l, 2000); stroke-dashoffset: var(--l, 2000); }
.lienzo.va svg * { animation: trazo 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.lienzo img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    border-radius: 12px; opacity: 0; transform: scale(0.985);
    transition: opacity 900ms ease 1.3s, transform 1.2s cubic-bezier(.2,.7,.2,1) 1.3s;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.lienzo.va img { opacity: 1; transform: scale(1); }
.proceso .btn-ghost { border-color: var(--deep-rule); color: var(--on-deep); }
.proceso .btn-ghost:hover { border-color: var(--accent); }

/* =====================================================================
   DUDAS
   ===================================================================== */
.dudas { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.dudas h2 { font-size: clamp(1.75rem, 5vw, 2.8rem); margin-bottom: 0.9rem; }
.dudas > .shell > p { color: var(--ink-dim); max-width: 52ch; margin-bottom: 2.4rem; }
.duda { border-top: 1px solid var(--rule); }
.duda:last-of-type { border-bottom: 1px solid var(--rule); }
.duda summary {
    list-style: none; cursor: pointer; display: block;
    font-family: var(--f-disp); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.22rem);
    letter-spacing: -0.025em; color: var(--ink); padding: 1.35rem 2.5rem 1.35rem 0;
    position: relative; line-height: 1.25;
}
.duda summary::-webkit-details-marker { display: none; }
.duda summary::after {
    content: ""; position: absolute; right: 0.3rem; top: 1.75rem;
    width: 11px; height: 11px; border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
    transform: rotate(45deg); transition: transform 300ms ease;
}
.duda[open] summary::after { transform: rotate(225deg); top: 1.95rem; }
.duda .resp { padding-bottom: 1.5rem; color: var(--ink-dim); font-size: 0.95rem; max-width: 68ch; }

/* =====================================================================
   CIERRE Y PIE
   ===================================================================== */
.cierre { background: var(--deep); color: var(--on-deep); padding-block: clamp(3.5rem, 9vw, 6rem); text-align: center; }
.cierre h2 { font-size: clamp(1.9rem, 6vw, 3.4rem); margin-bottom: 1.1rem; }
.cierre p { color: var(--on-deep-dim); max-width: 48ch; margin: 0 auto 2rem; }
.pie { background: var(--deep); color: var(--on-deep); padding-block: 3rem 2rem; border-top: 1px solid var(--deep-rule); }
.pie-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pie-grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.5rem; } }
/* width:auto es obligatorio: sin el, el atributo width="812" del <img>
   manda y el logotipo sale estirado a 812x26 */
.pie-marca img { height: 26px; width: auto; margin-bottom: 1rem; }
.pie-marca p { font-size: 0.85rem; color: var(--on-deep-dim); max-width: 36ch; }
.pie h4 { font-size: 0.68rem; font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-deep-dim); margin-bottom: 0.9rem; }
.pie li { margin-bottom: 0.5rem; }
.pie li a { font-size: 0.87rem; color: var(--on-deep); text-decoration: none; opacity: 0.82; }
.pie li a:hover { opacity: 1; border-bottom: 1px solid var(--accent); }
.pie-legal { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--deep-rule); font-size: 0.78rem; color: var(--on-deep-dim); }

/* ---------- botón flotante ---------- */
.flotante {
    position: fixed; z-index: 90;
    right: calc(1.1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
}
.flotante.visible { opacity: 1; visibility: visible; transform: none; }

/* =====================================================================
   MODAL DE CONTACTO
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 150; display: none; }
.modal.abierto { display: block; }
.modal-fondo { position: absolute; inset: 0; background: rgba(11, 10, 15, 0.62); backdrop-filter: blur(5px); }
.modal-caja {
    position: relative; background: var(--paper); color: var(--ink);
    width: min(540px, calc(100% - 2rem)); margin: 5vh auto 0; border-radius: 16px;
    padding: clamp(1.5rem, 4vw, 2.4rem); max-height: 90vh; overflow-y: auto;
    border: 1px solid var(--rule);
}
.modal-cerrar { position: absolute; top: 0.9rem; right: 0.9rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.modal h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.modal > .modal-caja > p { color: var(--ink-dim); font-size: 0.9rem; margin-bottom: 1.6rem; }
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--ink-dim); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo textarea {
    width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink);
    background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px;
    padding: 0.7rem 0.85rem;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--accent); outline: none; }
.campo.check { display: flex; gap: 0.6rem; align-items: flex-start; }
.campo.check label { font-size: 0.82rem; font-weight: 400; margin: 0; color: var(--ink-dim); }
.campo.check input { margin-top: 0.25rem; accent-color: var(--magenta); }
.campo.error input, .campo.error textarea { border-color: #D4183D; }
.aviso { display: none; font-size: 0.85rem; color: #D4183D; margin-bottom: 1rem; }
.aviso.activo { display: block; }
.modal-ok { display: none; text-align: center; padding-block: 1.5rem; }
.modal-ok.activo { display: block; }
.modal-ok h3 { margin-bottom: 0.8rem; }
.oculto { display: none !important; }

/* ---------- accesibilidad y movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .lienzo svg * { stroke-dashoffset: 0; }
    .lienzo img { opacity: 1; transform: none; }
    .desfile-screens img.on { opacity: 1; transform: none; }
}


/* =====================================================================
   CINE · motor de revelado
   Sin JavaScript todo se ve: estas reglas solo actúan cuando el script
   marca <html class="cine">. Así nada depende de que el JS cargue.
   ===================================================================== */
.progreso { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; }
.progreso i { display: block; height: 100%; width: 0; background: var(--grad); }

.cine [data-anim] {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(.16, 1, .3, 1),
                transform 1s cubic-bezier(.16, 1, .3, 1),
                filter 0.9s ease;
    transition-delay: calc(var(--i, 0) * 85ms);
    will-change: transform, opacity;
}
.cine [data-anim="sube"] { transform: translateY(32px); }
.cine [data-anim="escala"] { transform: scale(0.94) translateY(36px); filter: blur(7px); }
.cine [data-anim].ve { opacity: 1; transform: none; filter: none; }

/* titulares que suben por líneas, como un rótulo */
.ln { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.ln > span {
    display: inline-block; transform: translateY(118%);
    transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--n, 0) * 95ms);
    will-change: transform;
}
.ve.ln > span, .ve .ln > span { transform: none; }

[data-par] { will-change: transform; }

/* la navegación se compacta al bajar */
.nav { transition: height 300ms ease, box-shadow 300ms ease; }
.nav-in { transition: height 320ms cubic-bezier(.16, 1, .3, 1); }
.nav.compacta .nav-in { height: 54px; }
.nav.compacta { box-shadow: 0 1px 0 var(--rule); }

/* viñeta de sala de cine sobre el desfile */
.desfile-pin::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse 92% 74% at 50% 48%, transparent 52%, rgba(0, 0, 0, 0.1) 100%);
}
:root[data-theme="dark"] .desfile-pin::after,
.desfile-pin::after { mix-blend-mode: multiply; }
.desfile-screens { transition: transform 200ms linear; }

/* el pie entra escalonado */
.cine .pie-grid > * { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.cine .pie-grid > *:nth-child(2) { transition-delay: 80ms; }
.cine .pie-grid > *:nth-child(3) { transition-delay: 160ms; }
.cine .pie-grid > *:nth-child(4) { transition-delay: 240ms; }
.cine .pie-grid > *:nth-child(5) { transition-delay: 320ms; }
.cine .pie-grid.ve > * { opacity: 1; transform: none; }

/* los puntos encienden su filete al entrar */
.punto { position: relative; }
.punto::before {
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
    background: var(--accent); transition: width 900ms cubic-bezier(.16, 1, .3, 1) 180ms;
}
.cine .punto.ve::before { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .cine [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
    .ln > span { transform: none !important; }
    .cine .pie-grid > * { opacity: 1 !important; transform: none !important; }
    .punto::before { display: none; }
    [data-par] { transform: none !important; }
}

/* =====================================================================
   PIEZAS · cada servicio con su demostración viva
   Nada de banco de imágenes: o es trabajo real de un cliente, o está
   construido en HTML y CSS, que es lo que de hecho vendemos.
   Los acentos recorren el degradado de Amber, de rosa a violeta.
   ===================================================================== */
:root {
    --g1: #E8407F;
    --g2: #D13C8E;
    --g3: #B83D97;
    --g4: #9442B8;
    --g5: #7C3AED;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --g1: #FF6B9D; --g2: #F0619F; --g3: #DE5FB0; --g4: #B57BF0; --g5: #A78BFA;
    }
}
:root[data-theme="dark"] {
    --g1: #FF6B9D; --g2: #F0619F; --g3: #DE5FB0; --g4: #B57BF0; --g5: #A78BFA;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- titular de la familia de proyectos --- */
.desfile-titulo {
    display: grid; justify-items: center; gap: 0.75rem;
    font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink); text-align: center;
}
.desfile-filete { display: block; width: 46px; height: 2px; border-radius: 2px; background: var(--grad); }

/* --- columna derecha: la pieza encima, los puntos debajo --- */
.pieza { position: relative; z-index: 1; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }

/* --- iconos --- */
.punto h3 { display: flex; align-items: center; gap: 0.6rem; }
.ico {
    width: 19px; height: 19px; flex: 0 0 auto;
    stroke: var(--accent); fill: none; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: 0; transform: scale(0.55) rotate(-12deg);
    transition: opacity .5s ease .12s, transform .65s cubic-bezier(.16,1,.3,1) .12s, stroke .6s ease;
}
.punto.ve .ico, .cine .punto.ve .ico { opacity: 1; transform: none; }
html:not(.cine) .ico { opacity: 1; transform: none; }

/* --- marco común de las piezas --- */
.pieza { min-width: 0; }
.pieza-pie {
    margin-top: 0.9rem; font-family: var(--f-mono); font-size: 0.64rem;
    letter-spacing: 0.08em; color: var(--ink-faint); line-height: 1.5;
}

/* =====================  01 · APPS  ===================== */
.pz-apps { display: flex; gap: clamp(0.7rem, 2vw, 1.2rem); flex-wrap: wrap; align-items: flex-start; }
.pz-apps .pieza-pie { flex: 1 0 100%; }
.tel {
    flex: 1 1 150px; max-width: 210px; min-width: 0;
    background: #101016; border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
    padding: 0.5rem 0.5rem 0.9rem; color: #F6F4F2;
    box-shadow: 0 22px 46px -24px rgba(0,0,0,.55);
}
.tel-top { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.5rem 0.6rem; }
.tel-top b { font-family: var(--f-mono); font-size: 0.56rem; opacity: .8; font-weight: 500; }
.tel-top em { width: 22px; height: 7px; border-radius: 3px; background: rgba(246,244,242,.3); }
.tel-in { padding-inline: 0.55rem; display: grid; gap: 0.45rem; }
.tel-hi { font-family: var(--f-disp); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.02em; }
.tel-mini { font-size: 0.62rem; color: rgba(246,244,242,.55); }
.aro { position: relative; width: 108px; margin: 0.4rem auto 0.2rem; }
.aro svg { width: 100%; height: auto; transform: rotate(-90deg); }
.aro circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.aro-f { stroke: rgba(246,244,242,.12); }
.aro-v { stroke: var(--accent); stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1) .35s, stroke .6s ease; }
.pieza.ve .aro-v { stroke-dashoffset: 62; }
html:not(.cine) .aro-v { stroke-dashoffset: 62; }
.aro-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.aro-n b { font-family: var(--f-disp); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; display: block; }
.aro-n i { font-style: normal; font-size: 0.56rem; color: rgba(246,244,242,.5); letter-spacing: .08em; }
.tel-kpi { display: flex; justify-content: space-between; gap: 0.3rem; margin-top: 0.3rem; }
.tel-kpi li { font-size: 0.56rem; color: rgba(246,244,242,.55); text-align: center; min-width: 0; }
.tel-kpi b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 0.78rem; color: #F6F4F2; }
.tel-2 { margin-top: clamp(0.8rem, 3vw, 2rem); }
.tel-tag { font-family: var(--f-mono); font-size: 0.5rem; letter-spacing: .14em; color: var(--accent); }
.tel-foto { display: block; height: 72px; border-radius: 10px; background: var(--grad); opacity: .85; margin-block: 0.35rem; }
.tel-prod { font-family: var(--f-disp); font-weight: 700; font-size: 0.86rem; letter-spacing: -0.02em; }
.tel-pre { font-family: var(--f-disp); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; }
.tel-btn { display: block; text-align: center; font-size: 0.64rem; font-weight: 600; padding: 0.45rem; border-radius: 999px; background: var(--accent); color: #fff; margin-top: 0.3rem; }

/* =====================  02 · IA · chat que se escribe solo  ===================== */
.pz-chat { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; }
.pz-chat .pieza-pie { padding: 0 1rem 1rem; margin-top: 0; }
.chat-top { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--rule-soft); }
.chat-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; flex: 0 0 auto; }
.chat-av svg { width: 19px; height: 19px; }
.chat-top b { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 0.86rem; letter-spacing: -0.02em; }
.chat-top i { font-style: normal; font-size: 0.66rem; color: var(--accent); }
.chat-cuerpo { padding: 1rem; display: grid; gap: 0.6rem; justify-items: start; }
.burb {
    max-width: 86%; font-size: 0.8rem; line-height: 1.45; padding: 0.6rem 0.85rem;
    border-radius: 14px; opacity: 0; transform: translateY(10px);
}
html:not(.cine) .burb { opacity: 1; transform: none; }
.burb.ent { background: var(--paper); border: 1px solid var(--rule); border-bottom-left-radius: 4px; }
.burb.sal { background: var(--grad); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.burb.esc { background: var(--paper); border: 1px solid var(--rule); display: flex; gap: 4px; max-height: 40px; }
.burb.esc i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); animation: teclea 1.1s infinite ease-in-out; }
.burb.esc i:nth-child(2) { animation-delay: .15s; }
.burb.esc i:nth-child(3) { animation-delay: .3s; }
@keyframes teclea { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.pieza.ve .burb.ent { animation: burbEntra .5s cubic-bezier(.16,1,.3,1) 250ms forwards; }
.pieza.ve .burb.esc { animation: burbEntra .4s cubic-bezier(.16,1,.3,1) 750ms forwards, puntosFuera .35s ease 1650ms forwards; }
.pieza.ve .burb.sal:nth-of-type(3) { animation: burbEntra .5s cubic-bezier(.16,1,.3,1) 1700ms forwards; }
.pieza.ve .burb.sal:nth-of-type(4) { animation: burbEntra .5s cubic-bezier(.16,1,.3,1) 2250ms forwards; }
@keyframes burbEntra { to { opacity: 1; transform: none; } }
@keyframes puntosFuera { to { opacity: 0; max-height: 0; padding-block: 0; margin-top: -0.6rem; } }
.chat-pie { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-top: 1px solid var(--rule-soft); }
.chat-pie span { font-size: 0.74rem; color: var(--ink-faint); flex: 1; min-width: 0; }
.chat-pie em { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* =====================  03 · WEB · dos clientes reales  ===================== */
.pz-webs { position: relative; display: grid; gap: 1rem; }
@media (min-width: 560px) { .pz-webs { grid-template-columns: 1fr 1fr; } }
.shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-2); box-shadow: 0 20px 44px -26px rgba(0,0,0,.4); }
.shot-bar { display: flex; align-items: center; gap: 5px; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule-soft); }
.shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); flex: 0 0 auto; }
.shot-bar b { font-family: var(--f-mono); font-size: 0.58rem; color: var(--ink-faint); font-weight: 400; margin-left: 0.4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot img { width: 100%; height: auto; display: block; clip-path: inset(0 100% 0 0); }
.pieza.ve .shot img { animation: cortinilla 1s cubic-bezier(.16,1,.3,1) forwards; }
.pieza.ve .s2 img { animation-delay: .22s; }
html:not(.cine) .shot img { clip-path: inset(0 0 0 0); }
@keyframes cortinilla { to { clip-path: inset(0 0 0 0); } }

/* =====================  04 · SEO · el resultado que sube a la primera  ===================== */
.pz-seo { --alto-nuestra: 112px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: 1rem; }
.pz-seo .pieza-pie { margin-top: 0.8rem; }
.seo-busca { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); margin-bottom: 1rem; }
.seo-busca svg { width: 15px; height: 15px; color: var(--ink-faint); flex: 0 0 auto; }
.seo-busca span { font-size: 0.78rem; color: var(--ink-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-lista { display: grid; gap: 10px; }
.seo-fila { display: flex; gap: 0.7rem; align-items: flex-start; }
.seo-pos { position: relative; width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule); font-family: var(--f-mono); font-size: 0.6rem; color: var(--ink-faint); }
.seo-otra { height: 34px; align-items: center; }
.seo-gris { flex: 1; display: grid; gap: 6px; min-width: 0; }
.seo-gris i { display: block; height: 7px; border-radius: 4px; background: var(--rule); }
.seo-gris i:first-child { width: 55%; }
.seo-gris i:last-child { width: 82%; }
.seo-nuestra { height: var(--alto-nuestra); }
.seo-nuestra .seo-pos { border-color: var(--accent); color: var(--accent); }
.seo-pos b { position: absolute; font-weight: 500; }
.pos-a { opacity: 0; }
.seo-res { display: grid; gap: 2px; min-width: 0; }
.seo-url { font-family: var(--f-mono); font-size: 0.6rem; color: var(--ink-faint); }
.seo-tit { font-family: var(--f-disp); font-weight: 700; font-size: 0.88rem; letter-spacing: -0.02em; color: var(--accent); line-height: 1.25; }
.seo-desc { font-size: 0.72rem; color: var(--ink-dim); line-height: 1.45; }
.seo-est { font-size: 0.68rem; color: var(--ink-faint); }
.seo-est::before { content: "★ "; color: var(--accent); }
.pieza.ve .seo-nuestra { animation: sube1 .9s cubic-bezier(.16,1,.3,1) 700ms forwards; }
.pieza.ve .seo-otra { animation: baja1 .9s cubic-bezier(.16,1,.3,1) 700ms forwards; }
.pieza.ve .pos-de { animation: posFuera .4s ease 1150ms forwards; }
.pieza.ve .pos-a { animation: posDentro .4s ease 1250ms forwards; }
/* 88px = las dos filas grises (34) y sus dos huecos (10). No depende del
   alto de nuestra ficha, que sí cambia según cómo envuelva el texto. */
@keyframes sube1 { to { transform: translateY(-88px); } }
@keyframes baja1 { to { transform: translateY(calc(var(--alto-nuestra) + 10px)); } }
@keyframes posFuera { to { opacity: 0; transform: translateY(-9px); } }
@keyframes posDentro { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* =====================  05 · PUBLICIDAD  ===================== */
.pz-ads { display: grid; gap: 1.2rem; }
.ads-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ads-chips li {
    font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.04em;
    padding: 0.4rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--rule); color: var(--ink-dim);
    opacity: 0; transform: translateY(10px) scale(.95);
}
html:not(.cine) .ads-chips li { opacity: 1; transform: none; }
.pieza.ve .ads-chips li { animation: chipEntra .55s cubic-bezier(.16,1,.3,1) calc(var(--c) * 95ms + 150ms) forwards; }
@keyframes chipEntra { to { opacity: 1; transform: none; border-color: var(--accent); color: var(--ink); } }
.ads-graf { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 16px; padding: 1rem; display: grid; gap: 0.7rem; }
.ads-lab { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.ads-barras { display: flex; align-items: flex-end; gap: 8px; height: 104px; }
.ads-barras i { flex: 1; min-width: 0; height: 0; border-radius: 5px 5px 0 0; background: var(--accent); opacity: calc(0.4 + var(--c) * 0.1); }
html:not(.cine) .ads-barras i { height: var(--h); }
.pieza.ve .ads-barras i { animation: barraCrece .85s cubic-bezier(.16,1,.3,1) calc(var(--c) * 85ms + 250ms) forwards; }
@keyframes barraCrece { to { height: var(--h); } }
.ads-nota { font-size: 0.62rem; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
    .ico, .burb, .ads-chips li { opacity: 1 !important; transform: none !important; }
    .aro-v { stroke-dashoffset: 62 !important; transition: none; }
    .shot img { clip-path: inset(0 0 0 0) !important; }
    .ads-barras i { height: var(--h) !important; }
    .seo-nuestra, .seo-otra, .pos-de, .pos-a { animation: none !important; }
    .pos-a { opacity: 0 !important; }
    .burb.esc i { animation: none !important; }
}

/* =====================================================================
   MÓVIL · repaso de los anchos pequeños
   Los puntos de corte de arriba son todos min-width, así que el móvil es
   la base. Aquí van los ajustes que no se resuelven con clamp: zona
   segura de las muescas, áreas táctiles y las piezas que necesitan
   reorganizarse en vez de encogerse.
   ===================================================================== */

/* --- muescas: la barra fija y el pie también las respetan --- */
.nav { padding-top: env(safe-area-inset-top, 0px); }
.pie { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.progreso { top: env(safe-area-inset-top, 0px); }

/* --- áreas táctiles: 40px de base, 44px en pantallas de dedo --- */
.btn-tema, .nav-menu { width: 40px; height: 40px; }
.modal-cerrar { width: 40px; height: 40px; }
@media (pointer: coarse) {
    .btn-tema, .nav-menu, .modal-cerrar { width: 44px; height: 44px; }
    .nav-movil a { padding-block: 0.85rem; }
    .duda summary { padding-block: 1.5rem; }
    .desfile-rail .rail-i { height: 44px; }
}

@media (max-width: 760px) {
    /* las cifras en fila, número y etiqueta en la misma línea */
    .cifras { grid-template-columns: 1fr; }
    .cifras div,
    .cifras div + div {
        display: flex; align-items: baseline; gap: 0.75rem;
        padding: 0.85rem 0 0.85rem 0; border-left: 0;
    }
    .cifras div + div { border-top: 1px solid var(--rule); }
    .cifras b { margin-bottom: 0; flex: 0 0 auto; min-width: 3.4em; }
    .cifras span { font-size: 0.85rem; }

    /* el desfile: menos recorrido de pulgar para los seis productos */
    .desfile { height: 300vh; height: 300svh; }
    .desfile-titulo { font-size: 0.64rem; letter-spacing: 0.16em; }
    .desfile-line { min-height: 6.4em; }
    .desfile-pie { gap: 0.7rem; }
    .desfile-ayuda { font-size: 0.56rem; letter-spacing: 0.1em; gap: 0.35rem; }

    /* el número gigante del fondo, más contenido */
    .srv-marca { font-size: clamp(7rem, 30vw, 12rem); opacity: 0.07; }
}

@media (max-width: 560px) {
    /* los tres móviles, dos por fila en vez de uno debajo de otro */
    .pz-apps { gap: 0.6rem; }
    .pz-apps .tel { flex: 0 1 calc(50% - 0.3rem); max-width: none; min-width: 0; border-radius: 18px; }
    .tel-2, .tel-3 { margin-top: 0; }
    .aro { width: 88px; }
    .aro-n b { font-size: 0.98rem; }
    .tel-kpi { gap: 0.15rem; }
    .tel-kpi li { font-size: 0.52rem; }
    .tel-kpi b { font-size: 0.7rem; }

    /* la ficha del SEO necesita más alto: el titular envuelve a dos líneas
       y la descripción a tres. El recorrido de las grises lo sigue solo. */
    .pz-seo { --alto-nuestra: 176px; }
    .seo-tit { font-size: 0.82rem; }

    /* la gráfica de publicidad, algo más baja */
    .ads-barras { height: 84px; gap: 6px; }

    /* el chat, burbujas más anchas al haber menos sitio */
    .burb { max-width: 92%; font-size: 0.78rem; }

    /* el proceso: el alambre ocupa poco útil en vertical estrecho */
    .lienzo { aspect-ratio: 16 / 9; }
}

@media (max-width: 400px) {
    /* a esta anchura la barra no cabe entera: el botón vive en el menú,
       y el flotante aparece igualmente al bajar */
    .nav-acts > .btn-main { display: none; }
    .nav-logo img { height: 24px; }
    .nav-in { gap: 0.7rem; }
}

/* el enlace del menú móvil que sustituye al botón de la barra */
.nav-movil .movil-cta { color: var(--accent); font-weight: 600; border-bottom: 0; }

/* =====================================================================
   CLIENTES · cinta continua que acelera con el scroll
   Los once logotipos son blancos puros con transparencia, así que en
   papel se perderían. En vez de duplicar ficheros, brightness(0) los
   pasa a tinta conservando el recorte, y en oscuro se quedan como están.
   ===================================================================== */
.clientes { padding-block: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--rule); overflow: hidden; }
.clientes .eyebrow { margin-bottom: 1.6rem; }
.clientes-pie { margin-top: 1.6rem; color: var(--ink-dim); font-size: 0.92rem; max-width: 52ch; }

.cinta { overflow: hidden; position: relative; }
.cinta::before, .cinta::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 7vw, 90px); z-index: 2; pointer-events: none;
}
.cinta::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.cinta::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.cinta-pista { display: flex; width: max-content; will-change: transform; }
.clientes-lista { display: flex; align-items: center; gap: clamp(2.2rem, 6vw, 4.5rem); padding-right: clamp(2.2rem, 6vw, 4.5rem); }
.cliente { flex: 0 0 auto; }
.cliente img {
    height: clamp(22px, 4.6vw, 30px); width: auto; max-width: 180px; object-fit: contain;
    filter: brightness(0); opacity: 0.45;
    transition: opacity 400ms ease, filter 400ms ease;
}
.cliente:hover img { opacity: 0.95; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cliente img { filter: none; opacity: 0.52; }
    :root:not([data-theme="light"]) .cinta::before { background: linear-gradient(90deg, var(--paper), transparent); }
    :root:not([data-theme="light"]) .cinta::after { background: linear-gradient(270deg, var(--paper), transparent); }
}
:root[data-theme="dark"] .cliente img { filter: none; opacity: 0.52; }

@media (prefers-reduced-motion: reduce) {
    /* sin movimiento la cinta se arrastra con el dedo */
    .cinta { overflow-x: auto; }
    .cinta-pista { transform: none !important; }
    .clientes-lista[aria-hidden="true"] { display: none; }
}

/* =====================================================================
   SUBPÁGINAS
   Piezas que solo aparecen en las páginas interiores: migas, la foto de
   la ciudad, la tarjeta de la oficina, los enlaces cruzados, los planes
   del asistente y el aviso de Posiciona. Todo con los mismos tokens que
   la portada, así que siguen al tema claro y oscuro sin reglas aparte.
   ===================================================================== */

/* --- migas de pan --- */
.migas {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.4rem;
}
.migas a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid transparent; }
.migas a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.migas span[aria-hidden] { opacity: 0.5; }

/* --- el visual de la portada de cada página --- */
.portada-visual {
    margin-bottom: clamp(2.5rem, 7vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
    border-bottom: 1px solid var(--rule);
}
.portada-visual .pieza { margin-bottom: 0; }

.foto-ciudad {
    margin: 0; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--rule); background: var(--paper-2);
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.45);
}
.foto-ciudad img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1100 / 560; object-fit: cover;
}

/* --- la tarjeta de la oficina de Sevilla --- */
.sede {
    display: grid; gap: 1rem; align-items: center;
    grid-template-columns: auto 1fr;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    border: 1px solid var(--rule); border-radius: 16px;
    background: var(--paper-2);
    margin-bottom: clamp(2rem, 6vw, 3.5rem);
}
@media (min-width: 760px) { .sede { grid-template-columns: auto 1fr auto; } }
.ciudad-sede-ico {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    background: var(--grad); color: #fff; flex: 0 0 auto;
}
.ciudad-sede-ico svg { width: 21px; height: 21px; }
.ciudad-sede-txt { display: grid; gap: 0.25rem; min-width: 0; }
.ciudad-sede-txt strong { font-family: var(--f-disp); font-weight: 700; letter-spacing: -0.02em; font-size: 1.02rem; }
.ciudad-sede-txt span { color: var(--ink-dim); font-size: 0.88rem; }
.ciudad-sede-cta {
    grid-column: 1 / -1; justify-self: start;
    font-size: 0.86rem; color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--accent); padding-bottom: 1px;
}
@media (min-width: 760px) { .ciudad-sede-cta { grid-column: auto; justify-self: end; } }

/* --- enlaces cruzados a otras zonas o servicios --- */
.cruces { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cruces a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.15rem; border-radius: 999px;
    border: 1px solid var(--rule); color: var(--ink);
    text-decoration: none; font-size: 0.9rem; font-weight: 500;
    transition: border-color 220ms ease, transform 220ms ease;
}
.cruces a:hover { border-color: var(--accent); transform: translateY(-1px); }
.cruces a svg { width: 15px; height: 15px; color: var(--accent); }

/* --- los puntos sobre la banda honda del proceso --- */
.proceso .eyebrow b { color: var(--accent); font-weight: 500; }
.puntos-deep { border-bottom: 0; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.puntos-deep .punto { border-top-color: var(--deep-rule); }
.puntos-deep .punto p { color: var(--on-deep-dim); }
.puntos-deep .punto h3 { color: var(--on-deep); }

/* --- el aviso de Posiciona.tech --- */
.auditoria {
    display: grid; gap: 1.2rem; align-items: center;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    border-radius: 18px; background: var(--deep); color: var(--on-deep);
    margin-bottom: clamp(2rem, 6vw, 3.5rem);
}
@media (min-width: 820px) { .auditoria { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.lp-audit-txt h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.08; margin-bottom: 0.6rem; }
.lp-audit-txt p { color: var(--on-deep-dim); font-size: 0.93rem; max-width: 56ch; }
.lp-audit-cta {
    display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start;
    padding: 0.85rem 1.5rem; border-radius: 999px;
    background: var(--grad); color: #fff; text-decoration: none;
    font-weight: 600; font-size: 0.92rem; white-space: nowrap;
    transition: opacity 200ms ease, transform 200ms ease;
}
.lp-audit-cta:hover { opacity: 0.92; transform: translateY(-1px); }
.lp-audit-cta svg { width: 17px; height: 17px; }

/* --- los planes del asistente de IA --- */
.planes { display: grid; gap: 1.1rem; margin-top: clamp(1.5rem, 4vw, 2.2rem); }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.plan {
    display: grid; gap: 0.55rem; align-content: start;
    padding: clamp(1.3rem, 3vw, 1.8rem);
    border: 1px solid var(--rule); border-radius: 18px;
    background: var(--paper-2); position: relative;
}
.plan-destacado { border-color: var(--accent); box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.4); }
.plan-etiqueta {
    position: absolute; top: -0.7rem; left: clamp(1.3rem, 3vw, 1.8rem);
    font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.14em;
    text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px;
    background: var(--grad); color: #fff;
}
.plan h3 { font-family: var(--f-disp); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.03em; }
.plan-para { color: var(--ink-dim); font-size: 0.87rem; min-height: 2.6em; }
.plan-precio { display: flex; align-items: baseline; gap: 0.3rem; margin-top: 0.4rem; }
.plan-precio strong {
    font-family: var(--f-disp); font-weight: 900; font-size: 2.6rem;
    letter-spacing: -0.05em; line-height: 1; color: var(--accent);
}
.plan-precio span { font-size: 0.88rem; color: var(--ink-dim); }
.plan-alta { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--ink-faint); }
.plan-cta {
    display: block; text-align: center; margin-block: 0.9rem 0.3rem;
    padding: 0.75rem 1.2rem; border-radius: 999px;
    border: 1px solid var(--rule); color: var(--ink);
    text-decoration: none; font-weight: 600; font-size: 0.89rem;
    transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}
.plan-cta:hover { border-color: var(--accent); }
.plan-destacado .plan-cta { background: var(--grad); border-color: transparent; color: #fff; }
.plan-destacado .plan-cta:hover { opacity: 0.92; }
.plan-lista { display: grid; }
.plan-lista li {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding-block: 0.6rem; border-top: 1px solid var(--rule-soft); min-width: 0;
}
.plan-et { font-size: 0.83rem; color: var(--ink-dim); min-width: 0; }
.plan-txt { font-size: 0.83rem; font-weight: 600; text-align: right; flex: 0 0 auto; }
.plan-si, .plan-no { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 auto; }
.plan-si svg { width: 15px; height: 15px; color: var(--accent); }
.plan-no svg { width: 15px; height: 15px; color: var(--ink-faint); opacity: 0.55; }

/* =====================================================================
   PÁGINAS LEGALES
   Prosa larga. Aquí no hay más diseño que el que necesita leerse: una
   sola columna estrecha, jerarquía por tamaño y aire, y las tablas y
   avisos con el mismo lenguaje de filetes del resto del sitio.
   ===================================================================== */
.hero-legal { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.hero-legal h1 { font-size: clamp(2rem, 6.5vw, 3.6rem); max-width: 20ch; }

.legal {
    max-width: 74ch;
    margin-inline: auto;
    padding-bottom: clamp(3rem, 8vw, 5rem);
    font-size: 0.97rem;
    color: var(--ink-dim);
}
.legal > *:first-child { margin-top: 0; }
.legal h2 {
    font-family: var(--f-disp); font-weight: 900; color: var(--ink);
    font-size: clamp(1.3rem, 3.4vw, 1.75rem); line-height: 1.1;
    letter-spacing: -0.035em;
    margin-top: 2.8rem; margin-bottom: 0.9rem;
    padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
.legal h3 {
    font-family: var(--f-disp); font-weight: 700; color: var(--ink);
    font-size: 1.05rem; letter-spacing: -0.02em;
    margin-top: 1.8rem; margin-bottom: 0.5rem;
}
.legal h4 {
    font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-faint);
    margin-top: 1.4rem; margin-bottom: 0.4rem;
}
.legal p { margin-bottom: 1rem; }
.legal ul, .legal ol { margin: 0 0 1.2rem 1.1rem; display: grid; gap: 0.45rem; }
.legal li { padding-left: 0.2rem; }
.legal ul li { list-style: none; position: relative; }
.legal ul li::before {
    content: ""; position: absolute; left: -0.9rem; top: 0.62em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.legal ol { list-style: decimal; }
.legal a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.legal strong { color: var(--ink); font-weight: 600; }

/* --- tablas: en móvil se desplazan en vez de romper la página --- */
.legal table {
    width: 100%; border-collapse: collapse; margin-bottom: 1.4rem;
    font-size: 0.88rem; display: block; overflow-x: auto;
}
@media (min-width: 640px) { .legal table { display: table; } }
.legal th, .legal td {
    text-align: left; padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
.legal th {
    font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
    border-bottom-color: var(--rule); white-space: nowrap;
}

/* --- cajas de aviso y de datos --- */
.info-box, .highlight-box {
    padding: clamp(1rem, 3vw, 1.4rem); border-radius: 14px;
    background: var(--paper-2); border: 1px solid var(--rule);
    margin-bottom: 1.4rem;
}
.highlight-box { border-left: 3px solid var(--accent); }
.info-box p:last-child, .highlight-box p:last-child { margin-bottom: 0; }

/* --- índice de los términos --- */
.toc {
    padding: clamp(1.1rem, 3vw, 1.5rem); border-radius: 14px;
    border: 1px solid var(--rule); background: var(--paper-2);
    margin-bottom: 2.4rem;
}
.toc h2 { margin: 0 0 0.9rem; padding: 0; border: 0; font-size: 1.05rem; }
.toc-list { display: grid; gap: 0.4rem; margin: 0; }
.toc-list li { list-style: none; padding: 0; }
.toc-list li::before { display: none; }
.toc-list a { border-bottom: 0; color: var(--ink-dim); font-size: 0.9rem; }
.toc-list a:hover { color: var(--ink); }
.toc-number { font-family: var(--f-mono); font-size: 0.72rem; color: var(--accent); margin-right: 0.5rem; }

.legal-section { scroll-margin-top: 90px; }
.section-number { font-family: var(--f-mono); font-size: 0.72rem; color: var(--accent); margin-right: 0.5rem; }

/* --- tipos de cookie --- */
.cookie-type {
    display: inline-block; font-family: var(--f-mono); font-size: 0.62rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    border: 1px solid var(--rule); color: var(--ink-dim);
}
.cookie-tecnica { border-color: var(--accent); color: var(--accent); }
.cookie-analisis { border-color: var(--rule); }

/* --- los datos de contacto del final --- */
.contacto-legal { display: grid; gap: 0.8rem; margin-bottom: 1.4rem; }
.contacto-item { display: flex; align-items: center; gap: 0.7rem; }
.contacto-icon {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 10px; background: var(--grad); color: #fff; flex: 0 0 auto;
}
.contacto-icon svg { width: 17px; height: 17px; }
.contacto-datos { min-width: 0; }

/* --- la página que no existe --- */
.perdida { padding-block: clamp(5rem, 16vw, 10rem) clamp(4rem, 12vw, 7rem); }
.perdida .cruces { margin-top: 2.2rem; }

/* =====================================================================
   ENTRADILLA · «la rendija» · solo la primera visita
   Un único gesto: una línea de marca se abre en canal, descubre el
   logotipo y sigue abriéndose hasta destapar la portada. Sin más color
   que el degradado de Amber sobre tinta.

   Toda la secuencia son animaciones CSS con fill-mode forwards, así que
   termina sola aunque el JavaScript no llegue a ejecutarse nunca. El
   script solo decide si se muestra, bloquea el scroll y la retira del DOM.

     0,00 - 0,60  el filete de marca crece desde el centro
     0,55 - 1,35  se abre en canal y descubre el logotipo por su eje
     1,15 - 1,75  entra la firma
     1,95 - 2,75  las hojas salen de pantalla y la tinta se disuelve
   ===================================================================== */
.intro { display: none; }

.intro-activa .intro {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow: hidden;
    background-color: #0B0A0F;
    animation: tintaSale 0.8s cubic-bezier(.76, 0, .24, 1) 1.95s forwards;
}
@keyframes tintaSale {
    to { background-color: rgba(11, 10, 15, 0); visibility: hidden; pointer-events: none; }
}

/* --- las dos hojas de tinta, con el filete de marca en el canto --- */
.intro-hoja {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    background-color: #0B0A0F;
}
.intro-hoja::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(100deg, #FF6B9D 0%, #C84B9E 48%, #8B5CF6 100%);
    animation:
        fileteCrece 0.6s cubic-bezier(.16, 1, .3, 1) forwards,
        fileteAncho 0.8s cubic-bezier(.16, 1, .3, 1) 0.55s forwards,
        fileteSale  0.35s ease 1.95s forwards;
}
@keyframes fileteCrece { from { width: 0; }   to { width: 58%; } }
@keyframes fileteAncho { from { width: 58%; } to { width: 100%; } }
@keyframes fileteSale  { to { opacity: 0; } }

.intro-hoja.arriba { top: 0; height: 50%; animation: hojaArribaAbre 0.8s cubic-bezier(.16, 1, .3, 1) 0.55s forwards, hojaArribaSale 0.8s cubic-bezier(.76, 0, .24, 1) 1.95s forwards; }
.intro-hoja.arriba::after { bottom: -1px; }
.intro-hoja.abajo  { bottom: 0; height: 50%; animation: hojaAbajoAbre 0.8s cubic-bezier(.16, 1, .3, 1) 0.55s forwards, hojaAbajoSale 0.8s cubic-bezier(.76, 0, .24, 1) 1.95s forwards; }
.intro-hoja.abajo::after  { top: -1px; }

@keyframes hojaArribaAbre { from { transform: translateY(0); }      to { transform: translateY(-13vh); } }
@keyframes hojaArribaSale { from { transform: translateY(-13vh); }  to { transform: translateY(-101%); } }
@keyframes hojaAbajoAbre  { from { transform: translateY(0); }      to { transform: translateY(13vh); } }
@keyframes hojaAbajoSale  { from { transform: translateY(13vh); }   to { transform: translateY(101%); } }

/* --- el centro, que se descubre por su propio eje --- */
.intro-centro {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 1.2rem;
    padding-inline: 1.5rem;
    text-align: center;
}
.intro-logo {
    height: clamp(32px, 6.5vw, 54px);
    width: auto;
    clip-path: inset(50% 0 50% 0);
    animation:
        logoAbre 0.85s cubic-bezier(.16, 1, .3, 1) 0.62s forwards,
        logoSale 0.7s cubic-bezier(.76, 0, .24, 1) 1.95s forwards;
}
@keyframes logoAbre { to { clip-path: inset(0 0 0 0); } }
@keyframes logoSale { to { opacity: 0; transform: scale(1.07); } }

.intro-claim {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(246, 244, 242, 0.5);
    opacity: 0;
    transform: translateY(9px);
    animation:
        firmaEntra 0.6s cubic-bezier(.16, 1, .3, 1) 1.15s forwards,
        firmaSale 0.5s ease 1.95s forwards;
}
@keyframes firmaEntra { to { opacity: 1; transform: none; } }
@keyframes firmaSale  { to { opacity: 0; } }

/* quien la salte con un clic, Escape o la barra espaciadora */
.intro.fuera {
    opacity: 0;
    transition: opacity 0.38s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .intro-activa .intro { display: none; }
}

/* =====================================================================
   AJUSTE · las piezas pasaron a ancho completo de sección
   Se centran y se limitan, para que no queden estiradas ni dejen hueco.
   ===================================================================== */
.pieza { width: 100%; max-width: 940px; margin-inline: auto; }
.pieza-pie { text-align: center; }
.pz-apps { justify-content: center; }
.pz-apps .tel { flex: 0 1 200px; max-width: 220px; }
.tel-2 { margin-top: clamp(0.8rem, 3vw, 2.2rem); }
.tel-3 { margin-top: clamp(0.4rem, 1.5vw, 1.1rem); }
.tel-busca { display: block; font-size: 0.58rem; color: rgba(246,244,242,.45); background: rgba(246,244,242,.07); border-radius: 999px; padding: 0.35rem 0.6rem; }
.tel-cats { display: flex; gap: 4px; }
.tel-cats li { font-size: 0.52rem; padding: 0.2rem 0.45rem; border-radius: 999px; border: 1px solid rgba(246,244,242,.16); color: rgba(246,244,242,.65); }
.tel-cats li:first-child { border-color: var(--accent); color: var(--accent); }
.tel-3 .tel-foto { height: 54px; }
.tel-nota::before { content: "★ "; color: var(--accent); }
.pz-chat { max-width: 620px; margin-inline: auto; }
.pz-seo { max-width: 720px; margin-inline: auto; }
.pz-ads { max-width: 820px; margin-inline: auto; }