/* ROMÉ · base de la web v2: letras, colores, una sola física, cabecera, menú, pie.
   Hueso es la piedra clara de la vitrina, navy la tinta de todo; el bordó solo vive en la tilde y en el foco. */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fuentes/bodoni-moda-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fuentes/bodoni-moda-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("../fuentes/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colores de la identidad v1.0 (contrastes medidos sobre hueso: navy 11,9 · tinta 6,7 · tenue 4,9 · piedra oscura 5,2) */
  --hueso: #ECE3D6;
  --hueso-2: #E5DACB;
  --papel: #F4EEE6;
  --navy: #14273E;
  --navy-2: #2B4670;                  /* hover del botón navy: se nota (antes #1C3352, 20 niveles) y sigue en la paleta */
  --tinta: #3F4D63;
  --tenue: #56607A;
  --piedra: #BFA68E;
  --piedra-oscura: #6B5A48;
  --espresso: #3A2E25;
  --bordo: #4A1220;
  --linea: rgba(20, 39, 62, .16);
  --linea-suave: rgba(20, 39, 62, .08);
  --sombra: 60 40 25;                 /* sombras cálidas de piedra, nunca negras */
  --fondo-foto: #F1ECE2;              /* el crema propio de las 70 fotos (medido en sus bordes): donde la foto no llena */

  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* una sola física (emil-design-eng): tres curvas y una escala de seis tiempos, en CSS y en JS (util.js las lee de
     aquí). Entradas largas con salida suave, cruces con aceleración simétrica, hover suave; las salidas, más cortas */
  --e-out: cubic-bezier(.16, 1, .3, 1);       /* entra y se asienta */
  --e-io: cubic-bezier(.76, 0, .24, 1);       /* cruza la pantalla: arco, cortina, hoja */
  --e-soft: cubic-bezier(.22, 1, .36, 1);     /* hover y acercamientos lentos */
  --t-press: 140ms;
  --t-micro: 220ms;
  --t-ui: 460ms;
  --t-salida: 240ms;
  --t-reveal: 900ms;
  --t-lento: 1400ms;
  --stagger: 40ms;
  --sube: 10px;                        /* lo que sube lo que aparece: 10 px, como la 08 decidida (vuelta 4; antes 12) */

  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gutr: max(20px, env(safe-area-inset-right, 0px));
  --cab-h: 60px;
  --ancho: 1360px;
  color-scheme: only light;
}
@media (min-width: 760px) {
  :root { --gut: max(32px, env(safe-area-inset-left, 0px)); --gutr: max(32px, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 1100px) {
  :root { --gut: clamp(40px, 4vw, 64px); --gutr: clamp(40px, 4vw, 64px); --cab-h: 72px; }
}

/* Lenis (su hoja de 300 bytes, en línea) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--hueso); scrollbar-color: rgba(20, 39, 62, .45) var(--hueso);
  /* el resaltado gris y redondo de iOS no es de la marca (todo es recto): cada cosa que se toca responde al presionar */
  -webkit-tap-highlight-color: transparent;
  /* lo que recibe el foco con el teclado queda bajo la cabecera fija (la colección pone aparte el aire de su barra) */
  scroll-padding-top: calc(var(--cab-h) + 16px); }
body {
  margin: 0; background: var(--hueso); color: var(--navy);
  font: 400 17px/1.6 var(--sans); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; caret-color: var(--navy);
}
::selection { background: var(--navy); color: var(--hueso); }
/* lo que no se corta en dos líneas: las referencias («SMT-230403-01»), en todas las páginas (I2) */
.sin-corte, [data-wa-numero] { white-space: nowrap; }   /* y el teléfono, entero en una línea */
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
p, dd, li, figcaption, td { text-wrap: pretty; }   /* sin una palabra sola en la última línea */
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; }   /* esquinas rectas, como la marca (H1-12) */
.sobre-navy :focus-visible { outline-color: var(--hueso); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gutr); }
.cifra { font-variant-numeric: tabular-nums lining-nums; }

/* tipografía con escala clara: Bodoni nombra, Manrope explica */
.titulo-1 { font: 400 clamp(44px, 6.2vw, 96px)/1 var(--serif); letter-spacing: -.018em; font-variation-settings: "opsz" 72; }
.titulo-2 { font: 400 clamp(38px, 4.8vw, 72px)/1.02 var(--serif); letter-spacing: -.014em; font-variation-settings: "opsz" 72; }
.titulo-3 { font: 400 clamp(26px, 2.4vw, 34px)/1.12 var(--serif); letter-spacing: -.006em; font-variation-settings: "opsz" 36; }
.bajada { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; color: var(--tinta); max-width: 52ch; }
.rotulo-chico { font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* botones: rectos, una sola curva en la marca (el arco) */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px; border: 1px solid var(--navy); background: var(--navy); color: var(--hueso);
  font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: scale var(--t-press) var(--e-out), background-color var(--t-micro) var(--e-soft), color var(--t-micro) var(--e-soft);
}
/* la presión va en `scale`, aparte de `transform`: así ninguna aparición ni el cierre (que usan transform) la anulan */
.boton:active { scale: .97; }
.boton .icono { width: 18px; height: 18px; }
.boton--linea { background: transparent; color: var(--navy); }
.boton--linea::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy);
  clip-path: inset(0 100% 0 0); transition: clip-path var(--t-ui) var(--e-soft);
}
/* H1-02 (vuelta 5): la etiqueta clara viaja con el relleno: se repite dentro del ::before (hueso sobre navy, por encima
   de la de abajo, que queda siempre navy) y barre con él. Antes la letra cambiaba de color en 220 ms y el relleno en
   460: durante ~120 ms quedaba navy sobre navy */
.boton--linea[data-texto]::before { content: attr(data-texto); z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 28px; color: var(--hueso); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .boton--linea[data-texto]:hover { color: var(--navy); }
  .boton--linea:not([data-texto]):hover { color: var(--hueso); }
  .boton--linea:hover::before { clip-path: inset(0); }
  .boton:not(.boton--linea):hover { background: var(--navy-2); }
}
.enlace {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--navy);
  font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  transition: scale var(--t-press) var(--e-out);
}
.enlace > span { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--t-ui) var(--e-soft); }
.enlace .icono { margin-bottom: 6px; }   /* el ícono se centra con la letra, no con letra + subrayado */
@media (hover: hover) and (pointer: fine) { .enlace:hover > span { background-size: 38% 1px; } }
.enlace:active { scale: .97; }
/* enlaces dentro del texto: el subrayado se engruesa con el mouse y la letra se aclara al presionar */
main p a:not([class]), main dd a:not([class]), main li a:not([class]) { transition: text-decoration-thickness var(--t-micro) var(--e-soft), opacity var(--t-press) var(--e-out); }
@media (hover: hover) and (pointer: fine) { main p a:not([class]):hover, main dd a:not([class]):hover, main li a:not([class]):hover { text-decoration-thickness: 2px; } }
main p a:not([class]):active, main dd a:not([class]):active, main li a:not([class]):active { opacity: .6; }

/* ---------- cabecera (fija; el fondo aparece cuando hay contenido detrás) ---------- */
.saltar-contenido {
  position: fixed; left: 12px; top: 12px; z-index: 90; padding: 12px 16px; background: var(--navy); color: var(--hueso);
  font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-160%);
}
.saltar-contenido:focus-visible { transform: none; outline-color: var(--hueso); outline-offset: -5px; }
.cab {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(var(--cab-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px); color: var(--navy);
  transition: background-color var(--t-ui) var(--e-soft), box-shadow var(--t-ui) var(--e-soft), transform var(--t-ui) var(--e-out);
}
.cab[data-fondo="si"] { background: var(--hueso); box-shadow: 0 1px 0 var(--linea-suave); }
.cab__nav { height: var(--cab-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.cab__lado { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.cab__lado--der { justify-content: flex-end; }
.cab__lado a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.cab__lado a span { padding-block: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-ui) var(--e-soft); }
.cab__lado a { transition: scale var(--t-press) var(--e-out); }
.cab__lado a:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .cab__lado a:hover span, .cab__lado a[aria-current="page"] span { background-size: 100% 1px; } }
.cab__lado a[aria-current="page"] span { background-size: 100% 1px; }
.cab__logo { position: relative; display: block; --lh: 30px; height: 44px; width: calc(var(--lh) * 330 / 129); grid-column: 2; transition: scale var(--t-press) var(--e-out); }
.cab__logo:active, .pie__logo:active { scale: .97; }   /* responden al presionar, como todo lo demás (H1-13) */
.cab__logo img { position: absolute; left: 0; top: calc((44px - var(--lh)) / 2); width: 100%; height: var(--lh); }
.cab__logo .logo-sin { opacity: 0; }
.cab__menu {
  display: none; justify-self: end; align-items: center; min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--navy);
  transition: scale var(--t-press) var(--e-out);
}
.cab__menu:active, .menu__cerrar:active { scale: .97; }
@media (max-width: 759px) {
  .cab__nav { grid-template-columns: 44px 1fr 44px; gap: 12px; }
  .cab__lado { display: none; }
  .cab__logo { --lh: 24px; justify-self: center; }
  .cab__menu { display: inline-flex; grid-column: 3; justify-content: flex-end; }
}

/* menú del celular: una hoja hueso a pantalla completa */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--hueso); color: var(--navy);
  display: grid; grid-template-rows: auto 1fr auto; padding: env(safe-area-inset-top, 0px) var(--gutr) calc(env(safe-area-inset-bottom, 0px) + 28px) var(--gut);
}
/* la cabecera del menú calza con la de la página: el logo no se mueve al abrir; solo «Menú» pasa a «Cerrar» */
.menu__cab { height: var(--cab-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.menu__cab img { grid-column: 2; height: 24px; width: auto; }
.menu__cerrar { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--navy); transition: scale var(--t-press) var(--e-out); }
.menu__lista { align-self: center; display: grid; gap: 6px; }
.menu__lista a { display: block; padding: 8px 0; font: 400 clamp(36px, 10vw, 48px)/1.1 var(--serif); text-decoration: none; letter-spacing: -.01em;
  transform-origin: 0 50%; transition: scale var(--t-press) var(--e-out); }
.menu__lista a:active { scale: .97; }
.menu__lista a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.menu__pie { display: grid; gap: 14px; }
.menu__pie .boton { width: 100%; }
.menu[data-estado="abriendo"] { animation: menu-entra var(--t-ui) var(--e-out) both; }
.menu[data-estado="abriendo"] .menu__lista li { animation: sube var(--t-reveal) var(--e-out) both; animation-delay: calc(80ms + var(--i, 0) * 50ms); }
@keyframes menu-entra { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* WhatsApp siempre a mano en el celular */
.wa-flotante {
  position: fixed; right: var(--gutr); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30;   /* en el borde de la columna (H1-10) */
  display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 16px;
  background: var(--navy); color: var(--hueso); text-decoration: none; box-shadow: 0 14px 30px -14px rgb(var(--sombra) / .55);
  font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transform: translateY(0); opacity: 1; transition: transform var(--t-ui) var(--e-out), opacity var(--t-salida) var(--e-soft), scale var(--t-press) var(--e-out);
}
.wa-flotante .icono { width: 20px; height: 20px; }
.wa-flotante:active { scale: .97; }   /* la presión en su tiempo (140 ms), aparte del subir y bajar (460 ms) */
@media (max-width: 759px) { .wa-flotante { display: inline-flex; } }
.wa-flotante[data-oculto] { transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform var(--t-salida) var(--e-out), opacity var(--t-salida) var(--e-soft), scale var(--t-press) var(--e-out); }   /* sale más rápido de lo que entra */

/* ---------- apariciones (07 y 08): una vez, desde casi invisible y unos px más abajo ---------- */
.js [data-aparece] { opacity: .001; transform: translate3d(0, var(--sube), 0); }
/* con el teclado se puede llegar a algo que todavía no «apareció» (no llegó a la pantalla): con el foco se ve de una (D5) */
.js [data-aparece]:focus-within { opacity: 1; transform: none; }
.js [data-aparece].es-visto { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--e-out) calc(var(--i, 0) * 80ms), transform var(--t-reveal) var(--e-out) calc(var(--i, 0) * 80ms), scale var(--t-press) var(--e-out); }
.js [data-aclara] .ch { display: inline-block; opacity: 0; filter: blur(9px); }
/* H1-05 (vuelta 5): el título llega entero en el HTML y se parte en letras cuando corre el módulo: hasta entonces, oculto
   (si el JS no llega, `.sin-anim` lo muestra a los 3,5 s). Antes aparecía, se borraba y volvía letra a letra */
.js [data-aclara]:not([data-partido]) { opacity: 0; }
/* H1-03 (vuelta 5): el «×» de las medidas en un nombre de Bodoni es un trazo de pelo que casi no se ve: va en Manrope */
.por { font-family: var(--sans); font-weight: 500; }
.js [data-aclara].es-visto .ch { opacity: 1; filter: none; transition: opacity var(--t-reveal) var(--e-out), filter var(--t-reveal) var(--e-out); transition-delay: calc(var(--i, 0) * 28ms); }
/* en el celular, cada letra se aclara con opacidad, 4 px de subida y 2 px de blur como mucho (el de 9 px por letra
   costaba 6 a 9 fps en WebKit: decisión del coordinador por delegación de Lucas, 21-10). El computador, como estaba */
@media (max-width: 759px) {
  .js [data-aclara] .ch { filter: blur(2px); transform: translate3d(0, 4px, 0); }
  .js [data-aclara].es-visto .ch { transform: none; transition: opacity var(--t-reveal) var(--e-out), filter var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out); transition-delay: calc(var(--i, 0) * 28ms); }
}
.palabra { display: inline-block; white-space: nowrap; }
@keyframes sube { from { opacity: 0; transform: translate3d(0, var(--sube), 0); } }

/* ---------- pie: la única banda navy ---------- */
.pie { background: var(--navy); color: var(--hueso); padding-block: clamp(56px, 7vw, 96px) calc(32px + env(safe-area-inset-bottom, 0px)); }
.pie__arriba { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; }
.pie__logo { display: inline-flex; align-items: center; min-height: 44px; transition: scale var(--t-press) var(--e-out); }
.pie__logo img { height: 34px; width: auto; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 3vw, 40px); }
.pie__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color var(--t-micro) var(--e-soft), scale var(--t-press) var(--e-out); }
.pie__nav a .icono { margin-right: 8px; }
.pie__nav [data-correo] a { text-transform: none; letter-spacing: .04em; }   /* el correo, en minúsculas: así se escribe */
/* la nota y los enlaces legales comparten la línea de base */
.pie__abajo { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid rgba(236, 227, 214, .18); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; font-size: 13.5px; line-height: 1.6; color: #CFC8BF; }
.pie__abajo a { color: inherit; transition: color var(--t-micro) var(--e-soft), scale var(--t-press) var(--e-out); }
.pie__legal { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pie__legal a { display: inline-flex; min-height: 44px; align-items: center; }
@media (hover: hover) and (pointer: fine) {
  .pie__nav a:hover { text-decoration-color: currentColor; }
  .pie__abajo a:hover { color: var(--hueso); }
}
.pie__nav a:active, .pie__legal a:active { scale: .97; }

/* ---------- cambio de página: cortina de papel (12) ---------- */
/* primero se va la vieja (240 ms) y recién entonces entra la nueva (460 ms): entre las dos queda el hueso del fondo como
   cortina, sin doble exposición. La cabecera no entra en la transición (es la misma en todas las páginas): ni parpadea
   ni se duplica (H2-07) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: var(--t-salida) var(--e-io) both pagina-sale; }
  ::view-transition-new(root) { animation: var(--t-ui) var(--e-out) var(--t-salida) both pagina-entra; }
  .cab { view-transition-name: cabecera; }
  ::view-transition-group(cabecera), ::view-transition-old(cabecera), ::view-transition-new(cabecera) { animation: none; }
  ::view-transition-old(cabecera) { opacity: 0; }
}
/* el espacio de la barra de desplazamiento, reservado en todas las páginas: la 404 (sin scroll) corría su cabecera 7,5 px
   respecto de las demás (H2-18), y con la cabecera fuera de la transición se notaría */
html { scrollbar-gutter: stable; }
@keyframes pagina-sale { to { opacity: 0; transform: translateY(-2.5%); } }
@keyframes pagina-entra { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }

/* ---------- menos movimiento: todo quieto y legible; solo fundidos cortos ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: var(--t-press) !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-aparece], .js [data-aparece].es-visto { opacity: 1; transform: none; }
  .js [data-aclara] .ch, .js [data-aclara].es-visto .ch { opacity: 1; filter: none; transform: none; }
  .boton:active, .enlace:active, .cab__lado a:active { scale: none; }
  .wa-flotante:active, .cab__menu:active, .menu__cerrar:active, .menu__lista a:active, .pie__nav a:active, .pie__legal a:active, .cab__logo:active, .pie__logo:active { scale: none; }
}