/* Landing de Brisa Lachermeier
   Orden: tokens -> utilidades -> cabecera y hero -> secciones -> responsive.
   Todos los colores salen de las variables de :root, asi que para cambiar
   la paleta alcanza con tocar ese primer bloque. */

:root{
  --navy:#10233F; --navy-deep:#0B1A30; --teal:#1F7A8C; --teal-dark:#186271;
  --sky:#8FD3E0; --ink:#1B2530; --mute:#5B6673; --line:#DCE3E9;
  --wash:#F1F5F8; --grey:#A9B4BF;
  --measure:38em;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{
  font-family:system-ui,"Segoe UI",Inter,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.contact :focus-visible,.bar :focus-visible{outline-color:var(--sky)}

/* Accesibilidad: contenido solo para lectores de pantalla.
   Va sobre un <div>, nunca sobre una <table>: una tabla ignora width:1px
   por su propio algoritmo de layout y termina ensanchando el documento
   entero, que era lo que provocaba scroll horizontal en el celular. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--sky);color:var(--navy);padding:10px 18px;font-weight:700;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* ---------- Marcador de contenido pendiente ----------
   Borrar la clase .todo (y este bloque) cuando esté todo completo.
   Está pensado para que sea imposible publicar un dato sin verificar. */
.todo{
  background:#FFF3CD;color:#6B4E00;border-bottom:2px solid #E0A800;
  padding:0 4px;border-radius:2px;font-weight:600;
}
.contact .todo,.hero .todo{background:rgba(255,220,120,.22);color:#FFE6A3;border-bottom-color:#FFC94D}

/* ---------- Cabecera y hero ---------- */
header.top{background:var(--navy);color:#fff}
.bar{
  position:sticky;top:0;z-index:20;background:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-top:16px;padding-bottom:16px;font-weight:600;
}
.bar .who{font-size:1rem;letter-spacing:-.01em}
.bar nav{display:flex;align-items:center;gap:22px;font-size:.92rem}
.bar nav a{text-decoration:none;color:#C8DAEA;padding:4px 0;border-bottom:2px solid transparent}
.bar nav a:hover{color:#fff;border-bottom-color:var(--sky)}
.bar a.cv{
  border:1.5px solid var(--sky);color:var(--sky);padding:7px 16px;border-radius:999px;
  text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap;
}
.bar a.cv:hover{background:var(--sky);color:var(--navy);border-bottom-color:var(--sky)}

.hero{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:center;padding-top:44px;padding-bottom:68px}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.4rem);line-height:1.04;letter-spacing:-.022em;font-weight:800}
.hero h1 .tagline{
  display:block;margin-top:14px;color:var(--sky);
  font-size:clamp(1rem,2.2vw,1.18rem);font-weight:600;letter-spacing:0;line-height:1.35;
}
.pitch{margin-top:20px;max-width:33em;color:#D7E3EF;font-size:1.06rem}
.actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:12px 24px;border-radius:8px;font-weight:700;text-decoration:none}
.btn.main{background:var(--sky);color:var(--navy)}
.btn.main:hover{background:#fff}
.btn.alt{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn.alt:hover{background:rgba(255,255,255,.12)}
.avail{margin-top:22px;color:#9FB3C8;font-size:.93rem}
.photo{
  width:260px;height:260px;border-radius:50%;object-fit:cover;
  border:5px solid #fff;box-shadow:0 0 0 8px rgba(143,211,224,.25);
}
.stripe{height:6px;background:var(--teal)}

/* ---------- Secciones ---------- */
section{padding:76px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
h2{font-size:clamp(1.55rem,3.4vw,2.05rem);letter-spacing:-.015em;line-height:1.18;color:var(--navy);font-weight:800}
.lead{margin-top:14px;max-width:var(--measure);color:var(--mute)}
p{max-width:var(--measure)}

/* ---------- Caso: narrativa por etapas ---------- */
.case{margin-top:38px;position:relative;padding-left:32px}
.case::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line);
}
.stage{position:relative;padding-bottom:34px}
.stage:last-child{padding-bottom:0}
.stage::before{
  content:"";position:absolute;left:-32px;top:7px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:3px solid var(--teal);
}
.stage h3{color:var(--navy);font-size:1.06rem;font-weight:700;letter-spacing:-.005em}
.stage p{margin-top:7px}
.stage ul{margin-top:9px;padding-left:20px;max-width:var(--measure)}
.stage li{margin-top:5px}
.stage li::marker{color:var(--teal)}

/* ---------- Gráfico antes/después ---------- */
.legend{display:flex;gap:20px;margin-top:20px;font-size:.88rem;color:var(--mute)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.metric{margin-top:22px}
.mh{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;color:var(--navy);margin-bottom:8px;gap:16px}
.mh span{color:var(--teal);font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums}
.row{display:grid;grid-template-columns:1fr 90px;align-items:center;gap:12px;margin-top:6px}
.track{height:16px;background:var(--wash);border-radius:4px;overflow:hidden}
/* Las barras se ven llenas por defecto: si el JS falla o se entra directo
   con un ancla, el dato sigue estando. La animación es un agregado. */
.bar-fill{height:100%;width:var(--w);border-radius:4px;transform-origin:left}
#chart.armed .bar-fill{transform:scaleX(0)}
#chart.armed.in .bar-fill{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.before{background:var(--grey)}
.after{background:var(--teal)}
.num{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.scale-note{margin-top:20px;font-size:.9rem;color:var(--mute);max-width:var(--measure)}
.source{margin-top:10px;font-size:.82rem;color:#7C8792;max-width:var(--measure)}
/* Tabla de canales (hoy comentada en el HTML, lista para cuando haya export real) */
.chan{width:100%;border-collapse:collapse;margin-top:22px;font-size:.93rem;max-width:var(--measure)}
.chan caption{text-align:left;font-weight:700;color:var(--navy);padding-bottom:9px}
.chan th,.chan td{text-align:right;padding:8px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.chan thead th{color:var(--mute);font-weight:600;font-size:.85rem}
.chan th[scope=row]{text-align:left;font-weight:600;color:var(--ink)}
.chan tbody tr:first-child td:last-child{color:var(--teal);font-weight:700}

/* ---------- Proyectos ---------- */
.project{margin-top:30px;padding-left:22px;border-left:4px solid var(--teal);max-width:44em}
.project.pending{border-left-color:var(--grey)}
.project h3{color:var(--navy);font-size:1.15rem}
.project .tag{color:var(--teal);font-weight:600;font-size:.92rem;margin-top:2px}
.project.pending .tag{color:var(--mute)}
.project p{margin-top:10px}
.project ul{margin-top:10px;padding-left:20px;max-width:var(--measure)}
.project li{margin-top:5px}
.project li::marker{color:var(--teal)}

/* ---------- Capacidades ---------- */
dl{margin-top:26px;border-top:1px solid var(--line)}
.dr{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
dt{font-weight:700;color:var(--navy)}
dd{color:#34404D}
.edu{margin-top:26px;max-width:var(--measure)}
.edu strong{color:var(--navy)}
.edu p+p{margin-top:8px;color:var(--mute)}

/* ---------- Contacto ---------- */
.contact{background:var(--navy);color:#fff}
.contact h2{color:#fff}
.contact .lead{color:#C9D6E4}
.links{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.loc{margin-top:26px;color:#9FB3C8;font-size:.94rem}
footer{background:var(--navy-deep);color:#8DA2B8;text-align:center;padding:20px;font-size:.85rem}

@media(max-width:820px){
  .bar nav{display:none}
}
@media(max-width:760px){
  .hero{grid-template-columns:1fr;gap:28px;padding-bottom:48px}
  /* El order tiene que ir en <picture>, que es el hijo del grid; sobre el
     <img> no hace nada porque el img ya no es hijo directo. */
  .hero picture{order:-1;justify-self:start}
  .photo{width:170px;height:170px}
  .dr{grid-template-columns:1fr;gap:4px}
  section{padding:54px 0}
  .mh{flex-direction:column;align-items:flex-start;gap:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* La animación no se activa desde JS en este caso, así que no hace falta
     anular nada más: las barras ya se dibujan llenas. */
}
@media print{
  .bar,.actions,.links,.skip{display:none}
  body{color:#000}
  section{padding:18px 0;break-inside:avoid}
  .todo{background:none;border-bottom:1px solid #000}
}