/* ============================================================
   TicoTaxes — Design System
   Tokens + componentes compartidos por index.html y agentes.html
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca (tomados del logo: hoja verde + wordmark azul marino) */
  --ink:        #0E2440;
  --ink-2:      #1B3A63;
  --green:      #2E9E45;
  --green-dk:   #1F7A33;
  --green-soft: #E8F5EA;
  --amber:      #B45309;
  --amber-soft: #FEF3C7;

  /* Neutros */
  --bg:         #FFFFFF;
  --bg-warm:    #FAF8F4;
  --bg-ink:     #0B1D34;
  --line:       #E7E3DB;
  --line-2:     #D6D1C7;
  --text:       #17253A;
  --muted:      #5C6B80;
  --muted-2:    #8494A6;

  /* Tipografía */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:  clamp(2.15rem, 4.1vw, 3.35rem);
  --fs-h2:    clamp(1.85rem, 3.4vw, 2.7rem);
  --fs-h3:    1.22rem;
  --fs-body:  1.05rem;
  --fs-sm:    .94rem;
  --fs-xs:    .82rem;

  /* Espaciado */
  --s-1: .5rem;  --s-2: .875rem; --s-3: 1.25rem;
  --s-4: 2rem;   --s-5: 3rem;    --s-6: 4.5rem;  --s-7: 7rem;

  /* Bordes y sombras */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(14,36,64,.06), 0 4px 12px rgba(14,36,64,.05);
  --sh-2: 0 2px 4px rgba(14,36,64,.05), 0 12px 32px rgba(14,36,64,.09);
  --sh-3: 0 8px 20px rgba(14,36,64,.08), 0 32px 64px rgba(14,36,64,.14);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .45s;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); line-height:1.15; letter-spacing:-.02em; margin:0 0 var(--s-2)}
h1{font-size:var(--fs-hero); font-weight:800; letter-spacing:-.032em; text-wrap:balance}
h2{font-size:var(--fs-h2); font-weight:800}
h3{font-size:var(--fs-h3); font-weight:700}
p{margin:0 0 var(--s-2)}
a{color:var(--ink-2); text-decoration:none}
img{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}
strong{color:var(--ink); font-weight:650}

.wrap{width:min(1180px, calc(100% - 2.5rem)); margin-inline:auto}
.wrap-sm{width:min(820px, calc(100% - 2.5rem)); margin-inline:auto}
section{padding:var(--s-6) 0}
.sec-warm{background:var(--bg-warm); border-block:1px solid var(--line)}
.sec-ink{background:var(--bg-ink); color:#CBD8E8}
.sec-ink h2,.sec-ink h3{color:#fff}

/* ---------- 3. Utilidades tipográficas ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-xs); font-weight:650; letter-spacing:.09em; text-transform:uppercase;
  color:var(--green-dk); background:var(--green-soft);
  padding:.4rem .8rem; border-radius:var(--r-pill); margin-bottom:var(--s-2);
}
.sec-head{max-width:680px; margin:0 auto var(--s-5); text-align:center}
.sec-head p{color:var(--muted); font-size:1.08rem; margin:0}
.lead{font-size:1.14rem; color:var(--muted); line-height:1.7}
.fine{font-size:var(--fs-xs); color:var(--muted-2); line-height:1.55}

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
  padding:.85rem 1.5rem; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--green); outline-offset:3px}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 6px 18px rgba(46,158,69,.28)}
.btn-primary:hover{background:var(--green-dk); box-shadow:0 10px 26px rgba(46,158,69,.34)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--ink-2)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink); background:#fff}
.btn-light{background:#fff; color:var(--ink)}
.btn-lg{padding:1.05rem 1.9rem; font-size:1rem}
.btn-sm{padding:.6rem 1.05rem; font-size:var(--fs-xs)}

/* ---------- 5. Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:var(--s-3); height:70px}
.nav-logo{display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.12rem; letter-spacing:-.02em}
.nav-logo img{height:30px; width:auto}
.nav-links{display:flex; gap:var(--s-3); margin-left:auto}
.nav-links a{font-size:var(--fs-sm); font-weight:550; color:var(--muted); transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex; gap:.6rem; align-items:center}
@media(max-width:900px){.nav-links{display:none}.nav-cta .btn-ghost{display:none}}

/* Selector de idioma — se mantiene visible en móvil */
.lang{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  font-size:var(--fs-xs); font-weight:650; letter-spacing:.02em;
  color:var(--muted); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:.34rem .66rem;
  transition:color .15s, border-color .15s;
}
.lang:hover{color:var(--ink); border-color:var(--ink)}
.lang svg{opacity:.65; flex:none}

/* ---------- 6. Barra de oferta ---------- */
.offerbar{
  background:var(--ink); color:#fff; text-align:center;
  font-size:var(--fs-sm); padding:.7rem 1.25rem; line-height:1.4;
}
.offerbar strong{color:#7BE495}
.offerbar a{color:#fff; text-decoration:underline; text-underline-offset:3px; font-weight:600}

/* ---------- 7. Hero ---------- */
.hero{padding:var(--s-6) 0 var(--s-7); position:relative; overflow:hidden}
.hero::before{
  content:''; position:absolute; inset:-30% -20% auto 40%; height:120%;
  background:radial-gradient(ellipse at center, rgba(46,158,69,.10), transparent 62%);
  pointer-events:none;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-5); align-items:center; position:relative}
.hero h1{margin-bottom:var(--s-3)}
.hero .lead{margin-bottom:var(--s-4); max-width:34rem}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:var(--s-4)}
.hero-trust{display:flex; gap:1.4rem; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--muted)}
.hero-trust span{display:flex; align-items:center; gap:.4rem}
.hero-trust svg{flex-shrink:0}

.hero-media{position:relative}
.hero-photo{
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3);
  aspect-ratio:4/3; background:var(--bg-warm);
}
.hero-photo img{width:100%; height:100%; object-fit:cover}
.hero-card{
  position:absolute; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-2); padding:.9rem 1.1rem;
}
.hero-card-1{left:-1.5rem; bottom:2.2rem; width:238px}
.hero-card-2{right:-1rem; top:1.6rem; width:212px}
@media(max-width:1080px){.hero-card-1{left:.5rem}.hero-card-2{right:.5rem}}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-card-1,.hero-card-2{display:none}
}

/* ---------- 8. Tarjeta de estado (UI del producto) ---------- */
.stat-row{display:flex; align-items:center; justify-content:space-between; gap:.75rem}
.stat-label{font-size:var(--fs-xs); color:var(--muted); font-weight:550}
.stat-value{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.35rem; letter-spacing:-.02em}
.pill{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700;
  padding:.22rem .6rem; border-radius:var(--r-pill); letter-spacing:.02em;
}
.pill-ok{background:var(--green-soft); color:var(--green-dk)}
.pill-wait{background:var(--amber-soft); color:var(--amber)}
.pill-info{background:#E8EFF8; color:var(--ink-2)}

/* ---------- 9. Barra de confianza ---------- */
.trustbar{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3); padding:var(--s-4) 0}
.trustbar div{text-align:center; padding:0 .5rem; border-left:1px solid var(--line)}
.trustbar div:first-child{border-left:0}
.trustbar b{display:block; font-family:var(--font-display); color:var(--ink); font-size:.98rem; margin-bottom:.15rem}
.trustbar span{font-size:var(--fs-xs); color:var(--muted)}
@media(max-width:760px){.trustbar{grid-template-columns:repeat(2,1fr); gap:var(--s-3) 0; row-gap:var(--s-3)}.trustbar div:nth-child(3){border-left:0}}

/* ---------- 10. Tarjetas de audiencia ---------- */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3)}
@media(max-width:900px){.cards-3{grid-template-columns:1fr}}
.aud-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column;
}
.aud-card:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.aud-photo{aspect-ratio:3/2; overflow:hidden; background:var(--bg-warm)}
.aud-photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.aud-card:hover .aud-photo img{transform:scale(1.04)}
.aud-body{padding:var(--s-3) 1.4rem 1.6rem; flex:1; display:flex; flex-direction:column}
.aud-body h3{margin-bottom:.4rem}
.aud-body p{color:var(--muted); font-size:var(--fs-sm); margin-bottom:var(--s-2)}
.aud-list{margin-bottom:var(--s-3)}
.aud-list li{font-size:var(--fs-sm); color:var(--text); padding-left:1.5rem; position:relative; margin-bottom:.4rem}
.aud-list li::before{content:''; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--green)}
.aud-price{margin-top:auto; padding-top:var(--s-2); border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--muted)}
.aud-main{display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap}
.aud-price b{font-family:var(--font-display); font-size:1.9rem; font-weight:800; color:var(--ink); letter-spacing:-.035em; line-height:1.1}
.aud-price .aud-main span{font-size:var(--fs-xs); color:var(--muted)}
.aud-price .fine{margin:.2rem 0 0}

/* ---------- 11. Mockup de la app ---------- */
.app{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); overflow:hidden; max-width:1000px; margin-inline:auto;
}
.app-bar{
  display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem;
  background:#F3F1EC; border-bottom:1px solid var(--line);
}
.app-dot{width:11px; height:11px; border-radius:50%; background:#D6D1C7}
.app-url{
  margin-left:.7rem; font-size:var(--fs-xs); color:var(--muted); background:#fff;
  padding:.24rem .8rem; border-radius:var(--r-pill); border:1px solid var(--line);
}
.app-body{display:grid; grid-template-columns:210px 1fr; min-height:440px}
.app-side{background:#0E2440; padding:1.2rem .9rem; color:#9DB2CC}
.app-side .brand{display:flex; align-items:center; gap:.5rem; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.98rem; margin-bottom:1.4rem; padding-left:.4rem}
.app-side .brand img{height:24px}
.app-nav{display:flex; flex-direction:column; gap:.15rem}
.app-nav button{
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:none; border:0; color:#9DB2CC; font:inherit; font-size:var(--fs-sm);
  padding:.6rem .7rem; border-radius:var(--r-sm); cursor:pointer; transition:background .15s, color .15s;
}
.app-nav button:hover{background:rgba(255,255,255,.06); color:#fff}
.app-nav button.on{background:var(--green); color:#fff; font-weight:600}
.app-main{padding:1.5rem 1.7rem; background:#FBFAF8}
.app-view{display:none; animation:fade .35s var(--ease)}
.app-view.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.app-h{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap}
.app-h h4{font-family:var(--font-display); font-size:1.1rem; color:var(--ink); margin:0}
.app-h .fine{margin:0}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1.1rem}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem 1rem}
.kpi .stat-label{margin-bottom:.15rem}
.kpi .stat-value{font-size:1.3rem}
.rows{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.row{display:grid; grid-template-columns:1fr auto auto; gap:.9rem; align-items:center; padding:.75rem 1rem; border-top:1px solid var(--line); font-size:var(--fs-sm)}
.row:first-child{border-top:0}
.row-head{background:#F6F4EF; font-size:var(--fs-xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.row .who{color:var(--ink); font-weight:550}
.row .sub{display:block; font-size:var(--fs-xs); color:var(--muted-2); font-weight:400}
.row .amt{font-family:var(--font-display); font-weight:700; color:var(--ink)}
@media(max-width:820px){
  .app-body{grid-template-columns:1fr}
  .app-side{display:flex; gap:.4rem; overflow-x:auto; padding:.7rem}
  .app-side .brand{display:none}
  .app-nav{flex-direction:row}
  .app-nav button{white-space:nowrap}
  .kpis{grid-template-columns:1fr}
}

/* ---------- 12. Módulos ---------- */
.mods{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-3)}
@media(max-width:900px){.mods{grid-template-columns:1fr}}
.mod{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1.5rem; transition:border-color .2s, transform .2s var(--ease)}
.mod:hover{border-color:var(--green); transform:translateY(-3px)}
.mod-ico{
  width:42px; height:42px; border-radius:12px; background:var(--green-soft);
  display:grid; place-items:center; margin-bottom:.9rem;
}
.mod h3{font-size:1.05rem; margin-bottom:.35rem}
.mod p{font-size:var(--fs-sm); color:var(--muted); margin:0}

/* ---------- 13. Precios ---------- */
.prices{display:grid; grid-template-columns:1fr 1.12fr; gap:var(--s-3); align-items:start; max-width:960px; margin-inline:auto}
@media(max-width:900px){.prices{grid-template-columns:1fr}}
.price-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:2rem 1.8rem; position:relative}
.price-card.hot{border:2px solid var(--green); box-shadow:0 12px 40px rgba(46,158,69,.16); padding-top:2.4rem}
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--green); color:#fff; font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-xs); padding:.4rem 1rem; border-radius:var(--r-pill); white-space:nowrap;
  box-shadow:0 4px 14px rgba(46,158,69,.35);
}
.price-card h3{font-size:1.1rem; margin-bottom:.2rem}
.price-card .who{font-size:var(--fs-sm); color:var(--muted); margin-bottom:1.1rem}
.amount{display:flex; align-items:baseline; gap:.35rem; margin-bottom:.3rem}
.amount .n{font-family:var(--font-display); font-size:3rem; font-weight:800; color:var(--ink); letter-spacing:-.045em; line-height:1}
.amount .per{font-size:var(--fs-sm); color:var(--muted)}
.amount-note{font-size:var(--fs-xs); color:var(--green-dk); font-weight:650; margin-bottom:1.2rem}
.feats{margin-bottom:1.4rem}
.feats li{font-size:var(--fs-sm); padding-left:1.6rem; position:relative; margin-bottom:.55rem; color:var(--text)}
.feats li::before{
  content:''; position:absolute; left:0; top:.42em; width:14px; height:14px; border-radius:50%;
  background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%231F7A33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.price-card .btn{width:100%}
.alt-plan{
  margin-top:1.1rem; padding:.9rem 1.1rem; background:var(--bg-warm);
  border:1px dashed var(--line-2); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:space-between; gap:.9rem; flex-wrap:wrap;
}
.alt-plan .t{font-size:var(--fs-xs); color:var(--muted); line-height:1.5}
.alt-plan .t b{display:block; font-family:var(--font-display); color:var(--ink); font-size:1rem}
.upsell{
  margin-top:1rem; background:var(--green-soft); border-radius:var(--r-sm);
  padding:.7rem .95rem; font-size:var(--fs-xs); color:var(--green-dk); font-weight:600; line-height:1.5;
}

/* ---------- 14. Banda de oferta anual ---------- */
.offer{
  background:linear-gradient(135deg,#0E2440,#1B3A63); color:#fff;
  border-radius:var(--r-lg); padding:var(--s-5) var(--s-4); text-align:center; position:relative; overflow:hidden;
}
.offer::after{
  content:''; position:absolute; inset:auto -10% -60% 55%; height:150%;
  background:radial-gradient(circle, rgba(46,158,69,.35), transparent 60%);
}
.offer>*{position:relative}
.offer h2{color:#fff; margin-bottom:.6rem}
.offer .lead{color:#B9CBE2; max-width:34rem; margin:0 auto var(--s-4)}
.offer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; max-width:760px; margin:0 auto var(--s-3)}
@media(max-width:760px){.offer-grid{grid-template-columns:1fr}}
.offer-item{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); padding:1.1rem}
.offer-item .p{font-size:var(--fs-xs); color:#9DB2CC; margin-bottom:.35rem}
.offer-item .was{text-decoration:line-through; color:#8FA3BC; font-size:var(--fs-sm)}
.offer-item .now{font-family:var(--font-display); font-size:1.7rem; font-weight:800; color:#7BE495; letter-spacing:-.03em; line-height:1.2}
.offer-item .eq{font-size:var(--fs-xs); color:#B9CBE2}

/* ---------- 15. Agente / destacado lateral ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.split-photo{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:16/10}
.split-photo img{width:100%; height:100%; object-fit:cover}

/* ---------- 16. FAQ ---------- */
.faq{max-width:760px; margin-inline:auto}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:.7rem; overflow:hidden}
.faq details[open]{border-color:var(--line-2); box-shadow:var(--sh-1)}
.faq summary{
  cursor:pointer; padding:1.1rem 1.3rem; font-family:var(--font-display); font-weight:650;
  color:var(--ink); font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--green); font-size:1.35rem; line-height:1; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 1.3rem 1.2rem; color:var(--muted); font-size:var(--fs-sm)}

/* ---------- 17. CTA final ---------- */
.cta-final{text-align:center; padding:var(--s-6) 0}
.cta-final h2{margin-bottom:var(--s-2)}
.cta-final .lead{max-width:34rem; margin:0 auto var(--s-4)}
.cta-actions{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}

/* ---------- 18. Footer ---------- */
.footer{background:var(--bg-ink); color:#8FA3BC; padding:var(--s-5) 0 var(--s-4); font-size:var(--fs-sm)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-4); margin-bottom:var(--s-4)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer h4{color:#fff; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.09em; margin-bottom:.9rem}
.footer a{color:#8FA3BC; display:block; padding:.2rem 0; transition:color .15s}
.footer a:hover{color:#fff}
.footer-logo{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem}
.footer-logo img{height:30px}
.footer-logo b{color:#fff; font-family:var(--font-display); font-size:1.1rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:var(--s-3); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--fs-xs)}
.footer-legal{display:flex; gap:1.1rem; flex-wrap:wrap}
.footer-legal a{display:inline; padding:0}

/* ---------- 19. WhatsApp flotante ---------- */
.wa{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 6px 22px rgba(37,211,102,.42);
  transition:transform .2s var(--ease);
}
.wa:hover{transform:scale(1.08)}

/* ---------- 20. Reveal on scroll ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.aud-card:hover,.mod:hover{transform:none}
}