/* =========================================================
   tinaguache — sistema de diseño (prototipo HTML)
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Paleta */
  --color-bone: #F5F1EA;
  --color-paper: #FAFAF7;
  --color-sand: #E8DDD0;
  --color-terracotta: #B97A5E;
  --color-olive: #7A8068;
  --color-carbon: #2B2926;
  --color-stone: #B0AEA8;
  --color-text-muted: #5F5E5A;

  /* Tipografía */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 48px;
  --space-xxl: 96px;

  /* Layout */
  --content-max: 1440px;
  --content-pad: clamp(20px, 4vw, 56px);

  /* Acento dinámico (cada página puede sobrescribirlo) */
  --color-accent: var(--color-terracotta);
}

/* Página "El refugio" — Villa II usa oliva */
body.refuge {
  --color-accent: var(--color-olive);
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-carbon);
  background: var(--color-bone);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
em { font-style: italic; }

/* ---------- Tipografía utilities ---------- */
.serif { font-family: var(--font-serif); font-weight: 400; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow--muted { color: var(--color-stone); }
.eyebrow--olive { color: var(--color-olive); }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; margin: 0; line-height: 1.2; letter-spacing: -0.005em; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }
p { margin: 0 0 1em; }
p.lead { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.85; color: var(--color-text-muted); }
.cite {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}
.section { padding: clamp(56px, 9vw, 112px) 0; }
.section--paper { background: var(--color-paper); border-top: 0.5px solid rgba(176,174,168,0.4); border-bottom: 0.5px solid rgba(176,174,168,0.4); }
.section--dark { background: var(--color-carbon); color: var(--color-bone); }
.section--dark .lead, .section--dark .cite { color: var(--color-stone); }
.section--narrow { padding: clamp(40px, 6vw, 72px) 0; }

/* Sección con imagen de fondo (volcán Tinaguache) */
.section--volcano-bg {
  position: relative;
  background: var(--color-carbon);
  color: var(--color-bone);
  overflow: hidden;
  padding-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(60px, 8vw, 120px);
}
.section--volcano-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: url('../img/web/paisaje-volcanico.jpg') center 30%/cover no-repeat;
  z-index: 0;
}
.section--volcano-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,41,38,0.20) 0%, rgba(43,41,38,0.45) 60%, rgba(43,41,38,0.65) 100%);
  z-index: 1;
}
.section--volcano-bg > .container { position: relative; z-index: 2; }
.section--volcano-bg h2 { color: var(--color-bone); }
.section--volcano-bg .eyebrow { color: var(--color-sand); }
.section--volcano-bg p.lead { color: rgba(245,241,234,0.92); }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,241,234,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid rgba(176,174,168,0.35);
}
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.navbar__logo {
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: 0.5px;
  color: var(--color-carbon);
}
.navbar__nav { display: flex; gap: 28px; align-items: center; }
.navbar__nav > a, .navbar__nav > .has-dropdown > a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-carbon);
  transition: color 0.2s;
  display: inline-block;
}
.navbar__nav > a:hover, .navbar__nav > .has-dropdown > a:hover { color: var(--color-accent); }

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
}
.navbar__sub {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 240px;
  background: rgba(245,241,234,0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid rgba(176,174,168,0.35);
  border-radius: 4px;
  padding: 10px 0;
  margin-top: 6px;
  box-shadow: 0 10px 30px -10px rgba(43,41,38,0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 60;
}
.has-dropdown:hover .navbar__sub,
.has-dropdown:focus-within .navbar__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.navbar__sub a {
  display: block;
  padding: 9px 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-carbon);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.navbar__sub a:hover { background: rgba(185,122,94,0.08); color: var(--color-accent); }
.navbar__sub a small {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  letter-spacing: 0.8px;
  text-transform: none;
  color: var(--color-olive);
  font-weight: 400;
}
.navbar__lang {
  font-size: 11px;
  letter-spacing: 1.1px;
  color: var(--color-olive);
  display: flex; gap: 6px; align-items: center;
}
.navbar__lang a { color: var(--color-olive); transition: color 0.2s; }
.navbar__lang a:hover { color: var(--color-accent); }
.navbar__lang .active { color: var(--color-carbon); font-weight: 500; }
.navbar__lang .sep { opacity: 0.4; }
@media (max-width: 760px) {
  .navbar__nav { display: none; }
  .navbar__lang { font-size: 10px; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 720px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--color-bone);
  background: var(--color-carbon);
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.78;
  z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,41,38,0.25) 0%, rgba(43,41,38,0.55) 100%);
  z-index: 1;
}
.hero__content {
  position: relative; z-index: 2;
  padding: 0 var(--content-pad);
  max-width: 780px;
}
.hero__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: var(--space-l);
}
.hero h1 { color: var(--color-bone); }
.hero__scroll {
  margin-top: var(--space-xl);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--color-stone);
  font-style: italic;
}

/* ---------- Hero (ficha de villa) ---------- */
.villa-hero {
  position: relative;
  min-height: clamp(440px, 62vh, 620px);
  display: flex; align-items: flex-end;
  background: var(--color-sand);
  overflow: hidden;
}
.villa-hero__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 1.2px; color: var(--color-stone);
  background: var(--color-sand);
}
.villa-hero__content {
  position: relative; z-index: 2;
  width: 100%;
  padding: var(--space-xl) var(--content-pad) var(--space-l);
  background: linear-gradient(transparent, rgba(245,241,234,0.95));
}
.villa-hero__meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: var(--space-s);
}

/* ---------- Capítulo (bloque imagen + texto alternado) ---------- */
.chapter {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.chapter--reverse { grid-template-columns: 1.3fr 1fr; }
.chapter--reverse .chapter__media { order: -1; }
.chapter__time {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--color-accent);
  margin-bottom: var(--space-m);
  text-transform: uppercase;
}
.chapter__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.2;
  margin-bottom: var(--space-l);
}
.chapter__media {
  background: var(--color-sand);
  min-height: 440px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 1px; color: var(--color-stone);
  position: relative;
  overflow: hidden;
}
.chapter__media img, .villa-hero img, .climax__media img,
.villa-card__media img, .poi-grid__item img,
.location__map img,
.chapter__media video, .villa-hero video, .climax__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Movimiento universal — Ken Burns sutil en TODAS las imágenes web */
@keyframes kenburns-soft {
  0%   { transform: scale(1) translate(0%, 0%); }
  100% { transform: scale(1.045) translate(-0.5%, 0.25%); }
}
.chapter__media img, .villa-hero img, .villa-card__media img,
.poi-grid__item img, .location__map img {
  animation: kenburns-soft 36s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}

/* Variación: nth-child desfasa duración y dirección para evitar sincronización */
.story-grid > article:nth-child(even) .chapter__media img { animation-duration: 30s; animation-direction: alternate-reverse; }
.story-grid > article:nth-child(odd)  .chapter__media img { animation-duration: 38s; }
.poi-grid__item:nth-child(2) img { animation-duration: 32s; animation-direction: alternate-reverse; }
.poi-grid__item:nth-child(3) img { animation-duration: 42s; }
.villas-grid > *:nth-child(2) .villa-card__media img { animation-duration: 34s; animation-direction: alternate-reverse; }
.chapter--reverse .chapter__media img { animation-duration: 40s; animation-direction: alternate-reverse; }

/* Ken Burns más marcado para clímax y bloques destacados */
@keyframes kenburns {
  0%   { transform: scale(1) translate(0%, 0%); }
  50%  { transform: scale(1.06) translate(-1%, 0.5%); }
  100% { transform: scale(1) translate(0%, 0%); }
}
.kb img, .climax__media img { animation: kenburns 22s ease-in-out infinite; transform-origin: center; will-change: transform; }

@keyframes kenburns-slow {
  0%   { transform: scale(1.02) translate(0%, 0%); }
  100% { transform: scale(1.10) translate(-1.5%, -0.5%); }
}
.kb-slow img { animation: kenburns-slow 28s ease-in-out infinite alternate; transform-origin: center; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .chapter__media img, .villa-hero img, .villa-card__media img,
  .poi-grid__item img, .location__map img,
  .kb img, .kb-slow img, .climax__media img { animation: none; }
}
.villa-hero__placeholder, .climax__media, .villa-card__media, .poi-grid__item {
  position: relative; overflow: hidden;
}
@media (max-width: 760px) {
  .chapter, .chapter--reverse { grid-template-columns: 1fr; }
  .chapter--reverse .chapter__media { order: 0; }
  .chapter__media { min-height: 320px; }
}

/* ---------- Capítulo clímax (imagen a sangre + overlay) ---------- */
.climax {
  position: relative;
  min-height: clamp(480px, 72vh, 720px);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-sand);
  text-align: center;
  overflow: hidden;
}
.climax__media {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-sand);
  font-size: 11px; letter-spacing: 1px; color: var(--color-olive);
}
.climax__overlay {
  position: relative; z-index: 2;
  background: rgba(43,41,38,0.55);
  padding: clamp(28px, 5vw, 56px);
  max-width: 540px;
  margin: 0 var(--content-pad);
  color: var(--color-bone);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.climax__overlay .eyebrow { color: var(--color-sand); }
.climax__overlay h2 { color: var(--color-bone); margin-bottom: var(--space-m); }
.climax__overlay .cite { color: var(--color-sand); }

/* ---------- Grid capítulos villa (2x2) ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3.5vw, 40px);
}
.story-grid__item .chapter__media { min-height: 360px; margin-bottom: var(--space-l); }
@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; }
}

/* ---------- AvaiBook iframe + fallback pending ---------- */
.avaibook-iframe {
  width: 100%;
  min-height: 560px;
  border: 0;
  display: block;
  background: var(--color-paper);
}
.booking-pending {
  text-align: center;
  padding: 28px 4px;
}
.booking-pending p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 12px 0 18px;
}
.booking-pending__cta {
  display: inline-block;
  padding: 12px 22px;
  background: var(--color-accent);
  color: var(--color-bone);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
}
.booking-pending__cta:hover { opacity: 0.85; }

/* ---------- Booking panel ---------- */
.booking-panel {
  background: var(--color-paper);
  border: 0.5px solid var(--color-stone);
  padding: clamp(24px, 3vw, 30px);
}
.booking-panel__fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-bottom: 6px;
}
.booking-panel__field {
  border: 0.5px solid var(--color-stone);
  background: var(--color-bone);
  padding: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.booking-panel__field--full { grid-column: span 2; margin-bottom: var(--space-m); }
.booking-panel__cta {
  background: var(--color-accent);
  color: var(--color-bone);
  padding: 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  width: 100%;
  transition: opacity 0.2s;
}
.booking-panel__cta:hover { opacity: 0.85; }
.booking-panel__note {
  font-size: 10px;
  color: var(--color-stone);
  margin-top: 10px;
  text-align: center;
}
.booking-panel__price {
  border-top: 0.5px solid var(--color-stone);
  margin-top: var(--space-m);
  padding-top: 14px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.9;
}
.booking-panel__price-row { display: flex; justify-content: space-between; }
.booking-panel__price-row strong { color: var(--color-carbon); font-weight: 500; }

/* ---------- Section header centrado ---------- */
.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.section-header .eyebrow { margin-bottom: var(--space-m); display: block; }
.section-header h2 { margin-bottom: var(--space-m); }

/* ---------- Equipamiento ---------- */
.amenities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.amenities__item .icon {
  font-size: 22px;
  color: var(--color-olive);
  display: block;
  margin-bottom: var(--space-m);
}
.amenities__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.amenities__list {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.75;
}
@media (max-width: 760px) {
  .amenities { grid-template-columns: 1fr 1fr; }
}

/* ---------- Ubicación ---------- */
.location {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.location__map {
  background: var(--color-sand);
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--color-stone);
}
.location__list {
  font-size: 12px;
  line-height: 1.95;
  color: var(--color-carbon);
}
@media (max-width: 760px) {
  .location { grid-template-columns: 1fr; }
}

/* ---------- Cards de villas ---------- */
.villas-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 18px);
}
.villa-card {
  background: var(--color-paper);
  border: 0.5px solid var(--color-stone);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.villa-card:hover {
  transform: translateY(-2px);
}
.villa-card__media {
  background: var(--color-sand);
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--color-stone);
}
.villa-card__body {
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: var(--space-s);
}
.villa-card__eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.villa-card--luz .villa-card__eyebrow,
.villa-card--luz .villa-card__cta { color: var(--color-terracotta); }
.villa-card--refuge .villa-card__eyebrow,
.villa-card--refuge .villa-card__cta { color: var(--color-olive); }
.villa-card h3 { font-size: 22px; }
.villa-card__excerpt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.75;
}
.villa-card__cta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: var(--space-s);
}
@media (max-width: 760px) {
  .villas-grid { grid-template-columns: 1fr; }
}

/* ---------- Estate banner ---------- */
.estate-banner {
  background: var(--color-carbon);
  color: var(--color-bone);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
  margin-top: clamp(18px, 2.5vw, 28px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-l);
  text-align: left;
}
.estate-banner__text .eyebrow { color: var(--color-terracotta); margin-bottom: 6px; display: block; }
.estate-banner__text h3 { color: var(--color-bone); font-size: 20px; line-height: 1.25; }
.estate-banner__text p { color: var(--color-stone); font-size: 12px; margin-top: 4px; margin-bottom: 0; }
.btn-outline-light {
  display: inline-block;
  padding: 12px 26px;
  border: 0.5px solid var(--color-bone);
  color: var(--color-bone);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-outline-light:hover { background: var(--color-bone); color: var(--color-carbon); }
@media (max-width: 760px) {
  .estate-banner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Cross-sell card simple ---------- */
.crosssell {
  text-align: center;
  padding: clamp(36px, 5vw, 56px) 0;
}
.crosssell__eyebrow { display: block; margin-bottom: var(--space-m); }
.crosssell h3 { font-size: 20px; margin-bottom: var(--space-m); }
.btn-outline-dark {
  display: inline-block;
  padding: 12px 24px;
  border: 0.5px solid var(--color-carbon);
  color: var(--color-carbon);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}
.btn-outline-dark:hover { background: var(--color-carbon); color: var(--color-bone); }

/* ---------- POI grid ---------- */
.poi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s);
}
.poi-grid__item {
  background: var(--color-sand);
  min-height: 200px;
  display: flex; align-items: flex-end;
  padding: var(--space-m);
  font-size: 11px; color: var(--color-text-muted);
  font-family: var(--font-serif); font-size: 14px;
  color: var(--color-carbon);
}
@media (max-width: 760px) {
  .poi-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-carbon);
  color: var(--color-stone);
  padding: clamp(36px, 4vw, 48px) 0;
  font-size: 12px;
  line-height: 1.8;
}
.footer__inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-l);
}
.footer__logo {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-bone);
  margin-bottom: var(--space-s);
}
.footer__credit { color: var(--color-stone); }
.footer__credit-secondary { color: var(--color-olive); margin-top: var(--space-s); display: block; font-size: 11px; }
.footer__gurpi-logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 14px 0 10px;
  /* Convierte el logo azul a blanco/claro para el fondo carbón del footer */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.footer__title {
  color: var(--color-bone);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-s);
}
@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-l); }
}

/* ---------- Booking layout (intro + panel) ---------- */
.booking-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 760px) {
  .booking-layout { grid-template-columns: 1fr; }
}

/* ---------- Misc ---------- */
.placeholder-text {
  display: inline-block;
  padding: 6px 10px;
  background: rgba(122,128,104,0.1);
  border: 0.5px dashed rgba(122,128,104,0.3);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--color-olive);
  border-radius: 2px;
}

/* ---------- Fade-in on scroll (vanilla, lightweight) ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Legal pages (Aviso legal, Privacidad, Cookies) ---------- */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--content-pad) clamp(48px, 8vw, 96px);
  background: var(--color-paper);
}
.legal__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  margin: 8px 0 8px;
  letter-spacing: -0.01em;
}
.legal__updated {
  display: block;
  margin-bottom: var(--space-xl);
  color: var(--color-stone);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.legal h2 {
  font-size: clamp(18px, 2vw, 22px);
  margin: var(--space-xl) 0 var(--space-m);
  padding-top: var(--space-l);
  border-top: 0.5px solid rgba(176,174,168,0.4);
  color: var(--color-carbon);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal ul, .legal ol {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-carbon);
}
.legal ul, .legal ol { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--color-terracotta); border-bottom: 0.5px solid var(--color-terracotta); }
.legal a:hover { opacity: 0.7; }
.legal__meta {
  background: var(--color-bone);
  padding: var(--space-l);
  border-left: 2px solid var(--color-terracotta);
  font-size: 14px;
  line-height: 1.8;
  margin: var(--space-l) 0;
}
.legal__meta strong { color: var(--color-carbon); }

/* ---------- Hero watermark (Gurpi Collection logo) ---------- */
.hero__watermark {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(20px, 3vw, 32px);
  width: clamp(70px, 8vw, 100px);
  height: auto;
  opacity: 0.55;
  filter: brightness(0) invert(1);
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.hero:hover .hero__watermark { opacity: 0.75; }
@media (max-width: 760px) {
  .hero__watermark { width: 60px; opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__watermark { transition: none; }
}

/* ---------- Marca de agua Gurpi Collection (universal en imágenes) ---------- */
/* Garantiza posicionamiento absoluto del overlay */
.location__map { position: relative; overflow: hidden; }

.chapter__media::after,
.villa-card__media::after,
.poi-grid__item::after,
.location__map::after,
.villa-hero__placeholder::after,
.climax__media::after {
  content: '';
  position: absolute;
  top: clamp(10px, 1.5vw, 18px);
  right: clamp(10px, 1.5vw, 18px);
  width: clamp(48px, 5vw, 70px);
  aspect-ratio: 500 / 262;
  background-image: url('../img/logos/gurpi-collection.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.chapter__media:hover::after,
.villa-card__media:hover::after,
.poi-grid__item:hover::after,
.location__map:hover::after,
.villa-hero__placeholder:hover::after,
.climax__media:hover::after { opacity: 0.6; }

@media (max-width: 760px) {
  .chapter__media::after, .villa-card__media::after, .poi-grid__item::after,
  .location__map::after, .villa-hero__placeholder::after, .climax__media::after {
    width: 40px;
    opacity: 0.5;
  }
}

/* ---------- Sección Playas Secretas ---------- */
.beaches-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(28px, 4vw, 48px);
}
.beach-card {
  background: var(--color-bone);
  border: 0.5px solid rgba(176,174,168,0.4);
  padding: clamp(22px, 2.6vw, 34px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex; flex-direction: column;
}
.beach-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(43,41,38,0.08);
}
.beach-card--featured {
  grid-column: 1 / -1;
  background: var(--color-paper);
  border-left: 2px solid var(--color-terracotta);
}
.beach-card__pin {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--color-olive);
  margin-bottom: 10px;
}
.beach-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 12px;
  line-height: 1.25;
}
.beach-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 14px;
  flex: 1;
}
.beach-card__access {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--color-stone);
  font-style: italic;
  border-top: 0.5px solid rgba(176,174,168,0.35);
  padding-top: 12px;
  margin-top: auto;
}
.beaches-foot {
  text-align: center;
  margin-top: clamp(32px, 4vw, 56px);
}
.beaches-foot p {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--color-text-muted);
  font-size: 14px;
  max-width: 540px;
  margin: 0 auto 8px;
}
.beaches-foot__source {
  display: block;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--color-stone);
  text-transform: uppercase;
  margin-top: 14px;
}
@media (max-width: 760px) {
  .beaches-grid { grid-template-columns: 1fr; }
}

/* ---------- Sección aérea (vista desde el aire) ---------- */
.aerial-section {
  position: relative;
  background: var(--color-carbon);
  color: var(--color-bone);
  overflow: hidden;
  min-height: clamp(560px, 85vh, 820px);
  display: flex; align-items: center; justify-content: center;
}
.aerial-section__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.85;
  z-index: 0;
}
.aerial-section__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,41,38,0.30) 0%, rgba(43,41,38,0.55) 100%);
  z-index: 1;
}
.aerial-section__content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 0 var(--content-pad);
  max-width: 760px;
}
.aerial-section .eyebrow { color: var(--color-sand); }
.aerial-section h2 {
  color: var(--color-bone);
  font-size: clamp(28px, 4vw, 48px);
  margin: 14px 0 18px;
}
.aerial-section p {
  color: rgba(245,241,234,0.92);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- Estación meteo: vídeo vertical sin recorte ---------- */
.chapter__media--meteo {
  background: linear-gradient(180deg, #87B5D9 0%, #A8C8E0 60%, #E8DDD0 100%);
  min-height: 560px;
}
.chapter__media--meteo video {
  object-fit: contain !important;
  padding: 0;
}
.chapter__media--meteo::after { display: none; } /* sin marca de agua aquí (no es foto) */

/* ---------- Galería atmósfera ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(28px, 4vw, 48px);
}
.gallery-grid__item {
  position: relative;
  overflow: hidden;
  background: var(--color-sand);
}
.gallery-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-grid__item:hover img { transform: scale(1.03); }
.gallery-grid__item--tall { grid-row: span 2; }
.gallery-grid__item--wide { grid-column: span 2; }
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .gallery-grid__item--wide { grid-column: span 2; }
  .gallery-grid__item--tall { grid-row: span 1; }
}

/* ---------- Nota de disponibilidad bajo cita ---------- */
.cite-note {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(176,174,168,0.4);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--color-stone);
  line-height: 1.6;
}
.cite-note strong { color: var(--color-text-muted); font-weight: 500; }

/* ============================================================
   PÁGINA GALERÍA
   ============================================================ */
.gallery-page__hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(28px, 4vw, 48px);
  text-align: center;
  background: var(--color-paper);
  border-bottom: 0.5px solid rgba(176,174,168,0.4);
}
.gallery-page__hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 56px);
  margin: 14px 0 14px;
}
.gallery-page__hero p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.75;
}
.gallery-filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  padding: clamp(24px, 3vw, 36px) var(--content-pad);
  border-bottom: 0.5px solid rgba(176,174,168,0.4);
  background: var(--color-paper);
}
.filter-btn {
  background: transparent;
  border: 0.5px solid rgba(176,174,168,0.6);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
}
.filter-btn:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}
.filter-btn.is-active {
  background: var(--color-carbon);
  border-color: var(--color-carbon);
  color: var(--color-bone);
}
.gallery-meta {
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-stone);
  padding: 20px 0;
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 6px clamp(48px, 6vw, 96px);
}
@media (max-width: 1100px) { .media-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .media-grid { grid-template-columns: 1fr; } }
.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-sand);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}
.tile img, .tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tile:hover img, .tile:hover video { transform: scale(1.04); }
.tile__badge {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(43,41,38,0.75);
  color: var(--color-bone);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  backdrop-filter: blur(4px);
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(43,41,38,0.96);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox__stage {
  max-width: 92vw;
  max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__stage img, .lightbox__stage video {
  max-width: 100%; max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
}
.lightbox__btn {
  background: rgba(245,241,234,0.1);
  border: 0.5px solid rgba(245,241,234,0.3);
  color: var(--color-bone);
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  transition: all 0.2s ease;
}
.lightbox__btn:hover { background: rgba(245,241,234,0.2); border-color: rgba(245,241,234,0.6); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__footer {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  color: var(--color-stone);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: center;
  max-width: 80vw;
}
.lightbox__counter {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--color-stone);
}
.lightbox__caption {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-bone);
}
@media (max-width: 760px) {
  .lightbox__btn { width: 40px; height: 40px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

/* ---------- Brand logo (navbar + footer): tinaguache · LUXURY ---------- */
.brand-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  gap: 3px;
}
.brand-mark__name {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.5px;
  font-weight: 400;
}
.brand-mark__tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-terracotta);
}
.brand-mark__tag::before,
.brand-mark__tag::after {
  content: '';
  width: 14px; height: 1px;
  background: var(--color-terracotta);
  opacity: 0.7;
}

/* Override navbar__logo cuando contenga brand-mark */
.navbar__logo.brand-mark { color: var(--color-carbon); }

/* Footer version (mayor tamaño y blanco) */
.footer .brand-mark__name { font-size: 26px; color: var(--color-bone); }
.footer .brand-mark__tag { color: var(--color-terracotta); font-size: 9px; gap: 8px; }
.footer .brand-mark__tag::before,
.footer .brand-mark__tag::after { width: 18px; }
.footer .brand-mark { margin-bottom: 14px; }

@media (max-width: 760px) {
  .brand-mark__name { font-size: 18px; }
  .brand-mark__tag { font-size: 7.5px; letter-spacing: 3px; }
  .brand-mark__tag::before, .brand-mark__tag::after { width: 10px; }
}

/* ---------- Vídeo volcán Tinaguache (sección #el-lugar) ---------- */
/* El video se reproduce una vez y se desvanece dejando la foto de fondo (paisaje-volcanico.jpg via ::before) */
.volcano-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 2s ease;
  opacity: 1;
}
.volcano-video.is-ended {
  opacity: 0;
  pointer-events: none;
}
/* Aseguramos que el overlay degradado ::after quede sobre el video */
.section--volcano-bg .volcano-video { z-index: 0; }

/* Encuadre del vídeo del volcán: priorizar la parte superior */
.volcano-video { object-position: center top; }

/* Cap 5 clímax: caja de texto a la izquierda para liberar el centro y la derecha de la imagen */
.climax { justify-content: flex-start !important; text-align: left !important; }
.climax__overlay {
  margin-left: clamp(20px, 5vw, 80px) !important;
  max-width: clamp(280px, 38vw, 460px) !important;
  text-align: left !important;
}
.climax__overlay h2,
.climax__overlay .eyebrow,
.climax__overlay .cite { text-align: left !important; }
@media (max-width: 760px) {
  .climax { justify-content: center !important; text-align: center !important; }
  .climax__overlay { margin-left: 0 !important; text-align: center !important; max-width: 100% !important; }
  .climax__overlay h2, .climax__overlay .eyebrow, .climax__overlay .cite { text-align: center !important; }
}

/* ---------- Sección Famara: featured + grid 2x2 ---------- */
.famara-section { padding: clamp(56px, 9vw, 112px) 0; background: var(--color-bone); }
.famara-feature {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  margin-top: clamp(28px, 4vw, 48px);
  background: var(--color-sand);
}
.famara-feature img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s ease;
}
.famara-feature:hover img { transform: scale(1.04); }
.famara-feature__caption {
  position: absolute;
  bottom: clamp(20px, 3vw, 40px);
  left: clamp(20px, 4vw, 56px);
  background: rgba(245,241,234,0.92);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-carbon);
  backdrop-filter: blur(6px);
}
.famara-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.2vw, 14px);
  margin-top: clamp(8px, 1.2vw, 14px);
}
.famara-grid__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-sand);
}
.famara-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}
.famara-grid__item:hover img { transform: scale(1.05); }
.famara-grid__item__caption {
  position: absolute;
  bottom: 14px; left: 14px;
  background: rgba(245,241,234,0.85);
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-carbon);
  backdrop-filter: blur(4px);
}
.famara-foot {
  text-align: center;
  margin-top: clamp(28px, 4vw, 48px);
}
.famara-foot p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}
@media (max-width: 760px) {
  .famara-grid { grid-template-columns: 1fr; }
}

/* ---------- Stats grid + Info grid (Famara, Timanfaya) ---------- */
.place-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 0.5px solid rgba(176,174,168,0.4);
  border-bottom: 0.5px solid rgba(176,174,168,0.4);
}
.place-stat { text-align: center; }
.place-stat__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 42px);
  color: var(--color-terracotta);
  line-height: 1.1;
  margin-bottom: 8px;
}
.place-stat__label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.4;
}
@media (max-width: 760px) {
  .place-stats { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.place-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(28px, 4vw, 48px);
}
.place-info { }
.place-info h3 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 10px 0 14px;
  line-height: 1.25;
}
.place-info p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-muted);
}
@media (max-width: 760px) {
  .place-info-grid { grid-template-columns: 1fr; }
}

/* Timanfaya section heredada de famara-section */
.timanfaya-section { padding: clamp(56px, 9vw, 112px) 0; background: var(--color-paper); border-top: 0.5px solid rgba(176,174,168,0.4); }
.timanfaya-feature { position: relative; width: 100%; aspect-ratio: 21/9; overflow: hidden; margin-top: clamp(28px,4vw,48px); background: var(--color-sand); }
.timanfaya-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; }
.timanfaya-feature:hover img { transform: scale(1.04); }
.timanfaya-feature__caption {
  position: absolute; bottom: clamp(20px,3vw,40px); left: clamp(20px,4vw,56px);
  background: rgba(245,241,234,0.92); padding: 10px 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--color-carbon); backdrop-filter: blur(6px);
}
.timanfaya-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(8px,1.2vw,14px); margin-top: clamp(8px,1.2vw,14px);
}
.timanfaya-grid__item { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-sand); }
.timanfaya-grid__item img { width:100%; height:100%; object-fit: cover; transition: transform 6s ease; }
.timanfaya-grid__item:hover img { transform: scale(1.05); }
.timanfaya-grid__item__caption {
  position: absolute; bottom: 14px; left: 14px;
  background: rgba(245,241,234,0.85); padding: 6px 12px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-carbon); backdrop-filter: blur(4px);
}
@media (max-width: 760px) { .timanfaya-grid { grid-template-columns: 1fr; } }

/* ---------- POI grid: tiles clicables ---------- */
.poi-grid__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  position: relative;
  align-items: flex-end;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.poi-grid__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(43,41,38,0.12);
}
.poi-grid__link:hover img {
  transform: scale(1.04);
}
.poi-grid__link img { transition: transform 0.7s ease; }

/* ---------- Costa Teguise: beach grid + info blocks ---------- */
.ct-beach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(28px, 4vw, 48px);
}
.ct-beach {
  display: flex; flex-direction: column;
  background: var(--color-paper);
  border: 0.5px solid rgba(176,174,168,0.4);
  overflow: hidden;
}
.ct-beach__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-sand);
}
.ct-beach__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.ct-beach:hover img { transform: scale(1.04); }
.ct-beach h3 {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  margin: clamp(18px, 2.4vw, 24px) clamp(20px, 2.5vw, 28px) 10px;
  line-height: 1.25;
}
.ct-beach p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 clamp(20px, 2.5vw, 28px) clamp(22px, 2.6vw, 28px);
}
@media (max-width: 760px) {
  .ct-beach-grid { grid-template-columns: 1fr; }
}

.ct-info-stack { margin-top: clamp(40px, 5vw, 72px); }
.ct-info-block {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 0.5px solid rgba(176,174,168,0.35);
}
.ct-info-block:last-child { border-bottom: 0.5px solid rgba(176,174,168,0.35); }
.ct-info-block--reverse { grid-template-columns: 1fr 1.1fr; }
.ct-info-block--reverse .ct-info__media { order: 2; }
.ct-info__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-sand);
}
.ct-info__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.ct-info-block:hover img { transform: scale(1.03); }
.ct-info__text h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 34px);
  margin: 12px 0 16px;
  line-height: 1.25;
}
.ct-info__text p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-muted);
}
@media (max-width: 760px) {
  .ct-info-block, .ct-info-block--reverse { grid-template-columns: 1fr; }
  .ct-info-block--reverse .ct-info__media { order: 0; }
}

/* ---------- Watermark Gurpi Collection extendido: nuevos containers ---------- */
.famara-feature, .famara-grid__item, .timanfaya-feature, .timanfaya-grid__item,
.ct-beach__media, .ct-info__media, .aerial-section,
.gallery-grid__item, .beach-card {
  position: relative;
  overflow: hidden;
}
.famara-feature::after,
.famara-grid__item::after,
.timanfaya-feature::after,
.timanfaya-grid__item::after,
.ct-beach__media::after,
.ct-info__media::after,
.gallery-grid__item::after {
  content: '';
  position: absolute;
  top: clamp(10px, 1.5vw, 18px);
  right: clamp(10px, 1.5vw, 18px);
  width: clamp(48px, 5vw, 70px);
  aspect-ratio: 500 / 262;
  background-image: url('../img/web/../logos/gurpi-collection.png'),
                    url('../img/logos/gurpi-collection.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.famara-feature:hover::after,
.famara-grid__item:hover::after,
.timanfaya-feature:hover::after,
.timanfaya-grid__item:hover::after,
.ct-beach__media:hover::after,
.ct-info__media:hover::after,
.gallery-grid__item:hover::after { opacity: 0.6; }
@media (max-width: 760px) {
  .famara-feature::after, .famara-grid__item::after, .timanfaya-feature::after,
  .timanfaya-grid__item::after, .ct-beach__media::after, .ct-info__media::after,
  .gallery-grid__item::after {
    width: 40px; opacity: 0.5;
  }
}

/* ---------- Mobile navbar fix: mostrar menú comprimido en lugar de ocultarlo ---------- */
@media (max-width: 760px) {
  .navbar__nav {
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 9.5px;
    max-width: 60%;
  }
  .navbar__nav a { letter-spacing: 0.8px; font-size: 9.5px; }
  .navbar__inner { gap: 8px; }
  .brand-mark__name { font-size: 16px; }
  .brand-mark__tag { font-size: 7px; letter-spacing: 2.5px; }
  /* En móvil: ocultar dropdown caret y submenú (los 3 enlaces se ponen inline) */
  .has-dropdown > a::after { display: none; }
  .navbar__sub { display: none; }
}
@media (max-width: 480px) {
  .navbar__nav { display: none !important; }
  .navbar__lang { margin-left: auto; }
}

/* ---------- Footer con menú integrado (4 columnas) ---------- */
.footer__inner {
  grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
}
.footer__menu a, .footer__menu div { color: inherit; line-height: 2; }
.footer__menu a:hover { color: var(--color-terracotta); }
@media (max-width: 980px) {
  .footer__inner { grid-template-columns: 1fr 1fr !important; gap: var(--space-l); }
}
@media (max-width: 540px) {
  .footer__inner { grid-template-columns: 1fr !important; }
}

/* ---------- Slideshow hero (Villa I) — crossfade JS ---------- */
.villa-hero__slideshow { position: absolute; inset: 0; z-index: 0; }
.villa-hero__slideshow img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.villa-hero__slideshow img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .villa-hero__slideshow img { transition: none; }
}

/* CTA inline Costa Teguise dentro de Location */
.location-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--color-terracotta);
  color: var(--color-bone);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}
.location-cta:hover { opacity: 0.85; }

/* ---------- Watermark Gurpi Collection: nueva estructura hero Villa I ---------- */
.villa-hero { position: relative; }
.villa-hero::after {
  content: '';
  position: absolute;
  top: clamp(14px, 2vw, 22px);
  right: clamp(14px, 2vw, 22px);
  width: clamp(56px, 6vw, 80px);
  aspect-ratio: 500 / 262;
  background-image: url('../img/logos/gurpi-collection.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  z-index: 11;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.villa-hero:hover::after { opacity: 0.65; }
@media (max-width: 760px) {
  .villa-hero::after { width: 44px; opacity: 0.55; }
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 1000;
  max-width: 720px;
  margin-left: auto;
  background: rgba(245,241,234,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(176,174,168,0.5);
  border-radius: 8px;
  box-shadow: 0 20px 50px -15px rgba(43,41,38,0.25), 0 4px 12px rgba(43,41,38,0.08);
  animation: cookieIn 0.32s ease-out;
}
@keyframes cookieIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cookie-banner--leaving {
  animation: cookieOut 0.28s ease-in forwards;
}
@keyframes cookieOut {
  to { transform: translateY(20px); opacity: 0; }
}
.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 32px);
}
.cookie-banner__title {
  font-family: var(--font-serif, Fraunces, Georgia, serif);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  margin: 0 0 8px;
  color: #2B2926;
  letter-spacing: -0.01em;
}
.cookie-banner__body {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  color: #5F5E5A;
}
.cookie-banner__link {
  color: #B97A5E;
  border-bottom: 0.5px solid #B97A5E;
  text-decoration: none;
  white-space: nowrap;
}
.cookie-banner__link:hover { color: #9E6649; }
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.cookie-banner__btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 4px;
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.cookie-banner__btn--primary {
  background: #2B2926;
  color: #F5F1EA;
  border-color: #2B2926;
}
.cookie-banner__btn--primary:hover { background: #B97A5E; border-color: #B97A5E; }
.cookie-banner__btn--ghost {
  background: transparent;
  color: #2B2926;
  border-color: rgba(176,174,168,0.6);
}
.cookie-banner__btn--ghost:hover { border-color: #B97A5E; color: #B97A5E; }
.cookie-banner__cats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  max-height: min(50vh, 380px);
  overflow-y: auto;
  padding-right: 4px;
}
.cookie-banner__cat {
  padding: 12px 0;
  border-top: 0.5px solid rgba(176,174,168,0.35);
}
.cookie-banner__cat:first-child { border-top: none; padding-top: 0; }
.cookie-banner__cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cookie-banner__cat-head label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #2B2926;
  cursor: pointer;
}
.cookie-banner__cat-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #5F5E5A;
  margin: 0;
}
.cookie-banner__cat-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #7A8068;
  background: rgba(122,128,104,0.12);
  padding: 3px 10px;
  border-radius: 99px;
}
.cookie-banner__check {
  width: 38px;
  height: 22px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(176,174,168,0.4);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0;
  flex-shrink: 0;
}
.cookie-banner__check::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #F5F1EA;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(43,41,38,0.2);
}
.cookie-banner__check:checked { background: #B97A5E; }
.cookie-banner__check:checked::after { transform: translateX(16px); }
@media (max-width: 600px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__btn { flex: 1; padding: 12px 12px; font-size: 10.5px; letter-spacing: 0.9px; }
}