/* ────────────────────────────────────────────────────────────────
   Casa Nathium — sistema visual
   Ni un color ni una tipografía escritos aquí a mano: entran como
   variables CSS desde datos/cliente.json (lo hace app.js).

   Tres decisiones de forma mandan sobre todo lo demás:
   1. Retícula asimétrica: margen de anotación + columna estrecha
      + campo de aire a la derecha. Nada centrado, nada ancho.
   2. Petrona (serif) + Karla (sans).
   3. El arco del lagar, repetido en fotos, separadores y marcos.
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Mientras no hay consentimiento no se piden fuentes a Google:
     estas dos pilas tienen que aguantar el diseño ellas solas. */
  --respaldo-display: 'Hoefler Text', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --respaldo-sans: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Respiros. Largos a propósito: la casa es pequeña, la web respira despacio. */
  --aire-1: 6px;
  --aire-2: 12px;
  --aire-3: 20px;
  --aire-4: 30px;
  --aire-5: 50px;
  --aire-6: 78px;
  --aire-7: 108px;

  /* El arco, en tres tamaños. Todo lo redondeado de la web sale de aquí.
     Ojo con poner 999px aquí: cuando la suma de los radios de un lado
     supera el ancho de la caja, CSS reescala TODOS los radios por el
     mismo factor —también los verticales— y el arco sale aplastado
     hasta parecer un rectángulo. Por eso van en píxeles medidos. */
  --arco: 178px 178px 6px 6px / 126px 126px 6px 6px;
  --arco-bajo: 88px 88px 5px 5px / 64px 64px 5px 5px;
  --arco-marco: 24px 24px 5px 5px;
  /* Arco de medio punto exacto, para las piezas pequeñas: los radios de
     cada lado suman justo el 100%, así que no hay reescalado. */
  --arco-pleno: 50% 50% 0 0 / 100% 100% 0 0;

  --muelle: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans), var(--respaldo-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Evita el parpadeo mientras el JSON no ha pintado la página */
body[data-listo="no"] { opacity: 0; }
body[data-listo="si"] { opacity: 1; transition: opacity .4s ease; }

::selection { background: var(--accent-soft); color: var(--brand-deep); }

img { max-width: 100%; }

/* ── Retícula ─────────────────────────────────────────────────────
   .hoja  → el ancho de la web (1180). Nunca ocupa los 1440.
   .reja  → tres pistas: margen de anotación · texto · aire.
   En móvil se apila y el margen pasa a ser una línea sobre el texto.
   ──────────────────────────────────────────────────────────────── */

.hoja {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
}

.reja { display: grid; grid-template-columns: minmax(0, 1fr); }

.col-margen, .col-texto, .col-ancho, .col-todo { grid-column: 1; min-width: 0; }

@media (min-width: 940px) {
  .reja { grid-template-columns: 168px minmax(0, 624px) minmax(0, 1fr); column-gap: 44px; }
  .col-margen { grid-column: 1; }
  .col-texto  { grid-column: 2; }
  .col-ancho  { grid-column: 2 / -1; }   /* solo las fotos se desbordan */
  .col-todo   { grid-column: 1 / -1; }
}

/* El hero es la única excepción a la retícula: a partir de 1120 la foto
   se va a la tercera pista, en vertical y rematada en arco, y el campo
   de aire de la derecha deja de estar vacío justo donde más se nota. */
.foto-hero { aspect-ratio: 3 / 2; }
@media (min-width: 1120px) {
  .reja-hero { grid-template-columns: 168px minmax(0, 1fr) 344px; }
  .reja-hero .col-hero-foto { grid-column: 3; grid-row: 1; margin-top: 0; align-self: start; }
  .reja-hero .col-texto { grid-column: 2; }
  .foto-hero { aspect-ratio: 3 / 4; }
}

/* El margen de anotación: pequeño, alineado arriba, nunca en negrita */
.margen-nota {
  font-size: 11px; line-height: 1.6; color: var(--ink-soft);
  letter-spacing: 0.02em;
}
@media (max-width: 939px) {
  .margen-nota { margin-bottom: var(--aire-3); }
}

/* La cabecera es pegajosa: sin esto, un ancla deja el titular debajo de ella */
section[id] { scroll-margin-top: 96px; }

.seccion { padding-top: var(--aire-6); padding-bottom: var(--aire-6); }
@media (min-width: 940px) {
  .seccion { padding-top: var(--aire-7); padding-bottom: var(--aire-7); }
}

/* ── Tipografía ───────────────────────────────────────────────── */

.display { font-family: var(--font-display), var(--respaldo-display); font-weight: 400; }
.display-apretado { letter-spacing: -0.03em; line-height: 1.02; }
.cursiva { font-style: italic; font-weight: 300; }

/* Georgia y Palatino vienen más anchas que Petrona: al mismo tracking
   apretado las letras se tocan. Un pelo de aire mientras no haya webfont. */
html[data-fuentes="sistema"] .display-apretado { letter-spacing: -0.014em; line-height: 1.08; }

.t-hero    { font-size: clamp(38px, 5.4vw, 66px); }
.t-seccion { font-size: clamp(28px, 3.3vw, 44px); }
.t-bloque  { font-size: clamp(21px, 2.1vw, 28px); }

.ceja {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em;
  font-weight: 600; color: var(--ink-soft);
}
.ceja-clara { color: rgb(var(--paper-rgb) / 0.5); }

.cuerpo { font-size: 16px; line-height: 1.78; color: var(--ink-soft); }
.cuerpo-grande { font-size: 18.5px; line-height: 1.65; color: var(--ink); }

/* Número editorial: cursiva serif, en el margen de anotación */
.num {
  font-family: var(--font-display), var(--respaldo-display);
  font-style: italic; font-weight: 300; letter-spacing: -0.02em;
  color: var(--accent);
}

/* Cursiva serif como acento dentro de un párrafo */
.ac {
  font-family: var(--font-display), var(--respaldo-display);
  font-style: italic; font-size: 1.1em; letter-spacing: -0.005em;
  color: var(--brand);
}

/* ── El arco ──────────────────────────────────────────────────────
   La forma de la casa. Aparece como corte de foto, como separador
   de sección y como marco de las cajas importantes.
   ──────────────────────────────────────────────────────────────── */

.arco      { border-radius: var(--arco); overflow: hidden; }
.arco-bajo { border-radius: var(--arco-bajo); overflow: hidden; }

/* Separador: un arco de medio punto que sube desde el margen izquierdo y
   una raya fina que se va apagando hacia la derecha. Abre cada sección. */
.abre { position: relative; height: 60px; margin-bottom: var(--aire-4); }
.abre::before {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 116px; height: 58px;
  border: 1px solid rgb(var(--ink-rgb) / 0.26);
  border-bottom: 0;
  border-radius: var(--arco-pleno);
}
.abre::after {
  content: ''; position: absolute; left: 116px; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgb(var(--ink-rgb) / 0.24), rgb(var(--ink-rgb) / 0) 74%);
}
.abre-claro::before { border-color: rgb(var(--paper-rgb) / 0.32); }
.abre-claro::after  { background: linear-gradient(90deg, rgb(var(--paper-rgb) / 0.3), rgb(var(--paper-rgb) / 0) 74%); }

@media (max-width: 939px) {
  .abre { height: 44px; margin-bottom: var(--aire-3); }
  .abre::before { width: 86px; height: 43px; }
  .abre::after { left: 86px; }
}

/* ── Fotos ────────────────────────────────────────────────────────
   Las fotos del cliente miden 1000 px de ancho. La columna más
   ancha de la web es de 868 px, así que ninguna se estira nunca.
   ──────────────────────────────────────────────────────────────── */

.foto { position: relative; overflow: hidden; background: var(--paper-2); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Velo cálido: capas tintadas con la tierra, nunca negro puro */
.velo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--brand-deep-rgb) / 0.04) 34%, rgb(var(--brand-deep-rgb) / 0.58) 100%),
    radial-gradient(120% 80% at 50% 0%, rgb(var(--accent-soft-rgb) / 0.10), transparent 62%);
}
.velo-fuerte::after {
  background:
    linear-gradient(180deg, rgb(var(--brand-deep-rgb) / 0.34) 0%, rgb(var(--brand-deep-rgb) / 0.28) 44%, rgb(var(--brand-deep-rgb) / 0.80) 100%);
}

.pie-foto {
  margin-top: var(--aire-2);
  font-size: 11.5px; line-height: 1.6; color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.pie-foto-claro { color: rgb(var(--paper-rgb) / 0.5); }

/* ── Texturas ─────────────────────────────────────────────────── */

.grano::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.11 0 0 0 0 0.07 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='0.62'/></svg>");
  opacity: .24; mix-blend-mode: multiply;
}
.grano-claro::before { mix-blend-mode: soft-light; opacity: .5; }

/* ── Profundidad: base → apoyado → suelto ─────────────────────────
   Sombras en capas, siempre tintadas con la madera vieja.
   ──────────────────────────────────────────────────────────────── */

.apoyado {
  box-shadow:
    0 1px 2px rgb(var(--brand-deep-rgb) / 0.07),
    0 10px 22px -12px rgb(var(--brand-deep-rgb) / 0.20);
}
.suelto {
  box-shadow:
    0 1px 2px rgb(var(--brand-deep-rgb) / 0.09),
    0 14px 30px -14px rgb(var(--brand-deep-rgb) / 0.26),
    0 40px 70px -34px rgb(var(--brand-deep-rgb) / 0.34);
}

.filo       { border-color: rgb(var(--ink-rgb) / 0.15); }
.filo-claro { border-color: rgb(var(--paper-rgb) / 0.18); }

/* ── Enlaces y botones ────────────────────────────────────────────
   Los botones no son píldoras: llevan el arco arriba y el filo abajo.
   ──────────────────────────────────────────────────────────────── */

.sub { position: relative; display: inline-block; }
.sub::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(0);
  transition: transform .5s var(--muelle);
}
.sub:hover::after { transform-origin: left; transform: scaleX(1); }
.sub:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px;
  border-radius: var(--arco-marco);
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; border: 1px solid transparent; text-align: center;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn .punta { display: inline-flex; transition: transform .38s var(--muelle); }

.btn-tierra {
  background: var(--brand); color: var(--paper);
  transition: background .3s var(--muelle), transform .3s var(--muelle);
}
.btn-tierra:hover { background: var(--brand-deep); transform: translateY(-2px); }
.btn-tierra:hover .punta { transform: translateX(4px); }
.btn-tierra:active { transform: translateY(0); }

.btn-olivo {
  background: var(--accent); color: var(--paper);
  transition: background .3s var(--muelle), transform .3s var(--muelle);
}
.btn-olivo:hover { background: var(--brand-deep); transform: translateY(-2px); }
.btn-olivo:hover .punta { transform: translateX(4px); }
.btn-olivo:active { transform: translateY(0); }

.btn-hueco {
  border-color: rgb(var(--ink-rgb) / 0.28); color: var(--ink);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--muelle);
}
.btn-hueco:hover { background: rgb(var(--ink-rgb) / 0.05); border-color: rgb(var(--ink-rgb) / 0.55); transform: translateY(-2px); }

.btn-hueco-claro {
  border-color: rgb(var(--paper-rgb) / 0.34); color: var(--paper);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--muelle);
}
.btn-hueco-claro:hover { background: rgb(var(--paper-rgb) / 0.1); border-color: rgb(var(--paper-rgb) / 0.66); transform: translateY(-2px); }

.btn-cal {
  background: var(--paper); color: var(--brand-deep);
  transition: background .3s ease, transform .3s var(--muelle);
}
.btn-cal:hover { background: var(--paper-2); transform: translateY(-2px); }
.btn-cal:hover .punta { transform: translateX(4px); }

/* ── Precio ───────────────────────────────────────────────────────
   La regla del encargo: el precio se calcula y se ve. Nunca «desde».
   ──────────────────────────────────────────────────────────────── */

.precio-caja {
  border: 1px solid rgb(var(--ink-rgb) / 0.16);
  border-radius: var(--arco-marco);
  background: var(--paper);
  padding: 22px 24px 24px;
}
.precio-caja-oscura {
  border-color: rgb(var(--paper-rgb) / 0.2);
  background: rgb(var(--paper-rgb) / 0.06);
}

.precio-cifra {
  font-family: var(--font-display), var(--respaldo-display);
  font-size: clamp(42px, 5vw, 60px); line-height: 0.94; letter-spacing: -0.035em;
  color: var(--brand);
}
.precio-cifra-clara { color: var(--accent-soft); }
.precio-unidad { font-family: var(--font-sans), var(--respaldo-sans); font-size: 15px; letter-spacing: 0; }

/* Contador de personas y noches: dos botones y una cifra. Sin selects. */
.contador {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid rgb(var(--ink-rgb) / 0.16);
  border-radius: 14px 14px 5px 5px;
  padding: 9px 10px 9px 14px;
}
.contador-oscuro { border-color: rgb(var(--paper-rgb) / 0.24); }
.contador-etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; color: var(--ink-soft); }
.contador-oscuro .contador-etiqueta { color: rgb(var(--paper-rgb) / 0.55); }
.contador-valor {
  font-family: var(--font-display), var(--respaldo-display);
  font-size: 25px; line-height: 1; letter-spacing: -0.02em; min-width: 26px; text-align: center;
  color: var(--ink);
}
.contador-oscuro .contador-valor { color: var(--paper); }

.paso {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgb(var(--ink-rgb) / 0.22); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  font: inherit; line-height: 0;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--muelle);
}
.paso:hover:not(:disabled) { background: rgb(var(--ink-rgb) / 0.06); border-color: rgb(var(--ink-rgb) / 0.5); transform: scale(1.06); }
.paso:active:not(:disabled) { transform: scale(0.94); }
.paso:disabled { opacity: .3; cursor: not-allowed; }
.paso:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contador-oscuro .paso { border-color: rgb(var(--paper-rgb) / 0.3); color: var(--paper); }
.contador-oscuro .paso:hover:not(:disabled) { background: rgb(var(--paper-rgb) / 0.12); border-color: rgb(var(--paper-rgb) / 0.6); }

/* Tabla de tarifas: las cuatro cuentas, sin letra pequeña */
.tarifas { width: 100%; border-collapse: collapse; text-align: left; }
.tarifas th, .tarifas td { padding: 13px 14px 13px 0; vertical-align: baseline; }
.tarifas thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-soft); border-bottom: 1px solid rgb(var(--ink-rgb) / 0.24);
}
.tarifas tbody tr { border-bottom: 1px solid rgb(var(--ink-rgb) / 0.11); }
.tarifas tbody th { font-weight: 400; font-size: 14.5px; color: var(--ink); }
.tarifas tbody td { font-size: 14.5px; color: var(--ink-soft); }
.tarifas tbody td:last-child {
  font-family: var(--font-display), var(--respaldo-display);
  font-size: 19px; letter-spacing: -0.02em; color: var(--brand); text-align: right; padding-right: 0;
}
.tarifas tbody tr.destacada { background: rgb(var(--accent-soft-rgb) / 0.16); }
.tarifas tbody tr.destacada th, .tarifas tbody tr.destacada td { color: var(--ink); }
.tarifas tbody tr.destacada th:first-child, .tarifas tbody tr.destacada td:first-child { padding-left: 12px; }
.tarifas tbody tr.destacada td:last-child { padding-right: 12px; color: var(--brand); }

/* ── Cifras de la casa (franja bajo el hero) ──────────────────── */

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cifra {
  padding: 26px 20px 28px 0;
  border-top: 1px solid rgb(var(--ink-rgb) / 0.15);
}
.cifra-valor {
  font-family: var(--font-display), var(--respaldo-display);
  font-size: 32px; line-height: 1; letter-spacing: -0.03em; color: var(--brand);
}
.cifra-clave { margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }

/* ── Motor de reservas ────────────────────────────────────────────
   Calendario de dos meses, contador de huéspedes, resumen que se
   suma solo y tres pasos. Funciona entero en el navegador: no hay
   librerías, ni peticiones, ni almacenamiento.

   Lo primero que se rompe en móvil es el calendario. Aquí las
   celdas se miden para el dedo: a 375 px la hoja deja 331 px de
   ancho, entre siete columnas salen 47 px por celda, por encima
   del mínimo de 44 que pide un objetivo táctil.
   ──────────────────────────────────────────────────────────────── */

.motor {
  border: 1px solid rgb(var(--ink-rgb) / 0.14);
  border-radius: var(--arco-marco);
  background: var(--paper);
  overflow: hidden;
  scroll-margin-top: 100px;   /* la cabecera es pegajosa */
}

/* El rótulo de muestra: sobrio, una línea, con el arco de viñeta.
   Ni recuadro punteado ni cartel de obra. */
.motor-rotulo {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 13px 20px;
  background: rgb(var(--sand-rgb) / 0.5);
  border-bottom: 1px solid rgb(var(--ink-rgb) / 0.1);
  font-size: 11.5px; line-height: 1.55; letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.motor-rotulo-arco {
  width: 10px; height: 6px; flex-shrink: 0; margin-top: 6px;
  background: var(--accent); opacity: .75;
  border-radius: var(--arco-pleno);
}

.motor-cuerpo { padding: 22px 20px 24px; }
@media (min-width: 720px) { .motor-cuerpo { padding: 28px 26px 30px; } }

.motor-panel { display: grid; gap: 26px; }
@media (min-width: 1024px) {
  .motor-panel { grid-template-columns: minmax(0, 1fr) 294px; gap: 30px; align-items: start; }
}

/* ── Pasos ────────────────────────────────────────────────────── */

.pasos { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: var(--aire-4); }
.paso-item { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: rgb(var(--ink-rgb) / 0.4); }
.paso-item .paso-num {
  font-family: var(--font-display), var(--respaldo-display);
  font-style: italic; font-size: 13px;
}
.paso-item[data-estado="activo"] { color: var(--brand); font-weight: 600; }
.paso-item[data-estado="hecho"] { color: var(--accent); }
@media (min-width: 940px) {
  .pasos { flex-direction: column; gap: 13px; margin-bottom: 0; }
}

/* ── Calendario ───────────────────────────────────────────────── */

.cal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

.cal-flecha {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgb(var(--ink-rgb) / 0.2); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: transform .25s var(--muelle);
}
.cal-flecha:hover:not(:disabled) { background: rgb(var(--ink-rgb) / 0.05); transform: scale(1.06); }
.cal-flecha:active:not(:disabled) { transform: scale(0.94); }
.cal-flecha:disabled { opacity: .28; cursor: not-allowed; }
.cal-flecha:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.meses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 560px) { .meses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

.mes-nombre {
  font-family: var(--font-display), var(--respaldo-display);
  font-size: 17px; letter-spacing: -0.02em; color: var(--ink);
  text-align: center; margin-bottom: 12px;
}
/* Intl devuelve «agosto de 2026» en minúscula. Un text-transform:
   capitalize pondría también «De» en mayúscula; solo la inicial. */
.mes-nombre::first-letter { text-transform: uppercase; }

.mes-tabla { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mes-tabla th {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  color: rgb(var(--ink-rgb) / 0.42); padding-bottom: 8px;
}
.mes-tabla td { padding: 1px 0; }

.dia {
  width: 100%; aspect-ratio: 1 / 1; min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
  border-radius: 12px 12px 4px 4px;   /* el arco, también en cada día */
  transition: transform .2s var(--muelle);
}
@media (max-width: 559px) { .dia { font-size: 15px; min-height: 44px; } }

.dia:hover:not(:disabled) { background: rgb(var(--accent-soft-rgb) / 0.3); transform: scale(1.06); }
.dia:active:not(:disabled) { transform: scale(0.94); }
.dia:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Ocupada: gris, sin pulsar, y con una raya sobre el número, porque
   el color solo no basta para quien no lo distingue. */
.dia[data-estado="ocupada"] {
  color: rgb(var(--ink-rgb) / 0.3); cursor: not-allowed; position: relative;
}
.dia[data-estado="ocupada"]::after {
  content: ''; position: absolute; left: 26%; right: 26%; top: 50%;
  height: 1px; background: rgb(var(--ink-rgb) / 0.32);
}
.dia[data-estado="pasada"] { color: rgb(var(--ink-rgb) / 0.2); cursor: not-allowed; }

/* La estancia elegida: banda continua en las celdas y arco en los extremos */
td[data-rango="si"] { background: rgb(var(--accent-soft-rgb) / 0.34); }
td[data-rango="inicio"] { background: linear-gradient(90deg, transparent 50%, rgb(var(--accent-soft-rgb) / 0.34) 50%); }
td[data-rango="fin"]    { background: linear-gradient(90deg, rgb(var(--accent-soft-rgb) / 0.34) 50%, transparent 50%); }
td[data-rango="unico"]  { background: transparent; }

.dia[data-elegida="si"] { background: var(--brand); color: var(--paper); font-weight: 600; }
.dia[data-elegida="si"]:hover { background: var(--brand-deep); }

.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 11.5px; color: var(--ink-soft); }
.leyenda-item { display: inline-flex; align-items: center; gap: 7px; }
.leyenda-muestra {
  width: 15px; height: 15px; flex-shrink: 0; border-radius: 6px 6px 2px 2px;
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
}
.leyenda-muestra[data-tipo="libre"] { background: var(--paper); }
.leyenda-muestra[data-tipo="ocupada"] { background: rgb(var(--ink-rgb) / 0.1); position: relative; }
.leyenda-muestra[data-tipo="ocupada"]::after {
  content: ''; position: absolute; left: 20%; right: 20%; top: 50%; height: 1px;
  background: rgb(var(--ink-rgb) / 0.35);
}
.leyenda-muestra[data-tipo="elegida"] { background: var(--brand); border-color: var(--brand); }

/* ── Resumen ──────────────────────────────────────────────────── */

.resumen {
  background: var(--paper-2);
  border-radius: var(--arco-marco);
  padding: 20px 20px 22px;
}
.resumen-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 13.5px;
}
.resumen-fila + .resumen-fila { border-top: 1px solid rgb(var(--ink-rgb) / 0.1); }
.resumen-fila dt { color: var(--ink-soft); }
.resumen-fila dd { color: var(--ink); text-align: right; }
.resumen-detalle { display: block; font-size: 11.5px; color: rgb(var(--ink-rgb) / 0.45); margin-top: 2px; }

.resumen-total {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid rgb(var(--ink-rgb) / 0.22);
}
.resumen-total-cifra {
  font-family: var(--font-display), var(--respaldo-display);
  font-size: 40px; line-height: 0.95; letter-spacing: -0.035em; color: var(--brand);
}
.resumen-vacio { font-size: 13px; line-height: 1.65; color: var(--ink-soft); padding: 4px 0 2px; }

.motor-aviso {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 11px 13px;
  border-left: 2px solid var(--accent);
  background: rgb(var(--accent-rgb) / 0.08);
  font-size: 12.5px; line-height: 1.6; color: var(--ink);
}
.motor-aviso[hidden] { display: none; }

/* ── Formulario de datos ──────────────────────────────────────── */

.campo-fila + .campo-fila { margin-top: 16px; }
.campo-etiqueta { display: block; margin-bottom: 7px; }
.campo-error { margin-top: 6px; font-size: 12px; color: var(--brand); }
.campo-error[hidden] { display: none; }
/* Un campo con error sigue leyéndose como error aunque tenga el foco:
   si no, el borde de foco (olivo) tapa el borde de error (tierra) justo
   en el campo al que se acaba de mandar el foco para corregirlo. */
.campo-correo[aria-invalid="true"],
.campo-correo[aria-invalid="true"]:focus {
  border-color: var(--brand);
  background: rgb(var(--brand-rgb) / 0.05);
}

.motor-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.motor-botones .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .motor-botones .btn { flex: 0 0 auto; } }

/* ── Confirmación ─────────────────────────────────────────────── */

.motor-fin-titulo {
  font-family: var(--font-display), var(--respaldo-display);
  font-size: clamp(23px, 3vw, 31px); letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink); margin-bottom: 18px;
}
.motor-fin-nota {
  margin-top: 22px; padding: 18px 20px;
  background: rgb(var(--sand-rgb) / 0.45);
  border-radius: 16px 16px 5px 5px;
  font-size: 13.5px; line-height: 1.75; color: var(--ink-soft);
}
.motor-fin-nota strong { color: var(--ink); font-weight: 600; }

.motor-paso[hidden] { display: none; }

/* ── Boletín ──────────────────────────────────────────────────── */

.campo-correo {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgb(var(--ink-rgb) / 0.22);
  border-radius: 14px 14px 5px 5px;
  background: var(--paper);
  font-family: inherit; font-size: 15px; color: var(--ink);
  transition: border-color .25s ease, background .25s ease;
}
.campo-correo::placeholder { color: rgb(var(--ink-rgb) / 0.42); }
.campo-correo:focus { outline: none; border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.04); }

.boletin-aviso {
  margin-top: 14px; font-size: 12.5px; line-height: 1.65; color: var(--ink-soft);
}
.boletin-respuesta {
  margin-top: 14px; padding: 13px 15px;
  border-left: 2px solid var(--accent);
  background: rgb(var(--accent-rgb) / 0.07);
  font-size: 13px; line-height: 1.65; color: var(--ink);
}
.boletin-respuesta[hidden] { display: none; }

/* ── Anfitriones ──────────────────────────────────────────────────
   Dos fichas de persona, no un «sobre nosotros». El oficio va justo
   bajo el nombre, en olivo, para que se lea antes que el texto.
   ──────────────────────────────────────────────────────────────── */

/* Un marcador dentro del nombre heredaría los 27 px del titular y se
   partiría por la mitad a 375. Se fija a cuerpo de dato, no de título. */
.anfitrion h3 .pendiente { font-size: 12.5px; letter-spacing: 0.02em; }

.anfitrion-papel {
  margin-top: 9px;
  font-size: 12px; line-height: 1.55; letter-spacing: 0.02em;
  color: var(--accent);
}
.anfitrion-texto {
  margin-top: 15px;
  font-size: 14.5px; line-height: 1.8; color: var(--ink-soft);
}
.anfitrion-texto + .anfitrion-texto { margin-top: 12px; }

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

.estrellas { display: inline-flex; gap: 2px; color: var(--accent-soft); }
.estrellas svg { width: 13px; height: 13px; }

.resena {
  border-top: 1px solid rgb(var(--ink-rgb) / 0.15);
  padding-top: 22px;
}
.sin-resenas {
  border: 1px dashed rgb(var(--accent-rgb) / 0.45);
  border-radius: var(--arco-marco);
  background: rgb(var(--accent-rgb) / 0.05);
  padding: 28px 26px;
}

/* ── Marcadores PENDIENTE_ ────────────────────────────────────────
   Un dato que la propietaria aún no ha dado no puede pasar por bueno:
   monoespaciada, en el olivo y con subrayado punteado. Imposible
   confundirlo con un teléfono o un número de registro de verdad.
   ──────────────────────────────────────────────────────────────── */

.pendiente {
  font-family: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  font-size: 0.86em; letter-spacing: 0.02em; font-style: normal; font-weight: 500;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.1);
  border-bottom: 1px dotted rgb(var(--accent-rgb) / 0.6);
  padding: 0.1em 0.36em; border-radius: 3px;
  overflow-wrap: anywhere;
}
/* Sobre la madera vieja el olivo se apaga: se usa la luz de tarde */
.sobre-oscuro .pendiente, footer .pendiente {
  color: var(--accent-soft);
  background: rgb(var(--accent-soft-rgb) / 0.16);
  border-bottom-color: rgb(var(--accent-soft-rgb) / 0.55);
}

/* ── Selector de idioma ───────────────────────────────────────── */

.idiomas { position: relative; }
.idiomas-boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 12px; border-radius: 12px 12px 4px 4px;
  font-family: inherit; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); background: transparent; border: 1px solid rgb(var(--ink-rgb) / 0.2);
  cursor: pointer; white-space: nowrap;
  transition: background .25s ease, border-color .25s ease;
}
.idiomas-boton:hover { background: rgb(var(--ink-rgb) / 0.05); border-color: rgb(var(--ink-rgb) / 0.45); }
.idiomas-boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.idiomas-punta { display: inline-flex; transition: transform .3s var(--muelle); }
.idiomas-boton[aria-expanded="true"] .idiomas-punta { transform: rotate(180deg); }

.idiomas-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 150px; padding: 6px; list-style: none;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / 0.14);
  border-radius: 16px 16px 6px 6px;
  box-shadow:
    0 1px 2px rgb(var(--brand-deep-rgb) / 0.1),
    0 16px 34px -12px rgb(var(--brand-deep-rgb) / 0.3);
}
.idiomas-menu[hidden] { display: none; }
.idiomas-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink); transition: background .2s ease;
}
.idiomas-menu a:hover { background: rgb(var(--ink-rgb) / 0.05); }
.idiomas-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.idiomas-menu a.actual { color: var(--brand); font-weight: 600; }
.idiomas-menu a.actual::after { content: ' ·'; color: var(--accent); }

/* ── Banner de cookies ────────────────────────────────────────── */

.cookies-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 13px; pointer-events: none; }
.cookies-banner[hidden] { display: none; }

.cookies-caja {
  pointer-events: auto;
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / 0.14);
  border-radius: var(--arco-marco);
  animation: sube-banner .5s var(--muelle) both;
}
@keyframes sube-banner {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookies-titulo { font-family: var(--font-display), var(--respaldo-display); font-size: 19px; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin-bottom: 8px; }
.cookies-texto p { font-size: 13px; line-height: 1.65; color: var(--ink-soft); max-width: 68ch; }
.cookies-enlace { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--brand); }
.cookies-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies-botones .btn { padding: 12px 20px; font-size: 13.5px; }

@media (max-width: 520px) {
  .cookies-banner { padding: 9px; }
  .cookies-caja { padding: 18px 18px 20px; gap: 15px; }
  .cookies-titulo { font-size: 17px; }
  .cookies-texto p { font-size: 12.5px; }
  .cookies-botones .btn { flex: 1 1 auto; padding: 11px 15px; font-size: 13px; }
}
@media (min-width: 880px) {
  .cookies-banner { padding: 20px; }
  .cookies-caja { flex-direction: row; align-items: center; justify-content: space-between; gap: 34px; padding: 24px 28px; }
  .cookies-botones { flex-shrink: 0; }
}

/* ── Botón que parece un enlace (configurar cookies, en el pie) ── */
.boton-texto {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}

/* ── Páginas legales ──────────────────────────────────────────── */

.t-legal { font-size: clamp(30px, 4vw, 52px); }

.aviso-pendiente {
  border-left: 2px solid var(--accent);
  background: rgb(var(--accent-rgb) / 0.06);
  padding: 16px 20px; border-radius: 0 6px 6px 0;
  font-size: 13.5px; line-height: 1.75; color: var(--ink-soft);
  margin-bottom: var(--aire-5);
}

.apartado { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.11); scroll-margin-top: 104px; }
.apartado:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.p-legal { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.p-legal + .p-legal { margin-top: 15px; }

.lista-legal { margin-top: 17px; }
.lista-legal li { position: relative; padding-left: 21px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.lista-legal li + li { margin-top: 11px; }
.lista-legal li::before {
  content: ''; position: absolute; left: 1px; top: 9px;
  width: 10px; height: 6px; background: var(--accent);
  border-radius: var(--arco-pleno);   /* el arco, hasta en las viñetas */
}

.datos-legales { margin-top: 19px; }
.datos-fila {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 18px;
  padding: 11px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.11);
}
.datos-fila dt { flex: 0 0 220px; font-size: 12.5px; color: var(--ink-soft); }
.datos-fila dd { flex: 1 1 190px; font-size: 14.5px; color: var(--ink); }
@media (max-width: 560px) { .datos-fila dt { flex-basis: 100%; } }

.tabla-caja { margin-top: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-legal { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; }
.tabla-legal th, .tabla-legal td { padding: 13px 16px 13px 0; vertical-align: top; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.11); }
.tabla-legal thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
  color: var(--ink-soft); border-bottom-color: rgb(var(--ink-rgb) / 0.24);
}
.tabla-legal tbody th, .tabla-legal tbody td { font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); font-weight: 400; }
.tabla-legal tbody code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; color: var(--brand); }

.indice li + li { margin-top: 10px; }
.indice a { display: flex; gap: 11px; align-items: baseline; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.indice a:hover { color: var(--ink); }
.indice a::after { display: none; }   /* el subrayado animado ensucia una lista de trece líneas */
.indice-num { font-family: var(--font-display), var(--respaldo-display); font-style: italic; font-size: 12.5px; color: var(--accent); flex-shrink: 0; min-width: 17px; }

/* ── Aviso del pie ────────────────────────────────────────────── */

.aviso-pie {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgb(var(--paper-rgb) / 0.09);
  font-size: 11.5px; line-height: 1.75;
  color: rgb(var(--paper-rgb) / 0.42);
}
.aviso-pie-arco {
  width: 10px; height: 6px; flex-shrink: 0; margin-top: 8px;
  background: var(--accent-soft); opacity: .8;
  border-radius: var(--arco-pleno);
}

/* ── Entrada suave ────────────────────────────────────────────── */

.sube { opacity: 0; transform: translateY(12px); animation: sube-el .85s var(--muelle) forwards; }
@keyframes sube-el { to { opacity: 1; transform: translateY(0); } }

/* ── Ajustes finos ────────────────────────────────────────────── */

@media (max-width: 899px) { .oculta-md { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .sube { opacity: 1; transform: none; }
}