/* estilos.css  —  SIASOLIX sitio web V9 */
/* =========================================================
   TEMAS  (se elige en DATOS.tema, al final del archivo)
   Para una temporada nueva: copia un bloque, cámbiale el
   nombre y los colores, y pon ese nombre en DATOS.tema.
   ========================================================= */
body.tema-claro{
  --fondo:#F5F8FC; --tarjeta:#FFFFFF; --borde:#E1E7F0;
  --texto:#0E2244; --sub:#55627A; --marca:#0E2A5C;
  --oro:#E3A21A;   --azul:#1E8FD0; --cabecera:#FFFFFF; --cab-texto:#0E2244;
  --portada:#F5F8FC;
}
/* Tema elegante (modelo 6): fondo claro cálido y títulos con serifa */
body.tema-elegante{
  --fondo:#FBF8F2; --tarjeta:#FFFFFF; --borde:#ECE4D6;
  --texto:#13233F; --sub:#5E6675; --marca:#13233F;
  --oro:#C9962B;   --azul:#2B6CA3; --cabecera:#FFFFFF; --cab-texto:#13233F;
  --portada:#FBF8F2;
}
/* Tema acero: azul acero de ingeniería, carbón y turquesa eléctrico de la IA */
body.tema-acero{
  --fondo:#0F1418; --tarjeta:#161E25; --borde:#27343F;
  --texto:#E7EEF3; --sub:#9DABB8; --marca:#E7EEF3;
  --oro:#18E0C2;   --azul:#6E9CC4; --cabecera:#0A0E11; --cab-texto:#E7EEF3;
  --portada:#0F1418;
}
body.tema-oscuro{
  --fondo:#0A1A33; --tarjeta:#10264A; --borde:#1E3A66;
  --texto:#F1F5FB; --sub:#A9B6CC; --marca:#F1F5FB;
  --oro:#F2B22E;   --azul:#4DB3EE; --cabecera:#081528; --cab-texto:#F1F5FB;
  --portada:#0A1A33;
}
:root{ --t:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif; --wa:#1E8F4E; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fondo);color:var(--texto);font:17px/1.6 var(--t)}
a{color:var(--azul)}
:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
h1,h2,h3{line-height:1.12;margin:0 0 .45em;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.2vw,3.7rem);font-weight:800}
h1 em{font-style:normal;color:var(--oro)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800}
h3{font-size:1.12rem;font-weight:700}
p{margin:0 0 1em;max-width:62ch}
.envoltura{max-width:1160px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
.raya{display:flex;align-items:center;gap:12px;color:var(--sub);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.raya::before{content:"";width:34px;height:4px;border-radius:2px;background:var(--oro)}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px}

/* ===== Cabecera ===== */
header{position:sticky;top:0;z-index:10;background:var(--cabecera);border-bottom:1px solid var(--borde)}
header .envoltura{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cab-texto)}
.logo .h{height:38px;width:auto}
.logo .i{height:40px;width:40px;border-radius:22%;display:none}
.logo .txt{display:none;font-weight:800;font-size:1.3rem;letter-spacing:.04em}
.logo .txt b{color:var(--oro)}
body.modo-oscuro .logo .h{display:none}
body.modo-oscuro .logo .i, body.modo-oscuro .logo .txt{display:inline-block}
nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
nav a{color:var(--cab-texto);text-decoration:none;font-weight:600;font-size:.95rem;opacity:.85}
nav a:hover{opacity:1;color:var(--oro)}
@media(max-width:860px){nav{display:none}}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem var(--t);padding:13px 22px;border-radius:10px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#17733e}
.btn-oro{background:var(--oro);color:#0E2244}
.btn-oro:hover{filter:brightness(.95)}
.btn-borde{border-color:var(--wa);color:var(--wa);background:transparent;padding:10px 18px}
body.modo-oscuro .btn-borde{border-color:var(--oro);color:var(--oro)}
.btn-borde:hover{background:rgba(30,143,78,.08)}
.btn svg{width:20px;height:20px;flex:none}

/* ===== Portada ===== */
.portada{background:var(--portada);padding:48px 0 0}
.portada .cabeza{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center}
.portada .intro{font-size:1.18rem;color:var(--sub)}
.portada .foto{width:100%;height:auto;border-radius:18px;display:block}
body.modo-oscuro .portada .foto{border:1px solid var(--borde)}
@media(max-width:900px){.portada .cabeza{grid-template-columns:1fr}.portada .foto{max-width:560px}}

/* ===== Selector de público ===== */
.selector{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 0}
.selector button{
  all:unset;cursor:pointer;display:flex;gap:16px;align-items:center;padding:18px 20px;
  background:var(--tarjeta);border:2px solid var(--borde);border-radius:14px;color:var(--texto);
}
.selector .ico{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(30,143,208,.12);flex:none}
.selector .ico svg{width:28px;height:28px;fill:var(--marca)}
.selector b{display:block;font-size:1.2rem}
.selector span.d{display:block;color:var(--sub);font-size:.95rem}
.selector button:hover{border-color:var(--azul)}
.selector button[aria-selected="true"]{background:#0E2A5C;border-color:var(--oro);color:#fff;box-shadow:0 5px 0 var(--oro)}
.selector button[aria-selected="true"] span.d{color:#C9D4E6}
.selector button[aria-selected="true"] .ico{background:rgba(255,255,255,.12)}
.selector button[aria-selected="true"] .ico svg{fill:var(--oro)}
.selector button:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
@media(max-width:860px){.selector{grid-template-columns:1fr}}

.panel{padding-top:44px}
.panel[hidden]{display:none}
.servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.servicio{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px}
.servicio .ico2{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;background:rgba(227,162,26,.15)}
.servicio .ico2 svg{width:30px;height:30px;fill:var(--marca)}
.servicio p{margin:0;color:var(--sub);font-size:.95rem}
.servicio h3{margin-bottom:4px}
.etiqueta{display:inline-block;font-size:.75rem;font-weight:700;background:var(--oro);color:#0E2244;padding:1px 8px;border-radius:6px;margin-left:6px;vertical-align:middle}
@media(max-width:900px){.servicios{grid-template-columns:1fr}}
@media(max-width:560px){.servicio{grid-template-columns:1fr}.servicio .ico2{display:none}}

/* ===== Significado de la marca ===== */
.siglas{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:28px}
.sigla{padding:22px;border-left:1px solid var(--borde);text-align:center}
.sigla:first-child{border-left:0}
.sigla strong{display:block;font-size:2.2rem;font-weight:800;color:var(--marca);line-height:1}
.sigla:nth-child(2) strong{color:var(--azul)}
.sigla:nth-child(3) strong{color:var(--oro)}
.sigla span{display:block;margin-top:8px;color:var(--sub);font-weight:600}
@media(max-width:700px){.siglas{grid-template-columns:1fr 1fr}.sigla:nth-child(3){border-left:0}}

/* ===== Catálogo ===== */
.catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;margin-top:28px}
.producto{display:flex;flex-direction:column;overflow:hidden}
.producto .img{aspect-ratio:16/9;background:rgba(30,143,208,.10) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:.9rem}
.producto .cuerpo{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.producto .tipo{font-size:.85rem;color:var(--azul);font-weight:700}
.producto .precio{font-weight:800;font-size:1.45rem;margin-top:auto}
.producto .precio s{font-size:.95rem;color:var(--sub);font-weight:600;margin-left:6px}
.producto .btn{margin-top:10px;justify-content:center}

/* Pasos de compra: es una secuencia, por eso van numerados */
.pasos{counter-reset:paso;list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pasos li{counter-increment:paso;padding:18px;border-top:4px solid var(--oro);background:var(--tarjeta);border-radius:0 0 12px 12px}
.pasos li::before{content:counter(paso);display:block;font-weight:800;font-size:1.9rem;color:var(--azul);line-height:1;margin-bottom:6px}
.pasos p{font-size:.95rem;color:var(--sub);margin:0}
@media(max-width:860px){.pasos{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.pasos{grid-template-columns:1fr}}

/* ===== Empresas ===== */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dos .tarjeta{padding:30px}
.dos .oscura{background:#0E2A5C;color:#fff;border-color:#0E2A5C}
.dos .oscura p{color:#C9D4E6}
@media(max-width:860px){.dos{grid-template-columns:1fr}}

/* ===== Trabaja con nosotros ===== */
.roles{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px;padding:0;list-style:none}
.roles li{border:2px solid var(--marca);padding:6px 16px;border-radius:999px;font-weight:700;background:var(--tarjeta)}
.requisitos{padding-left:1.2em}
.aviso{font-size:.88rem;color:var(--sub);margin-top:14px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ===== Pie ===== */
footer{background:#081A36;color:#C9D4E6;padding:52px 0 28px}
footer a{color:#fff}
footer h3{color:#fff}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
footer ul{list-style:none;padding:0;margin:0}
footer .lema{color:var(--oro);font-weight:700}
footer .legal{margin-top:32px;font-size:.85rem;border-top:1px solid #23406b;padding-top:16px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}

.wa-flotante{position:fixed;right:18px;bottom:18px;z-index:20;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:999px;display:flex;gap:8px;align-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.wa-flotante svg{width:22px;height:22px}

/* ===== Videos de muestra (nuevo en V3) ===== */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:24px}
.video{overflow:hidden}
.video .marco{position:relative;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .cuerpo{padding:14px 18px}
.video .para{font-size:.85rem;color:var(--azul);font-weight:700}
.producto .muestra{font-size:.92rem;font-weight:700}

/* ===== Aviso de error de configuración ===== */
.error-config{background:#B91C1C;color:#fff;padding:14px 20px;font-weight:700;text-align:center}


/* =====================================================================
   V4: páginas separadas, secciones marcadas, caja de perfil, buscador
   ===================================================================== */

/* ---- Cabecera con menú y botón aparte ---- */
header .envoltura{gap:16px}
nav a.activo{opacity:1;color:var(--oro);box-shadow:inset 0 -3px 0 var(--oro)}
nav a{padding:6px 0}
.btn-trabaja{margin-left:8px;border:2px solid var(--marca);color:var(--cab-texto);background:transparent;padding:8px 14px;font-size:.92rem;border-radius:999px}
.btn-trabaja:hover,.btn-trabaja.activo{background:var(--oro);border-color:var(--oro);color:#0E2244}
.menu-movil{display:none;margin-left:auto;background:transparent;border:2px solid var(--borde);color:var(--cab-texto);border-radius:10px;padding:8px 12px;font:700 .95rem var(--t);cursor:pointer}
@media(max-width:960px){
  .menu-movil{display:inline-block}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cabecera);border-bottom:1px solid var(--borde);flex-direction:column;gap:0;padding:8px 20px 16px;margin:0}
  nav a{padding:12px 0;border-bottom:1px solid var(--borde)}
  header.abierto nav{display:flex}
  .btn-trabaja{margin:12px 0 0;text-align:center;justify-content:center}
}
header{position:sticky}

/* ---- Secciones bien separadas ---- */
.seccion{padding:80px 0;border-top:1px solid var(--borde)}
.seccion.alterna{background:var(--tarjeta)}
body.modo-oscuro .seccion.alterna{background:#0D2140}
.titulo-seccion{display:flex;gap:18px;align-items:flex-start;margin-bottom:28px}
.titulo-seccion .insignia{flex:none;width:56px;height:56px;border-radius:14px;background:var(--marca);display:grid;place-items:center}
.titulo-seccion .insignia svg{width:28px;height:28px;fill:var(--oro)}
body.modo-oscuro .titulo-seccion .insignia{background:var(--oro)}
body.modo-oscuro .titulo-seccion .insignia svg{fill:#0E2244}
.titulo-seccion .nombre{display:inline-block;font-size:.85rem;font-weight:800;color:var(--azul);margin-bottom:4px}
.titulo-seccion h2{margin:0 0 6px}
.titulo-seccion p{margin:0;color:var(--sub)}

/* ---- Caja de perfil: lo que cambia está dentro del cuadro ---- */
.caja-perfil{border:2px solid var(--marca);border-radius:18px;overflow:hidden;background:var(--tarjeta)}
body.modo-oscuro .caja-perfil{border-color:var(--borde)}
.caja-perfil .encabezado{padding:16px 22px;background:var(--marca);color:#fff;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.caja-perfil .encabezado span{font-weight:400;color:#C9D4E6;font-size:.95rem}
.caja-perfil .selector{margin:0;padding:18px 18px 0;gap:12px}
.caja-perfil .selector button{border-radius:14px 14px 0 0;border-bottom:0;box-shadow:none}
.caja-perfil .selector button[aria-selected="true"]{box-shadow:none;background:var(--fondo);color:var(--texto);border-color:var(--oro);border-width:2px 2px 0}
.caja-perfil .selector button[aria-selected="true"] span.d{color:var(--sub)}
.caja-perfil .selector button[aria-selected="true"] .ico{background:var(--oro)}
.caja-perfil .selector button[aria-selected="true"] .ico svg{fill:#0E2244}
.caja-perfil .panel{padding:26px 22px 28px;background:var(--fondo);border-top:2px solid var(--oro);margin-top:-2px}
.caja-perfil .panel h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
@media(max-width:860px){
  .caja-perfil .selector{padding:14px 14px 0;grid-template-columns:1fr}
  .caja-perfil .selector button{border-radius:12px;border-bottom:2px solid var(--borde)}
  .caja-perfil .selector button[aria-selected="true"]{border-width:2px}
  .caja-perfil .panel{border-top:0;margin-top:14px}
}

/* ---- Buscador de cursos y herramientas ---- */
.buscador{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:8px}
.buscador .campo{flex:1 1 280px;position:relative}
.buscador .campo svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:var(--sub)}
.buscador input{width:100%;font:1rem var(--t);padding:13px 14px 13px 44px;border:2px solid var(--borde);border-radius:12px;background:var(--tarjeta);color:var(--texto)}
.buscador input:focus{border-color:var(--azul);outline:none}
.filtros{display:flex;gap:8px;flex-wrap:wrap}
.filtros button{font:700 .92rem var(--t);padding:9px 16px;border-radius:999px;border:2px solid var(--borde);background:var(--tarjeta);color:var(--texto);cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:#fff}
body.modo-oscuro .filtros button[aria-pressed="true"]{background:var(--oro);border-color:var(--oro);color:#0E2244}
.conteo{color:var(--sub);font-size:.92rem;margin:6px 0 0}
.sin-resultados{padding:28px;text-align:center;color:var(--sub)}
.catalogo{margin-top:18px}

/* ---- Invitación a trabajar (al final del inicio) ---- */
.franja{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:26px 30px}
.franja p{margin:0;color:var(--sub)}

/* ---- Página Nosotros ---- */
.portada-simple{padding:64px 0 56px;background:var(--portada)}
.portada-simple .logo-grande{height:72px;width:auto;margin-bottom:18px}
body.modo-oscuro .portada-simple .logo-grande{background:#fff;padding:10px 16px;border-radius:12px}
.portada-simple .lema{font-size:1.25rem;font-weight:700;color:var(--oro);margin-bottom:10px}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mv .tarjeta{padding:28px}
.mv .tarjeta h3{font-size:1.35rem;color:var(--azul)}
@media(max-width:800px){.mv{grid-template-columns:1fr}}
.lemas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lemas blockquote{margin:0;padding:24px;border-left:5px solid var(--oro);background:var(--tarjeta);border-radius:0 14px 14px 0;font-size:1.12rem;font-weight:700}
@media(max-width:800px){.lemas{grid-template-columns:1fr}}
.proyectos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.proyecto{overflow:hidden}
.proyecto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.proyecto .cuerpo{padding:16px 18px}
.proyecto .anio{font-size:.85rem;color:var(--azul);font-weight:700}
.marca-piezas{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;align-items:stretch}
.marca-piezas .tarjeta{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.marca-piezas img{max-width:100%;max-height:110px;width:auto}
.marca-piezas small{color:var(--sub)}
.paleta{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px}
.paleta div{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem}
.paleta i{width:34px;height:34px;border-radius:50%;display:inline-block;border:1px solid var(--borde)}
@media(max-width:800px){.marca-piezas{grid-template-columns:1fr}}

/* ---- Página Trabaja con nosotros ---- */
.roles-tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.roles-tarjetas .tarjeta{padding:20px}
.roles-tarjetas h3{margin-bottom:4px}
.roles-tarjetas p{margin:0;color:var(--sub);font-size:.95rem}
@media(max-width:800px){.roles-tarjetas{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.roles-tarjetas{grid-template-columns:1fr}}


/* =====================================================================
   V5: tema elegante, íconos de las siglas, proyectos con imagen
   ===================================================================== */
body.tema-elegante h1, body.tema-elegante h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:0}
body.tema-elegante h1 em{color:var(--oro)}
body.tema-elegante .titulo-seccion .insignia{background:var(--marca)}
body.tema-elegante .seccion.alterna{background:#FFFFFF}
.sigla img{display:block;margin:0 auto 10px;width:84px;height:84px;border-radius:50%;object-fit:cover}
body.modo-oscuro .sigla img{background:#fff}
.proyecto img{aspect-ratio:16/9}
.proyecto a.foto{display:block;position:relative}
.proyecto .referencial{position:absolute;left:10px;bottom:10px;background:rgba(14,34,68,.82);color:#fff;font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:6px}
.portada-simple .logo-grande{height:84px}
body.modo-oscuro .portada-simple .logo-grande{background:#fff}
/* La franja "¿Quién eres?" siempre azul oscuro (en tema oscuro --marca es claro) */
.caja-perfil .encabezado{background:#0E2A5C}

/* =====================================================================
   V6: carrusel de proyectos al inicio de Nosotros
   ===================================================================== */
.carrusel{position:relative;padding:0;background:#081A36;overflow:hidden}
.carrusel .pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.carrusel .pista::-webkit-scrollbar{display:none}
.carrusel figure{flex:0 0 100%;margin:0;scroll-snap-align:start;position:relative}
.carrusel img{display:block;width:100%;height:min(62vh,600px);object-fit:cover}
.carrusel .referencial{position:absolute;right:14px;bottom:14px;background:rgba(8,26,54,.7);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:6px}
.carrusel .flecha{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:#0E2244;font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.carrusel .flecha:hover{background:#fff}
.carrusel .ant{left:16px}.carrusel .sig{right:16px}
.carrusel .puntos{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px}
.carrusel .puntos button{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.55);cursor:pointer}
.carrusel .puntos button[aria-current="true"]{background:var(--oro);width:28px;border-radius:6px}
@media(max-width:700px){.carrusel img{height:auto;aspect-ratio:16/9}.carrusel .flecha{width:38px;height:38px;font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){.carrusel .pista{scroll-behavior:auto}}

/* =====================================================================
   V7: páginas legales, libro de reclamaciones y pie con enlaces legales
   ===================================================================== */
.texto-legal{max-width:820px}
.texto-legal h2{font-size:1.3rem;margin:28px 0 8px}
.texto-legal h2:first-child{margin-top:0}
.texto-legal ul,.texto-legal ol{padding-left:1.3em;margin:0 0 1em}
.texto-legal li{margin-bottom:6px}
.legal-datos{padding:24px}
.legal-datos p{margin:0 0 6px}
footer a.libro{display:inline-flex;align-items:center;gap:8px;font-weight:700;border:1px solid #33506f;padding:6px 12px;border-radius:8px;text-decoration:none;margin-bottom:8px}
footer a.libro svg{width:18px;height:18px;fill:var(--oro)}
footer a.libro:hover{border-color:var(--oro)}
/* Un elemento oculto siempre queda oculto, aunque sea un botón */
[hidden]{display:none !important}

/* =====================================================================
   V8: subpáginas, tarjetas de acceso, detalle de producto
   ===================================================================== */
nav{gap:18px}
.encabezado-pagina{padding:48px 0 40px;border-bottom:1px solid var(--borde)}
.accesos{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.acceso{display:flex;flex-direction:column;gap:6px;padding:22px;text-decoration:none;color:var(--texto);transition:border-color .15s}
.acceso:hover{border-color:var(--oro)}
.acceso .insignia{width:48px;height:48px;border-radius:12px;background:var(--marca);display:grid;place-items:center;margin-bottom:6px}
.acceso .insignia svg{width:24px;height:24px;fill:var(--oro)}
body.modo-oscuro .acceso .insignia{background:var(--oro)}
body.modo-oscuro .acceso .insignia svg{fill:#0E2244}
.acceso .dato{font-size:.8rem;font-weight:700;color:var(--azul)}
.acceso h3{margin:0}
.acceso p{margin:0;color:var(--sub);font-size:.93rem;flex:1}
.acceso .ir{margin-top:8px;font-weight:700;color:var(--wa)}
body.modo-oscuro .acceso .ir{color:var(--oro)}
@media(max-width:1060px){.accesos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.accesos{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.accesos{grid-template-columns:1fr}}
.producto a.img{text-decoration:none}
.producto .titulo-producto{color:inherit;text-decoration:none}
.producto .titulo-producto:hover{color:var(--azul)}
.acciones-producto{display:flex;gap:8px;margin-top:10px}
.acciones-producto .btn{flex:1;justify-content:center;padding:10px 12px;margin:0}
.migas{font-size:.9rem;color:var(--sub);margin-bottom:14px}
.migas a{color:var(--azul)}
.detalle-cabeza{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.detalle-cabeza .tipo{display:block;font-size:.9rem;font-weight:700;color:var(--azul);margin-bottom:6px}
.detalle-cabeza .foto{width:100%;border-radius:16px;border:1px solid var(--borde)}
.precio.grande{font-size:2rem;font-weight:800;margin:6px 0 16px}
.precio.grande s{font-size:1.1rem;color:var(--sub);margin-left:8px;font-weight:600}
@media(max-width:860px){.detalle-cabeza{grid-template-columns:1fr}}
.ficha{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0;margin:0;padding:8px}
.ficha div{padding:14px 16px;border-bottom:1px solid var(--borde)}
.ficha dt{font-size:.82rem;font-weight:700;color:var(--azul)}
.ficha dd{margin:2px 0 0;font-weight:600}
.temario{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.temario .bloque{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:20px;border-top:4px solid var(--oro)}
.temario h3{margin:0 0 10px}
.temario ol{list-style:none;margin:0;padding:0}
.temario li{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed var(--borde)}
.temario li:last-child{border-bottom:0}
.temario .n{font-weight:800;color:var(--azul);min-width:28px}
.incluye{padding:28px}
.incluye ul{padding-left:1.2em;columns:2;column-gap:32px}
@media(max-width:700px){.incluye ul{columns:1}}
.preguntas{display:grid;gap:12px;max-width:860px}
.preguntas details{padding:16px 20px}
.preguntas summary{font-weight:700;cursor:pointer}
.preguntas details p{margin:10px 0 0;color:var(--sub)}

/* =====================================================================
   V9: tema acero, planes de suscripción, imagen del contenido
   ===================================================================== */
body.tema-acero .seccion.alterna{background:#131A20}
body.tema-acero .caja-perfil .encabezado, body.tema-acero .dos .oscura{background:#22384C}
body.tema-acero .selector button[aria-selected="true"]{border-color:var(--oro)}
body.tema-acero footer{background:#0A0E11}
body.tema-acero .btn-trabaja{border-color:var(--oro)}
.grupo-planes{margin-bottom:42px}
.grupo-planes:last-child{margin-bottom:0}
.grupo-planes > h2{margin-bottom:6px}
.grupo-planes > p{color:var(--sub)}
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:18px}
.plan{display:flex;flex-direction:column;gap:10px;padding:26px;position:relative}
.plan.destacado{border:2px solid var(--oro);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.plan .cinta{position:absolute;top:-12px;left:24px;background:var(--oro);color:#0E2244;font-size:.78rem;font-weight:800;padding:3px 10px;border-radius:6px}
.plan h3{font-size:1.25rem;margin:0}
.plan .para{font-size:.85rem;font-weight:700;color:var(--azul)}
.plan .monto{font-size:2.2rem;font-weight:800;line-height:1}
.plan .monto small{font-size:.95rem;font-weight:600;color:var(--sub)}
.plan ul{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px;flex:1}
.plan li{padding-left:26px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:3px solid var(--oro);border-bottom:3px solid var(--oro);transform:rotate(-45deg)}
.plan .limite{font-size:.88rem;color:var(--sub);border-top:1px dashed var(--borde);padding-top:10px}
.plan .btn{justify-content:center;margin-top:6px}
.imagen-contenido{display:block;margin:0 0 22px}
.imagen-contenido img{width:100%;max-width:1000px;border-radius:14px;border:1px solid var(--borde);display:block}
.accesos{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.accesos{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.accesos{grid-template-columns:1fr}}