/* Mushi · sitio público. Un solo archivo, sin dependencias. */
@font-face{font-family:"Manrope";src:url("/fonts/manrope.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --forest:#00383E; --forest-2:#0A4A45; --action:#0B7F66; --action-hi:#096b57; --green:#0F9D7A; --mint:#6FF3B7; --sprout:#D8F5E8;
  --ink:#0B2E33; --red:#C62F3A; --red-soft:#FDE8EA; --amber-soft:#FFF1D1; --amber:#7A4B00;
  --bg:#F2F8F5; --surface:#FFFFFF; --surface-2:#E9F3EF; --text:#0B2E33; --muted:#46676A; --line:#D5E7E0;
  --r:22px; --r-sm:14px;
  --gutter:clamp(20px,4.2vw,88px);
  --wrap:118rem;
  --shadow:0 1px 2px rgba(0,56,62,.06),0 8px 28px rgba(0,56,62,.08);
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:clamp(16px,.22vw + 12px,18px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{margin:0;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:500;line-height:1.6;color:var(--text);background:var(--bg);font-variant-numeric:tabular-nums;overflow-x:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px;border-radius:8px}
.on-light :focus-visible,.light-focus :focus-visible{outline-color:var(--action)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--mint);color:var(--forest);padding:.6rem 1rem;border-radius:10px;font-weight:800;z-index:100}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}

/* ---------- tipografía ---------- */
.display{font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.4rem,4.4vw + .5rem,4.6rem)}
.section .h2{color:var(--forest)}
.section.dark .h2,.cta-band .h2{color:inherit}
.h2{font-weight:800;letter-spacing:-.028em;line-height:1.08;font-size:clamp(1.9rem,2.2vw + 1rem,3rem)}
.h3{font-weight:800;letter-spacing:-.015em;line-height:1.2;font-size:clamp(1.15rem,.5vw + 1rem,1.5rem)}
.lead{font-size:clamp(1.05rem,.5vw + .95rem,1.4rem);line-height:1.55;color:var(--muted);max-width:44ch}
.dark .lead,.hero .lead,.cta-band .lead,.page-head .lead{color:#BFE9DC}
.prose{max-width:68ch}
.prose p,.prose ul,.prose ol{margin-top:1rem}
.prose h2{margin-top:2.6rem;font-size:clamp(1.4rem,1vw + 1.1rem,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.prose h3{margin-top:1.8rem;font-size:1.15rem;font-weight:800}
.prose ul{list-style:disc;padding-left:1.3rem}.prose ol{list-style:decimal;padding-left:1.3rem}.prose li+li{margin-top:.45rem}
.prose a{color:var(--action);font-weight:700}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.7rem 1.5rem;border-radius:999px;border:2px solid transparent;font:inherit;font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;background:var(--action);color:#fff;transition:background .15s,transform .15s}
.btn:hover{background:var(--action-hi)}
.btn:active{transform:translateY(1px)}
.btn.mint{background:var(--mint);color:var(--forest)}.btn.mint:hover{background:#8bf7c9}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:rgba(127,127,127,.12)}
.btn[aria-disabled="true"]{background:rgba(255,255,255,.14);color:#CFEFE6;cursor:not-allowed;border-color:rgba(255,255,255,.28)}
.btn.on-paper[aria-disabled="true"]{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.btn svg{width:1.3rem;height:1.3rem;flex:none}
.soon{font-weight:700;font-size:.8rem;background:var(--mint);color:var(--forest);padding:.12rem .55rem;border-radius:999px}

/* ---------- encabezado ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--forest) 96%,transparent);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.site-header .bar{display:flex;align-items:center;gap:1.2rem;min-height:4.4rem}
.logo{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.3rem;letter-spacing:-.02em;text-decoration:none;color:#fff;margin-right:auto}
.logo svg{width:2.4rem;height:2.4rem}
.nav{display:flex;align-items:center;gap:.3rem}
.nav a{min-height:2.75rem;display:inline-flex;align-items:center;padding:0 .95rem;border-radius:999px;color:#D2F0E6;text-decoration:none;font-weight:700;font-size:.97rem}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a[aria-current="page"]{background:rgba(111,243,183,.16);color:#fff}
.menu-btn{display:none;min-width:2.9rem;min-height:2.9rem;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;place-items:center}
.menu-btn svg{width:1.5rem;height:1.5rem}
@media (max-width:860px){
  .menu-btn{display:grid}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--forest);flex-direction:column;align-items:stretch;padding:.6rem var(--gutter) 1.2rem;border-bottom:1px solid rgba(255,255,255,.12);display:none}
  .nav.open{display:flex}
  .nav a{min-height:3rem;font-size:1.05rem}
  .site-header .cta-top{display:none}
}

/* ---------- héroe ---------- */
.hero{background:var(--forest);color:#fff;position:relative;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,5vw,6rem);align-items:center;padding-block:clamp(2rem,4vw,4rem)}
.hero h1{max-width:13ch}
.hero .lead{margin-top:1.4rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.hero .fine{margin-top:1.1rem;font-size:.92rem;color:#9ED8C6}
.hero .tape{position:absolute;inset:auto 0 -1px 0;height:clamp(1.8rem,4vw,3.75rem);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V28C240-6 480-6 720 22s480 30 720-8V60z' fill='%23F2F8F5'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;pointer-events:none}
.hero .grid{padding-bottom:clamp(3.5rem,7vw,6rem)}
/* en pantallas anchas el héroe y el teléfono se ajustan a la altura visible para que se vea todo sin desplazarse */
@media (min-width:901px){
  .hero .grid{min-height:calc(100svh - 4.4rem);padding-block:clamp(1.2rem,3.5svh,3rem)}
  .hero .display{font-size:clamp(2.4rem,min(4.4vw + .5rem,10.5svh),4.6rem)}
  .hero .lead{margin-top:clamp(.8rem,2svh,1.4rem)}
  .hero .actions{margin-top:clamp(1rem,3svh,2rem)}
}
@media (max-width:900px){.hero .grid{grid-template-columns:minmax(0,1fr)}.hero h1{max-width:16ch}}

/* teléfono de la demostración */
.demo{display:flex;justify-content:center}
.phone{width:min(100%,25rem);aspect-ratio:9/17.2;background:#031d21;border:.55rem solid #0e2f33;border-radius:2.6rem;box-shadow:0 2rem 4rem rgba(0,0,0,.35);overflow:hidden;position:relative}
@media (min-width:901px){.phone{width:min(100%,25rem,max(15rem,calc((100svh - 4.4rem - 3rem)*.52)))}}
.screen{position:absolute;inset:0;background:var(--bg);color:var(--ink);padding:1.1rem 1.1rem 1.4rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.screen .top{display:flex;justify-content:space-between;width:100%;font-size:.8rem;font-weight:700;color:var(--ink)}
.screen .top b{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.15rem .7rem;color:var(--ink)}
.stage{width:62%;aspect-ratio:1;border-radius:50%;background:var(--sprout);display:grid;place-items:center;margin-top:.4rem;position:relative}
.stage::after{content:"";position:absolute;inset:-.7rem;border-radius:50%;border:2px solid var(--action);opacity:0;transform:scale(.9)}
.listening .stage::after{animation:ring 1.4s ease-out infinite}
.stage .mushi{width:90%}
.state{font-weight:800;font-size:1.25rem;letter-spacing:-.01em;color:var(--forest)}
.heard{min-height:2.6rem;font-size:.84rem;color:var(--muted);text-align:center;padding:0 .4rem}
.result{width:100%;background:#fff;color:var(--ink);border-radius:1.1rem;padding:.8rem .9rem;display:flex;align-items:center;gap:.7rem;opacity:0;transform:translateY(.8rem);transition:opacity .35s,transform .35s;min-height:4.4rem;box-shadow:var(--shadow)}
.result.show{opacity:1;transform:none}
.result .dot{width:2.3rem;height:2.3rem;border-radius:50%;background:#FDE8EA;color:var(--red);display:grid;place-items:center;font-weight:800;flex:none}
.result .dot.in{background:var(--sprout);color:var(--action)}
.result .what{flex:1;min-width:0;line-height:1.25}.result .what b{display:block;font-size:.95rem}.result .what span{font-size:.78rem;color:#4A6A6B}
.result .amt{font-weight:800;font-size:1rem}.result .amt.out{color:var(--red)}.result .amt.in{color:var(--action)}
.undo{margin-top:.1rem;font-size:.78rem;color:var(--muted);min-height:1.2rem}
.mic{margin-top:auto;width:4.4rem;height:4.4rem;border-radius:50%;background:var(--action);display:grid;place-items:center;box-shadow:0 0 0 .5rem rgba(11,127,102,.28);transition:background .2s}
.listening .mic{background:var(--red);box-shadow:0 0 0 .5rem rgba(198,47,58,.3)}
.mic svg{width:2rem;height:2rem;color:#fff}
.wave{display:flex;gap:.22rem;align-items:center;height:1.5rem;opacity:0;transition:opacity .2s}
.listening .wave{opacity:1}
.wave i{width:.28rem;border-radius:.2rem;background:var(--green);height:30%;animation:wave 1s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:-.3s}.wave i:nth-child(3n){animation-delay:-.6s}.wave i:nth-child(5n){animation-delay:-.15s}
@keyframes wave{50%{height:100%}}
@keyframes ring{0%{opacity:.8;transform:scale(.92)}100%{opacity:0;transform:scale(1.12)}}

/* ---------- Mushi (SVG) ---------- */
.mushi{overflow:visible}
.mushi .m-body{animation:float 5.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.mushi .eye{transform-box:fill-box;transform-origin:center;animation:blink 5.2s infinite}
.mushi .eye-open{opacity:0;transition:opacity .2s}
.mushi.is-listening .eye-open{opacity:1}.mushi.is-listening .eye-arc{opacity:0}
.mushi.is-thinking .m-eyes{transform:translate(5px,-7px)}
.mushi .m-eyes{transition:transform .3s}
.mushi .mouth-talk,.mushi .mouth-flat{opacity:0}
.mushi.is-thinking .mouth-smile{opacity:0}.mushi.is-thinking .mouth-flat{opacity:1}
.mushi.is-talking .mouth-smile{opacity:0}
.mushi.is-talking .mouth-talk{opacity:1;transform-box:fill-box;transform-origin:center;animation:talk .55s ease-in-out infinite}
.mushi .leaves{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-3.5%) rotate(.9deg)}}
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2deg)}}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}97%{transform:scaleY(1)}}
@keyframes talk{0%{transform:scaleY(.25)}18%{transform:scaleY(1.25)}36%{transform:scaleY(.5)}55%{transform:scaleY(1)}75%{transform:scaleY(.3)}100%{transform:scaleY(.9)}}

/* ---------- secciones ---------- */
.section{padding-block:clamp(3rem,6vw,6rem)}
.section.alt{background:var(--surface-2)}
.section.dark{background:var(--forest);color:#fff}
.sec-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head .lead{max-width:56ch}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,6rem);align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

/* pasos: sí son una secuencia */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2.5rem);counter-reset:s}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--sprout);font-weight:800;font-size:1.3rem;color:var(--action);line-height:1}
.step .h3{margin-top:1rem;color:var(--forest)}.step p{margin-top:.5rem;color:var(--muted);max-width:34ch}
.step .ex{margin-top:1.1rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:.9rem 1rem;font-weight:700;font-size:.95rem}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr);gap:2.6rem}}

/* funciones: composición libre, cada una con su propia ilustración */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.6rem)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,2vw,2rem);display:flex;flex-direction:column;gap:.8rem;min-width:0;overflow:hidden}
.tile p{color:var(--muted);max-width:46ch}
.tile.forest{background:var(--forest);color:#fff;border-color:transparent}.tile.forest p{color:#BFE9DC}
.tile.sprout{background:var(--sprout);border-color:transparent}
.tile.sprout .chat-l{background:#fff}
.t-7{grid-column:span 7}.t-5{grid-column:span 5}.t-4{grid-column:span 4}.t-6{grid-column:span 6}.t-8{grid-column:span 8}.t-12{grid-column:span 12}
@media (max-width:1000px){.t-7,.t-5,.t-4,.t-6,.t-8{grid-column:span 12}}
@media (min-width:1001px) and (max-width:1300px){.t-4{grid-column:span 6}}
.viz{margin-top:auto;padding-top:.8rem}
.chat-l,.chat-r{max-width:88%;padding:.7rem 1rem;border-radius:1.1rem;font-weight:700;font-size:.95rem}
.chat-l{background:var(--surface-2);border-top-left-radius:.3rem;align-self:flex-start;color:var(--text)}
.chat-r{background:var(--forest);color:#fff;border-top-right-radius:.3rem;align-self:flex-end}
.tile.forest .chat-l{background:rgba(255,255,255,.12);color:#fff}.tile.forest .chat-r{background:var(--mint);color:var(--forest)}
.chat{display:flex;flex-direction:column;gap:.55rem}
.mini-card{display:flex;align-items:center;gap:.7rem;background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:.6rem .8rem;border:1px solid var(--line)}
.mini-card .dot{width:2rem;height:2rem;border-radius:50%;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none}
.mini-card .dot.in{background:var(--sprout);color:var(--action)}
.mini-card b{display:block;font-size:.9rem;line-height:1.2}.mini-card small{color:#4A6A6B;font-size:.76rem}
.mini-card .amt{margin-left:auto;font-weight:800;font-size:.95rem}.amt.out{color:var(--red)}.amt.in{color:var(--action)}
.mini-list{display:flex;flex-direction:column;gap:.5rem}
.chart{display:flex;align-items:flex-end;gap:.7rem;height:9rem}
.chart .m{flex:1;display:flex;align-items:flex-end;gap:.18rem;height:100%;position:relative}
.chart .m i{flex:1;border-radius:.4rem .4rem .15rem .15rem;display:block}
.chart .m .a{background:var(--green)}.chart .m .b{background:var(--red)}
.chart .m span{position:absolute;bottom:-1.5rem;left:0;right:0;text-align:center;font-size:.72rem;font-weight:700;color:var(--muted)}
.legend{display:flex;gap:1rem;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:.6rem}
.legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:.2rem;margin-right:.35rem}
.widget-mock{display:flex;gap:.9rem;align-items:center;background:#F7FAF8;color:var(--ink);border-radius:1.6rem;padding:.9rem;width:min(100%,17rem);box-shadow:var(--shadow)}
.widget-mock .mushi{width:3.4rem;flex:none}
.widget-mock b{display:block;line-height:1.15}.widget-mock span{font-size:.8rem;color:#4A6A6B}
.bubble-mock{width:4.6rem;height:4.6rem;border-radius:50%;background:#fff;border:3px solid var(--mint);display:grid;place-items:center;box-shadow:var(--shadow)}
.bubble-mock .mushi{width:3.7rem}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface-2);border-radius:var(--r-sm);padding:.7rem 1rem;font-weight:700}
.seg{display:flex;background:var(--surface-2);border-radius:999px;padding:.25rem;width:fit-content}
.seg span{padding:.4rem 1rem;border-radius:999px;font-weight:800;font-size:.9rem;color:var(--muted)}.seg .on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* confianza */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,2rem)}
.trust li{border-top:3px solid var(--action);padding-top:1rem}.trust b{display:block;font-size:1.15rem;font-weight:800;line-height:1.25;color:var(--forest)}.trust span{display:block;margin-top:.5rem;color:var(--muted);font-size:.97rem}
@media (max-width:1000px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trust{grid-template-columns:minmax(0,1fr)}}

/* planes */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(.9rem,1.6vw,1.6rem);align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.3rem,2vw,2rem);display:flex;flex-direction:column;gap:.7rem;position:relative}
.plan.featured{background:var(--forest);color:#fff;border-color:transparent}
.plan .name{font-weight:800;font-size:1.2rem}
.plan .credits{font-size:clamp(2.2rem,2.4vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1}.plan .credits small{font-size:.4em;font-weight:700;margin-left:.35rem;color:var(--muted)}
.plan.featured .credits small,.plan.featured p{color:#BFE9DC}
.plan p{color:var(--muted)}
.plan .price{margin-top:auto;font-weight:800;font-size:1.25rem}
.plan .price em{font-style:normal;display:inline-block;background:var(--amber-soft);color:var(--amber);font-size:.8rem;padding:.2rem .7rem;border-radius:999px;font-weight:800}
.plan .badge{position:absolute;top:1rem;right:1rem;background:var(--mint);color:var(--forest);font-weight:800;font-size:.78rem;border-radius:999px;padding:.2rem .7rem}
.notice{display:flex;gap:.8rem;background:var(--amber-soft);color:var(--amber);border-radius:var(--r-sm);padding:.9rem 1.1rem;font-weight:700;margin-bottom:1.6rem;max-width:68ch}
.costs{width:100%;border-collapse:collapse}
.costs th,.costs td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:1rem}
.costs th{font-size:.85rem;color:var(--muted);font-weight:700}
.costs td:last-child,.costs th:last-child{text-align:right;font-weight:800}
.table-box{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.4rem .6rem}
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.2rem,2.2vw,2.2rem);display:grid;gap:1.1rem}
.calc label{display:grid;gap:.35rem;font-weight:700}
.calc .row{display:flex;justify-content:space-between;gap:1rem}
.calc input[type=range]{width:100%;accent-color:var(--action);min-height:2rem}
.calc output{font-weight:800;color:var(--action)}
.calc .out{background:var(--forest);color:#fff;border-radius:var(--r-sm);padding:1.1rem 1.2rem}
.calc .out b{font-size:clamp(2rem,3vw,3rem);letter-spacing:-.03em;font-weight:800;line-height:1}
.calc .out p{color:#BFE9DC;margin-top:.5rem}

/* FAQ */
.faq{max-width:60rem}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:3.6rem;padding:.6rem 0;font-weight:800;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;font-weight:500;color:var(--action);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.2rem;color:var(--muted);max-width:62ch}

/* cierre y pie */
.cta-band{background:var(--forest);color:#fff;border-radius:calc(var(--r)*1.4);padding:clamp(1.8rem,4vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;overflow:hidden}
.cta-band .mushi{width:clamp(7rem,14vw,14rem)}
@media (max-width:700px){.cta-band{grid-template-columns:minmax(0,1fr)}.cta-band .mushi{order:-1;width:7rem}}
.site-footer{background:var(--forest);color:#CFEFE6;padding-block:clamp(2.5rem,5vw,4.5rem) 2rem;margin-top:0}
.site-footer .cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:2rem}
.site-footer h2{font-size:.95rem;font-weight:800;color:#fff;margin-bottom:.7rem}
.site-footer a{display:inline-flex;align-items:center;min-height:2.4rem;color:#CFEFE6;text-decoration:none}.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer li{line-height:1}
.site-footer .legal{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem;color:#9ED8C6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
@media (max-width:860px){.site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer .cols>:first-child{grid-column:1/-1}}

/* páginas internas */
.page-head{background:var(--forest);color:#fff;padding-block:clamp(2.2rem,5vw,5rem);position:relative}
.page-head h1{max-width:18ch}
.page-head .lead{margin-top:1rem;color:#BFE9DC}
.draft{display:inline-flex;gap:.5rem;align-items:center;background:var(--amber-soft);color:var(--amber);font-weight:800;font-size:.9rem;border-radius:999px;padding:.3rem .9rem;margin-top:1.2rem}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(.9rem,1.6vw,1.6rem)}
.contact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.contact a.big{font-weight:800;font-size:1.15rem;color:var(--action);word-break:break-word}
.contact p{color:var(--muted)}
[hidden]{display:none!important}
.err{min-height:70vh;display:grid;place-items:center;text-align:center;padding:3rem var(--gutter);gap:1.2rem;justify-items:center}
.err .mushi{width:min(60vw,15rem)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .mushi .eye-open{opacity:0}
}

/* ---------- catálogo, carrito y pedido ---------- */
.cart-btn{position:relative;min-width:2.9rem;min-height:2.9rem;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.cart-btn:hover{background:rgba(255,255,255,.1)}
.cart-btn svg{width:1.5rem;height:1.5rem}
.cart-btn .count{position:absolute;top:-.35rem;right:-.35rem;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:999px;background:var(--mint);color:var(--forest);font-size:.78rem;font-weight:800;display:grid;place-items:center}
html.no-scroll{overflow:hidden}
.plan.skeleton{min-height:12rem;gap:.9rem}
.sk{display:block;height:1.1rem;border-radius:.5rem;background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.sk.l1{width:55%}.sk.l2{width:35%;height:2.4rem}.sk.l3{width:80%}
@keyframes shimmer{to{background-position:-200% 0}}
.plan .price small{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-top:.15rem}
.plan.featured .price small{color:#BFE9DC}
.plan-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.5rem}
.in-cart{font-weight:800;font-size:.9rem;color:var(--action)}
.plan.featured .in-cart{color:var(--mint)}
.plan.empty{grid-column:1/-1}
.btn.on-paper.ghost,.btn.ghost.on-paper{color:var(--text)}
.cart{border:0;padding:0;background:var(--surface);color:var(--text);width:min(100%,32rem);max-width:100%;height:100dvh;max-height:100dvh;margin:0 0 0 auto;border-radius:1.4rem 0 0 1.4rem;box-shadow:-1rem 0 3rem rgba(0,0,0,.3)}
.cart::backdrop{background:rgba(0,28,31,.62)}
.cart-in{display:flex;flex-direction:column;height:100%;min-height:0}
.cart-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.cart-h h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.cart-x{min-width:2.9rem;min-height:2.9rem;border-radius:12px;border:1px solid var(--line);background:transparent;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.cart-body{flex:1;overflow-y:auto;padding:1rem 1.3rem 1.4rem;min-height:0;display:flex;flex-direction:column;gap:1rem}
.cart-empty{text-align:center;color:var(--muted);padding:2.2rem 1rem;display:flex;flex-direction:column;gap:.8rem;align-items:center}
.cart-empty b{color:var(--text);font-size:1.15rem}
.ci{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem .8rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.ci.gone{opacity:.7}
.ci-info b{display:block;font-weight:800}.ci-info span{font-size:.88rem;color:var(--muted)}
.ci-price{font-weight:800;text-align:right}
.stepper{display:flex;align-items:center;gap:.3rem;border:1px solid var(--line);border-radius:999px;padding:.15rem}
.stepper button{width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:var(--surface-2);color:var(--text);font-size:1.3rem;font-weight:800;cursor:pointer}
.stepper button:disabled{opacity:.4;cursor:not-allowed}
.stepper output{min-width:2rem;text-align:center;font-weight:800}
.ci-rm{justify-self:end;background:none;border:0;color:var(--red);font-weight:800;cursor:pointer;min-height:2.75rem;padding:0 .4rem;font-size:.92rem}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:1.25rem;padding-top:.4rem}
.cart-total output{font-size:1.7rem;letter-spacing:-.02em}
.cf{display:grid;gap:.9rem}
.cf label{display:grid;gap:.3rem;font-weight:700;font-size:.95rem}
.cf .hint{font-weight:500;font-size:.85rem;color:var(--muted)}
.cf input,.cf textarea{font:inherit;font-size:1rem;font-weight:500;min-height:3rem;padding:.6rem .9rem;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--text);width:100%}
.cf textarea{min-height:5rem;resize:vertical}
.cf input:focus,.cf textarea:focus{outline:3px solid color-mix(in srgb,var(--action) 40%,transparent);border-color:var(--action)}
.cf input[aria-invalid="true"]{border-color:var(--red)}
.cf .err-t{color:var(--red);font-weight:700;font-size:.88rem;min-height:0}
.cf .fine{font-size:.85rem;color:var(--muted)}
.cart-status{padding:.2rem 1.3rem .9rem;font-weight:700;color:var(--action);min-height:1.4rem}
.done{display:flex;flex-direction:column;gap:1rem}
.done h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;outline:0}
.done .code{font-size:2rem;font-weight:800;letter-spacing:.02em;background:var(--sprout);border-radius:var(--r-sm);padding:.7rem 1rem;width:fit-content}
.done ol{padding-left:1.2rem;list-style:decimal;display:grid;gap:.4rem}
.done .row{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:700px){
  .cart{margin:auto 0 0;width:100%;height:auto;max-height:92dvh;border-radius:1.4rem 1.4rem 0 0}
  .cart-in{max-height:92dvh}
  .site-header .bar{gap:.7rem}
}
.site-footer li{min-width:0}.site-footer a{max-width:100%;overflow-wrap:anywhere}
@media (max-width:420px){.site-footer .cols{grid-template-columns:minmax(0,1fr);gap:1.4rem}}
button,input,textarea,select{font-family:inherit}