/* Corazón en Casa — capa de mejoras (fuentes locales, animaciones, formulario, RGPD) */

/* ---------------- Fuentes auto-alojadas (RGPD + velocidad) ---------------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800.woff2) format('woff2')}

:root{
  --font-base:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-headings:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{font-family:var(--font-base)}
h1,h2,h3,h4,.btn,.mg-eyebrow,.hero h1,.mg-fact b,.mg-stat-number,.mg-sig-name{font-family:var(--font-headings)}

/* ---------------- Entrada del hero ---------------- */
html.js .hero h1{animation:cec-rise .95s .05s both}
html.js .hero .hero-subtitle{animation:cec-rise .95s .22s both}
html.js .hero .btn{animation:cec-rise .95s .4s both}
html.js .hero .hero-trust{animation:cec-rise .95s .56s both}
@keyframes cec-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero::before{animation:cec-float 9s ease-in-out infinite alternate}
@keyframes cec-float{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-20px) rotate(4deg)}}

/* ---------------- Reveal al hacer scroll ---------------- */
html.js .mg-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
html.js .mg-reveal.is-in{opacity:1;transform:none}
html.js .cec-group>*{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
html.js .cec-group.is-in>*{opacity:1;transform:none}
html.js .cec-group.is-in>*:nth-child(2){transition-delay:.07s}
html.js .cec-group.is-in>*:nth-child(3){transition-delay:.14s}
html.js .cec-group.is-in>*:nth-child(4){transition-delay:.21s}
html.js .cec-group.is-in>*:nth-child(5){transition-delay:.28s}
html.js .cec-group.is-in>*:nth-child(6){transition-delay:.35s}
html.js .cec-group.is-in>*:nth-child(n+7){transition-delay:.4s}

/* ---------------- Anclas colapsadas para el menú ---------------- */
.section:has(> .container > .cec-anchor){padding:0!important;margin:0!important}
.cec-anchor{display:block;height:0;overflow:hidden;visibility:hidden}

/* ---------------- Nav: subrayado activo + hover ---------------- */
.site-nav li{position:relative}
.site-nav a{position:relative;transition:color .2s ease}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px;background:var(--color-primary);transition:right .28s cubic-bezier(.22,.61,.36,1)}
.site-nav a:hover::after,.site-nav a.cec-active::after{right:0}
.site-nav a.cec-active{color:var(--color-primary)}

/* ---------------- Menú móvil (hamburguesa inyectada) ---------------- */
.cec-burger{display:none;width:44px;height:44px;border:1px solid var(--color-border);background:#fff;border-radius:12px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.cec-burger span{display:block;width:20px;height:2px;background:var(--color-headings);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
html.cec-nav-open .cec-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.cec-nav-open .cec-burger span:nth-child(2){opacity:0}
html.cec-nav-open .cec-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:820px){
  .cec-burger{display:flex}
  .site-header .container{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:12px!important}
  .site-nav{position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--color-border);box-shadow:0 24px 44px -24px rgba(15,28,46,.35);max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.22,.61,.36,1)}
  html.cec-nav-open .site-nav{max-height:78vh}
  .site-nav ul{flex-direction:column;align-items:stretch;padding:6px 22px 14px;gap:0}
  .site-nav li{border-bottom:1px solid var(--color-border)}
  .site-nav li:last-child{border-bottom:0}
  .site-nav a{display:block;padding:15px 2px;font-size:1.05rem}
  .site-nav a::after{display:none}
  .header-extras .header-cta{display:none}
}

/* ---------------- Newsletter (inyectado por JS) ---------------- */
.cec-nl-fallback{display:inline-block}
.cec-nl-form{max-width:560px;margin:26px auto 0;text-align:left}
.cec-nl-row{display:flex;gap:10px;align-items:stretch}
.cec-nl-form input[type=email]{flex:1;min-width:0;background:#fff;border:1px solid var(--color-border);border-radius:999px;padding:15px 20px;font-size:1rem;font-family:inherit;box-shadow:0 4px 14px rgba(15,28,46,.04)}
.cec-nl-form input[type=email]:focus{outline:2px solid var(--color-primary);border-color:var(--color-primary)}
.cec-nl-form .btn{white-space:nowrap;border:0;cursor:pointer;background:var(--color-primary);color:#fff}
.cec-nl-form .btn:disabled{opacity:.6;cursor:default}
.cec-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.cec-nl-consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:.86rem;color:var(--color-muted);line-height:1.5;text-align:left}
.cec-nl-consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--color-primary)}
.cec-nl-consent a{color:var(--color-primary);text-decoration:underline}
.cec-nl-msg{margin:12px 0 0;font-size:.9rem;min-height:1em;text-align:center}
.cec-nl-msg.err{color:#c0392b}
.cec-nl-thanks{margin:18px 0 0;font-size:1.05rem;color:var(--color-headings);font-weight:600}
@media(max-width:560px){.cec-nl-row{flex-direction:column}.cec-nl-form .btn{width:100%}}

/* ---------------- Banner de cookies (RGPD) ---------------- */
.cec-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;background:#fff;border:1px solid var(--color-border);border-radius:18px;box-shadow:0 24px 60px -20px rgba(15,28,46,.45);transform:translateY(140%);opacity:0;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s ease;max-width:720px;margin:0 auto}
.cec-cookie.show{transform:none;opacity:1}
.cec-cookie-in{display:flex;gap:18px;align-items:center;padding:18px 22px;flex-wrap:wrap}
.cec-cookie-in p{margin:0;flex:1;min-width:220px;font-size:.9rem;color:var(--color-text);line-height:1.55}
.cec-cookie-in a{color:var(--color-primary);text-decoration:underline}
.cec-cookie-btns{display:flex;gap:10px;flex-shrink:0}
.cec-cookie-btns .btn{cursor:pointer;border:0;font-size:.92rem;padding:11px 22px}
.cec-cookie-btns .btn--ghost{background:transparent;border:1px solid var(--color-border);color:var(--color-headings);box-shadow:none}
.cec-cookie-btns .btn:not(.btn--ghost){background:var(--color-primary);color:#fff}
@media(max-width:560px){.cec-cookie-in{justify-content:center;text-align:center}.cec-cookie-btns{width:100%}.cec-cookie-btns .btn{flex:1}}

/* ---------------- Reduced motion ---------------- */
@media(prefers-reduced-motion:reduce){
  html.js .mg-reveal,html.js .cec-group>*{opacity:1!important;transform:none!important;transition:none!important}
  html.js .hero h1,html.js .hero .hero-subtitle,html.js .hero .btn,html.js .hero .hero-trust,.hero::before{animation:none!important}
}

/* ---------------- Legal pages (contenido estándar) ---------------- */
.cec-legal{max-width:820px;margin:0 auto;padding:60px 20px 40px}
.cec-legal h2{margin:34px 0 12px}
.cec-legal h1{margin-bottom:8px}
.cec-legal p,.cec-legal li{line-height:1.75;color:var(--color-text)}
.cec-legal ul{padding-left:22px}
.cec-legal .cec-updated{color:var(--color-muted);font-size:.9rem;margin-bottom:24px}

/* ==================================================================
   CAPA VISUAL / ANIMACIONES v2 (portfolio)
   ================================================================== */
:root{--ecg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='70' viewBox='0 0 240 70'%3E%3Cpath d='M0 35 L70 35 L78 35 L84 20 L90 50 L96 6 L104 60 L110 35 L240 35' fill='none' stroke='%23ff7a6e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Barra de progreso de lectura */
.cec-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 0;background:linear-gradient(90deg,var(--color-primary),#ef6b60,var(--color-accent));z-index:10000;pointer-events:none;will-change:transform}

/* Hero: ECG nítido vectorial */
.hero::after{background-image:var(--ecg)!important;background-size:260px 70px!important;height:70px!important;opacity:.5!important}

/* Panel "corazón que late" (sustituye a la foto) */
.mg-visual{position:relative;width:100%;aspect-ratio:1/1.02;border-radius:26px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 100% at 50% -10%,#153a58,#0e2434 62%,#0b1f2e);box-shadow:0 44px 80px -44px rgba(15,28,46,.65)}
.mg-visual::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(420px 300px at 72% 22%,rgba(203,70,63,.30),transparent 60%),radial-gradient(360px 260px at 18% 92%,rgba(94,134,166,.24),transparent 60%)}
.mg-hb{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:18px;color:#fff;text-align:center;padding:24px}
.mg-hb-core{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.mg-hb-heart{font-size:92px;line-height:1;color:#ff7a6e;filter:drop-shadow(0 10px 26px rgba(239,107,96,.55));animation:cec-beat 1.7s ease-in-out infinite}
.mg-hb-ring{position:absolute;top:50%;left:50%;width:96px;height:96px;transform:translate(-50%,-50%);border:2px solid rgba(255,122,110,.55);border-radius:50%;animation:cec-sonar 3s ease-out infinite}
.mg-hb-ring:nth-child(2){animation-delay:1s}
.mg-hb-ring:nth-child(3){animation-delay:2s}
.mg-hb-cap{font-family:var(--font-headings);font-weight:600;font-size:1.2rem}
.mg-hb-sub{font-size:.92rem;color:rgba(255,255,255,.72);max-width:260px;line-height:1.55;margin-top:-6px}
.mg-hb-ecg{position:absolute;left:0;right:0;bottom:30px;height:60px;z-index:2;background:var(--ecg) repeat-x center/220px 60px;opacity:.55;-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.mg-hb-dot{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#ff9d92;box-shadow:0 0 16px 4px rgba(255,122,110,.85);transform:translateY(-50%);animation:cec-run 3.4s linear infinite}
@keyframes cec-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.17)}24%{transform:scale(.98)}36%{transform:scale(1.07)}48%{transform:scale(1)}}
@keyframes cec-sonar{0%{width:80px;height:80px;opacity:.65}100%{width:250px;height:250px;opacity:0}}
@keyframes cec-run{0%{left:8%}100%{left:92%}}

/* Marquee de conceptos (banda a todo el ancho) */
.section:has(> .container > .cec-marquee){padding:0}
.section:has(> .container > .cec-marquee) > .container{max-width:100%;padding-left:0;padding-right:0}
.cec-marquee{position:relative;overflow:hidden;width:100%;padding:24px 0;background:var(--color-dark);--mq:40s}
.cec-marquee::before,.cec-marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.cec-marquee::before{left:0;background:linear-gradient(90deg,var(--color-dark),transparent)}
.cec-marquee::after{right:0;background:linear-gradient(270deg,var(--color-dark),transparent)}
.cec-marquee-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:cec-marq var(--mq) linear infinite}
.cec-marquee-track span{font-family:var(--font-headings);font-weight:700;font-size:clamp(1.05rem,2.3vw,1.6rem);color:rgba(255,255,255,.9);padding:0 30px;display:inline-flex;align-items:center;gap:30px}
.cec-marquee-track span::after{content:"\2665";color:var(--color-primary);font-size:.68em}
.cec-marquee:hover .cec-marquee-track{animation-play-state:paused}
@keyframes cec-marq{to{transform:translateX(-50%)}}

/* Divisor ECG "monitor" (banda a todo el ancho) */
.section:has(> .container > .cec-ecgline){padding:0}
.section:has(> .container > .cec-ecgline) > .container{max-width:100%;padding-left:0;padding-right:0}
.cec-ecgline{position:relative;width:100%;height:84px;background:var(--color-surface);overflow:hidden}
.cec-ecgline::before{content:"";position:absolute;inset:0;background:var(--ecg) repeat-x center/260px 70px;opacity:.5}
.cec-ecgdot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 18px 5px rgba(203,70,63,.55);transform:translateY(-50%);animation:cec-run 4.2s linear infinite}

/* Timeline de pasos: relleno de progreso al hacer scroll */
.mg-steps{position:relative;--p:0}
.mg-steps::before{content:"";position:absolute;left:22px;top:6px;width:2px;height:calc((100% - 12px) * var(--p));background:linear-gradient(180deg,var(--color-primary),var(--color-accent));box-shadow:0 0 12px rgba(203,70,63,.45);z-index:1;border-radius:2px}
.mg-step-item::before{transition:box-shadow .4s ease,transform .4s ease}
.mg-step-item.is-in::before{box-shadow:0 0 0 6px rgba(203,70,63,.14)}

/* Pulso en los puntos del semáforo */
.mg-sem-dot::after{content:"";position:absolute;inset:0;border-radius:50%;animation:cec-pulse-r 2.4s ease-out infinite}
.mg-sem--amber .mg-sem-dot::after{animation-name:cec-pulse-a}
.mg-sem--green .mg-sem-dot::after{animation-name:cec-pulse-g}
@keyframes cec-pulse-r{0%{box-shadow:0 0 0 0 rgba(224,82,77,.5)}100%{box-shadow:0 0 0 20px rgba(224,82,77,0)}}
@keyframes cec-pulse-a{0%{box-shadow:0 0 0 0 rgba(227,154,52,.5)}100%{box-shadow:0 0 0 20px rgba(227,154,52,0)}}
@keyframes cec-pulse-g{0%{box-shadow:0 0 0 0 rgba(63,168,122,.5)}100%{box-shadow:0 0 0 20px rgba(63,168,122,0)}}

/* Tilt 3D en tarjetas del Pack */
.mg-pack{perspective:1200px}
.cec-tilt{transition:transform .3s cubic-bezier(.22,.61,.36,1);will-change:transform}

/* Responsive */
@media(max-width:860px){.mg-visual{aspect-ratio:1/.8;min-height:360px}}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .mg-hb-heart,.mg-hb-ring,.mg-hb-dot,.cec-marquee-track,.cec-ecgdot,.mg-sem-dot::after,.hero::before{animation:none!important}
  .cec-progress{display:none}
}