/* ---------------------------------------------------------------------------
   prevencionsiglo21.com - hoja de estilo unica (se descarga una vez y sirve
   para las 200 paginas). Movil primero; lo de escritorio son anadidos.
   Paleta sacada del logotipo: azul celeste (#8BAADA) y naranja (#F4BF72),
   con un azul profundo para el contraste y los degradados.
   --------------------------------------------------------------------------- */
:root{
  --tinta:#12213A; --tinta-suave:#526078;
  --fondo:#FFFFFF; --fondo-alt:#F5F8FC; --linea:#D9E2EE;
  --azul:#1D5DA8; --azul-osc:#0D3A6B; --azul-prof:#082646; --celeste:#8BAADA; --cielo:#EAF1FA;
  --naranja:#F39C1F; --naranja-claro:#F4BF72; --naranja-osc:#D07E0B;
  --verde:#1E8E5A;
  --sombra:0 1px 2px rgba(18,33,58,.06),0 6px 16px rgba(18,33,58,.06);
  --sombra-alta:0 14px 34px rgba(13,58,107,.18);
  --ancho:1160px; --radio:12px;
  --t-base:16.5px;
  --t-h1:clamp(27px,4.4vw,40px);
  --t-h2:clamp(21px,2.7vw,27px);
  --t-h3:18px;
  --t-entradilla:18px;
  --t-pequeno:14.5px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--fondo);color:var(--tinta);overflow-x:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-base);line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--naranja);outline-offset:2px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 18px}
.saltar{position:absolute;left:-9999px;top:0;background:var(--azul);color:#fff;padding:10px 16px;z-index:100}
.saltar:focus{left:0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- Texto ---------------------------------------------------------------- */
h1{font-size:var(--t-h1);line-height:1.15;margin:12px 0 12px;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:var(--t-h2);line-height:1.25;margin:34px 0 12px;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:var(--t-h3);line-height:1.35;margin:24px 0 8px}
h4{font-size:16.5px;margin:20px 0 6px}
p{margin:0 0 14px}
li{margin-bottom:6px}
.entradilla{font-size:var(--t-entradilla);color:var(--tinta-suave);line-height:1.55;max-width:66ch}
.gris{color:var(--tinta-suave)}
.centro{text-align:center}
.centro .entradilla{margin-left:auto;margin-right:auto}
hr{border:0;border-top:1px solid var(--linea);margin:30px 0}
.sello{display:inline-block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--azul);background:var(--cielo);border-radius:99px;padding:5px 13px;margin:0 0 10px}

/* --- Barra de telefonos y cabecera ---------------------------------------- */
.barra-tel{background:linear-gradient(90deg,var(--azul-prof),var(--azul-osc));color:#fff;font-size:13.5px}
.barra-tel .contenedor{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;justify-content:center;padding:6px 18px}
.barra-tel a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.barra-tel a:hover{text-decoration:underline}
.barra-tel .tel-fuerte{font-size:14.5px;font-weight:800;letter-spacing:.02em}
.barra-tel .horario{color:rgba(255,255,255,.78);display:none}
@media (min-width:760px){.barra-tel .horario{display:inline}}

.cabecera{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--linea);box-shadow:0 2px 14px rgba(13,58,107,.05)}
.cabecera .contenedor{display:flex;align-items:center;gap:14px;padding-top:9px;padding-bottom:9px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{width:162px;height:52px;object-fit:contain}
@media (min-width:900px){.logo img{width:186px;height:60px}}
.abrir-menu{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--azul);color:#fff;border:0;border-radius:10px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.abrir-menu .ham{width:18px;height:2px;background:#fff;position:relative;display:block}
.abrir-menu .ham::before,.abrir-menu .ham::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
.abrir-menu .ham::before{top:-6px}.abrir-menu .ham::after{top:6px}
.cab-acciones{display:none;margin-left:auto;gap:8px;align-items:center}
@media (min-width:900px){.abrir-menu{display:none}.cab-acciones{display:flex}}
.boton.peq{padding:9px 15px;font-size:14px;min-height:40px}

/* Menu: en movil, lista desplegable; en escritorio, barra con submenus */
.menu{display:none;background:var(--fondo-alt);border-top:1px solid var(--linea)}
.menu.abierto{display:block}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{margin:0}
.menu a,.menu .desplegar{display:block;padding:12px 16px;color:var(--tinta);text-decoration:none;font-weight:600;font-size:15px;border-bottom:1px solid var(--linea);background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;font-family:inherit;cursor:pointer}
.menu a[aria-current="page"]{color:var(--azul);background:var(--cielo)}
.menu .con-sub{position:relative}
.menu .con-sub>a{padding-right:52px}
.menu .desplegar{position:absolute;right:0;top:0;width:48px;height:47px;padding:0;border:0;border-left:1px solid var(--linea);display:flex;align-items:center;justify-content:center}
.menu .desplegar::after{content:"";width:9px;height:9px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);transition:transform .2s}
.menu .desplegar[aria-expanded="true"]::after{transform:rotate(-135deg)}
.menu .sub{display:none;background:#fff}
.menu .sub.abierto{display:block}
.menu .sub a{padding-left:30px;font-weight:500;font-size:14.5px}
.menu .movil-extra{padding:14px 16px;display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:900px){
  .menu{display:block;background:transparent;border-top:0}
  .menu>.contenedor{padding-top:0;padding-bottom:0}
  .menu>.contenedor>ul{display:flex;align-items:center;gap:2px}
  .menu li{position:relative}
  .menu a,.menu .desplegar{border:0;padding:11px 13px;font-size:14.5px;border-radius:10px;transition:background .18s,color .18s}
  .menu>.contenedor>ul>li>a{position:relative}
  .menu>.contenedor>ul>li>a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--azul),var(--naranja));transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  .menu>.contenedor>ul>li>a:hover::after,.menu>.contenedor>ul>li>a[aria-current="page"]::after{transform:scaleX(1)}
  .menu a:hover{color:var(--azul);background:var(--cielo)}
  .menu a[aria-current="page"]{background:transparent}
  .menu .con-sub>a{padding-right:26px}
  .menu .con-sub>a::before{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6}
  .menu .desplegar{display:none}
  .menu .sub{display:block;position:absolute;left:0;top:100%;min-width:270px;background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra-alta);padding:8px;
    opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:50}
  .menu .con-sub:hover>.sub,.menu .con-sub:focus-within>.sub,.menu .sub.abierto{opacity:1;visibility:visible;transform:none}
  .menu .sub a{padding:9px 12px;font-size:14px;border-radius:8px;white-space:nowrap}
  .menu .sub .sep{height:1px;background:var(--linea);margin:6px 8px}
  .menu .movil-extra{display:none}
}

/* --- Migas ---------------------------------------------------------------- */
.migas{font-size:13px;color:var(--tinta-suave);padding:0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.migas li{margin:0}
.migas li::after{content:"\203A";margin-left:6px;color:var(--linea)}
.migas li:last-child::after{content:""}
.migas a{color:var(--tinta-suave)}

/* --- Botones: barrido de luz al pasar y borde laser en los principales ---- */
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.boton{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--azul),var(--azul-osc));color:#fff;text-decoration:none;padding:13px 22px;border-radius:12px;border:0;
  font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;min-height:48px;box-shadow:0 4px 14px rgba(29,93,168,.22);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.boton::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-140%) skewX(-12deg);transition:transform .7s ease}
.boton:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(29,93,168,.34);filter:saturate(1.1)}
.boton:hover::after{transform:translateX(140%) skewX(-12deg)}
.boton:active{transform:translateY(0);box-shadow:0 2px 8px rgba(29,93,168,.25)}
.boton.naranja{background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));box-shadow:0 4px 14px rgba(243,156,31,.3);color:#1a1200}
.boton.naranja:hover{box-shadow:0 10px 24px rgba(243,156,31,.4)}
.boton.hueco{background:transparent;color:var(--azul);border:2px solid var(--azul);box-shadow:none}
.boton.hueco:hover{background:var(--cielo);color:var(--azul-osc);box-shadow:0 8px 20px rgba(29,93,168,.16)}
.boton.blanco{background:#fff;color:var(--azul-osc);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.boton.blanco:hover{color:var(--azul)}
.boton.grande{font-size:17px;padding:16px 28px;min-height:56px}
/* El laser: un haz de luz que recorre el borde sin parar. Es un degradado
   conico que gira por detras del boton; el fondo de dentro lo tapa salvo en
   los 2 px del borde. Solo transform, asi que no cuesta nada. */
.boton.laser{overflow:hidden;background:none;box-shadow:0 6px 18px rgba(13,58,107,.28)}
.boton.laser::before{content:"";position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;z-index:-2;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--celeste) 74%,#fff 80%,var(--naranja-claro) 86%,transparent 96%);
  transform:translate(-50%,-50%) rotate(0deg);animation:girar 3.2s linear infinite}
.boton.laser>span{position:relative;z-index:2}
.boton.laser .fondo{content:"";position:absolute;inset:2px;border-radius:10px;z-index:-1;background:linear-gradient(135deg,var(--azul),var(--azul-osc))}
.boton.laser.naranja .fondo{background:linear-gradient(135deg,var(--naranja),var(--naranja-osc))}
.boton.laser:hover::before{animation-duration:1.1s}
@keyframes girar{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .boton:hover{transform:none}.boton::after{display:none}
  .boton.laser::before{animation:none;background:linear-gradient(135deg,var(--celeste),var(--naranja-claro))}
}

/* --- Portada: cabecera con degradado, luz que respira y parallax ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  margin:0 calc(50% - 50vw);padding:54px max(18px,calc(50vw - var(--ancho)/2 + 18px)) 70px;
  background:linear-gradient(140deg,var(--azul-prof) 0%,var(--azul-osc) 42%,var(--azul) 72%,#3F7FC6 100%);
  box-shadow:0 18px 40px -18px rgba(8,38,70,.6)}
.hero-capa{position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:transform}
.hero-luz{inset:-25% -12% -30%;
  background:radial-gradient(42rem 26rem at 78% 10%,rgba(139,170,218,.45),transparent 62%),
             radial-gradient(34rem 24rem at 6% 96%,rgba(244,191,114,.30),transparent 64%),
             radial-gradient(26rem 20rem at 46% 60%,rgba(255,255,255,.10),transparent 66%);
  animation:respira 14s ease-in-out infinite alternate}
@keyframes respira{from{transform:scale(1) translateY(0)}to{transform:scale(1.07) translateY(-12px)}}
.hero-malla{inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(60rem 30rem at 70% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(60rem 30rem at 70% 40%,#000 30%,transparent 80%)}
/* las cruces del logotipo, flotando muy suaves al fondo */
.hero-cruces{inset:0;color:rgba(255,255,255,.08);font-size:0}
.hero-cruces i{position:absolute;display:block;width:1em;height:1em;font-size:var(--s,60px);animation:flotar var(--d,9s) ease-in-out infinite alternate}
.hero-cruces i::before,.hero-cruces i::after{content:"";position:absolute;background:currentColor;border-radius:.1em}
.hero-cruces i::before{left:38%;top:0;width:24%;height:100%}
.hero-cruces i::after{top:38%;left:0;height:24%;width:100%}
@keyframes flotar{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-22px) rotate(8deg)}}
.hero-txt{position:relative;z-index:2;max-width:46rem}
.hero h1{color:#fff;margin:10px 0 12px;font-size:clamp(28px,4.8vw,46px);text-shadow:0 2px 18px rgba(4,16,34,.4)}
.hero .entradilla{color:rgba(255,255,255,.9);font-size:clamp(16.5px,1.9vw,19px);max-width:56ch;text-shadow:0 1px 10px rgba(4,16,34,.35)}
.hero .sello{background:rgba(4,16,34,.28);color:#CFE0F7;border:1px solid rgba(207,224,247,.35)}
.hero .acciones{margin:18px 0 8px}
.hero-datos{list-style:none;display:flex;flex-wrap:wrap;gap:14px 34px;margin:18px 0 0;padding:0}
.hero-datos li{margin:0;cursor:default;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.hero-datos b{display:block;font-size:27px;line-height:1.15;letter-spacing:-.01em;transition:text-shadow .25s}
.hero-datos b i{font-style:normal;font-size:15px;opacity:.75}
.hero-datos span{font-size:13.5px;color:rgba(255,255,255,.8)}
.hero-datos li:hover{transform:scale(1.1)}
.hero-datos li:hover b{text-shadow:0 0 14px rgba(255,255,255,.9),0 0 34px rgba(244,191,114,.75)}
.dato-enlace{color:inherit;text-decoration:none}
.dato-enlace span{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
/* Los dos paneles de la portada (cursos y reconocimientos), como cristal */
.hero-paneles{position:relative;z-index:2;display:grid;gap:14px;grid-template-columns:1fr;margin:30px 0 0}
@media (min-width:760px){.hero-paneles{grid-template-columns:1fr 1fr}}
.panel{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#fff;padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(4,16,34,.25);position:relative;overflow:hidden;
  transition:transform .32s cubic-bezier(.34,1.4,.64,1),box-shadow .3s,background .3s}
.panel::before{content:"";position:absolute;top:-60%;bottom:-60%;width:90px;left:-140px;transform:skewX(-18deg);opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 50%,transparent)}
.panel:hover{transform:scale(1.03) translateY(-3px);background:rgba(255,255,255,.16);box-shadow:0 18px 44px rgba(4,16,34,.4)}
.panel:hover::before{opacity:1;animation:barrido .9s ease-out}
.panel .sello{margin:0 0 4px;align-self:flex-start}
.panel b{font-size:21px;line-height:1.2}
.panel p{margin:0;color:rgba(255,255,255,.85);font-size:15px}
.panel .mas{margin-top:8px;font-weight:700;color:var(--naranja-claro)}
.panel .mas::after{content:" \2192"}

/* --- Franja superior del resto de paginas -------------------------------- */
.franja{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  margin:0 calc(50% - 50vw) 30px;padding:26px max(18px,calc(50vw - var(--ancho)/2 + 18px)) 34px;
  background:linear-gradient(135deg,var(--azul-prof) 0%,var(--azul-osc) 55%,var(--azul) 100%)}
.franja .hero-luz{inset:-30% -12% -40%;animation-duration:16s}
.franja h1{color:#fff;margin:8px 0 8px;text-shadow:0 2px 14px rgba(4,16,34,.4)}
.franja .entradilla{color:rgba(255,255,255,.88)}
.franja .migas{color:rgba(255,255,255,.72)}
.franja .migas a{color:rgba(255,255,255,.85)}
.franja .migas li::after{color:rgba(255,255,255,.45)}
.franja .contenedor{position:relative;z-index:2;padding:0}
.franja .sello{background:rgba(4,16,34,.28);color:#CFE0F7;border:1px solid rgba(207,224,247,.35)}

/* --- Secciones ----------------------------------------------------------- */
main{padding:0 0 50px}
.seccion{padding:26px 0 26px}
.seccion.fondo{margin:0 calc(50% - 50vw);padding:44px max(18px,calc(50vw - var(--ancho)/2 + 18px));background:linear-gradient(180deg,var(--fondo-alt),#fff);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.seccion.azul{margin:0 calc(50% - 50vw);padding:48px max(18px,calc(50vw - var(--ancho)/2 + 18px));background:linear-gradient(135deg,var(--azul-prof),var(--azul-osc) 60%,var(--azul));color:#fff}
.seccion.azul h2,.seccion.azul h3{color:#fff}
.seccion.azul .entradilla{color:rgba(255,255,255,.85)}
.seccion>h2:first-child,.seccion .cabeza h2{margin-top:0}
.cabeza{max-width:64ch;margin-bottom:8px}
.cabeza.centro{margin-left:auto;margin-right:auto}

/* --- Rejillas y tarjetas: zoom suave y barrido laser --------------------- */
.rejilla{display:grid;gap:16px;grid-template-columns:1fr;margin:22px 0}
@media (min-width:640px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.rejilla{grid-template-columns:repeat(3,1fr)}.rejilla.cuatro{grid-template-columns:repeat(4,1fr)}.rejilla.dos{grid-template-columns:repeat(2,1fr)}}
.tarjeta{position:relative;overflow:hidden;background:linear-gradient(160deg,#fff 0%,var(--fondo-alt) 100%);border:1px solid var(--linea);border-radius:var(--radio);padding:20px 20px 18px;box-shadow:var(--sombra);
  transition:transform .32s cubic-bezier(.34,1.4,.64,1),box-shadow .3s ease,border-color .3s ease}
.tarjeta::before{content:"";position:absolute;top:-60%;bottom:-60%;width:80px;left:-130px;pointer-events:none;transform:skewX(-18deg);opacity:0;filter:blur(1px);
  background:linear-gradient(90deg,transparent 0%,rgba(139,170,218,.22) 30%,rgba(255,255,255,.95) 50%,rgba(139,170,218,.22) 70%,transparent 100%)}
.tarjeta:hover{transform:scale(1.035) translateY(-3px);border-color:var(--celeste);box-shadow:0 0 0 1px rgba(29,93,168,.25),var(--sombra-alta)}
.tarjeta:hover::before{opacity:1;animation:barrido .85s ease-out}
@keyframes barrido{from{left:-130px}to{left:115%}}
.tarjeta h3{margin:0 0 6px;font-size:17px}
.tarjeta h3 a{text-decoration:none;color:var(--azul-osc)}
.tarjeta h3 a::after{content:"";position:absolute;inset:0}
.tarjeta:hover h3 a{color:var(--azul)}
.tarjeta p{font-size:14.8px;color:var(--tinta-suave);margin:0;line-height:1.5}
.tarjeta .icono{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  background:linear-gradient(135deg,var(--cielo),#fff);border:1px solid var(--linea);color:var(--azul)}
.tarjeta .icono svg{width:24px;height:24px}
.tarjeta .mas{display:inline-block;margin-top:12px;font-weight:700;color:var(--azul);font-size:14.5px}
.tarjeta .mas::after{content:" \2192";transition:margin-left .2s}
.tarjeta:hover .mas::after{margin-left:4px}
/* tarjetas con foto: la foto hace zoom dentro de su marco */
.tarjeta.foto{padding:0;display:flex;flex-direction:column}
.tarjeta.foto figure{margin:0;overflow:hidden;aspect-ratio:16/10;background:var(--cielo)}
.tarjeta.foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tarjeta.foto:hover img{transform:scale(1.08)}
.tarjeta.foto .cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.tarjeta.foto .cuerpo .mas{margin-top:auto;padding-top:10px}
/* tarjeta azul, para destacar */
.tarjeta.oscura{background:linear-gradient(150deg,var(--azul-osc),var(--azul));border-color:transparent;color:#fff}
.tarjeta.oscura h3,.tarjeta.oscura h3 a,.tarjeta.oscura p,.tarjeta.oscura .mas{color:#fff}
.tarjeta.oscura .icono{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff}
@media (prefers-reduced-motion:reduce){.tarjeta:hover{transform:none}.tarjeta:hover::before{animation:none;opacity:0}.tarjeta.foto:hover img{transform:none}.panel:hover{transform:none}}

/* --- Cifras --------------------------------------------------------------- */
.cifras{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin:22px 0;padding:0}
@media (min-width:760px){.cifras{grid-template-columns:repeat(4,1fr)}}
.cifras li{margin:0;text-align:center;padding:18px 12px;border-radius:var(--radio);background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra);transition:transform .3s cubic-bezier(.34,1.5,.64,1),box-shadow .3s}
.cifras li:hover{transform:scale(1.06);box-shadow:var(--sombra-alta)}
.cifras b{display:block;font-size:32px;line-height:1.1;letter-spacing:-.02em;background:linear-gradient(135deg,var(--azul),var(--azul-osc));-webkit-background-clip:text;background-clip:text;color:transparent}
.cifras span{font-size:13.5px;color:var(--tinta-suave)}

/* --- Fichas de curso por duracion: una sola pieza degradada -------------- */
.fichas-cursos{display:grid;gap:0;grid-template-columns:1fr;margin:22px 0 8px;border-radius:16px;overflow:hidden;box-shadow:var(--sombra-alta)}
@media (min-width:560px){.fichas-cursos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.fichas-cursos{grid-template-columns:repeat(5,1fr)}}
.ficha-curso{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#fff;padding:22px 18px 18px;position:relative;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,filter .3s ease}
.ficha-curso:nth-child(1){background:linear-gradient(135deg,#4E8FD0,#2F72BC)}
.ficha-curso:nth-child(2){background:linear-gradient(135deg,#2F72BC,#1D5DA8)}
.ficha-curso:nth-child(3){background:linear-gradient(135deg,#1D5DA8,#164B8A)}
.ficha-curso:nth-child(4){background:linear-gradient(135deg,#164B8A,#0D3A6B)}
.ficha-curso:nth-child(5){background:linear-gradient(135deg,#0D3A6B,#082646)}
.ficha-curso:hover{transform:scale(1.07);z-index:3;box-shadow:0 18px 40px rgba(4,16,34,.35);filter:saturate(1.15)}
.ficha-horas{display:flex;align-items:baseline;gap:5px}
.ficha-horas b{font-size:36px;line-height:1;letter-spacing:-.02em}
.ficha-horas i{font-style:normal;font-size:13.5px;font-weight:700;opacity:.85}
.ficha-nombre{font-weight:700;font-size:15.5px}
.ficha-para{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.45;flex:1}
.ficha-pie{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding-top:9px;border-top:1px solid rgba(255,255,255,.28)}
.ficha-precio{font-weight:800;font-size:17px}
.ficha-nota{font-size:12.5px;opacity:.9}
@media (prefers-reduced-motion:reduce){.ficha-curso:hover{transform:none}.cifras li:hover{transform:none}}

/* --- Ficha resumen de un curso (arriba de las paginas de curso) ---------- */
.ficha-resumen{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin:0 0 26px;padding:18px;border-radius:var(--radio);
  background:linear-gradient(135deg,var(--cielo),#fff);border:1px solid var(--linea)}
@media (min-width:700px){.ficha-resumen{grid-template-columns:repeat(4,1fr)}}
.ficha-resumen div{padding:4px 6px}
.ficha-resumen small{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-suave);font-weight:700}
.ficha-resumen b{display:block;font-size:19px;color:var(--azul-osc);line-height:1.25;margin-top:2px}
.ficha-resumen .precio b{font-size:24px;color:var(--naranja-osc)}

/* --- Bloques de texto ---------------------------------------------------- */
.articulo{max-width:74ch}
.articulo p,.articulo li{max-width:74ch}
.articulo h2{padding-top:14px;border-top:1px solid var(--linea)}
.articulo h2:first-child{border-top:0;padding-top:0;margin-top:0}
.articulo h2+p{font-size:17px}
.articulo img{border-radius:var(--radio);margin:18px 0;border:1px solid var(--linea)}
.articulo table{margin:16px 0}
.articulo blockquote{margin:1.4rem 0;padding:.9rem 1.2rem;border-left:4px solid var(--naranja);background:var(--fondo-alt);border-radius:0 var(--radio) var(--radio) 0}
.articulo blockquote p{margin:0;font-size:.95rem}
.destacado{background:linear-gradient(135deg,var(--cielo),#fff);border-left:4px solid var(--azul);padding:16px 18px;border-radius:0 var(--radio) var(--radio) 0;margin:22px 0;max-width:74ch}
.destacado p:last-child{margin-bottom:0}
.destacado.naranja{border-left-color:var(--naranja);background:linear-gradient(135deg,#FFF6E8,#fff)}
.pasos{counter-reset:paso;list-style:none;padding-left:0;margin:16px 0;max-width:74ch}
.pasos li{counter-increment:paso;position:relative;padding-left:44px;margin-bottom:12px}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--azul),var(--azul-osc));color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(29,93,168,.3)}
.lista-check{list-style:none;padding:0;margin:14px 0;max-width:74ch}
.lista-check li{position:relative;padding-left:30px;margin-bottom:8px}
.lista-check li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--verde),#2FB27A)}
.lista-check li::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.dos-col{display:grid;gap:26px;grid-template-columns:1fr;align-items:start}
@media (min-width:860px){.dos-col{grid-template-columns:1.1fr .9fr}.dos-col.igual{grid-template-columns:1fr 1fr}}
.foto-marco{margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--sombra-alta);position:relative}
.foto-marco img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.foto-marco:hover img{transform:scale(1.05)}
.foto-marco figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:13.5px;color:#fff;background:linear-gradient(0deg,rgba(8,38,70,.85),transparent)}

/* --- Preguntas frecuentes (plegables, sin JS) ---------------------------- */
.faq{margin:18px 0;max-width:80ch}
.faq details{border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:10px;background:#fff;box-shadow:var(--sombra);transition:box-shadow .2s,border-color .2s}
.faq details:hover{border-color:var(--celeste)}
.faq details[open]{box-shadow:var(--sombra-alta);border-color:var(--celeste)}
.faq summary{cursor:pointer;padding:14px 46px 14px 18px;font-weight:700;font-size:16px;list-style:none;position:relative;color:var(--azul-osc)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .resp{padding:0 18px 16px}
.faq .resp p:last-child{margin-bottom:0}

/* --- Tablas -------------------------------------------------------------- */
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
th{font-weight:700;background:var(--fondo-alt);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-suave)}
.tabla-env{overflow-x:auto;margin:18px 0;border:1px solid var(--linea);border-radius:var(--radio);background:#fff}
.tabla-env table{margin:0}

/* --- Catalogo de cursos (listas largas, en columnas) --------------------- */
.catalogo{columns:1;column-gap:24px;margin:16px 0}
@media (min-width:640px){.catalogo{columns:2}}
@media (min-width:980px){.catalogo{columns:3}}
.catalogo li,.catalogo p{break-inside:avoid}
.catalogo ul{list-style:none;padding:0;margin:0}
.catalogo li{padding:9px 12px;margin:0 0 8px;border:1px solid var(--linea);border-radius:10px;background:#fff;font-size:14.5px;transition:border-color .15s,transform .15s,background .15s}
.catalogo li:hover{border-color:var(--celeste);background:var(--cielo);transform:translateX(3px)}
.grupo-cursos{margin:26px 0}
.grupo-cursos h3{margin-top:0}
.temario details{border:1px solid var(--linea);border-radius:var(--radio);margin:10px 0;background:#fff}
.temario summary{cursor:pointer;padding:12px 16px;font-weight:700;color:var(--azul-osc)}
.temario details>div{padding:0 16px 12px}

/* --- Pildoras y etiquetas ------------------------------------------------ */
.pildora{display:inline-block;background:var(--cielo);color:var(--azul-osc);border-radius:99px;padding:3px 11px;font-size:13px;font-weight:700;white-space:nowrap}
.pildora.naranja{background:#FFF1DC;color:var(--naranja-osc)}
.filtros{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 8px}
.filtro{background:#fff;border:1px solid var(--linea);border-radius:99px;padding:8px 15px;font:inherit;font-size:14px;font-weight:600;color:var(--tinta-suave);cursor:pointer;min-height:40px;transition:background .15s,color .15s,border-color .15s,transform .15s}
.filtro:hover{border-color:var(--azul);color:var(--azul);transform:translateY(-1px)}
.filtro.activo{background:linear-gradient(135deg,var(--azul),var(--azul-osc));border-color:var(--azul);color:#fff}

/* --- Blog ---------------------------------------------------------------- */
.entrada-blog .cat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--naranja-osc)}
.entrada-blog h3{font-size:16.5px;margin:6px 0 8px;line-height:1.3}
.entrada-blog time{font-size:13px;color:var(--tinta-suave)}
.entrada-blog p{margin:6px 0 0}
.entrada-meta{font-size:14px;color:var(--tinta-suave);margin:8px 0 0}
.entrada-meta a{color:inherit}
.entrada-portada{margin:0 0 26px;border-radius:16px;overflow:hidden;box-shadow:var(--sombra-alta);max-width:900px}
.entrada-portada img{width:100%;aspect-ratio:3/2;object-fit:cover}
.compartir{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;align-items:center;font-size:14px;color:var(--tinta-suave)}
.compartir a{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid var(--linea);border-radius:99px;text-decoration:none;color:var(--azul-osc);font-weight:600;font-size:13.5px;background:#fff;transition:background .15s,border-color .15s}
.compartir a:hover{background:var(--cielo);border-color:var(--celeste)}
.paginacion{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 0}

/* --- Formulario ---------------------------------------------------------- */
.formulario{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:24px 22px;box-shadow:var(--sombra-alta);position:relative;overflow:hidden}
.formulario::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:linear-gradient(90deg,var(--azul),var(--celeste),var(--naranja))}
.formulario h2{margin-top:0;border-top:0;padding-top:0}
.campo{margin-bottom:14px}
.campo label{display:block;font-weight:600;font-size:14.5px;margin-bottom:5px}
.campo input,.campo textarea,.campo select{width:100%;padding:12px 13px;border:1px solid var(--linea);border-radius:10px;font:inherit;font-size:16px;background:#fff;color:var(--tinta);min-height:48px;transition:border-color .15s,box-shadow .15s}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--azul);box-shadow:0 0 0 3px var(--cielo);outline:none}
.campo textarea{min-height:120px;resize:vertical}
.campo .ayuda{font-size:13px;color:var(--tinta-suave);margin-top:4px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.acepto{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500}
.acepto input{width:20px;height:20px;min-height:0;flex:none;margin-top:2px;accent-color:var(--azul)}
.form-falta{font-size:14px;color:#fff;background:#C8102E;margin:0 0 14px;padding:10px 13px;border-radius:10px;font-weight:600}
.form-fila{display:grid;gap:22px;grid-template-columns:1fr;align-items:start;margin:26px 0}
@media (min-width:900px){.form-fila{grid-template-columns:.9fr 1.1fr}}
.form-tel{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px}
.form-tel .boton{flex:1 1 150px}
.datos-contacto{list-style:none;padding:0;margin:0}
.datos-contacto li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--linea);margin:0}
.datos-contacto li:last-child{border-bottom:0}
.datos-contacto .icono{flex:none;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--cielo),#fff);border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;color:var(--azul)}
.datos-contacto .icono svg{width:20px;height:20px}
.datos-contacto b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-suave)}
.datos-contacto a{font-weight:600}

/* --- Resenas ------------------------------------------------------------- */
.resenas{display:grid;gap:14px;grid-template-columns:1fr;margin:20px 0}
@media (min-width:700px){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);position:relative;transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s}
.resena:hover{transform:scale(1.03);box-shadow:var(--sombra-alta)}
.resena .estrellas{color:var(--naranja);letter-spacing:2px;font-size:15px}
.resena p{font-size:14.8px;margin:8px 0 10px;color:var(--tinta)}
.resena footer{font-size:13.5px;color:var(--tinta-suave)}
.nota-google{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:15px}
.nota-google b{font-size:26px;color:var(--azul-osc)}

/* --- Llamada final ------------------------------------------------------- */
.cta{margin:34px 0 0;padding:34px 26px;border-radius:20px;color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--azul-prof),var(--azul-osc) 55%,var(--azul));box-shadow:var(--sombra-alta)}
.cta::before{content:"";position:absolute;inset:-40% -20%;z-index:-1;background:radial-gradient(30rem 18rem at 80% 20%,rgba(244,191,114,.32),transparent 60%),radial-gradient(26rem 18rem at 10% 90%,rgba(139,170,218,.4),transparent 60%);animation:respira 12s ease-in-out infinite alternate}
.cta h2{color:#fff;margin:0 0 8px;border-top:0;padding-top:0}
.cta p{color:rgba(255,255,255,.88);max-width:60ch}
.cta .acciones{margin-bottom:0}
.cta .boton.hueco{color:#fff;border-color:rgba(255,255,255,.6)}
.cta .boton.hueco:hover{background:rgba(255,255,255,.14);color:#fff}

/* --- Enlaces relacionados ------------------------------------------------ */
.relacionados{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--linea)}
.relacionados h2{margin-top:0;font-size:19px;border-top:0;padding-top:0}
.lista-enlaces{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:600px){.lista-enlaces{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.lista-enlaces{grid-template-columns:repeat(3,1fr)}}
.lista-enlaces li{margin:0}
.lista-enlaces a{display:block;padding:11px 14px;border:1px solid var(--linea);border-radius:10px;text-decoration:none;color:var(--azul-osc);font-weight:600;font-size:14.5px;background:#fff;transition:background .15s,border-color .15s,transform .15s}
.lista-enlaces a:hover{background:var(--cielo);border-color:var(--celeste);transform:translateY(-2px)}

/* --- Aparicion al bajar (la clase la pone el JS, nunca el CSS) ----------- */
.oculto-sube{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.oculto-sube.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.oculto-sube{opacity:1;transform:none}}

/* --- Pie ----------------------------------------------------------------- */
.pie{background:linear-gradient(180deg,var(--azul-prof),#051A31);color:#C9D6E8;padding:44px 0 24px;font-size:14.5px;margin-top:40px}
.pie-rejilla{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:640px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.pie-rejilla{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.pie h2{font-size:13px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.08em;color:#fff;border:0;padding:0}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:7px}
.pie a{color:#C9D6E8;text-decoration:none}
.pie a:hover{color:#fff;text-decoration:underline}
.pie-logo{width:170px;height:auto;margin-bottom:12px;background:#fff;padding:8px 10px;border-radius:10px}
.pie-dato{margin:8px 0 0;font-size:14px}
.pie-dato strong{color:#fff}
.pie-redes{display:flex;gap:8px;margin-top:12px}
.pie-redes a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .15s,transform .15s}
.pie-redes a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);text-decoration:none}
.pie-redes svg{width:18px;height:18px;fill:#fff}
.pie-legal{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#93A6C2;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.pie-legal a{color:#B7C6DC}

/* --- Boton flotante de llamar (solo movil) -------------------------------- */
.llamar-flotante{position:fixed;right:14px;bottom:14px;z-index:35;display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:99px;
  background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));color:#1a1200;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.28);animation:latido 2.6s ease-in-out infinite}
.llamar-flotante svg{width:20px;height:20px}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (min-width:900px){.llamar-flotante{display:none}}
body.con-cookies .llamar-flotante{bottom:calc(14px + var(--alto-cookies,0px))}

/* --- WhatsApp flotante, encima del de llamar (solo movil) ----------------- */
.whatsapp-flotante{position:fixed;right:14px;bottom:70px;z-index:35;display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.whatsapp-flotante svg{width:28px;height:28px}
@media (min-width:900px){.whatsapp-flotante{display:none}}
body.con-cookies .whatsapp-flotante{bottom:calc(70px + var(--alto-cookies,0px))}

/* --- Cookies ------------------------------------------------------------- */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:3px solid var(--azul);box-shadow:0 -6px 24px rgba(18,33,58,.14);padding:16px 0}
.cookies[hidden]{display:none!important}
.cookies .contenedor{display:block}
.ck-aviso{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cookies p{margin:0;flex:1 1 280px;font-size:14px}
.cookies .acciones{margin:0;gap:8px}
.cookies .boton{padding:10px 16px;font-size:14.5px;min-height:42px}
.ck-panel{margin-top:14px;padding-top:14px;border-top:1px solid var(--linea);max-height:46vh;overflow-y:auto}
.ck-panel[hidden]{display:none!important}
.ck-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.ck-panel legend{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);font-weight:600;padding:0;margin-bottom:9px}
.ck-opcion{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1px solid var(--linea);border-radius:10px;margin-bottom:8px;font-size:14px;line-height:1.5;background:var(--fondo-alt);cursor:pointer}
.ck-opcion:hover{border-color:var(--celeste)}
.ck-opcion.ck-fija{cursor:default;opacity:.72}
.ck-opcion input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--azul)}
.cookies .ck-panel .acciones{margin-top:12px}

/* --- 404 ----------------------------------------------------------------- */
.no-encontrada{text-align:center;padding:50px 0}
.no-encontrada b{display:block;font-size:90px;line-height:1;background:linear-gradient(135deg,var(--azul),var(--naranja));-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Impresion ----------------------------------------------------------- */
@media print{.barra-tel,.abrir-menu,.menu,.cookies,.llamar-flotante,.cta,.hero-capa{display:none!important}.hero,.franja{background:#fff;color:#000}.hero h1,.franja h1{color:#000}}