/* ============================================================================
   MAGNÉTICA
   Sistema derivado de la medición de everyday.io a 1440px, con la paleta y la
   tipografía de la marca. Lo que se replica es la estructura —escala, ritmo,
   opacidades, forma—; el color y la fuente son los del manual de Magnética.

   De la referencia, medido:
     · una sola familia, dos pesos, tracking SIEMPRE negativo
     · escala 96 / 44 / 32 / 22 / 16 / 14 / 12
     · interlineado 1.16 en titulares, 0.90 en el mayor, 1.5 en cuerpo
     · radio 4px, márgenes laterales de 8px, bloques separados por 8px
     · sobre foto: el chalk del manual, y al 70% para lo secundario
   ========================================================================= */

:root{
  /* --- Marca --- */
  --claro:   #F2EEEA;   /* chalk white del manual · fondo dominante */
  --blanco:  #F7F5F3;   /* bloques que respiran · un chalk apenas más alto,
                           nunca blanco puro */
  --oscuro:  #2B2B2B;   /* dark gray del manual · texto, logo e isologo */
  --oscuro-bloque:#242424; /* fondo de los bloques oscuros, un escalón más
                              hondo · chalk 13.45:1 · verde 4.99:1 */
  --verde:   #606A46;   /* reseda del manual · 4.99:1 SOBRE CLARO */
  --verde-osc:#8A9864;  /* reseda derivado · 4.56:1 SOBRE OSCURO */

  /* --- Roles --- */
  --fondo:  var(--claro);
  --tinta:  var(--oscuro);          /* 12.27:1 sobre claro */
  --suave:  #6E6864;                /* secundario · 4.75:1 · el gris cálido */
  --acento: var(--verde);
  --filete: rgba(43,43,43,.14);
  --borde:  rgba(43,43,43,.60);     /* 3.76:1 compuesto sobre el claro */

  /* Sobre foto, tal como los mide la referencia */
  --sobre-foto:   #F2EEEA;   /* chalk del manual, no blanco puro */
  --sobre-foto-2: rgba(242,238,234,.7);
  --vidrio:       rgba(242,238,234,.18);
  --vidrio-hover: rgba(242,238,234,.28);

  /* --- Forma. Radio 4px y márgenes de 8px, como la referencia --- */
  --r: 4px;
  --marco: 8px;
  --pad: clamp(20px, 3.4vw, 56px);

  /* --- Tipografía. Solo Brown, en 300 y 700 --- */
  --sans: 'Brown', system-ui, sans-serif;

  /* Escala de la referencia, hecha fluida */
  --t-mega:  clamp(2.6rem, min(6.7vw, 11vh), 6rem);   /* su 96px */
  --t-h2:    clamp(1.9rem, 3.05vw, 2.75rem);          /* su 44px */
  --t-h3:    clamp(1.35rem, 2.2vw, 2rem);             /* su 32px */
  --t-lead:  clamp(1.05rem, 1.53vw, 1.375rem);        /* su 22px */
  --t-body:  16px;
  --t-small: 14px;
  --t-micro: 12px;

  /* --- Movimiento --- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-mask:cubic-bezier(.33,1,.68,1);
  --dur-fast:200ms; --dur:320ms; --dur-slow:720ms;
}

@font-face{font-family:'Brown';src:url('assets/fonts/Brown-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Brown';src:url('assets/fonts/Brown-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Brown';src:url('assets/fonts/Brown-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* ========================================================================= */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--claro) }
body{
  margin:0; padding:var(--marco); background:var(--claro); color:var(--tinta);
  font-family:var(--sans); font-weight:300; font-size:var(--t-body); line-height:1.5;
  letter-spacing:-.011em;      /* la referencia nunca usa tracking positivo */
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }

/* Cada bloque es una tarjeta de ancho casi completo, separada por 8px */
.bloque{
  position:relative; border-radius:var(--r); overflow:clip;
  margin-bottom:var(--marco); background:var(--blanco);
}
.bloque--claro{ background:var(--claro) }
.bloque--oscuro{ background:var(--oscuro-bloque); color:var(--claro) }
.bloque--oscuro{ --suave:rgba(242,238,234,.62); --acento:var(--verde-osc);
  --filete:rgba(242,238,234,.16); --borde:rgba(242,238,234,.46) }  /* 3.85:1 */
.bloque--foto{ background:#141414; color:var(--sobre-foto) }
.bloque--foto{ --suave:var(--sobre-foto-2); --acento:var(--verde-osc);
  --filete:rgba(242,238,234,.16); --borde:rgba(242,238,234,.46) }

/* El carril de la estrella se reserva a AMBOS lados: si solo se suma a la
   derecha, el sitio queda con un margen más grande de un lado que del otro.
   42px es lo justo para que la estrella (48px, a 26 del borde) no toque el
   texto alineado a la derecha. */
.interior{ padding:clamp(40px, 6.4vw, 104px) var(--pad) }
/* Entre mobile y desktop el texto ocupaba todo el ancho: a 768 daba 87
   caracteres por línea. Con este aire baja a un largo de renglón legible. */
@media (min-width:600px) and (max-width:860px){
  .interior{ padding-inline:clamp(40px, 11vw, 110px) }
}

@media (min-width:861px){
  /* Margen al doble: la pantalla ancha dejaba el texto demasiado extendido.
     Toca sólo .interior, que es el contenedor de las seis secciones de texto
     —manifiesto, los tres pilares, Celebrations, Brands, Experiences y
     Contacto—. El hero y el bloque fijo no lo usan, así que no se tocan. */
  .interior{ padding-inline:calc((var(--pad) + 42px) * 2) }
}

/* --- Registros tipográficos, con los valores de la referencia --- */
.mega{ margin:0; font-weight:700; font-size:var(--t-mega); line-height:.90; letter-spacing:-.04em }
.h2  { margin:0; font-weight:700; font-size:var(--t-h2);   line-height:1.16; letter-spacing:-.03em }
.h2--ancho{ max-width:none }
.h3  { margin:0; font-weight:700; font-size:var(--t-h3);   line-height:1.16; letter-spacing:-.03em }
.lead{ margin:0; font-weight:300; font-size:var(--t-lead); line-height:1.35; letter-spacing:-.02em }
.cuerpo{ margin:0; font-weight:300; font-size:var(--t-body); line-height:1.5; color:var(--suave) }
.micro{ margin:0; font-weight:400; font-size:var(--t-micro); line-height:1.4;
  letter-spacing:.02em; color:var(--suave) }
/* El rótulo de sección (01 · Celebrations) es lo que ubica al visitante:
   a 12px se perdía contra los titulares de 44px. */
.rotulo{
  margin:0; font-weight:400; font-size:clamp(14px, 1.15vw, 17px);
  letter-spacing:.01em; color:var(--suave); line-height:1.3;
}
.rotulo b{ color:inherit; font-weight:700 }
.micro b{ color:inherit; font-weight:400 }

/* ============================== ENTRADA ====================================
   Una capa que cubre el sitio mientras la marca se dibuja, y se va sola.
   Reparto: 1320ms de gesto + 400ms de salida = 1720ms en total.
   La salida arranca justo cuando el gesto termina, no antes.
   El CSS anima y retira; el JS solo decide. Si el JS falla, la capa se va
   igual: nunca puede quedar trabada encima del sitio. */
.entrada{
  position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  background:var(--claro);
  animation:entrada-salir 400ms var(--ease-out) 1320ms forwards;
}
@keyframes entrada-salir{ to{ opacity:0; scale:1.08; visibility:hidden } }
.sin-entrada .entrada{ display:none }

.entrada-marca{ width:min(320px, 56vw); height:auto; overflow:visible }

/* Las letras entran escalonadas de izquierda a derecha */
.entrada-marca .letra{
  fill:var(--oscuro); opacity:0;
  animation:letra-entra 520ms var(--ease-out) forwards;
  animation-delay:calc(120ms + var(--i) * 42ms);
}
@keyframes letra-entra{
  from{ opacity:0; translate:0 16% }
  to  { opacity:1; translate:0 0 }
}

/* El destello: la estrella se abre en cruz y aterriza sobre la é.
   Va en la tinta de marca; el isologo nunca lleva otro color. */
.entrada-marca .estrella{
  fill:var(--oscuro); transform-box:fill-box; transform-origin:center;
  opacity:0; animation:destello 700ms var(--ease-out) 620ms forwards;
}
@keyframes destello{
  0%  { opacity:0; scale:.12 2.6; rotate:-40deg }
  55% { opacity:1; scale:1.45 1.45; rotate:7deg }
  100%{ opacity:1; scale:1 1; rotate:0deg }
}

/* La pausa la pone el JS, nunca el CSS: si el guion no corre, no se pausa
   nada y la animación simplemente arranca antes. */
.espera .entrada, .espera .entrada *{ animation-play-state:paused }

/* Quien activa esto no lo hace por gusto: lo más respetuoso es no mostrarla */
@media (prefers-reduced-motion:reduce){ .entrada{ display:none } }

/* ============================== HEADER ===================================== */
.barra{
  position:fixed; top:var(--marco); left:var(--marco); right:var(--marco); z-index:500;
  /* Tres columnas iguales a los lados: así la del medio cae en el centro
     exacto del sitio, sin que la desplacen el logo ni el enlace de contacto. */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  padding:18px var(--pad);
  color:var(--sobre-foto);
  transition:color var(--dur) var(--ease), background 320ms var(--ease);
}
/* El header se queda siempre. Al dejar el tope se apoya en una superficie de
   vidrio, porque con el header transparente el texto de las secciones le pasa
   por debajo y los dos se vuelven ilegibles. */
.barra[data-fijo="si"]{
  background:var(--vidrio-barra); backdrop-filter:blur(14px);
  border-radius:var(--r);
}
:root{ --vidrio-barra:rgba(242,238,234,.78) }
[data-tema-barra="oscuro"] .barra[data-fijo="si"],
.barra[data-sobre="foto"][data-fijo="si"]{ --vidrio-barra:rgba(24,24,24,.62) }
.barra[data-sobre="claro"]{ color:var(--tinta) }

/* Respaldo sin JS: el color de la barra lo decide un script según sobre qué
   bloque esté. Si no hay scripting, el header quedaría blanco sobre los
   bloques claros, es decir invisible. Con fondo propio se lee siempre. */
@media (scripting: none) and (max-width:860px){
  /* sin script el panel no abre, así que la navegación vuelve al header */
  .menu-btn{ display:none }
  .barra-nav, .barra-cta{ display:flex }
  .barra{ grid-template-columns:1fr; row-gap:8px }
  .barra-nav{ justify-content:flex-start; flex-wrap:wrap; gap:14px }
}
@media (scripting: none){
  .barra{
    background:rgba(20,20,20,.82); border-radius:var(--r);
    backdrop-filter:blur(10px); color:var(--sobre-foto) !important;
  }
}
/* 44px de alto real: el logo es un enlace y necesita área táctil */
.barra-logo{ display:inline-flex; align-items:center; min-height:44px; justify-self:start }
.barra-logo svg{ width:152px; height:auto; display:block }
.barra-logo svg path{ fill:currentColor; transition:fill var(--dur) var(--ease) }
.barra-nav{ display:flex; gap:clamp(18px,2.6vw,42px); align-items:center;
  justify-content:center }
.barra-nav a{
  position:relative;
  font-size:var(--t-body); font-weight:300; letter-spacing:-.02em;
  opacity:.82; transition:opacity var(--dur) var(--ease);
  padding:10px 0; min-height:44px; display:inline-flex; align-items:center;
}
.barra-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:9px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform 420ms var(--ease-out);
}
.barra-nav a:hover, .barra-nav a:focus-visible{ opacity:1 }
.barra-nav a:hover::after, .barra-nav a:focus-visible::after{
  transform:scaleX(1); transform-origin:left;
}
/* El contacto es la acción del header: va en Bold para que se despegue de
   los enlaces de sección, que son navegación. */
.barra-cta{ font-size:var(--t-body); font-weight:700; letter-spacing:-.02em;
  min-height:44px; display:inline-flex; align-items:center; justify-self:end }

/* ============================ MENÚ DE MOBILE ===============================
   El botón sólo existe en mobile; en desktop el nav ya está en el header. */
.menu-btn{
  display:none; width:44px; height:44px; padding:0; justify-self:end;
  background:none; border:0; cursor:pointer; color:currentColor;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.menu-btn i{
  display:block; width:22px; height:1.5px; background:currentColor;
  transition:translate 260ms var(--ease), rotate 260ms var(--ease), opacity 160ms linear;
}
/* abierto: las tres líneas se convierten en una cruz */
.menu-abierto .menu-btn i:nth-child(1){ translate:0 6.5px; rotate:45deg }
.menu-abierto .menu-btn i:nth-child(2){ opacity:0 }
.menu-abierto .menu-btn i:nth-child(3){ translate:0 -6.5px; rotate:-45deg }

.menu-movil{
  position:fixed; z-index:480;
  top:calc(var(--marco) + var(--alto-barra, 76px)); left:var(--marco); right:var(--marco);
  display:none; flex-direction:column;
  padding:8px var(--pad) 20px;
  border-radius:var(--r);
  background:var(--menu-fondo);
  opacity:0; translate:0 -10px; pointer-events:none;
  transition:opacity 260ms var(--ease), translate 300ms var(--ease-out);
}
:root{ --menu-fondo:var(--claro); --menu-tinta:var(--oscuro) }
:root:has(.barra[data-sobre="foto"]){ --menu-fondo:#161616; --menu-tinta:var(--claro) }

/* Con el menú abierto, el header deja de ser vidrio y toma el mismo fondo que
   el panel: el logo y la cruz quedan apoyados sobre la misma superficie, no
   flotando sobre la foto. El color de la tinta lo dicta el panel, así que si
   el fondo es oscuro la marca va en chalk y al revés. */
.menu-abierto .barra,
.menu-abierto .barra[data-fijo="si"],
.menu-abierto .barra[data-sobre="claro"],
.menu-abierto .barra[data-sobre="foto"]{
  background:var(--menu-fondo);
  backdrop-filter:none;
  border-radius:var(--r) var(--r) 0 0;
  color:var(--menu-tinta);
}
.menu-abierto .menu-movil{ border-radius:0 0 var(--r) var(--r) }

.menu-movil a{
  color:var(--menu-tinta);
  font-size:clamp(1.5rem, 7vw, 2.2rem); font-weight:300; letter-spacing:-.03em;
  padding:16px 0; min-height:56px; display:flex; align-items:center;
  border-bottom:1px solid var(--filete);
}
.menu-movil a:last-child{ border-bottom:0 }
.menu-movil-cta{ font-weight:700 }

.menu-abierto .menu-movil{ opacity:1; translate:0 0; pointer-events:auto }

/* Marco de una foto real. Mantiene el mismo gesto de entrada que el hueco
   reservado: se descubre de izquierda a derecha y la imagen se asienta. */
.marco{
  position:relative; margin:0; overflow:clip; border-radius:var(--r);
  background:#141414; aspect-ratio:4 / 5;
}
.marco img{ width:100%; height:100%; object-fit:cover; display:block }
/* Velo suave: las fotos venían más brillantes que el resto del sistema y
   se adelantaban al primer plano. No lleva texto encima, así que no toca
   ningún contraste de lectura. */
.marco::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(18,18,18,.16);
}

.foto--16-9{ aspect-ratio:16 / 9 }
.foto--3-2 { aspect-ratio:3 / 2 }
.foto--4-5 { aspect-ratio:4 / 5 }
.foto--1-1 { aspect-ratio:1 / 1 }

/* Entra deslizando desde la izquierda hasta su lugar */
/* Entra descubriéndose de izquierda a derecha. El contenido de adentro llega
   corrido y se asienta: sin eso, el bloque parece una persiana y no una foto
   que aparece. */
.desliza{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1750ms var(--ease-out);
  transition-delay:calc(var(--l,0) * 200ms);
}
.desliza > *{
  translate:-40px 0;
  transition:translate 2050ms var(--ease-out);
  transition-delay:calc(var(--l,0) * 200ms);
}
.visible .desliza, .desliza.visible{ clip-path:inset(0 0 0 0) }
.visible .desliza > *, .desliza.visible > *{ translate:0 0 }

/* ============================ HERO CON IMAGEN ==============================
   El velo no es plano: se densifica en la banda donde vive el texto y se
   aligera arriba y abajo, para que la foto se siga viendo.
   MEDIDO sobre los píxeles reales de home-1.jpg, con el texto en blanco puro:
     titular 7.13:1 · bajada 5.87:1 · botón 7.80:1
   Un velo plano habría necesitado .58 en toda la superficie para lo mismo. */
.hero--imagen{ background:#141414 }
.hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
}
/* Franja de resguardo del header: al centrar el nav, quedó sobre la zona
   clara de la pared y cayó a 2.76:1. Un degradado corto arriba lo resuelve
   sin tocar el velo del resto de la imagen. */
.hero--imagen::before{
  content:''; position:absolute; left:0; right:0; top:0; height:190px;
  z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(18,18,18,.70), rgba(18,18,18,0));
}
.hero--imagen::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(20,20,20,.18) 0%,
    rgba(20,20,20,.64) 26%,
    rgba(20,20,20,.64) 74%,
    rgba(20,20,20,.18) 100%);
}
.hero-contenido{ position:relative; z-index:2 }

/* Sobre una foto clara, el blanco al 70% no llega a 4.5:1 ni con velos que
   matan la imagen. En el hero la bajada va en blanco puro. */
.hero--imagen .hero-bajada{ color:var(--sobre-foto) }

/* ================================ HERO ===================================== */
.hero{
  position:relative; min-height:calc(100svh - var(--marco) * 2);
  display:grid; place-items:center; text-align:center;
  padding:clamp(70px,9.5vh,120px) var(--pad);
}
.hero .mega{ font-size:var(--t-h2); line-height:1.16; letter-spacing:-.03em;
  max-width:20ch; margin-inline:auto }
.hero-bajada{ margin:clamp(18px,2.4vw,28px) auto 0; max-width:46ch; color:var(--sobre-foto-2) }

/* Botón de vidrio, como los de la referencia sobre foto */
.boton{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  margin-top:clamp(24px,3vw,40px); padding:13px 22px;
  border-radius:var(--r); background:var(--vidrio); color:var(--sobre-foto);
  font-size:var(--t-body); font-weight:300; letter-spacing:-.02em;
  backdrop-filter:blur(10px);
  transition:background var(--dur) var(--ease);
}
.boton:hover, .boton:focus-visible{ background:var(--vidrio-hover) }
.boton i{ font-style:normal; transition:translate var(--dur) var(--ease) }
.boton:hover i{ translate:4px 0 }

.boton--tinta{
  background:var(--oscuro); color:var(--claro); backdrop-filter:none;
}
.boton--tinta:hover, .boton--tinta:focus-visible{ background:#3a3a3a }

/* ============================ REJILLAS ===================================== */
.par{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--marco) }
.trio{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,3vw,56px) }
.duo-texto{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,96px); align-items:start }
/* Cuando la sección se queda sin columna derecha, el texto no se estira a
   todo el ancho: se mantiene en una medida legible. */
/* 88ch: la bajada de Celebrations mide 755px en una línea y con 80ch
   entraba justo al límite. */
.solo{ max-width:88ch }

/* ===================== BLOQUE FIJO DE LAS VERTICALES =======================
   La promesa queda quieta mientras las tres verticales pasan por detrás.
   Es el gesto de la referencia: el texto se ancla y la imagen cambia. */
.fijo{ position:relative }
.fijo-pantalla{
  position:sticky; top:var(--marco);
  height:calc(100svh - var(--marco) * 2);
  border-radius:var(--r); overflow:clip; background:#141414;
}
/* La opacidad y la escala las escribe el scroll en cada cuadro: no llevan
   transición, o pelearían con el progreso y se sentiría con retardo. */
.fijo-capa{ position:absolute; inset:0; opacity:0 }
.fijo-capa img{ width:100%; height:100%; object-fit:cover; display:block }

/* Velo del bloque fijo. Mismo criterio que el hero: se densifica donde vive
   el texto —la banda del titular y la tira de verticales de abajo— y se
   aligera arriba, para que la imagen se siga viendo. Los valores salen de
   medir sobre los píxeles reales, no de estimarlos. */
.fijo-pantalla::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(18,18,18,.34) 0%,
    rgba(18,18,18,.62) 30%,
    rgba(18,18,18,.62) 66%,
    rgba(18,18,18,.74) 100%);
}
.fijo-texto{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  text-align:center; padding:var(--pad); pointer-events:none;
}
/* Dos líneas exactas: a 96px entraba en cuatro y se comía la pantalla */
.fijo-texto .mega{
  color:var(--sobre-foto); max-width:none;
  font-size:clamp(1.5rem, 4.2vw, 3.9rem); line-height:1.14; letter-spacing:-.032em;
}
.fijo-marcas{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; justify-content:center; gap:clamp(18px,3vw,54px);
  padding:0 var(--pad) clamp(26px,4vh,52px);
}
.fijo-marcas span{
  position:relative; padding-bottom:10px;
  font-size:var(--t-lead); font-weight:300; letter-spacing:-.02em;
  color:rgba(242,238,234,.62);
  transition:color 600ms var(--ease);
}
/* Riel de fondo, para que se vea cuánto falta */
.fijo-marcas span::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(242,238,234,.22);
}
/* La barra se llena con el scroll: --avance va de 0 a 1 y lo escribe el JS */
.fijo-marcas span::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--sobre-foto);
  transform:scaleX(var(--avance, 0)); transform-origin:left;
}
.fijo-marcas span.activa{ color:var(--sobre-foto) }
/* El tramo de scroll que consume el bloque fijo: una pantalla por vertical.
   El último es más corto: ahí ya no hay fundido hacia dónde ir (k = 0), así
   que una pantalla entera de scroll no produce ningún cambio y el bloque
   parece trabado. Con 60svh la tercera barra termina de llenarse y el sitio
   sigue. El JS lee la altura real de cada tramo, no la del primero. */
.fijo-tramo{ height:100svh }
.fijo-tramo:last-child{ height:60svh }

/* ============================ LISTAS ======================================= */
.lista{ list-style:none; margin:0; padding:0 }
.lista li{ padding:13px 0; border-bottom:1px solid var(--filete); font-size:var(--t-body) }
.lista li:first-child{ border-top:1px solid var(--filete) }
.lista b{ font-weight:400 }
.lista .apunte{ color:var(--suave) }

.etiquetas{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none }
.etiquetas li{
  font-size:var(--t-small); font-weight:300; letter-spacing:-.01em;
  padding:9px 14px; min-height:38px; display:inline-flex; align-items:center;
  border:1px solid var(--borde); border-radius:var(--r);
}

/* ============================ CONTACTO ===================================== */
.contactos{ list-style:none; margin:0; padding:0 }
.contactos li{ border-top:1px solid var(--filete) }
.contactos li:last-child{ border-bottom:1px solid var(--filete) }
.contactos a, .contactos .dato{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding:clamp(16px,2vw,26px) 0; font-size:var(--t-h3); font-weight:300;
  letter-spacing:-.03em; flex-wrap:wrap;
}
.contactos .etq{ font-size:15px; letter-spacing:.01em; color:var(--suave); flex:none }
.contactos a{ transition:color var(--dur) var(--ease) }
.contactos a:hover{ color:var(--acento) }

/* Tres columnas en vez de space-between: con las dos líneas de texto de
   anchos distintos, space-between habría dejado el logo descentrado respecto
   de la página. Con 1fr auto 1fr el logo cae en el eje real, pase lo que pase
   con el largo de los textos. */
.pie{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:20px; padding:clamp(24px,3vw,40px) var(--pad) }
.pie .firma{ justify-self:end }

/* El logo del pie es un detalle, no un segundo encabezado: 96px contra los
   152px del header. En negro de marca, como manda el manual. */
.pie-logo{ display:block; justify-self:center; line-height:0 }
.pie-logo svg{ width:96px; height:auto; display:block }
.pie-logo svg path{ fill:var(--tinta) }

/* Firma del estudio, debajo del pie y sobre el mismo eje. El logotipo va a
   .62 de opacidad para que pese lo mismo que el gris del texto de al lado:
   a tinta plena competía con el logo de Magnética, que es de quien es el
   sitio. El enlace se estira a 44px de alto para el dedo y se recupera el
   espacio con un margen negativo, así no empuja el pie. */
.firma{ margin:0 }
.firma a{
  display:inline-flex; align-items:center; gap:9px;
  padding-block:calc((44px - 1em) / 2); margin-block:calc((44px - 1em) / -2);
  color:var(--suave); font-size:var(--t-micro); font-weight:400;
  letter-spacing:.02em; text-decoration:none;
}
.firma img{ height:15px; width:auto; display:block; opacity:.62;
  transition:opacity var(--dur) var(--ease) }
.firma a:hover img, .firma a:focus-visible img{ opacity:1 }
.firma a:hover{ color:var(--tinta) }

/* ======================= REVEAL DE TEXTO POR LÍNEAS ======================== */
.linea{
  display:block; overflow:hidden;
  padding-block:.20em; margin-block:-.20em;
}
.linea > span{
  display:block; translate:0 130%;
  transition:translate 900ms var(--ease-mask);
  transition-delay:calc(var(--l,0) * 90ms);
}
.visible .linea > span{ translate:0 0 }

.sube{ opacity:0; translate:0 22px;
  transition:opacity 760ms var(--ease-out), translate 760ms var(--ease-out);
  transition-delay:calc(var(--l,0) * 90ms) }
.visible.sube, .visible .sube{ opacity:1; translate:0 0 }

/* ==================== LA ESTRELLA QUE GIRA CON EL SCROLL ==================== */
.estrella-viaje{
  position:fixed; right:clamp(10px,1.5vw,22px); top:50%; z-index:450;
  width:clamp(28px,3.4vw,48px); height:auto; pointer-events:none;
  translate:0 -50%; opacity:.62;
}
/* El isologo solo va en el claro de marca o en #2B2B2B. Nada de blend modes:
   difference daba un violeta que no existe en la paleta. */
.estrella-viaje path{ fill:var(--oscuro); transition:fill 160ms linear }
.estrella-viaje[data-sobre="foto"] path{ fill:var(--claro) }
/* sobre fondo oscuro el mismo alfa se percibe mucho más fuerte */
.estrella-viaje[data-sobre="foto"]{ opacity:.34 }
@media (prefers-reduced-motion:reduce){ .estrella-viaje{ display:none } }

:where(a, button):focus-visible{
  outline:2px solid var(--acento); outline-offset:4px; border-radius:2px;
}

/* Quien pide menos movimiento no tiene que pelear con el sitio */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .linea > span{ translate:0 0 }
  .sube{ opacity:1; translate:0 0 }
  .desliza{ clip-path:inset(0 0 0 0) }
  .desliza > *{ translate:0 0 }
}

/* ============================== MOBILE =====================================
   Mobile es 860px: la tablet vertical (768) queda de este lado.
   Se audita al final, con desktop cerrado. */
/* --- Cortes de línea propios de cada ancho ---------------------------------
   Los cortes de los titulares están elegidos uno por uno, y los de mobile no
   son los de desktop. Donde el corte cae dentro de una misma línea alcanza un
   <br class="quiebre">; donde cruza de una línea a la otra hacen falta los dos
   titulares, y cada ancho muestra el suyo. */
.quiebre{ display:none }
.solo-angosto{ display:none }

@media (max-width:860px){
  .quiebre{ display:inline }
  .solo-ancho{ display:none }
  .solo-angosto{ display:block }

  .par, .trio, .duo-texto{ grid-template-columns:1fr }
  /* el logo ocupaba 152px de 390: casi el 40% del ancho de pantalla */
  .barra-logo svg{ width:96px }
  .barra{ grid-template-columns:1fr auto; padding:14px var(--pad) }
  .barra-nav, .barra-cta{ display:none }
  .menu-btn{ display:flex }
  .menu-movil{ display:flex }
  .estrella-viaje{ display:none }
  .boton:not(.boton--tinta){ backdrop-filter:none; background:rgba(242,238,234,.24) }
  .boton--tinta{ backdrop-filter:none }
  .pie{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px }
  .pie .firma{ justify-self:center }
  .pie-logo{ order:-1 }
  .pie-logo svg{ width:76px }
  .fijo-marcas{ gap:14px }
  .fijo-marcas span{ font-size:var(--t-body) }
}