/*
Theme Name: Pollensina
Theme URI: https://pollensina.com
Author: Pollensina
Description: Tema a medida para Pollensina — villas de lujo en Pollensa, Mallorca. Generado a partir del diseño editorial original (home, listado de villas, ficha de villa).
Version: 2.9.5
Text Domain: pollensina
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --c1: #ffffff;
  --c2: #f8f5f1;
  --c3: #ece8e2;
  --footer-bg: #221f1f;
  --ink: #221f1f;
  --ink-50: rgba(34,31,31,.5);
  --ink-10: rgba(34,31,31,.10);
  --stone: #7C756A; /* tono cálido secundario, rediseño editorial de la ficha de noticias (sesión 16) */
  --sea: #2E6E6A; /* acento para enlaces dentro del cuerpo del artículo, mismo rediseño */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --reckless: 'Reckless Neue', 'Reckless', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --nav-h: 70px;
  --pad: 120px;
  --gap: 10px;
}

body {
  background: var(--c1); color: var(--ink);
  font-family: var(--sans); font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* ─── Preloader ─────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; z-index: 9999; background: var(--c1);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .8s var(--ease), visibility .8s;
}
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pre-logo { margin-bottom: 44px; }
.pre-logo img { height: 28px; width: auto; display: block; }
.pre-bar-wrap { width: 100px; height: 1px; background: rgba(34,31,31,.12); overflow: hidden; }
.pre-bar { height: 100%; background: var(--ink); transform: translateX(-100%);
           animation: loadBar 1.6s var(--ease) forwards; }
@keyframes loadBar { to { transform: translateX(0); } }
.pre-count { margin-top: 16px; font-size: 10px; letter-spacing: .2em; color: var(--ink-50); font-family: var(--sans); }

/* ─── Floating Book Now ──────────────────────────────────── */
.btn-book {
  position: fixed; bottom: 36px; right: 36px; z-index: 500;
  background: rgba(34,31,31,.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 20px 36px; border-radius: 60px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 32px rgba(34,31,31,.25);
  transition: background .25s, transform .25s, box-shadow .25s;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.btn-book:hover { background: rgba(34,31,31,.80); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(34,31,31,.35); }

/* ─── Floating WhatsApp — mini-chat de disponibilidad ───────
   Apilada justo encima de Book Now, mismo lado (right:36px), mismo
   material (cristal esmerilado sobre --ink) para que lean como un
   mismo grupo de acciones flotantes en vez de dos widgets sueltos
   compitiendo entre sí. Ver inc/whatsapp-widget.php (PHP) y la
   sección "BURBUJA DE WHATSAPP" en main.js (JS). ─────────────── */
.wa-widget { position: fixed; bottom: 112px; right: 36px; z-index: 501; }
.wa-fab {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,31,31,.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 32px rgba(34,31,31,.25);
  transition: background .25s, transform .25s, box-shadow .25s, color .25s;
}
.wa-fab:hover { background: var(--sea); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(46,110,106,.35); }
.wa-widget.open .wa-fab { background: var(--sea); }

.wa-panel {
  position: absolute; bottom: 76px; right: 0;
  width: 340px; max-width: calc(100vw - 40px);
  background: var(--c1); border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(34,31,31,.28);
  display: flex; flex-direction: column;
  animation: waPanelIn .25s var(--ease);
}
@keyframes waPanelIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.wa-panel-head {
  position: relative; padding: 20px 44px 16px 20px;
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.wa-panel-title { font-size: 15px; font-weight: 500; }
.wa-panel-sub { font-size: 12px; opacity: .6; }
.wa-panel-close {
  position: absolute; top: 12px; right: 14px; width: 26px; height: 26px;
  font-size: 20px; line-height: 1; color: #fff; opacity: .7;
  display: flex; align-items: center; justify-content: center;
}
.wa-panel-close:hover { opacity: 1; }

.wa-panel-body {
  padding: 18px 20px 4px; display: flex; flex-direction: column; gap: 16px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* El calendario de doble mes (.dp-panel) está pensado para el widget ancho
   de Villas (600px) o el formulario de Contacto — dentro de este mini-chat
   (340px, con overflow:hidden para redondear las esquinas) se salía por los
   lados y cortaba los meses. Aquí se hace fluido al ancho del campo y con
   los dos meses apilados, y el panel entero limita su alto máximo dejando
   que solo el cuerpo (.wa-panel-body) haga scroll interno — así la cabecera
   (con la X de cerrar) y el pie nunca quedan fuera de la pantalla en
   móviles con poca altura. */
.wa-panel { max-height: calc(100vh - 140px); }
.wa-panel .dp-panel {
  position: static; width: 100%; transform: none; z-index: auto;
  box-shadow: none; border: 1px solid var(--ink-10); border-radius: 10px;
  margin-top: 8px; padding: 16px 16px 14px;
}
.wa-panel .dp-cals { grid-template-columns: 1fr; gap: 14px; }
.wa-bubble {
  background: var(--c2); border-radius: 14px 14px 14px 2px;
  padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink);
}
.wa-field label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; margin-bottom: 6px; }
.wa-field .dp-wrap { width: 100%; }
.wa-field .dp-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--ink-10); border-radius: 10px; padding: 10px 12px; font-size: 13px;
}
.wa-select {
  width: 100%; border: 1px solid var(--ink-10); border-radius: 10px; padding: 10px 12px;
  font-size: 13px; font-family: var(--sans); color: var(--ink); background: #fff;
}
.wa-stepper { display: flex; align-items: center; gap: 14px; }
.wa-stepper button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink-10);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.wa-stepper button:hover { background: var(--c2); }
.wa-stepper span { min-width: 18px; text-align: center; font-size: 14px; }

.wa-panel-footer { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.wa-send-btn {
  background: var(--sea); color: #fff; border-radius: 999px; padding: 13px 18px;
  font-size: 14px; font-weight: 500; text-align: center; transition: background .2s, transform .2s;
}
.wa-send-btn:hover { background: #255b57; transform: translateY(-1px); }
.wa-skip-btn { font-size: 12px; opacity: .5; text-align: center; text-decoration: underline; }
.wa-skip-btn:hover { opacity: .8; }

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .35s var(--ease), border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(34,31,31,.08);
}
.nav-logo img { height: 22px; width: auto; display: block; }
.nav-links { display: flex; gap: 30px; list-style: none; align-items: center; }
.nav-links a { font-size: 14px; opacity: .55; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-links a.active,
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a { opacity: 1; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.nav-cta {
  font-size: 14px; padding: 8px 20px; border: 1px solid rgba(34,31,31,.20);
  transition: border-color .2s, background .2s;
  /* Sesión 17: vuelve a ser un <a> (lleva a la página de contacto, ya no
     abre el emergente de reserva) — se mantiene el reset por si algún
     día vuelve a ser un <button>. */
  background: transparent; font-family: inherit; color: inherit; cursor: pointer;
  display: inline-block;
}
.nav-cta:hover { border-color: var(--ink); }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav-burger span { display: block; width: 20px; height: 1px; background: var(--ink); }
.nav-links.open { display: flex; }

/* Mobile menu panel (simple, off-canvas not in original — collapses to a stacked list) */
@media (max-width: 900px) {
  .nav-links {
    display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: flex-start; gap: 0;
    border-bottom: 1px solid rgba(34,31,31,.08);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 16px 30px; width: 100%; opacity: .8; }
}

/* ─── Scroll reveal ──────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(28px);
      transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.on { opacity: 1; transform: none; }
.d1 { transition-delay: .10s; } .d2 { transition-delay: .20s; } .d3 { transition-delay: .30s; }

/* ─── Zoom hover ─────────────────────────────────────────── */
.zoom { overflow: hidden; }
.zoom img, .zoom video { transition: transform 1s var(--ease); }
.zoom:hover img, .zoom:hover video { transform: scale(1.04); }

/* ─── Section backgrounds ───────────────────────────────── */
.bg-1 { background: var(--c1); }
.bg-2 { background: var(--c2); }
.bg-3 { background: var(--c3); }
.divider { height: 1px; background: rgba(34,31,31,.08); }

/* ══════════════════════════════════════════════════════════
   HOME HERO (front-page.php)
══════════════════════════════════════════════════════════ */
.hero {
  position: relative; width: 100%; height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.55) 100%);
}
.hero-content {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding: 0 40px;
}
.hero-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.65);
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s .3s var(--ease), transform .8s .3s var(--ease);
}
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 7vw, 96px); line-height: .95; letter-spacing: -1.5px;
  color: #fff; max-width: 820px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s .5s var(--ease), transform 1s .5s var(--ease);
}
.hero-sub {
  font-family: var(--sans); font-size: 15px; line-height: 22px;
  color: rgba(255,255,255,.72); max-width: 400px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s .8s var(--ease), transform .8s .8s var(--ease);
}
.hero-ctas {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s 1s var(--ease), transform .8s 1s var(--ease);
}
body.loaded .hero-label, body.loaded .hero-title,
body.loaded .hero-sub, body.loaded .hero-ctas { opacity: 1; transform: none; }

.btn-hero-primary {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  background: #fff; color: var(--ink);
  padding: 16px 32px; transition: background .2s, color .2s;
}
.btn-hero-primary:hover { background: var(--ink); color: #fff; }
.btn-hero-ghost {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.55); color: #fff;
  padding: 16px 32px; transition: background .2s, border-color .2s;
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.hero-scroll {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.55); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; font-family: var(--sans);
}
.hero-scroll-line { width: 1px; height: 40px; background: rgba(255,255,255,.3); animation: scrollPulse 2s infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }

/* ══════════════════════════════════════════════════════════
   INTRO (home editorial H1)
══════════════════════════════════════════════════════════ */
.intro {
  padding: 100px var(--pad) 100px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  max-width: 1920px; margin: 0 auto;
}
/* Selectores por descendiente (".intro h2", ".intro-right p"), no por clase:
   el título y los párrafos vienen del editor de bloques de WordPress, que
   pone sus propias clases (wp-block-heading, etc.) — igual que ya se hace
   en ".intro-strip h2"/".intro-strip p" para el listado de villas. */
.intro h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4vw, 58px); line-height: 1.05; letter-spacing: -.4px;
  color: var(--ink); margin: 0;
}
.intro-label {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50);
  margin-bottom: 24px; display: block;
}
.intro-right p {
  font-family: var(--sans); font-size: 17px; line-height: 26px; color: var(--ink);
  margin-bottom: 20px;
}
.intro-right p:last-of-type { margin-bottom: 0; }
.btn-text {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .2s;
}
.btn-text:hover { gap: 14px; }

/* ══════════════════════════════════════════════════════════
   Shared section label/title (home + villas archive headers)
══════════════════════════════════════════════════════════ */
.s-label {
  display: block; font-family: var(--sans); font-weight: 500; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
  margin-bottom: 14px;
}
.s-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 50px; line-height: 50px; letter-spacing: -.2px; color: var(--ink);
  max-width: 460px;
}

/* ══════════════════════════════════════════════════════════
   HOME — VILLAS GRID (featured villas)
══════════════════════════════════════════════════════════ */
.villas-section { padding: 80px var(--pad) 120px; max-width: 1920px; margin: 0 auto; }
.villas-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 50px; }
.villas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; }
.villa-card { display: block; position: relative; }
.villa-card-img { overflow: hidden; }
.villa-card-img img { transition: transform 1.2s var(--ease); width: 100%; height: 100%; object-fit: cover; }
.villa-card:hover .villa-card-img img { transform: scale(1.06); }
.villa-card-info { padding: 20px 0 0; display: flex; justify-content: space-between; align-items: flex-start; }
.villa-card-name { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 28px; color: var(--ink); }
.villa-card-loc { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-top: 6px; display: block; }
.villa-card-arrow { font-size: 20px; color: var(--ink); opacity: .4; transition: opacity .2s, transform .2s; margin-top: 4px; flex-shrink: 0; }
.villa-card:hover .villa-card-arrow { opacity: 1; transform: translateX(4px); }
.villa-card--featured { grid-column: 1 / 3; }
.villa-card--featured .villa-card-img,
.villa-card--right .villa-card-img { height: 520px; }
.villa-card--sm .villa-card-img { aspect-ratio: 4/3; }

/* ══════════════════════════════════════════════════════════
   HOME — EDITORIAL BLOCKS (alternating)
══════════════════════════════════════════════════════════ */
.editorial {
  padding: 80px var(--pad) 120px; max-width: 1920px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.editorial--reverse .ed-visual { order: -1; }
.ed-visual { aspect-ratio: 5/4; overflow: hidden; }
.ed-label { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 18px; display: block; }
.ed-title { font-family: var(--serif); font-size: 46px; font-weight: 400; line-height: 48px; letter-spacing: -.3px; color: var(--ink); margin-bottom: 22px; max-width: 400px; }
.ed-body { font-family: var(--sans); font-size: 16px; line-height: 25px; color: var(--ink); opacity: .8; margin-bottom: 32px; max-width: 380px; }

/* ══════════════════════════════════════════════════════════
   HOME — PRESS / AWARDS MARQUEE
══════════════════════════════════════════════════════════ */
.press-section { padding: 60px 0; border-top: 1px solid rgba(34,31,31,.08); border-bottom: 1px solid rgba(34,31,31,.08); overflow: hidden; }
.press-track { display: flex; gap: 80px; width: max-content; animation: marquee 28s linear infinite; }
.press-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.press-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: nowrap; }
.press-pub { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
.press-award { font-family: var(--serif); font-size: 18px; color: var(--ink); font-style: italic; }

/* ══════════════════════════════════════════════════════════
   HOME — TESTIMONIALS
══════════════════════════════════════════════════════════ */
.quotes-section { padding: 100px var(--pad); max-width: 1920px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; }
.quote-mark { font-family: var(--serif); font-size: 60px; line-height: .6; color: rgba(34,31,31,.15); display: block; margin-bottom: 20px; }
.quote-text { font-family: var(--serif); font-size: 22px; line-height: 30px; font-style: italic; color: var(--ink); margin-bottom: 20px; }
.quote-source { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); }

/* ══════════════════════════════════════════════════════════
   HOME — BLOG / NOTICIAS
══════════════════════════════════════════════════════════ */
.news-section { padding: 80px var(--pad) 120px; max-width: 1920px; margin: 0 auto; }
.news-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 50px; }
.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.news-card { display: block; }
.news-card-img { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 20px; }
.news-card-img img { transition: transform 1s var(--ease); }
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-card-cat { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 10px; display: block; }
.news-card-title { font-family: var(--serif); font-size: 26px; font-weight: 400; line-height: 28px; color: var(--ink); margin-bottom: 12px; }
.news-card-excerpt { font-family: var(--sans); font-size: 14px; line-height: 21px; color: var(--ink); opacity: .65; }

/* ══════════════════════════════════════════════════════════
   BLOG (home.php) — noticia destacada + cuadrícula + paginación.
   La cuadrícula reutiliza .news-grid/.news-card (misma familia visual
   que el bloque "Novedades" de la portada).
══════════════════════════════════════════════════════════ */
.blog-featured-wrap { padding: 70px var(--pad) 0; max-width: 1920px; margin: 0 auto; }
.blog-featured-card {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
  background: var(--c2);
}
.blog-featured-img { position: relative; min-height: 360px; }
.blog-featured-body { display: flex; flex-direction: column; justify-content: center; padding: 48px 60px; }
.blog-featured-tag {
  display: inline-block; align-self: flex-start;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; background: var(--ink); padding: 7px 14px; margin-bottom: 18px;
}
.blog-featured-body .news-card-cat { margin-bottom: 14px; }
.blog-featured-title { font-family: var(--serif); font-size: 42px; font-weight: 400; line-height: 1.08; color: var(--ink); margin-bottom: 16px; }
.blog-featured-body .news-card-excerpt { font-size: 15px; line-height: 24px; max-width: 480px; }

.blog-section { padding: 80px var(--pad) 120px; max-width: 1920px; margin: 0 auto; }

.blog-section .pagination { margin-top: 20px; }
.blog-section .pagination .nav-links {
  display: flex; justify-content: center; align-items: center; gap: 10px; list-style: none; flex-wrap: wrap;
}
.blog-section .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  font-family: var(--sans); font-size: 13px; color: var(--ink); opacity: .55;
  border: 1px solid rgba(34,31,31,.16); transition: opacity .2s, border-color .2s;
}
.blog-section .page-numbers:hover { opacity: 1; border-color: var(--ink); }
.blog-section .page-numbers.current { opacity: 1; border-color: var(--ink); font-weight: 600; }
.blog-section .page-numbers.dots { border: none; }

@media (max-width: 900px) {
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-img { min-height: 280px; }
  .blog-featured-body { padding: 32px var(--pad); }
  .blog-featured-title { font-size: 32px; }
}

/* ══════════════════════════════════════════════════════════
   PRE-FOOTER (shared)
══════════════════════════════════════════════════════════ */
.res-bar {
  background: #9c8b79; padding: 22px var(--pad);
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; text-align: center;
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.70);
}
.res-bar strong { color: #fff; font-weight: 700; }
.res-bar a { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.5); transition: border-color .2s; }
.res-bar a:hover { border-color: #fff; }

.stay { background: var(--footer-bg); padding: 64px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.stay-title { font-family: var(--reckless); font-size: 34px; font-weight: 700; color: #fff; line-height: 38px; white-space: nowrap; }
.stay-desc { font-family: var(--sans); font-size: 15px; line-height: 23px; color: rgba(255,255,255,.55); max-width: 420px; }
.stay-form { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.stay-input {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #fff;
  font-family: var(--sans); font-size: 14px; padding: 16px 18px; min-width: 240px;
}
.stay-input::placeholder { color: rgba(255,255,255,.45); }
.stay-input:focus { outline: none; border-color: #fff; }
.stay-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.stay-btn { flex-shrink: 0; background: #7a1c1c; color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 18px 32px; border: none; cursor: pointer; transition: background .2s; }
.stay-btn:hover { background: #961f1f; }
.stay-btn:disabled { opacity: .6; cursor: default; }
.stay-msg { width: 100%; margin-top: 6px; font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.7); }
/* Vacío (antes de enviar el formulario), este párrafo de estado no debe
   ocupar sitio: al llevar width:100% dentro de un flex con flex-wrap,
   aunque esté vacío fuerza su propia línea y deja un hueco debajo del
   formulario — por eso se oculta del todo mientras no tenga texto. */
.stay-msg:empty { display: none; margin-top: 0; }
.stay-msg.is-error { color: #e8a1a1; }
.stay-msg.is-success { color: #a8d8a8; }

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

/* ══════════════════════════════════════════════════════════
   FORMULARIO DE RESERVA (emergente, compartido en todas las páginas)
══════════════════════════════════════════════════════════ */
.booking-modal {
  position: fixed; inset: 0; z-index: 2000;
  visibility: hidden; opacity: 0;
  transition: opacity .3s var(--ease), visibility .3s;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.booking-modal.open { visibility: visible; opacity: 1; }
.booking-modal-overlay {
  position: absolute; inset: 0; background: rgba(34,31,31,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.booking-modal-panel {
  position: relative; background: var(--c1); width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto; padding: 56px 48px 40px;
  box-shadow: 0 24px 80px rgba(34,31,31,.35);
  transform: translateY(16px); transition: transform .3s var(--ease);
}
.booking-modal.open .booking-modal-panel { transform: translateY(0); }
.booking-modal-close {
  position: absolute; top: 18px; right: 20px; width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1;
  color: var(--ink-50); transition: color .2s;
}
.booking-modal-close:hover { color: var(--ink); }
.booking-modal-label {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-50); display: block; margin-bottom: 10px;
}
.booking-modal-title {
  font-family: var(--serif); font-size: 32px; font-weight: 400; color: var(--ink);
  line-height: 1.15; margin-bottom: 6px;
}
.booking-modal-villa {
  font-family: var(--sans); font-size: 14px; color: var(--ink-50); margin-bottom: 24px;
}
#pollensina-booking-form { margin-top: 24px; }
.booking-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-bottom: 8px;
}
.booking-field-full { grid-column: 1 / -1; }
.booking-field label {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 6px;
}
.booking-field input,
.booking-field textarea {
  width: 100%; background: var(--c2); border: 1px solid rgba(34,31,31,.14);
  color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 13px 14px;
  transition: border-color .2s;
}
.booking-field input:focus,
.booking-field textarea:focus { outline: none; border-color: var(--ink); }
.booking-field textarea { resize: vertical; min-height: 70px; }
.booking-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.booking-submit {
  width: 100%; text-align: center; border: none; cursor: pointer; margin-top: 20px;
}
.booking-submit:disabled { opacity: .6; cursor: default; }
.booking-msg { margin-top: 12px; font-family: var(--sans); font-size: 13px; color: var(--ink); text-align: center; }
.booking-msg.is-error { color: #b23a3a; }
.booking-msg.is-success { color: #2f7d4f; }
.booking-fine-print {
  margin-top: 16px; font-family: var(--sans); font-size: 11px; line-height: 16px;
  color: var(--ink-50); text-align: center;
}
body.booking-open { overflow: hidden; }

@media (max-width: 640px) {
  .booking-modal { padding: 0; }
  .booking-modal-panel { max-width: none; width: 100%; height: 100%; max-height: 100%; padding: 56px 24px 32px; }
  .booking-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER (shared)
══════════════════════════════════════════════════════════ */
footer { background: var(--footer-bg); padding: 60px 0 40px; }
.ft { padding: 0 var(--pad); max-width: 1920px; margin: 0 auto; }
.ft-rule { height: 1px; background: rgba(255,255,255,.15); margin-bottom: 48px; }
.ft-brand { margin-bottom: 52px; }
.ft-logo img { height: 26px; width: auto; display: block; }
.ft-tagline { margin-top: 18px; font-family: var(--sans); font-size: 13px; line-height: 20px; color: rgba(255,255,255,.55); max-width: 280px; }
.ft-body { display: grid; grid-template-columns: 260px repeat(4,minmax(0,1fr)); gap: 0 44px; margin-bottom: 52px; align-items: start; }
.ft-region { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 20px; margin-top: 0; }
.ft-column { min-width: 0; }
.ft-links { list-style: none; margin: 0; padding: 0; }
.ft-links li + li { margin-top: 11px; }
.ft-links a { font-family: var(--sans); font-size: 13px; line-height: 18px; color: rgba(255,255,255,.72); transition: color .2s, opacity .2s; }
.ft-links a:hover { color: #fff; }
.ft-villas { list-style: none; margin-bottom: 36px; }
.ft-villas li + li { margin-top: 18px; }
.ft-villa-name { font-family: var(--reckless); font-size: 22px; font-weight: 700; line-height: 24px; letter-spacing: -.2px; color: #fff; display: block; transition: opacity .2s; }
.ft-villa-name:hover { opacity: .7; }
.ft-villa-loc { font-family: var(--sans); font-size: 10px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 4px; display: block; }
.ft-bottom-rule { height: 1px; background: rgba(255,255,255,.15); margin-bottom: 28px; }
.ft-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ft-soc { display: flex; align-items: center; gap: 26px; }
.ft-soc a { color: rgba(255,255,255,.65); transition: color .2s; display: flex; align-items: center; }
.ft-soc a:hover { color: #fff; }
.ft-soc svg { width: 26px; height: 26px; fill: currentColor; }
.ft-legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ft-legal a, .ft-copy { font-family: var(--sans); font-size: 11px; font-weight: 400; color: rgba(255,255,255,.40); transition: color .2s; }
.ft-legal a:hover { color: rgba(255,255,255,.8); }
.ft-copy { white-space: nowrap; }
.ft-credit { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ft-credit-text { font-family: var(--sans); font-size: 9px; font-weight: 400; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.28); }
.ft-credit-logo { height: 16px; width: auto; opacity: .40; filter: brightness(0) invert(1); }

@media (max-width: 1250px) and (min-width: 901px) {
  .ft-body { grid-template-columns: 240px repeat(2,minmax(0,1fr)); row-gap: 38px; }
  .ft-brand { grid-row: span 2; }
}

/* ══════════════════════════════════════════════════════════
   LISTADO DE VILLAS (template-villas.php) — page hero + intro strip
══════════════════════════════════════════════════════════ */
.page-hero { position: relative; width: 100%; height: 70vh; min-height: 460px; max-height: 680px; overflow: hidden; display: flex; align-items: flex-end; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.50) 100%); }
.page-hero-content { position: relative; z-index: 2; padding: 0 var(--pad) 60px; width: 100%; }
.page-hero-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6);
  display: block; margin-bottom: 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s .4s var(--ease), transform .7s .4s var(--ease);
}
.page-hero-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6vw, 80px); line-height: .95; letter-spacing: -1px; color: #fff;
  opacity: 0; transform: translateY(18px);
  transition: opacity .9s .55s var(--ease), transform .9s .55s var(--ease);
}
.page-hero-title em { font-style: italic; }
body.loaded .page-hero-label, body.loaded .page-hero-title { opacity: 1; transform: none; }

.btn-primary { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 16px 28px; transition: background .2s; display: inline-block; border: none; cursor: pointer; }
.btn-primary:hover { background: #3d3939; }
.btn-outline { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(34,31,31,.25); color: var(--ink); padding: 16px 28px; transition: border-color .2s, background .2s; display: inline-block; }
.btn-outline:hover { border-color: var(--ink); background: rgba(34,31,31,.04); }
/* El nuevo listado de villas (template-villas.php) tiene su propio bloque
   de CSS al final de este archivo — busca "VILLAS LISTING (nuevo diseño)". */

/* ══════════════════════════════════════════════════════════
   SINGLE VILLA (single-villa.php) — namespaced "vhero" to avoid
   colliding with the home ".hero" (different design entirely)
══════════════════════════════════════════════════════════ */
.vhero { position: relative; width: 100%; height: 100vh; max-height: 750px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
.vhero-bg { position: absolute; inset: 0; z-index: 0; }
.vhero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 60%); opacity: .5; }
.vhero-ellipse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 635px; height: 207px; border-radius: 50%; background: rgba(0,0,0,.05); filter: blur(50px); z-index: 1; pointer-events: none; }
.vhero-content { position: absolute; top: 300px; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.vhero-title {
  font-family: var(--serif); font-weight: 400; font-size: 70px; line-height: 65px; letter-spacing: -1px; color: #fff; text-align: center;
  text-shadow: 0 0 50px rgba(0,0,0,.10); width: 650px; max-width: calc(100% - 60px);
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s .4s var(--ease), transform .9s .4s var(--ease);
}
.vhero-location {
  color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 400;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s .7s var(--ease), transform .8s .7s var(--ease);
}
.vhero-price {
  color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .03em;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 9px 22px; border-radius: 40px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s .85s var(--ease), transform .8s .85s var(--ease);
}
body.loaded .vhero-title, body.loaded .vhero-location, body.loaded .vhero-price { opacity: 1; transform: translateY(0); }

.section { padding: 80px var(--pad) 120px; max-width: 1920px; margin: 0 auto; }
.s-head { margin-bottom: 50px; text-align: center; }
.s-head .s-title { max-width: 590px; margin: 25px auto 20px; text-wrap: balance; }
.s-body { font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 24px; color: var(--ink); max-width: 450px; margin: 0 auto; }
.s-body + .read-more { display: block; margin-top: 16px; }
.read-more { display: inline-block; color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 800; line-height: 21px; cursor: pointer; background: none; border: none; padding: 0; }

.gap { height: var(--gap); }
.g-double  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.g-big-dbl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.g-big-dbl > :first-child { grid-row: span 2; }
.g-big-sm  { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); }
.g-triple  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); }

.ar-desk-sm   { aspect-ratio: 393/500; }
.ar-desk-md   { aspect-ratio: 595/500; }
.ar-desk-lg   { aspect-ratio: 797/500; }
.ar-desk-full { aspect-ratio: 1200/500; }
.ar-desk-hero { aspect-ratio: 1200/595; }
.ar-portrait  { aspect-ratio: 3/4; } /* antes 2/3 — menos "alta" (feedback cliente), y coincide con el tamaño registrado 'pollensina-portrait' (ver functions.php) para no forzar un recorte más agresivo del que ya hace WordPress */
.ar-square    { aspect-ratio: 1/1; }

.car-wrap { position: relative; }
.car-outer { overflow: hidden; cursor: grab; user-select: none; padding: 0 var(--pad); }
.car-outer:active { cursor: grabbing; }
.car-track { display: flex; gap: var(--gap); width: max-content; }
.ci-v { flex-shrink: 0; width: 260px; aspect-ratio: 393/500; overflow: hidden; }
.ci-h { flex-shrink: 0; width: 480px; aspect-ratio: 797/500; overflow: hidden; }
.ci-s { flex-shrink: 0; width: 370px; aspect-ratio: 595/500; overflow: hidden; }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(34,31,31,.12);
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink); cursor: pointer; transition: background .2s; box-shadow: 0 2px 12px rgba(34,31,31,.08);
}
.car-btn:hover { background: #fff; }
.car-prev { left: calc(var(--pad) - 22px); }
.car-next { right: calc(var(--pad) - 22px); }

/* ── "Todo lo que necesitas" — cuadrícula de características con icono ──
   Sustituye a la antigua .features-wrap de listas de texto (Ubicación /
   Exteriores / Servicios / Interiores, sin icono). Ver
   pollensina_render_amenities_section() en inc/template-helpers.php. */
.am-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 60px; row-gap: 26px; max-width: 1100px; margin: 60px auto 0; }
.am-item { display: flex; align-items: flex-start; gap: 18px; }
.am-ic { flex: 0 0 32px; width: 32px; height: 32px; color: var(--ink); margin-top: -3px; }
.am-ic svg { width: 100%; height: 100%; display: block; }
.am-ic .ac { color: #9c8b79; }
.am-label { font-family: var(--sans); font-size: 15px; line-height: 22px; color: var(--ink); padding-bottom: 7px; border-bottom: 1px dotted rgba(34,31,31,.22); }
.am-more { display: none; }
.am-more.open { display: contents; }
.am-toggle { display: inline-flex; align-items: center; gap: 12px; margin: 44px auto 0; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--ink); transition: opacity .2s; }
.am-toggle:hover { opacity: .6; }
.am-toggle svg { width: 20px; height: 10px; transition: transform .3s var(--ease); }
.am-toggle.open svg { transform: rotate(90deg); }
.am-toggle-row { text-align: center; }
.am-sub { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 60px; max-width: 1100px; margin: 80px auto 0; padding-top: 64px; border-top: 1px solid rgba(34,31,31,.10); }
.am-sub-label { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 26px; }
.am-sub .am-item { margin-bottom: 22px; }

.vh-entry { max-width: 720px; margin: 0 auto 20px; font-family: var(--sans); font-size: 17px; line-height: 27px; color: var(--ink); opacity: .85; }
.vh-entry p { margin-bottom: 20px; }
.vh-entry h1, .vh-entry h2, .vh-entry h3, .vh-entry h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); opacity: 1; margin: 10px 0 16px; line-height: 1.15; }
.vh-entry h1 { font-size: 44px; } .vh-entry h2 { font-size: 34px; } .vh-entry h3 { font-size: 26px; } .vh-entry h4 { font-size: 20px; }
.vh-entry img { border-radius: 0; margin: 10px 0; max-width: 100%; height: auto; }
.vh-entry figure { margin: 20px 0; }
.vh-entry a { text-decoration: underline; }
.vh-entry ul, .vh-entry ol { margin: 0 0 20px 22px; }
.vh-entry li { margin-bottom: 8px; }

/* ── Bloques nativos del editor de WordPress, con el estilo de la marca ── */
.vh-entry .wp-block-image { margin: 24px 0; }
.vh-entry .wp-block-image img { display: block; width: 100%; height: auto; }
.vh-entry .wp-block-image figcaption { font-family: var(--sans); font-size: 12px; color: var(--ink-50); margin-top: 10px; text-align: center; }

.vh-entry .wp-block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  margin: 48px 0;
}
.vh-entry .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1fr; }
.vh-entry .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.vh-entry .wp-block-media-text__media img,
.vh-entry .wp-block-media-text__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh-entry .wp-block-media-text__content { padding: 0; }
.vh-entry .wp-block-media-text__content h2,
.vh-entry .wp-block-media-text__content h3 { margin-top: 0; }

.vh-entry .wp-block-quote {
  border: none; margin: 40px auto; padding: 0; text-align: center; max-width: 640px;
}
/* Marca de comillas decorativa antes del texto, igual que en el bloque de
   testimonios de la home (.quote-mark en home.html). */
.vh-entry .wp-block-quote::before {
  content: '"'; display: block;
  font-family: var(--serif); font-size: 60px; line-height: .6; color: rgba(34,31,31,.15);
  margin-bottom: 16px;
}
.vh-entry .wp-block-quote p {
  font-family: var(--serif); font-size: 24px; line-height: 32px; font-style: italic; color: var(--ink); opacity: 1; margin-bottom: 14px;
}
.vh-entry .wp-block-quote cite {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); font-style: normal;
}

/* ══════════════════════════════════════════════════════════
   HOME — SECCIONES EDITORIALES LIBRES (bloques "Imagen y texto"
   que el cliente añade en la Página de inicio, después del bloque de
   villas) — ver front-page.php. Distinto de ".vh-entry .wp-block-media-
   text" de arriba: aquí no hay límite de ancho (.editorial-wrap, no
   .vh-entry), para que la foto salga grande como en home.html.
══════════════════════════════════════════════════════════ */
.editorial-wrap { padding: 80px var(--pad) 120px; max-width: 1920px; margin: 0 auto; }
.editorial-wrap .wp-block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin: 0;
}
.editorial-wrap .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.editorial-wrap .wp-block-media-text__media { aspect-ratio: 5/4; overflow: hidden; margin: 0; }
.editorial-wrap .wp-block-media-text__media img,
.editorial-wrap .wp-block-media-text__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-wrap .wp-block-media-text__content { padding: 0; }
.editorial-wrap .wp-block-media-text__content h2,
.editorial-wrap .wp-block-media-text__content h3 {
  font-family: var(--serif); font-size: 46px; font-weight: 400; line-height: 48px; letter-spacing: -.3px; color: var(--ink); margin: 0 0 22px; max-width: 400px;
}
.editorial-wrap .wp-block-media-text__content p {
  font-family: var(--sans); font-size: 16px; line-height: 25px; color: var(--ink); opacity: .8; margin: 0 0 20px; max-width: 380px;
}
/* Un párrafo en tamaño "Pequeño" (elegido desde el editor de bloques, en
   Ajustes del bloque → Tipografía → Tamaño) justo antes del título se
   convierte en la etiqueta pequeña tipo "ENTORNO" de home.html. */
.editorial-wrap .wp-block-media-text__content p.has-small-font-size {
  font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); opacity: 1; margin: 0 0 18px; max-width: none;
}
/* Cualquier enlace dentro del texto se pinta como el "Descubrir la zona →"
   del diseño original, sin necesidad de usar un bloque "Botón" aparte. */
.editorial-wrap .wp-block-media-text__content a {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}

.vh-entry .wp-block-gallery { margin: 24px 0; }
.vh-entry .wp-block-columns { gap: 40px; margin: 32px 0; }
.vh-entry .wp-block-column img { width: 100%; height: auto; display: block; }
.vh-entry .wp-block-separator { border-top: 1px solid var(--ink-10); margin: 40px auto; max-width: 100px; }
.vh-entry .wp-block-button__link {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: #fff !important; padding: 14px 26px; text-decoration: none !important; display: inline-block; border-radius: 0;
}

@media (max-width: 900px) {
  .vh-entry .wp-block-media-text,
  .vh-entry .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr; gap: 20px; }
  .vh-entry .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
  .vh-entry .wp-block-columns { flex-direction: column; }
  .editorial-wrap .wp-block-media-text,
  .editorial-wrap .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr; gap: 30px; }
  .editorial-wrap .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
}

/* ══════════════════════════════════════════════════════════
   PRENSA / PREMIOS (franja que se desplaza sola, antes de las
   citas/"Reviews" en la portada) — ver pollensina_render_press_marquee()
   e inc/press-marquee.php. Las reglas de móvil ya existían más abajo.
══════════════════════════════════════════════════════════ */
.press-section {
  padding: 60px 0;
  border-top: 1px solid rgba(34,31,31,.08);
  border-bottom: 1px solid rgba(34,31,31,.08);
  overflow: hidden;
}
.press-track {
  display: flex; gap: 80px; width: max-content;
  animation: marquee 28s linear infinite;
}
.press-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.press-item {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  white-space: nowrap;
}
.press-pub {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50);
}
.press-award {
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   CITAS / "REVIEWS" (cuadrícula de .quote-card — ver
   pollensina_render_quotes_section()). El número de columnas en
   escritorio se fija con la variable --qcols (1, 2 o 3, según cuántas
   citas haya); en móvil siempre 1 columna (regla ya existía más abajo).
══════════════════════════════════════════════════════════ */
.quotes-section {
  padding: 100px var(--pad);
  max-width: 1920px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(var(--qcols, 3), 1fr); gap: 60px;
}
.quote-mark {
  font-family: var(--serif); font-size: 60px; line-height: .6;
  color: rgba(34,31,31,.15); display: block; margin-bottom: 20px;
}
.quote-text {
  font-family: var(--serif); font-size: 22px; line-height: 30px;
  font-style: italic; color: var(--ink); margin-bottom: 20px;
}
.quote-source {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50);
}

/* ── Calendario de disponibilidad (iCal) ─────────────────────── */
/* 12 meses en una tira que se desplaza (arrastrando o con las flechas),
   en vez de una cuadrícula fija — ver pollensina_render_availability_calendar(). */
.avail-cal { max-width: 1000px; margin: 0 auto; position: relative; }
.avail-cal-scroll {
  display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px 54px; -ms-overflow-style: none; scrollbar-width: none;
}
.avail-cal-scroll::-webkit-scrollbar { display: none; }
.avail-cal .avail-prev, .avail-cal .avail-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.avail-cal .avail-prev { left: 0; }
.avail-cal .avail-next { right: 0; }
.avail-month { flex: 0 0 273px; scroll-snap-align: start; }
.avail-month-title { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 16px; text-align: center; }
.avail-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.avail-dow { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-50); text-align: center; padding-bottom: 6px; }
.avail-empty { display: block; }
.avail-day {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1/1; font-family: var(--sans); font-size: 12px; color: var(--ink);
  border-radius: 50%;
}
.avail-day.is-free { background: rgba(34,31,31,.04); }
.avail-day.is-booked { background: rgba(122,28,28,.12); color: #7a1c1c; text-decoration: line-through; opacity: .8; }
.avail-day.is-past { opacity: .25; }
.avail-legend { display: flex; justify-content: center; gap: 28px; margin-top: 32px; font-family: var(--sans); font-size: 12px; color: var(--ink-50); }
.avail-legend span { display: inline-flex; align-items: center; gap: 8px; }
.avail-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.avail-dot.is-free { background: rgba(34,31,31,.15); }
.avail-dot.is-booked { background: #7a1c1c; }
.avail-sync { text-align: center; margin-top: 14px; font-family: var(--sans); font-size: 11px; color: var(--ink-50); }

@media (max-width: 900px) {
  .avail-cal-scroll { padding: 4px 40px; gap: 24px; }
  .avail-month { flex-basis: 78vw; max-width: 320px; }
  .avail-cal .avail-prev, .avail-cal .avail-next { width: 36px; height: 36px; font-size: 15px; }
}

/* ── Tabla de precios por temporada — debajo del calendario ─── */
/* Filas simples separadas por una línea fina, mismo espíritu minimalista
   que .feat-list / .avail-legend: sin recuadros ni zebra-striping, solo
   jerarquía tipográfica (fecha en sans, precio en serif, algo más grande).
   Ver pollensina_render_price_table() en inc/template-helpers.php.
   .price-body reparte las filas en 2 columnas (CSS multi-column) en
   escritorio — con muchas temporadas (una villa puede tener 15-20+) una
   sola columna se hacía demasiado larga; a 1 columna en móvil. La cabecera
   ("Dates" / "Price per week...") queda FUERA de .price-body a propósito,
   para que se vea una sola vez arriba en vez de repetirse por columna. */
.price-table { max-width: 900px; margin: 56px auto 0; border-top: 1px solid rgba(34,31,31,.12); }
.price-body { columns: 2; column-gap: 56px; }
.price-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px;
  padding: 13px 4px; border-bottom: 1px solid rgba(34,31,31,.10);
  break-inside: avoid; transition: background .2s;
}
.price-row:not(.price-row--head):hover { background: rgba(34,31,31,.025); }
.price-row--head {
  padding: 0 4px 12px; border-bottom: 1px solid var(--ink);
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50);
}
.price-dates { font-family: var(--sans); font-size: 14px; color: var(--ink); }
.price-sep { display: inline-block; color: var(--ink-50); margin: 0 8px; }
.price-value { font-family: var(--serif); font-size: 19px; color: var(--ink); text-align: right; white-space: nowrap; }

@media (max-width: 900px) {
  .price-table { margin-top: 40px; }
  .price-body { columns: 1; }
  .price-row { gap: 12px; padding: 14px 4px; }
  .price-row--head span:last-child { text-align: right; }
  .price-dates { font-size: 14px; }
  .price-sep { display: block; margin: 2px 0; }
  .price-value { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════
   UBICACIÓN (ficha de villa) — párrafo + grupos de sitios cercanos junto
   al mapa. Sustituye a la antigua .villa-map (mapa suelto a sangre
   completa, sin texto). Ver pollensina_render_location_section() en
   inc/template-helpers.php.
══════════════════════════════════════════════════════════ */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; max-width: 1400px; margin: 0 auto; }
.loc-body { font-family: var(--sans); font-size: 16px; line-height: 25px; color: var(--ink); max-width: 54ch; margin: 0 0 36px; }
.loc-group { padding: 24px 0; border-top: 1px solid rgba(34,31,31,.10); }
.loc-group-title { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 16px; }
.loc-dot { width: 7px; height: 7px; border-radius: 50%; background: #9c8b79; flex-shrink: 0; }
.loc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.loc-chip { display: inline-flex; align-items: baseline; gap: 10px; border: 1px solid rgba(34,31,31,.16); border-radius: 999px; padding: 9px 18px; font-family: var(--sans); font-size: 14px; color: var(--ink); transition: border-color .2s; }
.loc-chip:hover { border-color: var(--ink); }
.loc-chip small { font-size: 12px; color: var(--ink-50); }
/* Mismo tinte en blanco/grises (sin color) que llevaba el mapa suelto
   anterior, a petición de Caty — grayscale(1) quita todo el color por
   completo; contrast/brightness solo ajustan que los grises no queden ni
   demasiado planos ni demasiado oscuros. */
.loc-map { border: 1px solid rgba(34,31,31,.10); min-height: 460px; overflow: hidden; position: sticky; top: calc(var(--nav-h) + 20px); }
.loc-map iframe {
  display: block; width: 100%; height: 100%; min-height: 460px; border: 0;
  filter: grayscale(1) contrast(1.1) brightness(1.05);
}

.next-project { position: relative; display: block; overflow: hidden; background: var(--c1); }
.next-img { width: 100%; height: 400px; position: relative; }
.next-img img { position: absolute; inset: 0; }
.next-img::after { content: ''; position: absolute; inset: 0; background: rgba(34,31,31,.35); }
.next-text { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 3; padding-bottom: 20px; }
.next-label { color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 400; display: flex; align-items: center; gap: 6px; }
.next-title { font-family: var(--serif); font-weight: 400; font-size: 70px; line-height: 65px; letter-spacing: -1px; color: #fff; text-align: center; max-width: 650px; transition: transform .4s var(--ease); }
.next-project:hover .next-title { transform: translateY(-4px); }

/* ══════════════════════════════════════════════════════════
   LICENCIA TURÍSTICA (franja final de la ficha de villa)
══════════════════════════════════════════════════════════ */
.villa-license {
  background: #f4f3f1; padding: 20px var(--pad); text-align: center;
}
.villa-license-name {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-50);
}
.villa-license-code {
  font-family: var(--sans); font-size: 11px; color: var(--ink-50); opacity: .8;
  margin-top: 4px; word-break: break-all;
}

/* ══════════════════════════════════════════════════════════
   Generic page (page.php / index.php fallback)
══════════════════════════════════════════════════════════ */
.page-content-wrap { max-width: 860px; margin: 0 auto; padding: 160px var(--pad) 120px; }
.page-content-wrap h1 { font-family: var(--serif); font-size: clamp(40px,5vw,64px); line-height: 1.05; margin-bottom: 30px; }
.page-content-wrap p { font-family: var(--sans); font-size: 17px; line-height: 27px; margin-bottom: 20px; opacity: .85; }

/* ══════════════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --pad: 30px; --gap: 5px; }
  .nav-cta { display: none; }
  .nav-burger { display: flex; }

  .hero-title { font-size: 48px; }
  .intro { grid-template-columns: 1fr; gap: 40px; padding: 70px var(--pad); }
  .villas-grid { grid-template-columns: 1fr; }
  .villa-card--featured { grid-column: 1; }
  .villa-card--featured .villa-card-img,
  .villa-card--right .villa-card-img { height: auto; aspect-ratio: 4/3; }
  .editorial { grid-template-columns: 1fr; gap: 40px; }
  .editorial--reverse .ed-visual { order: 0; }
  .quotes-section { grid-template-columns: 1fr; gap: 40px; padding: 60px var(--pad); }
  .news-grid { grid-template-columns: 1fr; gap: 30px; }
  .villas-head, .news-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .press-section { padding: 40px 0; }

  .page-hero { height: 55vh; }
  .intro-strip { grid-template-columns: 1fr; gap: 30px; }
  .villa-item { grid-template-columns: 1fr; }
  .villa-item:nth-child(even) .vi-gallery { order: 0; }
  .villa-item:nth-child(even) .vi-info    { order: 1; }
  .vi-slides { height: 60vw; }
  .vi-info { padding: 36px var(--pad); }
  .discover-grid { grid-template-columns: 1fr; gap: 30px; }

  .vhero { height: 100svh; max-height: none; }
  .vhero-content { top: 50%; transform: translate(-50%, -50%); }
  .vhero-title { font-size: 50px; line-height: 52px; }
  .section { padding: 60px var(--pad) 80px; }
  .s-head .s-title { font-size: 38px; line-height: 40px; }
  .g-double, .g-big-dbl, .g-big-sm { grid-template-columns: 1fr; }
  .g-triple { grid-template-columns: 1fr 1fr; }
  .g-big-dbl > :first-child { grid-row: span 1; }
  .ar-desk-lg, .ar-desk-full, .ar-desk-hero { aspect-ratio: 4/3; }
  .ar-desk-sm { aspect-ratio: 3/4; } /* .ar-portrait ya es 3/4 en escritorio, no hace falta repetirlo aquí */
  .am-grid { grid-template-columns: 1fr; row-gap: 22px; margin-top: 44px; }
  .am-sub { grid-template-columns: 1fr; row-gap: 44px; margin-top: 56px; padding-top: 48px; }
  .loc-grid { grid-template-columns: 1fr; gap: 44px; }
  .loc-map { position: static; min-height: 340px; }
  .next-title { font-size: 50px; line-height: 52px; }
  .car-outer { padding: 0 var(--pad); }
  .ci-v { width: 180px; }
  .ci-h { width: 310px; }
  .ci-s { width: 240px; }

  .stay { flex-direction: column; align-items: flex-start; gap: 24px; }
  .stay-title { font-size: 26px; white-space: normal; }
  .stay-form { width: 100%; }
  .stay-input { flex: 1; min-width: 0; }
  .ft-body { grid-template-columns: 1fr; gap: 0; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ft-legal { flex-direction: column; gap: 6px; align-items: flex-start; }
  .btn-book { bottom: 20px; right: 20px; padding: 16px 28px; font-size: 14px; }
  .wa-widget { bottom: 86px; right: 20px; }
  .wa-fab { width: 52px; height: 52px; }
  .wa-panel { right: -4px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ABOUT PAGE (template-about.php) — a partir de about.html.
   Todas las clases propias de esta plantilla llevan el prefijo
   "about-" para no chocar con .hero-title/.hero-label/etc. de la
   portada. Reutiliza utilidades ya existentes: .rv/.d1-d3 (scroll
   reveal), .zoom (hover), .ar-portrait, .bg-1/2/3, .btn-primary.
═══════════════════════════════════════════════════════════════════ */
.ar-landscape { aspect-ratio: 4/3; }

.about-hero {
  padding: calc(var(--nav-h) + 80px) var(--pad) 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end;
  border-bottom: 1px solid var(--ink-10);
}
.about-hero-eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: 20px; display: block;
}
.about-hero-title {
  font-family: var(--serif); font-size: 80px; font-weight: 400;
  line-height: .92; letter-spacing: -.5px; color: var(--ink);
}
.about-hero-lead {
  font-family: var(--serif); font-size: 26px; font-weight: 400; font-style: italic;
  line-height: 1.45; color: var(--ink); margin-bottom: 28px;
}
.about-hero-body { font-family: var(--sans); font-size: 15px; line-height: 26px; color: var(--ink-50); }
.about-hero-body p + p { margin-top: 18px; }

.about-img-full { width: 100%; aspect-ratio: 21/9; }
.about-img-full img { width: 100%; height: 100%; object-fit: cover; }

.about-section { padding: 96px var(--pad); border-bottom: 1px solid var(--ink-10); }
.about-section.about-bg-stone { background: var(--c2); }
.about-section-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: 20px; display: block;
}

.about-split { display: grid; gap: 80px; align-items: center; grid-template-columns: 1fr 1fr; }
.about-split-img-text .about-split-media { order: -1; }
.about-split-heading {
  font-family: var(--serif); font-size: 52px; font-weight: 400;
  line-height: 1.05; letter-spacing: -.3px; color: var(--ink); margin-bottom: 28px;
}
.about-split-body { font-family: var(--sans); font-size: 15px; line-height: 27px; color: var(--ink-50); }
.about-split-body p + p { margin-top: 18px; }
.about-split-media { overflow: hidden; }

.about-img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 60px; }

.about-pull-quote { padding: 80px var(--pad); text-align: center; background: var(--c2); }
.about-pull-quote blockquote {
  font-family: var(--serif); font-size: 46px; font-weight: 400; font-style: italic;
  line-height: 1.25; color: var(--ink); max-width: 820px; margin: 0 auto 24px;
}
.about-pull-quote cite {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); font-style: normal;
}

.about-pillars { padding: 96px var(--pad); background: var(--c3); }
.about-pillars-title {
  font-family: var(--serif); font-size: 52px; font-weight: 400;
  line-height: 1.05; color: var(--ink); margin-bottom: 64px; max-width: 560px;
}
.about-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.about-pillar-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 14px; display: block;
}
.about-pillar-heading { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--ink); margin-bottom: 14px; line-height: 1.15; }
.about-pillar-text { font-family: var(--sans); font-size: 14px; line-height: 23px; color: var(--ink-50); }

.about-founders { padding: 96px var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about-founders-title { font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1.05; color: var(--ink); margin-bottom: 28px; }
.about-founders-body { font-family: var(--sans); font-size: 15px; line-height: 27px; color: var(--ink-50); }
.about-founders-body p + p { margin-top: 18px; }
.about-founders-img { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-founders-img-main { grid-column: 1 / -1; aspect-ratio: 16/10; overflow: hidden; }
.about-founders-img-sm { aspect-ratio: 1; overflow: hidden; }

.about-closing { padding: 96px var(--pad); background: var(--footer-bg); text-align: center; }
.about-closing-rule { width: 40px; height: 1px; background: rgba(255,255,255,.25); margin: 0 auto 48px; }
.about-closing-text { font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1.1; color: #fff; max-width: 780px; margin: 0 auto 40px; }
.about-closing-tagline { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); line-height: 2.2; }
.about-closing-cta {
  display: inline-block; margin-top: 40px; background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 18px 40px; transition: background .2s;
}
.about-closing-cta:hover { background: #f0ebe4; }

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; gap: 40px; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 56px; }
  .about-hero-title { font-size: 52px; }
  .about-hero-lead { font-size: 22px; }
  .about-img-full { aspect-ratio: 4/3; }
  .about-split { grid-template-columns: 1fr; gap: 40px; }
  .about-split-img-text .about-split-media { order: 0; }
  .about-split-heading { font-size: 38px; }
  .about-img-pair { grid-template-columns: 1fr; }
  .about-pull-quote blockquote { font-size: 32px; }
  .about-pillars-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-pillars-title { font-size: 38px; margin-bottom: 44px; }
  .about-founders { grid-template-columns: 1fr; gap: 48px; }
  .about-founders-title { font-size: 38px; }
  .about-founders-img { grid-template-columns: 1fr 1fr; }
  .about-closing-text { font-size: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BLOG ARTICLE (single.php) — a partir de blog-article-2.html, con el
   rediseño editorial de la sesión 16 (northernmallorcademo.html /
   pollensinanorthofmallorca.css): cabecera más grande y apilada,
   fecha/entradilla en el tono cálido --stone, H2 en serif con línea
   superior en --c3, capitular en el primer párrafo, cita a página sin
   caja, enlaces en el acento --sea, y fotos con alineación "Ancho"
   (Gutenberg) a sangre en 16:9 — el mismo respiro que las fotos "FOTO
   — CALA CON PINOS" del rediseño. El cuerpo (.art-body) sigue usando el
   editor de bloques normal: un bloque "Imagen" con "Ancho" se pinta a
   sangre; un bloque "Columnas" con 2 imágenes se pinta como el dúo a
   dos columnas; un bloque "Cita" se pinta como cita editorial en
   serif cursiva.
══════════════════════════════════════════════════════════════════════════ */
#art-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 2px; width: 0; background: var(--ink); transition: width .1s linear;
}

body.single-post { background: var(--c2); }

.art-header { padding: calc(var(--nav-h) + 64px) var(--pad) 0; max-width: 1020px; }
.art-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.art-date { font-family: var(--sans); font-size: 14px; letter-spacing: .08em; color: var(--stone); }
.art-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.art-cat {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink-10); padding: 4px 12px;
  transition: border-color .2s, background .2s, color .2s;
}
.art-cat:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.art-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7.4vw, 104px);
  line-height: .95; letter-spacing: -1px; max-width: 100%; margin-bottom: 28px; color: var(--ink);
}
.art-deck {
  font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; font-style: italic;
  line-height: 1.5; color: var(--stone); max-width: 700px; margin-bottom: 56px;
}

.art-hero { padding: 0 var(--pad); margin-bottom: 72px; }
.art-hero img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; }
.art-hero figcaption { margin-top: 8px; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--stone); text-align: left; }

.art-body { display: grid; grid-template-columns: var(--pad) minmax(0,780px) 1fr; }
.art-body > * { grid-column: 2; }

.art-body h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05; letter-spacing: -.01em; color: var(--ink);
  margin: 48px 0 28px; padding-top: 32px; border-top: 1px solid var(--c3);
}
.art-body h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
/* La cuadrícula de .art-body no colapsa márgenes verticales entre hijos
   (a diferencia del flujo normal en bloque) — así que el margen inferior
   de lo que venga justo antes de un h2 se suma al margin-top/padding-top
   de este, dejando un hueco excesivo hasta la línea gris. Lo anulamos
   aquí para que el h2 sea el único que marque el espaciado.
   OJO (corregido sesión 17): la primera versión de esta regla
   (".art-body > *:has(+ h2) { margin-bottom: 0; }") nunca ganaba la
   cascada frente a selectores más específicos como
   ".art-body figure.wp-block-image.alignwide" — así que en la práctica
   NO anulaba nada y el hueco excesivo seguía ahí (confirmado con
   Playwright: 120px de hueco, 72px de la imagen + 48px del h2, en vez
   de los 32px del padding-top del h2 solo). Se usa !important a
   propósito para que gane siempre, sea cual sea el elemento. */
.art-body > *:has(+ h2) { margin-bottom: 0 !important; }
.art-body h3 { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.15; margin: 36px 0 14px; color: var(--ink); }
.art-body p { font-family: var(--sans); font-size: 16px; line-height: 29px; color: #3A362F; margin-bottom: 22px; max-width: 680px; }
.art-body > p:first-of-type::first-letter {
  font-family: var(--serif); font-size: 4.2em; line-height: .78; float: left;
  padding: .08em .12em 0 0; color: var(--ink);
}
.art-body strong { color: var(--ink); font-weight: 500; }
.art-body a { color: var(--sea); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body ul { list-style: none; margin-bottom: 22px; padding: 0; max-width: 680px; }
.art-body ul li {
  font-family: var(--sans); font-size: 15px; line-height: 26px; color: var(--stone);
  padding: 10px 0 10px 24px; position: relative; border-bottom: 1px solid var(--ink-10);
}
.art-body ul li:first-child { border-top: 1px solid var(--ink-10); }
.art-body ul li::before { content: '→'; position: absolute; left: 0; color: var(--stone); font-size: 13px; }

/* Bloque "Imagen" dentro del cuerpo, ancho normal (dentro de la columna de texto) */
.art-body figure.wp-block-image { margin: clamp(40px, 6vw, 72px) 0; grid-column: 2; }
.art-body figure.wp-block-image img { width: 100%; height: 480px; object-fit: cover; }
.art-body figure.wp-block-image figcaption {
  margin-top: 8px; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--stone); text-align: left;
}

/* Corrección (sesión 18): si en el editor de bloques se redimensiona una
   imagen a mano (arrastrando la esquina), Gutenberg le mete un ancho en
   línea al <figure> (p.ej. style="width:450px") basado en ese arrastre
   — eso dejaba la foto Y su caption más estrechas que la columna de
   texto, con un hueco al lado ("me deja un margen antes", como lo
   describió Caty). Se anula siempre, con !important porque un estilo en
   línea solo lo gana otra regla también con !important — así el editor
   puede redimensionar en el editor sin miedo a que se rompa el diseño
   publicado. Se aplica a las dos variantes (normal y "Ancho") porque
   ambas llevan la clase base .wp-block-image.
*/
.art-body figure.wp-block-image,
.art-body figure.wp-block-image img,
.art-body figure.wp-block-image figcaption {
  width: 100% !important; max-width: none !important;
}

/* Bloque "Imagen" con alineación "Ancho" en el editor de bloques → foto a
   sangre en 16:9, el mismo respiro que las fotos anchas del rediseño */
.art-body figure.wp-block-image.alignwide { grid-column: 1 / -1; margin: clamp(40px, 6vw, 72px) 0; }
.art-body figure.wp-block-image.alignwide img { aspect-ratio: 16/9; height: auto; object-fit: cover; }
.art-body figure.wp-block-image.alignwide figcaption { padding: 0 var(--pad); text-align: left; }

/* Bloque "Columnas" con 2 imágenes → se ve como un dúo a sangre, a dos columnas */
.art-body .wp-block-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: clamp(40px, 6vw, 72px) 0;
  grid-column: 2 / -1; padding-right: var(--pad);
}
.art-body .wp-block-columns .wp-block-column { margin: 0; }
.art-body .wp-block-columns img { width: 100%; height: 420px; object-fit: cover; }
.art-body .wp-block-columns figcaption {
  margin-top: 8px; font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--stone); text-align: left;
}

/* Bloque "Cita" → cita editorial a página, en serif cursiva, sin caja */
.art-body blockquote,
.art-body .wp-block-quote {
  margin: clamp(48px, 6vw, 80px) 0; padding: 0; border: 0; max-width: 560px;
}
.art-body blockquote p, .art-body .wp-block-quote p {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35; color: var(--ink); margin: 0; max-width: 100%;
}
.art-body blockquote cite, .art-body .wp-block-quote cite { font-family: var(--sans); font-size: 12px; color: var(--stone); }

/* ── FAQ ────────────────────────────────────────────── */
.art-faq { padding: 72px var(--pad); border-top: 1px solid var(--ink-10); }
.art-faq-label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); margin-bottom: 40px; display: block; }
.art-faq-title { font-family: var(--serif); font-size: 48px; font-weight: 400; margin-bottom: 48px; line-height: 1.05; color: var(--ink); }
.art-faq-item { border-top: 1px solid var(--ink-10); }
.art-faq-item:last-child { border-bottom: 1px solid var(--ink-10); }
.art-faq-q {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0; cursor: pointer; font-family: var(--serif); font-size: 22px; font-weight: 600;
  line-height: 1.2; color: var(--ink); transition: opacity .2s; background: none; border: none;
}
.art-faq-q:hover { opacity: .7; }
.art-faq-icon {
  width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--ink-10);
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--stone);
  transition: transform .3s var(--ease), border-color .2s;
}
.art-faq-item.open .art-faq-icon { transform: rotate(45deg); border-color: var(--ink); }
.art-faq-a { display: none; padding: 0 0 28px; max-width: 680px; font-family: var(--sans); font-size: 15px; line-height: 26px; color: var(--stone); }
.art-faq-item.open .art-faq-a { display: block; }

/* ── Related ───────────────────────────────────────────── */
.related { padding: 72px var(--pad) 120px; background: var(--c2); }
.related-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 48px; flex-wrap: wrap; gap: 16px; }
.related-title { font-family: var(--serif); font-size: 40px; font-weight: 400; color: var(--ink); }
.related-all { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(34,31,31,.3); padding-bottom: 2px; transition: border-color .2s; }
.related-all:hover { border-color: var(--ink); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rel-card-img { display: block; width: 100%; aspect-ratio: 3/2; overflow: hidden; margin-bottom: 16px; }
.rel-card-img img { transition: transform .7s var(--ease); }
.rel-card:hover .rel-card-img img { transform: scale(1.04); }
.rel-cat { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 8px; }
.rel-title { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }
.rel-title a { transition: opacity .2s; }
.rel-card:hover .rel-title a { opacity: .65; }
.rel-date { font-family: var(--sans); font-size: 11px; color: var(--stone); }

/* ── Formulario corto de contacto (final del artículo) ───────── */
.art-contact { padding: 80px var(--pad); background: var(--ink); color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.art-contact-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 20px; display: block; }
.art-contact-title { font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1.05; margin-bottom: 20px; color: #fff; }
.art-contact-body { font-family: var(--sans); font-size: 14px; line-height: 24px; color: rgba(255,255,255,.55); }
.art-cf { display: flex; flex-direction: column; }
.art-cf-field { border-bottom: 1px solid rgba(255,255,255,.14); padding: 18px 0; }
.art-cf-field label { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.40); margin-bottom: 6px; }
.art-cf-field input, .art-cf-field select, .art-cf-field textarea {
  background: transparent; border: none; outline: none; font-family: var(--sans); font-size: 15px; color: #fff; width: 100%; -webkit-appearance: none;
}
.art-cf-field textarea { resize: none; height: 56px; }
.art-cf-field input::placeholder, .art-cf-field textarea::placeholder { color: rgba(255,255,255,.30); }
.art-cf-field select option { background: var(--ink); }
.art-cf-row { display: grid; grid-template-columns: 1fr 1fr; }
.art-cf-row .art-cf-field:first-child { padding-right: 24px; border-right: 1px solid rgba(255,255,255,.14); }
.art-cf-row .art-cf-field:last-child { padding-left: 24px; }
.art-cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.art-cf-actions { display: flex; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.art-cf-btn { background: #fff; color: var(--ink); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 15px 36px; cursor: pointer; transition: background .2s; border: none; }
.art-cf-btn:hover { background: rgba(255,255,255,.85); }
.art-cf-btn:disabled { opacity: .6; cursor: default; }
.art-cf-note { font-family: var(--sans); font-size: 11px; color: rgba(255,255,255,.45); line-height: 17px; max-width: 260px; }

@media (max-width: 1100px) {
  .art-title { font-size: 64px; }
}
@media (max-width: 900px) {
  .art-title { font-size: 46px; }
  .art-body { grid-template-columns: var(--pad) 1fr var(--pad); }
  .art-body .wp-block-columns { grid-template-columns: 1fr; padding-right: var(--pad); }
  .art-body .wp-block-columns img { height: 280px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .art-contact { grid-template-columns: 1fr; gap: 48px; }
  .art-contact-title { font-size: 38px; }
}
@media (max-width: 600px) {
  .art-title { font-size: 36px; }
  .art-body figure.wp-block-image img { height: 260px; }
  .related-grid { grid-template-columns: 1fr; }
  .art-cf-row { grid-template-columns: 1fr; }
  .art-cf-row .art-cf-field:first-child { border-right: none; padding-right: 0; }
  .art-cf-row .art-cf-field:last-child { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG LISTING (home.php) — a partir de blog.html ("The Journal").
═══════════════════════════════════════════════════════════════════ */
.blog-header { padding: calc(var(--nav-h) + 64px) var(--pad) 0; text-align: center; }
.blog-title {
  font-family: var(--serif); font-size: 64px; font-weight: 600;
  line-height: 1; letter-spacing: .04em; color: var(--ink); text-transform: uppercase;
}

.blog-filter-bar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0; padding: 36px var(--pad) 0;
}
.blog-filter-btn {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50); padding: 10px 30px; border: none; background: none;
  border-bottom: 1px solid transparent; white-space: nowrap; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.blog-filter-btn:hover { color: var(--ink); }
.blog-filter-btn.active { color: var(--ink); border-bottom-color: var(--ink); }
.blog-filter-rule { height: 1px; background: var(--ink-10); margin: 0 var(--pad); }

.blog-list { padding: 56px var(--pad) 100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 36px; align-items: start; }
.blog-item.blog-item-hidden { display: none; }
.blog-item-img { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 18px; }
.blog-item-body { display: flex; flex-direction: column; gap: 8px; }
.blog-item-category { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
.blog-item-title { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.18; color: var(--ink); }
.blog-item-title a { transition: opacity .2s; }
.blog-item:hover .blog-item-title a { opacity: .7; }
.blog-item-excerpt { font-family: var(--sans); font-size: 13.5px; line-height: 22px; color: var(--ink-50); }
.blog-item-date { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--ink-50); margin-top: 6px; }

.blog-empty { display: none; padding: 80px 0; font-family: var(--serif); font-size: 28px; color: var(--ink-50); text-align: center; }
.blog-empty.visible { display: block; }

@media (max-width: 1100px) {
  .blog-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .blog-title { font-size: 40px; }
  .blog-filter-btn { padding: 10px 18px; }
  .blog-list { grid-template-columns: 1fr; gap: 48px; }
}

/* ══════════════════════════════════════════════════════════
   BUY A HOME (template-buy.php) — de buy.html.
   La cabecera reutiliza .page-hero (ya definida arriba, la misma que
   usa el listado de villas). Los botones reutilizan .btn-primary.
   Solo ".intro" colisiona con la portada — de ahí el prefijo "buy-intro".
   El resto de nombres (.why, .properties, .prop-*, .process, .contact-cta,
   .cta-*) no existían en ningún otro sitio, así que se quedan tal cual.
══════════════════════════════════════════════════════════ */
.buy-intro {
  padding: 80px var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center;
  border-bottom: 1px solid var(--ink-10);
}
.buy-intro-heading, .buy-intro-heading h2 {
  font-family: var(--serif); font-size: 52px; font-weight: 400;
  line-height: 1.05; letter-spacing: -.2px; color: var(--ink);
}
.buy-intro-heading em { font-style: italic; color: var(--ink-50); }
.buy-intro-body, .buy-intro-body p {
  font-size: 15px; line-height: 26px; color: var(--ink-50); margin-bottom: 22px;
}
.buy-intro-body p:last-child { margin-bottom: 0; }

.why { padding: 80px var(--pad); background: var(--c2); }
.section-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: 48px; display: block;
}
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.why-num { font-family: var(--serif); font-size: 48px; font-weight: 400; color: var(--ink-10); line-height: 1; margin-bottom: 20px; }
.why-title { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 12px; color: var(--ink); }
.why-desc { font-size: 13.5px; line-height: 22px; color: var(--ink-50); }

.properties { padding: 80px var(--pad) 100px; }
.properties-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 48px; gap: 20px; flex-wrap: wrap; }
.properties-title { font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1; letter-spacing: -.2px; color: var(--ink); }
.properties-sub { font-size: 13px; color: var(--ink-50); letter-spacing: .06em; white-space: nowrap; }

.prop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 36px; }
.prop-card { cursor: pointer; }
.prop-card-img { display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: 20px; position: relative; }
.prop-card-img img { transition: transform .7s var(--ease); }
.prop-card:hover .prop-card-img img { transform: scale(1.04); }
.prop-card-tag {
  position: absolute; top: 20px; left: 20px; background: rgba(255,255,255,.92);
  font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; color: var(--ink);
}
.prop-card-body { display: flex; flex-direction: column; gap: 8px; }
.prop-card-location { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
/* Los títulos del mockup original eran cortos ("Villa Antigua"), pero los
   títulos reales del feed InfoCasa son frases largas de marketing (hasta
   ~100 caracteres) — se recorta a 2 líneas con "…" para que la tarjeta no
   se rompa cuando llega una propiedad sincronizada. */
.prop-card-name { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--ink); transition: opacity .2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prop-card:hover .prop-card-name { opacity: .7; }
.prop-card-specs { font-size: 12.5px; color: var(--ink-50); line-height: 20px; }
.prop-card-price { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -.1px; margin-top: 4px; color: var(--ink); }
.prop-card-cta {
  display: inline-block; margin-top: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid rgba(34,31,31,.3); padding-bottom: 2px;
  width: fit-content; transition: border-color .2s;
}
.prop-card:hover .prop-card-cta { border-color: var(--ink); }

.process { background: var(--ink); color: #fff; padding: 80px var(--pad); }
.process-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.40); margin-bottom: 48px; display: block;
}
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 40px; }
.process-step { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 16px; }
.process-title { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; color: #fff; }
.process-desc { font-size: 13px; line-height: 21px; color: rgba(255,255,255,.50); }

.contact-cta {
  padding: 80px var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center;
  background: var(--c2);
  border-top: 1px solid var(--ink-10);
}
.cta-heading { font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1.05; color: var(--ink); }
.cta-heading em { font-style: italic; color: var(--ink-50); }
.cta-body { font-size: 15px; line-height: 26px; color: var(--ink-50); margin-bottom: 32px; }
.cta-form { display: flex; flex-direction: column; gap: 16px; }
.cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cta-field { display: flex; flex-direction: column; gap: 6px; }
.cta-field label { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
.cta-field input, .cta-field select {
  border: none; border-bottom: 1px solid rgba(34,31,31,.2);
  background: transparent;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 10px 0; outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.cta-field input:focus, .cta-field select:focus { border-color: var(--ink); }
.buy-cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cta-actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; flex-wrap: wrap; }
.cta-submit {
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 40px; width: fit-content;
  transition: background .2s; cursor: pointer; border: none;
}
.cta-submit:hover { background: #3d3838; }
.cta-submit:disabled { opacity: .6; cursor: default; }
.cta-note { font-family: var(--sans); font-size: 11px; color: var(--ink-50); line-height: 17px; max-width: 260px; }

@media (max-width: 1100px) {
  .why-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
  .prop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .buy-intro, .contact-cta { grid-template-columns: 1fr; gap: 40px; }
  .buy-intro-heading, .buy-intro-heading h2, .cta-heading { font-size: 40px; }
}
@media (max-width: 700px) {
  .why-grid, .process-grid, .prop-grid { grid-template-columns: 1fr; }
  .cta-row { grid-template-columns: 1fr; }
  .properties-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ══════════════════════════════════════════════════════════
   VILLAS LISTING (nuevo diseño) — template-villas.php, a partir de
   villas1.html. Colores/tipografías adaptados a las variables de arriba
   (:root) en vez de la paleta propia del mockup (sage verde, etc.) — así
   la página encaja con el resto de la web, tal y como hablamos.

   Reutiliza ".page-hero" NO — esta página usa una cabecera plana sin
   foto (".page-head"), distinta de villas/blog/about porque así es como
   está diseñada en villas1.html.

   El carrusel de fotos de cada tarjeta reutiliza las clases .vi-slides/
   .vi-slide/.vi-dots/.vi-dot (mismo JS initGallery() de main.js que ya
   usa el resto del sitio) — por eso sus nombres no llevan el prefijo
   "vc-" del resto de esta sección.
══════════════════════════════════════════════════════════ */

/* ── Cabecera plana ─────────────────────────────────────── */
.page-head { padding-top: var(--nav-h); background: var(--c1); border-bottom: 1px solid var(--ink-10); }
.page-head-inner {
  max-width: 1600px; margin: 0 auto;
  padding: 60px var(--pad) 44px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px;
}
.ph-label {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: 18px; display: block;
}
.ph-title {
  font-family: var(--serif); font-size: clamp(48px, 6vw, 80px);
  font-weight: 400; line-height: .95; letter-spacing: -1px; color: var(--ink);
}
.ph-title em { font-style: italic; color: var(--ink-50); }
.ph-right { text-align: right; padding-bottom: 6px; max-width: 360px; }
.ph-sub, .ph-sub p { font-family: var(--sans); font-size: 14px; line-height: 22px; color: var(--ink-50); text-align: right; }
.ph-sub p { margin-bottom: 10px; }
.ph-sub p:last-child { margin-bottom: 0; }

/* Aviso del plazo de disponibilidad (template-last-minute.php) — fuera de
   .page-head-inner (que es de 2 columnas) para que ocupe todo el ancho
   como una franja propia debajo del título, pero con el MISMO max-width
   y padding lateral que ese bloque y que .grid-section de más abajo, así
   su borde DERECHO queda alineado con el de las fotos de la columna
   derecha de tarjetas (pedido de Caty: alineado a la derecha, con las
   fotos de la derecha — el primer intento lo dejó a la izquierda, mal). */
.lm-note-wrap { max-width: 1600px; margin: 0 auto; padding: 0 var(--pad) 28px; }
.lm-note { font-family: var(--sans); font-size: 14px; font-weight: 500; color: #7a1c1c; text-align: right; }

/* ── Filter bar ─────────────────────────────────────────── */
.filter-wrap { background: var(--c1); border-bottom: 1px solid var(--ink-10); position: sticky; top: var(--nav-h); z-index: 90; }
.filter-inner { max-width: 1600px; margin: 0 auto; padding: 0 var(--pad); display: flex; align-items: center; gap: 8px; height: 56px; flex-wrap: wrap; }
.fi-label { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-50); margin-right: 6px; }
.fpill {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-50); padding: 7px 18px; border: 1px solid var(--ink-10);
  background: none; cursor: pointer; transition: all .16s;
}
.fpill:hover { border-color: rgba(34,31,31,.3); color: var(--ink); }
.fpill.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Grid ───────────────────────────────────────────────── */
.grid-section { max-width: 1600px; margin: 0 auto; padding: 48px var(--pad) 90px; }
.villa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; }
.vc.vc-hidden { display: none; }

/* ── Card ───────────────────────────────────────────────── */
.vc { display: flex; flex-direction: column; }
.vc-img { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--c2); }
.vc-img-link { display: block; width: 100%; height: 100%; }
.vi-slides { position: relative; width: 100%; height: 100%; }
.vi-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease); }
.vi-slide.active { opacity: 1; z-index: 1; }
.vc-img img { transition: transform 1.1s var(--ease); }
.vc:hover .vc-img img { transform: scale(1.04); }

.vc-badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  padding: 6px 12px; background: rgba(255,255,255,.92); color: var(--ink);
}
.vc-badge.new { color: #2c6b45; }
/* Etiqueta "Last Minute" (template-last-minute.php) — a propósito SIN el
   verde de ".new" (Caty: no quería ese verde ahí). Chip sólido en --ink,
   igual que quedó en la 2.9.1 — el rojo granate de más abajo (.lm-note)
   es para el texto del plazo, NO para esta etiqueta. */
.vc-badge.lm-badge { background: var(--ink); color: #fff; }

.vi-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 3; }
.vi-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .18s, transform .18s; }
.vi-dot.active { background: #fff; transform: scale(1.4); }

.vc-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--ink); opacity: 0; transition: opacity .18s; cursor: pointer;
}
.vc-arr-l { left: 10px; }
.vc-arr-r { right: 10px; }
.vc-img:hover .vc-arr { opacity: 1; }

.vc-heart {
  position: absolute; bottom: 12px; right: 14px; z-index: 4;
  font-size: 19px; color: rgba(255,255,255,.75); transition: color .18s; line-height: 1;
}
.vc-heart:hover { color: #fff; }
.vc-heart.loved { color: #c0392b; }

.vc-body { padding: 18px 0 0; flex: 1; display: flex; flex-direction: column; }
.vc-name-link { display: block; }
.vc-name { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1.1; margin-bottom: 4px; transition: opacity .2s; }
.vc-name-link:hover .vc-name { opacity: .65; }
.vc-loc { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--ink-50); margin-bottom: 12px; }
.vc-specs { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.vc-spec {
  font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-50); padding-right: 10px; margin-right: 10px; border-right: 1px solid var(--ink-10);
}
.vc-spec:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.vc-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ink-10); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vc-price-txt { font-family: var(--sans); font-size: 12px; color: var(--ink-50); }
.vc-price-txt strong { font-weight: 600; font-size: 14px; color: var(--ink); }
.vc-enquire {
  font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid rgba(34,31,31,.25); padding-bottom: 2px;
  background: none; border-top: none; border-left: none; border-right: none; cursor: pointer;
  transition: border-color .18s; white-space: nowrap;
}
.vc-enquire:hover { border-bottom-color: var(--ink); }

/* ── Mid-grid banner ────────────────────────────────────── */
.mid-banner {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--c3);
  overflow: hidden; min-height: 300px;
}
.mb-left { padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; }
.mb-eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 16px; display: block; }
.mb-title { font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); font-weight: 400; line-height: 1.05; color: var(--ink); margin-bottom: 14px; }
.mb-title em { font-style: italic; color: var(--ink-50); }
.mb-text { font-family: var(--sans); font-size: 13.5px; line-height: 21px; color: var(--ink-50); max-width: 380px; margin-bottom: 26px; }
.mb-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.mb-dark {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 13px 24px; border: 1px solid var(--ink);
  display: inline-flex; align-items: center; gap: 9px; transition: background .18s;
}
.mb-dark:hover { background: #3d3838; }
.mb-out {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); padding: 13px 24px; border: 1px solid var(--ink);
  display: inline-flex; align-items: center; gap: 9px; transition: background .18s;
}
.mb-out:hover { background: rgba(34,31,31,.06); }
.mb-right { position: relative; overflow: hidden; }
.mb-right img { width: 100%; height: 100%; object-fit: cover; }

/* ── Booking section ────────────────────────────────────── */
.book-section { background: var(--c2); border-top: 1px solid var(--ink-10); }
.book-inner { max-width: 1600px; margin: 0 auto; padding: 76px var(--pad) 90px; display: grid; grid-template-columns: 1fr 440px; gap: 0 70px; align-items: start; }
.book-eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-50); display: block; margin-bottom: 16px; }
.book-title { font-family: var(--serif); font-size: clamp(36px, 3.5vw, 52px); font-weight: 400; line-height: 1.05; color: var(--ink); margin-bottom: 18px; }
.book-title em { font-style: italic; color: var(--ink-50); }
.book-text { font-family: var(--sans); font-size: 14px; line-height: 23px; color: var(--ink-50); max-width: 400px; margin-bottom: 30px; }
.book-promises { display: flex; flex-direction: column; gap: 12px; }
.bp { display: flex; align-items: flex-start; gap: 14px; }
.bp-l { width: 16px; height: 1px; background: rgba(34,31,31,.3); flex-shrink: 0; margin-top: 9px; }
.bp-t { font-family: var(--sans); font-size: 12px; color: var(--ink-50); line-height: 19px; }

/* ── Widget ─────────────────────────────────────────────── */
.book-widget { background: var(--c1); padding: 28px 28px 24px; border: 1px solid var(--ink-10); }
.bw-header { text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--ink-10); position: relative; }
.bw-excl { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); display: block; line-height: 16px; }
.bw-heart { position: absolute; right: 0; top: 0; font-size: 20px; color: rgba(34,31,31,.3); transition: color .18s; line-height: 1; }
.bw-heart:hover { color: var(--ink); }
.bw-heart.loved { color: #c0392b; }
.bw-field { margin-bottom: 16px; }
.bw-field-label { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); display: block; margin-bottom: 8px; }

.dp-wrap { position: relative; }
.dp-trigger { width: 100%; background: var(--c2); border: 1px solid var(--ink-10); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: border-color .18s; text-align: left; }
.dp-trigger:hover, .dp-trigger.open { border-color: rgba(34,31,31,.3); }
.dp-ttext { font-family: var(--sans); font-size: 14px; color: var(--ink); }
.dp-ttext.placeholder { color: var(--ink-50); }
.dp-arrow { font-size: 11px; color: rgba(34,31,31,.3); transition: transform .2s; }
.dp-trigger.open .dp-arrow { transform: rotate(180deg); }

.dp-panel {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--c1); border: 1px solid var(--ink-10); box-shadow: 0 12px 40px rgba(34,31,31,.14);
  z-index: 200; width: 600px; padding: 24px 24px 20px;
}
.dp-cals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
.dp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dp-nav { width: 28px; height: 28px; border: 1px solid var(--ink-10); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); cursor: pointer; background: none; transition: background .15s; }
.dp-nav:hover { background: var(--c2); }
.dp-nav-empty { width: 28px; height: 28px; display: inline-block; }
.dp-cal-title { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.dp-day-heads { display: grid; grid-template-columns: repeat(7,1fr); margin-bottom: 6px; }
.dp-day-heads span { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(34,31,31,.3); text-align: center; padding: 4px 0; }
.dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.dp-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer; transition: background .12s, color .12s; position: relative; }
.dp-cell:hover:not(.dp-past):not(.dp-unavailable):not(.dp-start):not(.dp-end) { background: var(--c2); }
.dp-cell.dp-past, .dp-cell.dp-unavailable { color: rgba(34,31,31,.2); cursor: default; text-decoration: line-through; }
.dp-cell.dp-start, .dp-cell.dp-end { background: var(--ink); color: #fff; }
.dp-cell.dp-in-range { background: var(--c2); }
.dp-cell.dp-today::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.dp-footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ink-10); }
.dp-btn { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 10px 22px; cursor: pointer; transition: background .15s; border: none; }
.dp-clear { background: none; border: 1px solid var(--ink-10); color: var(--ink); }
.dp-clear:hover { background: var(--c2); }
.dp-confirm { background: var(--ink); border: 1px solid var(--ink); color: #fff; }
.dp-confirm:hover { background: #3d3838; }

.bw-select {
  width: 100%; background: var(--c2); border: 1px solid var(--ink-10);
  padding: 14px 16px; font-family: var(--sans); font-size: 14px; color: var(--ink);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23221f1f' opacity='.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  outline: none; transition: border-color .18s;
}
.bw-select:focus { border-color: rgba(34,31,31,.3); }

.bw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.bw-input {
  width: 100%; background: var(--c2); border: 1px solid var(--ink-10);
  padding: 12px 14px; font-family: var(--sans); font-size: 13px; color: var(--ink);
  outline: none; transition: border-color .18s;
}
.bw-input:focus { border-color: rgba(34,31,31,.3); }
.bw-input::placeholder { color: rgba(34,31,31,.3); }
.bw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.bw-divider { height: 1px; background: var(--ink-10); margin: 18px 0; }
.bw-price { margin-bottom: 16px; display: flex; align-items: baseline; gap: 6px; }
.bw-from { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-50); }
.bw-amount { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--ink); }

.bw-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bw-btn-main { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 14px 10px; border: 1px solid var(--ink); cursor: pointer; transition: background .18s; text-align: center; }
.bw-btn-main:hover { background: #3d3838; }
.bw-btn-main:disabled { opacity: .6; cursor: default; }
.bw-btn-sec { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); padding: 14px 10px; border: 1px solid rgba(34,31,31,.15); cursor: pointer; transition: background .18s; text-align: center; display: flex; align-items: center; justify-content: center; background: none; }
.bw-btn-sec:hover { background: var(--c2); }
.bw-note { font-family: var(--sans); text-align: center; margin-top: 12px; font-size: 10px; color: rgba(34,31,31,.4); }
.bw-note.is-success { color: #2c6b45; }
.bw-note.is-error { color: #c0392b; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .book-inner { grid-template-columns: 1fr; gap: 48px; }
  .dp-panel { width: 480px; }
}
@media (max-width: 1000px) {
  .villa-grid { grid-template-columns: repeat(2, 1fr); }
  .mid-banner { grid-template-columns: 1fr; }
  .mb-right { aspect-ratio: 16/6; order: -1; }
  .mb-left { padding: 36px 28px; }
  .dp-panel { width: calc(100vw - 56px); left: 0; transform: none; }
  .dp-cals { grid-template-columns: 1fr; gap: 16px; }
  .page-head-inner { grid-template-columns: 1fr; }
  .ph-right, .ph-sub, .ph-sub p { text-align: left; }
  .ph-right { max-width: none; }
}
@media (max-width: 700px) {
  .villa-grid { grid-template-columns: 1fr; }
  .bw-row, .bw-ctas { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE (sesión 17, retocada en la misma sesión) —
   template-contact.php, calcada del pantallazo real que envió Caty de
   luv.studio/es/contact: una sola columna, sin caja alrededor del
   formulario, campos con línea inferior (no cajas). Reutiliza a
   propósito .cta-form/.cta-row/.cta-field/.cta-actions (definidas más
   arriba, para ".contact-cta" del formulario de la página Buy) — mismo
   look en todo el sitio, cero CSS de campos duplicado. El teléfono/
   email/redes NO se repiten aquí: ya están en el footer (como en
   luv.studio, que los tiene en SU footer y no en la página de
   contacto).
════════════════════════════════════════════════════════════ */
.contact-header {
  padding: calc(var(--nav-h) + 90px) var(--pad) 0;
  max-width: 900px;
}
.contact-eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 1.5px; text-transform: uppercase;
  /* Corregido (ronda 5): inspeccionado el DOM real de luv.studio/es/contact
     con el navegador — el color real NO es un gris medio (#333 era una
     aproximación mía, no verificada): es rgb(34,31,31)=#221f1f a opacidad
     100%, el mismo var(--ink) que el resto del texto. Se ve "más claro"
     solo por contraste (letra pequeña y fina junto al titular gigante),
     no porque lo sea de verdad. */
  color: var(--ink);
  margin-bottom: 20px; display: block;
}
/* Tamaño corregido (sesión 18): medido a partir del pantallazo real que
   mandó Caty de luv.studio/es/contact (la "H" de "Hablemos" mide ~100px
   de fuente, no los 68px que había puesto al principio) — ahora usa el
   mismo techo grande que ya usa el H1 de las noticias (.art-title, ver
   [[pollensina-article-redesign]]), en vez de un tamaño más discreto
   inventado sin comparar contra la referencia. */
.contact-title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 7.4vw, 104px);
  line-height: 1.02; letter-spacing: -.01em; color: var(--ink); margin-bottom: 24px;
}
.contact-intro {
  font-family: var(--sans); font-size: 17px; line-height: 28px;
  /* Corregido (ronda 5): en el DOM real de luv.studio, TODO este bloque
     (la pregunta y los párrafos siguientes) usa el mismo color de tinta
     al 100% (rgb(34,31,31), opacity:1) — nada va en gris apagado ahí.
     var(--ink-50) era el motivo por el que se veía "descolorido". */
  color: var(--ink);
  max-width: 620px; margin-bottom: 24px;
}
.contact-intro p { margin-bottom: 16px; }
.contact-intro p:last-child { margin-bottom: 0; }

/* Ancho corregido (sesión 18): 680px se quedaba corto frente a la
   referencia real (los campos Nombre/Apellido de luv.studio miden en
   conjunto ~950px sobre un viewport de referencia bastante más ancho
   que eso) — se sube a 960px, igual que .contact-header, y se agranda
   también el hueco entre los dos campos de cada fila (era el mismo
   16px que usa el formulario, más discreto, de la página Buy). */
/* 1200px (con el padding lateral de --pad ya incluido, box-sizing:
   border-box) da un ancho de campo real de ~960px — medido a partir de
   los ~950px que ocupaban juntos "Nombre"+"Apellido" en el pantallazo
   real de luv.studio que mandó Caty (más ancho a propósito que el
   texto de la cabecera, que se queda legible en 620px: es normal que
   el formulario "respire" más que el párrafo). */
.contact-form-section {
  padding: 16px var(--pad) 140px;
  max-width: 1200px;
}
/* Espacio entre filas (ronda 6): medido directamente en el DOM real de
   luv.studio a ancho de escritorio — de la línea de un campo a la
   etiqueta del campo de abajo hay 60px exactos, bastante más que los
   22px que había aquí. Caty: "el espacio de la linea hasta el campo de
   abajo que sea un poco mayor". */
.contact-form-section .cta-form { gap: 60px; margin-top: 0; }
.contact-form-section .cta-row { gap: 40px; }
/* Campo de descripción más grande (ronda 4): 100px se quedaba corto
   comparado con la referencia (una caja bastante más alta) — sube a
   180px. Ver también el rows="7" en template-contact.php (por si no
   carga el CSS, el textarea ya nace más alto). */
.contact-form-section .cta-field textarea {
  border: 1px solid rgba(34,31,31,.2); background: transparent;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 12px; outline: none; resize: vertical; min-height: 180px;
  transition: border-color .2s;
}
.contact-form-section .cta-field textarea:focus { border-color: var(--ink); }
/* Botón "Enviar" (ronda 7): en la referencia va a la derecha del
   formulario y con las esquinas totalmente redondeadas (píldora) — en
   vez de a la izquierda y en ángulo recto como el resto de botones del
   sitio (.btn-primary es compartido, así que el cambio va SOLO aquí).
   Caty: "el boton de enviar fijate en el original como es a la derecha
   y con los bordes redondeados". */
.contact-form-section .cta-actions { margin-top: 4px; justify-content: flex-end; }
.contact-form-section .btn-primary { border-radius: 999px; }
.contact-form-section .booking-msg,
.contact-form-section .booking-fine-print { text-align: left; }

/* Etiquetas de los campos (ronda 4, espaciado rehecho en ronda 5): en la
   referencia de luv.studio las etiquetas ("Nombre*") van en minúsculas
   normales (no en mayúsculas pequeñas como el resto del sitio) y en el
   mismo negro que el texto (#221f1f = var(--ink), confirmado inspeccionando
   el DOM real con el navegador). Va SOLO aquí, no en .cta-field
   directamente, para no tocar el formulario de la página Buy (comparte
   las mismas clases y Caty no ha pedido cambios ahí).
   El espaciado usa la MISMA técnica que el sitio real (inspeccionado con
   el navegador): la etiqueta va con position:absolute pegada justo
   encima de la línea del campo, en vez de un hueco por gap — por eso
   antes, por mucho que se redujera el gap, seguía sin quedar tan
   pegada como en la referencia. */
.contact-form-section .cta-field {
  position: relative; gap: 0; padding-top: 22px;
}
.contact-form-section .cta-field label {
  position: absolute; top: 0; left: 0;
  text-transform: none; letter-spacing: normal;
  font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--ink);
}
.contact-form-section .cta-field input,
.contact-form-section .cta-field select {
  padding: 0 0 6px;
}

/* Etiqueta flotante (ronda 7): Caty pidió el efecto del original — el
   texto del campo (p.ej. "First Name") empieza dentro de la caja, como
   un placeholder, y al hacer click / escribir sube arriba del todo
   para dejar sitio a lo que se escribe ("cuando das click en la caja
   name se pone mas arriba y puedes escribir"). Solo en los campos de
   una línea (.cta-field--float): el textarea y el campo de fechas
   mantienen su etiqueta fija arriba, como ya tenían. Truco estándar de
   :placeholder-shown — requiere que en el HTML el <input> vaya ANTES
   que el <label> (selector de hermano adyacente) y placeholder=" "
   (un espacio) para que el estado "vacío" se detecte igual estando
   vacío de verdad. */
.contact-form-section .cta-field--float label {
  top: 22px;
  font-size: 15px;
  transition: top .2s ease, font-size .2s ease;
  pointer-events: none;
}
.contact-form-section .cta-field--float input:focus + label,
.contact-form-section .cta-field--float input:not(:placeholder-shown) + label {
  top: 0;
  font-size: 11px;
}

/* Campo "Dates" (ronda 7): mismo calendario de doble mes que el
   widget de la página Villas (ver pollensinaDateRangePicker en
   main.js) en vez de los <input type="date"> nativos — Caty: "los
   calendarios hazmelos mejor mas grandes mejor maquetados". La
   etiqueta se queda fija arriba (misma regla que ya tenía .cta-field
   label de esta página, no hace falta tocar nada ahí) y el panel del
   calendario se ensancha un poco en escritorio; los saltos de 1200px/
   1000px que ya traía el widget de Villas no se tocan, así ese widget
   se queda exactamente igual. */
@media (min-width: 1201px) {
  .contact-form-section .dp-panel { width: 680px; }
}

/* Aviso de validación al estilo del original (ronda 4): Caty pidió
   replicar "el efecto que hace cuando voy a escribir" de luv.studio —
   un triángulo de aviso + texto en rojo/naranja bajo la línea del
   campo. Antes el formulario usaba reportValidity() nativo (la burbuja
   fea del navegador); main.js ahora pinta este aviso propio en su
   lugar (ver bookingForm en assets/js/main.js), y añade/quita las
   clases .has-error / .field-error que estilamos aquí. #ff5555
   medido directamente de los píxeles del pantallazo de Caty. */
.contact-form-section .cta-field.has-error input,
.contact-form-section .cta-field.has-error select,
.contact-form-section .cta-field.has-error textarea,
.contact-consent.has-error input[type="checkbox"] {
  border-color: #ff5555;
}
.contact-form-section .field-error {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-family: var(--sans); font-size: 13px; line-height: 1.3;
  color: #ff5555;
}
.contact-form-section .field-error svg { flex: none; }

.contact-consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; cursor: pointer;
}
.contact-consent input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ink); }
.contact-consent span { font-family: var(--sans); font-size: 12px; line-height: 18px; color: var(--ink-50); }
.contact-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Villa cluster landing pages — visually aligned with the new Pollensina theme */
.cluster-page{background:#f5f1ea;color:var(--ink)}
.cluster-hero{min-height:72vh;position:relative;display:flex;align-items:flex-end;background-image:var(--cluster-hero);background-size:cover;background-position:center;color:#fff}
.cluster-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.08),rgba(20,18,16,.6))}
.cluster-hero-inner{position:relative;z-index:1;width:min(1180px,calc(100% - 2*var(--pad)));margin:auto;padding:170px 0 72px}
.cluster-eyebrow,.cluster-kicker{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.cluster-title{font-family:var(--serif);font-weight:400;font-size:clamp(54px,7.4vw,104px);line-height:.98;max-width:1000px;margin:18px 0 0}
.cluster-intro{max-width:650px;margin:28px 0 0 auto;font-family:var(--sans);font-size:18px;line-height:1.65;color:rgba(255,255,255,.92)}
.cluster-editorial,.cluster-villas,.cluster-faq,.cluster-related{padding:110px var(--pad)}
.cluster-editorial-grid,.cluster-section-head,.cluster-villa-grid,.cluster-related-grid{width:min(1180px,100%);margin:auto}
.cluster-editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.cluster-editorial h2,.cluster-section-head h2,.cluster-faq h2,.cluster-cta h2,.cluster-story-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5vw,70px);line-height:1.02;margin:16px 0 0}
.cluster-copy p,.cluster-page-copy,.cluster-story-copy p,.cluster-faq-list p{font-family:var(--sans);font-size:16px;line-height:1.8;color:rgba(34,31,31,.72)}
.cluster-villas{background:#fff}.cluster-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px}.cluster-villa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 24px}.cluster-villa-image{display:block;aspect-ratio:4/5;overflow:hidden;background:#ddd}.cluster-villa-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.cluster-villa-card:hover img{transform:scale(1.02)}.cluster-villa-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(34,31,31,.5)}.cluster-villa-card h3{font-family:var(--serif);font-size:30px;font-weight:400;margin:10px 0}.cluster-villa-card a{color:inherit;text-decoration:none}
.cluster-story{display:grid;grid-template-columns:1.05fr .95fr;background:#211f1c;color:#fff;min-height:620px}.cluster-story-image{background-size:cover;background-position:center}.cluster-story-copy{padding:80px clamp(36px,7vw,100px);display:flex;flex-direction:column;justify-content:center}.cluster-story-copy p{color:rgba(255,255,255,.72)}
.cluster-values{display:grid;grid-template-columns:repeat(3,1fr);background:#e8dfd2}.cluster-value{padding:64px clamp(28px,4vw,56px);border-right:1px solid rgba(34,31,31,.12)}.cluster-value:last-child{border-right:0}.cluster-value h3{font-family:var(--serif);font-size:32px;font-weight:400}.cluster-value p{font-family:var(--sans);font-size:14px;line-height:1.7;color:rgba(34,31,31,.68)}
.cluster-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.cluster-faq-list details{border-top:1px solid rgba(34,31,31,.16);padding:22px 0}.cluster-faq-list summary{font-family:var(--serif);font-size:24px;cursor:pointer}.cluster-related{background:#fff}.cluster-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(34,31,31,.12)}.cluster-related-grid>a{background:#fff;padding:38px 34px;min-height:172px;display:grid;grid-template-columns:112px minmax(0,1fr) 28px;gap:24px;align-items:center;color:var(--ink);text-decoration:none;transition:background-color .28s ease}.cluster-related-grid>a:hover{background:#f7f3ec}.cluster-related-grid>a:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}.cluster-related-meta{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--sans);font-size:14px;line-height:1.2}.cluster-related-meta svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}.cluster-related-grid>a:hover .cluster-related-meta svg{transform:translateY(-3px)}.cluster-related-grid strong{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:400}.cluster-related-grid em{font-family:var(--sans);font-size:18px;font-style:normal;text-align:right;transition:transform .28s ease}.cluster-related-grid>a:hover em{transform:translateX(4px)}.cluster-cta{padding:120px var(--pad) 176px;text-align:center;background:#d9cfbf}.cluster-cta h2{max-width:850px;margin:16px auto}.cluster-cta p{max-width:980px;margin:24px auto 36px;font-family:var(--sans);line-height:1.6}.cluster-button,.cluster-text-link{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}.cluster-button{display:inline-block;background:var(--ink);color:#fff;padding:15px 24px}.cluster-text-link{color:inherit;border-bottom:1px solid currentColor;padding-bottom:3px}
@media(max-width:960px){.cluster-editorial-grid,.cluster-story,.cluster-faq{grid-template-columns:1fr}.cluster-villa-grid{grid-template-columns:repeat(2,1fr)}.cluster-values{grid-template-columns:1fr}.cluster-value{border-right:0;border-bottom:1px solid rgba(34,31,31,.12)}}
@media(max-width:640px){.cluster-hero-inner{padding:135px 0 50px}.cluster-intro{font-size:16px}.cluster-editorial,.cluster-villas,.cluster-faq,.cluster-related{padding:78px var(--pad)}.cluster-villa-grid,.cluster-related-grid{grid-template-columns:1fr}.cluster-section-head{align-items:flex-start;flex-direction:column}.cluster-related-grid>a{grid-template-columns:72px minmax(0,1fr) 20px;gap:16px;padding:28px 22px;min-height:140px}.cluster-related-meta{font-size:12px}.cluster-related-meta svg{width:27px;height:27px}.cluster-related-grid strong{font-size:24px}.cluster-cta{padding:90px var(--pad) 128px}.cluster-cta p{margin-bottom:32px}}