/* =====================================================================
   NEURAL STUDIO - Rediseño "clean" (borrador 2026-07-22)
   Blanco casi puro / negro casi absoluto / azul de marca solo en CTAs.
   Radios: 0 en todo, salvo los botones .btn (5px), que llevan las puntas
   apenas redondeadas.
   Compartido por nueva-home.html y las páginas nueva-*.html
   ===================================================================== */:root{
  --blanco: #FDFDFC;                /* blanco casi puro (fondo) */
  --negro:  #0B0B0D;                /* negro casi absoluto (texto y banda contacto) */
  --azul:   #3D50E6;                /* azul de marca: SOLO botones y acentos */
  --azul-h: #2F41D4;                /* hover del azul */
  --gris:   #55565C;                /* texto secundario sobre blanco */
  --linea:  rgba(11,11,13,.12);     /* hairline sobre blanco */
  --linea-b:rgba(253,253,252,.16);  /* hairline sobre oscuro */
  --maxw: 1180px;
  --pad-x: clamp(20px,5vw,56px);
  --ease: cubic-bezier(.16,1,.3,1);

  /* --- rediseño 2026-09: lenguaje de bloques --- */
  --bloque:34px;              /* radio de los bloques grandes */
  --sep:10px;                 /* aire entre bloques */
  --gris-1:#EBEBEA;
  --gris-2:#C9C9C6;
  --tinta:#0E0E10;
  --naranja:#FC6521;          /* el de la foto del hero */
  --naranja-h:#E8540F;
  --marca:#3D50E6;            /* el azul del sitio */
  --sobre-acento:#fff;        /* el texto que va encima del bloque de acento */
  /* el CTA: naranja con letra negra, que es como se tratan los botones */
  --cta:#FC6521;
  --cta-h:#E8540F;
  --sobre-cta:#0E0E10;
}
*,
*::before,
*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:68px; }
body{
  margin:0; background:var(--blanco); color:var(--negro);
  overflow-x:clip;   /* evita scroll lateral transitorio por los reveals direccionales */
  font-family:"Geist",system-ui,sans-serif;
  font-size:clamp(15px,.35vw + 14px,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,
h2,
h3{ margin:0; font-weight:500; letter-spacing:-.02em; line-height:1.12; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
/* etiqueta en versalitas espaciadas (firma tipográfica de la referencia) */
.caps{ text-transform:uppercase; letter-spacing:.22em; font-weight:400; }
/* ---------- Botón: rectangular, azul, letras blancas ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--azul); color:#fff;
  font-family:"Geist"; font-weight:500; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.18em;
  padding:19px 38px; border:0; border-radius:5px; cursor:pointer; white-space:nowrap;
  transition:background .2s, transform .2s var(--ease);
}
.btn:hover{ background:var(--azul-h); }
.btn:active{ transform:translateY(1px); }
/* ============================ NAV ============================ */
.nav{
  position:sticky; top:0; z-index:60; height:68px;
  background:var(--blanco); border-bottom:1px solid var(--linea);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav__logo{ display:inline-flex; align-items:baseline; gap:10px; }
.nav__logo img{ height:20px; width:auto; }
.nav__logo span{
  font-family:"Poppins",system-ui,sans-serif; font-weight:500; text-transform:lowercase;
  font-size:23px; letter-spacing:-.005em; line-height:1; color:var(--negro);
}
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a:not(.btn){ font-size:.93rem; font-weight:500; color:var(--negro); opacity:.78; transition:opacity .2s; }
.nav__links a:not(.btn):hover{ opacity:1; }
.nav__links .btn{ padding:13px 24px; }
.burger{ display:none; background:none; border:0; width:44px; height:44px; padding:10px; cursor:pointer; }
.burger span{ display:block; height:2px; background:var(--negro); margin:5px 0; }
.menu{
  display:none; position:fixed; inset:68px 0 auto 0; z-index:59;
  background:var(--blanco); border-bottom:1px solid var(--linea);
  flex-direction:column; padding:10px var(--pad-x) 28px;
}
.menu.is-open{ display:flex; }
.menu a:not(.btn){ font-size:1.15rem; font-weight:500; padding:14px 0; border-bottom:1px solid var(--linea); }
.menu .btn{ margin-top:20px; align-self:flex-start; }
/* ============================ HERO (home, con imagen) ============================ */
.hero{ position:relative; min-height:calc(100dvh - 68px); display:flex; align-items:center; overflow:hidden; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; }
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 55% at 52% 46%, rgba(253,253,252,.88), rgba(253,253,252,.28) 78%, rgba(253,253,252,0));
}
.hero__content{ position:relative; width:100%; text-align:center; padding:72px var(--pad-x); transform:translateY(4vh); }
.hero h1{
  /* el peso lo pone la regla de titulares del rediseño (h1,h2 -> 300).
     Fijarlo aqui la pisaba: ".hero h1" es mas especifico que "h1". */
  font-size:clamp(1.9rem,4.1vw,3.2rem);
  text-transform:uppercase; letter-spacing:.015em; line-height:1.18;
  max-width:28ch; margin-inline:auto; text-wrap:balance;
}
.hero__sub{
  margin:24px auto 40px; font-size:clamp(.95rem,1.3vw,1.08rem); color:var(--negro);
  max-width:58ch; line-height:1.7;
}
/* ---------- Hero de página de servicio (misma foto del hero principal, más compacto) ---------- */
.hero--svc{ min-height:0; padding:clamp(96px,12vw,150px) 0; }
.hero--svc .hero__content{ padding:0 var(--pad-x); }
.hero--svc .hero__sub{ margin-bottom:36px; }
/* ============================ SECCIONES ============================ */
.section{ padding:clamp(84px,10vw,132px) 0; }
.section__head{ margin-bottom:clamp(44px,6vw,72px); }
.section__head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); text-wrap:balance; }
.section__head .sub{ color:var(--gris); margin-top:18px; max-width:58ch; }
.section__head--center{ text-align:center; }
.section__head--center h2{ max-width:26ch; margin-inline:auto; }
.section__head--center .sub{ margin-inline:auto; }
/* ---------- Servicios (home): columnas a los costados + imagen central,
              cada servicio con su cuadrado azul desplazado (referencia offset-frame) ---------- */
.svcs{ display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:clamp(32px,4.5vw,64px); align-items:stretch; }
.svcs__col{ display:flex; flex-direction:column; justify-content:space-between; gap:clamp(52px,6.5vw,84px); }
/* disposición calcada de la referencia: título arriba, texto, "Leer más" como botón discreto *//* ".svc h3" se fue entera: en el rediseño todos los h3 de servicios llevan
   .svc__tit, que trae tamaño Y margenes. Al ser mas especifica que .svc__tit,
   esta regla los pisaba -- 2px de mas por servicio, 10 en la seccion. */
.svc p{ color:var(--gris); font-size:.95rem; }
.svc-link{
  display:inline-block; margin-top:20px;
  padding:10px 20px; border:1px solid var(--azul); border-radius:5px;
  font-size:.72rem; font-weight:500; color:var(--azul);
  text-transform:uppercase; letter-spacing:.16em;
  transition:background .2s, color .2s;
}
.svc-link:hover{ background:var(--azul); color:#fff; }
/* la imagen llena exactamente la altura de las columnas: arriba con los títulos, abajo con los CTAs */
.svcs__media{ position:relative; }
.svcs__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* ---------- Bandas azules ---------- */
.banda{ background:var(--azul); color:#fff; }
.banda .section__head h2{ font-weight:500; }
.banda .section__head .sub{ color:rgba(255,255,255,.82); }
/* ---------- Manifiesto + datos (banda azul del home) ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px 36px; margin-top:clamp(48px,6vw,72px); text-align:center; }
.stat b{ display:block; font-size:clamp(2.4rem,4.6vw,3.6rem); font-weight:600; letter-spacing:-.03em; line-height:1; }
.stat p{ margin-top:14px; font-size:.88rem; color:rgba(255,255,255,.82); line-height:1.55; }
/* el titular del manifiesto es largo: más ancho de línea para que caiga en dos líneas */
.banda .section__head--center h2{ max-width:42ch; }
/* banda propuesta: compacta, sin aire de relleno.
   Va con .section a proposito: por ID solo, esta regla (1,0,0) le ganaba a
   .prop (0,1,0) y le metia 84px de padding arriba y abajo a la propuesta
   nueva de marketing-digital, que es un bloque flotante y no una banda.
   Aqui describe la seccion del diseño VIEJO, que es la de planes.html. */
#propuesta.section{ padding:clamp(56px,6.5vw,84px) 0; }
#propuesta .section__head{ margin-bottom:clamp(28px,3.5vw,40px); }
/* nota al pie de la banda: sin recuadro, centrada en el ancho de la página */
.banda .btn{ background:#fff; color:var(--azul); margin-top:clamp(24px,3vw,36px); }
.banda .btn:hover{ background:rgba(255,255,255,.9); }
/* ---------- Portafolio: split, copy a la izquierda + navegador falso a la derecha ----------
   Sección blanca (va entre la banda azul de propuesta y el CTA final).
   Sin media query: auto-fit apila a 1 columna bajo ~660px de ancho de fila. */
#portafolio{ padding-top:clamp(42px,5vw,66px); }
#portafolio .section__head h2{ max-width:none; font-size:clamp(1.6rem,3.52vw,2.56rem); }
#portafolio .section__head .sub{ font-size:1.08rem; }
#portafolio .section__head{ margin-bottom:clamp(24px,3vw,36px); }
@keyframes portafolio-vibra{
  0%, 92%, 100%{ transform:translateX(0); }
  93%{ transform:translateX(-3px); }
  94%{ transform:translateX(3px); }
  95%{ transform:translateX(-3px); }
  96%{ transform:translateX(3px); }
  97%{ transform:translateX(-2px); }
  98%{ transform:translateX(2px); }
  99%{ transform:translateX(0); }
}
/* ---------- Footer: blanco y limpio ---------- */
.footer{ background:var(--blanco); color:var(--negro); padding:clamp(38px,4.2vw,52px) 0 22px; }
/* el <p> de descripcion del pie se fue con el rediseño: ahora ahi va el lema,
   que trae su propio tamaño. Esta regla le ganaba por ser mas especifica. */
/* variante azul del footer (páginas de servicio) */
/* ============================ REVEAL ============================
   Fade-in escalonado estilo referencia: lento, suave, casi sin
   desplazamiento, con cascada bien espaciada entre elementos. */
.r{ opacity:0; transform:translateY(14px); transition:opacity 1.1s ease-out, transform 1.1s var(--ease); transition-delay:calc(var(--d,0s)*2); }
/* variantes direccionales (referencia): izquierda / derecha / desde abajo */
.r--left{ transform:translateX(-36px); }
.r--right{ transform:translateX(36px); }
.r--up{ transform:translateY(44px); }
.r.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){html{ scroll-behavior:auto; }
.r{ opacity:1; transform:none; transition:none; }}
/* ============================ RESPONSIVE ============================ */

@media (max-width:940px){.stats{ grid-template-columns:1fr 1fr; }
/* móvil: la imagen pasa al fondo de TODA la sección de servicios,
     de borde a borde de la pantalla (cualquier ancho), con capa clara
     encima para no robarle visibilidad al texto */
#servicios{ position:relative; isolation:isolate; }
#servicios::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:rgba(253,253,252,.94);
  }
/* sobre la foto de fondo el gris pierde contraste: los párrafos van en negro */
#servicios .svc p,
#servicios .section__head .sub{ color:var(--negro); }
.svcs{ grid-template-columns:1fr; }
.svcs__media{ display:contents; }
/* sin caja propia: la imagen se ancla a la sección completa */
.svcs__img{
    position:absolute; inset:0; z-index:-2;
    width:100%; height:100%; max-width:none; margin:0;
    object-fit:cover;
  }}
@media (max-width:760px){.nav__links{ display:none; }
.burger{ display:block; }
.hero{ min-height:72dvh; }
.hero--svc{ min-height:0; }
.hero__veil{ background:rgba(253,253,252,.62); }}
@media (max-width:520px){.stats{ grid-template-columns:1fr; gap:36px; }}
/* =====================================================================
   REDISEÑO 2026-09 — lenguaje de bloques
   Portado del laboratorio. Va al final a proposito: reescribe lo de
   arriba, igual que hacia css/lab.css cuando eran dos hojas.
   ===================================================================== *//* ---------- tipografia: se va el uppercase de todo ---------- */
.btn,
.svc-link,
.caps{
  text-transform:none; letter-spacing:0;
}
h1,
h2,
.stat b{ font-weight:300; letter-spacing:-.025em; }
h3{ font-weight:400; }
/* ---------- botones pildora, texto normal ---------- */
.btn{
  border-radius:999px; padding:17px 32px; font-size:.98rem; font-weight:400;
}
.svc-link{
  border-radius:999px; font-size:.9rem; padding:11px 24px;
}
/* ---------- NAV: pildora flotante de color ---------- */
.nav{
  height:auto; padding:13px 14px 13px 30px; border:0;
  margin:var(--sep) auto 0; width:calc(100% - var(--sep)*2);
  border-radius:999px; background:var(--azul); color:var(--sobre-acento);
  top:var(--sep);
}
.nav .wrap{ max-width:none; padding-inline:0; }
.nav__logo span,
.nav__links a:not(.btn){ color:inherit; }
.nav__links .btn{
  background:var(--tinta); color:#fff; padding:12px 26px;
}
.burger span{ background:var(--sobre-acento); }
.menu{
  inset:76px var(--sep) auto; border:0; border-radius:var(--bloque);
  background:var(--gris-1); padding:18px 26px 30px;
}
/* ---------- HERO: bloque de texto y foto, uno al lado del otro ---------- */
.hero{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--sep);   /* texto 40% / foto 60% */
  padding:var(--sep); align-items:stretch;
  /* el hero cabe en una pantalla: la pildora de nav mide 76px + 10 de margen.
     Sin esta altura, la foto (vertical 3:4) pide ~860px por si sola y estira
     todo el bloque, obligando a hacer scroll para ver el hero completo. */
  height:calc(100dvh - 86px); min-height:430px;
}
.hero__img{
  position:relative; inset:auto; order:2;
  width:100%; height:100%; min-height:min(66vh,560px);
  border-radius:var(--bloque); object-position:center;
}
.hero__veil{ display:none; }
.hero__content{
  order:1; transform:none; text-align:left;
  background:var(--gris-1); border-radius:var(--bloque);
  padding:clamp(30px,3.6vw,58px) clamp(30px,3.6vw,58px) clamp(32px,3.6vw,56px);
  display:flex; flex-direction:column; justify-content:flex-end;
  container-type:inline-size;
}
.hero h1{
  text-transform:none; max-width:none; margin-inline:0;
  /* Titular imponente, como la referencia: manda el ancho de la tarjeta
     (14cqw sobre el contenido de .hero__content), con un tope por ALTURA
     (7.2vh) para que las tres frases sigan cabiendo dentro del hero, que
     tiene alto fijo. Sin ese tope, en pantallas bajas el texto se sale del
     bloque gris por arriba. */
  font-size:clamp(1.62rem, min(11.97cqw, 8.04vh), 5.99rem);
  line-height:1.0; letter-spacing:-.03em;
  /* nueva.css trae text-wrap:balance, que reparte las lineas parejas y deja
     huecos al final. Aqui cada linea se llena hasta el borde, como en Wix. */
  text-wrap:wrap;
}
/* cada frase del titular en su propia linea: el punto marca el corte */
.hero h1 span{ display:block; }
.hero__sub{
  margin:18px 0 26px; max-width:44ch; font-size:.93rem; color:#4A4A50;
  line-height:1.6;   /* nueva.css trae 1.7: con 4-5 lineas era demasiado alto */
}
/* ---------- HERO de las paginas de servicio ----------
   Hereda el bloque del home (tarjeta gris + foto redondeada, lado a lado).
   Hace falta la clase porque .hero--svc, del diseño viejo, quita el padding
   lateral y deja la foto pegada a los bordes de la ventana.
   Va con clase propia y no dentro de .hero--svc para no mover todavia las
   otras tres internas: cuando les toque, se les añade y esto se funde. */
.hero--svc.hero--bloque{
  padding:var(--sep); min-height:430px;
}
.hero--svc.hero--bloque .hero__content{
  padding:clamp(30px,3.6vw,58px);
}
/* el titular de la interna es UNA frase, no las seis lineas del home: con el
   clamp de alla (11.97cqw) se comia la tarjeta entera */
.hero--svc.hero--bloque h1{
  font-size:clamp(1.7rem, 6.6cqw, 3.1rem);
}
/* Titular de dos palabras apiladas: la categoria usada como marca, al ancho
   de la tarjeta (manda 19cqw, con tope por ALTURA para que las dos lineas y
   la bajada sigan cabiendo en el hero). La segunda palabra va en naranja,
   igual que los verbos del titular del home. */
.hero--svc.hero--bloque h1.hero__tit-xl{
  /* "Marketing" mide 4,27em: a 22,8cqw llena el ancho de la tarjeta dejando
     un 2,5% de aire, que es como se trata el titular del home (la linea va
     hasta el borde). El tope en vh es para que las dos lineas, el lema y el
     boton sigan cabiendo en pantallas bajas. */
  /* --tit-cqw lo calibra cada pagina a SU palabra: 22,8 llena la tarjeta con
     "Marketing" (4,27em); una palabra mas larga necesita menos. */
  font-size:clamp(2.4rem, min(var(--tit-cqw, 22.8cqw), 14.5vh), 8.8rem);
}
/* La segunda palabra va por debajo de la primera, no a la par. El tamaño es
   variable porque depende de las dos palabras: .78 vale para "Marketing /
   Digital", pero "Business" es mas larga que "Google" y a ese tamaño las dos
   lineas salian igual de anchas, sin jerarquia. */
.hero__tit-xl span:last-child{ font-size:var(--tit2,.78em); color:var(--naranja); }
/* Bajo la marca, el titular que antes encabezaba la pagina: mismo aire de
   titular (peso 300, sin versalitas) en negro, pero a un tamaño que no
   compita con las dos palabras de arriba. */
.hero__lema{
  margin:clamp(16px,2vw,24px) 0 0; color:var(--tinta);
  /* En UNA linea, y por eso el tamaño lo manda el ancho de la tarjeta y no
     un valor fijo: la frase mide 18,6em de largo, asi que el techo antes de
     partirse son 5,37cqw. 5,05 deja el margen que necesita el fallback de la
     tipografia mientras Geist carga. Si se ensancha la tarjeta, sube solo. */
  font-size:clamp(.95rem, 5.05cqw, 2.4rem);
  font-weight:400; line-height:1.2; letter-spacing:-.025em;
  white-space:nowrap;
}
.hero__lema + .hero__sub{ margin-top:14px; }
/* Cuando la frase es demasiado larga para una linea a un tamaño legible
   (64 caracteres en desarrollo-web contra 41 en marketing), envuelve en dos y
   se queda en el cuerpo del lema de una linea, sin crecer con la pantalla. */
.hero__lema--largo{
  white-space:normal; max-width:30ch; text-wrap:pretty;
  font-size:clamp(.95rem, 5.05cqw, 1.6rem);
}
/* ---------- SECCIONES: bloques que flotan, no bandas a sangre ---------- */
.section{ padding:clamp(52px,6vw,84px) 0; }
.section.banda{
  margin-inline:var(--sep); border-radius:var(--bloque);
  padding:clamp(48px,6vw,86px) 0;
  /* el mismo hueco que separa el hero de la mini-seccion. Sin el, las bandas
     se tocan con el bloque de arriba y dos grises seguidos se funden en uno */
  margin-top:var(--sep);
}
.section__head--center{ text-align:left; }
.section__head h2{
  max-width:18ch; margin-inline:0; font-size:clamp(2rem,4.2vw,3.2rem);
}
.section__head .sub{ margin-inline:0; }
/* ---------- SOBRE NOSOTROS: mini-seccion de tres bloques ----------
   Calcada de la referencia: un tercio suelto y dos tercios partidos por una
   linea. Los colores son FIJOS y no siguen la variante -- la primera tarjeta
   naranja y el par azul de marca en las dos, por decision del usuario. Es una banda BAJA a proposito (264px sobre 1265 de
   ancho medidos en la referencia, o sea ~21vw) y va a sangre, con el mismo
   margen lateral que el hero. La seccion no existe en index.html: la inyecta
   lab-build.py. ------------------------------------------------------- */
.quienes{ display:none; }
.quienes{ display:block; padding-top:var(--sep); }
.quienes__grid{
  display:grid; grid-template-columns:1fr 2fr; gap:var(--sep);
  margin-inline:var(--sep);
}
/* el par gris es UN bloque: el radio va por fuera y dentro solo hay una linea,
   sin hueco entre las dos columnas. Asi esta en la referencia. */
.quienes__par{
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--marca); color:#fff; border-radius:var(--bloque);
}
.quienes__par .quienes__b + .quienes__b{
  border-left:1px solid rgba(255,255,255,.28);
}
.quienes__b{
  padding:clamp(24px,2.8vw,38px) clamp(26px,3.4vw,46px);
}
.quienes__b--acento{
  background:var(--naranja); color:var(--tinta); border-radius:var(--bloque);
}
.quienes h2,
.quienes h3{
  font-size:clamp(1.15rem,1.72vw,1.5rem); font-weight:400;
  letter-spacing:-.01em; margin-bottom:11px;
}
.quienes p{
  font-size:.93rem; line-height:1.42; color:inherit; max-width:44ch;
}
.quienes b{ font-weight:500; }
/* ---------- SERVICIOS ----------
   Una sola disposicion, la de la referencia: bloque de texto con el CTA abajo
   + bloque negro con los cuatro servicios en lista. El mosaico de cajas de
   color se descarto el 2026-08-29, con el que se fue el eje "svcs" del panel.
   ------------------------------------------------------------------ */
.svcs,
.svcs__col{ gap:var(--sep); }
.svcs__img{ border-radius:var(--bloque); }
.svc-link{
  align-self:flex-start;
  background:var(--naranja); border-color:var(--naranja); color:var(--tinta);
}
.svc-link:hover{
  background:var(--naranja-h); border-color:var(--naranja-h); color:var(--tinta);
}
/* nombre del servicio con su icono, encima del titular de beneficio.
   Los dos los inyecta lab-build.py, asi que fuera del lab no existen. */
.svc__tag,
.svc__ico{ display:none; }
.svc__tag{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(.9rem,1.25vw,1rem); color:inherit;
}
/* el icono va SIEMPRE naranja, como los de la referencia y como la primera
   tarjeta de la mini-seccion: no sigue la variante de color */
.svc__ico{
  display:grid; place-items:center; flex:none;
  width:48px; height:48px; border-radius:13px;
  background:var(--naranja); color:var(--tinta);
}
.svc__tit{
  font-size:clamp(1.45rem,2.35vw,2rem); font-weight:400;
  letter-spacing:-.02em; margin:26px 0 14px;
}
/* ---------- MANIFIESTO: rotador de datos ----------
   Diseno del usuario (Claude Design, Downloads/hero-1c.html), adaptado al
   sistema del lab: su fuente Archivo pasa a la Geist del sitio, su azul
   #3d46e4 al #3D50E6 de marca, su negro #111 a --tinta, y la seccion deja de
   ir a sangre para ser un bloque con radio y margen como las demas.
   ------------------------------------------------------------------ *//* .section.rot y no solo .rot: la regla de .section.banda lleva dos clases y
   con una sola le ganaba, asi que el padding de banda seguia dejando 77px de
   negro por arriba y por abajo. Aqui el padding lo ponen las filas. */
.section.rot{
  background:var(--tinta); color:#fff;
  padding:0;
  overflow:hidden;                            /* la barra de progreso llega al borde */
}
.rot .wrap{
  max-width:none; padding:0;
}
/* la fuente de datos no se pinta. El atributo hidden no basta: el
   ".stats{display:grid}
" de nueva.css tiene la misma especificidad y va
   despues, asi que le gana. */
.rot .stats{ display:none; }
/* ---- arriba: titular a la izquierda, pestanas a la derecha ---- */
.rot__top{
  padding:clamp(34px,4vw,54px) clamp(30px,3.6vw,60px) 0;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(24px,3vw,40px); flex-wrap:wrap;
}
.rot__top h2{
  margin:0; max-width:22ch; font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.15;
  letter-spacing:-.02em; text-wrap:pretty;
}
.rot__tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.rot__tabs .tab{
  font:500 .93rem/1 inherit; padding:11px 15px;
  border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.24); background:none; color:rgba(255,255,255,.6);
  transition:color .2s, border-color .2s, background .2s;
}
.rot__tabs .tab:hover{ color:#fff; border-color:rgba(255,255,255,.5); }
.rot__tabs .tab[aria-selected="true"]{
  background:var(--marca); border-color:var(--marca); color:#fff;
}
/* ---- abajo: el numero gigante y su texto ---- */
.rot__body{
  padding:8px clamp(30px,3.6vw,60px) clamp(34px,4vw,56px);
  display:grid; grid-template-columns:1fr minmax(0,420px);
  align-items:end; gap:clamp(28px,3.4vw,48px);
}
.rot__figure{
  margin:0; font-weight:500; color:var(--marca);
  /* 260px sobre los 1440 del diseno original */
  font-size:clamp(5rem,18vw,16.25rem); line-height:.82; letter-spacing:-.06em;
}
.rot__copy{ padding-bottom:22px; }
.rot__rule{ display:block; height:2px; width:64px; background:var(--marca); margin-bottom:20px; }
.rot__text{
  margin:0; font-weight:400; font-size:clamp(1rem,1.4vw,1.3rem);
  line-height:1.4; text-wrap:pretty; color:#fff;
}
.rot__tag{
  margin:22px 0 0; font-weight:500; font-size:.7rem; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.42);
}
.rot__progress{ height:4px; background:rgba(255,255,255,.1); }
.rot__progress span{ display:block; height:100%; width:0; background:var(--marca); transition:width .4s; }
/* el cambio de dato entra con un fundido corto */
.rot-fade{ animation:rot-fade .35s ease; }
/* ---- variante del rotador para las paginas de servicio ----
   La misma pieza del manifiesto con tres cambios: una bajada bajo el titular,
   las pestañas nombran el paso (no la cifra) y el pie es un parrafo, no la
   etiqueta en versalitas. */
.rot__intro{ max-width:32ch; }
.rot__lede{
  margin:14px 0 0; font-size:.95rem; line-height:1.5;
  color:rgba(255,255,255,.55); text-wrap:pretty;
}
/* la fuente de datos no se pinta: la lee el JS. Ver .rot .stats, mismo caso. */
.rot__fuente{ display:none; }
/* con varias filas de pestañas, las de abajo se apilan contra el margen
   derecho y no contra el centro del hueco */
.rot--servicios .rot__tabs{ justify-content:flex-end; max-width:420px; }
.rot--servicios .rot__text{
  font-size:clamp(1.25rem,2vw,1.85rem); line-height:1.15; letter-spacing:-.025em;
}
.rot--servicios .rot__tag{
  margin:14px 0 0; font-size:1.05rem; font-weight:400; line-height:1.45;
  letter-spacing:0; text-transform:none; color:rgba(255,255,255,.72);
}
/* ---------- PROPUESTA: bloque naranja + acordeon sobre gris ----------
   Diseño del usuario en Claude Design. Sustituye a los tres grupos sueltos
   sobre banda azul. Colores y radios son los del sitio, no los del boceto.
   -------------------------------------------------------------------- */
.prop{ margin:var(--sep); padding:0; }
.prop__grid{
  display:grid; grid-template-columns:minmax(0,400px) 1fr; gap:var(--sep);
  align-items:stretch;
}
.prop__aside{
  background:var(--naranja); color:var(--tinta);
  border-radius:var(--bloque); padding:clamp(32px,3.2vw,44px) clamp(26px,3vw,40px);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(24px,2.4vw,32px);
}
.prop__eyebrow{
  margin:0; font-weight:500; font-size:.75rem; line-height:1;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(0,0,0,.55);
}
.prop__claim{
  margin:0; font-weight:400; font-size:clamp(1.7rem,2.8vw,2.5rem);
  line-height:1.1; letter-spacing:-.03em; text-wrap:pretty;
}
.prop__invite{
  margin:0; font-size:.95rem; line-height:1.5; color:rgba(0,0,0,.68);
  max-width:30ch; text-wrap:pretty;
}
.prop__main{
  background:var(--gris-1); border-radius:var(--bloque);
  padding:clamp(32px,3.4vw,48px) clamp(26px,3.1vw,44px) clamp(28px,2.8vw,40px);
}
.prop__title{
  margin:0; max-width:24ch; font-weight:400; font-size:clamp(1.6rem,2.7vw,2.38rem);
  line-height:1.1; letter-spacing:-.02em; text-wrap:pretty;
}
.prop__lede{
  margin:16px 0 0; max-width:52ch; font-size:.95rem; line-height:1.55;
  color:rgba(14,14,16,.6); text-wrap:pretty;
}
/* ---- el acordeon ---- */
.acc{ margin-top:clamp(24px,2.4vw,34px); }
.acc__row{ border-top:1px solid rgba(14,14,16,.16); }
.acc__head{
  display:flex; align-items:baseline; gap:22px; width:100%;
  background:none; border:0; padding:22px 0; cursor:pointer;
  text-align:left; font-family:inherit; color:inherit;
}
.acc__num{ font-size:1.31rem; line-height:1; color:var(--naranja); }
.acc__title{
  font-size:clamp(1.05rem,1.5vw,1.38rem); line-height:1.2;
  letter-spacing:-.02em; transition:color .18s;
}
.acc__sign{
  margin-left:auto; font-size:1.25rem; line-height:1; display:inline-block;
  color:rgba(14,14,16,.4); transition:transform .24s ease, color .18s;
}
.acc__row[data-open="true"] .acc__title,
.acc__row[data-open="true"] .acc__sign{ color:var(--naranja); }
.acc__row[data-open="true"] .acc__sign{ transform:rotate(45deg); }
.acc__body{
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), opacity .24s;
}
.acc__row[data-open="true"] .acc__body{ max-height:300px; opacity:1; }
/* la sangria de 43px alinea los items con el titulo, no con la cifra */
.acc__items{
  margin:0; padding:0 0 26px 43px; list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:0 36px;
}
.acc__item{
  font-size:.95rem; line-height:1.5; color:rgba(14,14,16,.65);
  padding:6px 0; text-wrap:pretty;
}
.prop__note{
  margin-top:var(--sep); background:var(--tinta);
  border-radius:var(--bloque); padding:clamp(24px,2.4vw,30px) clamp(26px,3.1vw,44px);
}
.prop__note p{
  margin:0; max-width:104ch; font-size:.88rem; line-height:1.65;
  color:rgba(255,255,255,.72);
}
.prop__note strong{ font-weight:500; color:#fff; }
/* ---------- la propuesta, con los colores al reves ----------
   Para "por que una web": el bloque lateral en gris y el grande en naranja.
   Sobre el naranja el texto va en tinta, igual que en los botones (el token
   --sobre-cta ya dice que asi se trata este naranja). */
.prop--invertida .prop__aside{ background:var(--gris-1); }
.prop--invertida .prop__eyebrow{ color:rgba(14,14,16,.5); }
.prop--invertida .prop__invite{ color:rgba(14,14,16,.62); }
.prop--invertida .prop__main{
  background:var(--naranja); color:var(--tinta);
  display:flex; flex-direction:column; justify-content:center;
}
.prop--invertida .acc{ margin-top:0; }
.prop--invertida .acc__row{ border-top-color:rgba(14,14,16,.22); }
.prop--invertida .acc__row:last-child{ border-bottom:1px solid rgba(14,14,16,.22); }
.prop--invertida .acc__num,
.prop--invertida .acc__sign{ color:rgba(14,14,16,.55); }
.prop--invertida .acc__title{ color:rgba(14,14,16,.78); }
/* abierto: el naranja del estado activo aqui no se veria, asi que lo marca el
   contraste — la fila abierta pasa a tinta pura */
.prop--invertida .acc__row[data-open="true"] .acc__title,
.prop--invertida .acc__row[data-open="true"] .acc__num,
.prop--invertida .acc__row[data-open="true"] .acc__sign{ color:var(--tinta); }
/* cuerpo de una sola frase, en vez de la rejilla de items de la propuesta */
.acc__texto{
  margin:0; padding:0 0 26px 43px; max-width:64ch;
  font-size:.95rem; line-height:1.5; color:rgba(14,14,16,.72); text-wrap:pretty;
}
/* ---------- POR QUE TRABAJAR: foto + lista de tres puntos ----------
   Sustituye a la seccion de numerales sueltos con dibujos de linea. Dos
   bloques: la foto a la IZQUIERDA (el hero la tiene a la derecha, asi el
   ritmo alterna) y los tres puntos dentro de un bloque gris.
   ------------------------------------------------------------------ */
.porque2{
  margin:var(--sep); padding:0;
}
.porque2__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:var(--sep);
  align-items:stretch;
}
.porque2__foto{
  border-radius:var(--bloque); overflow:hidden; min-height:340px;
}
.porque2__foto img{
  width:100%; height:100%; object-fit:cover;
  /* la modelo esta en la mitad de arriba: anclando ahi, el recorte de cover
     se lleva el suéter y nunca la cara ni la camara */
  object-position:center top;
  display:block;
}
.porque2__panel{
  background:var(--gris-1); border-radius:var(--bloque);
  padding:clamp(32px,3.8vw,54px);
}
.porque2__panel h2{
  font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:300;
  letter-spacing:-.025em; max-width:16ch;
  margin-bottom:clamp(24px,2.8vw,38px);
}
/* ---- los tres puntos: numeral de acento, titulo y texto, con linea ---- */
.pasos{ list-style:none; margin:0; padding:0; }
.pasos li{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(16px,1.8vw,26px); align-items:baseline;
}
.pasos li + li{
  border-top:1px solid rgba(0,0,0,.14);
  margin-top:clamp(20px,2.4vw,30px); padding-top:clamp(20px,2.4vw,30px);
}
.pasos b{
  font-size:clamp(1.1rem,1.5vw,1.3rem); font-weight:400;
  color:var(--naranja); font-variant-numeric:tabular-nums;
}
.pasos h3{
  font-size:clamp(1.05rem,1.5vw,1.25rem); font-weight:400;
  letter-spacing:-.01em; margin:0 0 8px;
}
.pasos p{ font-size:.9rem; line-height:1.55; color:#4A4A50; margin:0; max-width:44ch; }
/* ---------- CONTACTO: bloque gris + formulario sobre negro ----------
   Sustituye al CTA final. Los dos bloques van pegados, sin el --sep que
   separa al resto: en la referencia forman una sola pieza partida en dos
   colores, y por eso el radio va solo por fuera.
   ------------------------------------------------------------------ */
.contacto{
  margin:var(--sep); padding:0;
}
/* medido en la referencia: los dos bloques llevan el radio en las CUATRO
   esquinas, no un radio unico por fuera del conjunto. Son dos piezas
   sueltas, como el resto de la pagina, no una partida en dos colores. */
.contacto__grid{
  /* 1fr 3fr y no .25fr .75fr: el bloque oscuro no baja de su min-content
     (340px, se lo fija el boton de WhatsApp), y con factores que suman 1 el
     otro track solo tomaba el 75% del sobrante y dejaba 224px muertos a la
     derecha. Con 3fr se lleva TODO el resto y la pieza llega al borde. */
  display:grid; grid-template-columns:1fr 3fr; gap:var(--sep);
}
.contacto__aside{
  background:var(--gris-1); color:var(--tinta); border-radius:var(--bloque);
  padding:clamp(30px,3.6vw,50px);
  display:flex; flex-direction:column; align-items:flex-start;
}
.contacto__aside h2{
  font-size:clamp(2rem,3.4vw,2.9rem); font-weight:300;
  letter-spacing:-.025em; margin-bottom:18px;
}
.contacto__aside p{
  color:rgba(14,14,16,.68); font-size:.875rem; line-height:1.55;
  max-width:30ch; margin-bottom:clamp(22px,2.6vw,34px);
}
/* el WhatsApp se queda arriba y el bloque no lo estira: auto lo empuja abajo
   solo cuando sobra alto, que es lo que pasa en escritorio */
.contacto__aside .btn{
  margin-top:auto;
}
.contacto__panel{
  background:var(--tinta); color:#fff; border-radius:var(--bloque);
  padding:clamp(34px,4.2vw,56px) clamp(30px,3.4vw,46px);
}
/* el formulario no ocupa el panel entero: es una columna estrecha centrada,
   y el titulo se alinea con ella */
.contacto__panel h3,
.contacto__panel .form{
  max-width:460px; margin-inline:auto;
}
.contacto__panel h3{
  font-size:clamp(1.15rem,1.72vw,1.45rem); font-weight:400;
  letter-spacing:-.015em; margin-bottom:clamp(22px,2.4vw,32px);
}
/* ---- formulario: campos sin caja, solo la linea de abajo ----
   Ritmo calcado de la referencia: cada fila mide 78px = etiqueta 18 + 8 de
   hueco + campo 34 + 18 hasta la etiqueta siguiente. */
.form{ display:grid; gap:18px; }
.form__fila{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.campo{ display:grid; gap:8px; }
.campo > span{ font-size:.875rem; line-height:1.3; color:rgba(255,255,255,.7); }
.campo > span i{ font-style:normal; color:var(--naranja); }
.campo input,
.campo textarea{
  width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.3);
  background:none; padding:8px 2px; border-radius:0;
  font:inherit; font-size:.875rem; color:#fff;
  /* el line-height del body (1.7) inflaba cada campo a 41px; la referencia
     los tiene en 34 = 17 de texto + 16 de padding + 1 de linea */
  line-height:1.25;
  transition:border-color .2s;
}
/* altura FIJA, no min-height: el rows="4" del HTML pesa mas que un minimo y
   dejaba el area en 95px */
.campo textarea{ resize:vertical; height:75px; }
.campo input:focus,
.campo textarea:focus{
  outline:none; border-bottom-color:var(--naranja); border-bottom-width:2px;
  padding-bottom:7px;   /* compensa el pixel que gana el borde, o el campo salta */
}
/* el navegador pinta un fondo azul al autocompletar y se come el diseno.
   Sobre el panel negro hace falta ademas forzar el color del texto: el
   -webkit-box-shadow tapa el fondo pero la letra se queda oscura. */
.campo input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 40px var(--tinta) inset;
  -webkit-text-fill-color:#fff;
}
.form__enviar{ justify-self:stretch; text-align:center; margin-top:6px; }
.form__aviso{ margin:0; font-size:.88rem; }
.form__aviso[data-estado="error"]{ color:#FF9B92; }
.form__aviso[data-estado="ok"]{ color:#7BD8A6; }
/* ---------- FOOTER: bloque de ACENTO con letras negras ----------
   La forma viene del footer de la referencia; el color, del azul de MARCA.
   Historia corta, porque se probaron tres: gris (2026-09-01) dejo de servir
   al invertir el contacto -- "Hablemos" paso a gris y el pie quedaba a 10px
   del mismo color exacto, leyendose como una pieza partida por una ranura;
   naranja de acento se veia bien pero metia un cuarto color en la pagina y
   no es el de la marca; azul con letras NEGRAS se descarto por ilegible
   (3.2:1 los titulos y 2.6:1 los enlaces, contra los 4.5:1 que pide AA: este
   azul es demasiado oscuro para aguantar texto negro).
   Queda AZUL DE MARCA CON LETRAS BLANCAS, que da 6:1 y cierra la pagina
   haciendo pareja con la pildora de la nav.
   ------------------------------------------------------------------ */
.footer{
  background:var(--azul); color:#fff;
  margin:var(--sep); border-radius:var(--bloque);
  /* el pie minimalista vive del aire: arriba respira y abajo cierra corto.
     A ojo del usuario ha ido bajando hasta un 68% del primer montaje. */
  padding:clamp(36px,4.4vw,63px) 0 clamp(17px,1.8vw,24px);
}
/* ---- el titulillo que abre el pie ---- */
.footer__lead{
  margin:0; text-align:center;
  font-weight:600; font-size:.8rem; line-height:1;
  letter-spacing:.18em; text-transform:uppercase;
}
/* ---- los enlaces, en una sola fila centrada ---- */
.footer__nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(18px,3.4vw,52px);
  margin-top:clamp(16px,2vw,26px);
}
.footer__nav a{
  font-size:1.02rem; font-weight:500; color:inherit;
  /* .86 los dejaba lavados sobre el azul; en negativo el texto claro ya
     pierde cuerpo de por si */
  opacity:.94; transition:opacity .2s;
}
.footer__nav a:hover{ opacity:1; }

/* ---- el contacto, en su propia fila bajo los enlaces ----
   Misma fila centrada que los servicios pero un punto mas chica y apagada:
   asi se lee como el segundo renglon del mismo bloque y no como otra cosa.
   .82 y no .72 de blanco: sobre el azul de marca, .72 se queda en 3,9:1. */
.footer__datos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(14px,2.6vw,40px);
  margin-top:clamp(9px,1.2vw,15px);
  font-size:.85rem;
}
.footer__datos a{
  color:rgba(255,255,255,.82); transition:opacity .2s;
}
.footer__datos a:hover{ opacity:.7; }

/* ---- el cierre: logotipo, "volver arriba" y copyright, en columna ----
   El hueco que en la referencia separa los enlaces del fondo es lo que hace
   respirar al pie, pero vacio del todo quedaba muerto: ahora lo ocupa el
   logotipo y el margen se acorta. Los tres van centrados y apilados, asi que
   la reticula de tres columnas ya no hace falta. */
.footer__base{
  display:grid; justify-items:center; text-align:center;
  gap:clamp(11px,1.35vw,18px);
  margin-top:clamp(31px,4.4vw,63px);
  font-size:.8rem;
}
/* El de la BARRA (logo.png), que es la marca sola. logoazul.png trae debajo
   un "neural studio" en chico que aqui sobraba: el pie ya no repite la marca.
   El PNG es azul y sobre el azul desaparece, asi que va apagado a blanco,
   igual que el de la barra. */
.footer__marca img{
  display:block; width:auto; height:clamp(28px,2.6vw,38px);
  filter:brightness(0) invert(1);
}
.footer__arriba{ font-size:.95rem; color:#fff; transition:opacity .2s; }
.footer__arriba:hover{ opacity:.7; }
.footer__copy{ margin:0; color:rgba(255,255,255,.82); }

/* ---------- el logo es un PNG azul: sobre el bloque de acento hay que
              apagarlo (negro sobre naranja, blanco sobre azul) ---------- */
.nav__logo img{ filter:brightness(0) invert(1); }
/* ---------- foto del hero ----------
   La foto es 4:3 y el bloque queda mas apaisado, asi que cover recorta algo de
   alto. Anclada arriba, ese recorte se lo lleva la parte baja del sueter y
   nunca la cabeza ni el aire que la rodea. */
.hero__img{
  object-fit:cover; object-position:center top;
  height:100%; min-height:0;
}
/* ---------- firma sobre la foto del hero (arriba a la derecha) ---------- */
.hero__marca{ display:none; }
.hero__marca{
  display:inline-flex; align-items:baseline; gap:9px;
  position:absolute; z-index:2; pointer-events:none;
  top:calc(var(--sep) + clamp(20px,2.4vw,34px));
  right:calc(var(--sep) + clamp(22px,2.8vw,40px));
}
.hero__marca img{
  height:17px; width:auto;
  filter:brightness(0) invert(1);   /* el logo es azul: aqui va en blanco */
}
.hero__marca span{
  font-family:"Poppins",system-ui,sans-serif; font-weight:500;
  font-size:19px; text-transform:lowercase; letter-spacing:-.005em;
  line-height:1; color:#fff;
}
.btn,
.banda .btn{
  background:var(--cta); color:var(--sobre-cta);
}
.btn:hover,
.banda .btn:hover{
  background:var(--cta-h); color:var(--sobre-cta);
}
/* el de la nav se queda negro. El fondo ya lo fija la regla de mas arriba
   (mas especifica que la de aqui), pero el hover no: sin esta linea el
   .btn:hover naranja de arriba se lo llevaria al pasar el raton. */
.nav__links .btn:hover{ background:#2A2A2E; color:#fff; }
/* ---------- el verbo de cada frase en naranja ----------
   Es el primer <span> de cada par: "Diseñamos", "Posicionamos",
   "Simplificamos". El complemento ("tu web.") se queda en negro.
   Color fijo y no var(--azul): asi sale igual en las dos variantes. */
.hero h1 > span > span:first-child{ color:#FC6521; font-weight:330; }
/* ---------- el complemento, mas chico que el verbo ----------
   .88em = el 1.1em que probamos, menos un 20%. En em para que siga la escala
   del h1: si cambia el tamano del titular, esta linea se mueve con el. El
   line-height es un numero (1.0), asi que cada linea calcula su alto sobre
   su propio tamano. */
.hero h1 > span > span:last-child{ font-size:.88em; }
/* ---------- NAV: 5 enlaces, y el activo subrayado como la referencia -------
   El gap baja de 34 a 26px: con cinco enlaces mas el boton, 34 apretaba la
   pildora en pantallas medianas. */
.nav__links{ gap:26px; }
.nav__links a:not(.btn){
  opacity:.9;
}
/* la misma rayita del activo aparece al pasar el raton, como la referencia.
   Va el mismo text-decoration y no un pseudo-elemento, para que hover y
   activo se vean identicos. Con :focus-visible entra tambien al navegar
   con el teclado. */
.nav__links a[aria-current="page"],
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn):focus-visible{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1.5px;
}
/* ...pero si el JS pudo crear la rayita deslizante, el subrayado estatico
   sobra: lo haria la linea y el text-decoration a la vez. */
.nav__links.con-linea a{ text-decoration:none !important; }
.nav__linea{
  position:absolute; left:0; bottom:-7px; width:0; height:1.5px;
  background:currentColor; border-radius:2px; pointer-events:none;
  /* transform + width, no left: asi el navegador la mueve sin rehacer
     el layout de la barra en cada fotograma */
  transition:transform .42s cubic-bezier(.22,1,.36,1),
             width     .42s cubic-bezier(.22,1,.36,1);
}
.nav__linea.sin-transicion{ transition:none; }
/* ---------- barra: logo a la izquierda y menu CENTRADO ----------
   space-between con dos hijos dejaba el menu pegado a la derecha. Con
   1fr auto 1fr el menu queda centrado en la pildora aunque el logo y el
   burger midan distinto. El burger va oculto en escritorio, pero su
   columna sigue ocupando 1fr y es lo que sostiene el centrado. */
.nav__in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.nav__links{ justify-self:center; position:relative; }
.burger{ justify-self:end; }
/* ---------- la pildora recupera su altura ----------
   La altura la daba el boton; sin el, la barra encogio a la altura del texto
   y arrastro todo hacia arriba. Peor aun: el hero calcula su alto con
   "100dvh - 86px", donde 86 = los 76px de la pildora + los 10 de margen, asi
   que ese numero dejo de cuadrar. Se fija a 76px y todo vuelve a su sitio.
   Si algun dia cambia esta altura, hay que tocar tambien el 86 del hero. */
.nav{ min-height:76px; }
.nav .wrap{ min-height:50px; }
/* ---------- NAV: desplegable de Servicios ----------
   Al pasar el raton por "Servicios" se abren los cinco, solo con su nombre:
   quien llega al menu ya sabe lo que busca, y meterle icono y descripcion lo
   convertia en una segunda seccion de Servicios. Es CSS puro: :hover para el
   raton y :focus-within para el teclado, que asi tabula por dentro del panel
   sin que se cierre. El markup lo pone lab-build.py y recorre la lista
   SERVICIOS, de modo que barra y seccion no pueden decir cosas distintas.
   ------------------------------------------------------------------ */
.nav__svc{
  position:relative; display:inline-flex; align-items:center;
}
/* el chevron avisa de que hay algo debajo; al abrir, gira */
.nav__svc > a::after{
  content:""; display:inline-block; width:5px; height:5px; margin-left:7px;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .22s var(--ease);
}
.nav__svc:hover > a::after,
.nav__svc:focus-within > a::after{
  transform:translateY(1px) rotate(225deg);
}
/* la caja exterior solo hace de PUENTE: sin ese padding, el hueco entre la
   pildora y el panel cuenta como "fuera" y el menu se cierra al bajar.
   El puente se mide desde el borde del ENLACE, no del de la barra: entre uno
   y otro estan los 13px de padding de la pildora mas su borde. Medido en
   pantalla, con 26 la primera tarjeta caia CLAVADA en el borde azul (0px de
   aire); 38 la dejan a unos 12.
   Aqui solo se conmuta la VISIBILIDAD: el movimiento lo hace cada tarjeta por
   su cuenta, como en el menu de referencia. */
.nav__svc-menu{
  position:absolute; top:100%; left:50%; z-index:70;
  padding-top:38px; transform:translateX(-50%);
  visibility:hidden;
}
.nav__svc:hover .nav__svc-menu,
.nav__svc:focus-within .nav__svc-menu{
  visibility:visible;
}
/* No hay panel: son cinco TARJETAS SUELTAS, separadas y del mismo ancho, que
   es lo que le da el aire al menu de referencia. El contenedor solo las apila
   y las estira al ancho del nombre mas largo. */
.nav__svc-panel{
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
}
/* Cada tarjeta hace "pop" desde su centro, escalonada. Del original vienen
   el scale, el retardo por puesto en la lista (el --i lo escribe
   lab-build.py) y una curva que SE PASA de 1 y vuelve, que es el rebote.
   Al cerrar no hay retardo: se van las cinco a la vez, porque encadenar
   tambien la salida deja el menu colgando cuando ya te fuiste.

   FLUIDEZ (se veia a tirones):
   - Arranca en .72 y no en 0. Escalar TEXTO desde cero obliga al navegador a
     rasterizarlo a tamanos intermedios, y eso es lo que se ve tosco y
     borroso; desde .72 el recorrido es corto y la letra no se deforma.
   - will-change promueve las cinco tarjetas a su propia capa, asi se
     rasterizan UNA vez al tamano final y el resto es la GPU moviendo una
     textura. Sin esto, cada frame vuelve a pintar texto y sombra.
   - Se le suma opacity, que es la otra propiedad que la GPU mueve gratis, y
     los tiempos bajan: .26s por tarjeta y .045 de escalon (antes .32 y .07),
     con lo que las cinco terminan en .44s en vez de .60s. */
.nav__links a.nav__svc-item{
  display:block; padding:10px 20px; white-space:nowrap; text-align:center;
  border-radius:13px; font-size:.86rem; line-height:1.35;
  /* del color de la pildora, no del acento: en naranja las tarjetas caian
     justo sobre la foto naranja del hero y se perdian unas en otra */
  background:var(--azul); color:var(--sobre-acento);
  text-decoration:none; opacity:1;
  box-shadow:0 10px 26px -10px rgba(11,11,13,.42), 0 1px 3px rgba(11,11,13,.08);
  position:relative; isolation:isolate;
  transform:scale(.72); opacity:0;
  will-change:transform, opacity;
  backface-visibility:hidden;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1),
             opacity .2s linear,
             color .22s var(--ease);
}
/* El negro del hover NO se pinta cambiando background-color: va en una capa
   propia a la que se le anima la OPACIDAD, que es de las dos cosas que la GPU
   compone sin repintar nada (la otra es transform). Animar el color de fondo
   obliga a re-rasterizar la tarjeta entera -- texto y sombra incluidos -- en
   cada frame, y eso es lo que se veia a saltos.
   El z-index:-1 no se escapa porque el enlace esta aislado (isolation), asi
   que la capa cae encima del azul pero por debajo del texto. */
.nav__svc-item::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; background:var(--tinta);
  opacity:0; transition:opacity .24s var(--ease);
}
.nav__links a.nav__svc-item:hover::before,
.nav__links a.nav__svc-item:focus-visible::before{
  opacity:1;
}
.nav__svc:hover .nav__svc-item,
.nav__svc:focus-within .nav__svc-item{
  transform:scale(1); opacity:1;
  transition-delay:calc(var(--i,0) * .045s);
}
/* el fondo negro lo pone la capa de arriba; aqui solo queda la letra, que en
   la variante azul ya es blanca y no se mueve, y en la naranja pasa de negra
   a blanca */
.nav__links a.nav__svc-item:hover,
.nav__links a.nav__svc-item:focus-visible{
  color:#fff; text-decoration:none;
}
/* ---------- RESEÑAS: el testimonio en grande sobre un bloque de color -------
   Forma y color calcados de la referencia: bloque de acento con letras
   negras. (Se probo antes en azul de marca con letras blancas; el usuario lo
   paso a naranja el 2026-09-03.) Sobre este naranja el negro da 6,45:1, muy
   por encima del 4,5:1 que pide AA -- al reves que sobre el azul, donde el
   negro se quedaba en 3,2:1.
   Las flechas solo existen si hay mas de un testimonio -- hoy hay uno, asi
   que lab-build.py no las pinta. El CSS las deja listas.
   ------------------------------------------------------------------ */
.resenas{ margin:var(--sep); padding:0; }
.resenas__caja{
  background:var(--naranja); color:var(--tinta);
  border-radius:var(--bloque);
  padding:clamp(30px,3.4vw,46px) clamp(30px,4vw,60px);
}
.resenas h2{
  font-size:clamp(1.7rem,2.7vw,2.4rem); font-weight:300;
  letter-spacing:-.03em; line-height:1.05;
  margin:0 0 clamp(18px,2.2vw,28px);
}
/* la fila deja sitio a las flechas a los lados de la cita, como el original */
.resenas__fila{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,34px);
}
.resena{ margin:0; flex:1; }
.resena blockquote{
  margin:0; quotes:'“' '”';
  font-size:clamp(.96rem,1.28vw,1.14rem); font-weight:300;
  /* La columna se estrecha a proposito: a 82ch la cita cruzaba casi todo el
     bloque y se leia como un parrafo largo de tres renglones. A 62 cae en
     cuatro, mas cortos, que es como se lee una cita. */
  line-height:1.45; letter-spacing:-.01em; max-width:62ch;
}
.resena blockquote::before{ content:open-quote; }
.resena blockquote::after{ content:close-quote; }
/* quien firma: el NEGOCIO, enlazado a su sitio, que es lo que hace
   comprobable el testimonio */
.resena figcaption{
  margin-top:clamp(28px,3.4vw,44px);
  display:flex; flex-direction:column; gap:1px;
  font-size:.84rem;
}
.resena figcaption a{
  color:var(--tinta); font-weight:500; text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:1px;
}
.resena figcaption span{ color:rgba(14,14,16,.8); }
.resenas__pie{
  margin:clamp(9px,1.1vw,14px) 0 0;
  font-size:.76rem; color:rgba(14,14,16,.8);
}
/* ---- flechas: listas para cuando entre la segunda reseña ---- */
.resenas__flecha{
  flex:none; display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(14,14,16,.4);
  background:none; color:var(--tinta); cursor:pointer;
  transition:background-color .22s var(--ease), border-color .22s var(--ease);
}
.resenas__flecha:hover{
  background:rgba(14,14,16,.1); border-color:var(--tinta);
}
.resenas__flecha--ant{ order:-1; }

@media (max-width:940px){.quienes__grid,
.quienes__par{ grid-template-columns:1fr; }
.quienes__par .quienes__b + .quienes__b{
      border-left:0; border-top:1px solid rgba(255,255,255,.28);
    }
#servicios::after,
.svcs__img{ display:none; }
.svcs{
      background:var(--tinta); color:#fff; border-radius:var(--bloque);
      padding:clamp(26px,6vw,40px);
    }
.svc{ background:none; padding:0; }
.svcs__col:first-child .svc + .svc,
.svcs__col:last-child .svc{
      border-top:1px solid rgba(255,255,255,.22); margin-top:30px; padding-top:30px;
    }
#servicios .svc p{
      color:rgba(255,255,255,.8);
    }
.porque2__grid{
      grid-template-columns:1fr;
    }
.porque2__foto{
      min-height:0; aspect-ratio:4/3;
    }
.contacto__grid{
      grid-template-columns:1fr;
    }
.contacto__aside .btn{
      margin-top:0;
    }
.form__fila{ grid-template-columns:1fr; }}

@media (min-width:941px){/* deja de ser una seccion con aire arriba y abajo: son dos bloques mas del
       mosaico, pegados a la mini-seccion de arriba */
#servicios{ padding:var(--sep) 0 0; }
#servicios .wrap{
      max-width:none; padding-inline:var(--sep);
      display:grid; grid-template-columns:1fr 1fr; gap:var(--sep); align-items:start;
    }
/* izquierda: el encabezado de la seccion hace de bloque de texto, con el
       CTA abajo del todo (en la referencia es el "Discover More") */
#servicios .section__head{
      margin:0; background:var(--gris-1); border-radius:var(--bloque);
      padding:clamp(38px,4.6vw,62px);
      display:flex; flex-direction:column;
      /* con cuatro servicios la lista negra mide el triple que este bloque, y
         la mitad izquierda quedaba vacia: el texto acompana el recorrido en vez
         de estirarse. Por eso el grid va con align-items:start, o el bloque
         ocuparia toda la altura y sticky no tendria recorrido. */
      position:sticky; top:calc(76px + var(--sep) * 2);
      /* llega hasta el borde inferior de la pantalla: con un alto fijo quedaban
         77px de fondo asomando bajo el bloque mientras la lista seguia.
         96px = los 76 de la nav + 20 de margen; 10 mas de aire abajo. */
      min-height:calc(100dvh - 106px);
    }
#servicios .section__head h2{
      font-size:clamp(2rem,3.3vw,2.9rem); max-width:14ch; margin-bottom:20px;
    }
.svcs__cta{
      align-self:flex-start; margin-top:auto;
    }
/* derecha: un solo bloque negro con los cuatro servicios en lista */
.svcs{
      display:block; background:var(--tinta); color:#fff;
      border-radius:var(--bloque); padding:clamp(38px,4.6vw,62px);
    }
/* aplanar las columnas para que los cuatro se apilen en orden */
.svcs__col{ display:contents; }
.svcs__media{ display:none; }
.svc{
      background:none; border-radius:0; padding:0; height:auto; display:block;
    }
/* la linea separa un servicio del siguiente. Con display:contents los .svc
       siguen siendo hermanos DENTRO de su columna, no entre columnas: por eso
       son dos selectores y no un simple .svc + .svc. */
.svcs__col:first-child .svc + .svc,
.svcs__col:last-child .svc{
      border-top:1px solid rgba(255,255,255,.22);
      margin-top:clamp(34px,4vw,54px); padding-top:clamp(34px,4vw,54px);
    }
#servicios .svc p{
      color:rgba(255,255,255,.8); max-width:54ch;
    }}

@keyframes rot-fade{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){.rot-fade{ animation:none; }
.nav__linea{ transition:none; }
.nav__links a.nav__svc-item{
      transform:none; opacity:1; will-change:auto;
      transition:color .01s;
    }
.nav__svc-item::before{
      transition-duration:.01s;
    }
.nav__svc:hover .nav__svc-item,
.nav__svc:focus-within .nav__svc-item{
      transform:none; opacity:1; transition-delay:0s;
    }}

@media (max-width:900px){.prop__grid{ grid-template-columns:1fr; }
/* en una columna los items pierden la sangria: no hay cifra a su izquierda
     con la que alinearse */
.acc__items{ grid-template-columns:1fr; padding-left:0; }
.acc__texto{ padding-left:0; }
.acc__row[data-open="true"] .acc__body{ max-height:560px; }
.rot__body{ grid-template-columns:1fr; align-items:start; gap:24px; }
.rot__copy{ padding-bottom:0; }
/* en una columna las pestañas empiezan donde empieza el titular */
.rot--servicios .rot__tabs{ justify-content:flex-start; max-width:none; }}

@media (max-width:760px){/* en movil las flechas bajan debajo de la cita: a los lados dejaban el
       texto en una columna demasiado estrecha */
.resenas__fila{ flex-wrap:wrap; }
.resena{ flex:1 0 100%; order:-2; }}

@media (max-width:860px){.hero{ grid-template-columns:1fr; }
.hero__img{ order:1; min-height:42vh; }
.hero__content{ order:2; }
/* con una sola columna el alto de pantalla del hero deja fuera la tarjeta */
.hero--svc.hero--bloque{ height:auto; }
.nav{ padding-left:22px; }
/* en movil manda el burger y no hay hover: el desplegable estorba */
.nav__svc-menu{ display:none; }
.nav__svc > a::after{ display:none; }}

@media (max-height:860px){.hero h1{
      font-size:clamp(1.44rem, min(11.97cqw, 6.84vh), 5.99rem);
    }}
/* Red de seguridad para portatiles de pantalla baja: por debajo de esto el
   titular ya no puede encogerse mas sin quedar ridiculo, asi que lo que cede
   es el alto de pantalla del hero y manda el contenido de la tarjeta. */

@media (max-height:620px){.hero--svc.hero--bloque{ height:auto; }}

@keyframes lab-entra-arriba{
  from{ opacity:0; transform:translateY(30px);
          clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); }
  to{ opacity:1; transform:none;
          clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

@keyframes lab-entra-derecha{
  from{ clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); }
  to{ clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

@media (prefers-reduced-motion: no-preference){/* la pildora de la nav se abre de izquierda a derecha */
.nav{
      animation:lab-entra-derecha .8s cubic-bezier(.22,1,.36,1) backwards;
    }
/* las dos tarjetas del hero, escalonadas. Sin "forwards" a proposito: al
       terminar no queda clip-path pegado y el border-radius manda de nuevo. */
.hero__content{
      animation:lab-entra-arriba .9s cubic-bezier(.22,1,.36,1) .05s backwards;
    }
.hero__img{
      animation:lab-entra-arriba .9s cubic-bezier(.22,1,.36,1) .18s backwards;
    }
.hero__marca{
      animation:lab-entra-arriba 1s cubic-bezier(.22,1,.36,1) .6s backwards;
    }
/* El contenido de la tarjeta (titular, bajada y boton) NO sube: se descubre
       de IZQUIERDA A DERECHA, que es la otra variante de revealIn del motor
       original -- polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%) abriendose.
       Y sin fade: en la referencia la opacidad salta a 1 en el primer
       microsegundo (keyframe en offset 0.000001) y todo el efecto es la
       cortina. Por eso aqui se anula el opacity:0 que trae .r de nueva.css.
       El estado final es un poligono MAS GRANDE que la caja, porque a
       clip-path:none no se le puede hacer transicion.
       Los --d del HTML (.1s y .2s) dan la cascada. */
.hero .r{
      opacity:1; transform:none;
      clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
      transition:clip-path .9s var(--ease);
      transition-delay:calc(.35s + var(--d,0s));   /* .35s = la bajada; .65s = titular y CTA */
    }
.hero .r.in{
      clip-path:polygon(-10% -5%, 110% -5%, 110% 105%, -10% 105%);
    }}
/* ---------- LOYALTY: carrusel de tarjetas ----------
   Ocupa el lado de la foto en el hero de /loyalty. Las tarjetas estan
   DIBUJADAS con CSS, no son capturas: se leen nitidas en cualquier pantalla,
   no pesan y se editan como texto. Cada una trae sus colores en variables
   (--wc-bg, --wc-franja, --wc-acento), sacados de las tarjetas reales. */
.wcarr{
  order:2; position:relative; width:100%; height:100%;
  min-height:min(66vh,560px);
  border-radius:var(--bloque); background:var(--azul);
  /* grid y no flex: con flex la pista se quedaba con todo el alto y los
     puntos se salian por abajo, recortados por el overflow. Con filas
     explicitas los puntos tienen su sitio SIEMPRE y la pista se queda con
     lo que sobra, que es justo al reves. */
  display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center;
  gap:16px; padding:clamp(18px,2.4vw,30px); overflow:hidden;
}
/* las tarjetas se apilan en el mismo hueco y se turnan */
.wcarr__pista{
  position:relative; width:100%; min-height:0; height:100%;
}

/* ---- el telefono ---- */
.wcard{
  position:absolute; inset:0; margin:auto;
  width:264px; height:100%; max-height:478px;
  border-radius:38px; padding:9px; background:#0d0d11;

  box-shadow:0 24px 60px -18px rgba(20,25,60,.42);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}
.wcard.is-on{ opacity:1; transform:none; pointer-events:auto; }
/* La pantalla es un elemento de verdad y no un ::after: el contenido tiene
   que recortarse con SU radio (30px), no con el del marco (38px). Cuando lo
   pintaba el pseudo, la franja de abajo se recortaba con el radio de fuera y
   sus esquinas se comian el borde negro del telefono. */
.wcard__scr{
  position:absolute; inset:9px; border-radius:30px; overflow:hidden;
  background:var(--wc-bg); color:var(--wc-tinta);
  display:flex; flex-direction:column;
}
.wcard__punch{
  position:absolute; left:50%; top:11px; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:#000;
  box-shadow:0 0 0 3px #26262d; z-index:3;
}
.wcard__status{
  display:flex; justify-content:space-between; align-items:center;
  padding:34px 22px 2px; font-size:9.5px; font-weight:500; opacity:.66;
}
.wcard__head{ text-align:center; padding:6px 20px 0; }
.wcard__logo{
  display:grid; place-items:center; width:46px; height:46px; margin:0 auto;
  border-radius:50%; background:rgba(255,255,255,.93); color:var(--wc-bg);
  font-size:15px; font-weight:600; letter-spacing:-.02em;
}
.wcard__biz{ margin-top:7px; font-size:11px; font-weight:500; opacity:.9; }
.wcard__tit{ margin-top:3px; font-size:18px; font-weight:600; line-height:1.1; }
/* ---- el QR ---- */
.wcard__qr{ display:flex; flex-direction:column; align-items:center; padding:11px 16px 0; }
.wcard__qr svg{ background:#fff; border-radius:10px; padding:6px; width:88px; height:88px; }
.wcard__credito{ margin-top:5px; font-size:8px; opacity:.7; }
.wcard__credito b{ font-size:8.5px; font-weight:500; }
/* ---- las dos columnas de cifras ---- */
.wcard__cols{ display:flex; justify-content:space-between; gap:12px; padding:12px 22px 0; }
.wcard__col--der{ text-align:right; }
.wcard__cols span{
  display:block; font-size:8.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.04em; opacity:.68;
}
.wcard__cols b{ display:block; font-size:13.5px; font-weight:600; margin-top:1px; }
/* ---- la franja de abajo: sellos o puntos ---- */
/* la franja cierra la tarjeta: auto la empuja al fondo de la pantalla, que
   es donde va en la tarjeta real, en vez de dejarla flotando a media altura */
.wcard__franja{
  margin-top:auto; background:var(--wc-franja); padding:13px 15px;
}
.wcard__sellos{ display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.wcard__sello{
  aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.42); background:rgba(255,255,255,.16);
  color:rgba(255,255,255,.55); font-size:11px; line-height:1;
}
.wcard__sello.is-on{
  background:var(--wc-acento); border-color:var(--wc-acento); color:var(--wc-bg);
}
.wcard__pts{ text-align:center; font-size:26px; font-weight:600; line-height:1; color:var(--wc-acento); }
.wcard__pts span{ margin-left:4px; font-size:12px; font-weight:500; opacity:.72; }
.wcard__bar{
  margin:8px auto 0; height:8px; border-radius:999px;
  background:rgba(255,255,255,.25); overflow:hidden;
}
.wcard__bar span{ display:block; height:100%; border-radius:999px; background:var(--wc-acento); }
.wcard__pie{ margin-top:7px; text-align:center; font-size:10px; opacity:.9; line-height:1.4; }

/* ---- los puntos de abajo ---- */
.wcarr__puntos{ display:flex; gap:9px; flex:none; }
/* sobre el azul del bloque, los puntos van en blanco: el azul de marca que
   usaban antes desaparecia contra el fondo */
.wcarr__punto{
  width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.42); transition:background .3s, transform .3s;
}
.wcarr__punto.is-on{ background:#fff; transform:scale(1.25); }
.wcarr__punto:hover{ background:rgba(255,255,255,.75); }

@media (prefers-reduced-motion:reduce){
  .wcard{ transition:none; }
}
/* en movil el hero se apila: el carrusel no necesita el alto de escritorio */
@media (max-width:940px){
  .wcarr{ min-height:0; padding-block:28px; }
  .wcarr__pista{ min-height:478px; }
}


/* ---------- ROTADOR en naranja: "Sin friccion" de /loyalty ----------
   Diseño del usuario en Claude Design (Downloads/friccion-rotador.html).
   Es la misma pieza que el rotador negro, asi que reusa .rot entero y aqui
   se calcan SUS valores: no solo el color, tambien los pesos, los cuerpos y
   los aires, que en el rotador del sitio son otros. Su fuente Archivo se
   queda en la Geist del sitio, como ya se hizo con el rotador negro.
   Los px del diseño (1440 de ancho) van en clamp para que sigan siendo
   fluidos: el valor alto de cada clamp es el numero exacto de la maqueta.
   ------------------------------------------------------------------- */
/* .section.rot--friccion y no solo .rot--friccion: .section.rot lleva DOS
   clases (0,2,0) y con una sola le ganaba, dejando la seccion negra y la
   cifra en tinta sobre tinta, invisible. Es la misma trampa que ya advierte
   el comentario de .section.rot unas lineas mas arriba. */
.section.rot--friccion{ background:var(--naranja); color:var(--tinta); }
/* titular: 34px y peso 500, contra los 400 del rotador negro */
.rot--friccion .rot__top h2{
  font-weight:500; font-size:clamp(1.6rem,2.4vw,2.125rem); max-width:30ch;
}
.rot--friccion .rot__lede{ color:rgba(0,0,0,.62); }
/* pestañas a la derecha, en su propio ancho */
.rot--friccion .rot__tabs{ justify-content:flex-end; max-width:420px; }
.rot--friccion .rot__tabs .tab{
  padding:11px 16px; font-size:.875rem; white-space:nowrap;
  border-color:rgba(0,0,0,.3); color:rgba(0,0,0,.62);
}
.rot--friccion .rot__tabs .tab:hover{
  color:var(--tinta); border-color:rgba(0,0,0,.55);
}
.rot--friccion .rot__tabs .tab[aria-selected="true"]{
  background:var(--tinta); border-color:var(--tinta); color:#fff;
}
/* la cifra: 150px, peso 600 y menos apretada que el numero del rotador
   negro, que a 260px es un dos digitos y aqui es texto ("0 apps") */
.rot--friccion .rot__figure{
  color:var(--tinta); white-space:nowrap; font-weight:600;
  font-size:clamp(3.4rem,10.4vw,9.375rem);
  line-height:.9; letter-spacing:-.045em;
}
.rot--friccion .rot__copy{ padding-bottom:26px; }
.rot--friccion .rot__rule{ background:var(--tinta); }
/* .rot__text va con color:#fff fijo para el rotador negro: sobre naranja hay
   que devolverlo a tinta o el dato se pierde */
.rot--friccion .rot__text{
  color:var(--tinta); font-size:clamp(1.05rem,1.6vw,1.3125rem); line-height:1.4;
}
.rot--friccion .rot__progress{ background:rgba(0,0,0,.14); }
.rot--friccion .rot__progress span{ background:var(--tinta); }

/* ---------- LOYALTY: los dos bloques del hero ----------
   El de texto en negro y el de las tarjetas en el azul de marca, invertidos
   respecto a las otras internas (gris claro + foto). Los dos colores de la
   marca, uno en cada lado. */
.hero--loyalty .hero__content{ background:var(--tinta); color:#fff; }
.hero--loyalty .hero__lema{ color:#fff; }
.hero--loyalty .hero__sub{ color:rgba(255,255,255,.72); }

/* ---------- LOYALTY en negro ----------
   Misma barra y mismo pie que el resto del sitio, pero en negro en lugar del
   azul de marca: Loyalty es un producto con identidad propia y el azul se
   reserva para la agencia. El logo ya va en blanco (brightness(0) invert(1)),
   asi que sobre negro se lee igual que sobre el azul. */
.nav--negra{ background:var(--tinta); }
.footer--negro{ background:var(--tinta); }


/* ---------- TRABAJOS: rotador de casos ----------
   Diseño del usuario en Claude Design (Downloads/portafolio-rotador.html).
   Sustituye al zigzag de tres bloques apilados: la pagina medía tres veces
   lo mismo para enseñar tres webs.
   Es una VARIANTE del rotador del sitio, no una pieza aparte: hereda de .rot
   el chasis —el .wrap sin margenes y la barra de progreso al borde— y aqui
   solo va lo que cambia. Es el mismo armazon del manifiesto del home y de
   "Que incluye tu marketing", pero VUELTO DEL REVES: la banda va en el gris
   de los bloques del sitio y no en negro, asi que todo lo que en el rotador
   original es blanco sobre negro aqui es tinta sobre gris.
   Su fuente Archivo se queda en la Geist del sitio, como ya se hizo con los
   otros dos diseños traidos de Claude Design. Los px de la maqueta (1440 de
   ancho) van en clamp: el valor alto de cada uno es el numero exacto del
   diseño.
   ----------------------------------------------------------------------- */
/* el acento del caso que se esta viendo: pinta el ordinal y la barra de
   progreso. Lo cambia el JS con data-acento y no un style inline, asi los
   colores siguen viviendo en la hoja */
.rot--pf{ --pf-acento:var(--naranja); }
/* la banda en gris. .section.rot la pinta de tinta con letra blanca; esta
   regla tiene la misma especificidad (0,2,0) y va despues, asi que gana. */
.section.rot--pf{ background:var(--gris-1); color:var(--tinta); }
.rot--pf[data-acento="azul"]{ --pf-acento:var(--azul); }

/* ---- arriba: ordinal y rubro a la izquierda, cuenta y flechas a la derecha ----
   flex-end y no el flex-start de .rot__top: las flechas se alinean con la
   base del ordinal gigante, que es lo que sujeta la linea. */
.rot--pf .rot__top{
  padding:clamp(20px,1.8vw,26px) clamp(20px,2.2vw,32px) 0;
  align-items:flex-end;
}
/* En la maqueta el ordinal iba en el acento del caso, pero eso era sobre
   negro: el naranja sobre este gris da 2,5:1 y se lee lavado. Va en tinta
   (15:1) y el acento manda donde no es texto, que es la barra de progreso. */
.pf__lead{ display:flex; align-items:baseline; gap:clamp(12px,1.1vw,16px); }
/* el rubro del caso, pegado al ordinal. En la maqueta iba en blanco al 45%
   sobre el negro; sobre el gris es tinta al 55%, que da el mismo peso. */
.pf__note{
  margin:0; font-size:clamp(.82rem,1vw,.875rem); line-height:1.4;
  color:rgba(14,14,16,.55); max-width:40ch;
}
.pf__num{
  margin:0; font-weight:600; color:var(--tinta);
  font-size:clamp(2.75rem,3.9vw,3.5rem); line-height:.85; letter-spacing:-.04em;
}
.pf__nav{ display:flex; align-items:center; gap:clamp(10px,1vw,14px); }
/* la maqueta pone el contador en monospace; aqui basta con cifras de ancho
   fijo para que no baile al cambiar de caso, sin meter una familia nueva */
.pf__count{
  margin:0; font-weight:500; font-size:.875rem; line-height:1;
  letter-spacing:.06em; color:rgba(14,14,16,.5);
  font-variant-numeric:tabular-nums;
}
.pf__count b{ font-weight:500; color:var(--tinta); }
.pf__arrow{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(14,14,16,.28); background:none; color:var(--tinta);
  font:400 16px/1 inherit; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.pf__arrow:hover{ border-color:var(--tinta); background:rgba(14,14,16,.08); }

/* ---- el cuerpo: captura enmarcada + ficha de color ---- */
.pf__body{ padding:clamp(16px,1.4vw,20px) clamp(20px,2.2vw,32px) 0; }
/* los tres casos comparten celda y se turnan. Grid con grid-area:1/1 y no
   position:absolute: asi la banda conserva el alto del caso mas largo y no
   pega un salto al cambiar. */
.pf__pista{ display:grid; }
.pf__caso{
  grid-area:1/1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(12px,1.2vw,16px); align-items:stretch;
  /* visibility y no display:none: saca del tabulador y del lector los
     enlaces del caso que no se ve, pero deja que la celda siga midiendo */
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s .35s;
}
.pf__caso.is-on{
  opacity:1; visibility:visible;
  transition:opacity .35s ease;
}
/* el marco: un bisel oscuro alrededor de la captura, como la carcasa de una
   pantalla. Sobre el gris de la banda es lo que le da el aire de dispositivo
   y separa la captura del fondo. */
/* el bisel va a 5px, la mitad de los 10 de la maqueta: sobre el gris de la
   banda el marco grueso pesaba mas que la propia captura.
   El radio de dentro es el de fuera MENOS el padding (22-5): asi la curva
   del bisel es igual de gruesa en las esquinas que en los lados. */
.pf__mock{ display:block; background:#1C1C1C; border-radius:22px; padding:5px; }
.pf__shot{ display:block; border-radius:17px; overflow:hidden; background:#E6E4DF; line-height:0; }
/* COVER y no contain: en la maqueta la captura llena el marco. object-position
   arriba para no perder la cabecera del sitio, que es lo que lo identifica. */
.pf__shot img{
  display:block; width:100%; height:360px;
  object-fit:cover; object-position:top;
  transition:transform .6s var(--ease);
}
.pf__mock:hover img{ transform:scale(1.02); }

.pf__panel{
  border-radius:22px; padding:26px 28px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:18px;
}
.pf__name{
  margin:0; font-weight:500; letter-spacing:-.03em; line-height:1.06;
  font-size:clamp(1.625rem,2.2vw,2rem);
}
.pf__copy{ margin:12px 0 0; font-size:.9375rem; line-height:1.45; text-wrap:pretty; }
/* pildora y no el .btn rectangular del sitio: dentro de la ficha, el boton
   de esquinas rectas competia con el radio de 22px del panel */
.pf__cta{
  align-self:flex-start; padding:13px 24px; border-radius:999px;
  font-weight:500; font-size:.9375rem; line-height:1; white-space:nowrap;
  transition:opacity .2s;
}
.pf__cta:hover{ opacity:.85; }

/* ---- el color de cada ficha ----
   Cada caso lleva el suyo en clase propia y no por :nth-child: si un dia se
   reordenan, el color se va con su caso. Son los mismos tres tratamientos
   que ya tenian las tarjetas del zigzag, con los contrastes medidos: sobre
   el naranja la letra va en TINTA (6,45:1; en blanco daria 2,99 y no pasa
   AA) y sobre el negro y el azul va en blanco (19,3:1 y 6,0:1). */
.pf__panel--naranja{ background:var(--naranja); color:var(--tinta); }
.pf__panel--naranja .pf__copy{ color:rgba(0,0,0,.68); }
.pf__panel--naranja .pf__cta{ background:var(--tinta); color:#fff; }

.pf__panel--negro{ background:#000; color:#fff; }
.pf__panel--negro .pf__copy{ color:rgba(255,255,255,.72); }
.pf__panel--negro .pf__cta{ background:var(--naranja); color:var(--tinta); }

.pf__panel--azul{ background:var(--azul); color:#fff; }
.pf__panel--azul .pf__copy{ color:rgba(255,255,255,.72); }
.pf__panel--azul .pf__cta{ background:#fff; color:var(--azul); }

/* ---- la barra de progreso ----
   .rot__progress ya la trae; aqui solo se le pone el acento del caso y el
   aire de la maqueta. */
/* el carril tambien se da la vuelta: .rot__progress lo trae en blanco al 10%
   para el fondo negro, y sobre gris no se veria */
.rot--pf .rot__progress{
  margin-top:clamp(16px,1.4vw,20px); background:rgba(14,14,16,.12);
}
.rot--pf .rot__progress span{ background:var(--pf-acento); transition:width .4s, background .3s; }

@media (prefers-reduced-motion:reduce){
  .pf__caso{ transition:none; }
  .rot--pf .rot__progress span{ transition:none; }
}
/* el corte del sitio son 940px, no los 900 de la maqueta: mas vale una sola
   linea de plegado en todo el sitio que calcar el numero */
@media (max-width:940px){
  /* auto 1fr y no las dos filas en auto: apilado, la ficha se quedaba con el
     alto de SU texto, asi que la tarjeta naranja, la negra y la azul median
     distinto y el bloque parecia encoger y crecer al girar. Con 1fr la ficha
     llena lo que sobra de la celda —que ya es la del caso mas largo— y las
     tres miden igual. */
  .pf__caso{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  /* alto automatico: con los 220px fijos de la maqueta, el cover se comia
     media web y en el telefono la captura no se veia entera. Sin alto, manda
     la proporcion real de la imagen (1494x786) y se ve completa. */
  .pf__shot img{ height:auto; }
}


/* ==========================================================================
   ARREGLOS DE MOVIL (probado en un Android de 360px, 2026-09-08)
   Van al final a proposito: tres de los cuatro son problemas de ORDEN, no de
   valores. El rediseño redefine .hero mas abajo que las media
   queries de nueva.css, asi que con la misma especificidad las pisaba y en
   el telefono seguian mandando las reglas de escritorio.
   ========================================================================== */

/* ---- 1. el pie ----
   En el telefono el correo solo ya pide mas de un tercio del ancho: los
   datos se envuelven y el hueco del cierre se acorta, que en una pantalla
   estrecha se hace muy largo. */
@media (max-width:760px){
  /* Un cuarto menos de todo: cuerpos, pesos y aires. En el telefono el pie
     ocupaba casi una pantalla entera, y con el ancho justo los enlaces en
     500 se leian mas pesados que en el escritorio, no menos.
     Los pesos bajan un escalon cada uno (600->500, 500->400): en pantalla
     chica el texto claro sobre color ya no necesita el refuerzo que si le
     hacia falta a 1440. */
  .footer{ padding:27px 0 13px; }
  .footer__lead{ font-weight:500; font-size:.6rem; }
  .footer__nav{ gap:14px 26px; margin-top:12px; }
  .footer__nav a{ font-weight:400; font-size:.77rem; }
  .footer__datos{ gap:7px 15px; margin-top:7px; font-size:.64rem; }
  .footer__base{ gap:8px; margin-top:20px; font-size:.6rem; }
  .footer__marca img{ height:21px; }
  .footer__arriba{ font-size:.71rem; }
}

/* ---- 2. el hero del home, cortado ----
   La media query de 860 le daba height:auto al hero de las INTERNAS
   (.hero--svc.hero--bloque), pero el del home se quedaba con el alto de
   pantalla. Apilado en una columna ya no cabe: la bajada se cortaba a media
   frase ("Centralizamos toda tu presencia online en un"). */
@media (max-width:860px){
  .hero{ height:auto; }
}

/* ---- 3. las fotos, menos naranjas ----
   Son fotos de estudio sobre fondo naranja saturado y en el telefono, a
   pantalla completa, el naranja se come todo lo demas. Se bajan un punto de
   saturacion y otro de contraste: siguen siendo las mismas fotos, no se
   recolorean para encajar con la marca, solo dejan de gritar. */
.hero__img,
.porque2__foto img{ filter:saturate(.82) contrast(.96); }

/* ---- 4. "neural studio" partido en dos lineas ----
   En el telefono la barra son dos cosas: el logo y el burger. Pero la
   reticula sigue siendo la de escritorio (1fr auto 1fr), que existe para
   centrar el menu; con el menu oculto la TERCERA pista se queda vacia y aun
   asi pide su mitad del sobrante, asi que al logo le quedaban unos 126px
   para un nombre que necesita 143 y caia en dos lineas.
   Con "auto 1fr" el logo pide lo suyo y el burger se va al otro extremo. */
@media (max-width:760px){
  .nav__in{ grid-template-columns:auto 1fr; }
  /* red de seguridad: pase lo que pase, el nombre no se parte */
  .nav__logo span{ white-space:nowrap; }
}
@media (max-width:360px){
  /* en pantallas de 320 el nombre ya no cabe entero: se achica JUNTO con el
     logo, para que sigan leyendose como una sola pieza */
  .nav__logo img{ height:18px; }
  .nav__logo span{ font-size:21px; }
}

/* ---- 5. la barra del rotador de proyectos ----
   El salto no era el alto del texto: era que la barra hace wrap. Con
   "Administracion de propiedades" el rubro no dejaba sitio y las flechas
   caian a la fila de abajo; con "Masoterapia" cabia todo en una. Asi que la
   barra media dos alturas distintas y el bloque entero saltaba en cada
   vuelta.
   Se arregla haciendo hueco: el contador se va en el telefono. Repite el
   ordinal que ya esta al lado en grande, y sin el hasta el rubro mas largo
   cabe en una linea sin empujar las flechas fuera de la fila.
   Aun asi el JS le reserva al rubro el alto del mas largo, por si el dia de
   mañana entra un proyecto con nombre de dos lineas. */
@media (max-width:760px){
  .pf__count{ display:none; }
}