/* ============================================================ 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 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} } /* --- Selector de idioma (generado por JS desde los hreflang del ) --- */ .lang-switch{display:inline-flex;align-items:center;gap:0;flex:none;font-size:.72rem} .lang-switch a,.lang-switch span{padding:3px 5px;border-radius:6px;text-decoration:none;color:var(--muted,#5b6574);font-weight:600;letter-spacing:.4px} .lang-switch a:hover{background:#f2f5fb;color:var(--accent,#0b5cff)} .lang-switch span{color:var(--accent,#0b5cff);background:#eef3ff} /* ============================================================ 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} }