/* =========================================================
   ESCENAS: avance de obras, plano que se dibuja, escalera de precios,
   transparencia, la ruta y los anillos del entorno turístico.
   El estado por defecto es el FINAL (sin JavaScript o con movimiento
   reducido se ve todo completo); escenas.js anima desde ahí.
   Usa los tokens de landing.css (--claro, --tinta, --boton, --cauce…).
   ========================================================= */

/* ---------- 1. avance de obras ---------- */
.obras { background: var(--claro); color: var(--tinta); padding: 18vh var(--margen) 16vh; overflow: hidden; }
.obras__intro { display: grid; gap: 14px; max-width: 640px; margin-bottom: 10vh; }
.obras__titulo { font-size: clamp(30px, 3vw, 48px); }
.obras__bajada { font-size: 16px; color: var(--tinta-suave); max-width: 32em; }
.obras__linea { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.hito { --punto: 34px; position: relative; display: grid; gap: 8px; align-content: start; padding-right: 28px; }
.hito__punto { position: relative; z-index: 2; width: var(--punto); height: var(--punto); border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--claro); border: 2px solid #1e2b2259; }
.hito__punto svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.hito[data-estado="hecho"] .hito__punto { background: var(--boton); border-color: var(--boton); }
.hito[data-estado="en_ejecucion"] .hito__punto,
.hito[data-estado="proxima"] .hito__punto { border-color: var(--boton); }
.hito[data-estado="en_ejecucion"] .hito__punto::after,
.hito[data-estado="proxima"] .hito__punto::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3b7a4559; }
/* tramos: el que sale de cada hito hacia el siguiente (y la entrada antes del primero) */
.hito__tramo, .hito__entrada { position: absolute; z-index: 1; top: calc(var(--punto) / 2 - 1.5px); height: 3px; background: #1e2b221f; border-radius: 2px; }
.hito__tramo { left: calc(var(--punto) / 2); width: 100%; }
.hito__entrada { right: calc(100% - var(--punto) / 2); width: 50vw; }
.hito__tramo i, .hito__entrada i { position: absolute; inset: 0; background: var(--boton); border-radius: inherit; transform-origin: left center; transform: scaleX(calc(var(--f) * var(--p, 1))); }
.hito__entrada i { transform-origin: right center; }
.hito__punta { position: absolute; top: 50%; left: calc(var(--f) * 100%); width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--boton);
  box-shadow: 0 0 0 0 #3b7a4566; animation: latido 2.2s ease-out infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 #3b7a4580; } 70%, 100% { box-shadow: 0 0 0 16px #3b7a4500; } }
.hito__nombre { font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.01em; }
.hito__estado { justify-self: start; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radio-boton); }
.hito[data-estado="hecho"] .hito__estado { background: var(--boton); color: #fff; }
.hito[data-estado="en_ejecucion"] .hito__estado { background: #3b7a451f; color: #2c5e35; }
.hito[data-estado="proxima"] .hito__estado { background: #e2b25c33; color: var(--disponible-texto); }
.hito[data-estado="en_desarrollo"] .hito__estado { box-shadow: inset 0 0 0 1px #1e2b2240; color: var(--tinta-suave); }
.hito__detalle { font-size: 14px; color: var(--tinta-suave); max-width: 22em; }
.hito__foto { margin: 14px 0 0; max-width: 380px; display: grid; gap: 8px; }
.hito__foto img { aspect-ratio: 4 / 3; height: auto; border-radius: var(--radio-caja); }
.hito__foto figcaption { font-size: 11px; line-height: 1.4; justify-self: start; }

/* ---------- 2. el plano que se dibuja ---------- */
.lanzamiento { position: relative; height: 270vh; background: var(--claro); color: var(--tinta); }
.lanzamiento__fija { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(280px, 4fr) 7fr;
  gap: clamp(24px, 4vw, 64px); align-items: center; padding: calc(var(--cab) + 1vh) var(--margen) 3vh; }
.lanzamiento__texto { display: grid; gap: 16px; align-content: center; }
.lanzamiento__titulo { font-size: clamp(30px, 3vw, 48px); }
.lanzamiento__bajada { font-size: 15px; color: var(--tinta-suave); max-width: 30em; }
.pp-leyenda { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.pp-leyenda li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.pp-leyenda b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; }
.pp-leyenda em { font-style: normal; color: var(--tinta-suave); font-size: 14px; }
.pp-leyenda i { width: 24px; height: 24px; border-radius: 7px; flex: none; border: 1.5px solid #1e2b2259; background: #fff; }
.pp-leyenda [data-grupo="vendida"] i { background: #c9ccce; border-color: #9aa1a6; }
.pp-leyenda [data-grupo="disponible"] i { background: var(--boton); border-color: var(--boton); box-shadow: 0 0 0 4px #3b7a4533; }
.pp-leyenda [data-grupo="reservada"] i { background: var(--disponible-anillo); border-color: #c79a45; }
.pp-leyenda [data-grupo="proxima_etapa"] i { background: repeating-linear-gradient(45deg, #1e2b223d 0 2px, #fff 2px 6px); }
.lanzamiento__enlace { justify-self: start; font-size: 14px; margin-top: 6px; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--curva); }
.lanzamiento__enlace:hover { background-size: 0% 1px; }
.pp-hoja { margin: 0; justify-self: center; width: 100%; max-width: calc((100svh - var(--cab) - 110px) * 1.12); background: #fcfaf5; border-radius: var(--radio-caja);
  box-shadow: 0 30px 60px -42px #1e2b2273, 0 0 0 1px #1e2b2214; padding: clamp(10px, 1.4vw, 20px); display: grid; gap: 10px; }
.pp { display: block; width: 100%; height: auto; }
.pp-rotulo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tinta-suave); border-top: 1px solid #1e2b221f; padding-top: 8px; }
.pp-rotulo b { color: var(--tinta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
/* dentro del SVG (unidades: píxeles de la ortofoto, 1 px = 0,3 m) */
.pp-fondo { stroke: none; }
.pp-cuad { fill: none; stroke: #1e2b22; stroke-opacity: .07; stroke-width: 1.5; }
.pp-raya { stroke: #1e2b22; stroke-opacity: .22; stroke-width: 4; }
.pp-caminos path { fill: #e8e1d1; fill-rule: evenodd; stroke: #1e2b22; stroke-opacity: .5; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.pp-r { stroke: none; }
.pp-r--vendida { fill: #cdd0d2; }
.pp-r--disponible { fill: var(--boton); }
.pp-r--reservada { fill: var(--disponible-anillo); }
.pp-r--proxima_etapa { fill: url(#pp-rayado); }
.pp-aro { fill: none; stroke: var(--boton); stroke-opacity: .3; stroke-width: 34; stroke-linejoin: round; }
.pp-l { fill: none; stroke: #1e2b22; stroke-opacity: .42; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pp-perimetro { fill: none; stroke: var(--tinta); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.pp-cauce { fill: none; stroke: var(--cauce); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.pp-gota { fill: var(--cauce); stroke: #fcfaf5; stroke-width: 6; transform-box: fill-box; transform-origin: center; }
.pp-agua-txt { font: italic 500 38px var(--fuente); fill: var(--cauce-texto); text-anchor: middle; paint-order: stroke; stroke: #fcfaf5; stroke-width: 12px; stroke-linejoin: round; }
.pp-n { font: 600 42px var(--fuente); text-anchor: middle; dominant-baseline: central; }
.pp-n--vendida { fill: #7d848a; }
.pp-n--disponible { fill: #fff; }
.pp-n--reservada { fill: var(--tinta); }
.pp-n--proxima_etapa { fill: #1e2b22b3; }
.pp-acceso circle { fill: var(--tinta); }
.pp-acceso path { fill: none; stroke: var(--tinta); stroke-width: 4; stroke-dasharray: 10 10; }
.pp-acceso text { font: 600 40px var(--fuente); fill: var(--tinta); text-anchor: middle; paint-order: stroke; stroke: #fcfaf5; stroke-width: 10px; stroke-linejoin: round; }
.pp-acceso .pp-acceso-sub { font-weight: 400; font-size: 32px; fill: #1e2b22b3; }
.pp-norte path { fill: var(--tinta); }
.pp-norte text { font: 600 40px var(--fuente); fill: var(--tinta); text-anchor: middle; }
.pp-escala path { fill: none; stroke: var(--tinta); stroke-width: 4; }
.pp-escala text { font: 500 32px var(--fuente); fill: var(--tinta); text-anchor: middle; }
.pp-pluma { fill: var(--tinta); opacity: 0; }

/* ---------- 3. precios + escalera ---------- */
.precios { grid-template-areas: "txt esc" "txt tarj"; align-items: start; row-gap: 56px; }
.precios__txt { grid-area: txt; position: sticky; top: calc(var(--cab) + 6vh); }
.escalera { grid-area: esc; display: grid; gap: 12px; }
.precios__tarjetas { grid-area: tarj; }
.escalera__ceja { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--tinta-suave); }
.escalera__frase { font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -.01em; max-width: 24em; }
.escalera__grafico { display: block; width: 100%; height: auto; overflow: visible; margin-top: 6px; }
.esc-barra { fill: #ddd7c9; transform-box: fill-box; transform-origin: 50% 100%; }
.esc-barra--hoy { fill: var(--boton); }
.esc-cifra { font: 600 23px var(--fuente); text-anchor: middle; fill: #1e2b22b3; font-variant-numeric: tabular-nums; }
.esc-cifra--hoy { fill: #fff; }
.esc-sello rect { fill: #ffffff26; stroke: #ffffffa6; stroke-width: 1.5; }
.esc-sello text { font: 600 13.5px var(--fuente); fill: #fff; text-anchor: middle; letter-spacing: .04em; }
.esc-etq { font: 600 19px var(--fuente); text-anchor: middle; fill: var(--tinta); }
.esc-etq-sub { font: 400 15px var(--fuente); text-anchor: middle; fill: #1e2b2299; }
.esc-arco, .esc-punta { fill: none; stroke: #1e2b22a6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.esc-dif { font: 600 18px var(--fuente); text-anchor: middle; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.esc-guia { fill: none; stroke: #1e2b2266; stroke-width: 1.5; stroke-dasharray: 3 6; }
.esc-cota { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; }
.esc-total-txt { font: 700 21px var(--fuente); text-anchor: middle; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.escalera__nota { font-size: 12px; color: var(--tinta-suave); }

/* ---------- 4. transparencia ---------- */
.transparencia { background: var(--claro); color: var(--tinta); padding: 16vh var(--margen); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.transparencia__intro { display: grid; gap: 14px; position: sticky; top: calc(var(--cab) + 6vh); }
.transparencia__titulo { font-size: clamp(28px, 2.6vw, 42px); }
.transparencia__bajada { color: var(--tinta-suave); font-size: 15px; max-width: 28em; }
.papeles { list-style: none; margin: 0; padding: 0; border-top: 1px solid #1e2b2226; }
.papel { display: grid; grid-template-columns: 30px 1fr auto; gap: 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid #1e2b2226; }
.papel__check { width: 30px; height: 30px; border-radius: 50%; background: var(--boton); display: grid; place-items: center; }
.papel__check svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.papel__titulo { font-size: 16px; font-weight: 600; line-height: 1.35; }
.papel__dato { font-size: 15px; color: var(--tinta-suave); margin-top: 4px; font-variant-numeric: tabular-nums; }
.papel__fuente { font-size: 11px; color: #1e2b2280; text-align: right; max-width: 19em; padding-top: 3px; }

/* ---------- 5. la ruta ---------- */
.ruta { position: relative; height: 250vh; background: var(--claro); color: var(--tinta); }
.ruta__fija { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(280px, 4fr) 7fr;
  gap: clamp(24px, 4vw, 64px); align-items: center; padding: calc(var(--cab) + 1vh) var(--margen) 3vh; }
.ruta__texto { display: grid; gap: 14px; align-content: center; }
.ruta__titulo { font-size: clamp(30px, 3vw, 48px); }
.ruta__bajada { font-size: 16px; color: var(--tinta-suave); max-width: 26em; }
.ruta__lista { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid #1e2b2226; }
.ruta__lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #1e2b2226; }
.ruta__lista b { font-weight: 600; }
.ruta__lista span { font-weight: 600; color: var(--boton); font-variant-numeric: tabular-nums; text-align: right; }
.ruta__lista small { grid-column: 1 / -1; font-size: 12px; color: var(--tinta-suave); }
.ruta__nota { font-size: 12px; color: var(--tinta-suave); }
.ruta__mapa { margin: 0; justify-self: center; width: 100%; max-width: calc((100svh - var(--cab) - 60px) * 1.47); border-radius: var(--radio-caja); overflow: hidden; box-shadow: 0 0 0 1px #1e2b2214, 0 30px 60px -44px #1e2b2273; }
.ruta-svg { display: block; width: 100%; height: auto; }
.ruta-mar { fill: #e5edee; }
.ruta-tierra { fill: #f6f1e5; fill-rule: evenodd; stroke: #1e2b22; stroke-opacity: .42; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ruta-lagos { fill: #2ba6de29; fill-rule: evenodd; stroke: var(--cauce); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ruta-agua-txt { font: italic 500 17px var(--fuente); fill: #0b4a6bb3; letter-spacing: .14em; text-anchor: middle; }
.ruta-ctx circle { fill: #1e2b2266; }
.ruta-ctx text { font: 500 15px var(--fuente); fill: #1e2b2299; }
.ruta-camino { fill: none; stroke: var(--boton); stroke-width: 3.5; stroke-linecap: round; }
.ruta-vuelo { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-dasharray: 1 10; stroke-linecap: round; }
.ruta-mascara { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; }
.ruta-destino circle { fill: #fff; stroke: var(--boton); stroke-width: 3.5; }
.ruta-etq { paint-order: stroke; stroke: #f6f1e5; stroke-width: 7px; stroke-linejoin: round; }
.ruta-etq__n { font: 600 19px var(--fuente); fill: var(--tinta); }
.ruta-etq__t { font: 600 17px var(--fuente); fill: var(--boton); }
.ruta-avion path { fill: var(--tinta); }
.ruta-pin path { fill: var(--boton); }
.ruta-pin__ojo { fill: #fff; }
.ruta-pin__aro { fill: #3b7a4529; }
.ruta-pin__txt { font: 700 19px var(--fuente); fill: var(--tinta); paint-order: stroke; stroke: #f6f1e5; stroke-width: 7px; stroke-linejoin: round; }
.ruta-luz { opacity: 0; }
.ruta-escala path { fill: none; stroke: var(--tinta); stroke-width: 2; }
.ruta-escala text { font: 500 14px var(--fuente); fill: var(--tinta); }
.ruta-osm { font: 400 12px var(--fuente); fill: #1e2b2280; }

/* ---------- 6. entorno turístico por anillos ---------- */
.anillo__desc { font-size: 15px; color: var(--tinta-suave); margin-top: 18px; max-width: 46em; min-height: 1.5em; }
.lugar__nota { display: block; font-size: 11px; opacity: .85; }

/* el botón flotante no tapa las escenas fijas */
.flotante.oculta-escena { transform: translateY(calc(100% + var(--margen) + 40px)); }

/* =========================================================
   CELULAR
   ========================================================= */
@media (max-width: 767px) {
  .obras { padding: 12vh var(--margen) 10vh; }
  .obras__intro { margin-bottom: 6vh; }
  .obras__linea { grid-template-columns: 1fr; }
  .hito { --punto: 30px; padding: 0 0 40px calc(var(--punto) + 18px); }
  .hito:last-child { padding-bottom: 0; }
  .hito__punto { position: absolute; left: 0; top: 0; margin: 0; }
  .hito__tramo { top: calc(var(--punto) / 2); left: calc(var(--punto) / 2 - 1.5px); width: 3px; height: 100%; }
  .hito__tramo i { transform-origin: center top; transform: scaleY(calc(var(--f) * var(--p, 1))); }
  .hito__punta { left: 50%; top: calc(var(--f) * 100%); }
  .hito__entrada { display: none; }
  .hito__foto { max-width: none; }

  .lanzamiento { height: 240vh; }
  .lanzamiento__fija { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: calc(var(--cab) + 4px); }
  .lanzamiento__texto { gap: 8px; }
  .lanzamiento__titulo { font-size: 26px; }
  .lanzamiento__bajada, .lanzamiento__enlace { display: none; }
  .pp-leyenda { grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
  .pp-leyenda li { font-size: 13px; gap: 8px; align-items: center; }
  .pp-leyenda b { font-size: 18px; }
  .pp-leyenda em { display: block; font-size: 11px; }
  .pp-leyenda i { width: 18px; height: 18px; border-radius: 5px; }
  .pp-hoja { max-width: none; padding: 8px; }
  .pp-n { font-size: 60px; }
  .pp-agua-txt { font-size: 52px; }
  .pp-rotulo span { display: none; }

  .precios { grid-template-areas: "txt" "esc" "tarj"; grid-template-columns: 1fr; }
  .precios__txt { position: static; }

  .transparencia { grid-template-columns: 1fr; padding: 12vh var(--margen); }
  .transparencia__intro { position: static; }
  .papel { grid-template-columns: 30px 1fr; gap: 14px; }
  .papel__fuente { grid-column: 2; text-align: left; padding: 0; margin-top: -8px; }

  .ruta { height: 230vh; }
  .ruta__fija { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 12px; padding-top: calc(var(--cab) + 4px); }
  .ruta__texto { display: contents; }
  .ruta__texto .ceja { order: 1; }
  .ruta__titulo { order: 2; font-size: 26px; }
  .ruta__bajada { order: 3; font-size: 14px; }
  .ruta__mapa { order: 4; max-width: none; }
  .ruta__lista { order: 5; margin: 0; }
  .ruta__lista li { padding: 8px 0; font-size: 14px; }
  .ruta__nota { order: 6; }
  .ruta-etq { display: none; }                 /* en el celular los tiempos van en la lista */
  .ruta-ctx text, .ruta-agua-txt { font-size: 24px; }
  .ruta-pin__txt { font-size: 30px; }
}

/* =========================================================
   MOVIMIENTO REDUCIDO: todo en su cuadro final, sin escenas fijas
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .lanzamiento, .ruta { height: auto; }
  .lanzamiento__fija, .ruta__fija { position: relative; height: auto; min-height: 100svh; }
  .hito__punta { animation: none; }
}

/* =========================================================
   DORADO "TRIGO" PARA DETALLES (aprobado 2026-11-10)
   Reglas para que siga siendo aspiracional y no premium:
   1. Nunca dorado en fondos oscuros grandes: solo sobre crema o blanco
      (el dorado claro, solo en detalles chicos sobre verde oscuro).
   2. Dorado solo en filetes, puntos, sellos y parcelas de lanzamiento;
      nunca en títulos ni botones (los botones siguen en verde hoja).
   3. Nunca texto en #C9A13B sobre crema (2,2:1): para texto, #8A6A1F (4,6:1).
   ========================================================= */
:root{--dorado:#C9A13B;--dorado-claro:#F3E6BF;--dorado-texto:#8A6A1F}
/* filetes: línea dorada antes de cada ceja */
.ceja::before{content:"";display:inline-block;width:28px;height:1px;background:var(--dorado);vertical-align:middle;margin-right:10px}
.hero .ceja,.banda .ceja,.cierre .ceja{color:var(--dorado-claro)}
/* obras */
.hito__tramo i,.hito__entrada i,.hito__punta{background:var(--dorado)!important}
.hito[data-estado="hecho"] .hito__punto{background:var(--dorado);border-color:var(--dorado)}
.hito__punto svg{stroke:var(--tinta)!important}
.hito[data-estado="hecho"] .hito__estado{background:var(--dorado);color:var(--tinta)}
.hito[data-estado="proxima"] .hito__punto{border-color:var(--dorado)}
@keyframes latido{0%{box-shadow:0 0 0 0 #c9a13b99}70%,100%{box-shadow:0 0 0 16px #c9a13b00}}
/* plano que se dibuja: lanzamiento en dorado */
.pp-r--disponible{fill:var(--dorado)}.pp-n--disponible{fill:var(--tinta)}.pp-aro{stroke:var(--dorado)}
.pp-leyenda [data-grupo="disponible"] i{background:var(--dorado);border-color:var(--dorado);box-shadow:0 0 0 4px #c9a13b40}
/* escalera: sello y columna de hoy */
.esc-sello rect{fill:var(--dorado);stroke:none}.esc-sello text{fill:var(--tinta)}
.esc-cota{stroke:var(--dorado)}
/* ruta */
.ruta-camino{stroke:var(--dorado)}.ruta-destino circle{stroke:var(--dorado)}.ruta-pin path{fill:var(--tinta)}.ruta-pin__ojo{fill:var(--dorado)}
.ruta-etq__t,.ruta__lista span{fill:var(--dorado-texto);color:var(--dorado-texto)}
/* escasez y detalles */
.precios__escasez{background:#c9a13b2e;color:var(--dorado-texto)}
.contador b{color:var(--dorado-texto)}
.tarjeta-precio--destacada .ceja{color:var(--dorado-claro)}
.cargador__barra i{background:var(--dorado)}

/* =========================================================
   FOTOS CON BORDES REDONDEADOS (igual que botones y tarjetas)
   Las fotos "enmarcadas" llevan 16 px; las que van a sangre
   (hero, banda, tu entorno, cierre, pie) quedan rectas porque tocan el borde.
   ========================================================= */
.hero__tarjeta, .valores__retrato, .crece__marco, .valores__detalle img, .revela, .paralaje,
.bloque__grande, .bloque__chica, .mosaico figure { border-radius: var(--radio-caja); overflow: hidden; }
.carta { border-radius: 14px; }

/* sombra más notoria para la hoja del plano y el mapa (efecto superpuesto, como la pila de fotos) */
.pp-hoja, .ruta__mapa { box-shadow: 0 0 0 1px #1e2b2212, 0 14px 28px -14px #1e2b2240, 0 44px 80px -34px #1e2b228c; }

/* ---------- cómo llegar (Google Maps) ---------- */
.llegar { background: var(--claro); color: var(--tinta); padding: 16vh var(--margen); display: grid; grid-template-columns: minmax(280px, 4fr) 7fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.llegar__texto { display: grid; gap: 16px; justify-items: start; }
.llegar__titulo { font-size: clamp(30px, 3vw, 48px); }
.llegar__dir { font-size: 16px; line-height: 1.5; color: var(--tinta-suave); }
.llegar__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.gm-icono { width: 18px; height: 18px; flex: none; fill: currentColor; }
.gm-icono circle { fill: var(--boton); }
.llegar__mapa { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radio-caja); overflow: hidden; background: #e9e4d7;
  box-shadow: 0 0 0 1px #1e2b2212, 0 14px 28px -14px #1e2b2240, 0 44px 80px -34px #1e2b228c; }
.llegar__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1;
  filter: sepia(.22) saturate(.82) contrast(.96) brightness(1.02); transition: filter .5s var(--curva-sale); }
.llegar__mapa:hover iframe, .llegar__mapa:focus-within iframe { filter: none; }
.llegar__mapa:not(.cargado) iframe { visibility: hidden; }
.llegar__respaldo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--tinta); font-size: 15px; }
.llegar__respaldo .gm-icono { width: 40px; height: 40px; }
@media (max-width: 767px) {
  .llegar { grid-template-columns: 1fr; padding: 12vh var(--margen); }
  .llegar__mapa { aspect-ratio: 4 / 5; }
}

/* crédito en el pie */
.pie__credito { color: var(--papel); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s; }
.pie__credito:hover { color: #f3e6bf; }

/* ---------- aviso legal del pie ---------- */
.pie__aviso { margin-top: 32px; padding-top: 20px; border-top: 1px solid #ffffff1f; font-size: 11px; line-height: 1.6; color: #ffffffa6; max-width: 110ch; }
@media (max-width: 767px) { .pie__aviso { text-align: center; margin-inline: auto; } }
/* el botón flotante de WhatsApp no tapa el aviso al llegar al final */
.pie__cuerpo { padding-bottom: calc(var(--margen) + 76px); }

/* =========================================================
   COPY SEO DEL INICIO (Agente SEO Copy, 2026-11-11)
   Solo acomoda textos nuevos en el diseño de la maqueta: no hay animaciones nuevas
   (los textos usan las mismas clases que ya se animan: js-lineas, relleno-suave).
   ========================================================= */
/* hero: subtítulo, microfrase y botón de WhatsApp */
.hero__contenido { max-width: min(680px, 90vw); }
.hero__titulo { text-wrap: balance; }
.hero__bajada { margin-top: 18px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; color: var(--papel); max-width: 30em; }
.hero__micro { margin-top: 14px; font-size: 13px; color: var(--papel-suave); }
.wa-icono { width: 18px; height: 18px; flex: none; }

/* "algún día en el sur": el copy no trae etiqueta; el título queda en su misma columna */
.valores__intro > h2 { grid-column: 2; }
.filete { display: block; width: 28px; height: 1px; margin-top: 1.4em; background: var(--dorado); }

/* un día cualquiera en tu parcela */
.dia__momentos { margin-top: 7vh; border-top: 1px solid #1e2b2226; max-width: 46em; }
.dia__momentos li { display: grid; grid-template-columns: 8.5em 1fr; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid #1e2b2226;
  font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; }
.dia__hora { font-weight: 600; }

/* entorno turístico: sábado, domingo y cierre de la sección */
.equipo__chico { max-width: 36em; font-size: 15px; line-height: 1.55; display: grid; gap: 14px; }
.equipo__remate { color: var(--tinta); font-weight: 600; }
.equipo__cierre { margin-top: 8vh; display: grid; gap: 12px; justify-items: start; max-width: 46em; }
.equipo__temporada { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; color: var(--tinta); }
.equipo__pregunta { font-size: 15px; color: var(--tinta-suave); }

/* enlaces a páginas que todavía no existen (se ocultan al publicar) */

/* ¿desde dónde das el paso? */
.perfiles .bloque__titulo { margin-bottom: 8vh; }
.perfiles__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.perfil { display: grid; gap: 16px; align-content: start; justify-items: start; border-top: 1px solid #ffffff33; padding-top: 24px; }
.perfil h3 { font-size: clamp(21px, 1.7vw, 26px); line-height: 1.2; color: var(--papel); }
.perfil p { font-size: 15px; line-height: 1.55; color: var(--papel-suave); }
.perfil__enlace { font-size: 14px; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--curva); }
.perfil__enlace:hover { background-size: 0% 1px; }

/* precios: tarjetas arriba, después lo que cuesta esperar y el crédito */
.precios { grid-template-areas: "txt tarj" "txt esc" "txt cred"; }
.precios__txt h2 { text-wrap: balance; }
.tarjeta-precio { align-content: start; }
.tarjeta-precio__nota { margin-top: -4px; }
.contado { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 12px clamp(24px, 4vw, 56px); padding: 30px 32px; }
.contado__precio { display: grid; gap: 10px; }
.contado__txt { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.01em; color: #fff; max-width: 16em; padding-left: clamp(20px, 3vw, 40px); border-left: 1px solid #ffffff26; }
.escalera__ceja, .credito__titulo { font-family: var(--fuente-texto); line-height: 1.5; letter-spacing: .16em; }
.escalera__lista, .credito .lista-lineas { margin-top: 10px; max-width: 34em; }
.escalera__remate { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; line-height: 1.3; margin-top: 6px; }
.lista-lineas { border-top: 1px solid #1e2b2226; }
.lista-lineas li { padding: 11px 0; border-bottom: 1px solid #1e2b2226; font-size: 15px; }
.credito { grid-area: cred; display: grid; gap: 12px; justify-items: start; }
.credito__titulo { font-size: 11px; text-transform: uppercase; font-weight: 600; color: var(--tinta-suave); }
.credito__frase { font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: -.01em; max-width: 24em; }
.credito .lista-lineas { justify-self: stretch; }
.credito__nota { font-size: 15px; color: var(--tinta-suave); max-width: 34em; }
.credito__cta { display: grid; gap: 10px; justify-items: start; margin-top: 14px; }
.credito__micro { font-size: 13px; color: var(--tinta-suave); }

/* avance de obras: lo que dice el copy debajo de la línea */
.obras__cierre { margin-top: 10vh; display: grid; gap: 16px; max-width: 46em; padding-top: 28px; border-top: 1px solid #1e2b2226; }
.obras__cierre p { font-size: 15px; color: var(--tinta-suave); }
.obras__cierre .obras__fundadores { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; color: var(--tinta); letter-spacing: -.01em; }
.obras__cierre .obras__nota { font-size: 13px; }
.obras__nota b { font-weight: 600; color: var(--tinta); }

/* lo que puedes verificar (misma lista con check de la maqueta) */
.verificar { background: var(--claro); color: var(--tinta); padding: 16vh var(--margen); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.verificar__intro { display: grid; gap: 16px; position: sticky; top: calc(var(--cab) + 6vh); }
.verificar__titulo { font-size: clamp(28px, 2.6vw, 42px); text-wrap: balance; }
.verificar__bajada { color: var(--tinta-suave); font-size: 15px; max-width: 28em; }
.verificar .papel { grid-template-columns: 30px 1fr; }
.verificar .papel p { font-size: 16px; line-height: 1.5; color: var(--tinta-suave); }
.verificar .papel b { font-weight: 600; color: var(--tinta); }

/* tu parcela, en 4 pasos */
.pasos { background: var(--oscuro); color: var(--papel); padding: 18vh var(--margen); }
.pasos__titulo { font-size: clamp(30px, 3vw, 48px); margin-bottom: 9vh; }
.pasos__lista { display: grid; grid-template-columns: repeat(4, 1fr); }
.paso { position: relative; display: grid; gap: 18px; align-content: start; padding-right: 28px; }
.paso::before { content: ""; position: absolute; top: 20px; left: 40px; right: 0; height: 1px; background: #ffffff33; }
.paso:last-child::before { display: none; }
.paso__n { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600;
  border: 1.5px solid var(--dorado-claro); color: var(--papel); }
.paso p { font-size: 15px; line-height: 1.5; color: var(--papel-suave); max-width: 22em; }
.paso__titulo { display: block; margin-bottom: 6px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; line-height: 1.25; color: var(--papel); }

/* preguntas frecuentes (se abren sin JavaScript) */
.preguntas { background: var(--claro); color: var(--tinta); padding: 18vh var(--margen); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.preguntas__intro { display: grid; gap: 18px; justify-items: start; position: sticky; top: calc(var(--cab) + 6vh); }
.preguntas__titulo { font-size: clamp(30px, 3vw, 48px); }
.preguntas__lista { border-top: 1px solid #1e2b2226; }
.pregunta { border-bottom: 1px solid #1e2b2226; }
.pregunta summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; padding: 22px 0;
  font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; line-height: 1.35; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #1e2b2240;
  background: linear-gradient(var(--tinta), var(--tinta)) center / 11px 1.5px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 1.5px 11px no-repeat; }
.pregunta[open] summary::after { background: linear-gradient(var(--tinta), var(--tinta)) center / 11px 1.5px no-repeat; }
.pregunta p { padding: 0 48px 24px 0; font-size: 15px; line-height: 1.6; color: var(--tinta-suave); max-width: 46em; }

/* cierre: tres frases, dos botones y la frase final */
.cierre__txt { max-width: 760px; gap: 14px; }
.cierre__txt p { max-width: 36em; text-wrap: balance; }
.cierre__txt .cierre__pregunta { color: var(--papel); font-size: 16px; margin-top: 6px; }
.cierre__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.cierre__txt .cierre__frase { font-size: 12px; margin-top: 4px; }

/* pie: datos de contacto */
.pie__tel { white-space: nowrap; }

@media (max-width: 767px) {
  .hero__bajada { font-size: 15px; margin-top: 14px; }
  .valores__intro > h2 { grid-column: auto; }
  .dia__momentos li { grid-template-columns: 1fr; padding: 14px 0; }
  .equipo__chico { margin-top: 5vh; }
  .perfiles__fila { grid-template-columns: 1fr; gap: 36px; }
  .precios { grid-template-areas: "txt" "tarj" "esc" "cred"; }
  .precios__tarjetas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tarjeta-precio { padding: 18px; gap: 8px; }
  .tarjeta-precio b { font-size: 22px; }
  .contado { grid-template-columns: 1fr; padding: 24px; }
  .contado__txt { padding: 14px 0 0; border-left: 0; border-top: 1px solid #ffffff26; font-size: 19px; }
  .obras__cierre { margin-top: 6vh; }
  .verificar, .preguntas { grid-template-columns: 1fr; padding: 12vh var(--margen); }
  .verificar__intro, .preguntas__intro { position: static; }
  .pasos { padding: 12vh var(--margen); }
  .pasos__lista { grid-template-columns: 1fr; gap: 30px; }
  .paso { grid-template-columns: 40px 1fr; gap: 18px; padding: 0; }
  .paso::before { top: 40px; bottom: -30px; left: 20px; right: auto; width: 1px; height: auto; }
  .pregunta p { padding-right: 0; }
  .cierre__botones .btn { width: 100%; justify-content: center; }
  .pie__contacto { grid-column: 1 / -1; }
}

/* aviso legal arriba de la línea del logo */
.pie__aviso { margin-top: 12vh; margin-inline: auto; text-align: center; }
.pie__base { margin-top: 36px; }

/* pie más bajo en computadora (en el celular sigue el espacio para el botón flotante) */
@media (min-width: 768px) { .pie__cuerpo { padding-bottom: var(--margen); } }

/* cargador: la línea se llena y se levanta formando el volcán, el bosque y la casa */
.cargador__paisaje { width: min(360px, 72vw); height: auto; bottom: 14vh; background: none; overflow: visible; }
.cargador__riel, .cargador__linea { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cargador__riel { stroke: #1e2b221f; }
.cargador__linea { stroke: var(--dorado); }

/* formularios (Formspree): campo trampa contra spam y mensajes de estado */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formulario__aviso[data-estado="ok"] { color: var(--boton); font-weight: 600; }
.formulario__aviso[data-estado="error"] { color: #a33a2b; }
.pie__estado { font-size: 12px; margin-top: 10px; min-height: 1.4em; color: var(--papel-suave); }
.pie__estado[data-estado="ok"] { color: var(--dorado-claro); }
.pie__estado[data-estado="error"] { color: #f2b8a8; }

/* el plan gratis de Netlify pone su sello abajo a la derecha (64 px de alto): el botón de WhatsApp va encima */
.flotante { bottom: calc(var(--margen) + 64px); }
.flotante.oculta-mapa, body.menu-abierto .flotante { transform: translateY(calc(100% + var(--margen) + 104px)); }