/* ==========================================================
   Flujo Simple — hoja única del sitio
   Identidad: nodos y conexiones. Lo tecnológico entra por el
   diagrama, no por la decoración. Sin JavaScript ni imágenes
   de relleno: la guía se abre en un celular con mala señal.
   ========================================================== */

:root{
  --papel:#FCFBF9;      /* lienzo */
  --tarjeta:#FFFFFF;
  --tinta:#171A1F;      /* texto principal */
  --suave:#6C7178;      /* secundario */
  --linea:#E4E2DD;
  --acento:#4338CA;     /* índigo, uso medido */
  --acento-linea:#C7C3F0;
  --acento-piso:#EEEDFB;
  --aviso-piso:#FDF6E3;
  --aviso-linea:#EBD9A8;
  --aviso-tinta:#8A6516;
  --max:1080px;
  --lectura:68ch;
  --r:14px;
  --rp:999px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 44px}

/* ---------- Encabezado ---------- */
header{border-bottom:1px solid var(--linea);padding:20px 0}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.03em}
nav{display:flex;gap:26px}
nav a{font-size:14px;font-weight:600;color:var(--suave)}
nav a:hover,nav a.actual{color:var(--tinta)}

/* ---------- Portada ---------- */
.hero{padding:56px 0 22px}
.kick{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acento);background:var(--acento-piso);padding:7px 13px;border-radius:var(--rp);margin:0 0 20px;
}
h1{font-size:clamp(34px,4.6vw,50px);font-weight:800;line-height:1.06;letter-spacing:-.035em;margin:0 0 18px;max-width:17ch}
.lede{font-size:18.5px;color:var(--suave);max-width:54ch;margin:0 0 34px}

/* ---------- Diagrama explicativo ---------- */
.diagrama{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r);padding:26px 28px;margin:0 0 14px}
.diag-tit{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);margin:0 0 18px}
.diag-v{display:none}
.diag-pie{font-size:14.5px;color:var(--suave);margin:16px 0 0}

/* ---------- Índice de guías ---------- */
.listado{padding:44px 0 60px}
h2{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--suave);margin:0 0 20px}
.guia{
  display:grid;grid-template-columns:64px 1fr 26px;gap:20px;align-items:center;
  padding:20px;border:1px solid var(--linea);border-radius:var(--r);margin-bottom:10px;background:var(--tarjeta);
}
.guia.destacada{border-color:var(--acento-linea);background:var(--acento-piso)}
.guia h3{font-size:18.5px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;line-height:1.3}
.guia p{font-size:14.5px;color:var(--suave);margin:0}
.guia.pendiente h3{color:var(--suave);font-weight:600}
.tag{
  display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;padding:4px 10px;border-radius:var(--rp);background:var(--acento);color:#fff;
}
.tag.espera{background:transparent;color:var(--suave);border:1px solid var(--linea)}
.fl{font-size:18px;color:var(--linea)}
.guia.destacada .fl{color:var(--acento)}

/* ---------- Artículo ---------- */
.articulo{max-width:var(--lectura);padding-bottom:20px}
.ficha{
  font-size:13.5px;color:var(--suave);margin:0 0 30px;padding-bottom:18px;border-bottom:1px solid var(--linea);
}
.ficha span+span::before{content:"·";margin:0 10px;color:var(--acento-linea)}
.articulo p{margin:0 0 22px}
.articulo h2{font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--tinta);
  text-transform:none;margin:48px 0 16px}
.articulo h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:34px 0 10px}
.articulo ul,.articulo ol{margin:0 0 22px;padding-left:22px}
.articulo li{margin-bottom:9px}
.articulo a{border-bottom:1.5px solid var(--acento-linea);padding-bottom:1px}
.articulo a:hover{color:var(--acento);border-bottom-color:var(--acento)}
.articulo blockquote{
  margin:32px 0;padding:0 0 0 22px;border-left:3px solid var(--acento-linea);
  font-size:19px;color:var(--tinta);
}

figure{margin:36px 0}
figure img{border:1px solid var(--linea);border-radius:10px}
figcaption{font-size:13.5px;color:var(--suave);margin-top:10px}

table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--linea);vertical-align:top}
thead th{border-bottom:2px solid var(--acento-linea);font-weight:700}

code{font-family:ui-monospace,'SF Mono',monospace;font-size:.9em;background:#F2F1ED;padding:2px 6px;border-radius:5px}

/* Aviso de afiliado. Arriba del artículo. Nunca escondido. */
.aviso{
  background:var(--aviso-piso);border:1px solid var(--aviso-linea);border-radius:var(--r);
  padding:16px 20px;margin:0 0 34px;font-size:14.5px;line-height:1.55;color:var(--aviso-tinta);
}
.aviso strong{font-weight:700}

/* "Cuándo NO hacer esto" y "qué tienes que seguir sabiendo". Obligatorias. */
.caja{background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--r);padding:26px 28px;margin:36px 0}
.caja h3{margin-top:0}
.caja p:last-child,.caja ul:last-child{margin-bottom:0}

.articulo-nav{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:46px;padding-top:24px;border-top:1px solid var(--linea);font-size:15px;font-weight:600;
}
.articulo-nav a:hover{color:var(--acento)}

/* ---------- Autor ---------- */
.autor{
  display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start;
  margin:0 0 30px;
}
.autor-foto{
  width:150px;height:150px;border-radius:16px;object-fit:cover;
  border:1px solid var(--linea);background:var(--tarjeta);
}
.autor-pie{font-size:13.5px;color:var(--suave);margin:10px 0 0;line-height:1.45}
.autor-pie a{border-bottom:1.5px solid var(--acento-linea)}
.autor-texto p:last-child{margin-bottom:0}

/* ---------- Pie ---------- */
footer{border-top:1px solid var(--linea);padding:44px 0 56px;font-size:14px;color:var(--suave);margin-top:20px}
.pie{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pie-enlaces{display:flex;gap:20px;flex-wrap:wrap}
.pie a:hover{color:var(--tinta)}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .wrap{padding:0 20px}
  body{font-size:16px}
  .hero{padding:44px 0 16px}
  .listado{padding:36px 0 48px}
  .lede{font-size:17px}
  .diagrama{padding:20px}
  .diag-h{display:none}
  .diag-v{display:block;margin:0 auto}
  .guia{grid-template-columns:1fr;gap:10px;padding:18px}
  .guia .mini,.guia .fl{display:none}
  .autor{grid-template-columns:1fr;gap:18px}
  .autor-foto{width:120px;height:120px}
  .articulo h2{font-size:23px;margin-top:40px}
  th,td{padding:10px 8px}
  table{font-size:14px}
}