/* ============================================================
   Tarjeta virtual · acer + Microglobal
   ============================================================ */

:root{
  --acer:        #80C343;
  --acer-dim:    #6aa837;
  --acer-glow:   rgba(128,195,67,.35);

  --bg:          #0A0C0E;
  --surface:     #14181D;
  --surface-2:   #1A1F25;
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);

  --txt:         #EDF1F3;
  --txt-2:       #9AA5AE;
  --txt-3:       #6B757D;
  --danger:      #F0705F;

  --radius:      16px;
  --radius-lg:   20px;
  --card-max:    420px;

  --gutter:      20px;
  --safe-l:      max(var(--gutter), env(safe-area-inset-left));
  --safe-r:      max(var(--gutter), env(safe-area-inset-right));

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* El [hidden] del navegador tiene la misma especificidad que cualquier clase,
   así que un .algo{display:flex} lo pisa y el atributo deja de hacer efecto.
   Esto lo vuelve a imponer para todo el documento. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--txt);
  background:
    radial-gradient(900px 480px at 15% -10%, rgba(128,195,67,.10), transparent 60%),
    radial-gradient(700px 400px at 95% 10%, rgba(128,195,67,.05), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

a{ color:var(--acer); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{
  width:100%; max-width:1080px; margin-inline:auto;
  padding-left:var(--safe-l); padding-right:var(--safe-r);
}
.mono{ font-family:var(--mono); letter-spacing:.02em; }

.ico{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none;
}

/* ============================================================
   PANTALLA DE ACCESO
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:28px var(--safe-r) max(28px, env(safe-area-inset-bottom)) var(--safe-l);
  background:
    radial-gradient(800px 500px at 50% -10%, rgba(128,195,67,.14), transparent 65%),
    var(--bg);
  overflow-y:auto;
}
.gate[hidden]{ display:none; }

.gate__box{
  width:100%; max-width:400px; text-align:center;
  animation:rise .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }

.gate__brands{ justify-content:center; margin-bottom:34px; }

.gate__lock{
  width:54px; height:54px; margin:0 auto 20px;
  display:grid; place-items:center; border-radius:16px;
  background:rgba(128,195,67,.10);
  border:1px solid rgba(128,195,67,.28);
  box-shadow:0 0 36px -10px var(--acer-glow);
}
.gate__lock svg{
  width:24px; height:24px; fill:none; stroke:var(--acer);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

.gate__title{
  margin:0 0 8px; font-size:clamp(22px,6vw,27px);
  font-weight:650; letter-spacing:-.02em;
}
.gate__text{
  margin:0 auto 26px; max-width:320px;
  color:var(--txt-2); font-size:15px;
}

.gate__form{ display:flex; flex-direction:column; gap:12px; }

.field{ position:relative; display:flex; }
.field__input{
  flex:1; width:100%;
  font-family:var(--sans); font-size:16px;   /* 16px evita el zoom de iOS */
  color:var(--txt); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:12px;
  padding:15px 50px 15px 16px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field__input::placeholder{ color:var(--txt-3); }
.field__input:focus{
  outline:none; border-color:var(--acer);
  box-shadow:0 0 0 3px rgba(128,195,67,.16);
}
.field__eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:9px; cursor:pointer;
  color:var(--txt-3);
}
.field__eye:hover{ color:var(--txt); }
.field__eye:focus-visible{ outline:2px solid var(--acer); outline-offset:-2px; }

.gate__error{
  margin:2px 0 0; font-size:14px; color:var(--danger);
}
.gate__help{ margin:28px 0 0; }
.gate__help p{ margin:0 0 12px; font-size:13px; color:var(--txt-3); }

/* ---------- canales de soporte ---------- */
.canales{ display:flex; flex-direction:column; gap:8px; }
.canales--gate .canal{ justify-content:center; }

.canal{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--txt-2); font-size:13.5px; text-decoration:none;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.canal:hover{
  color:var(--txt); border-color:rgba(128,195,67,.45);
  background:rgba(128,195,67,.07); text-decoration:none;
}
.canal:focus-visible{ outline:2px solid var(--acer); outline-offset:2px; }
.canal .ico{ color:var(--acer); width:18px; height:18px; }

.canal--grande{
  flex:1 1 260px; padding:16px 18px; gap:14px; align-items:center;
}
.canal--grande .ico{ width:22px; height:22px; }
.canal__label{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3); margin-bottom:3px;
}
.canal__valor{
  display:block; font-size:15px; color:var(--txt); font-weight:550;
  word-break:break-word;
}
.canal--grande:hover .canal__valor{ color:var(--acer); }

.gate.is-shaking .gate__box{ animation:shake .4s ease; }
@keyframes shake{
  20%,60%{ transform:translateX(-7px); }
  40%,80%{ transform:translateX(7px); }
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  border-bottom:1px solid var(--line);
  background:rgba(10,12,14,.82);
  backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:20;
  padding-top:env(safe-area-inset-top);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:14px;
}
.brands{ display:flex; align-items:center; gap:14px; }
.brand{ display:block; width:auto; }
.brand--acer{ height:22px; }
.brand--mg{ height:15px; }
.brands__x{ width:1px; height:20px; background:var(--line-strong); display:block; }

.lockout{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:13px; color:var(--txt-2);
  background:transparent; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; cursor:pointer;
  transition:color .18s ease, border-color .18s ease;
}
.lockout:hover{ color:var(--txt); border-color:var(--line-strong); }
.lockout:focus-visible{ outline:2px solid var(--acer); outline-offset:2px; }
.lockout .ico{ width:14px; height:14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:56px 36px; max-width:640px; }
.eyebrow{
  margin:0 0 10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acer); display:flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--acer); box-shadow:0 0 0 4px rgba(128,195,67,.18);
}
.hero h1{
  margin:0 0 14px; font-size:clamp(30px,7vw,46px); line-height:1.1;
  font-weight:650; letter-spacing:-.02em;
}
.hl{ color:var(--acer); }
.lead{ margin:0; color:var(--txt-2); font-size:clamp(15px,2.2vw,17px); }
.lead strong{ color:var(--txt); font-weight:600; }

/* ============================================================
   STAGE
   ============================================================ */
.stage{
  display:grid; grid-template-columns:minmax(0,var(--card-max)) minmax(0,1fr);
  gap:32px; align-items:start; padding-bottom:56px;
}
@media (max-width:880px){ .stage{ grid-template-columns:1fr; gap:26px; } }

/* ================= TARJETA ================= */
/* el interior escala con el ancho de la tarjeta, no con el del viewport */
.card-scene{
  perspective:1600px;
  max-width:var(--card-max);
  container-type:inline-size;
}
.card{
  position:relative; width:100%; aspect-ratio:1.586;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,.9,.25,1);
  cursor:pointer; border-radius:var(--radius-lg);
  outline:none; -webkit-tap-highlight-color:transparent;
}
.card.is-flipped{ transform:rotateY(180deg); }
.card:focus-visible{ box-shadow:0 0 0 3px var(--acer-glow); }

.card__face{
  position:absolute; inset:0;
  border-radius:var(--radius-lg);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; flex-direction:column;
}
.card__face--front{
  padding:5.2cqw;
  background:
    radial-gradient(130% 110% at 110% 0%, rgba(128,195,67,.55) 0%, rgba(128,195,67,.12) 32%, transparent 58%),
    linear-gradient(145deg, #1D2228 0%, #121519 45%, #0C0E11 100%);
}
.card__face--back{
  transform:rotateY(180deg);
  padding:0 0 4.8cqw;
  background:
    radial-gradient(120% 100% at 0% 100%, rgba(128,195,67,.18) 0%, transparent 55%),
    linear-gradient(160deg, #222830 0%, #161A20 55%, #0E1114 100%);
}
.card__sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.07) 46%, transparent 58%);
}

.card__top{ display:flex; align-items:center; gap:3cqw; }
.card__logo-acer{ height:5cqw; width:auto; display:block; }
.card__sep{
  width:1px; height:4.4cqw; background:rgba(255,255,255,.3); display:block; flex:none;
}
.card__type{
  font-size:2.35cqw; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:.7cqw 2.2cqw; white-space:nowrap;
}

.card__mid{ display:flex; align-items:center; gap:2.8cqw; margin-top:auto; padding-top:2cqw; }
.card__mid .card__type{ margin-left:auto; }
.chip{
  width:10.5cqw; height:7.9cqw; border-radius:1.4cqw; flex:none;
  background:linear-gradient(140deg,#E8C87A 0%,#C9A44F 38%,#F2DFA8 60%,#B8933F 100%);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);
  gap:.25cqw; padding:.9cqw; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.chip span{ background:rgba(0,0,0,.18); border-radius:1px; }
.nfc{
  width:4.8cqw; height:4.8cqw; fill:none; stroke:rgba(255,255,255,.6);
  stroke-width:1.8; stroke-linecap:round;
}

.card__number{
  font-family:var(--mono); font-size:5.6cqw;
  letter-spacing:.09em; margin:3.4cqw 0 3.8cqw; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

.card__bottom{ display:flex; align-items:flex-end; gap:4.3cqw; }
.card__field{ display:flex; flex-direction:column; gap:.7cqw; min-width:0; }
.card__label{
  font-size:2.05cqw; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); white-space:nowrap;
}
.card__value{
  font-family:var(--mono); font-size:3.2cqw; color:#fff;
  letter-spacing:.05em; white-space:nowrap;
}
.card__logo-mg{ height:3.4cqw; width:auto; opacity:.95; display:block; }

/* Marca de red. En una tarjeta real ocupa ~13 mm de los 85,6 mm de ancho,
   o sea algo más del 15%: con cqw sale la misma proporción a cualquier tamaño. */
.card__red{
  width:15cqw; height:auto; margin-left:auto; display:block; flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* --- dorso --- */
.card__stripe{
  height:11cqw; margin-top:5.2cqw;
  background:linear-gradient(180deg,#0A0C0F 0%,#000 50%,#0A0C0F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(255,255,255,.05);
}
.card__sign{ display:flex; align-items:center; gap:2.4cqw; padding:3.8cqw 5.2cqw 0; }
.card__sign-strip{
  flex:1; height:8.1cqw; border-radius:1cqw;
  background:repeating-linear-gradient(135deg,#EDEDED 0 7px,#E0E0E0 7px 14px);
  display:flex; align-items:center; padding:0 2.4cqw; overflow:hidden;
}
.card__sign-strip span{
  font-family:"Segoe Script","Brush Script MT",cursive;
  color:#20242A; font-size:3.6cqw; white-space:nowrap;
}
.card__cvv{
  background:#fff; border-radius:1cqw; padding:1cqw 2.2cqw;
  display:flex; flex-direction:column; align-items:center; gap:.2cqw; flex:none;
}
.card__cvv .card__label{ color:#5B646C; }
.card__cvv .card__value{ color:#111; font-size:3.4cqw; }

.card__fineprint{
  margin:3.4cqw 5.2cqw 0; font-size:2.3cqw; line-height:1.5;
  color:rgba(255,255,255,.45); max-width:90%;
}
.card__back-brands{
  margin-top:auto; padding:0 5.2cqw; display:flex; align-items:center; gap:2.9cqw; opacity:.7;
}
.card__back-brands img:first-child{ height:3.1cqw; }
.card__back-brands img:last-child{ height:2.4cqw; }

/* ============================================================
   BOTONES
   ============================================================ */
.card-actions{
  display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;
  max-width:var(--card-max);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:14px; font-weight:550;
  min-height:44px; padding:11px 18px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--txt);
  transition:background .18s ease, border-color .18s ease, transform .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ background:#222932; border-color:rgba(255,255,255,.26); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.6; cursor:wait; }
.btn--primary{ background:var(--acer); border-color:var(--acer); color:#0A0C0E; font-weight:650; }
.btn--primary:hover{ background:#8FD24E; border-color:#8FD24E; }
.btn--block{ width:100%; min-height:50px; font-size:15px; }
.btn:focus-visible{ outline:2px solid var(--acer); outline-offset:2px; }

.hint{ margin:12px 0 0; font-size:12.5px; color:var(--txt-3); }
.hint span{ color:var(--acer); font-family:var(--mono); }

/* ============================================================
   PANELES
   ============================================================ */
.panel-area{ display:flex; flex-direction:column; gap:16px; }
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px;
}
.panel__title{
  margin:0 0 14px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3); font-weight:600;
}
.data{ list-style:none; margin:0; padding:0; }
.data__row{
  display:grid; grid-template-columns:110px 1fr auto;
  align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.data__row:last-child{ border-bottom:0; padding-bottom:0; }
.data__row:first-child{ padding-top:0; }
.data--plain .data__row{ grid-template-columns:110px 1fr; }
.data__label{ font-size:13px; color:var(--txt-2); }
.data__value{ font-size:15px; color:var(--txt); word-break:break-word; min-width:0; }
.data__value.mono{ font-size:14.5px; letter-spacing:.04em; }

.copy{
  width:36px; height:36px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); border-radius:9px; cursor:pointer;
  background:transparent; color:var(--txt-2);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.copy:hover{ color:var(--acer); border-color:rgba(128,195,67,.45); background:rgba(128,195,67,.08); }
.copy:focus-visible{ outline:2px solid var(--acer); outline-offset:2px; }
.copy--ghost{ border-color:transparent; cursor:default; }
.copy[disabled]{ opacity:.3; cursor:not-allowed; }
.copy[disabled]:hover{ color:var(--txt-2); border-color:var(--line); background:transparent; }

.limit{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.limit__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.limit__amount{ font-family:var(--mono); font-size:19px; color:var(--acer); font-weight:600; }
.limit__bar{
  height:7px; border-radius:999px; background:var(--surface-2);
  margin-top:10px; overflow:hidden; border:1px solid var(--line);
}
.limit__fill{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--acer-dim),var(--acer));
  box-shadow:0 0 14px var(--acer-glow);
  transition:width .6s cubic-bezier(.3,.9,.25,1);
}
.limit__note{ margin:9px 0 0; font-size:12.5px; color:var(--txt-3); }

/* ============================================================
   INSTRUCCIONES
   ============================================================ */
.howto{ padding-bottom:72px; }
.howto__head{ max-width:620px; margin-bottom:24px; }
.howto__head h2{ margin:0 0 8px; font-size:clamp(22px,5vw,28px); letter-spacing:-.015em; font-weight:650; }
.howto__head p{ margin:0; color:var(--txt-2); font-size:15px; }

.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.tab{
  font:inherit; font-size:14px; font-weight:550; cursor:pointer;
  min-height:40px; padding:9px 16px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line); background:transparent; color:var(--txt-2);
  transition:all .18s ease; -webkit-tap-highlight-color:transparent;
}
.tab:hover{ color:var(--txt); border-color:var(--line-strong); }
.tab.is-active{ background:rgba(128,195,67,.12); border-color:rgba(128,195,67,.45); color:var(--acer); }
.tab:focus-visible{ outline:2px solid var(--acer); outline-offset:2px; }

.steps{
  list-style:none; counter-reset:step; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;
}
.steps li{
  counter-increment:step;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px;
}
.steps li::before{
  content:counter(step);
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:8px; margin-bottom:12px;
  background:rgba(128,195,67,.12); border:1px solid rgba(128,195,67,.3);
  color:var(--acer); font-family:var(--mono); font-size:12.5px; font-weight:600;
}
.steps h3{ margin:0 0 6px; font-size:15px; font-weight:620; letter-spacing:-.01em; }
.steps p{ margin:0; font-size:14px; color:var(--txt-2); }
.steps strong{ color:var(--txt); font-weight:600; }
.steps .mono{ color:var(--txt); font-size:13.5px; }

.note{
  margin-top:16px; padding:15px 18px; border-radius:var(--radius);
  background:rgba(128,195,67,.07); border:1px solid rgba(128,195,67,.22);
  font-size:14px; color:var(--txt-2);
}
.note strong{ color:var(--acer); font-weight:600; }
.note--warn{ background:rgba(235,170,60,.07); border-color:rgba(235,170,60,.25); }
.note--warn strong{ color:#EBAA3C; }

/* ============================================================
   SOPORTE
   ============================================================ */
.soporte{ padding-bottom:72px; }
.soporte__box{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px;
}
.soporte__box h2{
  margin:0 0 8px; font-size:clamp(20px,4vw,25px);
  letter-spacing:-.015em; font-weight:650;
}
.soporte__text{
  margin:0 0 22px; color:var(--txt-2); font-size:15px; max-width:52ch;
}
.soporte .canales{ flex-direction:row; flex-wrap:wrap; gap:12px; }

.soporte__aviso{
  display:flex; align-items:flex-start; gap:13px;
  margin-top:22px; padding:16px 18px; border-radius:var(--radius);
  background:rgba(128,195,67,.07); border:1px solid rgba(128,195,67,.22);
}
.soporte__aviso .ico{ color:var(--acer); width:20px; height:20px; margin-top:1px; }
.soporte__aviso p{ margin:0; font-size:13.5px; color:var(--txt-2); line-height:1.6; }
.soporte__aviso strong{ color:var(--acer); font-weight:600; }

/* ============================================================
   FOOTER · TOAST
   ============================================================ */
.footer{ border-top:1px solid var(--line); background:rgba(10,12,14,.5); }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-block:24px; padding-bottom:max(24px, env(safe-area-inset-bottom));
}
.brands--footer{ opacity:.6; }
.footer__texto{ text-align:right; }
.footer p{ margin:0; font-size:12.5px; color:var(--txt-3); }
.footer__soporte{ margin-top:5px !important; }

.toast{
  position:fixed; left:50%; bottom:max(28px, env(safe-area-inset-bottom));
  transform:translate(-50%,16px);
  background:var(--acer); color:#0A0C0E;
  font-size:14px; font-weight:600;
  padding:11px 20px; border-radius:11px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
  z-index:110; max-width:calc(100vw - 40px); text-align:center;
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:640px){
  :root{ --gutter:16px; }

  .hero{ padding-block:36px 26px; }
  .stage{ padding-bottom:40px; }

  /* la tarjeta ocupa todo el ancho disponible en el teléfono */
  .card-scene, .card-actions{ max-width:none; }

  .panel{ padding:18px; }
  .data__row{ grid-template-columns:86px 1fr auto; gap:10px; padding:12px 0; }
  .data--plain .data__row{ grid-template-columns:86px 1fr; }
  .data__label{ font-size:12.5px; }
  .data__value{ font-size:14.5px; }
  .data__value.mono{ font-size:14px; letter-spacing:0; }

  .limit__amount{ font-size:17px; }

  .btn{ flex:1 1 auto; min-height:48px; }
  .lockout span{ display:none; }
  .lockout{ padding:9px 11px; }

  /* tabs en carrusel horizontal, sin romper en dos líneas */
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-inline:calc(var(--safe-l) * -1) calc(var(--safe-r) * -1);
    padding-inline:var(--safe-l) var(--safe-r);
    scroll-snap-type:x proximity;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ scroll-snap-align:start; }

  .steps{ grid-template-columns:1fr; }
  .howto{ padding-bottom:48px; }

  .footer__inner{ flex-direction:column; align-items:flex-start; gap:12px; }
  .footer__texto{ text-align:left; }

  .soporte{ padding-bottom:48px; }
  .soporte__box{ padding:22px; }
  .soporte .canales{ flex-direction:column; }
  .canal--grande{ flex:1 1 auto; }
}

@media (max-width:380px){
  .brand--acer{ height:19px; }
  .brand--mg{ height:13px; }
  .data__row{ grid-template-columns:78px 1fr auto; gap:8px; }
  .data--plain .data__row{ grid-template-columns:78px 1fr; }
  .data__value.mono{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  .card{ transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}