/* ===========================================================================
   alejandrosepulveda.cl — hoja de estilos
   Sistema: marfil, blanco y gris muy suave, con azul petróleo discreto como
   único acento. Bordes levemente redondeados, sin sombras duras.
   =========================================================================== */

:root{
  --bg:         oklch(0.988 0.005 95);     /* marfil muy claro */
  --surface:    oklch(1 0 0);              /* blanco */
  --mist:       oklch(0.972 0.004 240);    /* gris muy suave */
  --fg:         oklch(0.27 0.020 250);     /* tinta principal */
  --fg-soft:    oklch(0.40 0.018 250);     /* texto de párrafo */
  --muted:      oklch(0.47 0.014 250);     /* datos y etiquetas */
  --line:       oklch(0.912 0.006 250);
  --line-soft:  oklch(0.945 0.005 250);
  --petrol:     oklch(0.44 0.055 218);     /* azul petróleo: acento único */
  --petrol-dk:  oklch(0.37 0.050 218);
  --petrol-lt:  oklch(0.945 0.018 218);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 6px;
  --mast: 72px;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1180px;
  --block: clamp(64px, 8.5vw, 132px);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--fg-soft);
  font-family:var(--body); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--display); color:var(--fg); margin:0; font-weight:500; line-height:1.1; letter-spacing:-.02em; text-wrap:balance }
p{ margin:0; text-wrap:pretty }
img{ max-width:100%; display:block }
a{ color:var(--petrol); text-underline-offset:3px }
a:hover{ color:var(--petrol-dk) }
:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px; border-radius:3px }
::selection{ background:var(--petrol-lt); color:var(--fg) }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
section{ padding-block:var(--block); scroll-margin-top:calc(var(--mast) + 8px); position:relative }
.alt{ background:var(--surface) }

.lbl{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 }
.eyebrow{ display:inline-flex; align-items:center; gap:10px }
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--petrol) }

.skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--fg); color:#fff; padding:12px 20px; border-radius:0 0 var(--r) 0; font:600 15px/1 var(--body) }
.skip:focus{ left:0 }

/* ------------------------------------------------------------- cabecera */
.masthead{ position:sticky; top:0; z-index:60; background:var(--bg); background:oklch(0.988 0.005 95 / .9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft) }
.mast-in{ max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter); height:var(--mast); display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; min-height:44px }
.brand img{ height:34px; width:auto }
.brand span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
@media (max-width:1400px){ .brand span{ display:none } }
.nav{ display:none; align-items:center; gap:clamp(11px,1.35vw,18px) }
@media (min-width:1320px){ .nav{ display:flex } }
.nav a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-soft); text-decoration:none; white-space:nowrap }
.nav a:hover{ color:var(--petrol) }
.nav a.on{ color:var(--petrol) }
.mast-actions{ display:flex; align-items:center; gap:12px }
.pill{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 24px;
  background:var(--petrol); color:#fff; text-decoration:none; border-radius:999px;
  font-family:var(--body); font-weight:600; font-size:14.5px;
}
.pill:hover{ background:var(--petrol-dk); color:#fff }
.burger{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:1px solid var(--line); border-radius:var(--r); cursor:pointer; color:var(--fg) }
@media (min-width:1320px){ .burger{ display:none } }
.burger span{ display:block; width:18px; height:1.5px; background:currentColor; position:relative }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:currentColor }
.burger span::before{ top:-6px } .burger span::after{ top:6px }

.drawer{ display:none; border-bottom:1px solid var(--line); background:var(--bg) }
.drawer.open{ display:block }
.drawer ul{ list-style:none; margin:0; padding:10px var(--gutter) 24px; display:grid; gap:2px }
.drawer a{ display:flex; align-items:center; min-height:48px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-soft); text-decoration:none; border-bottom:1px solid var(--line-soft) }
.drawer a:hover{ color:var(--petrol) }
@media (min-width:1320px){ .drawer{ display:none !important } }

/* ---------------------------------------------------------------- hero */
.hero{ padding:0; position:relative; overflow:hidden }
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 44% }
.hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, oklch(0.988 0.005 95 / .97) 0%, oklch(0.988 0.005 95 / .93) 42%, oklch(0.988 0.005 95 / .62) 70%, oklch(0.988 0.005 95 / .45) 100%) }
@media (max-width:900px){ .hero-bg::after{ background:linear-gradient(180deg, oklch(0.988 0.005 95 / .95) 0%, oklch(0.988 0.005 95 / .88) 55%, oklch(0.988 0.005 95 / .97) 100%) } }
.hero-in{ position:relative; z-index:1; padding-block:clamp(48px,6.5vw,104px) clamp(40px,5vw,72px) }
.hero-grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(30px,4.6vw,72px); align-items:center }
.hero h1{ font-size:clamp(2.6rem,6vw,4.5rem); margin-top:18px; letter-spacing:-.03em }
.hero .role{ margin-top:16px; font-family:var(--mono); font-size:clamp(11px,1.15vw,12.5px); letter-spacing:.12em; text-transform:uppercase; color:var(--petrol) }
.hero .claim{ margin-top:26px; font-size:clamp(1.12rem,1.7vw,1.34rem); line-height:1.6; color:var(--fg); max-width:42ch }
.hero .second{ margin-top:18px; font-size:clamp(1rem,1.35vw,1.08rem); line-height:1.72; max-width:48ch }
.actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:34px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px;
  background:var(--petrol); color:#fff; text-decoration:none; border-radius:999px; font-weight:600; font-size:15.5px;
}
.btn:hover{ background:var(--petrol-dk); color:#fff }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px;
  border:1px solid var(--line); border-radius:999px; color:var(--fg); text-decoration:none; font-weight:600; font-size:15.5px; background:var(--surface);
}
.btn-ghost:hover{ border-color:var(--petrol); color:var(--petrol) }
.hero-note{ margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--muted) }

.shot{ margin:0 }
.shot img{ width:100%; border-radius:var(--r) }
.hero .shot img{ height:auto; box-shadow:0 26px 60px oklch(0.27 0.02 250 / .14) }

/* ------------------------------------------------------------ titulares */
.head{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,64px); align-items:end }
.head h2{ font-size:clamp(1.85rem,3.6vw,2.9rem) }
.head .lead{ font-size:clamp(1.02rem,1.42vw,1.13rem); line-height:1.74 }
.h3{ font-family:var(--display); font-size:clamp(1.3rem,2.1vw,1.7rem); color:var(--fg); font-weight:500; margin:0 }

.prose p + p{ margin-top:18px }
.prose p{ font-size:clamp(1rem,1.36vw,1.09rem); line-height:1.8 }

/* -------------------------------------------------------------- frases */
.quote{
  margin-top:clamp(30px,3.6vw,46px); padding:clamp(24px,3vw,38px) clamp(24px,3.2vw,44px);
  background:var(--petrol-lt); border-radius:var(--r);
  font-family:var(--display); font-size:clamp(1.2rem,2.1vw,1.68rem); line-height:1.42; color:var(--fg);
}
.quote--line{ background:none; border-left:2px solid var(--petrol); border-radius:0; padding:6px 0 6px clamp(18px,2.4vw,30px) }
.statement{ text-align:center }
.statement p{ font-family:var(--display); font-size:clamp(1.6rem,4.3vw,3.3rem); line-height:1.16; letter-spacing:-.02em; color:var(--fg); max-width:26ch; margin:0 auto }
.statement em{ font-style:normal; color:var(--petrol) }

/* ------------------------------------------------------------ listados */
.listgrid{ list-style:none; margin:clamp(26px,3.2vw,42px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:2px 34px }
.listgrid.two{ grid-template-columns:repeat(2,1fr) }
.listgrid li{ position:relative; padding:11px 0 11px 18px; font-size:15.5px; line-height:1.55; border-bottom:1px solid var(--line-soft) }
.listgrid li::before{ content:""; position:absolute; left:0; top:1.44em; width:7px; height:1.5px; background:var(--petrol) }

/* --------------------------------------------------------------- split */
.split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4.4vw,68px); align-items:center }
.split.rev{ grid-template-columns:1.1fr .9fr }
.split .shot img{ height:auto }

/* -------------------------------------------------------------- banda */
.band{ position:relative; overflow:hidden; padding-block:clamp(72px,10vw,150px); text-align:center }
.band img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45% }
.band .veil{ position:absolute; inset:0; background:linear-gradient(180deg, oklch(0.988 0.005 95 / .90) 0%, oklch(0.988 0.005 95 / .82) 50%, oklch(0.988 0.005 95 / .93) 100%) }
.band .wrap{ position:relative; z-index:1 }
.band .lbl{ margin-bottom:20px }
.band h2{ font-family:var(--display); font-size:clamp(1.7rem,4.6vw,3.4rem); line-height:1.14; letter-spacing:-.02em; max-width:24ch; margin:0 auto; color:var(--fg); font-weight:500 }
.band p{ margin:24px auto 0; max-width:58ch; font-size:clamp(1rem,1.4vw,1.1rem) }

/* ------------------------------------------------------------ tarjetas */
.grid4{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,1.8vw,24px); margin-top:clamp(30px,3.6vw,50px) }
.block{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3vw,38px) }
.block h3{ font-size:clamp(1.2rem,1.85vw,1.5rem) }
.block p{ margin-top:14px; font-size:15.5px }
.block .items{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:12px; line-height:1.9; color:var(--muted); letter-spacing:.01em }

/* -------------------------------------------------------------- pasos */
.steps{ list-style:none; margin:clamp(30px,3.6vw,50px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,34px) }
.steps li{ border-top:1px solid var(--line); padding-top:22px }
.steps .n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--petrol) }
.steps h3{ margin-top:14px; font-family:var(--body); font-size:16.5px; font-weight:600; letter-spacing:0 }
.steps p{ margin-top:9px; font-size:15px }

/* -------------------------------------------------------------- línea */
.timeline{ list-style:none; margin:clamp(30px,3.6vw,50px) 0 0; padding:0 }
.timeline li{ display:grid; grid-template-columns:190px 1fr; gap:clamp(20px,3vw,50px); padding:clamp(22px,2.6vw,32px) 0; border-top:1px solid var(--line) }
.timeline li:last-child{ border-bottom:1px solid var(--line) }
.timeline .meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); line-height:1.7 }
.timeline .meta strong{ display:block; color:var(--petrol); font-weight:500 }
.timeline h3{ font-size:clamp(1.18rem,1.9vw,1.55rem) }
.timeline p{ margin-top:10px; font-size:15.5px; max-width:70ch }

/* --------------------------------------------------------- dos bloques */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); margin-top:clamp(28px,3.4vw,44px) }
.duo article{ padding:clamp(26px,3vw,38px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r) }
.duo h3{ font-size:clamp(1.25rem,2vw,1.6rem) }
.duo p{ margin-top:16px; font-size:15.5px }
.duo p + p{ margin-top:14px }

/* ------------------------------------------------------------ contacto */
.contact{ position:relative; overflow:hidden; padding-block:clamp(72px,9vw,138px); text-align:center }
.contact img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 52% }
.contact .veil{ position:absolute; inset:0; background:linear-gradient(180deg, oklch(0.988 0.005 95 / .95) 0%, oklch(0.988 0.005 95 / .88) 45%, oklch(0.988 0.005 95 / .95) 100%) }
.contact .wrap{ position:relative; z-index:1 }
.contact h2{ font-size:clamp(2rem,5vw,3.6rem); margin-top:16px }
.contact .lede{ margin:22px auto 0; max-width:52ch; font-size:clamp(1.08rem,1.7vw,1.32rem); color:var(--fg) }
.contact .body{ margin:18px auto 0; max-width:56ch }
.contact .body strong{ color:var(--fg) }
.contact .actions{ justify-content:center }
.contact .who{ margin-top:38px; padding-top:26px; border-top:1px solid var(--line); display:inline-block }
.contact .who p{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted); line-height:2 }
.contact .who b{ color:var(--fg); font-weight:500 }

/* ------------------------------------------------------------- footer */
.foot{ background:var(--surface); border-top:1px solid var(--line); padding-block:44px }
.foot-in{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:grid; gap:26px }
.foot-top{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between }
.foot img{ height:32px; width:auto }
.foot-nav{ display:flex; flex-wrap:wrap; gap:6px 22px }
.foot-nav a{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-soft); text-decoration:none; display:inline-flex; align-items:center; min-height:44px }
.foot-nav a:hover{ color:var(--petrol) }
.foot-base{ border-top:1px solid var(--line-soft); padding-top:22px; display:grid; gap:12px }
.foot-base p{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted); line-height:1.9 }
.foot-base b{ color:var(--fg); font-weight:500 }
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 24px }
.foot-links a{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-soft); text-decoration:none; display:inline-flex; align-items:center; min-height:44px }
.foot-links a:hover{ color:var(--petrol) }

/* ------------------------------------------- Santiago recurrente ------ */
/* Textura muy tenue del skyline: acompaña sin competir con la lectura. */
.soft::before{ content:""; position:absolute; inset:0; z-index:0; background-image:url("../img/santiago.jpg"); background-size:cover; background-position:50% 42%; opacity:.055; filter:blur(1.5px) }
.soft > .wrap{ position:relative; z-index:1 }

/* Franja parcial del skyline, fundida con el fondo en ambos extremos. */
.skyline{ position:relative; height:clamp(96px,12vw,158px); overflow:hidden; background:var(--bg) }
.skyline img{ width:100%; height:100%; object-fit:cover; object-position:50% 36%; opacity:.55 }
.skyline::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--bg) 0%, oklch(0.988 0.005 95 / .18) 42%, oklch(0.988 0.005 95 / .18) 58%, var(--bg) 100%) }

/* ------------------------------------------------------------- motion */
.js [data-reveal]{ opacity:0; transform:translateY(18px) }
.js [data-reveal].in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1) }
@keyframes soft{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
.js .hero [data-rise]{ animation:soft .9s cubic-bezier(.2,.7,.3,1) both }
.js .hero [data-rise="2"]{ animation-delay:.08s }
.js .hero [data-rise="3"]{ animation-delay:.16s }
.js .hero [data-rise="4"]{ animation-delay:.24s }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js [data-reveal],.js [data-reveal].in{ opacity:1; transform:none; transition:none }
  .js .hero [data-rise]{ animation:none }
}

/* --------------------------------------------------------- responsive */
@media (max-width:1023px){
  .hero-grid,.head,.split,.split.rev,.duo{ grid-template-columns:1fr }
  .hero-grid{ gap:36px }
  .head{ gap:20px; align-items:start }
  .listgrid{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .grid4{ grid-template-columns:1fr }
  .hero .shot{ max-width:360px; margin-inline:auto }
  .split .shot{ max-width:330px; margin-inline:auto }
}
@media (max-width:640px){
  body{ font-size:16.5px }
  .listgrid,.listgrid.two{ grid-template-columns:1fr }
  .steps{ grid-template-columns:1fr }
  .timeline li{ grid-template-columns:1fr; gap:8px }
  .actions{ gap:12px }
  .btn,.btn-ghost{ width:100% }
}