:root{
  --cream-50:#FDF9F2; --cream-100:#F7EFE0; --cream-200:#EFE3CE; --cream-300:#E3D2B2;
  --ink-900:#2B2018; --ink-800:#3A2C22; --ink-700:#55433A; --ink-600:#7A6559; --ink-500:#9A8578;
  --coral-50:#FFF1EC; --coral-100:#FFDFD3; --coral-200:#FFC3AE; --coral-300:#FBA588; --coral-400:#F28868; --coral-500:#E56A4C; --coral-600:#C0502F; --coral-700:#8F3A20;
  --sage-50:#F0F5EC; --sage-100:#DDE9D1; --sage-200:#BFD5A9; --sage-300:#9CBD82; --sage-400:#7BA562; --sage-500:#5C8A47; --sage-600:#456B34; --sage-700:#2F4B22;
  --butter-50:#FFF8E1; --butter-100:#FFEEB5; --butter-200:#FFE084; --butter-300:#FCCB4E; --butter-400:#EDB323; --butter-500:#CC9615; --butter-600:#9B720C;
  --terra-100:#EFD2BE; --terra-300:#CE8C66; --terra-500:#8F5230;
  --peri-50:#EFEEF9; --peri-100:#DCD9F0; --peri-200:#BDB8E2; --peri-300:#9A94D0; --peri-400:#7771BA; --peri-500:#5853A0;
  --sans:'Work Sans',ui-sans-serif,system-ui,sans-serif;
  --disp:'Quicksand','Work Sans',ui-rounded,system-ui,sans-serif;
  --sh-sm:0 1px 2px rgba(90,62,40,.06),0 2px 6px rgba(90,62,40,.05);
  --sh-md:0 1px 2px rgba(90,62,40,.06),0 4px 12px rgba(90,62,40,.08),0 8px 22px rgba(90,62,40,.05);
  --sh-lg:0 2px 4px rgba(90,62,40,.07),0 10px 24px rgba(90,62,40,.10),0 20px 44px rgba(90,62,40,.08);
  --sh-xl:0 4px 8px rgba(90,62,40,.08),0 20px 40px rgba(90,62,40,.12),0 40px 80px rgba(90,62,40,.10);
  --ease:cubic-bezier(0.22,1,0.36,1); --bounce:cubic-bezier(0.34,1.56,0.64,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream-50);}
a{color:var(--coral-600);text-decoration:none;}
a:hover{color:var(--coral-500);}
::selection{background:var(--butter-200);color:var(--ink-900);}
.lift{transition:transform .22s var(--bounce),box-shadow .22s var(--ease);}
.lift:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.press{transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .2s var(--ease);}
.press:hover{transform:translateY(-3px);}
.press:active{transform:scale(.97);}
.press:focus-visible,.klink:focus-visible{outline:3px solid var(--coral-200);outline-offset:2px;border-radius:14px;}
.tw{animation:tw 3s var(--ease) infinite;transform-origin:center;}
.tw2{animation:tw 2.4s var(--ease) infinite .8s;transform-origin:center;}
.tw3{animation:tw 3.6s var(--ease) infinite 1.4s;transform-origin:center;}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.7) rotate(0deg);}50%{opacity:1;transform:scale(1.05) rotate(12deg);}}
.bob{animation:bob 5.5s ease-in-out infinite;}
.bob2{animation:bob 4.5s ease-in-out infinite .6s;}
.bob3{animation:bob 6.5s ease-in-out infinite 1.1s;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.glow{animation:glow 3.2s ease-in-out infinite;}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0px rgba(237,179,35,0));}50%{filter:drop-shadow(0 4px 16px rgba(237,179,35,.55));}}
details>summary{list-style:none;cursor:pointer;}
details>summary::-webkit-details-marker{display:none;}
details[open] .faq-chev{transform:rotate(45deg);}
.tw-o{animation:two 3s ease-in-out infinite;}
.tw-o2{animation:two 2.4s ease-in-out infinite .7s;}
.tw-o3{animation:two 3.6s ease-in-out infinite 1.3s;}
@keyframes two{0%,100%{opacity:.28;}50%{opacity:1;}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .75s var(--bounce);}
.reveal.d1{transition-delay:.12s;}
.reveal.in{opacity:1;transform:none;}
.coinpop{transition:none;}
.in .coinpop{animation:coinpop .8s var(--bounce) .15s both;}
@keyframes coinpop{0%{transform:scale(0) rotate(-40deg);}55%{transform:scale(1.15) rotate(10deg);}100%{transform:scale(1) rotate(0);}}
.in .chippop{animation:chippop .5s var(--bounce) .4s both;}
.in .chippop2{animation:chippop .5s var(--bounce) .55s both;}
@keyframes chippop{0%{opacity:0;transform:scale(.5);}100%{opacity:1;transform:scale(1);}}
.barfill{transform-origin:left;}
.in .barfill{animation:barfill 1.1s var(--ease) .3s both;}
@keyframes barfill{0%{transform:scaleX(0);}100%{transform:scaleX(1);}}
.eq span{transform-origin:bottom;animation:eq 1.1s ease-in-out infinite;}
.eq span:nth-child(2){animation-delay:.12s;}.eq span:nth-child(3){animation-delay:.24s;}
.eq span:nth-child(4){animation-delay:.36s;}.eq span:nth-child(5){animation-delay:.48s;}
.eq span:nth-child(6){animation-delay:.6s;}.eq span:nth-child(7){animation-delay:.72s;}
.eq span:nth-child(8){animation-delay:.84s;}
@keyframes eq{0%,100%{transform:scaleY(.45);}50%{transform:scaleY(1);}}
.story-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,64px);}
.story-row .ph{flex:1 1 280px;display:flex;justify-content:center;}
.story-row .tx{flex:1 1 340px;}
@media(min-width:860px){.story-row.flip .ph{order:-1;}}
@media (max-width:560px){.wide{grid-column:span 1 !important;}}

/* Navegación: links visibles solo en desktop */
.navlinks{display:none;align-items:center;gap:26px;}
@media(min-width:880px){.navlinks{display:flex;}}

/* Selector de idioma (segmentado chico) */
.seg{border:none;background:transparent;color:var(--ink-700);font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:9999px;cursor:pointer;transition:all .2s var(--bounce);}
.seg.on{background:var(--coral-500);color:#fff;}

/* Toggle de facturación (tabs de precios) */
.tab{border:none;background:transparent;color:var(--ink-700);font-weight:600;font-size:14px;padding:9px 18px;border-radius:9999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s var(--bounce);}
.tab.on{background:var(--coral-500);color:#fff;font-weight:700;box-shadow:var(--sh-sm);}

/* Precios: lista de beneficios y ribbon de ahorro */
.pl-li{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink-800);font-weight:500;}
.pl-tick{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sage-100);border:1.5px solid var(--sage-500);}
.pl-tick-hot{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--coral-100);border:1.5px solid var(--coral-500);}
.ribbon{display:inline-flex;align-items:center;gap:6px;background:var(--sage-100);color:var(--sage-600);font-weight:700;font-size:12px;padding:4px 12px;border-radius:9999px;border:1.5px solid var(--sage-500);}
.ribbon.hide{display:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .tw,.tw2,.tw3,.bob,.bob2,.bob3,.glow,.tw-o,.tw-o2,.tw-o3,.eq span{animation:none!important;}
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .in .coinpop,.in .chippop,.in .chippop2,.in .barfill{animation:none!important;}
}