/* ==========================================================================
   Terraza Casa Victoria — hoja de estilos
   Paleta: la luz real de la casa (muro blanco, madera, agua turquesa).
   Tipos: Instrument Serif (títulos) + Manrope (texto e interfaz).
   Escala tipográfica fija: 14 / 16 / 18 / 22 / 28 / 40 / 64.
   ========================================================================== */

/* --- Tipografías alojadas en la propia web (carpeta fonts/) ----------------
   Mismos archivos que sirve Google Fonts (subconjunto latino, que incluye
   acentos, ñ, ¿ y ¡), pero desde nuestro dominio: la página no espera a otro
   servidor para pintarse y no se envía la IP del visitante a Google.
   Licencia de ambas familias: SIL Open Font License (permite alojarlas). */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope es una fuente variable: un solo archivo cubre los pesos 400 a 700 */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/manrope-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --marfil: #FBFAF6;          /* fondo de página */
  --blanco: #FFFFFF;
  --tinta: #1E2A2E;           /* texto */
  --piedra: #626B70;          /* texto secundario — 5.2:1 sobre marfil */
  --alberca: #128C7E;         /* acento decorativo: anillos, iconos, bordes */
  --alberca-tinta: #0F7A6F;   /* acento con texto: fondo del CTA y enlaces — 5.2:1 con blanco */
  --alberca-claro: #E3F3F1;   /* tintes */
  --sol: #D98E2B;             /* días ocupados y pequeños realces */
  --pendiente-fondo: #FFF3C4; /* banner de vista previa y borrador del aviso */
  --pendiente-texto: #7A4A0C; /* 6.7:1 sobre ese fondo */
  --linea: rgba(30, 42, 46, 0.12);

  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-28: 1.75rem;
  --t-40: 2.5rem;
  --t-64: 4rem;

  --radio: 22px;
  --radio-chico: 12px;
  --ancho: 1200px;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --seccion: clamp(4rem, 9vw, 7.5rem);
  --sombra: 0 20px 50px -30px rgba(30, 42, 46, 0.35);
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Al saltar a una sección, el título no queda debajo de la barra fija
     (aunque el teléfono tenga el texto agrandado y la barra ocupe más) */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

/* El min(…, Nvw) solo actúa cuando el sistema agranda el texto (ajuste de
   accesibilidad del teléfono): así el título nunca se sale de la pantalla. */
h1 { font-size: min(clamp(2.75rem, 1.2rem + 5.2vw, 5.5rem), 13vw); }
h2 { font-size: min(var(--t-40), 11vw); }
h3 { font-size: var(--t-28); }

@media (min-width: 1100px) { h2 { font-size: var(--t-64); } }
@media (max-width: 480px)  { h2 { font-size: min(var(--t-28), 9vw); } }

/* El acento (cursiva en color) solo en el h1 y en el título del calendario */
h1 em, h2 em { font-style: italic; color: inherit; }
h1 em, #titulo-disponibilidad em { color: var(--alberca-tinta); }

p { margin: 0 0 1rem; }

a { color: var(--alberca-tinta); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--alberca);
  outline-offset: 3px;
  border-radius: 4px;
}

button { font: inherit; color: inherit; }

/* Hoja de iconos SVG: fuera de pantalla, no display:none (Safari) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.contenedor {
  width: min(100% - 2 * var(--margen), var(--ancho));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 100;
  background: var(--tinta);
  color: var(--marfil);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radio-chico) var(--radio-chico);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* --- Banner de revisión (se quita al publicar) ---------------------------- */

.banner-preview {
  background: var(--pendiente-fondo);
  color: var(--pendiente-texto);
  font-size: var(--t-14);
  font-weight: 600;
  text-align: center;
  padding: 0.5rem var(--margen);
  border-bottom: 1px solid rgba(122, 74, 12, 0.18);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--t-16);
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-primario {
  background: var(--alberca-tinta);
  color: var(--blanco);
}
.btn-primario:hover { background: #0C6B61; }
.btn-primario:active { transform: translateY(1px); }

.btn-secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--piedra);
}
.btn-secundario:hover { border-color: var(--tinta); background: var(--blanco); }

/* --- Navegación ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 246, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}

.nav-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tinta);
  text-decoration: none;
  font-family: var(--serif);
  font-size: var(--t-22);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marca svg { width: 30px; height: 30px; color: var(--alberca); flex: none; }
.marca b { font-weight: 400; }
.marca i { font-style: italic; color: var(--alberca-tinta); }

.nav-enlaces {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.nav-enlaces a {
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-16);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.nav-enlaces a:hover { border-color: var(--alberca); }

.nav .btn { padding: 0.65rem 1.1rem; }
.nav-cta-corto { display: none; }

/* Con cinco enlaces, entre 901 y 1100 px se aprietan (14 px y botón corto)
   para que la barra no se parta en dos líneas */
@media (max-width: 1100px) {
  .nav-enlaces { gap: 1rem; }
  .nav-enlaces a { font-size: var(--t-14); }
  .nav-cta-largo { display: none; }
  .nav-cta-corto { display: inline; }
}
@media (max-width: 900px) {
  .nav-enlaces { display: none; }
  .nav-enlaces-simple { display: flex; } /* un solo enlace (aviso de privacidad) */
  .nav-cta-largo { display: none; }
  .nav-cta-corto { display: inline; }
}
@media (max-width: 480px) {
  /* Si la marca y el botón no caben en una fila (pantallas de 320 px o
     texto agrandado por el sistema), el botón baja a una segunda línea en
     vez de desbordar la pantalla */
  .nav-interior { gap: 1rem; row-gap: 0.4rem; min-height: 60px; flex-wrap: wrap; padding-block: 0.5rem; }
  .nav .marca { font-size: var(--t-18); }
  .nav .marca svg { display: none; }
  .nav .btn { padding: 0.55rem 0.9rem; font-size: var(--t-14); flex: none; }
}
@media (max-width: 340px) {
  .nav .marca { font-size: var(--t-16); }
}

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

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--seccion);
}

.hero-interior {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-14);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--alberca-tinta);
  margin-bottom: 1.25rem;
}
.eyebrow svg { width: 22px; height: 14px; }

.hero h1 { margin-bottom: 1.25rem; max-width: 12ch; }

.hero-sub {
  font-size: var(--t-18);
  color: var(--piedra);
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hero-fb {
  font-size: var(--t-14);
  color: var(--piedra);
  margin: 0;
}
.hero-fb svg {
  width: 16px; height: 16px;
  color: var(--alberca);
  vertical-align: -3px;
  margin-right: 0.35rem;
}
.hero-fb a { color: var(--tinta); font-weight: 600; }

.hero-foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  /* foto-08 es apaisada (3/2): la alberca de día con la pérgola entera. */
  aspect-ratio: 3 / 2;
  width: 100%;
  background: var(--alberca-claro);
}
/* Portátiles bajos (p. ej. 1366×768): menos padding arriba para que la
   alberca entre en el primer pantallazo */
@media (max-height: 820px) and (min-width: 861px) {
  .hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--seccion); }
}
.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.hero-foto figcaption {
  position: absolute;
  left: 1rem; top: 1rem; /* arriba, para no tapar el agua */
  background: rgba(251, 250, 246, 0.92);
  color: var(--tinta);
  font-size: var(--t-14);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

@media (max-width: 860px) {
  .hero-interior { grid-template-columns: 1fr; }
  .hero-foto { aspect-ratio: 4 / 3; } /* debajo del texto; un poco más alta que 3/2 para que no quede como una tira */
  .hero h1 { max-width: none; }
}

/* --- Franja: lo que tiene la casa ---------------------------------------- */

.franja {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--blanco);
}
.franja ul {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.franja li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}
.franja svg { width: 22px; height: 22px; color: var(--alberca); flex: none; }

@media (max-width: 1100px) {
  .franja ul { justify-content: flex-start; gap: 0.6rem 1.25rem; }
}

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

.seccion { padding-block: var(--seccion); }
.seccion-alt { background: var(--alberca-claro); }

.cabecera-seccion { max-width: 40ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cabecera-seccion h2 { margin-bottom: 0.75rem; }
.cabecera-seccion p { color: var(--piedra); font-size: var(--t-18); margin: 0; }

/* --- Paquetes ------------------------------------------------------------ */

/* Tres tarjetas: 3 columnas en escritorio, 2 + 1 (la de pareja a lo ancho)
   entre 641 y 1099 px, 1 columna en móvil */
.paquetes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 1099px) {
  .paquetes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paquete-pareja { grid-column: 1 / -1; }
}

.paquete {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--sombra);
}
.paquete-destacado { border-color: var(--alberca); }

/* Mismo rol visual que .eyebrow; solo cambia la colocación dentro de la tarjeta */
.paquete-tipo {
  display: block;
  margin: 0 0 0.75rem;
}
.paquete h3 { margin-bottom: 0.5rem; }
.paquete-desc { color: var(--piedra); font-size: var(--t-18); margin: 0; }

.paquete-precio {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}
.paquete-cifra {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1;
  color: var(--tinta);
}
.paquete-cifra abbr { text-decoration: none; font-size: var(--t-22); color: var(--piedra); }
.paquete-precio small {
  display: block;
  font-size: var(--t-14);
  color: var(--piedra);
  margin-top: 0.35rem;
}
.paquete-datos {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  display: grid;
  gap: 0.5rem;
  font-size: var(--t-16);
}
.paquete-datos li { display: flex; align-items: center; gap: 0.6rem; }
.paquete-datos svg { width: 22px; height: 22px; color: var(--alberca); flex: none; }
.paquete-datos strong { font-weight: 700; margin-left: 0.3ch; }
.paquete .btn { margin-top: auto; align-self: flex-start; }
/* Entre 1100 y 1220 px las tres tarjetas caben justas: botones un punto más
   compactos para que no se partan en dos líneas */
@media (min-width: 1100px) and (max-width: 1220px) {
  .paquete .btn { padding-inline: 1rem; font-size: var(--t-14); }
}

/* Aviso del paquete de pareja: la decoración va incluida solo en este evento */
.paquete-aviso {
  margin: 0 0 1.5rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--sol);
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--tinta);
}

.paquetes-incluye {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.paquetes-foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3;
  background: var(--alberca-claro);
}
.paquetes-foto img { width: 100%; height: 100%; object-fit: cover; }
.paquetes-foto figcaption {
  position: absolute;
  left: 1rem; bottom: 1rem;
  background: rgba(251, 250, 246, 0.92);
  color: var(--tinta);
  font-size: var(--t-14);
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}

.incluye-texto h3 { margin-bottom: 1rem; }

.incluye-lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr; /* tres frases largas: una debajo de otra */
  gap: 0.75rem;
  font-size: var(--t-18);
  font-weight: 600;
}
.incluye-lista li { display: flex; align-items: flex-start; gap: 0.6rem; }
.incluye-lista li svg { margin-top: 0.15em; }
.incluye-lista li span { font-weight: 400; }   /* el texto corre seguido; solo la etiqueta va en negrita */
.incluye-lista li strong { font-weight: 700; }
.incluye-lista svg {
  width: 26px; height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: var(--alberca-claro);
  color: var(--alberca-tinta);
  flex: none;
}

.incluye-nota {
  margin: 0;
  color: var(--piedra);
  font-size: var(--t-16);
  padding-left: 1rem;
  border-left: 3px solid var(--alberca); /* dato confirmado: no lleva el color de "pendiente" */
}
.incluye-nota strong { color: var(--tinta); }

@media (max-width: 860px) {
  .paquetes-incluye { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .paquetes-grid { grid-template-columns: 1fr; }
  .paquete-pareja { grid-column: auto; }
  .paquete .btn { align-self: stretch; justify-content: center; }
}

/* --- Secciones sobre blanco (Pedidas, Reglas) ---------------------------- */

.seccion-blanca {
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

/* --- Pedidas y cenas de pareja (evento de pareja) ------------------------- */

.pedidas-interior {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.pedidas-texto h2 { margin-bottom: 1rem; }
.pedidas-texto h2 em { color: var(--alberca-tinta); }
.pedidas-texto > p:not(.eyebrow):not(.pedidas-nota) { color: var(--piedra); font-size: var(--t-18); max-width: 38ch; }
.pedidas-texto .btn { margin-top: 0.25rem; }
/* Nota de pedidas: la decoración solo va incluida en el evento de pareja; se destaca antes del botón */
.pedidas-nota {
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--sol);
  font-size: var(--t-16);
  color: var(--piedra);
  max-width: 40ch;
}
.pedidas-nota strong { color: var(--tinta); }

/* Mosaico: la foto principal (4/5) fija la altura; las dos pequeñas se
   estiran a media altura y recortan con object-fit */
.pedidas-mosaico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.pedidas-mosaico li { min-height: 0; }
.pedidas-mosaico a {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: var(--tinta);
}
.pedidas-mosaico img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transition: transform 0.6s ease;
}
.pedidas-mosaico a:hover img { transform: scale(1.02); }
.pedidas-principal { grid-row: 1 / span 2; }
.pedidas-principal a { height: auto; aspect-ratio: 4 / 5; }

@media (max-width: 860px) {
  .pedidas-interior { grid-template-columns: 1fr; }
  .pedidas-mosaico {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
  .pedidas-principal { grid-row: auto; grid-column: span 2; }
  .pedidas-mosaico a { height: auto; aspect-ratio: 4 / 5; }
}
@media (max-width: 640px) {
  .pedidas-texto .btn { width: 100%; justify-content: center; }
}

/* --- Banda: la terraza al atardecer -------------------------------------- */

.atardecer {
  background: var(--tinta);
  color: var(--blanco);
}
.atardecer figure {
  position: relative;
  margin: 0;
  height: clamp(380px, 62vh, 640px);
  overflow: hidden;
}
.atardecer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%; /* horizonte y luces de la ciudad por encima de la veladura */
}
/* Veladura oscura sólida bajo el texto: blanco sobre ella ≥ 7:1 aunque la
   foto fuera blanca en ese punto */
.atardecer figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(
    to top,
    rgba(30, 42, 46, 0.94) 0%,
    rgba(30, 42, 46, 0.86) 62%,
    rgba(30, 42, 46, 0) 100%
  );
}
.atardecer .eyebrow { color: var(--blanco); margin-bottom: 0.5rem; }
.atardecer p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(var(--t-28), 1rem + 2vw, var(--t-40));
  line-height: 1.1;
  color: var(--blanco);
  text-wrap: balance;
}
@media (max-width: 640px) {
  .atardecer img { object-position: 50% 32%; } /* más cielo y ciudad sobre la veladura */
}

/* --- Reglas de la casa --------------------------------------------------- */

.reglas-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3.5rem);
}
.reglas-lista li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.regla-icono {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--alberca-claro);
  color: var(--alberca-tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.regla-icono svg { width: 26px; height: 26px; }
.reglas-lista strong {
  display: block;
  font-size: var(--t-18);
  font-weight: 700;
  line-height: 1.3;
  margin: 0.55rem 0 0.25rem;
}
.reglas-lista p { margin: 0; color: var(--piedra); font-size: var(--t-16); }

@media (max-width: 640px) {
  .reglas-lista { grid-template-columns: 1fr; }
}

/* --- Recorrido en video (vertical, 9:16) --------------------------------- */

.recorrido {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* La cabecera de la sección vive dentro de la columna de texto, al lado del
   video: así el título grande llena la altura del video vertical en escritorio */
.recorrido .cabecera-seccion { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); max-width: none; }
.recorrido-texto { max-width: 62ch; }
.recorrido-texto > p { max-width: 46ch; }
.recorrido-video { margin: 0; }
.recorrido-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radio);
  background: var(--tinta);
  box-shadow: var(--sombra);
}
/* Sin JavaScript no se pone la portada (data-poster); se enseña de fondo */
html:not(.js) .recorrido-video video {
  background: var(--tinta) url("img/resumen-poster.jpg") center / cover no-repeat;
}
.recorrido-video figcaption {
  font-size: var(--t-14);
  color: var(--piedra);
  margin-top: 0.6rem;
}
.recorrido-texto h3 { margin-bottom: 0.75rem; }
.recorrido-texto > p { color: var(--piedra); font-size: var(--t-18); margin: 0 0 1.25rem; }

@media (max-width: 860px) {
  .recorrido { grid-template-columns: 1fr; gap: 1.25rem; }
  .recorrido-texto { order: -1; max-width: none; }   /* primero el título, luego el video */
  .recorrido-video { max-width: 420px; }
}

/* --- Galería ------------------------------------------------------------- */

.galeria {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.galeria figure { margin: 0; }
.galeria .ancha { grid-column: span 2; }

.galeria a {
  display: block;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: var(--alberca-claro);
  aspect-ratio: 3 / 4;
}
.galeria .ancha a { aspect-ratio: 3 / 2; }

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
/* La azotea: recortamos la parte alta de la foto (tinaco) acercando la
   imagen desde abajo; el hover conserva el mismo acercamiento */
.galeria .azotea img {
  object-position: 55% 100%;
  transform: scale(1.45);
  transform-origin: 55% 100%;
}

.galeria a:hover img { transform: scale(1.02); }
.galeria .azotea a:hover img { transform: scale(1.48); }

/* Una foto ancha a la derecha para que la columna de retratos no sea una tira;
   la recámara se ensancha solo en escritorio para cerrar la cuadrícula (18 celdas) */
@media (min-width: 641px) {
  .galeria .derecha { grid-column: 2 / span 2; }
  .galeria .ancha-escritorio { grid-column: span 2; }
  .galeria .ancha-escritorio a { aspect-ratio: 3 / 2; }
  .galeria .ancha-escritorio img { object-position: 50% 72%; }
}

.galeria figcaption {
  font-size: var(--t-14);
  color: var(--piedra);
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria .ancha { grid-column: span 2; }
  .galeria .ultima { grid-column: span 2; }
  .galeria .ultima a { aspect-ratio: 4 / 3; }
}

/* --- Visor (lightbox) ---------------------------------------------------- */

.visor {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1400px);
  max-height: 96vh;
  width: auto;
}
.visor::backdrop { background: rgba(30, 42, 46, 0.9); }

.visor-marco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
/* --ratio (ancho/alto) lo pone main.js con la proporción de cada foto: el
   marco tiene su tamaño final antes de que la foto grande cargue */
.visor img {
  aspect-ratio: var(--ratio, 3 / 2);
  width: min(96vw, 1400px, calc(78vh * var(--ratio, 1.5)));
  height: auto;
  max-width: min(96vw, 1400px);
  max-height: 78vh;
  border-radius: var(--radio-chico);
  object-fit: contain;
}
.visor figcaption {
  color: var(--marfil);
  font-size: var(--t-14);
  text-align: center;
  max-width: min(90vw, 60ch);
  padding-inline: 1rem;
}
@media (min-width: 640px) {
  .visor figcaption { padding-inline: 3.5rem; }
}

.visor-boton {
  position: fixed;
  top: 1rem;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  background: var(--marfil);
  color: var(--tinta);
  cursor: pointer;
}
.visor-boton svg { width: 22px; height: 22px; }
.visor-cerrar { right: 1rem; }
.visor-anterior, .visor-siguiente { top: 50%; transform: translateY(-50%); }
.visor-anterior { left: 1rem; }
.visor-siguiente { right: 1rem; }
.visor-boton:focus-visible { outline-color: var(--sol); }

/* --- Disponibilidad: el calendario --------------------------------------- */

/* Tres bloques en rejilla: texto y acción (fecha elegida + botón) a la
   izquierda, calendario a la derecha; en celular, el calendario va entre el
   texto y la acción, para que el botón quede debajo del día tocado */
.disponibilidad-interior {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  grid-template-areas:
    "texto cal"
    "accion cal";
  grid-template-rows: auto 1fr;   /* la acción pegada al texto, no al fondo */
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 0.5rem;
  align-items: start;
}
.disponibilidad-texto { grid-area: texto; }
.disponibilidad-accion { grid-area: accion; }
.disponibilidad-cal { grid-area: cal; }

.disponibilidad-texto p { color: var(--piedra); font-size: var(--t-18); }
.disponibilidad-accion .btn { margin-top: 0.25rem; }

.calendarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.cal-card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
  box-shadow: var(--sombra);
}

.cal-card table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cal-card caption {
  text-align: left;
  font-family: var(--serif);
  font-size: var(--t-40);
  line-height: 1;
  color: var(--tinta);
  padding: 0 0 1.1rem;
  caption-side: top;
}
.cal-card caption small {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--piedra);
  margin: 0.15rem 0 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cal-card th {
  font-size: var(--t-14);
  font-weight: 700;
  color: var(--piedra);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--linea);
  text-align: center;
}
.cal-card th abbr { text-decoration: none; }

.cal-card td {
  padding: 3px 0;
  text-align: center;
  vertical-align: middle;
}
.cal-card tbody tr:first-child td { padding-top: 0.75rem; }

/* Los días futuros son botones (se pueden tocar); los pasados, texto */
.dia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3.4vw, 46px);
  height: clamp(34px, 3.4vw, 46px);
  padding: 0;
  border-radius: 50%;
  font: inherit;
  font-size: var(--t-16);
  font-weight: 600;
  line-height: 1;
  color: var(--tinta);
  background: transparent;
  border: 2.5px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
button.dia { cursor: pointer; }
button.dia:hover:not(.ocupado):not(.elegido) { background: var(--alberca-claro); }
.dia.pasado { color: var(--piedra); font-weight: 400; } /* 5.45:1 sobre blanco */
.dia.ocupado {
  background: var(--sol);
  color: var(--tinta);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  cursor: not-allowed;
}
.dia.hoy { border-color: var(--alberca); }
.dia.ocupado.hoy { box-shadow: 0 0 0 2px var(--blanco) inset; }
.dia.elegido {
  background: var(--alberca-tinta);   /* 5.2:1 con el número en blanco */
  color: var(--blanco);
  border-color: var(--alberca-tinta);
}
.dia:focus-visible { outline-offset: 2px; }

/* Flechas de mes */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}
.cal-nav p {
  margin: 0;
  font-weight: 700;
  color: var(--tinta);
  text-align: center;
}
.cal-flecha {
  width: 44px; height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--piedra);
  background: var(--blanco);
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cal-flecha svg { width: 22px; height: 22px; }
.cal-flecha:hover:not(:disabled) { border-color: var(--tinta); }
.cal-flecha:disabled { opacity: 0.35; cursor: default; }

/* Fecha elegida / aviso de día ocupado (junto al botón de WhatsApp) */
.cal-eleccion {
  min-height: 1.6em;
  margin: 0 0 1rem;
  font-size: var(--t-16);
  color: var(--tinta);
}
.cal-eleccion:empty { margin-bottom: 0; }
.cal-eleccion strong { color: var(--alberca-tinta); }
.cal-eleccion .cal-aviso { display: block; color: #8A4B00; font-weight: 600; } /* 5.9:1 sobre marfil */
.cal-eleccion .enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--alberca-tinta);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.cal-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-14);
  color: var(--piedra);
}
.cal-leyenda li { display: inline-flex; align-items: center; gap: 0.45rem; }
.cal-leyenda .muestra {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-block;
}
.cal-leyenda .muestra-ocupado { background: var(--sol); }
.cal-leyenda .muestra-hoy { border: 2px solid var(--alberca); }
.cal-leyenda .muestra-elegido { background: var(--alberca-tinta); }

.cal-pie {
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  color: var(--piedra);
  font-size: var(--t-14);
}
.cal-pie p { margin: 0; }

.cal-nojs {
  background: var(--blanco);
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem;
  color: var(--piedra);
}

/* Aparición de las celdas (solo con JS y sin reducción de movimiento) */
.js .cal-card .dia { opacity: 0; }
.js .cal-card.visible .dia {
  animation: aparecer 0.45s ease both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes aparecer {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .disponibilidad-interior {
    grid-template-columns: 1fr;
    grid-template-areas: "texto" "cal" "accion";
    row-gap: 1.5rem;
  }
}
@media (max-width: 640px) {
  .calendarios { grid-template-columns: 1fr; }
  /* 38 px en teléfonos normales; en pantallas de 320 px se encoge para que los
     círculos no se monten unos sobre otros */
  .dia { width: min(38px, calc(100% - 2px)); height: auto; aspect-ratio: 1 / 1; }
}

/* Al redibujar (cambio de mes) los días aparecen al instante: la animación de
   entrada solo es para la primera vez que el calendario entra en pantalla */
.js .cal-card.sin-animar .dia { animation: none; opacity: 1; }

/* --- Cómo llegar --------------------------------------------------------- */

.llegar-interior {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.direccion {
  font-family: var(--serif);
  font-size: clamp(var(--t-22), 1rem + 1.6vw, var(--t-40));
  line-height: 1.2;
  font-style: normal;
  margin: 0 0 1.5rem;
}
.direccion span { display: block; color: var(--piedra); font-size: var(--t-22); }

.llegar-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.ficha-contacto {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--sombra);
}
.ficha-contacto h3 { margin-bottom: 0.5rem; }
.ficha-contacto p { color: var(--piedra); }
.ficha-contacto .btn { margin-top: 0.25rem; }
.ficha-contacto .numero {
  font-family: var(--serif);
  font-size: var(--t-28);
  color: var(--tinta);
  margin: 0.25rem 0 1rem;
}

@media (max-width: 860px) {
  .llegar-interior { grid-template-columns: 1fr; }
}

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

.pie {
  background: var(--tinta);
  color: var(--marfil);
  padding-block: 3rem 2rem;
}
.pie-interior {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}
.pie .marca { color: var(--marfil); }
.pie .marca i { color: #7FD3C6; }
.pie address {
  font-style: normal;
  color: #C5CDD0;
  font-size: var(--t-14);
  margin-top: 0.75rem;
  max-width: 40ch;
}
.pie nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie nav a { color: var(--marfil); font-size: var(--t-14); font-weight: 600; }
.pie-nota {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(251, 250, 246, 0.14);
  padding-top: 1rem;
  margin: 1rem 0 0;
  font-size: var(--t-14);
  color: #C5CDD0;
}

@media (max-width: 640px) {
  .pie-interior { grid-template-columns: 1fr; }
}

/* --- Página de texto (aviso de privacidad) ------------------------------- */

.pagina-texto {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--seccion);
}
.pagina-texto .contenedor { max-width: 72ch; }
.pagina-texto h1 { font-size: var(--t-40); }
@media (min-width: 1100px) { .pagina-texto h1 { font-size: var(--t-64); } }
.pagina-texto h2 { font-size: var(--t-28); margin-top: 2.5rem; }
.pagina-texto p, .pagina-texto li { font-size: var(--t-18); color: var(--tinta); }
.pagina-texto .borrador {
  display: inline-block;
  background: var(--pendiente-fondo);
  color: var(--pendiente-texto);
  border: 1px dashed rgba(122, 74, 12, 0.45);
  border-radius: var(--radio-chico);
  padding: 0.75rem 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.pagina-texto mark {
  background: var(--pendiente-fondo);
  color: var(--pendiente-texto);
  padding: 0 0.3em;
  border-radius: 4px;
}

/* --- Revelado al hacer scroll ------------------------------------------- */
/* Solo se oculta cuando main.js confirma que corre (html.js);
   sin JavaScript todo se ve desde el principio. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Red de seguridad: si main.js no llega (conexión cortada, bloqueador), la
   clase js-ok nunca aparece y a los 4 s todo el contenido se muestra igual */
.js:not(.js-ok) .reveal { animation: tcv-mostrar 0s 4s forwards; }
@keyframes tcv-mostrar { to { opacity: 1; transform: none; } }

/* --- Menos movimiento ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .cal-card .dia, .js .cal-card.visible .dia { opacity: 1; animation: none; }
  .galeria img, .pedidas-mosaico img { transition: none; }
  .galeria a:hover img, .pedidas-mosaico a:hover img { transform: none; }
  .galeria .azotea img, .galeria .azotea a:hover img { transform: scale(1.45); } /* el recorte no es movimiento */
  .btn { transition: none; }
  .nav-enlaces a { transition: none; }
}

/* La leyenda del calendario solo tiene sentido cuando el calendario se dibuja (JS) */
.cal-leyenda { display: none; }
.js .cal-leyenda { display: flex; }

.horario-atencion { margin-top: 0.9rem; font-size: var(--t-16); color: var(--tinta); }