/* ══════════════════════════════════════════════════════════════════════════ AWKES — entrenamientos en vivo desde casa Base: el sistema medido en sublime.app (escala con interlineado 0.9, grises "stone", píldoras de 14px con radio 5px, paréntesis en serifa, 160px de aire por sección). Encima, lo propio de AWKES: · dos acentos, violeta y naranjo, que se alternan; · sin bordes de color — los bloques se separan por blancos y grises distintos; · un fluido lento y permanente detrás de todo, con grano encima; · emojis como señales, no como decoración. Tipografías: grotesco variable (Inter Tight) + serifa de display (Instrument Serif). Si prefieres la serifa anterior, borra "Instrument Serif" de --serif y queda Times New Roman. ══════════════════════════════════════════════════════════════════════════ */ :root{ color-scheme:only light; /* ── blancos y grises: la separación se hace con estos, no con bordes ── */ --paper-0:#fdfdfc; /* fondo de página */ --paper-1:#f8f8f6; /* bloque apenas insinuado */ --paper-2:#f2f1ee; /* bloque cálido */ --paper-3:#ebeae6; /* bloque más presente */ --paper-4:#e3e2dd; --stone-1:#181816; /* titulares */ --stone-2:#3d3c3a; --stone-3:#6a6967; --stone-4:#908f8e; /* titulares secundarios y copy */ --stone-5:#a29e9c; /* meta, pies */ --stone-6:#e9e8e5; /* filetes */ /* ── los dos acentos ── */ --violet:#c9a2ff; --violet-ink:#4b2f7a; --violet-air:#efe4ff; --orange:#ff9350; --orange-ink:#8a3d10; --orange-air:#ffe8d6; /* ── tipografía ── */ --sans:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --serif:"Instrument Serif","Times New Roman",Times,serif; --d1:clamp(2.5rem,8.4vw,7.5rem); --d2:clamp(2rem,4.6vw,3.75rem); --c1:clamp(1.25rem,2.2vw,1.75rem); --c2:1rem; --c3:.75rem; /* ── ritmo ── */ --gutter:clamp(1.25rem,4vw,2.5rem); --sect:clamp(3.5rem,10vw,10rem); --void:clamp(6rem,15vw,15rem); --shell:1536px; --r:5px; --e:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box} html{background:var(--paper-0);scrollbar-gutter:stable;scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{ margin:0;background:transparent;color:var(--stone-1); font:400 18px/1.5 var(--sans);letter-spacing:-.01875em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} img,svg,video{display:block;max-width:100%} ::selection{background:var(--orange-air);color:var(--orange-ink)} :focus-visible{outline:1px solid var(--stone-1);outline-offset:4px;border-radius:var(--r)} .skip{position:fixed;z-index:99;top:10px;left:10px;padding:9px 14px;border-radius:var(--r); background:var(--stone-1);color:var(--paper-0);font-size:14px;transform:translateY(-250%)} .skip:focus{transform:none} .shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)} /* ══ fluido permanente ═════════════════════════════════════════════════════ Tres masas de color muy desenfocadas que nunca dejan de moverse. Van detrás de todo (z-index:-1 sobre el fondo de ) y el grano las ensucia un poco para que no parezcan un degradado de plantilla. */ .fluid{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none; contain:strict} .fluid i{position:absolute;display:block;border-radius:50%; filter:blur(70px);will-change:transform} .fluid i:nth-child(1){width:74vmax;height:74vmax;left:-24vmax;top:-28vmax;opacity:.55; background:radial-gradient(circle at 50% 50%,#d9b3ff 0%,rgba(217,179,255,.55) 42%,rgba(217,179,255,0) 70%); animation:fl1 44s ease-in-out infinite alternate} .fluid i:nth-child(2){width:66vmax;height:66vmax;right:-26vmax;top:18vmax;opacity:.42; background:radial-gradient(circle at 50% 50%,#ffc39a 0%,rgba(255,195,154,.5) 44%,rgba(255,195,154,0) 72%); animation:fl2 57s ease-in-out infinite alternate} .fluid i:nth-child(3){width:58vmax;height:58vmax;left:22vmax;bottom:-30vmax;opacity:.38; background:radial-gradient(circle at 50% 50%,#cbb8ff 0%,rgba(203,184,255,.45) 46%,rgba(203,184,255,0) 74%); animation:fl3 71s ease-in-out infinite alternate} @keyframes fl1{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(14vmax,10vmax,0) scale(1.14)} 100%{transform:translate3d(4vmax,22vmax,0) scale(.94)} } @keyframes fl2{ 0%{transform:translate3d(0,0,0) scale(1.05)} 50%{transform:translate3d(-18vmax,14vmax,0) scale(.9)} 100%{transform:translate3d(-6vmax,32vmax,0) scale(1.2)} } @keyframes fl3{ 0%{transform:translate3d(0,0,0) scale(.95)} 50%{transform:translate3d(16vmax,-14vmax,0) scale(1.18)} 100%{transform:translate3d(-12vmax,-4vmax,0) scale(1)} } /* grano: textura fija, muy tenue, para quitarle limpieza de render */ .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px} /* ══ registros tipográficos ════════════════════════════════════════════════ */ .d1{font-size:var(--d1);line-height:.9;letter-spacing:-.035em;font-weight:600; color:var(--stone-1);text-align:center;text-wrap:balance} .d2{font-size:var(--d2);line-height:.9;letter-spacing:-.03em;font-weight:500; color:var(--stone-4);text-align:center;text-wrap:balance} .d1 em,.d2 em{font-style:normal;color:var(--stone-1)} .c1{font-size:var(--c1);line-height:1.05;letter-spacing:-.025em;color:var(--stone-4); text-align:center;text-wrap:balance} .c1 em{font-style:normal;color:var(--stone-1)} .copy{font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.4;letter-spacing:-.015em; color:var(--stone-4);text-align:center;text-wrap:balance} .copy em{font-style:normal;color:var(--stone-2)} .c2{font-size:var(--c2);line-height:1.35;color:var(--stone-4)} .c3{font-size:var(--c3);line-height:1.16;letter-spacing:.1px;color:var(--stone-5)} /* la serifa: paréntesis, precios y rótulos */ .par{font-family:var(--serif);font-size:calc(var(--c2) * 1.125);line-height:1.15; letter-spacing:normal;color:var(--stone-4)} .d1 .par,.d2 .par{font-size:.78em;color:var(--stone-3)} .tab{font-family:var(--serif);font-size:calc(var(--c2) * 1.125);letter-spacing:normal; color:var(--stone-4)} .tab b{font-weight:400;color:var(--violet-ink);opacity:.75} .tc{text-align:center} /* ══ píldoras ══════════════════════════════════════════════════════════════ */ .pill{display:inline-flex;align-items:center;gap:7px;height:35px;padding:0 17.5px; border-radius:var(--r);background:var(--paper-3);color:var(--stone-3); font-size:14px;line-height:1;font-weight:500;letter-spacing:normal;white-space:nowrap; transition:background-color .3s var(--e),color .3s var(--e)} .pill:hover{background:var(--paper-4);color:var(--stone-1)} .pill.go{background:var(--violet);color:var(--violet-ink)} .pill.go:hover{background:var(--orange);color:var(--orange-ink)} .tagv{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 12px; border-radius:999px;font-size:var(--c3);line-height:1;letter-spacing:.1px; color:var(--violet-ink);background:var(--violet-air)} .tagv.o{color:var(--orange-ink);background:var(--orange-air)} /* ══ barras fijas ══════════════════════════════════════════════════════════ */ .top{position:fixed;inset:0 0 auto 0;z-index:40; background:color-mix(in srgb,var(--paper-0) 78%,transparent); backdrop-filter:blur(14px) saturate(1.2)} .top .shell{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding-block:14px} .mark{display:flex;align-items:center;gap:9px;color:var(--stone-1); transition:opacity .3s var(--e)} .mark:hover{opacity:.7} /* el logotipo real: deja tu archivo como awkes-logo.svg (o .png) en esta carpeta y sustituye solo al wordmark tipográfico de reserva */ .mark .logo{height:clamp(18px,1.9vw,24px);width:auto} .mark .logo-fb{font-size:20px;line-height:1;letter-spacing:-.045em;font-weight:500} .mark:has(.logo) .logo-fb{display:none} .menu{display:flex;align-items:center;gap:20px} .menu a{font-size:14px;letter-spacing:normal;color:var(--stone-4);transition:color .3s var(--e)} .menu a:hover{color:var(--orange-ink)} .acts{display:flex;align-items:center;gap:10px} .bot{position:fixed;inset:auto 0 0 0;z-index:40;pointer-events:none} .bot .shell{display:flex;justify-content:flex-end;padding-bottom:17.5px} .bot .pill{pointer-events:auto;background:color-mix(in srgb,var(--paper-0) 88%,transparent); backdrop-filter:blur(10px);color:var(--stone-3);box-shadow:0 2px 18px rgb(24 24 22/.10)} .bot .pill:hover{color:var(--violet-ink)} /* ══ secciones ═════════════════════════════════════════════════════════════ */ .sec{display:flex;flex-direction:column;align-items:center;justify-content:center; padding-block:var(--sect);padding-inline:var(--gutter);gap:clamp(1.25rem,2.6vw,2.25rem)} .hero{padding-top:clamp(5rem,10vw,8rem)} .hero .d1{ width:100%;max-width:100%;min-width:0; white-space:normal!important;overflow-wrap:normal;word-break:normal } .hero .d1 .line{white-space:nowrap} .narrow{max-width:min(34ch,100%)} .mid{max-width:min(52ch,100%)} /* Contraste original + tinta líquida al pasar sobre la idea central. */ #bienvenida .c1 em{ font-style:normal;color:var(--stone-1); background-image:linear-gradient(105deg, var(--stone-1) 0%,var(--stone-1) 34%, var(--violet-ink) 44%,var(--orange-ink) 54%, var(--stone-1) 66%,var(--stone-1) 100%); background-size:260% 100%;background-position:100% 50%; -webkit-background-clip:text;background-clip:text; transition:color .35s var(--e),filter .35s var(--e) } #bienvenida .c1:hover em{ color:transparent;filter:saturate(1.08); animation:awkes-liquid-ink 2.8s ease-in-out infinite alternate } @keyframes awkes-liquid-ink{ from{background-position:100% 50%} to{background-position:0% 50%} } /* ══ bloques de imagen y video pendientes ══════════════════════════════════ */ .media{width:100%;max-width:1000px;border-radius:calc(var(--r) * 2); background:var(--paper-2); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; padding:clamp(1.5rem,4vw,3rem);text-align:center; transition:background-color .6s var(--e)} .media:hover{background:var(--paper-3)} .media.v16{aspect-ratio:16/9} .media.v45{aspect-ratio:4/5;max-width:430px} .media .glyph{width:46px;height:46px;border-radius:999px;background:var(--paper-0); display:grid;place-items:center;box-shadow:0 3px 14px rgb(24 24 22/.08)} .media .glyph svg{width:13px;height:13px;color:var(--violet-ink)} .media .par{color:var(--stone-4);max-width:34ch} .media.warm{background:var(--paper-1)} .media.has-media{padding:0;overflow:hidden;background:var(--paper-2)} .media.has-media img,.media.has-media video{width:100%;height:100%;max-width:none;object-fit:cover} .media.has-media video{background:#111} /* ══ marquesina ════════════════════════════════════════════════════════════ */ .band{padding-block:clamp(1.5rem,4vw,3rem)} .mq{width:100%;overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .mqr{display:flex;width:max-content;gap:clamp(1.75rem,3.5vw,3rem); animation:slide 40s linear infinite;align-items:center} .mqr.rev{animation-direction:reverse} .mq:hover .mqr{animation-play-state:paused} .mqr span{white-space:nowrap;font-size:clamp(1.125rem,2vw,1.5rem);letter-spacing:-.025em; color:var(--stone-3);display:inline-flex;align-items:center;gap:.5em} @keyframes slide{to{transform:translateX(-50%)}} /* ══ 03 · reconocerte ══════════════════════════════════════════════════════ */ .two{width:100%;max-width:1000px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.75rem,2vw,1.25rem)} .two li{border-radius:calc(var(--r) * 2);padding:clamp(1rem,2.2vw,1.5rem); font-size:var(--c1);line-height:1.1;letter-spacing:-.025em;color:var(--stone-3); transition:background-color .5s var(--e),color .5s var(--e)} .two li:nth-child(1){background:var(--paper-1)} .two li:nth-child(2){background:var(--paper-2)} .two li:nth-child(3){background:var(--paper-2)} .two li:nth-child(4){background:var(--paper-1)} .two li:hover{background:var(--paper-3);color:var(--stone-1)} .two .e{display:block;font-size:1.4rem;margin-bottom:.4rem;letter-spacing:normal} /* ══ 04 · semana ═══════════════════════════════════════════════════════════ */ .week{width:100%;max-width:1100px;border-radius:calc(var(--r) * 2);overflow:hidden} .week li{display:grid;grid-template-columns:7.5rem 1fr auto auto;align-items:baseline; gap:1.25rem;padding:22px clamp(1rem,2vw,1.5rem); transition:background-color .45s var(--e)} .week li:nth-child(odd){background:var(--paper-1)} .week li:nth-child(even){background:var(--paper-2)} .week li:hover{background:var(--orange-air)} .week h3{font-size:var(--c1);line-height:1;letter-spacing:-.03em;font-weight:400; color:var(--stone-1);display:flex;align-items:baseline;gap:.5em} .week .day{font-size:var(--c3);letter-spacing:.1px;color:var(--stone-5)} /* ══ 05 · planes ═══════════════════════════════════════════════════════════ */ .plans{width:100%;max-width:1100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)} .plan{border-radius:calc(var(--r) * 2);padding:clamp(1.25rem,2.4vw,1.75rem); display:flex;flex-direction:column;gap:10px; transition:transform .5s var(--e),background-color .5s var(--e)} .plan:nth-child(1){background:var(--paper-1)} .plan:nth-child(2){background:var(--paper-2)} .plan:nth-child(3){background:var(--paper-3)} .plan:hover{transform:translateY(-4px)} .plan .tagv{align-self:flex-start} .plan h3{font-size:var(--c1);line-height:1;letter-spacing:-.03em;font-weight:400; color:var(--stone-1);display:flex;align-items:baseline;gap:.45em} .plan .price{font-family:var(--serif);font-size:calc(var(--c2) * 1.125);color:var(--violet-ink)} .plan p:last-child{font-size:var(--c2);line-height:1.35;color:var(--stone-4);margin-top:auto} .incl{width:100%;max-width:1100px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.75rem,2vw,1.5rem)} .incl li{font-size:var(--c2);line-height:1.3;color:var(--stone-3);display:flex;gap:.6em} .incl li b{font-weight:400;font-size:1.05rem;line-height:1.2} /* ══ 06 · comunidad ════════════════════════════════════════════════════════ */ .quotes{width:100%;max-width:1100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)} .quote{display:flex;flex-direction:column;gap:12px;border-radius:calc(var(--r) * 2); padding:clamp(1.25rem,2.4vw,1.75rem)} .quote:nth-child(1){background:var(--paper-2)} .quote:nth-child(2){background:var(--paper-1)} .quote:nth-child(3){background:var(--paper-2)} .quote p{font-size:var(--c1);line-height:1.05;letter-spacing:-.03em;color:var(--stone-1)} .quote .par{color:var(--stone-5);font-size:var(--c2)} /* ══ 07 · Gio ══════════════════════════════════════════════════════════════ */ .gio{width:100%;max-width:1100px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem);align-items:start} .gio .prose{display:flex;flex-direction:column;gap:1.1rem} .gio .prose p{font-size:1.0625rem;line-height:1.45;color:var(--stone-4)} .gio .prose p.lead{font-size:var(--c1);line-height:1.1;letter-spacing:-.025em;color:var(--stone-1)} /* ══ 08 · preguntas ════════════════════════════════════════════════════════ */ .faq{width:100%;max-width:900px;border-radius:calc(var(--r) * 2);overflow:hidden} .faq details{background:var(--paper-1);transition:background-color .4s var(--e)} .faq details:nth-of-type(even){background:var(--paper-2)} .faq details[open],.faq details:hover{background:var(--paper-3)} .faq summary{list-style:none;cursor:pointer;padding:20px clamp(1rem,2vw,1.5rem); display:flex;align-items:baseline;justify-content:space-between;gap:1rem; font-size:var(--c1);line-height:1.1;letter-spacing:-.03em;color:var(--stone-3); transition:color .3s var(--e)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover,.faq details[open] summary{color:var(--stone-1)} .faq summary .plus{font-family:var(--serif);color:var(--orange-ink);flex:none; transition:transform .35s var(--e)} .faq details[open] summary .plus{transform:rotate(45deg)} .faq .body{padding:0 clamp(1rem,2vw,1.5rem) 22px;max-width:62ch} .faq .body p{font-size:var(--c2);line-height:1.45;color:var(--stone-4)} /* ══ 09 · cierre ═══════════════════════════════════════════════════════════ */ .close{padding-top:var(--void)} .bigcta{position:relative;display:inline-block;padding:.18em .6em; font-size:var(--d2);line-height:.9;letter-spacing:-.03em;font-weight:500;color:var(--stone-3); transition:color .35s var(--e)} .bigcta::before{content:"";position:absolute;inset:0;border-radius:calc(var(--r) * 2.6); background:linear-gradient(100deg,var(--violet-ink) 0%,#7a4a2a 62%,var(--orange-ink) 100%); transform:scale(.94);opacity:0; transition:transform .45s var(--e),opacity .35s var(--e)} .bigcta span{position:relative;z-index:1} .bigcta:hover{color:var(--paper-0)} .bigcta:hover::before{transform:scale(1);opacity:1} /* ══ pie ═══════════════════════════════════════════════════════════════════ */ .foot{border-top:1px solid var(--stone-6);margin-top:clamp(2rem,6vw,5rem)} .foot .shell{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:2rem; padding-block:clamp(2.5rem,5vw,4rem)} .foot h4{font-size:var(--c3);letter-spacing:.1px;font-weight:400;color:var(--stone-4); margin-bottom:12px} .foot li+li{margin-top:7px} .foot a:hover{color:var(--orange-ink)} .legal{display:flex;justify-content:space-between;gap:1rem; padding-bottom:clamp(3.5rem,6vw,5rem)} /* ══ revelado ══════════════════════════════════════════════════════════════ */ .js .rv{opacity:0;transform:translateY(14px); transition:opacity .85s var(--e),transform .85s var(--e);transition-delay:var(--d,0ms)} .js .rv.in{opacity:1;transform:none} .js .line{display:block;overflow:hidden} .js .line>span{display:block;transform:translateY(105%); transition:transform 1s var(--e);transition-delay:var(--d,0ms)} .js .in .line>span{transform:none} .onlySm{display:block} .onlyLg{display:none} @media (min-width:900px){.onlySm{display:none}.onlyLg{display:block}} /* ══ adaptación ════════════════════════════════════════════════════════════ */ @media (max-width:900px){ .menu{display:none} .plans,.quotes,.gio{grid-template-columns:1fr} .incl{grid-template-columns:repeat(2,minmax(0,1fr))} .foot .shell{grid-template-columns:repeat(2,minmax(0,1fr))} .week li{grid-template-columns:1fr auto;gap:.35rem 1rem} .week .day{grid-column:1/-1} .gio .media{max-width:100%;order:-1} .fluid i{filter:blur(52px)} } @media (max-width:560px){ .two,.incl{grid-template-columns:1fr} .legal{flex-direction:column;gap:.5rem;padding-bottom:6rem} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .mqr,.fluid i{animation:none} .js .rv,.js .line>span{opacity:1;transform:none;transition:none} .plan:hover{transform:none} #bienvenida .c1:hover em{color:var(--stone-1);animation:none;filter:none} }