/* =========================================================================
   MIZION · capa de diseño «B» (26-sep-2026)
   Estilo claro tipo Vizitte con los colores y logos de MIZION: fondo blanco,
   titulares Inter muy compactos, botones azul marino, turquesa para chips y
   detalles. Propuesta aprobada: https://claude.ai/artifact/TqFvRH8dwKkU5WuBmVUebf

   NO cambia la estructura ni los textos de ninguna página: se carga DESPUÉS del
   <style> propio de cada página y solo repinta. Quitar esta capa = diseño anterior.
   Se publica en /var/www/mizionacademy_es/assets/ (fuente: IMPREZION/web_assets/).
   ========================================================================= */

/* ---------- Fuentes propias (cero peticiones a Google) ----------
   Truco a propósito: "Sora" y "Poppins" (las fuentes del diseño anterior, que las
   páginas nombran en cientos de reglas y estilos en línea) se declaran aquí como
   la misma Inter. Así todo pasa a Inter sin reescribir cada regla. Montserrat se
   queda solo para el logotipo de texto. */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/inter-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --navy:#081F45;          /* marca: titulares y botón principal */
  --navy2:#0d2c5c;
  --turq:#16C7D8;          /* marca: rellenos y detalles */
  --turq-d:#0B7C88;        /* turquesa para TEXTO sobre blanco (5:1; el anterior #0fa9b8 no llegaba a 3:1) */
  --turq-tint:#E3F8FA;     /* fondo de chips */
  --turq-ink:#0B6F79;      /* texto de chips */
  --ink:#1B2B45;
  --text:#3A4A63;          /* texto corrido */
  --muted:#5D6D86;
  --line:#E1E8F0;
  --line-2:#D9E1EC;
  --gray:#F3F6FB;          /* secciones alternas */
  --b-shadow:0 20px 40px -32px rgba(8,31,69,.38);
  --b-shadow-hover:0 26px 48px -30px rgba(8,31,69,.45);
  --b-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Tipografía ---------- */
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text);font-feature-settings:"cv11","ss01"}
h1,h2,h3,h4,.display{font-family:"Inter",sans-serif;font-weight:800;color:var(--navy)}
h1,h2{letter-spacing:-.035em}
h3,h4{letter-spacing:-.02em}
.section h2{line-height:1.08}
.lead{color:var(--text)}
b,strong{font-weight:700}

/* Etiquetas de sección: de texto espaciado a chip (sello del estilo B) */
.eyebrow,.lema-kick,.map-kick,.ib-eyebrow{display:inline-block;background:var(--turq-tint);color:var(--turq-ink);
  padding:6px 13px;border-radius:99px;font-size:.7rem;letter-spacing:.12em;font-weight:800;line-height:1.4}

/* ---------- Botones ---------- */
.btn{border-radius:10px;font-weight:600;font-family:"Inter",sans-serif}
.btn-primary{background:var(--navy);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--navy2);transform:translateY(-1px);box-shadow:0 14px 26px -16px rgba(8,31,69,.7)}
.btn-ghost,.btn-outline{background:#fff;border:1px solid var(--line-2);color:var(--navy)}
.btn-ghost:hover,.btn-outline:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- Banner de la primera promoción ---------- */
.launch-banner{background:var(--navy)}
.launch-banner a{color:#6FE3EE}

/* ---------- Navegación ---------- */
.nav{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
.nav-links a{color:var(--text)}
.nav-links a:hover{color:var(--navy)}
.aula-link{color:var(--navy)!important;font-weight:600!important;border:1px solid var(--line-2)!important;border-radius:10px!important;
  background:#fff!important;padding:8px 16px!important}
.aula-link:hover{border-color:var(--navy)!important;color:var(--navy)!important}
.present-btn{border-color:var(--line-2);border-radius:10px}
.hamb{border-color:var(--line-2)}

/* ---------- Cabecera (hero): de foto oscura a fondo claro con la foto enmarcada ---------- */
.hero{background:#fff;color:var(--text);padding:40px 0 76px}
.hero h1,.hero h2,.hero h3{color:var(--navy)}
.hero h1{letter-spacing:-.04em;line-height:1.03}
.hero h1 span[style]{color:var(--turq-d)!important}
.hero .grid-map{display:none}
.hero .eyebrow{color:var(--turq-ink)!important}
.hero .sub{color:var(--text)}
.hero .sub b{color:var(--navy)!important}
.hero .tagline{color:var(--turq-d)}
.hero-iso{justify-content:flex-start;margin-bottom:22px}
.hero-iso svg{width:58px;height:58px;filter:none}
.hero-iso svg path{fill:var(--navy)}
.track-pill{border:1px solid var(--line);background:var(--gray);border-radius:12px;padding:4px}
.track-pill a{color:var(--text);border-radius:9px;font-weight:600}
.track-pill a.on{background:var(--navy);color:#fff}
.track-pill a:hover:not(.on){color:var(--navy)}
.hero .chip{border:1px solid var(--line);background:#fff;color:var(--text)}
.hero .chip.start{border-color:var(--turq);background:var(--turq-tint);color:var(--turq-ink)}
.hero-stats{border-top:1px solid var(--line)}
.hero-stats .n{color:var(--navy);letter-spacing:-.03em;font-size:clamp(1.5rem,2.5vw,2.1rem);white-space:nowrap}
.hero-stats .n b{color:var(--turq-d)}
.hero-stats .l{color:var(--muted)}
/* la foto de fondo de cada página pasa a un marco a la derecha (la ruta de la foto
   la pone cada página en su propio bloque, porque es relativa a su carpeta) */
.hero h1{font-size:clamp(2rem,3.9vw,3.2rem);max-width:none}
/* el hueco de la derecha (padding, relativo al ancho de la ventana) y el marco (relativo a
   la caja) se calculan distinto: con estos dos valores quedan ~36 px de separación siempre */
.hero-inner{padding-right:calc(min(44vw,480px) + 40px)}
.hero-inner::after{content:"";position:absolute;right:24px;top:50%;transform:translateY(-50%);height:min(560px,calc(100% - 20px));width:min(42%,460px);border-radius:24px;
  background-color:var(--gray);background-size:cover;background-position:center;box-shadow:0 40px 80px -40px rgba(8,31,69,.55)}
@media(max-width:900px){
  .hero-inner{padding-right:24px}
  .hero-inner::after{position:relative;display:block;right:auto;top:auto;transform:none;width:auto;height:240px;margin-top:36px}
}
@media(max-width:560px){.hero-inner{padding-right:18px}.hero-inner::after{height:200px;border-radius:18px}}

/* ---------- Tarjetas ---------- */
.card,.module,.mission,.goal,.tile,.price-card,.plan,.value,.team,.why-limited,.checks li,.logos-grid .lg{border-color:var(--line)}
.card,.module,.mission,.tile,.price-card,.plan,.team{box-shadow:var(--b-shadow)}
.card:hover,.module:hover,.mission:hover,.price-card:hover,.plan:hover{box-shadow:var(--b-shadow-hover);border-color:var(--line)}
.card .ico{background:var(--turq-tint);color:var(--turq-d)}
.module:before{display:none}                    /* barra de color a la izquierda: fuera en el estilo B */
.module.final{background:#fff}
.module.final .mn{background:var(--turq);color:var(--navy)}
.module .msub,.mission .place,.team .role{color:var(--turq-d)}
.why-limited{border-left:1px solid var(--line);box-shadow:var(--b-shadow)}
.muestra-cta{background:var(--gray);border:1px solid var(--line)}
.offer{background:var(--turq-tint);border:1px solid #BFEFF4}
.tags span{border-color:var(--line)}
.bg-gray{background:var(--gray)}

/* ---------- Listas con ✓: el carácter pasa a icono dibujado ---------- */
.list li:before,.price-card li:before,.plan li:before,.path li:before{content:"";width:16px;height:16px;background:#0E9AA8;
  -webkit-mask:var(--b-check) center/contain no-repeat;mask:var(--b-check) center/contain no-repeat}
.list li:before{top:16px}
.price-card li:before,.plan li:before{top:13px}

/* ---------- Precios ---------- */
.price-card.feat,.plan.feat{border:2px solid var(--navy);box-shadow:0 30px 60px -40px rgba(8,31,69,.55)}
.price-card .flag,.plan .flag{background:var(--navy);color:#fff}
.plan .flag.alt{background:var(--turq);color:var(--navy)}
.plan-period{background:var(--turq-tint);color:var(--turq-ink)}
.price-card .amt,.plan .amt,.amt-compare .now-num{letter-spacing:-.04em}
.amt .was{text-decoration-color:var(--muted)}
.promo span{background:var(--turq-tint);color:var(--turq-ink)}
.plan .btn[style*="background:#fff"]{border:1px solid var(--line-2)!important;color:var(--navy)!important}

/* ---------- Comparativa y preguntas ---------- */
.compare-wrap{border-color:var(--line);box-shadow:var(--b-shadow)}
.faq details,details[style]{border-radius:12px!important;border-color:var(--line)!important}

/* ---------- Bandas azul marino: planas, sin degradados ni brillos ---------- */
.map-band,.trip,.cta{background:var(--navy)}
.cta .btn-primary,.trip .btn-primary,.map-band .btn-primary,.imgband .btn-primary{background:var(--turq);color:var(--navy)}
.cta .btn-primary:hover,.trip .btn-primary:hover{background:#3fd6e3;color:var(--navy)}
.map-kick,.ib-eyebrow,.cta .eyebrow,.trip .eyebrow,.valores-bg .eyebrow{background:rgba(22,199,216,.16);color:#6FE3EE!important}
.imgband::before{background:linear-gradient(180deg,rgba(8,31,69,.74),rgba(8,31,69,.86))}

/* ---------- Contacto: fondo claro y formulario blanco ---------- */
.contact-band{background:var(--gray)}
.contact-split{border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(8,31,69,.5)}
.contact-info{background:var(--navy)}
.contact-form{background:#fff}
.contact-form h3{color:var(--navy)}
.contact-form p.sub{color:var(--muted)}
.contact-form label{color:var(--muted)}
.contact-form form>label[style]{color:var(--text)!important}
.contact-form a[style]{color:var(--turq-d)!important}
.contact-form input,.contact-form textarea,.contact-form select{background:#fff;border:1px solid var(--line-2);color:var(--ink);border-radius:10px}
.contact-form select{color-scheme:light}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#93A1B5}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px rgba(22,199,216,.25)}
.contact-form button{background:var(--navy);color:#fff;border-radius:10px;box-shadow:none;font-weight:700}
.contact-form button:hover{background:var(--navy2)}

/* ---------- Modo Presentar: el contador se lee sobre diapositivas claras y oscuras ---------- */
.present-hud{background:rgba(8,31,69,.88);padding:6px 8px 6px 14px;border-radius:99px}
.pc{color:#fff}

/* ---------- Accesibilidad ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--navy)}
body.present .hero{padding:16px 0}
body.present .hero-iso{margin-bottom:10px}
body.present .hero-iso svg{width:40px;height:40px}
body.present .hero-stats{margin-top:22px;padding-top:16px}

/* ---------- Correcciones de la revisión (26-sep) ---------- */
/* Tabla comparativa: ✗ y ~ casi invisibles (1,5:1 y 2,4:1) → legibles */
.compare .no,.compare .mid{color:#5D6D86}
/* Precios tachados: se leían a 2:1 */
.amt .was,.plan .was,.amt-compare .was-num,.price-card s{color:#6B7A90}
/* Texto turquesa en negrita sobre fondo turquesa claro: rozaba el mínimo */
.offer b,.offer .save{color:#0A6873}
/* «Más de 20 diseños profesionales»: el flex separaba la negrita con huecos de 12 px */
.checks li{display:block;position:relative;padding:14px 18px 14px 46px}
.checks li .ck{position:absolute;left:18px;top:15px}
/* Preguntas frecuentes de Emprendedores: no se veía que se pueden abrir */
#faq summary{display:flex;justify-content:space-between;align-items:center;gap:14px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";flex:0 0 auto;color:var(--turq-d);font-size:1.4rem;font-weight:400;line-height:1;transition:transform .2s}
#faq details[open] summary::after{transform:rotate(45deg)}
/* Tarjetas destacadas con degradado en línea → turquesa claro liso (sin degradados en el estilo B) */
.card[style*="rgba(22,199,216,.1)"]{background:var(--turq-tint)!important;border-color:#BFEFF4}
/* Menú del móvil: el botón «Aula» se pegaba a los bordes de la pantalla */
@media(max-width:900px){.nav-links .aula-link{margin:8px 24px 12px!important;padding:12px 16px!important;justify-content:center}}