/* ═══════════════════════════════════════════════════════════
   TEMA — Marena Hotel & Spa
   Oscuro, pero CÁLIDO: verde profundo y dorado, no el azul frío
   del estudio. Es la demo más animada de las cuatro — en hotelería
   la foto tiene que moverse, es la mitad de la venta.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:          #0C1410;
  --bg-2:        #101B16;
  --surface:     #16241D;
  --surface-2:   #1D2F26;
  --line:        rgba(244,241,232,.11);
  --line-strong: rgba(244,241,232,.22);

  --text:        #F4F1E8;
  --text-2:      #CFC9B8;
  --muted:       #968F7C;

  --accent:      #C9A227;
  --accent-2:    #E3C25C;
  --accent-deep: #8F7015;
  --on-accent:   #0C1410;
  --glow:        rgba(201,162,39,.34);
  --glow-soft:   rgba(201,162,39,.12);

  --vidrio:        linear-gradient(165deg,rgba(244,241,232,.07),rgba(244,241,232,.02));
  --vidrio-fuerte: linear-gradient(165deg,rgba(244,241,232,.12),rgba(244,241,232,.04));
  --campo-bg:      rgba(12,20,16,.55);

  --tracking-h:  -.02em;
  --radius:      2px;
  --radius-sm:   2px;
  --radius-pill: 2px;

  --sh-depth: 0 8px 34px rgba(0,0,0,.72);
  --sh-lit:   0 0 26px rgba(201,162,39,.32);
  --sh-hover: 0 0 24px rgba(227,194,92,.85);
  --sh-suave: 0 2px 14px rgba(0,0,0,.6);
  --sombra-panel: 0 40px 90px -60px #000;

  /* Tema oscuro: la viñeta puede cerrar fuerte, y cierra en el verde
     de la paleta y no en negro puro, para que no aparezca un agujero
     gris en las esquinas. */
  --grano-op: .06;
  --vineta: radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(3,9,6,.58) 100%);
}

.bg-static{ opacity:.85 }
.hero__grid{ display:none }

/* La serif sólo en los <em>: el peso lo lleva la foto, no la letra. */
.h1{ font-weight:500 }
.h1 em, .h2 em{ color:var(--accent-2) }

/* ── Hero a sangre ── */
.hero__foto{ position:absolute; inset:0; z-index:0; overflow:hidden }
.hero__foto img{ width:100%; height:100%; object-fit:cover; will-change:transform }
.hero__foto::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,20,16,.92) 0%, rgba(12,20,16,.62) 46%, rgba(12,20,16,.30) 100%),
    linear-gradient(180deg, rgba(12,20,16,.55) 0%, transparent 30%, rgba(12,20,16,.75) 100%);
}
@media (max-width:900px){
  .hero__foto::after{ background:linear-gradient(180deg, rgba(12,20,16,.72) 0%, rgba(12,20,16,.5) 45%, rgba(12,20,16,.9) 100%) }
}
.hero__title{ max-width:14ch }

/* ── El titular vivo ──
   Dorado que cruza sobre marfil. La parada del medio es el dorado
   claro y no el dorado de marca: sobre verde oscuro el #C9A227 se
   apaga y el barrido se pierde justo cuando pasa por el medio de la
   palabra, que es donde tiene que verse. La ola va lenta: es un hotel
   de lago, no una marca de bebida. */
.titulo-vivo{
  --tv-1:#F4F1E8;
  --tv-2:#E3C25C;
  --tv-3:#F4F1E8;
  --tv-luz:8.5s;
  --tv-ola:6.2s;
  --tv-alto:-6px;
}
/* La bajada destella con el mismo dorado, y más espaciado todavía: dos
   luces al mismo ritmo se leen como una sola cosa parpadeando. */
.hero__lead.destella{ --dest-base:var(--text-2); --dest-luz:#E3C25C; animation-duration:11s }

/* ── Tarjetas de habitación ── */
.tarjeta{ overflow:hidden; padding:0 }
.tarjeta img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .9s var(--ease) }
.tarjeta:hover img{ transform:scale(1.05) }
.tarjeta__txt{ padding:clamp(1.2rem,2.4vw,1.7rem) }
.tarjeta__txt b{ display:block; color:var(--accent); font-weight:500; font-size:.86rem; margin-top:.6rem }

/* ── Galería en mosaico: la primera pisa dos columnas ── */
/* ── Mosaico de seis ──
   Una grande arriba a la izquierda con una alta al lado, y abajo tres
   parejas. La grande NO es decoración: en hotelería la primera foto es
   la que decide si el visitante sigue leyendo, y una foto chica no
   decide nada.

   ⚠ La proporción la marca la FIGURA, no la foto. La primera ocupa dos
   filas, así que su alto sale de sumar las dos de al lado: si la
   proporción viviera en el <img>, la foto se quedaría con su propio
   alto y abajo aparecería un bloque vacío del color del fondo. Es
   exactamente lo que pasaba con la foto del deck —no había error, no
   había hueco negro, la foto simplemente "no se veía"—. Lo que la hace
   llenar la caja es el `height:100%` que ahora trae base.css. */
.galeria{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.galeria figure{ aspect-ratio:16/10 }
/* La grande ocupa dos columnas y dos filas. Su proporción es la que
   define el alto de esas dos filas: es el único elemento de arriba que
   tiene una, así que si se la sacás las dos filas quedan en cero. */
.galeria figure:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3 }
/* La alta se estira a lo que midan esas dos filas. Sin proporción
   propia y sin el height:100% de base.css, acá es donde aparecía el
   bloque vacío. */
.galeria figure:nth-child(2){ grid-column:3; grid-row:1 / 3; aspect-ratio:auto }
/* Y una panorámica al pie, a los tres anchos. Cierra la sección como
   la cierra un plano general en una película: después de mirar los
   rincones, dónde está todo eso. */
.galeria figure:nth-child(6){ grid-column:1 / 4; aspect-ratio:32/9 }
.galeria img{ aspect-ratio:auto }

/* En pantalla angosta el mosaico se deshace: dos columnas parejas y la
   primera a lo ancho. Un mosaico de tres columnas en un celular deja
   fotos de 90 px, y una foto de 90 px no vende una habitación. */
@media (max-width:760px){
  .galeria{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .galeria figure:nth-child(1){ grid-column:1 / 3; grid-row:auto; aspect-ratio:16/9 }
  .galeria figure:nth-child(2){ grid-column:auto;  grid-row:auto; aspect-ratio:16/10 }
  .galeria figure:nth-child(6){ grid-column:1 / 3; aspect-ratio:2/1 }
}

/* ── Barra de servicios que corre sola ──
   Ahora la mueve el motor: además de correr, se acelera con la
   velocidad del scroll. Sólo transform. */
.cinta{ margin-block:clamp(2.5rem,6vw,4rem) }
.cinta--chica .cinta__pista > span{ gap:2.4rem; padding-right:2.4rem }
.cinta b{ padding-inline:.4rem }

/* ── Sello del hero ── */
.hero__sello{
  position:absolute; right:clamp(1.5rem,5vw,4rem); bottom:clamp(2rem,8vh,5rem); z-index:2;
}
@media (max-width:900px){ .hero__sello{ display:none } }
.sello text{ font-family:var(--font); font-size:10px; letter-spacing:.2em }

/* ── Cifras ── */
.cifras{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:760px){ .cifras{ grid-template-columns:1fr 1fr } }
.cifras div{ background:var(--surface); padding:clamp(1rem,2.4vw,1.6rem) .4rem; text-align:center }
.cifras b{
  display:block; font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:500;
  letter-spacing:-.04em; color:var(--accent-2); line-height:1;
}
.cifras span{ font-size:.76rem; color:var(--muted) }

/* Numerito de la habitación. Ordena la lectura y de paso deja claro
   que son tres tipos, no un catálogo infinito. */
.tarjeta__ord{
  display:block; font-size:.72rem; letter-spacing:.22em;
  color:var(--muted); margin-bottom:.7rem;
}

#quienes .hero__media img{ aspect-ratio:4/3; object-fit:cover }

/* ── Los títulos de sección: tipografía y color ──
   Tercera vuelta sobre lo mismo, y las dos primeras fallaron por el
   mismo motivo: estuve corrigiendo el COLOR de una letra que el
   problema lo tenía en la FORMA.

   El titular era Inter en semibold. Inter es la tipografía por omisión
   de la mitad de internet, y en un hotel boutique eso no es neutro: es
   el renglón que dice "esto lo hizo alguien con una plantilla". Ningún
   ajuste de color arregla eso, porque lo que se lee como barato no es
   el tono, es que la letra no tiene ni una decisión adentro.

   Va Cormorant Garamond, que es una garalda de contraste alto: astas
   finas, remates afilados y una itálica de verdad. Es la letra de los
   hoteles chicos y de las cartas de vino, y al lado de la Inter del
   cuerpo hace lo que tiene que hacer un titular — cambiar de voz.

   ⚠ CORMORANT PIDE MÁS CUERPO Y MÁS PESO DEL QUE PARECE. Se dibuja
   chica para su medida (una x pequeña), así que al mismo número de
   píxeles se ve dos tallas menos que Inter: por eso el cuerpo sube.
   Y va en 500 y no en 400: las astas finas de esta letra, sobre un
   fondo salpicado de partículas doradas, en 400 directamente se
   cortan.

   El color, ahora, es metal y no crema. La letra descansa en champán,
   la cruza un blanco con un núcleo de oro viejo, y la sombra oscura
   sigue estando porque las astas finas la necesitan más que antes. */
.h2{
  font-family:'Cormorant Garamond', var(--serif), Georgia, serif;
  /* ⚠ 600 Y NO 500, Y ESTE NÚMERO SE MIDIÓ. Cormorant tiene astas muy
     finas, y detrás de estos títulos hay un campo de partículas
     doradas: en 500 los trazos delgados se cortan contra las manchas y
     el titular vuelve a verse sucio, que es justo lo que veníamos a
     arreglar. En 600 la letra sigue siendo una garalda elegante y tiene
     ink suficiente para ganarle al fondo. */
  font-weight:600;
  font-size:clamp(2.7rem, 6.2vw, 5rem);
  line-height:1.0;
  letter-spacing:-.005em;
  color:#F6EBCE;
  /* Tres sombras y no una: la ancha le abre un hueco oscuro al fondo,
     la media le da cuerpo y la corta le dibuja el contorno. Con una
     sola, o queda un halo gris o no se despega. */
  text-shadow:0 4px 44px rgba(3,8,6,.96),
              0 2px 14px rgba(3,8,6,.8),
              0 1px 2px rgba(3,8,6,.7);
}
.reflejo{
  --rf-1:#F6EBCE;   /* champán claro: el color en el que descansa */
  --rf-2:#FFFFFF;   /* el filo del reflejo */
  --rf-3:#C9A227;   /* el oro viejo del núcleo */
  --rf-luz: 7.5s;
}
/* El <em> en itálica de Cormorant es de las cosas más lindas que tiene
   esta letra: se lo deja en oro para que se note que cambió de voz. */
.h1 em, .h2 em{ color:#FFD463; font-family:inherit; font-style:italic }

/* ── Las tres habitaciones, que giran ──
   El frente es la foto con su ficha; el dorso, verde profundo con el
   precio grande y "Me interesa esta habitación". El precio es el dato
   que decide, así que está en las dos caras: adelante chico, como
   referencia, y atrás grande, como respuesta.

   ⚠ Se le saca el zoom de la foto al apuntarla. Ese zoom y el giro son
   dos respuestas al mismo gesto: con las dos, la foto se agranda
   mientras se va de perfil y se ve como un error. */
.tarjeta-gira{
  --gira-fondo:var(--surface);
  --gira-color:#12201A;
  --gira-tinta:#F4F1E8;
}
.tarjeta-gira:hover img{ transform:none }
.tarjeta-gira .gira__frente{ border-color:var(--line) }
/* El dorso de una tarjeta con foto es alto —mide lo que mide la foto
   más su ficha—, así que el contenido va centrado y no repartido: con
   space-between quedaba un pozo de doscientos píxeles entre el precio
   y el enlace. */
.gira__dorso{
  background-image:linear-gradient(155deg,#1B3128 0%, #12201A 58%, #0A120E 100%);
  border:1px solid rgba(201,162,39,.34);
  justify-content:center;
}
.tarjeta-gira .gira__paso{ margin-top:1.6rem; padding-top:0 }
.gira__dorso h4{
  font-family:'Cormorant Garamond', var(--serif), Georgia, serif;
  font-weight:600; color:#F6EBCE;
}
.gira__dorso .tarjeta__ord{ color:var(--accent-2); opacity:.9 }
.gira__precio{
  display:block; margin-top:.9rem;
  font-family:'Cormorant Garamond', var(--serif), Georgia, serif;
  font-size:clamp(1.3rem,2.6vw,1.75rem); font-weight:500;
  color:#FFD463; letter-spacing:-.01em;
}
.gira__dorso .gira__paso{ color:#EBD9AC }