/* Rumbo Estratégico — hoja de estilo de artículos y guías.
   Paleta y tipografía heredadas de la landing. Contraste verificado AA. */
:root{
  --brand:#8560A8;--brand-d:#63447F;--brand-l:#C2A8D9;
  --ink:#241832;--muted:#5A5070;--surface:#F7F5FA;--line:#E2D9EC;
  --card:#fff;--soft:#F2ECF8;--gold:#CAA53F;--danger:#B3261E;--ok:#1E7A4B;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}

/* ---------- cabecera ---------- */
.topbar{background:linear-gradient(150deg,#241838,#160E22);color:#fff;padding:16px 24px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brandmark{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.brandmark svg{height:34px;width:auto;flex:none}
.topbar nav a{color:var(--brand-l);text-decoration:none;font-size:14px;font-weight:600;margin-left:18px}
.topbar nav a:hover{color:#fff;text-decoration:underline}
.wrap{max-width:760px;margin:0 auto}
.wrap-wide{max-width:1000px;margin:0 auto}

/* ---------- encabezado del artículo ---------- */
.hero-art{background:linear-gradient(150deg,#2C1D46,#160E22);color:#fff;padding:52px 24px 60px;min-height:340px;display:flex;align-items:center}
.crumbs{font-size:13px;color:#A992C4;margin-bottom:14px}
.crumbs a{color:var(--brand-l);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-l);
         font-weight:700;margin:0 0 10px}
.hero-art h1{font-family:var(--serif);font-size:clamp(26px,4.6vw,40px);line-height:1.18;margin:0 0 14px}
.hero-art .lede{font-size:17px;line-height:1.6;color:#E4D8F2;margin:0;max-width:60ch}
.meta{margin-top:18px;font-size:13px;color:#A992C4}

/* ---------- cuerpo ---------- */
main{padding:34px 24px 56px}
h2{font-family:var(--serif);color:var(--brand-d);font-size:clamp(20px,3.2vw,26px);
   line-height:1.3;margin:38px 0 12px}
h3{font-size:17.5px;margin:26px 0 8px;color:var(--ink)}
p,li{color:var(--muted)}
li{margin-bottom:8px}
ul,ol{padding-left:22px}
strong,b{color:var(--ink)}
a{color:var(--brand-d)}
main a:hover{text-decoration:underline}

/* ---------- bloques destacados ---------- */
.idea{background:linear-gradient(150deg,#160E22,#63447F 65%,#8560A8);color:#fff;
      border-radius:16px;padding:24px 26px;margin:24px 0}
.idea p{color:#fff;margin:0;font-size:17.5px;line-height:1.55}
.idea .tag{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--brand-l);font-weight:700;margin-bottom:8px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:20px 0}
.card p:first-child{margin-top:0}.card p:last-child{margin-bottom:0}

.ley{border-left:4px solid var(--brand);background:var(--soft);padding:16px 20px;
     border-radius:0 12px 12px 0;margin:18px 0}
.ley p{margin:0;color:var(--ink);font-size:16px}
.ley .cita{font-family:var(--serif);font-style:italic;color:var(--brand-d)}

.corte{border-left:4px solid var(--gold);background:#FBF6E9;padding:16px 20px;
       border-radius:0 12px 12px 0;margin:18px 0}
.corte p{margin:0 0 8px;color:#4A3B12;font-size:16px}
.corte p:last-child{margin-bottom:0}
.corte .caso{font-weight:700;color:#3A2E0C}

.error{border-left:4px solid var(--danger);background:#FDF0EF;padding:16px 20px 8px;
       border-radius:0 12px 12px 0;margin:18px 0}
.error li{color:#6B241F}
.error strong{color:#8C1D18}

.verificado{display:inline-flex;align-items:center;gap:8px;background:#E9F5EE;color:#14532D;
            border:1px solid #BBE0C9;border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px;display:block;overflow-x:auto}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--ink);font-weight:700;background:var(--soft)}
td{color:var(--muted)}

/* ---------- llamada a la acción ---------- */
.cta{background:linear-gradient(150deg,#241838,#160E22);color:#fff;border-radius:18px;
     padding:30px 28px;margin:40px 0 10px;text-align:center}
.cta h2{color:#fff;margin:0 0 10px;font-size:clamp(20px,3.2vw,26px)}
.cta p{color:#DCCFEC;margin:0 auto 20px;max-width:52ch;font-size:16.5px}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:12px;
     padding:14px 26px;font-size:16px;margin:5px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-l);color:var(--ink)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- otras estrategias ---------- */
.mas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:20px 0}
.mas a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
       padding:18px 20px;text-decoration:none;transition:border-color .2s,transform .2s}
.mas a:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.mas .n{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:700}
.mas .t{display:block;color:var(--ink);font-weight:700;margin-top:6px;line-height:1.35;font-size:16px}

/* ---------- pie ---------- */
footer{background:#160E22;color:#B9A9CE;padding:30px 24px 36px;font-size:14.5px;line-height:1.6}
footer a{color:var(--brand-l)}
/* El pie es oscuro: strong/b heredarían --ink (casi negro) y quedarían ilegibles. */
footer strong,footer b{color:#fff}
footer .legal{font-size:13px;color:#9B8CB0;margin-top:14px;line-height:1.55}
footer .fline{margin:0 0 8px;color:#D8CCE8}

@media(max-width:620px){
  body{font-size:16.5px}
  main{padding:26px 20px 44px}
  .hero-art{padding:26px 20px 32px}
  .topbar nav a{margin-left:12px;font-size:13px}
  .brandmark span{display:none}
}

/* ============================================================
   Bloques enriquecidos (22-ago-2026): hero con video,
   certificaciones, testimonio y figuras.
   ============================================================ */

/* ---------- hero con video de fondo ---------- */
.hero-art{position:relative;overflow:hidden}
.hero-art .bg{position:absolute;inset:0;z-index:0}
.hero-art .bg video,.hero-art .bg img{width:100%;height:100%;object-fit:cover;
  /* El video es 16:9 y el hero una franja mucho mas ancha: cover recorta arriba
     y abajo. Centrado (50%) cortaba al hombre por la frente. Con 12% el encuadre
     sube y entran el casco y la cara completos. */
  object-position:50% 12%;
  filter:saturate(1) contrast(1.02) brightness(.82)}
/* Velo en degradado: deja ver el video arriba y se cierra sobre el texto.
   Peor caso medido (fotograma 100% blanco, zona mas clara del velo): 6.3:1
   con texto blanco, muy por encima del 4.5 que exige AA. */
.hero-art .veil{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(22,14,34,.52) 0%,rgba(22,14,34,.60) 45%,rgba(22,14,34,.74) 100%),
    linear-gradient(100deg,rgba(22,14,34,.30) 0%,rgba(22,14,34,.10) 60%,rgba(22,14,34,0) 100%)}
.hero-art .wrap{position:relative;z-index:2}

/* ---------- franja de certificaciones ---------- */
.cert{background:var(--card);border:1px solid var(--line);border-radius:16px;
      padding:22px 24px;margin:28px 0}
.cert .rot{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);
           font-weight:700;margin:0 0 16px;text-align:center}
.cert .fila{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:center}
.cert img{height:72px;width:72px;object-fit:contain;flex:none}
.cert .pie{margin:14px 0 0;font-size:14px;color:var(--muted);text-align:center}

/* ---------- testimonio ---------- */
.testi{background:linear-gradient(150deg,#241838,#160E22);color:#fff;border-radius:18px;
       padding:28px 30px;margin:30px 0;display:grid;grid-template-columns:96px 1fr;
       gap:22px;align-items:start}
.testi img{width:96px;height:96px;border-radius:50%;object-fit:cover;
           border:3px solid rgba(194,168,217,.5)}
.testi blockquote{margin:0;font-size:17px;line-height:1.62;color:#EFE6F8}
.testi .quien{margin:14px 0 0;font-weight:700;color:#fff;font-size:15.5px}
.testi .rol{margin:3px 0 0;font-size:13.5px;color:var(--brand-l)}
@media(max-width:560px){
  .testi{grid-template-columns:1fr;text-align:center;padding:24px 22px}
  .testi img{margin:0 auto}
}

/* ---------- figura con pie ---------- */
figure.fig{margin:26px 0;background:var(--card);border:1px solid var(--line);
           border-radius:16px;padding:16px;overflow:hidden}
figure.fig img{width:100%;height:auto;display:block;border-radius:10px}
figure.fig figcaption{margin-top:12px;font-size:14px;color:var(--muted);text-align:center}

/* ---------- bloque del libro ---------- */
.libro{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;
       background:var(--soft);border:1px solid var(--line);border-radius:16px;
       padding:22px 24px;margin:28px 0}
.libro img{width:100%;height:auto;border-radius:8px;
           box-shadow:0 10px 26px rgba(0,0,0,.22);display:block}
.libro h3{margin:0 0 6px}
.libro p{margin:0 0 12px;font-size:15.5px}
@media(max-width:560px){
  .libro{grid-template-columns:1fr;text-align:center}
  .libro img{max-width:130px;margin:0 auto}
}