/* ==========================================================================
   brand-refresh.css — capa visual "Metamorfosis" (papel marfil + bosque + lima)
   Marca: panel.com.es (mariposa de Yakka en verde)
   Se carga DESPUÉS de site.css en todas las páginas. Redefine el sistema de
   variables (la mayoría de componentes se adaptan solos) y re-tematiza los
   componentes restantes. No cambia estructura ni contenido.
   ========================================================================== */

/* ---------- Tipografía autoalojada (latin, variable 100-900) ---------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/inter-latin-var.woff2') format('woff2');
}

/* ---------- Sistema de variables (misma API, paleta nueva) ---------- */
:root{
  --paper:#F3F2E9;
  --paper-2:#E9ECDF;
  --white:#FFFDF4;
  --forest:#123B2B;
  --forest-2:#0B2B20;
  --leaf:#C9F36B;
  --leaf-2:#D9FB91;
  --mint:#8CE6B0;

  --bg:var(--paper);
  --panel:#FFFDF4;
  --panel-2:#EDEEE2;
  --line:rgba(20,39,30,.14);
  --line-2:rgba(20,39,30,.27);
  --ink:#14271E;
  --dim:#526158;
  --dim-2:#68766D;
  --acc:#167C50;          /* verde accesible sobre papel */
  --acc-deep:#1F8A5B;
  --acc-ink:#FFFFFF;

  --sans:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --disp:'Inter','Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --mono:'Cascadia Mono',Consolas,ui-monospace,'Courier New',monospace;

  --radius-card:16px;
  --ease:cubic-bezier(.2,.75,.25,1);
}

/* ---------- Base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(52rem 36rem at 88% -8%, rgba(201,243,107,.18), transparent 62%),
    radial-gradient(38rem 30rem at -8% 44%, rgba(140,230,176,.12), transparent 60%),
    radial-gradient(30rem 26rem at 96% 96%, rgba(18,59,43,.06), transparent 65%);
}
h1,h2,h3{
  font-family:var(--disp);
  font-weight:680;
  letter-spacing:-.045em;
  line-height:1.05;
}
h1{font-size:clamp(2.7rem,5.4vw,4.4rem);line-height:.98}
h2{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.05em;line-height:1.04}
h3{font-size:1.3rem;letter-spacing:-.035em}
.lede{color:var(--dim);line-height:1.75}
.wrap{max-width:1240px}
::selection{background:var(--leaf);color:var(--forest-2)}
main p a,.finenote a,.check a{color:var(--acc)}
main p a:hover{color:var(--forest)}
#servicios,#estrella,circle:empty{scroll-margin-top:88px}
[id]{scroll-margin-top:88px}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}

/* ---------- Mariposa (media ala + pivot) ---------- */
.butterfly-mark{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:visible;
  line-height:0;
}
.wing-half{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  overflow:hidden;
  backface-visibility:hidden;
  will-change:transform;
}
.wing-half img{
  position:absolute;
  top:0;
  width:200%;
  height:100%;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
}
.wing-left{left:0;transform-origin:100% 50%;animation:wingL .38s cubic-bezier(.35,.02,.63,.98) infinite alternate}
.wing-left img{left:0}
.wing-right{right:0;transform-origin:0 50%;animation:wingR .38s cubic-bezier(.35,.02,.63,.98) infinite alternate}
.wing-right img{right:0}
.gentle .wing-left{animation-name:wingLg;animation-duration:.95s}
.gentle .wing-right{animation-name:wingRg;animation-duration:.95s}
@keyframes wingL{from{transform:scaleX(.16) rotate(-4deg)}to{transform:scaleX(1) rotate(1.5deg)}}
@keyframes wingR{from{transform:scaleX(.16) rotate(4deg)}to{transform:scaleX(1) rotate(-1.5deg)}}
@keyframes wingLg{from{transform:scaleX(.62) rotate(-3deg)}to{transform:scaleX(1) rotate(1deg)}}
@keyframes wingRg{from{transform:scaleX(.62) rotate(3deg)}to{transform:scaleX(1) rotate(-1deg)}}

/* Mariposas decorativas que vuelan por la página (parallax vía --parallax-y, site.js) */
.mari-fly,
.mps-hero{
  transform:translate3d(0,var(--parallax-y,0px),0);
  will-change:transform;
}
.mari-fly{
  position:absolute;
  z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 16px 18px rgba(18,59,43,.16));
}
.mf-hero{right:5%;top:20%;width:clamp(120px,15vw,210px);animation:vuelaMark 9.5s ease-in-out infinite}
.mf-estrella{right:4%;top:4%;width:64px;opacity:.85;animation:vuelaMark 7.5s ease-in-out -2.5s infinite}
.mf-serv{right:4%;top:4%;width:70px;opacity:.85;animation:vuelaMark 8.5s ease-in-out -4s infinite}
.mf-phead{right:4.5%;top:10%;width:clamp(52px,6vw,84px);opacity:.95;animation:vuelaMark 8s ease-in-out -1s infinite}
.mf-contacto{right:6%;top:16%;width:clamp(52px,6vw,84px);opacity:.9;animation:vuelaMark 9s ease-in-out -3.5s infinite}
.mf-cta{right:10%;top:12%;width:110px;opacity:.42;animation:vuelaMark 10s ease-in-out -5s infinite}
.mf-local{right:4%;top:12%;width:58px;opacity:.9;animation:vuelaMark 8.5s ease-in-out -6.5s infinite}
@keyframes vuelaMark{
  0%,100%{translate:0 0;rotate:-7deg}
  22%{translate:26px -18px;rotate:7deg}
  48%{translate:-13px -44px;rotate:-4deg}
  74%{translate:28px -15px;rotate:10deg}
  88%{translate:7px -30px;rotate:-8deg}
}
@keyframes vueloLocal{
  from{translate:-52px 14px;rotate:-10deg}
  to{translate:44px -18px;rotate:9deg}
}
.mf-local{animation-name:vueloLocal;animation-direction:alternate;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:7s}

/* Decoraciones antiguas (mariposas blancas sobre fondo claro): fuera */
.mari,.fb,.mariposa-fondo,
.faq-mari,.faq-zone::before,.why::after{display:none}

/* ---------- Cabecera ---------- */
header{
  background:rgba(243,242,233,.88);
  border-bottom:1px solid rgba(20,39,30,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
header .nav{height:72px}
.brand{gap:11px}
.brand .butterfly-mark{
  width:40px;
  height:40px;
  flex:none;
  border-radius:13px;
  background:var(--forest);
  box-shadow:0 6px 16px rgba(18,59,43,.18);
}
.brand>span:last-child{color:var(--ink)}
.brand small{color:var(--dim-2)}
.nav-links a{color:#41544A;font-weight:560}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a::after{background:var(--acc);height:2px;border-radius:2px}

/* Movimiento: gestionado por site.js sin controles visibles
   (respeta prefers-reduced-motion; ?motion=on/off para pruebas). */

/* ---------- Botones ---------- */
.btn{font-size:.92rem;padding:.75rem 1.3rem}
.btn-pri{background:var(--forest);color:#fff}
.btn-pri:hover{background:#1C6342}
.btn-pri::after{display:none}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(20,39,30,.45);background:rgba(255,253,244,.7)}

/* ---------- Hero ---------- */
.hero{padding-top:70px;padding-bottom:64px}
.hero::before{
  background:radial-gradient(46% 52% at 62% 42%, rgba(201,243,107,.26), transparent 72%);
}
.hero-grid{gap:clamp(2.5rem,5vw,4.5rem)}
.hero p.lede{font-size:1.05rem}
.hero-img{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:var(--forest-2);
  box-shadow:0 34px 90px rgba(20,39,30,.18), 0 0 60px rgba(201,243,107,.08);
}
.hero-img img{border-radius:0}
.hero-ctas{gap:.8rem}

/* ---------- Cinta de estado ---------- */
.strip{
  background:var(--forest);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 0;
}
.strip ul{color:#CFE0D4}
.strip .dot{background:var(--leaf);box-shadow:0 0 10px rgba(201,243,107,.55)}

/* ---------- Bloque estrella + planes ---------- */
.star-grid{gap:clamp(2rem,5vw,4rem);margin-bottom:36px}
.star-grid img{
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 28px 76px rgba(20,39,30,.14);
}
.star-grid h3{margin-bottom:.35rem}
.plans{gap:16px}
.plan{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  gap:1rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 52%),
    var(--forest);
  color:#E7F0E8;
  box-shadow:0 24px 60px rgba(11,43,32,.14);
}
.plan,.bcard,.post,.cb,.faq details{
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.plan:first-child{
  border-color:rgba(201,243,107,.42);
  background:
    radial-gradient(130% 90% at 12% 0%, rgba(201,243,107,.16), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 52%),
    #164430;
}
.plan:hover{
  transform:translateY(-6px);
  border-color:rgba(201,243,107,.55);
  box-shadow:0 26px 64px rgba(6,28,17,.28);
}
.plan h3{color:#fff;font-size:1.45rem}
.plan .price{
  font-size:clamp(2.5rem,4.4vw,3.6rem);
  font-weight:680;
  color:#fff;
  letter-spacing:-.06em;
  line-height:1;
}
.price small{color:#B9CDBF;font-size:.9rem;letter-spacing:0}
.tag{
  align-self:flex-start;
  background:rgba(201,243,107,.15);
  color:#D9F79B;
  border:0;
  border-radius:999px;
  padding:.38rem .8rem;
  font:700 .62rem/1.3 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.plan ul{color:#CFE0D3;font-size:.93rem}
.plan ul li svg{color:var(--leaf)}
.plan .btn{margin-top:auto}
.plan .btn-pri{background:var(--leaf);color:#143320}
.plan .btn-pri:hover{background:var(--leaf-2);box-shadow:0 10px 30px rgba(201,243,107,.25)}
.finenote{color:var(--dim);line-height:1.7}
.finenote a{color:var(--acc)}

/* ---------- Bento / catálogo ---------- */
.bento{gap:16px}
.bcard{
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 48%),
    var(--forest);
  color:#E7F0E8;
}
.bcard img{border-bottom:1px solid rgba(255,255,255,.12);filter:saturate(.85)}
.bcard .bc-body p{color:#C9DACC}
.bc-price{color:#D9F79B}
.bcard .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.bcard .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.bcard:hover{
  transform:translateY(-6px);
  border-color:rgba(201,243,107,.5);
  box-shadow:0 24px 56px rgba(6,28,17,.26);
}

/* ---------- Pasos ---------- */
.steps{gap:18px;margin-top:34px}
.step{border-top:2px solid rgba(20,39,30,.75)}
.step b{color:var(--acc);letter-spacing:.16em;font-size:.72rem}
.step h3{margin-bottom:.4rem}
.step p{color:var(--dim);line-height:1.72}
.step:hover b{transform:scale(1.1)}

/* ---------- "Parece delicada" / promesa ---------- */
.why-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.why-grid>div{
  padding:1.35rem 1.45rem;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 14px 34px rgba(20,39,30,.06);
}
.why-grid h3{margin-bottom:.4rem}
.why-grid p{color:var(--dim);line-height:1.7}

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--panel);
  margin-bottom:10px;
  box-shadow:0 10px 26px rgba(20,39,30,.05);
}
.faq details:hover{border-color:var(--line-2);box-shadow:0 14px 32px rgba(20,39,30,.08)}
.faq details[open]{border-color:rgba(31,138,91,.5)}
.faq details[open] summary{color:var(--ink)}
.faq summary{padding:1.05rem 1.25rem;color:var(--ink)}
.faq summary .x{color:var(--acc)}
.faq .fa-body{color:var(--dim);line-height:1.72;padding:0 1.25rem 1.15rem}

/* ---------- CTA final ---------- */
.manifesto.cta{
  background:var(--leaf);
  border:0;
  border-radius:26px;
  padding:clamp(3.2rem,7vw,5.5rem) 24px;
  margin-top:64px;
  box-shadow:0 34px 90px rgba(20,39,30,.14);
  position:relative;
  overflow:hidden;
}
.manifesto.cta::before{
  content:"";
  position:absolute;
  width:360px;
  aspect-ratio:1/1;
  right:-90px;
  top:-170px;
  border:1px solid rgba(20,39,30,.14);
  border-radius:50%;
  box-shadow:0 0 0 26px rgba(20,39,30,.03);
  background:none;
  animation:none;
}
.manifesto.cta p.big,
.manifesto .big{color:var(--forest-2);font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.05em;max-width:19ch}
.manifesto.cta .btn-pri{background:var(--forest-2);color:#fff}
.manifesto.cta .btn-pri:hover{background:#0E2418;box-shadow:0 14px 34px rgba(11,43,32,.3)}
.manifesto .btn-pri{animation:respira 3.4s ease-in-out infinite}

/* ---------- Cabecera de páginas de servicio (phead) ---------- */
.phead{
  grid-template-columns:1.02fr .95fr;
  gap:clamp(2rem,4.5vw,4rem);
  align-items:center;
  padding-top:clamp(2.2rem,4.5vw,3.4rem);
  padding-bottom:clamp(2.2rem,4.5vw,3.4rem);
  background:
    radial-gradient(120% 130% at 88% -20%, rgba(201,243,107,.14), transparent 55%),
    linear-gradient(150deg, #164430, #0F3527 72%);
  color:#EAF2EC;
  border-radius:26px;
  margin-top:.4rem;
  position:relative;
  overflow:hidden;
}
.phead>div{position:relative;z-index:2}
.phead{margin-bottom:clamp(2.4rem,5vw,4.2rem)}
.phead .eyebrow{color:#D9F79B}
.phead h1{color:#fff;font-size:clamp(2.5rem,4.8vw,4rem);letter-spacing:-.055em}
.phead .lede{color:#C7D8CC;font-size:1.02rem}
.chips .chip{
  border:1px solid rgba(255,255,255,.26);
  color:#DFEDE2;
  background:rgba(255,255,255,.05);
}
.phead>img{
  position:relative;
  z-index:2;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 80px rgba(2,16,9,.4);
}
.phead img{filter:saturate(.9)}
.phead .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.phead .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ---------- Listados incl / tabla cloud ---------- */
.incl{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1.5rem 1.7rem;
  box-shadow:0 14px 34px rgba(20,39,30,.05);
}
.incl li{color:var(--ink);font-size:.97rem}
.incl li svg{color:var(--acc)}
.ctable{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(20,39,30,.05);
}
.ctable thead th{
  background:var(--forest);
  color:#D9F79B;
  font:700 .64rem/1.4 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.ctable thead th:first-child{border-radius:16px 0 0 0}
.ctable thead th:last-child{border-radius:0 16px 0 0}
.ctable td,.ctable tbody th{padding:1rem 1.1rem;color:var(--dim)}
.ctable tbody th{color:var(--ink)}
.ctable tbody th.pname{font-size:1.05rem}
.ctable .pprice{color:var(--ink);font-weight:700;white-space:nowrap}
.ctable tbody tr:hover td,.ctable tbody tr:hover th{background:#F7F9ED}
.ctable .btn{border-color:var(--line-2)}
.ctable .btn:hover{border-color:rgba(31,138,91,.6);color:var(--forest)}

/* ---------- Contacto ---------- */
.pagehead{max-width:none}
.pagehead{margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.pagehead h1{font-size:clamp(2.4rem,4.8vw,3.9rem)}
.cblock .cb{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(20,39,30,.05);
}
.cblock .cb b{
  color:var(--dim-2);
  font:700 .6rem/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cblock .cb a{color:var(--forest);font-weight:650}
.cblock .cb a:hover{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.form{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 18px 44px rgba(20,39,30,.06);
}
.field label{
  color:#41544A;
  font:600 .72rem/1 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
}
.field input,.field select,.field textarea{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:12px;
  color:var(--ink);
  padding:.78rem .95rem;
  font-size:.95rem;
  font-family:var(--sans);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#9AA79C}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--acc-deep);
  box-shadow:0 0 0 3px rgba(31,138,91,.14);
  outline:none;
}
.field .err{color:#B3261E}
.field.bad input,.field.bad textarea{border-color:#D14343}
.check input{accent-color:var(--forest)}
.form-ok{
  background:#EAF7E4;
  border:1px solid rgba(31,138,91,.4);
  border-radius:14px;
  padding:1rem 1.2rem;
  color:var(--forest-2);
}
.form-err.show{color:#B3261E}
.check a{color:var(--acc)}

/* ---------- Modal de contratación ---------- */
.modal-card{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 40px 100px rgba(6,20,12,.35);
}
.modal-x{color:var(--dim);border:1px solid var(--line-2);background:transparent}
.modal-x:hover{background:var(--panel-2);color:var(--ink)}
.m-price{color:var(--dim)}
.m-total{color:var(--dim)}
.m-total b{color:var(--ink)}
.radio-row label{
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:.6rem .85rem;
  color:#3E564A;
  font-size:.9rem;
  transition:background .2s ease,border-color .2s ease;
}
.radio-row label:has(input:checked){border-color:var(--acc-deep);background:#EAF7E4;color:var(--forest-2)}
.radio-row input{accent-color:var(--forest)}
.tld-row select{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:12px;
  color:var(--ink);
  padding:.6rem .8rem;
}
.dom-chip{background:#EAF7E4;color:var(--forest-2);border-radius:999px;padding:.3rem .7rem;font:700 .7rem/1 var(--mono)}
.toast{background:var(--forest-2);color:#EAF2EC;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.toast b{color:var(--leaf)}
#sbar{background:var(--leaf);height:2px}

/* ---------- Blog ---------- */
.post{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:1.35rem 1.5rem;
}
.post:hover{
  transform:translateY(-5px);
  border-color:rgba(31,138,91,.45);
  box-shadow:0 18px 40px rgba(20,39,30,.08);
}
.post time{color:var(--acc);font:600 .68rem/1 var(--mono);letter-spacing:.1em}
.post h2 a{color:var(--ink)}
.post h2 a:hover{color:var(--acc)}
.post p{color:var(--dim)}
.pending{
  background:var(--panel);
  border:1px dashed var(--line-2);
  border-radius:16px;
  padding:2rem;
  color:var(--dim);
}
.articulo a{color:var(--acc)}
.articulo code,.articulo pre{background:var(--panel-2);border-color:var(--line)}
.articulo blockquote{background:var(--panel-2);border-left-color:var(--acc)}
.articulo th{background:var(--panel-2)}

/* ---------- Pie ---------- */
footer{
  background:var(--forest-2);
  border-top:0;
  margin-top:clamp(3rem,6vw,5rem);
  color:#E7EFE7;
  position:relative;
}
footer .brand>span:last-child{color:#fff}
footer .brand small{color:#AFC4B2}
.f-brand p{color:#9FB6A3}
.f-grid .f-h{color:#B7D29C;letter-spacing:.16em}
.f-grid a{color:#C6D4C7}
.f-grid a:hover{color:var(--leaf)}
.f-grid{gap:2.5rem}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  color:#9FB6A3;
}
.f-bottom a{color:#CFE0D1}
.f-bottom a:hover{color:var(--leaf)}

/* ---------- Legales ---------- */
.legal .upd{color:var(--dim-2);font:600 .68rem/1 var(--mono);letter-spacing:.1em}
.legal p,.legal li{color:var(--dim);max-width:70ch}
.legal b{color:var(--ink)}

/* ---------- Página de contacto: flyer (posición por defecto .mf-contacto) ---------- */

/* ---------- Móvil ---------- */
@media (max-width:1023px){
  .phead{grid-template-columns:1fr;gap:1.8rem}
  .phead>img{order:-1;max-width:520px}
  .why-grid{grid-template-columns:1fr}
  .mf-serv,.mf-estrella{display:none}
}
@media (max-width:767px){
  .mari-fly{display:none}
  .hero{padding-top:44px;padding-bottom:44px}
  .hero-grid{gap:1.8rem}
  .plans{grid-template-columns:1fr;gap:12px}
  .plan{min-height:0;padding:1.5rem;border-radius:19px}
  .plan .price{font-size:2.2rem}
  .star-grid{grid-template-columns:1fr;gap:1.4rem;margin-bottom:26px}
  .bento{grid-template-columns:1fr;gap:12px}
  .steps{grid-template-columns:1fr;gap:0}
  .f-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .motion-toggle{bottom:-46px;font-size:.55rem}
}
@media (max-width:480px){
  .f-grid{grid-template-columns:1fr}
  .cblock{grid-template-columns:1fr 1fr}
  .plan .price{font-size:2rem}
  .ctable td,.ctable tbody th{padding:.8rem .7rem}
}

/* ---------- Movimiento reducido (sistema o botón) ---------- */
html.reduce-motion{scroll-behavior:auto}
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after{
  animation:none !important;
  scroll-behavior:auto !important;
  transition-duration:.01ms !important;
}
html.reduce-motion .mari-fly{display:none}
@media (prefers-reduced-motion:reduce){
  html:not(.motion-on){scroll-behavior:auto}
  html:not(.motion-on) *,
  html:not(.motion-on) *::before,
  html:not(.motion-on) *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}