/* ========================================================================== SPORTS STUDIO | WORLD CLASS JIU JITSU Hoja de estilos única — tema oscuro (por defecto) y tema claro. Cambiar de tema: atributo data-theme="light" | "dark" en . ========================================================================== */ /* ---------- TEMA OSCURO (por defecto) ---------- */ :root{ --blue-500:#25B4E3; --blue-600:#1E8FC4; --blue-700:#3058A6; --blue-grad:linear-gradient(135deg,#25B4E3 0%,#3058A6 100%); --red:#EA1F27; --bg:#05070A; --bg-2:#0A0E14; --surface:#0E1319; --card-bg:linear-gradient(165deg,#0E1319 0%,#0A0E14 100%); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --fg:#F4F7FA; --fg-2:#A8B4C2; --fg-3:#6C7A8A; --blue-txt:#25B4E3; --grid:rgba(255,255,255,.028); --nav-bg:rgba(5,7,10,.88); --nav-mobile:rgba(5,7,10,.97); --hero-bg:transparent; --band:linear-gradient(180deg,#05070A,#080C12,#05070A); --hover:rgba(37,180,227,.05); --sh-sm:0 2px 12px -6px rgba(0,0,0,.8); --sh-md:0 18px 44px -26px rgba(0,0,0,.95); --sh-lg:0 30px 70px -34px rgba(0,0,0,1); --ph-fg:#FFD27A; --ph-bg:rgba(255,196,84,.09); --ph-bd:rgba(255,196,84,.45); --display:'Saira',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,sans-serif; --max:1200px; --pad:clamp(20px,5vw,40px); --r:14px; --r-lg:20px; color-scheme:dark; } /* ---------- TEMA CLARO ---------- */ [data-theme="light"]{ --bg:#FFFFFF; --bg-2:#F5F7FA; --surface:#FFFFFF; --card-bg:#FFFFFF; --line:rgba(9,18,32,.10); --line-2:rgba(9,18,32,.17); --fg:#080C13; --fg-2:#4C5866; --fg-3:#7A8797; --blue-txt:#3058A6; --grid:rgba(9,18,32,.045); --nav-bg:rgba(255,255,255,.88); --nav-mobile:rgba(255,255,255,.98); --hero-bg:linear-gradient(180deg,#FFFFFF 0%,#F3F7FB 62%,#FFFFFF 100%); --band:linear-gradient(180deg,#FFFFFF,#F2F6FA,#FFFFFF); --hover:rgba(37,180,227,.06); --sh-sm:0 2px 10px -4px rgba(9,18,32,.16); --sh-md:0 14px 34px -18px rgba(9,18,32,.30); --sh-lg:0 30px 64px -34px rgba(9,18,32,.38); --ph-fg:#8A5A00; --ph-bg:rgba(255,178,36,.16); --ph-bd:rgba(190,124,10,.55); color-scheme:light; } /* ---------- BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--fg); font-family:var(--body);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .3s ease,color .3s ease; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit} ::selection{background:var(--blue-500);color:#fff} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)} .section{padding:clamp(56px,7vw,96px) 0;position:relative} .section.band{background:var(--band)} .eyebrow{ font-family:var(--display);font-size:12px;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--blue-txt); display:flex;align-items:center;gap:12px;margin:0 0 18px; } .eyebrow::before{content:"";width:28px;height:2px;background:var(--blue-grad);flex:none} .eyebrow.c{justify-content:center} h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--fg)} h2{font-size:clamp(28px,4.2vw,46px);text-transform:uppercase} h3{font-size:clamp(19px,2.2vw,24px);letter-spacing:-.01em} p{margin:0 0 18px} .lead{font-size:clamp(16px,1.9vw,19px);color:var(--fg-2);max-width:64ch;line-height:1.72} .lead strong{color:var(--fg)} .muted{color:var(--fg-3)} .center{text-align:center} .center .lead{margin-inline:auto} /* Placeholder de dato pendiente */ .ph{ display:inline-block;font-family:var(--display);font-weight:700;font-size:.86em; color:var(--ph-fg);background:var(--ph-bg); border:1px dashed var(--ph-bd);border-radius:6px; padding:1px 8px;white-space:nowrap; } /* ---------- BOTONES ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--display);font-weight:700;font-size:14px; letter-spacing:.06em;text-transform:uppercase; padding:15px 26px;border-radius:10px;border:1px solid transparent; cursor:pointer;white-space:nowrap; transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .25s ease; } .btn:hover{transform:translateY(-2px)} .btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 28px -12px rgba(234,31,39,.8)} .btn-primary:hover{background:#ff2d36;box-shadow:0 16px 38px -12px rgba(234,31,39,.95)} .btn-blue{background:var(--blue-grad);color:#fff;box-shadow:0 10px 28px -12px rgba(48,88,166,.85)} .btn-blue:hover{box-shadow:0 16px 38px -12px rgba(37,180,227,.75)} .btn-ghost{background:var(--surface);color:var(--fg);border-color:var(--line-2);box-shadow:var(--sh-sm)} .btn-ghost:hover{border-color:var(--blue-500);color:var(--blue-txt);box-shadow:var(--sh-md)} .btn-sm{padding:11px 18px;font-size:12.5px} .btn-full{width:100%} .btns{display:flex;flex-wrap:wrap;gap:13px} .btns.c{justify-content:center} /* ---------- NAV ---------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:100; background:transparent;border-bottom:1px solid transparent; transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease; } .nav.scrolled{ background:var(--nav-bg);backdrop-filter:blur(16px) saturate(170%); border-bottom-color:var(--line); } .nav-in{display:flex;align-items:center;gap:24px;height:74px} .brand{display:flex;align-items:center;gap:11px;flex:none} .brand img{height:38px;width:auto} .brand .lg-light{display:none} [data-theme="light"] .brand .lg-dark{display:none} [data-theme="light"] .brand .lg-light{display:block} .brand-txt{display:flex;flex-direction:column;line-height:1.06} .brand-txt b{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--fg)} .brand-txt span{font-family:var(--display);font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-txt)} .nav-links{display:flex;gap:22px;margin-left:auto;align-items:center} .nav-links a{ font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--fg-2);transition:color .2s;position:relative;padding:4px 0; } .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue-grad);transition:width .25s ease} .nav-links a:hover{color:var(--fg)} .nav-links a:hover::after,.nav-links a.on::after{width:100%} .nav-links a.on{color:var(--fg)} .nav-tools{display:flex;align-items:center;gap:10px;flex:none} .theme-btn{ width:38px;height:38px;border-radius:10px;display:grid;place-items:center; background:var(--surface);border:1px solid var(--line-2);color:var(--fg); cursor:pointer;transition:.25s; } .theme-btn:hover{border-color:var(--blue-500);color:var(--blue-txt)} .theme-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .theme-btn .ic-sun{display:none} [data-theme="light"] .theme-btn .ic-sun{display:block} [data-theme="light"] .theme-btn .ic-moon{display:none} .burger{display:none;background:none;border:0;color:var(--fg);padding:8px;cursor:pointer} .burger svg{width:26px;height:26px} @media(max-width:1040px){ .nav-links{ position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;margin:0; background:var(--nav-mobile);backdrop-filter:blur(20px); border-bottom:1px solid var(--line);padding:6px 0 18px; max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease; box-shadow:var(--sh-md); } .nav-links.open{max-height:560px} .nav-links a{width:100%;padding:15px var(--pad);font-size:15px;border-bottom:1px solid var(--line)} .nav-links a::after{display:none} .nav-links a.on{color:var(--blue-txt)} .nav-tools{margin-left:auto} .nav-cta{display:none} .burger{display:block} } /* ---------- HOME: pantalla completa ---------- */ .hero{ position:relative;min-height:100svh;display:flex;flex-direction:column; justify-content:center;padding:104px 0 0;overflow:hidden;background:var(--hero-bg); } .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-bg::before{ content:"";position:absolute;inset:0; background: radial-gradient(900px 620px at 78% 16%,rgba(37,180,227,.20),transparent 62%), radial-gradient(760px 560px at 8% 84%,rgba(48,88,166,.20),transparent 62%), radial-gradient(520px 380px at 52% 104%,rgba(234,31,39,.09),transparent 66%); } .hero-bg::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:74px 74px; mask-image:radial-gradient(ellipse 88% 72% at 50% 45%,#000 32%,transparent 100%); } .hero-mark{ position:absolute;right:-12%;top:46%;transform:translateY(-50%); width:min(720px,70vw);opacity:.055;z-index:0;pointer-events:none; } .hero-mark.lg-light{display:none} [data-theme="light"] .hero-mark.lg-dark{display:none} [data-theme="light"] .hero-mark.lg-light{display:block;opacity:.05} .hero-in{position:relative;z-index:2;max-width:880px;flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:28px} .hero h1{font-size:clamp(36px,6.6vw,76px);text-transform:uppercase;letter-spacing:-.025em;margin:0 0 20px} .hero h1 .grad{ background:linear-gradient(100deg,#25B4E3 0%,#5FD0F5 45%,#3058A6 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } [data-theme="light"] .hero h1 .grad{background:linear-gradient(100deg,#1E8FC4 0%,#25B4E3 42%,#3058A6 100%);-webkit-background-clip:text;background-clip:text} .hero .lead{font-size:clamp(15.5px,1.9vw,18.5px);max-width:58ch;margin-bottom:30px} .hero-note{ margin:26px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:12.5px;color:var(--fg-3);font-family:var(--display);font-weight:600;letter-spacing:.03em; } .dot{width:7px;height:7px;border-radius:50%;background:var(--blue-500);flex:none; box-shadow:0 0 0 0 rgba(37,180,227,.6);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,180,227,.6)}70%{box-shadow:0 0 0 12px rgba(37,180,227,0)}100%{box-shadow:0 0 0 0 rgba(37,180,227,0)}} /* Barra de confianza dentro del hero */ .hero-trust{position:relative;z-index:2;padding-bottom:26px} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .pill{ display:flex;align-items:center;gap:12px;padding:14px 16px; background:var(--surface);border:1px solid var(--line); border-radius:var(--r);transition:.3s cubic-bezier(.2,.7,.3,1); } .pill:hover{transform:translateY(-4px);border-color:rgba(37,180,227,.5);box-shadow:var(--sh-md)} .pill-ico{width:36px;height:36px;flex:none;border-radius:9px;display:grid;place-items:center; background:var(--blue-grad);box-shadow:0 8px 18px -10px rgba(48,88,166,.9)} .pill-ico svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pill b{display:block;font-family:var(--display);font-size:13px;font-weight:800;line-height:1.25;color:var(--fg)} .pill span{display:block;font-size:10.5px;color:var(--fg-3);letter-spacing:.05em;text-transform:uppercase;font-family:var(--display);font-weight:600;margin-top:2px} @media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.trust-grid{grid-template-columns:1fr}.pill{padding:12px 14px}} @media(max-height:720px) and (min-width:900px){.hero{min-height:auto;padding-block:120px 40px}} /* ---------- CABECERA DE PÁGINA INTERIOR ---------- */ .phero{ position:relative;padding:150px 0 clamp(44px,6vw,72px);overflow:hidden; border-bottom:1px solid var(--line);background:var(--hero-bg); } .phero::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 420px at 82% 10%,rgba(37,180,227,.16),transparent 64%), radial-gradient(620px 380px at 6% 92%,rgba(48,88,166,.16),transparent 64%); } .phero::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 90% at 60% 40%,#000 20%,transparent 100%); } .phero-in{position:relative;z-index:2;max-width:820px} .phero h1{font-size:clamp(32px,5.4vw,60px);text-transform:uppercase;letter-spacing:-.025em;margin:0 0 16px} .phero .lead{margin-bottom:0} /* ---------- ACCESOS (home) ---------- */ .hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px} .hub-a{ display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-radius:var(--r-lg); background:var(--card-bg);border:1px solid var(--line);box-shadow:var(--sh-sm); transition:.35s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden; } .hub-a::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--blue-grad);opacity:0;transition:opacity .35s} .hub-a:hover{transform:translateY(-6px);border-color:rgba(37,180,227,.42);box-shadow:var(--sh-lg)} .hub-a:hover::before{opacity:1} .hub-a h3{font-size:18px;text-transform:uppercase;letter-spacing:.02em} .hub-a p{font-size:14px;color:var(--fg-2);margin:0;line-height:1.55} .hub-a .go{ margin-top:auto;padding-top:14px;font-family:var(--display);font-size:11.5px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--blue-txt); display:flex;align-items:center;gap:8px; } .hub-a .go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s} .hub-a:hover .go svg{transform:translateX(4px)} /* ---------- BLOQUE 2 COLUMNAS ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:center} .split.rev{grid-template-columns:.9fr 1.1fr} @media(max-width:900px){.split,.split.rev{grid-template-columns:1fr}} .ticks{list-style:none;padding:0;margin:24px 0 28px;display:grid;gap:12px} .ticks li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--fg-2);line-height:1.6} .chk{width:21px;height:21px;flex:none;margin-top:2px;border-radius:6px; background:rgba(37,180,227,.13);border:1px solid rgba(37,180,227,.4);display:grid;place-items:center} .chk svg{width:12px;height:12px;stroke:var(--blue-txt);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} /* ---------- SLOT DE FOTO ---------- */ .photo{ position:relative;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--line);background:var(--bg-2); aspect-ratio:4/5;display:grid;place-items:center;box-shadow:var(--sh-md); } .photo.wide{aspect-ratio:16/10} .photo.sq{aspect-ratio:1} .photo::before{content:"";position:absolute;inset:0; background:radial-gradient(650px 480px at 30% 20%,rgba(37,180,227,.15),transparent 62%), radial-gradient(520px 420px at 78% 88%,rgba(48,88,166,.16),transparent 62%)} .photo::after{content:"";position:absolute;inset:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:36px 36px} .photo-lbl{position:relative;z-index:2;text-align:center;padding:22px; font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)} .photo-lbl svg{width:32px;height:32px;margin:0 auto 12px;stroke:var(--fg-3);fill:none;stroke-width:1.4;opacity:.7} .photo-badge{position:absolute;z-index:3;left:18px;bottom:18px; background:var(--nav-bg);backdrop-filter:blur(10px); border:1px solid var(--line-2);border-radius:10px;padding:10px 14px;box-shadow:var(--sh-sm)} .photo-badge b{display:block;font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--fg)} .photo-badge span{font-size:10.5px;color:var(--blue-txt);font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase} /* ---------- CARDS ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .card{ position:relative;padding:28px 24px;border-radius:var(--r-lg); background:var(--card-bg);border:1px solid var(--line);overflow:hidden; box-shadow:var(--sh-sm);transition:.35s cubic-bezier(.2,.7,.3,1); } .card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--blue-grad);opacity:0;transition:opacity .35s} .card:hover{transform:translateY(-6px);border-color:rgba(37,180,227,.42);box-shadow:var(--sh-lg)} .card:hover::before{opacity:1} .card-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px; background:rgba(37,180,227,.1);border:1px solid rgba(37,180,227,.3)} .card-ico svg{width:21px;height:21px;stroke:var(--blue-txt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .card h3{margin-bottom:9px} .card p{font-size:14.5px;color:var(--fg-2);margin:0;line-height:1.62} .tag{display:inline-block;margin-top:15px;font-family:var(--display);font-size:10.5px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--blue-txt); background:rgba(37,180,227,.08);border:1px solid rgba(37,180,227,.3);border-radius:99px;padding:4px 11px} .card-meta{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line); font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--fg-2)} .card-meta svg{width:15px;height:15px;flex:none;stroke:var(--blue-500);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ---------- PROFESOR ---------- */ .badges{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 24px} .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:11.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border-radius:99px; background:var(--surface);border:1px solid var(--line-2);color:var(--fg-2);box-shadow:var(--sh-sm)} .badge.hl{background:var(--blue-grad);border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(48,88,166,.9)} .badge i{width:6px;height:6px;border-radius:50%;background:var(--blue-500);flex:none} .badge.hl i{background:#fff} .rank{font-family:var(--display);font-size:clamp(13px,1.6vw,16px);font-weight:800; letter-spacing:.18em;text-transform:uppercase;color:var(--blue-txt);margin:0 0 18px} /* ---------- HORARIO ---------- */ .sched-wrap{display:grid;gap:18px} .blk{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--sh-sm)} .blk-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:17px 24px; border-bottom:1px solid var(--line);background:var(--bg-2)} .blk-title{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--fg)} .days{display:flex;gap:7px;flex-wrap:wrap} .dpill{font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; font-style:normal;padding:5px 11px;border-radius:7px;border:1px solid rgba(37,180,227,.42); color:var(--blue-txt);background:rgba(37,180,227,.08)} .row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px 24px; border-bottom:1px solid var(--line);transition:background .25s} .row:last-child{border-bottom:0} .row:hover{background:var(--hover)} .row-bar{width:3px;align-self:stretch;min-height:52px;border-radius:99px;flex:none} .row-bar.i{background:var(--red)} .row-bar.a{background:var(--blue-grad)} .row-bar.o{background:var(--fg)} .row-main{flex:1 1 230px;min-width:0} .row-lvl{font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:5px} .row-lvl.i{color:var(--red)} .row-lvl.a{color:var(--blue-txt)} .row-lvl.o{color:var(--fg-3)} .row-name{font-family:var(--display);font-size:clamp(17px,2.2vw,22px);font-weight:800;text-transform:uppercase; letter-spacing:-.01em;line-height:1.1;color:var(--fg)} .row-days{font-size:13px;color:var(--fg-3);margin-top:4px} .row-time{text-align:right;flex:none} .row-time b{display:block;font-family:var(--display);font-size:clamp(17px,2.2vw,22px);font-weight:800; letter-spacing:-.01em;white-space:nowrap;line-height:1.15} .row-time b.i{color:var(--red)} .row-time b.a{color:var(--blue-txt)} .row-time b.o{color:var(--fg)} .row-time span{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)} @media(max-width:560px){.row-time{text-align:left;flex:1 1 100%;padding-left:19px}.row-bar{min-height:40px}} .req{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); padding:clamp(24px,3.4vw,34px);box-shadow:var(--sh-sm)} .req h3{display:flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.02em;margin:0 0 22px} .req h3::before{content:"";width:26px;height:3px;background:var(--red);border-radius:99px;flex:none} .req ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 34px} .req li{display:flex;gap:12px;font-size:14.5px;color:var(--fg-2);line-height:1.55} .req li::before{content:"";width:7px;height:7px;flex:none;margin-top:8px;background:var(--blue-500);border-radius:2px} @media(max-width:700px){.req ul{grid-template-columns:1fr}} .note-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px} .note-row p{margin:0;font-size:13.5px;color:var(--fg-3)} /* ---------- MEMBRESÍAS ---------- */ .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px} .plan{display:flex;flex-direction:column;padding:26px 22px;border-radius:var(--r-lg); background:var(--card-bg);border:1px solid var(--line);position:relative;overflow:hidden; box-shadow:var(--sh-sm);transition:.35s cubic-bezier(.2,.7,.3,1)} .plan:hover{transform:translateY(-6px);border-color:rgba(37,180,227,.42);box-shadow:var(--sh-lg)} .plan.feat{border-color:rgba(37,180,227,.5);box-shadow:0 20px 44px -26px rgba(48,88,166,.6)} .plan.feat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--blue-grad)} .plan-flag{position:absolute;top:15px;right:15px;font-family:var(--display);font-size:9.5px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;background:var(--blue-grad);color:#fff;padding:4px 10px;border-radius:99px} .plan h3{font-size:18px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.02em} .plan.feat h3{padding-right:104px} @media(max-width:1180px) and (min-width:900px){.plan.feat h3{padding-right:0;margin-top:26px}} .plan .desc{font-size:13.5px;color:var(--fg-3);margin:0 0 18px;line-height:1.55;min-height:42px} .plan .price{margin:0 0 18px} .plan ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px;flex:1} .plan li{display:flex;gap:10px;font-size:13.5px;color:var(--fg-2);line-height:1.5} .plan li svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--blue-txt);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} /* ---------- STATS / LEMA ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .stat{text-align:center;padding:28px 20px;border-radius:var(--r-lg); background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)} .stat b{display:block;font-family:var(--display);font-size:clamp(28px,4.2vw,42px);font-weight:900;line-height:1; background:var(--blue-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat span{display:block;margin-top:10px;font-family:var(--display);font-size:11px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)} @media(max-width:640px){.stats{grid-template-columns:1fr}} .motto{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:12px; font-family:var(--display);font-size:clamp(19px,2.7vw,28px);font-weight:800; text-transform:uppercase;letter-spacing:.01em;color:var(--fg)} .motto span{font-family:var(--body);font-size:14px;font-weight:400;font-style:italic;text-transform:none;letter-spacing:0;color:var(--fg-3)} /* ---------- GALERÍA ---------- */ .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .gallery .photo{aspect-ratio:1;border-radius:var(--r)} .gallery .photo:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto} @media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)} .gallery .photo:nth-child(1){grid-column:span 2;grid-row:auto;aspect-ratio:16/11}} /* ---------- FAQ ---------- */ .faq{max-width:860px;margin-inline:auto} .qa{border-bottom:1px solid var(--line)} .qa summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative; font-family:var(--display);font-size:clamp(16px,2vw,18.5px);font-weight:700;letter-spacing:-.005em; color:var(--fg);transition:color .2s} .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--blue-txt)} .qa summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px; border-right:2px solid var(--blue-txt);border-bottom:2px solid var(--blue-txt); transform:translateY(-70%) rotate(45deg);transition:transform .3s ease} .qa[open] summary::after{transform:translateY(-25%) rotate(-135deg)} .qa .a{padding:0 44px 24px 0;color:var(--fg-2);font-size:15.5px;line-height:1.72;margin:0} .qa .a strong{color:var(--fg)} .qa .a a{color:var(--blue-txt);text-decoration:underline} .qa[open] .a{animation:fade .35s ease} @keyframes fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ---------- CONTACTO ---------- */ .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .cbox{padding:26px 24px;border-radius:var(--r-lg);background:var(--card-bg); border:1px solid var(--line);box-shadow:var(--sh-sm);transition:.35s cubic-bezier(.2,.7,.3,1)} .cbox:hover{transform:translateY(-5px);border-color:rgba(37,180,227,.42);box-shadow:var(--sh-lg)} .cbox-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px; background:var(--blue-grad);box-shadow:0 8px 20px -10px rgba(48,88,166,.9)} .cbox-ico svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cbox h3{font-size:15px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:9px} .cbox p{margin:0;font-size:14.5px;color:var(--fg-2);line-height:1.6} /* ---------- MAPA ---------- */ .map{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-md);background:var(--bg-2);line-height:0} .map iframe{width:100%;height:clamp(280px,42vw,420px);border:0;display:block;filter:var(--map-f)} :root{--map-f:grayscale(.35) invert(.92) hue-rotate(180deg) contrast(.88) brightness(.92)} [data-theme="light"]{--map-f:none} /* ---------- CTA FINAL (siempre oscuro) ---------- */ .cta{position:relative;overflow:hidden;text-align:center;padding:clamp(58px,8vw,96px) 0;background:#05070A;color:#F4F7FA} .cta::before{content:"";position:absolute;inset:0; background:radial-gradient(760px 460px at 50% 0%,rgba(37,180,227,.24),transparent 66%), radial-gradient(620px 420px at 50% 100%,rgba(234,31,39,.13),transparent 66%)} .cta::after{content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:70px 70px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 20%,transparent 100%)} .cta-in{position:relative;z-index:2;max-width:740px;margin-inline:auto} .cta h2{color:#fff;margin-bottom:16px} .cta .eyebrow{color:#5FD0F5;justify-content:center} .cta .lead{margin-inline:auto;margin-bottom:30px;color:#A8B4C2} .cta .muted{color:#6C7A8A} .cta .btn-ghost{background:rgba(255,255,255,.05);color:#F4F7FA;border-color:rgba(255,255,255,.2);box-shadow:none} .cta .btn-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.35);color:#fff} .cta .ph{color:#FFD27A;background:rgba(255,196,84,.10);border-color:rgba(255,196,84,.45)} /* ---------- FOOTER (siempre oscuro) ---------- */ .footer{background:#030507;color:#A8B4C2;padding:56px 0 0} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:42px} .foot-brand img{height:70px;width:auto;margin-bottom:16px} .foot-brand p{font-size:14.5px;color:#7C8899;max-width:34ch;line-height:1.68;margin:0} .foot-col h4{font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.2em; text-transform:uppercase;color:#F4F7FA;margin:0 0 16px} .foot-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px} .foot-col a,.foot-col li{font-size:14.5px;color:#7C8899;transition:color .2s} .foot-col a:hover{color:#25B4E3} .foot-contact li{display:flex;gap:10px;align-items:flex-start;line-height:1.5} .foot-contact svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:#25B4E3;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .footer .ph{color:#FFD27A;background:rgba(255,196,84,.10);border-color:rgba(255,196,84,.45)} .foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;display:flex; justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:#6C7A8A} .foot-bottom .fs{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:11px} @media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.foot-grid{grid-template-columns:1fr}} /* ---------- WHATSAPP FLOTANTE ---------- */ .wa{position:fixed;right:20px;bottom:20px;z-index:90;width:54px;height:54px;border-radius:50%; display:grid;place-items:center;background:#25D366;box-shadow:0 12px 30px -10px rgba(37,211,102,.8); transition:transform .25s ease} .wa:hover{transform:scale(1.08)} .wa svg{width:28px;height:28px;fill:#fff} /* ---------- REVEAL ---------- */ .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} *{animation:none!important;transition:none!important} }