:root{color-scheme:dark;--bg:#03130F;--bg2:#062019;--sf:rgba(255,255,255,.045);--sf2:rgba(255,255,255,.085);--bd:rgba(255,255,255,.11);--bd2:rgba(255,255,255,.2);--tx:#EAF5F1;--mut:#9EBDB3;--mint:#3FC2A5;--mint2:#86EBD3;--verde:#0E6B5C;--amb:#F2A71B;--amb2:#FFC95C;--fd:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;--fb:'Figtree','Segoe UI',system-ui,sans-serif;--r:22px} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);background-image:radial-gradient(900px 520px at 12% -6%,rgba(63,194,165,.16),transparent 70%),radial-gradient(700px 480px at 100% 4%,rgba(242,167,27,.09),transparent 70%);background-repeat:no-repeat;color:var(--tx);font:400 18px/1.62 var(--fb);-webkit-font-smoothing:antialiased} img,svg{max-width:100%} a{color:var(--mint2);text-underline-offset:3px} a:hover{color:#fff} h1,h2,h3{font-family:var(--fd);line-height:1.04;letter-spacing:-.025em;margin:0;text-wrap:balance;color:#fff} h1{font-size:clamp(42px,7vw,86px);font-weight:800} h2{font-size:clamp(30px,4.2vw,52px);font-weight:700} h3{font-size:21px;font-weight:700;letter-spacing:-.015em} p{margin:0;max-width:60ch;text-wrap:pretty} :focus-visible{outline:3px solid var(--amb);outline-offset:3px;border-radius:8px} .in{width:100%;max-width:1200px;margin-inline:auto;padding-inline:22px} .sec{padding-block:96px;position:relative} .sec.alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.03) 18%,rgba(255,255,255,.03) 82%,transparent)} .sec.dk{background:radial-gradient(800px 380px at 50% 0,rgba(63,194,165,.14),transparent 70%)} .stack{display:grid;gap:18px} .lede{font-size:clamp(18px,2vw,22px);color:var(--mut);max-width:54ch} .dk .lede,.hero .lede{color:var(--mut)} /* Encabezado */ .hdr{position:sticky;top:0;z-index:40;background:rgba(3,19,15,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--bd)} .hdr .in{display:flex;align-items:center;gap:18px;min-height:72px} .hdr .logo{height:30px;width:auto;display:block} .hdr .home{display:flex;align-items:center} .nav{display:flex;gap:2px;margin-left:auto;align-items:center} .nav a{padding:9px 13px;border-radius:999px;text-decoration:none;color:#CFE3DC;font-weight:500;font-size:16px;white-space:nowrap} .nav a:hover{background:var(--sf2);color:#fff} .nav a[aria-current=page]{background:var(--sf2);color:#fff;font-weight:700} .nav .sel{color:var(--mint2);font-weight:600} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;font:700 17px/1.1 var(--fb);text-decoration:none;border:1.5px solid var(--bd2);background:var(--sf2);color:#fff;cursor:pointer;min-height:50px;transition:transform .15s,box-shadow .2s,background .2s} .btn:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-1px)} .btn.am{background:linear-gradient(180deg,var(--amb2),var(--amb));border-color:transparent;color:#2a1a00;box-shadow:0 8px 30px -6px rgba(242,167,27,.55),inset 0 1px 0 rgba(255,255,255,.5)} .btn.am:hover{color:#2a1a00;box-shadow:0 12px 38px -6px rgba(242,167,27,.7),inset 0 1px 0 rgba(255,255,255,.5)} .btn.gh{background:transparent} .btn.gh:hover{background:var(--sf2)} .hdr .btn{padding:10px 20px;min-height:44px;font-size:15.5px} .mn{display:none} @media (max-width:1060px){.nav a{padding:9px 9px;font-size:15px}.hdr .btn{padding:9px 14px;font-size:15px}.hdr .in{gap:10px}} @media (max-width:900px){ .nav{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(3,19,15,.97);border-bottom:1px solid var(--bd);padding:14px 22px 22px;flex-direction:column;align-items:stretch;gap:2px} .nav.open{display:flex} .nav a{padding:15px 14px;border-radius:12px} .mn{display:inline-flex;margin-left:auto;background:var(--sf2);border:1px solid var(--bd);border-radius:12px;width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer;color:#fff} .hdr .btn{display:none} .nav .btn{display:inline-flex;margin-top:10px} } /* Pie */ .ftr{border-top:1px solid var(--bd);color:var(--mut);padding-block:60px 36px;font-size:16px;background:linear-gradient(180deg,transparent,rgba(63,194,165,.05))} .ftr .in{display:grid;gap:36px} .ftr .cols{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .ftr h3{font-size:15px;color:#fff;margin-bottom:12px;letter-spacing:0} .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .ftr a{color:var(--mut);text-decoration:none} .ftr a:hover{color:#fff} .ftr .logo{height:30px;width:auto} .ftr .fine{font-size:14px;color:#7E9E94;max-width:80ch} .ftr .brand{display:grid;gap:14px;max-width:320px} /* Héroe */ .hero{position:relative;padding-block:72px 0;overflow:hidden;isolation:isolate} .hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 70% 40%,#000 20%,transparent 75%)} .hero .in{display:grid;gap:40px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center} .hero .tx{display:grid;gap:26px;padding-bottom:72px} .hero h1 em{font-style:normal;background:linear-gradient(95deg,var(--amb2),var(--amb) 45%,#ff9f5a);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .cta{display:flex;gap:12px;flex-wrap:wrap} .hero .note{font-size:15.5px;color:var(--mut);display:flex;align-items:center;gap:10px} .hero .note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(63,194,165,.25)} @media (max-width:900px){.hero .in{grid-template-columns:1fr}.hero .tx{padding-bottom:0}.hero{padding-block:48px 24px}} /* Display ilustrado */ .mostrador{position:relative;display:grid;place-items:center;min-height:520px} .mostrador::before{content:"";position:absolute;width:520px;height:520px;max-width:100%;border-radius:50%;background:radial-gradient(circle,rgba(63,194,165,.38),rgba(63,194,165,.08) 55%,transparent 70%);filter:blur(10px)} .mostrador::after{content:"";position:absolute;left:12%;right:12%;bottom:30px;height:46px;background:radial-gradient(ellipse at center,rgba(63,194,165,.5),transparent 70%);filter:blur(8px)} .stand{position:relative;z-index:2;width:min(310px,78%);transform:rotate(-3deg)} .stand .acr{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.08));border:1.5px solid rgba(255,255,255,.5);border-radius:16px;padding:11px;box-shadow:0 40px 70px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08),0 0 60px -10px rgba(63,194,165,.45)} .stand .acr::before{content:"";position:absolute;left:8%;top:5%;width:34%;height:90%;background:linear-gradient(100deg,rgba(255,255,255,.26),transparent);transform:skewX(-14deg);pointer-events:none;border-radius:6px} .stand .base{height:12px;margin:0 -16px;background:linear-gradient(180deg,#26332f,#0b1210);border-radius:5px 5px 10px 10px;box-shadow:0 18px 26px -8px rgba(0,0,0,.8)} .ins{background:#FBF6EC;color:#12302B;border-radius:9px;aspect-ratio:2/3;padding:18px 14px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;justify-items:center;text-align:center} .ins .q{font:800 21px/1.05 var(--fd);color:#12302B;letter-spacing:-.02em} .ins .q span{color:#0E6B5C} .stars{display:flex;gap:4px} .stars i{width:26px;height:26px;display:block;background:#D8D2C2;clip-path:polygon(50% 0,63% 34%,100% 38%,72% 62%,81% 100%,50% 79%,19% 100%,28% 62%,0 38%,37% 34%)} .stars i.on{background:var(--amb)} .ins .qr{align-self:center;width:62%;aspect-ratio:1;background:#fff;border:2px solid #12302B;border-radius:8px;padding:6px} .ins .qr svg{width:100%;height:100%;display:block} .ins .tap{display:flex;align-items:center;gap:8px;font:700 13px/1.15 var(--fb);color:#0E6B5C} .ins .tap svg{flex:none} .phone{position:absolute;z-index:3;right:-2%;bottom:70px;width:112px;aspect-ratio:9/18;background:#0b1512;border:3px solid #33463f;border-radius:22px;padding:7px;box-shadow:0 30px 50px -12px rgba(0,0,0,.8);transform:rotate(9deg)} .phone .sc{background:#fff;color:#12302B;border-radius:15px;height:100%;padding:10px 8px;display:grid;align-content:start;gap:7px;font:600 9px/1.2 var(--fb)} .phone .sc b{font-size:10px} .phone .sc .st{display:flex;gap:2px} .phone .sc .st i{width:12px;height:12px;background:var(--amb);clip-path:polygon(50% 0,63% 34%,100% 38%,72% 62%,81% 100%,50% 79%,19% 100%,28% 62%,0 38%,37% 34%)} .phone .sc .ln{height:5px;border-radius:3px;background:#E5ECE8} .chip-f{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(10,36,30,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--bd2);box-shadow:0 14px 34px -10px rgba(0,0,0,.7);font:600 14.5px/1.1 var(--fb);color:#fff;white-space:nowrap} .chip-f .s{color:var(--amb);letter-spacing:1px;font-size:14px} .chip-f.a{left:-2%;top:16%} .chip-f.b{left:2%;bottom:16%} .chip-f .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(63,194,165,.25)} @media (max-width:900px){.mostrador{min-height:470px}.phone{right:2%}.chip-f.a{left:0}.chip-f.b{left:0}} @media (max-width:480px){.chip-f{font-size:13px;padding:8px 12px}.chip-f.b{bottom:8%}} @media (prefers-reduced-motion:no-preference){ .hero .stars i{animation:ilu .45s both} .hero .stars i:nth-child(1){animation-delay:.5s}.hero .stars i:nth-child(2){animation-delay:.75s}.hero .stars i:nth-child(3){animation-delay:1s}.hero .stars i:nth-child(4){animation-delay:1.25s}.hero .stars i:nth-child(5){animation-delay:1.5s} @keyframes ilu{from{background:#D8D2C2;transform:scale(.6)}60%{transform:scale(1.2)}to{transform:scale(1)}} .chip-f.a{animation:ch .5s 1.9s both} @keyframes ch{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} } /* Franja de precio */ .precio{padding-block:0 8px} .precio .in{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:space-between;padding:22px 30px;border:1px solid var(--bd);border-radius:999px;background:var(--sf);backdrop-filter:blur(8px);max-width:1156px} .precio b{font:800 38px/1 var(--fd);color:#fff;letter-spacing:-.03em} .precio b span{color:var(--mut)} .precio ul{list-style:none;margin:0;padding:0;display:flex;gap:10px 28px;flex-wrap:wrap;font-weight:600;font-size:16px;color:#CFE3DC} .precio li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);margin-right:10px;box-shadow:0 0 10px var(--mint)} @media (max-width:700px){.precio .in{border-radius:26px}} /* Tarjetas de vidrio */ .card,.pasos li,.dato,.sino>div,.faq details,.tabla{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .card{padding:28px;display:grid;gap:12px;align-content:start} .card p{color:var(--mut);font-size:17px} .card.lk{text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,background .2s,box-shadow .2s;position:relative;overflow:hidden} .card.lk::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;background:radial-gradient(ellipse at center,rgba(63,194,165,.28),transparent 70%);opacity:0;transition:opacity .25s} .card.lk:hover{border-color:rgba(63,194,165,.6);transform:translateY(-3px);background:var(--sf2)} .card.lk:hover::after{opacity:1} .card.lk .go{color:var(--mint2);font-weight:700;margin-top:6px} .card.lk .go::after{content:" →"} .gridc{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .grid2{display:grid;gap:48px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} @media (max-width:820px){.grid2{grid-template-columns:1fr}.sec{padding-block:64px}} /* Pasos (bento) */ .pasos{counter-reset:p;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));list-style:none;padding:0;margin:0} .pasos li{counter-increment:p;display:grid;gap:12px;align-content:start;padding:28px;position:relative;overflow:hidden} .pasos li::before{content:"0" counter(p);font:800 64px/1 var(--fd);letter-spacing:-.04em;background:linear-gradient(180deg,var(--mint2),rgba(63,194,165,.15));-webkit-background-clip:text;background-clip:text;color:transparent} .pasos h3{font-size:22px} .pasos p{color:var(--mut);font-size:17px} /* Datos con fuente */ .dato{display:grid;gap:10px;padding:32px;align-content:start;position:relative;overflow:hidden} .dato::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(63,194,165,.3),transparent 70%)} .dato b{font:800 clamp(44px,6vw,72px)/1 var(--fd);letter-spacing:-.04em;background:linear-gradient(95deg,var(--mint2),var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent;position:relative} .dato small{font-size:14.5px;color:#86a89d;line-height:1.5;position:relative} .dato p{font-size:18px;color:#DCEBE5;position:relative} /* Sí / No */ .sino{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));background:none;border:0;box-shadow:none;backdrop-filter:none} .sino>div{padding:28px;display:grid;gap:12px;align-content:start} .sino .si{border-color:rgba(63,194,165,.4);background:linear-gradient(180deg,rgba(63,194,165,.12),rgba(63,194,165,.03))} .sino .no{border-color:rgba(242,167,27,.4);background:linear-gradient(180deg,rgba(242,167,27,.12),rgba(242,167,27,.03))} .sino ul{margin:0;padding-left:20px;display:grid;gap:8px;color:#D5E8E1} .sino .si li::marker{color:var(--mint)}.sino .no li::marker{color:var(--amb)} /* FAQ */ .faq{display:grid;gap:10px} .faq details{border-radius:18px} .faq details[open]{border-color:rgba(63,194,165,.45);background:var(--sf2)} .faq summary{cursor:pointer;list-style:none;padding:20px 58px 20px 22px;font:700 18.5px/1.3 var(--fd);position:relative;color:#fff} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--sf2);display:grid;place-items:center;font:600 20px/1 var(--fb);color:var(--mint2)} .faq details[open] summary::after{content:"–"} .faq details>div{padding:0 22px 22px;display:grid;gap:10px;color:#CFE3DC} .faq .gr{margin-top:36px;display:grid;gap:12px} .faq .gr h2{font-size:28px} /* Cabecera interior */ .ph{padding-block:22px 40px;position:relative;isolation:isolate;overflow:hidden} .ph::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 100% at 30% 0,#000,transparent 80%);mask-image:radial-gradient(ellipse 60% 100% at 30% 0,#000,transparent 80%)} .ph .in{display:grid;gap:18px} .ph h1{font-size:clamp(38px,6vw,68px)} .crumb{font-size:15px;color:var(--mut)} .crumb a{color:var(--mint2)} /* Línea de proceso */ .flujo{display:grid;gap:0;list-style:none;margin:0;padding:0;counter-reset:f} .flujo li{counter-increment:f;display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding-bottom:30px;position:relative} .flujo li::before{content:counter(f);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(63,194,165,.16);border:1.5px solid var(--mint);color:var(--mint2);font:700 18px/1 var(--fd);position:relative;z-index:1;box-shadow:0 0 22px -4px rgba(63,194,165,.6)} .flujo li::after{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:linear-gradient(180deg,rgba(63,194,165,.5),rgba(63,194,165,.08))} .flujo li:last-child::after{display:none} .flujo h3{font-size:20px;margin-bottom:4px} .flujo p{color:var(--mut);font-size:17.5px} .tabla{overflow-x:auto} .tabla table{border-collapse:collapse;width:100%;min-width:520px;font-size:16.5px} .tabla th,.tabla td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--bd);vertical-align:top;color:#DCEBE5} .tabla th{background:rgba(255,255,255,.04);font-weight:600;color:#fff} .tabla tr:last-child td,.tabla tr:last-child th{border-bottom:0} /* Soporte / contacto */ .tema{display:grid;gap:14px;align-content:start} .tema .btn{justify-self:start;margin-top:4px} .tema ol{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--mut);font-size:17px} .tema ol li::marker{color:var(--mint)} .dato-c{display:grid;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--bd)} .dato-c b{font:600 14.5px/1.2 var(--fb);color:var(--mut)} .dato-c span{font:700 22px/1.3 var(--fd);color:#fff} .pend{background:#FFE9A8;color:#4A3000;padding:0 6px;border-radius:6px;font:600 16px/1.5 var(--fb)} /* Estado del display */ .est{min-height:100dvh;display:grid;align-content:center;justify-items:center;gap:22px;padding:32px 20px;text-align:center} .est .tarj{background:rgba(255,255,255,.06);border:1px solid var(--bd2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--tx);border-radius:28px;padding:34px 26px;max-width:460px;width:100%;display:grid;gap:16px;justify-items:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 80px -20px rgba(63,194,165,.35)} .est .tarj p{text-align:center} .est .logo{height:34px;width:auto} .est .icono{width:64px;height:64px;border-radius:50%;background:rgba(242,167,27,.14);border:1px solid rgba(242,167,27,.4);display:grid;place-items:center} .est h1{font-size:30px} .est .sel{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .est .sel a{padding:8px 15px;border-radius:999px;border:1px solid var(--bd2);color:var(--mut);text-decoration:none;font-size:14.5px} .est .sel a[aria-current=true]{background:#fff;color:#03130F} .sm{font-size:15px;color:var(--mut)} .est .tarj .sm{color:var(--mut)} /* Cierre */ .cta-fin{padding-block:40px 96px} .cta-fin .in{display:grid;gap:22px;justify-items:center;text-align:center;padding:72px 28px;border-radius:36px;border:1px solid rgba(63,194,165,.35);background:radial-gradient(600px 300px at 50% 0,rgba(63,194,165,.3),transparent 70%),radial-gradient(500px 260px at 90% 110%,rgba(242,167,27,.18),transparent 70%),var(--bg2);max-width:1156px;position:relative;overflow:hidden} .cta-fin h2{font-size:clamp(32px,5vw,58px)} .cta-fin p{color:#B9D3CB;margin-inline:auto} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card.lk,.btn{transition:none}} .mostrador{min-height:580px} .chip-f.a{left:auto;right:8%;top:0} .chip-f.b{left:4%;bottom:0} .cta-fin .btn{background:linear-gradient(180deg,var(--amb2),var(--amb));border-color:transparent;color:#2a1a00;box-shadow:0 8px 30px -6px rgba(242,167,27,.55),inset 0 1px 0 rgba(255,255,255,.5)} @media (max-width:900px){.mostrador{min-height:520px}.chip-f.a{right:2%;left:auto}.chip-f.b{left:0;bottom:0}} .precio{margin-top:34px} /* Botón flotante de WhatsApp (plegado) */ .fab{position:fixed;z-index:50;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;flex-direction:row;text-decoration:none;color:#2a1a00;background:linear-gradient(180deg,var(--amb2),var(--amb));border-radius:999px;height:58px;box-shadow:0 12px 34px -6px rgba(242,167,27,.6),0 0 0 1px rgba(255,255,255,.25) inset;transition:box-shadow .2s} .fab:hover{color:#2a1a00;box-shadow:0 16px 42px -6px rgba(242,167,27,.8),0 0 0 1px rgba(255,255,255,.35) inset} .fab-t{display:block;max-width:0;overflow:hidden;white-space:nowrap;font:700 16px/1 var(--fb);opacity:0;transition:max-width .35s ease,opacity .25s ease,padding .35s ease;padding-left:0} .fab-i{display:grid;place-items:center;width:58px;height:58px;flex:none} .fab:hover .fab-t,.fab:focus-visible .fab-t,.fab.open .fab-t{max-width:260px;opacity:1;padding-left:22px} @media (prefers-reduced-motion:no-preference){.fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--amb);opacity:0;animation:fabp 3.2s 5s ease-out 3}@keyframes fabp{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}} @media (prefers-reduced-motion:reduce){.fab-t{transition:none}} .ftr{padding-bottom:calc(36px + 72px)} .precio .in,.cta-fin .in{width:calc(100% - 44px)} @media (max-width:480px){.precio .in{padding:20px 22px}.cta-fin .in{padding:56px 22px;border-radius:28px}.cta-fin{padding-bottom:64px}} /* Sin efectos de movimiento al pasar el cursor */ .btn,.btn:hover,.card.lk,.card.lk:hover{transform:none;transition:none} .card.lk::after{display:none} .card.lk:hover{border-color:rgba(63,194,165,.6);background:var(--sf2)} .btn.am:hover{box-shadow:0 8px 30px -6px rgba(242,167,27,.55),inset 0 1px 0 rgba(255,255,255,.5)} .fab,.fab:hover{box-shadow:0 12px 34px -6px rgba(242,167,27,.6),0 0 0 1px rgba(255,255,255,.25) inset;transition:none} .fab:hover .fab-t{max-width:0;opacity:0;padding-left:0} .fab:focus-visible .fab-t,.fab.open .fab-t{max-width:260px;opacity:1;padding-left:22px} /* Franja de precio: bordes consistentes con las tarjetas */ .precio .in{border-radius:var(--r);border:1px solid var(--bd);background:var(--sf);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);padding:24px 32px;gap:18px 40px} .precio ul{gap:10px 28px} @media (max-width:700px){.precio .in{border-radius:var(--r);padding:22px 22px;display:grid;gap:14px}.precio ul{display:grid;gap:10px}} /* Márgenes más amplios */ :root{--g:clamp(24px,5.5vw,72px)} .in{max-width:1280px;padding-inline:var(--g)} .precio .in,.cta-fin .in{width:calc(100% - 2*var(--g));max-width:1136px;padding-inline:clamp(22px,4vw,40px)} .hero .in{gap:56px} .mostrador{padding-inline:24px;overflow:visible} .stand{margin-right:36px} .phone{right:6%} .chip-f.a{right:12%} .chip-f.b{left:6%} @media (max-width:900px){.stand{margin-right:28px}.phone{right:4%}.chip-f.a{right:4%}.chip-f.b{left:2%}.sec{padding-block:64px}} @media (max-width:480px){.stand{margin-right:24px;width:min(300px,76%)}.phone{right:2%;width:96px}.cta-fin .in{padding:56px 24px}.precio .in{padding:22px 24px}} .ftr{padding-inline:0} .hdr .logo{height:30px;min-width:120px;flex:none} /* Comentarios: chips fuera, CTA vendedor, espacio */ .chip-f{display:none} .nav .sel{color:var(--mint2);border:1px solid rgba(63,194,165,.55);background:rgba(63,194,165,.1);font-weight:700} .nav .sel:hover{background:rgba(63,194,165,.2);color:#fff} @media (max-width:820px){.nav .sel{margin-block:4px}} .precio+.sec{padding-top:56px} .sec{padding-block:80px} @media (max-width:820px){.sec,.precio+.sec{padding-block:56px}} @media (max-width:600px){.hero .lede .mx{display:none}.hero .lede{font-size:17px;line-height:1.5}} /* Secciones claras (alternan con las oscuras) */ .sec:not(.alt):not(.dk):not(.cta-fin){--bg:#F7F3EA;--tx:#12302B;--mut:#46665E;--sf:#fff;--sf2:#EEF3EF;--bd:rgba(18,48,43,.13);--bd2:rgba(18,48,43,.24);--mint:#0E6B5C;--mint2:#0E6B5C;background:#F7F3EA;color:#12302B} .sec:not(.alt):not(.dk):not(.cta-fin) :is(h1,h2,h3,.faq summary,.tabla th,.dato-c span){color:#12302B} .sec:not(.alt):not(.dk):not(.cta-fin) :is(.lede,p,li,.dato p,.sino ul,.faq details>div,.tabla td,.tabla th){color:#2E4F47} .sec:not(.alt):not(.dk):not(.cta-fin) .lede{color:#46665E} .sec:not(.alt):not(.dk):not(.cta-fin) .dato small{color:#5B7A72} .sec:not(.alt):not(.dk):not(.cta-fin) a:not(.btn){color:#0E6B5C} .sec:not(.alt):not(.dk):not(.cta-fin) a:not(.btn):hover{color:#073F36} .sec:not(.alt):not(.dk):not(.cta-fin) :is(.card,.pasos li,.dato,.sino>div,.faq details,.tabla){background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 2px rgba(18,48,43,.06),0 10px 28px -16px rgba(18,48,43,.22)} .sec:not(.alt):not(.dk):not(.cta-fin) .tabla th{background:#EEF3EF} .sec:not(.alt):not(.dk):not(.cta-fin) .btn:not(.am){color:#12302B;border-color:rgba(18,48,43,.3);background:transparent} .sec:not(.alt):not(.dk):not(.cta-fin) .pasos li::before{background:linear-gradient(180deg,#0E6B5C,#1C9A82);-webkit-background-clip:text;background-clip:text;color:transparent} .sec:not(.alt):not(.dk):not(.cta-fin) .flujo li::before{background:#0E6B5C;border-color:#0E6B5C;color:#fff;box-shadow:none} .sec:not(.alt):not(.dk):not(.cta-fin) .flujo li::after{background:linear-gradient(180deg,rgba(14,107,92,.45),rgba(14,107,92,.08))} /* Ritmo vertical */ .sec.cta-fin{padding-block:0 88px} .sec.alt+.sec.cta-fin,.sec.dk+.sec.cta-fin{padding-top:0} .precio+.sec{padding-top:72px} .hero{padding-bottom:12px} @media (max-width:820px){.sec.cta-fin{padding-block:0 64px}.precio+.sec{padding-top:56px}} /* Pasos que se encienden al llegar a la vista */ .flujo.anim li>div{opacity:.35;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease} .flujo.anim li::before{transition:background .4s ease,box-shadow .5s ease,color .4s ease,transform .4s ease;opacity:.55} .flujo.anim li::after{transform-origin:top;transform:scaleY(0);transition:transform .45s ease .2s} .flujo.anim li.on>div{opacity:1;transform:none} .flujo.anim li.on::before{opacity:1;animation:flp .9s ease-out 1} .flujo.anim li.on::after{transform:scaleY(1)} @keyframes flp{0%{transform:scale(.85)}55%{transform:scale(1.14);box-shadow:0 0 0 8px rgba(63,194,165,.22)}100%{transform:scale(1)}} .card .tec{justify-self:start;font:700 13.5px/1 var(--fb);letter-spacing:.02em;color:var(--mint2);border:1px solid var(--bd2);border-radius:999px;padding:6px 11px;background:var(--sf)} .sec:not(.alt):not(.dk):not(.cta-fin) .card .tec{color:#0E6B5C;background:#EEF3EF;border-color:rgba(14,107,92,.25)} /* Ilustración un poco más pequeña en responsive */ @media (max-width:900px){.mostrador{min-height:430px}.mostrador::before{width:420px;height:420px}.stand{width:min(255px,70%)}.phone{width:96px}} @media (max-width:480px){.mostrador{min-height:370px}.mostrador::before{width:340px;height:340px}.stand{width:min(225px,68%);margin-right:22px}.phone{width:80px}} .precio .pr{display:grid;gap:6px;justify-items:start} .precio .pr small{font:600 15px/1.3 var(--fb);color:var(--mint2)} .precio .pr p{font-size:16px;line-height:1.45;color:var(--mut);max-width:34ch} .precio .in{align-items:center} @media (max-width:700px){.precio .pr p{max-width:none}} @media (min-width:701px){.precio .in{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:20px clamp(32px,6vw,80px);align-items:center}.precio ul{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:14px 36px;justify-content:start;padding-left:clamp(24px,4vw,56px);border-left:1px solid var(--bd)}} .precio{padding-bottom:56px} @media (max-width:700px){.precio{padding-bottom:44px}} /* Tarjetas numeradas: entrada escalonada al llegar a la vista */ /* Sí vs No: el "Sí" destaca, el "No" queda en segundo plano */ .sec:not(.alt):not(.dk):not(.cta-fin) .sino .si{background:linear-gradient(160deg,#0E6B5C,#0A4F43);border-color:transparent;box-shadow:0 18px 40px -20px rgba(14,107,92,.7)} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .si :is(h3,li){color:#fff} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .si li::marker{color:#86EBD3} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no{background:transparent;border:1px dashed rgba(18,48,43,.28);box-shadow:none} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no h3{color:#46665E} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no li{color:#5B7A72} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no li::marker{color:#A9B9B3} .sino .si h3::before{content:"";display:inline-block;width:20px;height:20px;margin-right:10px;vertical-align:-3px;border-radius:50%;background:#3FC2A5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303130F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat} .sino .no h3::before{content:"";display:inline-block;width:20px;height:20px;margin-right:10px;vertical-align:-3px;border-radius:50%;border:2px solid currentColor;opacity:.55;background:linear-gradient(currentColor,currentColor) center/9px 2px no-repeat} .dk .sino .si,.alt .sino .si{background:linear-gradient(180deg,rgba(63,194,165,.22),rgba(63,194,165,.07));border-color:rgba(63,194,165,.6)} .dk .sino .no,.alt .sino .no{background:transparent;border:1px dashed rgba(255,255,255,.2)} .dk .sino .no h3,.alt .sino .no h3,.dk .sino .no li,.alt .sino .no li{color:#9EBDB3} /* Pie de página en móvil: logo arriba y enlaces en dos columnas */ @media (max-width:600px){ .ftr{padding-top:44px} .ftr .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px} .ftr .brand{grid-column:1/-1;max-width:none;padding-bottom:28px;border-bottom:1px solid var(--bd)} .ftr h3{margin-bottom:10px} .ftr ul{gap:11px} .ftr a{font-size:15.5px;line-height:1.3} .ftr .fine{padding-top:24px;border-top:1px solid var(--bd);font-size:13.5px} } /* Héroe en escritorio: menos aire arriba */ @media (min-width:901px){.hero{padding-block:36px 0}.hero .tx{padding-bottom:0}.mostrador{min-height:500px}.stand{width:min(290px,76%)}} /* Franja de precio: ventajas en cuadrícula pareja */ @media (min-width:701px){ .precio .in{grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:20px clamp(32px,5vw,64px)} .precio ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;justify-content:stretch;padding-left:clamp(28px,5vw,64px)} .precio li{display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid var(--bd);border-radius:14px;background:rgba(255,255,255,.03);font-size:16px;line-height:1.25} } .precio li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:rgba(63,194,165,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386EBD3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l4 4 7-8.5'/%3E%3C/svg%3E") center/68% no-repeat;box-shadow:none} .precio li{display:flex;align-items:center;gap:12px} /* Un solo botón amarillo a la vez: al bajar, el del encabezado se calma y el flotante toma el relevo */ .hdr .btn.am{transition:background .35s ease,color .35s ease,box-shadow .35s ease,border-color .35s ease} .scrolled .hdr .btn.am{background:transparent;color:var(--mint2);border-color:rgba(63,194,165,.55);box-shadow:none} .scrolled .hdr .btn.am:hover{background:rgba(63,194,165,.16);color:#fff;box-shadow:none} @media (max-width:900px){.scrolled .hdr .btn.am{background:linear-gradient(180deg,var(--amb2),var(--amb));color:#2a1a00;border-color:transparent}} .scrolled .hdr .btn.am{color:#fff;border-color:rgba(255,255,255,.32)} .scrolled .hdr .btn.am:hover{background:rgba(255,255,255,.12);color:#fff} /* Programa de vendedores: panel con cifra */ .vpan{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);align-items:center;gap:40px;padding:clamp(28px,4.5vw,56px);border:1px solid var(--bd);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015))} .vpan .stack{gap:20px;justify-items:start} .vnum{display:grid;gap:8px;align-content:center;padding-left:clamp(28px,4vw,56px);border-left:1px solid var(--bd)} .vnum b{font:800 clamp(64px,8vw,104px)/.95 var(--fd);letter-spacing:-.04em;background:linear-gradient(95deg,var(--amb2),var(--amb));-webkit-background-clip:text;background-clip:text;color:transparent} .vnum span{font-size:18px;line-height:1.4;color:var(--mut);max-width:22ch} @media (max-width:820px){.vpan{grid-template-columns:1fr;gap:28px}.vnum{padding-left:0;border-left:0;border-top:1px solid var(--bd);padding-top:28px}} @media (max-width:480px){.vpan{padding:28px 22px}.vpan .btn{padding:14px 16px;font-size:16px;width:100%;white-space:nowrap}} @media (max-width:480px){.vpan .stack{justify-items:stretch}.vpan .stack>div{min-width:0}.vpan .btn{padding:14px 10px;font-size:15.5px}} /* Animación del logo (motion graphics), solo en el inicio, cada vez que carga */ @keyframes lg-b{0%{opacity:0;clip-path:inset(100% 0 0 0) fill-box;transform:translateY(10px) scale(.9)}60%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{opacity:1;clip-path:inset(0 0 0 0) fill-box;transform:none}} @keyframes lg-v{0%{opacity:0;clip-path:circle(0% at 50% 50%) fill-box;transform:rotate(-120deg) scale(.7)}70%{opacity:1;transform:rotate(8deg) scale(1.03)}100%{opacity:1;clip-path:circle(75% at 50% 50%) fill-box;transform:none}} @keyframes lg-ck{0%{opacity:0;clip-path:inset(0 100% 0 0) fill-box;transform:translateX(-8px) scale(.9)}65%{opacity:1;transform:translateX(1px) scale(1.12)}100%{opacity:1;clip-path:inset(0 0 0 0) fill-box;transform:none}} @keyframes lg-glow{0%,100%{filter:none}45%{filter:drop-shadow(0 0 7px rgba(242,167,27,.95))}} .logo-in .hdr .logo>g:nth-of-type(1)>path{transform-box:fill-box;transform-origin:50% 50%;animation-fill-mode:both} .logo-in .hdr .logo>g:nth-of-type(1)>path:nth-child(1){animation:lg-b .8s cubic-bezier(.2,.8,.25,1) .1s both,lg-glow2 .7s ease 1.05s 1} .logo-in .hdr .logo>g:nth-of-type(1)>path:nth-child(2){animation:lg-v .9s cubic-bezier(.2,.8,.25,1) .35s both,lg-glow2 .7s ease 1.05s 1} .logo-in .hdr .logo>g:nth-of-type(1)>path:nth-child(3){animation:lg-ck .7s cubic-bezier(.3,1.2,.4,1) .95s both,lg-glow 1s ease 1.45s 1} /* Héroe móvil: los dos botones en una fila */ @media (min-width:340px) and (max-width:900px){.hero .cta{flex-wrap:nowrap;gap:10px}.hero .cta .btn{flex:1 1 0;min-width:0;padding:15px 10px;font-size:15.5px;white-space:nowrap}} @keyframes lg-wm{0%{opacity:0;clip-path:inset(0 100% 0 0) fill-box;transform:translateX(-60px)}100%{opacity:1;clip-path:inset(0 0 0 0) fill-box;transform:none}} @keyframes lg-glow2{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(63,194,165,.9))}} .logo-in .hdr .logo .wm{animation:lg-wm 1s cubic-bezier(.3,.7,.2,1) 1.5s both} /* Ilustración: todo escala con el tamaño del display (sin textos desbordados en móvil) */ .stand{container-type:inline-size} .phone{container-type:inline-size} .ins{padding:5.8cqw 4.5cqw;gap:3.2cqw} .ins .q{font-size:6.9cqw} .stars{gap:1.3cqw} .stars i{width:8.4cqw;height:8.4cqw} .ins .tap{font-size:4.2cqw;gap:2.6cqw} .ins .tap svg{width:7cqw;height:7cqw} .phone .sc{padding:8.9cqw 7.1cqw;gap:6.2cqw;font-size:8cqw;border-radius:13cqw} .phone .sc b{font-size:9cqw} .phone .sc .st{gap:1.8cqw} .phone .sc .st i{width:10.7cqw;height:10.7cqw} .phone .sc .ln{height:4.5cqw;border-radius:3cqw} @media (max-width:480px){.phone{right:5%;width:84px;bottom:60px}.stand{width:min(230px,66%);margin-right:30px}} /* Tarjetas numeradas: crecen un poco al pasar el cursor */ @media (hover:hover) and (pointer:fine){ .pasos li{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;will-change:transform} .pasos li:hover{transform:scale(1.035);border-color:rgba(63,194,165,.55);z-index:2} .sec:not(.alt):not(.dk):not(.cta-fin) .pasos li:hover{border-color:rgba(14,107,92,.4);box-shadow:0 2px 4px rgba(18,48,43,.06),0 22px 40px -18px rgba(14,107,92,.5)} } @media (prefers-reduced-motion:reduce){.pasos li,.pasos li:hover{transition:none;transform:none}} /* Palomita animada en "Sí" */ .sino .si h3::before{display:none} .sino .si h3 .ck{display:inline-block;vertical-align:-4px;margin-right:10px;flex:none;overflow:visible} .sino.anim .si .ck circle{transform-box:fill-box;transform-origin:center;transform:scale(0)} .sino.anim .si .ck path{stroke-dasharray:20;stroke-dashoffset:20} .sino.anim.go .si .ck circle{animation:ckpop .55s cubic-bezier(.3,1.5,.5,1) .15s both} .sino.anim.go .si .ck path{animation:ckdraw .5s cubic-bezier(.5,0,.2,1) .55s both} .sino.anim.go .si .ck{animation:ckglow 1s ease .6s 1,ckbeat 5s ease-in-out 3.2s infinite;transform-origin:center} @keyframes ckpop{from{transform:scale(0)}to{transform:scale(1)}} @keyframes ckdraw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}} @keyframes ckglow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 7px rgba(134,235,211,.95))}} /* Icono "No": rojo suave y animado */ .sino .no h3::before{display:none} .sino .no h3 .xk{display:inline-block;vertical-align:-4px;margin-right:10px;overflow:visible} .sino .no .xk circle{fill:#E5736B} .sino .no .xk path{fill:none;stroke:#2a0b09;stroke-width:3;stroke-linecap:round} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no .xk circle{fill:#C8453B} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no .xk path{stroke:#fff} .sino.anim .no .xk circle{transform-box:fill-box;transform-origin:center;transform:scale(0)} .sino.anim .no .xk path{stroke-dasharray:10;stroke-dashoffset:10} .sino.anim.go .no .xk circle{animation:ckpop .55s cubic-bezier(.3,1.5,.5,1) .35s both} .sino.anim.go .no .xk .x1{animation:ckdraw10 .28s ease .8s both} .sino.anim.go .no .xk .x2{animation:ckdraw10 .28s ease 1.05s both} .sino.anim.go .no .xk{animation:xkbuzz 5s linear 3.2s infinite;transform-origin:center} @keyframes ckdraw10{from{stroke-dashoffset:10}to{stroke-dashoffset:0}} @keyframes xkshake{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}} @media (prefers-reduced-motion:reduce){.sino.anim .xk,.sino.anim .ck{animation:none}} /* Gráfica del dato */ .bars{display:flex;align-items:flex-end;gap:14px;height:150px;margin:6px 0 2px;position:relative} .bar{flex:1;height:var(--h);position:relative;display:flex;flex-direction:column;justify-content:flex-end} .bar i{display:block;height:100%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--mint2),var(--mint));opacity:.9;transform-origin:bottom;transition:transform .9s cubic-bezier(.3,.7,.2,1)} .bar:nth-child(1) i{opacity:.45}.bar:nth-child(2) i{opacity:.7} .bar span{position:absolute;top:-24px;left:0;right:0;text-align:center;font:700 16px/1 var(--fd);color:#fff} .bar em{position:absolute;bottom:-24px;left:0;right:0;text-align:center;font:500 13px/1 var(--fb);font-style:normal;color:#9db9af} .dato .bars{margin-bottom:34px;padding-top:26px;height:176px} .dato .bars+small{font-size:13px} .js .dato .bar i{transform:scaleY(.04)} .js .dato.on .bar i{transform:none} .js .dato.on .bar:nth-child(2) i{transition-delay:.2s}.js .dato.on .bar:nth-child(3) i{transition-delay:.4s} @media (prefers-reduced-motion:reduce){.js .dato .bar i{transform:none;transition:none}} /* Títulos de tarjetas de servicio con degradado */ .card.lk h3{background:linear-gradient(100deg,#fff 10%,var(--mint2) 70%,var(--mint));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;letter-spacing:-.01em;padding-bottom:.08em;background-size:140% 100%;background-position:0 0;transition:background-position .5s ease} @media (hover:hover) and (pointer:fine){.card.lk:hover h3{background-position:100% 0}} .sec:not(.alt):not(.dk):not(.cta-fin) .card.lk h3{background-image:linear-gradient(100deg,#0B2A25 0%,#0E6B5C 55%,#23A98D 100%)} @media (max-width:700px){.ftr{padding-bottom:84px}} /* Un solo botón en el encabezado: "Quiero vender" pasa a enlace de texto */ .nav .sel,.scrolled .nav .sel{border:0;background:none;box-shadow:none;color:#B9D3CB;font-weight:500;padding-inline:4px} .nav .sel:hover{background:none;color:#fff;text-decoration:underline;text-underline-offset:5px} @media (min-width:821px){.nav .sel{margin-left:6px;padding-left:18px;border-left:1px solid var(--bd2);border-radius:0;margin-right:6px}} @media (max-width:820px){.nav .sel{margin-block:0}} /* Tarjetas de datos: misma altura y pie alineado */ .gridc .dato{display:flex;flex-direction:column;gap:10px} .gridc .dato small:last-child{margin-top:auto;padding-top:6px} .mapk{display:grid;gap:8px;margin:6px 0 4px;position:relative} .mr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;border:1px solid var(--bd);background:rgba(255,255,255,.03)} .mr .pin{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#5b7a70;flex:none} .mr div{flex:1;min-width:0;display:grid;gap:2px} .mr b{font:600 15px/1.2 var(--fd);color:#fff} .mr em{font:400 13px/1.2 var(--fb);font-style:normal;color:#9db9af} .mr i{font:700 13px/1 var(--fd);font-style:normal;color:#9db9af} .mr.top{border-color:rgba(63,194,165,.6);background:rgba(63,194,165,.12)} .mr.top .pin{background:var(--mint)} .mr.top em{color:var(--amb2)} .mr.top i{color:var(--mint2)} @keyframes xkbuzz{0%,12%,100%{transform:none}1%{transform:translateX(-1.5px) rotate(-7deg)}2%{transform:translateX(1.5px) rotate(7deg)}3%{transform:translateX(-1.5px) rotate(-7deg)}4%{transform:translateX(1.5px) rotate(7deg)}5%{transform:translateX(-1.5px) rotate(-6deg)}6%{transform:translateX(1.5px) rotate(6deg)}7%{transform:translateX(-1px) rotate(-5deg)}8%{transform:translateX(1px) rotate(5deg)}9%{transform:translateX(-1px) rotate(-3deg)}10%{transform:translateX(1px) rotate(3deg)}11%{transform:translateX(-.5px) rotate(-1deg)}} @keyframes ckbeat{0%,14%,100%{transform:none;filter:none}4%{transform:scale(1.28);filter:drop-shadow(0 0 8px rgba(134,235,211,.95))}9%{transform:scale(.94);filter:drop-shadow(0 0 4px rgba(134,235,211,.6))}} /* En móvil, la caja de cierre respira respecto a la sección clara de arriba */ @media (max-width:820px){.sec.cta-fin,.sec.alt+.sec.cta-fin,.sec.dk+.sec.cta-fin{padding-top:40px}} /* Bloque de marca del pie: logo, eslogan y descripción alineados arriba */ .ftr .brand{align-content:start;gap:10px} .ftr .brand .tag{margin:0;font:600 18px/1.3 var(--fd);color:#fff} .ftr .brand .desc{margin:0;font-size:15px;line-height:1.55;color:#7E9E94} /* Palabra rotativa del dato de reseñas */ .rw{display:inline-block;position:relative;white-space:nowrap;vertical-align:baseline;transition:width .7s cubic-bezier(.3,.7,.2,1);color:var(--mint2)} .rw .t{display:inline-block;transition:opacity .35s ease,transform .45s cubic-bezier(.3,.7,.2,1),filter .35s ease} @media (prefers-reduced-motion:reduce){.rw,.rw .t{transition:none}} /* Ranking animado: "Tu negocio" sube del 3.º al 2.º y al 1.º */ .mapk{display:block;height:184px} .mapk .mr{position:absolute;left:0;right:0;top:var(--y,0px);height:56px;box-sizing:border-box} .mapk .mr i::before{font:700 13px/1 var(--fd);font-style:normal} .mr.top i::before{content:"1.º"} .mr.b i::before{content:"2.º"} .mr.c i::before{content:"3.º"} .mapk.anim .mr.top{transform:translateY(128px)} .mapk.anim .mr.b{transform:translateY(-64px)} .mapk.anim .mr.c{transform:translateY(-64px)} @keyframes tuGo{0%,19%{transform:translateY(128px)}40%,72%{transform:translateY(64px)}93%,100%{transform:translateY(0)}} @keyframes bGo{0%,71%{transform:translateY(-64px)}92%,100%{transform:translateY(0)}} @keyframes cGo{0%,19%{transform:translateY(-64px)}40%,100%{transform:translateY(0)}} @keyframes rkTu{0%{content:"3.º"}40%{content:"2.º"}93%{content:"1.º"}100%{content:"1.º"}} @keyframes rkB{0%{content:"1.º"}92%{content:"2.º"}100%{content:"2.º"}} @keyframes rkC{0%{content:"2.º"}40%{content:"3.º"}100%{content:"3.º"}} .mapk.go .mr.top{animation:tuGo 3.2s ease-in-out .5s both} .mapk.go .mr.b{animation:bGo 3.2s ease-in-out .5s both} .mapk.go .mr.c{animation:cGo 3.2s ease-in-out .5s both} .mapk.go .mr.top i::before{animation:rkTu 3.2s steps(1,end) .5s both} .mapk.go .mr.b i::before{animation:rkB 3.2s steps(1,end) .5s both} .mapk.go .mr.c i::before{animation:rkC 3.2s steps(1,end) .5s both} @media (prefers-reduced-motion:reduce){.mapk.go .mr,.mapk.go .mr i::before{animation:none}} /* Tarjetas de servicio: crecen un poco y brillan con sombra oscura al pasar el cursor (solo con ratón) */ @media (hover:hover) and (pointer:fine){ .card.lk{transition:transform .4s cubic-bezier(.3,.7,.2,1),box-shadow .4s ease,border-color .25s ease,background .25s ease} .card.lk:hover{transform:scale(1.03);box-shadow:0 16px 36px -12px rgba(0,0,0,.7),0 0 0 1px rgba(63,194,165,.22)} .sec:not(.alt):not(.dk):not(.cta-fin) .card.lk:hover{box-shadow:0 16px 34px -14px rgba(18,48,43,.32),0 0 0 1px rgba(14,107,92,.2)} } @media (prefers-reduced-motion:reduce){.card.lk,.card.lk:hover{transform:none;transition:none}} /* Sección de vendedores: diseño propio, plano y alineado a la izquierda (distinto a la caja de cierre) */ .vend .vpan{border:0;border-radius:0;background:none;padding:40px 0 0;border-top:2px solid var(--amb);grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:start} .vend .vpan .stack{justify-items:start;text-align:left} .vend .vpan h2{font-size:clamp(30px,3.6vw,44px)} .vend .vnum{border-left:0;padding-left:0;justify-items:start;text-align:left;gap:6px;padding-top:8px} .vend .vnum span{max-width:24ch;text-align:left} @media (max-width:820px){ .vend .vpan{grid-template-columns:1fr;gap:20px;padding-top:28px} .vend .vnum{order:-1;justify-items:start;text-align:left;border:0;padding:0} .vend .vnum span{text-align:left} .cta-fin+.vend{padding-top:0} } /* Brillo en loop que recorre "más clientes." de izquierda a derecha */ .hero h1 em{background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),linear-gradient(95deg,var(--amb2),var(--amb) 45%,#ff9f5a);background-size:260% 100%,100% 100%;background-repeat:no-repeat;animation:hShine 3.6s ease-in-out infinite} @keyframes hShine{0%{background-position:-160% 0,0 0}55%,100%{background-position:160% 0,0 0}} @media (prefers-reduced-motion:reduce){.hero h1 em{animation:none}} /* Encabezado: margen lateral real en escritorio chico para que el botón no pegue con el borde */ .hdr .in{padding-inline:clamp(22px,3.5vw,44px)} /* Tablet chico: menú hamburguesa hasta 1100px para que el encabezado no quede pegado al borde */ @media (min-width:901px) and (max-width:1100px){ .nav{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(3,19,15,.97);border-bottom:1px solid var(--bd);padding:14px 22px 22px;flex-direction:column;align-items:stretch;gap:2px} .nav.open{display:flex} .nav a{padding:15px 14px;border-radius:12px} .mn{display:inline-flex;margin-left:auto;background:var(--sf2);border:1px solid var(--bd);border-radius:12px;width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer;color:#fff} .hdr .btn{display:none} .nav .btn{display:inline-flex;margin-top:10px} } /* Brillo más lento: recorre el texto en ~3.3 s y luego descansa */ .hero h1 em{animation-duration:6s} /* Precio: las cuatro tarjetas de beneficios con la misma altura y alineadas */ @media (min-width:701px){.precio ul{align-items:stretch}.precio li{min-height:72px;box-sizing:border-box}} /* Ranking: textos de reseñas y estrellas que cambian con cada posición; competidores se rezagan */ .mapk .mr em::before{font:inherit;font-style:normal} .mr.top em::before{content:"4.1 ★★★★ · 22 reseñas"} .mr.b em::before{content:"4.6 ★★★★★ · 96 reseñas"} .mr.c em::before{content:"4.3 ★★★★ · 61 reseñas"} @keyframes emTop{0%{content:"4.1 ★★★★ · 22 reseñas"}40%{content:"4.4 ★★★★ · 58 reseñas"}93%{content:"4.8 ★★★★★ · 126 reseñas"}100%{content:"4.8 ★★★★★ · 126 reseñas"}} @keyframes emB{0%{content:"4.6 ★★★★★ · 96 reseñas"}92%{content:"4.5 ★★★★★ · 96 reseñas"}100%{content:"4.5 ★★★★★ · 96 reseñas"}} @keyframes emC{0%{content:"4.3 ★★★★ · 61 reseñas"}40%{content:"4.2 ★★★★ · 61 reseñas"}100%{content:"4.2 ★★★★ · 61 reseñas"}} .mapk.go .mr.top em::before{animation:emTop 3.2s steps(1,end) .5s both} .mapk.go .mr.b em::before{animation:emB 3.2s steps(1,end) .5s both} .mapk.go .mr.c em::before{animation:emC 3.2s steps(1,end) .5s both} .mr.top em::before{color:var(--amb2)} /* Notas de ambas tarjetas de datos con el mismo tamaño */ .dato small,.dato .bars+small{font-size:13px} /* Tarjeta "Qué no hace" en fondo claro: texto con contraste suficiente */ .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no h3{color:#12302B} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no li{color:#2E4F47;font-size:17px;line-height:1.5} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no li::marker{color:#8A9E97} .sec:not(.alt):not(.dk):not(.cta-fin) .sino .no{border:1px dashed rgba(18,48,43,.4);background:rgba(255,255,255,.55)} /* Caja de cierre: separación superior también en escritorio, para que no pegue con la sección clara de arriba */ .sec.cta-fin,.sec.alt+.sec.cta-fin,.sec.dk+.sec.cta-fin{padding-top:56px} @media (max-width:820px){.sec.cta-fin,.sec.alt+.sec.cta-fin,.sec.dk+.sec.cta-fin{padding-top:40px}} /* Caja de cierre y sección de vendedores: separación única y pareja en web y móvil */ .cta-fin{padding-bottom:64px} .cta-fin+.vend{padding-top:0} .sec.cta-fin{padding-bottom:64px} .sec.cta-fin+.sec.vend{padding-top:0} /* Pie: columnas de enlaces parejas y barra inferior con aviso legal y redes */ @media (min-width:901px){.ftr .cols{grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:40px}} .fbot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;border-top:1px solid var(--bd);padding-top:24px} .fbot .fine{margin:0;max-width:72ch} .soc{display:flex;gap:8px;flex-wrap:wrap} .soc a{padding:8px 16px;border:1px solid var(--bd2);border-radius:999px;font-size:14px;color:var(--mut);text-decoration:none;white-space:nowrap} .soc a:hover{color:#fff;border-color:rgba(63,194,165,.55)} @media (max-width:700px){.fbot{flex-direction:column;align-items:flex-start}.soc a{padding:7px 14px}} @media (max-width:700px){.fbot{border-top:0;padding-top:0}} /* Brillo ahora de derecha a izquierda */ @keyframes hShine{0%{background-position:160% 0,0 0}55%,100%{background-position:-160% 0,0 0}} /* Ilustración del hero en móvil: elementos más grandes y sin hueco abajo */ @media (max-width:480px){.mostrador{min-height:340px}.stand{width:min(252px,72%)}.phone{width:104px;bottom:34px;right:3%}} /* Precio en tabletas y escritorio chico: texto arriba y beneficios en 2x2 a lo ancho (sin cajas apretadas) */ @media (min-width:701px) and (max-width:1180px){ .precio .in{grid-template-columns:minmax(0,1fr)!important;gap:24px} .precio ul{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding-left:0!important;border-left:0!important;gap:12px 14px!important;width:100%} .precio li{white-space:normal} } /* Tarjetas de servicio: el enlace de cada tarjeta queda alineado abajo, aunque el texto tenga distinta longitud */ .card.lk{display:flex;flex-direction:column;align-items:flex-start} .card.lk .go{margin-top:auto;padding-top:6px} .card.lk .go{white-space:normal;max-width:100%;overflow-wrap:anywhere} /* Menú móvil: filas con separador, objetivos táctiles amplios y botón principal a lo ancho */ @media (max-width:1100px){ .nav{background:#03130F;padding:6px 22px 22px;gap:0;box-shadow:0 24px 40px -20px rgba(0,0,0,.8)} .nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:14px 4px;border-radius:0;border-bottom:1px solid var(--bd);font-size:17px;font-weight:500;color:#DCEBE5;text-decoration:none} .nav a[aria-current=page]{color:var(--mint2);font-weight:600} .nav a[aria-current=page]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)} .nav .sel{color:var(--mint2);font-weight:600;border-bottom:1px solid var(--bd)} .nav .sel,.nav .sel:hover{background:none;border-left:0;border-right:0;border-top:0;box-shadow:none;margin:0;padding-inline:4px} .nav .btn{display:flex;justify-content:center;width:100%;margin-top:18px;min-height:52px;font-size:16px;border-bottom:0} } /* Menú hamburguesa: panel angosto anclado a la derecha (tablet y celular) */ @media (max-width:1100px){ .nav{left:auto;right:12px;top:calc(72px + 8px);width:min(320px,calc(100vw - 24px));border:1px solid var(--bd2);border-radius:16px;padding:6px 16px 16px;box-shadow:0 24px 48px -16px rgba(0,0,0,.85)} .nav a{min-height:50px;padding:12px 4px;font-size:16px} .nav .btn{margin-top:14px;min-height:48px} } /* Enlace secundario bajo los pasos: alineado al borde del grid, con flecha */ .mas{margin:0} .mas a{display:inline-flex;align-items:center;gap:8px;color:var(--mint2);text-decoration:none;font-weight:700} .mas a::after{content:"→";transition:transform .2s ease} .mas a:hover::after{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){.mas a::after{transition:none}} /* Redes sociales: iconos circulares bajo la descripción de la marca */ .ftr .brand .soc{display:flex;gap:10px;margin-top:6px} .soc a{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--bd2);border-radius:50%;color:var(--mut);font-size:0;white-space:nowrap} .soc a svg{width:18px;height:18px;display:block} .soc a:hover{color:#fff;border-color:rgba(63,194,165,.55);background:var(--sf2)} .soc a:focus-visible{outline:2px solid var(--mint2);outline-offset:3px} /* Pie: quita el espacio vacío bajo el aviso legal en escritorio (el botón flotante ya no lo necesita) */ @media (min-width:701px){.ftr{padding-bottom:36px}} /* Enlaces de tarjetas: no cortar frases feo; el texto se reparte en líneas parejas */ .card.lk .go{text-wrap:balance} /* Pie: tipografía más pequeña en todo el bloque */ .ftr{font-size:15px} .ftr a{font-size:14.5px} .ftr h3{font-size:14px} .ftr .brand .tag{font-size:16px} .ftr .brand .desc{font-size:13.5px} .ftr .fine{font-size:12.5px} /* Móvil: los botones de la portada van debajo de la ilustración */ @media (max-width:900px){.hero .tx{display:contents}.hero h1{order:1}.hero .lede{order:2}.hero .mostrador{order:3}.hero .cta{order:4}} /* Móvil: el celular se apoya sobre el display en lugar de quedar separado */ @media (max-width:480px){.mostrador{min-height:0;padding-block:0 6px}.phone{bottom:-12px;right:4%}} /* Pasos en móvil: número más discreto para que no compita con el texto */ @media (max-width:700px){.pasos li::before{font-size:36px}.pasos li{padding:22px}} /* Portada en móvil: título más grande */ @media (max-width:900px){.hero h1{font-size:clamp(40px,11.5vw,50px)}} /* Móvil: el grupo display + celular al 75% de su tamaño */ @media (max-width:600px){.hero .mostrador{zoom:.75}} /* Pie en móvil: menos espacio vacío bajo el aviso legal */ @media (max-width:700px){.ftr{padding-bottom:56px}} /* Móvil: el celular queda apoyado dentro de la base del display (no cuelga fuera del grupo) */ @media (max-width:600px){.hero .mostrador .phone{bottom:14px;right:3%}} /* Menú móvil como hoja inferior (estilo del panel de displays): fondo atenuado, panel redondeado desde abajo, filas tocables */ @media (max-width:1100px){ .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:#03130F} .nav{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:82vh;overflow-y:auto;border:0;border-top:1px solid var(--bd2);border-radius:24px 24px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px));background:#0A2420;box-shadow:0 -10px 40px rgba(0,0,0,.5),0 0 0 100vmax rgba(0,0,0,.55);gap:0} .nav::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--bd2);margin:0 auto 10px} .nav a{padding:16px 6px;min-height:56px} } /* Móvil: el celular se ancla al borde derecho del display en cualquier ancho */ @media (max-width:600px){.hero .mostrador .phone{right:auto;left:calc(50% + min(126px,36%) - 34px)}} /* Menú móvil: panel que se despliega desde la derecha, con icono a la izquierda de cada sección */ .nav .ic{display:none} @media (max-width:1100px){ .nav{position:fixed;top:72px;bottom:0;left:auto;right:0;width:min(340px,86vw);height:auto;max-height:none;border:0;border-left:1px solid var(--bd2);border-radius:0 0 0 24px;padding:12px 14px calc(22px + env(safe-area-inset-bottom,0px));background:#0A2420;box-shadow:-18px 0 44px rgba(0,0,0,.5),0 0 0 100vmax rgba(0,0,0,.55);overflow-y:auto;gap:0;display:none;flex-direction:column;align-items:stretch} .nav.open{display:flex} .nav::before{display:none} .nav a{display:flex;align-items:center;gap:14px;justify-content:flex-start;min-height:54px;padding:12px 10px;border-radius:12px;border-bottom:0;font-size:16px;font-weight:500;color:#DCEBE5} .nav a:hover{background:var(--sf2)} .nav a > span{flex:1} .nav .ic{display:block;flex:none;width:22px;height:22px;color:var(--mint2)} .nav a[aria-current=page]{background:var(--sf2);color:#fff;font-weight:600} .nav a[aria-current=page]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);flex:none} .nav .sel{color:var(--mint2);font-weight:600;border:0;background:none;margin:6px 0 0;padding-inline:10px;box-shadow:none} .nav .sel:hover{background:var(--sf2)} .nav .btn{display:flex;justify-content:center;gap:10px;width:100%;margin-top:14px;min-height:50px;font-size:16px;border-bottom:0} .nav .btn .ic{color:currentColor} } /* Portada en móvil: título, bajada e ilustraciones más juntos */ @media (max-width:900px){.hero .in{gap:14px}.hero .lede{margin-top:-4px}} /* Portada en móvil: separa un poco la ilustración del texto de arriba */ @media (max-width:900px){.hero .mostrador{margin-top:18px}} /* Portada en móvil: sombra del botón principal más corta, sin halo que parezca borde */ @media (max-width:900px){.hero .btn.am{box-shadow:0 3px 10px -4px rgba(242,167,27,.45),inset 0 1px 0 rgba(255,255,255,.5)}.hero .btn.am:hover{box-shadow:0 3px 10px -4px rgba(242,167,27,.45),inset 0 1px 0 rgba(255,255,255,.5)}} /* Portada en móvil: botones separados de la ilustración */ @media (max-width:900px){.hero .cta{margin-top:14px}} /* Menú: el botón "Configurar display" conserva su contorno completo */ @media (max-width:1100px){.nav .btn{border:1.5px solid var(--bd2);border-radius:14px;padding:12px 14px}} /* Móvil: el botón flotante de WhatsApp no se expande con texto, para no tapar los botones de la portada */ @media (max-width:700px){.fab-t{display:none}.fab:hover .fab-t,.fab:focus-visible .fab-t,.fab.open .fab-t{display:none;max-width:0;opacity:0;padding-left:0}} /* Móvil (≤600px): sin zoom; el celular se apoya sobre la base del display y se ancla por ancho del grupo */ @media (max-width:600px){ .hero .mostrador{zoom:1} .hero .mostrador .stand{width:min(230px,62%);margin-right:0} .hero .mostrador .phone{width:clamp(72px,24%,92px);right:auto;top:auto;bottom:6px;left:calc(50% + min(230px,62%)/2 - 0.5*clamp(72px,24%,92px) - 4px);transform:rotate(9deg);transform-origin:50% 100%} } /* Móvil (≤600px): celular con proporción más corta */ @media (max-width:600px){.hero .mostrador .phone{aspect-ratio:9/17}} /* Display real: acrílico transparente con tarjeta de degradado, QR + NFC y base negra (medidas en cqw del .stand) */ .stand{transform:rotate(-2deg)} .dsp{position:relative;width:100%} .dsp .d-acr{position:relative;z-index:2;aspect-ratio:1/1.6;padding:2.6cqw;border-radius:3cqw;background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 45%,rgba(255,255,255,.2));border:1.2px solid rgba(255,255,255,.55);box-shadow:0 5cqw 9cqw -4cqw rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07),0 0 12cqw -2cqw rgba(63,194,165,.45)} .dsp .d-acr::after{content:"";position:absolute;left:5%;top:3%;width:30%;height:94%;background:linear-gradient(100deg,rgba(255,255,255,.2),transparent);transform:skewX(-12deg);pointer-events:none;border-radius:2cqw} .dsp .d-card{position:relative;height:100%;border-radius:1.6cqw;overflow:hidden;background:#fff;color:#16231F;display:flex;flex-direction:column;align-items:center} .dsp .d-hd{position:relative;flex:none;width:100%;height:37%;background:radial-gradient(at 6% 6%,#b45cf0 0,transparent 48%),radial-gradient(at 55% 0%,#ffb703 0,transparent 46%),radial-gradient(at 100% 14%,#16a34a 0,transparent 52%),radial-gradient(at 0% 92%,#ff4d4d 0,transparent 58%),radial-gradient(at 100% 96%,#2f7cf6 0,transparent 55%),#f97316;display:flex;flex-direction:column;align-items:center;padding-top:5.5cqw} .dsp .d-hd::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-1px;height:16%;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0} .dsp .d-lg{position:relative;z-index:1;width:17cqw;height:17cqw;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.22)} .dsp .d-lg svg{width:62%;height:62%} .dsp .d-ttl{position:relative;z-index:1;margin-top:3.4cqw;font:800 7.4cqw/1.06 var(--fd);letter-spacing:-.01em;text-align:center;color:#101a17} .dsp .d-stars{display:flex;gap:1.2cqw;margin-top:1cqw} .dsp .d-stars i{width:7.2cqw;height:7.2cqw;background:#F5B400;clip-path:polygon(50% 0,63% 34%,100% 38%,72% 62%,81% 100%,50% 79%,19% 100%,28% 62%,0 38%,37% 34%)} .dsp .d-stars i:not(.on){background:#d9dedc} .dsp .d-pill{margin-top:3.2cqw;padding:1.5cqw 3.4cqw;border-radius:999px;border:.5cqw solid #4285F4;font:600 3.5cqw/1.15 var(--fb);color:#1b2b27;text-align:center;background:#fff;max-width:86%} .dsp .d-tiles{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;width:100%;padding:0 5.5cqw;margin-top:4cqw;flex:1;min-height:0} .dsp .d-tile{background:#EDF0F1;border-radius:3.4cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;padding:3cqw 2cqw;font:600 3.5cqw/1.15 var(--fb);color:#1b2b27;text-align:center;min-height:0} .dsp .d-tile .d-qr{width:68%;aspect-ratio:1;background:#fff;border-radius:1.4cqw;padding:1.6cqw;display:block} .dsp .d-tile .d-qr svg{width:100%;height:100%;display:block} .dsp .d-tile .d-nfc{width:30%;height:auto;flex:none} .dsp .d-ft{flex:none;width:100%;padding:3cqw 5.5cqw 3.2cqw;display:flex;justify-content:space-between;align-items:flex-end;font:500 2.7cqw/1.25 var(--fb);color:#6a7773} .dsp .d-ft b{font-weight:700;color:#16231F} .dsp .d-ft .d-fo{text-align:right} .dsp .d-bs{position:relative;z-index:1;margin:-2.2cqw -5cqw 0;height:7.5cqw;border-radius:1.6cqw 1.6cqw 3.4cqw 3.4cqw;background:linear-gradient(180deg,#2c3633,#050807);box-shadow:inset 0 .4cqw 0 rgba(255,255,255,.14),0 5cqw 6cqw -3cqw rgba(0,0,0,.85)} .dsp .d-bs::after{content:"";position:absolute;left:3%;right:3%;bottom:1.5cqw;height:.9cqw;border-radius:1cqw;background:#e8eeec} .dsp .d-hd{height:40%} .dsp .d-pill{margin-top:3.6cqw} .dsp .d-tiles{flex:none;height:39cqw;margin-top:5cqw} .dsp .d-ft{margin-top:auto} /* Móvil: celular con ancho y alto explícitos (proporción 1:1.6, igual que el display), sin depender de aspect-ratio */ @media (max-width:600px){ .hero .mostrador .phone{--pw:clamp(74px,21.5vw,90px);aspect-ratio:auto;width:var(--pw);height:calc(var(--pw)*1.78);left:calc(50% + min(230px,62%)/2 - var(--pw)/2 - 4px)} } /* Blog */ .meta{font:500 14px/1.4 var(--fb);color:var(--mut)} .ph .meta{margin-top:14px} .card .meta{margin-top:2px} .art{max-width:68ch;margin-inline:auto;display:grid;gap:18px;font-size:18px;line-height:1.75;color:#DCEBE5} .art h2{margin:22px 0 0;font-size:clamp(24px,3.4vw,30px);line-height:1.2} .art p,.art ul{margin:0} .art ul{padding-left:22px;display:grid;gap:10px} .art strong{color:#fff} @media (max-width:700px){.art{font-size:17px}} .art{color:inherit} .art strong{color:inherit;font-weight:700} .art{margin-inline:0} /* Celular homologado con el display: mismo bisel negro, borde de cristal, sombra, degradado y tipografía */ .phone{background:linear-gradient(180deg,#2c3633,#050807);border:1.2px solid rgba(255,255,255,.5);border-radius:15cqw;padding:4.2cqw;box-shadow:inset 0 0 0 .6cqw rgba(255,255,255,.1),0 26px 40px -16px rgba(0,0,0,.75),0 0 40px -10px rgba(63,194,165,.42)} .phone::after{content:"";position:absolute;left:10%;top:3%;width:34%;height:94%;background:linear-gradient(100deg,rgba(255,255,255,.18),transparent);transform:skewX(-12deg);pointer-events:none;border-radius:6cqw;z-index:2} .phone .sc{position:relative;background:#fff;color:#16231F;border-radius:11cqw;height:100%;padding:0;display:flex;flex-direction:column;align-items:center;gap:0;overflow:hidden;font-family:var(--fb)} .phone .p-hd{position:relative;flex:none;width:100%;height:30%;background:radial-gradient(at 6% 6%,#b45cf0 0,transparent 48%),radial-gradient(at 55% 0%,#ffb703 0,transparent 46%),radial-gradient(at 100% 14%,#16a34a 0,transparent 52%),radial-gradient(at 0% 92%,#ff4d4d 0,transparent 58%),radial-gradient(at 100% 96%,#2f7cf6 0,transparent 55%),#f97316;display:flex;justify-content:center;align-items:flex-start;padding-top:9cqw} .phone .p-hd::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-1px;height:22%;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0} .phone .p-lg{position:relative;z-index:1;width:22cqw;height:22cqw;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.22)} .phone .p-lg svg{width:62%;height:62%} .phone .sc b{margin-top:2.5cqw;font:800 9.2cqw/1.05 var(--fd);letter-spacing:-.01em;text-align:center;color:#101a17} .phone .p-st{display:flex;gap:1.6cqw;margin-top:4cqw} .phone .p-st i{width:9cqw;height:9cqw;background:#F5B400;clip-path:polygon(50% 0,63% 34%,100% 38%,72% 62%,81% 100%,50% 79%,19% 100%,28% 62%,0 38%,37% 34%)} .phone .p-ln{width:74%;height:5.2cqw;border-radius:2.6cqw;background:#EDF0F1;margin-top:4cqw} .phone .p-ln.s{width:54%;margin-top:2.4cqw} .phone .p-bt{margin-top:auto;margin-bottom:7cqw;padding:2cqw 8cqw;border-radius:999px;border:.7cqw solid #4285F4;font:600 7.6cqw/1.15 var(--fb);color:#1b2b27;background:#fff} .phone{border-radius:16%/9%;padding:5.5px} .phone .sc{border-radius:13cqw/7.5cqw} /* Blog: portadas ilustradas, cabecera con ilustración e índice lateral */ .card .cv{display:block;width:100%;height:auto;border-radius:16px;margin-bottom:6px;aspect-ratio:800/520;background:var(--sf)} .ph .in.has-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center} .ph-tx{min-width:0} .cover{margin:0;border-radius:28px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);border:1px solid var(--bd2)} .cover img{display:block;width:100%;height:auto;aspect-ratio:800/520} @media (max-width:900px){.ph .in.has-cover{grid-template-columns:1fr;gap:28px}.cover{border-radius:20px}} .art-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start} .toc summary{cursor:pointer;list-style:none;font:700 15px/1.3 var(--fb);color:#12302B;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1.5px solid #CFDDD6;border-radius:16px;background:#fff} .toc summary::-webkit-details-marker{display:none} .toc summary::after{content:"";width:9px;height:9px;border-right:2px solid #12302B;border-bottom:2px solid #12302B;transform:rotate(45deg);margin-top:-4px;transition:transform .2s} .toc details[open] summary::after{transform:rotate(-135deg);margin-top:4px} .toc ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;counter-reset:t} .toc li{counter-increment:t} .toc a{display:flex;gap:10px;padding:9px 12px;border-radius:10px;font:500 15px/1.35 var(--fb);color:#4A5F59;text-decoration:none;border-left:2px solid transparent} .toc a::before{content:counter(t) ".";font-weight:700;color:#0E6B5C;min-width:1.4em} .toc a:hover{background:#E7F0EC;color:#12302B} .toc a.on{color:#0E6B5C;font-weight:700;background:#E7F0EC;border-left-color:#F2A71B} .art h2{scroll-margin-top:96px} @media (min-width:901px){ .art-wrap{grid-template-columns:240px minmax(0,68ch);gap:64px} .toc{position:sticky;top:96px;align-self:start} .toc summary{pointer-events:none;border:0;background:none;padding:0 12px 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#4A5F59} .toc summary::after{display:none} .toc ol{margin-top:6px} } /* ===== Servicios: portada con ilustración, filas por servicio, selector de caso y quién lo hace ===== */ .sv-hero{padding-block:28px 56px} .sv-hero .in{display:block} .sv-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,64px);align-items:center} .sv-hero-tx{display:grid;gap:22px;align-content:center;min-width:0} .sv-hero h1{font-size:clamp(40px,5.4vw,70px)} .sv-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px} .sv-jump a{display:inline-flex;align-items:center;gap:9px;padding:12px 20px 12px 16px;border-radius:999px;border:1.5px solid var(--bd2);background:var(--sf);color:#fff;font:600 16px/1 var(--fb);text-decoration:none;transition:border-color .2s,background .2s} .sv-jump a:hover{border-color:var(--mint);background:var(--sf2);color:#fff} .sv-jump svg{width:20px;height:20px;color:var(--mint2);flex:none} .sv-hero-art{min-width:0} .sv-hub{display:block;width:100%;height:auto;overflow:visible} @media (prefers-reduced-motion:no-preference){ .sv-route{stroke-dasharray:1;stroke-dashoffset:1;animation:sv-draw .9s cubic-bezier(.5,0,.2,1) forwards} .sv-route.r1{animation-delay:.3s}.sv-route.r2{animation-delay:.45s}.sv-route.r3{animation-delay:.6s} .sv-tile{opacity:0;transform:translateY(10px);animation:sv-in .55s cubic-bezier(.2,.8,.25,1) forwards} .sv-tile.t1{animation-delay:.9s}.sv-tile.t2{animation-delay:1.05s}.sv-tile.t3{animation-delay:1.2s} } @keyframes sv-draw{to{stroke-dashoffset:0}} @keyframes sv-in{to{opacity:1;transform:none}} @media (max-width:900px){.sv-hero-grid{grid-template-columns:1fr}.sv-hero-art{max-width:480px}} .sv-row{padding-block:clamp(56px,8vw,104px);color:#12302B} .sv-crema{background:#FBF6EC}.sv-menta{background:#E7F0EC}.sv-verde{background:#0E6B5C;color:#FBF6EC} .sv-row h2{color:inherit;font-size:clamp(30px,3.8vw,46px)} .sv-row h3{color:inherit} .sv-row p{color:inherit} .sv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center} .sv-rev .sv-fig{order:2} .sv-fig{margin:0;border-radius:28px;overflow:hidden;box-shadow:0 36px 60px -34px rgba(18,48,43,.55)} .sv-verde .sv-fig{box-shadow:0 36px 60px -30px rgba(0,0,0,.5)} .sv-fig img{display:block;width:100%;height:auto;aspect-ratio:600/460} .sv-tx{display:grid;gap:18px;justify-items:start;min-width:0} .sv-name{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 12px;border-radius:999px;background:#fff;border:1.5px solid #CFDDD6;color:#0E6B5C;font:700 15px/1 var(--fb)} .sv-name svg{width:19px;height:19px} .sv-menta .sv-name{background:#FBF6EC} .sv-verde .sv-name{background:rgba(251,246,236,.12);border-color:rgba(251,246,236,.4);color:#FBF6EC} .sv-lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;opacity:.92} .sv-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:12px} .sv-list li{position:relative;padding-left:24px;font-size:17px;line-height:1.5} .sv-list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:3px;background:#0E6B5C} .sv-verde .sv-list li::before{background:#FBF6EC} .sv-who{font-size:15px;line-height:1.5;color:#4A5F59;border-top:1.5px solid #CFDDD6;padding-top:14px;max-width:46ch} .sv-verde .sv-who{color:rgba(251,246,236,.82);border-color:rgba(251,246,236,.3)} .sv-btn{display:inline-flex;align-items:center;gap:10px;margin-top:4px;padding:15px 24px;border-radius:999px;background:#0E6B5C;color:#FBF6EC;font:700 17px/1.1 var(--fb);text-decoration:none;transition:background .2s,transform .2s} .sv-btn:hover{background:#0A5246;color:#FBF6EC} .sv-btn .arr{width:20px;height:20px;transition:transform .2s} .sv-btn:hover .arr{transform:translateX(3px)} .sv-verde .sv-btn{background:#F2A71B;color:#12302B} .sv-verde .sv-btn:hover{background:#FFC95C;color:#12302B} @media (max-width:900px){.sv-grid{grid-template-columns:1fr}.sv-rev .sv-fig{order:0}} .sv-pick-h{display:grid;gap:10px;margin-bottom:34px;max-width:60ch} .sv-pick-h p{font-size:18px;color:#4A5F59} .sv-paths{list-style:none;margin:0;padding:0;display:grid;gap:14px} .sv-path{display:grid;grid-template-columns:minmax(0,1.15fr) 28px minmax(0,1fr);gap:22px;align-items:center;padding:20px 26px;background:#fff;border:1.5px solid #CFDDD6;border-radius:28px;transition:border-color .2s} .sv-path:hover{border-color:#0E6B5C} .sv-path .q{display:flex;align-items:center;gap:16px;font:600 18px/1.35 var(--fb);color:#12302B;max-width:none} .sv-path .qi{flex:none;width:44px;height:44px;border-radius:50%;background:#E7F0EC;color:#0E6B5C;display:grid;place-items:center} .sv-path .qi svg{width:22px;height:22px} .sv-path>.arr{width:26px;height:26px;color:#6B897E} .sv-path .cs{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .sv-chip{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;font:700 15px/1 var(--fb);text-decoration:none;color:#FBF6EC;background:#0E6B5C;transition:filter .2s} .sv-chip:hover{filter:brightness(1.12);color:#FBF6EC} .sv-chip.d{background:#F2A71B;color:#12302B}.sv-chip.d:hover{color:#12302B} .sv-chip.g{background:#12302B} .sv-chip.e{background:#0A5246} .sv-path .note{flex-basis:100%;font-size:14px;color:#4A5F59} @media (max-width:820px){.sv-path{grid-template-columns:1fr;gap:14px;padding:18px 20px}.sv-path>.arr{display:none}} .sv-who-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:start} .sv-person{display:grid;gap:16px;justify-items:start} .sv-person p{font-size:19px;line-height:1.55;max-width:44ch} .sv-person .av{width:64px;height:64px;border-radius:50%;background:#0E6B5C;color:#FBF6EC;display:grid;place-items:center;font:700 22px/1 var(--fd)} .sv-prom{list-style:none;margin:0;padding:0;display:grid;gap:14px} .sv-prom li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:22px 24px;background:#FBF6EC;border:1.5px solid #CFDDD6;border-radius:28px;align-items:start} .sv-prom .pi{width:48px;height:48px;border-radius:16px;background:#0E6B5C;color:#FBF6EC;display:grid;place-items:center} .sv-prom .pi svg{width:24px;height:24px} .sv-prom h3{font-size:20px;margin-bottom:4px} .sv-prom p{font-size:16px;line-height:1.5;color:#4A5F59} @media (max-width:900px){.sv-who-grid{grid-template-columns:1fr}} /* Soporte: botones de cada recuadro alineados al pie, sin importar el largo del texto */ .card.tema{display:flex;flex-direction:column} .card.tema ol{margin-bottom:20px} .card.tema .btn{margin-top:auto;align-self:flex-start} .card.tema .btn{white-space:nowrap;max-width:100%} .cover-sv img{aspect-ratio:600/460}.ph .in.has-cover:has(.cover-sv){grid-template-columns:minmax(0,1fr) minmax(0,420px)}@media (max-width:900px){.ph .in.has-cover:has(.cover-sv){grid-template-columns:1fr}.cover-sv{max-width:460px}} /* ilustraciones de páginas de servicio: marco ámbar fino, entrada suave y elevación al pasar el cursor */ .cover-sv{position:relative;isolation:isolate;box-shadow:0 40px 70px -36px rgba(0,0,0,.75),0 0 0 1px rgba(242,167,27,.10);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease} .cover-sv::after{content:"";position:absolute;inset:10px;border-radius:20px;border:1px solid rgba(242,167,27,.28);pointer-events:none;z-index:1} .cover-sv img{position:relative;z-index:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)} @media (hover:hover) and (pointer:fine){.cover-sv:hover{transform:translateY(-6px);box-shadow:0 56px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(242,167,27,.28)}.cover-sv:hover img{transform:scale(1.02)}} @media (prefers-reduced-motion:no-preference){.cover-sv{animation:cvIn 1s cubic-bezier(.2,.7,.2,1) both .15s}@keyframes cvIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}} @media (prefers-reduced-motion:reduce){.cover-sv,.cover-sv img{transition:none}} /* refuerzo: entrada más marcada y flotado lento continuo; el marco ámbar respira */ @media (prefers-reduced-motion:no-preference){ .cover-sv{animation:cvIn 1.2s cubic-bezier(.2,.7,.2,1) both .1s,cvFloat 7s ease-in-out 1.4s infinite} .cover-sv::after{animation:cvRing 4s ease-in-out 1.4s infinite} @keyframes cvIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}} @keyframes cvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes cvRing{0%,100%{border-color:rgba(242,167,27,.22);inset:10px}50%{border-color:rgba(242,167,27,.6);inset:6px}} } @media (hover:hover) and (pointer:fine){.cover-sv:hover{animation-play-state:paused}} /* ===== Preguntas frecuentes (fq-) ===== */ .fq-search{position:relative;margin-top:26px;max-width:460px} .fq-search .ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:21px;height:21px;color:var(--mint2);pointer-events:none} .fq-search input{width:100%;box-sizing:border-box;padding:16px 20px 16px 50px;border-radius:999px;border:1.5px solid var(--bd2);background:rgba(255,255,255,.07);color:#fff;font:500 17px/1.2 var(--fb);outline:none;transition:border-color .2s,background .2s,box-shadow .2s} .fq-search input::placeholder{color:#9DB9B0} .fq-search input:focus{border-color:var(--mint);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(63,194,165,.18)} .fq-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.6} .fq-facts{background:#E7F0EC;border-bottom:1px solid #D3E4DC} .fq-facts ul{list-style:none;margin:0;padding:26px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .fq-facts li{display:flex;align-items:center;gap:14px;padding:6px 18px;border-left:2px solid rgba(14,107,92,.25)} .fq-facts li:first-child{border-left:0;padding-left:0} .fq-facts .ico{flex:none;width:34px;height:34px;padding:8px;box-sizing:border-box;border-radius:12px;background:#0E6B5C;color:#FBF6EC} .fq-facts b{display:block;font:800 24px/1.05 var(--fd);color:#12302B} .fq-facts span{display:block;margin-top:3px;font:500 14.5px/1.25 var(--fb);color:#2E4F47} .fq-main{padding-top:48px} .fq-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .fq-chips{display:flex;flex-wrap:wrap;gap:10px} .fq-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 16px 11px 14px;border-radius:999px;border:1.5px solid #CFDDD6;background:#fff;color:#12302B;font:600 15.5px/1 var(--fb);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s} .fq-chip .ico{width:19px;height:19px;color:#0E6B5C} .fq-chip em{font:700 12.5px/1 var(--fb);font-style:normal;padding:4px 8px;border-radius:999px;background:#E7F0EC;color:#0A5246} .fq-chip:hover{border-color:#0E6B5C;transform:translateY(-1px)} .fq-chip.on{background:#0E6B5C;border-color:#0E6B5C;color:#FBF6EC} .fq-chip.on .ico{color:#FBF6EC}.fq-chip.on em{background:rgba(251,246,236,.2);color:#FBF6EC} .fq-chip:focus-visible,.fq-all:focus-visible,.fq-q summary:focus-visible{outline:3px solid #F2A71B;outline-offset:2px} .fq-all{padding:11px 4px;border:0;background:none;color:#0A5246;font:700 15.5px/1 var(--fb);text-decoration:underline;text-underline-offset:4px;cursor:pointer} .fq-count{min-height:22px;margin:18px 0 0;font:600 14.5px/1.2 var(--fb);color:#2E4F47} .fq-grp{margin-top:26px} .fq-grp[hidden],.fq-q[hidden]{display:none} .fq-grp h2{display:flex;align-items:center;gap:14px;margin:0 0 16px;font:800 clamp(24px,3vw,32px)/1.1 var(--fd);color:#12302B} .fq-grp h2 .ico{width:42px;height:42px;padding:10px;box-sizing:border-box;border-radius:14px;background:#0E6B5C;color:#FBF6EC;flex:none} .fq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .fq-q{background:#fff;border:1px solid #DCE7E1;border-radius:18px;box-shadow:0 1px 2px rgba(18,48,43,.05),0 12px 28px -20px rgba(18,48,43,.35);transition:border-color .25s,box-shadow .25s,transform .25s} .fq-q:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(18,48,43,.05),0 18px 34px -18px rgba(18,48,43,.4)} .fq-q[open]{border-color:#0E6B5C;box-shadow:0 0 0 1px #0E6B5C,0 22px 40px -22px rgba(14,107,92,.5)} .fq-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 20px 22px;font:700 17.5px/1.3 var(--fd);color:#12302B} .fq-q summary::-webkit-details-marker{display:none} .fq-q summary .ico{flex:none;width:32px;height:32px;padding:7px;box-sizing:border-box;border-radius:50%;background:#E7F0EC;color:#0A5246;transition:transform .3s,background .25s,color .25s} .fq-q[open] summary .ico{transform:rotate(45deg);background:#0E6B5C;color:#FBF6EC} .fq-a{display:grid;grid-template-rows:1fr} .fq-a>div{padding:0 22px 22px;color:#2E4F47;font:400 16.5px/1.6 var(--fb)} .fq-a p{margin:0;color:#2E4F47} @media (prefers-reduced-motion:no-preference){.fq-q[open] .fq-a>div{animation:fqIn .35s ease both}@keyframes fqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}} .fq-none{margin-top:30px;padding:36px 28px;border-radius:22px;background:#fff;border:1.5px dashed #BBD0C7;text-align:center;color:#12302B} .fq-none b{font:800 22px/1.2 var(--fd)}.fq-none p{margin:8px 0 0;color:#2E4F47} @media (max-width:900px){.fq-facts ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.fq-facts li:nth-child(3){border-left:0;padding-left:0}.fq-list{grid-template-columns:1fr}.fq-search{max-width:none}} @media (max-width:520px){.fq-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;width:calc(100% + 32px);scrollbar-width:none}.fq-chips::-webkit-scrollbar{display:none}.fq-chip{flex:none}.fq-bar{flex-direction:column;align-items:stretch;gap:6px}.fq-all{align-self:flex-start;padding-left:0}.fq-facts b{font-size:21px}.fq-q summary{font-size:16.5px}} .fq-facts ul{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:900px){.fq-facts ul{grid-template-columns:1fr;row-gap:14px}.fq-facts li,.fq-facts li:nth-child(3){border-left:0;padding-left:0}} @media (max-width:900px){.fq-facts li{border-left:0;padding:14px 0 0;border-top:1px solid rgba(14,107,92,.2)}.fq-facts li:first-child{border-top:0;padding-top:0}} /* ===== Formularios sencillos (fm-) ===== */ .fm-sec{padding-top:48px} .fm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:28px;align-items:start} .fm-card{background:#fff;border:1px solid #DCE7E1;border-radius:24px;padding:32px;box-shadow:0 1px 2px rgba(18,48,43,.06),0 24px 48px -28px rgba(18,48,43,.35);min-width:0} .fm-card>h2{margin:0 0 22px;font:800 clamp(24px,3vw,30px)/1.1 var(--fd);color:#12302B} .fm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px} .fm-f{display:grid;gap:8px;min-width:0} .fm-f.fm-w{grid-column:1/-1} .fm-f label span{font:700 15px/1.3 var(--fb);color:#12302B} .fm-req{color:#B9790A;margin-left:2px} .fm-opt{font:500 13px/1 var(--fb);color:#5B7A72;margin-left:0} .fm-f input,.fm-f select,.fm-f textarea{width:100%;box-sizing:border-box;padding:14px 16px;border-radius:14px;border:1.5px solid #CFDDD6;background:#FBFDFC;color:#12302B;font:500 16px/1.3 var(--fb);outline:none;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none} .fm-f select{background-image:linear-gradient(45deg,transparent 50%,#0E6B5C 50%),linear-gradient(135deg,#0E6B5C 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px} .fm-f textarea{resize:vertical;min-height:120px} .fm-f input::placeholder,.fm-f textarea::placeholder{color:#8AA39B} .fm-f input:focus,.fm-f select:focus,.fm-f textarea:focus{border-color:#0E6B5C;box-shadow:0 0 0 4px rgba(14,107,92,.14)} .fm-f :is(input,select,textarea):user-invalid{border-color:#B9790A} .fm-hint{font:500 13.5px/1.35 var(--fb);color:#5B7A72} .fm-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid #E1ECE6} .fm-msg{margin:0;font:600 14.5px/1.4 var(--fb);color:#2E4F47;max-width:44ch} .fm-send{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;background:#0E6B5C;color:#FBF6EC;font:700 16px/1 var(--fb);text-decoration:none;transition:background .2s,transform .2s,opacity .2s} .fm-send svg{width:20px;height:20px} .fm-send:hover{background:#0A5246;transform:translateY(-1px)} .fm-send[aria-disabled="true"]{background:#B9CDC6;color:#fff;cursor:not-allowed;transform:none} .fm-send:focus-visible,.fm-f input:focus-visible,.fm-f select:focus-visible,.fm-f textarea:focus-visible{outline:3px solid #F2A71B;outline-offset:2px} .fm-side{background:#E7F0EC;border:1px solid #D3E4DC;border-radius:24px;padding:28px;display:grid;gap:14px;position:sticky;top:96px} .fm-side h3{margin:0;font:800 22px/1.15 var(--fd);color:#12302B} .fm-side ol{margin:0;padding-left:20px;display:grid;gap:10px;color:#2E4F47;font:500 15.5px/1.5 var(--fb)} .fm-note{margin:0;padding:12px 14px;border-radius:14px;background:#fff;color:#2E4F47;font:500 14.5px/1.45 var(--fb)} @media (max-width:900px){.fm-grid{grid-template-columns:1fr}.fm-side{position:static}} @media (max-width:560px){.fm-card{padding:22px 18px;border-radius:20px}.fm-fields{grid-template-columns:1fr}.fm-foot{flex-direction:column;align-items:stretch}.fm-send{justify-content:center}} .fm-mail{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:18px;font:500 14.5px/1.4 var(--fb);color:#2E4F47} .fm-mail code{padding:6px 10px;border-radius:10px;background:#E7F0EC;color:#0A5246;font:600 14.5px/1.2 var(--fb);user-select:all} .fm-copy{padding:8px 14px;border-radius:999px;border:1.5px solid #0E6B5C;background:#fff;color:#0A5246;font:700 13.5px/1 var(--fb);cursor:pointer} .fm-copy:hover{background:#E7F0EC} .fm-ok{background:#fff;border:1px solid #DCE7E1;border-radius:24px;padding:40px 32px;text-align:center;display:grid;gap:14px;justify-items:center;box-shadow:0 1px 2px rgba(18,48,43,.06),0 24px 48px -28px rgba(18,48,43,.35);min-width:0} .fm-ok[hidden]{display:none} .fm-ok h2{margin:0;font:800 clamp(24px,3vw,30px)/1.1 var(--fd);color:#12302B} .fm-ok p{margin:0;color:#2E4F47;font:500 16px/1.5 var(--fb);max-width:44ch} .fm-tick{width:56px;height:56px;border-radius:50%;background:#0E6B5C;color:#FBF6EC;display:grid;place-items:center} .fm-tick svg{width:28px;height:28px} #fm-factura[hidden]{display:none} .fm-send:disabled{opacity:.7;cursor:progress} .fm-f input[type=file]{padding:12px 14px;border-radius:14px;border:1.5px dashed #9FBDB3;background:#FBFDFC;color:#2E4F47;font:500 15px/1.3 var(--fb);width:100%;box-sizing:border-box;cursor:pointer} .fm-f input[type=file]::file-selector-button{margin-right:14px;padding:9px 16px;border-radius:999px;border:0;background:#0E6B5C;color:#FBF6EC;font:700 14px/1 var(--fb);cursor:pointer} .fm-f input[type=file]:focus-visible{outline:3px solid #F2A71B;outline-offset:2px} /* alineación de casillas: etiqueta a dos líneas fijas y pie de ayuda con altura constante */ .fm-fields{align-items:stretch} .fm-f{align-content:start} .fm-f>label{display:block;line-height:1.3} .fm-f>label>span{display:block}.fm-req,.fm-opt{display:inline} /* Precio: los 4 puntos de la lista laten suavemente, uno tras otro */ @keyframes prPulse{0%,100%{transform:scale(1);box-shadow:0 0 6px var(--mint)}50%{transform:scale(1.35);box-shadow:0 0 16px var(--mint2)}} .precio li::before{animation:prPulse 3.2s ease-in-out infinite;transform-origin:center} .precio li:nth-child(2)::before{animation-delay:.4s} .precio li:nth-child(3)::before{animation-delay:.8s} .precio li:nth-child(4)::before{animation-delay:1.2s} @media (prefers-reduced-motion:reduce){.precio li::before{animation:none}} /* Composición de la portada: display centrado y celular apoyado en su borde derecho, sin tapar el contenido */ .hero .mostrador{place-items:center;min-height:520px;padding-block:8px} .hero .mostrador .stand{width:min(290px,70%);margin:0 auto;transform:rotate(-2deg)} .hero .mostrador .phone{top:auto;right:auto;width:min(112px,30%);aspect-ratio:9/18;height:auto;bottom:96px;left:calc(50% + min(290px,70%)/2 - 22px);transform:rotate(9deg);transform-origin:50% 100%} @media (max-width:600px){ .hero .mostrador{zoom:1;min-height:440px} .hero .mostrador .stand{width:min(230px,62%)} .hero .mostrador .phone{width:min(84px,24%);bottom:118px;left:calc(50% + min(230px,62%)/2 - 40px)} } /* Páginas legales: texto corrido con jerarquía clara */ .legal{max-width:72ch;display:grid;gap:14px;font-size:17px;line-height:1.7} .legal h2{margin-top:18px;font-size:clamp(22px,2.6vw,26px)} .legal ul{padding-left:22px;display:grid;gap:8px} .legal p,.legal ul{margin:0}