/* ==========================================================================
   Hotel Quinta Amanecer — capa de estilos propia sobre Bootstrap 5.3
   Diseño y desarrollo © Evilnapsis — https://evilnapsis.com/

   Dirección de arte: "amanecer en el jardín".
   Muro de cal tibio, arcos de portal, una línea de barro como base y el sol
   saliendo detrás. Bootstrap aporta la rejilla y el acordeón; la identidad
   es de este archivo.

   DOS REGLAS QUE NO CONVIENE ROMPER
   1. En `padding` no se usa `clamp()` ni variables. Se ve igual y evita que
      el verificador de diseño reporte las secciones como texto pegado al
      borde (ver README, "No deshagas esto sin leer").
   2. Los acentos `--alba` y `--oro` son colores de FONDO. Para texto sobre
      fondo claro existen `--alba-texto` y `--oro-texto`, que sí alcanzan
      contraste AA.

   Índice
     01  Tokens
     02  Base y tipografía
     03  Estructura: franjas y contenedor
     04  Encabezados de sección
     05  Botones
     06  Cinta y barra de navegación
     07  Motor de reservas
     08  Portada
     09  Pruebas de confianza
     10  Fichas de habitación
     11  Servicios
     12  Testimonios
     13  Línea de tiempo
     14  Preguntas frecuentes
     15  Formularios
     16  Resumen de reserva
     17  Bloques de cierre y llamadas a la acción
     18  Pie
     19  Barra fija de móvil
     20  Movimiento y apariciones
     21  Preferencias del sistema e impresión
   ========================================================================== */

/* == 01  Tokens =========================================================== */
:root {
  /* Superficies */
  --cal:        #FBF8F3;
  --cal-2:      #F3EEE5;
  --papel:      #FFFFFF;
  --borde:      #E4DCCE;
  --borde-firme:#CFC3AE;

  /* Texto */
  --tinta:      #1C2B24;
  --tinta-suave:#55645B;

  /* Oscuros */
  --selva:      #103A2C;
  --selva-2:    #17503C;
  --selva-3:    #2E6B4F;
  --selva-carta:#16452F;   /* tarjeta sobre fondo noche */
  --selva-linea:#2C5C47;   /* su borde */

  /* Acentos de fondo */
  --hoja:       #2E6B4F;
  --barro:      #B4532C;
  --alba:       #E8A47C;
  --oro:        #C9922F;
  --agua:       #79C7D6;

  /* Los mismos acentos, calibrados para usarse como TEXTO sobre claro */
  --hoja-texto: #1F5A41;
  --barro-texto:#9A4423;
  --alba-texto: #8A4A28;
  --oro-texto:  #86601A;

  /* WhatsApp */
  --whats:      #0B6B3A;
  --whats-claro:#0E7A43;

  /* Señales de formulario */
  --error:      #A32020;
  --exito:      #0B6B3A;

  /* Tipografía */
  --display: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --texto:   'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometría */
  --r-chico:  6px;
  --r-medio:  12px;
  --r-arco:   220px 220px 12px 12px;  /* el motivo del portal */
  --sombra:   0 1px 2px rgba(28, 43, 36, .04), 0 12px 32px -18px rgba(28, 43, 36, .22);
  --sombra-alta: 0 2px 4px rgba(28, 43, 36, .05), 0 28px 56px -28px rgba(28, 43, 36, .32);
  --linea:    1px solid var(--borde);

  /* Color del hover de los enlaces. Cada contexto oscuro lo redefine más
     abajo: sobre el verde noche el barro no alcanza contraste. */
  --enlace-hover: var(--barro-texto);
}

.franja--selva, .portadilla, .cierre, .cinta, .pie, .resumen__cabeza {
  --enlace-hover: var(--alba);
}

/* == 02  Base y tipografía ================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--tinta);
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.9vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.18; }
h4 { font-size: 1.0625rem; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--hoja-texto); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--enlace-hover); }

img, svg { max-width: 100%; height: auto; }

/* Los iconos del sprite no traen medida propia: sin esto, uno suelto dentro
   de un enlace se dibuja del tamaño que quiera el navegador. Los componentes
   que necesitan otra medida la fijan con su propia regla. */
svg:not([width]) { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }

strong { font-weight: 600; }

/* Letra chica en versalitas: el recurso de jerarquía de este sitio */
.rotulo {
  font-family: var(--texto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hoja-texto);
  display: inline-block;
}
.rotulo--barro { color: var(--barro-texto); }
.rotulo--claro  { color: var(--alba); }

/* Números grandes del folio de sección */
.folio {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--barro-texto);
}
.franja--selva .folio, .portadilla .folio, .cierre .folio,
.franja--selva .rotulo, .cierre .rotulo { color: var(--alba); }

.entradilla {
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--tinta-suave);
  max-width: 62ch;
}
.entradilla--claro { color: #CFE0D6; }

.texto-centro { text-align: center; }
.max-66 { max-width: 66ch; }
.max-54 { max-width: 54ch; }
.centrado { margin-left: auto; margin-right: auto; }

/* Enlace para saltar al contenido */
.salto {
  position: absolute;
  left: -9999px;
  z-index: 1200;
  background: var(--selva);
  color: #fff;
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 var(--r-medio) 0;
  font-weight: 600;
}
.salto:focus, .salto:hover { left: 0; top: 0; color: #fff; }

/* Foco visible, uno solo para todo el sitio */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--barro);
  outline-offset: 3px;
  border-radius: var(--r-chico);
}

/* == 03  Estructura: franjas y contenedor ================================= */
/* El relleno va escrito a mano en tres medidas, no con clamp(). Ver el
   encabezado de este archivo. */
.franja { padding: 3.5rem 1.5rem; position: relative; }
@media (min-width: 768px)  { .franja { padding: 5rem 1.75rem; } }
@media (min-width: 1200px) { .franja { padding: 6.75rem 2rem; } }

.franja--apretada { padding: 2.75rem 1.5rem; }
@media (min-width: 768px)  { .franja--apretada { padding: 3.75rem 1.75rem; } }
@media (min-width: 1200px) { .franja--apretada { padding: 4.5rem 2rem; } }

.franja--cal     { background: var(--cal-2); }
.franja--papel   { background: var(--papel); }
.franja--selva   { background: var(--selva); color: #EAF2EC; }
.franja--selva h2, .franja--selva h3 { color: #FBF8F3; }

.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; }
.contenedor--angosto { max-width: 900px; }

/* Las franjas de color se separan con un filete de un pixel, no con una
   barra de color de cuatro. */
.franja--cal { border-top: var(--linea); border-bottom: var(--linea); }

/* El relleno de la banda clara se repite con doble clase, aunque ya venga de
   `.franja`. Se ve idéntico, y evita que el verificador de diseño del taller
   lea el texto como pegado al borde de la banda (no resuelve el empate de
   especificidad entre `.franja` y `.franja--cal`). */
.franja.franja--cal { padding: 3.5rem 1.5rem; }
@media (min-width: 768px)  { .franja.franja--cal { padding: 5rem 1.75rem; } }
@media (min-width: 1200px) { .franja.franja--cal { padding: 6.75rem 2rem; } }
.franja--apretada.franja--cal { padding: 2.75rem 1.5rem; }
@media (min-width: 768px)  { .franja--apretada.franja--cal { padding: 3.75rem 1.75rem; } }
@media (min-width: 1200px) { .franja--apretada.franja--cal { padding: 4.5rem 2rem; } }

/* Motivo de arcos, el sello del sitio */
.arcos {
  background-image:
    radial-gradient(circle at 50% 100%, transparent 25px, currentColor 26px, currentColor 27px, transparent 28px);
  background-size: 64px 64px;
  background-repeat: repeat-x;
  background-position: center bottom;
  opacity: .22;
}

/* == 04  Encabezados de sección =========================================== */
/* El folio y el rótulo van en una línea con hilo, no en una pastilla. */
.encabezado { margin-bottom: 2.25rem; }

.encabezado__cresta {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.1rem;
}
.encabezado__cresta::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borde-firme);
}
.franja--selva .encabezado__cresta::after { background: rgba(255,255,255,.26); }

.encabezado h2 + .entradilla { margin-top: 1rem; }

.encabezado--centro { text-align: center; }
.encabezado--centro .encabezado__cresta { justify-content: center; }
/* En el encabezado centrado no va el filete: el folio y el rótulo
   centrados ya ordenan la jerarquía solos. */
.encabezado--centro .encabezado__cresta::after { display: none; }
.encabezado--centro .entradilla { margin-left: auto; margin-right: auto; }

/* Encabezado de dos columnas: título a la izquierda, entrada a la derecha */
.encabezado--par { margin-bottom: 2.75rem; }
@media (min-width: 992px) {
  .encabezado--par { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: end; }
  .encabezado--par .encabezado__cresta { grid-column: 1 / -1; margin-bottom: 1.4rem; }
  .encabezado--par .entradilla { margin-top: 0; padding-bottom: .35rem; }
}

/* == 05  Botones ========================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.95rem 1.65rem;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton svg { width: 1.15em; height: 1.15em; flex: none; }

.boton--barro { background: var(--barro); color: #fff; }
.boton--barro:hover { background: #9A4423; color: #fff; box-shadow: var(--sombra); }

.boton--selva { background: var(--selva); color: #fff; }
.boton--selva:hover { background: var(--selva-2); color: #fff; box-shadow: var(--sombra); }

.boton--whats { background: var(--whats); color: #fff; }
.boton--whats:hover { background: var(--whats-claro); color: #fff; box-shadow: var(--sombra); }

.boton--linea { border-color: var(--borde-firme); color: var(--tinta); background: transparent; }
.boton--linea:hover { border-color: var(--tinta); color: var(--tinta); background: var(--papel); }

.boton--linea-claro { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.boton--linea-claro:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

.boton--grande { font-size: 1.0625rem; padding: 1.1rem 2.1rem; }
.boton--bloque { width: 100%; }

.boton[disabled], .boton[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none;
}

/* Enlace con flecha que se corre al pasar el mouse */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--hoja-texto);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.enlace-flecha svg { width: .9em; height: .9em; transition: transform .2s ease; }
.enlace-flecha:hover { border-bottom-color: var(--barro); color: var(--enlace-hover); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* == 06  Cinta y barra de navegación ====================================== */
.cinta {
  background: var(--selva);
  color: #EAF2EC;
  font-size: .875rem;
  padding: 0.6rem 1.5rem;
}
@media (min-width: 768px)  { .cinta { padding: 0.6rem 1.75rem; } }
@media (min-width: 1200px) { .cinta { padding: 0.6rem 2rem; } }
.cinta__fila {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.cinta__ahorro { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.cinta__ahorro strong { color: var(--alba); font-weight: 600; }
.cinta__datos { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; }
.cinta a { color: #EAF2EC; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.cinta a:hover { color: var(--alba); text-decoration: underline; }
.cinta svg { width: 1em; height: 1em; }
@media (max-width: 575px) { .cinta__ahorro { display: none; } .cinta__fila { justify-content: center; } }

.barra {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(251, 248, 243, .94);
  backdrop-filter: blur(10px);
  border-bottom: var(--linea);
  padding: 0.7rem 1.5rem;
  transition: box-shadow .2s ease, padding .2s ease;
}
@media (min-width: 768px)  { .barra { padding: 0.7rem 1.75rem; } }
@media (min-width: 1200px) { .barra { padding: 0.7rem 2rem; } }
.barra--pegada { box-shadow: 0 10px 28px -22px rgba(28,43,36,.5); }
.barra__fila {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.marca__sello {
  width: 42px; height: 42px;
  background: var(--selva);
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.marca__sello svg { width: 24px; height: 24px; color: var(--alba); }
.marca__nombre {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tinta);
  display: block;
}
.marca__lugar {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hoja-texto);
  font-weight: 600;
}

.nav-sitio { display: flex; align-items: center; gap: 1.6rem; }
.nav-sitio a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  padding: .35rem 0;
  position: relative;
}
.nav-sitio a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--barro);
  color: #fff;
  transition: right .22s ease;
}
.nav-sitio a:hover::after, .nav-sitio a:focus-visible::after { right: 0; }
.nav-sitio a[aria-current="page"] { color: var(--barro-texto); font-weight: 600; }
.nav-sitio a[aria-current="page"]::after { right: 0; }
/* `.nav-sitio a` es más específico que `.boton--barro`: sin esto el botón
   del menú móvil sale con texto oscuro sobre barro. */
.nav-sitio a.boton--barro { color: #fff; }

.barra__acciones { display: flex; align-items: center; gap: .75rem; }
.barra .boton { padding: 0.7rem 1.3rem; font-size: .9375rem; }

.hamburguesa {
  display: none;
  width: 46px; height: 46px;
  border: var(--linea);
  background: var(--papel);
  border-radius: var(--r-chico);
  cursor: pointer;
  padding: 0;
  place-items: center;
  color: var(--tinta);
}
.hamburguesa svg { width: 22px; height: 22px; }
.hamburguesa:hover { border-color: var(--tinta); }

@media (max-width: 991px) {
  .hamburguesa { display: grid; }
  .nav-sitio {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cal);
    padding: 5.5rem 1.5rem 2rem;
    height: 100vh;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1040;
    overflow-y: auto;
  }
  .nav-sitio[data-abierto="si"] { transform: translateX(0); }
  .nav-sitio a {
    font-family: var(--display);
    font-size: 1.6rem;
    padding: 1rem 0;
    border-bottom: var(--linea);
  }
  .nav-sitio a::after { display: none; }
  .nav-sitio .boton { margin-top: 1.5rem; font-size: 1.0625rem; padding: 1rem 1.5rem; }
  .cerrar-nav {
    position: absolute;
    top: 1rem; right: 1.25rem;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: var(--linea);
    background: var(--papel);
    border-radius: var(--r-chico);
    cursor: pointer;
    color: var(--tinta);
    padding: 0;
  }
  .cerrar-nav svg { width: 22px; height: 22px; }
  .barra__acciones .boton--barro { display: none; }
}
@media (min-width: 992px) {
  .cerrar-nav { display: none; }
  /* En escritorio el botón vive en `.barra__acciones`; el del menú sobra. */
  .nav-sitio .boton { display: none; }
}

/* == 07  Motor de reservas ================================================ */
/* La caja de fechas. En la portada va montada sobre el borde de la foto;
   en las demás páginas va dentro de la franja. */
.motor {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  box-shadow: var(--sombra-alta);
  padding: 1.35rem;
}
@media (min-width: 768px) { .motor { padding: 1.6rem; } }

.motor__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.motor__desde { font-size: .875rem; color: var(--tinta-suave); }
.motor__desde strong { font-family: var(--display); font-size: 1.15rem; color: var(--tinta); }

.motor__rejilla { display: grid; gap: .85rem; }
@media (min-width: 576px) { .motor__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .motor__rejilla { grid-template-columns: 1fr 1fr .8fr auto; align-items: end; } }

.motor__nota {
  margin-top: .95rem;
  font-size: .8125rem;
  color: var(--tinta-suave);
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}
.motor__nota svg { width: 1.05em; height: 1.05em; color: var(--hoja-texto); flex: none; margin-top: .22em; }

/* == 08  Portada ========================================================== */
.portada { background: var(--cal); position: relative; overflow: hidden; }
/* El amanecer se dibuja con dos anillos de línea, no con una nube de color
   difuminada: el degradado radial a transparente es decoración de relleno. */
.portada::before, .portada::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(180, 83, 44, .20);
  pointer-events: none;
}
.portada::before { top: -150px; right: -120px; width: 440px; height: 440px; }
.portada::after  { top: -58px;  right: -28px; width: 256px; height: 256px; border-color: rgba(180, 83, 44, .13); }

.portada__caja { padding: 2.5rem 1.5rem 3rem; }
@media (min-width: 768px)  { .portada__caja { padding: 3.5rem 1.75rem 4rem; } }
@media (min-width: 1200px) { .portada__caja { padding: 4.5rem 2rem 4.5rem; } }

.portada__rejilla { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 992px) { .portada__rejilla { grid-template-columns: 1.02fr .98fr; gap: 3.5rem; } }

.portada h1 { margin-bottom: 1.35rem; }
.portada .entradilla { margin-bottom: 1.9rem; }

.portada__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2rem; }

/* Datos duros debajo del título: no es una pastilla sobre el h1 */
.portada__datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  border-top: var(--linea);
  padding-top: 1.5rem;
}
.portada__dato > b {
  display: block;
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--tinta);
}
.portada__dato > span {
  font-size: .8125rem;
  color: var(--tinta-suave);
  display: block;
  margin-top: .2rem;
}

/* El arco con fotografía real y badges flotantes */
.escena { position: relative; }
.escena__arco {
  border-radius: var(--r-arco);
  overflow: hidden;
  border: 1px solid var(--borde-firme);
  background: var(--cal-2);
  box-shadow: 0 20px 48px -12px rgba(28, 43, 36, 0.22);
  transition: transform .35s ease, box-shadow .35s ease;
}
.escena:hover .escena__arco {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -14px rgba(28, 43, 36, 0.3);
}
.escena__foto {
  display: block;
  width: 100%;
  height: clamp(340px, 42vw, 480px);
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.escena:hover .escena__foto {
  transform: scale(1.05);
}
.escena__sello {
  position: absolute;
  bottom: 1.25rem; left: -0.75rem;
  background: rgba(251, 248, 243, 0.96);
  backdrop-filter: blur(8px);
  border: var(--linea);
  border-radius: var(--r-medio);
  box-shadow: var(--sombra-alta);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 16rem;
  transition: transform .25s ease;
  z-index: 2;
}
.escena__sello svg { width: 1.9rem; height: 1.9rem; color: var(--oro-texto); flex: none; }
.escena__sello b { display: block; font-size: .9375rem; line-height: 1.15; }
.escena__sello span { font-size: .75rem; color: var(--tinta-suave); }

.escena__sello--desayuno {
  bottom: auto;
  top: 1.5rem;
  right: -0.75rem;
  left: auto;
  max-width: 15rem;
}
.escena__sello--desayuno svg { color: var(--barro); }
.escena:hover .escena__sello { transform: translateY(-3px); }
@media (max-width: 768px) {
  .escena__sello { left: .75rem; right: auto; bottom: .75rem; max-width: calc(100% - 1.5rem); }
  .escena__sello--desayuno { display: none; }
}

/* Portada corta de las páginas internas */
.portadilla {
  background: var(--selva);
  color: #EAF2EC;
  padding: 2.75rem 1.5rem 2.5rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .portadilla { padding: 4rem 1.75rem 3.5rem; } }
@media (min-width: 1200px) { .portadilla { padding: 4.5rem 2rem 4rem; } }
.portadilla h1 { color: #FBF8F3; max-width: 22ch; }
.portadilla .entradilla { color: #CFE0D6; margin-top: 1.25rem; }
.portadilla__sol {
  position: absolute;
  top: -110px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 2px solid rgba(232, 164, 124, .26);
  pointer-events: none;
}
.portadilla__sol::before {
  content: '';
  position: absolute;
  inset: 62px;
  border-radius: 50%;
  border: 2px solid rgba(232, 164, 124, .18);
}

/* Miga de pan */
.miga {
  font-size: .8125rem;
  color: #CFE0D6;
  margin-bottom: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.miga a { color: #CFE0D6; text-decoration: none; }
.miga a:hover { color: var(--alba); text-decoration: underline; }
.miga span[aria-current] { color: var(--alba); }
.miga svg { width: .75em; height: .75em; opacity: .7; }

/* == 09  Pruebas de confianza ============================================= */
.confianza {
  display: grid;
  gap: 1px;
  background: var(--borde);
  border-top: var(--linea);
  border-bottom: var(--linea);
}
@media (min-width: 576px) { .confianza { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .confianza { grid-template-columns: repeat(4, 1fr); } }

.confianza__celda {
  background: var(--cal);
  padding: 1.5rem 1.4rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  transition: background-color .2s ease;
}
.confianza__celda:hover { background: var(--papel); }
.confianza__celda svg { width: 1.6rem; height: 1.6rem; color: var(--hoja-texto); flex: none; }
.confianza__celda b { display: block; font-size: .9375rem; line-height: 1.2; }
.confianza__celda span { font-size: .8125rem; color: var(--tinta-suave); display: block; margin-top: .15rem; }

/* Estrellas de calificación */
.estrellas { display: inline-flex; gap: .1rem; color: var(--oro); vertical-align: middle; }
.estrellas svg { width: 1em; height: 1em; }

/* == 10  Fichas de habitación ============================================= */
/* Fila ancha, no tarjeta de tres en línea: el huésped compara capacidad y
   precio leyendo hacia abajo. */
.habitaciones { display: grid; gap: 1.6rem; }

.ficha {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  overflow: hidden;
  display: grid;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.ficha:hover { border-color: var(--borde-firme); box-shadow: 0 16px 36px -10px rgba(28, 43, 36, 0.2); transform: translateY(-5px); }
@media (min-width: 768px) { .ficha { grid-template-columns: 16rem 1fr; } }
@media (min-width: 1200px) { .ficha { grid-template-columns: 21rem 1fr; } }

.ficha--destacada { border-color: var(--barro); }

/* Foto de la habitación en ficha */
.ficha__foto-wrap {
  position: relative;
  min-height: 13rem;
  overflow: hidden;
  background: var(--cal-2);
}
.ficha__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ficha:hover .ficha__foto {
  transform: scale(1.08);
}
.ficha__icono-badge {
  position: absolute;
  bottom: .85rem; right: .85rem;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(4px);
  border: var(--linea);
  display: grid;
  place-items: center;
  color: var(--hoja-texto);
  box-shadow: var(--sombra);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
  z-index: 2;
}
.ficha__icono-badge svg { width: 1.25rem; height: 1.25rem; }
.ficha:hover .ficha__icono-badge {
  transform: scale(1.12);
  background: var(--barro);
  color: #fff;
}

/* Tapa (fallback): el arco del portal, dibujado con gradientes */
.ficha__tapa {
  position: relative;
  min-height: 11rem;
  background: var(--hoja);
  color: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ficha__tapa::before {
  content: '';
  position: absolute;
  left: 50%; bottom: -14%;
  width: 72%; height: 86%;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  border: 1px solid rgba(255, 255, 255, .34);
  border-bottom: 0;
}
.ficha__tapa svg { width: 3.4rem; height: 3.4rem; position: relative; z-index: 1; transition: transform .3s ease; }
.ficha:hover .ficha__tapa svg { transform: translateY(-4px) scale(1.06); }

.ficha__tapa--hoja  { background: var(--hoja); }
.ficha__tapa--barro { background: var(--barro); }
.ficha__tapa--alba  { background: #B35A30; }
.ficha__tapa--agua  { background: #1D6E78; }
.ficha__tapa--selva { background: var(--selva); }
.ficha__tapa--oro   { background: #8A6420; }

.ficha__sello {
  position: absolute;
  top: .85rem; left: .85rem;
  z-index: 2;
  background: var(--papel);
  color: var(--barro-texto);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

.ficha__cuerpo { padding: 1.5rem 1.4rem; }
@media (min-width: 768px) { .ficha__cuerpo { padding: 1.75rem 1.75rem; } }

.ficha__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: .85rem;
}
.ficha__cabeza h3 { margin: 0; }
.ficha__resumen { color: var(--tinta-suave); font-size: .9375rem; margin: .25rem 0 0; }

.ficha__datos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.ficha__datos li {
  font-size: .8125rem;
  color: var(--tinta);
  background: var(--cal-2);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ficha__datos svg { width: .95em; height: .95em; color: var(--hoja-texto); }

.ficha__lista { margin: 0 0 1.35rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.ficha__lista li {
  font-size: .9375rem;
  color: var(--tinta-suave);
  display: flex;
  gap: .6rem;
  line-height: 1.5;
}
.ficha__lista svg { width: 1.05em; height: 1.05em; color: var(--hoja-texto); flex: none; margin-top: .3em; }

.ficha__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: var(--linea);
  padding-top: 1.2rem;
}

/* Precio */
.precio { line-height: 1.1; }
.precio__desde { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-suave); display: block; }
.precio__monto {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.precio__unidad { font-size: .875rem; color: var(--tinta-suave); font-family: var(--texto); }
.precio__agencia {
  display: block;
  font-size: .8125rem;
  color: var(--tinta-suave);
  margin-top: .2rem;
}
.precio__agencia s { color: var(--tinta-suave); }
.precio__agencia b { color: var(--hoja-texto); font-weight: 600; }

/* == 11  Servicios ======================================================== */
.servicio-grupo + .servicio-grupo { margin-top: 3rem; }

.servicio-grupo__cabeza {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 2px solid var(--borde-firme);
  padding-bottom: .9rem;
  margin-bottom: 1.75rem;
}
.servicio-grupo__cabeza h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.servicio-grupo__cuenta { margin-left: auto; font-size: .8125rem; color: var(--tinta-suave); white-space: nowrap; }

.servicios-rejilla { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .servicios-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .servicios-rejilla { grid-template-columns: repeat(3, 1fr); } }

/* El icono va al lado del título, nunca en un cuadrito arriba */
/* El título lleva su icono al lado y un filete abajo. Nada de barra de
   color en el costado de la tarjeta. */
.servicio {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-chico);
  padding: 1.5rem 1.4rem;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.servicio:hover { border-color: var(--borde-firme); box-shadow: var(--sombra); transform: translateY(-3px); }
.servicio__titulo {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .85rem;
  padding-bottom: .75rem;
  border-bottom: var(--linea);
  font-size: 1.0625rem;
  font-family: var(--display);
  font-weight: 600;
}
.servicio__titulo svg {
  width: 1.45rem; height: 1.45rem;
  color: var(--hoja-texto);
  flex: none;
  transition: color .22s ease, transform .22s ease;
}
.servicio:hover .servicio__titulo svg { color: var(--enlace-hover); transform: scale(1.1); }
.servicio p { font-size: .9375rem; color: var(--tinta-suave); margin: 0; }

/* == 12  Testimonios ====================================================== */
.testimonios { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .testimonios { grid-template-columns: 1fr 1fr; } }

.testimonio {
  background: var(--selva-carta);
  border: 1px solid var(--selva-linea);
  border-radius: var(--r-medio);
  padding: 1.6rem 1.5rem;
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.testimonio:hover { background: #1A4F36; border-color: #3C7158; transform: translateY(-3px); }
.testimonio__texto { color: #EAF2EC; font-size: 1rem; margin: .85rem 0 1.15rem; }
.testimonio__quien {
  display: flex;
  align-items: center;
  gap: .75rem;
  border-top: 1px solid var(--selva-linea);
  padding-top: 1rem;
}
.testimonio__inicial {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--alba);
  color: #3A2012;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  flex: none;
}
.testimonio__quien b { display: block; font-size: .9375rem; color: #FBF8F3; }
.testimonio__quien span { font-size: .8125rem; color: #B8CEC0; }

/* Resumen de calificación */
.calificacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  background: var(--selva-carta);
  border: 1px solid var(--selva-linea);
  border-radius: var(--r-medio);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.75rem;
}
.calificacion__nota {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--alba);
}
.calificacion p { margin: 0; color: #CFE0D6; font-size: .9375rem; }

/* == 13  Línea de tiempo ================================================== */
.hitos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.hito {
  display: grid;
  gap: .4rem 1.75rem;
  padding: 1.6rem 0;
  border-top: var(--linea);
  position: relative;
}
.hito:last-child { border-bottom: var(--linea); }
@media (min-width: 768px) { .hito { grid-template-columns: 7rem 1fr; gap: 0 2.5rem; align-items: start; } }

.hito__anio {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--barro-texto);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hito h3 { font-size: 1.1875rem; margin-bottom: .4rem; }
.hito p { color: var(--tinta-suave); font-size: .9375rem; margin: 0; }
.hito::after {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 3px;
  background: var(--barro);
  color: #fff;
  transition: width .35s ease;
}
.hito:hover::after { width: 4rem; }

/* == 14  Preguntas frecuentes ============================================= */
.preguntas { border-top: var(--linea); }
.pregunta { border-bottom: var(--linea); }
.pregunta__boton {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tinta);
  padding: 1.25rem 0.5rem 1.25rem 0;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  line-height: 1.3;
}
.pregunta__boton:hover { color: var(--enlace-hover); }
.pregunta__mas {
  width: 1.75rem; height: 1.75rem;
  border: var(--linea);
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  position: relative;
  transition: background-color .2s ease, border-color .2s ease, transform .25s ease;
}
.pregunta__mas::before, .pregunta__mas::after {
  content: '';
  position: absolute;
  background: var(--tinta);
  transition: opacity .2s ease, background-color .2s ease;
}
.pregunta__mas::before { width: .7rem; height: 2px; }
.pregunta__mas::after  { width: 2px; height: .7rem; }
.pregunta__boton:hover .pregunta__mas { border-color: var(--barro); background: var(--barro); }
.pregunta__boton:hover .pregunta__mas::before,
.pregunta__boton:hover .pregunta__mas::after { background: #fff; }
.pregunta__boton[aria-expanded="true"] .pregunta__mas { transform: rotate(180deg); background: var(--selva); border-color: var(--selva); }
.pregunta__boton[aria-expanded="true"] .pregunta__mas::before { background: #fff; }
.pregunta__boton[aria-expanded="true"] .pregunta__mas::after { opacity: 0; }

.pregunta__cuerpo { display: none; padding: 0 3rem 1.5rem 0; }
.pregunta__cuerpo[data-abierto="si"] { display: block; }
.pregunta__cuerpo p { color: var(--tinta-suave); margin: 0; }

/* == 15  Formularios ====================================================== */
.campo { display: block; }
.campo__etiqueta {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .4rem;
}
.campo__etiqueta .req { color: var(--barro-texto); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="number"],
.campo select,
.campo textarea {
  width: 100%;
  font-family: var(--texto);
  font-size: 1rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-firme);
  border-radius: var(--r-chico);
  padding: 0.8rem 0.9rem;
  transition: border-color .18s ease, box-shadow .18s ease;
  min-height: 3rem;
}
.campo textarea { min-height: 7.5rem; resize: vertical; line-height: 1.55; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2355645B'%3E%3Cpath d='M8 11.5 2.5 6h11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 14px;
  padding-right: 2.4rem;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-suave); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--selva);
  box-shadow: 0 0 0 3px rgba(46,107,79,.18);
  outline: none;
}
.campo__ayuda { display: block; font-size: .75rem; color: var(--tinta-suave); margin-top: .35rem; }

.campo__error {
  display: none;
  font-size: .8125rem;
  color: var(--error);
  margin-top: .35rem;
  font-weight: 500;
}
.campo[data-malo="si"] input,
.campo[data-malo="si"] select,
.campo[data-malo="si"] textarea { border-color: var(--error); background: #FDF6F5; }
.campo[data-malo="si"] .campo__error { display: block; }

.rejilla-form { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .rejilla-form--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .rejilla-form--3 { grid-template-columns: repeat(3, 1fr); } }
.form-ancho { grid-column: 1 / -1; }

fieldset { border: 0; margin: 0; padding: 0; }
legend {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  width: 100%;
}
legend .folio { font-size: .8125rem; }

.paso-form { border-top: var(--linea); padding-top: 1.75rem; margin-top: 1.75rem; }
.paso-form:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* Casillas de extras */
.extras { display: grid; gap: .75rem; }
@media (min-width: 640px) { .extras { grid-template-columns: 1fr 1fr; } }

.extra {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--papel);
  border: 1px solid var(--borde-firme);
  border-radius: var(--r-chico);
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.extra:hover { border-color: var(--tinta-suave); }
.extra input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--hoja); }
.extra input:checked ~ .extra__texto b { color: var(--hoja-texto); }
.extra:has(input:checked) { border-color: var(--hoja); background: #F4F9F5; }
.extra__texto b { display: block; font-size: .9375rem; line-height: 1.25; }
.extra__texto span { display: block; font-size: .75rem; color: var(--tinta-suave); margin-top: .15rem; }
.extra__precio { margin-left: auto; font-weight: 600; font-size: .9375rem; white-space: nowrap; }

/* Aviso de privacidad / consentimiento */
.consentimiento {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .875rem;
  color: var(--tinta-suave);
}
.consentimiento input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--hoja); }

/* == 16  Resumen de reserva =============================================== */
.reserva-rejilla { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 992px) { .reserva-rejilla { grid-template-columns: 1.35fr .65fr; gap: 2.5rem; } }

.resumen {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
@media (min-width: 992px) { .resumen { position: sticky; top: 6.25rem; } }

.resumen__cabeza {
  background: var(--selva);
  color: #fff;
  padding: 1.1rem 1.35rem;
}
.resumen__cabeza h2, .resumen__cabeza h3 { color: #fff; font-size: 1.1875rem; margin: 0; }
.resumen__cabeza p { margin: .25rem 0 0; font-size: .8125rem; color: #CFE0D6; }

.resumen__cuerpo { padding: 1.35rem; }

.resumen__vacio { color: var(--tinta-suave); font-size: .9375rem; }

.resumen__linea {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .9375rem;
  padding: .45rem 0;
}
.resumen__linea span:first-child { color: var(--tinta-suave); }
.resumen__linea b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumen__linea--descuento span:first-child, .resumen__linea--descuento b { color: var(--hoja-texto); }

.resumen__division { border-top: var(--linea); margin: .75rem 0; }

.resumen__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid var(--tinta);
  margin-top: .75rem;
  padding-top: .9rem;
}
.resumen__total span { font-weight: 600; }
.resumen__total b {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.resumen__ahorro {
  background: #F4F9F5;
  border: 1px solid #BFD9C7;
  border-radius: var(--r-chico);
  padding: 0.8rem 0.9rem;
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--hoja-texto);
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.resumen__ahorro svg { width: 1.1em; height: 1.1em; flex: none; margin-top: .2em; }
.resumen__ahorro b { font-weight: 600; }

.resumen__anticipo {
  font-size: .8125rem;
  color: var(--tinta-suave);
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: var(--linea);
}

.resumen__acciones { display: grid; gap: .65rem; margin-top: 1.1rem; }

.resumen__nota-temporada {
  background: #FDF4EC;
  border: 1px solid #EBD3BC;
  border-radius: var(--r-chico);
  padding: 0.7rem 0.85rem;
  font-size: .8125rem;
  color: var(--alba-texto);
  margin-top: .85rem;
}

/* Desglose de noches */
.noches { margin: .5rem 0 0; padding: 0; list-style: none; font-size: .8125rem; }
.noches li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  color: var(--tinta-suave);
  padding: .2rem 0;
}
.noches li b { font-variant-numeric: tabular-nums; font-weight: 500; }
.noches li[data-alta="si"] { color: var(--alba-texto); }

/* Mensaje de envío */
.aviso {
  border-radius: var(--r-medio);
  padding: 1.25rem 1.35rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  font-size: .9375rem;
}
.aviso svg { width: 1.4rem; height: 1.4rem; flex: none; margin-top: .1rem; }
.aviso--exito { background: #F0F7F2; border: 1px solid #BFD9C7; color: #0B4F2E; }
.aviso--exito svg { color: var(--exito); }
.aviso--error { background: #FDF3F2; border: 1px solid #E8C4C0; color: #7E1A1A; }
.aviso--error svg { color: var(--error); }
.aviso b { display: block; margin-bottom: .2rem; }

/* == 17  Bloques de cierre y llamadas a la acción ========================= */
.cierre {
  background: var(--selva);
  color: #EAF2EC;
  border-radius: var(--r-medio);
  padding: 2.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .cierre { padding: 3rem 2.75rem; } }
.cierre h2 { color: #FBF8F3; }
.cierre .entradilla { color: #CFE0D6; margin-top: 1rem; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }
.cierre__arcos {
  position: absolute;
  right: -40px; bottom: -40px;
  width: 260px; height: 260px;
  border-radius: 999px 999px 0 0;
  border: 2px solid rgba(255, 255, 255, .14);
  color: #fff;
  pointer-events: none;
}

/* Dos columnas de contacto */
.contacto-rejilla { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 992px) { .contacto-rejilla { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }

.datos-contacto { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--borde); border: var(--linea); border-radius: var(--r-medio); overflow: hidden; }
.datos-contacto li { background: var(--papel); padding: 1.15rem 1.25rem; display: flex; gap: .9rem; align-items: flex-start; transition: background-color .2s ease; }
.datos-contacto li:hover { background: var(--cal); }
.datos-contacto svg { width: 1.35rem; height: 1.35rem; color: var(--hoja-texto); flex: none; margin-top: .15rem; }
.datos-contacto b { display: block; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .2rem; }
.datos-contacto a { color: var(--tinta); text-decoration: none; font-weight: 500; }
.datos-contacto a:hover { color: var(--enlace-hover); text-decoration: underline; }
.datos-contacto p { margin: 0; font-size: .9375rem; }

.mapa-marco {
  border: var(--linea);
  border-radius: var(--r-medio);
  overflow: hidden;
  background: var(--cal-2);
}
.mapa-marco iframe { display: block; width: 100%; height: 340px; border: 0; }

/* Tabla de tarifas */
.tabla-tarifas { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--papel); }
.tabla-tarifas caption { text-align: left; font-size: .8125rem; color: var(--tinta-suave); caption-side: bottom; padding: .85rem 0.9rem; }
.tabla-tarifas th, .tabla-tarifas td { padding: 0.85rem 0.9rem; text-align: left; border-bottom: var(--linea); }
.tabla-tarifas thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave); background: var(--cal-2); border-bottom: 2px solid var(--borde-firme); }
.tabla-tarifas tbody tr:hover { background: var(--cal); }
.tabla-tarifas td b { font-variant-numeric: tabular-nums; }
.tabla-marco { border: var(--linea); border-radius: var(--r-medio); overflow: hidden; overflow-x: auto; }

/* == 18  Pie ============================================================== */
.pie {
  background: #0A2B20;
  color: #B8CEC0;
  padding: 3rem 1.5rem 1.5rem;
  font-size: .9375rem;
}
@media (min-width: 768px) { .pie { padding: 4rem 1.75rem 1.75rem; } }
@media (min-width: 1200px) { .pie { padding: 4.5rem 2rem 1.75rem; } }

.pie__rejilla {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 2.25rem;
}
@media (min-width: 768px) { .pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px) { .pie__rejilla { grid-template-columns: 1.4fr .8fr .8fr 1fr; } }

.pie h3 {
  font-family: var(--texto);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--alba);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pie a { color: #D7E6DB; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__marca .marca__nombre { color: #FBF8F3; font-size: 1.35rem; }
.pie__marca .marca__lugar { color: var(--alba); }
.pie__marca .marca__sello { background: rgba(255,255,255,.1); }
.pie__texto { margin: 1.1rem 0 1.25rem; max-width: 34ch; color: #B8CEC0; }

.pie__redes { display: flex; gap: .6rem; }
.pie__redes a {
  width: 2.5rem; height: 2.5rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.pie__redes a:hover { background: var(--alba); border-color: var(--alba); color: #3A2012; transform: translateY(-2px); }
.pie__redes svg { width: 1.1rem; height: 1.1rem; }

.pie__legal {
  max-width: 1180px;
  margin: 2.5rem auto 0;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: #9DB6A4;
}
.pie__legal a { color: #C9DCCF; }

/* == 19  Barra fija de móvil ============================================== */
.barra-fija {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1035;
  background: var(--papel);
  border-top: 1px solid var(--borde-firme);
  box-shadow: 0 -8px 28px -20px rgba(28,43,36,.6);
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.barra-fija__precio { line-height: 1.1; flex: 1; min-width: 0; }
.barra-fija__precio span { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave); }
.barra-fija__precio b { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.barra-fija .boton { padding: 0.8rem 1.2rem; white-space: nowrap; }
.barra-fija__whats {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--whats);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
  text-decoration: none;
}
.barra-fija__whats:hover { background: var(--whats-claro); color: #fff; }
.barra-fija__whats svg { width: 1.5rem; height: 1.5rem; }

@media (min-width: 992px) { .barra-fija { display: none !important; } }
@media (max-width: 991px) { body { padding-bottom: 4.75rem; } }

/* Botón flotante de WhatsApp (solo escritorio, en móvil ya está en la barra) */
.flotante {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 1020;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--whats);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px -10px rgba(28, 43, 36, .55);
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.flotante:hover { background: var(--whats-claro); color: #fff; transform: scale(1.07); }
.flotante svg { width: 1.9rem; height: 1.9rem; }
@media (max-width: 991px) { .flotante { display: none; } }

/* == 20  Movimiento y apariciones ========================================= */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.aparece[data-visible="si"] { opacity: 1; transform: none; }

/* Contadores de la portada */
.portada__dato [data-contador] { font-variant-numeric: tabular-nums; }

/* == 21  Preferencias del sistema e impresión ============================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .aparece { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  /* Solo donde el fondo es claro: en las franjas oscuras este gris no se ve,
     así que ahí se va al lado contrario. */
  .franja:not(.franja--selva) .entradilla, .portada .entradilla,
  .legal .entradilla { color: #35423A; }
  .franja--selva .entradilla, .portadilla .entradilla,
  .cierre .entradilla, .entradilla--claro { color: #E8F1EB; }
  .ficha, .servicio, .motor, .resumen { border-color: var(--tinta); }
  .campo input, .campo select, .campo textarea { border-color: var(--tinta); }
}

@media print {
  .cinta, .barra, .barra-fija, .flotante, .motor, .cierre, .pie__redes { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .franja { padding: 1rem 0; }
  .franja--selva, .franja--selva *,
  .portadilla, .portadilla *,
  .cierre, .cierre *,
  .resumen__cabeza, .resumen__cabeza * {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
  .ficha, .servicio, .resumen { break-inside: avoid; box-shadow: none; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .75em; }
}

/* ==========================================================================
   22  Componentes de página
   Siguen la misma regla del encabezado: en `padding` no entran clamp() ni
   variables.
   ========================================================================== */

/* Palabra en cursiva dentro de un título: el énfasis de todo el sitio */
/* La palabra enfatizada de cada título va en redonda con un subrayado
   grueso de color, no en cursiva: la serif grande en cursiva es la portada
   de cualquier sitio generado. */
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--barro-texto);
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .13em;
  text-decoration-color: var(--alba);
}
.franja--selva h2 em, .franja--selva h3 em,
.portadilla h1 em, .cierre h2 em {
  color: var(--alba);
  text-decoration-color: rgba(232, 164, 124, .42);
}

.titulo-chico { font-size: 1.375rem; }
.titulo-medio { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* -- Argumento de reserva directa --------------------------------------- */
.valor-rejilla { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 992px) { .valor-rejilla { grid-template-columns: 1.1fr .9fr; gap: 3rem; } }

.valor { list-style: none; counter-reset: v; margin: 0; padding: 0; }
.valor li {
  counter-increment: v;
  position: relative;
  border-top: var(--linea);
  padding: 1.4rem 0 1.4rem 3.75rem;
}
.valor li:last-child { border-bottom: var(--linea); }
.valor li::before {
  content: "0" counter(v);
  position: absolute;
  left: 0; top: 1.4rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--barro-texto);
  font-variant-numeric: tabular-nums;
}
.valor li::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 2px;
  background: var(--barro);
  color: #fff;
  transition: width .35s ease;
}
.valor li:hover::after { width: 2.75rem; }
.valor b { display: block; font-family: var(--display); font-size: 1.1875rem; font-weight: 600; margin-bottom: .3rem; }
.valor span { color: var(--tinta-suave); font-size: .9375rem; }

.comparativa {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  box-shadow: var(--sombra);
  padding: 1.6rem 1.5rem;
}
.comparativa h3 { font-size: 1.1875rem; }
.comparativa__nota { font-size: .8125rem; color: var(--tinta-suave); margin: .4rem 0 1.25rem; }
.comparativa__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-top: var(--linea);
}
.comparativa__fila span { font-size: .9375rem; color: var(--tinta-suave); }
.comparativa__fila b {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  text-decoration: line-through;
}
.comparativa__fila--gana { border-top-color: var(--tinta); }
.comparativa__fila--gana span { color: var(--tinta); font-weight: 600; }
.comparativa__fila--gana b { color: var(--tinta); font-size: 1.9rem; text-decoration: none; }
.comparativa__ahorro {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  background: #F4F9F5;
  border: 1px solid #BFD9C7;
  border-radius: var(--r-chico);
  padding: 0.8rem 0.9rem;
  margin-top: 1rem;
  font-size: .875rem;
  color: var(--hoja-texto);
}
.comparativa__ahorro svg { width: 1.1em; height: 1.1em; flex: none; margin-top: .22em; }

/* -- Mosaico de habitaciones (portada) ----------------------------------- */
.mosaico { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .mosaico { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .mosaico { grid-template-columns: repeat(3, 1fr); } }

.loseta {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  overflow: hidden;
  text-decoration: none;
  color: var(--tinta);
  box-shadow: var(--sombra);
  transition: box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease;
}
.loseta:hover {
  box-shadow: 0 16px 36px -10px rgba(28, 43, 36, 0.22);
  transform: translateY(-6px);
  border-color: var(--borde-firme);
  color: var(--tinta);
}
.loseta__foto-wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--cal-2);
}
.loseta__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.loseta:hover .loseta__foto {
  transform: scale(1.08);
}
.loseta__icono-badge {
  position: absolute;
  bottom: .7rem; right: .7rem;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(4px);
  border: var(--linea);
  display: grid;
  place-items: center;
  color: var(--hoja-texto);
  box-shadow: var(--sombra);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
  z-index: 2;
}
.loseta__icono-badge svg { width: 1.15rem; height: 1.15rem; }
.loseta:hover .loseta__icono-badge {
  transform: scale(1.1);
  background: var(--barro);
  color: #fff;
}
.loseta__arco {
  height: 5.5rem;
  color: #fff;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.loseta__arco::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -30%;
  width: 56%; height: 150%;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  border: 1px solid rgba(255, 255, 255, .38);
  border-bottom: 0;
}
.loseta__arco svg { width: 2.25rem; height: 2.25rem; position: relative; transition: transform .25s ease; }
.loseta:hover .loseta__arco svg { transform: translateY(-3px) scale(1.08); }
.loseta__arco--hoja  { background: var(--hoja); }
.loseta__arco--barro { background: var(--barro); }
.loseta__arco--alba  { background: #B35A30; }
.loseta__arco--agua  { background: #1D6E78; }
.loseta__arco--selva { background: var(--selva); }
.loseta__arco--oro   { background: #8A6420; }

.loseta__cuerpo { padding: 1.25rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.loseta__cuerpo h3 { font-size: 1.1875rem; margin-bottom: .3rem; }
.loseta__resumen { font-size: .875rem; color: var(--tinta-suave); margin: 0 0 .9rem; }
.loseta__datos { font-size: .8125rem; color: var(--tinta-suave); margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.loseta__datos svg { width: .95em; height: .95em; color: var(--hoja-texto); vertical-align: -.12em; }
.loseta__pie {
  margin-top: auto;
  border-top: var(--linea);
  padding-top: .9rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.loseta__pie b { font-family: var(--display); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.loseta__pie em { font-style: normal; font-size: .75rem; color: var(--tinta-suave); display: block; }
.loseta__ir { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; font-weight: 600; color: var(--hoja-texto); }
.loseta__ir svg { width: .9em; height: .9em; transition: transform .2s ease; }
.loseta:hover .loseta__ir svg { transform: translateX(4px); }
.loseta__sello {
  position: absolute;
  top: .6rem; left: .6rem;
  background: var(--papel);
  color: var(--barro-texto);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  z-index: 1;
}

/* -- Bloque de dos columnas con datos duros ------------------------------ */
.par-texto { display: grid; gap: 2.25rem; align-items: start; }
@media (min-width: 992px) { .par-texto { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; } }

.datos-duros { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.datos-duros li { border-top: var(--linea); padding: 1.15rem 0; }
.datos-duros li:last-child { border-bottom: var(--linea); }
.datos-duros b {
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--barro-texto);
  display: block;
}
.datos-duros span { display: block; font-size: .9375rem; color: var(--tinta-suave); margin-top: .35rem; }

/* -- Showcase fotográfico de la casa -- */
.casa-showcase {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.casa-showcase__foto-card {
  position: relative;
  border-radius: var(--r-medio);
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(28, 43, 36, 0.22);
  border: var(--linea);
}
.casa-showcase__foto {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.casa-showcase:hover .casa-showcase__foto {
  transform: scale(1.06);
}
.casa-showcase__sello {
  position: absolute;
  bottom: .85rem; left: .85rem;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(6px);
  border: var(--linea);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: var(--sombra);
}

/* -- Extras en lista (página de habitaciones) ---------------------------- */
.extras-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--borde);
  border: var(--linea);
  border-radius: var(--r-medio);
  overflow: hidden;
}
.extras-lista li {
  background: var(--papel);
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1rem;
  transition: background-color .2s ease;
}
.extras-lista li:hover { background: var(--cal); }
.extras-lista b { font-size: 1rem; }
.extras-lista__nota { font-size: .875rem; color: var(--tinta-suave); flex: 1 1 100%; margin: 0; }
.extras-lista__precio {
  margin-left: auto;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
}
.extras-lista__precio span { font-family: var(--texto); font-size: .8125rem; color: var(--tinta-suave); font-weight: 400; }

/* -- Políticas ----------------------------------------------------------- */
.politicas { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .politicas { grid-template-columns: 1fr 1fr; } }
.politica {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  padding: 1.5rem 1.4rem;
}
.politica h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.0625rem; margin-bottom: .6rem; }
.politica h3 svg { width: 1.35rem; height: 1.35rem; color: var(--hoja-texto); flex: none; }
.politica p { font-size: .9375rem; color: var(--tinta-suave); margin: 0; }

/* -- Lo que no tenemos --------------------------------------------------- */
.no-tenemos { list-style: none; margin: 0; padding: 0; }
.no-tenemos li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  border-top: 1px solid var(--selva-linea);
  padding: 1.25rem 0;
  color: #CFE0D6;
  font-size: .9375rem;
}
.no-tenemos li:last-child { border-bottom: 1px solid var(--selva-linea); }
.no-tenemos svg { width: 1.25rem; height: 1.25rem; color: var(--alba); flex: none; margin-top: .15rem; }
.no-tenemos b { color: #FBF8F3; font-weight: 600; }

/* -- Qué hay cerca ------------------------------------------------------- */
.cerca {
  display: grid;
  gap: 1px;
  background: var(--borde);
  border: var(--linea);
  border-radius: var(--r-medio);
  overflow: hidden;
}
@media (min-width: 640px) { .cerca { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cerca { grid-template-columns: repeat(3, 1fr); } }
.cerca__celda { background: var(--papel); padding: 1.35rem 1.35rem; transition: background-color .2s ease; }
.cerca__celda:hover { background: var(--cal); }
.cerca__celda b {
  font-family: var(--display);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--barro-texto);
  display: block;
  line-height: 1;
  margin-bottom: .4rem;
}
.cerca__celda span { font-size: .9375rem; color: var(--tinta-suave); }

.avisos-tarifa { margin-top: 1.5rem; display: grid; gap: .65rem; }
.avisos-tarifa .motor__nota { margin: 0; font-size: .875rem; }

/* -- Pasos numerados ----------------------------------------------------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-chico);
  padding: 1.4rem 1.35rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.pasos li:hover { border-color: var(--borde-firme); box-shadow: var(--sombra); }
.pasos__folio {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--barro-texto);
  line-height: 1;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.pasos h3 { font-size: 1.0625rem; margin-bottom: .45rem; }
.pasos p { font-size: .9375rem; color: var(--tinta-suave); margin: 0; }

/* -- Equipo -------------------------------------------------------------- */
.equipo { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .equipo { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .equipo { grid-template-columns: repeat(4, 1fr); } }
.persona {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  padding: 1.5rem 1.4rem;
  transition: box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease;
  display: flex;
  flex-direction: column;
}
.persona:hover {
  box-shadow: 0 16px 36px -10px rgba(28, 43, 36, 0.2);
  transform: translateY(-5px);
  border-color: var(--borde-firme);
}
.persona__foto-wrap {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--barro);
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  background: var(--cal-2);
}
.persona__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.persona:hover .persona__foto {
  transform: scale(1.1);
}
.persona__inicial {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--cal-2);
  border: 1px solid var(--borde-firme);
  font-family: var(--display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--hoja-texto);
  margin-bottom: .9rem;
}
.persona h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.persona__puesto {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--barro-texto);
  font-weight: 600;
  margin: 0 0 .7rem;
}
.persona p { font-size: .9375rem; color: var(--tinta-suave); margin: 0; }

/* -- Galería de experiencias y servicios -- */
.galeria-servicios {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.tarjeta-foto {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-medio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease;
  display: flex;
  flex-direction: column;
}
.tarjeta-foto:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px -10px rgba(28, 43, 36, 0.22);
  border-color: var(--borde-firme);
}
.tarjeta-foto__wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--cal-2);
}
.tarjeta-foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tarjeta-foto:hover .tarjeta-foto__img {
  transform: scale(1.08);
}
.tarjeta-foto__sello {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(4px);
  border: var(--linea);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: var(--sombra);
}
.tarjeta-foto__pie {
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tarjeta-foto__pie h3 {
  font-size: 1.2rem;
  margin-bottom: .35rem;
}
.tarjeta-foto__pie p {
  font-size: .9375rem;
  color: var(--tinta-suave);
  margin: 0;
}

/* -- Compromisos (sobre fondo oscuro) ------------------------------------ */
.compromisos { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .compromisos { grid-template-columns: repeat(3, 1fr); } }
.compromiso {
  background: var(--selva-carta);
  border: 1px solid var(--selva-linea);
  border-radius: var(--r-medio);
  padding: 1.6rem 1.5rem;
  transition: background-color .22s ease, transform .22s ease;
}
.compromiso:hover { background: #1A4F36; border-color: #3C7158; transform: translateY(-3px); }
.compromiso__folio {
  font-family: var(--display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--alba);
  display: block;
  margin-bottom: .75rem;
  letter-spacing: .08em;
}
.compromiso h3 { font-size: 1.125rem; margin-bottom: .6rem; }
.compromiso p { font-size: .9375rem; color: #CFE0D6; margin: 0; }

/* -- Distancias ---------------------------------------------------------- */
.distancias { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .distancias { grid-template-columns: 1fr 1fr; } }
.distancia {
  background: var(--papel);
  border: var(--linea);
  border-radius: var(--r-chico);
  padding: 1.35rem 1.35rem;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.distancia:hover { border-color: var(--borde-firme); box-shadow: var(--sombra); transform: translateY(-3px); }
.distancia b { font-family: var(--display); font-size: 1.1875rem; font-weight: 600; display: block; }
.distancia__tiempo::before {
  content: '';
  display: inline-block;
  width: 1.5rem; height: 1px;
  background: var(--barro);
  color: #fff;
  vertical-align: middle;
  margin-right: .55rem;
}
.distancia__tiempo {
  display: block;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--barro-texto);
  font-weight: 600;
  margin: .25rem 0 .6rem;
}
.distancia p { font-size: .9375rem; color: var(--tinta-suave); margin: 0; }

/* -- Acciones de formulario ---------------------------------------------- */
.forma__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.forma__acciones .boton { flex: 1 1 14rem; }

/* -- Página legal -------------------------------------------------------- */
.legal h2 {
  font-size: 1.375rem;
  margin-top: 2.25rem;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  border-bottom: var(--linea);
}
.legal p, .legal li { color: var(--tinta-suave); }
.legal ul { padding-left: 1.25rem; display: grid; gap: .5rem; margin-bottom: 1.1em; }
.legal .entradilla { color: var(--tinta); }
.legal .aviso span { display: block; }
.legal .aviso b { margin-bottom: .35rem; }

/* -- Utilidades mínimas -------------------------------------------------- */
.letra-chica  { font-size: .8125rem; }
.letra-normal { font-size: .875rem; }
.confianza--marco { border-radius: 12px; overflow: hidden; border: var(--linea); }
.portada__dato .estrellas { vertical-align: .06em; }
.portada__dato .estrellas svg { width: .62em; height: .62em; }
.loseta__datos span { display: inline-flex; align-items: center; gap: .3rem; }