/* ==========================================================================
   TIPOGRAFÍAS AUTO-HOSPEDADAS
   Hallazgo B-01 de la auditoría del 2026-08-13: antes se pedían a
   fonts.googleapis.com y fonts.gstatic.com en cada visita, con lo cual la IP y
   el user-agent de cada visitante llegaban a un tercero sin consentimiento.
   Ahora salen del propio dominio: se termina el envío de datos, se elimina un
   punto de falla externo y se ahorran dos conexiones en el arranque.

   Solo los subsets `latin` y `latin-ext`: el `latin` ya cubre todo el español
   (ñ, tildes, ¿, ¡) y la puntuación tipográfica. No se bajaron cyrillic ni
   vietnamese. Cada @font-face lleva su unicode-range, así que el navegador
   descarga únicamente el archivo que el texto necesita.

   Licencias: Geist e IBM Plex Mono son SIL Open Font License 1.1, que permite
   el alojamiento propio. Archivos tomados de Google Fonts el 2026-08-15.
   ========================================================================== */
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fuentes/geist-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fuentes/geist-400-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;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fuentes/geist-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fuentes/geist-500-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;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fuentes/geist-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fuentes/geist-600-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;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fuentes/geist-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Geist';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fuentes/geist-700-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;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fuentes/ibmplexmono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fuentes/ibmplexmono-400-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;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fuentes/ibmplexmono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fuentes/ibmplexmono-500-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;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fuentes/ibmplexmono-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fuentes/ibmplexmono-600-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;
}



/* ==========================================================================
   JUJUMYS · Sistema de identidad visual v1.0
   Tokens derivados del Manual de Marca. No inventar valores intermedios.
   ========================================================================== */
:root{
  /* Marca */
  --negro:#0B0B0B;
  --blanco:#F7F5F2;
  --celeste:#22C7F2;
  --naranja:#F97316;

  /* Neutros y variantes */
  --superficie:#161616;
  --elevacion:#1F1F1F;
  --linea:#2A2A2A;
  --gris:#8A8A8A;
  --celeste-600:#0E9EC7;
  --naranja-600:#C75A10;

  /* Espaciado: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Radios: 8 componentes · 12 tarjetas · 20 contenedores */
  --r-sm:8px; --r-md:12px; --r-lg:20px;

  /* Vidrio: superficie clara translucida sobre el negro */
  --vidrio:rgba(247,245,242,.045);
  --vidrio-alto:rgba(247,245,242,.085);
  --vidrio-borde:rgba(247,245,242,.13);
  --vidrio-borde-alto:rgba(34,199,242,.55);

  /* Resplandor: halo corto, solo en hover. Nunca ambiental. */
  --glow-naranja:0 0 20px -4px rgba(249,115,22,.55);
  --glow-celeste:0 0 20px -4px rgba(34,199,242,.45);
  --anillo-celeste:0 0 0 1px rgba(34,199,242,.22);

  /* Movimiento */
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-micro:160ms; --t-ui:260ms; --t-narr:560ms;

  /* Layout */
  --marco:1280px;
  --gutter:24px;
  --header-h:72px;

  /* Logotipo · la J del isotipo (ver bloque .jota más abajo).
     Caja del glifo 234.5 × 751.7, medida sobre el isotipo oficial. */
  --jota:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234.5 751.7'%3E%3Cpath d='M84 0H234.5v156.17L84 231.65Z M84 262.97L234.5 186.7v127.82L84 391.48Z M84 423.03L234.5 345.84v197.48c0 59.26-20.52 111.06-63.07 153.61C134.24 734.12 87.71 751.7 0 751.7V601.43c41.98 0 84-36.37 84-88.23Z'/%3E%3C/svg%3E");

  /* Sección beige de contraste */
  --beige:#EDE8DD;
  --beige-sup:#E4DED3;
  --beige-linea:#D4CFC4;
  --beige-texto:#2A2723;
  --beige-gris:#6B6860;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:"Geist","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html{scroll-behavior:smooth; scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,textarea{font:inherit; color:inherit}

/* Foco visible: requisito de accesibilidad, nunca se elimina */
:focus-visible{outline:2px solid var(--celeste); outline-offset:3px; border-radius:2px}

/* --------------------------------------------------------------- Tipografía */
.mono{
  font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-weight:500; font-size:12px; line-height:16px;
  letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow{color:var(--naranja); margin:0 0 var(--s5)}
.eyebrow--sis{color:var(--celeste)}
.eyebrow--gris{color:var(--gris)}

.display{
  font-weight:700; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(36px,6.2vw,60px); margin:0;
}
.h2{
  font-weight:700; letter-spacing:-.015em; line-height:1.1;
  font-size:clamp(28px,4.4vw,44px); margin:0;
}
.h3{font-weight:600; font-size:20px; line-height:28px; letter-spacing:-.005em; margin:0}
.body{font-size:16px; line-height:24px; color:#CFCCC7; max-width:66ch; margin:0}
.small{font-size:13px; line-height:20px; color:var(--gris); margin:0}
.punto{color:var(--naranja)}

/* ------------------------------------------------- Logotipo · las dos J
   Manual, pág. 20: las dos J del logotipo NO son las de la tipografía, son
   exactamente las del isotipo — mismo trazo, mismos cortes a 63°. El símbolo
   no se re-dibuja: el glifo de --jota está calcado del isotipo oficial
   (caja 234.5 × 751.7, asta 150.5, cortes de 31 cada 158.75).

   Se pinta con `mask` sobre currentColor, así hereda el color de cada
   contexto (blanco, gris del bloque posición, negro sobre fondo claro) sin
   duplicar el archivo. Medidas atadas al em para que acompañe cualquier
   tamaño de texto:
     alto  .710em = altura de mayúscula de Geist → la J calza con las demás
     ancho .2214em = 234.5/751.7 del alto → proporción del isotipo intacta
     laterales .022 / .068em — asimétricos a propósito: a la altura de
     mayúscula la J solo muestra el asta (la panza abre recién abajo), así que
     el aire va después del asta para que el ritmo con la U quede parejo. El
     .022 de la izquierda es el colchón que evita que la panza toque la letra
     anterior en el hero, que trackea en negativo (-.045em).

   La J tipográfica sigue en el DOM y se esconde con text-indent: el texto
   del elemento sigue siendo "JUJUMYS." para lectores de pantalla, para el
   buscador y para copiar y pegar. */
.jota{
  display:inline-block; vertical-align:baseline;
  height:.710em; width:.2214em;
  margin-left:.022em; margin-right:.068em;
  text-indent:-9em; overflow:hidden;
  background:currentColor;
  -webkit-mask:var(--jota) no-repeat center/100% 100%;
          mask:var(--jota) no-repeat center/100% 100%;
}
/* Sin soporte de mask no se dibuja nada: vuelve la J de la tipografía. */
@supports not ((mask-image:none) or (-webkit-mask-image:none)){
  .jota{
    width:auto; height:auto; margin:0;
    text-indent:0; overflow:visible; background:none;
  }
}

/* ------------------------------------------------------------------ Layout */
.wrap{width:100%; max-width:var(--marco); margin-inline:auto; padding-inline:var(--gutter)}

.seccion{position:relative; overflow:hidden; padding-block:var(--s9)}
.seccion + .seccion{border-top:1px solid var(--linea)}
@media (min-width:900px){ .seccion{padding-block:120px} }

/* Diagonal a 63° — recurso propietario derivado de los cortes del isotipo.
   Línea sólida, sin glow, sin degradado dominante. */
.diag{
  position:absolute; height:1px; width:var(--len,120vh);
  background:var(--c,var(--celeste));
  left:var(--x); top:var(--y);
  transform-origin:0 50%; transform:rotate(-63deg);
  opacity:var(--o,.55);
  pointer-events:none;
}
/* Se traza al entrar la seccion. Sin JS quedan dibujadas. */
.traza .diag{transform:rotate(-63deg) scaleX(0); transition:transform 1250ms var(--ease)}
.traza .is-in > .diag{transform:rotate(-63deg) scaleX(1)}
.traza .is-in > .diag:nth-of-type(2){transition-delay:200ms}
@media (max-width:640px){ .diag{opacity:.35} }

/* Marca de agua del isotipo: opacidad 2–3%, nunca compite con el contenido */
.marca-agua{
  position:absolute; pointer-events:none; color:var(--blanco);
  opacity:.028; width:var(--w,280px);
}

/* ----------------------------------------------------------------- Header */
.header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  background:rgba(11,11,11,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.header__in{
  height:100%; position:relative; display:flex; align-items:center; gap:var(--s5);
  max-width:var(--marco); margin-inline:auto; padding-inline:var(--gutter);
}
.marca{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.marca__iso{width:38px; height:auto; color:var(--blanco)}
.marca__txt{font-weight:700; font-size:15px; letter-spacing:.14em}

/* En reposo el header muestra las dos J del isotipo. Al pasar el mouse son ESAS
   MISMAS J las que se abren y el wordmark se escribe en tres tiempos:
     1 · las dos J, pegadas como en el isotipo, se separan            → J J
     2 · entra la U del medio: primero abre el hueco, después se ve   → JUJ
     3 · se escribe el resto letra por letra                          → JUJUMYS.
   Solo donde hay hover real: en táctil queda el lockup de siempre
   (imagen del isotipo + nombre a 15px), sin animación.

   Y SOLO DE 861px PARA ARRIBA. `hover` y `pointer` describen el dispositivo,
   no el ancho: sin el min-width, este bloque también se activaba en una
   ventana angosta con mouse y le ganaba por especificidad (.header .marca__txt
   pesa 0,2,0) al header de celular, que quedaba con el wordmark a 39px.
   A partir de 861px el burger ya no existe, así que los dos bloques nunca
   se pisan. */
@media (hover:hover) and (pointer:fine) and (min-width:861px),
       (max-width:860px){
  /* La coma es un O: escritorio-con-mouse O cualquier ancho de celular. Un
     tablet táctil de 861px para arriba no entra en ninguna de las dos y se
     queda con el lockup clásico (imagen + nombre), que es lo correcto: no
     tiene hover ni burger, así que no tendría cómo desplegar el wordmark.

     ---- Perillas del lockup. Se ajustan en vivo en afinar.html ------------
     --marca-fs    tamaño general: manda sobre TODO lo demás (los valores en em
                   cuelgan de acá). Las J miden --marca-j × --marca-fs de alto.
     --marca-j     alto de la J. .73em = altura de mayúscula de Geist Bold, o
                   sea todas las letras del mismo tamaño. Más arriba de .73em
                   las J sobresalen; más abajo se leen chicas.
     --marca-j-prop  ancho ÷ alto de la J. .312 es la proporción original del
                   isotipo (234,5 × 751,7). Cambiarlo lo deforma.
     --marca-j-sep aire a los lados de cada J cuando el wordmark está abierto.
                   Compensa que el glifo del isotipo no tiene sidebearing: su
                   tinta llega al borde de la caja, la de una U no.
     --marca-pad   aire a los lados de cada letra. Es tracking simétrico: NO usar
                   letter-spacing, que sólo empuja hacia la derecha y dejaba la U
                   del medio pegada a la primera J (.123em contra .220em).
     --marca-y     corrimiento vertical para centrar la tinta en los 72px. */
  .header .marca{
    --marca-fs:39px;
    --marca-j:.885em;
    --marca-j-prop:.340;
    --marca-j-sep:.110em;
    --marca-pad:.070em;
    --marca-y:1.5px;
    /* Tiempos de la animación */
    --marca-t1:240ms;    /* 1 · las J se abren                        → J J */
    --marca-t2:230ms;    /* 2 · retardo hasta que se ve la U del medio → JUJ */
    --marca-t3:380ms;    /* 3 · arranque de la cadena U M Y S .  → JUJUMYS. */
    --marca-paso:45ms;   /*     y el paso entre una letra y la siguiente */

    padding-inline:10px; margin-inline:-10px;   /* área de hover cómoda */
  }
  /* Fuera la imagen: las J del wordmark ocupan su lugar. Medido sobre
     logo-header-76.png, la tinta del isotipo son 14,3 × 22,8 px. */
  .header .marca__iso{display:none}
  .header .marca__txt{
    display:inline-block; white-space:nowrap;
    font-size:var(--marca-fs); line-height:1; letter-spacing:0;
    transform:translateY(var(--marca-y));
  }
  /* Las dos J SON el isotipo: siempre visibles y pegadas en reposo. */
  .header .marca__txt .jota{
    height:var(--marca-j); width:calc(var(--marca-j) * var(--marca-j-prop));
    margin:0;
    transition:margin var(--marca-t1) var(--ease);
  }

  /* El resto de las letras arranca colapsado a ancho cero */
  .header .marca__l{
    display:inline-block; overflow:hidden;
    max-width:0; opacity:0; padding-inline:0; letter-spacing:0;
    transition:max-width 200ms var(--ease), opacity 160ms var(--ease),
               padding 200ms var(--ease);
  }

  /* DOS DISPARADORES, no uno:
       .marca:is(:hover,:focus-visible,.abierta)  → escritorio, por el cursor
       .header.abierto .marca                     → celular, por el menú
     El segundo cuelga solo del estado del menú, así que la animación funciona
     aunque app.js no llegue a poner la clase .abierta. Menos piezas que se
     puedan romper, y además el afinador puede dispararla sin simular el JS.

     1 · las dos J se abren: se separan por sus márgenes y por el hueco que abre
         la caja de la U, todavía invisible                              → J J */
  .header .marca:is(:hover,:focus-visible,.abierta) .marca__txt .jota,
  .header.abierto .marca .marca__txt .jota{
    margin-inline:var(--marca-j-sep);
  }

  /* 2 · la U del medio recién se hace visible pasado --marca-t2        → JUJ */
  .header .marca:is(:hover,:focus-visible,.abierta) .marca__txt > :nth-child(2),
  .header.abierto .marca .marca__txt > :nth-child(2){
    max-width:2em; opacity:1; padding-inline:var(--marca-pad);
    transition:max-width var(--marca-t1) var(--ease),
               padding var(--marca-t1) var(--ease),
               opacity 140ms var(--ease) var(--marca-t2);
  }

  /* 3 · U M Y S . se escriben en cadena                           → JUJUMYS. */
  .header .marca:is(:hover,:focus-visible,.abierta) .marca__txt > :nth-child(n+4),
  .header.abierto .marca .marca__txt > :nth-child(n+4){
    max-width:2em; opacity:1; padding-inline:var(--marca-pad);
    transition:max-width 150ms var(--ease) var(--d),
               padding 150ms var(--ease) var(--d),
               opacity 130ms var(--ease) var(--d);
  }
  .header .marca__txt > :nth-child(4){--d:var(--marca-t3)}
  .header .marca__txt > :nth-child(5){--d:calc(var(--marca-t3) + var(--marca-paso))}
  .header .marca__txt > :nth-child(6){--d:calc(var(--marca-t3) + 2*var(--marca-paso))}
  .header .marca__txt > :nth-child(7){--d:calc(var(--marca-t3) + 3*var(--marca-paso))}
  .header .marca__txt > :nth-child(8){--d:calc(var(--marca-t3) + 4*var(--marca-paso))}

  /* Franja angosta: el menú horizontal todavía existe (el burger aparece recién
     en 860px) y el wordmark abierto le dejaba 11px de aire. Ahí achicamos. */
  @media (min-width:861px) and (max-width:1000px){
    .header .marca{--marca-fs:36px}
  }

  /* ---- CELULAR ----------------------------------------------------------
     Mismo mecanismo, otras medidas. Acá no hay hover: el disparador es
     `.header.abierto`, o sea el menú abierto (ver los dos selectores más
     arriba). Por eso el wordmark se despliega DESDE las dos J en vez de
     aparecer al lado de una imagen: las J del texto SON el isotipo.
     Valores elegidos por el cliente el 2026-08-21 en afinar-movil.html. */
  @media (max-width:860px){
    .header .marca{
      --marca-fs:21px;
      --marca-j:.85em;
      --marca-j-sep:.03em;
      --marca-y:1px;
      padding-inline:0; margin-inline:0;   /* sin hover, no hace falta el área */
    }
  }
}

.nav{margin-left:auto; display:flex; align-items:center; gap:var(--s6)}
/* Links (Inicio/Cómo trabajamos/Propuesta) centrados en el header; el CTA queda a la derecha */
.nav__links{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:var(--s6)}
.nav a{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:#A8A5A0;
  position:relative; padding-block:6px;
  transition:color var(--t-micro) var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--naranja); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-ui) var(--ease);
}
.nav a:hover{color:var(--blanco)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--blanco)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* CTA minimalista del header: texto + flecha naranja, separado por una línea */
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--blanco); font-size:12px; letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  padding-left:var(--s6); margin-left:var(--s2); border-left:1px solid var(--linea);
  transition:color var(--t-micro) var(--ease);
}
.nav__cta::after{display:none}
.nav__cta:hover{color:var(--blanco)}
.nav__cta .flecha{color:var(--naranja); transition:transform var(--t-ui) var(--ease)}
.nav__cta:hover .flecha{transform:translateX(3px)}

/* Botones · altura 46px · una sola acción primaria por región. Sólidos, sin
   brillos ni neón (eso los hacía ver de plantilla). Jerarquía por color y peso. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding-inline:22px; border-radius:var(--r-sm);
  font-weight:600; font-size:14px;
  border:1px solid transparent; cursor:pointer;
  transition:background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
             color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease),
             transform var(--t-micro) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primario{background-color:var(--naranja); color:#0B0B0B}
.btn--primario:hover{background-color:var(--naranja-600); color:var(--blanco); box-shadow:0 10px 26px -12px rgba(249,115,22,.55)}
.btn--fantasma{border-color:var(--vidrio-borde); color:var(--blanco); background:transparent}
.btn--fantasma:hover{border-color:rgba(247,245,242,.28); background:var(--vidrio)}
.btn--sm{height:40px; padding-inline:18px; font-size:13px}
.btn .flecha{transition:transform var(--t-ui) var(--ease)}
.btn:hover .flecha{transform:translateX(3px)}

/* Borde especular (secciones/páginas · no header). El brillo del borde sigue al
   cursor y se enciende por proximidad; lo maneja specular.js. Dos streaks simétricos
   (como el shader original). Sin JS o con reduced-motion no aparece: el botón queda igual. */
.btn.spec{position:relative; isolation:isolate}
.btn.spec::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  pointer-events:none; z-index:3; opacity:var(--sb-bright,0);
  background:conic-gradient(from var(--sb-angle,130deg),
    var(--sb-line,rgba(255,255,255,.92)) 0deg, transparent 34deg,
    transparent 146deg, var(--sb-line,rgba(255,255,255,.92)) 180deg, transparent 214deg,
    transparent 326deg, var(--sb-line,rgba(255,255,255,.92)) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:1px solid var(--linea); border-radius:var(--r-sm);
  align-items:center; justify-content:center; cursor:pointer;
}
.burger span{display:block; width:18px; height:1.5px; background:var(--blanco); position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--blanco);
  transition:transform var(--t-ui) var(--ease);
}
.burger span::before{top:-6px} .burger span::after{top:6px}
.header.abierto .burger span{background:transparent}
.header.abierto .burger span::before{transform:translateY(6px) rotate(45deg)}
.header.abierto .burger span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .burger{display:flex}

  /* El lockup completo chocaba con la cámara y la muesca del teléfono. En
     reposo queda solo el isotipo; el nombre se despliega al abrir el menú,
     que es cuando hay lugar y cuando tiene sentido mostrar la marca entera.
     Se anima max-width y no width porque el texto no tiene ancho fijo: así
     no hay número mágico y si algún día cambia el nombre, sigue andando. */
  /* El wordmark de celular ya no es "imagen + nombre al lado": lo maneja el
     bloque del lockup de más arriba, donde las dos J del texto SON el isotipo.
     Acá solo queda el gap, porque la imagen está oculta. */
  .marca{gap:0}
  .burger{margin-left:auto}
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--negro); border-bottom:1px solid var(--linea);
    padding:var(--s2) var(--gutter) var(--s5);
    margin-left:0;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility var(--t-ui);
  }
  .header.abierto .nav{transform:none; opacity:1; visibility:visible}
  .nav__links{position:static; transform:none; flex-direction:column; align-items:stretch; gap:0}
  .nav a{padding-block:14px; border-bottom:1px solid var(--linea); font-size:15px}
  .nav a::after{display:none}
  .nav__cta{margin-top:var(--s4); border-left:none; border-bottom:none; padding:14px 18px;
    justify-content:center; background:var(--naranja); color:#0B0B0B; border-radius:var(--r-sm); font-size:14px}
  .nav__cta .flecha{color:currentColor}
}

/* ====================================================== HERO cinematográfico */
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding-block:var(--s9) 120px;
  --mx:0; --my:0;                 /* parallax del mouse, lo setea hero.js */
  --sy:0;                         /* progreso de scroll 0..1, lo setea hero.js */
}

/* Capa 0 · luz ambiental viva (regla de "sin glow ambiental" soltada a propósito) */
.hero__luz{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  transform:translate(calc(var(--mx) * -16px), calc(var(--my) * -16px));
  transition:transform 500ms var(--ease);
}
/* Canvas de objetos 3D (Three.js). Vive sobre la luz y debajo del grano/contenido. */
.hero3d{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  width:100%; height:100%; display:block;
  opacity:0; transition:opacity 900ms var(--ease);
}
.hero3d.listo{opacity:1}
.hero__halo{position:absolute; border-radius:50%; filter:blur(64px); will-change:transform}
.hero__halo--cel{
  width:min(88vw,960px); height:min(88vw,960px); left:50%; top:40%;
  background:radial-gradient(circle, rgba(34,199,242,.20), rgba(34,199,242,.045) 46%, transparent 70%);
  animation:hero-deriva-cel 22s ease-in-out infinite alternate;
}
.hero__halo--nar{
  width:min(42vw,520px); height:min(42vw,520px); left:24%; top:70%;
  background:radial-gradient(circle, rgba(249,115,22,.13), transparent 66%);
  animation:hero-deriva-nar 26s ease-in-out infinite alternate;
}
@keyframes hero-deriva-cel{
  from{transform:translate(-53%,-50%) scale(1)}
  to{transform:translate(-45%,-53%) scale(1.09)}
}
@keyframes hero-deriva-nar{
  from{transform:translate(-48%,-46%) scale(1)}
  to{transform:translate(-54%,-52%) scale(1.12)}
}


/* Capa 2 · grano film sobre todo, material real más allá del vector plano */
.hero__grano{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.42; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* Capa 3 · contenido */
.hero__centro{
  position:relative; z-index:3; max-width:1200px;
  transform:translateY(calc(var(--sy) * -60px));
  opacity:calc(1 - var(--sy) * 1.1);
  will-change:transform,opacity;
}
.hero__tag{color:var(--gris); margin:0 0 var(--s5); overflow-wrap:anywhere}
@media (max-width:400px){ .hero__tag{letter-spacing:.12em} }
/* El wordmark va siempre en UNA sola línea: nunca se parte en dos pisos.
   El tamaño se escala con el ancho disponible para que entre entero.
   Perillas (se ajustan en vivo en afinar.html):
     --hero-fs     tamaño máximo, al que llega en pantallas anchas
     --hero-track  interletra. -.036em son 2px más de aire que el -.045em
                   original, medidos al tamaño máximo.
   Ojo: agrandar cualquiera de las dos ensancha el nombre, y si supera el ancho
   de .hero__centro se desborda. afinar.html avisa cuando eso pasa. */
.hero__nombre{
  --hero-fs:238px;
  --hero-track:.020em;
  font-weight:700; line-height:.9; letter-spacing:var(--hero-track);
  font-size:clamp(52px,17vw,var(--hero-fs));
  white-space:nowrap;
  margin:0;
}
.hero__nombre .punto{color:var(--naranja)}
.hero__nombre-in{display:inline-block}
.hero__centro .hero__acciones{justify-content:center; margin-top:var(--s7)}

/* Enlace con riel de luz: mismo recurso que el indicador de scroll de abajo
   (texto mono + línea que se carga en celeste y baja). */
.riel-cta{
  display:inline-flex; flex-direction:column; align-items:center; gap:var(--s3);
  color:var(--gris); font-size:11px;
  transition:color var(--t-micro) var(--ease);
}
.riel-cta:hover{color:var(--blanco)}

/* Indicador de scroll: es el mismo .riel-cta, anclado abajo. Se centra con
   left/right + margin auto y NO con translateX(-50%): el reveal termina en
   `transform:none` (.anim [data-reveal].is-in, más específico) y le comía el
   centrado, dejándolo corrido ~64px a la derecha. */
.hero__scroll{
  position:absolute; left:0; right:0; margin-inline:auto; width:max-content;
  bottom:var(--s8); z-index:3;
  opacity:calc(1 - var(--sy) * 2);
}
.hero__scroll-riel{position:relative; width:1px; height:46px; background:var(--linea); overflow:hidden}
.hero__scroll-riel i{
  position:absolute; left:0; top:0; width:1px; height:16px; background:var(--celeste);
  animation:hero-scroll 1900ms var(--ease) infinite;
}
@keyframes hero-scroll{
  0%{transform:translateY(-16px); opacity:0}
  30%{opacity:1}
  70%,100%{transform:translateY(46px); opacity:0}
}
/* En celular SÍ se muestra: .hero__pie está oculto a este ancho, así que la
   franja de abajo del hero queda libre y no hay con qué chocar. Antes estaba
   escondido y el hero se quedaba con una sola salida (Solicitar propuesta),
   sin ninguna señal de que abajo seguía habiendo sitio. */
@media (max-width:640px){
  .hero__scroll{bottom:var(--s6)}
  .hero__scroll .hero__scroll-riel{height:34px}
}
/* Viewports bajos (laptops): achicar el wordmark y apretar el espaciado para que
   los botones no choquen con el indicador de scroll. Muy bajos: ocultar el indicador. */
@media (max-height:820px){
  .hero__nombre{font-size:clamp(52px,12vw,calc(var(--hero-fs) * .645))}
  .hero__centro .hero__acciones{margin-top:var(--s6)}
}
@media (max-height:660px){ .hero__scroll{display:none} }

/* ===================== Entrada del wordmark · TYPING ========================
   Las letras se escriben una por una, de izquierda a derecha, y el punto
   naranja cierra con su propia animación (ver "El punto naranja" más abajo).

   Cada letra va en su propio span, pero span INLINE, nunca inline-block: el
   inline-block es una caja atómica y rompe el kerning con la letra siguiente.
   Medido en Geist Bold, el par YS solo ya perdía .046em — 11px a 238px, la S
   despegándose de la Y a simple vista. Con spans inline el kerning queda
   intacto y el nombre mide exactamente lo mismo que antes, al píxel.
   El precio: transform no se aplica a un inline, así que las letras entran con
   opacidad y no con desplazamiento. El punto es la excepción (ver abajo).

   Perillas:
     --tipeo-inicio  cuánto espera antes de escribir la primera letra
     --tipeo-paso    cuánto tarda entre una letra y la siguiente          */
.hero__nombre{ --tipeo-inicio:180ms; --tipeo-paso:70ms; }

.anim .hero__nombre .hn__l:not(.punto){opacity:0}
.anim .hero.is-in .hero__nombre .hn__l:not(.punto){
  opacity:1;
  transition:opacity 190ms var(--ease) var(--dl);
}

.hero__nombre .hn__l:nth-child(1){--dl:var(--tipeo-inicio)}
.hero__nombre .hn__l:nth-child(2){--dl:calc(var(--tipeo-inicio) + 1*var(--tipeo-paso))}
.hero__nombre .hn__l:nth-child(3){--dl:calc(var(--tipeo-inicio) + 2*var(--tipeo-paso))}
.hero__nombre .hn__l:nth-child(4){--dl:calc(var(--tipeo-inicio) + 3*var(--tipeo-paso))}
.hero__nombre .hn__l:nth-child(5){--dl:calc(var(--tipeo-inicio) + 4*var(--tipeo-paso))}
.hero__nombre .hn__l:nth-child(6){--dl:calc(var(--tipeo-inicio) + 5*var(--tipeo-paso))}
.hero__nombre .hn__l:nth-child(7){--dl:calc(var(--tipeo-inicio) + 6*var(--tipeo-paso))}
.hero__nombre .hn__l:nth-child(8){--dl:calc(var(--tipeo-inicio) + 7*var(--tipeo-paso))}

/* ------------------------- El punto naranja -------------------------------
   El punto es el único inline-block del wordmark, porque su animación necesita
   transform. Eso le rompe el kerning con la S (-.020em en Geist Bold), que se
   devuelve exacto con el margen negativo. Es el único par afectado. */
.hero__nombre .punto{
  display:inline-block; margin-left:-.020em;
  position:relative;
  /* Eje = centro de la tinta. Medido con una sonda apoyada en la línea de base:
     dentro de la caja del punto la base cae a .8025em del borde superior, y la
     tinta está .0775em por encima → .725em desde arriba, .175em desde abajo. */
  --punto-eje:.725em;
  --punto-abajo:.175em;
  transform-origin:.120em var(--punto-eje);
}
.anim .hero__nombre .punto{opacity:0}
.anim .hero.is-in .hero__nombre .punto{
  animation-delay:var(--dl); animation-fill-mode:both;
  animation-timing-function:var(--ease);
}

/* CAÍDA FRÍA — el punto cae en celeste, el golpe contra la línea de base lo
   destella en blanco y lo deja naranja, y del impacto sale una onda celeste.
   El color no cambia porque sí: lo cambia el golpe.
   Elegida entre diez variantes; las otras nueve se borraron. */
.anim .hero.is-in .hero__nombre .punto{
  animation-name:pt-caida; animation-duration:980ms;
}
/* La onda arranca a los 320ms de la animación, que es cuando el punto toca la
   base (34% de 980ms = 333ms). Si se corre, se nota enseguida. */
.hero__nombre .punto::after{
  content:""; position:absolute; left:.120em; bottom:var(--punto-abajo);
  width:.17em; height:.17em; margin:-.085em 0 0 -.085em; border-radius:50%;
  border:.02em solid var(--celeste); opacity:0; pointer-events:none;
}
.anim .hero.is-in .hero__nombre .punto::after{
  animation:pt-onda 900ms var(--ease) calc(var(--dl) + 320ms) both;
}
@keyframes pt-caida{
  0%{opacity:0; color:var(--celeste); transform:translateY(-1.5em) scale(.85,1.25)}
  26%{opacity:1; color:var(--celeste)}
  34%{color:#FFFFFF; transform:translateY(0) scale(1.35,.68)}
  43%{color:#FFFFFF}
  54%{color:var(--naranja); transform:translateY(-.26em) scale(.92,1.12)}
  73%{transform:translateY(0) scale(1.08,.94)}
  87%{transform:translateY(-.07em) scale(.99,1.02)}
  100%{opacity:1; color:var(--naranja); transform:translateY(0) scale(1)}
}
@keyframes pt-onda{
  0%{opacity:0; transform:scale(1)}
  8%{opacity:.9}
  60%,100%{opacity:0; transform:scale(3.6)}
}


.hero__pie{
  position:absolute; left:0; right:0; bottom:var(--s6); z-index:3;
  color:#5E5B57; opacity:calc(1 - var(--sy) * 2);
}
.hero__pie .wrap{display:flex; justify-content:space-between; gap:var(--s4)}
@media (max-width:640px){ .hero__pie{display:none} }

/* ========================= SECCIÓN 2 · convergencia (grilla compartida) ===== */
.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:var(--s8);
  align-items:center; text-align:left;
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s7)}
}
.hero__lede,.hero__viz{min-width:0}   /* deja envolver el texto en vez de desbordar */

.hero__kicker{color:var(--gris); margin:0 0 var(--s5); overflow-wrap:anywhere}
.hero__kicker.eyebrow--sis{color:var(--celeste)}
@media (max-width:400px){ .hero__kicker{letter-spacing:.12em} }
.hero__titular{
  font-weight:700; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(36px,6vw,76px);
  margin:0; text-wrap:balance;
}
.hero__enf{color:var(--gris)}   /* segunda línea en gris: la jerarquía la da el peso, no el color */
.hero__sub{margin:var(--s6) 0 0; max-width:52ch; color:#CFCCC7}
.hero__acciones{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7)}

/* -- Gráfico de convergencia: el recurso Alignment ------ */
.hero__viz{
  position:relative;
  --mx:0; --my:0;                 /* parallax, lo setea hero.js */
}
.conv{
  width:100%; height:auto; max-width:520px;
  margin-inline:auto;
  overflow:visible;
}
@media (max-width:899px){
  .hero__viz{max-width:440px; margin-top:var(--s4)}
}

.conv line{fill:none; stroke-linecap:round}
.conv__spine{stroke:var(--celeste); stroke-width:1.5; opacity:.9}
.conv__ghost{stroke:var(--linea); stroke-width:1; opacity:.7}
.conv__feed{stroke:#5F6B70; stroke-width:1.25}
.conv__eje{
  transform:translate(calc(var(--mx) * (6px + var(--i) * 4px)),
                      calc(var(--my) * (6px + var(--i) * 4px)));
  transition:transform 320ms var(--ease);
}
.conv__nodo{fill:var(--celeste)}
.conv__rot{
  fill:var(--gris);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.conv__salida{fill:var(--naranja)}
.conv__pulso{fill:none; stroke:var(--naranja); stroke-width:1.5; opacity:0}
.conv__spine,.conv__nodo,.conv__salida{
  transform:translate(calc(var(--mx) * 10px), calc(var(--my) * 10px));
  transition:transform 320ms var(--ease);
}

/* Estado final por defecto: sin JS o con reduced-motion, todo dibujado y visible */
.conv [data-linea]{stroke-dasharray:1; stroke-dashoffset:0}
.conv__nodo,.conv__salida{opacity:1}

/* Con animación habilitada: arranca oculto y se dibuja/alinea al entrar */
.anim .conv [data-linea]{stroke-dashoffset:1}
.anim .conv__nodo,.anim .conv__salida{opacity:0}
.anim .conv__eje{opacity:0; transform:translateY(14px)}

.anim .seccion--disc.is-in .conv__spine{
  transition:stroke-dashoffset 900ms var(--ease);
  stroke-dashoffset:0;
}
.anim .seccion--disc.is-in .conv__eje{
  opacity:1; transform:translateY(0);
  transition:opacity 520ms var(--ease), transform 640ms var(--ease);
  transition-delay:calc(360ms + var(--i) * 140ms);
}
.anim .seccion--disc.is-in .conv__feed{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 620ms var(--ease);
  transition-delay:calc(420ms + var(--i) * 140ms);
}
.anim .seccion--disc.is-in .conv__nodo{
  opacity:1; transition:opacity 260ms var(--ease);
  transition-delay:calc(900ms + var(--i) * 140ms);
}
.anim .seccion--disc.is-in .conv__salida{
  opacity:1; transition:opacity 400ms var(--ease);
  transition-delay:1320ms;
}
.anim .seccion--disc.is-in .conv__pulso{animation:conv-pulso 2600ms var(--ease) 1500ms infinite}
@keyframes conv-pulso{
  0%{opacity:.6; r:6}
  70%{opacity:0; r:22}
  100%{opacity:0; r:22}
}

/* ===================================================== Bento de servicios ===
   Tres cards oscuras: nombre del servicio a gran escala + fondo animado
   naranja (seda de luz / onda de puntos / órbitas) que cobra vida en hover.
   Los devices reales (browser RYM, teléfono) flotan dentro. bento.js setea
   --px/--py para el parallax. Sin JS o con reduced-motion: quietas y completas. */
.bento{display:grid; grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s7)}
@media (min-width:820px){
  .bento{grid-template-columns:1.25fr 1fr; grid-auto-rows:1fr}
  .bento__card--lg{grid-column:1; grid-row:1 / span 2}
}
.bento__card{
  --px:0; --py:0;
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); min-height:290px; padding:var(--s6);
  display:flex; flex-direction:column; align-items:flex-start;
  background:#0c0a09; border:1px solid var(--linea);
  color:var(--blanco); text-decoration:none;
  transition:transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
             box-shadow var(--t-ui) var(--ease);
}
.bento__card--lg{min-height:564px}
.bento__card:hover{transform:translateY(-4px); border-color:rgba(249,115,22,.42);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7), 0 0 46px -20px rgba(249,115,22,.5)}
@media (hover:hover){ .bento:hover .bento__card:not(:hover){opacity:.68; transition:opacity var(--t-ui) var(--ease)} }

/* Contenido por encima del fondo animado */
.bento__num,.bento__name,.bento__d,.bento__device,.bento__btn{position:relative; z-index:2}
.bento__num{display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:29px; border-radius:var(--r-sm); margin-bottom:var(--s5);
  font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:12px; letter-spacing:.06em;
  color:var(--naranja); border:1px solid rgba(249,115,22,.42); background:rgba(249,115,22,.09)}
.bento__name{font-weight:700; text-transform:uppercase; letter-spacing:-.012em; line-height:.94;
  font-size:clamp(28px,3.4vw,44px); margin:0; color:var(--blanco)}
.bento__card--lg .bento__name{font-size:clamp(40px,4.6vw,64px)}
.bento__name .ac{color:var(--naranja)}
.bento__d{color:#C7C4BF; font-size:14.5px; line-height:1.5; margin:var(--s4) 0 0; max-width:30ch}
.bento__btn{margin-top:var(--s6); display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:var(--r-sm); border:1px solid rgba(249,115,22,.55);
  color:var(--naranja); font-size:13px; font-weight:600;
  transition:background var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease)}
/* Dos acciones en la tarjeta 01. Manual: un solo acento naranja por region —
   si hay dos acciones, una es fantasma. Por eso el :not() de abajo: al pasar el
   cursor por la tarjeta se llena SOLO el boton primario. */
.bento__card:hover .bento__btn:not(.bento__btn--fantasma){
  background:var(--naranja); color:#0c0a09; border-color:var(--naranja)}
.bento__btn svg{transition:transform var(--t-ui) var(--ease)}
.bento__card:hover .bento__btn svg{transform:translateX(3px)}

/* Fila de acciones. Los botones ya traen z-index 2 de la regla de contenido, asi
   que quedan por encima de .bento__cubre y se llevan el clic. */
.bento__acciones{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.bento__acciones .bento__btn{margin-top:0}

/* Boton secundario: mismos valores que .btn--fantasma del sistema. */
.bento__btn--fantasma{border-color:var(--vidrio-borde); color:var(--blanco); background:transparent}
.bento__btn--fantasma:hover{border-color:rgba(247,245,242,.28); background:var(--vidrio)}

/* Capa invisible que mantiene toda la tarjeta clickeable hacia el paquete.
   z-index 1: arriba del fondo animado (.bfx, z-index 0) y debajo del contenido
   (z-index 2), asi no le roba el clic al boton secundario. */
.bento__cubre{position:absolute; inset:0; z-index:1; border-radius:inherit}

/* Fondo animado (capa base) */
.bfx{position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden}

/* 01 · seda de luz naranja (Desarrollo Web) */
.bfx--seda{background:radial-gradient(130% 100% at 12% 0%, #2a1a10 0%, #150d08 52%, #0b0908 100%)}
.bfx--seda::before{content:""; position:absolute; inset:-25%;
  background:radial-gradient(38% 30% at 32% 42%, rgba(249,115,22,.5), transparent 70%),
            radial-gradient(32% 24% at 62% 56%, rgba(249,115,22,.34), transparent 70%),
            radial-gradient(28% 20% at 46% 28%, rgba(255,176,92,.3), transparent 70%);
  filter:blur(24px); opacity:.5; animation:seda 16s ease-in-out infinite alternate}
.bento__card:hover .bfx--seda::before{opacity:.82; animation-duration:9s}
.bfx__seda-lin{position:absolute; inset:0; width:100%; height:100%; opacity:.45}
.bfx__seda-lin path{fill:none; stroke:rgba(255,182,112,.34); stroke-width:1}
@keyframes seda{to{transform:translate(6%,-4%) rotate(6deg) scale(1.12)}}

/* 02 · onda de puntos + línea que sube (Impulso Digital) */
.bfx--onda{background:radial-gradient(120% 100% at 82% 18%, #26160e, #0e0b09 60%)}
.bfx--onda::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(249,115,22,.5) 1.1px, transparent 1.7px);
  background-size:15px 15px;
  -webkit-mask:radial-gradient(115% 92% at 88% 36%, #000, transparent 62%);
  mask:radial-gradient(115% 92% at 88% 36%, #000, transparent 62%);
  opacity:.45}
.bento__card:hover .bfx--onda::before{opacity:.8; animation:onda 2.6s linear infinite}
@keyframes onda{to{background-position:15px 7px}}
.bfx__linea{position:absolute; inset:0; width:100%; height:100%}
.bfx__wave{fill:none; stroke:var(--naranja); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(249,115,22,.6))}
.bfx__node{fill:#fff; stroke:var(--naranja); stroke-width:2; filter:drop-shadow(0 0 5px rgba(249,115,22,.85))}
.bfx__node--end{fill:var(--naranja)}
.bento__card:hover .bfx__wave{animation:trazo 1.5s var(--ease)}
.bento__card:hover .bfx__node{animation:nodo 1.8s ease-in-out infinite}
@keyframes nodo{0%,100%{opacity:.7}50%{opacity:1}}

/* 03 · órbitas alrededor del teléfono (Presencia en Redes) */
.bfx--orbita{background:radial-gradient(95% 95% at 74% 52%, #20140d, #0d0b09 62%)}
.bfx__orbe{position:absolute; inset:0; width:100%; height:100%}
.bfx__ring{fill:none; stroke:rgba(249,115,22,.22); stroke-width:1}
.bfx__sat{fill:var(--naranja); filter:drop-shadow(0 0 6px rgba(249,115,22,.9))}
.bento__card:hover .bfx__ring{animation:anillo 3s ease-in-out infinite}
.bento__card:hover .bfx__ring:nth-of-type(2){animation-delay:.3s}
.bento__card:hover .bfx__ring:nth-of-type(3){animation-delay:.6s}
.bento__card:hover .bfx__sat{animation:nodo 1.8s ease-in-out infinite}
.bento__card:hover .bfx__sat:nth-of-type(5){animation-delay:.5s}
@keyframes anillo{0%,100%{stroke-opacity:.16}50%{stroke-opacity:.5}}

/* Device: browser RYM (card 01), empujado al pie */
.bento__device{position:relative; width:100%}
.bento__card--lg .bento__device{margin-top:auto; padding-top:var(--s6)}
.bento__device--win .ventana{transform:rotateY(calc(var(--px)*4deg)) rotateX(calc(var(--py)*-4deg));
  transform-style:preserve-3d; transition:transform 320ms var(--ease)}
.ventana{
  border-radius:12px; overflow:hidden; background:#111;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85);
}
.ventana__bar{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  background:#1b1b1b; border-bottom:1px solid rgba(255,255,255,.08);
}
.ventana__bar i{width:9px; height:9px; border-radius:50%; background:#3a3a3a}
.ventana__bar em{
  margin-left:10px; font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:10px; color:#8A8A8A; letter-spacing:.04em;
}
.ventana__pantalla{height:230px; overflow:hidden}
.ventana__pantalla img{width:100%; display:block; transition:transform 2.6s var(--ease)}
.bento__card:hover .ventana__pantalla img{transform:translateY(calc(-100% + 230px))}
@media (min-width:820px){ .bento__card--lg .ventana__pantalla{height:300px} .bento__card--lg:hover .ventana__pantalla img{transform:translateY(calc(-100% + 300px))} }

/* --------------------------------------------------------------------------
   Swap de casos (card 01) · dos sitios reales que rotan en 3D
   Cada tarjeta ocupa un "slot": i → x:i*X, y:-i*Y, z:-i*X*1.5.
   El slot 0 es el frente. swap.js rota el orden; el CSS define el reposo,
   así que sin JS queda el stack quieto, completo y legible.
   -------------------------------------------------------------------------- */
.swap{
  --swap-x:22px;          /* separación horizontal entre tarjetas */
  --swap-y:20px;          /* separación vertical entre tarjetas */
  --swap-n:3;             /* cantidad de tarjetas (swap.js lo recalcula solo) */
  --swap-bar:34px;        /* alto de la barra del navegador */
  position:relative; width:100%; height:0;
  /* El alto se calcula: barra + pantalla 16/9 del ancho real de la tarjeta + el
     escalonado de las que quedan atrás. El 1.778 tiene que seguir al
     aspect-ratio de .ventana__pantalla de más abajo. */
  padding-top:calc(
      var(--swap-bar)
    + var(--swap-y) * (var(--swap-n) - 1)
    + (100% - var(--swap-x) * (var(--swap-n) - 1)) / 1.778);
  perspective:1100px; perspective-origin:62% 50%;
}
@media (min-width:820px){ .swap{--swap-x:44px; --swap-y:38px} }

.swap__card{
  position:absolute; left:0; top:calc(var(--swap-y) * (var(--swap-n) - 1));
  width:calc(100% - var(--swap-x) * (var(--swap-n) - 1));
  transform-style:preserve-3d; backface-visibility:hidden; will-change:transform;
  transition:filter var(--t-narr) var(--ease);
}
/* Reposo sin JS: primera al frente, el resto escalonadas atrás */
.swap__card:nth-child(1){transform:translate3d(0,0,0); z-index:3}
.swap__card:nth-child(2){z-index:2;
  transform:translate3d(var(--swap-x), calc(var(--swap-y) * -1), calc(var(--swap-x) * -1.5))}
.swap__card:nth-child(3){z-index:1;
  transform:translate3d(calc(var(--swap-x) * 2), calc(var(--swap-y) * -2), calc(var(--swap-x) * -3))}
.swap__card--fondo{filter:brightness(.6) saturate(.85)}

/* La inclinación hacia el cursor queda solo en la tarjeta del frente */
.swap .ventana{transform:none}
.swap .swap__card--frente .ventana{
  transform:rotateY(calc(var(--px) * 3deg)) rotateX(calc(var(--py) * -3deg))}

/* Pantalla 16/9 fija para todas: el stack necesita tarjetas del mismo tamaño.
   El scroll del screenshot ya no se hace con translateY (dependía de la altura
   natural de la imagen y se rompía con capturas de otra proporción) sino con
   object-position, que se comporta igual con cualquier captura. */
.swap .ventana__pantalla{height:auto; aspect-ratio:16 / 9; background:#111}
.swap .ventana__pantalla img{
  width:100%; height:100%; object-fit:cover; object-position:50% 0%;
  transform:none; transition:object-position 2.6s var(--ease)}
.bento__card:hover .swap .ventana__pantalla img{transform:none}
/* Captura alta (RYM, 1280×900): entra a lo ancho y en hover baja mostrando el resto */
.bento__card:hover .swap__card--frente:not(.swap__card--ancho) .ventana__pantalla img{
  object-position:50% 100%}
/* Captura ancha (SYMA, 1200×559): entra completa, apoyada arriba, sobre el blanco
   de la propia página. Así no se recorta el logo de los costados. */
.swap__card--ancho .ventana__pantalla{background:#fff}
.swap__card--ancho .ventana__pantalla img{object-fit:contain}

/* El stack se puede clickear para pasar a la siguiente tarjeta. Va con
   cursor propio para que se note que es interactivo y no un simple adorno. */
.swap--tactil{cursor:pointer}

/* Indicadores: cuántas tarjetas hay y cuál está adelante. Decorativos. */
.swap__dots{display:flex; align-items:center; gap:7px; margin-top:var(--s4)}
.swap__dots i{
  display:block; width:7px; height:7px; border-radius:99px;
  background:rgba(247,245,242,.28);
  transition:width var(--t-ui) var(--ease), background var(--t-ui) var(--ease)}
.swap__dots i.on{width:22px; background:var(--naranja)}

/* Device: teléfono (card 03), flotando a la derecha */
.punto-vivo{width:7px; height:7px; border-radius:50%; background:#39D98A; box-shadow:0 0 0 0 rgba(57,217,138,.6); animation:latido 2s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(57,217,138,.55)}70%{box-shadow:0 0 0 7px rgba(57,217,138,0)}100%{box-shadow:0 0 0 0 rgba(57,217,138,0)}}
.bento__card--redes{padding-right:44%}
.bento__card--redes .bento__d{max-width:22ch}
.bento__device--tel{position:absolute; width:auto; left:auto; right:8px; top:50%; z-index:2;
  transform:translateY(-50%) rotate(4deg) translate(calc(var(--px)*6px), calc(var(--py)*6px));
  transition:transform 320ms var(--ease)}
.tel{
  width:160px; border-radius:20px; overflow:hidden; background:#0e0e0e;
  border:1px solid rgba(255,255,255,.14); padding:6px;
  box-shadow:0 40px 70px -28px rgba(0,0,0,.85);
}
.tel__top{display:flex; align-items:center; padding:6px 6px 8px}
.tel__marca{font-weight:600; font-size:12px; color:var(--blanco)}
.tel__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; transition:transform 2.4s var(--ease)}
.tel__grid img{width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:3px}
.bento__card:hover .tel__grid{transform:translateY(-14%)}
.bento__reac{position:absolute; z-index:3; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; color:var(--naranja);
  background:rgba(18,14,11,.9); border:1px solid rgba(249,115,22,.3);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.7);
  transform:translate(calc(var(--px)*-12px), calc(var(--py)*-12px)); transition:transform 320ms var(--ease)}
.bento__reac--1{top:-12px; left:-16px}
.bento__reac--2{bottom:6px; left:-20px}
@media (max-width:819px){
  .bento__card--redes{padding-right:var(--s6); padding-bottom:210px}
  .bento__device--tel{right:50%; top:auto; bottom:var(--s6); transform:translateX(50%) rotate(0)}
  .bento__reac--1{left:auto; right:-14px; top:0}
  .bento__reac--2{left:-14px; bottom:40px}
}

/* ============================ Panorama beige · "¿Te pasa alguna?" con vida === */
/* Fondo animado: manchas de luz cálida que derivan siempre */
.seccion--viva .wrap{position:relative; z-index:1}
.viva__fondo{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.viva__fondo span{position:absolute; border-radius:50%; filter:blur(72px); opacity:.75}
.viva__fondo span:nth-child(1){width:52vw; height:52vw; left:-12%; top:-22%;
  background:radial-gradient(circle, rgba(255,255,255,.85), transparent 70%);
  animation:viva-1 26s ease-in-out infinite alternate}
.viva__fondo span:nth-child(2){width:40vw; height:40vw; right:-6%; top:6%;
  background:radial-gradient(circle, rgba(34,199,242,.12), transparent 70%);
  animation:viva-2 32s ease-in-out infinite alternate}
.viva__fondo span:nth-child(3){width:46vw; height:46vw; left:22%; bottom:-26%;
  background:radial-gradient(circle, rgba(249,115,22,.09), transparent 70%);
  animation:viva-3 38s ease-in-out infinite alternate}
@keyframes viva-1{to{transform:translate(12%,10%) scale(1.16)}}
@keyframes viva-2{to{transform:translate(-14%,9%) scale(1.22)}}
@keyframes viva-3{to{transform:translate(10%,-12%) scale(1.12)}}

/* Grilla pareja 2×2. Cada card: texto (badge + título con marcador + CTA) a la
   izquierda, ilustración a la derecha. Las ilustraciones cobran vida en hover;
   en táctil quedan en su estado resuelto y completo (no dependen del movimiento). */

/* Anillos concéntricos tenues arriba a la derecha (geometría, no glow ambiental) */
.pano__anillos{position:absolute; top:-150px; right:-170px; width:640px; height:640px; z-index:0; pointer-events:none; opacity:.6}
.pano__anillos span{position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid rgba(249,115,22,.13)}
.pano__anillos span:nth-child(1){width:100%; height:100%}
.pano__anillos span:nth-child(2){width:73%; height:73%}
.pano__anillos span:nth-child(3){width:48%; height:48%}
.pano__anillos span:nth-child(4){width:26%; height:26%; border-color:rgba(249,115,22,.22)}

.pano__titulo{margin-top:var(--s2)}
.pano__enf{color:var(--naranja)}
.pano__sub{margin-top:var(--s4); color:var(--beige-gris)}

/* --- Remate de la sección · bloque partido ---------------------------------
   Las cuatro tarjetas de arriba ya son enlaces. Un par de botones sueltos acá
   dejaría seis cosas clickeables seguidas y ninguna con peso, así que las dos
   acciones son un solo bloque oscuro partido al medio: la mitad que mirás se
   ensancha y empuja a la otra, y la jerarquía la decide quien lee.
   Sin hover (touch) quedan 50/50, que es un reposo legítimo. */
.partido{
  display:flex; flex-wrap:wrap; margin-top:var(--s8);
  background:var(--negro); border-radius:var(--r-md); overflow:hidden;
}
.partido__a{
  flex:1 1 280px; min-width:0; min-height:140px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s2);
  padding:var(--s6); text-decoration:none; color:var(--blanco);
  transition:flex-grow var(--t-narr) var(--ease), background-color var(--t-ui) var(--ease);
}
/* Hairline divisoria: va como sombra interior para no sumar 1px al ancho */
.partido__a + .partido__a{box-shadow:inset 1px 0 0 rgba(247,245,242,.14)}
.partido__a:hover,
.partido__a:focus-visible{flex-grow:1.6; background-color:var(--superficie)}
.partido__a:focus-visible{outline:2px solid var(--naranja); outline-offset:-5px}
.partido__et{color:var(--naranja); font-size:10px}
.partido__a + .partido__a .partido__et{color:var(--celeste)}
.partido__tx{
  display:flex; align-items:center; gap:10px;
  font-size:20px; font-weight:600; letter-spacing:-.01em;
}
.partido__tx svg{flex:0 0 auto; transition:transform var(--t-ui) var(--ease)}
.partido__a:hover .partido__tx svg,
.partido__a:focus-visible .partido__tx svg{transform:translateX(5px)}

/* Apiladas: la divisoria pasa a ser horizontal y no se ensancha nada */
@media (max-width:700px){
  .partido{margin-top:var(--s7)}
  .partido__a{flex:1 1 100%; min-height:118px; padding:var(--s5)}
  .partido__a + .partido__a{box-shadow:inset 0 1px 0 rgba(247,245,242,.14)}
  .partido__a:hover,.partido__a:focus-visible{flex-grow:1}
  .partido__tx{font-size:18px}
}

.pano{display:grid; grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s7)}
@media (min-width:860px){ .pano{grid-template-columns:1fr 1fr} }

.pano__card{
  --px:0; --py:0;
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr; gap:var(--s5);
  border-radius:var(--r-lg); background:#FCFAF6;
  border:1px solid var(--beige-linea); padding:var(--s6);
  min-height:250px; text-decoration:none; color:var(--beige-texto);
  transition:transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease);
}
@media (min-width:560px){
  .pano__card{grid-template-columns:minmax(0,1fr) minmax(0,46%); align-items:center; gap:var(--s6)}
}
.pano__card:hover{transform:translateY(-4px); border-color:#CBB79A;
  box-shadow:0 28px 56px -26px rgba(42,39,35,.30)}
@media (hover:hover){
  .pano:hover .pano__card:not(:hover){opacity:.7; transition:opacity var(--t-ui) var(--ease)}
}

.pano__txt{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.pano__card .pano__badge.mono{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:29px; border-radius:var(--r-sm); margin-bottom:var(--s5);
  color:var(--naranja); border:1px solid rgba(249,115,22,.4);
  background:rgba(249,115,22,.07); letter-spacing:.04em;
}
.pano__t{
  font-size:20px; line-height:1.24; font-weight:600; letter-spacing:-.01em;
  color:var(--beige-texto); margin:0; max-width:20ch;
}
.hl{
  background:linear-gradient(rgba(249,115,22,.17), rgba(249,115,22,.17));
  color:inherit; border-radius:3px; padding:0 .1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.pano__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:var(--s6);
  font-size:13.5px; font-weight:600; color:var(--beige-texto);
}
.pano__cta-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--negro); color:#fff;
  transition:transform var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.pano__cta-ic svg{transition:transform var(--t-ui) var(--ease)}
.pano__card:hover .pano__cta-ic{background:var(--naranja)}
.pano__card:hover .pano__cta-ic svg{transform:translateX(2px)}

.pano__viz{
  position:relative; align-self:center; width:100%; min-height:158px;
  display:flex; align-items:center; justify-content:center;
  transform:rotateY(calc(var(--px)*4deg)) rotateX(calc(var(--py)*-4deg));
  transform-style:preserve-3d; transition:transform 320ms var(--ease);
}

/* ---- Ilustración 01 · browser con curva de consultas + tarjeta "0" + alerta ---- */
.fweb{position:relative; width:100%; max-width:284px}
.fweb__win{background:#fff; border:1px solid var(--beige-linea); border-radius:12px; overflow:hidden;
  box-shadow:0 22px 44px -26px rgba(42,39,35,.4)}
.fweb__bar{display:flex; gap:6px; padding:9px 12px; background:#F1ECE3; border-bottom:1px solid var(--beige-linea)}
.fweb__bar i{width:8px; height:8px; border-radius:50%; background:#CFC9BC}
.fweb__scr{padding:14px 12px 12px}
.fweb__chart{display:block; width:100%; height:auto; overflow:visible}
.fweb__base{stroke:var(--beige-linea); stroke-width:1.5; stroke-dasharray:2 5; stroke-linecap:round}
.fweb__line{fill:none; stroke:var(--naranja); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0}
.fweb__dot{fill:#fff; stroke:var(--naranja); stroke-width:2.5}
.fweb__card{position:absolute; right:-14px; bottom:-16px;
  background:#fff; border:1px solid var(--beige-linea); border-radius:10px; padding:9px 14px;
  box-shadow:0 16px 34px -18px rgba(42,39,35,.42);
  transform:translate(calc(var(--px)*-8px), calc(var(--py)*-8px)); transition:transform 320ms var(--ease)}
.fweb__card .mono{display:block; font-size:9px; color:var(--beige-gris); letter-spacing:.1em}
.fweb__card b{font-size:30px; font-weight:700; color:var(--beige-texto); line-height:1.1; letter-spacing:-.02em}
.fweb__bang{position:absolute; top:-12px; right:18px;
  width:30px; height:30px; border-radius:50%; background:var(--naranja); color:#fff;
  font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -8px rgba(249,115,22,.7);
  transform:translate(calc(var(--px)*-14px), calc(var(--py)*-14px)); transition:transform 320ms var(--ease)}
.pano__card:hover .fweb__line{animation:trazo 1.4s var(--ease)}
.pano__card:hover .fweb__dot{animation:aparece 1.4s var(--ease)}
.pano__card:hover .fweb__bang{animation:alerta 1.6s ease-in-out infinite}
@keyframes trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes aparece{0%,55%{opacity:0}100%{opacity:1}}
@keyframes alerta{0%,100%{box-shadow:0 10px 22px -8px rgba(249,115,22,.7), 0 0 0 0 rgba(249,115,22,.5)}
  50%{box-shadow:0 10px 22px -8px rgba(249,115,22,.7), 0 0 0 9px rgba(249,115,22,0)}}

/* ---- Ilustración 02 · publicación real + analítica que no cierra ---- */
.fpost{position:relative; width:100%; max-width:228px}
.fpost__card{background:#fff; border:1px solid var(--beige-linea); border-radius:14px; overflow:hidden;
  box-shadow:0 22px 44px -26px rgba(42,39,35,.42);
  transform:translate(calc(var(--px)*4px), calc(var(--py)*4px)); transition:transform 320ms var(--ease)}
.fpost__head{display:flex; align-items:center; gap:8px; padding:10px 12px}
.fpost__ava{width:26px; height:26px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,#F97316,#C75A10)}
.fpost__meta{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.fpost__meta b{font-size:12px; font-weight:600; color:var(--beige-texto)}
.fpost__meta i{font-style:normal; font-size:9px; color:var(--beige-gris)}
.fpost__dots{display:flex; gap:3px; margin-left:auto; flex-shrink:0}
.fpost__dots i{width:3px; height:3px; border-radius:50%; background:#C3BAA9}
.fpost__img{position:relative; height:120px; overflow:hidden; background:#EDE8DD}
.fpost__img img{width:100%; height:100%; object-fit:cover; display:block}
.fpost__heart{position:absolute; inset:0; margin:auto; width:52px; height:52px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); opacity:0; transform:scale(.4)}
.fpost__stats{display:flex; gap:16px; padding:9px 12px 11px; color:var(--beige-gris)}
.fpost__stat{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--beige-texto)}
.fpost__stat svg{color:var(--beige-gris)}
.fpost__panel{position:absolute; right:-16px; bottom:-16px; width:132px;
  background:#fff; border:1px solid var(--beige-linea); border-radius:11px; padding:9px 12px 10px;
  box-shadow:0 16px 34px -18px rgba(42,39,35,.45);
  transform:translate(calc(var(--px)*-14px), calc(var(--py)*-14px)); transition:transform 320ms var(--ease)}
.fpost__panel .mono{display:block; font-size:8.5px; color:var(--beige-gris); letter-spacing:.08em; margin-bottom:6px}
.fpost__spark{display:block; width:100%; height:22px}
.fpost__spark path{fill:none; stroke:#B8B0A2; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0}
.fpost__q{position:absolute; top:-13px; right:-11px;
  width:28px; height:28px; border-radius:50%; background:var(--naranja); color:#fff;
  font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px -8px rgba(249,115,22,.7)}
.pano__card:hover .fpost__heart{animation:post-heart 1.5s var(--ease)}
.pano__card:hover .fpost__spark path{animation:trazo 1.5s var(--ease)}
.pano__card:hover .fpost__q{animation:post-q 1.6s ease-in-out infinite}
@keyframes post-heart{0%{opacity:0; transform:scale(.4)}
  28%{opacity:1; transform:scale(1.18)}52%{opacity:1; transform:scale(.94)}
  72%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(1)}}
@keyframes post-q{0%,100%{box-shadow:0 10px 22px -8px rgba(249,115,22,.7), 0 0 0 0 rgba(249,115,22,.5)}
  50%{box-shadow:0 10px 22px -8px rgba(249,115,22,.7), 0 0 0 8px rgba(249,115,22,0)}}
@keyframes duda-q{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- Ilustración 03 · garabato de duda con burbujas contradictorias ---- */
.fduda{display:block; width:100%; max-width:300px; height:auto; overflow:visible}
.fduda__link{fill:none; stroke:#C3BAA9; stroke-width:1.5; stroke-dasharray:3 5; stroke-linecap:round}
.fduda__scribble{fill:none; stroke:var(--naranja); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0}
.fduda__q{fill:var(--naranja); font-family:Geist,sans-serif; font-weight:700; font-size:26px}
.fduda__b rect{fill:#fff; stroke:var(--beige-linea); stroke-width:1}
.fduda__b text{fill:var(--beige-gris); font-family:Geist,sans-serif; font-size:11.5px}
.fduda__fuerte{fill:var(--beige-texto); font-weight:600; font-size:13.5px}
.pano__card:hover .fduda__b--1{animation:flota-a 3s ease-in-out infinite}
.pano__card:hover .fduda__b--2{animation:flota-b 3.4s ease-in-out infinite}
.pano__card:hover .fduda__b--3{animation:flota-c 3.8s ease-in-out infinite}
.pano__card:hover .fduda__link{animation:marcha 1s linear infinite}
.pano__card:hover .fduda__scribble{animation:trazo 1.6s var(--ease)}
.pano__card:hover .fduda__q{animation:duda-q 1.8s ease-in-out infinite}
@keyframes flota-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes flota-b{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
@keyframes flota-c{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,3px)}}
@keyframes marcha{to{stroke-dashoffset:-16}}

/* ---- Ilustración 04 · barras que crecen con flecha ascendente ---- */
.fbar{display:block; width:100%; max-width:262px; height:auto; overflow:visible}
.fbar__base{stroke:var(--beige-linea); stroke-width:1.5; stroke-linecap:round}
.fbar__col{fill:#D9D3C7; transform-box:fill-box; transform-origin:bottom}
.fbar__col:last-of-type{fill:#CBC4B6}
.fbar__flecha,.fbar__punta{fill:none; stroke:var(--naranja); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:0}
.pano__card:hover .fbar__col{animation:barra-crece .7s var(--ease) both; animation-delay:calc(var(--i)*.09s)}
.pano__card:hover .fbar__flecha{animation:trazo 1s var(--ease) .2s both}
.pano__card:hover .fbar__punta{animation:trazo .4s var(--ease) 1.1s both}
@keyframes barra-crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Sin movimiento: las ilustraciones quedan en su estado final (completas y legibles) */
@media (prefers-reduced-motion:reduce){
  .pano__card:hover .fweb__line,.pano__card:hover .fweb__dot,.pano__card:hover .fweb__bang,
  .pano__card:hover .fpost__heart,.pano__card:hover .fpost__spark path,.pano__card:hover .fpost__q,
  .pano__card:hover .fduda__b,.pano__card:hover .fduda__link,.pano__card:hover .fduda__scribble,
  .pano__card:hover .fduda__q,.pano__card:hover .fbar__col,.pano__card:hover .fbar__flecha,
  .pano__card:hover .fbar__punta{animation:none}
}

/* Intro de propuesta: "Tres formas de trabajar juntos" + índice de servicios */
.seccion--intro{padding-block:var(--s8) var(--s9)}
.serv-idx{list-style:none; margin:var(--s7) 0 0; padding:0; display:grid; gap:var(--s3)}
@media (min-width:700px){ .serv-idx{grid-template-columns:repeat(3,1fr); gap:var(--s4)} }
.serv-idx a{display:flex; align-items:center; gap:12px; padding:16px 18px;
  border:1px solid var(--linea); border-radius:var(--r-md); background:var(--superficie);
  color:#CFCCC7; font-size:15px; font-weight:600; text-decoration:none;
  transition:border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), background var(--t-ui) var(--ease)}
.serv-idx a:hover{border-color:var(--celeste-600); color:var(--blanco); background:var(--elevacion)}
.serv-idx__n{color:var(--celeste); flex-shrink:0}

/* ================================ Propuesta · servicios inmersivos ========= */
.serv{position:relative; overflow:hidden; padding-block:var(--s9)}
@media (min-width:900px){ .serv{padding-block:118px} }
.serv--beige{background:var(--beige); color:var(--beige-texto)}
.serv + .serv{border-top:1px solid var(--linea)}
.serv--beige,.serv + .serv--beige,.serv--beige + .serv{border-top:none}

.serv__grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:var(--s8); align-items:center}
.serv__grid--rev .serv__info{order:-1}   /* mobile: el título antes que el visual */
@media (min-width:900px){
  .serv__grid{grid-template-columns:1fr 1fr; gap:var(--s9)}
  .serv__grid--rev .serv__info{order:2}  /* desktop: info a la derecha */
}
.serv__kicker{color:var(--celeste); display:block; margin-bottom:var(--s4)}
.serv__kicker--beige{color:var(--naranja)}
.serv__t{font-weight:700; letter-spacing:-.02em; line-height:1.05; font-size:clamp(32px,4.6vw,54px); margin:0}
.serv--beige .serv__t{color:var(--beige-texto)}
.serv__d{margin:var(--s5) 0 0; max-width:52ch; color:#CFCCC7}
.serv--beige .serv__d{color:var(--beige-gris)}
.serv__intro{max-width:60ch; margin-bottom:var(--s4)}
.serv__listas{display:grid; grid-template-columns:1fr; gap:var(--s6); margin-top:var(--s7)}
@media (min-width:560px){ .serv__listas{grid-template-columns:minmax(140px,auto) 1fr; gap:var(--s7)} }
.serv__label{color:var(--gris); display:block; margin-bottom:var(--s4)}
.serv--beige .serv__label{color:var(--beige-gris)}
.serv__cta{margin-top:var(--s7)}

/* Lista con check */
.check{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s3)}
.check li{position:relative; padding-left:28px; font-size:15px; line-height:1.4; color:#CFCCC7}
.serv--beige .check li{color:var(--beige-texto)}
.check li::before{content:""; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%;
  background:rgba(34,199,242,.12); border:1px solid rgba(34,199,242,.42)}
.check li::after{content:""; position:absolute; left:6px; top:5px; width:5px; height:9px;
  border:solid var(--celeste); border-width:0 2px 2px 0; transform:rotate(45deg)}
.serv--beige .check li::before{background:rgba(14,158,199,.1); border-color:rgba(14,158,199,.5)}
.serv--beige .check li::after{border-color:var(--celeste-600)}

/* Visual del servicio: flota e inclina hacia el cursor */
.serv__viz{position:relative; min-width:0; --px:0; --py:0; perspective:1100px; display:flex; justify-content:center}
/* Carrusel de ejemplos (Desarrollo Web) */
.carru{position:relative; width:100%; min-width:0; max-width:480px}
.carru__marco{overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85)}
.carru__pista{display:flex; transition:transform var(--t-narr) var(--ease)}
.carru__slide{flex:0 0 100%; min-width:0}
.carru__slide .ventana{border:none; border-radius:0; box-shadow:none}
.carru__scroll{height:300px; overflow:hidden; position:relative; background:#fff}

/* Maquetas abstractas por tipo de sitio (coherentes con la opción elegida) */
.mock{height:100%; width:100%; background:#fff; overflow:hidden; position:relative; font-size:0}
.mock__nav{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid #ededed}
.mock__logo{width:36px; height:9px; border-radius:2px; background:#141414}
.mock__nav i{width:24px; height:6px; border-radius:2px; background:#d8d8d8}
.mock__grow{flex:1}
/* Landing: una página enfocada */
.mockL__hero{display:flex; gap:16px; align-items:center; padding:22px 16px 16px}
.mockL__copy{flex:1; display:flex; flex-direction:column; gap:9px}
.mockL__h{height:13px; width:82%; border-radius:3px; background:#161616}
.mockL__h--2{width:56%}
.mockL__p{height:7px; width:92%; border-radius:3px; background:#e3e3e3}
.mockL__p--2{width:68%}
.mockL__cta{height:22px; width:96px; border-radius:6px; background:var(--naranja); margin-top:6px}
.mockL__art{width:128px; height:104px; border-radius:10px; background:linear-gradient(140deg,#22C7F2,#0E9EC7)}
.mockL__row{display:flex; gap:11px; padding:6px 16px 0}
.mockL__row span{flex:1; height:40px; border-radius:7px; background:#f4f4f4; border:1px solid #ededed}
/* Multi-sección: varias secciones apiladas */
.mockM__hero{display:flex; flex-direction:column; gap:8px; align-items:center; padding:20px 16px 14px}
.mockM__h{height:12px; width:60%; border-radius:3px; background:#161616}
.mockM__hero .mockM__p{height:7px; width:44%; border-radius:3px; background:#e3e3e3}
.mockM__split{display:flex; gap:14px; padding:0 16px 14px; align-items:center}
.mockM__txt{flex:1; display:flex; flex-direction:column; gap:7px}
.mockM__txt span{height:7px; border-radius:3px; background:#e6e6e6}
.mockM__txt span:nth-child(1){width:80%} .mockM__txt span:nth-child(2){width:95%} .mockM__txt span:nth-child(3){width:65%}
.mockM__img{width:110px; height:66px; border-radius:8px; background:#e9edf0; border:1px solid #e2e2e2}
.mockM__cards{display:flex; gap:10px; padding:0 16px}
.mockM__cards span{flex:1; height:52px; border-radius:7px; background:#f4f4f4; border:1px solid #e6e6e6}
/* E-commerce: grilla de productos */
.mockS__cart{width:16px; height:14px; border-radius:3px; border:2px solid #141414}
.mockS__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:16px}
.mockS__card{display:flex; flex-direction:column; gap:6px}
.mockS__img{height:52px; border-radius:7px; background:linear-gradient(135deg,#eef1f3,#dfe4e8); border:1px solid #e6e6e6}
.mockS__name{height:6px; width:80%; border-radius:2px; background:#dcdcdc}
.mockS__price{height:8px; width:42%; border-radius:2px; background:#141414}
/* Rediseño: antes / después */
.mock--redi{display:flex}
.mockR__lado{flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:8px}
.mockR__lado--antes{background:#efefef; filter:grayscale(1)}
.mockR__linea{width:2px; background:#141414}
.mockR__tag{align-self:flex-start; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:#8a8a8a; padding:3px 7px; border:1px solid #d8d8d8; border-radius:4px; margin-bottom:2px}
.mockR__lado--despues .mockR__tag{color:var(--celeste-600); border-color:rgba(14,158,199,.4)}
.mockR__block{height:56px; border-radius:7px}
.mockR__lado--antes .mockR__block{background:#cfcfcf}
.mockR__lado--despues .mockR__block{background:linear-gradient(140deg,#22C7F2,#0E9EC7)}
.mockR__line{height:7px; border-radius:3px; background:#d2d2d2; width:90%}
.mockR__line.s{width:60%}
.mockR__lado--despues .mockR__line{background:#e3e3e3}
.carru__nav{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s5)}
.carru__flecha{flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--linea); background:var(--superficie); color:var(--blanco); cursor:pointer;
  transition:border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), background var(--t-ui) var(--ease)}
.carru__flecha:hover{border-color:var(--celeste-600); color:var(--celeste); background:var(--elevacion)}
.carru__tabs{display:flex; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.carru__tabs::-webkit-scrollbar{display:none}
.carru__tab{flex-shrink:0; padding:8px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linea); background:transparent; color:var(--gris);
  font-family:inherit; font-size:12.5px; font-weight:500; white-space:nowrap;
  transition:border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), background var(--t-ui) var(--ease)}
.carru__tab:hover{color:#CFCCC7; border-color:#3a3a3a}
.carru__tab.is-activo{border-color:var(--celeste-600); color:var(--celeste); background:rgba(34,199,242,.08)}
/* ---- Modo profundidad (coverflow). Lo activa carrusel.js con .is-depth.
   Si el JS no corre, .is-depth no aparece y queda el marco simple de arriba
   (primera slide visible), así que nunca se pierde el contenido.
   Las dos variantes comparten la misma fórmula; el modificador solo cambia
   las cuatro variables de abajo. --off = posición relativa (…-1,0,1…),
   --dist = distancia absoluta al centro; los pone carrusel.js por slide. */
.carru.is-depth{--paso:50%; --giro:-28deg; --recede:120px; --menos:.10; max-width:480px}

.carru.is-depth .carru__marco{overflow:visible; border:none; border-radius:0; box-shadow:none; transform-style:preserve-3d}
.carru.is-depth .carru__pista{position:relative; display:block; height:332px; transform-style:preserve-3d; transition:none}
.carru.is-depth .carru__slide{
  position:absolute; top:0; left:0; right:0; margin-inline:auto; width:76%;
  transform-origin:center center; backface-visibility:hidden; cursor:pointer;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85);
  opacity:calc(1 - var(--dist,0) * .4);
  transform:
    translateX(calc(var(--off,0) * var(--paso)))
    translateZ(calc(var(--dist,0) * var(--recede) * -1))
    rotateY(calc(var(--off,0) * var(--giro)))
    scale(calc(1 - var(--dist,0) * var(--menos)));
  transition:transform var(--t-narr) var(--ease), opacity var(--t-narr) var(--ease);
}
.carru.is-depth .carru__slide.is-activo{opacity:1; cursor:default}
.carru.is-depth .carru__slide.is-oculta{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateZ(-260px) scale(.82);
}

@media (max-width:640px){
  .carru.is-depth{--paso:44%; --giro:-22deg}
  .carru.is-depth .carru__slide{width:82%}
}
@media (prefers-reduced-motion:reduce){
  .carru__pista{transition:none}
  .carru.is-depth .carru__slide{transition:none}
}
.serv__chip{position:absolute; z-index:3; top:-14px; left:8px;
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px;
  background:rgba(20,20,20,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--vidrio-borde); font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--blanco);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7); white-space:nowrap;
  transform:translate(calc(var(--px)*-16px), calc(var(--py)*-16px)); transition:transform 320ms var(--ease)}
.serv__chip svg{color:var(--celeste)}
.serv__chip--beige{background:#fff; color:var(--beige-texto); border-color:var(--beige-linea); top:auto; bottom:-14px; left:auto; right:8px}
.serv__chip--beige svg{color:var(--naranja)}

/* Tarjeta de métricas (Impulso, beige) */
.tarj-metricas{background:#FBFAF7; border:1px solid var(--beige-linea); border-radius:var(--r-md);
  padding:var(--s6); max-width:430px; width:100%; box-shadow:0 44px 74px -44px rgba(42,39,35,.42);
  transform:rotateY(calc(var(--px)*7deg)) rotateX(calc(var(--py)*-7deg)); transition:transform 320ms var(--ease)}
.tarj-metricas__label{color:var(--beige-gris); display:block; margin-bottom:var(--s5)}
.tarj-metricas__barras{display:flex; align-items:flex-end; gap:10px; height:140px}
.tarj-metricas__barras i{flex:1; height:var(--h); border-radius:5px 5px 0 0; transform:scaleY(1); transform-origin:bottom;
  background:linear-gradient(to top,var(--celeste-600),var(--celeste)); transition:transform 700ms var(--ease)}
.tarj-metricas__barras i:last-child{background:linear-gradient(to top,var(--naranja-600),var(--naranja))}
.tarj-metricas__pie{display:flex; justify-content:space-between; margin-top:var(--s3); color:var(--beige-gris); font-size:10px}
.anim .tarj-metricas__barras i{transform:scaleY(.16)}
.anim .serv__viz.is-in .tarj-metricas__barras i{transform:scaleY(1)}
.anim .serv__viz.is-in .tarj-metricas__barras i:nth-child(2){transition-delay:70ms}
.anim .serv__viz.is-in .tarj-metricas__barras i:nth-child(3){transition-delay:140ms}
.anim .serv__viz.is-in .tarj-metricas__barras i:nth-child(4){transition-delay:210ms}
.anim .serv__viz.is-in .tarj-metricas__barras i:nth-child(5){transition-delay:280ms}
.anim .serv__viz.is-in .tarj-metricas__barras i:nth-child(6){transition-delay:350ms}

/* ---- Planes de Redes · 3 tarjetas (estilo mockup) ---- */
.planes-r{display:grid; grid-template-columns:1fr; gap:var(--s5); margin-top:var(--s8)}
@media (min-width:840px){ .planes-r{grid-template-columns:repeat(3,1fr); align-items:stretch} }
.plan-r{position:relative; display:flex; flex-direction:column;
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r-lg); padding:var(--s6);
  transition:transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease)}
.plan-r:hover{border-color:#3a3a3a; box-shadow:0 26px 54px -28px rgba(0,0,0,.7)}
.plan-r--dest{border-color:rgba(249,115,22,.5);
  box-shadow:0 0 0 1px rgba(249,115,22,.22), 0 30px 60px -30px rgba(249,115,22,.3)}
.plan-r--dest:hover{box-shadow:0 0 0 1px rgba(249,115,22,.32), 0 34px 64px -30px rgba(249,115,22,.4)}
/* Las tres cards arrancan en la misma línea: la destacada se distingue por el
   borde naranja y la etiqueta "Recomendado", no por elevación. */

.plan-r__reco{position:absolute; top:-11px; left:var(--s6);
  background:var(--naranja); color:#0c0a09; padding:5px 11px; border-radius:6px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.plan-r__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s5)}
.plan-r__num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:28px;
  border-radius:var(--r-sm); color:var(--naranja); border:1px solid rgba(249,115,22,.42); background:rgba(249,115,22,.09);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em}
.plan-r__ico{color:var(--gris)} .plan-r__ico svg{width:22px; height:22px; display:block}
.plan-r__nombre{font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0; color:var(--blanco)}
.plan-r__tag{font-size:14px; color:var(--gris); margin:var(--s2) 0 0}

.plan-r__viz{margin:var(--s6) 0; height:152px; border-radius:var(--r-md);
  background:var(--negro); border:1px solid var(--linea); padding:var(--s5);
  display:flex; align-items:center; justify-content:center}
.pv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; width:100%; max-width:156px}
.pv-grid i{aspect-ratio:1; border-radius:6px; background:rgba(34,199,242,.12); border:1px solid rgba(34,199,242,.26)}
.pv-dash{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); width:100%}
.pv-dash__stat .mono{color:var(--gris); font-size:9px; display:block}
.pv-dash__stat b{color:var(--celeste); font-size:24px; font-weight:700; letter-spacing:-.02em; display:block; margin:3px 0 4px}
.pv-spark{width:82px; height:22px; display:block}
.pv-spark path{fill:none; stroke:var(--celeste); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pv-donut{position:relative; width:54px; height:54px; flex-shrink:0}
.pv-donut svg{transform:rotate(-90deg); width:100%; height:100%}
.pv-donut__bg{fill:none; stroke:var(--linea); stroke-width:5}
.pv-donut__fg{fill:none; stroke:var(--celeste); stroke-width:5; stroke-linecap:round; stroke-dasharray:69 107}
.pv-donut span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--blanco)}
.pv-crece{width:100%; max-width:160px; height:auto; display:block}
.pv-crece rect{fill:rgba(34,199,242,.18)}
.pv-crece rect:nth-of-type(4){fill:rgba(34,199,242,.4)}
.pv-crece path{fill:none; stroke:var(--celeste); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.plan-r__mets{list-style:none; margin:0; padding:var(--s5) 0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.plan-r__mets li{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.plan-r__met-ic{color:var(--celeste)} .plan-r__met-ic svg{width:18px; height:18px; display:block}
.plan-r__mets b{font-size:20px; font-weight:700; color:var(--blanco); line-height:1}
.plan-r__mets li > span:last-child{font-size:10.5px; line-height:1.28; color:var(--gris)}
.plan-r__reporte{display:flex; align-items:center; gap:10px; padding:var(--s5) 0}
.plan-r__rep-ic{color:var(--celeste); flex-shrink:0} .plan-r__rep-ic svg{width:20px; height:20px; display:block}
.plan-r__reporte > span{font-size:12px; color:var(--gris); line-height:1.35}
.plan-r__reporte b{display:block; font-size:12.5px; color:var(--blanco); font-weight:600}
.plan-r__cta{margin-top:auto; width:100%; justify-content:center}

/* Comparación completa desplegable */
.comp-mas{margin-top:var(--s7); border-top:1px solid var(--linea); padding-top:var(--s6)}
.comp-mas > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:9px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--celeste); user-select:none; -webkit-user-select:none}
.comp-mas > summary::-webkit-details-marker{display:none}
.comp-mas > summary .chev{transition:transform var(--t-ui) var(--ease)}
.comp-mas[open] > summary .chev{transform:rotate(180deg)}
.comp-mas .comp{margin-top:var(--s5)}

/* ---- Tabla comparativa interactiva (planes de Redes) ---- */
.comp{margin-top:var(--s8); border:1px solid var(--linea); border-radius:var(--r-lg);
  background:var(--superficie); overflow-x:auto}
.comp__fila{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; align-items:stretch;
  border-bottom:1px solid var(--linea); min-width:640px}
.comp__fila:last-child{border-bottom:none}
.comp__eje{padding:15px var(--s5); font-size:14px; line-height:1.35; color:#CFCCC7; display:flex; align-items:center}
.comp__cel{padding:15px var(--s4); font-size:14px; color:#CFCCC7; text-align:center;
  border-left:1px solid var(--linea); display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background var(--t-ui) var(--ease)}
.comp__cel b{font-size:19px; color:var(--blanco); font-weight:600}
.comp__fila--head{background:var(--elevacion)}
.comp__plan{padding:var(--s5) var(--s4) var(--s4); border-left:1px solid var(--linea); text-align:center; position:relative;
  transition:background var(--t-ui) var(--ease)}
.comp__plan-n{font-weight:600; font-size:17px; color:var(--blanco)}
.comp__reco{display:block; color:var(--naranja); font-size:10px; margin-bottom:5px}
.comp__plan--dest,.comp [data-col="2"]{background:rgba(34,199,242,.055)}
.comp .ok{width:19px; height:19px; border-radius:50%; background:rgba(34,199,242,.16); position:relative; flex-shrink:0}
.comp .ok::after{content:""; position:absolute; left:6px; top:4px; width:5px; height:9px;
  border:solid var(--celeste); border-width:0 2px 2px 0; transform:rotate(45deg)}
.comp .no{width:14px; height:2px; background:#3a3a3a; border-radius:2px}
.comp__cel--no{color:var(--gris)}
.comp__fila--cta .comp__cel{padding:var(--s5) var(--s4)}
.comp__fila--cta .btn{width:100%}
/* Resaltado de columna al pasar el cursor (lo setea bento.js) */
.comp.hov-1 [data-col="1"],.comp.hov-2 [data-col="2"],.comp.hov-3 [data-col="3"]{background:rgba(34,199,242,.1)}


/* -------------------------------------------------------------- Diagnóstico */
.sintomas{display:grid; gap:var(--s3); margin-top:var(--s8)}
@media (min-width:760px){ .sintomas{grid-template-columns:1fr 1fr; gap:var(--s4)} }

.sintoma{
  position:relative; overflow:hidden;
  background:var(--negro); padding:var(--s6);
  border:1px solid var(--linea); border-radius:var(--r-lg);
  display:flex; flex-direction:column;
  transition:background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
             box-shadow var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.sintoma:hover{
  background:var(--superficie); border-color:var(--celeste-600);
  box-shadow:var(--anillo-celeste), 0 0 28px -8px rgba(34,199,242,.42);
}
/* Marcador con nodo numerado — mismo lenguaje que el timeline del método */
.sintoma__top{display:flex; align-items:center; gap:10px; margin-bottom:var(--s5)}
.sintoma__nodo{width:12px; height:12px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--celeste); background:var(--celeste); box-shadow:0 0 0 4px rgba(34,199,242,.12);
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease)}
.sintoma__n{color:var(--celeste); letter-spacing:.18em; transition:color .5s var(--ease)}
.sintoma__ico{
  width:46px; height:46px; margin-bottom:var(--s5); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--celeste); background:rgba(34,199,242,.08); border:1px solid rgba(34,199,242,.22);
  transition:color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.sintoma__ico svg{width:22px; height:22px}
.sintoma:hover .sintoma__ico{background:rgba(34,199,242,.14); border-color:var(--celeste-600)}
.sintoma__t{font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--blanco); margin:0 0 var(--s2)}
.sintoma__d{font-size:15px; line-height:1.55; color:#CFCCC7; margin:0}

/* Señal (recurso Alignment): fuera de eje -> eje común al pasar el mouse / al entrar */
.sintoma__senal{margin-top:auto; padding-top:var(--s6); display:flex; align-items:center; gap:12px}
.sintoma__senal .mono{color:#5E5B57; font-size:10px; flex-shrink:0}
.align-mini{display:grid; gap:5px}
.align-mini i{display:block; height:2px; background:var(--linea);
  transition:transform var(--t-narr) var(--ease), background var(--t-narr) var(--ease)}
.align-mini i:nth-child(1){width:52px; transform:translateX(20px)}
.align-mini i:nth-child(2){width:36px; transform:translateX(36px); transition-delay:60ms}
.align-mini i:nth-child(3){width:68px; transform:translateX(9px); transition-delay:120ms}
.sintoma:hover .align-mini i{transform:translateX(0); background:#3A3A3A}
.sintoma:hover .align-mini i:nth-child(2){background:var(--celeste)}
@media (hover:none){
  .sintoma.is-in .align-mini i{transform:translateX(0); background:#3A3A3A}
  .sintoma.is-in .align-mini i:nth-child(2){background:var(--celeste)}
}
@media (hover:hover){
  .sintomas:hover .sintoma{opacity:.4}
  .sintomas .sintoma:hover{opacity:1}
}
/* Nodos que se encienden al entrar en pantalla (rima con el timeline) */
.anim .sintoma__nodo{border-color:var(--linea); background:var(--superficie); box-shadow:none}
.anim .sintoma.is-in .sintoma__nodo{border-color:var(--celeste); background:var(--celeste); box-shadow:0 0 0 4px rgba(34,199,242,.12)}
.anim .sintoma__n{color:var(--gris)}
.anim .sintoma.is-in .sintoma__n{color:var(--celeste)}

.cierre{
  margin-top:var(--s7); padding-left:16px;
  border-left:2px solid var(--naranja);
  font-size:clamp(18px,2.4vw,22px); line-height:1.35; font-weight:600;
  max-width:44ch;
}

/* Tarjeta "buen encaje" · criterios ✓/✗ + escala del punto justo */
.encaje{margin-top:var(--s8); padding:var(--s7); background:var(--superficie);
  border:1px solid var(--linea); border-radius:var(--r-lg);
  display:grid; grid-template-columns:1fr; gap:var(--s7)}
@media (min-width:820px){ .encaje{grid-template-columns:minmax(190px,240px) 1fr; gap:var(--s8); align-items:center} }
.encaje__dato{font-size:52px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--blanco)}
.encaje__ancla > .mono{color:var(--gris); display:block; margin-top:10px}
.encaje__escala{position:relative; height:6px; border-radius:3px; background:var(--elevacion); margin-top:var(--s6)}
.encaje__escala-zona{position:absolute; left:14%; right:36%; top:0; bottom:0; border-radius:3px;
  background:linear-gradient(90deg, rgba(34,199,242,.3), var(--celeste))}
.encaje__escala-marca{position:absolute; left:40%; top:50%; width:12px; height:12px; border-radius:50%;
  background:var(--celeste); border:2px solid var(--negro); transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(34,199,242,.2)}
.encaje__escala-cap{display:flex; justify-content:space-between; margin-top:9px; color:#5E5B57}
.encaje__criterios{display:grid; grid-template-columns:1fr; gap:var(--s6)}
@media (min-width:560px){ .encaje__criterios{grid-template-columns:1fr 1fr; gap:var(--s7)} }
.encaje__tag{display:inline-flex; align-items:center; gap:7px; margin-bottom:var(--s4)}
.encaje__tag svg{width:16px; height:16px}
.encaje__tag--si{color:var(--celeste)}
.encaje__tag--no{color:var(--gris)}
.encaje__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3)}
.encaje__lista li{position:relative; padding-left:18px; font-size:14.5px; line-height:1.4; color:#CFCCC7}
.encaje__lista li::before{content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--celeste)}
.encaje__lista--no li{color:var(--gris)}
.encaje__lista--no li::before{background:#3a3a3a}

/* Nota de mantenimiento */
.nota-mant{
  display:flex; gap:var(--s3); align-items:flex-start;
  margin-top:var(--s6); padding:var(--s4) var(--s5);
  border:1px solid var(--linea); background:var(--superficie);
  border-radius:var(--r-sm);
}

.regla{
  margin-top:var(--s8); padding:var(--s6);
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r-lg);
  display:grid; gap:var(--s5);
}
@media (min-width:760px){ .regla{grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s8)} }
.regla__em{color:var(--naranja); font-style:italic; font-weight:600}
.regla__chart{display:none}
@media (min-width:760px){ .regla__chart{display:block; width:120px} }
.regla__dato{font-size:56px; font-weight:700; line-height:1; letter-spacing:-.02em}
.regla__dato + .mono{color:#5E5B57; margin-top:10px; display:block}

/* ---------------------------------------------------------------- Contacto */

.datos{display:grid; gap:var(--s5); margin-top:var(--s7)}
.dato-linea{padding-top:var(--s4); border-top:1px solid var(--linea)}
.dato-linea .mono{color:#5E5B57; display:block; margin-bottom:8px}
.dato-linea a{
  font-size:17px; font-weight:500;
  border-bottom:1px solid var(--linea); padding-bottom:2px;
  transition:border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.dato-linea a:hover{border-color:var(--celeste); color:var(--celeste)}

/* -------------------------------------------------------------------- FAQ */
.faqs{display:grid; gap:var(--s3); margin-top:var(--s7)}
.faq{
  border:1px solid var(--linea); border-radius:var(--r-md);
  background:var(--vidrio); padding:0;
  transition:border-color var(--t-ui) var(--ease);
}
.faq[open]{border-color:var(--vidrio-borde-alto)}
.faq__q{
  cursor:pointer; padding:var(--s4) var(--s5);
  font-size:16px; font-weight:600; line-height:24px;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:""; width:12px; height:12px; flex-shrink:0;
  border-right:2px solid var(--gris); border-bottom:2px solid var(--gris);
  transform:rotate(45deg); transition:transform var(--t-ui) var(--ease);
}
.faq[open] .faq__q::after{transform:rotate(-135deg)}
.faq__a{
  font-size:15px; line-height:24px; color:#CFCCC7;
  padding:0 var(--s5) var(--s5); margin:0; max-width:66ch;
}

/* ----------------------------------------------------------------- Footer */
.footer{border-top:1px solid var(--linea); padding-block:var(--s7); background:var(--negro)}
.footer__in{display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between; align-items:flex-end}
.footer__marca{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.footer__marca .marca__iso{width:15px}
.footer__redes{display:flex; gap:var(--s5)}
.footer__redes a{font-size:13px; color:#B9B6B1; transition:color var(--t-micro) var(--ease)}
.footer__redes a:hover{color:var(--celeste)}

/* --------------------------------------------------------------- Movimiento
   Alignment: los elementos aparecen fuera de eje y encuentran estructura.
   Un solo momento animado por región. Sin rebotes.

   El contenido es visible por defecto. Solo se esconde cuando app.js agrega
   .anim en <html>, y es app.js quien lo vuelve a mostrar al entrar en pantalla.
   Si app.js no carga, .anim no existe y el sitio se lee completo. */
.anim [data-reveal]{
  opacity:0;
  transform:translate3d(var(--rx,-14px),var(--ry,0),0);
  transition:opacity var(--t-narr) var(--ease), transform var(--t-narr) var(--ease);
  transition-delay:var(--d,0ms);
}
.anim [data-reveal].is-in{opacity:1; transform:none}

/* -------------------------------------------- Sección beige de contraste */
.seccion--beige,
.seccion + .seccion--beige{
  background:var(--beige);
  color:var(--beige-texto);
  border-top:none;
}
.seccion--beige + .seccion{border-top:none}
.seccion--beige .mono{color:var(--beige-gris)}
.seccion--beige .eyebrow{color:var(--naranja)}
.seccion--beige .body{color:var(--beige-gris)}
.seccion--beige .h2,.seccion--beige .h3{color:var(--beige-texto)}
.seccion--beige .btn--primario{
  background:var(--negro); color:var(--blanco);
  border-color:var(--negro);
}
.seccion--beige .btn--primario:hover{
  background:#1F1F1F;
  box-shadow:0 0 20px -4px rgba(11,11,11,.4);
}
.seccion--beige .btn--fantasma{
  color:var(--beige-texto);
  border-color:var(--beige-linea);
}

/* ================================ Trabajos reales (casos · beige) ==========
   Vitrina de sitios reales. Movimiento con intención: la ventana se inclina
   hacia el cursor (bento.js, --px/--py), se eleva y ofrece abrir el sitio.
   Sin JS o con reduced-motion queda quieta, nítida y completa. */
.casos__lista{display:grid; gap:var(--s9); margin-top:var(--s8)}

/* --- Carrusel de casos (método) ---------------------------------------------
   Reposo (sin JS): las fichas van una debajo de otra y la navegación no se ve.
   casos.js agrega .is-carrusel y recién ahí la lista pasa a ser pista horizontal. */
.casos__nav{display:none}
.casos.is-carrusel .casos__marco{overflow:hidden}
.casos.is-carrusel .casos__lista{
  display:flex; gap:0; align-items:flex-start;
  transition:transform var(--t-narr) var(--ease); will-change:transform}
.casos.is-carrusel .caso{flex:0 0 100%; min-width:0}

.casos.is-carrusel .casos__nav{
  display:flex; align-items:center; gap:var(--s3); margin-top:var(--s7);
  flex-wrap:wrap; justify-content:flex-start}
.casos__flecha{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--beige-texto);
  border:1px solid var(--beige-linea);
  transition:border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease),
             color var(--t-ui) var(--ease)}
.casos__flecha:hover{border-color:var(--naranja); color:var(--naranja); background:var(--beige-sup)}
.casos__flecha:focus-visible{outline:2px solid var(--naranja); outline-offset:2px}
.casos__tabs{display:flex; gap:6px; flex:0 1 auto; min-width:0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none}
.casos__tabs::-webkit-scrollbar{display:none}
.casos__tab{
  flex-shrink:0; padding:8px 14px; border-radius:999px; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.02em;
  background:transparent; color:var(--beige-gris);
  border:1px solid var(--beige-linea);
  transition:border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease),
             background var(--t-ui) var(--ease)}
.casos__tab:hover{color:var(--beige-texto); border-color:#BFB9AC}
.casos__tab.is-activo{
  border-color:var(--naranja); color:var(--naranja); background:rgba(249,115,22,.09)}
.casos__tab:focus-visible{outline:2px solid var(--naranja); outline-offset:2px}
/* En pantalla angosta los tres controles se apilaban en filas distintas.
   Los tabs pasan a ocupar la primera fila enteros y las dos flechas quedan
   juntas abajo, que es donde el pulgar las encuentra. */
@media (max-width:700px){
  .casos__tabs{order:-1; flex:0 0 100%}
}
.caso{display:grid; grid-template-columns:1fr; gap:var(--s6); align-items:center}
@media (min-width:860px){
  .caso{grid-template-columns:1.15fr 1fr; gap:var(--s8)}
  .caso--inv .caso__vis{order:2}          /* alterna el lado del navegador */
}
.caso__vis{min-width:0; perspective:1100px}
.caso__detalle{min-width:0}

/* Ventana de navegador oscura sobre el beige. Es un enlace al sitio en vivo. */
.caso__win{
  display:block; position:relative; z-index:1;
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--linea); background:#0E0E0E; color:inherit;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.4);
  transform:translateY(var(--lift,0))
    rotateY(calc(var(--px,0) * 3.5deg)) rotateX(calc(var(--py,0) * -3.5deg));
  transform-style:preserve-3d;
  transition:transform 340ms var(--ease), box-shadow 340ms var(--ease);
}
.caso__win:hover,.caso__win:focus-visible{
  --lift:-6px; outline:none;
  box-shadow:0 56px 96px -34px rgba(0,0,0,.5), 0 0 0 1px rgba(34,199,242,.28), var(--glow-celeste);
}
.caso__bar{display:flex; align-items:center; gap:6px; padding:10px 12px;
  background:#161616; border-bottom:1px solid var(--linea)}
.caso__bar i{width:9px; height:9px; border-radius:50%; background:#3A3A3A; flex:0 0 auto}
.caso__bar em{flex:1; min-width:0; margin-left:8px; font-style:normal;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.04em; color:var(--gris);
  background:#0E0E0E; border:1px solid var(--linea); border-radius:5px; padding:4px 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.caso__win img{width:100%; height:auto; display:block; transition:transform 620ms var(--ease)}
.caso__win:hover img{transform:scale(1.02)}

/* Indicador de estado. Por defecto "En producción", celeste y latiendo.
   La variante --listo es para un sitio ya entregado: verde y quieto. */
.caso__vivo{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#7FE7CF}
.caso__vivo b{width:6px; height:6px; border-radius:50%; background:var(--celeste);
  box-shadow:0 0 0 0 rgba(34,199,242,.5); animation:pulso 2200ms var(--ease) infinite}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(34,199,242,.5)}
  70%{box-shadow:0 0 0 7px rgba(34,199,242,0)}
  100%{box-shadow:0 0 0 0 rgba(34,199,242,0)}
}
/* Variante --listo: sitio ya entregado. Verde y sin latido, porque el latido
   comunica "esto está pasando ahora" y acá el mensaje es que está cerrado.
   Va después de .caso__vivo a propósito: misma especificidad, gana el que va último. */
.caso__vivo--listo{color:#7BE0A0}
.caso__vivo--listo b{background:#39D98A; box-shadow:none; animation:none}
@media (max-width:520px){ .caso__vivo span{display:none} }

/* Respaldo si falta la captura (no se ve rota): panel prolijo con aviso */
.caso__win--pendiente::after{
  content:"Captura de syma.jujumys.com — pendiente";
  display:grid; place-items:center; aspect-ratio:16/10; padding:0 24px; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--gris);
}

/* Detalle del caso — el cliente es el protagonista */
.caso__sector{display:block; color:var(--beige-gris); margin-bottom:var(--s4)}
.caso__sector::before{content:""; display:inline-block; width:26px; height:1px; background:var(--naranja);
  margin-right:12px; vertical-align:middle}
.caso__cliente{margin:0; font-size:clamp(26px,3.4vw,34px); font-weight:700;
  letter-spacing:-.015em; line-height:1.06; color:var(--beige-texto)}
.caso__lede{margin:var(--s4) 0 0; font-size:clamp(16px,1.4vw,18px); line-height:1.4;
  font-weight:500; color:var(--beige-texto); max-width:36ch}
.caso__prob{margin-top:var(--s4); font-size:15px; line-height:1.55; color:var(--beige-texto)}
.caso__prob .mono{display:block; color:var(--beige-gris); margin-bottom:6px}
.caso__puntos{list-style:none; padding:0; margin:var(--s5) 0 0;
  display:flex; flex-direction:column; gap:var(--s3)}
.caso__puntos li{display:flex; align-items:flex-start; gap:var(--s3);
  font-size:.9375rem; line-height:1.5; color:var(--beige-texto)}
.caso__puntos svg{flex-shrink:0; margin-top:3px; color:var(--naranja)}
.caso__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s5)}
.caso__tags span{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--beige-gris); border:1px solid var(--beige-linea); border-radius:999px; padding:6px 11px; white-space:nowrap}
.caso__acciones{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s6)}
.caso__link{display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--beige-gris);
  border-bottom:1px solid var(--beige-linea); padding-bottom:3px;
  transition:color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease)}
.caso__link:hover{color:var(--naranja); border-color:var(--naranja)}
.caso__link svg{transition:transform var(--t-ui) var(--ease)}
.caso__link:hover svg{transform:translateX(3px)}

/* Entrada escalonada: la ventana sube y escala apenas, el detalle la sigue */
.anim .caso__vis[data-reveal]{transform:translate3d(0,22px,0) scale(.98)}
.anim .caso__vis[data-reveal].is-in{transform:none}

@media (prefers-reduced-motion:reduce){
  .caso__win{transition:none; transform:none}
  .caso__win img{transition:none}
  .caso__win:hover img{transform:none}
  .caso__vivo b{animation:none}
}

/* ================================ Contacto conversacional (split) ========== */
.portada--sm{padding-block:var(--s8) var(--s6)}
@media (min-width:900px){ .portada--sm{padding-block:100px var(--s6)} }

.contacto{position:relative; overflow:hidden; padding-block:var(--s6) var(--s9)}
.contacto__luz{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.contacto__luz span{position:absolute; border-radius:50%; filter:blur(80px)}
.contacto__luz span:nth-child(1){width:46vw; height:46vw; left:-10%; top:-12%;
  background:radial-gradient(circle, rgba(34,199,242,.11), transparent 70%); animation:c-luz1 28s ease-in-out infinite alternate}
.contacto__luz span:nth-child(2){width:38vw; height:38vw; right:-8%; bottom:-14%;
  background:radial-gradient(circle, rgba(249,115,22,.07), transparent 70%); animation:c-luz2 34s ease-in-out infinite alternate}
@keyframes c-luz1{to{transform:translate(10%,8%) scale(1.16)}}
@keyframes c-luz2{to{transform:translate(-8%,-8%) scale(1.12)}}

.contacto__grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:var(--s7); align-items:start}
@media (min-width:900px){ .contacto__grid{grid-template-columns:1.25fr .75fr; gap:var(--s8)} }

/* --- Chat --- */
.chat{display:flex; flex-direction:column; background:var(--superficie);
  border:1px solid var(--linea); border-radius:var(--r-lg); overflow:hidden; min-height:540px}
.chat__top{display:flex; align-items:center; gap:12px; padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--linea); background:var(--elevacion)}
.chat__avatar{width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:rgba(34,199,242,.12); border:1px solid rgba(34,199,242,.32);
  display:flex; align-items:center; justify-content:center; color:var(--celeste)}
.chat__avatar svg{width:15px; height:auto}
.chat__id{display:flex; flex-direction:column; gap:2px}
.chat__nombre{font-weight:600; font-size:15px; letter-spacing:.02em}
.chat__estado{color:var(--gris); font-size:10px; display:flex; align-items:center; gap:6px}
.chat__estado .punto-vivo{width:6px; height:6px}

.chat__stream{flex:1; padding:var(--s5); display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; max-height:440px; scroll-behavior:smooth}
.chat__msg{max-width:84%; padding:11px 15px; border-radius:15px; font-size:14.5px; line-height:1.45;
  animation:msg-in .32s var(--ease)}
.chat__msg--bot{align-self:flex-start; background:var(--elevacion); border:1px solid var(--linea);
  border-bottom-left-radius:5px; color:#E4E1DC}
.chat__msg--user{align-self:flex-end; background:var(--celeste); color:#052430;
  border-bottom-right-radius:5px; font-weight:500}
.chat__msg--bot a{color:var(--celeste); text-decoration:underline}
.chat__msg strong{font-weight:600; color:var(--blanco)}
@keyframes msg-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.chat__typing{display:flex; gap:5px; align-items:center}
.chat__typing span{width:7px; height:7px; border-radius:50%; background:var(--gris); animation:typing 1.2s infinite}
.chat__typing span:nth-child(2){animation-delay:.18s}
.chat__typing span:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-4px)}}

.chat__input{padding:var(--s4) var(--s5); border-top:1px solid var(--linea); background:var(--elevacion);
  min-height:72px; display:flex; align-items:center}
.chat__ops{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%}
@media (max-width:420px){ .chat__ops{grid-template-columns:1fr} }
.chat__op{text-align:left; background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--r-sm); padding:10px 13px; cursor:pointer; display:flex; flex-direction:column; gap:2px;
  transition:border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease), transform var(--t-micro) var(--ease)}
.chat__op strong{font-size:13.5px; color:var(--blanco)}
.chat__op span{font-size:11px; color:var(--gris)}
.chat__op:hover{border-color:var(--celeste-600); background:rgba(34,199,242,.06); transform:translateY(-1px)}
.chat__campo{display:flex; gap:8px; width:100%; align-items:flex-end}
.chat__campo textarea,.chat__campo input{flex:1; background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--r-sm); padding:11px 14px; color:var(--blanco); font-size:14px; font-family:inherit; resize:none}
.chat__campo textarea{line-height:1.4}
.chat__campo textarea:focus,.chat__campo input:focus{border-color:var(--celeste-600); outline:none}
.chat__enviar{width:44px; height:44px; flex-shrink:0; border-radius:var(--r-sm); cursor:pointer; border:none;
  background:var(--naranja); color:#0B0B0B; display:flex; align-items:center; justify-content:center;
  transition:background var(--t-ui) var(--ease)}
.chat__enviar:hover{background:var(--naranja-600); color:#fff}
.chat__submit{width:100%}

/* --- Panel de refuerzo --- */
.refuerzo__lista{list-style:none; padding:0; margin:var(--s5) 0 0; display:flex; flex-direction:column; gap:var(--s5)}
.refuerzo__lista li{display:flex; gap:var(--s4)}
.refuerzo__lista svg{width:22px; height:22px; flex-shrink:0; color:var(--celeste); margin-top:2px}
.refuerzo__lista strong{display:block; font-size:15px; color:var(--blanco); margin-bottom:3px}
.refuerzo__lista span{font-size:13.5px; color:var(--gris); line-height:1.45}
.refuerzo__directo{margin-top:var(--s7); padding-top:var(--s6); border-top:1px solid var(--linea)}
.refuerzo__directo .eyebrow{margin-bottom:var(--s3)}
.refuerzo .dato-linea{display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  padding:13px 0; border-bottom:1px solid var(--linea); color:#CFCCC7;
  transition:color var(--t-micro) var(--ease)}
.refuerzo .dato-linea:last-child{border-bottom:none}
.refuerzo .dato-linea:hover{color:var(--celeste)}
.refuerzo .dato-linea .mono{color:var(--gris)}

/* ================================ Método · timeline al scroll (beige) ====== */
.mtl{position:relative; margin-top:var(--s8); display:flex; flex-direction:column}
.mtl__paso{position:relative; display:grid; grid-template-columns:44px 1fr; gap:var(--s5); padding-bottom:var(--s8)}
.mtl__paso:last-child{padding-bottom:0}
/* conector vertical que se dibuja al activar el paso */
.mtl__paso::before{content:""; position:absolute; left:21px; top:24px; bottom:0; width:2px;
  background:var(--beige-linea); transform-origin:top; transform:scaleY(1); transition:transform .7s var(--ease)}
.mtl__paso:last-child::before{display:none}
.mtl__marca{display:flex; flex-direction:column; align-items:center}
.mtl__nodo{width:16px; height:16px; border-radius:50%; z-index:1;
  border:2px solid var(--celeste); background:var(--celeste); box-shadow:0 0 0 4px rgba(34,199,242,.15);
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease)}
.mtl__paso--fin .mtl__nodo{border-color:var(--naranja); background:var(--naranja); box-shadow:0 0 0 4px rgba(249,115,22,.15)}
.mtl__n{margin-top:10px; color:var(--beige-texto); transition:color .5s var(--ease)}
.mtl__cuerpo{padding-bottom:var(--s2)}
.mtl__ico{width:46px; height:46px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  color:var(--celeste-600); background:rgba(14,158,199,.08); border:1px solid rgba(14,158,199,.22); margin-bottom:var(--s4)}
.mtl__ico svg{width:22px; height:22px}
.mtl__ico--nar{color:var(--naranja); background:rgba(249,115,22,.09); border-color:rgba(249,115,22,.28)}
.mtl__t{font-size:23px; font-weight:600; letter-spacing:-.01em; color:var(--beige-texto); margin:0 0 var(--s2)}
.mtl__d{font-size:15px; line-height:1.55; color:var(--beige-gris); max-width:54ch; margin:0}
/* Animado: arranca apagado, se ilumina al entrar en pantalla */
.anim .mtl__paso::before{transform:scaleY(0)}
.anim .mtl__nodo{border-color:var(--beige-linea); background:var(--beige); box-shadow:none}
.anim .mtl__n{color:var(--beige-gris)}
.anim .mtl__paso.is-in::before{transform:scaleY(1)}
.anim .mtl__paso.is-in .mtl__nodo{border-color:var(--celeste); background:var(--celeste); box-shadow:0 0 0 4px rgba(34,199,242,.15)}
.anim .mtl__paso--fin.is-in .mtl__nodo{border-color:var(--naranja); background:var(--naranja); box-shadow:0 0 0 4px rgba(249,115,22,.15)}
.anim .mtl__paso.is-in .mtl__n{color:var(--beige-texto)}

/* Reglas / cierres en contexto beige */
.seccion--beige .cierre{color:var(--beige-texto)}
.seccion--beige .regla__dato{color:var(--beige-texto)}
.seccion--beige .regla__em{color:var(--naranja)}
.regla--beige{background:var(--beige-sup); border-color:var(--beige-linea)}
.regla--beige .body{color:var(--beige-gris)}
.seccion--beige .regla .mono{color:var(--beige-gris)}

@media (prefers-reduced-motion:reduce){
  .contacto__luz span{animation:none !important}
  .chat__msg{animation:none !important}
  .chat__typing span{animation:none !important}
  [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important}
  .btn,.nav a::after,.servicio,.sintoma{transition:none !important}
  .align-mini i{transform:translateX(0) !important; transition:none !important}
  .posicion__pista i{transform:scaleX(1) !important; transition:none !important}
  .traza .diag{transform:rotate(-63deg) scaleX(1) !important; transition:none !important}
  .btn--primario{transition:none !important}
  .conv__pulso{animation:none !important; opacity:0 !important}
  .hero__halo,.hero__scroll-riel i{animation:none !important}
  .hero__nombre-in{opacity:1 !important; transform:none !important}
  /* Sin typing: el nombre completo, quieto, desde el primer fotograma */
  .hero__nombre .hn__l{opacity:1 !important; transform:none !important; transition:none !important}
  .hero__nombre .punto,.hero__nombre .punto::before,.hero__nombre .punto::after{
    animation:none !important; opacity:1 !important; transform:none !important}
  .hero__nombre .punto::before,.hero__nombre .punto::after{display:none !important}
  .header .marca__txt > *{transition:none !important}
  .ventana__pantalla img,.tel__grid{transition:none !important}
  .swap__card{transition:none !important}
  .casos.is-carrusel .casos__lista{transition:none !important}
  .swap .ventana__pantalla img{transition:none !important; object-position:50% 0% !important}
  .bento__card:hover .ventana__pantalla img,.bento__card:hover .tel__grid{transform:none !important}
  .bento__card:hover{transform:none !important}
  .bfx--seda::before,.bfx--onda::before,
  .bento__card:hover .bfx--seda::before,.bento__card:hover .bfx--onda::before,
  .bento__card:hover .bfx__wave,.bento__card:hover .bfx__node,
  .bento__card:hover .bfx__ring,.bento__card:hover .bfx__sat{animation:none !important}
  .punto-vivo{animation:none !important}
  .viva__fondo span{animation:none !important}
  .pano__card:hover{transform:none !important}
  .pano__viz{transform:none !important}
  .align-mini i:nth-child(2){background:var(--celeste)}
  .transiciones main{animation:none !important}
  .transiciones.saliendo main{opacity:1 !important; transform:none !important}
}

/* Impresión / fallback sin JS */
.no-js [data-reveal]{opacity:1; transform:none}


/* ------------------------------------------------- Encabezado de página */
.portada{
  position:relative; overflow:hidden;
  padding-block:var(--s9) var(--s8);
  border-bottom:1px solid var(--linea);
}
@media (min-width:900px){ .portada{padding-block:120px var(--s9)} }
.portada__n{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.18em;
  color:#5E5B57; display:block; margin-bottom:var(--s5);
}
.portada .display{max-width:20ch}
.portada .body{margin-top:var(--s5)}

/* La posicion propia: la barra que ya encontro su eje */
.posicion{
  position:relative; overflow:hidden;
  margin-top:var(--s6); padding:var(--s7) var(--s6);
  background:var(--superficie);
  border:1px solid var(--linea); border-radius:var(--r-lg);
}
.posicion__pista{height:2px; background:var(--linea); margin-bottom:var(--s6); overflow:hidden}
.posicion__pista i{
  display:block; height:2px; width:100%; background:var(--celeste);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 900ms var(--ease); transition-delay:560ms;
}
.posicion.is-in .posicion__pista i{transform:scaleX(1)}

.posicion__in{display:grid; gap:var(--s6)}
@media (min-width:900px){
  .posicion__in{grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s8)}
}
.posicion__marca{
  font-weight:700; font-size:14px; letter-spacing:.14em;
  display:block; margin-bottom:var(--s4); color:var(--gris);
}
.posicion__frase{
  font-weight:600; letter-spacing:-.01em; line-height:1.3;
  font-size:clamp(20px,2.6vw,27px); margin:0; max-width:30ch;
}

/* Cierre de página: siguiente paso */
.cierre-nav{
  border-top:1px solid var(--linea);
  padding-block:var(--s8);
}
.cierre-nav__in{
  display:flex; flex-wrap:wrap; gap:var(--s5);
  align-items:center; justify-content:space-between;
}
.cierre-nav .h3{max-width:26ch}
.cierre-nav .mono{color:#5E5B57; display:block; margin-bottom:10px}


/* ------------------------------------------------- Transicion de pagina */
@keyframes entrar{
  from{opacity:0; transform:translate3d(0,10px,0)}
  to{opacity:1; transform:none}
}
.transiciones main{animation:entrar 340ms var(--ease) forwards}
.transiciones.animado main{animation:none; opacity:1; transform:none}
.transiciones.saliendo main{
  animation:none; opacity:0; transform:translate3d(0,-6px,0);
  transition:opacity 200ms var(--ease), transform 200ms var(--ease);
}


/* ------------------------------------------------------------ Reseñas */
.resenas{display:grid; gap:var(--s4); margin-top:var(--s8)}
@media (min-width:820px){ .resenas{grid-template-columns:1fr 1fr} }

.resena{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  padding:var(--s7) var(--s6);
  background:var(--vidrio);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--r-lg);
  transition:background var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease),
             box-shadow var(--t-ui) var(--ease);
}
.resena::before{
  content:""; position:absolute; top:-26px; right:-26px;
  width:2px; height:130px; background:var(--celeste);
  transform:rotate(-63deg) scaleY(.677); transform-origin:50% 50%;
  opacity:.35;
  transition:opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.resena:hover{
  background:var(--vidrio-alto); border-color:var(--vidrio-borde-alto);
  box-shadow:var(--anillo-celeste), 0 0 30px -8px rgba(34,199,242,.4);
}
.resena:hover::before{opacity:1; transform:rotate(-63deg) scaleY(1)}

.resena__frase{
  font-size:clamp(17px,2vw,20px); line-height:1.45; font-weight:500;
  margin:0 0 var(--s6); max-width:40ch;
}
.resena__pie{
  margin-top:auto; padding-top:var(--s5);
  border-top:1px solid var(--vidrio-borde);
  display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;
}
.resena__quien{font-weight:600; font-size:15px}
.resena__rol{color:var(--gris); font-size:13px}

/* Marcador de contenido pendiente. Se borra al cargar la frase real. */
.pendiente{
  color:#6F6C68; font-style:italic; font-weight:400;
  border-left:2px solid var(--naranja); padding-left:14px; display:block;
}





/* ==========================================================================
   CAMBIO 1 de 2 · FONDO DE GALAXIA
   Pegar este bloque AL FINAL de la hoja de estilos principal.

   Todas las variables llevan valor de respaldo —var(--x, respaldo)— así que
   este bloque funciona aunque el sitio no tenga definidos esos tokens.

   ORDEN DE CAPAS, de atrás hacia adelante:
     1. .cosmos__nebulosa  gas frío en celeste sobre negro (CSS, deriva lenta)
     2. .cosmos__via       banda de polvo inclinada a 63°
     3. .cosmos__galaxia   el canvas WebGL con las estrellas (galaxia.js)
     4. .cosmos__grano     grano de película sobre todo
   ========================================================================== */

.cosmos{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:var(--negro, #0B0B0B);
  contain:layout paint style;
}

/* CRÍTICO: sin esto el contenido queda DEBAJO del fondo y no se ve nada.
   Ajustar los selectores a los contenedores reales del sitio. */
main,
.footer,
footer{
  position:relative;
  z-index:1;
}

/* Nebulosa · profundidad por valor, no por saturación */
.cosmos__nebulosa{
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(46% 36% at 20% 10%,  rgba(34,199,242,.10), transparent 62%),
    radial-gradient(40% 32% at 84% 30%,  rgba(34,199,242,.055), transparent 66%),
    radial-gradient(34% 30% at 62% 68%,  rgba(34,199,242,.035), transparent 64%),
    radial-gradient(70% 50% at 48% 100%, rgba(247,245,242,.03), transparent 70%);
  animation:cosmos-deriva 54s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cosmos-deriva{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.2%,1.6%,0) scale(1.07)}
}

/* Vía láctea · inclinada a 63°, el eje diagonal del isotipo */
.cosmos__via{
  position:absolute;
  left:50%;
  top:50%;
  width:280vmax;
  height:min(58vh,600px);
  transform:translate(-50%,-50%) rotate(-63deg);
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(247,245,242,.035) 40%,
    rgba(34,199,242,.055) 52%,
    rgba(247,245,242,.03) 62%,
    transparent 100%);
  filter:blur(22px);
  opacity:.5;
}

/* Galaxia · el canvas del shader. Es la capa que manda.
   La opacidad .72 está calibrada contra texto real: el fondo nunca le tiene
   que ganar a la lectura. Es la primera perilla si algo se ve cargado. */
.cosmos__galaxia{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:.72;
}

/* Grano de película · le da materia y evita el degradado plano de plantilla */
.cosmos__grano{
  position:absolute;
  inset:0;
  opacity:.30;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* --------------------------------------------------------------------------
   TARJETAS Y SUPERFICIES OSCURAS
   Cualquier fondo OPACO tapa la galaxia. Estas dos variables pasan a rgba con
   el MISMO valor de gris, para que el campo respire por detrás.
   Si el sitio no usa estas variables, hay que buscar los `background` sólidos
   de las tarjetas y darles transparencia a mano.
   -------------------------------------------------------------------------- */
:root{
  --superficie:rgba(22,22,22,.68);
  --elevacion:rgba(31,31,31,.74);
}

/* El pie no cierra el sitio: se hunde en el espacio profundo */
.footer,
footer{
  background:linear-gradient(to bottom, rgba(11,11,11,0), rgba(11,11,11,.66));
}

/* --------------------------------------------------------------------------
   HERO SIN ATMÓSFERA PROPIA
   El hero tenía halos borrosos y grano propios que terminaban justo donde
   terminaba la sección: leía como una pantalla gris apoyada arriba de todo.
   Al ocultarlos, la misma galaxia entra por arriba y sigue hasta el pie.
   ADAPTAR estos selectores a los que use el sitio para los halos del hero.
   -------------------------------------------------------------------------- */
.hero__luz{display:none}
.hero__grano{display:none}
.contacto__luz{opacity:.45}

/* --------------------------------------------------------------------------
   COSTURAS ENTRE SECCIONES
   Una línea de 1px sólida corta el campo de lado a lado. Con degradado se
   desvanece en los bordes y el universo sigue.
   -------------------------------------------------------------------------- */
.seccion + .seccion{
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,
    rgba(247,245,242,0) 0%,
    rgba(247,245,242,.09) 22%,
    rgba(34,199,242,.24) 50%,
    rgba(247,245,242,.09) 78%,
    rgba(247,245,242,0) 100%) 1;
}

@media (prefers-reduced-motion:reduce){
  .cosmos__nebulosa{animation:none}
}
@media print{
  .cosmos{display:none}
}

/* ==========================================================================
   CAMBIO 2 de 2 · SECCIONES CLARAS "CABINA"
   Pegar este bloque AL FINAL de la hoja de estilos, DESPUÉS del bloque 1.

   QUÉ ES: las secciones claras dejan de ser un rectángulo beige pegado encima
   del espacio y pasan a ser el interior de una nave — paneles blancos con
   juntas, tornillos de esquina y una lámpara cenital. El lector aprende que
   cada vez que aparece el panel blanco está adentro, y eso vuelve creíble el
   mundo que arma el fondo.

   ── LAS DOS CLASES ────────────────────────────────────────────────────────
   Toda sección clara necesita LAS DOS, juntas:

       <section class="seccion claro claro--cabina" id="...">

     .claro          → LEGIBILIDAD: color de texto, eyebrows, botones.
     .claro--cabina  → SUPERFICIE: paneles, tornillos, lámpara.

   Están separadas a propósito: permite cambiar de superficie más adelante
   sin tocar una sola regla de tipografía.

   ── REGLA QUE NO SE PUEDE IGNORAR ─────────────────────────────────────────
   Ningún patrón (juntas, retículas, texturas) se dibuja en el `background`
   de una sección que tiene texto: no se puede enmascarar sin afectar al
   contenido, y termina cruzando los titulares. Siempre va en su propia capa
   ::before con máscara. Por eso la estructura de abajo tiene dos capas.
   ========================================================================== */

/* --------------------------------------------------------- LEGIBILIDAD ---
   Si el sitio ya tiene una clase para secciones claras (por ejemplo
   .seccion--beige), estas reglas ya existen: en ese caso, en vez de duplicar,
   agregar `.claro` como selector alternativo a las reglas existentes.
   OJO: quitar la clase vieja sin migrar estas reglas deja texto claro sobre
   fondo claro, o sea invisible. */
.claro{
  background:var(--beige, #EDE7DC);
  color:var(--beige-texto, #2A2723);
  border-top:none;
}
.claro + .seccion,
.seccion + .claro{border-top:none; border-image:none}

.claro .mono{color:var(--beige-gris, #6B6860)}
.claro .eyebrow{color:var(--naranja, #F97316)}
.claro .body{color:var(--beige-gris, #6B6860)}
.claro .h2,
.claro .h3{color:var(--beige-texto, #2A2723)}
.claro .cierre{color:var(--beige-texto, #2A2723)}

.claro .btn--primario{
  background:var(--negro, #0B0B0B);
  color:var(--blanco, #F7F5F2);
  border-color:var(--negro, #0B0B0B);
}
.claro .btn--primario:hover{
  background:#1F1F1F;
  box-shadow:0 0 20px -4px rgba(11,11,11,.4);
}
.claro .btn--fantasma{
  color:var(--beige-texto, #2A2723);
  border-color:var(--beige-linea, rgba(42,39,35,.18));
}

/* ADAPTADO A ESTE SITIO (2026-08-15 · sobre v43)
   Los selectores de superficie se escriben `.claro.claro--cabina` (0,2,0) y no
   `.claro--cabina` (0,1,0). Motivo: en la linea ~1612 de esta misma hoja vive
   `.seccion--beige, .seccion + .seccion--beige{background:var(--beige)}`. Ese
   segundo selector pesa 0,2,0 y le ganaba el fondo al panel en las secciones
   claras que vienen despues de otra `.seccion` (#trabajo y #metodo).
   Las dos clases van siempre juntas, asi que la doble clase no cambia nada mas.

   La clase vieja `.seccion--beige` / `.serv--beige` QUEDA en el HTML: es la que
   trae los colores de texto, eyebrows, botones y cierres (INSTRUCCIONES.md 2.3). */
/* ----------------------------------------------------------- SUPERFICIE --- */
.claro.claro--cabina{
  position:relative;
  color:var(--beige-texto, #2A2723);
  background:linear-gradient(180deg,#FBFAF8 0%,#EFEDE9 30%,#E6E3DD 100%);
  margin-inline:var(--gutter, clamp(16px,4vw,64px));
  border-radius:20px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -22px 40px -30px rgba(22,24,28,.5),
    0 40px 110px -60px rgba(0,0,0,.95);
}

/* El contenido SIEMPRE por encima de las dos capas decorativas.
   Ajustar `.wrap` al contenedor interno que use el sitio. */
.claro.claro--cabina > .wrap{position:relative; z-index:5}

/* CAPA 1 · juntas verticales entre paneles.
   Van solas para poder enmascararlas: la máscara las borra sobre la columna
   izquierda (donde vive el texto) y las deja plenas a la derecha. */
.claro.claro--cabina::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:20px;
  background:repeating-linear-gradient(90deg, transparent 0 178px,
    rgba(22,24,28,.075) 178px 179px, rgba(255,255,255,.62) 179px 181px, transparent 181px 360px);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 26%, #000 62%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 26%, #000 62%, #000 100%);
}

/* JUNTAS APAGADAS · decisión de diseño 2026-08-15, aprobada por el cliente.
   La máscara de arriba borra las juntas en el 26% izquierdo y las deja plenas
   hacia la derecha: asume que el texto vive en la columna izquierda. En este
   sitio no es así. #trabajo, #casos e #impulso-digital tienen la ilustración a
   la izquierda y el texto a la DERECHA, justo donde las juntas están al 94%.
   Medido sobre los glifos reales, cruzaban 15, 20 y 12 corridas de texto
   respectivamente (titulares de 42, 44 y 54px incluidos). Pasa igual a 946,
   1280 y 1440 de ancho: es estructural, no de ancho.
   Tampoco hay dónde reubicarlas: .wrap llega a 1280px dentro de un panel de
   1377, o sea 48px de aire por lado. No existe columna libre.
   El interior de nave lo sostienen el marco, los tornillos y la lámpara (capa
   ::after), que no tocan el texto.
   PARA VOLVER ATRÁS: borrar esta única regla. */
.claro.claro--cabina::before{display:none}

/* CAPA 2 · marco interior, tornillos de esquina y lámpara cenital.
   El marco y los tornillos son lo que separa un interior de nave de una
   tarjeta blanca cualquiera. La lámpara evita que el panel se lea plano.
   Esta capa NO se enmascara: nada de esto pasa por encima del texto. */
.claro.claro--cabina::after{
  content:"";
  position:absolute;
  inset:16px;
  z-index:2;
  pointer-events:none;
  border-radius:12px;
  border:1px solid rgba(22,24,28,.10);
  background:
    radial-gradient(4px 4px at 12px 12px, rgba(22,24,28,.34) 45%, transparent 55%),
    radial-gradient(4px 4px at calc(100% - 12px) 12px, rgba(22,24,28,.34) 45%, transparent 55%),
    radial-gradient(4px 4px at 12px calc(100% - 12px), rgba(22,24,28,.34) 45%, transparent 55%),
    radial-gradient(4px 4px at calc(100% - 12px) calc(100% - 12px), rgba(22,24,28,.34) 45%, transparent 55%),
    radial-gradient(70% 190px at 50% 0%, rgba(255,255,255,.85), transparent 72%);
}

/* En mobile el margen lateral es demasiado caro: va a sangre. Y las juntas se
   apagan del todo — a ese ancho no hay columna libre donde puedan vivir sin
   pisar el texto. */
@media (max-width:720px){
  .claro.claro--cabina{margin-inline:0; border-radius:0}
  .claro.claro--cabina::before{display:none}
  .claro.claro--cabina::after{inset:11px}
}


/* ==========================================================================
   PÁGINA LEGAL · terminos.html
   Documento largo (70 cláusulas). El trabajo de diseño acá es que se pueda
   NAVEGAR y LEER, no decorarlo: índice arriba, agrupación temática, número de
   cláusula en mono y columna de lectura corta. Sin diagonales — el recurso va
   siempre en aire y esta página es texto de punta a punta.
   ========================================================================== */

.legal__fecha{color:var(--celeste); margin-top:var(--s6)}

.seccion--legal{padding-block:var(--s8) var(--s9)}
.legal{max-width:820px}

.legal__nota{
  font-size:15px; line-height:1.6; color:var(--gris); max-width:66ch;
  padding-left:var(--s5); border-left:1px solid var(--linea); margin:0;
}

/* ------------------------------------------------------------------ Índice */
.legal__indice{
  margin-top:var(--s8); padding:var(--s6);
  background:var(--vidrio); border:1px solid var(--vidrio-borde);
  border-radius:var(--r-lg);
}
.legal__indice-t{color:var(--gris); margin:0 0 var(--s5)}
.legal__indice-lista{list-style:none; margin:0; padding:0; display:grid; gap:2px}
@media (min-width:720px){ .legal__indice-lista{grid-template-columns:1fr 1fr; gap:2px var(--s6)} }
.legal__indice-lista li{display:flex; align-items:baseline; gap:var(--s3)}
.legal__indice-lista a{
  flex:1 1 auto; padding:7px 0; font-size:14.5px; color:#CFCCC7;
  border-bottom:1px solid transparent;
  transition:color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.legal__indice-lista a:hover{color:var(--blanco); border-bottom-color:var(--vidrio-borde)}
.legal__indice-lista span{
  flex:0 0 auto; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.08em; color:#5E5B57;
}

/* ------------------------------------------------- Encabezado de cada grupo */
.legal__grupo{
  margin:var(--s9) 0 0; padding-top:var(--s6);
  border-top:1px solid var(--linea);
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace; color:var(--celeste);
}

/* ----------------------------------------------------------- Cada cláusula */
.legal__c{margin-top:var(--s7)}
.legal__t{
  display:flex; align-items:baseline; gap:var(--s4);
  font-size:19px; font-weight:600; line-height:1.3; letter-spacing:-.005em;
  color:var(--blanco); margin:0 0 var(--s4);
}
.legal__n{
  flex:0 0 auto; color:var(--celeste); font-size:12px;
  /* alineado con la primera línea del título, no con su centro */
  position:relative; top:-1px;
}
.legal__c p{font-size:15px; line-height:1.65; color:#CFCCC7; max-width:66ch; margin:0 0 var(--s4)}
.legal__c p:last-child{margin-bottom:0}
.legal__c strong{color:var(--blanco); font-weight:600}
.legal__c a{color:var(--celeste); border-bottom:1px solid rgba(34,199,242,.32)}
.legal__c a:hover{border-bottom-color:var(--celeste)}

.legal__sub{color:var(--gris); margin:var(--s6) 0 var(--s3)}

.legal__ul,.legal__ol{margin:0 0 var(--s4); padding-left:var(--s5); max-width:66ch}
.legal__ul{list-style:none; padding-left:var(--s4)}
.legal__ul li,.legal__ol li{font-size:15px; line-height:1.6; color:#CFCCC7; margin-bottom:7px}
.legal__ul li{position:relative; padding-left:var(--s4)}
.legal__ul li::before{
  content:""; position:absolute; left:0; top:10px;
  width:5px; height:1px; background:var(--celeste); opacity:.65;
}
.legal__ol{list-style:decimal}
.legal__ol li::marker{color:var(--celeste); font-family:"IBM Plex Mono",monospace; font-size:13px}

/* Filas de datos: etiqueta en mono a la izquierda, valor a la derecha */
.legal__datos{list-style:none; margin:0 0 var(--s4); padding:0; max-width:66ch}
.legal__datos li{
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5);
  padding:9px 0; border-bottom:1px solid var(--linea);
  font-size:15px; color:#CFCCC7;
}
.legal__datos li > .mono{flex:0 0 168px; color:var(--gris)}
@media (max-width:520px){ .legal__datos li > .mono{flex:0 0 100%} }

/* DATOS QUE FALTAN · marcador temporal.
   Rompe a propósito la regla de "naranja solo para la acción": está para que
   sea imposible publicar sin verlo. ANTES DE SUBIR A PRODUCCIÓN esta clase
   tiene que tener CERO apariciones:  grep -c "legal__falta" terminos.html */
.legal__falta{
  display:inline-block; padding:1px 8px; border-radius:var(--r-sm);
  border:1px dashed rgba(249,115,22,.55); color:var(--naranja);
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em;
}

/* --------------------------------------------------------------------------
   FILAS PENDIENTES DE DATO REAL
   Auditoría 2026-08-25. Los chips [COMPLETAR: ...] estaban publicados y los
   veía cualquier visitante: la misma clase de error que los testimonios de
   relleno del inicio. Se ocultan las diez filas que dependen de razón social,
   CUIT, domicilio, localidad y provincia, que son datos que hay que tener, no
   que inventar. Los correos sí se completaron con hola@jujumys.com, que ya es
   el canal publicado en todo el sitio.

   NO SE BORRARON DEL HTML A PROPÓSITO: quedan ahí, con su etiqueta y su chip,
   para que completarlas sea reemplazar el texto y sacar esta clase, y no
   volver a escribir la fila.

   ESTO ES UN PARCHE VISUAL, NO EL ARREGLO. Mientras estas filas estén
   ocultas, la política no identifica al responsable, que es lo que exige el
   art. 6 de la Ley 25.326 y lo que apunta la Resolución 104/2005 de la
   Secretaría de Comercio. Sigue siendo un pendiente abierto.

   PARA CERRARLO: buscar `legal__pendiente` en privacidad.html y
   terminos.html (10 filas), reemplazar el <span class="legal__falta">…</span>
   por el dato real y borrar la clase del <li>. Cuando `grep -c legal__falta`
   dé cero en las dos páginas, el tema está terminado y este bloque se puede
   eliminar.
   -------------------------------------------------------------------------- */
.legal__datos li.legal__pendiente,
.legal__pendiente{display:none}

.legal__cierre{
  margin-top:var(--s9); padding-top:var(--s6); border-top:1px solid var(--linea);
  font-size:15px; line-height:1.6; color:var(--gris); max-width:66ch;
}
.legal__cierre a{color:var(--celeste); border-bottom:1px solid rgba(34,199,242,.32)}
.legal__cierre a:hover{border-bottom-color:var(--celeste)}

/* El pie suma un enlace más: que no se apelotone contra el correo */
.footer__redes{flex-wrap:wrap; row-gap:var(--s2)}

/* Aire al saltar desde el índice: el scroll-padding global es exactamente el
   alto del header (72px), así que el destino quedaba pegado a su borde. */
.legal__grupo,.legal__c{scroll-margin-top:var(--s5)}


/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Decisión de diseño (2026-08-15): NO es la burbuja verde de siempre.
   Ese widget es exactamente lo que delata una plantilla, y el objetivo
   declarado del sitio es no parecerlo. Acá el botón usa el vidrio del sistema
   y el ícono de línea de la grilla de 24px, como todos los demás.

   Tampoco es naranja: el naranja es "la acción" de cada región, y este botón
   convive con los CTA naranjas de cada página. Si fuera naranja, competiría
   con ellos en todas las pantallas. Queda en vidrio, se levanta en hover y
   ahí muestra la etiqueta.

   z-index 45: por debajo del header (50), así el menú abierto en mobile lo
   tapa en lugar de pelearse con él.
   ========================================================================== */
.wa{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px);
  z-index:45; display:inline-flex; align-items:center; gap:var(--s3);
  height:52px; padding:0 15px; border-radius:26px;
  background:rgba(22,22,22,.72); border:1px solid var(--vidrio-borde);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--blanco); text-decoration:none;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  transition:transform var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
             background var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);
}
.wa svg{flex:0 0 auto; width:23px; height:23px}

/* La etiqueta vive plegada y se abre en hover. Con grid 0fr→1fr para que
   anime el ancho sin números mágicos ni saltos de layout. */
.wa__txt{
  display:grid; grid-template-columns:0fr; overflow:hidden;
  font-size:13.5px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
  transition:grid-template-columns var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
  opacity:0;
}
.wa__txt > span{min-width:0; overflow:hidden}

@media (hover:hover) and (pointer:fine){
  .wa:hover,.wa:focus-visible{
    transform:translateY(-3px);
    background:rgba(31,31,31,.86);
    border-color:var(--vidrio-borde-alto);
    box-shadow:0 22px 46px -22px rgba(0,0,0,.95), var(--glow-celeste);
  }
  .wa:hover .wa__txt,.wa:focus-visible .wa__txt{grid-template-columns:1fr; opacity:1}
}

/* En táctil no hay hover: la etiqueta se muestra siempre, porque un círculo
   solo con ícono obliga a adivinar qué hace. */
@media (hover:none){
  .wa__txt{grid-template-columns:1fr; opacity:1}
}

/* Sin JS el botón funciona igual: es un enlace, no depende de nada. */
@media (prefers-reduced-motion:reduce){
  .wa{transition:border-color var(--t-micro) linear}
  .wa:hover,.wa:focus-visible{transform:none; box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
  .wa__txt{transition:opacity var(--t-micro) linear}
}
@media print{ .wa{display:none} }

/* --------------------------------- Botón de WhatsApp dentro del contenido */
.btn-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:46px; padding-inline:20px; border-radius:var(--r-sm);
  border:1px solid var(--vidrio-borde); background:var(--vidrio);
  color:var(--blanco); font-size:14px; font-weight:600;
  transition:border-color var(--t-ui) var(--ease), background var(--t-ui) var(--ease);
}
.btn-wa svg{width:19px; height:19px; flex:0 0 auto}
.btn-wa:hover{border-color:var(--vidrio-borde-alto); background:var(--vidrio-alto)}


/* ==========================================================================
   BOTÓN FLOTANTE · VARIANTE LUNA  (solo propuesta.html)
   Pedido del cliente: que el botón sea una luna con cráteres y que lleve el
   logo REAL de WhatsApp.

   Todo es CSS: la esfera es un radial-gradient descentrado (luz arriba a la
   izquierda) y cada cráter es otro radial-gradient con interior oscuro y borde
   iluminado del lado opuesto, que es lo que los hace leer como hundidos y no
   como manchas. Las medidas van en px porque el botón mide 64px fijos: son
   coordenadas sobre la esfera, no proporciones.

   El verde #25D366 es el oficial de WhatsApp y NO pertenece a la paleta de
   marca. Está acá porque el pedido fue explícitamente el logo real. Es el
   único lugar del sitio donde aparece.
   ========================================================================== */
.wa--luna{
  width:64px; height:64px; padding:0; border-radius:50%;
  justify-content:center;
  border:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  background:
    /* --- cráteres, del más grande al más chico --- */
    radial-gradient(circle 7.5px at 17px 44px,
      rgba(58,55,50,.50) 0 58%, rgba(255,255,255,.20) 70% 86%, transparent 90%),
    radial-gradient(circle 5px at 46px 19px,
      rgba(58,55,50,.44) 0 56%, rgba(255,255,255,.18) 70% 88%, transparent 92%),
    radial-gradient(circle 3.6px at 50px 45px,
      rgba(58,55,50,.40) 0 55%, rgba(255,255,255,.16) 70% 88%, transparent 92%),
    radial-gradient(circle 2.6px at 14px 24px,
      rgba(58,55,50,.34) 0 55%, rgba(255,255,255,.14) 70% 88%, transparent 92%),
    radial-gradient(circle 2px at 33px 55px,
      rgba(58,55,50,.30) 0 55%, rgba(255,255,255,.12) 70% 88%, transparent 92%),
    /* --- mares: manchas anchas y suaves, sin borde --- */
    radial-gradient(circle 13px at 40px 34px, rgba(120,116,108,.24), transparent 70%),
    radial-gradient(circle 10px at 22px 30px, rgba(120,116,108,.18), transparent 72%),
    /* --- la esfera --- */
    radial-gradient(circle at 33% 27%,
      #F2F0EA 0%, #DAD6CE 30%, #B0ACA3 56%, #837F77 76%, #55524C 92%, #3A3833 100%);
  box-shadow:
    inset -7px -9px 20px -10px rgba(0,0,0,.65),   /* el terminador */
    inset 3px 4px 10px -6px rgba(255,255,255,.75), /* el borde iluminado */
    0 20px 44px -20px rgba(0,0,0,.95);
}

/* La luna no lleva etiqueta: un círculo con el logo de WhatsApp ya se entiende,
   y una pastilla de texto le rompería la forma esférica. */
.wa--luna .wa__txt{display:none}

/* Va con .wa--luna delante para ganarle a `.wa svg{width:23px}`, que si no
   le pisaba el tamaño. 24px sobre una luna de 64 es el 37%: el glifo se lee
   sin comerse la superficie ni los cráteres. */
/* COLOR DEL GLIFO. El verde oficial de WhatsApp sobre la luna quedaba como una
   calcomanía pegada encima: dos materiales que no se hablan. En gris carbón
   cálido lee como grabado en la superficie, que es lo que hace que el botón
   parezca una pieza y no un sticker. Se prueba en afinar-movil.html. */
.wa--luna{--wa-glifo:#0B0B0B}   /* elegido por el cliente en afinar-movil.html */
.wa--luna .wa__glifo{width:24px; height:24px; fill:var(--wa-glifo); flex:0 0 auto;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.35))}

@media (hover:hover) and (pointer:fine){
  .wa--luna:hover,.wa--luna:focus-visible{
    background:
      radial-gradient(circle 7.5px at 17px 44px,
        rgba(58,55,50,.50) 0 58%, rgba(255,255,255,.20) 70% 86%, transparent 90%),
      radial-gradient(circle 5px at 46px 19px,
        rgba(58,55,50,.44) 0 56%, rgba(255,255,255,.18) 70% 88%, transparent 92%),
      radial-gradient(circle 3.6px at 50px 45px,
        rgba(58,55,50,.40) 0 55%, rgba(255,255,255,.16) 70% 88%, transparent 92%),
      radial-gradient(circle 2.6px at 14px 24px,
        rgba(58,55,50,.34) 0 55%, rgba(255,255,255,.14) 70% 88%, transparent 92%),
      radial-gradient(circle 2px at 33px 55px,
        rgba(58,55,50,.30) 0 55%, rgba(255,255,255,.12) 70% 88%, transparent 92%),
      radial-gradient(circle 13px at 40px 34px, rgba(120,116,108,.24), transparent 70%),
      radial-gradient(circle 10px at 22px 30px, rgba(120,116,108,.18), transparent 72%),
      radial-gradient(circle at 33% 27%,
        #F7F5F2 0%, #E4E0D8 30%, #BBB7AD 56%, #8D8981 76%, #5C5952 92%, #3E3C37 100%);
    border:none;
    /* halo corto, como manda el manual: la luna se enciende, no flota en neón */
    box-shadow:
      inset -7px -9px 20px -10px rgba(0,0,0,.65),
      inset 3px 4px 10px -6px rgba(255,255,255,.85),
      0 22px 48px -20px rgba(0,0,0,.95),
      0 0 22px -4px rgba(247,245,242,.34);
  }
}

/* ==========================================================================
   ALIVIO DE COMPOSICIÓN EN MÓVILES
   Auditoría 2026-08-25 · Parte 2.4 y paso 4 del plan.

   EL PROBLEMA QUE RESUELVE: aun con el shader apagado (galaxia.js pasa a un
   cuadro fijo en táctil), arriba del fondo quedaba una pila que el compositor
   tenía que rehacer en cada cuadro. Lo que devolvió el navegador a 375×812:

     · .header        backdrop-filter: blur(10px) sobre el canvas de la galaxia
     · .cosmos__via   filter: blur(22px) sobre un elemento de 1452 × 2240 px
     · .cosmos__grano mix-blend-mode: overlay a pantalla completa
     · 3 × .hero__halo  blur(64px) + animación en bucle infinito
     · .cosmos__nebulosa  gradientes de 465 × 1007 px animados 54 s en bucle
     · --superficie / --elevacion en rgba: el compositor no puede descartar
       nada de lo que hay detrás de ninguna tarjeta

   VA AL FINAL DEL ARCHIVO A PROPÓSITO: pisa las definiciones del bloque
   COSMOS, que están más arriba. Si se mueve, deja de funcionar.

   NADA DE ESTO TOCA EL ESCRITORIO. La condición es el tipo de puntero, no el
   ancho: una notebook de pantalla chica sigue viendo todo el efecto, y una
   tablet táctil de 1024 px entra acá.

   .liviano es la misma regla por la otra puerta: la agrega app.js cuando el
   equipo declara 4 GB de RAM o 4 núcleos o menos. Una media query no puede
   preguntar eso.
   ========================================================================== */

@media (hover:none), (pointer:coarse){

  /* El desenfoque de fondo se recalcula cada vez que cambia lo que hay
     detrás. Detrás está el canvas: se recalculaba 60 veces por segundo
     incluso con el usuario quieto. Fondo sólido y se termina. */
  .header{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:#0B0B0B;
  }

  /* Blur de 22 px sobre 1452 × 2240 px. La misma banda se lee igual bajando
     la opacidad, y sale de la lista de capas caras. */
  .cosmos__via{ filter:none; opacity:.28 }

  /* Capa de fusión a pantalla completa. El grano es lo primero que sobra en
     una pantalla de 6 pulgadas. */
  .cosmos__grano{ display:none }

  /* Nada en bucle infinito mientras nadie lo está mirando. Las tres que
     importan son las de .viva__fondo: círculos de 52vw con blur de 72 px a
     los que se les anima el transform. En móvil muchos GPU no pueden cachear
     el desenfoque de una capa que se mueve y lo recalculan cuadro a cuadro.
     Quietas y con menos blur se ven igual y salen del presupuesto. */
  .cosmos__nebulosa{ animation:none; will-change:auto }
  .hero__halo{ animation:none; filter:blur(40px); will-change:auto }
  .viva__fondo span{ animation:none; filter:blur(48px); will-change:auto }
  .contacto__luz span{ animation:none; filter:blur(52px); will-change:auto }
  .bfx--seda::before{ animation:none; filter:blur(18px) }

  /* Superficies opacas: el compositor puede descartar todo lo que hay detrás
     de cada tarjeta. Es el cambio que más rinde de los seis y el único con
     impacto visual apreciable —las tarjetas dejan de dejar pasar el cielo—.
     Si se prefiere conservar ese detalle, en vez de sólido poner
     rgba(22,22,22,.92) y rgba(31,31,31,.94): se gana casi lo mismo. */
  :root{
    --superficie:#161616;
    --elevacion:#1F1F1F;
  }
}

/* Equipo modesto con puntero fino: mismo alivio, activado desde app.js. */
.liviano .header{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:#0B0B0B;
}
.liviano .cosmos__via{ filter:none; opacity:.28 }
.liviano .cosmos__grano{ display:none }
.liviano .cosmos__nebulosa{ animation:none; will-change:auto }
.liviano .hero__halo{ animation:none; filter:blur(40px); will-change:auto }
.liviano .viva__fondo span{ animation:none; filter:blur(48px); will-change:auto }
.liviano .contacto__luz span{ animation:none; filter:blur(52px); will-change:auto }
.liviano .bfx--seda::before{ animation:none; filter:blur(18px) }
.liviano{
  --superficie:#161616;
  --elevacion:#1F1F1F;
}

/* --------------------------------------------------------------------------
   TEXTO SOLO PARA LECTORES DE PANTALLA Y BUSCADORES
   Se saca del flujo sin usar display:none ni visibility:hidden, que lo
   esconderían también de la accesibilidad. Lo usa el H1 del inicio: el
   wordmark es la pieza visual, y la frase que dice qué hacemos y dónde viaja
   en el mismo encabezado. Auditoría 2026-08-25, sección 5.6.
   -------------------------------------------------------------------------- */
.solo-lectores{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   ZONAS TÁCTILES Y TEXTO MÍNIMO
   Auditoría 2026-08-25 · anexo de mediciones. En el viewport de 375 × 812 el
   navegador encontró 4 zonas tocables por debajo de los 44 × 44 px que
   recomienda la WCAG —la marca del header y los 3 enlaces del pie, de 20 px
   de alto— y texto real de 11 px en el enlace del hero.

   El agrandado va SOLO en táctil: en escritorio el mouse apunta fino y el
   espaciado actual es parte del ritmo del diseño.
   ========================================================================== */

@media (hover:none), (pointer:coarse){

  /* El pie: 13 px de texto sin relleno daban ~20 px de alto tocable. */
  .footer__redes{ gap:var(--s4); flex-wrap:wrap }
  .footer__redes a{
    display:inline-flex; align-items:center;
    min-height:44px; padding-inline:2px;
  }

  /* La marca del header entra al mismo mínimo sin mover el layout: el header
     mide 72 px, así que hay lugar de sobra. */
  .marca{ min-height:44px }

  /* Texto real de 11 px. A 12 px sigue leyéndose como mono chico y deja de
     estar por debajo del piso legible. */
  .riel-cta{ font-size:12px }
}