/* ============================================================
   PREMIUM POLISH — capa compartida por TODAS las páginas.
   Tokens, scroll-reveal, estados UI, toast, back-to-top y
   selector de idioma. Se carga al final del <head> en las 83
   páginas. Idéntico en los 3 sitios (ES/FR/EN): no divergir.
   Usa var(--x, fallback) para no depender del :root de cada página.
   ============================================================ */
:root{
  --shadow-sm:0 2px 8px -2px rgba(11,16,34,.08);
  --shadow-md:0 8px 24px -8px rgba(11,16,34,.14);
  --shadow-lg:0 20px 40px -16px rgba(11,16,34,.22);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
}

/* --- Aparición suave al hacer scroll (el JS añade .js-reveal; sin JS no se oculta nada) --- */
.js-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js-reveal.reveal-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal{opacity:1;transform:none;transition:none}}

/* --- Estados de botón --- */
.btn:active{transform:translateY(0);filter:brightness(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.loading,button.loading{position:relative;color:transparent !important;pointer-events:none}
.btn.loading::after,button.loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:btnspin .7s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* --- Validación de formularios (solo tras interacción del usuario) --- */
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--danger,#ef4444) !important;box-shadow:0 0 0 3px rgba(239,68,68,.12)}

/* --- Toast (aviso flotante) --- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--fg,#0b1022);color:#fff;padding:13px 22px;border-radius:12px;font-weight:600;font-size:.95rem;box-shadow:var(--shadow-lg);opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:200;max-width:90vw;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:linear-gradient(135deg,#166534,#16a34a)}

/* --- Botón volver arriba --- */
.to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#e9eef5);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--fg,#0b1022);cursor:pointer;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60;padding:0}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--accent,#0b5cff);border-color:var(--accent,#0b5cff)}
.to-top svg{width:18px;height:18px;display:block}

/* --- Header: mismo ancho en todas las plantillas y enlaces ligeramente más compactos
       para que quepa el selector de idioma sin saltos de línea --- */
header .container{width:min(1120px,92vw);max-width:none}
@media (min-width:841px){
  nav.main a{padding:10px 9px}
  .nav{gap:10px}
  .nav .btn.head-cta{padding:11px 13px}
}

/* 🛑 05/08/2026: LA BARRA DE ARRIBA NO CABIA EN SU PROPIO CONTENEDOR, en los 3 sitios.
   Medido con la tipografia real: el menu necesita 1202 px en espanol, 1237 en frances y
   1179 en ingles, y el contenedor son 1120. O sea que el boton de llamada a la accion
   sobresalia del borde del contenido en TODAS las paginas, y por debajo de ~1430 px eso
   ademas sacaba BARRA HORIZONTAL (FR/index media 1371 en una ventana de 1280).
   Se veia como "la cabecera no cuadra con lo de abajo", porque literalmente no cuadraba.

   El unico hueco real es el reclamo del logo ("Formacion & Certificacion PECB"): son
   ~103 px con su relleno y su linea, y es informacion que ya dan el logo y el propio
   menu. Sin el, y apretando un poco los enlaces, los tres idiomas caben dentro de 1120 y
   la cabecera comparte borde exacto con el contenido.
   En movil no cambia nada: ahi el menu ya es un desplegable.

   ⚠️ EL PEOR CASO NO ES EL BLOG, es el RESTO del sitio en frances: sus 143 paginas dicen
   "A propos de Ricardo" (como el "Sobre Ricardo" de ES y el "About Ricardo" de EN), y solo
   las 12 del blog dicen "A propos". Con el rotulo largo el boton se salia 76 px del
   contenedor a cualquier ancho. Por eso ademas de esconder el reclamo hay que bajar la
   letra del menu a 15 px: con 16 no cabe en frances por mucho que se recorte el relleno.
   Medido probando cuatro combinaciones sobre la pagina real, no a ojo. */
/* 🛑 Los selectores van con `header` delante A PROPOSITO. Cada pagina lleva su propio
   <style> EN LINEA, y en muchas (parcours.html, por ejemplo) ese bloque va DESPUES del
   <link> de premium.css con la misma regla `nav.main a{padding:10px 13px;font-size:16px}`.
   A igual especificidad manda la ultima, asi que esta hoja perdia sin dar ningun error:
   el boton seguia saliendose 196 px y el menu se veia igual que antes. Con `header`
   delante (0,1,2 contra 0,1,1) gana siempre, venga donde venga el <style>. */
@media (min-width:841px){
  header .brand-sub{display:none}
  header nav.main a{padding:10px 6px;font-size:15px}
  header .nav{gap:8px}
  header .nav .btn.head-cta{padding:10px 13px;font-size:15px}
}
/* Y un tramo mas apretado entre 841 y 1259, que es donde el contenedor todavia NO ha
   llegado a sus 1120 px (manda el 92vw) y ademas a partir de 1200 el menu tiene prohibido
   partirse en dos lineas. Ahi el frances seguia sacando barra horizontal a 1200 px
   (documento 1237). Por encima de 1260 no aplica nada de esto. */
@media (min-width:841px) and (max-width:1259px){
  header nav.main a{padding:10px 5px;font-size:14.5px}
  header .nav .btn.head-cta{padding:10px 11px;font-size:14.5px}
}
}

/* --- Selector de idioma (generado por JS desde los hreflang del <head>) --- */
/* --- Fix 20/07/2026: el brand no debe encogerse (el tagline desbordaba bajo el selector de idioma en FR) --- */
.nav .brand{flex:none}


/* ============================================================
   CAPA ESTÉTICA v2 — footer oscuro, dinamismo y polish
   ============================================================ */
::selection{background:var(--accent,#0b5cff);color:#fff}

/* Footer premium oscuro */
footer{background:linear-gradient(180deg,#0b1022 0%,#0d1633 100%);border-top:none;color:#98a2ba}
footer .foot-grid b{color:#ffffff !important}
footer .foot-grid a{color:#98a2ba}
footer .foot-grid a:hover{color:#8fb0ff}
footer .foot-brand p{color:#98a2ba}
footer .foot-brand img{filter:brightness(0) invert(1);opacity:.92}
footer .legal{border-top:1px solid rgba(255,255,255,.1);color:#6b7690}
footer .legal a{color:#8fb0ff}

/* Header: sombra sutil al hacer scroll */
header{transition:box-shadow .25s ease}
header.hdr-scrolled{box-shadow:0 8px 28px -14px rgba(11,16,34,.25)}

/* Botones: brillo al pasar */
.btn{transition:transform .12s ease,filter .15s ease,box-shadow .22s ease}
.btn:hover{box-shadow:0 10px 22px -10px rgba(11,92,255,.55)}
.btn.warm:hover,.lead-capture .btn:hover{box-shadow:0 12px 26px -10px rgba(20,39,78,.6)}
.btn.ghost:hover{box-shadow:0 8px 18px -10px rgba(11,92,255,.35)}

/* Tarjetas: elevación coherente al pasar */
.lm-card,.why .item,.proof-item,.exam .item,.contact-card{transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease}
.lm-card:hover,.why .item:hover,.proof-item:hover,.exam .item:hover,.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfdcff}

/* Portadas del blog: zoom sutil de la imagen */
.post-card .thumb{overflow:hidden}
.post-card .thumb img{transition:transform .4s ease}
.post-card:hover .thumb img{transform:scale(1.045)}

/* Hero vivo: halo azul flotante (solo heroes sin elementos sticky dentro) */
.hero,.blog-hero,.pagehead{position:relative;overflow:hidden;isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .hero::after,.blog-hero::after,.pagehead::after{content:"";position:absolute;width:560px;height:560px;right:-140px;top:-200px;border-radius:50%;background:radial-gradient(circle at 32% 32%,rgba(11,92,255,.16),rgba(33,67,255,.05) 48%,transparent 72%);filter:blur(6px);animation:blobfloat 16s ease-in-out infinite alternate;pointer-events:none;z-index:-1}
}
@keyframes blobfloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,50px) scale(1.15)}}


/* Nav de escritorio ancho: flex (sin huecos de espacios en blanco, todo en una línea) */
@media (min-width:1200px){
  nav.main{display:flex;align-items:center;flex-wrap:nowrap}
  nav.main a{white-space:nowrap}
}

/* Barra de progreso de lectura (artículos del blog) */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent,#0b5cff),var(--accent-2,#2143ff));z-index:70}

/* ============================================================
   CAPA DINAMISMO v3 — transiciones de página, hero animado,
   micro-interacciones y CTA móvil. Compartida por los 3 sitios.
   ============================================================ */

/* Fundido suave al navegar entre páginas (progresivo: solo navegadores compatibles) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation-duration:.16s}
  ::view-transition-new(root){animation-duration:.24s}
}

/* Entrada escalonada del hero y cabeceras de página al cargar */
@media (prefers-reduced-motion:no-preference){
  .hero .eyebrow,.hero h1,.hero .subtitle,.hero .chipline,.hero .cta,.hero .trust,.hero-badge{animation:riseIn .6s cubic-bezier(.2,.7,.3,1) both}
  .hero h1{animation-delay:.06s}
  .hero .subtitle{animation-delay:.14s}
  .hero .chipline{animation-delay:.22s}
  .hero .cta{animation-delay:.3s}
  .hero .trust{animation-delay:.38s}
  .hero-badge{animation-delay:.2s}
  .pagehead .container>*,.blog-hero .container>*{animation:riseIn .55s cubic-bezier(.2,.7,.3,1) both}
  .pagehead .container>*:nth-child(2),.blog-hero .container>*:nth-child(2){animation-delay:.08s}
  .pagehead .container>*:nth-child(3),.blog-hero .container>*:nth-child(3){animation-delay:.16s}
  .pagehead .container>*:nth-child(n+4),.blog-hero .container>*:nth-child(n+4){animation-delay:.24s}
  .chero .tags,.chero h1,.chero .lead,.chero .quickfacts{animation:riseIn .55s cubic-bezier(.2,.7,.3,1) both}
  .chero h1{animation-delay:.07s}
  .chero .lead{animation-delay:.14s}
  .chero .quickfacts{animation-delay:.21s}
}
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Frase clave del hero con degradado */
.hero h1 .hl{background:linear-gradient(92deg,#0b5cff,#2143ff 55%,#5a8bff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Menú: subrayado animado (no en el botón CTA) */
@media (min-width:841px){
  nav.main a:not(.btn){position:relative}
  nav.main a:not(.btn)::after{content:"";position:absolute;left:9px;right:9px;bottom:5px;height:2px;border-radius:2px;background:var(--accent,#0b5cff);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  nav.main a:not(.btn):hover::after,nav.main a:not(.btn).active::after{transform:scaleX(1)}
}

/* Flechas que se deslizan al pasar */
.course .arrow,.post-card .readmore{display:inline-block;transition:transform .18s ease}
.course:hover .arrow{transform:translateX(4px)}
.post-card:hover .readmore{transform:translateX(4px)}

/* Acordeones con apertura animada (progresivo: Chrome/Edge modernos) */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .prog details::details-content,.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .28s ease,content-visibility .28s allow-discrete}
  .prog details[open]::details-content,.faq details[open]::details-content{block-size:auto}
}

/* Tabla de contenidos: sección activa resaltada (scrollspy) */
.toc a.toc-on{color:var(--warm-2,#14274e);font-weight:700}

/* CTA fijo inferior en móvil (fichas de curso) */
.m-cta{display:none}
@media (max-width:840px){
  body.has-mcta{padding-bottom:68px}
  .m-cta{display:block;position:fixed;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line,#e9eef5);z-index:65;box-shadow:0 -8px 24px -12px rgba(11,16,34,.18)}
  .m-cta .btn{width:100%;display:flex;justify-content:center}
  body.has-mcta .to-top{bottom:82px}
}

/* 07/09/2026 (auditoria DE/IT, punto 9): el menu se plegaba a hamburguesa solo por debajo de
   840 px, y la cabecera necesita 1.117 px de ventana en ingles y 1.196 en aleman para caber
   (medido en vivo): entre esas anchuras, las de un portatil de 13 pulgadas, el menu se salia.
   Esta hoja es la ULTIMA que cargan todas las paginas, asi que el corte se sube aqui una vez
   y no en las 54 paginas que lo llevan incrustado a 840 px. Mismas reglas que aquel bloque. */
@media (max-width:1200px){
  nav.main{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line,#e9eef5);flex-direction:column;padding:10px 6vw 16px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 8px;border-radius:8px}
  .menu-toggle{display:inline-flex}
  .nav .btn.head-cta{display:none}
}

/* 11/10/2026 · ÁREA DE CLIENTE INTEGRADA EN LA BARRA (Ricardo: "no se ve profesional, integrarlo a la barra de menú
   existente"). El selector de idioma pasa a un desplegable compacto (site.js) y con ese sitio el acceso entra al final
   de la barra, con TEXTO y una línea fina que lo separa. En móvil queda el icono junto al botón del menú. Las iniciales
   las pone site.js (cookie me_hola). */
.lang-switch{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line,#e9eef5);background:#fff;border-radius:999px;
  padding:5px 9px;font:600 12.5px/1 inherit;color:var(--muted,#5b6574);cursor:pointer;min-height:30px}
.lang-btn svg{fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{border-color:var(--accent,#0b5cff);color:var(--accent,#0b5cff)}
.lang-btn:focus-visible{outline:2px solid var(--accent,#0b5cff);outline-offset:2px}
.lang-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:1px}
.lang-list{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:160px;margin:0;padding:6px;list-style:none;background:#fff;
  border:1px solid var(--line,#e9eef5);border-radius:12px;box-shadow:0 12px 32px -12px rgba(11,16,34,.28)}
.lang-list[hidden]{display:none}
.lang-list a,.lang-list span{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;font-size:.88rem;color:var(--fg,#0b1022);text-decoration:none}
.lang-list b{display:inline-block;width:24px;font-size:.74rem;color:var(--muted,#5b6574)}
.lang-list a:hover{background:#f2f5fb;color:var(--accent,#0b5cff)}
.lang-list span{background:#eef3ff;color:var(--accent,#0b5cff)}
header .nav > a.nav-cliente{display:inline-flex;align-items:center;gap:7px;flex:none;color:var(--fg,#0b1022);font-weight:600;font-size:15px;
  text-decoration:none;white-space:nowrap;padding:8px 2px 8px 12px;border-left:1px solid var(--line,#e9eef5);min-height:36px;line-height:1}
header .nav > a.nav-cliente:hover{color:var(--accent,#0b5cff)}
header .nav > a.nav-cliente:focus-visible{outline:2px solid var(--accent,#0b5cff);outline-offset:2px;border-radius:6px}
.nav-cliente-i{width:17px;height:17px;max-width:17px;max-height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none;display:block}
.nav-cliente-av{width:26px;height:26px;border-radius:50%;background:var(--accent,#0b5cff);color:#fff;display:inline-grid;
  place-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;flex:none}
@media (min-width:841px) and (max-width:1259px){header .nav > a.nav-cliente{font-size:14.5px;padding-left:10px}}
@media (max-width:1200px){
  header .nav .lang-switch{margin-left:auto;order:1}
  header .nav > a.nav-cliente{order:2;border-left:0;padding:6px;min-width:40px;justify-content:center}
  header .nav .menu-toggle{order:3}
  .nav-cliente-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .lang-list{left:auto;right:0}
}
/* ♿ PIE COMUN A 24 PX (12/10/2026, Ricardo: «1: de acuerdo» y «dale con el pie comun»). Es la misma base de la fase 5
   (WCAG 2.2, criterio 2.5.8, tamano minimo del objetivo) llevada al pie que comparten TODAS las paginas: medido en la
   maqueta, 2.171 enlaces sueltos del pie entre 21,6 y 23,8 px en las 191 paginas de rrsg.es. Va aqui y no en cada copia
   porque las reglas del pie viven en cinco hojas y 16 <style> incrustados, y esta es la hoja que cargan todas.
   * Solo `min-height`: los enlaces del pie ya son `display:block` en columnas `.foot-grid`; un inline-flex las romperia.
   * `:where()` deja la regla SIN especificidad: cualquier estilo con clase que diga otra cosa gana.
   * Exentos, por la propia norma, los enlaces de texto corrido: dentro de un parrafo, en la linea `.legal`
     («© ... · contact@») o con `.en-texto`. Un enlace `inline` suelto en una linea de texto (la 404) tampoco lo toca. */
:where(footer) :where(a[href]):where(:not(p *, .legal *, .en-texto)){min-height:24px}