html{background:#0a1a40}

:root{
  --bg:#0a1a40;
  --ivory:#fbf5e6; --ivory-2:#e6dbc0; --ivory-deep:#cdbd97;
  --gold:#F49A02; --gold-hi:#FFB340; --gold-lo:#E08A00;
  --ink:#2a2217; --ink-soft:#5f5139; --muted:#8a7a5d;
  --on-dark:#f6f1e4; --on-dark-soft:#cfd6ea; --on-dark-muted:#9aa7c9;
  --display:'Baloo 2','Nunito',system-ui,sans-serif;
  --sans:'Nunito','Segoe UI',system-ui,sans-serif;
  /* clay recipe (from SAMI Studio): white rim, solid thickness under the piece, top light / bottom shade, soft tinted glow */
  --sh-ivory: inset 0 2px 0 rgba(255,255,255,.95), inset 0 10px 22px rgba(255,255,255,.55), inset 0 -12px 22px rgba(150,120,70,.28), 0 0 0 1.5px rgba(255,255,255,.55), 0 8px 0 #bfae88, 0 26px 50px rgba(3,10,30,.6);
  --sh-ivory-sm: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 6px 12px rgba(255,255,255,.55), inset 0 -7px 12px rgba(150,120,70,.3), 0 0 0 1.5px rgba(255,255,255,.55), 0 5px 0 #bfae88, 0 14px 28px rgba(3,10,30,.55);
  --sh-gold: inset 0 2px 0 rgba(255,250,220,.95), inset 0 10px 22px rgba(255,245,200,.55), inset 0 -12px 22px rgba(120,60,0,.45), 0 0 0 1.5px rgba(255,240,190,.6), 0 8px 0 #9A5E00, 0 26px 50px rgba(3,10,30,.6);
  --sh-gold-sm: inset 0 1.5px 0 rgba(255,250,220,.95), inset 0 6px 12px rgba(255,245,200,.55), inset 0 -7px 12px rgba(120,60,0,.45), 0 0 0 1.5px rgba(255,240,190,.6), 0 5px 0 #9A5E00, 0 14px 28px rgba(3,10,30,.55);
  --sh-dark: inset 0 2px 0 rgba(200,215,255,.35), inset 0 10px 22px rgba(200,215,255,.14), inset 0 -12px 22px rgba(2,8,24,.7), 0 0 0 1.5px rgba(160,180,230,.35), 0 8px 0 #050d26, 0 26px 50px rgba(2,8,24,.7);
  --navy1:#2a4484; --navy2:#13244f;
  --rail:88px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--on-dark);font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:500;overflow-x:hidden;min-height:100vh;
  background-image:linear-gradient(180deg,rgba(6,16,40,.0) 55%,rgba(6,16,40,.85) 100%),url(../img/paisaje.webp);background-size:cover;background-position:center bottom;background-attachment:scroll}
@media(max-width:899px){body{background-image:linear-gradient(180deg,rgba(6,16,40,.25),rgba(6,16,40,.85)),url(../img/paisaje-movil.webp);background-attachment:scroll;background-position:70% bottom}}
img{max-width:100%;height:auto;display:block;-webkit-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
a img,button img{pointer-events:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(40px,5vw,72px)}
h2{font-size:clamp(28px,3.2vw,40px)}
h3{font-size:22px}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:12px}

/* ===== clay primitives ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;font-weight:800;font-size:16px;transition:transform .14s ease,box-shadow .14s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(4px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink);box-shadow:var(--sh-gold-sm)}
.btn-ivory{background:linear-gradient(180deg,var(--ivory),var(--ivory-2));color:var(--ink);box-shadow:var(--sh-ivory-sm)}
.btn-dark{background:linear-gradient(180deg,var(--navy1),var(--navy2));color:var(--on-dark);box-shadow:var(--sh-dark)}
.btn-sm{min-height:46px;padding:0 20px;font-size:15px}

/* ===== menu: SAMI Studio's segmented tab bar, line for line, in ivory and gold ===== */
.rail{
  --ctl1:#0D1733; --ctl2:#060B1C;
  --ridge:rgba(200,215,255,.22); --ridge-soft:rgba(200,215,255,.14); --ridge-thin:rgba(255,240,190,.4);
  --groove:rgba(0,0,0,.45); --groove-deep:rgba(0,0,0,.6);
  --pill1:#FFA51C; --pill2:#E08A00; --pill-ink:#2A2217;
  position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:60;
  display:inline-flex;border-radius:16px;overflow:hidden;
  box-shadow:0 0 28px 4px rgba(255,205,120,.18),-8px 14px 24px rgba(2,8,24,.7),0 2px 6px rgba(2,8,24,.5)}
.rail .tab{display:block;padding:6px;color:var(--ink-soft);
  background:linear-gradient(180deg,var(--ctl1),var(--ctl2));
  box-shadow:inset 0 2px 2px var(--ridge),inset 0 -3px 4px var(--groove),inset -5px 0 7px -3px var(--groove-deep),inset 5px 0 7px -3px var(--ridge-soft)}
.rail .tl{display:flex;align-items:center;gap:9px;padding:13.5px 21px;border-radius:13px;font-size:14.5px;font-weight:700;line-height:1.2;white-space:nowrap;color:#F6EFE0}
.rail .tl svg{width:19px;height:19px;stroke-width:2;color:#F49A02;filter:drop-shadow(-1px 1px 1px rgba(10,6,28,.5))}
.rail .tab.on .tl svg{color:#4A2A00}
.rail .tab:hover .tl{color:#fff}
.rail .tab.on .tl{color:var(--pill-ink);background:linear-gradient(180deg,#FFA51C,#F49A02 40%,#E08A00);
  box-shadow:-1px 2px 4px var(--groove-deep),inset 1px 1px 2px var(--ridge-thin),inset -1px -2px 3px var(--groove)}
.rail .tab:first-child.on .tl{border-radius:12px 5px 5px 12px}
.rail .tab:last-child.on .tl{border-radius:5px 12px 12px 5px}
.rail .tab:not(:first-child):not(:last-child).on .tl{border-radius:5px}
@media(max-width:1499px){.rail .tl{padding:13.5px 15px;font-size:14px;gap:7px}}
@media(max-width:1279px){.rail .tl span{display:none}.rail .tl{padding:14px 16px}}
@media(max-width:899px){
  .rail{left:12px;right:12px;top:auto;bottom:12px;transform:none;display:flex;border-radius:18px}
  .rail .tab{flex:1;padding:5px}
  .rail .tl{flex-direction:column;gap:3px;padding:7px 2px;font-size:10px;border-radius:12px}
  .rail .tl span{display:inline}
  .rail .tl svg{width:22px;height:22px}
  .rail .tab.on .tl{border-radius:12px!important}
}

/* ===== top bar ===== */
.top{position:fixed;top:0;left:0;right:0;z-index:55;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:0;padding:8px 18px 8px 8px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));color:var(--ink);border-radius:16px;box-shadow:var(--sh-ivory-sm)}
.brand img{width:42px;height:42px;border-radius:12px;filter:drop-shadow(2px 3px 4px rgba(3,10,30,.45))}
.brand .wm{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:0;line-height:1}
.brand .wm .j{color:#F9211F}
.brand .wm .b{color:#FBC50D}
.brand .wm{filter:drop-shadow(-1px 2px 1.5px rgba(3,16,30,.55))}
.brand .wm b{font-weight:800}
.top-right{display:flex;gap:10px;align-items:center}
.rb{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#F49A02;font-weight:800;font-size:15px}
.rb-lang{font-family:var(--display);font-size:17px}
.rb-lang .lt{display:block;filter:url(#ovClayIcon) drop-shadow(-1px 2px 1.5px rgba(3,16,30,.5))}
.rb svg.rbk{width:48px;height:48px}

.lang{display:inline-flex;padding:5px;border-radius:999px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:inset 4px 4px 9px rgba(120,95,50,.35),inset -3px -3px 7px rgba(255,255,255,.7),8px 8px 18px rgba(20,12,4,.45)}
.lang button{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:800;color:var(--ink-soft)}
.lang button.on{position:relative;isolation:isolate;color:var(--ink)}
.lang button.on::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:linear-gradient(180deg,#FFA51C 0%,#F49A02 35%,#F49A02 80%,#E08A00 100%);filter:url(#sHdr) drop-shadow(-2px 4px 6px rgba(3,10,30,.4))}
@media(max-width:899px){.brand{font-size:16px}.brand img{width:30px;height:30px}}

/* ===== stage (first screen) ===== */
.stage{position:relative;min-height:100vh;display:grid;align-items:center;padding:96px 20px 110px;overflow:hidden}
@media(min-width:900px){.stage{height:100vh;min-height:790px;box-sizing:border-box}}
@media(min-width:900px){.stage{padding:96px 40px 44px 60px}}
.stage-in{width:min(1300px,100%);margin:0 auto;display:grid;gap:20px;align-items:center}
@media(min-width:900px){.stage-in{grid-template-columns:minmax(0,1fr) 560px;gap:10px;align-items:end;height:100%}.stage-in .copy{align-self:center;margin-bottom:40px}}
.copy{text-align:center}
@media(min-width:900px){.copy{text-align:left}}
.kicker{display:block;font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#F49A02;opacity:1;margin-bottom:18px;text-shadow:0 1px 8px rgba(3,10,30,.6)}
.copy h1{text-shadow:0 6px 30px rgba(3,10,30,.6)}
.copy h1 em{font-style:normal;color:var(--gold-hi)}
.lead{color:#e6ebf7;font-size:clamp(15px,1.25vw,18px);max-width:60ch;margin:24px auto 0;font-weight:600;text-shadow:0 2px 12px rgba(3,10,30,.7)}
@media(min-width:900px){.lead{margin-inline:0}}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
@media(min-width:900px){.cta{justify-content:flex-start}}
.mascot{position:relative;width:min(80vw,420px);margin:0 auto;aspect-ratio:640/708}
@media(min-width:900px){.mascot{width:430px;max-width:none;aspect-ratio:auto;height:560px;justify-self:start;align-self:end;margin-right:120px}}
.mascot::before{content:"";position:absolute;left:10%;right:10%;bottom:2%;height:14%;border-radius:50%;background:radial-gradient(ellipse,rgba(3,10,30,.55),transparent 70%)}
.mascot img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 30px rgba(3,10,30,.7));user-select:none;-webkit-user-drag:none;pointer-events:none}
.legal-stage{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:11px;color:#9fb0d6;padding:0 20px;text-shadow:0 1px 6px rgba(3,10,30,.8)}
@media(max-width:899px){.legal-stage{display:none}}


/* home: two buttons, a hairline, four plain facts */
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.hb{display:inline-flex;align-items:center;gap:12px;padding:10px 22px 10px 14px;border-radius:18px;color:#F6EFE0;font-weight:800;font-size:15.5px;min-height:54px;transition:transform .14s;white-space:nowrap}
.hb:hover{transform:translateY(-2px)}
.hb i{width:32px;height:32px;display:grid;place-items:center;flex:none}
.hb i svg.badge{width:30px;height:30px}
.hb i svg.ln{width:24px;height:24px}
svg.ln{fill:none;stroke:#F49A02;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(-1px 1px 1px rgba(10,6,28,.5))}
.facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin:26px auto 0;padding-top:22px;border-top:1px solid rgba(200,215,255,.22);max-width:560px;justify-content:center}
.fact{display:flex;align-items:center;gap:9px;color:#F6EFE0;font-weight:700;font-size:15px;white-space:nowrap}
.fact i{width:22px;height:22px;display:grid;place-items:center;flex:none}
.fact i svg{width:22px;height:22px}
.fact i svg.badge{filter:drop-shadow(-1px 1px 1px rgba(10,6,28,.5))}
@media(min-width:900px){.cta{justify-content:flex-start}.facts{margin-inline:0;max-width:none;justify-content:flex-start;position:relative;z-index:2;width:auto}
 .copy{display:flex;flex-direction:column;justify-content:center;height:auto;padding-top:0}}

/* ===== panels ===== */
.panels{position:relative}
.panel{display:none;padding:0 20px 120px}
.panel.open{display:block}
@media(min-width:900px){.panel{padding:0 40px 60px}}
body.viewing .stage{display:none}
.sheet{width:min(1180px,100%);margin:92px auto 30px;padding:32px 22px 30px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));color:var(--ink);border-radius:36px;box-shadow:var(--sh-ivory);position:relative}
@media(min-width:900px){.sheet{padding:36px 48px 36px;margin:92px auto 30px}}
.close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));box-shadow:var(--sh-gold-sm)}
.close svg{width:20px;height:20px}
.sheet-head{text-align:center;max-width:62ch;margin:0 auto 22px}
.sheet-head .eyebrow{display:inline-block;font-family:'Allura',cursive;font-size:30px;line-height:1;color:#C97A00;margin-bottom:6px}
.sheet-head p{color:#cfd6ea;font-size:16px;margin-top:8px;font-weight:600}
.sheet h2{color:#F6EFE0}
/* no-JS and crawlers: panels render as plain sections */
.nojs .panel{display:block}

/* console: banner top-left, title top-right, tilted phones as the star, light list on the right */
.console-grid,.bene-grid{display:grid;gap:18px;align-items:start}
.bene-left{display:flex;flex-direction:column;align-items:center;min-height:0}
.bene-art{width:min(70vw,320px);margin:0 auto}
.bene-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.console-left{display:flex;flex-direction:column;align-items:center;min-height:0}
.console-banner{width:min(100%,300px);justify-self:center}
.console-banner img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
.sheet.fit .sheet-head{margin:0 auto 6px}
.phones{display:flex;justify-content:center;gap:22px;width:100%;padding:16px 0 10px}
.phone{height:min(340px,calc((100vw - 110px) / 2 * 19 / 9));aspect-ratio:9/19;flex:none;border-radius:30px;padding:9px;position:relative}
.phone:first-child{transform:rotate(-5deg) translateY(12px)}.phone:last-child{transform:rotate(5deg) translateY(-12px)}
.phone .screen{height:100%;border-radius:22px;background:#0a111c;overflow:hidden}
.phone .screen img{display:block;width:100%;height:100%;object-fit:contain;object-position:top center;padding:10px 7px 0;box-sizing:border-box}
.console-right{display:flex;flex-direction:column;min-height:0}
.feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;max-width:470px;align-self:center}
.feat{display:flex;align-items:center;gap:16px;padding:12px 0;position:relative}
.feat+.feat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(2,8,24,.55);box-shadow:0 1px 0 rgba(200,215,255,.12)}
.feat i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;color:#0A1228;font-style:normal}
.feat i svg{width:18px;height:18px}
.feat b{display:block;font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.25;color:#F6EFE0}
.feat span{display:block;font-size:13px;line-height:1.4;color:#9aa6c4;font-weight:500;margin-top:2px}
.close{width:36px;height:36px;border-radius:12px;top:20px;right:20px;background:rgba(200,215,255,.08);box-shadow:none;color:#cfd6ea}
.close::before{display:none}
.close svg{width:15px;height:15px;opacity:.85}
@media(min-width:1000px){
 .panel{--r1:min(140px,18vh)}
 .console-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 32px;height:100%;min-height:0;align-items:stretch}
 .console-left{display:grid;grid-template-rows:var(--r1) minmax(0,1fr);row-gap:clamp(10px,2vh,22px);height:100%;min-height:0}
 .console-right,.bene-left,.plan-left{display:grid;grid-template-rows:var(--r1) minmax(0,1fr);row-gap:var(--hgap);height:100%;min-height:0;justify-items:center;align-items:start}
 .console-right>.sheet-head,.bene-left>.sheet-head,.plan-left>.sheet-head{align-self:center}
 .panel{--hgap:clamp(14px,2.6vh,28px)}
 .console-right{container-type:inline-size}
 .console-banner{height:var(--r1);width:auto;max-width:none;display:flex;justify-content:center;align-items:center}
 .console-banner img{height:100%;width:auto}
 .sheet.fit .sheet-head{margin:0 auto;align-self:center;padding:0}
 .sheet.fit h2{font-size:min(5.2cqw,3.8vh,34px);white-space:nowrap;color:#F49A02}
 .sheet.fit .sheet-head p{font-size:min(2.55cqw,1.9vh,15px);white-space:nowrap;margin-top:14px}
 .sheet.fit .sheet-head{max-width:none}
 .phones{margin:0;padding:0;height:100%;min-height:0;align-items:center;align-self:stretch}
 .phone{height:min(100%,440px)}
 .feats{align-self:start;margin:0 auto;min-height:0}
 .feat{flex:0 1 auto;min-height:0;padding:clamp(5px,1.5vh,19px) 0;gap:16px}
 .feat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .feat b{font-size:min(clamp(14px,2.1vh,17px),3.6cqw)}
 .feat span{font-size:min(clamp(12px,1.75vh,14px),2.75cqw);line-height:1.35}
 .feat i{width:clamp(30px,4.2vh,36px);height:clamp(30px,4.2vh,36px);border-radius:11px}
 .feat i svg{width:clamp(17px,2.4vh,20px);height:clamp(17px,2.4vh,20px)}
 body[data-panel="consola"],body[data-panel="que"],body[data-panel="planes"],body[data-panel="funciona"],body[data-panel="como"]{overflow:hidden}
 body.more-open{overflow:auto!important}
 .sheet.fit{width:min(1100px,100vw - 340px);height:calc(100vh - 112px);margin:92px auto 20px;display:flex;flex-direction:column;overflow:hidden;padding:28px 40px}
 body.more-open .sheet.fit{height:auto;min-height:calc(100vh - 112px)}
 .sheet.fit>.console-grid,.sheet.fit>.bene-grid,.sheet.fit>.plan-grid{flex:1}
 .bene-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:0 32px;height:100%;min-height:0;align-items:stretch}
 .bene-left{container-type:inline-size;display:grid;grid-template-rows:var(--r1) minmax(0,1fr);row-gap:var(--hgap);height:100%;min-height:0;justify-items:center;align-items:start}
 .bene-art{width:auto;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
 .bene-art img{height:min(100%,540px);width:auto;max-width:100%}
 #que .toggle-row{margin-top:clamp(10px,2.2vh,22px)}
 #que .feats{max-width:600px}
 #que .feat span{font-size:min(clamp(12px,1.75vh,14px),2.3cqw)}
 #que .btn{border-radius:14px}
}
@media(min-width:1000px) and (max-height:680px){.sheet.fit{height:auto;overflow:visible}body[data-panel="consola"],body[data-panel="que"],body[data-panel="planes"]{overflow:auto}.console-grid{height:auto}.phone{height:400px}}

/* planes: three horizontal cards stacked, knight on the left */
.plan-grid{display:grid;gap:18px;align-items:start}
.plan-art-col{display:flex;align-items:center;justify-content:center;min-height:0}
.plan-art{width:min(80vw,340px)}
.plan-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.plan-left{display:flex;flex-direction:column;align-items:center;min-height:0;width:100%}
.plan-body{width:100%}
.pcards{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:18px;width:100%;max-width:540px;margin:0 auto}
.pcard{position:relative;padding:18px 22px 16px;border-radius:22px;color:#F6EFE0;display:grid;grid-template-columns:1fr;gap:12px}
.pcard.hot::after{content:"";position:absolute;inset:-6px;border-radius:28px;border:1.5px solid #F49A02;pointer-events:none;opacity:.9}
.pcard .ptag{position:absolute!important;top:-9px!important;left:50%!important;transform:translateX(-50%)!important;color:#F49A02;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:0 10px;white-space:nowrap;z-index:1;display:inline-flex;align-items:center;gap:5px;background:#0E1838;line-height:18px}
.pcard .ptag svg{width:13px;height:13px;color:#F49A02}
.pleft{display:flex;flex-direction:column;justify-content:center}
.pname{font-family:var(--display);font-weight:800;font-size:21px;color:#F49A02;line-height:1.1}
.pprice{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;margin-top:4px;color:#F6EFE0;white-space:nowrap}
.pprice span{display:inline;font-family:var(--sans);font-size:12px;font-weight:700;color:rgba(207,214,234,.55);margin-left:3px}
.pmeta{font-size:11.5px;font-weight:600;color:#9aa6c4;margin-top:6px;white-space:nowrap}
.psub{font-size:11.5px;font-weight:600;color:#9aa6c4;margin-top:2px;white-space:nowrap;line-height:1.25}
.plist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:4px;align-self:center}
.plist li{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#cfd6ea;line-height:1.3;white-space:nowrap}
.plist li svg{width:14px;height:14px;flex:none;margin-top:2px;color:#F49A02}
.pbtn2{display:inline-block;padding:5px 16px;border-radius:999px;font-weight:800;font-size:12px;color:#0A1228;justify-self:end;line-height:1.3}
.pbtn2::before{border-radius:999px}
.fine{list-style:none;margin:clamp(8px,1.6vh,16px) auto 0;padding:0;max-width:680px;text-align:center}
.fine li{color:rgba(154,166,196,.6);font-size:var(--fine-fs);font-weight:600}
@media(min-width:1000px){
 .plan-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 24px;height:100%;min-height:0;align-items:stretch}
 .plan-art-col{height:100%;display:grid;grid-template-rows:var(--r1) minmax(0,1fr);row-gap:0;align-items:center;justify-items:center}
 .plan-art{grid-row:2;width:100%;display:flex;align-items:flex-start;justify-content:center;align-self:center}
 .plan-art img{max-width:100%;width:auto;height:var(--artH,auto);object-fit:contain}
 .plan-left{container-type:inline-size;width:100%;display:grid;grid-template-rows:var(--r1) minmax(0,1fr);row-gap:0;height:100%;min-height:0;justify-items:center;align-items:start}
 .plan-left>.sheet-head{align-self:center}
 .plan-body{min-height:0;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;margin-top:-8px}
 .plan-body>.pcards{flex:1;min-height:0}
 .pcards{gap:clamp(12px,2.2vh,22px)}
 .pcard{grid-template-columns:186px 1fr;column-gap:14px;align-items:center;padding:clamp(8px,1.4vh,18px) 20px}
 .pcard .plist{padding-right:90px}
 .pcard .plist{padding-bottom:0;padding-right:84px}
 .pleft{border-right:0;padding-right:16px;align-self:stretch;position:relative}
 .pleft::after{content:"";position:absolute;top:2px;bottom:2px;right:0;width:2px;border-radius:2px;background:rgba(2,8,24,.55);box-shadow:1px 0 0 rgba(200,215,255,.14)}
 .plist{padding-right:0}
 .pbtn2{position:absolute!important;right:12px;bottom:9px;z-index:1}
 .pname{font-size:clamp(17px,2.6vh,21px)}
 .pprice{font-size:clamp(24px,3.6vh,30px)}
 .pmeta,.psub{font-size:min(11.5px,1.6vh)}
 .plist li{font-size:min(12.5px,1.7vh,2.2cqw);gap:6px}
 .plist{gap:clamp(2px,.9vh,8px)}
 .pbtn2{font-size:min(12.5px,1.7vh)}
 .psub{font-size:min(12.5px,1.7vh)}
 body[data-panel="planes"]{overflow:hidden}
}
.how{display:inline-flex;align-items:center;justify-content:center;padding:7px 18px;border-radius:999px;color:rgba(244,154,2,.85);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin:18px auto 0;white-space:nowrap;opacity:.9}
.how:hover{opacity:1;color:#F49A02}
.how::before{border-radius:999px}
@media(min-width:1000px){.console-right>.how{align-self:center;margin-top:clamp(14px,2.4vh,26px)}
 .console-right{grid-template-rows:var(--r1) minmax(0,1fr) auto}
 .console-right>.feats{align-self:center}}
/* como funciona: 4 steps opened from the Consola pill */
.how-wrap{display:flex;flex-direction:column;align-items:center;min-height:0}
#funciona .sheet-head{max-width:none;text-align:center}
#funciona .sheet-head .pill-static{margin:0 auto 14px;display:inline-flex;cursor:default}
#funciona .sheet h2{white-space:normal;color:#F6EFE0;font-size:clamp(28px,4.4vh,44px);line-height:1.1}
#funciona .sheet h2 em{font-style:normal;color:#F49A02}
#funciona .sheet-head p{white-space:normal;max-width:62ch;margin:10px auto 0;font-size:clamp(13px,1.9vh,16px);color:#cfd6ea;font-weight:600}
.hsteps{display:grid;grid-template-columns:1fr;gap:16px;width:100%;margin-top:clamp(14px,2.6vh,28px)}
.hstep{position:relative;padding:clamp(18px,3vh,30px) 24px clamp(18px,3vh,30px);border-radius:22px;color:#F6EFE0}
.hhead{display:flex;align-items:center;gap:14px}
.hn{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.6vh,32px);color:#F49A02;line-height:1}
.hhead i{width:clamp(36px,5.2vh,46px);height:clamp(36px,5.2vh,46px);border-radius:13px;display:grid;place-items:center;color:#0A1228}
.hhead i svg{width:52%;height:52%}
.hstep h3{font-family:var(--sans);font-weight:800;font-size:clamp(15px,2.2vh,18px);margin:clamp(12px,2.2vh,22px) 0 0;color:#F6EFE0}
.hstep p{margin:8px 0 0;font-size:clamp(13px,1.95vh,15px);line-height:1.55;color:#9aa6c4;font-weight:600}
.htag{position:absolute!important;top:-11px;right:16px;color:#0A1228;background:linear-gradient(180deg,#FFA51C,#E08A00);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px;box-shadow:-2px 3px 6px rgba(2,8,24,.5)}
@media(min-width:1000px){
 .how-wrap{height:100%;display:grid;grid-template-rows:var(--r1) minmax(0,1fr);row-gap:0;justify-items:center;align-items:start}
 .how-wrap>.sheet-head{align-self:center}
 .hsteps{grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);max-width:none;margin:0 auto;align-self:center}
 .hstep{padding:clamp(20px,3.4vh,34px) 24px}
 .hstep p{font-size:clamp(13px,2vh,15.5px)}
 body[data-panel="funciona"]{overflow:hidden}
}
.astep i b{font-family:var(--display);font-weight:800;font-style:normal;font-size:1.7em;line-height:1;color:#0A1228;filter:none}
@media(min-width:1000px){.act-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.act-art img{height:min(100%,560px);width:auto;max-width:100%}
 #como .feats{max-width:560px}
 #como .feat{padding:clamp(14px,2.8vh,26px) 0;gap:20px}
 #como .feat i{width:clamp(40px,6vh,52px);height:clamp(40px,6vh,52px);border-radius:14px;font-size:clamp(16px,2.4vh,20px)}
 #como .feat b{font-size:clamp(16px,2.5vh,20px)}
 #como .feat span{font-size:min(clamp(13px,1.9vh,15px),2.6cqw);white-space:normal;line-height:1.4;margin-top:4px}
 #como .bene-left{grid-template-rows:var(--r1) minmax(0,1fr);row-gap:0}
 #como .feats{align-self:center;margin:calc(var(--r1) * -0.5 - 7vh) auto 0;max-width:600px}
 #como .feat{padding:clamp(14px,2.8vh,26px) 0;gap:20px}
 #como .feat i{width:clamp(44px,6.4vh,54px);height:clamp(44px,6.4vh,54px);border-radius:15px;font-size:clamp(17px,2.6vh,22px)}
 #como .feat b{font-size:clamp(16px,2.6vh,20px)}
 #como .feat span{font-size:min(clamp(13px,2vh,15px),2.7cqw);margin-top:4px;white-space:normal;line-height:1.4}
 body[data-panel="como"]{overflow:hidden}}
.zoomwrap{position:relative;isolation:isolate;display:flex;align-items:center;height:58px}
.top-left{display:flex;align-items:center;gap:10px;pointer-events:auto}
.rb-zoom svg{width:22px;height:22px;fill:none;stroke:#F49A02;stroke-width:2;stroke-linecap:round;filter:drop-shadow(-1px 1px 1px rgba(10,6,28,.5))}
.zoombox{display:none;position:absolute;top:calc(100% + 10px);left:0;padding:6px 8px;border-radius:14px;align-items:center;gap:6px;z-index:70}
.zoombox.open{display:inline-flex}
.zb{appearance:none;border:0;cursor:pointer;width:34px;height:34px;border-radius:10px;font:800 20px/1 var(--display);color:#0A1228;background:linear-gradient(180deg,#FFA51C,#F49A02 40%,#E08A00);box-shadow:-1px 2px 4px rgba(0,0,0,.5),inset 1px 1px 2px rgba(255,240,190,.4)}
.zv{min-width:48px;text-align:center;font-weight:800;font-size:13px;color:#F6EFE0}
html.zoomed body{zoom:var(--zoom,1)}
.fab{background:none}
.cl-red::before{background:linear-gradient(158deg,#F3474C 0%,#E8262B 50%,#C41F24 100%);box-shadow:0 0 28px 4px rgba(255,160,120,.2),-8px 14px 24px rgba(2,8,24,.7),0 2px 6px rgba(2,8,24,.5),inset 0 2px 3px rgba(255,210,200,.35),inset -2px -4px 6px rgba(60,0,0,.45),inset 5px 0 9px -5px rgba(255,210,200,.2)}
.shield-note{margin:18px auto 0;max-width:600px;width:100%;padding-top:14px;position:relative;font-size:12px;font-weight:600;color:rgba(154,166,196,.6);text-align:center;line-height:1.45}
.shield-note::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(2,8,24,.55);box-shadow:0 1px 0 rgba(200,215,255,.12)}
@media(min-width:1000px){ #como .bene-left{grid-template-rows:var(--r1) minmax(0,1fr) auto} #como .shield-note{align-self:end;margin:0 auto 4px} #como .feats{margin-top:0;align-self:center} }
/* ayuda: knight left, questions right, opinions + contact under */
.ayuda-wrap{display:grid;gap:18px;align-items:start;min-height:0}
.ayuda-art{width:min(70vw,300px);margin:0 auto}
.ayuda-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.ayuda-main{display:flex;flex-direction:column;align-items:center;min-height:0;width:100%}
#ayuda .sheet-head{text-align:center;max-width:none}
#ayuda h2{white-space:normal}
.qgrid{display:grid;grid-template-columns:1fr;width:100%;max-width:640px;margin:0 auto}
.qgrid .feat{align-items:flex-start;gap:14px}
.qgrid .feat i{margin-top:2px}
.qgrid .feat span{white-space:normal}
.ayuda-rows{width:100%;max-width:640px;display:grid;grid-template-columns:1fr;gap:18px;padding-top:16px;position:relative;margin-top:12px}
.ayuda-rows::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(2,8,24,.55);box-shadow:0 1px 0 rgba(200,215,255,.12)}
.arow{display:flex;flex-direction:column;gap:10px}
.arow b{display:block;font-size:14.5px;color:#F6EFE0;font-weight:800}
.arow span{display:block;font-size:12.5px;color:#9aa6c4;font-weight:600;margin-top:2px}
.abtns{display:flex;gap:10px;flex-wrap:wrap}
.abtns .hb{min-height:42px;padding:6px 16px 6px 9px;font-size:13.5px;gap:8px}
.abtns .hb i{width:28px;height:28px}
.abtns .hb i svg.ln{width:19px;height:19px}
.abtns .hb i svg.fabk{width:44px;height:44px;margin:-8px}
@media(min-width:1000px){
 .ayuda-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 28px;height:100%;min-height:0;align-items:stretch}
 .ayuda-art{width:100%;max-width:400px;height:100%;display:flex;align-items:center;justify-content:center;margin:0 auto}
 .ayuda-art img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
 .ayuda-main{container-type:inline-size;height:100%;display:grid;grid-template-rows:var(--r1) minmax(0,1fr) auto;row-gap:0;justify-items:center}
 #ayuda .sheet-head{align-self:center}
 .qgrid{grid-template-columns:1fr;grid-auto-rows:1fr;align-self:stretch;min-height:0;margin-top:0;max-width:none}
 .qgrid .feat{padding:0;align-items:center}
 .qgrid .feat+.feat::before{top:0}
 .qgrid .feat b{font-size:min(15px,2vh)}
 .qgrid .feat span{font-size:min(12.5px,1.7vh);line-height:1.35}
 .ayuda-rows{grid-template-columns:1fr 1fr;gap:0 28px;margin-top:0;padding-top:clamp(10px,1.8vh,18px);align-self:end;max-width:none}
 .arow{gap:clamp(6px,1.2vh,10px)}
 .arow b{font-size:min(14.5px,1.9vh)}.arow span{font-size:min(12.5px,1.65vh)}
 .abtns .hb{min-height:clamp(36px,5.2vh,42px);font-size:min(13.5px,1.8vh)}
 body[data-panel="ayuda"]{overflow:hidden}
}
/* ayuda sub views */
.aview{display:none;width:100%;flex-direction:column;align-items:center;min-height:0;height:100%}
#ayuda .sheet.fit>.aview{flex:1}
#ayuda.v-opiniones .ayuda-wrap,#ayuda.v-dejar .ayuda-wrap,#ayuda.v-opiniones .sheet.fit>.ay3,#ayuda.v-dejar .sheet.fit>.ay3,#ayuda.v-opiniones .ay3,#ayuda.v-dejar .ay3{display:none}
#ayuda.v-opiniones #avOpiniones,#ayuda.v-dejar #avDejar{display:flex}
.aview .sheet-head{text-align:center;max-width:none;flex:none}
.aview h2{white-space:normal}
.resenas-grid{display:grid;grid-template-columns:1fr;gap:14px;width:100%;max-width:1000px;margin:clamp(10px,2vh,22px) auto 0;flex:1;min-height:0;overflow:auto;align-content:start;padding:4px}
.resena-card{padding:20px 22px;border-radius:20px;text-align:center;background:none;box-shadow:none;color:#F6EFE0}
.resena-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px;font-weight:800;font-size:15px;color:#F6EFE0}
.resena-head img{width:32px;height:32px;border-radius:9px}
.stars .star{color:rgba(200,215,255,.25);font-size:14px}.stars .star.on{color:#F49A02}
.resena-card p{color:#cfd6ea;font-size:13.5px;margin-top:8px;font-weight:600;text-align:center}
.resena-box{max-width:420px;width:100%;margin:clamp(10px,2vh,22px) auto 0;padding:18px 22px;border-radius:22px;text-align:center;background:none;box-shadow:none;color:#F6EFE0}
#avDejar{justify-content:center}
#avOpiniones .resenas-grid{align-content:center}
.resena-box p{font-weight:700;color:#cfd6ea;margin:0 0 12px}
.resena-box .whoami{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;font-weight:800;color:#F6EFE0}
.resena-box .whoami img{width:28px;height:28px;border-radius:9px}
.stars-input{font-size:30px;margin:6px 0 10px;cursor:pointer}.stars-input .star{color:rgba(200,215,255,.25)}.stars-input .star.on{color:#F49A02}
.resena-box textarea.cl-slot{width:100%;min-height:110px;border:0;border-radius:16px;padding:14px;font:inherit;font-weight:600;color:#F6EFE0;background:#060B1C!important;box-shadow:inset 2px 3px 6px rgba(0,0,0,.6),inset -1px -1px 2px rgba(200,215,255,.08)!important;margin-bottom:12px;resize:vertical}
.resena-box textarea::placeholder{color:#7f8aa8}
.rbtn{color:#0A1228;min-height:46px;padding:7px 20px;font-size:14px}
#reviewMsg{margin-top:10px;color:#F49A02;font-size:14px;min-height:20px;font-weight:700}
.aback{display:flex;gap:12px;justify-content:center;margin-top:clamp(12px,2vh,22px);flex:none}
.aback .hb{min-height:42px;padding:6px 16px 6px 10px;font-size:13.5px}
.aback .hb i svg.ln{width:18px;height:18px}
.g_id_signin{display:flex;justify-content:center}
@media(min-width:1000px){.resenas-grid{grid-template-columns:repeat(3,1fr)}}
/* what we do: a big story + a short list, not a grid of equal cards */
.story{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.story{grid-template-columns:420px 1fr;gap:48px;justify-content:center}}
.story-mascot{width:min(70vw,320px);margin:0 auto}
@media(min-width:900px){.story-mascot{width:100%;max-width:420px}}
.story-mascot img{filter:drop-shadow(0 24px 30px rgba(20,12,4,.45))}
.story-main{padding:34px 30px;border-radius:30px;background:linear-gradient(180deg,var(--navy1),var(--navy2));color:var(--on-dark);box-shadow:var(--sh-dark);text-align:center}
.story-main .big{font-family:var(--display);font-size:clamp(64px,8vw,120px);line-height:.9;color:var(--gold-hi);letter-spacing:-.04em}
.story-main h3{font-size:26px;margin-top:10px;color:var(--on-dark)}
.story-main p{color:var(--on-dark-soft);margin-top:10px;font-weight:600}
.list{display:flex;flex-direction:column;gap:12px}
.li{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:20px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:inset 4px 4px 9px rgba(120,95,50,.25),inset -3px -3px 7px rgba(255,255,255,.6)}
.li i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));box-shadow:var(--sh-gold-sm)}
.li i svg{width:20px;height:20px}
.li b{display:block;font-weight:800;font-size:15px}
.li span{display:block;color:var(--ink-soft);font-size:13px;line-height:1.35}
.more{display:none;margin-top:28px}
.more.open{display:block}
.more-grid{display:grid;grid-template-columns:1fr;gap:10px 16px}
@media(min-width:640px){.more-grid{grid-template-columns:repeat(2,1fr)}}
.more-item{padding:12px 16px;border-radius:16px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:inset 3px 3px 7px rgba(120,95,50,.22),inset -2px -2px 5px rgba(255,255,255,.6)}
.more-item b{display:block;font-size:14px;font-weight:800}
.more-item span{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.35}
.toggle-row{text-align:center;margin-top:26px}
.toggle-row .btn svg{transition:transform .2s}.toggle-row .btn.open svg{transform:rotate(180deg)}

/* steps */
.steps{display:grid;gap:18px;align-items:center}
@media(min-width:900px){.steps{grid-template-columns:300px 1fr 1fr 1fr;gap:22px}}
.steps-3{display:grid;gap:18px;align-items:stretch}
@media(min-width:900px){.steps-3{grid-template-columns:repeat(3,1fr);grid-column:2/5}}
.steps-mascot{width:min(60vw,240px);margin:0 auto}
@media(min-width:900px){.steps-mascot{width:300px}}
.steps-mascot img{width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(20,12,4,.45))}
.step{padding:26px 20px;border-radius:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;background:linear-gradient(180deg,var(--navy1),var(--navy2));color:var(--on-dark);box-shadow:var(--sh-dark)}
.step .n{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:28px;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink);box-shadow:var(--sh-gold-sm)}
.step h3{font-family:var(--sans);font-weight:800;font-size:18px;color:var(--on-dark)}
.step p{color:var(--on-dark-soft);font-size:14px;font-weight:600}
.step .btn{margin-top:auto}
.facil{margin:28px auto 0;max-width:72ch;text-align:center;padding:16px 22px;border-radius:20px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:inset 4px 4px 9px rgba(120,95,50,.25),inset -3px -3px 7px rgba(255,255,255,.6);font-size:14.5px;color:var(--ink-soft);font-weight:600}
.facil b{color:var(--ink);font-weight:800}

/* prices */
.band{display:grid;gap:20px;align-items:center;text-align:center;padding:30px 24px;border-radius:30px;background:linear-gradient(180deg,var(--navy1),var(--navy2));color:var(--on-dark);box-shadow:var(--sh-dark);margin-bottom:36px}
@media(min-width:900px){.band{grid-template-columns:200px 1fr;text-align:left;padding:32px 44px}}
.band-mascot{width:min(40vw,160px);margin:0 auto}
.band-mascot img{max-height:250px;width:auto;margin:0 auto;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
@media(min-width:900px){.band-mascot{width:170px}}
.band .big{font-family:var(--display);font-size:clamp(84px,12vw,120px);line-height:.9;color:var(--gold-hi);letter-spacing:-.04em}
.band .big small{font-size:.26em;font-weight:600;color:var(--gold);margin-left:.1em}
.band-text{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,24px);margin-top:8px}
.ruler{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:22px}
.ruler div{min-width:0;text-align:center;padding:8px 0 6px;border-radius:12px;font-size:11px;color:var(--on-dark-soft);background:linear-gradient(180deg,#1b2f66,#0d1a3d);box-shadow:inset 3px 3px 7px rgba(0,0,0,.55),inset -2px -2px 5px rgba(255,240,200,.08)}
.ruler div b{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:var(--on-dark)}
.ruler div:first-child{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));color:var(--ink-soft);box-shadow:var(--sh-gold-sm)}
.ruler div:first-child b{color:var(--ink)}
.ruler .full{display:none}.ruler .short{display:block}
@media(min-width:640px){.ruler .full{display:block}.ruler .short{display:none}}
.band-foot{margin-top:14px;color:var(--on-dark-muted);font-size:13px;font-weight:600}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px}
@media(min-width:900px){.plans{grid-template-columns:repeat(4,1fr);gap:22px}}
.plan{position:relative;padding:34px 16px 24px;border-radius:28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:var(--sh-ivory-sm)}
.plan.feat-plan{background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));box-shadow:var(--sh-gold)}
.plan .tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:6px 14px;border-radius:12px;font-size:12px;font-weight:800;background:linear-gradient(180deg,var(--navy1),var(--navy2));color:var(--gold-hi);box-shadow:var(--sh-dark);white-space:nowrap}
.plan .pname{font-weight:800;font-size:19px}
.plan .pdesc{color:var(--ink-soft);font-size:13px;min-height:36px;line-height:1.4;font-weight:600}
.plan .price{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;margin-top:6px}
.plan .price span{font-family:var(--sans);font-size:12px;color:var(--ink-soft);font-weight:700;margin-left:3px}
.plan .btn{margin-top:14px;width:100%}
.incl{margin:36px auto 0;max-width:820px;text-align:center}
.incl h3{font-family:var(--sans);font-weight:800;font-size:18px;margin-bottom:14px}
.incl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px 20px}
@media(min-width:640px){.incl ul{grid-template-columns:repeat(2,1fr)}}
.incl li{color:var(--ink-soft);font-size:15px;font-weight:600}
.incl li::before{content:"\2713";color:var(--gold-lo);margin-right:8px;font-weight:900}
.pricefoot{text-align:center;margin-top:30px}
.pricefoot .cheap{font-family:var(--display);font-weight:700;font-size:22px}
.pricefoot .disc{color:var(--muted);font-size:12.5px;max-width:70ch;margin:10px auto 18px;line-height:1.6;font-weight:600}
.extras{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:40px}
@media(min-width:900px){.extras{grid-template-columns:repeat(4,1fr);gap:22px}}
.extra{padding:22px 14px;border-radius:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:var(--sh-ivory-sm)}
.extra .pr{font-family:var(--display);font-weight:800;font-size:38px;line-height:1}
.extra .pr span{font-family:var(--sans);font-size:12px;color:var(--ink-soft);font-weight:700}
.extra .once{font-size:11px;color:var(--muted);font-weight:700;min-height:16px}
.extra h3{font-family:var(--sans);font-weight:800;font-size:16px;margin-top:4px}
.extra p{color:var(--ink-soft);font-size:13px;font-weight:600}
.sub-head{text-align:center;margin:44px 0 20px}
.sub-head h2{font-size:clamp(26px,3vw,36px)}

/* faq */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.faq details{padding:0 20px;border-radius:22px;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:var(--sh-ivory-sm)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;font-weight:800;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:32px;height:32px;padding:7px;border-radius:11px;flex:none;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));box-shadow:var(--sh-gold-sm);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .ans{color:var(--ink-soft);font-size:15px;padding:0 0 20px;line-height:1.65;font-weight:600}

/* reviews + contact */
@media(min-width:640px){.resenas-grid{grid-template-columns:repeat(2,1fr)}}
.resena-card{padding:22px;border-radius:24px;text-align:center;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:var(--sh-ivory-sm)}
.resena-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;font-weight:800;font-size:16px}
.resena-head img{width:34px;height:34px;border-radius:10px}
.stars .star{color:#bfb296;font-size:16px}.stars .star.on{color:var(--gold-lo)}
.resena-card p{color:var(--ink-soft);font-size:14px;margin-top:8px;font-weight:600}
.resena-box{max-width:560px;margin:0 auto;padding:26px;border-radius:26px;text-align:center;background:linear-gradient(180deg,var(--ivory),var(--ivory-2));box-shadow:var(--sh-ivory-sm)}
.resena-box p{font-weight:700;color:var(--ink-soft)}
.resena-box .whoami{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;font-weight:800}
.resena-box .whoami img{width:28px;height:28px;border-radius:9px}
.stars-input{font-size:30px;margin:6px 0 10px;cursor:pointer}.stars-input .star{color:#bfb296}.stars-input .star.on{color:var(--gold-lo)}
.resena-box textarea{width:100%;min-height:110px;border:0;border-radius:18px;padding:14px;font:inherit;font-weight:600;color:var(--ink);background:var(--ivory);box-shadow:inset 4px 4px 9px rgba(120,95,50,.3),inset -3px -3px 7px rgba(255,255,255,.7);resize:vertical;margin-bottom:12px}
.g_id_signin{display:flex;justify-content:center;margin-top:12px}
#reviewMsg{margin-top:10px;color:var(--gold-lo);font-size:14px;min-height:20px;font-weight:700}
.contact{margin-top:40px;padding:34px 24px;border-radius:30px;text-align:center;background:linear-gradient(180deg,var(--navy1),var(--navy2));color:var(--on-dark);box-shadow:var(--sh-dark)}
.contact h2{color:var(--on-dark)}
.contact p{color:var(--on-dark-soft);margin-top:10px;font-weight:600}
.contact .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.contact .links{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin-top:22px;font-size:14px;color:var(--on-dark-soft);font-weight:700}
.legal{margin-top:26px;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.6;font-weight:600}

/* floating console button */
.fab{position:fixed;right:16px;bottom:16px;z-index:65;display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 12px;border-radius:16px;font-weight:800;font-size:14.5px;color:#0A1228;min-height:48px}
.fab i{width:34px;height:34px;display:grid;place-items:center}
.fab svg.fabk{width:52px;height:52px;margin:-9px}
.hb i svg.fabk{width:48px;height:48px;margin:-8px}
@media(max-width:899px){.fab{bottom:88px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== THE CLAY RECIPE (SAMI Studio): every piece is painted on a layer under its content and lit by the SVG lamp
   from the upper left, then casts a tinted shadow down and to the left. Content stays crisp above it. ===== */
.cl{isolation:isolate;background:none!important;box-shadow:none!important}
.cl:not(.close):not(.fab):not(.tag){position:relative}
.cl::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none}
/* ivory pieces */
.cl-iv::before{background:linear-gradient(158deg,#FBF6EA,#E4D9BF);filter:url(#sTile) drop-shadow(-6px 10px 16px rgba(3,10,30,.45)) drop-shadow(0 1px 3px rgba(3,10,30,.25))}
.cl-ice::before{background:linear-gradient(158deg,#5FD8FF 0%,#1FA6EC 45%,#0A7FC8 100%);filter:url(#sTile) drop-shadow(-6px 10px 16px rgba(3,10,30,.5)) drop-shadow(0 1px 3px rgba(3,10,30,.25))}
.cl-steel::before{background:linear-gradient(158deg,#7F93B8 0%,#4D5F86 22%,#334264 55%,#242F4A 100%);filter:url(#sTile) drop-shadow(-6px 10px 16px rgba(3,10,30,.55)) drop-shadow(0 1px 3px rgba(3,10,30,.3));box-shadow:inset 0 3px 4px rgba(225,235,255,.45),inset 0 -5px 8px rgba(3,8,24,.7),inset 6px 0 10px -6px rgba(225,235,255,.3),inset -6px 0 10px -6px rgba(3,8,24,.6)}
.cl-steel::after{content:"";position:absolute;inset:4px;border-radius:26px;pointer-events:none;box-shadow:0 0 0 1.2px rgba(244,154,2,.8),0 0 0 2.2px rgba(120,70,0,.35)}
.phone.cl-steel{padding:12px;border-radius:30px}.phone.cl-steel .screen{border-radius:19px}
.cl-au-flat::before{background:#F49A02;filter:url(#sTile) drop-shadow(-6px 10px 16px rgba(3,10,30,.45)) drop-shadow(0 1px 3px rgba(3,10,30,.25))}
.cl-iv-big::before{background:linear-gradient(158deg,#FBF6EA,#EADFC6);filter:url(#sCard) drop-shadow(-10px 16px 30px rgba(3,10,30,.5)) drop-shadow(0 2px 6px rgba(3,10,30,.25))}
.cl-iv-ic::before{background:linear-gradient(158deg,#FBF6EA,#E4D9BF);filter:url(#sIcon) drop-shadow(-1px 2px 2px rgba(3,10,30,.35))}
.cl-iv-sm::before{background:linear-gradient(158deg,#FBF6EA,#E4D9BF);filter:url(#sHdr) drop-shadow(-3px 5px 8px rgba(3,10,30,.4))}
/* gold pieces */
.cl-au::before{background:linear-gradient(180deg,#FFA51C 0%,#F49A02 35%,#F49A02 80%,#E08A00 100%);filter:url(#sTile) drop-shadow(-6px 10px 16px rgba(3,10,30,.45)) drop-shadow(0 1px 3px rgba(3,10,30,.25))}
.cl-au-sm::before{background:linear-gradient(180deg,#FFA51C 0%,#F49A02 35%,#F49A02 80%,#E08A00 100%);filter:url(#sHdr) drop-shadow(-3px 5px 8px rgba(3,10,30,.4))}
.cl-au-ic::before{background:linear-gradient(180deg,#FFA51C 0%,#F49A02 35%,#F49A02 80%,#E08A00 100%);filter:url(#sIcon) drop-shadow(-1px 2px 2px rgba(3,10,30,.35))}
/* navy pieces: the deepest surface. Her recipe paints these with shadows, not the lamp (the lamp greys a dark clay) */
.cl-nv::before,.cl-nv-big::before,.cl-nv-sm::before,.cl-nv-ic::before{background:linear-gradient(158deg,#2B4582 0%,#1A2E63 52%,#122147 100%);box-shadow:-6px 10px 18px rgba(2,8,24,.55),0 2px 5px rgba(2,8,24,.35),inset 0 2px 3px rgba(200,215,255,.22),inset -2px -4px 6px rgba(2,8,24,.45),inset 5px 0 9px -5px rgba(200,215,255,.14)}
.cl-nv-big::before{box-shadow:-10px 18px 34px rgba(2,8,24,.6),0 2px 6px rgba(2,8,24,.35),inset 0 2px 4px rgba(200,215,255,.2),inset 0 -8px 14px rgba(2,8,24,.45),inset 7px 0 12px -7px rgba(200,215,255,.14)}
.cl-nv-sm::before,.cl-nv-ic::before{box-shadow:-2px 3px 7px rgba(2,8,24,.5),inset 0 1px 2px rgba(200,215,255,.2),inset -1px -2px 3px rgba(2,8,24,.4)}
/* the four facts on the home screen: near-black navy, cream text */
.cl-nv-dk-big::before{background:linear-gradient(158deg,#0D1733 0%,#0A1228 50%,#060B1C 100%);box-shadow:0 0 36px 6px rgba(255,205,120,.16),-10px 18px 34px rgba(2,8,24,.7),0 2px 6px rgba(2,8,24,.5),inset 0 2px 4px rgba(200,215,255,.16),inset 0 -8px 14px rgba(0,0,0,.45)}
.cl-nv-dk::before{background:linear-gradient(158deg,#111C3A 0%,#0A1228 55%,#060B1C 100%);box-shadow:0 0 28px 4px rgba(255,205,120,.18),-8px 14px 24px rgba(2,8,24,.7),0 2px 6px rgba(2,8,24,.5),inset 0 2px 3px rgba(200,215,255,.22),inset -2px -4px 6px rgba(0,0,0,.5),inset 5px 0 9px -5px rgba(200,215,255,.12)}
.clayit{filter:drop-shadow(0 2px 2px rgba(3,16,30,.5))}
/* sunken slots (the tray behind the tabs, the language switch, the text box) */
.cl-slot{isolation:isolate;background:linear-gradient(180deg,#E2D7BC,#D1C3A2)!important;box-shadow:inset 2px 3px 6px rgba(120,95,50,.35),inset -1px -1px 2px rgba(255,255,255,.7),-3px 5px 10px rgba(3,10,30,.35)!important}
/* press */
.cl:active::before{filter:none;box-shadow:inset 2px 3px 6px rgba(0,0,0,.25)}
.btn.cl:hover{transform:translateY(-1px)}

html[data-pre] .stage{display:none}html[data-pre="consola"] #consola{display:block}html[data-pre="funciona"] #funciona{display:block}html[data-pre="que"] #que{display:block}html[data-pre="planes"] #planes{display:block}html[data-pre="como"] #como{display:block}html[data-pre="ayuda"] #ayuda{display:block}

@media(min-width:1000px){
 #como .sheet.fit{height:auto;padding-bottom:calc(28px + var(--padx,36px))}
 #como .act-grid{flex:none;height:auto;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(32px,3.6vw,64px)}
 #como .bene-left{height:auto;grid-template-rows:var(--r1) auto auto;row-gap:0;justify-items:center;padding-left:clamp(16px,2.2vw,32px)}
 #como .feats{align-self:start;margin:0 auto;width:min(100%,540px);max-width:100%}
 #como .feat{flex:none;padding:clamp(16px,3vh,28px) 0;gap:clamp(18px,2.5vh,26px)}
 #como .feat>div{flex:1;min-width:0}
 #como .feat i{width:clamp(52px,7.2vh,68px);height:clamp(52px,7.2vh,68px);border-radius:clamp(15px,2vh,19px);font-size:clamp(20px,3vh,28px)}
 #como .feat b{font-size:clamp(18px,2.65vh,25px)}
 #como .feat span{font-size:clamp(14px,1.95vh,18px);line-height:1.45;margin-top:6px;max-width:none;white-space:normal;color:#b8c2dc;text-wrap:balance}
 #como .shield-note{align-self:start;margin:0 auto;width:var(--fw,100%);max-width:100%;text-wrap:balance;font-size:var(--fine-fs);white-space:nowrap}
 #como .act-art{display:block;height:100%;width:100%;position:relative}
 #como .act-art img{position:absolute;left:50%;transform:translateX(-50%);top:var(--kt,0px);height:var(--kh,500px);width:auto;max-width:none}
}

@media(min-width:1000px){#funciona .how2-main>.sheet-head{position:relative;top:-2px}}
@media(min-width:1000px){.sheet.fit .sheet-head,.sheet.fit .sheet-head h2,.sheet.fit .sheet-head p{min-width:0;max-width:100%}.sheet.fit .sheet-head h2,.sheet.fit .sheet-head p{white-space:normal!important;text-wrap:balance}}
@media(min-width:1000px){.sheet.fit h2,#funciona .how2 h2{font-size:clamp(20px,min(3.8vh,(min(100vw,1440px) - 340px) * .0285),33px)!important;color:#F49A02}.sheet.fit .sheet-head p,#funciona .how2 .sheet-head p{font-size:clamp(12px,min(1.05vw,1.9vh),15px)!important}}
@media(min-width:1000px) and (max-width:1199px){#planes .pcard{grid-template-columns:128px minmax(0,1fr);padding-left:16px;padding-right:14px}#planes .pcard .plist{padding-right:0;padding-bottom:34px}#planes .pcard .plist li{white-space:normal}}
.close.back{background:none;box-shadow:none;color:#F49A02;width:40px;height:40px}
.close.back svg{width:26px;height:26px;opacity:1}
.close.back:hover{color:#FFA51C}
@media(max-width:1199px){#como .shield-note{white-space:normal}}
:root{--fine-fs:clamp(10.5px,.8vw,12px)}
#avDejar .resena-box p{color:#F6EFE0}
#avDejar .resena-box textarea{color:#F6EFE0}
.hb i svg.gmark{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.ay3{display:flex;flex-direction:column;gap:18px}
.ay3-art img{display:block;width:min(50vw,200px);height:auto;margin:0 auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.ay3-main{display:flex;flex-direction:column;min-width:0}
.ay3-main>.sheet-head{text-align:center;max-width:none}
.ay3-list{max-width:none;width:100%}
.ay3-list .feat span{white-space:normal}
.ay3-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;position:relative;padding-top:clamp(16px,2.6vh,26px);margin-top:clamp(8px,1.4vh,14px)}
.ay3-btns::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(2,8,24,.55);box-shadow:0 1px 0 rgba(200,215,255,.12)}
@media(min-width:1000px){
 #ayuda .sheet.fit{padding-bottom:calc(28px + var(--padx,36px))}
 #ayuda .sheet.fit>.ay3{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(28px,3vw,48px)}
 #ayuda .ay3-art{position:relative;min-height:0}
 #ayuda .ay3-art img{position:absolute;left:50%;transform:translateX(-50%);top:var(--at,0px);height:var(--ah,100%);width:auto;max-width:none;margin:0}
 #ayuda .ay3-main{container-type:inline-size;display:grid;grid-template-rows:var(--r1) minmax(0,1fr) auto;min-height:0}
 #ayuda .ay3-main>.sheet-head{align-self:center}
 #ayuda .ay3-list{align-self:center;max-width:600px;margin:0 auto}
 #ayuda .ay3-list .feat{padding:clamp(4px,1.9vh,18px) 0}
 #ayuda .ay3-main{grid-template-rows:var(--r1) minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
 #ayuda .ay3-btns{flex-wrap:nowrap}
 #ayuda .ay3-list{min-width:0;width:100%}
}
@media(min-width:1000px) and (max-height:820px){
 #ayuda .ay3-list .feat{padding:clamp(3px,.9vh,8px) 0}
}
@container (max-width:500px){
 #ayuda .ay3-main .ay3-list .feat span{white-space:normal}
 #ayuda .ay3-main .ay3-btns{flex-wrap:wrap;justify-content:center}
 #ayuda .ay3-main .ay3-btns .hb{font-size:13px;padding:6px 14px 6px 9px;flex:0 0 calc(50% - 6px);justify-content:center}
}
@media(min-width:1000px){
 #ayuda .ay3-btns .hb{font-size:min(13.5px,2.2cqw);padding:6px min(16px,2cqw) 6px min(9px,1.4cqw);gap:min(8px,1.2cqw);min-height:min(42px,5.6vh)}
 #ayuda .ay3-list .feat span{white-space:nowrap}
 #ayuda .ay3-btns{width:100%;max-width:600px;margin-left:auto;margin-right:auto;justify-content:space-between;gap:10px}
}

@media(min-width:1000px){
 #que .sheet.fit{padding-bottom:calc(28px + var(--padx,36px))}
 #que .bene-left{grid-template-rows:var(--r1) minmax(0,1fr);row-gap:0;padding-left:clamp(16px,2.2vw,32px)}
 #que .feats{align-self:stretch;height:100%;margin:0 auto;max-width:600px}
 #que .feat{flex:1 1 0;padding:0;gap:clamp(14px,2vh,20px)}
 #que .bene-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(32px,3.6vw,64px)}
 #que .feat i{width:clamp(34px,4.8vh,42px);height:clamp(34px,4.8vh,42px);border-radius:12px}
 #que .feat i svg{width:clamp(18px,2.6vh,22px);height:clamp(18px,2.6vh,22px)}
 #que .feat b{font-size:clamp(15px,2.3vh,19px)}
 #que .feat span{font-size:min(clamp(13px,1.8vh,15.5px),2.75cqw);margin-top:3px}
 #que .bene-art{display:block;height:100%;width:100%;position:relative}
 #que .bene-art img{position:absolute;left:50%;transform:translateX(-50%);top:var(--kt,0px);height:var(--kh,500px);width:auto;max-width:none}
}

.how2{display:flex;flex-direction:column;gap:18px}
.how2-art img{display:block;width:min(50vw,220px);height:auto;margin:0 auto;filter:drop-shadow(0 20px 26px rgba(0,0,0,.5))}
.how2-main{display:flex;flex-direction:column;min-width:0}
.how2-main>.sheet-head{text-align:center;max-width:none}
.hphones{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hphone{border-radius:28px;padding:9px;position:relative}
.hscreen{height:100%;border-radius:20px;background:#070D20;box-shadow:inset 0 2px 8px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 16px 22px;position:relative}
.hnotch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:64px;height:6px;border-radius:6px;background:#132042;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.hrow{display:flex;align-items:center;justify-content:center;gap:12px}
.hrow h3{margin:0!important;text-align:left;white-space:nowrap;font-size:min(clamp(17px,2.6vh,23px),8.5cqw)!important}
.hscreen{container-type:inline-size}
.hrow .hic{width:min(clamp(34px,5vh,44px),15cqw);height:min(clamp(34px,5vh,44px),15cqw);stroke-width:1.7}
.hnum{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vh,32px);line-height:1;color:#F49A02}
.hic{width:clamp(30px,4.2vh,38px);height:clamp(30px,4.2vh,38px);fill:none;stroke:#F49A02;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));flex:none}
.hic.ok{stroke:#2ECC71}
.hrow .hic-tg{width:min(clamp(58px,8.4vh,74px),25cqw);height:min(clamp(58px,8.4vh,74px),25cqw);margin:-14px -12px -14px -14px;flex:none}
.hrow>i{width:clamp(38px,5.2vh,46px);height:clamp(38px,5.2vh,46px);border-radius:13px;display:grid;place-items:center;color:#0A1228;flex:none}
.hrow>i svg{width:55%;height:55%}
.hscreen h3{margin:clamp(10px,1.7vh,16px) 0 0;font-family:var(--sans);font-weight:800;font-size:clamp(15px,2.2vh,19px);line-height:1.25;color:#F6EFE0}
.hscreen p{margin:clamp(10px,1.6vh,14px) 0 0;font-size:clamp(14px,2.05vh,17px);line-height:1.45;color:#b8c2dc;font-weight:500;text-wrap:balance;max-width:36ch}
.hscreen .htag{position:absolute;top:-21px;right:26px;box-shadow:0 2px 6px rgba(0,0,0,.4);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0A1228;background:#F49A02;padding:3px 10px;border-radius:999px}
@media(min-width:1000px){
 #funciona .sheet.fit{padding-bottom:calc(28px + var(--padx,36px))}
 #funciona .sheet.fit>.how2{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(28px,3vw,48px)}
 #funciona .how2-art{position:relative;min-height:0}
 #funciona .how2-art img{position:absolute;left:50%;transform:translateX(-50%);top:var(--at,0px);height:var(--ah,100%);width:auto;max-width:none;margin:0}
 #funciona .how2-main{display:grid;grid-template-rows:var(--r1) minmax(0,1fr);grid-template-columns:minmax(0,1fr);min-height:0}
 #funciona .how2-main>.sheet-head{align-self:center}
 #funciona .hphones{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(14px,2vh,22px) clamp(16px,1.6vw,24px);height:100%;min-height:0;max-height:min(470px,100%);max-width:600px;width:100%;margin:0 auto;align-self:center}
 #funciona .how2 h2{color:#F49A02}
}

/* JB-20261020b: celular. Siete botones no entran en 390: se achican y la marca queda solo con el caballero. */
@media(max-width:899px){
  .top{padding:10px max(10px,env(safe-area-inset-right,0px)) 10px max(10px,env(safe-area-inset-left,0px))}
  .top-left,.top-right{gap:6px}
  .rb{width:42px;height:42px;border-radius:13px}
  .rb svg.rbk{width:36px;height:36px}
  .rb-lang{font-size:14px}
  .rb-zoom svg{width:18px;height:18px}
}
@media(max-width:520px){
  .brand{padding:6px}
  .brand .wm{display:none}
  .brand img{width:30px;height:30px}
}
@media(max-width:350px){.zoomwrap{display:none}}

/* JB-20261020b: escritorio angosto. Con cinco botones a la derecha, el menu del medio no puede tocarlos. */
@media(min-width:900px) and (max-width:1499px){.top-right{gap:8px}.rb{width:50px;height:50px;border-radius:14px}.rb svg.rbk{width:42px;height:42px}.rb-lang{font-size:15px}}
/* tooltip: misma pieza de arcilla oscura del menu, letra Nunito, texto oro */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;font-family:var(--sans);font-weight:800;font-size:13px;line-height:1;color:#F49A02;
  background:linear-gradient(158deg,#111C3A 0%,#0A1228 55%,#060B1C 100%);padding:9px 13px;border-radius:12px;
  box-shadow:0 0 18px 2px rgba(255,205,120,.16),-4px 8px 16px rgba(2,8,24,.7),inset 0 2px 3px rgba(200,215,255,.22),inset -2px -3px 5px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:80}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.top-right .tip:last-child::after{left:auto;right:0;transform:translate(0,-4px)}
.tip-up::after{top:auto;bottom:calc(100% + 10px)}
@media(hover:none){.tip::after{display:none}}
/* enlace a la calculadora debajo del subtitulo de Planes */
.calc-li{list-style:none;margin:0 0 6px}
.calc-li::before,.calc-li::marker{content:none!important;display:none!important}
.calc-link{display:inline-block;margin-top:2px;color:#F49A02;font-weight:800;font-size:clamp(12.5px,min(1.1vw,1.95vh),15px);text-decoration:none}
.calc-link:hover{color:#FFB340;text-decoration:none}