/* ══════════════════════════════════════════════════════════════════════════
   R3 · base compartida — GENERADO, NO EDITAR A MANO
   ──────────────────────────────────────────────────────────────────────────
   Este archivo es una copia exacta del <style> de index.html. Lo usan las
   páginas de "Más de nosotros" para tener el mismo header, el mismo pie y
   los mismos tokens que la home.

   Si editás el CSS de index.html, volvé a correr:
       php panel/sincronizar-css.php

   Lo propio de la sección va en notas.css, que se carga después de éste.
   ══════════════════════════════════════════════════════════════════════════ */



/* ── Certificaciones ──────────────────────────────────────────────
   Fila propia debajo de la línea de credenciales, alineada a la
   izquierda como el resto del copy. No va a la derecha porque ahí vive
   el botón de WhatsApp, que es fijo y sigue el scroll. Nace como fila
   para que Meta y Google entren al lado sin rehacer nada.
   El logo va en blanco: el original es #313557 y sobre este fondo da
   1,64:1, o sea invisible. En blanco da 19,35:1. */
.cert{display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,1.4vw,22px);margin-top:clamp(14px,1.7vh,22px)}
.cert img{height:clamp(24px,2.2vw,32px);width:auto;display:block;opacity:.9}
@media (max-width:900px){ .cert{margin-top:10px;gap:12px} .cert img{height:22px} }
@media (max-height:520px){ .cert{margin-top:8px} .cert img{height:20px} }
/* Tipografías propias. Antes las servía Google: eso sumaba un dominio extra
   (DNS + TLS) y una hoja de estilo que FRENA el pintado, así que el <h1>
   —que es el elemento LCP— no aparecía hasta que ese pedido volvía.
   Los pesos van como rango (400 700) porque el archivo es uno solo, variable:
   declarar 400 a secas obliga al navegador a fingir la negrita. */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/manrope-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:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/manrope-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}
/* Newsreader sólo se usa en tres lugares, todos abajo del pliegue. Va sin
   preload a propósito: así no le compite el ancho de banda a Manrope. */
@font-face{font-family:Newsreader;font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-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:Newsreader;font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-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:Newsreader;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-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:Newsreader;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-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}
:root{
  --base:#F5F5F2; --core:#1C1C1F; --depth:#273642;
  --pulse:#D6F350; --focus:#F56A00; --focus-ink:#BA5100;

  /* Fondo de las superficies con foto y video. Es el azul de depth llevado
     al valor más bajo: sobre imagen, core se ve marrón. */
  --deep:#0B0E11;

  /* Escala de tinta. Antes había 18 opacidades sueltas sobre base y 16 sobre
     core, y de ahí salían los ocho fallos de contraste. Ahora son cuatro
     niveles con el ratio medido al lado. ink-4 no se usa nunca para texto. */
  --ink-1:#F5F5F2;   --ink-1c:#1C1C1F;    /* 15.56 / 15.56  títulos     */
  --ink-2:#F5F5F2C4; --ink-2c:#1C1C1FC4;  /*  9.61 /  7.58  cuerpo      */
  --ink-3:#F5F5F2A8; --ink-3c:#1C1C1FA8;  /*  7.39 /  5.25  el piso AA  */
  --ink-4:#F5F5F25C; --ink-4c:#1C1C1F5C;  /*  3.16 /  2.21  decorativo  */
  --ink-off:#F5F5F229;                    /*  apagado a propósito       */
  --linea:#F5F5F21F; --linea-c:#1C1C1F1F;

  /* Duraciones: tres, no quince. */
  --t-1:120ms; --t-2:200ms; --t-3:320ms;
  --e:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);

  --shell:1440px;
  --hdr:80px;
  --gutter:clamp(20px,3.9vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
/* Lenis necesita esto: si el navegador además hace smooth scroll, se pelean y el scroll se traba */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
section[id]{scroll-margin-top:96px}
body{margin:0;background:var(--core);color:var(--base);
  font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.shell{width:100%;max-width:var(--shell);
  margin-left:auto;margin-right:auto;
  padding-left:clamp(20px,3.9vw,56px);padding-right:clamp(20px,3.9vw,56px);
  margin-inline:auto;padding-inline:clamp(20px,3.9vw,56px)}
/* Overline del manual: 14px · SemiBold · 140% · 1.2px. Un solo valor.
   Antes había cinco tamaños distintos para este mismo rol. */
.overline,.ev-case .n .lb,.fnd-list .rl,.quote cite,.ft-h,.ft-bar,.f-recap dt{
  font-size:14px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;line-height:1.4}
.overline{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.sq{width:8px;height:8px;border-radius:1px;flex:none;display:inline-block}
section{position:relative}
/* Foco de teclado: mismo naranja en toda la página, sin excepciones. */
/* Gemela en :focus, primero. En un motor sin :focus-visible el selector es
   inválido y se cae la lista entera, que es todo el foco visible del sitio.
   La segunda regla la desarma donde SÍ hay :focus-visible, así el anillo no
   aparece al hacer click con el mouse. En un motor viejo `:not(:focus-visible)`
   también es inválido, así que esa regla se cae y queda la gemela: exactamente
   el reparto que hace falta. */
a:focus,button:focus,input:focus,textarea:focus{
  outline:2px solid var(--focus);outline-offset:3px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),
input:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px}
.in:focus-visible{outline:0}

/* ───────── HEADER ───────── */
header{position:fixed;top:0;right:0;bottom:auto;left:0;inset:0 0 auto 0;z-index:80;color:#fff;transition:color .3s var(--e)}
header.on-light{color:var(--core)}
header::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;pointer-events:none;
  background:var(--ink-3c);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid #ffffff14;
  opacity:0;transition:opacity .3s var(--e),background-color .3s var(--e),border-color .3s var(--e)}
header.stuck::before{opacity:1}
header.on-light::before{background:var(--ink-2);border-bottom-color:#1c1c1f14}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none}
.brand .lg{transition:transform .2s var(--e)}
.brand .lg{height:24px}
.brand .lg svg{height:100%!important;width:auto!important;display:block}
nav.main{display:flex;gap:32px}
nav.main a{position:relative;color:inherit;text-decoration:none;opacity:.62;font-size:15px;
  font-weight:500;padding-block:4px;transition:opacity .16s ease}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--focus);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e)}nav.main a[aria-current="true"]::after{transform:scaleX(1)}

.right{display:flex;align-items:center;gap:20px}
.lang a{color:inherit;text-decoration:none;opacity:.45;font-size:13px;font-weight:600;
  letter-spacing:1.2px;padding:6px 4px;margin:-6px -4px}  /* área de toque 24px */
.lang a[aria-current]{opacity:1}
.lang a{transition:opacity .16s ease,color .16s linear}
.lang span{opacity:.28;font-size:13px;margin:0 5px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;min-width:130px;
  font-family:inherit;   /* un <button> no hereda la familia del body */
  padding-inline:26px;border-radius:999px;font-size:18px;font-weight:600;letter-spacing:.38px;
  text-decoration:none;border:2px solid transparent;
  transition:transform .16s var(--e),background-color .18s linear,color .18s linear}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:progress;pointer-events:none}
/* Presión: hasta ahora solo la tenían tres elementos de toda la página. */
.opts label,.q-dots button,.menu-btn,.ft-col a,nav.main a,.lang a,.wsp-tip .x,.menu-ov nav a{
  transition:transform var(--t-1) var(--e)}
.opts label:active,.q-dots button:active,.menu-btn:active,.ft-col a:active,
nav.main a:active,.lang a:active,.wsp-tip .x:active,.menu-ov nav a:active{transform:scale(.97)}
.btn-solid{background:#fff;color:var(--core)}
header.on-light .btn-solid{background:var(--core);color:var(--base)}
/* Al pasar por encima la pastilla se vuelve la misma naranja del botón de
   enviar: el CTA del header anticipa a dónde lleva. La tinta va en Core y no
   en blanco porque sobre el naranja da 5.62:1 contra 3.02:1. */
.btn-solid:hover,header.on-light .btn-solid:hover{background:var(--focus);color:var(--core)}
.btn-lg{height:54px;min-width:151px;padding-inline:30px;font-size:18px}
.btn-focus{background:var(--focus);color:var(--core)}
.menu-btn{display:none;background:none;border:0;padding:6px 2px;color:inherit;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase}
.menu-ov[hidden]{display:none}
.menu-ov{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:70;background:var(--core);
  display:grid;align-content:center;opacity:0;transition:opacity .28s var(--e)}
.menu-ov[data-open="true"]{opacity:1}
.menu-ov nav a{opacity:0;transform:translateY(10px);
  transition:opacity var(--t-3) var(--e),transform var(--t-3) var(--e),color var(--t-2) linear}
.menu-ov[data-open="true"] nav a{opacity:1;transform:none}
.menu-ov[data-open="true"] nav a:nth-child(1){transition-delay:40ms}
.menu-ov[data-open="true"] nav a:nth-child(2){transition-delay:80ms}
.menu-ov[data-open="true"] nav a:nth-child(3){transition-delay:120ms}
.menu-ov[data-open="true"] nav a:nth-child(4){transition-delay:160ms}
.menu-ov nav a{display:flex;align-items:center;gap:16px;color:var(--base);text-decoration:none;
  font-size:clamp(30px,9vw,44px);font-weight:700;letter-spacing:-.02em;padding:14px 0;
  border-bottom:1px solid #f5f5f21a}
.menu-ov nav a:last-child{border-bottom:0}
.menu-ov nav a{transition:color .2s linear}
.menu-ov nav a .sq{transition:transform .2s var(--e)}
.menu-ov{grid-template-rows:1fr auto;align-content:stretch}
.menu-ov nav{align-self:center}
.menu-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(22px,4vh,34px);color:var(--base);border-top:1px solid #f5f5f21a}
.menu-foot .lang a{color:var(--base)}
.menu-foot .btn{height:46px;min-width:0;padding-inline:24px}
/* con el menú abierto el header queda sobre el velo: siempre en claro y sin banda */
body[data-menu="open"] header{color:var(--base)}
body[data-menu="open"] header::before{opacity:0}
body[data-menu="open"] .brand{visibility:hidden}
.menu-ov nav a .sq{width:9px;height:9px;border-radius:1px;flex:none}
.menu-ov nav a:nth-child(odd) .sq{background:var(--pulse)}
.menu-ov nav a:nth-child(even) .sq{background:var(--focus)}
nav.main a[aria-current="true"]{opacity:1}
@media(max-width:960px){nav.main{display:none}
  .menu-btn{display:inline-block}.bar{height:64px}
  :root{--hdr:64px}}
@media(max-width:720px){
  .right{gap:14px}
  .bar > .right > .btn-solid{display:none}   /* el CTA está dentro del menú */
  .brand .lg{height:20px}}
@media(max-width:720px){.overline{white-space:normal}}

/* ───────── 01 HERO ───────── */
#hero{position:relative;z-index:2;height:200vh;height:200svh}
.hero-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--deep)}
.media{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:radial-gradient(120% 90% at 70% 15%,#4C5862,#1C272F 42%,#0B0E11);
  background:radial-gradient(120% 90% at 70% 15%,
  color-mix(in srgb, var(--depth) 82%, var(--base)),
  color-mix(in srgb, var(--depth) 62%, var(--deep)) 42%, var(--deep))}
.media video{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* El video ya trae ~20% del oscurecimiento horneado: comprime mucho mejor con
   menos contraste y en pantalla se ve igual. El velo se bajó en consecuencia
   para no oscurecer dos veces. */
.scrim{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background:linear-gradient(180deg,#0B0E1185,#0B0E1129 20%,#0B0E1114 42%,#0B0E114C 76%,#0B0E119E);
  background:linear-gradient(180deg,
  color-mix(in srgb, var(--deep) 52%, transparent),
  color-mix(in srgb, var(--deep) 16%, transparent) 20%,
  color-mix(in srgb, var(--deep) 8%, transparent) 42%,
  color-mix(in srgb, var(--deep) 30%, transparent) 76%,
  color-mix(in srgb, var(--deep) 62%, transparent))}
.hero-grid{position:relative;height:100%;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding-top:var(--hdr)}
.stage{perspective:1500px;perspective-origin:50% 46%;width:min(46vw,540px)}
.extrude{position:relative;transform-style:preserve-3d;will-change:transform}
.extrude .layer{position:absolute;top:0;right:0;bottom:0;left:0;inset:0}
.extrude .lr{-webkit-mask:url(/logo/r3-part-r.svg) center/contain no-repeat;mask:url(/logo/r3-part-r.svg) center/contain no-repeat}
.extrude .ld{-webkit-mask:url(/logo/r3-part-dot.svg) center/contain no-repeat;mask:url(/logo/r3-part-dot.svg) center/contain no-repeat}
.extrude .l3{-webkit-mask:url(/logo/r3-part-3.svg) center/contain no-repeat;mask:url(/logo/r3-part-3.svg) center/contain no-repeat}
.extrude .p3{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;transform-style:preserve-3d}
.extrude .face3{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:auto;display:block}
.extrude .face{position:relative;display:block;width:100%;height:auto}
.hero-copy{width:100%;padding-bottom:min(8vh,72px);color:#fff}
.hero-copy h1{margin:0;font-size:clamp(26px,3.55vw,54px);line-height:1.1;letter-spacing:-.03em;font-weight:500;max-width:27ch}
.hero-copy h1 b{font-weight:700}
.hero-copy p:not([class]){margin:18px 0 0;max-width:44ch;font-size:clamp(15px,1.15vw,19px);line-height:1.5;color:var(--ink-3)}
.hero-proof{margin-top:clamp(14px,1.8vh,22px);max-width:34ch;
  font-size:clamp(17px,1.4vw,20px);line-height:1.5;   /* Body de la tabla: 20 / 400 / 150% */
  color:var(--ink-2);font-weight:400}
.hero-proof b{font-weight:700;color:var(--ink-1)}
/* Un solo font-size y sin !important: la regla arrastraba tres declaraciones
   pisadas de iteraciones anteriores. */
.hero-spec{display:flex;align-items:center;flex-wrap:wrap;gap:0 clamp(12px,1.1vw,18px);
  margin-top:clamp(24px,3vh,38px);max-width:none;
  font-size:clamp(12px,.95vw,14px);font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink-2);line-height:1.4}
.hero-spec em{display:inline-block;width:1px;height:12px;background:var(--ink-4)}
/* En apaisado el logo 3D se comía 225px de 390 de alto: el copy quedaba fuera. */
@media (orientation:landscape) and (max-height:540px){
  :root{--hdr:56px}
  .bar{height:56px}
  /* El max-height limitaba la CAJA, no al logo: el .extrude y su <img>
     conservaban su alto completo y se desbordaban 77px sobre el titular,
     medido en 844x390. El tope va en el ancho, que es de donde sale el alto. */
  .stage{width:min(46vw,540px,50vh);width:min(46vw,540px,50svh);
         max-height:30vh;max-height:30svh}
  .hero-copy{padding-bottom:min(3vh,18px)}
  .hero-copy h1{font-size:clamp(20px,3vw,28px);max-width:34ch}
  .hero-proof{margin-top:6px;font-size:14px;line-height:1.35;max-width:44ch}
  /* La tira de tres datos ocupaba hasta 80px porque envolvía en tres renglones.
     Con los separadores en punto entra en uno. */
  .hero-spec{margin-top:8px;font-size:10.5px;gap:4px 8px;letter-spacing:1px}
  .hero-spec em{display:none}
  .hero-spec span:not(:last-child)::after{content:" ·";opacity:.4}
}
@media (orientation:landscape) and (max-height:430px){
  .stage{width:min(46vw,540px,40vh);width:min(46vw,540px,40svh);
         max-height:24vh;max-height:24svh}
  .hero-copy h1{font-size:19px}
  .hero-proof{font-size:13px;margin-top:5px}
  .hero-spec{margin-top:6px;font-size:10px}
}
@media(max-width:380px){ .hero-copy h1{font-size:23px} }
@media(max-width:720px){
  .hero-spec{gap:6px 10px}
  .hero-spec em{display:none}
  .hero-spec span:not(:last-child)::after{content:" ·";opacity:.4}
}

/* ───────── 02 ZAMBULLIDA ───────── */

/* ───────── cabeceras de sección ───────── */
.sec{padding:clamp(96px,10vw,160px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:flex-start;gap:32px;margin-bottom:clamp(26px,3vw,44px)}
.sec-head h2{margin:0;font-size:clamp(30px,4vw,52px);font-weight:600;line-height:1.2;letter-spacing:-.025em;max-width:17ch}
.light{}

/* ── 05 · el formulario ─────────────────────────────────────────────────
   Antes esta era la única sección CLARA de la página, y el formulario vivía
   suelto adentro. Se dio vuelta: la sección acompaña al resto del sitio y lo
   único iluminado pasa a ser la card del formulario. Medido, la card se
   despegaba de su sección 1,09:1 —o sea nada, blanco sobre casi blanco— y
   ahora son 17:1. La superficie donde se escribe sigue siendo clara, que es
   lo que importa para trece campos.
   La sección ya no lleva la clase `light`, así que el header se queda en su
   modo oscuro acá: era esa clase la que lo invertía. */
#cierre{background:var(--core);color:var(--base)}
#cierre .sec-head h2,#cierre h2{color:var(--base)}
.f-lead{max-width:52ch;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--ink-3);margin:0}
.f-wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,5vw,88px);
  align-items:start;margin-top:clamp(40px,4.6vw,72px)}
.f-fit li,.f-recap dd{transition:color .18s linear}
.f-side{position:sticky;top:calc(var(--hdr) + 28px);
  max-height:calc(100vh - var(--hdr) - 56px);max-height:calc(100svh - var(--hdr) - 56px);overflow:auto;scrollbar-width:none}
.f-side::-webkit-scrollbar{display:none}
.f-fit p.overline{margin:0 0 12px;color:var(--ink-3)}
.f-fit ul{list-style:none;margin:0 0 clamp(26px,3vw,38px);padding:0;display:grid;gap:9px}
.f-fit li{font-size:15px;line-height:1.45;color:var(--ink-3);padding-left:16px;position:relative}
.f-fit li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--ink-4)}
.f-recap{border-top:1px solid var(--linea);padding-top:18px}
.f-recap .overline{display:flex;justify-content:space-between;gap:12px;margin:0 0 14px;color:var(--ink-3)}
.f-recap dl{margin:0;display:grid;gap:11px}
.f-recap .row{display:grid;gap:2px}
.f-recap dt{color:var(--ink-3);overflow-wrap:anywhere}
.f-recap dd{margin:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--base);
  overflow-wrap:anywhere}
/* La card. Es la única parte de la página donde el visitante ACTÚA, y hasta
   acá no tenía ningún borde: la sección clara se leía como un vacío y no como
   un lugar donde hacer algo. El blanco puro contra --base separa la superficie
   de trabajo del fondo de la sección, y los campos y chips quedan en --base:
   así cada control se despega de la card en vez de fundirse con ella. */
.f-form{display:grid;gap:clamp(34px,3.6vw,54px);
  background:#fff;border:1px solid var(--linea-c);border-radius:1px;
  padding:clamp(26px,3vw,44px);
  /* Sobre fondo oscuro la sombra tiene que apoyar la card, no desaparecer.
     Teñida con el azul de la marca, no en negro puro. */
  box-shadow:0 2px 8px #00000040, 0 24px 64px #0b0e1159}
.f-bk{margin:0 0 clamp(18px,2vw,26px);color:var(--ink-3c)}
.f-block{display:grid;gap:clamp(22px,2.4vw,32px)}
.fld{border:0;margin:0;padding:0;min-width:0}
.fld .lb,.fld legend{display:block;padding:0;font-size:clamp(16px,1.25vw,19px);font-weight:600;
  letter-spacing:-.01em;line-height:1.3;color:var(--core);margin-bottom:12px}
.fld .hint{display:block;margin-top:-6px;margin-bottom:12px;font-size:14px;line-height:1.4;color:var(--ink-3c);font-weight:400}
.in{width:100%;border:1px solid var(--ink-3c);border-radius:1px;background:var(--base);
  padding:13px 15px;
  font-family:inherit;font-size:clamp(16px,1.3vw,19px);color:var(--core);
  transition:border-color .18s linear,background-color .18s linear,box-shadow .18s linear}
/* El placeholder se queda en ink-3c: 5.25:1, que es el piso de texto. Lo que
   cambió no es su color sino su marco. Antes flotaba en un campo sin caja y se
   leía igual de firme que una respuesta escrita —por eso el formulario parecía
   venir completado—. Adentro de una caja con borde, el mismo texto se lee como
   lo que es: un ejemplo en un campo vacío. */
.in::placeholder{color:var(--ink-3c)}
.in:focus{outline:0;border-color:var(--focus);background:#fff;
  box-shadow:inset 0 0 0 1px var(--focus)}
textarea.in{resize:vertical;min-height:5.2em;line-height:1.5;padding-top:12px}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opts input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
/* El borde daba 1,27:1 contra el fondo. WCAG pide 3:1 para el límite de un
   control, así que los 24 chips se leían como etiquetas apagadas y no como
   algo que se toca. Ahora tienen relleno propio y un borde que se ve. */
.opts label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--ink-3c);border-radius:999px;padding:11px 17px 11px 14px;
  background:var(--base);
  font-size:16px;font-weight:500;line-height:1.2;color:var(--ink-2c);
  transition:border-color .16s linear,background-color .16s linear,color .16s linear}
.opts label .sq{width:7px;height:7px;background:var(--ink-4c);transition:background-color .16s linear}
@media(hover:hover) and (pointer:fine){.opts label:hover{border-color:var(--core);color:var(--core)}}
.opts input:checked + label{background:var(--core);border-color:var(--core);color:var(--base)}
.opts input:checked + label .sq{background:var(--pulse)}
/* Los chips son input de 1x1 con opacity:0: esta regla es su único foco. */
.opts input:focus + label{outline:2px solid var(--focus);outline-offset:3px}
.opts input:focus:not(:focus-visible) + label{outline:0}
.opts input:focus-visible + label{outline:2px solid var(--focus);outline-offset:3px}
/* el hueco del error existe siempre: si apareciera de golpe correría el botón
   y un clic podría terminar en otro lado */
.err{margin:8px 0 0;min-height:1.25em;font-size:13.5px;line-height:1.25;color:var(--focus-ink);font-weight:600}
.fld[data-bad="true"] .in{border-color:var(--focus-ink);box-shadow:inset 0 0 0 1px var(--focus-ink)}
.f-send{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;
  border-top:1px solid var(--linea-c);padding-top:clamp(24px,2.6vw,34px)}
.f-send .btn-focus{color:var(--core)}
.f-send .wa{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:15px;font-weight:600;color:var(--core);border-bottom:1px solid #1c1c1f3d;padding-bottom:2px;
  transition:color .18s linear,border-color .18s linear}
.f-send .wa .sq{background:var(--pulse)}
.f-when{flex:1 1 100%;margin:0;font-size:14px;line-height:1.45;color:var(--ink-3c)}
.f-when b{color:var(--core);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-done{display:none;background:#fff;border:1px solid var(--linea-c);border-radius:1px;
  padding:clamp(26px,3vw,40px);box-shadow:0 2px 8px #00000040, 0 24px 64px #0b0e1159}
.f-done h3{margin:0;font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.025em;line-height:1.12;color:var(--core)}
.f-done p{margin:14px 0 0;max-width:46ch;font-size:16px;line-height:1.55;color:var(--ink-3c)}
form[data-done="true"]{display:none}
form[data-done="true"] + .f-done{display:block}

@media(max-width:1023px){
  .f-wrap{grid-template-columns:1fr;gap:clamp(34px,5vh,48px)}
  .f-side{position:static}
  .f-recap{display:none}   /* al lado del formulario en una columna sería repetirlo */
}
@media(max-width:560px){
  /* En pantalla angosta el margen de la card se come el ancho del campo:
     20 del shell + 26 de la card por lado dejan 298 px para escribir. */
  .f-form,.f-done{padding:20px 16px;margin-inline:-4px}
}
@media(max-width:520px){.opts label{padding:11px 14px 11px 12px}}
@media(max-width:980px){.m-pin{position:static;height:auto;padding:12vh 0}.m-grid{grid-template-columns:1fr;gap:40px}.steps li p{opacity:1;max-height:none}.steps li h3{color:#fff}}
@media(hover:hover) and (pointer:fine){.person:hover .bio{opacity:1}}
@media(max-width:820px){.people{grid-auto-flow:column;grid-auto-columns:76%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding-inline:20px;padding-bottom:8px}.person{scroll-snap-align:start}.portrait .bio{opacity:1}}
.quote{margin-top:clamp(52px,5.6vw,96px);text-align:center;display:grid;justify-items:center;gap:clamp(18px,2vw,28px)}
.quote .qm{width:clamp(38px,3.4vw,54px);color:var(--acc);display:block;transition:color .3s var(--e)}
.quote .qm svg{width:100%!important;height:auto!important;display:block}
.q-stack{display:grid;place-items:center}
.quote blockquote{grid-area:1/1;margin:0;overflow-wrap:anywhere;font-family:Newsreader,serif;font-weight:400;
  font-size:clamp(24px,3.1vw,44px);line-height:1.2;max-width:20ch;
  transition:opacity .28s var(--e),filter .28s var(--e),transform .28s var(--e)}
/* Mismo caso que las bios: tres blockquote en grid-area:1/1. */
.quote blockquote ~ blockquote{opacity:0;filter:blur(3px);transform:translateY(8px);pointer-events:none}
.quote blockquote[data-on="false"]{opacity:0;filter:blur(3px);transform:translateY(8px);pointer-events:none}
/* Los puntitos los fabrica el JS: un contenedor vacío no tiene que ocupar. */
.q-dots:empty{display:none}
.quote blockquote[data-on="true"]{opacity:1;filter:blur(0);transform:none;pointer-events:auto}
.quote cite{transition:opacity .22s var(--e)}
.q-dots{display:flex;gap:10px;margin-top:6px}
/* El cuadrado sigue midiendo 8px; el área de toque, 26. */
.q-dots button{width:26px;height:26px;border:0;padding:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.q-dots button::before{content:"";width:8px;height:8px;border-radius:1px;
  background:#f5f5f22e;transition:background-color var(--t-3) var(--e),transform var(--t-3) var(--e)}
.q-dots{gap:2px;margin-left:-8px}
.q-dots button[aria-pressed="true"]::before{background:var(--acc);transform:scale(1.2)}
@media(hover:hover) and (pointer:fine){
  .q-dots button:not([aria-pressed="true"]):hover::before{background:var(--ink-3);transform:scale(1.2)}}
.quote blockquote i,.quote blockquote em{color:var(--acc);transition:color .3s var(--e)}
.quote blockquote em{font-style:normal}
.quote cite{font-style:normal;color:var(--ink-3);font-weight:600}
.bts{margin-top:clamp(48px,5vw,86px)}
.bts-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:22px}
.bts-note{margin:0;font-size:14px;color:var(--ink-3)}
.track .cell{width:clamp(200px,19vw,290px);aspect-ratio:4/3;background:var(--depth) center/cover no-repeat;
  flex:none;position:relative;overflow:hidden;display:block;text-decoration:none;color:#fff}
.track a.cell::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background:linear-gradient(0deg,#0B0E11D9,#0B0E1136 55%,transparent);
  background:linear-gradient(0deg,color-mix(in srgb, var(--deep) 85%, transparent),color-mix(in srgb, var(--deep) 21%, transparent) 55%,transparent);
  opacity:.85;transition:opacity .28s var(--e)}
.track .cell .lb{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;
  align-items:center;gap:8px;padding:14px;font-size:13px;font-weight:600;letter-spacing:.6px}
.track .cell .lb i{width:14px;color:var(--cell-acc,var(--pulse));flex:none;transition:transform .28s var(--e)}
.track .cell .lb i svg{width:100%!important;height:auto!important;display:block;transform:rotate(-45deg)}
@media(hover:hover) and (pointer:fine){
  .track a.cell:hover::after{opacity:.55}
  .track a.cell:hover .lb i{transform:translate(4px,-4px)}
}
/* En una máscara el negro es 'opaco', no un color: no cuenta como paleta. */
.marquee{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:14px;width:max-content;will-change:transform}

/* ───────── 06 CIERRE ───────── */
#cierre{padding:clamp(96px,10vw,160px) 0 clamp(72px,7.5vw,116px)}
#cierre h2{margin:0;font-size:clamp(30px,4vw,52px);font-weight:600;letter-spacing:-.025em;
  line-height:1.2;max-width:17ch}   /* H2 L de la tabla, el mismo que el de equipo */
/* El corte de color es el cierre: no hace falta además una línea. El aire de
   abajo deja libre el WhatsApp flotante. */
footer{background:var(--core);color:var(--base);
  padding:clamp(72px,7.5vw,116px) 0 clamp(30px,3.2vw,44px)}
/* Las dos columnas de links se miden por su contenido y se apoyan a la derecha:
   repartir en tercios dejaba a SECCIONES arrancando en un 50% arbitrario. */
.ft-top{display:grid;grid-template-columns:1fr auto auto;gap:clamp(30px,3vw,52px);
  align-items:start}
.ft-brand{max-width:38ch}
footer .wm{display:block;height:clamp(30px,3.4vw,44px);color:var(--base)}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ft-h{margin:0 0 5px;color:var(--ink-3)}
.ft-col a{color:var(--ink-2);text-decoration:none;font-size:16px;font-weight:500;padding-block:3px;
  transition:color .18s linear}
.ft-bar{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  margin-top:clamp(40px,4.4vw,64px);padding-top:20px;border-top:1px solid #f5f5f214;
  color:var(--ink-3);
  /* el flotante se apoya en esta esquina: la última línea le deja el lugar */
  padding-right:clamp(74px,6.4vw,96px)}
@media(max-width:860px){
  .ft-top{grid-template-columns:1fr 1fr;gap:34px 30px}
  .ft-brand{grid-column:1 / -1;max-width:none}}
@media(max-width:420px){.ft-top{grid-template-columns:1fr;gap:30px}}
footer .wm svg{height:100%!important;width:auto!important;display:block}
footer .tag{font-size:14px;font-weight:500;line-height:1.5;color:var(--ink-3);max-width:34ch;
  margin:clamp(16px,1.6vw,22px) 0 0}
@media(max-width:820px){.peek{grid-template-columns:repeat(3,1fr)}.peek .c{height:84px}
}

/* ── 02 · evidencia: la marca se abre, la grilla se forma, el caso emerge ── */
#evidencia{height:280vh;position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}
.ev-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--deep)}
.ev-pin::before{content:"";position:absolute;top:0;right:0;bottom:auto;left:0;inset:0 0 auto 0;height:180px;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,#0B0E11CC,transparent);
  background:linear-gradient(180deg,color-mix(in srgb, var(--deep) 80%, transparent),transparent)}
.ev-cover{position:absolute;left:50%;top:50%;z-index:4;
  width:260vmax;height:260vmax;background:var(--deep);
  transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--esc,1));
  -webkit-mask:url(/logo/r-aperture.svg) center no-repeat;mask:url(/logo/r-aperture.svg) center no-repeat;
  -webkit-mask-size:300%;mask-size:300%;
  will-change:transform,filter}
/* Oculta fuera de su sección: el hero mide 100svh y en el celular el viewport
   es más alto que eso cuando la barra se retrae, así que la R de evidencia
   asomaba por esa franja mientras todavía estabas en el hero. */
.morph-r{visibility:hidden}
#evidencia[data-viva="true"] .morph-r{visibility:visible}
.morph-r{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
  transform-origin:50% 50%}
.ev-grid{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:2;display:grid;gap:clamp(8px,.9vw,14px);
  grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);
  padding:clamp(16px,2.4vw,40px);opacity:0}
.ev-grid .cell{background:#1F2B34 center/cover no-repeat;
  background:color-mix(in srgb, var(--depth) 72%, var(--deep)) center/cover no-repeat;position:relative;overflow:hidden;
  clip-path:inset(0 0 100% 0)}
.ev-grid .cell::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;
  background:#0B0E1147;background:color-mix(in srgb, var(--deep) 28%, transparent)}
.ev-grid .cell.feat::after{background:#0B0E1126;background:color-mix(in srgb, var(--deep) 15%, transparent)}
.ev-grid .cell.feat{grid-column:span 2;grid-row:span 2}
.ev-veil{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,#0B0E1194 58%,#0B0E11E8);
  background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--deep) 58%, transparent) 58%,color-mix(in srgb, var(--deep) 91%, transparent));opacity:0}
/* Espejo del riel naranja de la sección 03: mismo mecanismo, del otro lado.
   Es fijo a la pantalla porque arranca en el hero, cuando la R empieza a caer,
   y no termina hasta el final de la grilla. */
.ev-rail{position:fixed;right:clamp(36px,4.6vw,74px);z-index:55;pointer-events:none;
  top:calc(var(--hdr) + clamp(16px,2.4vh,30px));bottom:clamp(116px,14vh,162px);
  width:2px;opacity:0;transition:opacity .35s var(--e)}
/* Antes esto crecía con height y forzaba recálculo de layout en cada cuadro.
   scaleY hace lo mismo por GPU. La marca sale del elemento que escala, porque
   si no se estiraría con él. */
.ev-grow{position:absolute;top:0;left:0;right:0;height:100%;transform:scaleY(0);
  transform-origin:top;will-change:transform;
  background:linear-gradient(180deg,#d6f35000,var(--pulse) 24%)}
/* El punto de la R es el extremo de la línea: la marca gira alrededor de él,
   así que el punto nunca se despega del recorrido. Los porcentajes salen de
   medir el cuadrado dentro del SVG (10.06% / 90.92% de su caja). */
.ev-mk{position:absolute;left:50%;top:0;width:clamp(24px,2.6vw,38px);color:var(--pulse);will-change:transform;
  transform-origin:10.06% 90.92%;transform:translate(-10.06%,-90.92%)}
.ev-mk svg{width:100%!important;height:auto!important;display:block}
@media(max-width:640px){.ev-rail{right:32px}}

.ev-say{position:absolute;top:auto;right:0;bottom:0;left:0;inset:auto 0 0 0;z-index:5;padding-bottom:min(9vh,84px);
  padding-right:clamp(64px,9.5vw,150px);
  padding-top:24vh;opacity:0;
  background:linear-gradient(0deg,#0B0E11F7 0%,#0B0E11E0 42%,#0B0E1170 72%,transparent 100%);
  background:linear-gradient(0deg,color-mix(in srgb, var(--deep) 97%, transparent) 0%,color-mix(in srgb, var(--deep) 88%, transparent) 42%,color-mix(in srgb, var(--deep) 44%, transparent) 72%,transparent 100%)}
.say-row{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px)}
.ev-say h2{margin:0;color:var(--ink-1);font-size:clamp(30px,5.4vw,84px);line-height:1;letter-spacing:-.035em;font-weight:700;max-width:15ch}
.say-next{display:flex;align-items:center;gap:clamp(12px,1.2vw,20px);text-decoration:none;
  color:#fff;flex:none;padding-bottom:.35em}
.say-next .lbl{font-size:clamp(12px,.95vw,14px);font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--ink-3);transition:color .2s var(--e);white-space:nowrap}
.say-next{text-decoration:none}
.say-next{display:inline-flex;padding-block:4px}
.say-next .lbl{position:relative;padding-bottom:5px}
.say-next .lbl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--pulse);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--e)}
@media(max-width:860px){
  .say-row{flex-direction:column;align-items:flex-start;gap:22px}
  .say-next{padding-bottom:0}
  .ev-case .foot{flex-direction:column;align-items:flex-start;gap:18px}
  .ev-case .next-lbl .t{white-space:normal}
}
.ev-say h2 em{font-family:Newsreader,serif;font-style:italic;font-weight:400;color:var(--pulse)}
/* el caso emerge de la celda destacada */
.ev-case{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:6;display:flex;flex-direction:column;
  /* Mismo margen que .shell: antes arrancaba en 37px contra los 56 del resto
     y partía el borde izquierdo de la página justo donde se lee en columna. */
  padding:calc(var(--hdr) + 30px) var(--gutter) clamp(22px,2.6vw,44px);
  color:#fff;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#0B0E11B2 0%,#0B0E1159 26%,#0B0E11A6 62%,#0B0E11ED 100%);
  background:linear-gradient(180deg,color-mix(in srgb, var(--deep) 70%, transparent) 0%,color-mix(in srgb, var(--deep) 35%, transparent) 26%,color-mix(in srgb, var(--deep) 65%, transparent) 62%,color-mix(in srgb, var(--deep) 93%, transparent) 100%)}
.ev-case .top{display:flex;align-items:center;gap:clamp(16px,3vw,52px)}
.ev-case .mid{margin-top:auto}
.ev-case .client{font-size:clamp(15px,1.3vw,20px);font-weight:500;color:var(--ink-2);margin:0 0 clamp(10px,1.2vw,18px)}
.ev-case h3{margin:0;font-size:clamp(25px,3.1vw,46px);font-weight:700;line-height:1.1;letter-spacing:-.025em;max-width:17ch}
.ev-case h3 em{font-style:normal;color:var(--pulse)}
.ev-case .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,44px);margin-top:clamp(22px,2.6vw,40px);max-width:min(100%,840px);
  align-items:stretch;
  border-top:1px solid #ffffff26;padding-top:clamp(18px,2vw,28px)}
.ev-case .n{display:flex;flex-direction:column}
.ev-case .n .k{font-family:Newsreader,serif;font-size:clamp(34px,4vw,64px);line-height:.95;
  letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.ev-case .n .lb{display:block;margin-top:12px;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);font-weight:600;max-width:24ch;
  min-height:2.7em}
.ev-case .n .per{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;
  font-size:clamp(11px,.82vw,12px);letter-spacing:1.2px;text-transform:uppercase;
  font-weight:600;color:var(--pulse)}
.ev-case .n .per .sq{width:6px;height:6px;border-radius:1px;background:var(--pulse);flex:none}
.ev-case .foot{display:flex;align-items:flex-end;justify-content:flex-end;
  gap:20px;padding-right:clamp(56px,8.5vw,128px);margin-top:clamp(18px,2vw,32px)}
.ev-case .url{font-size:14px;padding-block:4px;letter-spacing:1.3px;font-weight:600;color:var(--ink-3);
  text-decoration:none;transition:color .18s linear}
.ev-case .next-lbl{display:flex;align-items:center;gap:clamp(12px,1.2vw,20px)}
.ev-case .next-lbl .t{font-size:clamp(12px,.95vw,14px);font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
@media(max-width:820px){
  .ev-case .nums{grid-template-columns:1fr 1fr;gap:22px}
  .ev-case .n:last-child{grid-column:1 / -1}
  .ev-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(5,1fr)}
  .ev-grid .cell.feat{grid-column:span 2;grid-row:span 2}
}
/* Un paso intermedio: de 6 a 3 columnas de golpe dejaba fotos enormes en iPad. */
@media(min-width:821px) and (max-width:1023px){
  .ev-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}
}

/* ── 03 · lo que dejás de hacer: centrado ── */
#metodo{height:300vh}
.q-pin{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;text-align:center;
  padding:clamp(96px,12vh,128px) 20px clamp(48px,6vh,72px)}
.q-inner{width:100%;max-width:min(92vw,1020px)}
/* Riel de scroll: la flecha de la marca baja mientras la línea crece detrás.
   Va al margen y no al centro porque el bloque de texto es simétrico. */
.q-rail{position:absolute;left:clamp(16px,3.2vw,52px);
  top:calc(var(--hdr) + clamp(16px,2.4vh,30px));bottom:clamp(40px,5vh,64px);
  width:clamp(24px,2.5vw,34px);pointer-events:none}
.q-grow{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleY(0);
  transform-origin:top;will-change:transform}
.q-grow::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,#f56a0000,var(--focus) 26%)}
.q-arw{position:absolute;left:50%;top:0;width:100%;color:var(--focus);will-change:transform;
  transform:translate(-50%,-46%) rotate(90deg)}
.q-arw svg{width:100%!important;height:auto!important;display:block}
@media(max-width:640px){.q-rail{left:6px;width:20px}}
.q-kicker{margin:0 0 clamp(28px,3.4vw,50px);color:var(--ink-3)}
.drops{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.4vh,20px)}
.drops li{font-size:clamp(22px,2.9vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.18}
/* La raya va como fondo repetido, no como pseudo-elemento: un ::after solo
   podía tachar una línea, y en mobile cada carga envuelve en dos o tres.
   El mosaico mide exactamente un renglón (1.18em = el line-height del li),
   así que se dibuja una raya por renglón. Crece de izquierda a derecha
   igual que antes, con la misma duración. */
.drops li b{font-weight:inherit;display:inline;
  color:#f5f5f21c;transition:color .34s var(--e),background-size .42s var(--e);
  /* 59.6% es el centro de la equis dentro de la caja de línea, medido sobre
     Manrope 600 con line-height 1.18. Es proporcional: vale en todo tamaño. */
  background-image:linear-gradient(to bottom,
    transparent calc(59.6% - 1px), var(--focus) calc(59.6% - 1px),
    var(--focus) calc(59.6% + 1px), transparent calc(59.6% + 1px));
  background-repeat:repeat-y;
  background-size:0% 1.18em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.drops li[data-st="on"] b{color:#fff}
.drops li[data-st="off"] b{color:#f5f5f236}
.drops li[data-st="off"] b{background-size:100% 1.18em}
.q-out{margin-top:clamp(34px,4.6vw,72px);opacity:0}
.q-out h2{margin:0;font-size:clamp(26px,3.6vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.q-out h2 em{font-style:normal;color:var(--pulse)}
.q-out .sub{margin-top:18px;font-size:clamp(16px,1.25vw,20px);font-weight:400;color:var(--ink-3);
  letter-spacing:0;line-height:1.5;max-width:46ch;margin-inline:auto}  /* era lh 1.08 y 118ch de largo */
@media(max-width:640px){.drops li{white-space:normal}.q-inner{max-width:16ch}}

/* ── 04 · founders: la hoja de la marca va pasando de socio en socio ── */
#equipo{padding-top:0;--acc:var(--pulse)}
.fnd-pin{position:relative;display:flex;align-items:center}
.fnd-grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(28px,5vw,90px);
  align-items:center;width:100%}
.fnd-kicker{margin:0 0 clamp(18px,2.2vh,30px) clamp(44px,4vw,64px);color:var(--ink-3)}
.fnd-more{display:flex;gap:12px;align-items:flex-start;
  margin:clamp(20px,2.4vh,32px) 0 0 clamp(44px,4vw,64px);
  padding-top:clamp(16px,2vh,24px);border-top:1px solid #ffffff1a;
  font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--ink-3);max-width:46ch}
.fnd-more .sq{margin-top:.55em}
.fnd-more b{font-weight:600;color:var(--base)}
.fnd-list{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(44px,4vw,64px)}
.fnd-list li{padding:clamp(12px,1.7vh,22px) 0;border-top:1px solid #ffffff1a}
.fnd-list li:first-child{border-top:0}
.fnd-list .nm{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  font-family:inherit;font-size:clamp(24px,2.9vw,44px);font-weight:700;letter-spacing:-.022em;
  line-height:1.1;color:var(--ink-4);cursor:pointer;transition:color .3s var(--e)}
@media(hover:hover) and (pointer:fine){
  /* El reposo subió a ink-4 en la etapa 3: el hover tiene que subir también
     o deja de significar algo. */
  .fnd-list li[data-on="false"] .nm:hover{color:var(--ink-2)}
  .fnd-list li[data-on="true"] .nm{cursor:default}
}
.fnd-list .nm:active{transform:scale(.99)}
.fnd-list .rl{display:block;margin-top:7px;color:var(--ink-3);transition:color .3s var(--e)}
/* La bio vive fuera de la lista y con altura reservada: si se abriera dentro
   de cada fila, el alto de la lista cambiaría en cada cambio y toda la sección
   daría un tirón. */
.fnd-bio{display:grid;margin:clamp(18px,2.2vh,28px) 0 0 clamp(44px,4vw,64px);
  min-height:4.6em;max-width:44ch}
.fnd-bio p{grid-area:1/1;margin:0;font-size:16px;line-height:1.55;color:var(--ink-3);
  transition:opacity .3s var(--e),filter .3s var(--e),transform .3s var(--e)}
/* Las tres comparten grid-area:1/1. Sin JS quedaban las tres encimadas, así
   que acá "por defecto" tiene que ser "solo la primera". */
.fnd-bio p ~ p{opacity:0;filter:blur(3px);transform:translateY(6px)}
.fnd-bio p[data-on="false"]{opacity:0;filter:blur(3px);transform:translateY(6px)}
.fnd-bio p[data-on="true"]{opacity:1;filter:blur(0);transform:none}
.fnd-list li[data-on="true"] .nm{color:var(--acc)}
/* El activo sube un escalón para no empatar con los de reposo, que ahora
   también se leen. Antes los inactivos estaban en 1,4:1 y no hacía falta. */
.fnd-list li[data-on="true"] .rl{color:var(--ink-2)}
.fnd-more .sq{background:var(--acc)!important;transition:background-color .3s var(--e)}
/* la hoja: el mismo recurso que hila las secciones, ahora pasando socios */
.leaf{position:absolute;left:0;top:0;width:clamp(26px,2.2vw,34px);color:var(--acc);
  transition:color .3s var(--e);
  will-change:transform}
.leaf svg{width:100%!important;height:auto!important;display:block}

.fnd-media{position:relative;aspect-ratio:4/5;max-height:66vh;max-height:66svh;margin-inline:auto;width:100%}
/* Nacían en opacity:0 y solo el JS las prendía: sin JS no había una sola
   foto de socio. Ahora se apaga la que NO toca, que es el default correcto. */
.fnd-shot{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:var(--depth);overflow:hidden;
  opacity:1;filter:blur(0);
  transition:opacity .34s var(--e),filter .34s var(--e)}
.fnd-shot[data-on="false"]{opacity:0;filter:blur(6px)}
/* el bracket enmarca la imagen: es la función que le da el manual */
.fnd-media .br{position:absolute;width:clamp(26px,2.4vw,38px);color:var(--acc);z-index:2;transition:color .3s var(--e)}
.fnd-media .br svg{width:100%!important;height:auto!important;display:block}
.fnd-media .br.tl{top:clamp(12px,1.2vw,18px);left:clamp(12px,1.2vw,18px);transform:rotate(90deg)}
.fnd-media .br.br2{bottom:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);transform:rotate(-90deg)}
/* En mobile la columna se apila pero la lógica es la misma que en desktop:
   un socio activo por vez, la foto arriba y la hoja marcando quién está. */
@media(max-width:980px){
  .fnd-pin{position:static;height:auto;padding:0}
  .fnd-grid{grid-template-columns:1fr;gap:clamp(24px,4vh,34px)}
  .fnd-media{order:-1;aspect-ratio:4/5;max-height:none;width:100%}
  .fnd-kicker{margin:0 0 18px clamp(30px,8vw,42px)}
  .fnd-list{padding-left:clamp(30px,8vw,42px)}
  .fnd-bio{margin:18px 0 0 clamp(30px,8vw,42px);min-height:5.4em}
  .fnd-more{margin:22px 0 0 clamp(30px,8vw,42px);max-width:none}
  .leaf{width:clamp(20px,5.4vw,26px)}
  .fnd-list .nm{font-size:clamp(23px,6.6vw,34px)}
}
@media(max-width:520px){ .fnd-bio{min-height:6.6em} }

/* ── WhatsApp flotante ──────────────────────────────────────────────────
   Núcleo con el glifo en lima: se lee sobre las secciones oscuras y sobre
   la clara del formulario sin cambiar de color en el camino. */
.wsp{position:fixed;right:clamp(18px,2.6vw,30px);bottom:clamp(18px,2.6vh,28px);z-index:65;
  width:clamp(52px,4.4vw,58px);height:clamp(52px,4.4vw,58px);border-radius:50%;
  display:grid;place-items:center;background:var(--core);color:var(--pulse);
  box-shadow:0 10px 30px #0B0E1157;box-shadow:0 10px 30px color-mix(in srgb, var(--deep) 34%, transparent);border:1px solid var(--ink-4);text-decoration:none;
  transition:transform .18s var(--e)}
.wsp svg{width:52%;height:auto;display:block;fill:currentColor}
/* Sobre el pie el botón queda del mismo color que el fondo: ahí invierte
   los dos colores en vez de desaparecer. */
.wsp{transition:transform .18s var(--e),background-color .25s linear,color .25s linear,border-color .25s linear}
.wsp[data-on-dark="true"]{background:var(--pulse);color:var(--core);border-color:transparent}
.wsp:active{transform:scale(.96)}
.wsp:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.wsp-tip{position:fixed;z-index:64;right:calc(clamp(18px,2.6vw,30px) + clamp(52px,4.4vw,58px) + 12px);
  bottom:clamp(22px,3vh,32px);max-width:min(74vw,272px);
  background:var(--core);color:var(--base);border:1px solid #f5f5f229;
  border-radius:16px 16px 4px 16px;padding:14px 40px 15px 16px;
  font-size:14.5px;line-height:1.42;box-shadow:0 10px 30px #0B0E1157;box-shadow:0 10px 30px color-mix(in srgb, var(--deep) 34%, transparent);
  opacity:0;transform:translateY(6px) scale(.97);transform-origin:100% 100%;pointer-events:none;
  transition:opacity .3s var(--e),transform .3s var(--e)}
.wsp-tip[data-on="true"]{opacity:1;transform:none;pointer-events:auto}
.wsp-tip b{font-weight:600;color:var(--pulse)}
.wsp-tip .x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;
  background:none;color:var(--ink-3);cursor:pointer;font-size:17px;line-height:1;font-family:inherit}
.wsp-tip .x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media(max-width:640px){.wsp-tip{max-width:min(68vw,230px);font-size:14px}}
@media (prefers-reduced-motion:reduce){.wsp-tip{transition:opacity .2s linear;transform:none}}

/* ── conector: el recurso ↓ de la marca hilando secciones ── */
.link-mark{display:grid;place-items:center;padding:clamp(28px,3.2vw,48px) 0}
.link-mark span{width:clamp(30px,2.6vw,40px);color:var(--pulse);display:block}
.link-mark span svg{width:100%!important;height:auto!important;display:block}

/* El bloque @media (prefers-reduced-motion:reduce) que había acá se sacó a
   propósito, por decisión del dueño: la animación se muestra igual aunque el
   sistema pida menos movimiento. Si se quedaba, apagaba transforms con
   !important, así que el JS animaba y el CSS le pisaba el resultado: la página
   quedaba peor que en cualquiera de los dos extremos. El caso real de falla
   —que las librerías no lleguen— lo cubre la base, que es la página estática:
   ver la hoja `html:not(.con-anim)` de acá abajo. */

/* ── La página sin animación ES la base ────────────────────────────────
   Todo lo de acá abajo aplica cuando `con-anim` NO está: sin JavaScript, con
   el JS caído antes de llegar al núcleo, o con las librerías bloqueadas por
   la red, un filtro de DNS o un bloqueador. Es el estado por defecto, no el
   excepcional: si nada corre, esto es lo que se ve.

   Antes esta receta vivía en `html.sin-anim`, que solo se aplicaba si el JS
   llegaba vivo hasta la línea que la agregaba. Cualquier throw anterior
   dejaba la página con el layout montado para una animación que no existía.

   Ojo con la forma: los valores NO se mueven adentro de `html.con-anim`.
   Hay reglas que no las escribe GSAP inline sino selectores de estado del
   propio CSS (`.drops li[data-st]`, los tres `grid-template-rows`): subirlas
   a `con-anim` les daría más especificidad que a esos selectores y rompería
   el camino animado, que es el 99% de las visitas. */

/* El recorrido de scrub: sin nada que lo consuma son cinco pantallas vacías. */
html:not(.con-anim) #hero{height:auto;z-index:auto}
html:not(.con-anim) .hero-stick{position:static;height:auto}
/* El height:100% del hijo resuelve a auto contra un padre de alto indefinido:
   el hero medía una pantalla y el contenido se apilaba arriba con media
   pantalla vacía abajo. El alto mínimo va acá, que es quien reparte las filas. */
html:not(.con-anim) .hero-grid{height:auto;min-height:100vh;min-height:100svh}

/* El margen negativo metía evidencia un viewport ADENTRO del hero. */
html:not(.con-anim) #evidencia{height:auto;margin-top:0;z-index:auto}
html:not(.con-anim) .ev-pin{position:static;height:auto;padding-block:12vh}
/* Fuera del pin, esta banda oscura de 180px quedaba flotando sobre la grilla. */
html:not(.con-anim) .ev-pin::before{display:none}

/* Piezas que existen solo para la animación. La apertura con forma de R se
   queda cerrada tapando 260vmax si nadie la abre. */
html:not(.con-anim) .ev-cover,
html:not(.con-anim) .morph-r,
html:not(.con-anim) .ev-rail,
html:not(.con-anim) .ev-veil,
html:not(.con-anim) .q-rail{display:none}

/* .ev-case es el caso Tecnosim: nace en opacity:0 y pointer-events:none.
   Sin pointer-events:auto no se podía ni seleccionar el texto. */
html:not(.con-anim) .ev-say,
html:not(.con-anim) .ev-case{position:static;opacity:1;pointer-events:auto}
/* El padding de arriba está calculado para cuando la sección es una ventana
   fija; apilada en flujo deja un agujero de casi un cuarto de pantalla. */
html:not(.con-anim) .ev-say{padding-top:clamp(28px,4vw,56px)}
html:not(.con-anim) .ev-case{padding-top:clamp(28px,3vw,48px)}

/* LA QUE FALTABA, Y ERA LA PEOR. La grilla es `position:absolute` con
   `grid-template-rows:repeat(4,1fr)`. Al pasarla a `static` el alto queda
   indefinido, los `1fr` se resuelven contra max-content y las celdas son
   <div> vacíos: las cuatro filas colapsaban a cero. Medido en el sitio de
   hoy: la grilla entera 96px de alto, cada celda 12px, 1 de 21 visible.
   La sección 02 no quedaba degradada, quedaba vacía. */
html:not(.con-anim) .ev-grid{position:static;height:auto;opacity:1;
  grid-template-rows:none;grid-auto-rows:auto}
html:not(.con-anim) .ev-grid .cell{clip-path:none;aspect-ratio:4/3}
/* Las otras dos declaraciones de `grid-template-rows` viven en @media, pero un
   @media no sube la especificidad: la regla de arriba, con `html:not(...)`,
   les gana a las tres. No hacen falta reglas por breakpoint. */

html:not(.con-anim) #metodo{height:auto}
html:not(.con-anim) .q-pin{position:static;min-height:0}
html:not(.con-anim) .q-out{opacity:1}
/* Los <b> nacían en #f5f5f21c: 11% de opacidad sobre fondo casi negro,
   1,37:1 de contraste. La raya se muestra puesta, que es lo que significa
   la lista: son las cosas que el visitante deja de hacer. */
html:not(.con-anim) .drops li b{color:var(--ink-1);background-size:100% 1.18em}
html:not(.con-anim) .extrude{transform:none}

/* LA OTRA QUE FALTABA. La cinta de clientes mide unos 6.300px de ancho y se
   mueve por transform. Sin el tween, `overflow:hidden` recortaba 22 clientes
   a los 4 o 5 que entran en pantalla y no había forma de llegar al resto.
   Con scroll horizontal se pueden ver todos con el dedo o con la rueda. */
html:not(.con-anim) .track{animation:none;transform:none}
html:not(.con-anim) .marquee{overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* La máscara desvanece los bordes: una barra de scroll ahí queda cortada. */
  -webkit-mask-image:none;mask-image:none}
html:not(.con-anim) .marquee::-webkit-scrollbar{display:none}


/* ── Sin JavaScript ────────────────────────────────────────────────────
   Distinto de `con-anim`: acá el JS directamente no corre. El menú, los
   socios, las frases y el formulario andan perfecto con JS y sin GSAP, así
   que no pueden colgar de la misma clase. */

/* La banda del header se la pone el JS al scrollear. Sin JS nunca llegaba, y
   sobre la sección clara del formulario quedaba texto blanco sobre #F5F5F2. */
html:not(.js) header::before{opacity:1}

/* Debajo de 960px la única navegación es el botón "Menú", y sin JS no hace
   nada: el overlay tiene el atributo hidden y nadie se lo saca.
   Se esconde el botón muerto. Devolver la nav de escritorio a la barra NO
   sirve: medido a 375px, el scrollWidth se va a 519 contra 390 de viewport y
   "Contacto" —el único link al formulario— queda cortado por el borde. En una
   página de una sola columna la navegación es el scroll, y el CTA del header,
   que es un ancla y anda sin JS, lleva al formulario. */
html:not(.js) .menu-btn{display:none}
@media(max-width:720px){
  /* el CTA del header está oculto a <=720 porque vivía dentro del menú */
  html:not(.js) .bar > .right > .btn-solid{display:inline-flex;height:38px;
    min-width:0;padding-inline:16px;font-size:14px}
}
@media(min-width:721px) and (max-width:960px){
  html:not(.js) nav.main{display:flex;gap:14px;font-size:13px}
  html:not(.js) nav.main a{font-size:13px}
}

/* Las dos cintas de clientes salen del array del JS: sin JS la sección queda
   con el título y dos rieles vacíos. Nadie anuncia trabajos que no están. */
html:not(.js) .bts{display:none}

/* El <video> del hero recibe src y poster por JS (hay tres montajes y se baja
   uno solo). Sin JS queda un reproductor pelado: se esconde y aparece el
   fotograma, que es exactamente lo que el video iba a mostrar primero. */
html:not(.js) .media video{display:none}
html:not(.js) .media{background-image:url(/media/poster-h.jpg);
  background-size:cover;background-position:center}
@media (orientation:portrait) and (max-width:900px){
  html:not(.js) .media{background-image:url(/media/poster-v.jpg)}
}

/* Las 21 fotos de trabajos se pintan por JS al acercarse, para no bajar 1,4 MB
   antes de que nadie llegue. Sin JS quedaban 21 rectángulos vacíos: peor que
   no estar. El caso Tecnosim y la frase de la sección siguen contando lo mismo. */
html:not(.js) .ev-grid{display:none}

/* Los logos de marca son <span> vacíos que se llenan por fetch. Sin JS el
   header se queda sin logo y el pie sin el nombre de la marca. Misma pieza,
   por máscara, tomando el color del contexto. Se apagan solas cuando el JS
   mete el <svg> adentro, porque dejan de ser :empty. */
/* Mismo alto que la regla base (24px, o 20 en mobile): si acá se declara un
   ancho fijo con aspect-ratio, el alto de la base gana, el ancho no, y el
   isologo aparece corrido hasta que el fetch mete el SVG. Se deja que el ancho
   salga del alto. */
.brand .lg:empty{display:block;width:auto;aspect-ratio:155/90;background:currentColor;
  -webkit-mask:url(/brand/svg/logo-r3-focus.svg) center/contain no-repeat;
  mask:url(/brand/svg/logo-r3-focus.svg) center/contain no-repeat}
footer .wm:empty{display:block;aspect-ratio:561/120;background:currentColor;
  -webkit-mask:url(/brand/svg/wordmark-resulthree.svg) left center/contain no-repeat;
  mask:url(/brand/svg/wordmark-resulthree.svg) left center/contain no-repeat}
.quote .qm:empty{display:block;aspect-ratio:180/160;background:currentColor;
  -webkit-mask:url(/brand/svg/shape-quotes.svg) center/contain no-repeat;
  mask:url(/brand/svg/shape-quotes.svg) center/contain no-repeat}


/* ── aspect-ratio: la única que no se puede resolver por declaración doble ──
   `height:auto` es válido en todos los motores, así que pisaría el fallback
   también donde hace falta. Acá sí hace falta la compuerta.
   Si `aspect-ratio` se descarta, estos tres colapsan a alto 0: las dos cintas
   de clientes, las 21 celdas de trabajos y las tres fotos de socios. */
@supports not (aspect-ratio: 4 / 3) {
  .track .cell{height:clamp(150px,14.25vw,217px)}
  html:not(.con-anim) .ev-grid .cell{height:0;padding-bottom:75%}
  .fnd-media{height:0;padding-bottom:125%}
  .fnd-media > .fnd-shot{position:absolute;top:0;right:0;bottom:0;left:0}
  .brand .lg:empty{width:41px}   /* 24px de alto por 155/90 */
  footer .wm:empty{height:auto;min-height:26px}
  .quote .qm:empty{height:clamp(34px,3vw,48px)}
}

/* Los 18 :hover sueltos: en pantalla táctil se disparaban al tocar y quedaban
   pegados. Solo aplican donde hay puntero fino. */
@media(hover:hover) and (pointer:fine){
  .brand:hover .lg{transform:translateY(-2px)}
  nav.main a:hover{opacity:1}
  /* A esta regla le faltaba el bloque {}: el parser la unía con la línea
     siguiente y se comía el hover del selector de idioma. Bug viejo. */
  nav.main a:hover::after{transform:scaleX(1)}
  .lang a:not([aria-current]):hover{opacity:1;color:var(--focus)}
  .btn-focus:hover{background:#F67C1F;background:color-mix(in srgb,var(--focus) 88%,#fff)}
  .menu-btn:hover{color:var(--focus)}
  .menu-ov nav a:nth-child(odd):hover{color:var(--pulse)}
  .menu-ov nav a:nth-child(even):hover{color:var(--focus)}
  .menu-ov nav a:hover .sq{transform:scale(1.5)}
  .in:hover{border-bottom-color:var(--ink-4c)}
  .f-send .wa:hover{color:var(--focus-ink);border-bottom-color:var(--focus)}
  .ft-col a:hover{color:var(--focus)}
  .say-next:hover .lbl{color:#fff}
  .say-next:hover .lbl::after{transform:scaleX(1)}
  .ev-case .url:hover{color:var(--pulse)}
  .wsp:hover{transform:translateY(-2px)}
  .wsp-tip .x:hover{color:var(--base)}
  nav.main a:hover::after{transform:scaleX(1)}
}