/* Alto de la Sierra — hoja única. Tokens en :root, nada de CSS duplicado.
   El orden importa: las reglas de móvil van al final (ver el bloque iOS). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
/* `[hidden]` sólo vale `display:none` en la hoja del navegador y CUALQUIER
   regla propia con `display` le gana. Sin esta línea, el badge de "precios de
   ejemplo" (`display:inline-flex`) seguía pintado después de apagarlo en el
   panel. Va aquí arriba para que valga para todo lo que el JS esconde. */
[hidden] { display: none !important; }

:root {
  --tinta:   #000000;
  --carbon:  #0E0E0E;
  --humo:    #171717;
  --oro:     #C69654;
  --oro-alto:#DDB37B;
  --salvia:  #C3C6A8;
  --noche:   #374769;
  --hueso:   #EFEDE6;
  --tenue:   rgba(239,237,230,.62);
  --apenas:  rgba(239,237,230,.38);
  --linea:   rgba(198,150,84,.28);
  --linea-t: rgba(239,237,230,.12);

  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --texto:   "Jost", "Helvetica Neue", Arial, sans-serif;

  --paso: cubic-bezier(.22, 1, .36, 1);
  --ancho: 1240px;
  --canal: clamp(20px, 5vw, 64px);
  --nav: 76px;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--hueso);
  font-family: var(--texto);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: .01em;
  overflow-x: hidden;
}

/* ---------- tipografía ---------- */

.display, h1, h2, h3, .cifra {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.12;
}
h1 { font-size: clamp(2rem, 6.2vw, 4.4rem); letter-spacing: .14em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 1.9vw, 1.4rem); letter-spacing: .18em; }

.rotulo {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--oro);
}
.entrada { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--tenue); }
.tenue { color: var(--tenue); }
.oro { color: var(--oro); }
.salvia { color: var(--salvia); }
p + p { margin-top: 1.1em; }

/* ---------- estructura ---------- */

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }
.seccion { padding-block: clamp(64px, 9vw, 132px); }
.seccion--carbon { background: var(--carbon); }
.filo { border-top: 1px solid var(--linea-t); }

.encabezado { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 62ch; }
.encabezado--centro { margin-inline: auto; text-align: center; align-items: center; }

/* hairline de oro que se dibuja al entrar la sección */
.hilo { width: 100%; height: 1px; background: var(--linea); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--paso); }
.visible .hilo, .hilo.visible { transform: scaleX(1); }

/* ---------- botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 30px;
  font-family: var(--display); font-size: .74rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .22em;
  border: 1px solid var(--oro); border-radius: 2px;
  background: transparent; color: var(--oro);
  cursor: pointer; position: relative; overflow: hidden;
  transition: color .45s var(--paso), border-color .45s var(--paso);
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content: ""; position: absolute; inset: 0; background: var(--oro);
  transform: scaleY(0); transform-origin: bottom; z-index: -1;
  transition: transform .5s var(--paso);
}
.btn > * { position: relative; }
.btn:hover, .btn:focus-visible { color: var(--tinta); }
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn:active { transform: translateY(1px); }
.btn--solido { background: var(--oro); color: var(--tinta); }
.btn--solido:hover, .btn--solido:focus-visible { background: var(--oro-alto); border-color: var(--oro-alto); color: var(--tinta); }
.btn--solido::after { display: none; }
.btn--fantasma { border-color: rgba(239,237,230,.3); color: var(--hueso); }
.btn--fantasma::after { background: var(--hueso); }
.btn--chico { min-height: 42px; padding: 0 20px; font-size: .68rem; }

/* ---------- barra ---------- */

.barra {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav);
  display: flex; align-items: center;
  transition: border-color .5s var(--paso);
  border-bottom: 1px solid transparent;
}
/* El vidrio (fondo + backdrop-filter) va en una capa propia, NO en .barra.
   Con el filtro en .barra, ésta se vuelve bloque contenedor de sus
   descendientes position:fixed, y el .panel (menú móvil, inset:0) se recorta
   a la altura de la barra en vez de llenar la pantalla. Sólo se notaba tras
   hacer scroll, cuando .barra--posada enciende el filtro. */
.barra::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: transparent;
  transition: background .5s var(--paso), backdrop-filter .5s var(--paso);
}
.barra--posada::before {
  background: rgba(8,8,8,.72);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.barra--posada { border-bottom-color: var(--linea-t); }
.barra__caja { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }
.marca { display: flex; align-items: center; gap: 12px; color: var(--oro); }
.marca svg { width: 34px; height: auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca__nombre { font-family: var(--display); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--hueso); }
.marca__bajada { font-family: var(--display); font-size: .52rem; letter-spacing: .26em; text-transform: uppercase; color: var(--apenas); }

.menu { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.menu a { font-family: var(--display); font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; color: var(--tenue); position: relative; padding-block: 6px; transition: color .35s var(--paso); }
.menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--oro); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--paso); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--hueso); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.idiomas { display: flex; gap: 8px; align-items: center; font-family: var(--display); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; }
.idiomas a { color: var(--apenas); }
.idiomas a[aria-current] { color: var(--oro); }
.idiomas span { color: var(--linea-t); }

.hamburguesa {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  /* El panel es fixed con z-index 70 y tapa toda la pantalla, la barra incluida.
     Sin este z-index la X queda DEBAJO del panel: el dedo pega en el velo y el
     menú no cierra (en el teléfono no hay Escape). Medido con elementFromPoint. */
  position: relative; z-index: 80;
}
.hamburguesa span { display: block; width: 22px; height: 1px; background: var(--hueso); position: relative; transition: background .3s var(--paso); }
.hamburguesa span::before, .hamburguesa span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: var(--hueso); transition: transform .4s var(--paso); }
.hamburguesa span::before { top: -7px; }
.hamburguesa span::after { top: 7px; }
[data-abierto] .hamburguesa span { background: transparent; }
[data-abierto] .hamburguesa span::before { transform: translateY(7px) rotate(45deg); }
[data-abierto] .hamburguesa span::after { transform: translateY(-7px) rotate(-45deg); }

/* el panel va por ENCIMA de la barra: si queda debajo, el menú no cierra */
.panel {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  justify-content: center; gap: 6px; padding: 96px var(--canal) 40px;
  background: rgba(6,6,6,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .4s var(--paso), transform .5s var(--paso), visibility .4s;
  /* El teléfono en horizontal deja 390 px de alto y el menú mide 435: sin esto
     el botón Reservar quedaba 45 px FUERA de la pantalla y no se alcanzaba,
     porque el <body> tiene overflow:hidden mientras el menú está abierto.
     `safe center` centra sólo mientras quepa; cuando no cabe se alinea arriba,
     que es lo que evita que `justify-content:center` corte también por arriba. */
  overflow-y: auto; overscroll-behavior: contain;
  justify-content: safe center;
}
[data-abierto] .panel { opacity: 1; visibility: visible; transform: none; }
.panel a { font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .2em; padding-block: 12px; border-bottom: 1px solid var(--linea-t); }
.panel .idiomas { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 24px; gap: 4px 10px; font-size: .8rem; }
/* Sin esto heredan `.panel a`: 1.15rem con subrayado, que en fila se desborda. */
.panel .idiomas a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: .8rem; letter-spacing: .18em; border-bottom: 0; }

/* Pantalla baja (teléfono acostado): el menú se aprieta para caber entero sin
   scroll, en vez de obligar a arrastrar dentro de un panel de 390 px. */
@media (max-height: 520px) {
  .panel { padding-top: 72px; padding-bottom: 20px; gap: 0; }
  .panel a { font-size: .98rem; padding-block: 7px; }
  .panel .idiomas { margin-top: 12px; }
  .panel .idiomas a { min-height: 34px; }
}

/* ---------- héroe ---------- */

.heroe { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.heroe__foto { position: absolute; inset: 0; }
.heroe__foto img { width: 100%; height: 100%; object-fit: cover; }
.heroe__velo { position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,.14) 30%, rgba(0,0,0,.46) 62%, rgba(0,0,0,.94) 100%),
  linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 48%, transparent 82%); }
.heroe__niebla {
  position: absolute; inset: -10% -30%; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 42% at 30% 78%, rgba(239,237,230,.20), transparent 70%),
              radial-gradient(52% 38% at 74% 64%, rgba(195,198,168,.16), transparent 72%);
  animation: deriva 34s ease-in-out infinite alternate;
}
@keyframes deriva { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(4%, -2%, 0) scale(1.09); } }
.heroe__caja { position: relative; width: 100%; padding-bottom: clamp(48px, 8vw, 92px); }
.heroe h1 { margin-block: 18px 22px; text-wrap: balance; }
.heroe__pie { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.heroe__abajo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--display); font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--apenas); }
.heroe__abajo i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--oro), transparent); }

/* ---------- buscador ---------- */

.buscador {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--linea-t); border: 1px solid var(--linea);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.buscador > * { min-width: 0; }
.buscador > .campo { background: rgba(10,10,10,.72); }
.campo { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; }
.campo > span { font-family: var(--display); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.campo input, .campo select {
  width: 100%; max-width: 100%; min-width: 0;
  background: transparent; border: 0; padding: 0; color: var(--hueso);
  font-family: var(--texto); font-size: 1rem;
  -webkit-appearance: none; appearance: none;   /* iOS le pone ancho propio a date */
}
.campo input:focus, .campo select:focus { outline: none; }
.campo select option { background: var(--carbon); color: var(--hueso); }
.buscador .btn { border: 0; border-radius: 0; height: 100%; }

/* ---------- rejillas y tarjetas ---------- */

.rejilla { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.rejilla > * { min-width: 0; }                  /* si no, el hijo ancho desborda */
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.tarjeta { position: relative; display: flex; flex-direction: column; background: var(--carbon); border: 1px solid var(--linea-t); overflow: hidden; transition: border-color .5s var(--paso), transform .6s var(--paso); }
.tarjeta__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--humo); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--paso); }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.tarjeta__pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea-t); }

/* Toda la tarjeta es el botón. La liga se estira encima de la tarjeta entera:
   un solo destino de clic, una sola parada de teclado, y la pastilla "Ver
   detalle" queda de adorno (aria-hidden) para no anunciar el mismo enlace dos
   veces. El pie de foto y el precio siguen legibles porque la liga es
   transparente. */
.tarjeta--pulsable { cursor: pointer; }
.tarjeta__liga {
  position: absolute; inset: 0; z-index: 3;
  border: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none;
  font: inherit; color: transparent; cursor: pointer;
}
.tarjeta__liga:focus { outline: none; }

/* Presión: rápida y pequeña, para que la tarjeta acuse recibo del dedo. */
.tarjeta--pulsable:active { transform: scale(.985); transition-duration: .12s; }

/* Teclado: el foco se ve en la tarjeta, no en un rectángulo invisible. */
.tarjeta--pulsable:has(.tarjeta__liga:focus-visible) { border-color: var(--oro); outline: 1px solid var(--oro); outline-offset: 2px; }
.tarjeta--pulsable:has(.tarjeta__liga:focus-visible) .btn { color: var(--tinta); }
.tarjeta--pulsable:has(.tarjeta__liga:focus-visible) .btn::after { transform: scaleY(1); }
.tarjeta--pulsable:has(.tarjeta__liga:focus-visible) .btn--solido { background: var(--oro-alto); border-color: var(--oro-alto); }

/* El hover se apaga en pantallas táctiles: ahí un toque lo deja pegado. */
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { border-color: var(--linea); transform: translateY(-3px); }
  .tarjeta:hover .tarjeta__foto img { transform: scale(1.045); }
  /* Apuntar a cualquier parte de la tarjeta prende la pastilla. */
  .tarjeta--pulsable:hover .btn { color: var(--tinta); }
  .tarjeta--pulsable:hover .btn::after { transform: scaleY(1); }
  .tarjeta--pulsable:hover .btn--solido { background: var(--oro-alto); border-color: var(--oro-alto); }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta, .tarjeta__foto img { transition: border-color .3s ease; }
  .tarjeta:hover { transform: none; }
  .tarjeta:hover .tarjeta__foto img { transform: none; }
  .tarjeta--pulsable:active { transform: none; }
}
.sello { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 11px; background: rgba(6,6,6,.76); border: 1px solid var(--linea); font-family: var(--display); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }

.precio { display: flex; flex-direction: column; gap: 2px; }
.precio__desde { font-family: var(--display); font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: var(--apenas); }
.precio__cifra { font-family: var(--display); font-size: 1.32rem; letter-spacing: .06em; color: var(--hueso); }
.precio__cifra small { font-size: .58rem; letter-spacing: .18em; color: var(--tenue); }
.aviso-precio { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px dashed var(--linea); font-family: var(--display); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }

/* carrusel arrastrable */
.riel { display: flex; gap: clamp(14px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.riel > * { flex: 0 0 clamp(268px, 30vw, 380px); scroll-snap-align: start; }
.riel::-webkit-scrollbar { height: 3px; }
.riel::-webkit-scrollbar-thumb { background: var(--linea); }
.riel.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.riel.arrastrando * { pointer-events: none; }

/* fichas de datos */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linea-t); border: 1px solid var(--linea-t); }
.datos > div { min-width: 0; background: var(--carbon); padding: 18px; }
.datos dt { font-family: var(--display); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); margin-bottom: 4px; }
.datos dd { margin: 0; font-size: .96rem; }

.amenidades { display: flex; flex-wrap: wrap; gap: 8px; }
.amenidades li { padding: 6px 12px; border: 1px solid var(--linea-t); font-size: .78rem; letter-spacing: .04em; color: var(--tenue); }

/* franja a sangre */
.franja { position: relative; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: center; overflow: hidden; }
.franja__foto { position: absolute; inset: 0; }
.franja__foto img { width: 100%; height: 100%; object-fit: cover; }
.franja__velo { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 46%, rgba(0,0,0,.28) 100%); }
.franja__caja { position: relative; max-width: 54ch; }

/* ---------- pie ---------- */

.pie { background: var(--tinta); border-top: 1px solid var(--linea-t); padding-block: clamp(48px, 6vw, 78px) 30px; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 60px); }
.pie__rejilla > * { min-width: 0; }
.pie h4 { font-family: var(--display); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); margin-bottom: 14px; }
.pie li + li { margin-top: 8px; }
@media (max-width: 860px) {
  /* 25 px de alto con 11 de separación: el pulgar no acierta. */
  .pie li a, .pie__legal a { display: inline-block; padding-block: 9px; }
  .pie li + li { margin-top: 0; }
}
.pie a:hover { color: var(--oro); }
.pie__legal { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: clamp(34px, 5vw, 58px); padding-top: 22px; border-top: 1px solid var(--linea-t); font-size: .76rem; color: var(--apenas); }
/* Pastilla del panel: se lee sólo si la buscas. */
.pie__panel {
  border: 1px solid var(--linea-t); border-radius: 99px; padding: 3px 13px;
  font-family: var(--display); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--apenas); transition: color .25s var(--paso), border-color .25s var(--paso);
}
.pie__panel:hover, .pie__panel:focus-visible { color: var(--oro); border-color: var(--oro); }
/* En el teléfono NO va pegada a la derecha: ahí caen los tres flotantes y la
   dejan intocable (medido con elementFromPoint: el tap se lo llevaba WhatsApp). */
@media (max-width: 860px) { .pie__panel { margin-right: auto; padding-block: 9px; } }

/* ---------- ficha ---------- */

.ficha { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.reserva-caja { position: sticky; top: calc(var(--nav) + 18px); background: var(--carbon); border: 1px solid var(--linea-t); }
.reserva-caja .datos { border: 0; }

.visor__caja { position: relative; background: var(--humo); aspect-ratio: 3 / 2; overflow: hidden; }
.visor__marco { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--paso); }
.visor__marco.visible { opacity: 1; }
.visor__marco img { width: 100%; height: 100%; object-fit: cover; }
.visor > img { width: 100%; }
.visor__tiras { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding-bottom: 6px; }
.tira { flex: 0 0 92px; height: 68px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: .55; transition: opacity .4s var(--paso), border-color .4s var(--paso); }
.tira img { width: 100%; height: 100%; object-fit: cover; }
.tira.activa, .tira:hover { opacity: 1; border-color: var(--oro); }

/* ---------- galería ---------- */

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.celda { position: relative; padding: 0; border: 0; background: var(--humo); cursor: zoom-in; overflow: hidden; aspect-ratio: 1 / 1; }
.celda img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--paso), opacity .5s var(--paso); }
.celda:hover img { transform: scale(1.05); }
.celda > span {
  position: absolute; inset: auto 0 0; padding: 22px 12px 10px; text-align: left;
  font-family: var(--display); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--hueso);
  background: linear-gradient(transparent, rgba(0,0,0,.86)); opacity: 0; transition: opacity .4s var(--paso);
}
.celda:hover > span, .celda:focus-visible > span { opacity: 1; }
.celda[hidden] { display: none; }

.visor-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.95); padding: clamp(12px, 4vw, 48px); }
.visor-modal[hidden] { display: none; }
.visor-modal figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.visor-modal img { max-height: 78vh; width: auto; margin-inline: auto; object-fit: contain; }
.visor-modal figcaption { text-align: center; font-family: var(--display); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.visor-modal__cerrar, .visor-modal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: rgba(14,14,14,.7); border: 1px solid var(--linea-t); color: var(--hueso);
  font-size: 1.9rem; line-height: 1; cursor: pointer; transition: border-color .35s var(--paso);
}
.visor-modal__cerrar { top: 18px; right: 18px; transform: none; width: 46px; height: 46px; font-size: 1.5rem; }
.visor-modal__nav:hover, .visor-modal__cerrar:hover { border-color: var(--oro); }

/* ---------- wizard ---------- */

.pasos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: clamp(26px, 4vw, 42px); }
.pasos li { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--apenas); }
.pasos li span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--linea-t); border-radius: 50%; font-size: .66rem; }
.pasos li.activo { color: var(--oro); }
.pasos li.activo span { border-color: var(--oro); }
.pasos li.hecho { color: var(--salvia); }
.pasos li.hecho span { border-color: var(--salvia); }

.campo--caja { background: var(--carbon); border: 1px solid var(--linea-t); margin-bottom: 10px; }
.campo--caja textarea { width: 100%; background: transparent; border: 0; color: var(--hueso); font-family: var(--texto); resize: vertical; }
.campo--caja textarea:focus { outline: none; }
.entrada-simple { background: var(--carbon); border: 1px solid var(--linea-t); color: var(--hueso); padding: 12px 14px; min-width: 220px; }

.aviso { padding: 14px 16px; border: 1px solid var(--oro); background: rgba(198,150,84,.08); color: var(--oro); font-size: .92rem; margin-bottom: 22px; }
.aviso[hidden] { display: none; }
.aviso--malo { border-color: #b4543f; background: rgba(180,84,63,.12); color: #e69a86; }

/* chip de la cabaña que se traía elegida desde su ficha */
.filtro-unidad { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; margin-bottom: 22px; border: 1px solid var(--linea); background: rgba(198,150,84,.06); font-size: .92rem; }
.filtro-unidad[hidden] { display: none; }
.filtro-unidad strong { color: var(--oro); font-family: var(--display); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; }

/* El foco que se pone por código para enfocar un paso no debe pintar borde. */
[tabindex="-1"]:focus { outline: none; }

.opcion { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; background: var(--carbon); border: 1px solid var(--linea-t); cursor: pointer; transition: border-color .4s var(--paso); }
.opcion:hover { border-color: var(--linea); }
.opcion input { accent-color: var(--oro); width: 20px; height: 20px; flex: 0 0 auto; }
.opcion.elegida { border-color: var(--oro); }

.tarjeta--ocupada { opacity: .42; }
.tarjeta--ocupada .btn { pointer-events: none; opacity: .5; }
.tarjeta--ocupada .tarjeta__liga { pointer-events: none; }
.cinta-ocupada { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 5px 11px; background: rgba(6,6,6,.86); border: 1px solid rgba(230,154,134,.5); font-family: var(--display); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: #e69a86; }
.cinta-quedan { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 5px 11px; background: rgba(6,6,6,.86); border: 1px solid rgba(198,150,84,.55); font-family: var(--display); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }

/* ---------- paso 5: cómo aparta ---------- */

.pagos { display: grid; gap: 12px; margin-top: 24px; max-width: 620px; }
.pago { position: relative; display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--linea-t); background: var(--carbon); cursor: pointer; transition: border-color .3s var(--paso), background .3s var(--paso); }
.pago:hover { border-color: var(--linea); }
.pago input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pago::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; border: 1px solid var(--apenas); border-radius: 50%; transition: border-color .3s var(--paso), box-shadow .3s var(--paso); }
.pago--puesto { border-color: var(--oro); background: rgba(198,150,84,.06); }
.pago--puesto::before { border-color: var(--oro); box-shadow: inset 0 0 0 4px var(--oro); }
.pago:focus-within { outline: 2px solid var(--oro); outline-offset: 3px; }
.pago__cuerpo { display: grid; gap: 6px; }
.pago__titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.pago__insignia { padding: 3px 9px; border: 1px solid var(--linea); border-radius: 999px; font-size: .58rem; letter-spacing: .16em; color: var(--oro); }
.pago__desc { font-size: .92rem; color: var(--tenue); line-height: 1.55; }
/* Apagada de verdad: ni el tacto ni el teclado la pueden elegir. */
.pago--apagado { cursor: default; opacity: .5; border-style: dashed; pointer-events: none; }
.pago--apagado::before { border-radius: 3px; }
/* Modo WhatsApp: el paso 5 ya no elige nada, sólo explica qué va a pasar al
   tocar el botón. Sin bolita de radio y sin cursor de clic, porque no es una
   opción que se pueda escoger. */
.pago--whats { cursor: default; }
.pago--whats::before { display: none; }
.pago__pasos { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 9px; }
.pago__pasos li::marker { color: var(--oro); }
.pagos__politica { margin-top: 20px; max-width: 620px; font-size: .86rem; color: var(--tenue); line-height: 1.6; }

/* ---------- paso 6: datos para transferir ---------- */

.pago-demo { margin: 20px auto 0; max-width: 44ch; padding: 12px 16px; border: 1px dashed var(--oro); background: rgba(198,150,84,.08); font-size: .84rem; line-height: 1.55; color: var(--oro-alto); text-align: left; }
.pago-datos { margin-top: 22px; padding: 20px; border: 1px solid var(--linea); background: rgba(0,0,0,.32); text-align: left; }
.pago-datos__titulo { font-family: var(--display); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); margin-bottom: 14px; }
.pago-dato { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea-t); }
.pago-dato:last-of-type { border-bottom: 0; }
.pago-dato__et { flex: 0 0 auto; min-width: 84px; font-size: .8rem; color: var(--tenue); }
.pago-dato__val { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: .95rem; }
.pago-dato__val--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.pago-dato__copia { position: relative; flex: 0 0 auto; padding: 9px 15px; border: 1px solid var(--linea); border-radius: 999px; background: none; color: var(--hueso); font-family: var(--display); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .3s var(--paso), color .3s var(--paso); }
/* El botón mide 36 px de alto y el dedo pide 44: el área de tacto se estira
   con un pseudo-elemento en vez de engordar el botón, que se vería tosco. */
.pago-dato__copia::after { content: ""; position: absolute; inset: -5px -4px; }
.pago-dato__copia:hover { border-color: var(--oro); color: var(--oro); }
.pago-dato__copia.copiado { border-color: var(--oro); background: var(--oro); color: var(--tinta); }
.pago-datos__pie { margin-top: 16px; font-size: .82rem; color: var(--tenue); line-height: 1.6; }
.folio-caja__politica { margin-top: 22px; font-size: .8rem; color: var(--tenue); line-height: 1.6; max-width: 50ch; margin-inline: auto; }
.cuenta { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linea-t); font-size: .94rem; }
.cuenta:last-child { border-bottom: 0; }
.cuenta--fuerte { font-family: var(--display); letter-spacing: .06em; color: var(--oro); padding-top: 14px; }
.folio-caja { text-align: center; padding: clamp(28px, 5vw, 52px); border: 1px solid var(--oro); background: var(--carbon); }
.folio-caja .folio { font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2.2rem); letter-spacing: .18em; color: var(--oro); margin: 12px 0; }

/* ---------- reveals ---------- */

[data-rev] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--paso), transform .9s var(--paso); transition-delay: calc(var(--d, 0) * 90ms); }
[data-rev].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-rev] { opacity: 1; transform: none; }
  .heroe__niebla { animation: none; }
}

/* ---------- móvil ---------- */

@media (max-width: 1020px) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .reserva-caja { position: static; }
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pago-dato { flex-wrap: wrap; gap: 6px 12px; }
  .pago-dato__et { flex: 1 0 100%; min-width: 0; }
  .pago-dato__copia { min-height: 44px; padding-inline: 18px; }
  /* Ojo: `.barra .idiomas` también casaba el selector de idiomas del PANEL
     (el menú móvil vive dentro del <header class="barra">) y lo dejaba en
     display:none, así que en el teléfono no había forma de cambiar de idioma.
     Se esconde sólo el de la barra de arriba. */
  .barra__caja .idiomas { display: none; }
  .menu { display: none; }
  .hamburguesa { display: flex; }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buscador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buscador .btn { grid-column: 1 / -1; min-height: 54px; }
}
@media (max-width: 620px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
  .heroe { min-height: 92svh; }
  .heroe__abajo { display: none; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .visor-modal__nav { width: 44px; height: 44px; }
}

/* iOS hace zoom en cualquier campo de menos de 16px.
   Esta regla va AL FINAL de la hoja o la pisan los tamaños de arriba. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---------- botones flotantes (WhatsApp · Facebook) ---------- */
/* Se ven en cada página y todo el tiempo, así que NO llevan pulso ni rebote:
   una entrada discreta una sola vez y ya. z-index 55 los deja debajo de la
   barra (60) y del menú móvil (70), para que el menú abierto los tape. */
.flotantes {
  position: fixed; z-index: 55;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(clamp(14px, 3vw, 26px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  /* La entrada va con @starting-style, NO con un @keyframes de relleno `both`:
     si la animación nunca corre (pestaña oculta, motor con animaciones
     apagadas), un keyframe con `both` deja los botones en opacity 0 —
     invisibles pero clicables. Así el estado base ya es "visible". */
  opacity: 1; transform: none;
  transition: opacity .45s var(--paso) .7s, transform .45s var(--paso) .7s;
}
@starting-style {
  .flotantes { opacity: 0; transform: translateY(10px); }
}

.flotante {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: transform .16s var(--paso), box-shadow .3s var(--paso), background-color .3s var(--paso);
}
.flotante svg { width: 26px; height: 26px; }
.flotante:active { transform: scale(.94); }
.flotante:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }

.flotante--wa { background: #25D366; color: #062511; }
/* Instagram y Facebook comparten estilo y miden lo mismo que WhatsApp. */
.flotante--red {
  background: rgba(14,14,14,.72); color: var(--hueso);
  border: 1px solid var(--linea);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) {
  .flotante:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,.55); }
  .flotante--wa:hover { background: #2EE674; }
  .flotante--red:hover { background: rgba(198,150,84,.16); border-color: var(--oro); color: var(--oro-alto); }
}

@media (max-width: 620px) {
  /* Los tres siguen midiendo lo mismo, nada más un poco más chicos. */
  .flotante { width: 50px; height: 50px; }
  .flotante svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .flotantes { transition: none; }
  .flotante, .flotante:hover, .flotante:active { transform: none; transition: background-color .3s ease; }
}

/* ---------- calendario de rango ----------
   Sustituye al date picker del navegador, que llegaba con su propia caja
   blanca. Escritorio: hoja anclada bajo el buscador, dos meses. Teléfono:
   hoja de abajo a pantalla completa. */

.campo--fecha { position: relative; transition: box-shadow 140ms ease; }
.campo--fecha input[type="date"] { display: none; }   /* el nativo se queda de respaldo */
.campo--apunta { box-shadow: inset 0 0 0 1px var(--linea); }
.campo__fecha {
  width: 100%; text-align: left; background: transparent; border: 0; padding: 0;
  color: var(--hueso); font-family: var(--texto); font-size: 1rem; line-height: 1.5;
  cursor: pointer; transition: color 140ms ease;
}
.campo__fecha:focus-visible { outline: 1px solid var(--oro); outline-offset: 3px; }
.campo__fecha--vacio { color: var(--apenas); }
.campo__fecha--apunta { color: var(--oro-alto); }
/* La caja entera es el botón. El <label> apunta al input[type=date], que está
   en display:none, así que cualquier tap fuera del texto del botón (138x24 de
   una caja de 174x71: dos tercios de la caja) no abría nada. */
.campo__fecha::after { content: ""; position: absolute; inset: 0; }

.cal-scrim {
  position: fixed; inset: 0; z-index: 94; background: rgba(0,0,0,.66);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 1; transition: opacity 180ms ease;
}
.cal-scrim[hidden] { display: none; }
body.cal-abierto { overflow: hidden; }
body.cal-activo .flotantes { opacity: 0; pointer-events: none; }

/* Cuelga del <body> —dentro del hero la recortaba su `overflow:hidden`— y el
   JS le pone left/top/width contra el buscador. z-index 58: encima de los
   botones flotantes (55) y debajo de la barra (60). */
.cal {
  position: absolute; z-index: 58; width: min(700px, 100%);
  display: grid; gap: 14px; padding: clamp(16px, 2vw, 22px);
  background: var(--carbon); border: 1px solid var(--linea);
  box-shadow: 0 26px 70px rgba(0,0,0,.62);
  transform-origin: top left;
  /* Cerrada = [hidden] (display:none, sin transición que se pueda quedar a
     medias). Abierta = clase con el estado final. Si la transición no corre
     —pestaña de fondo, navegador viejo— la hoja aparece de golpe, nunca
     invisible ni fuera de la pantalla. */
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity 170ms cubic-bezier(.23,1,.32,1), transform 170ms cubic-bezier(.23,1,.32,1);
}
.cal[hidden] { display: none; }
.cal--abierto { opacity: 1; transform: none; }

.cal__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal__leyenda {
  font-family: var(--display); font-size: .58rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--oro); text-align: center; flex: 1;
}
.cal__flecha {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--linea-t); color: var(--hueso);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, transform 140ms cubic-bezier(.23,1,.32,1);
}
.cal__flecha:disabled { opacity: .28; cursor: not-allowed; }
.cal__flecha:not(:disabled):active { transform: scale(.94); }

.cal__meses { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); }
.cal__mes-t {
  font-family: var(--display); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; text-align: center; margin-bottom: 10px;
}
.cal__sem, .cal__dias { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__sem { gap: 2px; margin-bottom: 4px; }
.cal__sem span {
  text-align: center; font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--apenas);
}
.cal__dias { gap: 2px; }
.cal__hueco { display: block; }
.cal__dia {
  position: relative; display: grid; place-content: center; gap: 1px;
  min-height: 44px; padding: 4px 2px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--hueso);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms cubic-bezier(.23,1,.32,1);
}
.cal__n { font-family: var(--display); font-size: .78rem; letter-spacing: .06em; text-align: center; }
.cal__p { font-size: .5rem; letter-spacing: .02em; color: var(--apenas); text-align: center; min-height: .8em; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .cal__dia:not(:disabled):hover { background: rgba(198,150,84,.14); border-color: var(--linea); }
}
.cal__dia:not(:disabled):active { transform: scale(.94); }
.cal__dia:focus-visible { outline: 1px solid var(--oro); outline-offset: -1px; }
.cal__dia--medio { background: rgba(195,198,168,.12); }
.cal__dia--sel, .cal__dia--sel:hover { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.cal__dia--sel .cal__p { color: rgba(0,0,0,.55); }
.cal__dia--hoy::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; translate: -50% 0;
  width: 3px; height: 3px; background: var(--salvia);
}
.cal__dia--sel.cal__dia--hoy::after { background: rgba(0,0,0,.55); }
.cal__dia--muerto { color: var(--apenas); cursor: not-allowed; }
.cal__dia--lleno .cal__n { text-decoration: line-through; text-decoration-color: var(--linea); }
.cal__dia--lleno .cal__p { color: rgba(180,84,63,.75); }

.cal__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; border-top: 1px solid var(--linea-t); padding-top: 14px;
}
.cal__cuenta { font-size: .86rem; color: var(--tenue); }
.cal__nota { font-size: .68rem; letter-spacing: .06em; color: var(--apenas); text-transform: uppercase; font-family: var(--display); }
.cal__acciones { display: flex; gap: 8px; margin-left: auto; }

@media (max-width: 860px) {
  .cal {
    /* Los !important pisan el left/top/width en línea que el JS calcula para
       escritorio: si la ventana se achica, la hoja cae al piso aunque el evento
       `resize` no llegue. */
    position: fixed; inset: auto 0 0 0; z-index: 95;
    top: auto !important; left: auto !important; width: 100% !important;
    max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border: 0; border-top: 1px solid var(--linea);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    transform-origin: bottom center;
    opacity: 1; transform: translateY(100%);
    transition: opacity 200ms cubic-bezier(.32,.72,0,1), transform 200ms cubic-bezier(.32,.72,0,1);
  }
  .cal--abierto { opacity: 1; transform: none; }
  .cal__meses { grid-template-columns: 1fr; gap: 26px; }
  .cal__pie { position: sticky; bottom: 0; background: var(--carbon); }
  .cal__acciones { width: 100%; }
  .cal__acciones .btn { flex: 1; }
}

/* Teléfono ACOSTADO (844x390): la hoja de abajo se calculaba sólo por ancho,
   así que caía la misma columna única que en vertical: celdas de 114 px de
   ancho por 44 de alto, los dos meses uno encima del otro y 485 px de scroll
   dentro de una hoja de 343. Acostado sobra ancho y falta alto, que es justo
   al revés: dos meses a lo ancho y el pie en una sola línea. */
@media (max-width: 860px) and (max-height: 520px) {
  .cal { max-height: 94vh; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 10px; }
  .cal__meses { grid-template-columns: 1fr 1fr; gap: 18px; }
  .cal__acciones { width: auto; }
  .cal__acciones .btn { flex: 0 0 auto; }
  .cal__pie { padding-top: 10px; }
  .cal__dia { min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal, .cal__dia, .cal__flecha { transition: none; }
}

/* ---------- mapa perezoso ----------
   La tarjeta es de la casa; el iframe de Google entra hasta que lo piden. */
.mapa { border: 1px solid var(--linea-t); background: var(--carbon); }
.mapa__previo { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--humo); }
.mapa__previo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.mapa__centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 20px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.85));
}
.mapa__pin { display: block; width: 40px; height: 40px; color: var(--oro); margin-bottom: 10px; }
.mapa__pin svg { width: 100%; height: 100%; }
.mapa__aviso { margin-top: 12px; font-size: .74rem; letter-spacing: .04em; color: var(--apenas); max-width: 34ch; }
.mapa__marco { display: block; width: 100%; aspect-ratio: 16 / 8; border: 0; filter: saturate(.85) contrast(1.05); }
.mapa__ligas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-top: 1px solid var(--linea-t);
}
.mapa__comollegar {
  font-family: var(--display); font-size: .58rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--oro); margin-right: 4px;
}
@media (max-width: 620px) {
  .mapa__previo, .mapa__marco { aspect-ratio: 4 / 3; }
}

/* ---------- quiénes somos, en la portada ----------
   Mateo lo pidió el 01-sep-2026: el primer scroll caía en cuatro cifras secas y
   de ahí al carrusel de cabañas, que se le hacía agresivo. Ahora hay un bloque
   editorial entre el hero y las habitaciones. */
.nosotros-portada {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4.5vw, 68px); align-items: center;
}
.nosotros-portada__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--linea-t); }
.nosotros-portada__foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotros-portada__texto > p { max-width: 56ch; line-height: 1.75; }
.nosotros-portada__texto > p + p { margin-top: 1.05em; }
.compromisos {
  list-style: none; margin: clamp(26px, 3.5vw, 38px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px;
}
.compromisos li { display: grid; gap: 5px; padding-top: 14px; border-top: 1px solid var(--linea); }
.compromisos__t {
  font-family: var(--display); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro);
}
.compromisos__d { font-size: .9rem; color: var(--tenue); line-height: 1.6; }

@media (max-width: 900px) {
  .nosotros-portada { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 36px); }
  .nosotros-portada__foto { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
  .compromisos { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- qué hacer en el pueblo (página de destino) ---------- */
.quehacer-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); }
.quehacer {
  display: flex; flex-direction: column; gap: 10px; padding: 22px;
  background: rgba(0,0,0,.28); border: 1px solid var(--linea-t);
  transition: border-color .5s var(--paso);
}
.quehacer__alto { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.quehacer__cat {
  font-family: var(--display); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--oro);
}
.quehacer__dist { font-size: .78rem; color: var(--apenas); white-space: nowrap; }
.quehacer__nombre { font-size: 1.05rem; line-height: 1.3; }
.quehacer__texto { font-size: .92rem; color: var(--tenue); line-height: 1.65; }
.quehacer__datos {
  display: grid; gap: 8px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--linea-t);
}
.quehacer__datos > div { display: grid; gap: 2px; }
.quehacer__datos dt {
  font-family: var(--display); font-size: .55rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--apenas);
}
.quehacer__datos dd { margin: 0; font-size: .84rem; color: var(--tenue); line-height: 1.5; }

/* La fama del pueblo: contexto cultural, no oferta del hotel. El aviso va
   marcado aparte para que se lea como aviso y no como parte del relato. */
.hongos {
  margin-top: clamp(36px, 5vw, 56px); padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--linea); background: rgba(198,150,84,.05); max-width: 78ch;
}
.hongos__titulo { font-size: 1.1rem; margin-bottom: 12px; }
.hongos__texto { font-size: .95rem; color: var(--tenue); line-height: 1.75; }
.hongos__aviso {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea-t);
  font-size: .86rem; line-height: 1.7; color: var(--oro-alto);
}

@media (max-width: 900px) { .quehacer-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .quehacer-rejilla { grid-template-columns: minmax(0, 1fr); } }

/* ---------- grupos y convenciones ---------- */
.gtipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); }
.gtipo {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px;
  background: var(--carbon); border: 1px solid var(--linea-t);
  border-top: 1px solid var(--oro);
}
.gtipo__nombre { font-size: 1.05rem; line-height: 1.3; }
.gtipo__texto { font-size: .92rem; color: var(--tenue); line-height: 1.65; }

.gcotiza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.gcotiza .campo--caja { margin-bottom: 12px; }
.campo--ancho { grid-column: 1 / -1; }
.gcotiza__pie {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; margin-top: 10px;
}

@media (max-width: 1000px) { .gtipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .gtipos { grid-template-columns: minmax(0, 1fr); }
  .gcotiza { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- carta del restaurante ----------
   Nombre y precio en los extremos con puntos suspensivos de por medio, como en
   una carta impresa. El punteado es un ::after que crece, no una fila de
   caracteres: así se estira solo y no se corta a medias en el teléfono. */
/* «Desayunos» / «Comidas y cenas»: el nivel de arriba de la carta. Va con
   filete arriba para que se lea como corte de sección y no como un platillo
   más en negritas. */
.carta__momento {
  font-family: var(--display); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--hueso);
  margin: clamp(30px, 4vw, 44px) 0 4px; padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.carta__momento:first-of-type { margin-top: 18px; border-top: 0; padding-top: 0; }
.carta__grupo { margin-top: clamp(22px, 3vw, 32px); }
.carta__titulo {
  font-family: var(--display); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--oro); margin-bottom: 10px;
}
.carta__lista { list-style: none; padding: 0; margin: 0; }
.carta__plato {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--linea);
}
.carta__nombre { flex: 1 1 auto; min-width: 0; }
.carta__nombre i { display: block; font-style: normal; font-size: .84rem; margin-top: 2px; }
.carta__precio { flex: 0 0 auto; color: var(--oro); font-variant-numeric: lining-nums tabular-nums; }