/* ============================================================
   ATLAS CHILE — vista de sección: paisaje real + caminar + contenido
   ============================================================ */
#sections{ background:#000; }
.section-view{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .8s var(--ease);
  contain:layout style paint; }
.section-view.is-on{ opacity:1; visibility:visible; animation:fadeIn .7s var(--ease); }
/* las vistas ocultas (visibility:hidden) congelan TODAS sus animaciones:
   visibility no detiene timelines ni libera capas GPU */
.section-view:not(.is-on) *,
.section-view:not(.is-on) *::before,
.section-view:not(.is-on) *::after{ animation-play-state:paused !important; }

/* ---- paisaje de fondo (Ken Burns solo en la vista ACTIVA:
        7 escenas mayores que el viewport animando ocultas = ~70-80 MB
        de VRAM y ticking permanente) ---- */
.sv-scene{ position:absolute; inset:-6% -4%; background-position:center; background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.04) translateY(0); }
.section-view.is-on .sv-scene{ will-change:transform;
  animation:kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.04);} to{ transform:scale(1.13);} }
.section-view.arriving .sv-scene{ animation:none; transform:scale(1.32); }
.sv-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,6,12,.72) 0%,
    rgba(4,6,12,.22) 22%,
    rgba(4,6,12,.30) 50%,
    rgba(4,6,12,.88) 78%,
    rgba(4,6,12,.97) 100%); }
.sv-scrim.deep{ background:linear-gradient(180deg, rgba(4,6,12,.82) 0%, rgba(4,6,12,.60) 40%, rgba(4,6,12,.97) 100%); }

/* ---- columna scrolleable ---- */
.sv-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  scroll-behavior:smooth; }
.sv-scroll::-webkit-scrollbar{ width:0; }
.sv-inner{ min-height:100%; max-width:1180px; margin:0 auto;
  padding:0 clamp(20px,5vw,72px); }

/* HERO de sección — ocupa el primer viewport, nombre del lugar grande */
.sv-hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(120px,18vh,200px); }
.sv-place{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:12px; }
.sv-place::before{ content:''; width:40px; height:1px; background:var(--cyan); }
.sv-num{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; color:var(--gold);
  margin:1.1rem 0 .4rem; }
.sv-title{ font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.8rem,8vw,6.8rem); line-height:.92; letter-spacing:-.035em;
  text-wrap:balance; text-shadow:0 4px 40px rgba(0,0,0,.5); }
/* recibe foco programático (tabindex=-1) al navegar — sin anillo visual */
.sv-title:focus{ outline:none; }
.sv-title em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--gold-lt); }
.sv-lead{ font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.6; color:var(--paper);
  max-width:50ch; margin-top:1.4rem; text-wrap:pretty; text-shadow:0 2px 20px rgba(0,0,0,.6); }
.sv-cue{ margin-top:2.2rem; display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mut); }
.sv-cue .ln{ width:1px; height:30px; background:linear-gradient(var(--paper-mut),transparent);
  animation:cueDrop 1.8s var(--ease) infinite; }
@keyframes cueDrop{ 0%{ transform:scaleY(.3); transform-origin:top; opacity:.3;} 50%{ transform:scaleY(1); opacity:1;} 100%{ transform:scaleY(.3); transform-origin:bottom; opacity:.3;} }

/* CUERPO de sección — paneles sobre fondo oscurecido */
/* el paisaje se filtra a través: 40% de wash, no kill total */
.sv-body{ padding:clamp(40px,7vh,90px) 0 clamp(160px,22vh,220px);
  display:flex; flex-direction:column; gap:clamp(48px,7vh,88px);
  background:linear-gradient(180deg, rgba(4,6,12,0) 0px, rgba(4,6,12,.42) 52px); }
/* encabezados de bloque: sombra para leer sobre el paisaje filtrado */
.blk-head h3{ color:var(--paper); text-shadow:0 3px 28px rgba(0,0,0,.9), 0 1px 6px rgba(0,0,0,.95); }
.blk-head .mk{ text-shadow:0 1px 12px rgba(0,0,0,.9); }
.sv-lead{ color:var(--paper) !important; }
/* texto editorial — blanco puro con sombra fuerte */
.sv-body .prose p{ color:var(--paper); text-shadow:0 2px 18px rgba(0,0,0,.85); }
.sv-body .card p{ color:#d8d4cc; }
.sv-body .card h4{ color:var(--paper); }

/* entradas reveladas */
.rv{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--cinema), transform .8s var(--cinema); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; } .rv.d3{ transition-delay:.24s; }

/* encabezado de bloque */
.blk-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.8rem;
  border-bottom:1px solid var(--line); padding-bottom:1rem; flex-wrap:wrap; }
.blk-head .mk{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); }
.blk-head h3{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,3vw,2.2rem);
  letter-spacing:-.02em; }
.blk-head h3 em{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--gold-lt); }
.blk-head .aside{ margin-left:auto; font-family:var(--f-mono); font-size:.62rem; color:var(--paper-dim); letter-spacing:.1em; }

/* texto editorial */
.prose p{ font-size:1.02rem; line-height:1.72; color:var(--paper); max-width:62ch; margin-bottom:1rem; text-wrap:pretty; }
.prose p strong{ color:var(--paper); font-weight:600; }
.prose p em{ font-family:var(--f-serif); font-style:italic; color:var(--gold-lt); }

/* — tarjetas genéricas (glass) — */
.cards{ display:grid; gap:16px; }
.cards.c3{ grid-template-columns:repeat(3,1fr); }
.cards.c2{ grid-template-columns:repeat(2,1fr); }
.card{ background:var(--glass-2); backdrop-filter:blur(10px); border:1px solid var(--line);
  border-radius:6px; padding:24px; position:relative; overflow:hidden;
  contain:layout paint;
  transition:transform .5s var(--cinema), border-color .4s; }
.card::after{ content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--ac,var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--cinema); }
.card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--ac,var(--gold)) 45%,transparent); }
.card:hover::after{ transform:scaleX(1); }
.card .ic{ width:42px; height:42px; border-radius:8px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--ac,var(--gold)) 14%, transparent); color:var(--ac,var(--gold)); margin-bottom:14px; }
.card .ic svg, .card .ic i{ width:20px; height:20px; font-size:18px; }
.card h4{ font-family:var(--f-display); font-weight:600; font-size:1.18rem; letter-spacing:-.01em; margin-bottom:.5rem; }
.card p{ font-size:.92rem; line-height:1.6; color:var(--paper-mut); text-wrap:pretty; }
.card .idx{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; color:var(--paper-dim); margin-bottom:10px; }
.card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tag{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; padding:4px 9px;
  border:1px solid var(--line); border-radius:100px; color:var(--paper-mut); }

/* — métricas — */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.metric{ background:var(--ink); padding:22px 20px; }
.metric .v{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.6rem);
  letter-spacing:-.03em; color:var(--gold-lt); }
.metric .v s{ font-size:.5em; text-decoration:none; color:var(--gold); }
.metric .l{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper-dim); margin-top:6px; line-height:1.4; }

/* — listas con check — */
.feats{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-top:14px; }
.feats li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--paper-mut); line-height:1.5; }
.feats li svg{ width:15px; height:15px; color:var(--gold); flex-shrink:0; margin-top:2px; }

/* — precios — */
.price-amt{ display:flex; align-items:baseline; gap:6px; margin:14px 0 2px; }
.price-amt .from{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); }
.price-amt .num{ font-family:var(--f-display); font-weight:700; font-size:2.4rem; letter-spacing:-.03em; color:var(--paper); }
.price-amt .unit{ font-family:var(--f-mono); font-size:.8rem; color:var(--gold); }
.price-clp{ font-family:var(--f-mono); font-size:.66rem; color:var(--paper-dim); letter-spacing:.06em; }
.card.featured{ border-color:color-mix(in srgb,var(--gold) 40%,transparent);
  background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 8%, var(--glass-2)), var(--glass-2)); }
.card.featured::after{ transform:scaleX(1); }
.ribbon{ position:absolute; top:14px; right:-30px; transform:rotate(45deg);
  background:var(--gold); color:#1a1206; font-family:var(--f-mono); font-size:.54rem;
  letter-spacing:.14em; text-transform:uppercase; padding:4px 36px; font-weight:600; }

/* — perfil / sobre mí — */
.profile{ display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:start; }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-top:8px; }
.fact{ background:var(--glass-2); padding:16px 18px; }
.fact dt{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); }
.fact dd{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; margin-top:5px; }
.portrait{ position:relative; }
.portrait .portrait-img{
  display:block; width:100%; aspect-ratio:4/5; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); object-fit:cover; background:var(--glass-2);
}
.portrait .portrait-placeholder{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:700; font-size:4rem;
  color:var(--gold-lt); background:var(--glass-2);
}
.portrait .badge{ position:absolute; left:-14px; bottom:18px; background:var(--glass-2); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:6px; padding:11px 15px; display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; }
.portrait .badge .led{ width:8px; height:8px; border-radius:50%; background:#5fd38a; box-shadow:0 0 10px #5fd38a; animation:hudPulse 2s infinite; }

/* — contacto — */
.contact-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(24px,4vw,52px); align-items:start; }
.contact-links{ display:flex; flex-direction:column; gap:10px; }
/* sin backdrop-filter: var(--glass-2) ya es 80% opaco, el blur no se nota */
.clink{ display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line);
  border-radius:6px; background:var(--glass-2); transition:transform .4s var(--cinema), border-color .3s; pointer-events:auto; }
.clink:hover{ transform:translateX(6px); border-color:var(--gold); }
.clink .ic{ width:38px; height:38px; border-radius:8px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold); }
.clink .ic i{ font-size:17px; }
.clink .t{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); }
.clink .v{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }

.editable-note{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; color:var(--paper-dim);
  border:1px dashed var(--line); border-radius:4px; padding:8px 12px; display:inline-block; }

@media (max-width:920px){
  .cards.c3, .cards.c2{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr 1fr; }
  .profile{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-grid > div:last-child{ order:1; } /* info debajo del form en mobile */
}

/* ── sin-animaciones: cuando el usuario activó "no-anims" ─────────────── */
.no-anims .rv{
  opacity:1 !important; transform:none !important;
  transition-duration:0s !important; transition-delay:0s !important;
}
/* el botón "Sin animaciones" debe aliviar el costo REAL, no solo los reveals:
   kenburns, estrellas, vizs infinitas y coronas del sol.
   Las órbitas (.carrier/.planet) NO se congelan: son transform puro en el
   compositor (~14 elementos, costo mínimo) y planetas quietos se leen como
   sitio roto. La preferencia persiste en localStorage y no tiene UI para
   revertirse — congelar el corazón del sitio ahí es una trampa. */
.no-anims .sv-scene{ animation:none !important; transform:scale(1.08); }
.no-anims .star,
.no-anims .sun::before,
.no-anims .sun::after,
.no-anims .sun .core::before,
.no-anims .sun .corona,
.no-anims .planet-btn::after,
.no-anims .viz *,
.no-anims .viz *::before,
.no-anims .viz *::after{ animation-play-state:paused !important; }