/* Yakú — web de venta. Sigue el brand book (logo del cliente: café, crema y negro; letras en marca/yaku-cliente/marca.css),
   adaptado para vender: fotos a color, degradado solo bajo el texto, contraste AA, letra de 17 px.
   Todo se ve sin JS; las clases .motion y .ready las pone site.js (y nunca con reduced-motion). */

/* MARCA:INICIO */
/* ==========================================================================
   MARCA YAKÚ — ÚNICO lugar de letras y colores. 2026-11-09
   Se reparte a web, guía, propuesta, pitch y paquete de ventas con:
       python3 marca/yaku-cliente/repartir.py
   (copia las fuentes de marca/yaku-cliente/fuentes/ y pega este bloque entre las líneas
   «MARCA:INICIO» y «MARCA:FIN» de cada hoja de estilos. fonts/ = carpeta de fuentes.
   OJO: este comentario no puede llevar barra-asterisco adentro; cortaría el comentario y rompería la letra.)

   ⚠️ FUENTE TEMPORAL — cambiar al recibir los .otf del diseñador.
   El logo viene convertido en dibujo; estas son las más parecidas con licencia libre:
     · Títulos: Prata (OFL 1.1) — serif de alto contraste con remates en cuña, como el YAKÚ.
     · Textos y etiquetas: Alpino (ITF Free Font License, uso comercial y web) — sans geométrica,
       como «ADMINISTRACIÓN» de la pág. 3 del PDF.
   Para cambiar: poner los .woff2 nuevos en fuentes/, cambiar las dos líneas src de abajo y correr repartir.py.
   Los nombres «Yaku Titulo» y «Yaku Texto» NO cambian: todo el resto del código los usa.
   ========================================================================== */
@font-face { font-family: "Yaku Titulo"; src: url(fonts/YakuTitulo-Prata-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yaku Texto"; src: url(fonts/YakuTexto-Alpino-400-700.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
:root {
  /* Colores del logo */
  --yk-cafe: #52220B; --yk-crema: #F8F6EA; --yk-negro: #000000;
  /* Apoyo, sacados de esos tres */
  --yk-cafe-noche: #2A1105;   /* café a la mitad hacia negro: fondos oscuros */
  --yk-piedra: #6E5444;       /* café con crema 70/30: texto secundario (contraste 6,9:1 sobre crema) */
  --yk-arena: #E6DCC7;        /* crema oscurecida: bandas y bordes */
  --yk-arena-clara: #EFE9D8;  /* entre crema y arena: tarjetas sobre crema */
  --yk-titulo: "Yaku Titulo", Georgia, "Times New Roman", serif;
  --yk-texto: "Yaku Texto", "Helvetica Neue", Arial, sans-serif;
}
/* MARCA:FIN */

:root {
  --trav: #E6DCC7; --lime: #F8F6EA; --black: #000000; --sandst: #6E5444; --basalt: #52220B; --paper: #FCFBF4;
  --cap: var(--yk-titulo); --sans: var(--yk-texto);
  --max: 1200px; --gutter: clamp(16px, 5vw, 64px); --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--lime); color: var(--black); font: 400 17px/1.65 var(--sans); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--cap); font-weight: 400; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: 0; text-transform: none; text-wrap: balance; }
h3 { font-size: 19px; letter-spacing: 0; text-transform: none; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.fine { font-size: 14px; line-height: 1.55; color: var(--basalt); max-width: 70ch; }
.lnk { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lnk:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--black); color: var(--lime); }
.skip:focus { top: 8px; }

/* ---- botones: tipo oración, esquina recta, sin sombra ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--black);
  font: 500 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s; text-align: center; }
.btn--dark { background: var(--black); color: var(--lime); }
.btn--dark:hover { background: var(--basalt); border-color: var(--basalt); }
.btn--line { background: transparent; color: var(--black); }
.btn--line:hover { background: var(--black); color: var(--lime); }
.btn--light { background: var(--lime); color: var(--black); border-color: var(--lime); }
.btn--light:hover { background: var(--trav); border-color: var(--trav); }
.btn--ghost { background: transparent; color: var(--lime); border-color: var(--lime); }
.btn--ghost:hover { background: var(--lime); color: var(--black); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn--full { width: 100%; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---- encabezado ---- */
.top { position: sticky; top: 0; z-index: 30; background: var(--lime); border-bottom: 1px solid rgba(21, 20, 18, .18); }
.top__in { display: flex; align-items: center; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 10px var(--gutter); min-height: 64px; }
.top__logo img { width: auto; height: 42px; }
.top__nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.top__nav a { text-decoration: none; padding: 10px 0; }
.top__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .top__nav a[href^="#"] { display: none; }
  .top__cta { display: none; }
  .top__logo img { height: 30px; }
}

/* ---- portada: foto real a color, degradado solo bajo el texto ---- */
.hero { position: relative; min-height: min(88svh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: #3C4A3A; color: var(--lime); }
.hero picture, .hero__ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__ph { object-fit: cover; object-position: 50% 40%; will-change: transform; }
.hero__in { position: relative; padding-top: 120px; padding-bottom: 72px; }
.hero__eyebrow { font-size: 16px; margin-bottom: 14px; color: var(--lime); }
.hero__h { font-size: clamp(34px, 6.2vw, 78px); letter-spacing: 0; text-transform: none; max-width: 24ch; }
.hero__lead { max-width: 52ch; font-size: 18px; margin: 20px 0 22px; }
.plaque { display: inline-block; margin: 0 0 26px; padding: 12px 18px; border: 1px solid var(--trav); outline: 1px solid rgba(215, 200, 175, .45); outline-offset: 4px;
  font: 400 clamp(17px, 2vw, 21px)/1.3 var(--cap); letter-spacing: .05em; color: var(--lime); background: rgba(21, 20, 18, .55); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cap { position: absolute; right: var(--gutter); top: 16px; padding: 4px 8px; background: rgba(21, 20, 18, .72); margin: 0; font-size: 13px; color: var(--lime); }
@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero__in { padding-top: 96px; padding-bottom: 40px; }
    .hero__lead { font-size: 17px; }
  .hero__btns .btn { flex: 1 1 100%; }
  .hero__cap { left: var(--gutter); right: auto; top: 12px; }
}

/* ---- barra de confianza ---- */
.trust { list-style: none; margin: 0; padding: 18px var(--gutter); background: var(--black); color: var(--lime);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; font-size: 16px; }
.trust li { padding: 0 22px; border-left: 1px solid rgba(238, 232, 220, .35); }
.trust li:first-child { border-left: 0; }
@media (max-width: 760px) { .trust { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; text-align: left; } .trust li { border: 0; padding: 0 0 0 12px; border-left: 1px solid rgba(238, 232, 220, .35); } }

/* ---- secciones ---- */
.sec { padding: clamp(64px, 9vw, 120px) 0; }
.sec__head { max-width: 680px; margin-bottom: 40px; }
.sec__head h2 { margin-bottom: 18px; }
.sec__head p { font-size: 18px; }
.ph { margin: 0; }
.ph img { width: 100%; }
.ph figcaption { font-size: 14px; color: var(--basalt); padding-top: 8px; line-height: 1.5; }

/* mapa y tiempos */
.map__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.map__txt h2 { margin-bottom: 18px; }
.tm { list-style: none; padding: 0; margin: 28px 0; border-top: 1px solid var(--black); }
.tm li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 0 12px; padding: 16px 0; border-bottom: 1px solid rgba(21, 20, 18, .3); }
.tm__n { font: 400 clamp(38px, 4.6vw, 56px)/1 var(--cap); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tm__u { font-size: 15px; }
.tm__p { font-size: 17px; }
@media (max-width: 860px) { .map__grid { grid-template-columns: 1fr; } }

.band img { width: 100%; height: clamp(160px, 24vw, 380px); object-fit: cover; }

/* el terreno */
.land__grid { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto auto; gap: 24px; }
.ph--big { grid-row: span 2; }
.ph--big img { aspect-ratio: 4 / 3; object-fit: cover; }
.land__grid .ph:not(.ph--big) img { aspect-ratio: 16 / 10; object-fit: cover; }
.progress { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(21, 20, 18, .3); }
.progress h3 { font: 500 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.progress__row { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 16px; margin-bottom: 12px; }
.progress__row img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 860px) { .land__grid { grid-template-columns: 1fr; } .ph--big { grid-row: auto; } .progress__row { grid-template-columns: 1fr 1fr; } }

/* plano */
.plan { background: var(--paper); }
.pl { --pl-ground: #EFE9D8; --pl-paper: var(--lime); --pl-avail: #FFFDF8; --pl-promo: #B9A07C; --pl-sold: #9C9488; --pl-ask: #E6DCC7; --pl-zone: #C9AE7C;
  --pl-line: #857B6C; --pl-road: #D4C7AE; --pl-creek: #2F5F7A; --pl-ink: var(--black); display: grid; gap: 16px; }
.pl-bar { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; }
.pl-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pl-line); background: transparent;
  color: var(--pl-ink); font: 400 15px/1 var(--sans); cursor: pointer; }
.pl-btn small { font-size: 13px; }
.pl-btn[aria-pressed="true"] { background: var(--pl-ink); color: var(--lime); border-color: var(--pl-ink); }
.pl-sw { width: 14px; height: 14px; flex: none; border: 1px solid var(--pl-line); display: inline-block; }
.pl-sw--available { background: var(--pl-avail); }
.pl-sw--promo { background: var(--pl-promo); }
.pl-sw--sold { background: repeating-linear-gradient(45deg, var(--pl-sold) 0 3px, var(--pl-line) 3px 4px); }
.pl-sw--ask { background: var(--pl-ask); }
.pl-sw--zone { background: var(--pl-zone); border-color: var(--black); }
.pl-zone { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 16px; }
.pl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.pl-stage { position: relative; overflow: hidden; background: var(--pl-ground); border: 1px solid rgba(21, 20, 18, .2); }
.pl-map { width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pl-map.is-zoomed { touch-action: none; cursor: grab; }
.pl-map--v { display: none; }
.lot { fill: var(--pl-avail); stroke: var(--black); stroke-width: 1.3; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .3s ease, fill .3s ease; }
.lot.in-zone { fill: var(--pl-zone); }
.lot.st-promo { fill: var(--pl-promo); }
.lot.st-ask { fill: var(--pl-ask); stroke: var(--pl-line); }
.pl-map--h .lot.st-sold { fill: url(#pl-hatch-h); }
.pl-map--v .lot.st-sold { fill: url(#pl-hatch-v); }
.pl-hatch-bg { fill: var(--pl-sold); }
.pl-hatch { stroke: #6E675D; stroke-width: 1.6; }
.lot:hover, .lot.is-picked { stroke: var(--pl-ink); stroke-width: 3; }
.lot.is-picked { fill: var(--black); }
.lot.is-out, .pl-num.is-out { opacity: .12; }
.pl-road { fill: var(--pl-road); pointer-events: none; }
.pl-street { fill: none; stroke: var(--pl-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-creek { fill: none; stroke: var(--pl-creek); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.pl-labels text { pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.pl-num { font: 500 26px var(--sans); fill: var(--black); }
.pl-num.is-picked { fill: var(--lime); }
.pl-sec { font: 400 200px var(--cap); fill: var(--black); opacity: .14; }
.pl-rot { font: 500 30px var(--sans); fill: var(--black); letter-spacing: .04em; paint-order: stroke; stroke: var(--pl-ground); stroke-width: 8px; }
.pl-rot--creek { font-style: italic; fill: var(--pl-creek); }
.pl-map--v .pl-num { font-size: 36px; }
.pl-map--v .pl-rot { font-size: 38px; }
.pl-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 6px; }
.pl-zbtn { width: 44px; height: 44px; border: 1px solid var(--pl-line); background: var(--lime); color: var(--black); font: 400 22px/1 var(--sans); cursor: pointer; }
.pl-zbtn--txt { font-size: 14px; }
.pl-hint, .pl-note { font-size: 15px; line-height: 1.6; max-width: 76ch; margin: 0; }
.pl-note { color: var(--basalt); font-size: 14px; }
.pl-list summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.pl-list__scroll { max-height: 440px; overflow: auto; background: var(--lime); }
.pl-list table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.pl-list th, .pl-list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(21, 20, 18, .2); }
.pl-list thead th { position: sticky; top: 0; background: var(--lime); font-weight: 500; }
/* ficha del lote */
.pl-card { position: sticky; top: 88px; min-height: 220px; padding: 20px; background: var(--lime); border: 1px solid var(--black); }
.pl-card__empty { color: var(--basalt); margin: 0; }
.pl-card h3 { font-size: 24px; margin-bottom: 6px; }
.pl-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 14px; font-size: 16px; }
.pl-card dt { color: var(--basalt); }
.pl-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.pl-card__price { font: 400 26px/1.2 var(--cap); margin: 0 0 4px; }
.pl-card__promo { margin: 0 0 10px; padding: 8px 10px; background: var(--trav); font-size: 15px; line-height: 1.45; }
.pl-card__notes { font-size: 14px; color: var(--basalt); line-height: 1.5; margin: 0 0 14px; padding-left: 18px; }
.pl-card__btns { display: grid; gap: 8px; }
.pl-card__x { display: none; }
@media (max-width: 860px) {
  .pl-wrap { grid-template-columns: 1fr; }
  .pl-card { position: static; min-height: 0; }
}
@media (max-width: 760px) {
  .pl-map--h { display: none; } .pl-map--v { display: block; }
  .pl-zoom { position: static; display: flex; justify-content: flex-end; padding: 8px; }
  .pl-card.is-open { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; max-height: 78svh; overflow: auto; border-width: 1px 0 0; padding: 18px 16px 22px; }
  .pl-card.is-open .pl-card__x { display: block; position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: none; font-size: 28px; cursor: pointer; }
}

/* la promo: la única banda negra */
.promo { background: var(--black); color: var(--lime); padding: clamp(64px, 9vw, 112px) 0; }
.promo__in { max-width: 820px; }
.promo h2 { font-size: clamp(32px, 4.6vw, 58px); margin-bottom: 20px; }
.promo__p { font-size: 19px; max-width: 58ch; margin-bottom: 26px; }
.promo__terms { font-size: 14px; line-height: 1.55; color: var(--trav); max-width: 76ch; margin-top: 26px; }

/* por qué aquí */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--black); margin-bottom: 36px; }
.why__it { padding: 26px 26px 10px 0; }
.why__it + .why__it { padding-left: 26px; border-left: 1px solid rgba(21, 20, 18, .3); }
.why__it h3 { margin-bottom: 14px; }
@media (max-width: 860px) { .why__grid { grid-template-columns: 1fr; } .why__it + .why__it { padding-left: 0; border-left: 0; border-top: 1px solid rgba(21, 20, 18, .3); } }

/* cuatro pasos */
.steps { background: var(--trav); }
.st { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.st__n { display: block; font: 400 44px/1 var(--cap); margin-bottom: 14px; }
.st h3 { margin-bottom: 10px; }
.st p { font-size: 16px; }
.steps .fine { color: var(--black); }
@media (max-width: 960px) { .st { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .st { grid-template-columns: 1fr; } }

/* preguntas */
.faq__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.status { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 10px; }
.status caption { text-align: left; font-weight: 500; padding-bottom: 8px; font-size: 16px; }
.status th, .status td { text-align: left; padding: 9px 0; border-bottom: 1px solid rgba(21, 20, 18, .25); font-weight: 400; vertical-align: top; }
.status td { padding-left: 12px; white-space: nowrap; }
.s-in-progress::before, .s-confirmed::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border: 1px solid var(--black); vertical-align: 1px; }
.s-confirmed::before { background: var(--black); }
.faq__it { border-bottom: 1px solid rgba(21, 20, 18, .3); }
.faq__it:first-child { border-top: 1px solid var(--black); }
.faq__it summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-size: 18px; font-weight: 500; }
.faq__it summary::-webkit-details-marker { display: none; }
.faq__it summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 400 26px var(--sans); }
.faq__it[open] summary::after { content: "−"; }
.faq__it p { padding: 0 0 18px; max-width: 66ch; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } }

/* cierre */
.close { position: relative; padding-bottom: clamp(64px, 9vw, 112px); }
.close__ph img { width: 100%; height: clamp(200px, 30vw, 420px); object-fit: cover; }
.close__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); margin-top: -96px; position: relative; }
.close__txt { padding-top: 140px; }
.close__txt h2 { margin-bottom: 16px; }
.close__txt p { font-size: 18px; }
.motto { font: 400 18px var(--cap); letter-spacing: 0; text-transform: none; margin-top: 30px; }
.close__form { background: var(--paper); border: 1px solid var(--black); padding: clamp(20px, 3vw, 36px); }
@media (max-width: 860px) { .close__grid { grid-template-columns: 1fr; margin-top: 0; } .close__txt { padding-top: 48px; } .close__form { order: 2; } }

/* formulario */
.lead__h { font: 400 24px/1.2 var(--cap); letter-spacing: 0; text-transform: none; margin-bottom: 6px; }
.lead__h2 { font: 500 19px/1.3 var(--sans); margin: 28px 0 4px; }
.lead__p { color: var(--basalt); font-size: 16px; }
.fld { display: grid; gap: 6px; margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.fld label, .fld legend { font-size: 16px; font-weight: 500; padding: 0; }
.fld small { font-weight: 400; color: var(--basalt); }
.fld input, .fld select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--basalt); background: #fff; color: var(--black); font: 400 17px var(--sans); border-radius: 0; }
.fld input:focus-visible, .fld select:focus-visible { outline: 3px solid var(--black); outline-offset: 1px; }
.fld input[aria-invalid="true"] { border: 2px solid #8A1C12; }
.fld--by { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fld--by legend { width: 100%; margin-bottom: 6px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.fld-row[hidden] { display: none; }
@media (max-width: 480px) { .fld-row { grid-template-columns: 1fr; } }
.opt { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--black); flex: none; }
.opt--check { align-items: flex-start; font-size: 15px; line-height: 1.5; margin: 6px 0 18px; }
.opt--check input { margin-top: 2px; }
.err { color: #8A1C12; font-size: 15px; margin: 0; }
.err--send { margin-top: 12px; }
.lead__fine { font-size: 14px; color: var(--basalt); line-height: 1.5; margin: 14px 0 0; }
.lead__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.lead__done { margin-top: 14px; font-weight: 500; }
.lead__ok:focus { outline: none; }
.hp { position: absolute; left: -9999px; }

/* diálogo */
.dlg { width: min(520px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: clamp(20px, 4vw, 32px); border: 1px solid var(--black); background: var(--paper); color: var(--black); }
.dlg::backdrop { background: rgba(21, 20, 18, .62); }
.dlg__x { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 30px; cursor: pointer; color: var(--black); }

/* WhatsApp flotante y barra del celular */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 25; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px;
  background: var(--black); color: var(--lime); text-decoration: none; font-size: 15px; font-weight: 500; transition: opacity .25s, transform .25s; }
.wa-float svg { width: 22px; height: 22px; fill: currentColor; }
.wa-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }
.mbar { display: none; }
@media (max-width: 760px) {
  .wa-float { display: none; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--lime); border-top: 1px solid var(--black); transform: translateY(110%); transition: transform .3s var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar .btn { min-height: 48px; padding: 0 10px; }
  body { padding-bottom: 72px; }
}

/* aviso de cookies (solo aparece si se enciende la medición en config.js) */
.cookie { position: fixed; left: 12px; bottom: 12px; z-index: 45; max-width: 420px; padding: 16px; background: var(--paper); border: 1px solid var(--black); font-size: 15px; }
.cookie[hidden] { display: none; }
.cookie div { display: flex; gap: 8px; flex-wrap: wrap; }

/* pie */
.foot { background: var(--black); color: var(--lime); padding: 56px 0 90px; font-size: 15px; }
.foot__in { display: grid; gap: 14px; }
.foot img { width: 165px; height: auto; margin-bottom: 8px; }
.foot__legal { color: var(--trav); font-size: 14px; max-width: 80ch; }

/* páginas sencillas */
.page { padding-top: 64px; padding-bottom: 96px; max-width: 760px; }
.page__h { font-size: clamp(30px, 4vw, 44px); letter-spacing: 0; text-transform: none; margin-bottom: 20px; }
.prose h2 { font: 500 20px/1.3 var(--sans); letter-spacing: 0; text-transform: none; margin: 30px 0 8px; }

/* ---- ronda 6: hero más limpio, menú de páginas, páginas internas, fichas, datos y financiamiento ---- */
.hero__line { font: 400 clamp(19px, 2.2vw, 24px)/1.35 var(--cap); letter-spacing: .04em; margin: 22px 0 28px; max-width: 34ch; }
.hero__fine { margin: 14px 0 0; font-size: 14px; }
.hero__fine a { color: var(--lime); }
.hero__cap { font-size: 12px; padding: 2px 6px; background: rgba(21, 20, 18, .62); }
.top__links { display: flex; gap: 20px; }
@media (max-width: 1080px) { .top__links { gap: 14px; font-size: 14px; } }
@media (max-width: 960px) {
  .top__in { flex-wrap: wrap; row-gap: 0; }
  .top__nav { order: 3; width: 100%; margin: 0; overflow-x: auto; justify-content: space-between; padding-bottom: 4px; }
  .top__links { flex: none; }
  .top__cta { margin-left: auto; }
}
@media (max-width: 760px) { .top__nav a[href^="/"] { display: inline-block; } .top__links { gap: 16px; } }
.crumbs { padding-top: 22px; font-size: 14px; color: var(--basalt); }
.crumbs a { color: var(--basalt); }
.ip__head { padding-top: 28px; padding-bottom: 8px; max-width: calc(820px + 2 * var(--gutter)); margin-left: 0; }
.ip__h { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: 0; text-transform: none; margin-bottom: 18px; text-wrap: balance; }
.ip__h2 { font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--cap); letter-spacing: 0; text-transform: none; margin: 40px 0 16px; }
.answer { font-size: 20px; line-height: 1.55; max-width: 62ch; }
.ip__upd { font-size: 14px; color: var(--basalt); }
.ip__body { padding-top: 12px; padding-bottom: 64px; }
.prose { max-width: calc(760px + 2 * var(--gutter)); margin-left: 0; }
.prose h2 { font: 400 clamp(22px, 2.4vw, 28px)/1.25 var(--cap); letter-spacing: 0; text-transform: none; margin: 44px 0 14px; }
.prose h3 { font: 500 19px/1.35 var(--sans); letter-spacing: 0; text-transform: none; margin: 28px 0 8px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose a { text-underline-offset: 3px; }
.prose em { color: var(--basalt); }
.tbl { overflow-x: auto; margin: 16px 0 24px; }
.tbl table, .facts { border-collapse: collapse; width: 100%; font-size: 16px; }
.tbl th, .tbl td, .facts th, .facts td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(21, 20, 18, .22); font-weight: 400; }
.tbl thead th { font-weight: 500; border-bottom: 1px solid var(--black); }
.facts th[scope="row"] { color: var(--basalt); width: 34%; }
.facts--wide th[scope="row"] { width: 24%; }
.facts--wide td:last-child { white-space: nowrap; font-size: 15px; }
@media (max-width: 640px) { .facts--wide td:last-child { white-space: normal; } }
.lotp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-bottom: 24px; }
.lotp__notes { font-size: 15px; color: var(--basalt); padding-left: 20px; margin: 16px 0 22px; }
.lotp__plan { margin: 40px 0 0; background: #EFE9D8; border: 1px solid rgba(21, 20, 18, .2); padding: 12px; }
.lotp__plan figcaption { font-size: 14px; color: var(--basalt); margin-bottom: 8px; }
.lotp__plan .lnk { display: inline-block; margin-top: 10px; font-size: 15px; }
.pl-crop { width: 100%; height: auto; max-height: 520px; }
.pl-crop .lot { fill: #FFFDF8; stroke: #857B6C; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: default; }
.pl-crop .lot.st-ask { fill: #E6DCC7; }
.pl-crop .lot.st-sold { fill: #9C9488; }
.pl-crop .lot.is-me { fill: var(--black); stroke: var(--black); }
.pl-crop .pl-num { font: 500 30px var(--sans); fill: var(--black); }
.pl-crop .pl-num.is-me { fill: var(--lime); }
.lotp__others { list-style: none; padding: 0; columns: 2; column-gap: 32px; font-size: 16px; }
.lotp__others li { padding: 6px 0; break-inside: avoid; }
@media (max-width: 860px) { .lotp { grid-template-columns: 1fr; } .lotp__others { columns: 1; } }
.plan--page { padding-top: 24px; }
.pl-list th a { font-weight: 500; }
.jr { list-style: none; padding: 0; margin: 12px 0 64px; display: grid; gap: 0; max-width: 820px; }
.jr__it { padding: 24px 0; border-top: 1px solid rgba(21, 20, 18, .3); }
.jr__it a { text-decoration: none; }
.jr__it h2 { font: 400 clamp(21px, 2.4vw, 27px)/1.25 var(--cap); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.jr__it a:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.qa { max-width: 760px; padding: 18px 0; border-top: 1px solid rgba(21, 20, 18, .25); }
.qa h2 { font: 500 19px/1.4 var(--sans); letter-spacing: 0; text-transform: none; margin-bottom: 6px; }
.fin { background: var(--paper); }
.fin__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px clamp(32px, 5vw, 72px); align-items: start; }
.fin__grid .st { grid-column: 1 / -1; }
.st--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .fin__grid { grid-template-columns: 1fr; } .st--3 { grid-template-columns: 1fr; } }
.finbox { border: 1px solid var(--black); padding: clamp(18px, 3vw, 28px); background: var(--lime); margin: 8px 0 24px; }
.finbox__h { font: 400 clamp(19px, 2.2vw, 24px)/1.3 var(--cap); letter-spacing: .04em; margin-bottom: 8px; }
.finbox .hero__btns { margin: 16px 0 10px; }
.calc { border: 1px solid var(--black); padding: clamp(18px, 3vw, 28px); background: var(--paper); margin: 8px 0 32px; }
.calc input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--black); border: 0; padding: 0; background: none; }
.calc__row { font-size: 16px; margin: 4px 0; }
.calc__out { font: 400 clamp(22px, 2.6vw, 28px)/1.3 var(--cap); margin: 16px 0 8px; }
.close--plain { padding-top: clamp(48px, 7vw, 88px); background: var(--paper); border-top: 1px solid rgba(21, 20, 18, .2); }
.close--plain .close__grid { margin-top: 0; }
.close--plain .close__txt { padding-top: 0; }
.loc__map { margin: 0 0 28px; max-width: 620px; }
.foot__nav { list-style: none; padding: 0; margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot__nav a { color: var(--lime); }
.foot__upd { color: var(--trav); font-size: 14px; }

/* ---- movimiento con función (solo con .motion; con reduced-motion no existe) ---- */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.motion [data-reveal].on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print { .wa-float, .mbar, .top, .cookie, .dlg { display: none !important; } }

.plan--page .pl-list__scroll { max-height: none; overflow: visible; }
.plan--page .pl-list thead th { position: static; }

/* ==========================================================================
   MEZCLA ESCOGIDA POR FELIPE (2026-11-09): portada y plano = dirección 2 · «cómo se llega» = vuelo de la 1 en crema ·
   fichas = cuaderno de la 3 sin negro. Colores y letras: marca/yaku-cliente/marca.css.
   ========================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* Portada: la colina que se abre */
.hc { position: relative; background: var(--yk-crema); color: var(--yk-negro); min-height: calc(100svh - 64px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; }
.hc__defs { position: absolute; }
.hc__cab { display: grid; grid-template-columns: minmax(260px, 44vw) 1fr; gap: clamp(20px, 5vw, 80px); align-items: end; padding-top: clamp(20px, 4vh, 44px); position: relative; z-index: 2; }
.hc__logo { margin: 0; color: var(--yk-cafe); }
.hc__svg { width: 100%; height: auto; overflow: visible; }
.hc__svg path { fill: currentColor; }
.hc__txt { max-width: 440px; justify-self: end; padding-bottom: 6px; }
.hc__h { font: 400 clamp(21px, 1.9vw, 26px)/1.3 var(--yk-titulo); margin: 0 0 12px; color: var(--yk-negro); letter-spacing: 0; text-transform: none; }
.hc__txt p { margin: 0; color: var(--yk-piedra); font-size: 16px; }
.hc__accion { margin-top: 14px !important; }
.hc__accion a:first-child { color: var(--yk-cafe); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.hc__lead { color: var(--yk-piedra); margin-left: 6px; }
.hc__colinas { position: relative; min-height: 46svh; }
.hc__capa { position: absolute; inset: 0; width: 100%; height: 100%; }
.hc__capa--c1 path { fill: var(--yk-arena-clara); } .hc__capa--c2 path { fill: var(--yk-arena); } .hc__capa--c3 path { fill: #C9B79E; }
.hc__ventana { position: absolute; inset: 0; clip-path: url(#hc-ridge); background: var(--yk-arena); }
.hc__ventana img, .hc__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc__video { opacity: 0; transition: opacity .8s; } .hc__video.is-on { opacity: 1; }
.hc__pie { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; margin: 0; font-size: 13px; color: var(--yk-crema); max-width: 60ch; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
/* Entrada: el horizonte se levanta (solo transform, sin tapar el texto) y el acento entra de último */
.hc__capa, .hc__ventana { animation: hc-sube 1.4s cubic-bezier(.16, .84, .3, 1) both; }
.hc__capa--c1 { animation-delay: .05s; } .hc__capa--c2 { animation-delay: .12s; } .hc__capa--c3 { animation-delay: .2s; } .hc__ventana { animation-delay: .28s; }
@keyframes hc-sube { from { transform: translateY(38%); } to { transform: none; } }
.hc__svg #acento { animation: hc-acento .9s cubic-bezier(.16, .84, .3, 1) 1.35s both; }
@keyframes hc-acento { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .hc { min-height: auto; } .hc__cab { grid-template-columns: 1fr; gap: 14px; } .hc__txt { justify-self: start; }
  .hc__colinas { min-height: 44svh; } .hc__pie { position: static; color: var(--yk-piedra); text-shadow: none; padding-block: 10px 16px; }
}

/* Plano por sectores */
.pl--sectores { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.pl-side__h { margin: 0 0 10px; font-size: 14px; color: var(--yk-piedra); }
.pl-sectores { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--yk-arena); }
.pl-sec-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 13px 4px; border-bottom: 1px solid var(--yk-arena); }
.pl-sec-btn b { grid-row: span 3; font: 400 32px/1 var(--yk-titulo); color: var(--yk-cafe); opacity: .35; transition: opacity .25s; }
.pl-sec-btn span { font-size: 15px; } .pl-sec-btn small { color: var(--yk-piedra); font-size: 13.5px; }
.pl-sec-btn em { font-style: normal; font-size: 13.5px; color: var(--yk-cafe); }
.pl-sec-btn[aria-pressed="true"] b, .pl-sec-btn:hover b { opacity: 1; }
.pl-sec-btn[aria-pressed="true"] { background: var(--yk-arena-clara); }
.pl-sec-btn:focus-visible { outline: 2px solid var(--yk-cafe); outline-offset: 2px; }
.pl-main { min-width: 0; }
@media (max-width: 860px) { .pl--sectores { grid-template-columns: 1fr; } }

/* Cómo se llega: el visor del dron, en crema y café */
.llega__grid { display: grid; grid-template-columns: minmax(260px, 34%) 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.llega__txt h2 { color: var(--yk-cafe); }
.llega__tiempos { list-style: none; margin: 18px 0; padding: 0; border-top: 1px solid var(--yk-arena); }
.llega__tiempos li { padding: 10px 0; border-bottom: 1px solid var(--yk-arena); }
.llega__tiempos b { font: 400 24px var(--yk-titulo); color: var(--yk-cafe); margin-right: 8px; }
.visor { margin: 0; position: relative; aspect-ratio: 16 / 9; }
.visor__cuadro { position: absolute; inset: 0; overflow: hidden; background: var(--yk-arena); }
.visor__img, .visor__cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visor__cv { opacity: 0; } .visor.is-vivo .visor__cv { opacity: 1; }
.visor__esq { position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--yk-crema); z-index: 2; }
.visor__esq--a { left: 12px; top: 12px; border-right: 0; border-bottom: 0; } .visor__esq--b { right: 12px; top: 12px; border-left: 0; border-bottom: 0; }
.visor__esq--c { left: 12px; bottom: 12px; border-right: 0; border-top: 0; } .visor__esq--d { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.visor__dest { position: absolute; z-index: 3; left: 44px; bottom: 16px; margin: 0; background: var(--yk-crema); color: var(--yk-negro); padding: 8px 12px; font-size: 14px; }
.visor__dest b { font: 400 22px var(--yk-titulo); color: var(--yk-cafe); }
@media (max-width: 860px) { .llega__grid { grid-template-columns: 1fr; } .visor__dest { left: 12px; bottom: 12px; } }
.band--sol { margin: 0; } .band--sol img { width: 100%; height: clamp(220px, 42vw, 520px); object-fit: cover; display: block; }

/* Ficha de lote: cuaderno (dirección 3) en crema y café */
.lotp__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: 12px 40px; }
.lotp__foto { margin: 0; } .lotp__foto img { width: 100%; height: auto; display: block; }
.lotp__foto figcaption, .lotp__foto2 figcaption { margin-top: 8px; font-size: 13px; color: var(--yk-piedra); }
.lotp__h { margin: 0 0 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.lotp__id { display: block; font: 400 clamp(48px, 6vw, 80px)/1 var(--yk-titulo); color: var(--yk-cafe); }
.lotp__sub { display: block; margin-top: 8px; font: 400 16px/1.4 var(--yk-texto); color: var(--yk-piedra); }
.lotp__datos .answer { font-size: 15.5px; color: var(--yk-negro); }
.lotp__dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 24px; margin: 18px 0; font-size: 15.5px; }
.lotp__dl dt { color: var(--yk-piedra); } .lotp__dl dd { margin: 0; }
.lotp__accion a { color: var(--yk-cafe); font-weight: 600; font-size: 17px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lotp__mas { font-size: 14.5px; color: var(--yk-piedra); }
.lotp__tour { padding-block: 10px 40px; }
.tour { position: relative; aspect-ratio: 2 / 1; max-width: 960px; background: var(--yk-arena); overflow: hidden; }
.tour img { width: 100%; height: 100%; object-fit: cover; }
.tour__btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--yk-crema); color: var(--yk-cafe); padding: 12px 18px; font-weight: 600; text-decoration: none; border: 1px solid var(--yk-cafe); }
.tour__btn:hover { background: var(--yk-cafe); color: var(--yk-crema); }
.tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour__nuevo { display: inline-block; margin-top: 8px; font-size: 14px; }
.lotp__abajo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.lotp__foto2 { margin: 0; } .lotp__foto2 img { width: 100%; height: auto; }
@media (max-width: 860px) { .lotp__grid, .lotp__abajo { grid-template-columns: 1fr; } .tour { aspect-ratio: 4 / 3; } }

@media (prefers-reduced-motion: reduce) {
  .hc__capa, .hc__ventana, .hc__svg #acento { animation: none !important; }
  .hc__video { display: none; }
}

/* Plano por sectores: el mapa ocupa todo el ancho y la ficha va debajo */
.pl--sectores .pl-wrap { display: block; }
.pl--sectores .pl-card { margin-top: 14px; max-width: none; position: static; }
.pl--sectores .pl-card { min-height: 0; border-color: var(--yk-arena); }
/* Velocidad: lo que está bajo la portada no se dibuja hasta que la persona se acerca */
main > .sec, main > .promo, main > .band { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Ajustes de la mezcla: botón de sector activo legible, sector A sin teñir (la promo se dice en su línea), lote propio en café */
.pl-sec-btn[aria-pressed="true"] { background: var(--yk-arena-clara); color: var(--yk-negro); border-color: var(--yk-arena); }
.pl--sectores .lot.in-zone { fill: var(--pl-avail); }
.pl-crop .lot.is-me { fill: var(--yk-cafe); stroke: var(--yk-cafe); }
/* Revisión final: la colina crece al bajar (cambia de forma, no hay capas a distinta velocidad) */
.hc__colinas { transform-origin: 50% 100%; transform: scaleY(var(--crece, 1)); }
/* En la portada, el logo del encabezado aparece recién cuando el logo grande sale de la vista */
.is-home .top__logo { opacity: 0; transition: opacity .3s; } .is-home.ya-bajo .top__logo { opacity: 1; }
/* Botón del recorrido 360°: una acción subrayada sobre una etiqueta crema, sin borde */
.tour__btn { border: 0; text-decoration: underline; text-underline-offset: 5px; }
.tour__btn:hover { background: var(--yk-crema); color: var(--yk-cafe); text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { .hc__colinas { transform: none !important; } }