/* ==========================================================================
   La Bodega de la Valduerna — Main Stylesheet
   Premium rural hotel · Mobile-first · Production
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #1B6B4A;
  --color-primary-dark: #144F38;
  --color-primary-light: #2A8E64;
  --color-accent: #C9A84C;
  --color-accent-dark: #A8873A;
  --color-bg: #FAF7F4;
  --color-bg-alt: #F0ECE6;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #5A5A5A;
  --color-border: #E2DDD5;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, .16);

  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  --container-max: 1200px;
  --container-narrow: 900px;
  --section-py: 1rem;
  --navbar-h: 64px;
}

/* --------------------------------------------------------------------------
   2. Reset + Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
h4 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

address {
  font-style: normal;
}

/* --------------------------------------------------------------------------
   3. Container + Section
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-py);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.section__subtitle,
.section__pretitle {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: #7A6028; /* gold oscuro: contraste AA sobre blanco */
  text-transform: uppercase;
  letter-spacing: .15em;
  margin-bottom: .5rem;
}

.section__heading {
  text-align: center;
  margin-bottom: 2rem;
}


.contact__map + .contact__item {
  margin-top: 1.25rem;
}

.section__title {
  margin-bottom: 1rem;
}

.section__desc {
  max-width: 600px;
  margin-inline: auto;
  color: var(--color-text-muted);
}

/* Sección "Nuestras casas" — copy a ancho de cards (900px) y justificado */
#habitaciones .section__header {
  text-align: left;
}
#habitaciones .section__desc {
  max-width: 900px;
  text-align: justify;
  hyphens: auto;
}
#habitaciones .section__desc + .section__desc {
  margin-top: 1rem;
}
#habitaciones .section__pretitle,
#habitaciones .section__title {
  text-align: center;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-surface);
  border-color: var(--color-surface);
}

.btn--ghost:hover {
  background-color: var(--color-surface);
  color: var(--color-primary);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-surface);
}

.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--sm {
  padding: .5rem 1.15rem;
  font-size: .8rem;
}

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   4a. Form checkbox RGPD
   -------------------------------------------------------------------------- */
.form__group label.form__checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-light, #777);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.form__group label.form__checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px;
  min-width: 18px;
  padding: 0 !important;
  border: none !important;
  margin: .15em 0 0;
  flex-shrink: 0;
  box-shadow: none !important;
}

.form__group label.form__checkbox span {
  flex: 1;
  text-align: left;
  font-weight: 400;
}

.form__group label.form__checkbox a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4b. Back to top
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 7rem;
  right: 2rem;
  z-index: 8000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary, #1B6B4A);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--color-primary-dark, #145438);
}

/* WhatsApp flotante */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 8000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(37, 211, 102, .45), 0 2px 6px rgba(0, 0, 0, .15);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
  background: #1ebe57;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(37, 211, 102, .55), 0 3px 8px rgba(0, 0, 0, .18);
  outline: none;
}

.wa-float svg {
  display: block;
}

@media (max-width: 640px) {
  .wa-float {
    bottom: 1rem;
    right: 1rem;
    width: 52px;
    height: 52px;
  }
  .back-to-top {
    bottom: 5rem;
    right: 1rem;
    width: 52px;
    height: 52px;
  }
}

/* --------------------------------------------------------------------------
   4c. Toast notifications
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
  font-size: .9rem;
  max-width: 90vw;
  opacity: 0;
  transition: opacity .3s, transform .3s;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.toast--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.toast__text { flex: 1; }

.toast__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  padding: 0;
  line-height: 1;
}

.toast__close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   5. Legal pages
   -------------------------------------------------------------------------- */
.legal__container {
  max-width: 760px;
  padding-top: 3rem;
}

.legal__container h1 {
  margin-bottom: 2rem;
}

.legal__container h2 {
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-size: 1.3rem;
}

.legal__container h3 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-size: 1.1rem;
}

.legal__container p,
.legal__container li {
  line-height: 1.7;
  color: var(--color-text);
}

.legal__container ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal__container a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .9rem;
}

.legal__table th,
.legal__table td {
  padding: .6rem .75rem;
  border: 1px solid var(--color-border, #e5e5e5);
  text-align: left;
}

.legal__table th {
  background: var(--color-bg-alt, #f5f5f5);
  font-weight: 600;
}

.legal__updated {
  margin-top: 2rem;
  font-size: .85rem;
  color: var(--color-text-light, #888);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   5b. Cookie banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: auto;
  max-width: 440px;
  z-index: 9000;
  background: #fff;
  color: #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
  border: 1px solid rgba(0, 0, 0, .08);
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  /* visibility:hidden propaga a TODOS los descendientes (los <a>/<button>
     internos no podrán recibir taps aunque sean tappable por defecto).
     Es la única forma fiable de ocultar fixed elements con transform en
     iOS Safari sin que sigan capturando eventos. Transición delay sincronizada
     con el fade-out (300ms) para que el banner no desaparezca antes de animar. */
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s ease, opacity .3s ease, visibility 0s linear .4s;
}

.cookie-banner--visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .4s ease, opacity .3s ease, visibility 0s linear 0s;
}

.cookie-banner--attention {
  animation: cookieBannerPulse 1.2s ease-out 2;
}

@keyframes cookieBannerPulse {
  0%   { box-shadow: 0 12px 32px rgba(0, 0, 0, .25), 0 0 0 0 rgba(27, 107, 74, .55); }
  60%  { box-shadow: 0 12px 32px rgba(0, 0, 0, .25), 0 0 0 18px rgba(27, 107, 74, 0); }
  100% { box-shadow: 0 12px 32px rgba(0, 0, 0, .25), 0 0 0 0 rgba(27, 107, 74, 0); }
}

.cookie-banner__content {
  padding: 1.5rem 1.75rem;
}

.cookie-banner__title {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary, #1B6B4A);
}

.cookie-banner__text {
  margin: 0 0 1rem;
  line-height: 1.55;
  font-size: .85rem;
  color: #555;
}

.cookie-banner__text strong {
  color: #2a2a2a;
}

.cookie-banner__text a {
  color: var(--color-primary, #1B6B4A);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.cookie-banner__btns {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.cookie-banner__btn {
  flex: 1;
  min-width: 130px;
  padding: .65rem 1rem;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, color .2s, transform .15s;
  font-family: inherit;
}

.cookie-banner__btn--accept {
  background: var(--color-primary, #1B6B4A);
  color: #fff;
  border-color: var(--color-primary, #1B6B4A);
}

.cookie-banner__btn--accept:hover {
  background: var(--color-primary-dark, #145438);
  transform: translateY(-1px);
}

.cookie-banner__btn--reject {
  background: #f4f4f4;
  color: #555;
  border-color: #e0e0e0;
}

.cookie-banner__btn--reject:hover {
  background: #eaeaea;
  color: #333;
}

@media (max-width: 640px) {
  .cookie-banner {
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    border-radius: 12px 12px 0 0;
  }
  .cookie-banner__content {
    padding: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--color-surface);
  background-color: #0f3d2a;
}

.hero__bg {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  overflow: hidden;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .15) 0%,
    rgba(15, 61, 42, .55) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem 3.5rem;
  margin-top: -75px;
}

.hero__logo {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.hero__logo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
  object-fit: contain;
}

.hero__title {
  color: var(--color-surface);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .25);
  letter-spacing: -.01em;
}

.hero__pretitle {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .25em;
  opacity: .65;
  margin-bottom: .75rem;
}

.hero__registro {
  font-family: var(--font-body);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .45;
  margin-bottom: 2.5rem;
}

.hero__pullquote {
  position: relative;
  max-width: 540px;
  margin: 0 auto 2.5rem;
  padding: 1.75rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.hero__pullquote::before {
  content: '\201C';
  position: absolute;
  top: -.55em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1;
  color: rgba(255, 255, 255, .3);
  background-color: #0f3d2a;
  padding: 0 .75rem;
}

.hero__pullquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  opacity: .88;
  margin: 0;
}

.hero__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem .75rem;
  margin-bottom: 2rem;
}

.hero__nav a {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .85);
  padding: .35rem .5rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
}

.hero__nav a:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .15);
}

.hero__nav-dot {
  color: rgba(255, 255, 255, .4);
  font-size: 1.2rem;
  line-height: 1;
}

.hero__actions,
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Scroll indicator */
.scroll-indicator,
.hero__scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--color-surface);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.scroll-indicator__mouse,
.hero__scroll-indicator span {
  width: 24px;
  height: 38px;
  border: 2px solid var(--color-surface);
  border-radius: 12px;
  position: relative;
}

.scroll-indicator__mouse::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background-color: var(--color-surface);
  border-radius: 2px;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50%      { opacity: .3; transform: translateX(-50%) translateY(10px); }
}

/* --------------------------------------------------------------------------
   7. Stats
   -------------------------------------------------------------------------- */
.stats {
  background-color: var(--color-primary);
  color: var(--color-surface);
  padding-block: 3rem;
}

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
}

.stats__item,
.stat {
  padding: 1rem;
}

.stats__number,
.stat__number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: .25rem;
}

.stats__label,
.stat__label {
  font-size: .9rem;
  opacity: .85;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   8. About
   -------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.about__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.about__text h2,
.about__content h2 {
  margin-bottom: 1rem;
}

.about__text p,
.about__content .about__text {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.about__text p:last-of-type,
.about__content .about__text:last-of-type {
  margin-bottom: 1.5rem;
}

.about__features {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.about__feature {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-primary);
  background-color: rgba(27, 107, 74, .08);
  padding: .35rem .8rem;
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   9. Cards — Habitaciones
   -------------------------------------------------------------------------- */
.cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin-inline: auto;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  display: block;
  /* `card__image` ahora es un <a> en lugar de <div>: reset visual */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

/* Triggers ocultos para el resto de fotos de la galería de cada casa.
   Solo existen para que el lightbox los pueda enumerar. */
.card-gallery-extra {
  display: none;
}

/* Badge contador de fotos en la esquina de la card (solo si hay >1 foto).
   Pista visual permanente: el visitante sabe que la card oculta una galería
   sin depender del hover (importante en móvil/tablet). */
.card__photo-count {
  position: absolute;
  bottom: .65rem;
  right: .65rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(0, 0, 0, .52);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .28rem .6rem;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.card:hover .card__image img {
  transform: scale(1.05);
}

.card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--color-accent);
  color: var(--color-text);
  font-weight: 700;
  font-size: .85rem;
  padding: .35rem .85rem;
  border-radius: var(--radius-sm);
  z-index: 2;
  /* Sin pointer-events:none, en Chrome Android (S24+) el tap sobre el badge
     dentro del <a class="card-gallery-trigger"> dispara la navegación al href
     antes de que el listener JS abra el lightbox. El badge es informativo,
     no interactivo — debe ser transparente al puntero. */
  pointer-events: none;
}

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.card__body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.card__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: .5rem;
}

.card__desc {
  color: var(--color-text-muted);
  font-size: .9rem;
  margin-bottom: 1rem;
}

.card__features {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.card__feature {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
  padding: .3rem .7rem;
  border-radius: var(--radius-sm);
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.card__price {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
}

.card__price span {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   10. Amenities
   -------------------------------------------------------------------------- */
.amenities__category {
  margin-bottom: 2rem;
}

.amenities__category-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
}

.amenities__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem 1.5rem;
}

@media (min-width: 640px) {
  .amenities__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .amenities__grid { grid-template-columns: repeat(3, 1fr); }
}

.amenity {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .5rem 0;
}

.amenity__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-color: rgba(27, 107, 74, .08);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}

.amenity__title,
.amenity__name {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: 0;
  color: var(--color-text);
}

.amenity__desc {
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Información importante ── */

.info-importante {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--color-bg-alt, #faf8f2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.info-importante__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}

.info-importante__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .info-importante__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .info-importante__grid { grid-template-columns: repeat(3, 1fr); }
}

.info-importante__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.info-importante__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(27, 107, 74, .1);
  border-radius: 50%;
  color: var(--color-primary);
}

.info-importante__label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--color-text);
}

.info-importante__desc {
  font-size: .82rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── FAQ ── */

.faq__container {
  max-width: 800px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .2s;
}

.faq__item[open] {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary-light);
}

.faq__question {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  color: var(--color-text);
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-primary);
  margin-left: 1rem;
  transition: transform .2s;
}

.faq__item[open] .faq__question::after {
  content: '−';
}

.faq__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ── Rating card (encuestas) ── */

.rating-card {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.rating-card__main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}

.rating-card__score {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.rating-card__details {
  flex: 1;
}

.rating-card__stars {
  font-size: 1.4rem;
  letter-spacing: 2px;
  margin-bottom: .25rem;
}

.rating-card__star--full { color: #f0c040; }
.rating-card__star--empty { color: #d0d0d0; }

.rating-card__count {
  font-size: .85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.rating-card__breakdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

@media (min-width: 640px) {
  .rating-card__breakdown { grid-template-columns: repeat(4, 1fr); }
}

.rating-card__category {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .5rem;
  background: var(--color-bg-alt, #faf8f2);
  border-radius: var(--radius-sm);
}

.rating-card__cat-label {
  font-size: .75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.rating-card__cat-value {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   11. Gallery
   -------------------------------------------------------------------------- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  aspect-ratio: 1;
}

.gallery__item--wide {
  grid-column: span 2;
  aspect-ratio: 2/1;
}

.gallery__item--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background var(--transition-base);
  pointer-events: none;
}

.gallery__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: rgba(27, 107, 74, .4);
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 2;
  color: #fff;
  pointer-events: none;
}

/* Label "Ver galería" bajo la lupa — entra suave al activar el overlay */
.gallery__overlay span {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Hover effects solo en dispositivos con puntero real (ratón/trackpad).
   En móvil/tablet el primer tap se interpretaría como hover y el segundo
   como click — lo que hace que la galería parezca no responder. */
@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.08); }
  .gallery__item:hover::after { background: rgba(27, 107, 74, .2); }
  .gallery__item:hover .gallery__overlay { opacity: 1; }

  /* Equivalente para las cards de casa (el trigger del lightbox por casa) */
  .card-gallery-trigger:hover .gallery__overlay,
  .card-gallery-trigger:focus-visible .gallery__overlay {
    opacity: 1;
  }
  .card-gallery-trigger:hover .gallery__overlay span,
  .card-gallery-trigger:focus-visible .gallery__overlay span,
  .gallery__item:hover .gallery__overlay span {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   12. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base),
              visibility var(--transition-base);
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xl);
}

.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, .1);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}

.lightbox__close:hover {
  background-color: rgba(255, 255, 255, .25);
}

.lightbox__nav,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-surface);
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, .1);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}

.lightbox__nav:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  background-color: rgba(255, 255, 255, .25);
}

.lightbox__nav--prev,
.lightbox__prev { left: 1.5rem; }
.lightbox__nav--next,
.lightbox__next { right: 1.5rem; }

.lightbox__counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .7);
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.testimonial {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-accent);
}

.testimonial__stars {
  display: flex;
  gap: .15rem;
  margin-bottom: .75rem;
  color: var(--color-accent);
  font-size: 1rem;
}

.testimonial__text {
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.8;
}

.testimonial__text::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-accent);
  line-height: 0;
  vertical-align: -.4em;
  margin-right: .15rem;
}

.testimonial__author {
  font-weight: 600;
  font-size: .95rem;
}

.testimonial__source,
.testimonial__author span {
  font-size: .8rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   14. CTA Banner
   -------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  padding-block: 5rem;
  text-align: center;
  color: var(--color-surface);
  overflow: hidden;
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.cta-banner__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 79, 56, .85) 0%,
    rgba(27, 107, 74, .75) 100%
  );
}

.cta-banner__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.cta-banner__content h2 {
  color: var(--color-surface);
  margin-bottom: 1rem;
}

.cta-banner__content p {
  font-size: 1.1rem;
  opacity: .9;
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   16. Form Elements
   -------------------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.25rem;
}

.form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: .7rem 1rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27, 107, 74, .12);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: .6;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A5A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-hint {
  font-size: .78rem;
  color: var(--color-text-muted);
}

.form-error {
  font-size: .78rem;
  color: #C0392B;
}

.form__input--error {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 3px rgba(229,62,62,.12) !important;
}

.form__input--valid {
  border-color: #38a169 !important;
  box-shadow: 0 0 0 3px rgba(56,161,105,.12) !important;
}

.form__validation-msg {
  display: block;
  font-size: .78rem;
  margin-top: .2rem;
}

.form__validation-msg--error {
  color: #e53e3e;
}

.form__validation-msg--valid {
  color: #38a169;
}

/* Form elements — HTML class variants */
.form__group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.25rem; }
.form__group label { font-size: .85rem; font-weight: 600; color: var(--color-text); }
.form__group input:not([type="checkbox"]),
.form__group select,
.form__group textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form__group input:not([type="checkbox"]):focus,
.form__group select:focus,
.form__group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(27,107,74,.12);
}
.form__group--full { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.contact__info h3 {
  margin-bottom: 1.5rem;
}

.contact__item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact__item svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.contact__item-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(27, 107, 74, .08);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-size: 1.1rem;
}

.contact__item-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin-bottom: .15rem;
}

.contact__item-value {
  font-weight: 500;
}

.contact__map {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact__map iframe {
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-primary-dark);
  color: rgba(255, 255, 255, .8);
  padding-top: 4rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer__brand {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-surface);
  margin-bottom: .75rem;
  text-align: center;
}

.footer__logo {
  border-radius: 50%;
  background-color: #fff;
  padding: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
  display: block;
  margin: 0 auto .75rem;
}

.footer__desc {
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* Footer — badge de rating Google (bloque destacado) */
.footer__rating {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: 2rem;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .2s ease;
}
.footer__rating:hover,
.footer__rating:focus-visible {
    color: #fff;
}
.footer__rating-row {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.footer__rating-stars {
    display: inline-flex;
    gap: 2px;
    color: #f5b400;
    font-size: 1.5rem;
    line-height: 1;
}
.footer__rating-star--empty {
    color: rgba(255, 255, 255, .25);
}
.footer__rating-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.footer__rating-meta {
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
    letter-spacing: .02em;
}

.footer__social {
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
}

.footer__social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .1);
  border-radius: var(--radius-full);
  color: var(--color-surface);
  font-size: 1rem;
  transition: background-color var(--transition-fast);
}

.footer__social-link:hover {
  background-color: var(--color-accent);
  color: var(--color-text);
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-surface);
  margin-bottom: 1rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer__link {
  color: rgba(255, 255, 255, .7);
  font-size: .9rem;
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-accent);
}

.footer__contact-item {
  display: flex;
  gap: .6rem;
  margin-bottom: .75rem;
  font-size: .9rem;
}

.footer__contact-icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  text-align: center;
  font-size: .82rem;
}

.footer__bottom a {
  color: rgba(255, 255, 255, .7);
}

.footer__bottom a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   19. Reveal Animations
   -------------------------------------------------------------------------- */
.reveal {
  transform: translateY(30px);
  transition: transform .7s ease;
}

.reveal.visible {
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: .1s; }
.reveal--delay-2 { transition-delay: .2s; }
.reveal--delay-3 { transition-delay: .3s; }
.reveal--delay-4 { transition-delay: .4s; }

.reveal--left {
  transform: translateX(-30px);
}
.reveal--left.visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(30px);
}
.reveal--right.visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(.95);
}
.reveal--scale.visible {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-indicator__mouse::after {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   20. Flash Messages
   -------------------------------------------------------------------------- */
.flash {
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  border-left: 4px solid;
  border-left: 4px solid;
}

.flash--success {
  background-color: #E8F5E9;
  color: #1B5E20;
  border-left-color: #2E7D32;
}

.flash--error {
  background-color: #FFEBEE;
  color: #B71C1C;
  border-left-color: #C62828;
}

.flash--info {
  background-color: #E3F2FD;
  color: #0D47A1;
  border-left-color: #1565C0;
}

.flash--warning {
  background-color: #FFF8E1;
  color: #E65100;
  border-left-color: #EF6C00;
}

.flash--resultado {
  text-align: center;
  border-left: none;
  border-top: 4px solid #2E7D32;
  padding: 2rem 1.5rem;
}

.flash__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}

.flash__ref {
  font-size: 1.1rem;
  margin: 0 0 1rem;
  letter-spacing: .5px;
}

.flash__msg {
  font-size: .9rem;
  margin: 0;
  line-height: 1.5;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   21. Reservas Calendar
   -------------------------------------------------------------------------- */
.calendar {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.calendar__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
}

.calendar__nav {
  background: none;
  border: none;
  color: var(--color-surface);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.calendar__nav:hover {
  background-color: rgba(255, 255, 255, .15);
}

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: .5rem 0;
  background-color: var(--color-bg-alt);
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  padding: .5rem;
}

.calendar__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calendar__day:hover {
  background-color: var(--color-bg-alt);
}

.calendar__day--today {
  font-weight: 700;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.calendar__day--selected {
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-weight: 600;
}

.calendar__day--range {
  background-color: rgba(27, 107, 74, .1);
  border-radius: 0;
}

.calendar__day--disabled {
  color: var(--color-border);
  cursor: default;
  pointer-events: none;
}

.calendar__day--unavailable {
  background-color: #FFEBEE;
  color: #C62828;
  text-decoration: line-through;
  cursor: not-allowed;
  pointer-events: none;
}

.calendar__day--other-month {
  color: var(--color-border);
}

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: .78rem;
  color: var(--color-text-muted);
}

.calendar__legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.calendar__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.calendar__legend-dot--available {
  background-color: var(--color-primary-light);
}

.calendar__legend-dot--unavailable {
  background-color: #EF9A9A;
}

.calendar__legend-dot--selected {
  background-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   22. Loader / Spinner
   -------------------------------------------------------------------------- */
.loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.spinner--sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner--lg {
  width: 56px;
  height: 56px;
  border-width: 4px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(250, 247, 244, .9);
}

/* ── Calendario de disponibilidad ── */

.cal {
  margin-bottom: 1.5rem;
  user-select: none;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.cal__month {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.cal__nav {
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.cal__nav:hover { background: var(--color-bg, #f5f5f0); }

.cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted, #999);
  margin-bottom: .25rem;
}

.cal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal__day {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  height: 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: #e8f5ef;
  color: var(--color-text);
  font-family: inherit;
  transition: background .15s;
  padding: 0;
}

.cal__day--empty { background: transparent; cursor: default; height: 0; }

.cal__day--libre { background: #e8f5ef; color: #1B6B4A; }

.cal__day--ocupado { background: #fde8e8; color: #b91c1c; cursor: not-allowed; opacity: .7; }

.cal__day--bloqueado { background: #e2e8f0; color: #718096; cursor: not-allowed; opacity: .6; }

.cal__day--no-disponible { background: #fef3c7; color: #92400e; cursor: not-allowed; }

.cal__day--pasado { background: transparent; color: #ccc; cursor: default; opacity: .3; }

.cal__day--hoy { box-shadow: inset 0 0 0 2px var(--color-primary); font-weight: 700; }

.cal__day--checkin {
  background: #2563eb;
  color: #fff;
  border-radius: 4px 0 0 4px;
  font-weight: 700;
}

.cal__day--checkout {
  background: #2563eb;
  color: #fff;
  border-radius: 0 4px 4px 0;
  font-weight: 700;
}

.cal__day--rango {
  background: #dbeafe;
  color: #1e40af;
  border-radius: 0;
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: .75rem;
  justify-content: center;
}

.cal__legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  color: var(--color-text-muted, #888);
}

.cal__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.cal__legend-dot--libre { background: #e8f5ef; border: 1px solid #1B6B4A; }
.cal__legend-dot--ocupado { background: #fde8e8; border: 1px solid #b91c1c; }
.cal__legend-dot--bloqueado { background: #e2e8f0; border: 1px solid #718096; }

.cal__selection {
  text-align: center;
  font-size: .85rem;
  color: var(--color-text);
  margin-top: .5rem;
  min-height: 1.5em;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Footer — HTML class variants
   -------------------------------------------------------------------------- */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.footer__nav h3,
.footer__contact h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: #ffffff; /* contraste AAA sobre verde oscuro */
  margin-bottom: 1rem;
}
.footer__nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer__nav a,
.footer__contact a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color var(--transition-base);
  display: block;
}
.footer__nav a:hover,
.footer__contact a:hover {
  color: #fff;
}
.footer__contact address {
  color: rgba(255,255,255,.7);
  font-style: normal;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   24. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

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

/* --------------------------------------------------------------------------
   25. Responsive — Tablet (768px+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --section-py: 1.25rem;
  }

  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }

  .amenities__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   26. Responsive — Desktop (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --section-py: 1.5rem;
  }

  .container {
    padding-inline: 2rem;
  }

  .amenities__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta-banner {
    padding-block: 7rem;
  }
}

/* --------------------------------------------------------------------------
   27. Responsive — Wide (1440px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
  }

  .hero__content {
    max-width: 800px;
  }
}

/* --------------------------------------------------------------------------
   28. Responsive — Small phones (max 375px)
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
  body {
    font-size: .9rem;
  }

  .hero__content {
    padding: 1.5rem 1rem;
  }

  .hero__logo img {
    width: 112px;
    height: 112px;
  }

  .hero__content {
    margin-top: -56px;
    padding: 0 1rem 2rem;
  }

  .hero__pullquote {
    padding: 1.25rem 1rem;
  }

  .hero__pullquote::before {
    font-size: 2.4rem;
  }

  .hero__actions,
  .hero__cta {
    flex-direction: column;
  }

  .hero__actions .btn,
  .hero__cta .btn {
    width: 100%;
  }

  .amenities__grid {
    grid-template-columns: 1fr;
  }

  .stats__number,
  .stat__number {
    font-size: 2.4rem;
  }

  .section {
    padding-block: 3rem;
  }

  .card__body {
    padding: 1.15rem;
  }
}

/* --------------------------------------------------------------------------
   29. Print
   -------------------------------------------------------------------------- */
@media print {
  .scroll-indicator,
  .hero__scroll-indicator,
  .lightbox,
  .footer,
  .cta-banner {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  .section {
    padding-block: 1.5rem;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Gestionar Reserva Page
   ========================================================================== */
.gestionar-page { padding-top: 120px; min-height: 70vh; }
.gestionar-container { max-width: 700px; margin: 0 auto; }
.gestionar-heading { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-text); margin-bottom: .5rem; }
.gestionar-ref { color: var(--color-text-muted); margin-bottom: 2rem; }
.gestionar-error { text-align: center; padding: 3rem 2rem; }
.gestionar-error__title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-text); margin-bottom: 1rem; }
.gestionar-error__text { color: var(--color-text-muted); line-height: 1.6; margin-bottom: 1.5rem; }

.gestionar-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.gestionar-card__header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.gestionar-card__room { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-text); margin: 0; }
.gestionar-card__body { padding: 1.5rem 2rem; }
.gestionar-card__cancel { padding: 1.5rem 2rem; border-top: 1px solid var(--color-border); background: var(--color-bg); }

.gestionar-table { width: 100%; border-collapse: collapse; }
.gestionar-table__label { padding: .625rem 0; color: var(--color-text-muted); font-size: .95rem; width: 40%; vertical-align: top; }
.gestionar-table__value { padding: .625rem 0; color: var(--color-text); font-size: .95rem; }
.gestionar-table__total { border-top: 1px solid var(--color-border); }
.gestionar-table__total .gestionar-table__label { padding-top: 1rem; font-size: 1.1rem; font-weight: 600; color: var(--color-text); }
.gestionar-table__price { padding-top: 1rem; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--color-primary); }

.gestionar-cancel__hint { color: var(--color-text-muted); font-size: .9rem; margin-bottom: 1rem; }
.gestionar-cancel__confirm { display: none; }
.gestionar-cancel__warning { color: #c0392b; font-weight: 600; margin-bottom: 1rem; }
.gestionar-cancel__confirm form { display: flex; gap: .75rem; flex-wrap: wrap; }

.gestionar-back { text-align: center; margin-top: 2rem; }

/* Badge variants */
.badge { display: inline-block; padding: .375rem 1rem; border-radius: 20px; font-size: .85rem; font-weight: 600; }
.badge--pendiente { background: #f39c12; color: #fff; }
.badge--confirmada { background: var(--color-primary); color: #fff; }
.badge--cancelada { background: #c0392b; color: #fff; }
.badge--completada { background: #2980b9; color: #fff; }
.badge--no_show { background: #7f8c8d; color: #fff; }

/* Danger button */
.btn--danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn--danger:hover { background: #a93226; border-color: #a93226; transform: translateY(-1px); box-shadow: var(--shadow-md); }

@media (max-width: 480px) {
  .gestionar-card__header { padding: 1rem 1.25rem; }
  .gestionar-card__body { padding: 1rem 1.25rem; }
  .gestionar-card__cancel { padding: 1rem 1.25rem; }
}

.form__hp {
  display: none !important;
}

.form__hint {
  font-size: .75rem;
  color: #888;
  margin-top: 2px;
}

/* ── 404 ── */

.page-404 {
  text-align: center;
  padding: 5rem 1.25rem;
}

.page-404__code {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: .3;
}

.page-404__msg {
  margin-bottom: 2rem;
  color: var(--color-text-muted);
}

.is-hidden { display: none !important; }
.contact__iframe { border: 0; }

.testimonials__widget {
  margin-top: 32px;
  text-align: center;
}
.testimonials__widget-label {
  font-size: 13px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px;
}
.testimonials__widget-frame {
  display: inline-block;
  max-width: 100%;
}

/* ========== Modal de aviso de mantenimiento ========== */
.maint-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.maint-modal[hidden] { display: none; }
.maint-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20,30,25,.65);
    backdrop-filter: blur(2px);
}
.maint-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    padding: 2rem 1.75rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: maintModalIn .25s ease-out;
}
@keyframes maintModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.maint-modal__title {
    margin: 0 0 .75rem;
    font-size: 1.5rem;
    color: var(--color-primary, #1B6B4A);
}
.maint-modal__text {
    margin: 0 0 1.5rem;
    line-height: 1.55;
    color: #444;
}
.maint-modal__cta {
    display: inline-block;
    margin-bottom: 1rem;
}
.maint-modal__close {
    display: inline-block;
    margin: .5rem auto 0;
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    color: #555;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: .55rem 1.25rem;
    border-radius: 6px;
    transition: background .2s, color .2s;
}
.maint-modal__close:hover { background: #eaeaea; color: #2a2a2a; }
body.has-maint-modal { overflow: hidden; }

/* ========== Mantenimiento AGRESIVO (bloqueo total) ========== */
body.is-mant-aggressive { overflow: hidden; }

/* Galería admin — hero marker */
.galeria-item.es-hero {
    outline: 3px solid var(--color-primary, #1B6B4A);
    outline-offset: -3px;
}

.btn-hero-activo {
    background-color: var(--color-primary, #1B6B4A);
    color: #fff;
    cursor: default;
}

/* Cuando el lightbox está abierto, ocultar botones flotantes que tienen
   mayor z-index y se solaparían sobre la foto ampliada. */
body.lightbox-open .wa-float,
body.lightbox-open .back-to-top,
body.lightbox-open .menu-trigger {
    visibility: hidden;
    pointer-events: none;
}

/* Especificidad aumentada (.footer__contact .footer__social-link, 0,2,0)
   para vencer al `.footer__contact a { display: block; ... }` heredado.
   Sin esto el bloque social del footer hereda display:block y los estilos
   circulares legacy de `.footer__social-link` 40x40px. */
.footer__contact .footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: rgba(255, 255, 255, .75);
    font-size: .875rem;
    text-decoration: none;
    transition: color .2s ease;
    background: none;
    border-radius: 0;
    padding: 0;
    width: auto;
    height: auto;
    justify-content: flex-start;
}

.footer__contact .footer__social-link:hover,
.footer__contact .footer__social-link:focus-visible {
    color: #fff;
}

.footer__contact .footer__social-link svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Menú principal: botón hamburger flotante + overlay full-screen
   -------------------------------------------------------------------------- */
.menu-trigger {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 8500;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(20, 84, 56, .92);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: background .2s ease, transform .15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
    background: var(--color-primary-dark, #145438);
    transform: scale(1.04);
    outline: none;
}

.menu-trigger svg { display: block; }

@media (max-width: 640px) {
    .menu-trigger {
        top: 1rem;
        right: 1rem;
        width: 52px;
        height: 52px;
    }
}

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(20, 84, 56, .98);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
}

.menu-overlay[hidden] { display: none; }

.menu-overlay--visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, visibility 0s linear 0s;
}

.menu-overlay__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
}

.menu-overlay__close:hover,
.menu-overlay__close:focus-visible {
    background: rgba(255, 255, 255, .1);
    transform: scale(1.04);
    outline: none;
}

@media (max-width: 640px) {
    .menu-overlay__close {
        top: 1rem;
        right: 1rem;
        width: 52px;
        height: 52px;
    }
}

.menu-overlay__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.menu-overlay__nav a {
    color: rgba(255, 255, 255, .9);
    font-family: var(--font-heading, Georgia, serif);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.menu-overlay__nav a:hover,
.menu-overlay__nav a:focus-visible {
    color: #fff;
    transform: translateX(4px);
    outline: none;
}

@media (max-width: 480px) {
    .menu-overlay__nav { gap: .85rem; }
    .menu-overlay__nav a { font-size: 1.6rem; }
}

/* Bloquear scroll del body cuando el menú está abierto */
body.menu-open { overflow: hidden; }

/* Reservar espacio para que el botón flotante no tape el título de la sección al saltar a un anchor */
#nosotros, #habitaciones, #galeria, #contacto, #reservas, #servicios, #faq {
    scroll-margin-top: 90px;
}

/* Ocultar trigger y overlay durante mantenimiento agresivo (PHP ya los omite,
   esto es cinturón por si la clase llega antes que el render) */
body.is-mant-aggressive .menu-trigger,
body.is-mant-aggressive .menu-overlay {
    display: none;
}

/* ==========================================================================
   Galería nativa de Gutenberg (.wp-block-gallery)
   El bloque nativo no admite el <span class="gallery__overlay"> del markup
   original sin volver a editar HTML a mano, que es justo lo que se quería
   evitar. El rótulo "Ver foto" se reproduce por CSS, sin markup.
   ========================================================================== */
.wp-block-gallery .wp-block-image { position: relative; overflow: hidden; }
.wp-block-gallery .wp-block-image a { display: block; position: relative; cursor: zoom-in; }
.wp-block-gallery .wp-block-image a::after {
  content: "Ver foto";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 79, 56, .55);
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .95rem;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .25s ease;
}
@media (hover: hover) {
  .wp-block-gallery .wp-block-image a:hover::after { opacity: 1; }
}
.wp-block-gallery .wp-block-image a:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery .wp-block-image a::after { transition: none; }
}

/* ==========================================================================
   Testimonios — clases nuevas de la versión WP
   El badge dinámico de Google desaparece; su información pasa a una línea de
   texto editable, y se añade el enlace a la ficha de Booking. El bloque
   wp:quote nativo trae su propio <cite>, que hay que alinear con el resto.
   ========================================================================== */
.testimonials__link { text-align: center; margin-top: 2rem; }
.testimonials__link a {
  color: var(--color-primary, #1B6B4A);
  text-decoration: underline;
  text-underline-offset: .25em;
}
/* wp:quote pone su propio estilo de cita: se neutraliza para respetar el
   diseño de .testimonial ya portado. */
.testimonials__grid .wp-block-quote {
  border: 0;
  padding: inherit;
  margin: 0;
  font-style: normal;
}
.testimonials__grid cite.testimonial__author {
  display: block;
  font-style: normal;
  margin-top: 1rem;
}

/* ==========================================================================
   Galería nativa: devolver el grid del diseño original
   WP envuelve el bloque con su layout flex (.is-layout-flex) y fija el ancho
   de cada figure con calc(); eso ignora por completo el grid de .gallery__grid
   y las fotos salen a tamaño natural. Aquí se reimpone el grid original y se
   trata cada .wp-block-image como el antiguo .gallery__item.
   ========================================================================== */
.wp-block-gallery.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
/* WP añade flex-wrap y gap propios en la misma clase: se neutralizan. */
.wp-block-gallery.gallery__grid.is-layout-flex { flex-wrap: initial; }

.wp-block-gallery.gallery__grid > .wp-block-image {
  /* WP fija width con calc(50% - gap): sin esto el grid no manda. */
  width: auto !important;
  max-width: none;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  aspect-ratio: 1;
}
.wp-block-gallery.gallery__grid > .wp-block-image,
.wp-block-gallery.gallery__grid > .wp-block-image a,
.wp-block-gallery.gallery__grid > .wp-block-image img {
  height: 100%;
}
.wp-block-gallery.gallery__grid > .wp-block-image img {
  width: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
@media (hover: hover) {
  .wp-block-gallery.gallery__grid > .wp-block-image:hover img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery.gallery__grid > .wp-block-image img { transition: none; }
  .wp-block-gallery.gallery__grid > .wp-block-image:hover img { transform: none; }
}
/* Mismos cortes que el grid original: 2 / 3 / 4 columnas. */
@media (min-width: 768px) {
  .wp-block-gallery.gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .wp-block-gallery.gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Contacto — dos columnas tras eliminar el formulario
   El grid original era "datos | formulario". Sin formulario quedaba una
   columna vacía, así que los datos pasan a la izquierda y los dos mapas
   ocupan la derecha (decisión de JAE, revisión visual 2026-09-15).
   ========================================================================== */
.contact__maps { display: flex; flex-direction: column; gap: 1rem; }
.contact__maps iframe { display: block; width: 100%; border: 0; border-radius: var(--radius-sm); }
.contact__info { align-content: start; }
@media (max-width: 767px) {
  /* En móvil los mapas van primero: ubicar antes, contactar después. */
  .contact__grid { display: flex; flex-direction: column; }
  .contact__maps { order: -1; }
}

/* ==========================================================================
   Compatibilidad con los bloques nativos (C0)
   Al pasar los patterns de core/html a bloques editables, algunos elementos
   pierden su clase original porque el bloque la genera a su manera:
     - core/details pone <summary> sin clase (antes .faq__question)
     - core/quote envuelve en .wp-block-quote con estilos propios
     - core/group anade .wp-block-group, que trae margenes de layout
   Aquí se reconcilian, sin tocar el CSS portado original.
   ========================================================================== */
.faq__item > summary { font: inherit; }
.faq__item > summary,
.faq__list .wp-block-details > summary { cursor: pointer; }
.hero__pullquote.wp-block-quote,
.testimonials__grid .wp-block-quote { border: 0; padding: inherit; margin: 0; font-style: normal; }
/* Los grupos son contenedores puros: no deben aportar caja propia. */
/* OJO: .hero__content NO entra en esta lista. Su margin-top NEGATIVO es lo que
   hace que el logo flote sobre el fondo verde en vez de cortar el borde de la
   foto; anularlo lo bajaba 75px. Se restaura al final del fichero. */
.wp-block-group.container,
.wp-block-group.about__grid,
.wp-block-group.about__content,
.wp-block-group.contact__grid,
.wp-block-group.contact__info,
.wp-block-group.amenities__grid,
.wp-block-group.amenities__category,
.wp-block-group.amenity,
.wp-block-group.info-importante__grid,
.wp-block-group.info-importante__item,
.wp-block-group.faq__list,
.wp-block-group.section__header,
.wp-block-group.section__heading,
.wp-block-group.cta-banner__content { margin-block: 0; }


/* ==========================================================================
   Restaurar los márgenes que se come el layout de bloques de WordPress
   WP emite `.is-layout-flow > * {margin-block-start:0;margin-block-end:0}` para
   sus grupos y lo aplica a TODOS los hijos directos, borrando los márgenes del
   CSS portado (especificidad 0,1,0 contra 0,1,0: gana el que va después).
   Por eso el logo del hero se pegaba al titular y las categorías de servicios
   quedaban sin aire. Aquí se re-declaran con el selector padre > hijo (0,2,0),
   con los MISMOS valores del CSS original — no son ajustes a ojo.
   ========================================================================== */
  .about__content > .section__pretitle { margin-bottom: .5rem; }
  .about__content > .section__title { margin-bottom: 1rem; }
  .about__grid > .section__pretitle { margin-bottom: .5rem; }
  .about__grid > .section__title { margin-bottom: 1rem; }
  .amenities__category > .amenities__category-title { margin-bottom: 1rem; }
  .amenities__category > .amenity__desc { margin-top: 2px; }
  .amenities__category > .amenity__name { margin-bottom: 0; }
  .amenities__category > .info-importante { margin-top: 3rem; }
  .amenities__category > .info-importante__title { margin-bottom: 1.5rem; }
  .amenities__grid > .amenities__category { margin-bottom: 2rem; }
  .amenities__grid > .amenities__category-title { margin-bottom: 1rem; }
  .amenities__grid > .amenity__desc { margin-top: 2px; }
  .amenities__grid > .amenity__name { margin-bottom: 0; }
  .amenities__grid > .info-importante { margin-top: 3rem; }
  .amenities__grid > .info-importante__title { margin-bottom: 1.5rem; }
  .amenity > .amenities__category { margin-bottom: 2rem; }
  .amenity > .amenities__category-title { margin-bottom: 1rem; }
  .amenity > .amenity__desc { margin-top: 2px; }
  .amenity > .amenity__name { margin-bottom: 0; }
  .amenity > .info-importante { margin-top: 3rem; }
  .amenity > .info-importante__desc { margin: 0; }
  .amenity > .info-importante__label { margin-bottom: 2px; }
  .amenity > .info-importante__title { margin-bottom: 1.5rem; }
  .contact__grid > .contact__item { margin-bottom: 1.5rem; }
  .contact__info > .contact__item { margin-bottom: 1.5rem; }
  .container > .amenities__category { margin-bottom: 2rem; }
  .container > .amenities__category-title { margin-bottom: 1rem; }
  .container > .amenity__desc { margin-top: 2px; }
  .container > .amenity__name { margin-bottom: 0; }
  .container > .contact__item { margin-bottom: 1.5rem; }
  .container > .section__header { margin-bottom: 3rem; }
  .container > .section__heading { margin-bottom: 2rem; }
  .container > .section__pretitle { margin-bottom: .5rem; }
  .container > .section__title { margin-bottom: 1rem; }
  .hero__content > .hero__logo { margin-bottom: 2rem; }
  .hero__content > .hero__registro { margin-bottom: 2.5rem; }
  .hero__content > .hero__title { margin-bottom: 1.25rem; }
  .info-importante > .info-importante__desc { margin: 0; }
  .info-importante > .info-importante__label { margin-bottom: 2px; }
  .info-importante > .info-importante__title { margin-bottom: 1.5rem; }
  .info-importante__grid > .info-importante__desc { margin: 0; }
  .info-importante__grid > .info-importante__label { margin-bottom: 2px; }
  .info-importante__item > .info-importante__desc { margin: 0; }
  .info-importante__item > .info-importante__label { margin-bottom: 2px; }
  .section__header > .amenities__category { margin-bottom: 2rem; }
  .section__header > .amenities__category-title { margin-bottom: 1rem; }
  .section__header > .amenity__desc { margin-top: 2px; }
  .section__header > .amenity__name { margin-bottom: 0; }
  .section__header > .section__pretitle { margin-bottom: .5rem; }
  .section__header > .section__title { margin-bottom: 1rem; }
  .section__heading > .contact__item { margin-bottom: 1.5rem; }
  .section__heading > .section__pretitle { margin-bottom: .5rem; }
  .section__heading > .section__title { margin-bottom: 1rem; }
  .testimonials__grid > .testimonial__text { margin-bottom: 1.25rem; }
  .testimonials__grid > .testimonials__link { margin-top: 2rem; }

/* ==========================================================================
   Tablas legales en bloque core/table
   El bloque pone la clase en el <figure>, no en el <table> (es lo único que
   su save() genera; cualquier otra cosa hace que Gutenberg marque el bloque
   como contenido no válido). Las propiedades que solo tienen sentido en la
   tabla se redirigen al hijo.
   ========================================================================== */
figure.legal__table { margin: 1rem 0; }
figure.legal__table > table { width: 100%; border-collapse: collapse; font-size: .9rem; }

/* ==========================================================================
   Mapa de contacto: imagen estática enlazada, sin iframe
   Los iframes de Google Maps se cargaban antes de cualquier consentimiento.
   Ahora es una imagen local con un enlace que solo se sigue si el visitante
   lo pulsa. La atribución de OpenStreetMap va dentro del propio archivo, para
   que no se pueda perder al mover el markup.
   ========================================================================== */
.contact__mapa {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  line-height: 0;
}
.contact__mapa img { width: 100%; height: auto; display: block; }
.contact__mapa-cta {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  background: var(--color-primary, #1B6B4A);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .85rem;
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: background-color var(--transition-base, .2s ease);
}
@media (hover: hover) {
  .contact__mapa:hover .contact__mapa-cta { background: var(--color-primary-dark, #144F38); }
}
@media (prefers-reduced-motion: reduce) {
  .contact__mapa-cta { transition: none; }
}


/* ==========================================================================
   Hero: el margen negativo que coloca el logo
   `.hero__content` se sube con margin-top NEGATIVO para que el logo quede sobre
   el fondo verde, montado a caballo del borde de la foto. Dos cosas lo
   anulaban: el `.is-layout-flow > *` de WordPress y —sobre todo— una regla
   propia de compatibilidad que ponia margin-block:0 a los grupos.
   Se re-declara con el selector padre > hijo (0,2,0) y con EL MISMO corte
   responsive del CSS original (375px), no con un valor unico: aplanar las dos
   variantes en una habria descolocado el logo en movil.
   Valores verificados contra el CSS que sirve produccion.
   ========================================================================== */
.hero > .hero__content { margin-top: -75px; }
@media (max-width: 375px) {
  .hero > .hero__content { margin-top: -56px; }
}

/* ==========================================================================
   Imágenes de la portada como bloque nativo (core/image)
   Antes eran <img> dentro de un <div> en wp:html. Ahora core/image las envuelve
   en <figure class="wp-block-image …">, y la clase original va en ese figure.
   Las reglas `.hero__bg img`, `.about__image img` y `.cta-banner__bg img` del
   CSS portado siguen aplicando porque son descendientes; lo único que hay que
   neutralizar es la caja propia que el bloque trae de serie (margen inferior
   de figure y el max-width de las imágenes de bloque).
   ========================================================================== */
figure.wp-block-image.hero__bg,
figure.wp-block-image.about__image,
figure.wp-block-image.cta-banner__bg {
  margin: 0;
  padding: 0;
  max-width: none;
}
figure.wp-block-image.hero__bg > img,
figure.wp-block-image.about__image > img,
figure.wp-block-image.cta-banner__bg > img {
  max-width: none;
  border-radius: inherit;
}
/* .about__image recorta con border-radius: el figure debe recortar igual. */
figure.wp-block-image.about__image { overflow: hidden; }