/* Tipografías alojadas en este mismo sitio (Fraunces e Instrument Sans, licencia SIL Open Font).
   Antes se pedían a fonts.googleapis.com, lo que enviaba la IP del visitante a Google. */

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext-a435d1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-de4b58.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-ext-a435d1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-italic-latin-de4b58.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext-1fba8b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-latin-63f165.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext-1fba8b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-latin-63f165.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext-1fba8b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-latin-63f165.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-416253.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-e190a6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-416253.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-e190a6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-416253.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-e190a6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-416253.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-e190a6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   RAÚL DUARTE PARCELAS — style.css
   Sistema de diseño: "Plano" — líneas de deslinde y curvas de nivel
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Color */
  --bg:        #F5F3EA;   /* piedra clara */
  --bg-alt:    #ECE8DA;   /* piedra, un poco más oscura, para alternar secciones */
  --ink:       #15160F;   /* casi negro, cálido */
  --ink-soft:  #4C4C3F;   /* texto secundario */
  --olive:     #5C6740;   /* acento principal */
  --olive-dp:  #333B22;   /* acento oscuro / hover */
  --beige:     #C9BC9A;   /* acento secundario */
  --cream:     #F7F5EC;   /* texto claro sobre fondo oscuro */
  --line:      rgba(21,22,15,0.14);
  --line-soft: rgba(21,22,15,0.08);

  /* Tipografía */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:   clamp(2.6rem, 8.6vw, 5.4rem);
  --fs-h2:     clamp(2rem, 5.2vw, 3.15rem);
  --fs-h3:     clamp(1.28rem, 3vw, 1.6rem);
  --fs-price:  clamp(1.9rem, 4.4vw, 2.5rem);
  --fs-lead:   clamp(1.05rem, 2.4vw, 1.3rem);
  --fs-body:   1.04rem;
  --fs-small:  0.9rem;
  --fs-eyebrow: 0.76rem;

  /* Espaciado fluido */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.6rem;
  --sp-4: clamp(2rem, 5vw, 3rem);
  --sp-5: clamp(3.2rem, 8vw, 5.5rem);
  --sp-6: clamp(4.5rem, 12vw, 8.5rem);

  --container: 1240px;
  --pad-inline: clamp(1.25rem, 6vw, 3rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-1: .5s;
  --dur-2: .9s;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after{ box-sizing: border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; }
input, textarea{ font:inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

:focus-visible{
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

/* ---------- 3. UTILIDADES ---------- */
.container{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--pad-inline);
}
.section{ padding-block: var(--sp-6); position:relative; }
.section--alt{ background: var(--bg-alt); }
.section--ink{ background: var(--ink); color: var(--cream); }

.eyebrow{
  display:flex; align-items:center; gap:.6em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight:600;
  margin-bottom: var(--sp-2);
}
.section--ink .eyebrow{ color: var(--beige); }
.eyebrow::before{
  content:"";
  width: 26px; height:1px;
  background: currentColor;
  display:inline-block;
}

.lead{ font-size: var(--fs-lead); color: var(--ink-soft); max-width: 46ch; }
.section--ink .lead{ color: rgba(247,245,236,0.78); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1em 1.9em;
  font-size: .95rem; font-weight:600;
  letter-spacing:.01em;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  white-space: nowrap;
}
.btn--primary{ background: var(--ink); color: var(--cream); }
.btn--primary:hover{ background: var(--olive-dp); transform: translateY(-1px); }
.btn--ghost{ border-color: currentColor; color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--cream); }
.section--ink .btn--ghost{ color: var(--cream); }
.section--ink .btn--ghost:hover{ background: var(--cream); color: var(--ink); }
.btn--light{ background: var(--cream); color: var(--ink); }
.btn--light:hover{ background: var(--beige); transform: translateY(-1px); }
.btn--sm{ padding: .8em 1.4em; font-size:.86rem; }
.btn svg{ width:1.05em; height:1.05em; flex-shrink:0; }

/* Divisor "deslinde" entre secciones */
.boundary{
  display:flex; align-items:center; justify-content:center;
  padding-block: var(--sp-2);
}
.boundary::before, .boundary::after{
  content:""; flex:1; height:0; border-top:1px dashed var(--line);
}
.boundary__mark{
  width:6px; height:6px; margin-inline:14px;
  border:1px solid var(--olive);
  transform: rotate(45deg);
  flex-shrink:0;
}

/* Marco con esquinas tipo "hito de deslinde" */
.plot-frame{ position:relative; overflow:hidden; background:var(--ink); }
.plot-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.plot-frame .corner{
  position:absolute; width:20px; height:20px; pointer-events:none; z-index:2;
  filter: drop-shadow(0 0 2px rgba(21,22,15,.7)) drop-shadow(0 0 5px rgba(21,22,15,.35));
}
.plot-frame .corner.tl{ top:12px; left:12px; border-top:1.5px solid var(--mark, var(--cream)); border-left:1.5px solid var(--mark, var(--cream)); }
.plot-frame .corner.tr{ top:12px; right:12px; border-top:1.5px solid var(--mark, var(--cream)); border-right:1.5px solid var(--mark, var(--cream)); }
.plot-frame .corner.bl{ bottom:12px; left:12px; border-bottom:1.5px solid var(--mark, var(--cream)); border-left:1.5px solid var(--mark, var(--cream)); }
.plot-frame .corner.br{ bottom:12px; right:12px; border-bottom:1.5px solid var(--mark, var(--cream)); border-right:1.5px solid var(--mark, var(--cream)); }
.plot-frame.mark-dark{ --mark: var(--ink); }

/* Reveal on scroll */
.reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* visualmente oculto, accesible */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:1rem; top:-60px;
  background:var(--ink); color:var(--cream);
  padding:.8em 1.4em; z-index:200; transition: top .3s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- 4. NAV ---------- */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem clamp(1.25rem, 6vw, 3rem);
  transition: background var(--dur-1) var(--ease), padding var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.nav.is-scrolled{
  background: rgba(245,243,234,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding-block: .75rem;
  box-shadow: 0 1px 0 var(--line);
}
.nav__mark{
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height:1;
  color: var(--cream);
  transition: color var(--dur-1) var(--ease);
}
.nav.is-scrolled .nav__mark{ color: var(--ink); }
.nav__mark small{
  display:block; font-family:var(--font-body); font-size:.6rem;
  letter-spacing:.22em; font-weight:600; margin-top:.3em; color: inherit; opacity:.75;
}
.nav__cta{
  color: var(--cream);
  border: 1px solid rgba(247,245,236,0.55);
  padding: .6em 1.2em; font-size:.82rem; font-weight:600; letter-spacing:.02em;
  border-radius:2px;
  transition: all var(--dur-1) var(--ease);
}
.nav.is-scrolled .nav__cta{
  color: var(--ink); border-color: var(--ink);
}
.nav__cta:hover{ background: var(--ink); color:var(--cream); border-color:var(--ink); }

/* ---------- 5. HERO ---------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background: var(--ink);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img,
.hero__media video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* El video se apoya sobre el póster; si no carga o el navegador lo bloquea, queda la imagen */
.hero__video{ z-index:1; }
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(21,22,15,0.66) 0%, rgba(21,22,15,0.40) 16%, rgba(21,22,15,0.30) 42%, rgba(21,22,15,0.62) 72%, rgba(21,22,15,0.94) 100%);
}
.hero__content{
  position:relative; z-index:2;
  padding: clamp(5rem,13vw,6.5rem) clamp(1.25rem, 6vw, 3rem) clamp(1.8rem,4vw,2.6rem);
  color: var(--cream);
  max-width: 1040px;
}
.hero__eyebrow{
  font-size: var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase;
  color: var(--beige); font-weight:600; margin-bottom: 1.4rem;
  display:flex; align-items:center; gap:.6em;
}
.hero__eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; }
.hero__title{
  font-size: var(--fs-hero);
  font-weight:500;
  font-style: italic;
  max-width: 15ch;
}
.hero__sub{
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: rgba(247,245,236,0.85);
  max-width: 46ch;
  font-weight:400;
}
/* Aviso de visita integrado en el hero (pill compacto) */
.hero__visit{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.4rem .8rem;
  margin-top: 1.3rem; padding:.6rem 1rem;
  background: rgba(21,22,15,.45); border:1px solid rgba(247,245,236,.32);
  border-radius:2px; color:var(--cream);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: border-color var(--dur-1) var(--ease);
}
.hero__visit:hover{ border-color: var(--cream); }
.hero__visit-tag{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--beige); }
.hero__visit-text{ font-weight:600; font-size:.92rem; }
.hero__visit-cta{ font-size:.82rem; font-weight:600; color:var(--beige); white-space:nowrap; }
.hero__content > .hero__paths{ margin-top: 1.5rem; }
.hero__actions{
  margin-top: 2.4rem;
  display:flex; flex-wrap:wrap; align-items:center; gap: 1.6rem;
}
.hero__whatsapp-link{
  font-size:.92rem; font-weight:600; color:var(--cream);
  border-bottom:1px solid rgba(247,245,236,0.5);
  padding-bottom:2px;
  transition: border-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.hero__whatsapp-link:hover{ border-color: var(--cream); }
.hero__scrollcue{
  position:relative; z-index:2;
  align-self:center;
  margin-top: 2.2rem;
  padding-bottom: 1.6rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: rgba(247,245,236,0.7);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
}
.hero__scrollcue .line{
  width:1px; height:34px; background: rgba(247,245,236,0.5);
  animation: scrollcue 2.2s var(--ease) infinite;
}
@keyframes scrollcue{
  0%{ transform: scaleY(0); transform-origin: top; opacity:0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity:1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity:1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity:0; }
}

/* ---------- 6. PERFIL (QUIÉN ES RAÚL DUARTE) ---------- */
.perfil__head{ max-width: 60ch; }
.perfil__title{ font-size: var(--fs-h2); font-style: italic; font-weight: 500; margin-top:.3rem; }

.perfil__grid{
  margin-top: var(--sp-4);
  display:grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
.perfil__body{ max-width: 64ch; }          /* ancho cómodo de lectura */
.perfil__body p + p{ margin-top: 1.1em; }

/* Cita destacada (mayor jerarquía, pero sobria) */
.perfil__quote{
  position:relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  line-height: 1.28;
  color: var(--olive-dp);
  max-width: 30ch;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.perfil__quote-mark{
  display:block; width:16px; height:16px; margin-bottom: var(--sp-2);
  border:1px solid var(--olive); transform: rotate(45deg);
}

/* Zona preparada para la foto/video de Raúl (se activa al descomentar el bloque en el HTML) */
.perfil__media{
  width:100%; aspect-ratio: 4/5; margin-bottom: var(--sp-3);
}

/* Indicadores numéricos */
.perfil__stats{
  margin-top: var(--sp-5);
  display:grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}
.perfil__stat b{
  display:block; font-family: var(--font-display); font-weight:600; color: var(--olive-dp);
  font-size: clamp(1.6rem, 4vw, 2.1rem); line-height:1;
}
.perfil__stat span{ display:block; margin-top:.5rem; font-size:.82rem; color: var(--ink-soft); }

/* +350 — prueba principal de experiencia, destaca bastante */
.perfil__stat--feature{ grid-column: 1 / -1; }
.perfil__stat--feature b{
  font-size: clamp(3.2rem, 13vw, 4.6rem);
  color: var(--ink); letter-spacing: -0.02em;
}
.perfil__stat--feature span{ font-size:.9rem; margin-top:.3rem; }

/* ---------- 7. PROYECTOS ---------- */
.proyectos__head{ max-width: 60ch; }
.proyectos__head h2{ font-size: var(--fs-h2); margin-top:.4rem; }
.proyectos__note{ margin-top: var(--sp-2); font-size:.92rem; color: var(--ink-soft); }

.proyectos__list{
  margin-top: var(--sp-5);
  display:flex; flex-direction:column;
  gap: var(--sp-5);
}
.proyecto{
  display:grid; grid-template-columns:1fr; gap: var(--sp-3);
}
.proyecto__media{ aspect-ratio: 4/5; }
.proyecto__label{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color: var(--olive); margin-bottom:.6rem; display:block;
}
.proyecto__name{ font-size: var(--fs-h3); }
.proyecto__place{ color: var(--ink-soft); font-size:.95rem; margin-top:.3rem; }

.proyecto__specs{
  margin-top: 1.3rem;
  display:grid; grid-template-columns: repeat(2,1fr);
  border-top:1px solid var(--line);
}
.proyecto__specs dt{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); font-weight:600;
}
.proyecto__specs dd{
  font-size:.95rem; font-weight:500; margin-top:.25rem;
}
.proyecto__specs > div{
  padding: .9rem .2rem; border-bottom:1px solid var(--line);
}
.proyecto__specs > div:nth-child(odd){ padding-right:1rem; border-right:1px solid var(--line); }

.proyecto__pricebar{
  margin-top:1.4rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.proyecto__price{ font-family:var(--font-display); font-size: var(--fs-price); color: var(--ink); line-height:1; }
.proyecto__price span{ display:block; font-family:var(--font-body); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4em; font-weight:600;}

.proyecto__actions{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.9rem; }

.proyecto__more{
  overflow:hidden; max-height:0;
  transition: max-height var(--dur-2) var(--ease);
}
.proyecto__more.is-open{ max-height: 900px; }
.proyecto__more-inner{ padding-top: var(--sp-3); }
.proyecto__gallery{ display:grid; grid-template-columns: repeat(2,1fr); gap:.6rem; }
.proyecto__gallery .plot-frame{ aspect-ratio: 1/1; }
.proyecto__more-text{ margin-top:1.2rem; color:var(--ink-soft); }
.proyecto__more-text p + p{ margin-top:.8em; }

.proyecto__toggle{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.88rem; font-weight:600; color: var(--olive-dp);
  margin-top:1.1rem;
}
.proyecto__toggle svg{ width:14px; height:14px; transition: transform var(--dur-1) var(--ease); }
.proyecto__toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }

/* ---------- 8. POR QUÉ ---------- */
.porque__grid{
  margin-top: var(--sp-4);
  display:grid; grid-template-columns:1fr; gap: 0;
  border-top:1px solid var(--line);
}
.porque__item{
  display:grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  padding-block: var(--sp-3);
  border-bottom:1px solid var(--line);
}
.porque__mark{
  width:30px; height:30px; position:relative; flex-shrink:0; margin-top:.2rem;
}
.porque__mark::before, .porque__mark::after{ content:""; position:absolute; background: var(--olive); }
.porque__mark::before{ width:100%; height:1.4px; top:50%; left:0; transform:translateY(-50%); }
.porque__mark::after{ width:1.4px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.porque__item h3{ font-size:1.12rem; font-weight:600; font-family:var(--font-body); }
.porque__item p{ margin-top:.4rem; color: var(--ink-soft); font-size:.96rem; }

/* ---------- 9. TESTIMONIOS ---------- */
.testimonios__box{
  margin-top: var(--sp-4);
  border:1px dashed var(--line);
  padding: var(--sp-4);
  text-align:center;
}
.testimonios__box p{ max-width:46ch; margin-inline:auto; color: var(--ink-soft); }
.testimonios__box .mark{ display:block; width:22px;height:22px; border:1px solid var(--olive); transform:rotate(45deg); margin: 0 auto var(--sp-2); }

/* ---------- 10. FAQ ---------- */
.faq__list{ margin-top: var(--sp-4); border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.5rem 0; text-align:left;
  font-family: var(--font-display); font-size: 1.08rem; font-weight:600;
}
.faq__q-plus{ position:relative; width:16px; height:16px; flex-shrink:0; }
.faq__q-plus::before, .faq__q-plus::after{ content:""; position:absolute; background:var(--ink); transition: transform var(--dur-1) var(--ease); }
.faq__q-plus::before{ width:100%; height:1.4px; top:50%; left:0; transform:translateY(-50%); }
.faq__q-plus::after{ width:1.4px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.faq__item[data-open="true"] .faq__q-plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.faq__a{ overflow:hidden; max-height:0; transition:max-height var(--dur-1) var(--ease); }
.faq__a-inner{ padding-bottom:1.6rem; color:var(--ink-soft); max-width:62ch; }
/* Respuestas largas: espaciado cómodo entre párrafos (también en celular) */
.faq__a-inner p + p{ margin-top: 1em; }
/* Idea destacada dentro de una respuesta — sobria y premium, sin colores llamativos */
.faq__a-inner .faq__highlight{
  margin: 1.15em 0 .35em;
  padding-left: 1.1rem;
  border-left: 2px solid var(--olive);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--olive-dp);
}

/* ---------- 11. MAPA ---------- */
.mapa__grid{ margin-top:var(--sp-4); display:grid; grid-template-columns:1fr; gap: var(--sp-4); }
.mapa__card iframe{ width:100%; height:320px; border:0; filter: grayscale(0.35) contrast(1.05); }
.mapa__card h3{ font-size:1.05rem; margin-top:1rem; font-family:var(--font-body); font-weight:600; }
.mapa__card p{ color:var(--ink-soft); font-size:.92rem; margin-top:.3rem; }

/* ---------- 12. CONTACTO FINAL ---------- */
.contacto{ text-align:center; }
.contacto__inner{ max-width: 720px; margin-inline:auto; }
.contacto h2{ font-size: var(--fs-h2); font-style:italic; font-weight:500; }
.contacto p{ margin-top:1.2rem; }
.contacto__row{
  margin-top: var(--sp-4);
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem;
}
.contacto__social{
  margin-top: var(--sp-4);
  display:flex; justify-content:center; gap: 1.6rem;
}
.contacto__social a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid rgba(247,245,236,0.35); border-radius:2px;
  transition: all var(--dur-1) var(--ease);
}
.contacto__social a:hover{ border-color:var(--cream); background: rgba(247,245,236,0.08); }
.contacto__social svg{ width:18px; height:18px; }

/* ---------- 13. FOOTER ---------- */
.footer{ padding-block: var(--sp-4); background: var(--ink); color: rgba(247,245,236,0.7); }
.footer__grid{
  display:grid; grid-template-columns:1fr; gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(247,245,236,0.14);
}
.footer__mark{ font-family:var(--font-display); font-size:1.3rem; color:var(--cream); }
.footer__mark small{ display:block; font-family:var(--font-body); font-size:.6rem; letter-spacing:.2em; margin-top:.4em; font-weight:600; color: var(--beige); }
.footer__col h4{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--beige); margin-bottom:.9rem; font-weight:700; }
.footer__col li + li{ margin-top:.55rem; }
.footer__col a:hover{ color: var(--cream); }
.footer__bottom{
  padding-top: var(--sp-2);
  display:flex; flex-direction:column; gap:.6rem;
  font-size:.8rem;
}

/* ---------- 14. WHATSAPP FLOAT ---------- */
.wa-float{
  position: fixed; right: clamp(1rem,4vw,1.8rem); bottom: clamp(1rem,4vw,1.8rem); z-index:90;
  width:56px; height:56px; border-radius:50%;
  background: var(--ink); color: var(--cream);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(21,22,15,0.28);
  opacity:0; transform: translateY(12px) scale(.9); pointer-events:none;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.wa-float.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover{ background: var(--olive-dp); }
.wa-float svg{ width:24px; height:24px; }

/* ---------- 15. RESPONSIVE ---------- */
@media (min-width: 720px){
  .perfil__grid{ grid-template-columns: 1.25fr 0.75fr; align-items:start; }
  .perfil__stats{ grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-4) var(--sp-3); align-items:end; }
  .perfil__stat--feature{ grid-column: auto; }
  .proyecto{ grid-template-columns: 1.05fr 0.95fr; align-items:stretch; }
  .proyecto__media{ aspect-ratio:auto; height:100%; min-height:420px; }
  .proyecto:nth-child(even) .proyecto__media{ order:2; }
  .proyecto__gallery{ grid-template-columns: repeat(3,1fr); }
  .porque__grid{ grid-template-columns: 1fr 1fr; }
  .porque__item:nth-child(odd){ border-right:1px solid var(--line); padding-right: var(--sp-3); }
  .porque__item:nth-child(even){ padding-left: var(--sp-3); }
  .mapa__grid{ grid-template-columns:1fr 1fr; }
  .footer__grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
@media (min-width: 1000px){
  .hero__title{ max-width: 18ch; }
}

/* =========================================================
   16. VIDEO (componente reutilizable)
   ========================================================= */
.video-frame{
  position:relative; overflow:hidden; background:var(--ink);
  aspect-ratio:16/9;
}
.video-frame img, .video-frame video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Botón de play superpuesto (se usa cuando el póster es una foto real) */
.video-frame .video-frame__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.video-frame__play::before{
  content:""; width:74px; height:74px; border-radius:50%;
  border:2px solid rgba(247,245,236,.9);
  background: rgba(21,22,15,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.video-frame__play::after{
  content:""; position:absolute;
  border-style:solid; border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--cream);
  transform: translateX(3px);
}
a.video-frame{ display:block; }
a.video-frame:hover img{ transform: scale(1.03); transition: transform 1.2s var(--ease); }

/* Tarjeta de proyecto: media ahora es un video 16/9 (no se estira) */
.proyecto__media.video-frame{ aspect-ratio:16/9; height:auto; min-height:0; }
.proyecto__desc{ margin-top:.8rem; color:var(--ink-soft); font-size:.98rem; max-width:52ch; }

/* =========================================================
   17. PÁGINA DE DETALLE DE PROYECTO
   ========================================================= */
.phero{
  background:var(--ink); color:var(--cream);
  padding: clamp(6.5rem,16vw,9rem) 0 clamp(2.4rem,6vw,3.6rem);
}
.phero__eyebrow{
  font-size:var(--fs-eyebrow); letter-spacing:.18em; text-transform:uppercase;
  color:var(--beige); font-weight:600; display:flex; align-items:center; gap:.6em;
  margin-bottom:1.1rem;
}
.phero__eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; }
.phero__title{ font-size:var(--fs-h2); font-style:italic; font-weight:500; max-width:16ch; }
.phero__place{ margin-top:1rem; color:rgba(247,245,236,.8); font-size:var(--fs-lead); }
.pback{
  display:inline-flex; align-items:center; gap:.5em;
  margin-bottom:1.6rem; font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:rgba(247,245,236,.8);
}
.pback:hover{ color:var(--cream); }
.pback::before{ content:"←"; }

/* Bloque genérico dentro del detalle */
.pblock{ padding-block: var(--sp-5); border-bottom:1px solid var(--line); }
.pblock:last-of-type{ border-bottom:0; }
.pblock__head{ margin-bottom: var(--sp-3); }
.pblock__head h2{ font-size:var(--fs-h3); font-family:var(--font-body); font-weight:700; }
.pblock p{ color:var(--ink-soft); max-width:66ch; }
.pblock p + p{ margin-top:1em; }

/* Video principal del detalle */
.pvideo{ margin-top: var(--sp-2); }

/* Ficha: tamaños, precios, disponibilidad, etc. */
.ficha{
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--line);
}
.ficha > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:1.1rem .2rem; border-bottom:1px solid var(--line);
}
.ficha dt{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.ficha dd{ font-size:1.02rem; font-weight:500; text-align:right; }
.ficha .ficha__price{ font-family:var(--font-display); font-size:var(--fs-h3); color:var(--olive-dp); }

/* Marca de dato pendiente (placeholder claramente identificado) */
.dato-pendiente{
  display:inline-block;
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; color:var(--olive-dp);
  background:rgba(92,103,64,.14);
  border:1px dashed var(--olive);
  border-radius:2px; padding:.15em .6em;
}

/* Servicios y accesos: lista de "chips" */
.chips{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem; }
.chips li{
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid var(--line); border-radius:2px;
  padding:.55em 1em; font-size:.92rem; color:var(--ink);
}
.chips li::before{
  content:""; width:7px; height:7px; flex-shrink:0;
  border:1px solid var(--olive); transform:rotate(45deg);
}

/* Servicios con precio (tarjetas nombre + valor) */
.servicios{ display:flex; flex-direction:column; gap:.7rem; margin-top:.4rem; }
.servicios li{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:.25rem 1rem;
  border:1px solid var(--line); border-radius:2px;
  padding:1em 1.2em;
}
.servicio__name{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:1rem; font-weight:500; color:var(--ink);
}
.servicio__name::before{
  content:""; width:7px; height:7px; flex-shrink:0;
  border:1px solid var(--olive); transform:rotate(45deg);
}
.servicio__price{
  font-family: var(--font-display); font-weight:600;
  font-size:1.15rem; color:var(--olive-dp); white-space:nowrap;
}
.servicios__note{ margin-top:1rem; font-size:.85rem; color:var(--ink-soft); }
@media (min-width: 720px){
  .servicios{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
  .servicios li{ flex-direction:column; align-items:flex-start; gap:.6rem; }
}

/* Galería de muchas fotos */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-top: var(--sp-2); }
.gallery .plot-frame{ aspect-ratio:1/1; cursor:pointer; }
.gallery .plot-frame img{ transition: transform 1.2s var(--ease); }
.gallery .plot-frame:hover img{ transform: scale(1.04); }

/* Plano */
.plano-frame{ margin-top: var(--sp-2); max-width:760px; }
.plano-frame .plot-frame{ aspect-ratio:4/5; cursor:pointer; }

/* Mapa referencial (ciudad/comuna, sin ubicación exacta) */
.pmap{ margin-top: var(--sp-2); }
.pmap iframe{ width:100%; height:380px; border:0; filter:grayscale(.35) contrast(1.05); }
.pmap__note{ margin-top:.9rem; font-size:.85rem; color:var(--ink-soft); }

/* CTA WhatsApp del detalle */
.pcta{ text-align:center; }
.pcta h2{ font-size:var(--fs-h2); font-style:italic; font-weight:500; }
.pcta p{ margin-top:1rem; margin-inline:auto; }
.pcta .btn{ margin-top: var(--sp-3); }

@media (min-width: 720px){
  .proyecto{ align-items:start; }
  .ficha{ grid-template-columns:1fr 1fr; column-gap: var(--sp-4); }
  .ficha > div:nth-last-child(2):nth-child(odd){ border-bottom:1px solid var(--line); }
  .gallery{ grid-template-columns:repeat(3,1fr); }
}

/* =========================================================
   18. LIGHTBOX (galería ampliada)
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:300;
  display:none; align-items:center; justify-content:center;
  background:rgba(21,22,15,.94);
  padding: clamp(1rem,5vw,3rem);
}
.lightbox.is-open{ display:flex; }
.lightbox__stage{ max-width:min(1100px,92vw); max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.lightbox__img{ max-width:100%; max-height:78vh; object-fit:contain; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.lightbox__cap{ color:rgba(247,245,236,.8); font-size:.9rem; text-align:center; }
.lightbox__close{
  position:absolute; top:clamp(.8rem,3vw,1.6rem); right:clamp(.8rem,3vw,1.6rem);
  width:48px; height:48px; font-size:2rem; line-height:1;
  color:var(--cream); border:1px solid rgba(247,245,236,.4); border-radius:2px;
}
.lightbox__close:hover{ background:rgba(247,245,236,.1); }
.lightbox__nav{
  width:52px; height:52px; flex-shrink:0; font-size:2rem; line-height:1;
  color:var(--cream); border:1px solid rgba(247,245,236,.4); border-radius:2px;
  margin-inline:.4rem;
}
.lightbox__nav:hover{ background:rgba(247,245,236,.1); }
@media (max-width:560px){
  .lightbox__nav{ position:absolute; bottom:1.2rem; }
  .lightbox__nav--prev{ left:1.2rem; }
  .lightbox__nav--next{ right:1.2rem; }
}

/* =========================================================
   19. PROCESO — "Ya elegí mi parcela. ¿Qué sigue?"
   ========================================================= */
.proceso__head{ max-width: 60ch; }
.proceso__title{ font-size: var(--fs-h2); margin-top:.3rem; }
.proceso__intro{ margin-top: var(--sp-2); color: var(--ink-soft); }

.proceso__list{
  margin-top: var(--sp-4);
  border-top:1px solid var(--line);
  list-style:none; padding:0;
}
.proceso__step{
  display:grid; grid-template-columns: auto 1fr; gap: 1.2rem;
  padding-block: var(--sp-3);
  border-bottom:1px solid var(--line);
}
.proceso__num{
  font-family: var(--font-display); font-weight:600; line-height:1;
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  color: var(--olive);
  font-feature-settings: "tnum";
}
.proceso__label{
  display:block; margin-bottom:.55rem;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color: var(--olive-dp);
}
.proceso__body p{ color: var(--ink-soft); }
.proceso__body p + p{ margin-top:.7em; }

/* Tarjeta de mapa con "clic para abrir" (Notaría / Oficina) */
.locmap{
  margin-top: var(--sp-3);
  border:1px solid var(--line); border-radius:2px;
  max-width: 640px;
}
.locmap__head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; flex-wrap:wrap;
  padding: 1rem 1.1rem;
}
.locmap__name{ font-weight:600; color: var(--ink); }
.locmap__addr{ font-size:.9rem; color: var(--ink-soft); margin-top:.15rem; }
.locmap__frame{ border-top:1px solid var(--line); }
.locmap__frame[hidden]{ display:none; }
.locmap__frame iframe{
  width:100%; height:340px; border:0; display:block;
  filter: grayscale(0.35) contrast(1.05);
}

@media (min-width: 720px){
  .proceso__step{ grid-template-columns: 4.5rem 1fr; gap: 2rem; align-items:start; }
  .proceso__body{ max-width: 66ch; }
}

/* =========================================================
   20. ETAPAS / SOLD OUT (sobrio, sin colores llamativos)
   ========================================================= */
.badge{
  display:inline-flex; align-items:center;
  font-family: var(--font-body); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  padding:.42em .85em; border-radius:2px;
}
.badge--sold{ background: var(--ink); color: var(--cream); }          /* sobre fondo claro */
.badge--sold-invert{ background: var(--cream); color: var(--ink); }   /* sobre fondo oscuro (hero) */

.phero__status{ margin-top: 1.1rem; }

.etapas{
  margin-top:.4rem; list-style:none; padding:0;
  display:grid; grid-template-columns:1fr; gap:.7rem;
}
.etapas li{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--line); border-radius:2px; padding:.9em 1.1em;
}
.etapa__name{ font-weight:600; letter-spacing:.02em; color:var(--ink); }
.etapas__note{ margin-top:1rem; font-size:.9rem; color:var(--ink-soft); }

/* Video adicional dentro de la galería (no reemplaza al principal) */
.pvideo--extra{ margin-bottom: var(--sp-3); }
.pvideo--extra .video-frame{ aspect-ratio:16/9; }

/* Etiqueta sold out en la tarjeta de la portada */
.proyecto__status{ margin-top:.7rem; display:flex; flex-wrap:wrap; gap:.5rem; }

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

/* =========================================================
   21. VIÑAS DE CAUQUENES — "Listo para escriturar", precio único
   ========================================================= */
.badge--ready{ background: var(--olive-dp); color: var(--cream); }        /* sobre fondo claro (ficha, tarjeta) */
.badge--ready-invert{ background: var(--cream); color: var(--ink); }      /* sobre fondo oscuro (hero) */

/* Nota pequeña dentro de un valor de la ficha (ej. "precio único") */
.ficha__note{
  display:block; margin-top:.25rem;
  font-family: var(--font-body); font-weight:500; font-size:.7rem;
  letter-spacing:.02em; text-transform:none; color: var(--ink-soft);
}

/* Frase destacada dentro de una página de proyecto (sobria, premium) */
.pcallout{
  margin-top: var(--sp-2);
  border-left: 2px solid var(--olive);
  padding:.15em 0 .15em 1.1rem;
  font-family: var(--font-display); font-style:italic; font-weight:500;
  font-size: clamp(1.2rem, 3vw, 1.5rem); line-height:1.35;
  color: var(--olive-dp); max-width: 60ch;
}

/* Nota informativa complementaria (discreta, sin recuadro) */
.pnota{
  margin-top: var(--sp-2);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* =========================================================
   22. GALERÍA DE VIDEOS VERTICALES (9:16) — Aguas Claras
   ========================================================= */
.gallery--video{
  display:grid; gap:.6rem; margin-top: var(--sp-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width:560px){ .gallery--video{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:900px){ .gallery--video{ grid-template-columns: repeat(4, 1fr); } }

.gallery__item{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
}
.gallery--video .plot-frame{ display:block; aspect-ratio: 9/16; }
.gallery--video .plot-frame img{ transition: transform 1.2s var(--ease); }
.gallery__item:hover .plot-frame img{ transform: scale(1.04); }

/* Indicador de reproducción sobre la miniatura */
.gallery__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:3;
}
.gallery__play::before{
  content:""; width:52px; height:52px; border-radius:50%;
  border:2px solid rgba(247,245,236,.9);
  background: rgba(21,22,15,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.gallery__play::after{
  content:""; position:absolute;
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--cream);
  transform: translateX(2px);
}

/* Video vertical dentro del lightbox: respeta 9:16 sin deformar */
.lightbox__video{
  max-height: 82vh; max-width: min(1100px, 92vw);
  width:auto; height:auto; background:#000; border-radius:2px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

/* Videos de galería SIN AUDIO: ocultan el control de volumen/mute (WebKit/Blink:
   Chrome, Safari, iPhone), manteniendo play, línea de tiempo y pantalla completa. */
.lightbox__video--muted::-webkit-media-controls-mute-button,
.lightbox__video--muted::-webkit-media-controls-volume-control-container,
.lightbox__video--muted::-webkit-media-controls-volume-slider,
.lightbox__video--muted::-webkit-media-controls-volume-slider-container{
  display:none !important;
}

/* =========================================================
   23. PASO HONDO — barra de "vendido" y accesos alternativos
   ========================================================= */
/* Indicador elegante de avance de venta (ej. "85% vendido") */
.soldmeter{ max-width:520px; margin-top:.4rem; }
.soldmeter__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:.55rem;
}
.soldmeter__label{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--ink-soft);
}
.soldmeter__pct{
  font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--olive-dp);
}
.soldmeter__bar{
  height:6px; background:var(--line-soft); border-radius:2px; overflow:hidden;
}
.soldmeter__bar > span{ display:block; height:100%; background:var(--olive); border-radius:2px; }
.soldmeter__cta{ margin-top:1rem; }

/* Accesos alternativos (dos opciones) */
.accesos{ display:grid; grid-template-columns:1fr; gap:.7rem; margin-top:.4rem; }
@media (min-width:720px){ .accesos{ grid-template-columns:1fr 1fr; } }
.acceso{ border:1px solid var(--line); border-radius:2px; padding:1em 1.2em; }
.acceso__label{
  display:block; margin-bottom:.45rem;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--olive-dp);
}
.acceso p{ color:var(--ink-soft); font-size:.96rem; }

/* =========================================================
   24. PROYECTOS DESTACADOS (portada) — Aguas Claras y Las Palmeras
   ========================================================= */
.destacados__head{ max-width: 60ch; }
.destacados__head h2{ font-size: var(--fs-h2); margin-top:.4rem; }
.destacados__note{ margin-top: var(--sp-2); font-size:.98rem; color:var(--ink-soft); max-width:54ch; }

.destacados__grid{
  margin-top: var(--sp-5);
  display:grid; grid-template-columns:1fr; gap: var(--sp-6);
}
.destacado{ display:grid; grid-template-columns:1fr; gap: var(--sp-3); }
.destacado__media{ aspect-ratio:16/9; display:block; }
.destacado__media img{ width:100%; height:100%; object-fit:cover; display:block; }
a.destacado__media img{ transition: transform 1.2s var(--ease); }
a.destacado__media:hover img{ transform: scale(1.03); }

.destacado__eyebrow{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--olive); display:block; margin-bottom:.55rem;
}
.destacado__name{
  font-family:var(--font-display); font-weight:600; line-height:1.05;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
}
.destacado__place{ color:var(--ink-soft); font-size:1rem; margin-top:.55rem; }
.destacado__facts{
  margin-top: var(--sp-3); list-style:none; padding:0;
  border-top:1px solid var(--line);
}
.destacado__facts li{
  display:flex; align-items:center; gap:.7em;
  padding:.75rem 0; border-bottom:1px solid var(--line);
  font-size:.98rem; color:var(--ink);
}
.destacado__facts li::before{
  content:""; width:7px; height:7px; flex-shrink:0;
  border:1px solid var(--olive); transform:rotate(45deg);
}
.destacado__actions{ margin-top: var(--sp-4); display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; }

@media (min-width: 860px){
  .destacado{ grid-template-columns: 1.1fr 0.9fr; align-items:center; gap: var(--sp-5); }
  .destacado:nth-child(even) .destacado__media{ order:2; }
  .destacado__media{ aspect-ratio:auto; height:100%; min-height:340px; }
}

/* =========================================================
   25. HERO — dos caminos (Parcelas con rol / en verde)
   ========================================================= */
.hero__actions--paths{ flex-direction:column; align-items:flex-start; gap:1.8rem; }
.hero__paths{ display:flex; flex-wrap:wrap; gap:1.3rem; width:100%; }
.hero__path{ display:flex; flex-direction:column; gap:.5rem; flex:1 1 11rem; max-width:22rem; }
.hero__path .btn{ width:100%; }
.hero__path-note{ font-size:.82rem; line-height:1.4; color:rgba(247,245,236,0.82); }

/* =========================================================
   26. PRECIO EN TARJETAS DE LA PORTADA (destacadas y normales)
   ========================================================= */
.card-price{
  margin-top: .9rem;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.4em;
  font-family: var(--font-body); font-size:.9rem; font-weight:600;
  letter-spacing:.02em; color:var(--ink-soft);
}
.card-price b{
  font-family: var(--font-display); font-weight:600;
  font-size: 1.5rem; line-height:1; color:var(--olive-dp);
  letter-spacing:-.01em;
}
.card-price--tbd{ font-weight:500; font-style:italic; color:var(--ink-soft); }

/* Nota de vigencia de precio en tarjetas de la portada (discreta) */
.card-price__vigencia{
  margin-top: .4rem;
  font-size: .72rem; line-height: 1.4; color: var(--ink-soft);
  max-width: 44ch;
}

/* =========================================================
   27. AGUAS CLARAS destacado SIN foto — una columna, centrado, con más aire
   (solo afecta a la tarjeta con .destacado--noimg; Las Palmeras no cambia)
   ========================================================= */
.destacado.destacado--noimg{ grid-template-columns: 1fr; gap: 0; }
.destacado--noimg .destacado__info{
  max-width: 760px; margin-inline: auto;
}
/* Espaciado ligeramente mayor, manteniéndolo compacto, elegante y premium */
.destacado--noimg .destacado__eyebrow{ margin-bottom: 1rem; }
.destacado--noimg .destacado__place{ margin-top: .7rem; }
.destacado--noimg .card-price{ margin-top: 1.5rem; }
.destacado--noimg .proyecto__status{ margin-top: 1.2rem; margin-bottom: .6rem; }
.destacado--noimg .destacado__facts{ margin-top: var(--sp-4); }
.destacado--noimg .destacado__actions{ margin-top: 2.6rem; }

/* =========================================================
   28. GALERÍA DE VIDEOS HORIZONTALES (16:9) — Paso Hondo – Parral
   (reusa el sistema de .gallery--video: miniatura + play + lightbox)
   ========================================================= */
.gallery--video.gallery--h{ grid-template-columns: repeat(1, 1fr); }
@media (min-width:560px){ .gallery--video.gallery--h{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width:900px){ .gallery--video.gallery--h{ grid-template-columns: repeat(3, 1fr); } }
.gallery--video.gallery--h .plot-frame{ display:block; aspect-ratio: 16/9; }

/* =========================================================
   29. VISTA AÉREA DEL PROYECTO (fotos de dron) — solo Los Queltehues
   Galería ligera: 1 imagen líder full-width + rejilla 2×2. Reusa .plot-frame + lightbox.
   ========================================================= */
.aerials{ display:grid; gap:.7rem; grid-template-columns:1fr; }
.aerials__item{ display:block; width:100%; padding:0; aspect-ratio:16/9; cursor:zoom-in; }
.aerials__item img{ transition: transform .6s var(--ease); }
.aerials__item:hover img{ transform: scale(1.035); }
@media (min-width:640px){
  .aerials{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .aerials__lead{ grid-column:1 / -1; }
}

/* =========================================================
   30. AVISO DE VISITA A TERRENO (home) + BOTONES DE CONTACTO
   ========================================================= */
.visit{ padding-block: var(--sp-4); }
.visit__card{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--sp-3);
  background: var(--bg-alt);
  border:1px solid var(--line); border-left:4px solid var(--olive);
  border-radius:2px;
  padding: clamp(1.2rem,3.4vw,1.9rem) clamp(1.3rem,4vw,2.3rem);
}
.visit__eyebrow{
  font-family:var(--font-body); font-size:var(--fs-eyebrow);
  letter-spacing:.16em; text-transform:uppercase; color:var(--olive);
  font-weight:600; margin-bottom:.45rem;
  display:flex; align-items:center; gap:.5em;
}
.visit__eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; display:inline-block; }
.visit__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,2.8vw,1.7rem); line-height:1.15; color:var(--ink); }
.visit__sub{ font-size:.95rem; color:var(--ink-soft); margin-top:.45rem; max-width:54ch; }
.visit__actions{ display:flex; flex-wrap:wrap; gap:.7rem; flex-shrink:0; }
@media (max-width:640px){
  .visit__actions{ width:100%; }
  .visit__actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* Acciones del CTA final de cada proyecto (WhatsApp + Llamar) */
.pcta__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top: var(--sp-3); }
.pcta__actions .btn{ margin-top:0; }

/* =========================================================
   31. PUBLICIDAD / MARKETPLACE (página vende-tu-parcela.html + teaser home)
   ========================================================= */
/* Teaser en la home */
.adcta__card{
  background:var(--ink); color:var(--cream); border-radius:2px;
  padding: clamp(1.8rem,5vw,3rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--sp-3);
}
.adcta__eyebrow{ font-family:var(--font-body); font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--beige); font-weight:600; margin-bottom:.5rem; }
.adcta__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3.6vw,2.2rem); line-height:1.12; }
.adcta__sub{ color:rgba(247,245,236,.8); margin-top:.6rem; max-width:52ch; }
.adcta__actions{ display:flex; flex-wrap:wrap; gap:.7rem; flex-shrink:0; }

/* Planes por niveles */
.plans{ display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media (min-width:860px){ .plans{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.plan{ display:flex; flex-direction:column; background:var(--bg-alt); border:1px solid var(--line); border-radius:2px; padding:clamp(1.5rem,3.5vw,2rem); }
.plan--featured{ background:var(--ink); color:var(--cream); border-color:var(--olive); }
.plan__tag{ display:inline-block; align-self:flex-start; font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink); background:var(--beige); padding:.35em .9em; border-radius:2px; margin-bottom:1rem; }
.plan__name{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; }
.plan__price{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,4vw,2.4rem); margin:.5rem 0 .1rem; }
.plan__price small{ display:block; font-family:var(--font-body); font-size:.78rem; font-weight:400; color:var(--ink-soft); letter-spacing:.02em; margin-top:.2rem; }
.plan--featured .plan__price small{ color:rgba(247,245,236,.65); }
.plan__features{ display:flex; flex-direction:column; gap:.6rem; margin:1.2rem 0 1.6rem; font-size:.95rem; }
.plan__features li{ display:flex; gap:.6em; align-items:flex-start; }
.plan__features li::before{ content:""; width:7px; height:7px; margin-top:.5em; flex-shrink:0; border:1px solid var(--olive); transform:rotate(45deg); }
.plan--featured .plan__features li::before{ border-color:var(--beige); }
.plan .btn{ margin-top:auto; width:100%; }

/* Marketplace de anunciantes */
.market{ display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media (min-width:600px){ .market{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .market{ grid-template-columns:repeat(3,1fr); } }
.ad-card{ display:flex; flex-direction:column; gap:.7rem; background:var(--bg); border:1px solid var(--line); border-radius:2px; padding:1.5rem; height:100%; }
.ad-card__logo{ width:60px; height:60px; border-radius:50%; background:var(--bg-alt); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--olive); overflow:hidden; }
.ad-card__logo img{ width:100%; height:100%; object-fit:cover; }
.ad-card__cat{ font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--olive); font-weight:600; }
.ad-card__name{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; }
.ad-card__desc{ font-size:.92rem; color:var(--ink-soft); flex:1; }
.ad-card__link{ font-size:.9rem; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:.35em; }
.ad-card__link:hover{ color:var(--olive); }
.ad-card--empty{ border-style:dashed; align-items:center; justify-content:center; text-align:center; gap:.6rem; }
.ad-card--empty .ad-card__name{ color:var(--ink); }
.ad-card--empty p{ font-size:.9rem; color:var(--ink-soft); }
/* Botón secundario del teaser de publicidad (sobre tarjeta oscura) */
.adcta__card .btn--ghost{ color:var(--cream); border-color:var(--cream); }
.adcta__card .btn--ghost:hover{ background:var(--cream); color:var(--ink); }

/* Fix contraste: nombres/precios de planes y anunciantes (evita heredar .pblock p) */
.plan__name, .plan__price{ color:var(--ink); }
.plan--featured .plan__name, .plan--featured .plan__price{ color:var(--cream); }
.ad-card__name{ color:var(--ink); }

/* Enlace "Publicidad" en el header (junto al CTA) */
.nav__links{ display:flex; align-items:center; gap:clamp(.7rem,2.2vw,1.3rem); }
.nav__link{ color:var(--cream); font-size:.82rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; transition:color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
.nav.is-scrolled .nav__link{ color:var(--ink); }
.nav__link:hover{ opacity:.7; }
@media (max-width:480px){
  .nav{ padding-inline: 1rem; }
  .nav__mark{ font-size:1.02rem; }
  .nav__links{ gap:.6rem; }
  .nav__link{ font-size:.76rem; }
  .nav__cta{ padding:.5em .85em; font-size:.76rem; }
}

/* =========================================================
   32. CARRUSEL DE PORTADA (rota imágenes cada X segundos)
   ========================================================= */
.slideshow{ aspect-ratio:16/9; }
.slideshow__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1s var(--ease); z-index:1;
}
.slideshow__img.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .slideshow__img{ transition:none; }
}

/* Botón "Llamar" bajo la portada/videos de cada proyecto disponible */
.pvideo__cta{ margin-top:1.2rem; text-align:center; }

/* ==========================================================================
   32. DESTACADOS DE LA PORTADA — carrusel de fotos + etiqueta "referencial"
   Las tarjetas de Aguas Claras y Las Palmeras rotan sus fotos igual que la
   portada de cada proyecto. Se mantiene la proporción propia de la tarjeta.
   ========================================================================== */
@media (min-width: 860px){
  /* El carrusel ocupa el alto de la fila por estiramiento propio del grid
     (align-self:stretch), no por height:100%. Con height:100% el navegador
     tiene que resolver un porcentaje contra un alto que aún no conoce
     —las fotos van en position:absolute, así que no aportan alto— y ahí
     Safari y Chrome se comportan distinto. Con stretch no hay ambigüedad. */
  .destacado__media.slideshow{
    aspect-ratio: auto;
    align-self: stretch;
    height: auto;
    min-height: 340px;
  }
}

/* Red de seguridad: pase lo que pase, una foto del carrusel nunca puede
   salirse de su marco ni taparle el texto a la tarjeta. */
.slideshow{ position: relative; overflow: hidden; }
.slideshow__img{ max-width: 100%; max-height: 100%; }

/* Etiqueta sobre la foto: aclara que la imagen es de referencia */
.media-tag{
  position:absolute; left:.8rem; bottom:.8rem; z-index:3;
  font-family: var(--font-body); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  padding:.5em .85em; border-radius:2px;
  background: rgba(21,22,15,.74); color:#F2EFE6;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events:none;
}

/* ==========================================================================
   33. BARRA DE CONTACTO bajo la portada de cada proyecto
   Reemplaza el botón suelto centrado. En móvil: texto arriba y los dos
   botones repartidos a lo ancho. En escritorio: texto a la izquierda y
   botones a la derecha, separados del bloque por una línea fina.
   ========================================================================== */
.media-cta{
  margin-top: 1.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid; gap: 1.1rem;
}
.media-cta__text{
  margin: 0; font-size: .98rem; line-height: 1.5; color: var(--ink-soft);
}
.media-cta__text strong{ color: var(--ink); font-weight: 600; }
.media-cta__actions{ display: flex; flex-wrap: wrap; gap: .7rem; }
.media-cta__actions .btn{ flex: 1 1 10rem; }

@media (min-width: 720px){
  .media-cta{ grid-template-columns: 1fr auto; align-items: center; gap: 1.8rem; }
  .media-cta__actions{ flex-wrap: nowrap; }
  .media-cta__actions .btn{ flex: 0 0 auto; }
}

/* Póster del hero: se desvanece en cuanto el video empieza a reproducirse,
   para que no se note el salto entre la foto y el video. */
.hero__poster{ transition: opacity .6s var(--ease); }
.hero__media.is-playing .hero__poster{ opacity: 0; }

/* ==========================================================================
   34. MAPA CON CONSENTIMIENTO
   El mapa de Google no se carga solo. Se muestra este bloque y solo al
   pulsar "Ver el mapa" se inserta el iframe. Evita mandar la IP del
   visitante a Google sin que lo sepa.
   ========================================================================== */
.pmap__consent{
  height: 380px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem;
  padding: 1.5rem; text-align: center;
  background: var(--sand, #ECE8DC);
  border: 1px solid var(--line);
}
.pmap__consent-text{
  margin: 0; max-width: 42ch;
  font-size: .92rem; line-height: 1.55; color: var(--ink-soft);
}
.pmap__consent-text strong{ color: var(--ink); font-weight: 600; }

/* ==========================================================================
   35. AJUSTES DE ADAPTACIÓN — computador y móvil
   ========================================================================== */

/* (a) LAPTOPS (860–1099px)
   Las tarjetas destacadas pasaban a dos columnas desde 860px. A ese ancho la
   columna de la foto quedaba angosta (≈380px) pero muy alta (≈590px), así que
   la vista aérea —que es apaisada— se recortaba hasta quedar casi vertical y
   se perdía el paisaje. Bajo 1100px se muestran apiladas: foto a todo el ancho
   en 16:9, texto debajo. A partir de 1100px sí hay espacio para dos columnas. */
@media (min-width: 860px) and (max-width: 1179px){
  .destacado{ grid-template-columns: 1fr; gap: var(--sp-3); }
  .destacado:nth-child(even) .destacado__media{ order: 0; }
  .destacado__media,
  .destacado__media.slideshow{
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    align-self: auto;
  }
}

/* (b) MÓVILES ANGOSTOS (iPhone SE y similares, 320px)
   El correo largo y los botones empujaban la página y aparecía scroll lateral. */
.proceso__body,
.proceso__body p,
.pnota,
.destacado__facts li,
.footer a,
a[href^="mailto:"]{
  overflow-wrap: anywhere;
}

@media (max-width: 380px){
  .btn{ white-space: normal; }
}

/* (c) La tarjeta oscura "¿Tienes una parcela?" tenía sus dos botones con
   flex-shrink:0, así que en pantallas de 320px no cabían y empujaban la
   página de lado. Bajo 420px pasan a ocupar el ancho completo, uno sobre
   otro: se acabó el scroll lateral y además se tocan mucho más fácil. */
@media (max-width: 420px){
  .adcta__actions{ flex-shrink: 1; width: 100%; }
  .adcta__actions .btn{ flex: 1 1 100%; }
}

/* (d) PÁGINA DE PLANES
   Los tres planes pasaban a tres columnas desde 860px. El botón "Contratar
   por WhatsApp" no parte en dos líneas, así que fijaba un ancho mínimo de
   ~300px por columna: tres columnas no cabían y la página se iba de lado
   147px. Ahora las columnas pueden encogerse (minmax(0,1fr)), el botón puede
   partirse si hace falta, y el paso a tres columnas espera hasta los 980px. */
.plans{ grid-template-columns: 1fr; }
@media (min-width: 860px) and (max-width: 979px){
  .plans{ grid-template-columns: 1fr; }
}
@media (min-width: 980px){
  .plans{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.plan .btn{ white-space: normal; }

/* ==========================================================================
   36. ARREGLOS ESPECÍFICOS DE SAFARI + PIE DE PÁGINA
   ========================================================================== */

/* (a) EL BUG DE SAFARI EN LAS TARJETAS DESTACADAS
   `1fr` equivale a `minmax(auto, 1fr)`, y ese `auto` significa "nunca más
   angosto que el contenido mínimo". Chrome ignora las fotos en position:
   absolute al calcular ese mínimo (que es lo correcto); Safari las cuenta y
   toma su ancho real declarado (1600px). Resultado: la columna de la foto se
   negaba a encoger, se comía el ancho completo y empujaba el texto fuera de
   la pantalla. Con minmax(0, ...) el mínimo pasa a ser 0 y las columnas se
   reparten solo por proporción, en todos los navegadores. */
@media (min-width: 1180px){
  .destacado{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* (b) LA ETIQUETA "IMAGEN REFERENCIAL" NO APARECÍA EN SAFARI
   backdrop-filter dentro de un contenedor con overflow:hidden se rinde en
   Safari y la etiqueta quedaba invisible. Se reemplaza por un fondo sólido
   translúcido: se ve igual y funciona en todos los navegadores. */
.media-tag{
  background: rgba(21, 22, 15, .82);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* (c) PIE DE PÁGINA: el aviso legal en una línea, como se acostumbra */
.footer__bottom{
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.4rem;
}
.footer__bottom a{ text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom a:hover{ opacity: .75; }
@media (max-width: 560px){
  .footer__bottom{ flex-direction: column; align-items: flex-start; gap: .55rem; }
}

/* ==========================================================================
   37. EL ARREGLO QUE FALTABA — min-width:0 en los hijos de la tarjeta
   En el punto 36 puse minmax(0, ...) en las COLUMNAS, y eso impide que la
   columna crezca de más. Pero al ELEMENTO de dentro le quedaba su
   `min-width: auto` de fábrica, que significa "nunca más angosto que mi
   contenido mínimo". Safari calcula ese mínimo contando las fotos en
   position:absolute (1600px), así que la columna se quedaba angosta pero la
   foto se salía de ella y se dibujaba encima del texto: justo lo que se veía.
   min-width:0 y min-height:0 quitan ese mínimo automático y obligan a la foto
   a caber dentro de su columna. Es el arreglo canónico de este problema.
   ========================================================================== */
.destacado__media,
.destacado__info{
  min-width: 0;
  min-height: 0;
}

/* Refuerzo: la tarjeta nunca puede ser más ancha que su contenedor,
   pase lo que pase con los cálculos internos del navegador. */
.destacado{ max-width: 100%; }
.destacado__media{ max-width: 100%; overflow: hidden; }

/* Defensa nº3: la tarjeta destacada deja de depender del cálculo de tamaños
   intrínsecos. `contain: layout` le dice al navegador que lo que hay dentro
   del marco de la foto no puede influir en el tamaño de nada de afuera, y
   width:100% fija el ancho contra la columna, no contra el contenido. */
.destacado__media{
  width: 100%;
  contain: layout;
}

/* ==========================================================================
   38. TAMAÑO TOTALMENTE DETERMINADO EN LAS TARJETAS DESTACADAS
   Hasta aquí el alto de la foto salía de "estírate hasta igualar la columna
   de al lado", y el ancho de "repártete la fila". Los dos son cálculos que
   el navegador resuelve mirando el contenido, y ahí es donde Safari se
   desviaba. Ahora la foto tiene proporción fija (4:3): con el ancho de la
   columna ya se sabe el alto exacto, sin mirar nada de dentro. No queda
   ningún cálculo que un navegador pueda interpretar distinto.
   ========================================================================== */
@media (min-width: 1180px){
  .destacado__media,
  .destacado__media.slideshow{
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    align-self: center;
  }
}

/* ==========================================================================
   39. PLAN B — TARJETAS DESTACADAS APILADAS EN TODOS LOS ANCHOS
   Las dos columnas obligaban al navegador a repartir el ancho entre la foto
   y el texto, y ese reparto es justo el cálculo donde Safari se desviaba.
   Aquí se elimina el problema de raíz: se quita el grid (display:block), la
   foto ocupa el ancho completo con proporción 16:9 y el texto va debajo.
   Es exactamente la misma estructura de las páginas de proyecto, que sí se
   ven bien. Sin reparto de ancho no hay nada que un navegador pueda
   calcular distinto.
   ========================================================================== */
.destacado{
  display: block !important;
  grid-template-columns: none !important;
  max-width: 100%;
}
.destacado__media,
.destacado__media.slideshow{
  display: block !important;
  order: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: var(--sp-3);
}
.destacado__info{ width: 100%; max-width: 100%; }

/* --- Póster del hero: sin fundido ---
   El póster es ahora el fotograma número uno del propio video, así que la
   imagen fija y el primer cuadro del video son idénticos. No hace falta
   ninguna transición: el video simplemente empieza a moverse. El fundido de
   0,6s que había antes era justo lo que se percibía como demora. */
.hero__poster{ transition: none !important; }
.hero__media.is-playing .hero__poster{ opacity: 1; }