/* ============================================================ FRIENDLY ENGLISH — Sistema de diseño Paleta derivada de la identidad oficial (flyer + logotipo) ============================================================ */ /* Las fuentes se cargan con en el para no bloquear el render. */ :root{ /* Marca */ --navy-950:#061238; --navy-900:#0A1F5C; --navy-800:#12307F; --navy-700:#1B45AA; --navy-600:#2A5AD1; --blue-500:#5B67C7; --blue-400:#7C87DC; --gold-300:#FFDA6B; --gold-400:#FFC81F; --gold-500:#F5A800; --green-700:#12602F; --green-600:#1B7A3E; --green-500:#22964E; /* Neutros */ --cream:#FDFBF5; --paper:#FFFFFF; --mist:#F2F5FB; --line:#E2E8F4; --ink:#0C1424; --ink-2:#33405C; --ink-3:#66738F; /* Semánticos */ --bg:var(--cream); --fg:var(--ink); --muted:var(--ink-3); /* Tipografía fluida */ --fs-xs:clamp(.75rem,.72rem + .15vw,.82rem); --fs-sm:clamp(.86rem,.83rem + .18vw,.94rem); --fs-base:clamp(1rem,.96rem + .2vw,1.08rem); --fs-lg:clamp(1.09rem,1.02rem + .35vw,1.25rem); --fs-xl:clamp(1.25rem,1.14rem + .55vw,1.55rem); --fs-2xl:clamp(1.5rem,1.3rem + 1vw,2.1rem); --fs-3xl:clamp(1.9rem,1.55rem + 1.7vw,3rem); --fs-4xl:clamp(2.3rem,1.7rem + 2.9vw,4.2rem); --fs-hero:clamp(2.05rem,1.2rem + 4.3vw,5.2rem); /* Espaciado y forma */ --sp-section:clamp(4rem,3rem + 5vw,8.5rem); --gutter:clamp(1.1rem,.7rem + 2vw,2.5rem); --maxw:1240px; --r-sm:.6rem; --r-md:1rem; --r-lg:1.5rem; --r-xl:2rem; --r-full:999px; /* Sombras */ --sh-sm:0 1px 2px rgba(10,31,92,.06),0 2px 6px rgba(10,31,92,.05); --sh-md:0 4px 12px rgba(10,31,92,.07),0 12px 28px rgba(10,31,92,.07); --sh-lg:0 10px 24px rgba(10,31,92,.09),0 28px 60px rgba(10,31,92,.12); --sh-glow:0 12px 40px rgba(255,200,31,.28); /* Curvas */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --header-h:76px; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none !important} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)} body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:var(--fs-base); line-height:1.65; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{display:block;max-width:100%} img{height:auto} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none;padding:0} h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;line-height:1.1;letter-spacing:-.02em;font-weight:800;text-wrap:balance;overflow-wrap:break-word} p{text-wrap:pretty} :focus-visible{outline:3px solid var(--gold-400);outline-offset:3px;border-radius:4px} ::selection{background:var(--gold-400);color:var(--navy-900)} /* ---------- Utilidades ---------- */ .wrap{width:min(100% - (var(--gutter) * 2),var(--maxw));margin-inline:auto;min-width:0} .wrap-wide{width:min(100% - (var(--gutter) * 2),1440px);margin-inline:auto;min-width:0} .section{padding-block:var(--sp-section);position:relative} .center{text-align:center} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-xs); letter-spacing:.14em;text-transform:uppercase;color:var(--navy-700); background:linear-gradient(120deg,rgba(255,200,31,.2),rgba(91,103,199,.14)); border:1px solid rgba(27,69,170,.16); padding:.45rem 1rem;border-radius:var(--r-full);margin-bottom:1.15rem; } .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 3px rgba(255,200,31,.3)} .eyebrow--light{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);backdrop-filter:blur(10px)} .h-section{font-size:var(--fs-3xl);color:var(--navy-900);margin-bottom:1rem} .h-section .accent{color:var(--green-600)} .h-section .accent-gold{ background:linear-gradient(100deg,var(--gold-500),var(--gold-400)); -webkit-background-clip:text;background-clip:text;color:transparent; } .lead{font-size:var(--fs-lg);color:var(--ink-2);max-width:62ch} .center .lead{margin-inline:auto} .section-head{max-width:760px;margin-bottom:clamp(2.2rem,1.5rem + 2.5vw,3.8rem)} .section-head.center{margin-inline:auto} /* ---------- Botones ---------- */ .btn{ --btn-bg:var(--navy-800);--btn-fg:#fff; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-sm);letter-spacing:.01em; min-height:52px;padding:.9rem 1.7rem;border-radius:var(--r-full); background:var(--btn-bg);color:var(--btn-fg); box-shadow:var(--sh-md);isolation:isolate;overflow:hidden; transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease),filter .3s var(--ease); will-change:transform; } .btn::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(120deg,rgba(255,255,255,.28),transparent 45%); opacity:0;transition:opacity .35s var(--ease); } .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--sh-lg)} .btn:hover::after{opacity:1} .btn:active{transform:translateY(-1px) scale(.99)} .btn svg{width:1.15em;height:1.15em;flex:none} .btn--gold{--btn-bg:linear-gradient(120deg,var(--gold-400),var(--gold-500));--btn-fg:var(--navy-900);box-shadow:var(--sh-glow)} .btn--gold:hover{box-shadow:0 16px 46px rgba(255,200,31,.42)} .btn--green{--btn-bg:linear-gradient(120deg,var(--green-500),var(--green-700))} .btn--white{--btn-bg:#fff;--btn-fg:var(--navy-900)} .btn--ghost{ --btn-bg:transparent;--btn-fg:#fff; box-shadow:none;border:1.5px solid rgba(255,255,255,.4);backdrop-filter:blur(8px); background:rgba(255,255,255,.07); } .btn--ghost:hover{background:rgba(255,255,255,.16);box-shadow:0 10px 30px rgba(0,0,0,.2)} .btn--outline{--btn-bg:transparent;--btn-fg:var(--navy-800);border:1.5px solid rgba(18,48,127,.28);box-shadow:none} .btn--outline:hover{background:var(--navy-800);--btn-fg:#fff} .btn--lg{min-height:60px;padding:1.05rem 2.2rem;font-size:var(--fs-base)} .btn--block{width:100%} /* ============================================================ HEADER ============================================================ */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:100; transition:background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s var(--ease); padding-top:env(safe-area-inset-top); } .site-header::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(6,18,56,.55),rgba(6,18,56,0)); transition:opacity .45s var(--ease); } .site-header.is-stuck{ background:rgba(255,255,255,.86); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); box-shadow:0 1px 0 rgba(18,48,127,.08),0 8px 30px rgba(10,31,92,.08); } .site-header.is-stuck::before{opacity:0} .header-inner{ display:flex;align-items:center;justify-content:space-between;gap:1rem; height:var(--header-h); } .brand{display:flex;align-items:center;gap:.7rem;flex:none;transition:transform .35s var(--ease-spring)} .brand:hover{transform:scale(1.03)} .brand img{height:clamp(26px,4.4vw,34px);width:auto;transition:filter .45s var(--ease)} .site-header:not(.is-stuck) .brand img{filter:brightness(0) invert(1)} .brand-tag{ font-family:'Outfit',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--gold-400);line-height:1;padding-top:2px; display:none; } @media (min-width:1100px){.brand-tag{display:block}} .site-header.is-stuck .brand-tag{color:var(--navy-700)} .nav{display:none;align-items:center;gap:.15rem} @media (min-width:980px){.nav{display:flex}} .nav a{ position:relative;padding:.6rem .95rem;border-radius:var(--r-full); font-family:'Outfit',sans-serif;font-weight:600;font-size:.94rem;color:rgba(255,255,255,.9); transition:color .3s var(--ease),background .3s var(--ease); } .site-header.is-stuck .nav a{color:var(--ink-2)} .nav a::after{ content:"";position:absolute;left:50%;bottom:.34rem;translate:-50% 0; width:0;height:2px;border-radius:2px;background:var(--gold-400); transition:width .35s var(--ease-out); } .nav a:hover::after,.nav a.is-active::after{width:calc(100% - 2rem)} .nav a:hover{color:var(--gold-300)} .site-header.is-stuck .nav a:hover{color:var(--navy-800)} .header-cta{display:none} @media (min-width:980px){.header-cta{display:inline-flex;min-height:46px;padding:.65rem 1.35rem}} /* Barra de progreso de lectura */ .scroll-progress{ position:absolute;left:0;bottom:0;height:3px;width:100%; background:linear-gradient(90deg,var(--gold-400),var(--green-500),var(--navy-600)); transform-origin:0 50%;transform:scaleX(var(--p,0)); transition:transform .1s linear;opacity:0; } .site-header.is-stuck .scroll-progress{opacity:1} /* Botón hamburguesa */ .burger{ display:flex;flex-direction:column;align-items:center;justify-content:center; width:46px;height:46px;border-radius:var(--r-full); background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px);transition:background .3s var(--ease),transform .3s var(--ease-spring); } .site-header.is-stuck .burger{background:var(--mist);border-color:var(--line)} .burger:active{transform:scale(.93)} @media (min-width:980px){.burger{display:none}} .burger span{ display:block;width:20px;height:2px;border-radius:2px;background:#fff; transition:transform .4s var(--ease-out),opacity .25s var(--ease); } .site-header.is-stuck .burger span{background:var(--navy-800)} .burger span + span{margin-top:5px} body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0;transform:scaleX(.3)} body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Menú móvil */ .mobile-menu{ position:fixed;inset:0;z-index:99; background:linear-gradient(165deg,var(--navy-900),var(--navy-950) 60%,#04102e); padding:calc(var(--header-h) + env(safe-area-inset-top) + 2rem) var(--gutter) 2.5rem; display:flex;flex-direction:column;gap:.35rem; opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity .4s var(--ease),transform .5s var(--ease-out),visibility .4s; overflow-y:auto;overscroll-behavior:contain; } body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none} .mobile-menu::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 40% at 80% 12%,rgba(255,200,31,.16),transparent 70%), radial-gradient(50% 40% at 10% 85%,rgba(34,150,78,.18),transparent 70%); } .mobile-menu a:not(.btn){ position:relative;font-family:'Outfit',sans-serif;font-weight:700; font-size:clamp(1.5rem,7vw,2.1rem);color:#fff; padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.08); display:flex;align-items:center;justify-content:space-between; opacity:0;transform:translateY(18px); } body.menu-open .mobile-menu a:not(.btn){ animation:menuIn .6s var(--ease-out) forwards; animation-delay:calc(.07s * var(--i,0) + .12s); } @keyframes menuIn{to{opacity:1;transform:none}} .mobile-menu a:not(.btn) span{font-size:.7rem;font-weight:600;color:var(--gold-400);letter-spacing:.12em} .mobile-menu .btn{margin-top:1.4rem;opacity:0;transform:translateY(18px)} body.menu-open .mobile-menu .btn{animation:menuIn .6s var(--ease-out) .6s forwards} .mobile-menu-foot{ margin-top:auto;padding-top:1.8rem;color:rgba(255,255,255,.55);font-size:var(--fs-sm); display:flex;flex-wrap:wrap;gap:.4rem 1.2rem; } .mobile-menu-foot a{font-size:var(--fs-sm);font-family:'Inter',sans-serif;font-weight:500; color:rgba(255,255,255,.75);border:0;padding:0;display:inline;opacity:1;transform:none;animation:none !important} .mobile-menu .btn{flex:none} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:100svh; display:grid;align-items:center;grid-template-columns:minmax(0,1fr); padding-top:calc(var(--header-h) + 2.5rem); padding-bottom:clamp(3rem,6vw,5rem); color:#fff; } @supports not (min-height:100svh){.hero{min-height:100vh}} .hero-bg{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--navy-950)} .hero-slide{ position:absolute;inset:0; background-size:cover;background-position:center; opacity:0;transform:scale(1.12); transition:opacity 1.8s var(--ease); will-change:transform,opacity; } .hero-slide.is-active{opacity:1;animation:kenburns 14s linear forwards} @keyframes kenburns{ from{transform:scale(1.14) translate3d(1.2%,.8%,0)} to{transform:scale(1) translate3d(-1.2%,-.8%,0)} } .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(180deg,rgba(6,18,56,.55) 0%,rgba(6,18,56,.34) 42%,rgba(6,18,56,.86) 100%), linear-gradient(100deg,rgba(10,31,92,.94) 0%,rgba(10,31,92,.8) 30%,rgba(10,31,92,.48) 60%,rgba(6,18,56,.34) 100%); } .hero-noise{ position:absolute;inset:0;z-index:-2;opacity:.055;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); } .hero-glow{position:absolute;z-index:-2;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5} .hero-glow--gold{width:46vw;height:46vw;background:rgba(255,200,31,.42);top:-12%;right:-8%;animation:float1 18s ease-in-out infinite} .hero-glow--green{width:38vw;height:38vw;background:rgba(34,150,78,.4);bottom:-14%;left:-10%;animation:float2 22s ease-in-out infinite} @keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,6%) scale(1.12)}} @keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-5%) scale(1.15)}} .hero-inner{position:relative;z-index:2} .hero-copy{max-width:840px} .hero-badge{ display:inline-flex;align-items:center;gap:.65rem;flex-wrap:wrap; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); padding:.5rem .5rem .5rem 1rem;border-radius:var(--r-full); font-size:var(--fs-sm);font-weight:500;margin-bottom:1.4rem; opacity:0;animation:fadeUp .8s var(--ease-out) .15s forwards; } .hero-badge b{ font-family:'Outfit',sans-serif;background:var(--gold-400);color:var(--navy-900); padding:.25rem .8rem;border-radius:var(--r-full);font-size:var(--fs-xs); letter-spacing:.04em;white-space:nowrap; } .pulse-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#43D97B;flex:none} .pulse-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#43D97B;animation:pulse 2s var(--ease-out) infinite} @keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}} .hero h1{ font-size:var(--fs-hero);font-weight:900;letter-spacing:-.035em;line-height:1.02; margin-bottom:clamp(1rem,2vw,1.5rem); text-shadow:0 4px 40px rgba(0,0,0,.35); } .hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em} .hero h1 .line > span{display:block;transform:translateY(105%);animation:lineUp .95s var(--ease-out) forwards;animation-delay:calc(.1s * var(--i,0) + .25s)} @keyframes lineUp{to{transform:none}} /* Palabra rotativa */ .hero h1 .line > span.rotator, .rotator{display:inline-grid;vertical-align:top;position:relative;overflow:hidden;height:1.08em;line-height:inherit} .rotator > i{ grid-area:1/1;font-style:normal;white-space:nowrap; background:linear-gradient(100deg,var(--gold-300),var(--gold-400) 55%,var(--gold-500)); -webkit-background-clip:text;background-clip:text;color:transparent; opacity:0;transform:translateY(100%); transition:opacity .5s var(--ease),transform .65s var(--ease-out); } .rotator > i.is-in{opacity:1;transform:none} .rotator > i.is-out{opacity:0;transform:translateY(-100%)} .hero-sub{ font-size:clamp(1.02rem,.95rem + .55vw,1.35rem);color:rgba(255,255,255,.9); max-width:56ch;margin-bottom:clamp(1.6rem,3vw,2.2rem); opacity:0;animation:fadeUp .9s var(--ease-out) .75s forwards; } @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} .hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;opacity:0;animation:fadeUp .9s var(--ease-out) .9s forwards} .hero-chips{ display:flex;flex-wrap:wrap;gap:.55rem;margin-top:clamp(1.6rem,3vw,2.2rem); opacity:0;animation:fadeUp .9s var(--ease-out) 1.05s forwards; } .chip{ display:inline-flex;align-items:center;gap:.5rem; padding:.5rem 1rem;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:500; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px);transition:background .3s var(--ease),transform .3s var(--ease-spring); } .chip:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)} .chip svg{width:16px;height:16px;color:var(--gold-400);flex:none} /* Countdown */ .countdown{ display:flex;flex-wrap:wrap;align-items:center;gap:clamp(.45rem,1.6vw,.8rem); margin-top:clamp(1.8rem,3.4vw,2.6rem); opacity:0;animation:fadeUp .9s var(--ease-out) 1.2s forwards; } .countdown-label{ font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-xs); letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400); width:100%;margin-bottom:.15rem; } .cd-unit{ min-width:clamp(60px,15vw,78px);padding:.6rem .5rem;border-radius:var(--r-md); background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(12px);text-align:center; } .cd-unit b{ display:block;font-family:'Outfit',sans-serif;font-weight:800; font-size:clamp(1.35rem,4.5vw,1.95rem);line-height:1;font-variant-numeric:tabular-nums; } .cd-unit span{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:.3rem} /* Controles del carrusel de fondo */ .hero-dots{ display:flex;gap:.5rem;margin-top:clamp(1.5rem,3vw,2.1rem); opacity:0;animation:fadeUp .9s var(--ease-out) 1.35s forwards; } .hero-dots button{ width:30px;height:4px;border-radius:var(--r-full);background:rgba(255,255,255,.28); transition:background .35s var(--ease),width .35s var(--ease-out);position:relative;overflow:hidden; } .hero-dots button.is-active{background:rgba(255,255,255,.35);width:48px} .hero-dots button.is-active::after{ content:"";position:absolute;inset:0;background:var(--gold-400); transform-origin:0 50%;animation:dotFill 7s linear forwards; } @keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} .scroll-hint{ position:absolute;bottom:clamp(1.2rem,3.5vw,2rem);left:50%;translate:-50% 0;z-index:3; display:flex;flex-direction:column;align-items:center;gap:.5rem; font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6); animation:fadeUp .9s var(--ease-out) 1.6s both; } .scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);position:relative;overflow:hidden} .scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--gold-400);animation:scrollLine 2.2s var(--ease) infinite} @keyframes scrollLine{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}} @media (max-width:900px){.scroll-hint{display:none}} /* ============================================================ MARQUEE ============================================================ */ .marquee{ background:var(--navy-900);color:#fff;overflow:hidden; padding-block:clamp(.9rem,2vw,1.2rem); position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} .marquee-group{display:flex;align-items:center;gap:clamp(1.6rem,4vw,3rem);padding-right:clamp(1.6rem,4vw,3rem)} .marquee-group span{ font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(.95rem,.85rem + .5vw,1.3rem); letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:.7rem; } .marquee-group span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-400);flex:none} .marquee-group span:nth-child(even){color:rgba(255,255,255,.5)} .marquee-group span:nth-child(even)::after{background:var(--green-500)} /* ============================================================ MÉTRICAS ============================================================ */ .stats{background:var(--paper);position:relative;z-index:2;padding-block:clamp(2.5rem,4vw,4rem)} .stats-grid{ display:grid;gap:1px;background:var(--line); border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md); grid-template-columns:repeat(2,1fr); } @media (min-width:860px){.stats-grid{grid-template-columns:repeat(4,1fr)}} .stat{ background:var(--paper);padding:clamp(1.4rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem); text-align:center;transition:background .4s var(--ease); } .stat:hover{background:linear-gradient(180deg,#fff,var(--mist))} .stat b{ display:block;font-family:'Outfit',sans-serif;font-weight:900; font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);line-height:1; color:var(--navy-800);font-variant-numeric:tabular-nums;letter-spacing:-.04em; } .stat b span{display:inline;margin:0;font-size:inherit;color:inherit;font-weight:inherit;line-height:inherit} .stat b .unit{color:var(--gold-500)} .stat > span{display:block;margin-top:.5rem;font-size:var(--fs-sm);color:var(--ink-3);font-weight:500;line-height:1.4} /* ============================================================ SOBRE NOSOTROS ============================================================ */ .about{background:var(--cream);overflow:hidden} .about-grid{display:grid;gap:clamp(2.4rem,5vw,4.5rem);align-items:center} @media (min-width:960px){.about-grid{grid-template-columns:1.02fr 1fr}} .about-media{position:relative;perspective:1200px} .about-media .frame{ position:relative;border-radius:var(--r-xl);overflow:hidden; box-shadow:var(--sh-lg);aspect-ratio:4/3; transform:rotate(-1.4deg);transition:transform .7s var(--ease-out); } .about-media:hover .frame{transform:rotate(0deg) scale(1.015)} .about-media .frame img{width:100%;height:100%;object-fit:cover} .about-media .frame::after{ content:"";position:absolute;inset:0; background:linear-gradient(200deg,transparent 55%,rgba(10,31,92,.35)); } .about-media .frame-sm{ position:absolute;right:-4%;bottom:-9%;width:44%; border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1; box-shadow:0 20px 50px rgba(10,31,92,.28);border:5px solid var(--cream); transform:rotate(3deg);transition:transform .7s var(--ease-out); } .about-media:hover .frame-sm{transform:rotate(0deg) translateY(-6px)} .about-media .frame-sm img{width:100%;height:100%;object-fit:cover} @media (max-width:560px){.about-media .frame-sm{width:46%;right:-2%;bottom:-7%}} .about-media .deco{ position:absolute;left:-8%;top:-7%;width:38%;aspect-ratio:1;z-index:-1; background:radial-gradient(circle at 30% 30%,rgba(255,200,31,.5),transparent 65%); filter:blur(20px); } .badge-float{ position:absolute;left:-3%;top:8%;z-index:3; display:flex;align-items:center;gap:.7rem; background:rgba(255,255,255,.92);backdrop-filter:blur(12px); border:1px solid var(--line);border-radius:var(--r-full); padding:.6rem 1.1rem .6rem .6rem;box-shadow:var(--sh-md); animation:bob 5s ease-in-out infinite; } @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .badge-float .ico{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none; background:linear-gradient(135deg,var(--green-500),var(--green-700));color:#fff; } .badge-float .ico svg{width:18px;height:18px} .badge-float b{display:block;font-family:'Outfit',sans-serif;font-size:.9rem;color:var(--navy-900);line-height:1.15} .badge-float small{display:block;font-size:.7rem;color:var(--ink-3)} @media (max-width:560px){.badge-float{left:0;padding:.5rem .9rem .5rem .5rem}.badge-float b{font-size:.8rem}} .about-copy p + p{margin-top:1.1rem} .about-copy .lead{margin-bottom:1.2rem} .about-copy p{color:var(--ink-2)} .about-pillars{display:grid;gap:.9rem;margin-top:2rem} @media (min-width:600px){.about-pillars{grid-template-columns:1fr 1fr}} .pill{ display:flex;align-items:flex-start;gap:.8rem; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:.95rem 1.1rem;box-shadow:var(--sh-sm); transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease),border-color .4s var(--ease); } .pill:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:rgba(27,69,170,.28)} .pill .ico{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none; background:linear-gradient(135deg,rgba(27,69,170,.12),rgba(255,200,31,.2));color:var(--navy-700); } .pill .ico svg{width:18px;height:18px} .pill b{display:block;font-family:'Outfit',sans-serif;font-size:.98rem;color:var(--navy-900);line-height:1.25} .pill small{display:block;font-size:.83rem;color:var(--ink-3);line-height:1.45;margin-top:.15rem} .slogan{ margin-top:2rem;padding:1.2rem 1.5rem;border-radius:var(--r-md); border-left:4px solid var(--gold-400); background:linear-gradient(100deg,rgba(255,200,31,.14),rgba(255,200,31,0)); font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-lg); color:var(--navy-900);line-height:1.35; } /* Aliado */ .ally{ margin-top:clamp(3rem,6vw,4.5rem); display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem; padding:1.4rem clamp(1.2rem,3vw,2.4rem); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-sm);text-align:center; } .ally p{font-size:var(--fs-sm);color:var(--ink-3);margin:0} .ally strong{color:var(--navy-800);font-family:'Outfit',sans-serif} /* ============================================================ METODOLOGÍA ============================================================ */ .method{ background:linear-gradient(180deg,var(--navy-950),var(--navy-900) 45%,#0b2568); color:#fff;position:relative;overflow:hidden; } .method::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(65% 45% at 12% 0%,rgba(255,200,31,.13),transparent 60%), radial-gradient(55% 45% at 90% 100%,rgba(34,150,78,.18),transparent 65%); } .method .h-section{color:#fff} .method .lead{color:rgba(255,255,255,.78)} .method-grid{display:grid;gap:clamp(1rem,2vw,1.5rem);position:relative} @media (min-width:640px){.method-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.method-grid{grid-template-columns:repeat(4,1fr)}} .mcard{ position:relative;isolation:isolate;overflow:hidden; padding:clamp(1.4rem,2.6vw,2rem);border-radius:var(--r-lg); background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); transition:transform .5s var(--ease-out),background .5s var(--ease),border-color .5s var(--ease); } .mcard::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:0; background:radial-gradient(120% 100% at 0% 0%,rgba(255,200,31,.2),transparent 62%); transition:opacity .5s var(--ease); } .mcard:hover{transform:translateY(-8px);background:rgba(255,255,255,.09);border-color:rgba(255,200,31,.35)} .mcard:hover::before{opacity:1} .mcard .num{ font-family:'Outfit',sans-serif;font-weight:900;font-size:2.6rem;line-height:1; color:transparent;-webkit-text-stroke:1.4px rgba(255,200,31,.55); display:block;margin-bottom:.9rem; } .mcard .ico{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg,rgba(255,200,31,.22),rgba(255,255,255,.06)); border:1px solid rgba(255,200,31,.28);color:var(--gold-400);margin-bottom:1rem; } .mcard .ico svg{width:22px;height:22px} .mcard h3{font-size:var(--fs-xl);margin-bottom:.5rem;color:#fff} .mcard p{font-size:var(--fs-sm);color:rgba(255,255,255,.72);line-height:1.6} /* ============================================================ AUDIO LAB ============================================================ */ .lab{background:var(--mist);position:relative;overflow:hidden} .lab::before{ content:"";position:absolute;width:60vw;height:60vw;max-width:820px;max-height:820px; border-radius:50%;top:-25%;right:-18%;pointer-events:none; background:radial-gradient(circle,rgba(91,103,199,.16),transparent 68%); } .lab-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2rem} .lab-head .section-head{margin-bottom:0} .lab-tabs{ display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none; padding:.35rem .2rem 1rem;margin-bottom:.4rem; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; } .lab-tabs::-webkit-scrollbar{display:none} .lab-tab{ flex:none;scroll-snap-align:start;position:relative;overflow:hidden; display:flex;align-items:center;gap:.6rem; padding:.7rem 1.15rem;border-radius:var(--r-full); background:var(--paper);border:1px solid var(--line); font-family:'Outfit',sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--ink-2); white-space:nowrap;min-height:46px; transition:color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease-spring); } .lab-tab .emoji{font-size:1.05rem;line-height:1} .lab-tab:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)} .lab-tab.is-active{ color:#fff;border-color:transparent; background:linear-gradient(120deg,var(--navy-800),var(--navy-700)); box-shadow:0 8px 22px rgba(18,48,127,.28); } .lab-panel{ display:grid;gap:clamp(1.2rem,2.4vw,2rem);align-items:start; } @media (min-width:920px){.lab-panel{grid-template-columns:.85fr 1.15fr}} .lab-visual{ position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:4/3;box-shadow:var(--sh-lg);background:var(--navy-900); } @media (min-width:920px){.lab-visual{position:sticky;top:calc(var(--header-h) + 20px)}} .lab-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),opacity .5s var(--ease)} .lab-visual:hover img{transform:scale(1.05)} .lab-visual::after{ content:"";position:absolute;inset:0; background:linear-gradient(190deg,rgba(6,18,56,.15) 30%,rgba(6,18,56,.9)); } .lab-visual-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(1.2rem,3vw,1.8rem);color:#fff} .lab-visual-copy h3{font-size:var(--fs-2xl);margin-bottom:.3rem} .lab-visual-copy p{font-size:var(--fs-sm);color:rgba(255,255,255,.8)} .phrase-list{display:grid;gap:.7rem} .phrase{ display:flex;align-items:center;gap:clamp(.7rem,2vw,1.1rem); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:clamp(.75rem,2vw,1rem) clamp(.85rem,2vw,1.2rem); box-shadow:var(--sh-sm);text-align:left;width:100%; transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease); } .phrase:hover{transform:translateX(4px);box-shadow:var(--sh-md);border-color:rgba(27,69,170,.3)} .phrase.is-playing{ border-color:var(--gold-400); background:linear-gradient(100deg,rgba(255,200,31,.11),var(--paper) 60%); box-shadow:0 8px 26px rgba(255,200,31,.24); } .phrase .play{ width:clamp(40px,9vw,46px);height:clamp(40px,9vw,46px);border-radius:50%;flex:none; display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--navy-700),var(--navy-900)); box-shadow:0 6px 16px rgba(18,48,127,.32); transition:transform .4s var(--ease-spring),background .4s var(--ease); } .phrase:hover .play{transform:scale(1.08)} .phrase.is-playing .play{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));color:var(--navy-900)} .phrase .play svg{width:16px;height:16px} .phrase .play .icon-pause{display:none} .phrase.is-playing .play .icon-play{display:none} .phrase.is-playing .play .icon-pause{display:block} .phrase-text{flex:1;min-width:0} .phrase-en{ display:block;font-family:'Outfit',sans-serif;font-weight:700; font-size:clamp(.98rem,.92rem + .35vw,1.14rem);color:var(--navy-900);line-height:1.25; } .phrase-es{display:block;font-size:var(--fs-sm);color:var(--ink-3);margin-top:.15rem;line-height:1.35} .wave{display:flex;align-items:center;gap:3px;height:24px;flex:none;padding-left:.2rem} .wave i{ display:block;width:3px;height:6px;border-radius:2px;background:var(--line); transition:background .3s var(--ease); } .phrase.is-playing .wave i{ background:var(--gold-500); animation:waveBar .9s ease-in-out infinite; animation-delay:calc(var(--wi) * .09s); } @keyframes waveBar{0%,100%{height:6px}50%{height:22px}} @media (max-width:420px){.wave{display:none}} .lab-note{ margin-top:1.5rem;display:flex;align-items:flex-start;gap:.8rem; font-size:var(--fs-sm);color:var(--ink-3); background:rgba(255,255,255,.7);border:1px dashed rgba(27,69,170,.24); border-radius:var(--r-md);padding:.9rem 1.1rem; } .lab-note svg{width:20px;height:20px;color:var(--navy-700);flex:none;margin-top:2px} /* ============================================================ PROGRAMAS ============================================================ */ .programs{background:var(--cream);position:relative;overflow:hidden} .programs::before{ content:"";position:absolute;left:-15%;bottom:-10%;width:55vw;height:55vw; max-width:700px;max-height:700px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(34,150,78,.1),transparent 68%); } .switch{ display:inline-flex;padding:.35rem;border-radius:var(--r-full); background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-sm); position:relative;margin-inline:auto; } .switch button{ position:relative;z-index:2;min-height:44px;padding:.6rem clamp(1rem,3vw,1.7rem); border-radius:var(--r-full);font-family:'Outfit',sans-serif;font-weight:700; font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap; transition:color .35s var(--ease); } .switch button.is-active{color:#fff} .switch .thumb{ position:absolute;z-index:1;top:.35rem;bottom:.35rem;left:.35rem; border-radius:var(--r-full); background:linear-gradient(120deg,var(--navy-800),var(--navy-700)); box-shadow:0 6px 18px rgba(18,48,127,.3); transition:transform .5s var(--ease-out),width .5s var(--ease-out); } .plans{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem);margin-top:clamp(2rem,4vw,3rem)} @media (min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}} @media (min-width:1120px){.plans{grid-template-columns:repeat(2,1fr);max-width:1080px;margin-inline:auto}} .plan{ position:relative;display:flex;flex-direction:column;overflow:hidden; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:transform .55s var(--ease-out),box-shadow .55s var(--ease),border-color .55s var(--ease); } .plan:hover{transform:translateY(-10px);box-shadow:var(--sh-lg);border-color:rgba(27,69,170,.24)} .plan.is-featured{border-color:var(--gold-400);box-shadow:0 10px 30px rgba(255,200,31,.18)} .plan-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-900)} .plan-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)} .plan:hover .plan-media img{transform:scale(1.07)} .plan-media::after{content:"";position:absolute;inset:0;background:linear-gradient(190deg,rgba(6,18,56,.1) 35%,rgba(6,18,56,.82))} .plan-tag{ position:absolute;z-index:2;top:.9rem;left:.9rem; font-family:'Outfit',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;padding:.35rem .8rem;border-radius:var(--r-full); background:rgba(255,255,255,.92);color:var(--navy-800);backdrop-filter:blur(8px); } .plan-tag--hot{background:linear-gradient(120deg,var(--gold-400),var(--gold-500));color:var(--navy-900)} .plan-media-title{ position:absolute;z-index:2;left:0;right:0;bottom:0;padding:1rem 1.15rem;color:#fff; } .plan-media-title h3{font-size:var(--fs-xl);line-height:1.15} .plan-media-title p{font-size:var(--fs-sm);color:rgba(255,255,255,.82);margin-top:.15rem} .plan-body{padding:clamp(1.2rem,2.6vw,1.7rem);display:flex;flex-direction:column;flex:1} .price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem} .price{ font-family:'Outfit',sans-serif;font-weight:900;letter-spacing:-.04em; font-size:clamp(1.85rem,1.4rem + 1.9vw,2.6rem);line-height:1;color:var(--green-600); } .price-per{font-size:var(--fs-sm);color:var(--ink-3);font-weight:500} .price-note{font-size:var(--fs-sm);color:var(--ink-3);margin-top:.4rem} .price-note b{color:var(--navy-800)} .plan-feats{margin:1.15rem 0;display:grid;gap:.55rem;flex:1} .plan-feats li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5} .plan-feats li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--green-600)} .plan-options{ display:grid;gap:.5rem;margin-bottom:1.2rem;padding-top:1rem;border-top:1px dashed var(--line); } .plan-option{ display:flex;align-items:center;justify-content:space-between;gap:.8rem; font-size:var(--fs-sm);padding:.55rem .8rem;border-radius:var(--r-sm); background:var(--mist);transition:background .3s var(--ease); } .plan-option:hover{background:rgba(255,200,31,.14)} .plan-option span{color:var(--ink-2);font-weight:500} .plan-option b{font-family:'Outfit',sans-serif;color:var(--navy-800);white-space:nowrap} .plan-option .save{ font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--green-700);background:rgba(34,150,78,.13);padding:.12rem .5rem;border-radius:var(--r-full); } /* ============================================================ PROMO ALIADA ============================================================ */ .promo{ background:linear-gradient(135deg,var(--navy-900),var(--navy-800) 55%,var(--navy-700)); color:#fff;position:relative;overflow:hidden; } .promo::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50% 60% at 88% 15%,rgba(255,200,31,.22),transparent 62%), radial-gradient(45% 55% at 5% 90%,rgba(34,150,78,.24),transparent 65%); } .promo-card{ position:relative;display:grid;gap:clamp(1.6rem,3.5vw,3rem);align-items:center; } @media (min-width:900px){.promo-card{grid-template-columns:1.15fr .85fr}} .promo .h-section{color:#fff} .promo .lead{color:rgba(255,255,255,.82)} .promo-price-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1.8rem} .promo-price{ padding:clamp(1.1rem,2.5vw,1.6rem);border-radius:var(--r-md);text-align:center; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(12px); } .promo-price.is-main{background:linear-gradient(140deg,rgba(255,200,31,.22),rgba(255,200,31,.08));border-color:rgba(255,200,31,.4)} .promo-price small{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem} .promo-price b{ display:block;font-family:'Outfit',sans-serif;font-weight:900;letter-spacing:-.03em; font-size:clamp(1.5rem,1.1rem + 2.1vw,2.4rem);line-height:1.05; } .promo-price .per{display:block;font-size:.78rem;color:rgba(255,255,255,.68);margin-top:.25rem} .promo-price.is-main b{color:var(--gold-400)} .promo-features{display:grid;gap:.7rem;margin-top:1.8rem} @media (min-width:520px){.promo-features{grid-template-columns:1fr 1fr}} .promo-feature{ display:flex;align-items:center;gap:.7rem;font-size:var(--fs-sm); background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm);padding:.7rem .9rem; } .promo-feature .ico{ width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center; background:rgba(255,200,31,.18);color:var(--gold-400); } .promo-feature .ico svg{width:16px;height:16px} .promo-aside{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2rem);backdrop-filter:blur(14px); text-align:center; } .promo-date{ font-family:'Outfit',sans-serif;font-weight:900;letter-spacing:-.03em; font-size:clamp(1.6rem,1.2rem + 1.9vw,2.3rem);line-height:1.1;color:var(--gold-400); margin:.4rem 0 .2rem; } .promo-aside .who{font-size:var(--fs-sm);color:rgba(255,255,255,.75);margin-bottom:1.4rem} .promo-aside .btn{width:100%} .promo-aside .cd-grid{display:flex;justify-content:center;gap:.5rem;margin:1.2rem 0} .promo-seal{ display:inline-flex;align-items:center;gap:.6rem;margin-top:1.3rem;padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:rgba(255,255,255,.65); text-align:left;line-height:1.35; } .promo-seal svg{width:26px;height:26px;color:var(--gold-400);flex:none} /* ============================================================ NIVELES ============================================================ */ .levels{background:var(--paper)} .levels-track{ display:grid;gap:1rem;position:relative; } @media (min-width:720px){.levels-track{grid-template-columns:repeat(2,1fr)}} @media (min-width:1060px){.levels-track{grid-template-columns:repeat(4,1fr)}} .level{ position:relative;padding:clamp(1.3rem,2.6vw,1.8rem);border-radius:var(--r-lg); background:var(--mist);border:1px solid var(--line);overflow:hidden; transition:transform .5s var(--ease-out),box-shadow .5s var(--ease),background .5s var(--ease); } .level::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,var(--gold-400),var(--green-500)); transform:scaleY(0);transform-origin:0 0;transition:transform .6s var(--ease-out); } .level:hover{transform:translateY(-6px);box-shadow:var(--sh-md);background:var(--paper)} .level:hover::before{transform:scaleY(1)} .level-code{ display:inline-flex;align-items:center;justify-content:center; font-family:'Outfit',sans-serif;font-weight:900;font-size:1.05rem;letter-spacing:-.02em; min-width:52px;height:34px;padding:0 .7rem;border-radius:var(--r-full); background:linear-gradient(120deg,var(--navy-800),var(--navy-700));color:#fff; margin-bottom:.9rem; } .level h3{font-size:var(--fs-lg);color:var(--navy-900);margin-bottom:.5rem} .level p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.55} .level ul{margin-top:.9rem;display:grid;gap:.4rem} .level li{display:flex;gap:.5rem;font-size:.86rem;color:var(--ink-2);line-height:1.45} .level li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-500);flex:none;margin-top:.55rem} /* ============================================================ BENEFICIOS ============================================================ */ .benefits{background:var(--cream)} .benefits-grid{display:grid;gap:clamp(1rem,2vw,1.4rem)} @media (min-width:620px){.benefits-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.benefits-grid{grid-template-columns:repeat(3,1fr)}} .benefit{ position:relative;overflow:hidden;isolation:isolate; padding:clamp(1.4rem,2.8vw,2rem);border-radius:var(--r-lg); background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-sm); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease); } .benefit::after{ content:"";position:absolute;right:-30%;top:-40%;width:70%;aspect-ratio:1;z-index:-1; border-radius:50%;background:radial-gradient(circle,rgba(255,200,31,.22),transparent 65%); opacity:0;transform:scale(.6);transition:opacity .6s var(--ease),transform .7s var(--ease-out); } .benefit:hover{transform:translateY(-7px);box-shadow:var(--sh-lg)} .benefit:hover::after{opacity:1;transform:scale(1)} .benefit .ico{ width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem; background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:#fff; box-shadow:0 8px 20px rgba(18,48,127,.26); transition:transform .5s var(--ease-spring); } .benefit:hover .ico{transform:rotate(-7deg) scale(1.06)} .benefit .ico svg{width:24px;height:24px} .benefit h3{font-size:var(--fs-lg);color:var(--navy-900);margin-bottom:.45rem} .benefit p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.6} /* ============================================================ FAQ ============================================================ */ .faq{background:var(--paper)} .faq-grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem)} @media (min-width:940px){.faq-grid{grid-template-columns:.8fr 1.2fr;align-items:start}} .faq-list{display:grid;gap:.7rem} .faq-item{ border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; background:var(--cream);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease); } .faq-item.is-open{border-color:rgba(255,200,31,.55);box-shadow:var(--sh-md);background:var(--paper)} .faq-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:clamp(.95rem,2.2vw,1.2rem) clamp(1rem,2.4vw,1.4rem); font-family:'Outfit',sans-serif;font-weight:700;font-size:var(--fs-base); color:var(--navy-900);text-align:left;line-height:1.35;min-height:56px; } .faq-q .toggle{ width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--mist);color:var(--navy-700);transition:transform .45s var(--ease-spring),background .35s var(--ease),color .35s var(--ease); } .faq-item.is-open .toggle{transform:rotate(135deg);background:var(--gold-400);color:var(--navy-900)} .faq-q .toggle svg{width:15px;height:15px} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)} .faq-item.is-open .faq-a{grid-template-rows:1fr} .faq-a > div{overflow:hidden} .faq-a p{ padding:0 clamp(1rem,2.4vw,1.4rem) clamp(1rem,2.2vw,1.3rem); font-size:var(--fs-sm);color:var(--ink-2);line-height:1.65; } .faq-a p + p{padding-top:0;margin-top:-.4rem} /* ============================================================ CTA PARALLAX ============================================================ */ .cta{ position:relative;isolation:isolate;overflow:hidden;color:#fff; padding-block:clamp(4.5rem,8vw,9rem);text-align:center; } .cta-bg{ position:absolute;inset:-12% 0;z-index:-2; background-image:url('../img/bg/cta-mundo.jpg'); background-size:cover;background-position:center; will-change:transform; } .cta::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(6,18,56,.86),rgba(10,31,92,.9)), radial-gradient(60% 60% at 50% 40%,rgba(27,122,62,.28),transparent 70%); } .cta h2{font-size:var(--fs-4xl);margin-bottom:1rem;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)} .cta p{font-size:var(--fs-lg);color:rgba(255,255,255,.86);max-width:56ch;margin:0 auto 2.2rem} .cta-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center} /* ============================================================ CONTACTO ============================================================ */ .contact{background:var(--mist);position:relative;overflow:hidden} .contact-grid{display:grid;gap:clamp(1.6rem,3.5vw,3rem);align-items:start} @media (min-width:940px){.contact-grid{grid-template-columns:.95fr 1.05fr}} .contact-cards{display:grid;gap:.8rem;margin-top:2rem} .ccard{ display:flex;align-items:center;gap:1rem; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:1rem 1.15rem;box-shadow:var(--sh-sm); transition:transform .45s var(--ease-spring),box-shadow .45s var(--ease),border-color .45s var(--ease); } .ccard:hover{transform:translateY(-4px) translateX(3px);box-shadow:var(--sh-md);border-color:rgba(27,69,170,.28)} .ccard .ico{ width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,var(--navy-800),var(--navy-600)); } .ccard.is-wa .ico{background:linear-gradient(135deg,#25D366,#128C7E)} .ccard.is-ig .ico{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)} .ccard .ico svg{width:22px;height:22px} .ccard b{display:block;font-family:'Outfit',sans-serif;font-size:.98rem;color:var(--navy-900);line-height:1.2} .ccard small{display:block;font-size:.84rem;color:var(--ink-3);margin-top:.1rem;word-break:break-word} .ccard .arrow{margin-left:auto;color:var(--ink-3);transition:transform .4s var(--ease-out),color .4s var(--ease);flex:none} .ccard:hover .arrow{transform:translateX(4px);color:var(--navy-700)} .ccard .arrow svg{width:18px;height:18px} .form-card{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--sh-md); } .form-card h3{font-size:var(--fs-xl);color:var(--navy-900);margin-bottom:.4rem} .form-card > p{font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:1.5rem} .field{display:grid;gap:.4rem;margin-bottom:1rem} .field label{font-family:'Outfit',sans-serif;font-weight:600;font-size:.85rem;color:var(--navy-800)} .field input,.field select,.field textarea{ width:100%;min-height:50px;padding:.75rem 1rem;border-radius:var(--r-sm); background:var(--mist);border:1.5px solid transparent;font-size:var(--fs-sm); transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease); } .field textarea{min-height:104px;resize:vertical;line-height:1.55} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366738F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;background:var(--paper);border-color:var(--navy-600); box-shadow:0 0 0 4px rgba(42,90,209,.12); } .field-row{display:grid;gap:1rem} @media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}} .form-legal{font-size:.78rem;color:var(--ink-3);margin-top:.9rem;text-align:center;line-height:1.5} /* ============================================================ FOOTER ============================================================ */ .site-footer{ background:linear-gradient(180deg,var(--navy-950),#040d29);color:rgba(255,255,255,.72); padding-top:clamp(3rem,6vw,5rem);position:relative;overflow:hidden; } .site-footer::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50% 40% at 15% 0%,rgba(27,69,170,.35),transparent 62%); } .footer-grid{ position:relative;display:grid;gap:clamp(1.8rem,4vw,3rem); padding-bottom:clamp(2.4rem,4vw,3.5rem); } @media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1000px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}} .footer-brand img{height:30px;width:auto;filter:brightness(0) invert(1);margin-bottom:1rem} .footer-brand p{font-size:var(--fs-sm);line-height:1.65;max-width:38ch} .footer-col h4{ font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff; margin-bottom:1.1rem;font-weight:700; } .footer-col ul{display:grid;gap:.6rem} .footer-col a{font-size:var(--fs-sm);transition:color .3s var(--ease),padding-left .3s var(--ease-out);display:inline-block} .footer-col a:hover{color:var(--gold-400);padding-left:5px} .footer-social{display:flex;gap:.6rem;margin-top:1.4rem} .footer-social a{ width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff; transition:transform .4s var(--ease-spring),background .35s var(--ease);padding:0; } .footer-social a:hover{transform:translateY(-4px);background:var(--gold-400);color:var(--navy-900);padding-left:0} .footer-social svg{width:19px;height:19px} .footer-bottom{ position:relative;border-top:1px solid rgba(255,255,255,.09); padding-block:1.4rem;padding-bottom:calc(1.4rem + env(safe-area-inset-bottom)); display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between; font-size:.82rem; } .footer-bottom a:hover{color:var(--gold-400)} /* ============================================================ FLOTANTES ============================================================ */ .fab{ position:fixed;right:clamp(.9rem,3vw,1.6rem);z-index:80; bottom:calc(clamp(.9rem,3vw,1.6rem) + env(safe-area-inset-bottom)); width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,#25D366,#128C7E); box-shadow:0 10px 30px rgba(37,211,102,.4); transition:transform .45s var(--ease-spring),box-shadow .4s var(--ease); } .fab:hover{transform:scale(1.09)} .fab svg{width:28px;height:28px} .fab::before{ content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.55); animation:fabPulse 2.6s var(--ease-out) infinite; } @keyframes fabPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}} .fab-label{ position:absolute;right:calc(100% + .7rem);white-space:nowrap; background:var(--navy-900);color:#fff;font-size:.8rem;font-weight:600; padding:.45rem .85rem;border-radius:var(--r-full);box-shadow:var(--sh-md); opacity:0;transform:translateX(8px);transition:opacity .35s var(--ease),transform .35s var(--ease-out); pointer-events:none; } .fab:hover .fab-label{opacity:1;transform:none} @media (max-width:600px){.fab-label{display:none}} .to-top{ position:fixed;left:clamp(.9rem,3vw,1.6rem);z-index:80; bottom:calc(clamp(.9rem,3vw,1.6rem) + env(safe-area-inset-bottom)); width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.92);color:var(--navy-800);border:1px solid var(--line); box-shadow:var(--sh-md);backdrop-filter:blur(10px); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .4s var(--ease),transform .4s var(--ease-out),visibility .4s,background .3s var(--ease); } .to-top.is-visible{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--navy-800);color:#fff} .to-top svg{width:19px;height:19px} /* ============================================================ REVEAL / MOTION ============================================================ */ [data-reveal]{ opacity:0; transition:opacity .85s var(--ease-out),transform .95s var(--ease-out); transition-delay:calc(var(--d,0) * 85ms); will-change:opacity,transform; } [data-reveal="up"]{transform:translateY(34px)} [data-reveal="down"]{transform:translateY(-26px)} [data-reveal="left"]{transform:translateX(-38px)} [data-reveal="right"]{transform:translateX(38px)} [data-reveal="scale"]{transform:scale(.93)} [data-reveal="blur"]{filter:blur(12px);transform:translateY(20px)} [data-reveal].is-in{opacity:1;transform:none;filter:none} .tilt{transition:transform .5s var(--ease-out)} /* ============================================================ RESPONSIVE FINO ============================================================ */ @media (max-width:1024px){ :root{--header-h:70px} } @media (max-width:640px){ :root{--header-h:64px;--sp-section:clamp(3.2rem,2.4rem + 5vw,5rem)} .hero{padding-top:calc(var(--header-h) + 1.6rem)} .hero-dots{margin-top:1.2rem} .lab-head{flex-direction:column;align-items:stretch} .stats-grid{border-radius:var(--r-md)} .promo-price-grid{grid-template-columns:1fr} .btn{width:100%} .hero-actions .btn,.cta-actions .btn{width:100%} .about-media .frame{aspect-ratio:5/4} } @media (max-width:400px){ .cd-unit{min-width:56px;padding:.5rem .35rem} .chip{font-size:.8rem;padding:.42rem .8rem} .lab-tab{padding:.6rem .9rem;font-size:.82rem} } /* Landscape móvil: el hero no debe forzar 100svh */ @media (max-height:560px) and (orientation:landscape){ .hero{min-height:auto;padding-block:calc(var(--header-h) + 2rem) 3rem} .scroll-hint{display:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important} .hero h1 .line > span{transform:none} .hero-sub,.hero-actions,.hero-chips,.countdown,.hero-badge{opacity:1} .marquee-track{animation:none} .rotator > i:first-child{opacity:1;transform:none} } @media print{ .site-header,.mobile-menu,.fab,.to-top,.hero-dots,.scroll-hint,.marquee{display:none !important} .hero{min-height:auto;color:#000} .hero-bg{display:none} body{background:#fff} } /* ============================================================ AJUSTES POR ALTURA DE VIEWPORT El hero debe caber completo en portátiles de pantalla corta ============================================================ */ @media (min-width:901px) and (max-height:940px){ .hero{--fs-hero:clamp(2.4rem,1.4rem + 3.2vw,3.9rem)} .hero h1{margin-bottom:.75rem} .hero-badge{margin-bottom:1rem;padding-block:.42rem} .hero-sub{font-size:1.06rem;margin-bottom:1.3rem;max-width:52ch} .hero-actions .btn{min-height:52px;padding:.85rem 1.7rem;font-size:var(--fs-sm)} .hero-chips{margin-top:1.15rem;gap:.45rem} .chip{padding:.42rem .85rem;font-size:.84rem} .countdown{margin-top:1.3rem} .hero-dots{margin-top:1.2rem} .cd-unit{padding:.5rem .45rem;min-width:64px} .cd-unit b{font-size:1.5rem} } @media (min-width:901px) and (max-height:800px){ .hero{--fs-hero:clamp(2.2rem,1.2rem + 2.8vw,3.3rem);padding-top:calc(var(--header-h) + 1.4rem)} .hero-sub{font-size:1rem;margin-bottom:1.1rem} .hero-chips{display:none} } /* FAQ: la columna de texto acompaña el scroll de la lista */ @media (min-width:940px){ .faq-grid > div:first-child{position:sticky;top:calc(var(--header-h) + 28px)} } /* La tarjeta de contacto no debe estirarse sola */ @media (min-width:940px){ .contact-grid{align-items:stretch} .contact-grid > div:first-child{display:flex;flex-direction:column} .contact-cards{margin-top:auto;padding-top:1.4rem} } /* ============================================================ COMPACTADO DEL HERO EN MÓVIL ============================================================ */ @media (max-width:640px){ .hero-badge{padding:.45rem .45rem .45rem .85rem;font-size:.82rem;gap:.5rem} .hero-badge b{font-size:.72rem;padding:.22rem .65rem} .hero-sub{margin-bottom:1.4rem;line-height:1.55} /* Los chips pasan a una sola fila deslizable: ahorran altura sin perder mensaje */ .hero-chips{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);padding-block:.15rem; margin-top:1.3rem; } .hero-chips::-webkit-scrollbar{display:none} .chip{flex:none;scroll-snap-align:start} .hero-actions{gap:.65rem} .hero-actions .btn{min-height:54px} .countdown{margin-top:1.4rem;gap:.4rem} .cd-unit{flex:1;min-width:0;padding:.55rem .3rem} .cd-unit b{font-size:clamp(1.25rem,6vw,1.7rem)} .cd-unit span{font-size:.58rem;letter-spacing:.08em} } /* Móviles muy estrechos: el titular no debe romperse en exceso */ @media (max-width:360px){ .hero{--fs-hero:1.95rem} .hero-sub{font-size:.95rem} .rotator > i{white-space:normal} } /* ============================================================ AFINADO FINAL RESPONSIVE ============================================================ */ /* Audio Lab en una columna: la foto no debe comerse la pantalla */ @media (max-width:919px){ .lab-visual{aspect-ratio:16/10;max-height:min(46vh,300px)} .lab-visual-copy{padding:1rem 1.15rem} .lab-visual-copy h3{font-size:var(--fs-xl)} } /* Las etiquetas de ahorro no deben partirse */ .plan-option .save{white-space:nowrap} .plan-option span{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;min-width:0} /* Menú móvil: el CTA conserva su propia tipografía */ .mobile-menu .btn{font-size:var(--fs-base);border-bottom:0} /* Tarjetas de contacto en pantallas muy estrechas */ @media (max-width:360px){ .ccard small{font-size:.76rem} .ccard{gap:.7rem;padding:.85rem .9rem} .ccard .ico{width:40px;height:40px;border-radius:12px} } /* El bloque de imágenes de "Nosotros" respira mejor en móvil */ @media (max-width:640px){ .about-media{margin-bottom:2.2rem} .about-media .frame-sm{width:42%;right:0;bottom:-8%} .badge-float{top:4%;animation-duration:6s} .slogan{font-size:var(--fs-base);padding:1rem 1.2rem} } /* Tablet: los programas ya caben en dos columnas cómodas */ @media (min-width:700px) and (max-width:900px){ .plan-body{padding:1.1rem} .plan-media-title h3{font-size:var(--fs-lg)} .price{font-size:1.75rem} } /* Cierre comercial del Audio Lab */ .lab-cta{ margin-top:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem; justify-content:space-between; padding:clamp(1.1rem,2.4vw,1.5rem);border-radius:var(--r-md); background:linear-gradient(115deg,var(--navy-900),var(--navy-700));color:#fff; box-shadow:var(--sh-md); } .lab-cta p{font-size:var(--fs-sm);color:rgba(255,255,255,.86);margin:0;flex:1;min-width:200px;line-height:1.55} .lab-cta .btn{flex:none} @media (max-width:560px){.lab-cta .btn{width:100%}}