/* =========================================================
   TEMPO FUSIÓN — sitio oficial (base: Propuesta 2)

   ESCALA TIPOGRÁFICA (Bloque E13) — única fuente de verdad.
   Nada de tamaños ad hoc por componente:
     Cuerpo .............. clamp(16px, 1vw, 17px)
     Eyebrow / etiqueta .. 14px, mayúsculas, tracking .12em
     Botón (CTA) ......... 15px, mayúsculas, tracking .1em
     Nav ................. 12px, mayúsculas, tracking .08em
     Descripción tarjeta . 16px, máximo 3 líneas
     H2 de sección ....... clamp(24px, 2.2vw, 34px)
     H1 del hero ......... clamp(30px, 3.3vw, 48px), máx 2 líneas
     Frase entre secciones clamp(24px, 2.6vw, 38px), máx 3 líneas
     Contacto en footer .. 16px
     Proceso ............. nombre 16px, descripción 15px
   Interlineado 1.2 en titulares, 1.55 en cuerpo.
   Texto corrido máximo 620px de ancho.

   Legible NO es grande: el tamaño base se ve sobrio y
   profesional; quien necesite más usa el control de tamaño.
   Fase 2 subió el piso a 16px — el cuerpo estaba en 15 y el
   público del sitio tiene entre 55 y 70 años. El nav queda
   aparte, en 12px: es UI de orientación, no lectura.
   ========================================================= */

/* TIPOGRAFÍA — Century Gothic con respaldo propio.
   Century Gothic es de Monotype y su licencia de escritorio (la que viene con
   Office) no permite subir el archivo a un servidor. Así que cada @font-face
   la pide primero con local(): quien la tenga instalada la ve tal cual. Quien
   no, baja TeX Gyre Adventor, versión libre de ITC Avant Garde Gothic — el
   mismo diseño en que se basa Century Gothic. 14 KB por peso, recortada al
   alfabeto latino. Licencia y detalles en fonts/LEEME.md.
   font-display: swap — el texto se pinta de una con la fuente del sistema y
   se cambia al llegar la definitiva; nunca queda invisible esperando. */
@font-face{
  font-family:'Tempo Gothic';
  src:local('Century Gothic'), local('CenturyGothic'),
      url('fonts/adventor-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
/* Los titulares del sitio piden 600 y Adventor no trae semibold: ese peso se
   sirve con el bold, en vez de dejar que el navegador invente uno falso. */
@font-face{
  font-family:'Tempo Gothic';
  src:local('Century Gothic Bold'), local('CenturyGothic-Bold'),
      url('fonts/adventor-bold.woff2') format('woff2');
  font-weight:500 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Acuerdo 11-sep (segunda vuelta): lo que antes era el modo de alto
     contraste pasa a ser la paleta del sitio, y el interruptor desaparece.
     Papel y tinta puros, piedra más oscura, líneas más marcadas. */
  --paper:#FFFFFF;
  --paper-dim:#F2F2F2;
  --ink:#000000;
  /* Paso 10: era #83796B, que daba 4.09:1 sobre --paper y 3.71:1 sobre
     --paper-dim (por debajo de AA 4.5:1; Lighthouse también lo marcó).
     Mismo matiz piedra, más oscuro: 5.66:1 y 5.14:1. Ojo: el dorado
     #A9824F que sugiere el criterio para eyebrows da 3.35:1 — no sirve
     como color de texto sobre fondo claro. */
  --stone:#33302A;
  --line:#8A857B;
  /* 16-sep: naranja exacto del logo oficial (#FF751F, medido en los cinco
     archivos que Miriam subió al formulario el 9-sep). Antes era #D9662E,
     más oscuro y rojizo; la clienta lo notó. */
  --wood:#FF751F;
  /* El naranja de marca da 2.7:1 sobre papel: sirve para filos, fondos e
     íconos, y como texto solo sobre negro (7.8:1). Esta versión conserva el
     matiz exacto (23°) y es la más clara que llega a 4.5:1 sobre --paper-dim
     (5.0:1 sobre --paper), así el texto naranja sobre fondo claro cumple AA. */
  --wood-texto:#BF4900;
  --gap: clamp(24px, 5vw, 72px);
  --font-primary: 'Tempo Gothic', 'Century Gothic', CenturyGothic, 'Jost', 'Poppins', sans-serif;
  /* 16-sep, reunión con Miriam: todo lo que estaba en monoespaciada —menú,
     rótulos, botones, títulos de sección— pasa a Century Gothic. La variable
     se conserva porque la usan treinta reglas; lo que cambia es a qué apunta.
     Las versales, el espaciado entre letras y el tamaño chico siguen igual:
     eso es lo que distingue un rótulo, no la familia. */
  --font-mono: var(--font-primary);
  /* La cursiva de las frases destacadas. Solo itálica, solo el latino. */
  --font-frase: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* Paso 6.6 — multiplicador del control de tamaño de texto.
     Toda la escala se define en función de --scale, incluido el término
     en vw de los clamp(): si el vw no se multiplica, en desktop el clamp
     se queda en el valor fluido y el control no haría nada. */
  --scale: 1;

  /* Escala E13 — base de landing normal: el público que necesita leer más
     grande tiene el control A/A (hasta 130%), así que el default no carga
     ese trabajo. */
  /* Fase 2 — el cuerpo estaba en 15px y las descripciones del proceso en 14.
     Para un público de 55 a 70 años, 16px es el piso del texto que se lee
     corrido; el control de la "A" sigue subiendo desde ahí. Los rótulos en
     mayúsculas pasan de 13 a 14 y los botones estrenan su propio tamaño,
     porque estaban al tamaño de un rótulo siendo lo más importante de tocar. */
  --fs-body: clamp(calc(16px * var(--scale)), calc(1vw * var(--scale)), calc(17px * var(--scale)));
  --fs-label: calc(14px * var(--scale));
  --fs-cta: calc(15px * var(--scale));
  --fs-card: calc(16px * var(--scale));
  --fs-h2: clamp(calc(24px * var(--scale)), calc(2.2vw * var(--scale)), calc(34px * var(--scale)));
  --fs-h1: clamp(calc(30px * var(--scale)), calc(3.3vw * var(--scale)), calc(48px * var(--scale)));
  --fs-phrase: clamp(calc(24px * var(--scale)), calc(2.6vw * var(--scale)), calc(38px * var(--scale)));
  --fs-contact: calc(16px * var(--scale));
  /* Fase 4 (21-sep, pedido de Kathy) — el nombre de cada categoria de
     Proyectos se leia a 16 px, el mismo tamano que un texto corrido, cuando
     es el titulo que nombra todo el carrusel que tiene encima. Sube a su
     propio escalon: por debajo del titulo de seccion (--fs-h2) y por encima
     del cuerpo, que es el lugar que le corresponde en la jerarquia. */
  --fs-cat: clamp(calc(21px * var(--scale)), calc(1.75vw * var(--scale)), calc(27px * var(--scale)));
  /* Tamaños puntuales dentro de la escala, también proporcionales */
  --fs-drawer: calc(22px * var(--scale));
  --fs-name: calc(20px * var(--scale));
  --fs-quote: calc(18px * var(--scale));
  /* La bajada de sección: el escalón entre el título y el texto corrido.
     Vivía en dos tamaños distintos —Servicios en 23 px y El equipo en 18—
     siendo el mismo papel en la página. Ahora es uno solo. */
  --fs-lead: clamp(calc(19px * var(--scale)), calc(1.55vw * var(--scale)), calc(23px * var(--scale)));
  /* El texto de las etapas se leía a 15 px, un punto por debajo del piso de
     16 que se fijó para el texto corrido pensando en el público de la
     clienta. Queda al mismo tamaño que el resto del cuerpo. */
  --fs-step: calc(16px * var(--scale));
  --measure: 620px;
}

/* Acuerdo del 11-sep: la barra recorre todo el rango de 100% a 130% en pasos
   de 1% —antes eran tres puntos fijos y se sentía trabada—. El valor lo
   escribe el script directamente en --scale; acá solo queda el respaldo por
   si el JavaScript no corre. */
html{ --scale: 1.15; }


/* Cormorant Garamond itálica, servida desde el propio sitio. Es la letra de
   las frases destacadas (acuerdo del 16-sep con Miriam). Solo la itálica y
   solo el subconjunto latino: 23 KB. Ya no se usa IBM Plex Mono, así que sus
   dos archivos y su precarga salieron del sitio. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;
  font-display:swap;src:url('fonts/cormorant-italic.woff2') format('woff2');}

/* 22-sep (tarde) — un segundo corte de la misma letra, medio, solo para la
   frase de la portada. Ahí la cursiva va sobre una foto, y en peso 400 sus
   trazos son de un pixel: se desvanecen contra la textura por más contraste
   que tenga el color. Pedir 500 sin este archivo haría que el navegador la
   engorde a la fuerza, que en una serif se ve embarrada. Es el corte real de
   la familia (OFL, igual que el otro), recortado al latín básico: 16 KB. Va
   al latín completo y no solo a las letras de la frase de hoy, para que
   cambiar ese texto en el futuro no rompa la tipografía sin aviso. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;
  font-display:swap;src:url('fonts/cormorant-italic-500-latin.woff2') format('woff2');}

/* Enlace de salto: invisible hasta que el teclado lo enfoca. */
.salto-contenido{position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--ink);color:var(--paper);padding:12px 18px;
  font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:.08em;
  transition:top .2s ease;}
.salto-contenido:focus{top:12px;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{overflow-x:hidden;margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-primary);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;}

/* Scroll entre secciones — historia corta, porque esto se ha ido y vuelto.

   3-sep: prohibido el scroll-snap, secuestraba el movimiento.
   11-sep: Miriam lo pidió en la revisión —"con 1 o 2 movimientos la
   siguiente sección debe caer acomodada, sin rebote y sin quedar a
   medias"—. Se puso `mandatory` y punto de anclaje en todas las secciones,
   a prueba.
   16-sep: la prueba falló, medida con gestos reales de scroll en el
   navegador, no a ojo. Dos cosas:

   1. Cuando una sección es más alta que la pantalla —El equipo, el perfil
      de Javier, Proyectos, Proceso— el navegador obliga a que la pantalla
      se quede dentro de ella. Para salir hay que mover más de una pantalla
      de un tirón. Desde el borde del perfil de Javier: seis gestos cortos
      hacia abajo, cero pixeles. Hacia arriba, igual.
   2. Con `mandatory` la portada tampoco soltaba: veintiséis gestos cortos
      desde arriba, cero avance. Y con `proximity` el trabón seguía ahí,
      porque cualquier punto de anclaje se traga el movimiento corto que cae
      cerca suyo.

   Así que el anclaje se retira. La página scrollea libre en los dos
   sentidos. Lo que Miriam pidió —que la sección caiga acomodada— no se
   puede tener sin esto: son la misma mecánica vista por sus dos caras.
   Para devolverlo, poner `scroll-snap-type:y proximity` en html dentro de
   una consulta de 768px y `scroll-snap-align` en los bloques que quepan
   enteros en la pantalla; las clases `snap-section` y `phrase-screen` del
   HTML siguen puestas para eso. */
html{scroll-snap-type:none;}
/* La barra ya no vive fija (se esconde sola), así que las secciones pueden
   anclar casi al borde: 84px de margen dejaba todo "a medias". */
/* La barra fija mide unos 72 px: si el ancla se detiene a 12, el titulo de
   la seccion queda debajo de ella. El margen de anclaje la despeja. */
section[id]{scroll-margin-top:84px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;scroll-snap-type:none;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-primary);font-weight:600;margin:0;letter-spacing:-0.01em;line-height:1.2;
  /* Acuerdo del 11-sep: el navegador reparte las líneas de forma pareja, así
     "proyecto" no queda solo en el renglón de abajo al achicar la pantalla. */
  text-wrap:balance;}
p{margin:0;}
a:focus-visible, button:focus-visible{outline:2px solid var(--wood);outline-offset:3px;}

.eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone);display:inline-block;margin-bottom:14px;}

/* Placeholder rotulado: nunca una foto de otra sección "mientras tanto" */
.img-pending{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;
  background:var(--paper-dim);border:1px solid var(--line);}
/* El placeholder tiene fondo claro aunque esté dentro de una sección
   oscura, así que su rótulo va siempre en --stone. Se nombra también con
   .band-dark delante porque si no, `.band-dark .eyebrow` (blanco) le gana
   por orden en la cascada y quedaba blanco sobre beige: 1.06:1. */
.img-pending .eyebrow,
.band-dark .img-pending .eyebrow{margin:0;color:var(--stone);}

/* ---------- NAV ---------- */
.site-nav{
  position:fixed;top:0;left:0;width:100%;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  /* 22-sep — el logo arrancaba a 8 px del borde de la pantalla y toda la
     barra se leia pegada al marco del navegador. Sube a 20 px arriba y 14
     abajo: sobre la portada el aire no se ve como caja, y cuando la barra se
     vuelve solida queda una franja con respiracion en vez de una cinta. */
  padding:20px var(--gap) 14px;
  background:transparent;color:#fff;
  transition:background-color .35s ease, color .35s ease, transform .35s cubic-bezier(.33,1,.68,1);
}
.site-nav.is-solid{background:rgba(250,250,247,0.94);backdrop-filter:blur(6px);color:var(--ink);border-bottom:1px solid var(--line);
  /* sombra editorial: base tibia (--ink, no negro puro), blur ancho,
     casi invisible — separa el header sin dibujar una franja */
  box-shadow:0 10px 32px rgba(23,21,15,.08);}
.site-nav.is-hidden{transform:translateY(-100%);}
/* Fase 2 — el header se esconde al bajar, y en escritorio eso está bien
   porque los enlaces siguen a un scroll de distancia. En celular el header
   ES el menú: si se esconde, para abrirlo hay que subir primero. Bajo 1000px
   se queda fijo. */
@media (max-width:999px){ .site-nav.is-hidden{transform:none;} }
.site-nav .logo{display:flex;align-items:center;position:relative;height:42px;width:170px;
  /* Es un enlace: el área de toque no baja de 44px aunque el logo mida menos. */
  min-height:44px;flex-shrink:0;
  /* 30-sep — en iPad horizontal el menú completo entraba justo y quedaba
     pegado al logo. Este margen le guarda aire; si no alcanza, script.js
     detecta el desborde y pasa la barra al botón MENÚ. */
  margin-right:clamp(28px,3.5vw,56px);
  /* Fase 3 — es un enlace al inicio y nada lo indicaba. */
  transition:opacity .2s ease;}
.site-nav .logo:hover{opacity:.8;}
/* Dos logos reales apilados: el naranja de la marca no se toca nunca.
   16-sep: son los archivos oficiales del formulario (marca/logos-oficiales,
   1.png negro y 5.png blanco) recortados a su contenido y exportados a 312px
   de alto; los anteriores eran copias de 294px que ni siquiera tenían el
   naranja correcto. Proporción 1,51: a 78px de alto miden 118px de ancho. */
.logo-mark{position:absolute;left:0;top:50%;transform:translateY(-50%);height:42px;
  width:auto;transition:opacity .35s ease;}
.logo-mark-white{opacity:1;}
.logo-mark-black{opacity:0;}
.site-nav.is-solid .logo-mark-white{opacity:0;}
.site-nav.is-solid .logo-mark-black{opacity:1;}
/* El nav no escala con --scale: es UI de orientación, no lectura. Más
   pequeño que las etiquetas de contenido, a pedido de la clienta. */
/* Acuerdo del 11-sep: el menú se corre a la derecha, pegado a las
   herramientas, y las opciones se separan con un punto tenue para que no se
   lean como un bloque corrido. */
.site-nav ul{list-style:none;display:flex;gap:16px;align-items:center;margin:0 0 0 auto;padding:0;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;}
/* Área de clic ≥44px */
.site-nav ul a{color:inherit;position:relative;display:inline-flex;align-items:center;
  min-height:44px;white-space:nowrap;}
/* Fase 3 — antes el enlace bajaba a 65% de opacidad al pasar el mouse: se
   apagaba, que para este público se lee como "desactivado", y de paso bajaba
   el contraste. Ahora aparece una línea de marca bajo el enlace: se enciende
   en vez de apagarse y el texto mantiene su contraste. */
.site-nav ul a::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:2px;
  background:var(--wood);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;}
.site-nav ul a:hover::after,
.site-nav ul a:focus-visible::after{transform:scaleX(1);}
/* Punto separador entre opciones: decorativo, no se lee en voz alta. */
.site-nav ul li + li:not(.nav-cta-item)::before{content:'·';margin-right:16px;opacity:.45;}
.site-nav ul li{display:flex;align-items:center;}
.nav-tools{margin-left:22px;}
/* Botón WhatsApp del nav: solo ícono (pedido de la clienta, 3-sep);
   el nombre accesible va en aria-label y el área de clic se mantiene 44px. */
/* El ícono va en blanco, como se pidió. Sobre la barra clara el blanco solo
   no se vería, así que viaja en un disco oscuro: el glifo queda blanco y se
   lee igual sobre la portada y sobre la barra sólida. */
.nav-whatsapp{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:44px;min-height:44px;color:#fff;}
.nav-whatsapp svg{width:22px;height:22px;padding:7px;box-sizing:content-box;
  background:var(--ink);border-radius:50%;}
/* Fase 3 — el ícono más importante del sitio solo bajaba de opacidad. Ahora
   se llena del naranja de marca: apretado y suelto se ven distinto. */
.nav-whatsapp svg{transition:background-color .2s ease;}
.nav-whatsapp:hover svg,.nav-whatsapp:focus-visible svg{background:var(--wood);color:var(--ink);}
.nav-whatsapp svg{flex-shrink:0;}
.nav-toggle{display:none;background:none;border:1px solid currentColor;color:inherit;padding:10px 16px;cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;min-height:44px;}
/* La clienta quiere el nav siempre desplegado en desktop. Con la escala
   de landing normal (nav 13px) el nav completo entra desde ~1000px; solo
   por debajo — tablets y mobile, donde físicamente no cabe — colapsa al
   menú. */
/* Fase 2 — bajo 1000px la navegación pasa al menú desplegable, pero el botón
   de WhatsApp vivía dentro de esa misma lista y desaparecía con ella: en
   celular, que es justo donde WhatsApp se usa, el único acceso quedaba
   escondido dentro del menú. Ahora se ocultan los enlaces uno por uno y el
   ícono se queda visible en la barra. */
@media (max-width:999px){
  .site-nav ul li:not(.nav-cta-item){display:none;}
  .site-nav ul{gap:0;}
  .nav-toggle{display:block;}
}
/* Revisión 11-sep: mismo colapso cuando el desborde es por zoom o texto
   agrandado — la clase la pone script.js midiendo el ancho real. */
.site-nav.nav-compact ul li:not(.nav-cta-item){display:none;}
.site-nav.nav-compact ul{gap:0;}
.site-nav.nav-compact .nav-toggle{display:block;}

/* Paso 6.6 — control de tamaño de texto.
   Va fuera del <ul> que colapsa: en mobile el menú se esconde detrás de
   "Menú", y este control es justamente el que más falta hace ahí, así que
   queda siempre visible. Sus propias etiquetas NO escalan (font-size fijo):
   si el control creciera con la página, terminaría empujando al nav. */
.nav-tools{display:flex;align-items:center;gap:8px;flex-shrink:0;}
/* Un solo botón "A" que abre el panel de ajustes de lectura:
   barra de tamaño (3 escalones) + alto contraste. */
.a11y-menu{position:relative;}
/* Acuerdo 11-sep: la "A" sola no le decía nada a nadie. Letra chica junto a
   letra grande se entiende sin leer; la lupa sola se confundía con buscar. */
.a11y-toggle{display:inline-flex;align-items:baseline;justify-content:center;gap:1px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:inherit;cursor:pointer;
  font-family:var(--font-mono);font-size:17px;line-height:1;border-radius:2px;
  transition:background .2s ease;
}
.a11y-toggle:hover, .a11y-toggle[aria-expanded="true"]{background:rgba(127,127,127,.22);}
.a11y-panel{
  position:absolute;top:calc(100% + 6px);right:0;min-width:230px;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:2px;box-shadow:0 18px 40px -18px rgba(23,21,15,.35);
  padding:16px;display:flex;flex-direction:column;gap:14px;
}
.a11y-panel[hidden]{display:none;}
.a11y-row{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-card);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--stone);}
.a11y-row input[type="range"]{width:100%;accent-color:var(--wood);cursor:pointer;height:24px;}
.a11y-check{flex-direction:row;align-items:center;gap:10px;cursor:pointer;min-height:24px;}
.a11y-check input{accent-color:var(--wood);width:18px;height:18px;cursor:pointer;}

.nav-drawer{position:fixed;inset:0;background:var(--ink);color:var(--paper);
  transform:translateY(-100%);transition:transform .35s ease;z-index:80;
  display:flex;flex-direction:column;justify-content:center;padding:40px var(--gap);}
.nav-drawer.open{transform:translateY(0);}
.nav-drawer ul{list-style:none;padding:0;margin:0;font-family:var(--font-primary);font-size:var(--fs-drawer);line-height:2;}
/* Fase 2 — el renglón medía 44px pero el enlace en sí solo 20px de alto: el
   dedo caía al lado del texto y no pasaba nada. Ahora el área de toque ocupa
   el renglón completo. */
.nav-drawer ul a{display:flex;align-items:center;min-height:48px;}
.nav-drawer .close-btn{position:absolute;top:24px;right:var(--gap);background:none;border:none;color:var(--paper);cursor:pointer;
  font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em;min-height:44px;min-width:44px;}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;}
.hero-slider{position:absolute;inset:0;z-index:0;}
/* Fase 3 — el acercamiento duraba 7s pero las fotos cambian cada 5,5: nunca
   llegaba al final y saltaba al reiniciar. Ahora termina justo cuando la foto
   se va. El valor va junto al intervalo de script.js: si uno cambia, el otro
   también. */
.hero-slide{position:absolute;inset:0;opacity:0;transform:scale(1.08);
  transition:opacity 1.8s ease-in-out, transform 5.5s ease-out;}
.hero-slide.is-active{opacity:1;transform:scale(1);z-index:1;}
/* Overlay reforzado: AA para el texto blanco sobre cualquier foto */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(23,21,15,.45) 0%, rgba(23,21,15,.6) 100%);z-index:2;}
.hero-content{position:relative;z-index:3;color:#fff;max-width:940px;padding:0 24px;}
.hero-content .eyebrow{color:rgba(255,255,255,.85);}
/* H1: máximo 2 líneas — el ancho lo fuerza a romper en 2 y no más */
.hero-content h1{font-size:var(--fs-h1);line-height:1.2;margin:0 auto 20px;max-width:100%;
  opacity:0;transform:translateY(22px);animation:fadeUp .9s ease-out forwards;animation-delay:.15s;}
.hero-highlight{position:relative;display:inline-block;}
.hero-highlight svg{position:absolute;left:0;bottom:-8px;width:100%;height:12px;overflow:visible;}
.hero-highlight path{stroke:var(--wood);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220;animation:drawLine .8s ease-out forwards;animation-delay:.9s;}
@keyframes drawLine{ to{stroke-dashoffset:0;} }
/* Kathy (21-sep): «ese naranja, cómo puede destacar mejor». Se midió el
   naranja contra las cuatro fotos de portada, no contra una: daba de 3,62:1
   (construcción) a 6,09:1 (arquitectura), o sea que fallaba AA en dos de las
   cuatro — y las dos que fallan son las de tono cálido, donde además el
   naranja sobre madera no resalta aunque cumpla. El 7,8:1 que decía esta nota
   valía para una foto oscura, no para todas.
   La salida no es oscurecer el velo entero, que apagaría las fotos: es un velo
   suave detrás del bloque de texto, que se desvanece antes de llegar a los
   bordes. La foto sigue brillante donde se ve y el naranja queda siempre sobre
   una base oscura y neutra: pasa a 5,55:1–7,07:1 en las cuatro. */
.hero-content::before{
  content:'';position:absolute;z-index:-1;inset:-8% -12%;pointer-events:none;
  background:radial-gradient(ellipse at center,
    rgba(12,11,8,.50) 0%, rgba(12,11,8,.38) 48%, rgba(12,11,8,0) 76%);
}
/* La frase de Javier: en naranja y en cursiva, debajo del titular. */
.hero-frase{font-family:var(--font-frase);font-style:italic;font-weight:500;
  color:var(--wood) !important;font-size:calc(var(--fs-quote) * 1.32) !important;
  line-height:1.3;letter-spacing:0;margin:0 auto 18px !important;max-width:30ch !important;}
.hero-content .eyebrow{margin-bottom:0;}
.hero-content p{font-size:var(--fs-body);max-width:52ch;margin:0 auto;color:rgba(255,255,255,.92);
  opacity:0;transform:translateY(22px);animation:fadeUp .9s ease-out forwards;animation-delay:.32s;}
/* 16-sep: los dos botones van en una sola fila, más abajo y más chicos.
   En celular se apilan, que es donde no caben de a dos. */
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:nowrap;margin-top:46px;
  opacity:0;transform:translateY(22px);animation:fadeUp .9s ease-out forwards;animation-delay:.5s;}
.hero-actions .cta{padding:12px 20px;font-size:calc(var(--fs-cta) * .86);letter-spacing:.07em;}
@media (max-width:760px){
  .hero-actions{flex-wrap:wrap;margin-top:32px;}
  .hero-actions .cta{width:100%;justify-content:center;}
}
@keyframes fadeUp{ to{opacity:1;transform:translateY(0);} }

.cta{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;min-height:48px;
  font-family:var(--font-mono);font-size:var(--fs-cta);text-transform:uppercase;letter-spacing:.1em;
  transition:background .2s ease, color .2s ease, transform .2s ease;border-radius:2px;}
.cta-primary{background:#fff;color:var(--ink);}
/* Fase 3 — el botón principal solo subía 2px. Ahora también toma el color de
   marca, igual que el del proceso, que ya lo hacía: un solo comportamiento
   para el mismo botón en todo el sitio. */
/* Sobre el naranja de marca el texto va en tinta, no en blanco: blanco da
   2,8:1 y tinta 7,6:1. Antes el naranja era más oscuro y el blanco daba
   3,6:1 —tampoco cumplía—; al tomar el naranja exacto del logo se corrige
   de una vez. */
.cta-primary:hover{transform:translateY(-2px);background:var(--wood);color:var(--ink);}
.cta-secondary{border:1px solid rgba(255,255,255,.75);color:#fff;}
.cta-secondary:hover{background:rgba(255,255,255,.12);}

/* ---------- Secciones / grillas (compartido) ---------- */
.section{padding:96px var(--gap);}
/* Ritmo de respiro uniforme entre secciones (punto 3 del acabado):
   sección(96) + frase(80) = 176px en toda unión. La única unión directa
   sección-sección (Servicios -> El equipo) daba 192: el adyacente baja
   su padding-top a 80 y también suma 176. En mobile todo escala a
   64/56 = 120px por unión (criterio §6: mínimo 64 en mobile). */
.section + .section{padding-top:80px;}
@media (max-width:640px){
  .section{padding-top:64px;padding-bottom:64px;}
  .section + .section{padding-top:56px;}
}
.band-light{background:var(--paper);color:var(--ink);}
.band-dark{background:var(--ink);color:var(--paper);}
.band-dark p{color:rgba(250,250,247,0.78);}
.band-dark .eyebrow{color:rgba(250,250,247,0.65);}
.section-head{margin-bottom:48px;}
.section-head h2{font-size:var(--fs-h2);}
/* Títulos de sección en naranja (acuerdo del 16-sep). Sobre fondo claro va la
   versión oscura del naranja, que cumple contraste; sobre negro, el de marca. */
.titulo-naranja{color:var(--wood-texto);}
.band-dark .titulo-naranja{color:var(--wood);}
.section-head .eyebrow{display:block;}
.section-head-center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;}

/* Sobre Tempo Fusión: texto del brochure, medida 620px */
.about-body{max-width:var(--measure);margin:0 auto;}
.about-body p + p{margin-top:20px;}
/* La respuesta de Miriam a "por qué elegirlos a ustedes" (formulario,
   10-sep). No es más descripción: es el argumento, así que se separa de los
   dos párrafos anteriores con el filo de marca en vez de ir como un tercer
   párrafo más. */
.about-argumento{margin-top:32px;padding-left:22px;
  border-left:3px solid var(--wood);
  font-size:var(--fs-body);line-height:1.55;}
@media (max-width:640px){ .about-argumento{padding-left:16px;} }


/* ---------- Servicios (16-sep) ----------
   Las tarjetas giraban y escondían el texto detrás del mouse. Ahora todo se
   ve de entrada, en dos columnas, con la foto al lado del nombre y debajo el
   texto y la lista de la lámina 06 del brochure. */
.servicios-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px;}
/* 16-sep (Daniela): la sección se veía simple y la foto quedaba a menos de
   la mitad del alto del texto, como una estampilla al lado de una columna
   larga. Primero se probó la foto al lado, estirada al alto del bloque, y
   salió angosta: el ancho lo daba la columna y el alto lo daba el texto, así
   que cuanto más angosta la columna, más larga se volvía la foto. Es un
   círculo que no se arregla moviendo el porcentaje.

   Ahora la foto va **arriba, del ancho completo del bloque**, en 3:2, y el
   texto debajo a lo ancho también. La foto pasa de 223×394 a 621×414: casi
   el triple de superficie, y apaisada, que es como se ve una obra. El texto
   gana medida de lectura en vez de perderla. Todo sobre el gris tenue de la
   marca, sin sombras ni bordes: lo que separa un bloque del otro es el
   fondo, no una caja dibujada. */
.servicio{display:grid;grid-template-columns:1fr;gap:0;
  background:var(--paper-dim);border-radius:2px;overflow:hidden;
  align-content:start;}
.servicio-foto{overflow:hidden;}
/* Las fotos estaban quietas. Con mouse encima, la foto se acerca apenas
   —1,04 en poco menos de un segundo— dentro de su propio marco: no tapa ni
   esconde nada, solo quita la sensación de lámina pegada. En pantalla táctil
   no pasa nada, y con "reducir movimiento" tampoco. */
@media (hover:hover) and (pointer:fine){
  .servicio-foto img{transition:transform .9s cubic-bezier(.22,1,.36,1);}
  .servicio:hover .servicio-foto img{transform:scale(1.04);}
}
@media (prefers-reduced-motion: reduce){
  .servicio-foto img{transition:none;}
  .servicio:hover .servicio-foto img{transform:none;}
}
/* 21-sep — el marco pasa de 3:2 a cuadrado. Las cuatro fotos de Servicios
   son verticales (900x1200) porque vienen del brochure, que es un documento
   vertical: contra un marco 3:2 el recorte se comia exactamente la mitad de
   cada foto, un cuarto arriba y un cuarto abajo, y el edificio quedaba sin
   techo y sin suelo. En cuadrado se ve el 75%: se pierde un octavo por lado
   y la escena se lee entera. Es el marco mas ancho que las fotos verticales
   aguantan sin decapitar la obra. Si algun dia llegan fotos apaisadas de
   Miriam, el 3:2 vuelve a ser la eleccion correcta. */
.servicio-foto img{width:100%;height:auto;display:block;aspect-ratio:1/1;
  object-fit:cover;object-position:center;}
.servicio-texto{min-width:0;padding:28px 32px 34px;}
.servicio-nom{font-size:var(--fs-contact);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;line-height:1.25;margin:0;}
.servicio-desc{margin:10px 0 0;font-size:var(--fs-card);line-height:1.5;
  color:var(--stone);}
.servicio-lista{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;}
.servicio-lista li{position:relative;padding-left:15px;font-size:var(--fs-label);
  line-height:1.45;color:var(--stone);}
.servicio-lista li::before{content:'';position:absolute;left:0;top:.6em;
  width:6px;height:1px;background:var(--wood);}
/* El enlace a la cuenta de Espacios Esenciales, que Miriam aprobó. */
.servicio-ig{display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-size:var(--fs-label);color:var(--wood-texto);min-height:44px;}
.servicio-ig:hover,.servicio-ig:focus-visible{text-decoration:underline;
  text-underline-offset:3px;}
.servicio-ig svg{flex-shrink:0;}

/* Entrada al hacer scroll: sube apenas y se enciende. Sin exagerar. */
.servicio{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);}
.servicio.a-la-vista{opacity:1;transform:none;}
.servicios-grid .servicio:nth-child(2){transition-delay:.09s;}
.servicios-grid .servicio:nth-child(3){transition-delay:.18s;}
.servicios-grid .servicio:nth-child(4){transition-delay:.27s;}
@media (prefers-reduced-motion: reduce){
  .servicio{opacity:1;transform:none;transition:none;}
}
@media (max-width:860px){
  .servicios-grid{grid-template-columns:1fr;gap:38px;}
}
@media (max-width:640px){
  /* En pantalla angosta el marco es el mismo cuadrado: asi la foto se ve
     igual en telefono y en escritorio, y no cambia que parte de la obra se
     muestra segun el tamano de la pantalla. */
  .servicio-texto{padding:24px 22px 28px;}
}

/* La bajada de la lámina 06 del brochure. Estaba centrada por herencia de la
   regla general, pensada para los encabezados centrados, y quedaba flotando
   en mitad de la fila. Va debajo del título y alineada con él, que es donde
   empieza a leerse la sección. Sube un punto de tamaño para leerse como
   entrada y no como un párrafo más, y entra con la misma subida discreta de
   las tarjetas, un instante antes que ellas. */
#servicios .section-lead{margin-top:24px;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);}
#servicios .section-lead.a-la-vista{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  #servicios .section-lead{opacity:1;transform:none;transition:none;}
}
@media (max-width:860px){
  #servicios .section-lead{margin-top:20px;}
}

/* ---------- El equipo: la hoja de vida de cada quien ----------
   16-sep, pedido de Miriam: "el perfil profesional de ambos está demasiado
   escueto". Antes había foto, nombre, rol y un párrafo. Ahora va la lámina
   completa del brochure —trayectoria, escalas o áreas, formación— con el
   texto literal. Nada se esconde tras hover ni acordeón: el público llega a
   los 70 años y todo tiene que estar a la vista. */
.perfil + .perfil{margin-top:8px;}
.cv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px;
  padding:4px 0 36px;}
/* El rótulo de cada bloque: mismo formato que los demás rótulos del sitio
   —versales, monoespaciada, naranja de marca— que sobre negro da 7,6:1. */
.cv-rotulo{font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:.1em;color:var(--wood);
  margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid rgba(250,250,247,.18);}
.band-dark .cv-rotulo{color:var(--wood);}

/* Trayectoria: los años quedan en su propia columna, alineados, para que se
   lea como una línea de tiempo y no como una lista de renglones sueltos. */
.cv-trayectoria{list-style:none;margin:0;padding:0;display:grid;gap:16px;}
.cv-trayectoria li{display:grid;grid-template-columns:auto 1fr;gap:14px;
  align-items:baseline;}
.cv-anios{font-family:var(--font-mono);font-size:var(--fs-label);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:rgba(250,250,247,.62);}
.cv-hecho{display:block;min-width:0;}
.cv-hecho strong{display:block;font-weight:600;font-size:var(--fs-card);
  line-height:1.3;}
.cv-hecho span{display:block;font-size:var(--fs-card);line-height:1.45;
  color:rgba(250,250,247,.78);}
.cv-pais{font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:.08em;margin-top:3px;
  color:rgba(250,250,247,.55);}

/* Escalas y áreas: término y definición, no viñetas. */
.cv-lista{margin:0;display:grid;gap:14px;}
.cv-lista dt{font-weight:600;font-size:var(--fs-card);line-height:1.3;}
.cv-lista dd{margin:2px 0 0;font-size:var(--fs-card);line-height:1.5;
  color:rgba(250,250,247,.78);}

.cv-puntos{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.cv-puntos li{position:relative;padding-left:16px;font-size:var(--fs-card);
  line-height:1.5;color:rgba(250,250,247,.78);}
.cv-puntos li::before{content:'';position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--wood);}
.cv-parrafo{font-size:var(--fs-card);line-height:1.5;}
.band-dark .cv-parrafo{color:rgba(250,250,247,.78);}





@media (max-width:860px){
  .cv{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:420px){
  .cv-trayectoria li{grid-template-columns:1fr;gap:3px;}
}


/* Formación y especialización empiezan cerradas (acuerdo 16-sep): el perfil
   se lee de un vistazo y quien quiera el detalle lo abre. Trayectoria y
   experiencia quedan siempre a la vista. */
.cv-boton{background:none;border:none;padding:0 0 8px;margin:0 0 14px;width:100%;
  cursor:pointer;color:var(--wood);font:inherit;
  font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.1em;border-bottom:1px solid rgba(250,250,247,.18);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;text-align:left;}
.cv-mas{width:14px;height:14px;position:relative;flex-shrink:0;}
.cv-mas::before,.cv-mas::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .25s ease;}
.cv-mas::before{width:11px;height:1.5px;}
.cv-mas::after{width:1.5px;height:11px;}
/* 30-sep — acuerdo de la reunión del 25-sep: "Formación complementaria" y
   "Especialización" se veían más pálidos que "Trayectoria profesional", que
   es un h4 y ya iba en negrita. Mismo peso para los cuatro rótulos. */
.cv-boton{font-weight:700;}
.cv-boton[aria-expanded="true"] .cv-mas::after{transform:translate(-50%,-50%) scaleY(0);}
.cv-panel{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .32s cubic-bezier(.33,1,.68,1);}
.cv-panel>*{min-height:0;}
.cv-boton[aria-expanded="true"] + .cv-panel{grid-template-rows:1fr;}

/* El perfil de Javier va sobre papel: todo lo pensado para negro necesita su
   color de texto. */
.perfil-javier{padding-top:56px;}
.band-light .cv-boton{border-bottom-color:var(--line);color:var(--wood-texto);}
/* El rol va en naranja de marca, que está calculado para fondo negro: sobre
   el papel del perfil de Javier da 2,7:1 y hay que usar la versión oscura,
   5,0:1. Lo detectó la auditoría al pasar esa sección a blanco. */
/* 30-sep — el cargo de Javier se veía pálido. La reunión del 25-sep acordó
   negrita (Kathy) y la clienta pidió además sombra: una sombra corta y tibia
   para que la letra se despegue del fondo claro. La negrita va en los dos
   perfiles para que se lean iguales. */
.team-role{font-weight:600;}
.band-light .team-role{color:var(--wood-texto);text-shadow:0 1px 2px rgba(23,21,15,.28);}
.band-light .cv-rotulo{color:var(--wood-texto);border-bottom-color:var(--line);}
.band-light .cv-anios,.band-light .cv-hecho span,.band-light .cv-lista dd,
.band-light .cv-puntos li,.band-light .cv-parrafo,
.band-light .team-member .bio{color:var(--stone);}
.band-light .cv-pais{color:var(--line);}
.band-light .team-row{border-top-color:var(--line);}

/* El cierre vuelve a negro, con la frase de la visión integral. */
.equipo-cierre{padding-top:64px;}
.frase-vision{max-width:22ch;}
.equipo-nota{margin:30px 0 0;max-width:var(--measure);font-size:var(--fs-card);
  line-height:1.55;}
.band-dark .equipo-nota{color:rgba(250,250,247,.78);}

/* ---------- Proyectos ya realizados (E11, mecánica Servicios P1) ---------- */
/* Las mismas 4 categorías, cada una con su carrusel: avanza solo con
   crossfade y tiene flechas para avanzar a mano. Sobre las fotos no va
   ningún texto — el único texto es el nombre de la categoría. */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px;}
@media (max-width:760px){.cat-grid{grid-template-columns:1fr;}}
/* 22-sep — la foto de cada proyecto no cabia en una pantalla. El marco es
   4:5, asi que su alto es 1,25 veces el ancho de la columna, y la columna la
   daba el ancho de la ventana sin ningun tope: en una pantalla de 1818 px
   cada foto medi­a 818x1023 contra un alto util de 636. Habia que hacer dos
   scrolls para ver una sola obra.
   Recortar la foto no es opcion —las fotos de Miriam van enteras, decision
   del 15-sep—, asi que lo que se limita es el ancho. El tope lo pone el alto
   de la ventana: dos columnas de 4:5 mas el espacio entre ellas ocupan
   1,6 veces el alto disponible. Restando 200 px para el nombre de la
   categoria y el aire de arriba y abajo, el bloque entero queda en un 80%
   del alto de la pantalla, sea cual sea. El tope de 1080 px evita que en una
   pantalla muy alta las fotos crezcan mas de lo razonable. */
@media (min-width:761px){
  .cat-grid{max-width:min(1080px, calc((100vh - 200px) * 1.6 + 24px));
    max-width:min(1080px, calc((100svh - 200px) * 1.6 + 24px));
    margin-inline:auto;}
}
/* 4:5 vertical: exactamente como Miriam manda las fotos. Antes era 4/3
   horizontal y recortaba el 40% del alto —se perdian techos y cielo—, y
   despues 1600/1740, que le quitaba la franja de la marca de agua. Decision
   del 15-sep: sus archivos van tal cual, marca de agua incluida, sin que
   nosotros recortemos nada. */
.cat-carousel{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--paper-dim);
  /* Fase 3 — las tarjetas de servicios flotan y estas no, siendo el mismo
     nivel: cuatro bloques con foto y título en una grilla. Acá la sombra de
     tinta sería invisible sobre el fondo oscuro, así que la elevación se
     marca con un filo claro más una sombra profunda. */
  box-shadow:0 0 0 1px rgba(250,250,247,.14), 0 26px 48px -26px rgba(0,0,0,.55);}
.cat-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;}
/* Las tres del aeropuerto vienen de otra fuente y son horizontales: se
   muestran enteras sobre el fondo, en vez de recortarse al marco. */
.cat-slide.is-active{opacity:1;}
.cat-empty{display:flex;align-items:center;justify-content:center;}
.cat-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(23,21,15,.55);color:#fff;border:none;cursor:pointer;
  font-size:22px;line-height:1;transition:background .2s ease;}
.cat-arrow:hover,.cat-arrow:focus-visible{background:rgba(23,21,15,.85);}
.cat-prev{left:0;}
.cat-next{right:0;}
.cat-name{margin-top:18px;font-size:var(--fs-cat);font-weight:600;line-height:1.25;}

/* ---------- El equipo ---------- */
/* Fase 3 — era la única de las nueve secciones que entraba animada: se leía
   como hecha en otro momento, y en capturas de página completa salía en
   negro porque la animación no se disparaba. Queda visible desde el inicio.
   La clase .is-visible que pone el script ya no cambia nada; se deja para no
   romperlo. */
.about-block{max-width:1040px;margin-left:auto;margin-right:auto;}
/* La bajada del brochure bajo el título de la sección. */
/* El centrado de la bajada estaba en la regla general, así que también se
   aplicaba bajo un título alineado a la izquierda: en Servicios la frase
   quedaba flotando en mitad de la fila, sin nada que la sostuviera. El
   centrado queda solo donde el encabezado entero va centrado. */
.section-lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.45;
  max-width:52ch;text-wrap:pretty;}
.section-head-center .section-lead{margin-left:auto;margin-right:auto;}
.band-dark .section-lead{color:rgba(250,250,247,.86);}
.team-row{display:flex;gap:32px;align-items:center;padding:28px 0;border-top:1px solid var(--line);}
.band-dark .team-row{border-top-color:rgba(250,250,247,.18);}
.team-row:first-of-type{border-top:none;}
.team-row.team-row-reverse{flex-direction:row-reverse;}
/* Los dos retratos, mismo tamaño y mismo recorte (criterio §7) */
/* Acuerdo del 11-sep: los retratos se veían muy chicos. Suben de 150 a 220
   px conservando el cuadrado y el encuadre —no se recortan más— y siguen uno
   a cada lado. */
.person-photo{width:220px;height:220px;flex-shrink:0;border-radius:2px;overflow:hidden;}
.person-photo img{width:100%;height:100%;object-fit:cover;}
.person-photo .img-pending{min-height:0;}
.team-member{flex:1;min-width:0;}
.team-member h3{font-size:var(--fs-name);margin-bottom:4px;}
.team-role{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--wood);text-transform:uppercase;
  letter-spacing:.1em;display:block;margin-bottom:10px;}
.team-member .bio{font-size:var(--fs-body);line-height:1.55;color:var(--stone);max-width:var(--measure);}
.band-dark .team-member .bio{color:rgba(250,250,247,.78);}
@media (max-width:640px){
  .team-row, .team-row.team-row-reverse{flex-direction:column;align-items:flex-start;gap:18px;}
  .person-photo{width:180px;height:180px;}
}

/* ---------- Frase entre secciones ----------
   Pausa editorial a pantalla completa. Queda una sola con bloque propio: las
   otras dos pasaron a vivir dentro de su sección (acuerdo del 16-sep). */
.phrase-screen{min-height:54vh;display:flex;align-items:center;padding:80px var(--gap);}
@media (max-width:640px){ .phrase-screen{padding-top:56px;padding-bottom:56px;min-height:42vh;} }

/* ---------- Frases destacadas (reunión 16-sep) ----------
   Miriam eligió dos combinaciones del documento de propuestas y nos dejó
   decidir cuál va en cada frase. La cursiva es Cormorant; la redonda, la del
   propio sitio. El movimiento es "respiración" (sube apenas y se enciende
   despacio) con el "subrayado que se dibuja" encima, los dos que pidió. */
.frase-destacada{margin:0;max-width:26ch;font-family:var(--font-primary);
  font-weight:600;letter-spacing:-.01em;font-size:var(--fs-phrase);
  line-height:1.22;color:var(--paper);}
.band-light .frase-destacada{color:var(--ink);}
.frase-destacada .regla{display:block;width:56px;height:2px;
  background:rgba(169,130,79,.75);margin-bottom:34px;}
.frase-cuerpo{display:block;}
/* 22-sep — las frases que llevan un <br> propio estaban encerradas en una
   medida de 26 caracteres contada sobre la redonda, y la linea en cursiva es
   mas grande y mucho mas ancha. Resultado: la linea se partia donde no debia
   y quedaba una palabra sola colgando —"para" en una frase, "viven." en la
   siguiente—. Medido a 1440: la primera linea de "Espacios y proyectos
   creados para" pide 628 px y la caja daba 550; la de "La arquitectura no
   termina en la forma." pide 698 contra 635.
   Ahora la caja se ajusta a su contenido, asi que el unico corte es el <br>
   que se escribio a proposito, y el tope del 100% la sigue plegando en
   pantalla angosta. Se ajusta sola cuando el lector sube el tamano del texto.
   La frase de la vision no lleva <br> y se deja como esta: esa si tiene que
   fluir dentro de su medida. */
.frase-dentro .frase-cuerpo,
.frase-cierre .frase-cuerpo,
.mezcla-cursiva .frase-cuerpo{width:max-content;max-width:100%;}
/* La frase de cierre lleva ademas un tope propio de 30 caracteres puesto
   desde la seccion, en .frase-final .frase-destacada (linea 834). Ese
   selector pesa mas que una sola clase y ademas viene despues, asi que
   para soltarla hay que nombrarla con las dos clases. */
.frase-dentro,.frase-destacada.mezcla-cursiva{max-width:100%;}
.frase-final .frase-destacada.frase-cierre{max-width:100%;}

/* Combinación 2: la segunda línea entera en cursiva y más grande. */
.cursiva{font-family:var(--font-frase);font-style:italic;font-weight:400;
  letter-spacing:0;font-size:1.3em;}
/* Combinación 3: toda la frase en cursiva, con la palabra que remata en la
   redonda y en versales. */
.mezcla-cursiva .frase-cuerpo{font-family:var(--font-frase);font-style:italic;
  font-weight:400;letter-spacing:0;font-size:1.22em;line-height:1.18;}
.clave{font-family:var(--font-primary);font-style:normal;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:.78em;}

/* El trazo naranja se dibuja de izquierda a derecha. Va como fondo y no como
   caja aparte, para que siga funcionando si el tramo subrayado cambia de
   renglón en pantalla angosta. */
.subrayado{background-image:linear-gradient(var(--wood),var(--wood));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 3px;
  padding-bottom:.08em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .9s cubic-bezier(.22,1,.36,1) .85s;}
.frase-destacada.se-ve .subrayado{background-size:100% 3px;}

.frase-cuerpo{opacity:0;transform:translateY(16px);
  transition:opacity 1.25s ease, transform 1.25s cubic-bezier(.22,1,.36,1);}
.frase-destacada.se-ve .frase-cuerpo{opacity:1;transform:none;}
.frase-destacada .regla{transform:scaleX(0);transform-origin:left;
  transition:transform .95s cubic-bezier(.22,1,.36,1) .2s;}
.frase-destacada.se-ve .regla{transform:none;}
@media (prefers-reduced-motion: reduce){
  .frase-cuerpo{opacity:1;transform:none;transition:none;}
  .frase-destacada .regla{transform:none;transition:none;}
  .subrayado{background-size:100% 3px;transition:none;}
}

/* La frase que cierra Proyectos, desde adentro de la sección. */
.frase-dentro{margin-top:76px;}
/* La que cierra el sitio va centrada, en su propio bloque claro. Estaba
   dentro de Nuestro proceso, y como esa sección y el pie van los dos en
   negro, se leía como parte del pie. */
.frase-cierre{margin:0 auto;text-align:center;}
.frase-cierre .regla{margin-left:auto;margin-right:auto;}
.frase-final{display:flex;justify-content:center;}
.frase-final .frase-destacada{max-width:30ch;}

/* ---------- Nuestro proceso: recorrido de línea central ----------
   Maqueta A del documento de propuestas, elegida por Miriam el 16-sep. Un
   solo camino hacia abajo, con las etapas alternadas a los lados. Reemplaza
   el zigzag horizontal, que se scrolleaba de costado y dejaba un hueco en el
   centro de la pantalla. */
.process-subtitle{font-family:var(--font-mono);font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:.12em;margin-top:10px;
  color:rgba(250,250,247,.62);}
/* Misma bajada de sección que Servicios y El equipo: era la única que
   quedaba al tamaño del texto corrido. */
.process-intro{margin:18px auto 0;max-width:var(--measure);
  font-size:var(--fs-lead);line-height:1.45;text-wrap:pretty;}

.proceso-track{position:relative;max-width:940px;margin:0 auto;padding:12px 0 0;}
.proceso-track::before{content:'';position:absolute;left:50%;top:0;bottom:0;
  width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent 0,rgba(169,130,79,.55) 44px,
    rgba(169,130,79,.55) calc(100% - 44px),transparent 100%);}

.etapa{position:relative;width:calc(50% - 48px);padding:0 0 46px;}
.etapa:nth-child(odd){margin-left:0;text-align:right;}
.etapa:nth-child(even){margin-left:calc(50% + 48px);text-align:left;}
.etapa-nodo{position:absolute;top:8px;width:16px;height:16px;border-radius:50%;
  background:var(--wood);border:3px solid var(--ink);z-index:2;
  box-shadow:0 0 0 5px rgba(255,117,31,.16);
  transition:transform .25s ease, box-shadow .25s ease;}
.etapa:nth-child(odd) .etapa-nodo{right:-57px;}
.etapa:nth-child(even) .etapa-nodo{left:-57px;}
.etapa-cab{display:flex;align-items:center;gap:12px;}
.etapa:nth-child(odd) .etapa-cab{flex-direction:row-reverse;}
.etapa:nth-child(odd) .etapa-titulo{flex-direction:row-reverse;}
.etapa-ico{display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;width:40px;height:40px;border-radius:50%;color:var(--wood);
  background:rgba(255,117,31,.10);transition:background-color .25s ease, color .25s ease;}
.etapa-ico svg{width:20px;height:20px;}
.etapa-titulo{background:none;border:none;padding:0;cursor:pointer;color:inherit;
  font:inherit;display:inline-flex;align-items:center;gap:8px;min-height:44px;}
.etapa-titulo h3{font-size:var(--fs-contact);}
.etapa-mas{width:15px;height:15px;position:relative;flex-shrink:0;opacity:.75;}
.etapa-mas::before,.etapa-mas::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .25s ease;}
.etapa-mas::before{width:11px;height:1.5px;}
.etapa-mas::after{width:1.5px;height:11px;}
.etapa-corta{font-size:var(--fs-step);line-height:1.5;margin:2px 0 0;}
.band-dark .etapa-corta{color:rgba(250,250,247,.82);}

/* La explicación larga se abre al pasar el cursor y al tocar. La frase corta
   siempre queda a la vista: nunca hay una etapa sin nada que leer. */
.etapa-texto{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .32s cubic-bezier(.33,1,.68,1);}
.etapa-texto>p{min-height:0;font-size:var(--fs-step);line-height:1.5;
  padding-top:0;transition:padding .32s ease;}
.band-dark .etapa-texto>p{color:rgba(250,250,247,.82);}
/* 30-sep — antes también abría :focus-within, y el botón conserva el foco
   después del toque: al darle al "−" la clase se quitaba pero el foco la
   mantenía abierta. Ahora abre solo la clase, que el botón pone y quita
   (con teclado también, Enter y Espacio son un clic). */
.etapa.abierta .etapa-texto{grid-template-rows:1fr;}
.etapa.abierta .etapa-texto>p{padding-top:8px;}
.etapa.abierta .etapa-mas::after{transform:translate(-50%,-50%) scaleY(0);}
@media (hover:hover) and (pointer:fine){
  .etapa:hover .etapa-texto{grid-template-rows:1fr;}
  .etapa:hover .etapa-texto>p{padding-top:8px;}
  .etapa:hover .etapa-mas::after{transform:translate(-50%,-50%) scaleY(0);}
}
/* El nodo y el ícono se encienden en la etapa que se está mirando. */
.etapa:hover .etapa-nodo,.etapa:focus-within .etapa-nodo,
.etapa.pasada .etapa-nodo{transform:scale(1.3);box-shadow:0 0 0 9px rgba(255,117,31,.24);}
.etapa:hover .etapa-ico,.etapa:focus-within .etapa-ico{background:var(--wood);color:var(--ink);}

/* 30-sep — pedido de la clienta: que se vea la pelotita pasar de un punto
   al otro. Una bola viaja por la línea hasta el nodo de la etapa que cruza
   el centro de la pantalla, y la línea se va llenando de naranja detrás de
   ella. script.js calcula la altura; aquí solo el deslizamiento. */
.proceso-avance{position:absolute;left:50%;top:0;width:2px;height:0;
  transform:translateX(-50%);background:var(--wood);z-index:1;pointer-events:none;
  transition:height .7s cubic-bezier(.65,0,.35,1);}
.proceso-bola{position:absolute;left:50%;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--wood);border:3px solid var(--ink);z-index:3;pointer-events:none;
  box-shadow:0 0 0 8px rgba(255,117,31,.28),0 0 22px 6px rgba(255,117,31,.35);
  transform:translate(-50%,-50%);opacity:0;
  transition:top .7s cubic-bezier(.65,0,.35,1),opacity .3s ease;}
.proceso-track.en-marcha .proceso-bola{opacity:1;}
/* Los nodos que la línea ya pasó quedan encendidos. */
.etapa-nodo.encendido{box-shadow:0 0 0 6px rgba(255,117,31,.30),0 0 16px 3px rgba(255,117,31,.45);}
@media (prefers-reduced-motion: reduce){
  .proceso-avance,.proceso-bola{transition:opacity .3s ease;}
}

/* La llegada: el botón cierra la línea, centrado. */
.etapa-llegada{width:auto;margin-left:0;text-align:center;padding-bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:26px;}
.etapa-nodo-llegada{position:static;width:22px;height:22px;
  box-shadow:0 0 0 7px rgba(255,117,31,.20);}
.cta-llegada{background:var(--paper);color:var(--ink);}
.cta-llegada:hover{background:var(--wood);color:var(--ink);}

@media (max-width:760px){
  .proceso-track::before,.proceso-avance,.proceso-bola{left:22px;}
  /* Las tres reglas juntas: si no, la especificidad de :nth-child(odd) gana
     y las etapas impares se quedan pegadas al borde con el nodo afuera. */
  .etapa,.etapa:nth-child(odd),.etapa:nth-child(even){width:auto;margin-left:60px;
    text-align:left;}
  .etapa:nth-child(odd) .etapa-nodo,
  .etapa:nth-child(even) .etapa-nodo{left:-45px;right:auto;}
  .etapa:nth-child(odd) .etapa-cab,
  .etapa:nth-child(odd) .etapa-titulo{flex-direction:row;}
  .etapa-llegada{margin-left:0;align-items:flex-start;}
  .etapa-nodo-llegada{margin-left:-53px;}
  .frase-cierre{text-align:left;}
  .frase-cierre .regla{margin-left:0;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding:80px var(--gap) 26px;
  border-top:1px solid rgba(250,250,247,.18);}
@media (max-width:640px){ .site-footer{padding-top:56px;} }
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(250,250,247,.15);}
.site-footer h4{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.12em;color:rgba(250,250,247,.65);margin-bottom:12px;}
/* Contacto en footer: 18px, con texto visible junto a cada ícono */
.site-footer p, .site-footer a{font-size:var(--fs-contact);line-height:1.8;opacity:.94;}
/* Fase 2 — "Ver en Encuentra24 →" medía 15px de alto. Los tres contactos ya
   llegaban a 44 por su ícono; este no tenía ícono y quedaba en el texto pelado. */
.site-footer a{display:inline-flex;align-items:center;min-height:44px;}
/* Fase 3 — pasaba de 0.94 a 1 de opacidad: un 6% que nadie percibe. */
.site-footer a:hover,.site-footer a:focus-visible{opacity:1;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;}
.foot-brand{display:flex;align-items:center;gap:12px;}
.footer-logo{height:32px;width:auto;}
.footer-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
/* overflow-wrap: a 130% de tamaño de texto en 375px el email llegaba
   justo al borde; así parte la palabra antes que desbordar. */
.footer-contact-list .contact-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  max-width:100%;overflow-wrap:anywhere;}
.footer-contact-list .contact-link svg{flex-shrink:0;opacity:.8;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:20px;
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.06em;color:rgba(250,250,247,.65);}
/* Crédito de KORA: solo el isotipo, pequeño, con su enlace (revisión 11-sep).
   El área de toque completa los 44px aunque el ícono mida 22. */
.foot-credito{display:inline-flex;align-items:center;gap:10px;}
.kora-credit{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-width:44px;min-height:44px;}
.kora-credit img{height:22px;width:auto;opacity:.75;transition:opacity .2s ease;}
.kora-credit:hover img,.kora-credit:focus-visible img{opacity:1;}


/* ---------- Encabezado: herramientas a la derecha (acuerdo 11-sep) ---------- */
.a11y-a-chica{font-size:13px;line-height:1;}
.a11y-a-grande{font-size:19px;line-height:1;}
.nav-tools{display:flex;align-items:center;gap:6px;}

/* Selector de idioma — revisión 11-sep (Miriam): sin banderas, solo texto.
   Se ven los dos idiomas (ESP/ING); el activo va pleno y con subrayado de
   marca, el otro atenuado. Un toque cambia al otro. */
.lang-toggle{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;
  padding:0 8px;background:none;border:1px solid transparent;color:inherit;cursor:pointer;
  font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;border-radius:2px;
  transition:border-color .2s ease, background-color .2s ease;}
.lang-toggle:hover,.lang-toggle:focus-visible{border-color:currentColor;}
.lang-op{line-height:1;padding-bottom:2px;border-bottom:2px solid transparent;
  opacity:.62;transition:border-color .2s ease, opacity .2s ease;}
/* El idioma puesto va pleno y subrayado en naranja; el otro, atenuado.
   El .62 se eligió por contraste: sobre el papel de marca la tinta
   atenuada sigue dando 7:1, muy por encima del mínimo. */
.lang-op.es-activa{opacity:1;border-bottom-color:var(--wood);}
.lang-sep{opacity:.4;}
.lang-toggle:hover .lang-op,
.lang-toggle:focus-visible .lang-op{opacity:1;}

/* ---------- Pie: isotipo y nombre más grandes ---------- */
/* El logo cuadrado cierra el pie, grande: alto parecido al bloque de
   contacto (acuerdo 16-sep). */
.footer-logo{height:150px;}
@media (max-width:760px){ .footer-logo{height:110px;} }
/* Títulos del pie en naranja de marca, que sobre negro da 7,8:1. */
.foot-titulo{color:var(--wood) !important;}
/* Los dos números, más grandes. El ícono se queda en blanco. */
.contacto-tel{font-size:calc(var(--fs-contact) * 1.28) !important;color:var(--wood);
  font-weight:600;}
.contacto-tel svg{color:var(--paper);}
.contacto-tel:hover,.contacto-tel:focus-visible{text-decoration:underline;
  text-underline-offset:4px;}
.foot-brand h4{font-size:var(--fs-name);font-family:var(--font-primary);letter-spacing:0;
  text-transform:none;color:var(--paper);margin:0;}

/* ---------- Sombra en textos sobre foto (acuerdo 11-sep, todo el sitio) ---------- */
.hero-content h1, .hero-content p, .hero-content .eyebrow{text-shadow:0 2px 14px rgba(10,9,7,.55);}
.cat-arrow, .cat-zoom{text-shadow:0 1px 6px rgba(0,0,0,.6);}

/* ---------- Visor de fotos ---------- */
.cat-zoom{position:absolute;top:10px;right:10px;z-index:3;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;
  background:rgba(23,21,15,.55);color:#fff;border-radius:2px;transition:background-color .2s ease;}
.cat-zoom:hover,.cat-zoom:focus-visible{background:var(--wood);color:var(--ink);border-color:var(--wood);}
.cat-slide{cursor:zoom-in;}

body.visor-abierto{overflow:hidden;}
/* Con el visor abierto la barra superior estorba y confunde: se aparta. */
body.visor-abierto .site-nav{opacity:0;pointer-events:none;}
/* display:grid le gana a [hidden], que solo pone display:none por hoja de
   usuario: sin esto el visor cerrado seguía tapando la página entera. */
.visor[hidden]{display:none;}
/* Ventana centrada, no pantalla completa: se sigue viendo el sitio detrás. */
.visor{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,11,8,.72);backdrop-filter:blur(3px);}
/* Revisión 11-sep (Miriam), punto 4: el cuadro principal se veía reducido.
   Se amplía sin llegar a pantalla completa; el sitio se sigue viendo detrás. */
.visor-caja{position:relative;width:auto;max-width:min(1240px,96vw);max-height:96vh;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto;
  align-items:center;gap:10px;padding:46px 14px 14px;
  background:var(--ink);border-radius:3px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);}
.visor-marco{grid-column:2;grid-row:1;margin:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:0;min-width:0;gap:10px;}
/* El techo de la foto descuenta lo que ocupan las miniaturas y los rellenos
   (unos 170px): sin eso, en pantallas bajas la fila de la foto se desbordaba
   sobre la fila de abajo. Era la causa de que el pie se montara encima. */
.visor-marco img{max-width:100%;max-height:min(78vh, calc(96vh - 170px));
  width:auto;height:auto;object-fit:contain;border-radius:2px;}
/* Kathy (21-sep): «1/10 ARQUITECTURA, reacomodarlo o eliminarlo». Vivía dentro
   del marco de la foto, en columna, así que al crecer la foto se derramaba
   sobre las miniaturas. Se reacomoda —no se elimina, porque dice en qué foto
   va uno— a la franja de arriba, que estaba vacía al lado del botón de cerrar.
   Al salir del flujo del marco, ya no puede montarse sobre nada. */
.visor-pie{position:absolute;top:10px;left:16px;height:44px;margin:0;
  max-width:calc(100% - 80px);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(250,250,247,.8);
  display:flex;align-items:center;gap:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.visor-cerrar{position:absolute;top:10px;right:12px;width:44px;height:44px;font-size:20px;}
.visor-cerrar,.visor-nav{background:rgba(250,250,247,.10);color:#fff;border:none;cursor:pointer;
  border-radius:2px;transition:background-color .2s ease;}
/* El hover va detrás de (hover:hover): en pantalla táctil se queda pegado
   después de tocar, y la flecha quedaba naranja sin que nadie la estuviera
   tocando. El foco de teclado sí se marca siempre. */
@media (hover:hover){
  .visor-cerrar:hover,.visor-nav:hover{background:var(--wood);color:var(--ink);}
}
.visor-cerrar:focus-visible,.visor-nav:focus-visible{background:var(--wood);color:var(--ink);}
.visor-nav{width:48px;height:64px;font-size:30px;line-height:1;}
.visor-prev{grid-column:1;grid-row:1;}
.visor-next{grid-column:3;grid-row:1;}
.visor-tira{grid-column:1 / -1;grid-row:2;display:flex;gap:8px;overflow-x:auto;
  padding:8px 2px;scrollbar-width:thin;width:0;min-width:100%;}
/* Miniaturas centradas (punto 4). Con margin:auto en los extremos quedan al
   centro cuando sobran espacio y el scroll sigue empezando bien cuando no. */
.visor-tira button:first-child{margin-left:auto;}
.visor-tira button:last-child{margin-right:auto;}
.visor-tira button{flex:0 0 84px;height:64px;padding:0;border:2px solid transparent;
  background:none;cursor:pointer;opacity:.6;transition:opacity .2s ease, border-color .2s ease;}
.visor-tira button img{width:100%;height:100%;object-fit:cover;}
.visor-tira button:hover,.visor-tira button:focus-visible{opacity:1;}
.visor-tira button.is-current{opacity:1;border-color:var(--wood);}
@media (max-width:640px){
  .visor{padding:10px;}
  .visor-caja{padding:44px 8px 10px;gap:6px;max-height:94vh;}
  /* 44px es el mínimo para el dedo; estaba en 38 de ancho. */
  .visor-nav{width:44px;height:52px;font-size:24px;}
  .visor-marco img{max-height:min(62vh, calc(94vh - 140px));}
  .visor-tira button{flex:0 0 64px;height:48px;}
  .visor-pie{top:8px;left:12px;height:36px;font-size:11px;gap:8px;max-width:calc(100% - 66px);}
}



/* ---------- El beige de la marca, en más detalles (acuerdo 11-sep) ---------- */
/* Antes solo aparecía en frases sueltas. Se suma en filos y fondos tenues,
   nunca como color de texto: sobre papel no llega al contraste mínimo. */
.section-head h2{padding-bottom:14px;border-bottom:2px solid var(--paper-dim);}
.band-dark .section-head h2{border-bottom-color:rgba(250,250,247,.18);}
.visor-tira{border-top:1px solid rgba(250,250,247,.12);}
.cat-name{padding-left:12px;border-left:3px solid var(--paper-dim);}
.band-dark .cat-name{border-left-color:rgba(255,117,31,.55);}


/* El panel de lectura se lee al mismo tamaño que el resto del cuerpo. */
.a11y-panel, .a11y-panel span{font-size:var(--fs-card);}

/* En pantallas muy angostas las cuatro herramientas del encabezado no
   entraban: se compactan sin bajar de 44px de área de toque.

   22-sep (tarde) — el corte llegaba hasta 480px, no 420. Miriam lo vio en un
   iPhone 16 Pro Max, que mide 440 puntos de ancho: por encima de 420 la barra
   volvía a su tamaño de escritorio y el botón "Menú" se salía de la pantalla.
   Medido: a 430 el contenido pedía 478 px contra 430 de caja; a 440, 478
   contra 440. El tope sube a 480, que cubre todos los teléfonos de hoy —el
   más ancho es ese iPhone con 440— sin tocar las tabletas.

   Y el otro extremo, que nadie había reportado: a 360 px la barra pedía 374 y
   el botón quedaba cortado 14 px; a 320 px (iPhone SE de primera generación,
   iPhone 5s) se cortaba 54. Por eso lo que se compacta no es un escalón sino
   una medida que acompaña al ancho de la pantalla: el logo, la separación
   entre logo y herramientas, el relleno del botón y el de la barra se
   encogen solos. Debajo de ~381 px el logo empieza a bajar de 122 px; arriba
   de eso se queda en su tamaño. Así no queda ningún ancho sin cubrir entre
   un escalón y el siguiente, que fue exactamente la causa de este error. */
@media (max-width:480px){
  .site-nav{padding:14px clamp(6px,3vw,10px) 10px;}
  /* El logo se mide por su ancho y el archivo pone el alto (711×176): así la
     imagen nunca se sale de su caja al encogerse. */
  .site-nav .logo{height:30px;width:min(122px,32vw);min-height:44px;}
  .logo-mark{height:auto;width:100%;top:50%;transform:translateY(-50%);}
  .nav-tools{gap:0;margin-left:clamp(4px,2.5vw,10px);}
  .lang-toggle{padding:0 2px;min-width:44px;}
  .nav-toggle{padding:0 clamp(6px,2vw,10px);}
}

/* El piso de todo: 320 px. Es el iPhone SE de primera generación, y también
   cualquier iPhone de 375 px con el Zoom de pantalla activado, que es una
   opción de accesibilidad y este sitio le habla a gente de 35 a 70 años. Ahí
   ni siquiera el logo encogido alcanza, porque las cuatro herramientas tienen
   un piso de 44 px de área de toque que no se toca. Lo que cede es el aire:
   el rótulo del menú aprieta su espaciado entre letras y el ícono de WhatsApp
   su relleno. Los 44 px de toque se conservan por min-height y min-width. */
@media (max-width:343px){
  .site-nav .logo{width:min(122px,28vw);}
  .nav-toggle{letter-spacing:.04em;padding:0 5px;}
  .nav-whatsapp svg{padding:5px;}
  .nav-tools{margin-left:2px;}
}