/* GENERADO por business-plan/web/landing/publicar.py — no editar aquí: se edita la landing en business-plan y se vuelve a publicar. */
/* Landing Jnum · mezcla del 24-sep (business-plan): estructura y textos de la v9 de Omar + pantallas,
   célula en tres tiempos, pilares y caos→orden de la nuestra. Tipografía de jnum.eu (var(--font-raleway) + var(--font-roboto)).
   Tema claro fijo; verde #07947A + naranja del logo #F99F4D como pareja corporativa. */
:root{
  --brand:#07947A; --brand-deep:#067A65; --brand-dark:#045747; --brand-tint:#E6F4F1; --brand-tint2:#CFEAE3;
  --ink:#1A2B28; --ink-soft:#4A5B57; --line:#E1EAE7; --head:#01383C;
  --orange:#F99F4D; --orange-deep:#E8872F; --orange-tint:#FFF1E3; --on-orange:#3A2000;
  --deep:#01383C; --deep2:#0B5446;
  --bg:#FFFFFF; --soft:#F5FAF8; --card:#FFFFFF;
  --note:#FFF6CC; --note-line:#E6C200;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font-roboto),system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{color:var(--head);font-family:var(--font-raleway),var(--font-roboto),sans-serif;line-height:1.08;margin:0;letter-spacing:-.03em}
h1{font-size:clamp(2.3rem,5vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:1.2rem;font-weight:700}
p{margin:0}
a{color:var(--brand)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
section{padding:84px 0}
.lede{font-size:1.12rem;color:var(--ink-soft);max-width:62ch}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* botones: el principal es naranja y lleva siempre a /participa */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem/1 var(--font-roboto),sans-serif;padding:16px 24px;border-radius:12px;border:2px solid transparent;cursor:pointer;text-decoration:none;min-height:52px;transition:background .2s,transform .12s,border-color .2s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--orange);color:var(--on-orange)}
.btn-primary:hover{background:var(--orange-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand)}
.breathe{position:relative}
.breathe::after{content:"";position:absolute;inset:-2px;border-radius:14px;border:2px solid var(--orange);opacity:0;animation:ring 3.4s ease-out infinite}
@keyframes ring{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.1)}}

/* barra superior + nav con progreso de lectura */
.top{position:sticky;top:0;z-index:50;background:var(--deep);color:#fff;font-size:.9rem;padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 22px}
.top a{color:var(--orange);font-weight:700}
.top .ts{display:none}
@media (max-width:600px){.top .tl{display:none}.top .ts{display:inline}.top .wrap{flex-wrap:nowrap;gap:12px}}
nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 38px);z-index:49;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:30px;width:auto}
nav .links{display:flex;gap:20px;margin-left:auto}
nav .links a{color:var(--head);text-decoration:none;font-weight:500;font-size:.95rem}
nav .links a:hover{color:var(--brand)}
.lang{display:flex;gap:2px}
.lang button{background:none;border:0;color:var(--ink-soft);font:600 .85rem var(--font-roboto),sans-serif;padding:6px 7px;cursor:pointer;border-radius:6px}
.lang button[aria-pressed=true]{color:var(--brand);background:var(--brand-tint)}
nav .btn{padding:11px 16px;min-height:42px;font-size:.92rem}
.progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--orange);width:0}
@media (max-width:980px){nav .links{display:none}.lang{margin-left:auto}}
@media (max-width:540px){nav .btn{display:none}}

/* ============ 1 · HERO claro, con altura fija ============ */
.hero{position:relative;overflow:hidden;padding:64px 0 80px;background:var(--bg)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none}
.hero::before{width:620px;height:620px;right:-140px;top:-200px;background:radial-gradient(circle,var(--brand-tint2) 0%,transparent 70%);opacity:.9}
.hero::after{width:460px;height:460px;right:200px;bottom:-240px;background:radial-gradient(circle,var(--orange-tint) 0%,transparent 70%);opacity:.95}
.hero .wrap{position:relative;z-index:1}
.hero .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
@media (max-width:980px){.hero .grid{grid-template-columns:1fr;gap:34px}}
.kicker-line{display:flex;align-items:center;gap:12px;font:700 .78rem/1.3 var(--font-roboto),sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--head);margin:0 0 22px}
.kicker-line img{height:24px;width:auto;flex:none}
.kicker-line .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
/* el aviso va en una sola línea, a todo el ancho del hero; en móvil no cabe y se parte */
@media (min-width:700px){.kicker-line{white-space:nowrap;margin-bottom:30px}}
/* la altura del titular la fija main.js con el caso más largo: el hero no salta al escribir */
.hero h1{position:relative;margin:0 0 20px;line-height:1.04}
.rot{color:var(--brand);border-right:3px solid var(--orange);padding-right:3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
.hl{background:linear-gradient(120deg,rgba(249,159,77,.48),rgba(249,159,77,.48)) no-repeat 0 84%/100% .26em;border-radius:2px}
.hero .lede{max-width:48ch;color:#3E5A56}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.cta-sub{font-size:.88rem;color:var(--ink-soft);margin:0}
.micro{font-size:.9rem;color:var(--ink-soft)}
.hero .micro{max-width:48ch}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:22px}
.trust span{display:flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;color:var(--head)}
.trust svg{width:17px;height:17px;color:var(--orange-deep);flex:none}

/* Gantt del hero (Omar) en tarjeta con borde verde → naranja */
.hg{border:1.5px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--brand) 0%,var(--brand-tint2) 45%,var(--orange) 100%) border-box;border-radius:26px;padding:22px;box-shadow:0 48px 90px -44px rgba(1,56,60,.38),0 18px 40px -24px rgba(249,159,77,.35)}
.hg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.hg-tabs button{font:600 .85rem var(--font-roboto),sans-serif;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:999px;padding:7px 12px;cursor:pointer}
.hg-tabs button[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.hg-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.hg-icon{height:34px;width:auto;flex:none}
.hg-head b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}
#hgGoal{display:block;font:700 1.05rem var(--font-raleway),sans-serif;color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-head > div{min-width:0}
.hg-tag{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--orange-deep);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
@media (max-width:480px){.hg-tag{display:none}}
.hg-scale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;margin:12px 0 6px}
.hg-scale .ticks{position:relative;height:18px;font-size:.7rem;color:var(--ink-soft)}
.hg-scale .ticks i{position:absolute;font-style:normal;transform:translateX(-50%)}
.hg-scale .ticks i:nth-child(1){left:3%}.hg-scale .ticks i:nth-child(2){left:22%}.hg-scale .ticks i:nth-child(3){left:47%}.hg-scale .ticks i:nth-child(4){left:72%}.hg-scale .ticks i:nth-child(5){left:95%}
.hg-scale em{position:absolute;top:-2px;transform:translateX(-50%);font-style:normal;font-weight:700;font-size:.68rem;color:var(--on-orange);background:var(--orange);border-radius:5px;padding:1px 6px;transition:left .6s ease;left:40%;z-index:1}
.gantt{display:grid;gap:9px}
.ev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:10px;align-items:center;font-size:.88rem;color:var(--head);opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s}
.ev.on{opacity:1;transform:none}
.ev .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .track{height:20px;border-radius:6px;position:relative;background:linear-gradient(to right,transparent calc(var(--today,40%) - 1px),var(--orange) calc(var(--today,40%) - 1px),var(--orange) calc(var(--today,40%) + 1px),transparent calc(var(--today,40%) + 1px)),var(--soft)}
.ev .bar{position:absolute;top:0;bottom:0;border-radius:6px;width:0;transition:width .5s ease;display:flex;align-items:center;padding:0 7px;font-size:.64rem;font-weight:700;white-space:nowrap;overflow:hidden}
.ev .bar.done{background:#8FCDBD;color:var(--deep)}
.ev .bar.now{background:repeating-linear-gradient(45deg,var(--brand) 0 8px,#0AA387 8px 16px);background-size:22px 22px;animation:stripes 1.2s linear infinite;color:#fff}
@keyframes stripes{to{background-position:22px 0}}
.ev .bar.todo{background:#fff;border:1.5px dashed #B9D6CE;color:var(--ink-soft)}
.ev .bar.sign{background:linear-gradient(90deg,var(--orange),var(--orange-deep));color:var(--on-orange)}
.ev .bar.sign{width:14px!important;height:14px;top:3px;bottom:auto;padding:0;border-radius:3px;transform:translateX(-50%) rotate(45deg) scale(0);transition:transform .35s ease;box-shadow:0 0 0 2px #fff}
.ev.on .bar.sign{transform:translateX(-50%) rotate(45deg) scale(1)}
.hg-unit{font-size:.7rem;color:var(--ink-soft);text-align:right;align-self:center}
@media (max-width:480px){.ev .lbl{white-space:normal;font-size:.8rem;line-height:1.15;text-overflow:clip}}
.hg-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:.76rem;color:var(--ink-soft)}
.hg-legend span{display:flex;align-items:center;gap:6px}
.hg-legend i{width:14px;height:9px;border-radius:3px;display:inline-block}
.l-done{background:#8FCDBD}.l-now{background:var(--brand)}.l-todo{border:1.5px dashed #B9D6CE}.hg-legend i.l-sign{background:var(--orange);width:9px;height:9px;border-radius:2px;transform:rotate(45deg);margin:0 2px}
.hg-foot{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:.86rem;color:var(--ink-soft);min-height:calc(2 * 1.5em + 12px)}
.hg-more{display:flex;justify-content:center;gap:8px;margin-top:10px;font-weight:700;font-size:.92rem;color:var(--head);text-decoration:none}
.hg-more span{color:var(--orange-deep);display:inline-block;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============ 2 · PROBLEMA: Laura y los seis frentes ============ */
.journey{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){.journey{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.journey{grid-template-columns:1fr}}
.journey li{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column}
.journey .jn{font:800 .95rem var(--font-raleway),sans-serif;color:var(--orange-deep);margin-bottom:8px}
.journey h3{font-size:1.15rem}
.journey p{color:var(--ink-soft);margin-top:8px;font-size:.96rem}
.journey .uses{margin-top:auto;padding-top:14px;font-size:.82rem;font-weight:500;color:var(--head)}
.journey .uses::before{content:"Acaba usando: ";color:var(--ink-soft);font-weight:400}
/* caos → orden al hacer scroll (nuestra) */
.chaos-wrap{margin-top:56px;background:var(--soft);border:1px solid var(--line);border-radius:28px;padding:34px 22px 30px}
.chaos{position:relative;height:340px;margin-top:6px}
.chaos .chip{position:absolute;left:0;top:0;background:var(--card);border:1px solid var(--line);padding:10px 15px;border-radius:12px;font-weight:600;font-size:.95rem;white-space:nowrap;box-shadow:0 8px 20px -12px rgba(0,0,0,.25);will-change:transform,opacity}
.chaos .core{position:absolute;left:50%;top:50%;width:110px;height:122px;margin:-61px 0 0 -55px;background:var(--brand);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;will-change:transform}
.chaos .core img{width:52px;height:auto;filter:brightness(0) invert(1)}
.chaos-cap{text-align:center;font:700 clamp(1.25rem,2.5vw,1.7rem) var(--font-raleway),sans-serif;color:var(--head);min-height:2.4em;transition:opacity .3s}
.chaos-cap span{color:var(--brand)}
.bridge{font:700 clamp(1.1rem,2.1vw,1.4rem)/1.35 var(--font-raleway),sans-serif;text-align:center;max-width:760px;margin:14px auto 0;color:var(--head)}

/* ============ 3 · SOLUCIÓN: la célula en tres tiempos ============ */
.celula-title{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.celula-title img{height:1.3em;width:auto;mix-blend-mode:multiply}
.tiempos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px;position:relative}
@media (max-width:860px){.tiempos{grid-template-columns:1fr;gap:44px}}
.tiempo{text-align:center;position:relative;display:flex;flex-direction:column;align-items:center}
.tiempo .num{width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--on-orange);display:grid;place-items:center;font:800 1rem var(--font-raleway),sans-serif;margin-bottom:16px}
.tiempo h3{font-size:1.25rem;margin:20px 0 6px}
.tiempo p{color:var(--ink-soft);font-size:.98rem;max-width:30ch}
.tiempo+.tiempo::before{content:"";position:absolute;left:-13px;top:120px;width:0;height:0;border:9px solid transparent;border-left:12px solid var(--brand-tint2)}
@media (max-width:860px){.tiempo+.tiempo::before{display:none}}
.celula-closer{text-align:center;font:700 clamp(1.25rem,2.3vw,1.7rem)/1.25 var(--font-raleway),sans-serif;margin:46px auto 0;max-width:34ch;color:var(--head)}
.celula-closer strong{color:var(--brand)}

/* pantallas de la app */
.phone{width:min(292px,78vw);aspect-ratio:9/19.5;background:var(--card);border:1px solid var(--line);border-radius:36px;padding:10px;box-shadow:0 0 0 6px var(--brand-tint),0 44px 80px -44px rgba(7,148,122,.5);overflow:hidden;position:relative}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:27px;display:block;background:var(--soft)}
.phone.sm{width:min(210px,64vw)}
.phone .lbl{display:none;position:absolute;inset:10px;border-radius:27px;border:2px dashed var(--brand-tint2);background:var(--soft);color:var(--ink-soft);font-size:.9rem;font-weight:600;padding:20px;text-align:center;place-items:center}
.phone.missing img{visibility:hidden}
.phone.missing .lbl{display:grid}
.phone img.zoom-top{transform:scale(1.32);transform-origin:top center}
.phone.has-q img{filter:brightness(.72) saturate(.8)}
.qcard{position:absolute;left:14px;right:14px;bottom:60px;background:var(--card);border-radius:14px;padding:12px 12px 10px;text-align:left;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);border:1px solid var(--line);font-size:.72rem;line-height:1.35;color:var(--ink)}
.qcard b{display:block;font-size:.78rem;margin-bottom:4px}
.qcard span{display:block;color:var(--ink-soft)}
.qbtns{display:flex;gap:6px;margin:9px 0 7px}
.qbtns i{flex:1;font-style:normal;font-weight:700;text-align:center;border:1.5px solid var(--line);border-radius:8px;padding:6px 4px;font-size:.7rem}
.qbtns i.on{background:var(--brand);border-color:var(--brand);color:#fff}
.qcard small{display:block;color:var(--brand);font-weight:700;font-size:.68rem}
.ask{display:flex;gap:12px;align-items:flex-start;background:var(--brand-tint);border-radius:14px;padding:12px 14px;color:var(--ink);font-size:.97rem;margin-top:20px;max-width:46ch}
.ask span{flex:none;font-weight:800;color:var(--orange-deep);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.ask.center{margin:22px auto 0}

/* ============ 4 · CÓMO FUNCIONA: los tres pilares con pantallas ============ */
.kicker{display:inline-block;font-size:.8rem;font-weight:700;color:var(--brand);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.pillar{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;padding:56px 0}
.pillar+.pillar{border-top:1px solid var(--line)}
.pillar.rev .pillar-txt{order:2}
@media (max-width:960px){.pillar{grid-template-columns:1fr;gap:30px;padding:40px 0}.pillar.rev .pillar-txt{order:0}}
.pillar-txt h3{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.pillar-txt p{color:var(--ink-soft);margin-top:14px;font-size:1.05rem;max-width:48ch}
.pillar-txt .save{margin-top:14px;font-weight:600;font-size:.95rem;color:var(--brand-dark)}
.pillar-txt .save::before{content:"Te ahorras: ";color:var(--orange-deep);font-weight:700}
.gallery{display:flex;justify-content:center;align-items:center}
.gallery .phone{width:min(230px,60vw);flex:none;position:relative;z-index:2}
.gallery .phone.sm{width:min(190px,48vw);z-index:1;opacity:.96}
.gallery .phone.sm:first-child{margin-right:-34px;transform:translateY(26px) rotate(-3deg)}
.gallery .phone.sm:last-child{margin-left:-34px;transform:translateY(26px) rotate(3deg)}
.gallery.one .phone{width:min(260px,70vw)}
@media (max-width:520px){.gallery .phone.sm{display:none}}
.pillar.ia{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:40px;margin-top:30px}
@media (max-width:960px){.pillar.ia{padding:28px 22px}}

/* ============ PÁGINA «CÓMO FUNCIONA» ============ */
.page-hero{position:relative;overflow:hidden;padding:72px 0 30px}
.page-hero::before{content:"";position:absolute;width:560px;height:560px;right:-160px;top:-240px;border-radius:50%;filter:blur(64px);background:radial-gradient(circle,var(--brand-tint2) 0%,transparent 70%);pointer-events:none}
.page-hero .wrap{position:relative}
.pillar-txt .grupo{margin-top:22px;width:100%;max-width:384px;height:auto;border-radius:14px}
nav .links a[aria-current=page]{color:var(--brand);font-weight:700}

/* ============ 5 · WORKSPACE: tres pantallas con pie ============ */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;align-items:start}
@media (max-width:860px){.trio{grid-template-columns:1fr;gap:34px}}
.trio figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.trio .phone{width:min(250px,72vw)}
.trio figcaption{text-align:center;color:var(--ink-soft);font-size:.98rem;max-width:30ch}
.trio figcaption b{display:block;color:var(--head);font:700 1.15rem var(--font-raleway),sans-serif;margin-bottom:4px}

/* ============ 6 · POR QUÉ JNUM + franja europea ============ */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media (max-width:960px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.why{grid-template-columns:1fr}}
.why > div{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
.why .wn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font:700 .85rem var(--font-raleway),sans-serif;margin-bottom:14px}
.why p{color:var(--ink-soft);margin-top:8px}
.why .ans{align-self:flex-start;margin-top:auto;padding-top:14px}
.why .ans span{display:inline-block;font-size:.84rem;font-weight:600;background:var(--brand-tint);color:var(--brand-dark);border-radius:8px;padding:5px 10px}
.eu{margin-top:34px;background:linear-gradient(150deg,var(--brand-tint),#fff);border:1px solid var(--brand-tint2);border-radius:24px;padding:30px;display:grid;grid-template-columns:1fr 1.5fr;gap:28px;align-items:center}
@media (max-width:860px){.eu{grid-template-columns:1fr}}
.eu h3{font-size:clamp(1.4rem,2.5vw,1.9rem)}
.eu p{color:var(--ink-soft);margin-top:10px;font-size:.98rem}
.eu ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
@media (max-width:520px){.eu ul{grid-template-columns:1fr}}
.eu li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--head);font-weight:500}
.eu li svg{width:20px;height:20px;flex:none;color:var(--orange-deep);margin-top:1px}

/* ============ 7 · LO QUE CUESTA HOY: burbujas de Omar ============ */
.bb{margin-top:34px}
.bb-head,.bb-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr);column-gap:56px}
.bb-head span{font:800 1.45rem var(--font-raleway),sans-serif}
.h-hoy{text-align:right;color:var(--head)}
.h-hoy em{font:400 .9rem var(--font-roboto),sans-serif;font-style:normal;color:var(--ink-soft);margin-left:6px}
.h-j{color:var(--brand)}
.bb-mid{grid-column:2;grid-row:1 / span 7}
.bb-grid::after{content:"";grid-column:1 / -1;grid-row:7;height:24vh}
@media (max-width:760px){.bb-grid::after{display:block;height:8vh}}
.bb-sticky{position:sticky;top:calc(50vh - 250px + 56px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0}
.pair{display:contents}
.ph{display:flex;align-items:center;gap:18px;min-height:52vh;opacity:.3;transition:opacity .35s}
.ph.on{opacity:1}
.ph-hoy{grid-column:1;flex-direction:row-reverse;text-align:right}
.ph-j{grid-column:3}
.ph-ic{width:68px;height:68px;border-radius:20px;background:var(--brand-tint);color:var(--deep);display:grid;place-items:center;flex:none;transition:background .35s,color .35s,transform .35s}
.ph-ic svg{width:36px;height:36px}
.ph.on .ph-ic{background:var(--deep);color:#fff;transform:scale(1.06)}
.ph-j.on .ph-ic{background:var(--brand)}
.ph-n{display:block;font:800 1.3rem/1.2 var(--font-raleway),sans-serif;color:var(--head)}
.ph-tx p{color:var(--ink-soft);font-size:.98rem;margin-top:6px;line-height:1.4}
.ph-cost{margin-top:10px!important}
.ph-cost b{font:800 1.6rem var(--font-raleway),sans-serif;color:#B3261E}
.ph-ok{display:flex;align-items:center;gap:8px;margin-top:10px!important;font-weight:700;color:var(--brand-dark)!important}
.cr-ok{width:26px;height:26px;border-radius:50%;background:var(--orange);position:relative;flex:none;display:inline-block}
.cr-ok::after{content:"";position:absolute;left:7.5px;top:8px;width:10px;height:5.5px;border-left:2.6px solid var(--deep);border-bottom:2.6px solid var(--deep);transform:rotate(-45deg)}
.bub{border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:none}
.bub-hoy{--s:170px;width:var(--s);height:var(--s);background:#FDECEA;border:3px solid #E8A29B;color:#B3261E;transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
.bub-j{width:170px;height:170px;background:linear-gradient(155deg,var(--deep),var(--deep2));color:#fff;box-shadow:0 18px 40px -18px rgba(1,56,60,.6)}
.bub-l{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.bub b{font:800 2.3rem/1.05 var(--font-raleway),sans-serif;font-variant-numeric:tabular-nums;margin:4px 0}
.bub-u{font-size:.74rem;opacity:.85}
.bb-vs{width:40px;height:40px;border-radius:50%;background:var(--head);color:#fff;display:grid;place-items:center;font:800 .9rem var(--font-raleway),sans-serif}
.bb-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:320px;min-height:26px}
.bb-extras span{font-size:.74rem;font-weight:600;color:#B3261E;background:#FDECEA;border-radius:99px;padding:4px 9px;display:none}
.bb-extras span.on{display:inline-block;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.bb-cta{text-align:center;margin-top:10px}
.uS{display:none}
.bb-cta p{font-size:.88rem;color:var(--brand-dark);margin-top:8px}
@media (max-width:980px){
  .bb-head,.bb-grid{grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);column-gap:28px}
  .ph-ic{width:54px;height:54px}.ph-ic svg{width:28px;height:28px}
  .ph-n{font-size:1.1rem}
}
@media (max-width:760px){
  .bb-head{grid-template-columns:1fr 1fr;column-gap:12px}
  .bb-head span:nth-child(2){display:none}
  .h-hoy{text-align:left}.h-hoy em{display:none}
  .bb-head span{font-size:1.1rem}
  .bb-grid{display:block}
  .bb-mid{position:sticky;top:104px;z-index:5;background:#fff;padding:8px 0 10px;border-bottom:1px solid var(--line)}
  .bb-sticky{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;padding:0}
  .bub-hoy{--s:96px}
  .bub-j{width:96px;height:96px}
  .bub b{font-size:1.3rem}.bub-l,.bub-u{font-size:.6rem}
  .bb-vs{width:28px;height:28px;font-size:.7rem}
  .bb-extras{display:none}
  .uL{display:none}.uS{display:inline}
  .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px}
  .ph-tx{min-width:0;width:100%}
  .pair .ph{grid-row:1!important}.pair .ph-hoy{grid-column:1}.pair .ph-j{grid-column:2}
  .ph{min-height:34vh;flex-direction:column!important;align-items:flex-start;text-align:left!important;gap:8px}
  .ph-ic{width:42px;height:42px;border-radius:12px}.ph-ic svg{width:22px;height:22px}
  .ph-n{font-size:.95rem}
  .ph-tx p{font-size:.8rem}
  .ph-cost b{font-size:1.15rem}
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.tocta{text-align:center;margin-top:26px}
.fine{font-size:.85rem;color:var(--ink-soft);margin-top:22px}

/* ============ 8 · PRECIOS ============ */
.toggle{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px;margin:22px auto 0;gap:4px}
.toggle button{border:0;background:none;font:600 .95rem var(--font-roboto),sans-serif;padding:10px 18px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.toggle button[aria-pressed=true]{background:var(--brand);color:#fff}
.toggle .save{font-size:.78rem;background:var(--orange-tint);color:var(--orange-deep);border-radius:999px;padding:3px 8px;margin-left:6px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;align-items:stretch}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column}
.plan.best{border:2px solid var(--brand);box-shadow:0 26px 54px -30px rgba(7,148,122,.55);position:relative}
@media (min-width:901px){.plan.best{transform:scale(1.035)}}
.plan .badge{position:absolute;top:-13px;left:24px;background:var(--orange);color:var(--on-orange);font-weight:700;font-size:.8rem;padding:5px 11px;border-radius:999px}
.plan .forwho{color:var(--ink-soft);font-size:.95rem;margin-top:4px}
.price{font:800 2.4rem/1 var(--font-raleway),sans-serif;color:var(--head);margin:16px 0 2px}
.price small{font:500 1rem var(--font-roboto),sans-serif;color:var(--ink-soft)}
.perday{display:inline-block;align-self:flex-start;background:var(--orange-tint);color:var(--orange-deep);font-weight:700;font-size:.86rem;border-radius:8px;padding:5px 10px;margin-top:10px}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;flex:1}
.plan li{padding:7px 0 7px 26px;position:relative;font-size:.95rem}
.plan li::before{content:"";position:absolute;left:0;top:12px;width:13px;height:7px;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg)}
.plan li.h{padding-left:0;font-weight:700;color:var(--ink-soft);font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
.plan li.h::before{display:none}
.plan .btn{width:100%}
.guar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:26px}
.guar span{display:flex;gap:8px;align-items:center;font-weight:600;font-size:.94rem}
.guar svg{width:19px;height:19px;color:var(--brand)}

/* ============ 9 · FAQ ============ */
.faq{max-width:820px;margin:32px auto 0}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;font-weight:600;font-size:1.05rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.55rem;color:var(--brand);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 19px;color:var(--ink-soft);max-width:70ch}

/* ============ 10 · RESERVA: lleva a /participa ============ */
.join{background:linear-gradient(150deg,var(--deep),var(--deep2));color:#fff;border-radius:26px;padding:52px 40px;display:grid;grid-template-columns:1.05fr 1fr;gap:38px;align-items:center}
@media (max-width:880px){.join{grid-template-columns:1fr;padding:36px 22px}}
.join h2{color:#fff}
.join p{color:#E3F5F0;margin-top:12px}
.join .kyc{background:rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;font-size:.9rem;margin-top:20px;color:#EAF7F4}
.join .kyc b{display:block;color:#fff;margin-bottom:4px}
.go{background:#fff;color:var(--ink);border-radius:20px;padding:26px}
.go ol{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:14px;counter-reset:g}
.go li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;font-size:.97rem;color:var(--ink-soft)}
.go li b{display:block;color:var(--head);font-size:1rem}
.go li::before{counter-increment:g;content:counter(g);width:32px;height:32px;border-radius:50%;background:var(--orange-tint);color:var(--orange-deep);display:grid;place-items:center;font:800 .95rem var(--font-raleway),sans-serif}
.go .btn{width:100%}
.go .micro{text-align:center;margin-top:10px;color:var(--ink-soft)}

footer{padding:46px 0 100px;color:var(--ink-soft);font-size:.9rem;border-top:1px solid var(--line);margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between}
footer a{color:var(--ink-soft)}
footer a:not(.logo){text-decoration:underline;text-underline-offset:3px}
footer .logo img{height:24px}
footer .tenue{opacity:.6;font-size:.82rem}

.mcta{position:fixed;left:0;right:0;bottom:0;z-index:46;background:#fff;border-top:1px solid var(--line);padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px));display:none;flex-direction:column;gap:6px;align-items:stretch;transform:translateY(110%);transition:transform .3s}
.mcta.show{transform:none}
.mcta div{font-size:.8rem;color:var(--ink-soft);line-height:1.3;text-align:center}
.mcta div b{color:var(--ink)}
.mcta .btn{min-height:46px;padding:12px 16px}
@media (max-width:760px){.mcta{display:flex}}

/* ============ MODO NOTAS (revisión de Omar y Belén) ============ */
.note{display:none;background:var(--note);border:1.5px solid var(--note-line);border-radius:14px;padding:14px 16px 14px 52px;margin:0 0 24px;font-size:.92rem;line-height:1.5;position:relative;max-width:900px;color:var(--ink);text-align:left}
.note .n{position:absolute;left:14px;top:13px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#FFE066;display:grid;place-items:center;font:800 .78rem var(--font-raleway),sans-serif}
.note strong{display:block;margin-bottom:3px}
.note em{font-style:normal;color:var(--ink-soft);display:block;margin-top:6px;font-size:.86rem}
.center .note{margin-left:auto;margin-right:auto}
body.review .note{display:block}
.rv-toggle{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;background:var(--ink);border-radius:999px;padding:5px;box-shadow:0 12px 28px rgba(0,0,0,.3)}
.rv-toggle button{font:600 .87rem var(--font-roboto),sans-serif;border:0;border-radius:999px;padding:10px 14px;cursor:pointer;background:none;color:#C9D6D2}
.rv-toggle button[aria-pressed=true]{background:#FFE066;color:#3A2E00}
@media (max-width:760px){.rv-toggle{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:12px}}
.summary{display:none;background:#fff;border:1.5px solid var(--note-line);border-radius:22px;padding:30px;margin-top:32px}
body.review .summary{display:block}
.summary h3{margin-top:24px;font-size:1.1rem}
.summary ul{margin:12px 0 0;padding-left:22px}
.summary li{margin-bottom:9px;font-size:.94rem}
.summary li b{display:block}
.prio{width:100%;margin-top:14px;border:1px solid var(--line);border-radius:14px;border-collapse:collapse}
.prio th,.prio td{font-size:.9rem;padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.prio th{color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}