/* ==========================================================================
   HazTeam Ready — Compliance Hub
   Mismo sistema visual que la home (index.html), pero en hoja aparte y no
   embebido: estas paginas son varias y comparten estilo, asi el navegador la
   descarga una sola vez y la reusa. La home mantiene su CSS inline a
   proposito — es la pagina que paga los clics y no debe esperar un archivo.
   ========================================================================== */
:root{
  --ink:#070f19;
  --navy:#0c1a2a;
  --navy2:#0f2032;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --orange:#ea6a17;
  --orange2:#f5892c;
  --amber:#f5b942;
  --txt:#ffffff;
  --dim:#94a7bc;
  --dim2:#7d92a9;
  --green:#2fbf71;
  --red:#e5674f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--navy);color:var(--txt);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
a{color:var(--amber)}
a:hover{color:var(--orange2)}
svg.ic{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- barra superior ---------- */
.nav{padding:18px 0;border-bottom:1px solid var(--line);background:var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:34px}
.brand{display:flex;flex-direction:column;line-height:1;flex:none;text-decoration:none;color:#fff}
.brand .b1{font-size:1.6rem;font-weight:900;letter-spacing:-.02em}
.brand .b2{font-size:.68rem;font-weight:700;margin-top:3px}
.brand .b2 em{color:var(--orange2);font-style:normal}
.nav nav{display:flex;gap:24px;font-size:.92rem;font-weight:600}
.nav nav a{text-decoration:none;color:var(--dim);padding:4px 0;border-bottom:2px solid transparent}
.nav nav a:hover{color:#fff}
.nav nav a[aria-current]{color:#fff;border-bottom-color:var(--orange)}
.nav .navcta{margin-left:auto;flex:none}

/* ---------- botones ---------- */
.cta{display:inline-block;background:linear-gradient(160deg,var(--orange2),var(--orange));color:#fff;
  font-weight:700;padding:14px 28px;border-radius:11px;text-decoration:none;font-size:1rem;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(0,0,0,.3);text-align:center}
.cta:hover{filter:brightness(1.08);color:#fff}
.cta.sm{padding:10px 18px;font-size:.88rem;box-shadow:none}
.cta.ghost{background:none;border:1px solid var(--line2);box-shadow:none;color:#dbe5ef}
.cta.ghost:hover{background:rgba(255,255,255,.06);filter:none}

/* ---------- migas ---------- */
.crumbs{font-size:.8rem;color:var(--dim2);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li::after{content:"›";margin-left:6px;opacity:.5}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:#fff}

/* ---------- encabezado del articulo ---------- */
.head{padding:22px 0 40px;border-bottom:1px solid var(--line);background:
  radial-gradient(1100px 380px at 12% -10%,rgba(234,106,23,.14),transparent 60%),var(--navy)}
.head h1{font-size:clamp(1.85rem,3.6vw,2.85rem);line-height:1.12;font-weight:900;letter-spacing:-.02em;
  margin:10px 0 14px;max-width:20ch;text-wrap:balance}
.head h1 em{color:var(--orange2);font-style:normal}
.head .lede{font-size:1.08rem;color:var(--dim);max-width:65ch}
.head .kick{font-size:.74rem;font-weight:800;letter-spacing:.16em;color:var(--orange2)}
.head .meta{margin-top:20px;font-size:.8rem;color:var(--dim2);display:flex;flex-wrap:wrap;gap:6px 20px}

/* ---------- cuerpo ---------- */
main{padding:0 0 20px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:46px;align-items:start;padding:44px 0}
article{min-width:0}
article h2{font-size:1.55rem;font-weight:800;letter-spacing:-.01em;margin:44px 0 14px;scroll-margin-top:20px}
article h2:first-child{margin-top:0}
article h3{font-size:1.12rem;font-weight:700;margin:26px 0 8px}
article p{margin:0 0 15px;color:#cbd6e2}
article p strong,article li strong{color:#fff}
article ul,article ol{margin:0 0 18px 0;padding-left:0;list-style:none;display:grid;gap:9px}
article li{color:#cbd6e2;padding-left:26px;position:relative}
article ul>li::before{content:"";position:absolute;left:7px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--orange2)}
article ol{counter-reset:n}
article ol>li{counter-increment:n}
article ol>li::before{content:counter(n);position:absolute;left:0;top:.05em;width:19px;height:19px;
  border-radius:6px;background:rgba(234,106,23,.18);color:var(--orange2);font-size:.7rem;
  font-weight:800;display:flex;align-items:center;justify-content:center}
article a{text-underline-offset:2px}

/* ---------- tarjetas y avisos ---------- */
.card{background:var(--navy2);border:1px solid var(--line);border-radius:14px;padding:24px;margin:0 0 20px}
.card h3{margin-top:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:0 0 20px}
.tile{background:var(--navy2);border:1px solid var(--line);border-radius:13px;padding:20px}
.tile .n{width:30px;height:30px;border-radius:9px;background:rgba(234,106,23,.16);color:var(--orange2);
  font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.tile b{display:block;margin-bottom:5px;font-size:.99rem}
.tile p{font-size:.87rem;color:var(--dim2);margin:0}

.note{border-left:3px solid var(--amber);background:rgba(245,185,66,.08);border-radius:0 11px 11px 0;
  padding:16px 18px;margin:0 0 20px}
.note b{color:var(--amber);display:block;margin-bottom:4px;font-size:.86rem;letter-spacing:.04em}
.note p{margin:0;font-size:.93rem}
.note.warn{border-left-color:var(--red);background:rgba(229,103,79,.09)}
.note.warn b{color:var(--red)}
.note.ok{border-left-color:var(--green);background:rgba(47,191,113,.08)}
.note.ok b{color:var(--green)}

.quote{border-left:3px solid var(--line2);padding:4px 0 4px 18px;margin:0 0 20px;color:var(--dim);
  font-style:italic}
.quote cite{display:block;font-style:normal;font-size:.8rem;color:var(--dim2);margin-top:7px}

/* ---------- tablas ---------- */
.tw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:var(--navy2);border:1px solid var(--line);
  border-radius:13px;overflow:hidden;font-size:.88rem;min-width:520px}
th{background:rgba(255,255,255,.05);text-align:left;padding:12px 14px;font-size:.75rem;
  letter-spacing:.05em;color:var(--dim);font-weight:700;text-transform:uppercase}
td{padding:12px 14px;border-top:1px solid var(--line);color:#cbd6e2;vertical-align:top}
td b{color:#fff}
.yes{color:var(--green);font-weight:700;white-space:nowrap}
.part{color:var(--amber);font-weight:700;white-space:nowrap}
.no{color:var(--red);font-weight:700;white-space:nowrap}

/* ---------- indice lateral ---------- */
.side{position:sticky;top:20px;display:grid;gap:16px}
.toc{background:var(--navy2);border:1px solid var(--line);border-radius:14px;padding:20px}
.toc b{display:block;font-size:.72rem;letter-spacing:.14em;color:var(--dim2);margin-bottom:11px}
.toc ol{list-style:none;display:grid;gap:8px;counter-reset:t}
.toc a{display:block;font-size:.87rem;color:#cbd6e2;text-decoration:none;line-height:1.4}
.toc a:hover{color:var(--orange2)}
.buy{background:linear-gradient(165deg,#14283e,var(--ink));border:1px solid var(--line2);
  border-radius:14px;padding:22px}
.buy b{display:block;font-size:1rem;margin-bottom:6px}
.buy p{font-size:.84rem;color:var(--dim2);margin:0 0 15px}
.buy .cta{display:block;width:100%}
.buy .alt{display:block;text-align:center;font-size:.82rem;color:var(--dim);margin-top:11px;
  text-decoration:none}
.buy .alt:hover{color:#fff}

/* ---------- bloque de conversion ---------- */
.convert{background:linear-gradient(160deg,#13273c,var(--ink));border:1px solid var(--line2);
  border-radius:16px;padding:32px;margin:40px 0 0;text-align:center}
.convert h2{margin:0 0 10px;font-size:1.4rem}
.convert p{max-width:62ch;margin:0 auto 22px;color:var(--dim)}
.convert .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.convert .tiny{font-size:.78rem;color:var(--dim2);margin:16px 0 0}

/* ---------- descarga ---------- */
.dl{display:flex;gap:20px;align-items:center;background:var(--navy2);border:1px solid var(--line2);
  border-radius:15px;padding:22px;margin:0 0 22px;flex-wrap:wrap}
.dl .prev{flex:none;width:132px;border-radius:8px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.dl .prev svg{display:block;width:100%;height:auto}
.dl .txt{flex:1;min-width:210px}
.dl .txt b{display:block;font-size:1.05rem;margin-bottom:4px}
.dl .txt p{font-size:.86rem;color:var(--dim2);margin:0 0 14px}

/* ---------- preguntas ---------- */
details{background:var(--navy2);border:1px solid var(--line);border-radius:12px;margin:0 0 10px;
  padding:15px 19px}
summary{font-weight:600;cursor:pointer;font-size:.96rem;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--orange2);font-weight:800;font-size:1.15rem;line-height:1}
details[open] summary::after{content:"\2013"}
details>div{margin-top:11px}
details p:last-child{margin-bottom:0}

/* ---------- otras guias ---------- */
.more{border-top:1px solid var(--line);padding:40px 0;background:var(--ink)}
.more h2{font-size:1.2rem;margin:0 0 18px}
.more .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:13px}
.more a{display:block;background:var(--navy2);border:1px solid var(--line);border-radius:12px;
  padding:18px;text-decoration:none;color:#fff}
.more a:hover{border-color:var(--line2);background:#13253a}
.more a b{display:block;font-size:.95rem;margin-bottom:5px;line-height:1.35}
.more a span{font-size:.82rem;color:var(--dim2);display:block;line-height:1.45}

/* ---------- pie ---------- */
footer{background:var(--ink);border-top:1px solid var(--line);padding:38px 0 30px;font-size:.83rem;
  color:var(--dim2)}
footer .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;
  margin-bottom:28px}
footer h4{font-size:.72rem;letter-spacing:.14em;color:var(--dim);margin-bottom:11px;font-weight:700}
footer ul{list-style:none;display:grid;gap:7px}
footer a{color:#b3c2d2;text-decoration:none}
footer a:hover{color:#fff}
footer .disc{border-top:1px solid var(--line);padding-top:20px;line-height:1.6;max-width:none}
footer .disc b{color:var(--dim)}
/* Los enlaces dentro del texto legal se distinguian solo por color: Lighthouse
   lo marcaba y con razon. Subrayado, que es lo que un enlace en medio de un
   parrafo necesita para no depender de la vista cromatica. */
footer .disc a,footer .copy a{text-decoration:underline;text-underline-offset:2px}
footer .copy{margin-top:14px}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .cols{grid-template-columns:minmax(0,1fr);gap:34px;padding:34px 0}
  .side{position:static;grid-template-columns:1fr;gap:14px}
  .toc{display:none}
  .nav nav{display:none}
}
@media(max-width:640px){
  .wrap{padding:0 16px}
  .head{padding:18px 0 32px}
  .head h1{max-width:none}
  .card,.convert{padding:20px}
  .convert .btns .cta{width:100%}
  .dl{gap:16px}
  .dl .prev{width:96px}
  article h2{font-size:1.32rem;margin-top:34px}
}
@media print{
  .nav,.side,.convert,.more,.crumbs{display:none}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   AÑADIDOS 2026-08-31 — componentes de las paginas comerciales nuevas.
   Todo lo de arriba es el archivo publicado tal cual, byte por byte: estas
   reglas solo agregan, no redefinen nada anterior, para que ninguna guia ya
   publicada cambie de aspecto.
   ========================================================================== */

/* Enlace de salto: invisible hasta que se lo enfoca con el teclado. */
.skip{position:absolute;left:-9999px;top:0;background:#0f2d4a;color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #1668b3;outline-offset:2px;border-radius:4px}

/* Selector de idioma dentro de la barra. Es un enlace real, no un boton JS. */
.nav nav a.langsw{border:1px solid #cfdcea;border-radius:999px;padding:4px 12px;margin-left:6px}
.nav nav a.langsw:hover{background:#e8f1fa}

/* --- portada: los dos caminos ------------------------------------------- */
.hero{background:linear-gradient(180deg,#f6f9fc 0%,#fff 100%);border-bottom:1px solid #dbe4ee;padding:52px 0 44px}
.hero .kick{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#1668b3;font-weight:800;margin-bottom:12px}
.hero h1{font-size:clamp(1.85rem,4.2vw,2.9rem);max-width:16em;margin-bottom:16px}
.hero .lede{font-size:1.08rem;color:#465264;max-width:38em;margin-bottom:24px}
.hero .micro{font-size:.85rem;color:#656f80;margin-top:14px}
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin:30px 0 0}
.path{border:1px solid #dbe4ee;border-radius:14px;padding:24px;background:#fff;box-shadow:0 2px 4px rgba(15,45,74,.05),0 10px 28px rgba(15,45,74,.07);display:flex;flex-direction:column}
.path.hot{border-color:#1668b3;border-width:2px}
.path h2{font-size:1.12rem;margin-bottom:6px}
.path .who{font-size:.83rem;color:#656f80;margin-bottom:14px}
.path .price{font-size:1.9rem;font-weight:800;color:#0f2d4a;line-height:1.1}
.path .price small{font-size:.82rem;font-weight:600;color:#656f80;display:block;margin-top:3px}
.path ul{list-style:none;margin:16px 0 20px;padding:0;flex:1}
.path ul li{position:relative;padding-left:24px;margin-bottom:8px;font-size:.9rem;color:#3a4450}
.path ul li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:7px;border-left:2.5px solid #18924f;border-bottom:2.5px solid #18924f;transform:rotate(-45deg)}
.path .cta{width:100%;text-align:center}
.path .sec{display:block;text-align:center;margin-top:10px;font-size:.86rem}

/* --- planes --------------------------------------------------------------*/
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0}
.plan{border:1px solid #dbe4ee;border-radius:14px;padding:22px;background:#fff;display:flex;flex-direction:column;position:relative}
.plan.hot{border:2px solid #1668b3}
.plan .tag{position:absolute;top:-11px;left:22px;background:#1668b3;color:#fff;font-size:.66rem;letter-spacing:.09em;font-weight:800;padding:4px 10px;border-radius:999px;text-transform:uppercase}
.plan h3{font-size:1rem;margin-bottom:2px}
.plan .sub{font-size:.8rem;color:#656f80;margin-bottom:12px}
.plan .price{font-size:1.65rem;font-weight:800;color:#0f2d4a}
.plan .per{font-size:.82rem;color:#656f80;margin-bottom:14px}
.plan ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.plan ul li{position:relative;padding-left:22px;margin-bottom:7px;font-size:.86rem;color:#3a4450}
.plan ul li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:6px;border-left:2.4px solid #18924f;border-bottom:2.4px solid #18924f;transform:rotate(-45deg)}
.plan .cta{width:100%;text-align:center}

/* --- pasos ---------------------------------------------------------------*/
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin:22px 0}
.step{counter-increment:s;position:relative;padding-left:44px}
.step::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:#e8f1fa;color:#1668b3;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.step b{display:block;margin-bottom:4px;color:#0f2d4a}
.step p{font-size:.88rem;color:#465264;margin:0}

/* --- calculadora de renovacion ------------------------------------------ */
.calc{border:1px solid #dbe4ee;border-radius:14px;padding:24px;background:#f6f9fc;margin:22px 0}
.calc label{display:block;font-weight:700;margin-bottom:8px;color:#0f2d4a;font-size:.92rem}
.calc input[type=date]{font:inherit;padding:11px 12px;border:1px solid #cfdcea;border-radius:9px;background:#fff;min-width:220px}
.calc .out{margin-top:18px;padding:18px;border-radius:11px;background:#fff;border:1px solid #dbe4ee}
.calc .out .big{font-size:1.4rem;font-weight:800;color:#0f2d4a}
.calc .out .sub{font-size:.86rem;color:#465264;margin-top:4px}
.calc .out.warn{background:#fff8e6;border-color:#f0d99a}

/* --- utilidades ---------------------------------------------------------- */
.sec2{padding:46px 0;border-top:1px solid #dbe4ee}
.sec2.alt{background:#f6f9fc}
.lede2{font-size:1.02rem;color:#465264;max-width:40em;margin-bottom:6px}
footer .copy{margin-top:14px;font-size:.78rem;color:#8b95a5}
.meta{font-size:.82rem;color:#656f80;margin:0 0 20px}
.tiny{font-size:.8rem;color:#656f80}
img{max-width:100%;height:auto}
@media(max-width:620px){.hero{padding:36px 0 32px}.path{padding:20px}}

/* Afirmacion que la pagina cita para desmentirla. Se marca en el HTML, no solo
   en el texto, para que la verificacion automatica pueda distinguir citar de
   afirmar -- y para que un lector vea que es una cita, no una promesa nuestra. */
q.falso{quotes:'“' '”';font-style:italic;color:#8a3a12}

/* Los titulos de columna del footer pasaron de h4 a h2 por jerarquia de
   encabezados. El aspecto es el mismo: esta regla replica el estilo anterior. */
footer .fgrid h2{font-size:.72rem;letter-spacing:.14em;color:var(--dim);margin-bottom:11px;font-weight:700;line-height:1.4}

/* ==========================================================================
   TEMA CLARO UNIFICADO — 2026-08-31

   Por que existe este bloque. Hasta hoy el sitio tenia dos identidades: la
   portada y la landing de equipos en tema claro (el rediseño aprobado), y las
   cinco guias del Compliance Hub en tema oscuro, porque esta hoja se escribio
   con `body{background:var(--navy);color:#fff}`. Al pasar todas las paginas a
   una sola hoja, cualquier seccion de fondo claro heredaba texto blanco y
   quedaba ilegible.

   La correccion se hace redefiniendo las VARIABLES, no reescribiendo las
   reglas: asi todo lo de arriba sigue intacto y esta decision se revierte
   borrando este bloque. La barra superior y el pie siguen siendo azul oscuro,
   que es lo que hace la portada.

   Contraste comprobado sobre blanco: texto #16202c 15.9:1, secundario #465264
   8.0:1, enlaces #1668b3 4.9:1. Todos por encima del minimo AA de 4.5:1.
   ========================================================================== */
:root{
  --ink:#0f2d4a;          /* barra y pie: siguen oscuros */
  --navy:#ffffff;         /* fondo del documento */
  --navy2:#f6f9fc;        /* superficies elevadas: tarjetas, indice, avisos */
  --line:#dbe4ee;
  --line2:#cfdcea;
  --orange:#e2551d;
  --orange2:#c4460f;
  --amber:#1668b3;        /* color de enlace: azul, legible sobre blanco */
  --txt:#16202c;
  --dim:#465264;
  --dim2:#656f80;   /* 5.07:1 sobre blanco; el #6d798a anterior daba 4.42 y no llegaba a AA */
  --green:#18924f;
  --red:#c0392b;
}

/* Los pocos colores que la hoja original fijaba en #fff porque el fondo era
   oscuro. Sobre fondo claro desaparecian, asi que se reasignan uno por uno. */
article p strong, article li strong, td b{color:var(--txt)}
.crumbs a:hover{color:var(--orange2)}
.buy .alt:hover{color:var(--orange2)}
h1,h2,h3,h4{color:#0f2d4a}
.head h1 em{color:var(--orange2)}
.head .kick{color:#1668b3}
.hero .kick{color:#1668b3}

/* La barra superior y el pie conservan fondo oscuro, asi que su texto sigue
   siendo claro: se reafirma para que la redefinicion de --txt no los apague. */
.nav{background:var(--ink)}
.nav nav a{color:#c9d6e4}
.nav nav a:hover,.nav nav a[aria-current]{color:#fff}
.nav nav a.langsw{border-color:rgba(255,255,255,.28);color:#fff}
.nav nav a.langsw:hover{background:rgba(255,255,255,.12)}
.brand{color:#fff}
footer{background:#0b1622;color:#8b95a5}
footer .fgrid h2,footer h4{color:#93a4b7}
footer a{color:#b3c2d2}
footer a:hover{color:#fff}
footer .disc{color:#8b95a5}
footer .disc a{color:#b3c2d2}

/* Tarjetas de "seguir leyendo": la hoja original las pintaba con texto blanco
   sobre un bloque oscuro. Ahora son tarjetas claras con borde. */
.more a{background:#fff;border:1px solid var(--line);color:var(--txt)}
.more a:hover{border-color:#1668b3;background:#f6f9fc;color:var(--txt)}
.more a b{color:#0f2d4a}
.more a span{color:var(--dim)}
.more{background:#f6f9fc}

/* Superficies que dependian del fondo oscuro para separarse del documento. */
.toc,.buy,.card,.note,.tile,.quote,details{background:#fff;border:1px solid var(--line)}
.note{background:#f6f9fc}
.note.warn{background:#fff8e6;border-color:#f0d99a}
.note.ok{background:#f2faf5;border-color:#bfe3cd}
table{background:#fff}
th{background:#eef4fa;color:#0f2d4a}
.head{background:#f6f9fc}
.convert{background:#eef4fa;border:1px solid var(--line)}

/* El boton de la barra solo tenia posicionamiento, nunca aspecto de boton:
   en el Hub original era un enlace mas. Como ahora es el unico CTA visible
   en toda pagina larga, se le da forma de boton naranja. */
.nav .navcta{margin-left:auto;flex:none;background:linear-gradient(160deg,var(--orange2),var(--orange));
  color:#fff;text-decoration:none;font-weight:700;font-size:.86rem;padding:9px 18px;border-radius:999px;
  white-space:nowrap;box-shadow:0 2px 10px rgba(226,85,29,.28)}
.nav .navcta:hover{filter:brightness(1.08);color:#fff}
@media(max-width:880px){
  .nav .wrap{flex-wrap:wrap;gap:10px}
  .nav nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav .navcta{margin-left:auto}
}

/* Ultimos colores literales pensados para fondo oscuro. #cbd6e2 sobre blanco
   da 1.7:1 de contraste -- ilegible. Se reemplaza por el gris de texto del
   sistema claro (#3a4450 sobre blanco: 9.4:1). */
article p, article li{color:#3a4450}
.toc a{color:#3a4450}
.toc a:hover{color:var(--orange2)}
.toc b{color:var(--dim2)}
article ol>li::before{background:#e8f1fa;color:#1668b3}
article ul>li::before{background:#1668b3}
.tile .n{background:#e8f1fa;color:#1668b3}
details summary{color:#0f2d4a}
.quote{color:#3a4450}
.quote cite{color:var(--dim2)}
.dl .txt p{color:#3a4450}
.part{color:var(--dim)}

/* ==========================================================================
   CORRECCIONES DE LA PORTADA — 2026-09-02
   ========================================================================== */

/* --- 1. Contraste: tres colores que quedaron mirando al tema anterior -----
   Al pasar la hoja a tema claro se redefinieron las variables, pero estos tres
   colores estaban escritos literalmente o apuntaban a una variable pensada
   para fondo oscuro. Medidos sobre el fondo real que les toca: */

/* Cuerpo de la tabla. Estaba en #cbd6e2 sobre blanco: 1,47:1. Ilegible.
   Es el fallo mas grave de los tres porque afecta a la tabla "What is in the
   course", que es donde se explica que cubre el curso. Ahora 9,9:1. */
td{color:#3a4450}
td b,td strong{color:#0f2d4a}

/* "Ready" del logotipo, sobre el azul oscuro de la barra. Estaba en #c4460f:
   2,83:1. Se usa el naranja claro de la paleta, que sobre ese azul da 6,4:1. */
.nav .brand .b2 em{color:#f5892c}

/* "Disclaimer:" del pie, sobre #0b1622. Estaba heredando --dim (#465264):
   2,30:1, mas oscuro que el propio fondo. Ahora 9,3:1. */
footer .disc b{color:#c9d6e4}

/* --- 2. Interlineado del H1 ----------------------------------------------
   .hero h1 fijaba tamano pero no interlineado, asi que heredaba el 1.65 del
   body: 76px de alto de linea sobre 46px de letra. Tres lineas ocupaban 230px
   y empujaban todo el hero fuera de la primera pantalla. */
.hero h1{line-height:1.12;margin-bottom:14px;text-wrap:balance}
.hero .lede{margin-bottom:22px}
.hero{padding:44px 0 40px}

/* --- 3. Hero en dos columnas --------------------------------------------
   El ancho de la columna derecha es exactamente el ancho nativo de la foto
   (404px). No se amplia nunca: una foto estirada se ve peor que una chica. */
.heroflex{display:grid;grid-template-columns:minmax(0,1fr) 404px;gap:52px;align-items:center}
.heroflex .htxt{min-width:0}
.herofoto{margin:0;position:relative;line-height:0}
.herofoto img{
  display:block;width:404px;height:480px;border-radius:16px;
  box-shadow:0 4px 12px rgba(15,45,74,.10),0 18px 44px rgba(15,45,74,.16);
}
.herofoto figcaption{
  position:absolute;left:14px;right:14px;bottom:14px;line-height:1.35;
  background:rgba(9,26,44,.86);color:#eaf1f8;font-size:.76rem;
  padding:9px 12px;border-radius:10px;backdrop-filter:saturate(1.2) blur(2px);
}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.htrust{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none}
.htrust li{position:relative;padding-left:23px;font-size:.88rem;color:#3a4450}
.htrust li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2.5px solid #18924f;border-bottom:2.5px solid #18924f;transform:rotate(-45deg)}

/* Entre 900 y 1160px la foto se achica en vez de aplastar el texto. */
@media(max-width:1120px){
  .heroflex{grid-template-columns:minmax(0,1fr) 330px;gap:36px}
  .herofoto img{width:330px;height:392px}
}
/* En telefono y tablet angosta: una sola columna y la foto DEBAJO del texto. */
@media(max-width:860px){
  .heroflex{grid-template-columns:1fr;gap:28px}
  .herofoto{order:2;max-width:404px}
  .herofoto img{width:100%;height:auto;aspect-ratio:404/480}
  .hero h1{line-height:1.14}
}

/* --- 4. Objetivo tactil y foco ------------------------------------------- */
.cta,.navcta,.plan .cta,.path .cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.htrust li,.hero .micro{-webkit-tap-highlight-color:transparent}

/* --- 5. La tabla avisa cuando se puede desplazar -------------------------
   Sin esto, en telefono la ultima columna queda cortada sin ninguna senal de
   que hay mas a la derecha. La sombra aparece solo mientras haya scroll. */
.tw{position:relative;background:
  linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),
  linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,
  radial-gradient(farthest-side at 0 50%,rgba(15,45,74,.16),transparent),
  radial-gradient(farthest-side at 100% 50%,rgba(15,45,74,.16),transparent) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.tw:focus-visible{outline:3px solid #1668b3;outline-offset:2px}
@media(max-width:640px){
  .tw::after{content:attr(data-aviso);display:block;font-size:.76rem;color:#656f80;padding:6px 2px 0}
}

/* --- 6. Boton secundario ------------------------------------------------
   .cta.ghost seguia con color:#dbe5ef y borde translucido, pensados para el
   fondo oscuro: sobre blanco daba 1,3:1 y el boton se leia como deshabilitado.
   Pasa a ser un boton de contorno azul, legible y claramente pulsable. */
.cta.ghost{
  background:#fff;border:1.5px solid #1668b3;color:#12507f;box-shadow:none;
}
.cta.ghost:hover{background:#eef4fa;border-color:#0f4a76;color:#0f2d4a;filter:none}
.cta.ghost:active{background:#dfeaf5}

/* Foco visible en TODOS los interactivos, tambien sobre el azul de la barra. */
.cta:focus-visible,.navcta:focus-visible{outline:3px solid #0f2d4a;outline-offset:3px}
.nav a:focus-visible{outline:3px solid #f5b942;outline-offset:3px}
.cta.ghost:focus-visible{outline:3px solid #1668b3;outline-offset:3px}

/* El enlace secundario de las tarjetas tambien estaba pensado para fondo oscuro. */
.path .sec{color:#12507f}
.path .sec:hover{color:#c4460f}

/* --- 7. El boton naranja principal --------------------------------------
   Texto blanco sobre #e2551d daba 3,78:1. El boton es de 16px en negrita, que
   NO califica como texto grande (hace falta 18,66px en negrita), asi que el
   minimo aplicable es 4,5:1 y no lo alcanzaba.

   Se oscurece el extremo claro del degradado lo justo para pasar: #c94914 da
   4,72:1. Sigue siendo el mismo naranja de la marca, apenas mas profundo.

   El hover era `filter:brightness(1.08)`, es decir ACLARAR: empeoraba el
   contraste justo cuando el usuario esta por hacer clic. Ahora oscurece. */
.cta{
  background:linear-gradient(160deg,#b83f0c,#c94914);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 2px 6px rgba(184,63,12,.22),0 10px 22px rgba(184,63,12,.20);
}
.cta:hover{background:linear-gradient(160deg,#a53809,#b8420f);filter:none;color:#fff}
.cta:active{background:#a53809}
.cta.ghost:hover,.cta.ghost:active{box-shadow:none}

/* ==========================================================================
   Rediseno B2B de la home — 11-09-2026.
   Cuatro bloques nuevos. Todo lo demas reusa clases que ya existian
   (.sec2, .plans, .steps, .convert, .grid), a proposito: menos CSS nuevo es
   menos superficie para romper y menos bytes que descargar.
   ========================================================================== */

/* --- franja de confianza, justo debajo del hero ------------------------- */
.strip{background:#f2f6fa;border-top:1px solid #e2e9f1;border-bottom:1px solid #e2e9f1;padding:16px 0}
.stripin{display:flex;flex-wrap:wrap;gap:10px 34px;margin:0;padding:0;list-style:none;
  justify-content:center}
.stripin li{position:relative;padding-left:23px;font-size:.9rem;font-weight:600;color:#24364a}
.stripin li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2px solid #1668b3;border-bottom:2px solid #1668b3;transform:rotate(-45deg)}
.strip .micro{text-align:center;margin:10px 0 0;font-size:.78rem;color:#5b6570}

/* --- vista previa del panel --------------------------------------------- */
.dash{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:center}
.dashtxt h2{margin-bottom:10px}
.dashlist{margin:18px 0 22px;padding:0;list-style:none;display:grid;gap:9px}
.dashlist li{position:relative;padding-left:23px;font-size:.92rem;color:#2c3a4b}
.dashlist li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2px solid #1668b3;border-bottom:2px solid #1668b3;transform:rotate(-45deg)}
.dashshot{margin:0;position:relative}
.dashshot img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #dbe4ee;
  box-shadow:0 6px 26px rgba(12,26,42,.14)}
.dashshot figcaption{position:absolute;top:10px;right:10px;background:rgba(12,26,42,.86);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px}

/* --- industrias, version resumida --------------------------------------- */
.cats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.cats li{border:1px solid #dbe4ee;border-radius:999px;background:#fff;padding:9px 17px;
  font-size:.9rem;font-weight:600;color:#24364a}

/* --- por que HazTeam Ready ---------------------------------------------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 26px;
  margin:22px 0 0;padding:0;list-style:none}
.why li{position:relative;padding-left:25px;font-size:.94rem;color:#2c3a4b}
.why li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:7px;
  border-left:2px solid #1668b3;border-bottom:2px solid #1668b3;transform:rotate(-45deg)}

/* --- dos planes en lugar de cuatro: que no se estiren --------------------- */
.plans2{grid-template-columns:repeat(auto-fit,minmax(260px,340px));justify-content:start}

@media (max-width:820px){
  .dash{grid-template-columns:1fr;gap:24px}
  .dashshot{order:-1}
  .stripin{gap:9px 22px}
}

/* --- ajustes del rediseno, 11-09-2026 ----------------------------------- */
/* .steps numera con un contador; esta variante es para listas que no van
   numeradas (que recibe cada empleado). */
.steps.nonum{counter-reset:none}
.steps.nonum .step{padding-left:0}
.steps.nonum .step::before{display:none}

/* Categorias del curso con su cita reglamentaria. */
.cover{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.cover li{border:1px solid #dbe4ee;border-radius:12px;background:#fff;padding:14px 16px}
.cover li b{display:block;color:#0f2d4a;margin-bottom:3px}
.cover li span{font-size:.8rem;color:#656f80}

/* CTA del hero con su microcopy debajo. */
/* Las tarjetas de plan tienen distinta cantidad de vinetas; sin esto los
   botones quedan a distinta altura y se nota. */
.plan .cta{margin-top:auto}

.hcta{display:flex;flex-direction:column;gap:6px}
.hcta .cta{text-align:center}
.hmicro{font-size:.78rem;color:#656f80;margin:0}
@media (max-width:560px){ .hcta{width:100%} .hcta .cta{width:100%} }