:root{
  --abismo:#0B1E3D; --marino:#173770; --marino2:#1F4A8F; --marinocl:#5A7FB8;
  --cota:#FB8635; --cotad:#C25410; --cotacl:#FFB477;
  --hielo:#EEF2F8; --crema:#FBFAF8; --papel:#FFFFFF;
  --tinta:#10203A; --acero:#4E6180; --linea:#DCE3EE;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:'Encode Sans',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
p{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
::selection{background:var(--cota); color:var(--abismo)}
:focus-visible{outline:3px solid var(--cota); outline-offset:3px; border-radius:2px}

/* ── Superficies ─────────────────────────────────────────── */
.fondo-abismo{background:var(--abismo); color:#fff}
.fondo-marino{background:var(--marino); color:#fff}
.fondo-hielo{background:var(--hielo)}
.fondo-crema{background:var(--crema)}

/* Curvas de nivel: el motivo gráfico del sitio (altimetría) */
.cotas{position:relative; isolation:isolate}
.cotas::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(ellipse 120% 80% at 82% 18%, rgba(255,255,255,.055) 0 38%, transparent 39%),
    radial-gradient(ellipse 96% 64% at 82% 18%, rgba(255,255,255,.05) 0 38%, transparent 39%),
    radial-gradient(ellipse 72% 48% at 82% 18%, rgba(251,134,53,.10) 0 38%, transparent 39%),
    radial-gradient(ellipse 48% 32% at 82% 18%, rgba(251,134,53,.13) 0 38%, transparent 39%),
    radial-gradient(ellipse 26% 18% at 82% 18%, rgba(251,134,53,.17) 0 40%, transparent 41%);
}
.cotas-b::before{background-position:center; transform:scaleX(-1)}

/* Líneas de altímetro para bandas oscuras */
.altimetro{
  background-image:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.08) 0 1px, transparent 1px 46px);
}

/* ── Tipografía utilitaria ──────────────────────────────── */
.eyebrow{
  font-family:'Encode Sans',sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{content:''; width:26px; height:2px; background:currentColor; flex:none}
.medida{max-width:66ch}
.num{font-family:'Sofia Sans Condensed',sans-serif; font-weight:800; font-variant-numeric:tabular-nums;
  line-height:.9; letter-spacing:-.01em}

/* ── Botones ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:'Encode Sans',sans-serif; font-weight:700; font-size:.92rem; line-height:1;
  padding:.95rem 1.5rem; border:2px solid transparent; border-radius:2px; cursor:pointer;
  text-decoration:none; transition:background-color .18s ease, color .18s ease,
    border-color .18s ease, transform .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-cota{background:var(--cota); color:var(--abismo); border-color:var(--cota)}
.btn-cota:hover{background:var(--cotacl); border-color:var(--cotacl)}
.btn-marino{background:var(--marino); color:#fff; border-color:var(--marino)}
.btn-marino:hover{background:var(--marino2); border-color:var(--marino2)}
.btn-linea{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-linea:hover{border-color:var(--cota); color:var(--cota)}
.btn-linea-osc{background:transparent; color:var(--marino); border-color:var(--linea)}
.btn-linea-osc:hover{border-color:var(--marino); background:var(--hielo)}

/* ── Tarjetas ───────────────────────────────────────────── */
.card{background:#fff; border:1px solid var(--linea); border-radius:2px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.card:hover{border-color:var(--marinocl); transform:translateY(-3px);
  box-shadow:0 14px 34px -22px rgba(11,30,61,.5)}
.card-osc{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13); border-radius:2px;
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease}
.card-osc:hover{border-color:var(--cota); background:rgba(255,255,255,.07); transform:translateY(-3px)}

/* ── La escala de altitud (pieza insignia) ──────────────── */
.escala{position:relative; padding-left:3.6rem}
.escala::before{content:''; position:absolute; left:1.05rem; top:.4rem; bottom:.4rem; width:2px;
  background:linear-gradient(to bottom,var(--cota) 0%,var(--cota) 34%,rgba(255,255,255,.28) 34%,rgba(255,255,255,.28) 100%)}
.escala-item{position:relative; padding-bottom:2.4rem}
.escala-item:last-child{padding-bottom:0}
.escala-item::before{
  content:''; position:absolute; left:-2.55rem; top:.55rem; width:12px; height:12px;
  border-radius:50%; background:var(--abismo); border:2px solid rgba(255,255,255,.45);
}
.escala-item.hito::before{background:var(--cota); border-color:var(--cota);
  box-shadow:0 0 0 5px rgba(251,134,53,.22)}
.escala-cota{font-family:'Sofia Sans Condensed',sans-serif; font-weight:800; font-size:1.6rem;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--cotacl)}
.escala-item.hito .escala-cota{color:var(--cota)}

/* ── Franja de credibilidad ─────────────────────────────── */
.tira{display:grid; gap:1px; background:var(--linea); border-block:1px solid var(--linea)}
@media(min-width:720px){.tira{grid-template-columns:repeat(4,1fr)}}
.tira>div{background:var(--crema); padding:1.5rem 1.35rem}

/* ── Formularios ────────────────────────────────────────── */
.etq{display:block; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--acero); margin-bottom:.4rem}
.campo{
  width:100%; padding:.8rem .9rem; font-family:inherit; font-size:.95rem; color:var(--tinta);
  background:#fff; border:1.5px solid var(--linea); border-radius:2px; transition:border-color .18s ease;
}
.campo:focus{border-color:var(--marino2); outline:none; box-shadow:0 0 0 3px rgba(31,74,143,.14)}
.campo::placeholder{color:#93A2BA}
select.campo{appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234E6180' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.4rem}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.84rem; line-height:1.5;
  color:var(--acero); cursor:pointer}
.consent input{margin-top:.28rem; width:17px; height:17px; flex:none; accent-color:var(--marino2); cursor:pointer}
.consent a{color:var(--marino2); text-decoration:underline; text-underline-offset:2px}

/* ── FAQ ────────────────────────────────────────────────── */
.faq{border-bottom:1px solid var(--linea)}
.faq summary{
  display:flex; justify-content:space-between; align-items:flex-start; gap:1.2rem; cursor:pointer;
  padding:1.15rem 0; font-weight:600; font-size:1rem; color:var(--tinta); list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-family:'Sofia Sans Condensed',sans-serif; font-size:1.7rem;
  line-height:.8; color:var(--cotad); flex:none; transition:transform .2s ease}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--marino2)}
.faq-a{padding:0 0 1.35rem; color:var(--acero); font-size:.94rem; line-height:1.72; max-width:70ch}
.faq-osc{border-color:rgba(255,255,255,.14)}
.faq-osc summary{color:#fff}
.faq-osc summary::after{color:var(--cota)}
.faq-osc summary:hover{color:var(--cota)}
.faq-osc .faq-a{color:rgba(255,255,255,.72)}

/* ── Nav ────────────────────────────────────────────────── */
.nav-link{font-size:.87rem; font-weight:600; color:rgba(255,255,255,.82); text-decoration:none;
  padding:.4rem 0; position:relative; transition:color .18s ease; white-space:nowrap}
.nav-link:hover{color:#fff}
.nav-link.activo{color:var(--cota)}
.nav-link.activo::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--cota)}
#cabecera{transition:background-color .25s ease, box-shadow .25s ease}
#cabecera.pegada{background:var(--abismo); box-shadow:0 8px 30px -14px rgba(0,0,0,.65)}
#mmenu{display:none}
#mmenu.abierto{display:block}

/* ── CTA fijo en móvil ──────────────────────────────────── */
#ctafijo{position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-template-columns:1fr 1fr}
#ctafijo a{display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem;
  font-weight:700; font-size:.88rem; text-decoration:none}
@media(min-width:768px){#ctafijo{display:none}}

/* ── Aviso / nota ───────────────────────────────────────── */
.nota{border-left:3px solid var(--cota); background:#FFF6EE; padding:.9rem 1.1rem;
  font-size:.86rem; line-height:1.6; color:#6B4318}
.nota-osc{border-left:3px solid var(--cota); background:rgba(251,134,53,.10); padding:.9rem 1.1rem;
  font-size:.86rem; line-height:1.6; color:rgba(255,255,255,.82)}

/* ── Chip / etiqueta ────────────────────────────────────── */
.chip{display:inline-flex; align-items:center; gap:.4rem; font-size:.73rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.34rem .7rem; border-radius:2px}
.chip-cota{background:rgba(251,134,53,.15); color:var(--cotad)}
.chip-cota-osc{background:rgba(251,134,53,.18); color:var(--cotacl)}
.chip-marino{background:var(--hielo); color:var(--marino)}

/* ── Fachada de mapa (Ley 21.719: nada de iframes al cargar) ── */
.mapa-fachada{position:relative; background:var(--hielo); border:1px solid var(--linea);
  display:grid; place-items:center; text-align:center; padding:2.6rem 1.5rem; min-height:230px}

/* ── Animaciones (respetan prefers-reduced-motion) ──────── */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .62s ease, transform .62s ease}
.reveal.visible{opacity:1; transform:none}
.stagger>*{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
.stagger.visible>*{opacity:1; transform:none}
.stagger.visible>*:nth-child(1){transition-delay:.04s}
.stagger.visible>*:nth-child(2){transition-delay:.10s}
.stagger.visible>*:nth-child(3){transition-delay:.16s}
.stagger.visible>*:nth-child(4){transition-delay:.22s}
.stagger.visible>*:nth-child(5){transition-delay:.28s}
.stagger.visible>*:nth-child(6){transition-delay:.34s}
.stagger.visible>*:nth-child(7){transition-delay:.40s}
.stagger.visible>*:nth-child(8){transition-delay:.46s}
[data-blur]{opacity:0}
[data-blur] .palabra{display:inline-block; opacity:0; filter:blur(9px); transform:translateY(12px);
  transition:opacity .58s ease, filter .58s ease, transform .58s ease}
[data-blur].lista{opacity:1}
[data-blur].lista .palabra{opacity:1; filter:blur(0); transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .reveal,.stagger>*{opacity:1!important; transform:none!important}
  [data-blur]{opacity:1!important}
  [data-blur] .palabra{opacity:1!important; filter:none!important; transform:none!important}
  .btn:hover,.card:hover,.card-osc:hover{transform:none!important}
}