/* ============================================================================
   CASA LUNA · hoja de estilo
   ----------------------------------------------------------------------------
   Dirección de arte v2 (Rodrigo, 31-ago): VERDES OSCUROS TIERRA, esquinas
   suaves, vidrio y más aire. La diferencia con Esmeralda ya no la hacen las
   esquinas: la hacen la paleta bosque/arena y la tipografía invertida
   (condensada de display + serifas de cuerpo, Esmeralda usa lo contrario).
   ========================================================================== */

:root {
  /* Los colores reales los inyecta app.js desde casa.config.js.
     Estos son el respaldo por si el config no cargara. */
  --papel: #E8E6DA;
  --papel-hueso: #DCD8C6;
  --tinta: #1E2B21;
  --tinta-suave: #5B6A5C;
  --oxido: #8A6642;
  --musgo: #4A6350;
  --linea: #1E2B21;

  --linea-fina: 1px solid color-mix(in srgb, var(--linea) 55%, transparent);
  --linea-tenue: 1px solid color-mix(in srgb, var(--linea) 20%, transparent);

  --radio: 22px;
  --radio-m: 14px;
  --radio-s: 10px;

  --ancho: 1280px;
  --margen: clamp(1.15rem, 4vw, 3.5rem);

  /* Tipografía: display condensado en caja alta + cuerpo con serifas.
     (Esmeralda hace exactamente lo contrario: serif de display + sans de cuerpo.) */
  --display: "Helvetica Neue", "HelveticaNeue-CondensedBold", "Arial Narrow",
             "Roboto Condensed", Inter, system-ui, sans-serif;
  --cuerpo: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
            "Book Antiqua", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: clamp(1.06rem, .6vw + .94rem, 1.24rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ── Piezas tipográficas reutilizables ─────────────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .92;
}

/* Etiqueta chiquita en versalitas: "01 / LA CASA", "DISPONIBLE"… */
.etiqueta {
  font-family: var(--display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
}

.tenue { color: var(--tinta-suave); }
.oxido { color: var(--oxido); }

/* Marcador de dato pendiente. Lo pinta app.js sobre cualquier «texto así». */
.pendiente {
  color: var(--oxido);
  border-bottom: 2px dotted var(--oxido);
  font-style: normal;
  background: color-mix(in srgb, var(--oxido) 8%, transparent);
  padding: 0 .12em;
}

/* ── Contenedor y reglas ───────────────────────────────────────────────── */

.marco { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.regla { border-top: var(--linea-fina); }

/* ── Botones: rectángulos con borde; el hover invierte el color ────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1rem 1.8rem;
  border: var(--linea-fina);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--tinta) 55%, transparent); }
.btn:hover, .btn:focus-visible { background: var(--tinta); color: var(--papel); }

.btn--solido { background: var(--tinta); color: var(--papel); }
.btn--solido:hover, .btn--solido:focus-visible { background: var(--oxido); border-color: var(--oxido); color: #fff; }

.btn--claro { border-color: var(--papel); color: var(--papel); }
.btn--claro:hover, .btn--claro:focus-visible { background: var(--papel); color: var(--tinta); }

.btn--chico { padding: .6rem 1rem; font-size: .7rem; }
.btn--bloque { width: 100%; padding: 1.15rem 1.6rem; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ── Banner de borrador (solo mientras falten datos) ───────────────────── */

.borrador {
  background: var(--oxido);
  color: #fff;
  font-family: var(--display);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.borrador__barra {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 0;
}
.borrador__barra button {
  margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,.55);
  color: #fff; font: inherit; padding: .3rem .8rem; cursor: pointer;
}
.borrador__barra button:hover { background: #fff; color: var(--oxido); }
.borrador__lista {
  display: none; padding: .4rem 0 1.6rem;
  font-family: var(--cuerpo); font-size: .92rem;
  letter-spacing: 0; text-transform: none; line-height: 1.5;
}
.borrador.abierto .borrador__lista { display: block; }
.borrador__intro {
  max-width: 62ch; margin-bottom: 1.4rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.3);
  font-family: var(--cuerpo); font-size: .95rem; text-transform: none; letter-spacing: 0;
}
.borrador__lista ol { list-style: none; columns: 2; column-gap: 3rem; padding: 0; }
.borrador__lista li { break-inside: avoid; display: flex; gap: .6rem; padding: .28rem 0; }
.borrador__lista code {
  font-family: var(--mono); font-size: .74em; opacity: .55; white-space: nowrap;
}
.borrador__num {
  flex: 0 0 1.9rem; font-family: var(--mono); font-size: .78em;
  opacity: .6; text-align: right;
}
.borrador__grupo {
  display: block !important; break-after: avoid;
  font-family: var(--display); font-weight: 700; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase;
  margin: 1.5rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.borrador__lista li.borrador__grupo:first-child { margin-top: 0; }
@media (max-width: 780px) { .borrador__lista ol { columns: 1; } }

/* ── Navegación ────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papel) 68%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: var(--linea-tenue);
}
.nav__fila {
  display: flex; align-items: center; gap: 1.5rem;
  height: 62px;
}
.nav__marca {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: .95rem; text-decoration: none;
  display: flex; align-items: center; gap: .6rem;
}
.nav__monograma {
  border: var(--linea-fina); border-radius: 8px;
  padding: .18rem .45rem; font-size: .72rem; letter-spacing: .06em;
}
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav__links a {
  font-family: var(--display); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover { border-bottom-color: var(--oxido); color: var(--oxido); }
.nav__acciones { display: flex; align-items: center; gap: .6rem; }
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__acciones { margin-left: auto; }
}

/* ── Portada ───────────────────────────────────────────────────────────── */

.portada { border-bottom: var(--linea-fina); }
.portada__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.portada__texto {
  padding: clamp(2.5rem, 6vw, 5rem) var(--margen) clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  border-right: var(--linea-fina);
}
.portada__lugar { color: var(--oxido); margin-bottom: 1.6rem; }
.portada__nombre {
  font-size: clamp(3.4rem, 9.5vw, 7.6rem);
  margin-bottom: .6rem;
  overflow-wrap: anywhere;
}

/* Entrada del hero: el texto sube escalonado al cargar. */
@media (prefers-reduced-motion: no-preference) {
  .portada__texto > * { opacity: 0; animation: hero-subir .75s cubic-bezier(.2, .7, .2, 1) forwards; }
  .portada__texto > *:nth-child(2) { animation-delay: .07s; }
  .portada__texto > *:nth-child(3) { animation-delay: .14s; }
  .portada__texto > *:nth-child(4) { animation-delay: .21s; }
  .portada__texto > *:nth-child(5) { animation-delay: .28s; }
  .portada__texto > *:nth-child(6) { animation-delay: .35s; }
  .portada__texto > *:nth-child(7) { animation-delay: .42s; }
}
@keyframes hero-subir {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.portada__sub {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; font-size: .82rem; color: var(--tinta-suave);
  margin-bottom: 1.8rem;
}
.portada__intro { max-width: 46ch; margin-bottom: 2rem; }

/* Ficha técnica: tarjeta suave, números grandes */
.ficha {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: var(--linea-tenue); border-radius: var(--radio-m);
  overflow: hidden; background: color-mix(in srgb, #fff 30%, transparent);
  margin-bottom: 2.2rem; max-width: 34rem;
}
.ficha div {
  border-right: var(--linea-tenue);
  padding: .95rem .8rem;
}
.ficha div:last-child { border-right: 0; }
.ficha strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1;
}
.ficha span {
  display: block; font-family: var(--display); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
  margin-top: .35rem;
}
.portada__cta { display: flex; gap: .7rem; flex-wrap: wrap; }

.portada__foto {
  position: relative; min-height: clamp(340px, 62vh, 720px);
  margin: clamp(.9rem, 2vw, 1.6rem);
  border-radius: var(--radio); overflow: hidden;
}
.portada__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.03);
}
.portada__pie {
  position: absolute; left: 1rem; bottom: 1rem;
  background: color-mix(in srgb, var(--papel) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--papel) 45%, transparent);
  border-radius: 999px;
  padding: .55rem 1.1rem; font-family: var(--display); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
}

@media (max-width: 880px) {
  .portada__rejilla { grid-template-columns: 1fr; }
  .portada__texto { border-right: 0; order: 2; }
  .portada__foto { order: 1; min-height: 46vh; }
  .ficha { grid-template-columns: repeat(2, 1fr); }
  .ficha div:nth-child(2n) { border-right: 0; }
  .ficha div:nth-child(-n+2) { border-bottom: var(--linea-tenue); }
}

/* ── Cinta de amenidades ───────────────────────────────────────────────── */

.cinta {
  background: var(--tinta); color: var(--papel);
  overflow: hidden; padding: .85rem 0; border-bottom: var(--linea-fina);
}
.cinta__riel { display: flex; gap: 2.6rem; width: max-content; animation: correr 62s linear infinite; }
.cinta__riel span {
  font-family: var(--display); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; white-space: nowrap; display: flex; gap: .5rem; align-items: center;
}
.cinta:hover .cinta__riel { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cinta__riel { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--margen); gap: 1.2rem; }
}

/* ── Cabeza de sección: número grande + título ─────────────────────────── */

.seccion { padding: clamp(3.5rem, 7vw, 6.5rem) 0; border-bottom: var(--linea-fina); }
.seccion--hueso { background: var(--papel-hueso); }
.seccion--tinta { background: var(--tinta); color: var(--papel); }
.seccion--tinta { --linea: #E8E6DA; --tinta-suave: #9FB1A0; }

.cabeza {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.5rem; align-items: start;
  padding-bottom: 2.6rem; margin-bottom: 2.6rem; border-bottom: var(--linea-fina);
}
.cabeza__num {
  font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: .8;
  color: var(--oxido);
}
.cabeza h2 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); margin-bottom: .7rem; }
.cabeza p { max-width: 52ch; color: var(--tinta-suave); font-size: 1.06em; }
@media (max-width: 640px) {
  .cabeza { grid-template-columns: 1fr; gap: .6rem; }
  .cabeza__num { font-size: 1.6rem; }
}

/* ── Espacios: bloques alternados foto / texto ─────────────────────────── */

.espacio {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(2rem, 4vw, 3.2rem) 0; border-top: var(--linea-tenue);
}
.espacio:first-of-type { border-top: 0; }
.espacio:nth-child(even) .espacio__foto { order: 2; }
.espacio__foto { border-radius: var(--radio); overflow: hidden; }
.espacio__foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.95) contrast(1.03);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.espacio__foto:hover img { transform: scale(1.035); }
.espacio__idx {
  font-family: var(--mono); font-size: .72rem; color: var(--oxido); letter-spacing: .1em;
  display: block; margin-bottom: .8rem;
}
.espacio h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1; margin-bottom: .8rem; }
.espacio p { max-width: 44ch; color: var(--tinta-suave); }
@media (max-width: 760px) {
  .espacio { grid-template-columns: 1fr; }
  .espacio:nth-child(even) .espacio__foto { order: 0; }
}

/* ── Galería: mosaico irregular ────────────────────────────────────────── */

/* Carrusel: una cinta horizontal que pasea sola. Sin huecos, con swipe,
   y el tap abre el visor con zoom. La barra de scroll se esconde. */
.galeria {
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 4px;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria:active { cursor: grabbing; }
.galeria button {
  border: 0; padding: 0; background: none; cursor: zoom-in;
  flex: 0 0 auto;
  height: clamp(230px, 34vw, 360px); aspect-ratio: 3 / 2;
  overflow: hidden; border-radius: var(--radio-m);
}
.galeria button img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.03); transition: filter .2s linear, transform .3s ease;
  -webkit-user-drag: none; user-select: none;
}
.galeria button:hover img { filter: saturate(1.05) contrast(1.05); transform: scale(1.02); }
@media (max-width: 760px) {
  .galeria button { height: clamp(190px, 52vw, 260px); }
}

/* Visor de foto */
.visor {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 29, 22, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 3vh 3vw;
}
.visor[open], .visor.abierto { display: flex; }
.visor img { max-width: 100%; max-height: 88vh; object-fit: contain; }
.visor__cerrar {
  position: absolute; top: 1rem; right: 1rem; background: none; border: 1px solid rgba(255,255,255,.5);
  color: #fff; font-family: var(--display); font-size: .72rem; letter-spacing: .16em;
  padding: .5rem .9rem; cursor: pointer; text-transform: uppercase; border-radius: 999px;
}
.visor__nav {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem;
}
.visor__nav button {
  background: none; border: 1px solid rgba(255,255,255,.5); color: #fff;
  font-family: var(--display); padding: .5rem 1rem; cursor: pointer; font-size: .8rem;
  border-radius: 999px;
}

/* ── Ubicación ─────────────────────────────────────────────────────────── */

.ubi { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.ubi__mapa {
  position: relative;
  border: var(--linea-tenue); min-height: 340px; background: var(--papel-hueso);
  border-radius: var(--radio); overflow: hidden;
}
/* El iframe va 36px más alto que su caja: el overflow hidden recorta la
   barra de links de OSM. La atribución obligatoria va en .mapa__credito. */
.ubi__mapa iframe {
  display: block; width: 100%; height: calc(100% + 36px);
  min-height: 376px; border: 0; filter: grayscale(.35) contrast(1.05);
}
.mapa__credito {
  position: absolute; left: 10px; bottom: 8px; z-index: 2;
  font-family: var(--display); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
  background: color-mix(in srgb, var(--papel) 72%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: .2rem .6rem; border-radius: 999px;
}
.ubi__mapa .sinmapa {
  display: flex; align-items: center; justify-content: center; height: 100%; min-height: 340px;
  padding: 2rem; text-align: center; color: var(--tinta-suave); font-family: var(--mono); font-size: .8rem;
}
.cerca { border-top: var(--linea-fina); }
.cerca li {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline; padding: .9rem 0; border-bottom: var(--linea-tenue);
}
.cerca b { font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .92rem; display: block; }
.cerca small { display: block; color: var(--tinta-suave); font-size: .88rem; }
.cerca .min { font-family: var(--mono); font-size: .82rem; color: var(--oxido); white-space: nowrap; }
.comollegar { margin-top: 2rem; }
.comollegar li { list-style: none; padding: .55rem 0 .55rem 1.6rem; position: relative; color: var(--tinta-suave); }
.comollegar li::before { content: "→"; position: absolute; left: 0; color: var(--oxido); }
@media (max-width: 820px) { .ubi { grid-template-columns: 1fr; } }

/* ── Reseñas ───────────────────────────────────────────────────────────── */

.resenas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.resena {
  border: var(--linea-tenue); border-radius: var(--radio-m);
  background: color-mix(in srgb, #fff 32%, transparent);
  padding: 1.6rem 1.4rem;
}
.resena__estrellas { color: var(--oxido); letter-spacing: .18em; font-size: .9rem; margin-bottom: .7rem; }
.resena blockquote { font-size: 1.02rem; line-height: 1.55; margin-bottom: 1rem; }
.resena figcaption { font-family: var(--display); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-suave); }
.resenas__vacio { padding: 2rem 0; color: var(--tinta-suave); font-family: var(--mono); font-size: .82rem; }

/* Formulario de reseña */
.dejarresena { margin-top: 2rem; }
.estrellas-input { display: flex; gap: .2rem; }
.estrellas-input button {
  background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: color-mix(in srgb, var(--tinta) 22%, transparent);
  padding: 0 .1rem; line-height: 1;
}
.estrellas-input button.on { color: var(--oxido); }

/* ── Reservar: calendario + formulario ─────────────────────────────────── */

.reservar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .reservar { grid-template-columns: 1fr; } }

.ventajas { list-style: none; margin: 1.6rem 0 2rem; }
.ventajas li { padding: .55rem 0 .55rem 1.7rem; position: relative; border-bottom: var(--linea-tenue); }
.ventajas li::before { content: "✓"; position: absolute; left: 0; color: var(--musgo); font-weight: 700; }

.paso { font-family: var(--display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oxido); margin-bottom: .8rem; display: block; }

/* Calendario */
.cal { border: var(--linea-tenue); border-radius: var(--radio-m) var(--radio-m) 0 0; overflow: hidden; background: color-mix(in srgb, #fff 26%, transparent); }
.cal__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; border-bottom: var(--linea-fina);
}
.cal__mes { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .88rem; }
.cal__nav {
  background: none; border: var(--linea-fina); width: 30px; height: 30px; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--tinta);
}
.cal__nav:hover:not([disabled]) { background: var(--tinta); color: var(--papel); }
.cal__nav[disabled] { opacity: .25; cursor: not-allowed; }
.cal__rejilla { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow {
  font-family: var(--display); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: .5rem 0; color: var(--tinta-suave); border-bottom: var(--linea-tenue);
}
.cal__dia {
  aspect-ratio: 1 / .92; border: 0; background: none; cursor: pointer;
  border-right: var(--linea-tenue); border-bottom: var(--linea-tenue);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--cuerpo); font-size: .92rem; color: var(--tinta); padding: 0;
}
.cal__dia:nth-child(7n) { border-right: 0; }
.cal__dia--vacio { cursor: default; }
.cal__dia[disabled] {
  cursor: not-allowed; color: color-mix(in srgb, var(--tinta) 28%, transparent);
  background: repeating-linear-gradient(-45deg,
    transparent 0 5px, color-mix(in srgb, var(--tinta) 9%, transparent) 5px 6px);
}
.cal__dia:not([disabled]):hover { background: color-mix(in srgb, var(--oxido) 12%, transparent); }
.cal__tarifa { font-family: var(--mono); font-size: .58rem; color: var(--tinta-suave); }
.cal__dia--entra, .cal__dia--sale { background: var(--tinta) !important; color: var(--papel); }
.cal__dia--entra .cal__tarifa, .cal__dia--sale .cal__tarifa { color: color-mix(in srgb, var(--papel) 70%, transparent); }
.cal__dia--rango { background: color-mix(in srgb, var(--oxido) 18%, transparent); }
.cal__leyenda {
  display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .7rem .9rem; border-top: var(--linea-fina);
  font-family: var(--display); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.cal__leyenda i { display: inline-block; width: 11px; height: 11px; margin-right: .4rem; vertical-align: -1px; border: var(--linea-tenue); }
.cal__leyenda .l-libre { background: var(--papel); }
.cal__leyenda .l-ocupado { background: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--tinta) 22%, transparent) 4px 5px); }
.cal__leyenda .l-tuya { background: var(--tinta); }

.cotiza { border: var(--linea-tenue); border-top: 0; border-radius: 0 0 var(--radio-m) var(--radio-m); overflow: hidden; background: color-mix(in srgb, #fff 26%, transparent); }
.cotiza__fila {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem .9rem; border-bottom: var(--linea-tenue); font-size: .92rem;
}
.cotiza__fila em { color: var(--tinta-suave); font-style: normal; font-size: .84rem; }
.cotiza__fila--desc { color: var(--musgo); }
.cotiza__fila--total {
  border-bottom: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; font-size: 1.05rem; padding: .8rem .9rem;
  background: var(--tinta); color: var(--papel);
}
.cotiza__nota { padding: .7rem .9rem; font-size: .8rem; color: var(--tinta-suave); }

/* El aviso de que las tarifas son de ejemplo. Solo sale en borrador, y tiene
   que verse más que la nota normal: es lo que evita que alguien tome el total
   por una cotización buena. */
.cotiza__nota--borrador {
  color: var(--oxido);
  background: color-mix(in srgb, var(--oxido) 8%, transparent);
  border-top: 1px dotted color-mix(in srgb, var(--oxido) 40%, transparent);
  font-weight: 500;
}
.resumen-fechas { font-family: var(--mono); font-size: .82rem; padding: .7rem 0; color: var(--oxido); }

/* Formulario */
.campo { margin-bottom: 1rem; }
.campo label, .consentimiento span {
  font-family: var(--display); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  display: block; margin-bottom: .4rem; color: var(--tinta-suave);
}
.campo input, .campo textarea, .campo select {
  width: 100%; font-family: var(--cuerpo); font-size: 1.02rem; color: var(--tinta);
  background: color-mix(in srgb, #fff 34%, transparent);
  border: var(--linea-tenue); padding: .8rem .9rem; border-radius: var(--radio-s);
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--oxido); outline-offset: -2px; }
.campo-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.campo-fila--3 { grid-template-columns: 6rem minmax(0, 1fr); }
@media (max-width: 520px) { .campo-fila, .campo-fila--3 { grid-template-columns: 1fr; } }

.consentimiento {
  display: flex; gap: .6rem; align-items: flex-start; margin: 1.2rem 0;
  font-size: .84rem; color: var(--tinta-suave); font-family: var(--cuerpo);
  letter-spacing: 0; text-transform: none;
}
.consentimiento input { margin-top: .25rem; accent-color: var(--oxido); flex: 0 0 auto; }
.consentimiento a { color: var(--oxido); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.estado { margin-top: .9rem; font-family: var(--mono); font-size: .82rem; min-height: 1.2em; }
.estado--ok { color: var(--musgo); }
.estado--err { color: var(--oxido); }

.pagos-nota {
  border: var(--linea-tenue); border-left: 4px solid var(--oxido);
  border-radius: var(--radio-s);
  padding: .9rem 1rem; margin-top: 1.2rem; font-size: .86rem; color: var(--tinta-suave);
}
.pagos-nota b { color: var(--tinta); }

/* ── Preguntas ─────────────────────────────────────────────────────────── */

.faq { border-top: var(--linea-fina); }
.faq details { border-bottom: var(--linea-fina); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; position: relative;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--oxido); font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 2.5rem 1.4rem 0; color: var(--tinta-suave); max-width: 70ch; }

/* ── Cierre ────────────────────────────────────────────────────────────── */

.cierre { position: relative; border-bottom: var(--linea-fina); }
.cierre img { width: 100%; height: clamp(360px, 58vh, 620px); object-fit: cover; filter: saturate(.9) contrast(1.05) brightness(.72); }
.cierre__caja {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #fff;
  padding: 2rem var(--margen); gap: 1.4rem;
}
.cierre__caja h2 { font-size: clamp(2rem, 6vw, 4rem); max-width: 18ch; }
.cierre__caja p { max-width: 44ch; color: rgba(255,255,255,.85); }

/* ── Pie ───────────────────────────────────────────────────────────────── */

.pie { background: var(--tinta); color: var(--papel); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.pie a { color: var(--papel); text-decoration: none; }
.pie a:hover { color: #fff; border-bottom: 1px solid var(--oxido); }
.pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.pie h3 {
  font-family: var(--display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: #9FB1A0; margin-bottom: .9rem; font-weight: 700;
}
.pie ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; font-size: .92rem; }
.pie__legal {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(232,230,218,.22);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: #9FB1A0;
}
.pie__creditos { font-size: .7rem; color: #7E8F80; margin-top: .9rem; line-height: 1.6; max-width: 80ch; }

/* ── Botón flotante de WhatsApp: rectángulo, no burbuja ────────────────── */

.wa {
  position: fixed; right: 0; bottom: 22%; z-index: 50;
  display: none; align-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--tinta) 80%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--papel);
  border: 1px solid color-mix(in srgb, var(--papel) 25%, transparent); border-right: 0;
  border-radius: var(--radio-s) 0 0 var(--radio-s);
  padding: .9rem 1rem; text-decoration: none;
  font-family: var(--display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  writing-mode: vertical-rl;
  transition: background .18s ease;
}
.wa:hover { background: var(--musgo); }
.wa svg { width: 16px; height: 16px; transform: rotate(-90deg); }
@media (max-width: 720px) {
  .wa {
    writing-mode: horizontal-tb; bottom: 0; right: 0; left: 0;
    justify-content: center; border-right: var(--linea-fina); border-bottom: 0;
    padding: .95rem 1rem;
  }
  .wa svg { transform: none; }
  body { padding-bottom: 3.2rem; }
}

/* ── Aparición al hacer scroll ─────────────────────────────────────────── */

.revela { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Utilidades ────────────────────────────────────────────────────────── */
.oculto { display: none !important; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Estatus del borrador: la pista de progreso bajo la barra ──────────── */

.borrador__track { height: 3px; background: rgba(255, 255, 255, .28); }
.borrador__fill {
  display: block; height: 100%; width: 0; background: #fff;
  transition: width .6s ease;
}

/* ── La carta de experiencias (dentro de .seccion--tinta) ──────────────────
   Nombre — punteo — precio, como carta de restaurante impresa. Es el único
   quiebre oscuro de la página: el "inserto" de la revista. */

.carta { list-style: none; margin-top: 2.4rem; max-width: 56rem; }
.carta__item {
  padding: 1.1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--papel) 16%, transparent);
}
.carta__item:first-child {
  border-top: 1px solid color-mix(in srgb, var(--papel) 16%, transparent);
}
.carta__linea { display: flex; align-items: baseline; justify-content: space-between; gap: .85rem; }
.carta__nombre {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; font-size: .95rem;
}
.carta__precio { font-size: 1.05rem; white-space: nowrap; }
.carta__precio em {
  font-style: normal; font-family: var(--display); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-suave);
  margin-left: .4rem;
}
.carta__detalle {
  margin-top: .45rem; max-width: 44rem;
  color: var(--tinta-suave); font-size: .95rem;
}
.carta__pie { margin-top: 2.1rem; max-width: 56rem; }
.carta__como a {
  color: var(--papel);
  text-decoration: underline; text-decoration-color: var(--oxido);
  text-underline-offset: 3px;
}
.carta__como a:hover { text-decoration-thickness: 2px; }
.carta__nota {
  margin-top: .6rem; font-family: var(--display); font-size: .67rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-suave);
}

@media (max-width: 640px) {
  .carta__linea { flex-wrap: wrap; gap: .3rem .85rem; }
  .carta__precio { font-size: .98rem; }
}

/* ── Capa de fundido del rotador del hero ──────────────────────────────── */
.portada__capa {
  transition-property: opacity;
  transition-timing-function: ease;
  will-change: opacity;
  pointer-events: none;
}