:root{
  --bg:#FBF7F0; --surface:#fff; --ink:#1D1B2F; --ink2:#4A4760; --muted:#7B7891; --line:#E8E1D3; --line2:#F1ECE0;
  --brand:#E4472B; --brand-d:#C93A20; --brand-soft:#FDEDE8;
  --gold:#F2B134; --gold-soft:#FEF5DF; --gold-ink:#7A5200;
  --teal:#0E7C7B; --teal-soft:#E3F3F2;
  --sos:#D1203A; --sos-soft:#FDECEF;
  --ok:#1F8A4C; --ok-soft:#E5F5EC;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(29,27,47,.06),0 8px 24px rgba(29,27,47,.07);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 var(--font);color:var(--ink);background:var(--bg);min-height:100vh}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.5rem,3vw,2rem)} h3{font-size:1.2rem}
p{margin:0 0 1em} a{color:var(--brand-d);text-decoration:none} a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
img,svg{max-width:100%}
.muted{color:var(--muted)} .small{font-size:.875rem} .center{text-align:center} .grow{flex:1}
.container{width:min(1120px,100% - 2rem);margin-inline:auto}
.narrow{width:min(720px,100% - 2rem);margin-inline:auto}
.stack>*+*{margin-top:1rem} .row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap} .between{justify-content:space-between}
.hidden{display:none!important}
main{padding:1.5rem 0 5.5rem;min-height:70vh}

/* ---------- Navegación ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,247,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;gap:1rem;height:62px}
.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo img{width:32px;height:32px;border-radius:9px}
.nav-links{display:flex;gap:.25rem;margin-left:1rem}
.nav-links a{padding:.45rem .8rem;border-radius:999px;color:var(--ink2);font-weight:600;font-size:.95rem}
.nav-links a:hover{background:var(--line2);text-decoration:none}
.nav-links a.active{background:var(--ink);color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.icon-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink2)}
.icon-btn:hover{background:var(--line2)}
.icon-btn svg{width:22px;height:22px}
.dot-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center}
.menu{position:relative}
.menu-panel{position:absolute;right:0;top:46px;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem;z-index:50}
.menu-panel a,.menu-panel button{display:block;width:100%;text-align:left;padding:.55rem .75rem;border-radius:8px;border:0;background:none;color:var(--ink);font-weight:500}
.menu-panel a:hover,.menu-panel button:hover{background:var(--line2);text-decoration:none}
.menu-panel hr{border:0;border-top:1px solid var(--line);margin:.35rem 0}
.tabbar{display:none}

/* ---------- Botones y formularios ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.1rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-weight:650;line-height:1.1;text-decoration:none;transition:transform .08s,background .15s}
.btn:hover{text-decoration:none;background:var(--line2)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff} .btn.primary:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.dark{background:var(--ink);color:#fff} .btn.dark:hover{background:#34314f}
.btn.ghost{border-color:transparent} .btn.danger{border-color:var(--sos);color:var(--sos)} .btn.danger:hover{background:var(--sos-soft)}
.btn.sos{background:var(--sos);border-color:var(--sos);color:#fff}
.btn.sm{padding:.4rem .8rem;font-size:.875rem} .btn.lg{padding:.9rem 1.6rem;font-size:1.05rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:grid;gap:.3rem;margin-bottom:1rem} .field>label,.label{font-weight:650;font-size:.9rem}
.input,.select,.textarea{width:100%;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;font:inherit;color:var(--ink)}
.input:focus,.select:focus,.textarea:focus,.btn:focus-visible,.icon-btn:focus-visible{outline:3px solid rgba(228,71,43,.3);border-color:var(--brand)}
.textarea{min-height:110px;resize:vertical}
.hint{font-size:.82rem;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}
.check{display:flex;align-items:center;gap:.5rem;font-weight:500}
.check input{width:18px;height:18px;accent-color:var(--brand)}
.switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer}
.error-box{background:var(--sos-soft);color:#8f1228;border-radius:var(--radius-sm);padding:.7rem .9rem;font-size:.92rem;margin-bottom:1rem}
.info-box{background:var(--teal-soft);color:#0a5958;border-radius:var(--radius-sm);padding:.7rem .9rem;font-size:.92rem}
.warn-box{background:var(--gold-soft);color:var(--gold-ink);border-radius:var(--radius-sm);padding:.7rem .9rem;font-size:.92rem}

/* ---------- Tarjetas, chips, badges ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)}
.card.flat{box-shadow:none} .card.link{display:block;color:inherit;transition:transform .12s,box-shadow .12s}
.card.link:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 2px 4px rgba(29,27,47,.06),0 14px 30px rgba(29,27,47,.1)}
.card h3{margin-bottom:.25rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:999px;background:var(--line2);color:var(--ink2);font-size:.82rem;font-weight:600}
.chip.brand{background:var(--brand-soft);color:var(--brand-d)} .chip.teal{background:var(--teal-soft);color:var(--teal)}
.chip.gold{background:var(--gold-soft);color:var(--gold-ink)} .chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.sos{background:var(--sos);color:#fff;letter-spacing:.04em}
.chip.x{cursor:pointer} .chip button{border:0;background:none;color:inherit;padding:0 0 0 .2rem;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.badge-avail{display:inline-flex;align-items:center;gap:.35rem;color:var(--teal);font-weight:700;font-size:.82rem}
.badge-avail::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(14,124,123,.2)}
.avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:700;background:var(--ink);overflow:hidden;font-size:1rem}
.avatar img{width:100%;height:100%;object-fit:cover} .avatar.lg{width:88px;height:88px;font-size:2rem} .avatar.sm{width:32px;height:32px;font-size:.8rem}
.dots{display:inline-flex;gap:3px;vertical-align:middle} .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)} .dots i.on{background:var(--gold)}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)} .empty h3{color:var(--ink)}
.meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;color:var(--ink2);font-size:.9rem} .meta span{display:inline-flex;align-items:center;gap:.3rem}
.meta svg{width:16px;height:16px;color:var(--muted)}
.price{font-family:var(--serif);font-weight:700;font-size:1.3rem}

/* ---------- Tarjeta de bolo ---------- */
.job{position:relative;display:flex;flex-direction:column;gap:.55rem}
.job.is-sos{border-color:var(--sos);background:linear-gradient(180deg,var(--sos-soft),#fff 55%)}
.job .top{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.job h3{font-size:1.15rem;margin:.1rem 0 0}
.job .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--line)}
.status-line{font-size:.85rem;font-weight:650}
.status-line.ok{color:var(--ok)} .status-line.warn{color:var(--gold-ink)} .status-line.sos{color:var(--sos)}
.sos-banner{background:var(--sos);color:#fff;border-radius:var(--radius);padding:.9rem 1.1rem;display:flex;gap:.8rem;align-items:center}
.pulse{width:12px;height:12px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}

/* ---------- Hero y landing ---------- */
.hero{padding:2.5rem 0 1rem}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.hero h1 em{font-style:normal;color:var(--brand);background:linear-gradient(transparent 62%,var(--gold-soft) 62%)}
.hero .lead{font-size:1.2rem;color:var(--ink2);max-width:36ch}
.ticket{position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:var(--radius);padding:1.1rem;box-shadow:6px 6px 0 var(--ink)}
.ticket .stave{height:34px;margin:-.2rem -.2rem .6rem;background:repeating-linear-gradient(transparent 0 6px,var(--line) 6px 7px);opacity:.8;border-radius:6px}
.ticket-rows{display:grid;gap:.45rem;margin-top:.8rem}
.ticket-rows div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--line);padding-bottom:.35rem}
.ticket-rows dt{color:var(--muted);font-size:.85rem} .ticket-rows dd{margin:0;font-weight:650;text-align:right}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:s}
.step{counter-increment:s;padding:1.2rem}
.step::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:.7rem}
.band{border-radius:22px;padding:2rem;margin:2.5rem 0}
.band.sos{background:var(--ink);color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center}
.band.sos h2{color:#fff}
.band.sos .wave{display:grid;gap:.5rem}
.band.sos .wave div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:.55rem .8rem;display:flex;justify-content:space-between;font-size:.92rem}
.section-title{display:flex;justify-content:space-between;align-items:end;margin:2rem 0 1rem}
.section-title h2{margin:0}

/* ---------- Planes ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:.6rem}
.plan.current{border:2px solid var(--brand)} .plan.featured{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan.featured .muted{color:#b9b6cf} .plan.featured h3{color:#fff}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;font-size:.93rem} .plan li::before{content:"♪ ";color:var(--brand);font-weight:700}
.plan.featured li::before{color:var(--gold)}
.plan .price small{font-family:var(--font);font-weight:500;font-size:.85rem;opacity:.7}
.meter{height:8px;border-radius:5px;background:var(--line);overflow:hidden} .meter i{display:block;height:100%;background:var(--brand)}

/* ---------- Toolbar de filtros ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-bottom:1.2rem;padding:.9rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.toolbar .field{margin:0;min-width:150px;flex:1}
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}
.tabs button{border:0;background:none;padding:.65rem 1rem;font-weight:650;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--ink);border-color:var(--brand)}

/* ---------- Perfil ---------- */
.profile-head{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.inst-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px dashed var(--line)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.media-item{background:var(--line2);border-radius:var(--radius-sm);padding:.6rem;overflow:hidden}
.media-item img,.media-item video,.media-item iframe{width:100%;border-radius:8px;display:block;border:0}
.media-item iframe{aspect-ratio:16/9} .media-item audio{width:100%}
.editor-section{margin-bottom:1.2rem}
.inst-edit{display:grid;grid-template-columns:2fr 1.3fr .8fr auto;gap:.5rem;align-items:center;margin-bottom:.5rem}

/* ---------- Chat ---------- */
.chat-layout{display:grid;grid-template-columns:320px 1fr;gap:1rem;height:calc(100vh - 150px);min-height:480px}
.conv-list{overflow:auto;padding:.4rem} .conv{display:flex;gap:.7rem;padding:.7rem;border-radius:10px;color:inherit;align-items:center}
.conv:hover{background:var(--line2);text-decoration:none} .conv.on{background:var(--brand-soft)}
.conv .txt{min-width:0;flex:1} .conv .txt b,.conv .txt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread{display:flex;flex-direction:column;overflow:hidden;padding:0}
.thread-head{padding:.8rem 1rem;border-bottom:1px solid var(--line);display:flex;gap:.7rem;align-items:center}
.msgs{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.45rem;background:var(--bg)}
.bubble{max-width:75%;padding:.55rem .85rem;border-radius:16px;background:#fff;border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.me{align-self:flex-end;background:var(--ink);color:#fff;border-color:var(--ink)}
.bubble.system{align-self:center;background:var(--ok-soft);color:var(--ok);border-color:transparent;font-size:.88rem;font-weight:600;max-width:90%;text-align:center}
.bubble time{display:block;font-size:.7rem;opacity:.6;margin-top:.1rem}
.composer{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--line)}
.composer .input{flex:1}

/* ---------- Avisos / WhatsApp ---------- */
.notif{display:flex;gap:.8rem;padding:.85rem 1rem;border-bottom:1px solid var(--line2);color:inherit;align-items:flex-start}
.notif:hover{background:var(--line2);text-decoration:none} .notif.unread{background:var(--brand-soft)}
.notif .ico{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--line2);font-size:1.1rem}
.notif.urgent .ico{background:var(--sos);color:#fff}
.wa-phone{max-width:430px;margin:0 auto;background:#ECE5DD;border-radius:24px;padding:1rem;border:8px solid var(--ink)}
.wa-bubble{background:#DCF8C6;border-radius:12px 12px 12px 2px;padding:.55rem .75rem;margin-bottom:.7rem;white-space:pre-wrap;font-size:.92rem;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.wa-bubble small{display:block;text-align:right;color:#667;font-size:.7rem;margin-top:.2rem}

/* ---------- Modal y toasts ---------- */
.overlay{position:fixed;inset:0;background:rgba(29,27,47,.55);display:grid;place-items:center;padding:1rem;z-index:100;overflow:auto}
.modal{background:var(--surface);border-radius:18px;padding:1.4rem;width:min(520px,100%);max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.modal h2{font-size:1.5rem}
#toasts{position:fixed;right:1rem;bottom:5rem;display:grid;gap:.5rem;z-index:200;max-width:min(380px,calc(100vw - 2rem))}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:.75rem 1rem;box-shadow:var(--shadow);animation:rise .25s;cursor:pointer}
.toast.sos{background:var(--sos)} .toast.error{background:#8f1228} .toast b{display:block}
@keyframes rise{from{transform:translateY(10px);opacity:0}}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}
.spinner.dark{border-color:var(--line);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid;place-items:center;padding:3rem}
footer.site{border-top:1px solid var(--line);padding:2rem 0 6rem;color:var(--muted);font-size:.9rem}
footer.site .container{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid,.band.sos,.steps{grid-template-columns:1fr}
  .chat-layout{grid-template-columns:1fr;height:auto} .chat-layout.in-thread .conv-list-card{display:none}
  .chat-layout:not(.in-thread) .thread{display:none} .thread{height:calc(100vh - 170px)}
}
@media (max-width:720px){
  .nav-links{display:none}
  .grid2,.grid3{grid-template-columns:1fr} .inst-edit{grid-template-columns:1fr 1fr}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.45rem 0;color:var(--muted);font-size:.68rem;font-weight:650;position:relative}
  .tabbar a svg{width:23px;height:23px} .tabbar a.active{color:var(--brand)} .tabbar a:hover{text-decoration:none}
  .tabbar a.plus span.pl{display:grid;place-items:center;width:44px;height:44px;margin-top:-18px;border-radius:50%;background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(228,71,43,.45)}
  #toasts{bottom:4.8rem} footer.site{padding-bottom:6rem}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Iconos ---------- */
svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}
.btn svg.i{width:1.1em;height:1.1em}

p{overflow-wrap:anywhere}
.card p{white-space:pre-line}
.stack>.hidden+*{margin-top:0}
.center .row,.row.center{justify-content:center}
@media (max-width:720px){.nav-publish{display:none}.nav .container{gap:.4rem}}

/* ---------- Pagos ---------- */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.mono.strong{font-weight:700;font-size:1.05rem;letter-spacing:.04em}
.copy-row{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.55rem .8rem;background:var(--line2);border-radius:var(--radius-sm)}
.method-btn{display:grid;gap:.15rem;text-align:left;width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink)}
.method-btn:hover,.method-btn:focus-visible{border-color:var(--brand);background:var(--brand-soft);outline:none}

/* ---------- Aviso de versión de prueba ---------- */
.demo-chip{border:0;cursor:pointer;font-weight:700;letter-spacing:.03em}
.demo-list{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}

/* ---------- Tutorial dentro del aviso de prueba ---------- */
.tour-head{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.tour-count{white-space:nowrap}
.tour-dots{display:flex;gap:4px;flex:none} .tour-dots i{width:16px;height:5px;border-radius:3px;background:var(--line)} .tour-dots i.on{background:var(--brand)}
.tour-icon{font-size:2.4rem;line-height:1}
.tour-try{align-self:flex-start}
.tour-nav{margin-top:.2rem;padding-top:.9rem;border-top:1px solid var(--line2)}

/* ---------- Animaciones ---------- */
/* Solo transform y opacidad (fluido también en móviles modestos). Las de entrada usan fill «backwards» para que
   los efectos al pasar el ratón sigan funcionando al terminar. El bloque prefers-reduced-motion de más arriba
   las desactiva todas para quien prefiere menos movimiento. */
:root{--ease:cubic-bezier(.22,.8,.3,1);--spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes card-in{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes modal-in{from{opacity:0;transform:translateY(26px) scale(.95)}}
@keyframes modal-out{to{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes slide-x{from{opacity:0;transform:translateX(18px)}}
@keyframes slide-x-back{from{opacity:0;transform:translateX(-18px)}}
@keyframes ticket-in{from{opacity:0;transform:translateX(34px) rotate(2.5deg)}}
@keyframes toast-in{from{opacity:0;transform:translateY(18px) scale(.95)}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px)}}
@keyframes bubble-in{from{opacity:0;transform:translateY(8px) scale(.9)}}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.96)}}
@keyframes icon-pop{from{opacity:0;transform:scale(.4) rotate(-14deg)}}
@keyframes highlight{from{background-size:0% 100%}}
@keyframes grow-x{from{transform:scaleX(0)}}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(228,71,43,.5)}70%,100%{box-shadow:0 0 0 9px rgba(228,71,43,0)}}
@keyframes sos-glow{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 5px rgba(209,32,58,.16),var(--shadow)}}
@keyframes tab-bounce{40%{transform:translateY(-5px)}}
@keyframes flash-soft{from{background:var(--gold-soft)}}

/* Entrada de página: solo al cambiar de ruta (main.js pone .enter en #view), no al refrescar datos */
#view.enter>*{animation:fade-up .45s var(--ease) backwards}
#view.enter :is(.cards,.steps,.plans,.media-grid)>*{animation:card-in .55s var(--ease) backwards}
#view.enter :is(.cards,.steps,.plans,.media-grid)>:nth-child(2){animation-delay:.07s}
#view.enter :is(.cards,.steps,.plans,.media-grid)>:nth-child(3){animation-delay:.14s}
#view.enter :is(.cards,.steps,.plans,.media-grid)>:nth-child(4){animation-delay:.21s}
#view.enter :is(.cards,.steps,.plans,.media-grid)>:nth-child(5){animation-delay:.28s}
#view.enter :is(.cards,.steps,.plans,.media-grid)>:nth-child(6){animation-delay:.35s}
#view.enter :is(.cards,.steps,.plans,.media-grid)>:nth-child(7){animation-delay:.42s}
#view.enter :is(.cards,.steps,.plans,.media-grid)>:nth-child(n+8){animation-delay:.49s}
#view.enter .notif,#view.enter .conv{animation:slide-x .4s var(--ease) backwards}
#view.enter .notif:nth-child(2),#view.enter .conv:nth-child(2){animation-delay:.05s}
#view.enter .notif:nth-child(3),#view.enter .conv:nth-child(3){animation-delay:.1s}
#view.enter .notif:nth-child(4),#view.enter .conv:nth-child(4){animation-delay:.15s}
#view.enter .notif:nth-child(5),#view.enter .conv:nth-child(5){animation-delay:.2s}
#view.enter .notif:nth-child(n+6),#view.enter .conv:nth-child(n+6){animation-delay:.25s}

/* Portada */
#view.enter .hero-grid>:first-child>*{animation:fade-up .6s var(--ease) backwards}
#view.enter .hero-grid>:first-child>:nth-child(2){animation-delay:.08s}
#view.enter .hero-grid>:first-child>:nth-child(3){animation-delay:.16s}
#view.enter .hero-grid>:first-child>:nth-child(4){animation-delay:.24s}
#view.enter .hero-grid>:first-child>:nth-child(n+5){animation-delay:.32s}
#view.enter .ticket{animation:ticket-in .8s var(--ease) .2s backwards}
.hero h1 em{background-repeat:no-repeat;background-size:100% 100%}
#view.enter .hero h1 em{animation:highlight .8s var(--ease) .55s backwards}
.ticket{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ticket:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}

/* Interacciones */
.btn{transition:transform .18s var(--ease),background .2s,box-shadow .2s,border-color .2s,color .2s}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn.primary:hover:not([disabled]){box-shadow:0 8px 20px rgba(228,71,43,.32)}
.btn.dark:hover:not([disabled]){box-shadow:0 8px 20px rgba(29,27,47,.25)}
.btn:active:not([disabled]){transform:scale(.97)}
.card.link{transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.card.link:active{transform:scale(.99)}
.logo img{transition:transform .35s var(--spring)}
.logo:hover img{transform:rotate(-9deg) scale(1.1)}
.nav-links a{transition:background .2s,color .2s}
.icon-btn{transition:background .2s,transform .2s var(--ease)}
.icon-btn:hover{transform:scale(1.08)} .icon-btn:active{transform:scale(.94)}
.dot-badge{animation:ring 2.4s ease-out infinite}
.tabs button{transition:color .2s,border-color .2s}
.input,.select,.textarea{transition:border-color .15s,box-shadow .2s}
.method-btn{transition:border-color .2s,background .2s,transform .2s var(--ease)}
.method-btn:hover{transform:translateY(-1px)}
.menu-panel{animation:menu-in .18s var(--ease) backwards;transform-origin:top right}
.meter i{transform-origin:left;animation:grow-x .9s var(--ease) .15s backwards}
.job.is-sos{animation:sos-glow 2.4s ease-in-out infinite}
.notif.unread{animation:flash-soft 1.6s ease-out backwards}
.msgs .bubble:last-child{animation:bubble-in .32s var(--spring) backwards}
.bubble.me{transform-origin:100% 100%} .bubble:not(.me){transform-origin:0 100%}
.tabbar a.active svg{animation:tab-bounce .45s var(--ease)}
.tabbar a.plus span.pl{transition:transform .2s var(--spring)} .tabbar a.plus:active span.pl{transform:scale(.9)}

/* Ventanas, avisos y carga */
.overlay{animation:fade-in .22s ease backwards}
.modal{animation:modal-in .38s var(--spring) backwards}
.overlay.out{animation:fade-out .18s ease forwards;pointer-events:none}
.overlay.out .modal{animation:modal-out .18s ease forwards}
.toast{animation:toast-in .35s var(--spring) backwards}
.toast.leaving{animation:toast-out .2s ease forwards}
.eq{display:flex;align-items:flex-end;gap:5px;height:36px}
.eq i{display:block;width:7px;height:100%;border-radius:4px;background:var(--brand);transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){background:var(--gold);animation-delay:-.75s} .eq i:nth-child(3){background:var(--teal);animation-delay:-.5s} .eq i:nth-child(4){animation-delay:-.25s}

/* Tutorial */
.tour-step{animation:slide-x .32s var(--ease) backwards}
.tour-step.back{animation-name:slide-x-back}
.tour-icon{animation:icon-pop .55s var(--spring) .05s backwards}

/* ---------- Patrocinadores ---------- */
.sponsor{display:flex;flex-direction:column;gap:.55rem;border-style:dashed;background:linear-gradient(180deg,var(--gold-soft),#fff 62%)}
.sponsor h3{font-size:1.1rem;margin:0}
.sponsor p{margin:0;color:var(--ink2)}
.sp-head{display:flex;gap:.75rem;align-items:center}
.sp-logo{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.sp-cta{margin-top:auto;font-weight:700;color:var(--brand-d);font-size:.92rem}
.sponsor.house{background:var(--surface)}
.sp-section{margin:2.5rem 0 .5rem}

/* ---------- Planes: comparativa y preguntas frecuentes ---------- */
.cmp-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.cmp{width:100%;border-collapse:collapse;font-size:.93rem}
.cmp th,.cmp td{padding:.7rem .8rem;text-align:center;border-bottom:1px solid var(--line2)}
.cmp thead th{font-family:var(--serif);font-size:1.02rem;background:var(--line2)}
.cmp tbody th{text-align:left;font-weight:600;color:var(--ink2)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp-yes{color:var(--ok);font-weight:800}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem}
.faq details+details{margin-top:.6rem}
.faq summary{font-weight:650;cursor:pointer}
.faq details p{margin:.6rem 0 0;color:var(--ink2)}
@media (max-width:720px){.cmp{font-size:.82rem}.cmp th,.cmp td{padding:.55rem .4rem}}