/* =====================================================================
   Enoturismo Terras Gauda — sitio público
   Paleta y tipografías tomadas del sitio actual (ver resumen §1).
   ===================================================================== */

:root {
  --oro:        #BDAE70;   /* acento: 1.423 usos en el CSS original */
  --oro-oscuro: #A99A5E;   /* fondos y bordes, nunca texto sobre blanco */
  --oro-texto:  #6E6134;   /* el de los enlaces.           6,14:1 */
  /*
   * Los grises de texto, subidos hasta cumplir el contraste mínimo (4,5:1
   * sobre blanco, que es lo que pide la WCAG para texto normal).
   *
   * Eran #919191, #A2A2A2 y #ABABAB, o sea 3,15:1, 2,55:1 y 2,30:1: todo
   * el texto de la web estaba por debajo, y a 17 px con peso 300 se nota
   * en un móvil a pleno sol. Los tres acaban en el mismo valor porque no
   * hay sitio entre 4,5:1 y el blanco para tres grises distintos; la
   * jerarquía la siguen marcando el tamaño y el peso, que es como se
   * marcaba de todos modos.
   */
  --texto:      #6E6E6E;   /* cuerpo, el más usado.        5,10:1 */
  --texto-2:    #6E6E6E;   /* secundario en tarjetas       5,10:1 */
  --tinta:      #484848;   /* titulares y menú             9,15:1 */
  --tenue:      #6E6E6E;   /* apagado, sobre fondo claro   5,10:1 */

  /* El gris no se elige contra el blanco, sino contra el fondo más claro que
     de verdad hay debajo: sobre los paneles de --claro-2 (#F1F1F1) este
     mismo gris baja a 4,52:1, que es justo lo que hay que cumplir. Con
     #767676 se quedaba en 4,31:1 y la ficha no pasaba. */

  /* El mismo gris claro de antes, pero solo donde el fondo es oscuro: en el
     pie da 7,10:1, así que ahí nunca fue el problema. */
  --tenue-pie:  #ABABAB;
  --borde:      #EBEBEB;
  --borde-2:    #E1E1E1;
  --claro:      #F9F9F9;
  --claro-2:    #F1F1F1;
  --pie:        #261E1E;
  --pie-widgets:#2F2929;
  --blanco:     #FFFFFF;

  --serif-titular: "Spartan", "Century Gothic", system-ui, sans-serif;
  --sans-menu:     "Quicksand", system-ui, sans-serif;
  --sans-cuerpo:   "Source Sans Pro", system-ui, -apple-system, sans-serif;

  --ancho: 1180px;

  /* Las toca la pestaña de Estilo; aquí están sus valores de fábrica. */
  --radio-tarjeta: 10px;
  --hero-velo: .42;
  --hero-alto: min(88vh, 720px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans-cuerpo);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--blanco);
}

img { max-width: 100%; height: auto; display: block; }
/* Los enlaces llevan su propio dorado, mucho más oscuro que el de la marca:
   el --oro-oscuro se queda en 2,81:1 sobre blanco y no hay forma de subirlo
   sin salirse de la gama. Este mantiene la familia y llega a 6,14:1. El
   --oro y el --oro-oscuro siguen mandando en botones, bordes y fondos. */
a { color: var(--oro-texto); }

/* ---------------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------------- */

.barra-superior {
  background: var(--oro);
  color: var(--blanco);
  font-family: var(--sans-menu);
  font-size: 13px;
  letter-spacing: 1px;
}
.barra-superior,
.barra-principal {
  display: flex; align-items: center; gap: 2rem;
  max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem;
}
/*
 * Fija en la ventana: cabecera.js mide su alto real y se lo pasa a
 * --altura-topbar, que es lo que empuja hacia abajo el resto de la página
 * (ver la regla de «body» más abajo) para que nada quede tapado debajo.
 */
.barra-superior {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  max-width: none; justify-content: space-between; padding: .5rem 2rem;
  transition: background-color .35s ease, box-shadow .35s ease;
}
body { padding-top: var(--altura-topbar, 0px); }

/*
 * Con la barra ya fija, una foto de cabecera con texto encima —el título de
 * una experiencia, por ejemplo— se cortaba en seco justo debajo del dorado
 * opaco al pasar por debajo mientras se hace scroll. En «compacta» (ver
 * cabecera.js) se vuelve semitransparente y con desenfoque, como el cristal
 * esmerilado de iOS: lo que pasa por debajo se intuye en vez de cortarse.
 * Arriba del todo se queda el dorado plano de siempre, que es la lectura
 * más limpia cuando no hay nada debajo con lo que confundirse.
 */
.cabecera--compacta .barra-superior {
  /*
   * color-mix() y no rgba(189,174,112,…): ese trío es el dorado de fábrica,
   * pero --oro puede estar cambiado desde el panel (Estilo → Marca), y el
   * cristal tiene que llevar SIEMPRE el dorado real de la web, no el
   * original. --topbar-opacidad es ajustable en Estilo → La cabecera.
   */
  background: color-mix(in srgb, var(--oro) calc(var(--topbar-opacidad, .82) * 100%), transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 2px 14px rgba(38, 30, 30, .18);
}
.barra-superior nav { display: flex; gap: 1.5rem; }
.barra-superior a { color: var(--blanco); text-decoration: none; }
.barra-superior a:hover { opacity: .8; }
.barra-superior__derecha { display: flex; align-items: center; gap: 2rem; }
/* Con el cristal transparentándose al hacer scroll (cabecera--compacta), sin
   esto el texto blanco pierde lectura contra secciones claras de debajo. */
.cabecera--compacta .barra-superior__derecha nav a {
  text-shadow: 0 1px 3px rgba(20, 16, 16, .55);
}

/*
 * El logo y el menú en pequeño, listos para aparecer dentro de la barra fija
 * cuando se hace scroll (cabecera.js añade «cabecera--compacta»). Ocultos
 * del todo en móvil: no hay sitio para meter tres enlaces más ahí.
 */
.barra-superior__izquierda {
  display: none; align-items: center; gap: 1.5rem;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .45s ease, opacity .3s ease;
}
.barra-superior__logo { display: flex; align-items: center; flex-shrink: 0; }
.barra-superior__logo img {
  display: block; height: 20px; width: auto;
  filter: drop-shadow(0 1px 2px rgba(20, 16, 16, .5));
}
.barra-superior__menu { display: flex; gap: 1.25rem; white-space: nowrap; }
.barra-superior__menu a {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(20, 16, 16, .55);
}
@media (min-width: 901px) {
  .barra-superior__izquierda { display: flex; }
  .cabecera--compacta .barra-superior__izquierda { max-width: 640px; opacity: 1; }
}

/* Antes pasaba casi desapercibido: cuatro iniciales en 12px con opacidad
   baja. Ahora pesa un poco más y lleva un separador que lo distingue del
   resto de la barra, sin tocar el fondo dorado ni el blanco del texto. */
.selector-idioma {
  display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0;
  border-left: 1px solid rgba(255,255,255,.35); padding-left: 1.1rem;
}
.selector-idioma a {
  display: block; padding: .2rem .5rem; color: rgba(255,255,255,.8);
  text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .03em;
  border-radius: 3px; transition: background .12s ease, color .12s ease;
}
.selector-idioma .activo a,
.selector-idioma a:hover { color: var(--blanco); background: rgba(255,255,255,.16); }
.selector-idioma .activo a { font-weight: 700; }

.barra-principal { padding: 1.25rem 1.5rem; justify-content: space-between; }

/* Cada fondo, con su logotipo: aquí la barra es clara y se usa el negro; en
   la portada, que va sobre la foto, el blanco. Antes había uno solo, blanco,
   invertido por CSS: se veía gris y perdía definición. */
.logo img { width: 200px; height: auto; }

.menu { display: flex; gap: 3rem; }
.menu a {
  font-family: var(--sans-menu); font-size: 16px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tinta); text-decoration: none;
  padding-bottom: 6px; border-bottom: 2px solid transparent;
}
/* El subrayado dorado es la señal de «estás aquí encima»; el texto se
   oscurece en vez de aclararse, que además se lee mejor. */
.menu a:hover { color: var(--tinta); border-bottom-color: var(--oro); }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */

.hero { position: relative; height: min(78vh, 620px); overflow: hidden; }
.hero__fondo {
  position: absolute; inset: 0;
  background: url('/assets/img/hero-barricas.jpg') center/cover no-repeat, #3a2f28;
}
.hero__fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.45));
}
.hero__marca {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.hero__marca img { max-width: min(420px, 70vw); }

/* ---------------------------------------------------------------------
   Secciones
   --------------------------------------------------------------------- */

.seccion { max-width: var(--ancho); margin: 0 auto; padding: 5rem 1.5rem; }
.seccion--centro { text-align: center; }
.seccion--alta { padding: 8rem 1.5rem; }
.seccion--clara {
  max-width: none; background: var(--claro);
  padding-left: max(1.5rem, calc((100% - var(--ancho)) / 2));
  padding-right: max(1.5rem, calc((100% - var(--ancho)) / 2));
}

.titular {
  font-family: var(--serif-titular);
  font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.25; color: var(--tinta);
  margin: 0 0 .75rem;
}
.entradilla {
  max-width: 640px; margin: 0 auto 3rem;
  font-size: 1.05rem; color: var(--texto-2);
}
.entradilla--ancha { max-width: 780px; }

/* ---------------------------------------------------------------------
   Bloques de bodega (portada)
   --------------------------------------------------------------------- */

.bodegas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 3.5rem; margin-top: 1rem;
}
.bodega { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.bodega__sello { max-width: 180px; }
.bodega p { margin: 0; max-width: 380px; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */

.boton {
  display: inline-block;
  font-family: var(--sans-menu); font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  /* El texto en el dorado oscuro de los enlaces (6,14:1); el borde sigue
     siendo el dorado de la marca, que es lo que da el aire al botón. */
  color: var(--oro-texto); background: transparent;
  border: 1px solid var(--oro); padding: .85rem 2rem;
  transition: background .18s ease, color .18s ease;
}
.boton:hover { background: var(--oro); color: var(--blanco); }
.boton--principal { background: var(--oro); color: var(--blanco); border-color: var(--oro); }
.boton--principal:hover { background: var(--oro-oscuro); border-color: var(--oro-oscuro); }

/* ---------------------------------------------------------------------
   Tarjetas de experiencia
   --------------------------------------------------------------------- */

.rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 2rem; text-align: left; align-items: stretch;
}
.tarjeta { background: var(--blanco); }
.tarjeta a { text-decoration: none; color: inherit; display: block; }

.tarjeta__imagen {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--claro-2);
  overflow: hidden;
}
.tarjeta__imagen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tarjeta a:hover .tarjeta__imagen { filter: brightness(1.05); }

.tarjeta__precio {
  position: absolute; left: 0; bottom: 0;
  background: var(--oro); color: var(--blanco);
  font-family: var(--sans-menu); font-size: 12px; letter-spacing: 1px;
  padding: .45rem .9rem;
}
.tarjeta__contenido { padding: 1.15rem .25rem 0; }
.tarjeta__titulo {
  font-family: var(--serif-titular); font-weight: 400; font-size: 1.08rem;
  /* Era var(--oro): 2,22:1 sobre blanco. El dorado sigue en el borde de la
     tarjeta y en el botón; como texto no se sostiene. */
  line-height: 1.35; color: var(--tinta); margin: 0 0 .35rem;
}
.tarjeta__tagline { margin: 0; font-size: .92rem; color: var(--texto-2); }

/* ---------------------------------------------------------------------
   Listado
   --------------------------------------------------------------------- */

.listado { max-width: var(--ancho); margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.listado > h1 {
  font-family: var(--sans-menu); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--tinta); text-align: center; margin: 0 0 3rem;
}

/* ---------------------------------------------------------------------
   Ficha
   --------------------------------------------------------------------- */

.ficha { padding-bottom: 4rem; }
.ficha__hero { height: min(58vh, 460px); overflow: hidden; background: var(--claro-2); }
.ficha__hero img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Esqueleto de carga: un brillo que barre el rectángulo hasta que la foto
 * está lista (portada.js añade «cargada» al terminar). Sin JS, o si algo
 * falla, se queda el fondo liso de siempre: nunca peor que antes.
 */
.foto-shimmer { position: relative; }
.foto-shimmer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  background-size: 200% 100%; animation: shimmer-barrido 1.5s ease-in-out infinite;
}
.foto-shimmer.cargada::before { display: none; }
.foto-shimmer img { opacity: 0; transition: opacity .35s ease; }
.foto-shimmer.cargada img { opacity: 1; }
@keyframes shimmer-barrido {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .foto-shimmer::before { animation: none; }
}

.migas {
  max-width: var(--ancho); margin: 0 auto; padding: 1.25rem 1.5rem 0;
  font-family: var(--sans-menu); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tenue);
}
.migas a { color: var(--tenue); text-decoration: none; }
/* Al pasar por encima se oscurece, en vez de pasar a dorado: el dorado sobre
   blanco daba 2,22:1 y estas migas son de 12 px. */
.migas a:hover { color: var(--tinta); }

.ficha__cuerpo {
  max-width: var(--ancho); margin: 0 auto; padding: 1.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 3.5rem;
  align-items: start;
}
.ficha__contenido h1 {
  font-family: var(--serif-titular); font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.25;
  color: var(--tinta); margin: 0 0 .4rem;
}
.tagline {
  font-family: var(--sans-menu); font-size: .9rem; letter-spacing: 1px;
  color: var(--texto); margin: 0 0 2rem;   /* era var(--oro): 2,22:1 */
}
.descripcion p { margin: 0 0 1.1rem; }
/* Imagen metida en el texto desde el panel (p. ej. el logo de una ruta): nunca
   más ancha que la columna, y con el ancho que se le dio si lo tiene. */
.descripcion img, .info-adicional img {
  display: inline-block; max-width: 100%; height: auto; vertical-align: middle;
}
.descripcion strong { color: var(--tinta); font-weight: 600; }

.precios {
  list-style: none; margin: 2rem 0; padding: 1.25rem 1.5rem;
  background: var(--claro); border-left: 3px solid var(--oro); border-radius: 0 8px 8px 0;
}
.precios li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.precios strong { color: var(--tinta); }

.info-adicional { margin-top: 2.5rem; }
.info-adicional h2 {
  font-family: var(--sans-menu); font-size: .82rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tinta); margin: 0 0 1rem;
}
.info-adicional p { font-size: .93rem; margin: 0 0 .8rem; }

.servicios {
  list-style: none; display: flex; flex-wrap: wrap; gap: .6rem;
  margin: 2.5rem 0 0; padding: 0;
}
.servicio {
  font-family: var(--sans-menu); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tinta);
  border: 1px solid var(--borde-2); border-radius: 20px; padding: .5rem .9rem;
}

.como-llegar { margin-top: 2.5rem; }
.como-llegar h2 {
  font-family: var(--sans-menu); font-size: .82rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tinta); margin: 0 0 1rem;
}
.como-llegar__direccion { font-size: .93rem; margin: 0 0 1rem; }
.como-llegar__mapa {
  border: 1px solid var(--borde); border-radius: 8px; overflow: hidden;
  aspect-ratio: 16 / 9; margin-bottom: 1rem;
}
.como-llegar__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Widget de reserva --- */

.ficha__reserva {
  /*
   * El «top» deja la caja pegada bajo el menú al bajar, como siempre. En
   * una caja más alta que el hueco libre de la pantalla, caja-persigue.js
   * añade además un desplazamiento (translateY) para que el botón de
   * reservar, al final de la caja, no quede fuera de la vista hasta
   * recorrer toda la página. Sin ese script, se queda en este «top» de
   * toda la vida: sigue siendo correcto, solo que menos cómodo en cajas
   * muy altas.
   */
  position: sticky; top: calc(var(--altura-topbar, 0px) + 1.5rem);
  border: 1px solid var(--borde); padding: 1.75rem;
  background: var(--blanco); border-radius: var(--radio-tarjeta, 10px);
  box-shadow: 0 1px 3px rgba(46,42,38,.05), 0 10px 30px rgba(46,42,38,.05);
}
.ficha__reserva h2 {
  font-family: var(--serif-titular); font-weight: 400; font-size: 1.25rem;
  color: var(--tinta); margin: 0 0 1.25rem;
}

.tarifa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .8rem; font-size: .93rem;
}
.tarifa input {
  width: 4.5rem; padding: .45rem .55rem; text-align: center; border-radius: 6px;
  border: 1px solid var(--borde-2); font: inherit; color: var(--tinta);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tarifa input:focus {
  outline: none; border-color: var(--oro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 30%, transparent);
}

.zona-horaria { font-size: .78rem; color: var(--tenue); text-align: center; margin: 1rem 0; }
.total {
  font-family: var(--serif-titular); font-size: 1.3rem; color: var(--tinta);
  text-align: center; margin: 1rem 0; min-height: 1.6em;
}
.ficha__reserva .boton { width: 100%; text-align: center; }

.pase-unico {
  background: var(--claro); border-left: 3px solid var(--oro); border-radius: 0 8px 8px 0;
  padding: .9rem 1rem; font-size: .95rem; margin: 1rem 0;
}
.pase-unico strong { color: var(--tinta); }

/* --- Calendario --- */

.calendario { margin: 1.25rem 0; }
.cal__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.cal__mes {
  font-family: var(--sans-menu); font-size: .85rem; letter-spacing: 1px;
  color: var(--tinta);
}
/* Solo la inicial: «capitalize» pondría también «De 2026». */
.cal__mes::first-letter { text-transform: uppercase; }
.cal__nav {
  background: none; border: 1px solid var(--borde-2); color: var(--tinta);
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 1rem; line-height: 1;
  transition: border-color .15s ease;
}
.cal__nav:hover { border-color: var(--oro); color: var(--tinta); }

.cal__semana, .cal__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__semana span {
  text-align: center; font-size: 11px; letter-spacing: 1px;
  color: var(--tenue); padding-bottom: .3rem;
}
.cal__dia {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: .85rem; border: 1px solid transparent; border-radius: 6px;
  background: var(--claro); color: var(--tinta); cursor: pointer;
  transition: border-color .15s ease;
}
.cal__dia:hover { border-color: var(--oro); }
.cal__dia--no { background: transparent; color: #d5d5d5; cursor: default; }
.cal__dia--sel { background: var(--oro); color: var(--blanco); border-color: var(--oro); }
.cal__hueco { aspect-ratio: 1; }
.cal__vacio {
  font-size: .82rem; color: var(--tenue); text-align: center;
  margin: .4rem 0; font-style: italic;
}

.calendario__pases { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; }
.pase {
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--borde-2); border-radius: 6px; background: var(--blanco); color: var(--tinta);
  padding: .45rem .8rem; cursor: pointer; font: inherit; font-size: .9rem;
  transition: border-color .15s ease;
}
.pase small { font-size: 11.5px; color: var(--tenue); }
.pase:hover { border-color: var(--oro); }
.pase--sel { background: var(--oro); border-color: var(--oro); color: var(--blanco); }
.pase--sel small { color: rgba(255,255,255,.85); }

.cal__aviso { font-size: .85rem; color: var(--tenue); }

/* --- Galería y mosaico --- */

.galeria { max-width: var(--ancho); margin: 3rem auto 0; padding: 0 1.5rem; }
.galeria h2 {
  font-family: var(--sans-menu); font-size: .82rem; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--tinta); margin: 0 0 1.25rem;
}
.galeria__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.galeria__items img { aspect-ratio: 4/3; object-fit: cover; }

/*
 * Antes iban a cero de separación, tocándose entre sí: con fotos de tonos y
 * encuadres tan distintos —viñedo al aire libre, barricas, una etiqueta de
 * cerca— la unión sin respiro se veía como un collage por accidente. Un
 * hueco fino relleno del mismo color que el pie, justo debajo, hace que se
 * lea como una rejilla pensada y enlaza visualmente con lo que viene después.
 */
.mosaico {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
  background: var(--pie);
}
.mosaico__foto { position: relative; margin: 0; overflow: hidden; }
.mosaico__foto img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.mosaico__foto:hover img { transform: scale(1.06); }
.mosaico__foto figcaption {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 1rem; background: linear-gradient(180deg, transparent 55%, rgba(38,30,30,.85));
  color: #fff; font-family: var(--sans-menu); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; opacity: 0; transition: opacity .3s ease;
}
.mosaico__foto:hover figcaption { opacity: 1; }
@media (max-width: 700px) {
  /* Sin hover en un móvil: el pie queda siempre visible, más pequeño. */
  .mosaico__foto figcaption { opacity: 1; padding: .6rem; font-size: 10px; }
}

/* ---------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------- */

.aviso {
  background: var(--claro); border-left: 3px solid var(--oro); border-radius: 0 8px 8px 0;
  padding: .9rem 1.1rem; font-size: .93rem;
}

/* ---------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------- */

.pie {
  background: var(--pie); color: var(--tenue-pie);
  text-align: center; padding: 3.5rem 1.5rem;
  font-size: .88rem;
}
.pie p { margin: 0 0 .5rem; }
.pie a { color: var(--tenue-pie); text-decoration: none; }
.pie a:hover { color: var(--oro); }
.legales {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--sans-menu); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 980px) {
  .ficha__cuerpo { grid-template-columns: 1fr; gap: 2.5rem; }
  .ficha__reserva { position: static; }
  .mosaico { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .barra-principal { flex-direction: column; gap: 1.25rem; }
  .menu { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  .menu a { font-size: 14px; letter-spacing: 2px; }
  .logo img { width: 150px; }
  .barra-superior { justify-content: center; gap: 1rem; flex-wrap: wrap; }
  .barra-superior__derecha { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .seccion { padding: 3.5rem 1.25rem; }
  .hero { height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------------
   Páginas estáticas
   --------------------------------------------------------------------- */

.pagina { max-width: 820px; }
.pagina .titular { text-align: center; margin-bottom: 2.5rem; }
.pagina__texto p { margin: 0 0 1.1rem; }
.pagina__texto h2, .pagina__texto h3 {
  font-family: var(--serif-titular); font-weight: 400;
  color: var(--tinta); margin: 2rem 0 .8rem; font-size: 1.15rem;
}
.pagina__texto ul, .pagina__texto ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
.pagina__texto li { margin-bottom: .35rem; }
.pagina__texto strong { color: var(--tinta); font-weight: 600; }
.pagina__texto table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem; }
.pagina__texto th, .pagina__texto td {
  border: 1px solid var(--borde); padding: .5rem .7rem; text-align: left;
}
.pagina__texto th { background: var(--claro); color: var(--tinta); font-weight: 600; }

/* ---------------------------------------------------------------------
   Contacto
   --------------------------------------------------------------------- */

.contacto .titular, .contacto .entradilla { text-align: center; }
.contacto .entradilla { margin-bottom: 3.5rem; }

.contacto__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 4rem; align-items: start;
}

.campos { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.campos > .campo { flex: 1 1 220px; }

.campo { display: block; margin-bottom: 1.25rem; }
.campo > span {
  display: block; margin-bottom: .35rem;
  font-family: var(--sans-menu); font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--tinta);
}
.campo input, .campo textarea, .campo select {
  width: 100%; padding: .7rem .8rem;
  border: 1px solid var(--borde-2); border-radius: 6px; background: var(--blanco);
  font: inherit; color: var(--tinta);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--oro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 30%, transparent);
}
.campo input[aria-invalid], .campo textarea[aria-invalid] { border-color: #b3261e; }
.campo textarea { resize: vertical; }

/*
 * El botón de ver/ocultar contraseña (ver clave-visible.js) envuelve el
 * input en su propio contenedor. «.campo input» de arriba sigue pintándolo
 * igual —no pide que sea hijo directo—; solo hace falta sitio para el
 * botón y la propia posición de referencia para colocarlo encima.
 */
.clave-campo {
  /* Mismo motivo que en admin.css: es un <span> (envuelto así por
     clave-visible.js), y sin display:block el «top: 50%» del botón se
     mide contra la caja de línea en vez de contra el propio campo. */
  display: block; position: relative;
}
.clave-campo > input { padding-right: 2.6rem; }
.clave-campo__ojo {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 4px;
  background: none; color: var(--texto-2); cursor: pointer;
}
.clave-campo__ojo:hover { color: var(--tinta); }
.clave-campo__barra { opacity: 0; transition: opacity .1s ease; }
.clave-campo__ojo--activo .clave-campo__barra { opacity: 1; }
.campo select {
  appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6E6E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
}

.error { display: block; margin-top: .3rem; color: #b3261e; font-size: .85rem; font-style: normal; }
abbr[title] { color: #b3261e; text-decoration: none; }

/* La trampa antispam se saca del flujo sin usar display:none, que algunos
   robots detectan y saltan. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.acepta {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-bottom: .9rem; font-size: .92rem;
}
.acepta input {
  margin-top: .3rem; flex-shrink: 0; accent-color: var(--oro);
  width: 17px; height: 17px; cursor: pointer;
}

.legal {
  font-size: .78rem; line-height: 1.55; color: var(--tenue);
  margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--borde);
}

/* Agrupa el aviso RGPD, la casilla de comunicaciones y el aviso de retirada
   —tres bloques que antes se sucedían como una pared de texto— en un único
   panel discreto, separado de las dos casillas obligatorias que sí necesitan
   destacar (privacidad y condiciones). */
.reserva__legal {
  margin: 1.5rem 0; padding: 1.1rem 1.25rem;
  background: var(--claro); border-radius: 8px;
}
.reserva__legal .legal { margin: 0 0 .85rem; padding-top: 0; border-top: 0; }
.reserva__legal .acepta { margin-bottom: .85rem; font-size: .88rem; }
.reserva__legal .legal:last-child { margin-bottom: 0; }

.aviso--ok { border-left-color: #2e7d4f; }
.aviso--error { border-left-color: #b3261e; }

.reserva__bono { margin-bottom: 1.25rem; }
.reserva__bono .aviso--ok p { margin: 0 0 .6rem; }
.reserva__bono .aviso--ok .acepta { margin-bottom: 0; }
.reserva__bono-toggle {
  border: 1px solid var(--borde-2); border-radius: 8px; padding: .9rem 1.1rem;
}
.reserva__bono-toggle summary {
  cursor: pointer; color: var(--tenue); font-size: .92rem; list-style: none;
}
.reserva__bono-toggle summary::-webkit-details-marker { display: none; }
.reserva__bono-toggle summary::before { content: '+ '; color: var(--oro); font-weight: 700; }
.reserva__bono-toggle[open] summary::before { content: '– '; }
.reserva__bono-toggle .campos { margin-top: .9rem; }

.contacto__sedes { display: grid; gap: 2rem; }
.sede { border-left: 2px solid var(--oro); padding-left: 1.25rem; }
.sede h2 {
  font-family: var(--serif-titular); font-weight: 400; font-size: 1.05rem;
  color: var(--tinta); margin: 0 0 .5rem;
}
.sede p { margin: 0 0 .3rem; font-size: .9rem; }
.sede__tel { color: var(--tinta); }

@media (max-width: 900px) {
  .contacto__cuerpo { grid-template-columns: 1fr; gap: 3rem; }
}

/* ---------------------------------------------------------------------
   Flujo de reserva
   --------------------------------------------------------------------- */

.reserva .titular { text-align: center; margin-bottom: 2.5rem; }

.reserva__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: start;
}

.reserva__datos {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta, 10px); padding: 2.25rem 2.5rem;
  box-shadow: 0 1px 3px rgba(46,42,38,.05), 0 10px 30px rgba(46,42,38,.05);
}

.reserva__datos h2,
.reserva__resumen h2 {
  font-family: var(--sans-menu); font-size: .82rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--tinta); margin: 0 0 1.5rem;
}
.reserva__datos h2:not(:first-child) { margin-top: 2.25rem; }

.pista { font-size: .82rem; color: var(--tenue); margin: .35rem 0 0; }
.campo .pista { margin-top: .3rem; }

.reserva__resumen {
  background: var(--claro); padding: 1.75rem;
  border-top: 3px solid var(--oro); border-radius: var(--radio-tarjeta, 10px);
  box-shadow: 0 1px 3px rgba(46,42,38,.05), 0 10px 30px rgba(46,42,38,.05);
  /* Ver el comentario de «top» en .ficha__reserva: mismo motivo — este
     resumen lleva el botón de pagar al final, y con un formulario largo al
     lado no se veía sin bajar toda la página. */
  position: sticky; top: calc(var(--altura-topbar, 0px) + 1.5rem);
}
.reserva__foto {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 1.25rem;
  border-radius: 6px;
}
.reserva__resumen h3 {
  font-family: var(--serif-titular); font-weight: 400; font-size: 1.15rem;
  color: var(--tinta); margin: 0 0 1.25rem; line-height: 1.3;
}

.reserva__resumen dl { margin: 0 0 1.25rem; }
.reserva__resumen dt {
  font-family: var(--sans-menu); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tenue); margin-top: .7rem;
}
.reserva__resumen dd { margin: .1rem 0 0; color: var(--tinta); }

.reserva__lineas {
  list-style: none; margin: 0 0 1rem; padding: 1rem 0 0;
  border-top: 1px solid var(--borde-2);
}
.reserva__lineas li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .25rem 0; font-size: .92rem;
}
.reserva__lineas strong { color: var(--tinta); font-weight: 600; }

.reserva__total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 0; padding-top: 1rem;
  border-top: 1px solid var(--borde-2);
}
.reserva__total span {
  font-family: var(--sans-menu); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--tenue);
}
.reserva__total strong {
  font-family: var(--serif-titular); font-size: 1.5rem; color: var(--tinta);
}

.reserva__datos .boton { width: 100%; text-align: center; margin-top: 1.5rem; }

/* --- Confirmación --- */

.reserva-ok { max-width: 640px; text-align: center; }
.reserva-ok .entradilla { margin-bottom: 2rem; }

.reserva-ok__imagen { margin: 0 0 2rem; }
.reserva-ok__imagen img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}

.localizador {
  background: var(--claro); border-top: 2px solid var(--oro);
  padding: 1.5rem; margin: 0 0 2.5rem;
}
.localizador span {
  display: block; font-family: var(--sans-menu); font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--tenue);
  margin-bottom: .4rem;
}
.localizador strong {
  font-family: var(--serif-titular); font-size: 2rem;
  letter-spacing: 6px; color: var(--tinta);
}

.resumen-final {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem;
  text-align: left; margin: 0 auto 2rem; max-width: 440px;
}
.resumen-final dt {
  font-family: var(--sans-menu); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--tenue); padding-top: .2rem;
}
.resumen-final dd { margin: 0; color: var(--tinta); }

@media (max-width: 900px) {
  .reserva__cuerpo { grid-template-columns: 1fr; gap: 2.5rem; }
  .reserva__resumen { position: static; order: -1; }
  .reserva__datos { padding: 1.75rem 1.5rem; }
}

/* --- Bonos regalo --- */

.tarjeta--bono .tarjeta__contenido { padding-bottom: 1.25rem; }
.tarjeta--bono form { margin-top: .9rem; }
.tarjeta--bono .boton { width: 100%; text-align: center; }
.tarjeta--bono .tarjeta__precio {
  font-family: var(--serif-titular); font-size: 1rem; letter-spacing: 0;
}
/* La imagen es aquí su propio enlace al bono —no todo el artículo, que
   todavía lleva el botón «Ver y regalar» dentro—, así que hay que anular el
   «.tarjeta a { display:flex; height:100% }» pensado para el enlace único
   que envuelve toda una tarjeta de experiencia. */
.tarjeta--bono .tarjeta__imagen { display: block; height: auto; }
.tarjeta--bono .tarjeta__imagen:hover { filter: brightness(1.05); }

.pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem; max-width: 860px; margin: 0 auto;
}
.paso span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--oro); border-radius: 50%;
  /* El círculo sigue siendo dorado; el número, no: era 2,22:1. */
  font-family: var(--serif-titular); color: var(--tinta); margin-bottom: .75rem;
}
.paso p { margin: 0; }

/* ---------------------------------------------------------------------
   Área privada del cliente
   --------------------------------------------------------------------- */

.cuenta-caja { max-width: 560px; }
.cuenta-caja .titular { text-align: center; }
.cuenta-caja .entradilla { text-align: center; margin-bottom: 2rem; }

.cuenta-form { margin-bottom: 1.5rem; }
.cuenta-form .boton { width: 100%; text-align: center; margin-top: .5rem; }

.cuenta-enlaces { text-align: center; font-size: .9rem; margin: 1.25rem 0; }

.cuenta-alternativa {
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--borde);
  text-align: center;
}
.cuenta-alternativa p { margin: 0 0 .5rem; }
.cuenta-alternativa .boton { margin-top: .75rem; }

.cuenta-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.cuenta-cabecera .titular { margin-bottom: .2rem; }
.cuenta-nav { display: flex; gap: .5rem; }

.cuenta-seccion {
  font-family: var(--sans-menu); font-size: .82rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--tinta);
  margin: 2.5rem 0 1rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--borde);
}

.tarjetas-cuenta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem;
}
/*
 * Misma foto y el mismo acabado que .tarjeta (rejilla de experiencias):
 * esquinas redondeadas, sombra que se levanta al pasar el ratón. Antes esta
 * tarjeta era solo texto con un filete dorado arriba; sin foto costaba
 * distinguir de un vistazo una reserva de otra en una cuenta con varias.
 */
.tarjeta-reserva {
  background: var(--blanco); position: relative;
  border-radius: var(--radio-tarjeta, 10px); overflow: hidden;
  box-shadow: 0 1px 3px rgba(46,42,38,.07), 0 6px 18px rgba(46,42,38,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tarjeta-reserva:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(46,42,38,.1), 0 12px 28px rgba(46,42,38,.11);
}
.tarjeta-reserva__imagen {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--claro-2);
  overflow: hidden;
}
.tarjeta-reserva__imagen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* El localizador (o el código del bono) va sobre la foto, igual que el
   precio de una tarjeta de experiencia: es el dato que se busca de un
   vistazo al volver a esta pantalla para localizar una reserva concreta. */
.tarjeta-reserva__loc {
  position: absolute; left: 0; bottom: 0;
  background: var(--oro); color: var(--blanco);
  font-family: ui-monospace, Consolas, monospace; font-size: .78rem;
  letter-spacing: 1.5px; padding: .4rem .75rem;
}
.tarjeta-reserva__contenido { padding: 1.15rem 1.15rem 1.25rem; }
.tarjeta-reserva__contenido h3 {
  font-family: var(--serif-titular); font-weight: 400; font-size: 1.05rem;
  color: var(--tinta); margin: 0 0 .6rem; line-height: 1.3;
}
.tarjeta-reserva__cuando { margin: 0 0 .3rem; }
.tarjeta-reserva__cuando strong { color: var(--tinta); }

.etiqueta {
  display: inline-block; margin-top: .6rem; padding: .1rem .6rem; border-radius: 20px;
  font-size: .75rem; font-weight: 600; background: #eee; color: var(--texto);
}
.etiqueta--confirmada, .etiqueta--emitido { background: #e3f1e8; color: #2e7d4f; }
.etiqueta--cancelada, .etiqueta--anulado  { background: #f5e3e1; color: #b3261e; }
.etiqueta--canjeado, .etiqueta--reembolsada { background: #e8e8ef; color: #55558a; }

.tabla-cuenta { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-cuenta td { padding: .6rem .5rem; border-bottom: 1px solid var(--borde); }

.error { display: block; margin-top: .3rem; color: #b3261e; font-size: .85rem; font-style: normal; }

/* ---------------------------------------------------------------------
   Slider de la cabecera, con el menú superpuesto
   --------------------------------------------------------------------- */

.hero--slider { height: var(--hero-alto, min(88vh, 720px)); }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; background: center/cover no-repeat #3a2f28;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero__slide.activa { opacity: 1; }

/* Una diapositiva puede ser un vídeo: llena igual que una foto, recortando por
   el centro. El ratón lo atraviesa: debajo está el menú de la portada. */
.hero__slide video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}

/* Velo oscuro: sin él, el menú blanco desaparece sobre las fotos claras. */
.hero__slides::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    rgba(0, 0, 0, var(--hero-velo, .42)),
    rgba(0, 0, 0, calc(var(--hero-velo, .42) * .43)) 45%,
    rgba(0, 0, 0, var(--hero-velo, .42)));
}

.hero__contenido {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  padding: 3rem 1.5rem 0;
}
/* El logotipo manda en la portada: es lo primero que hay que reconocer. */
/* width, no max-width: el fichero es de 180 px y con un máximo se quedaba
   ahí. La copia al doble del srcset cubre la densidad. */
.hero__logo img { width: min(280px, 72vw); height: auto; }

.hero__menu { display: flex; gap: 3.5rem; flex-wrap: wrap; justify-content: center; }
.hero__menu a {
  font-family: var(--sans-menu); font-size: 17px; font-weight: 600;
  letter-spacing: 3px; color: #fff; text-decoration: none;
  padding-bottom: 7px; border-bottom: 2px solid transparent;
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
}
.hero__menu a:hover { border-bottom-color: var(--oro); }

/*
 * El indicador del carrusel está más abajo, en «Barras, no puntos».
 *
 * Aquí estaban las reglas de cuando eran puntos redondos, y se quedaron
 * olvidadas al cambiarlas por barras. Casi todas las pisaba la versión nueva,
 * pero «.activo { background: var(--oro) }» no la pisaba nadie: pintaba de
 * dorado el botón entero —46 x 14 px— y salía un rectángulo sobre la foto que
 * estaba a la vista. Un CSS que solo crece es un CSS que acaba contradiciéndose.
 */

/* ---------------------------------------------------------------------
   Tarjetas: esquinas redondeadas, sombra y logo de bodega
   --------------------------------------------------------------------- */

.tarjeta {
  border-radius: var(--radio-tarjeta, 10px); overflow: hidden;
  box-shadow: 0 1px 3px rgba(46,42,38,.07), 0 6px 18px rgba(46,42,38,.07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(46,42,38,.1), 0 12px 28px rgba(46,42,38,.11);
}
/* La tarjeta es una columna: contenido arriba y el sello de la bodega abajo,
   siempre a la misma altura aunque los títulos ocupen una línea más. */
.tarjeta a { display: flex; flex-direction: column; height: 100%; }
.tarjeta__contenido { padding: 1.15rem 1.15rem .9rem; flex: 1; }
/* Alto fijo: los dos logotipos no miden lo mismo y, si el pie se adaptara
   a cada uno, la línea de separación no caería a la misma altura en dos
   tarjetas contiguas. */
.tarjeta__pie {
  height: 64px; flex: none; margin-top: auto;
  padding: 0 1.15rem;
  border-top: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: center;
}
/* Los dos logotipos tienen proporciones muy distintas (TERRAS GAUDA es 2,5:1
   y PITTACUM casi 6:1), así que se limitan por alto Y por ancho: si no, a la
   misma altura uno sale del doble de largo que el otro. */
.tarjeta__marca {
  max-height: 38px; max-width: 132px; width: auto; height: auto;
  opacity: .9; transition: opacity .18s ease;
}
.tarjeta a:hover .tarjeta__marca { opacity: 1; }

/* ---------------------------------------------------------------------
   Sección con foto de fondo
   --------------------------------------------------------------------- */

/* `fixed` es lo que hace el paralaje: la foto se queda quieta y el contenido
   pasa por encima. El velo va en el hijo, no aquí, para que el fondo no se
   oscurezca dos veces. */
.seccion-fondo { background: center/cover no-repeat fixed; position: relative; }
.seccion-fondo__velo {
  background: rgba(38,30,30,.62);
  min-height: min(66vh, 560px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 7rem max(1.5rem, calc((100% - var(--ancho)) / 2));
  text-align: center;
}
.titular--claro { color: #fff; }
.entradilla--claro { color: rgba(255,255,255,.86); margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Inspírate y lugares cercanos
   --------------------------------------------------------------------- */

.inspirate { text-align: center; }
.titular--centro { text-align: center; }
.inspirate__situacion {
  max-width: 760px; margin: 0 auto 3rem; color: var(--texto-2); font-size: .98rem;
}
.inspirate__lugares {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem;
}
.lugar { margin: 0; }
.lugar__foto {
  aspect-ratio: 1; background: var(--claro-2);
  border-radius: 10px; box-shadow: 0 2px 10px rgba(46,42,38,.09);
  overflow: hidden;
}
.lugar__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .2s ease;
}
.lugar__abrir {
  display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit;
}
.lugar__abrir:hover img { transform: scale(1.04); }
.lugar figcaption {
  margin-top: .7rem; font-family: var(--sans-menu); font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--tinta);
}

/* ---------------------------------------------------------------------
   Pie: sellos institucionales
   --------------------------------------------------------------------- */

.pie__sellos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2rem; margin-top: 2rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pie__programa {
  font-family: var(--sans-menu); font-size: 11px; letter-spacing: 1.2px;
  color: var(--tenue-pie); max-width: 150px; line-height: 1.5; text-align: left;
}
.pie__sellos img { max-height: 44px; width: auto; opacity: .85; }
.pie__sellos a:hover img { opacity: 1; }

/* ---------------------------------------------------------------------
   Ficha: fecha y hora con protagonismo
   --------------------------------------------------------------------- */

.ficha__encabezado {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
}
.ficha__marca {
  max-height: 56px; max-width: 190px; width: auto; height: auto;
  flex-shrink: 0; margin-top: .35rem;
}

/* Era var(--oro) sobre blanco: 2,22:1. */
.ficha__horario {
  font-family: var(--sans-menu); font-size: 1rem; font-weight: 500;
  letter-spacing: .5px; color: var(--texto); margin: .35rem 0 0;
}

/* --- Compartir --- */

.compartir {
  display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
  margin: 1.25rem 0 0;
}
.compartir__etiqueta {
  font-family: var(--sans-menu); font-size: .78rem; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--tenue);
}
.compartir__lista { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.compartir__boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--borde-2); color: var(--tenue); background: var(--blanco);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.compartir__boton:hover { border-color: var(--oro); color: var(--oro-texto); }
.compartir__boton svg { width: 16px; height: 16px; }
.compartir__icono-hecho { display: none; }
.compartir__copiar--hecho { border-color: var(--oro); color: var(--oro-texto); }
.compartir__copiar--hecho .compartir__icono-normal { display: none; }
.compartir__copiar--hecho .compartir__icono-hecho { display: inline-flex; }

/* El bono regalo mete estos mismos botones al final del widget de compra:
   centrados y con un filete arriba, para separarlos del botón de comprar. */
.ficha__reserva .compartir {
  justify-content: center; margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}

.ficha__proxima {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem;
  margin: 1.75rem 0 2rem; padding: 1.1rem 1.35rem;
  background: var(--claro); border-left: 3px solid var(--oro); border-radius: 0 8px 8px 0;
}
.ficha__proxima-etiqueta {
  display: block; width: 100%;
  font-family: var(--sans-menu); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--tenue);
}
.ficha__proxima strong {
  font-family: var(--serif-titular); font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--tinta);
}
.ficha__proxima-hora {
  font-family: var(--serif-titular); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--oro); font-weight: 400;
}

/* ---------------------------------------------------------------------
   Galería y visor
   --------------------------------------------------------------------- */

.galeria__items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem;
}
.galeria__foto {
  aspect-ratio: 4/3; border: 0; padding: 0; cursor: pointer; border-radius: 8px;
  background: var(--claro-2) center/cover no-repeat;
  transition: transform .2s ease, box-shadow .2s ease;
}
.galeria__foto:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(46,42,38,.15); }

.visor {
  position: fixed; inset: 0; z-index: 100; background: rgba(20,16,16,.94);
  display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 2rem;
}
.visor[hidden] { display: none; }
.visor__marco { margin: 0; max-width: 90vw; max-height: 88vh; text-align: center; }
.visor__marco img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 4px; }
.visor__marco figcaption { color: rgba(255,255,255,.6); font-size: .82rem; margin-top: .8rem; }
.visor__cerrar {
  position: absolute; top: 1rem; right: 1.25rem; z-index: 2;
  background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.visor__nav {
  background: none; border: 0; color: rgba(255,255,255,.65); cursor: pointer;
  font-size: 3rem; line-height: 1; padding: 0 .5rem;
}
.visor__nav:hover, .visor__cerrar:hover { color: var(--oro); }

/* --- Bono: detalle --- */
.bono-precio {
  font-family: var(--serif-titular); font-size: 2rem; color: var(--tinta);
  text-align: center; margin: 0 0 1.25rem;
}
.pasos-lista { padding-left: 1.3rem; }
.pasos-lista li { margin-bottom: .5rem; }

/* En móvil, background-attachment: fixed se comporta mal en iOS. */
@media (max-width: 900px) {
  .seccion-fondo { background-attachment: scroll; }
  .seccion-fondo__velo { min-height: 48vh; padding: 4.5rem 1.25rem; }
}

@media (max-width: 700px) {
  .hero--slider { height: 68vh; }
  .hero__menu { gap: 1.5rem; }
  .hero__menu a { font-size: 15px; letter-spacing: 2px; }
  .hero__contenido { gap: 1.75rem; padding-top: 2rem; }
  .ficha__encabezado { flex-direction: column; gap: 1rem; }
  .ficha__marca { margin-top: 0; }
  .visor__nav { font-size: 2rem; }
}

/* Vista previa de un borrador: se avisa sin disfrazar la página. */
.cinta-previa {
  margin: 0; padding: .65rem 1rem; text-align: center;
  background: #8A6D1F; color: #fff; font-size: .9rem; letter-spacing: .02em;
}

/* Los dos bloques de bodega tienen textos de distinta longitud: sin esto el
   botón de uno queda una línea más arriba que el del otro. */
.bodega { height: 100%; }
.bodega .boton { margin-top: auto; }

/* ---------------------------------------------------------------------
   Ajustes de móvil
   --------------------------------------------------------------------- */

/* En una pantalla de 660 px de alto, 58vh de foto son más de la mitad del
   primer vistazo antes de leer nada. */
@media (max-width: 700px) {
  .ficha__hero { height: min(40vh, 300px); }
  .galeria__items { grid-template-columns: repeat(2, 1fr); }
}

/* El cuadro de reserva cae al final en una sola columna: este atajo evita
   recorrer toda la descripción para llegar a él. En escritorio no hace falta,
   porque el cuadro va fijo al lado. */
.ficha__cta-movil { display: none; }
@media (max-width: 980px) {
  .ficha__cta-movil {
    display: block; position: sticky; bottom: 0; z-index: 20;
    margin: 0; padding: .75rem 1.25rem;
    background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
    border-top: 1px solid var(--borde); text-align: center;
  }
  .ficha__cta-movil .boton { display: block; }
}

/* Aviso puntual de la bodega (obras, cierre, cambio de horario). Se pone y se
   quita desde Configuración; vacío no pinta nada. */
.aviso-web {
  margin: 0; padding: .7rem 1.25rem; text-align: center;
  background: var(--tinta); color: #fff; font-size: .9rem;
}

/* ---------------------------------------------------------------------
   Avales institucionales de la portada
   Van sobre el primer titular, no en una franja aparte: son un sello de
   confianza, no una sección con contenido propio.
   --------------------------------------------------------------------- */

.avales {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 6vw, 4.5rem); flex-wrap: wrap;
  max-width: var(--ancho); margin: 0 auto;
  padding: 3.5rem 1.5rem 0;
}
.avales img {
  height: auto; width: auto;
  max-height: 62px; max-width: 240px;
  opacity: .92; transition: opacity .18s ease;
}
.avales a:hover img { opacity: 1; }

/* El titular que va detrás ya no necesita todo el aire de arriba. */
.seccion--tras-avales { padding-top: 3rem; }

@media (max-width: 700px) {
  .avales { gap: 2rem; padding-top: 2.5rem; }
  .avales img { max-height: 46px; max-width: 170px; }
  .seccion--tras-avales { padding-top: 2rem; }
}
/* =====================================================================
   CABECERA CON MOVIMIENTO Y ENTRADAS AL BAJAR
   ===================================================================== */

/*
 * La duración vive aquí y el JavaScript la lee, para que la barra que se
 * rellena y el temporizador que cambia la foto no se puedan desincronizar:
 * una barra que llega al final y se queda esperando delata el truco.
 */
:root {
  --slider-duracion: 6s;
  /* Lo que tarda una foto en desvanecerse sobre la siguiente. Lo lee también
     portada.js: dos números separados acabarían discrepando. */
  --slider-fundido: 1.1s;
  /* Multiplicador del movimiento de la cabecera; lo cambia la pestaña de
     Estilo. Vale para todos los tipos, no solo para el acercamiento. */
  --mov-fuerza: 1;
}

/* ---------------------------------------------------------------------
   Los indicadores: barras, no puntos
   --------------------------------------------------------------------- */

/*
 * Nueve píxeles de círculo gris sobre una foto de 720 px no dicen nada: ni
 * cuántas fotos hay, ni cuál es esta, ni cuánto queda. Una barra que se llena
 * dice las tres cosas sin escribir una palabra, y es lo que usan las webs de
 * hotel que se toman en serio.
 */
.hero__puntos {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 2.25rem;
  display: flex; justify-content: center;
  gap: .5rem; padding: 0 1.5rem;
}

.hero__punto {
  /*
   * El carril. La barra mide 2 px de alto pero el botón conserva 14 px de zona
   * pulsable: un objetivo de 2 px no se acierta con el dedo, y ese hueco no se
   * ve porque el botón es transparente.
   */
  width: 32px; height: 14px;
  border-radius: 0; background: none; border: 0;
  padding: 0; cursor: pointer;
  position: relative; overflow: hidden;
  transform: none;
}
.hero__punto::before,
.hero__punto::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; margin-top: -1px; height: 2px;
  border-radius: 2px;
}
.hero__punto::before { background: rgba(255,255,255,.35); }

/* El relleno: se estira de izquierda a derecha mientras dura la foto. */
.hero__punto::after {
  background: var(--oro);
  transform: scaleX(0); transform-origin: left center;
}
.hero__punto:hover::before { background: rgba(255,255,255,.6); }

/*
 * La barra dura lo que dure la diapositiva. Una foto, los segundos de siempre;
 * un vídeo, lo que dure él, y eso solo se sabe al cargarlo: portada.js escribe
 * entonces --barra-duracion en el punto. Tiene que ser una variable y no
 * animation-duration en el elemento, porque quien se anima es su ::after.
 */
.hero__punto.activo::after {
  animation: barra-slider var(--barra-duracion, var(--slider-duracion)) linear forwards;
}

/* Ya vistas: se quedan tenues, no llenas. Así se distingue de un vistazo por
   dónde va la serie. */
.hero__punto.vista::after { transform: scaleX(1); opacity: .45; }

@keyframes barra-slider {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/*
 * Con el carrusel detenido —pestaña de fondo, o alguien que acaba de pulsar—
 * la barra se queda llena en vez de animarse: una barra congelada a medias
 * parece que la página se ha colgado.
 */
.hero--parado .hero__punto.activo::after {
  animation: none; transform: scaleX(1);
}



/* ---------------------------------------------------------------------
   El movimiento de la foto de la cabecera
   --------------------------------------------------------------------- */

/*
 * Una foto quieta detrás de un menú es una diapositiva; en movimiento, la
 * cabecera respira. Hay varios tipos porque no todas las fotos piden lo mismo:
 * un viñedo ancho pide un barrido lateral, un detalle pide acercarse, y una
 * foto con el horizonte alto agradece subir.
 *
 * Todos comparten --mov-fuerza, que es la intensidad elegida en el panel: un
 * multiplicador sobre el recorrido. Así subir la intensidad afecta al
 * movimiento que sea, sin declarar cada combinación por separado.
 *
 * La animación dura algo más que el turno de la foto para que no llegue al
 * final y se quede quieta justo antes de cambiar.
 *
 * «saliendo» va siempre junto a «activa» en estas reglas, y no es un detalle:
 * es lo que evita el salto del relevo. Ver el comentario del final.
 */
.hero__slide.activa,
.hero__slide.saliendo {
  animation-duration: calc(var(--slider-duracion) + 2s);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.hero--parado .hero__slide.activa { animation: none; }

/* Sin movimiento: la foto se queda como está. */
.hero--mov-sin .hero__slide.activa { animation: none; }

/*
 * Un vídeo va quieto, decidido con Jose: ya tiene su propio movimiento, y
 * acercárselo encima marea y además lo recorta. Va después de las reglas de
 * cada movimiento para ganarles, y cubre también la salida.
 */
.hero__slide--video.activa,
.hero__slide--video.saliendo { animation: none; }

.hero--mov-acercar   .hero__slide.activa,
.hero--mov-acercar   .hero__slide.saliendo { animation-name: mov-acercar; }
.hero--mov-alejar    .hero__slide.activa,
.hero--mov-alejar    .hero__slide.saliendo { animation-name: mov-alejar; }
.hero--mov-derecha   .hero__slide.activa,
.hero--mov-derecha   .hero__slide.saliendo { animation-name: mov-derecha; }
.hero--mov-izquierda .hero__slide.activa,
.hero--mov-izquierda .hero__slide.saliendo { animation-name: mov-izquierda; }
.hero--mov-arriba    .hero__slide.activa,
.hero--mov-arriba    .hero__slide.saliendo { animation-name: mov-arriba; }
.hero--mov-kenburns  .hero__slide.activa,
.hero--mov-kenburns  .hero__slide.saliendo { animation-name: mov-kenburns; }

/*
 * Los barridos parten de una foto ya ampliada: sin ese margen, al desplazarla
 * asomaría el borde. Es el mismo truco de siempre en televisión.
 */
@keyframes mov-acercar {
  from { transform: scale(1); }
  to   { transform: scale(calc(1 + .035 * var(--mov-fuerza, 1))); }
}

@keyframes mov-alejar {
  from { transform: scale(calc(1 + .035 * var(--mov-fuerza, 1))); }
  to   { transform: scale(1); }
}

@keyframes mov-derecha {
  from { transform: scale(1.06) translateX(calc(-1% * var(--mov-fuerza, 1))); }
  to   { transform: scale(1.06) translateX(calc(1% * var(--mov-fuerza, 1))); }
}

@keyframes mov-izquierda {
  from { transform: scale(1.06) translateX(calc(1% * var(--mov-fuerza, 1))); }
  to   { transform: scale(1.06) translateX(calc(-1% * var(--mov-fuerza, 1))); }
}

@keyframes mov-arriba {
  from { transform: scale(1.06) translateY(calc(1.2% * var(--mov-fuerza, 1))); }
  to   { transform: scale(1.06) translateY(calc(-1.2% * var(--mov-fuerza, 1))); }
}

/* El clásico: acercarse y desplazarse a la vez, en diagonal. */
@keyframes mov-kenburns {
  from { transform: scale(1) translate(calc(-.8% * var(--mov-fuerza, 1)),
                                       calc(.6% * var(--mov-fuerza, 1))); }
  to   { transform: scale(calc(1 + .05 * var(--mov-fuerza, 1)))
                    translate(calc(.8% * var(--mov-fuerza, 1)),
                              calc(-.6% * var(--mov-fuerza, 1))); }
}

/*
 * El salto del relevo, y por qué hace falta «saliendo».
 *
 * Al perder «activa» la animación desaparece, y con ella el tamaño y la
 * posición que había alcanzado la foto: vuelve de golpe a su sitio. Y se ve,
 * porque la que sale sigue en pantalla el segundo largo que dura el fundido.
 *
 * Una transición de transform NO lo arregla, aunque lo pareciera: una
 * transición se dispara cuando cambia el valor declarado, y aquí ese valor
 * nunca cambió —era el de la animación, que es otra capa—. Por eso el salto
 * era instantáneo pese a tenerla puesta.
 *
 * Lo que sí funciona: seguir declarando la misma animación mientras la foto
 * se va. Al no cambiar de nombre, el navegador la da por la misma y no la
 * reinicia; la foto se desvanece moviéndose, y cuando ya es invisible
 * portada.js le quita la clase.
 */
.hero__slide { transition: opacity var(--slider-fundido) ease; }

/* ---------------------------------------------------------------------
   Entradas al bajar
   --------------------------------------------------------------------- */

/*
 * Los bloques suben unos píxeles y aparecen al entrar en pantalla, en vez de
 * estar todos ahí desde el principio.
 *
 * Aquí solo está la transición. **El estado inicial —invisible y desplazado—
 * lo pone el JavaScript en línea**, y por dos razones:
 *
 *  1. Si el script no se ejecuta, no falla o lo bloquean, nada se esconde y
 *     la página se ve entera. Escribir el «opacity: 0» en la hoja es la
 *     forma clásica de dejar una web en blanco el día que algo va mal.
 *
 *  2. Porque la otra vía no funciona. Se probó con una clase en <html> y un
 *     selector «.js-entradas [data-entra]»: la regla existía, el elemento la
 *     cumplía —matches() decía que sí— y aun así computaba opacity 1.
 *     Sacarlo del DOM y volver a meterlo lo arreglaba, que es la firma de
 *     una invalidación de estilos que no llega a ocurrir. Un estilo en línea
 *     no depende de que el navegador se dé cuenta de nada.
 */
[data-entra] {
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

/*
 * Las entradas laterales desplazan los bloques fuera del ancho de la página
 * mientras esperan a asomar, y eso ensancha el documento: aparece una barra de
 * desplazamiento horizontal que deja mover la web de lado, con la cabecera
 * despegándose del borde.
 *
 * «clip» y no «hidden» a propósito: «hidden» convierte el elemento en un
 * contenedor de desplazamiento y rompe el «position: sticky» de lo que lleve
 * dentro. «clip» recorta y ya está, que es lo único que hace falta.
 */
html, body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  /* Ni acercamiento, ni barra, ni entradas: quien pide menos movimiento lo
     pide para todo, no solo para las transiciones. */
  *, *::before, *::after { animation: none !important; }
  .hero__punto.activo::after { transform: scaleX(1); }
  [data-entra] { opacity: 1 !important; transform: none !important; }
}

/* Seis barras de 46 px más los huecos se salen de un móvil estrecho, y las de
   los extremos quedarían cortadas. Se encogen, que siguen contando lo mismo. */
@media (max-width: 560px) {
  .hero__puntos { gap: .35rem; bottom: 1.5rem; }
  .hero__punto { width: 22px; }
}

/* ---------------------------------------------------------------------
   Franja de cookies
   --------------------------------------------------------------------- */

/*
 * Va abajo y fija: es lo que menos tapa en una web cuya primera pantalla es
 * una foto a sangre. No es un modal ni bloquea nada —seguir navegando sin
 * contestar es una respuesta válida, y hasta que se conteste no se carga
 * ninguna etiqueta— así que no hay velo ni trampa de foco.
 *
 * El «display» va con !important porque el atributo «hidden» tiene que ganar
 * al flex: es JavaScript quien lo quita, y una franja que no se puede esconder
 * sería peor que no tenerla.
 */
.cookies {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 2rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  background: var(--pie); color: var(--tenue-pie);
  border-top: 2px solid var(--oro);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
  font-size: .9rem; line-height: 1.6;
}
.cookies[hidden] { display: none !important; }

.cookies__texto { margin: 0; max-width: 62ch; }
.cookies__texto a { color: var(--oro); text-decoration: underline; }

.cookies__botones { display: flex; gap: .75rem; flex-shrink: 0; }
.cookies__botones .boton { padding: .7rem 1.6rem; cursor: pointer; }
/* Sobre el pie oscuro, el botón de rechazar necesita su propio contorno: el
   gris del borde por defecto se pierde contra el fondo. */
.cookies__botones .boton:not(.boton--principal) {
  color: var(--tenue-pie); border-color: rgba(255, 255, 255, .35);
}
.cookies__botones .boton:not(.boton--principal):hover {
  color: var(--pie); background: var(--tenue-pie); border-color: var(--tenue-pie);
}

@media (max-width: 640px) {
  .cookies { justify-content: stretch; padding: 1rem; }
  .cookies__botones { width: 100%; }
  .cookies__botones .boton { flex: 1; text-align: center; }
}

/* El enlace del pie para volver a decidir. Es un <button> porque no lleva a
   ninguna parte, pero tiene que leerse como el resto de los legales. */
.legales__cookies {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--tenue-pie); background: none; border: 0; padding: 0;
  cursor: pointer;
}
.legales__cookies:hover { color: var(--oro); }

/* El botón mientras el envío va de camino. No se deshabilita —un botón
   deshabilitado no manda su name/value— sino que se apaga y deja de responder
   al puntero; el bloqueo de verdad lo hace formularios.js. */
.boton--enviando {
  opacity: .55;
  pointer-events: none;
  cursor: progress;
}

/* El aviso que pinta el navegador va igual que el que pinta el servidor: quien
   lo lee no tiene por qué notar de dónde viene. */
.error--js { display: block; }

/* ---------------------------------------------------------------------
   Lista de espera, bajo el formulario de reserva
   --------------------------------------------------------------------- */

/*
 * Plegada: es el plan B, y dos formularios abiertos uno al lado del otro hacen
 * dudar de cuál hay que rellenar. El resumen se lee como una pregunta
 * discreta, no como otro botón que compita con «Reservar».
 */
.espera {
  margin-top: 1.5rem;
  border: 1px solid var(--borde-2); border-radius: 8px; padding: .9rem 1.1rem;
}
.espera > summary {
  cursor: pointer; list-style: none;
  font-size: .9rem; line-height: 1.5; color: var(--tinta);
}
.espera > summary::-webkit-details-marker { display: none; }
.espera > summary::before { content: '+ '; color: var(--oro); font-weight: 700; }
.espera[open] > summary::before { content: '– '; }
.espera > summary:hover { color: var(--oro-texto); }
.espera[open] > summary { margin-bottom: .75rem; }
.espera .pista { margin: 0 0 1rem; }
.espera__form .campo { display: block; margin-bottom: .85rem; }
.espera__form .boton { width: 100%; text-align: center; margin-top: .75rem; }