/* Calypso Retreats — web pública. Mobile-first. Fuentes servidas desde /fonts (sin peticiones a terceros). */

/* Cormorant Garamond (licencia OFL, ver /fonts/OFL.txt): fuente variable, un archivo para todos los pesos. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
/* ITC Garamond Std Light Condensed para titulares. Es una fuente comercial: hace falta el archivo .woff2
   con licencia de uso web. Cuando lo tengáis, copiadlo a public/fonts/ con este nombre y quitad el comentario.
   Mientras tanto, los titulares usan Cormorant Garamond.
@font-face {
  font-family: "Calypso Display";
  src: url("/fonts/itc-garamond-std-light-condensed.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  color-scheme: light;
  /* Paleta del logo: crema de fondo, verde de las letras y naranja del sol. */
  --paper: #fffcf6;
  --sand: #f6efe2;
  --shell: #ffffff;
  --ink: #1d2a22;
  --ink-soft: #55615a;
  --sea: #206f40;       /* verde del logo: enlaces, botones, selección */
  --sea-deep: #17552f;
  --foam: #e4efe7;
  --basalt: #33312d;
  --line: #e6dccb;
  --accent: #e8581a;    /* naranja del sol: detalles y avisos */
  --blocked: #cfc6b6;
  /* "Calypso Display" = ITC Garamond Std Light Condensed cuando esté su archivo (ver arriba). */
  --display: "Calypso Display", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --gutter: 16px;
  --max: 1180px;
  /* Curvas de animación (criterios de Emil Kowalski): ease-out fuerte para respuestas de la interfaz. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Sin el destello gris/azul al tocar en móvil: cada control tiene su propio estado :active. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 19px/1.55 var(--serif);
  overflow-x: hidden;
}

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

a { color: var(--sea); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a { transition: color 150ms ease; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: 0; }
h1 { font-size: clamp(2.5rem, 8vw, 4.8rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
/* Titulares de sección: negrita en píldora con los colores del logo. */
.pill-heading {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sea);
  background: var(--foam);
  border-radius: 999px;
  padding: .6em 1.15em;
  margin: 0 0 1.1em;
}
/* Cifras alineadas donde se leen números: fechas, precios, capacidad, registros. */
.calendar, .quote, .booking-dates, .facts, .registration, .tiers, .times { font-variant-numeric: lining-nums tabular-nums; }
p { margin: 0 0 1em; }

.eyebrow {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .9em;
}
.lede { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; font-style: italic; line-height: 1.4; color: var(--ink); }
.muted { color: var(--ink-soft); }

.button {
  display: inline-block;
  background: var(--sea);
  color: var(--shell);
  border: 0;
  border-radius: 0;
  padding: .95em 1.6em;
  font: 600 .85rem/1 var(--serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.button { transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.button:active { transform: scale(0.97); background: var(--sea-deep); }
.button[disabled] { opacity: .55; cursor: progress; }

.link-arrow { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; font-weight: 600; }
.link-arrow::after { content: "→"; display: inline-block; margin-left: .35em; transition: transform 200ms var(--ease-out); }

.demo-ribbon {
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .45em var(--gutter);
}

/* Cabecera */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5em 1.5em;
  padding: 18px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.wordmark { font-family: var(--display); font-size: 1.6rem; font-weight: 400; letter-spacing: .03em; color: var(--sea); text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .3em 1.2em; order: 3; flex-basis: 100%; }
@media (max-width: 599px) { .wordmark { font-size: 1.35rem; } .brand { gap: 8px; } .brand img { width: 38px; height: 38px; } }
.header-cta { order: 2; }
.site-header nav a { font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
/* Controles: respuesta inmediata al toque, sin retraso de doble toque ni selección de texto al mantener pulsado. */
button, .button, .link-arrow, .site-header nav a, .wordmark {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button { -webkit-touch-callout: none; }

main { display: block; }

/* Fotos y marcador de posición mientras no hay fotos reales */
.photo { width: 100%; height: 100%; object-fit: cover; }
.placeholder {
  display: flex;
  align-items: flex-end;
  padding: 1em;
  min-height: 240px;
  background:
    linear-gradient(180deg, rgba(246, 242, 234, 0) 55%, rgba(235, 227, 213, .9) 100%),
    linear-gradient(160deg, #9fb9bb 0%, #5e8791 38%, #1f4d5a 70%, #143640 100%);
}
.placeholder span { font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--basalt); }

/* Portada */

.house-card-media img { transition: transform 500ms var(--ease-out); }
.house-card-media .placeholder { height: 100%; }

.facts { list-style: none; padding: 0; margin: 0 0 1.4em; display: flex; flex-wrap: wrap; gap: .3em 1.2em; font-size: .95rem; color: var(--ink-soft); }
.facts li + li::before { content: "·"; margin-right: 1.2em; color: var(--line); }

.direct { max-width: var(--max); margin: 64px auto 0; padding: 44px var(--gutter); background: var(--sand); text-align: center; }
.direct-list { text-align: left; }

/* La zona: qué hacer cerca de cada casa */
.places { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0 40px; }
.places li { padding: 16px 0; border-top: 1px solid var(--line); }
.place-head { display: flex; flex-direction: column-reverse; gap: .15em; margin: 0 0 .3em; }
.place-name { font-family: var(--display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.place-distance { flex: none; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.place-note { margin: 0; color: var(--ink-soft); max-width: 38em; }
/* ── Diseño tipo hotel boutique ─────────────────────────────────────────── */

/* Botones */
.button { border-radius: 999px; padding: 1em 1.8em; }
.button-light { background: var(--paper); color: var(--sea); }
.button-outline { background: transparent; color: var(--sea); border: 1px solid var(--sea); }
.header-cta { padding: .75em 1.3em; font-size: .78rem; }
.cta-long { display: none; }
@media (min-width: 600px) { .cta-long { display: inline; } .cta-short { display: none; } }

/* Portada: foto a sangre con el titular encima */
.hero-full { position: relative; min-height: min(88svh, 900px); display: grid; align-items: end; overflow: hidden; color: #fffcf6; }
.hero-full picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* Grano de película muy sutil: da textura analógica y disimula el escalado en pantallas 5K. */
.hero-full::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url("/img/grain.png") repeat; background-size: 64px 64px; mix-blend-mode: overlay; opacity: .14; pointer-events: none; }
.hero-full::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 30, 24, .05) 30%, rgba(20, 30, 24, .62) 100%); }
@media (min-width: 700px) { .hero-full picture img { object-position: center 55%; } }
.hero-overlay { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(40px, 8vh, 88px); text-align: center; }
.hero-overlay .eyebrow { color: rgba(255, 252, 246, .88); }
.hero-overlay h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 16em; margin: 0 auto .35em; text-wrap: balance; }
.hero-line { font-size: 1.3rem; font-style: italic; margin: 0 auto 1.6em; max-width: 30em; }

/* Insignias de confianza (solo datos reales) */
.trust { list-style: none; margin: 0 auto; padding: 22px var(--gutter); max-width: var(--max); display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; border-bottom: 1px solid var(--line); }
.trust-inline { justify-content: flex-start; padding: 8px 0 20px; margin: 0; border: 0; gap: 12px 28px; }
.badge { display: flex; align-items: center; gap: 6px; color: var(--sea); }
.badge-body { display: flex; flex-direction: column; text-align: center; line-height: 1.2; }
.badge:not(.award) .badge-body { text-align: left; border-left: 2px solid var(--accent); padding-left: 10px; }
.badge-title { font-family: var(--display); font-weight: 700; font-size: 1.12rem; }
.badge-text { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.laurel { width: 22px; height: 62px; color: var(--sea); flex: none; }
.laurel-right .laurel { transform: scaleX(-1); display: block; }

/* Bienvenida con el emblema */
.welcome { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 8px; text-align: center; }
.welcome-logo { width: 150px; height: auto; margin: 0 auto 22px; }
.welcome .lede { font-size: 1.5rem; }

/* Casas */
.houses { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 0; text-align: center; }
.houses-grid { display: grid; gap: 64px; text-align: left; margin-top: 8px; }
.house-card { display: grid; gap: 20px; }
.house-card-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.house-card h3 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: .3em; }
.house-card h3 a { color: inherit; text-decoration: none; }
.card-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }

/* Valoración con estrellas verdes (encima de los títulos) */
.stars { display: block; color: var(--sea); flex: none; }
.rating-line { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); text-decoration: none; font-size: .95rem; margin-bottom: 10px; font-variant-numeric: lining-nums; }
.rating-line strong { color: var(--ink); }

/* Widget: ventajas junto al botón */
.booking-head { flex-wrap: wrap; }
.booking-head .rating-line { margin: 0; }
.booking-perks { list-style: none; padding: 0; margin: 4px 0 8px; font-size: .95rem; color: var(--sea); }
.booking-perks li::before { content: "✓"; margin-right: .5em; font-weight: 700; }

/* Reseñas minimalistas, estilo ecommerce */
.reviews { max-width: var(--max); margin: 64px auto 0; padding: 0 var(--gutter); display: grid; gap: 28px; }
.reviews-summary-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.reviews-summary-panel .pill-heading { margin-bottom: .4em; }
.reviews-house { margin: 0; font-family: var(--display); font-size: 1.3rem; font-weight: 600; }
.reviews-score { margin: 0; font-family: var(--display); font-size: 3.4rem; font-weight: 600; line-height: 1; color: var(--sea); font-variant-numeric: lining-nums; }
.reviews-score span { font-size: 1.3rem; color: var(--ink-soft); }
.dist { list-style: none; padding: 0; margin: 8px 0; width: 100%; max-width: 300px; font-size: .9rem; font-variant-numeric: lining-nums tabular-nums; }
.dist li { display: grid; grid-template-columns: 2.2em 1fr 3em; align-items: center; gap: 10px; }
.dist progress { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--foam); overflow: hidden; }
.dist progress::-webkit-progress-bar { background: var(--foam); border-radius: 999px; }
.dist progress::-webkit-progress-value { background: var(--sea); border-radius: 999px; }
.dist progress::-moz-progress-bar { background: var(--sea); border-radius: 999px; }
.dist li span:last-child { text-align: right; color: var(--ink-soft); }
.dist li span:first-child { color: var(--sea); font-weight: 600; }
.text-link { font-weight: 600; }
.carousel { position: relative; min-width: 0; }
.carousel-track { list-style: none; margin: 0; padding: 0 0 14px; display: flex; gap: 32px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.review-card { flex: 0 0 min(82%, 300px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--ink); }
.review-card blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.review-meta { margin: auto 0 0; display: flex; flex-direction: column; font-size: .9rem; }
.review-meta span { color: var(--ink-soft); }
.carousel-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.carousel-nav button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--sea); font-size: 1.3rem; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.carousel-nav button:active:not(:disabled) { transform: scale(0.95); }
.carousel-nav button:disabled { opacity: .3; cursor: default; }

/* Barra fija "Check availability" en móvil */
.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 252, 246, .96); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(29, 42, 34, .3); font-size: .9rem; color: var(--ink-soft); }
.mobile-cta > span { display: flex; flex-direction: column; gap: 2px; }
.mobile-cta { transition: transform 260ms var(--ease-out); }
.mobile-cta.is-hidden { transform: translateY(110%); }
.mobile-cta .button { padding: .9em 1.4em; }
body:has(.mobile-cta) .site-footer { padding-bottom: 110px; }
.footer-logo { width: 120px; height: 120px; margin: 0 0 10px -4px; }
.direct-list { list-style: none; counter-reset: item; padding: 0; margin: 0; display: grid; gap: 28px; }
.direct-list li { counter-increment: item; padding-top: 14px; border-top: 1px solid var(--line); }
.direct-list li::before { content: counter(item, decimal-leading-zero); display: block; font-family: var(--serif); color: var(--accent); margin-bottom: .3em; }

/* Página de casa */
.gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Al llegar al final del carrusel, el gesto no pasa a la página (ni dispara "atrás" en el navegador). */
  overscroll-behavior-x: contain;
  padding: 0 var(--gutter);
  scrollbar-width: thin;
}
/* Cada foto con su proporción real (hay verticales y horizontales) y la misma altura. */
.gallery figure { margin: 0; flex: 0 0 auto; height: clamp(240px, min(62vw, 68vh), 560px); scroll-snap-align: start; }
.gallery figure img { height: 100%; width: auto; max-width: none; }
.gallery figure:has(.placeholder) { flex: 0 0 100%; }
.gallery .placeholder { height: 100%; }
.gallery-wrap { position: relative; }
.gallery-wrap .carousel-nav { position: absolute; right: calc(var(--gutter) + 12px); bottom: 12px; margin: 0; }
.gallery-wrap .carousel-nav button { background: rgba(255, 252, 246, .92); border-color: transparent; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); }
.gallery-hint { max-width: var(--max); margin: 8px auto 0; padding: 0 var(--gutter); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.house-layout { max-width: var(--max); margin: 36px auto 0; padding: 0 var(--gutter); display: grid; gap: 48px; }
.house-details section { margin-top: 44px; }
.house-details > .prose:first-child { margin-top: 0; }
/* Descripción larga plegada: "Read more" sin JavaScript */
.read-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--sea); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; padding: 6px 0; }
.read-more summary::-webkit-details-marker { display: none; }
.read-more summary::after { content: "+"; font-size: 1.2rem; line-height: 1; }
.read-more[open] summary { display: none; }
.prose p { max-width: 38em; }
.amenities, .rules { list-style: none; padding: 0; margin: 0; }
.amenities li, .rules li { position: relative; padding: 7px 0 7px 1.7em; border-bottom: 1px solid var(--line); break-inside: avoid; }
.amenities li::before { content: "✓"; position: absolute; left: .1em; top: 7px; color: var(--sea); font-weight: 700; }
.rules li::before { content: ""; position: absolute; left: .25em; top: 1.05em; width: 8px; height: 1px; background: var(--accent); }
.amenities { columns: 2 16em; column-gap: 2.5em; }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0 0 1.2em; }
.times dt { white-space: nowrap; }
.times dt, .booking-dates dt { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.times dd, .booking-dates dd { margin: .2em 0 0; }
.registration { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.registration p { margin: 0 0 .4em; }
.reg { overflow-wrap: anywhere; }

/* Widget de reserva */
.booking {
  background: var(--shell);
  /* Sombra suave y borde translúcido en lugar de una línea sólida: la tarjeta flota sobre el papel. */
  border: 1px solid rgba(28, 42, 49, .08);
  box-shadow: 0 1px 2px rgba(28, 42, 49, .04), 0 16px 40px -16px rgba(28, 42, 49, .18);
  padding: 22px var(--gutter);
  align-self: start;
}
.booking-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.booking-soon { font-family: var(--display); font-size: 1.6rem; font-weight: 600; }

.calendar { margin: 10px 0 16px; min-height: 280px; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cal-nav button { background: none; border: 1px solid var(--line); width: 44px; height: 44px; font-size: 1.1rem; cursor: pointer; color: var(--ink); transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.cal-nav button:active:not(:disabled) { transform: scale(0.95); background: var(--foam); }
.cal-nav button:disabled { opacity: .3; cursor: default; }
.cal-months { display: grid; gap: 22px; }
.cal-months.two { grid-template-columns: 1fr 1fr; }
.cal-month h3 { font-size: 1.05rem; text-align: center; margin: 0 0 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-size: .75rem; font-weight: 600; text-align: center; color: var(--ink-soft); letter-spacing: .08em; padding: 4px 0; }
.cal-day {
  aspect-ratio: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
  padding: 0;
}
.cal-day { transition: transform 140ms var(--ease-out); touch-action: manipulation; }
.cal-day:active:not(:disabled) { transform: scale(0.94); }
.cal-day:disabled { color: #b7aea0; cursor: default; }
.cal-day.blocked { color: #a39a8b; text-decoration: line-through; text-decoration-color: #c2b8a7; }
.cal-day.blocked.can-checkout { text-decoration: none; color: var(--ink); background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(207, 198, 182, .5) 5px 6px); }
.cal-day.in-range { background: var(--foam); }
.cal-day.selected { background: var(--sea); color: var(--shell); }
.cal-legend { font-size: .85rem; color: var(--ink-soft); margin-top: 8px; }

.booking-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 0 0 16px; }

.quote table { width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 16px; }
.quote td { padding: 5px 0; }
.quote td:last-child { text-align: right; }
.quote .total td { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 600; }
.quote .warn { color: var(--accent); }
/* El precio y el formulario aparecen sin salto brusco al elegir fechas (animación de entrada solo con CSS). */
.quote, .booking-form { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
@starting-style {
  .quote, .booking-form { opacity: 0; transform: translateY(6px); }
}

.booking-form label { display: block; font-size: .95rem; font-weight: 600; margin-bottom: 12px; }
.booking-form input, .booking-form select, .booking-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: .7em .75em;
  font: inherit;
  font-size: 18px; /* 16 px o más evita el zoom automático en iOS */
  font-weight: 500;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
}
.booking-form .check { display: flex; gap: .6em; align-items: flex-start; }
.booking-form .check input { width: auto; margin-top: .3em; }
.booking-form .button { width: 100%; margin-top: 4px; }
.fine { font-size: .9rem; color: var(--ink-soft); margin-top: 10px; }
.error { color: var(--accent); font-size: .9rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Páginas de texto */
.page { max-width: 760px; margin: 40px auto 0; padding: 0 var(--gutter); }
.page.narrow { max-width: 600px; }
.page h2 { margin-top: 1.6em; }
.stay-summary { font-family: var(--serif); font-size: 1.3rem; border-left: 2px solid var(--sea); padding-left: 1em; }
.tiers { border-collapse: collapse; margin: 0 0 1.5em; width: 100%; max-width: 30em; }
.tiers th, .tiers td { text-align: left; padding: .5em 0; border-bottom: 1px solid var(--line); }
.tiers td:last-child, .tiers th:last-child { text-align: right; }

/* Pie */
.site-footer {
  max-width: var(--max);
  margin: 96px auto 0;
  padding: 40px var(--gutter) 48px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 24px;
  font-size: .88rem;
}
.site-footer p { margin: 0 0 .5em; }

/* ── Ajustes finos de móvil ─────────────────────────────────────────── */
.site-header nav { flex-wrap: nowrap; }
.footer-houses .reg, .registration .reg { font-variant-numeric: lining-nums; font-size: .82rem; letter-spacing: .02em; }
@media (max-width: 719px) {
  /* Insignias: rejilla de dos columnas, todo centrado */
  .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 22px var(--gutter); }
  .trust > .badge:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .trust-inline { padding: 4px 0 8px; }
  .badge { justify-content: center; gap: 2px; }
  .badge-body, .badge:not(.award) .badge-body { text-align: center; border-left: 0; padding-left: 0; }
  .badge-title { font-size: 1.02rem; }
  .badge-text { font-size: .68rem; letter-spacing: .04em; }
  .laurel { width: 14px; height: 40px; }
  /* Galería: se desliza con el dedo, sin flechas */
  .gallery-wrap .carousel-nav { display: none; }
  .booking-head .rating-line { display: none; }
  .house-layout { margin-top: 24px; gap: 32px; }
  .house-intro h1 { font-size: 2.3rem; }
  /* Reseñas: resumen centrado, barras a todo el ancho, tarjetas a su altura, sin flechas */
  .reviews-summary-panel { align-items: center; text-align: center; }
  .dist { max-width: none; }
  .carousel-track { align-items: flex-start; }
  .reviews .carousel-nav { display: none; }
  /* Pie centrado */
  .site-footer { text-align: center; justify-items: center; }
  .footer-logo { margin: 0 auto 10px; }
  .footer-houses .reg { font-size: .68rem; letter-spacing: 0; }
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .direct-list { grid-template-columns: repeat(3, 1fr); }
  .houses-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .site-footer { grid-template-columns: 2fr 2fr 1.5fr; }
}

@media (min-width: 960px) {
  .house-layout { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; row-gap: 0; }
  .house-intro { grid-column: 1; grid-row: 1; }
  .house-details { grid-column: 1; grid-row: 2; }
  .house-layout > .booking { grid-column: 2; grid-row: 1 / span 2; }
  .reviews { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .mobile-cta { display: none; }
  body:has(.mobile-cta) .site-footer { padding-bottom: 48px; }
  .booking { position: sticky; top: 20px; padding: 26px; }
}

/* Hover solo con ratón: en móvil el hover se "queda pegado" tras tocar. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--sea-deep); }
  .button:hover { background: var(--sea-deep); color: var(--shell); }
  .site-header nav a:hover { color: var(--sea); }
  .link-arrow:hover::after { transform: translateX(4px); }
  .house-card:hover .house-card-media img { transform: scale(1.025); }
  .cal-day:hover:not(:disabled) { background: var(--foam); }
  .cal-nav button:hover:not(:disabled) { background: var(--foam); }
  .carousel-nav button:hover:not(:disabled) { background: var(--foam); }
  .button-outline:hover { background: var(--sea); color: var(--paper); }
  .button-light:hover { background: #fff; color: var(--sea-deep); }
}

@media (min-width: 1100px) {
  .site-header nav { order: 2; flex-basis: auto; margin-left: auto; margin-right: 12px; }
  .header-cta { order: 3; }
}

@media (prefers-reduced-motion: no-preference) {
  .gallery { scroll-behavior: smooth; }
}

/* Movimiento reducido: se mantienen los fundidos, se quitan desplazamientos y escalados. */
@media (prefers-reduced-motion: reduce) {
  .button:active, .cal-day:active:not(:disabled), .cal-nav button:active:not(:disabled) { transform: none; }
  .house-card:hover .house-card-media img, .link-arrow:hover::after { transform: none; }
  @starting-style {
    .quote, .booking-form { transform: none; }
  }
}