/* ==========================================================================
   Rental Rosarito 2026 — Tokens y base
   Gama de color: la del logotipo dorado del cliente (#9E7236).

   Ver herramientas/auditar-contraste.py (todas las combinaciones reales, AA).
   ========================================================================== */

:root {
  /* marca — gama del logotipo (dorado bronce #9E7236 sobre blanco)
     El dorado del logo da 4.3:1 con blanco: sirve para líneas, bordes e
     iconos, pero NO como texto chico ni como fondo de texto blanco. */
  --oro: #9E7236;            /* dorado exacto del logotipo · líneas, bordes, acentos */
  --oro-boton: #8A622C;      /* relleno de botones sobre claro · texto blanco 5.4:1 */
  --oro-hondo: #7A5424;      /* dorado como TEXTO sobre claro · 6.7:1 sobre blanco */
  --oro-claro: #C9A064;      /* relleno sobre oscuro · texto espresso 7.5:1 */
  --oro-luz: #D2A865;        /* dorado como TEXTO sobre oscuro · 8.2:1 */
  --oro-suave: #F3E6CF;      /* fondos de chips e iconos sobre claro */

  /* superficies oscuras (espresso cálido que acompaña al dorado) */
  --carbon: #1A1611;
  --grafito: #241E18;
  --piedra: #352D24;
  --piedra-2: #433A30;
  --linea-o: rgba(255, 255, 255, .12);
  --texto-o: #FFFFFF;
  --texto-o2: #D4C8B8;       /* 11.0:1 sobre carbón · 8.2:1 sobre piedra */

  /* superficies claras (blanco del logotipo y champán) */
  --blanco: #FFFFFF;
  --hueso: #FBF8F2;
  --arena: #F4EDE2;
  --arena-2: #EADFCD;
  --linea-c: #E2D6C3;
  --tinta: #211C16;
  --texto-c2: #5A5249;       /* 7.4:1 sobre blanco · 6.5:1 sobre arena */

  /* tipografía */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-ui: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-xs: .78rem;
  --t-sm: .9rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.1rem, 1.04rem + .3vw, 1.28rem);
  --t-lg: clamp(1.3rem, 1.18rem + .6vw, 1.65rem);
  --t-xl: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem);
  --t-2xl: clamp(2.05rem, 1.5rem + 2.4vw, 3.5rem);
  --t-3xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.9rem);

  --seccion: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;
  --arco: 999px 999px var(--r-lg) var(--r-lg);   /* ventana en arco: motivo de las fotos */

  --sombra: 0 30px 70px -30px rgba(26, 22, 17, .55);
  --sombra-oro: 0 18px 44px -16px rgba(158, 114, 54, .55);

  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-salida: cubic-bezier(.55, 0, .75, .2);
  --curva-resorte: cubic-bezier(.34, 1.4, .5, 1);

  --cabecera-alto: 88px;
  /* techo con chimenea del logotipo dorado, como viñeta de las etiquetas */
  --techo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M2 20L18 5l5 4.6V3h5v11l10 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset corto */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--tinta);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 var(--e-4, 1rem);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); line-height: 1.15; }
h4 { font-size: var(--t-md); }
p { margin: 0 0 1rem; text-wrap: pretty; }
::selection { background: var(--oro-claro); color: var(--carbon); }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.contenedor--ancho { max-width: 1480px; }
.contenedor--angosto { max-width: 880px; }
.centro { text-align: center; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--oro-claro); color: var(--carbon); padding: .7rem 1.1rem; border-radius: var(--r-sm);
  font-family: var(--f-ui); font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 1rem; }

/* ---------------------------------------------------------------- tonos de sección
   REGLA APRENDIDA: una superficie oscura declara SIEMPRE su `color`; los
   componentes que heredan currentColor (botón fantasma, SVG, ::marker) se
   rompen si no. */
.tono-oscuro { background: var(--carbon); color: var(--texto-o); }
.tono-grafito { background: var(--grafito); color: var(--texto-o); }
.tono-claro { background: var(--hueso); color: var(--tinta); }
.tono-blanco { background: var(--blanco); color: var(--tinta); }
.tono-arena { background: var(--arena); color: var(--tinta); }

.seccion { padding-block: var(--seccion); position: relative; overflow-x: clip; }

/* grano sutil de papel sobre las superficies de arena */
.tono-arena::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(90, 82, 73, .09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.tono-arena > * { position: relative; }

/* ---------------------------------------------------------------- aparición
   Solo se oculta si el JS arrancó (html sin .sin-js). */
html:not(.sin-js) .aparece {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--curva), transform .9s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html:not(.sin-js) .aparece.es-visible { opacity: 1; transform: none; }
html:not(.sin-js) .aparece--izq { transform: translateX(-40px); }
html:not(.sin-js) .aparece--der { transform: translateX(40px); }
html:not(.sin-js) .aparece--escala { transform: scale(.94); }
/* Un translateX en estado oculto cuenta como desbordamiento en móvil. */
@media (max-width: 960px) {
  html:not(.sin-js) .aparece--izq, html:not(.sin-js) .aparece--der { transform: translateY(34px); }
}

/* Titulares partidos palabra por palabra (app.js): cada palabra sube desde
   una máscara y se desenfoca al entrar — el «texto magnífico». */
.partido .palabra { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.partido .palabra > span {
  display: inline-block; transform: translateY(108%) rotate(4deg); filter: blur(6px); transform-origin: 0 100%;
  transition: transform 1.05s var(--curva), filter 1.05s var(--curva);
  transition-delay: calc(var(--p, 0) * 55ms + var(--retraso, 0ms));
}
.partido.es-visible .palabra > span { transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.sin-js) .aparece { opacity: 1; transform: none; transition: none; }
  .partido .palabra > span { transform: none; filter: none; transition: none; }
}

/* ---------------------------------------------------------------- barra de progreso */
.progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  transform-origin: left; transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, var(--oro), var(--oro-luz));
  pointer-events: none;
}