/* ===========================================================
   TapeCarbon México — sistema visual

   Claro, con el verde como color de marca.

   La versión anterior era oscura y argumentaba que las fotos del
   producto eran de estudio sobre negro. No lo son: están sobre
   blanco (mirá kit-full-negro.webp). Sobre fondo claro apoyan
   mejor que sobre oscuro, que era donde abrían el agujero.

   El hero sigue siendo oscuro porque la foto lo es: un interior de
   coche con luz ámbar. Texto claro encima, como en cualquier portada
   con imagen. Es la única zona que invierte.

   Los colores, un trabajo cada uno:
      verde oscuro = marca y valor  (precio, kickers, enlaces)
      verde sólido = acción         (comprar, continuar)
      rojo         = tiempo         (contador, escasez)
      ámbar        = estrellas      (convención, no decoración)

   El verde hace dos trabajos, marca y acción, y eso sólo funciona
   porque la acción siempre va dentro de un botón relleno: lo que
   distingue al CTA no es el tono, es la forma.

   Contrastes verificados contra WCAG AA sobre blanco:
      --ink 16.7:1 · --ink-2 7.3:1 · --ink-3 5.5:1
   Y sobre --bg-dark, que es la superficie más oscura:
      --ink 14.4:1 · --ink-2 6.3:1 · --ink-3 4.7:1
      --gold 6.6:1 · --green con texto blanco 5.4:1 · --red 5.8:1

   Los nombres de las llaves NO cambian: hay estilos en línea y otra
   página que los usan. Cambian los valores. --gold quedó llamándose
   así aunque ahora sea verde; renombrarlo rompería gracias.html y
   los style="" del HTML sin ganar nada.
   =========================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid #E8B10C;outline-offset:2px}
::selection{background:#E8B10C;color:#0A0B0D}

/* ---------- tokens ----------
   Los nombres son los mismos de antes: hay estilos en línea y otra
   página que los usan. Cambian los valores, no las llaves. */
:root{
  --bg:#FFFFFF;
  --bg-soft:#F2F7F3;
  --bg-card:#FFFFFF;
  --bg-dark:#E8F0EA;

  --line:#DCE6DF;
  --line-strong:#BECDC3;

  --ink:#11211A;
  --ink-2:#4A5A52;
  --ink-3:#5E6D65;

  /* Marca y valor. Se sigue llamando "gold" por compatibilidad. */
  --gold:#0C6B35;
  --gold-2:#0A5F2B;
  --gold-soft:rgba(12,107,53,.10);

  --blue:#0C6B35;
  --blue-soft:rgba(12,107,53,.10);

  /* Acción. --green-dark es el verde que se usa como TEXTO sobre claro. */
  --green:#0F7A3D;
  --green-dark:#0C6B35;
  --green-deep:#0A5F2B;

  /* Sólo para lo que va encima del hero oscuro. */
  --green-light:#5FE08C;

  --red:#C1272D;
  --red-soft:rgba(193,39,45,.09);
  --amber:#9A6200;

  /* Las estrellas se quedan ámbar: es convención, no decoración. El tono
     es profundo porque un ámbar claro sobre blanco no llega al 3:1 que pide
     WCAG para un glifo que transmite información. */
  --star:#B57606;

  --r:9px;
  --r-l:14px;
  --wrap:1180px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.narrow{max-width:820px}
.sec{padding:72px 0}
.sec-soft{background:var(--bg-soft);border-block:1px solid var(--line)}
.sec-dark{background:var(--bg-dark);border-block:1px solid var(--line)}

h1,h2,h3,h4{line-height:1.12;font-weight:800;letter-spacing:-.028em;color:var(--ink)}
h1{font-size:clamp(1.75rem,3.4vw,2.3rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.35rem)}
h3{font-size:1.08rem}
p{color:var(--ink-2)}

.sec-head{margin-bottom:40px;max-width:660px}
.sec-head.mid{margin-inline:auto;text-align:center}
.sec-head p{margin-top:11px;font-size:1.04rem}
.kicker{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:11px;
}

.cols{display:grid;gap:20px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r);font-weight:800;font-size:15px;
  border:1px solid transparent;letter-spacing:.005em;
  transition:transform .14s var(--ease),background .16s,border-color .16s,box-shadow .16s;
}
.btn:active{transform:translateY(1px)}
.btn-buy{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(15,122,61,.22)}
.btn-buy:hover{background:var(--green-deep);box-shadow:0 10px 26px rgba(15,122,61,.30)}
.btn-dark{background:var(--gold);color:#fff}
.btn-dark:hover{background:var(--gold-2)}
.btn-line{border-color:var(--line-strong);color:var(--ink);background:var(--bg)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-lg{width:100%;padding:18px 24px;font-size:16.5px}
.btn-hero{padding:17px 32px;font-size:16px}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------- barra de oferta ---------- */
.announce{
  background:linear-gradient(90deg,#8E1B14,#C4231A 46%,#8E1B14);
  color:#fff;font-size:13.5px;position:relative;z-index:60;
}
.announce .wrap{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:9px 20px;flex-wrap:wrap;text-align:center;
}
.announce b{font-weight:800}
.an-live{
  width:7px;height:7px;border-radius:50%;background:#FFD05A;flex:none;
  box-shadow:0 0 0 0 rgba(255,208,90,.75);animation:anPulse 2s infinite;
}
@keyframes anPulse{70%{box-shadow:0 0 0 7px rgba(255,208,90,0)}100%{box-shadow:0 0 0 0 rgba(255,208,90,0)}}
@media (prefers-reduced-motion:reduce){.an-live{animation:none}}
.an-clock{
  font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.06em;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.22);
  padding:3px 10px;border-radius:6px;
}
.announce.ended{background:var(--bg-soft);color:var(--ink-2)}
.announce.ended .an-live,.announce.ended .an-clock{display:none}

/* ---------- encabezado ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:42px;width:auto;display:block}
.ftr .logo img{height:46px}
.mainnav{display:flex;gap:2px;margin-left:16px}
.mainnav a{padding:8px 13px;border-radius:7px;font-size:14.5px;font-weight:600;
  color:var(--ink-2);transition:color .16s,background .16s}
.mainnav a:hover{color:var(--gold);background:var(--gold-soft)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:var(--r);
  border:1px solid var(--line-strong);display:grid;place-items:center;transition:.16s;
}
.icon-btn:hover{border-color:var(--gold);background:var(--gold-soft)}
.icon-btn svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.8}
.badge{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--bg);
}
.badge[hidden]{display:none}
.burger{display:none}
.mnav{display:none;border-top:1px solid var(--line);padding:8px 20px 18px;background:var(--bg-soft)}
.mnav.on{display:block}
.mnav a{display:block;padding:13px 4px;font-weight:600;border-bottom:1px solid var(--line);color:var(--ink-2)}
.mnav a:last-child{border-bottom:0}
.mnav a:hover{color:var(--gold)}

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative;min-height:clamp(470px,74vh,730px);
  display:flex;align-items:center;background:#07080A;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero-body{
  position:relative;z-index:2;width:100%;padding:56px 0;
  background:linear-gradient(100deg,
    rgba(7,8,10,.95) 0%, rgba(7,8,10,.88) 34%,
    rgba(7,8,10,.52) 64%, rgba(7,8,10,.18) 100%);
}
@media (min-width:981px){.hero-body{min-height:inherit;display:flex;align-items:center}}

.hero-kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.19em;
  text-transform:uppercase;color:var(--green-light);margin-bottom:16px;
}
.hero-title{
  font-size:clamp(2.5rem,6.6vw,4.7rem);line-height:.97;letter-spacing:-.038em;
  font-weight:900;color:#fff;margin-bottom:18px;text-wrap:balance;
}
.hero-sub{color:#C3CAD3;font-size:clamp(1rem,1.65vw,1.14rem);max-width:46ch;margin-bottom:24px}
.hero-rate{display:flex;align-items:center;gap:10px;font-size:14px;color:#C3CAD3;margin-bottom:28px}
.hero-rate .stars{color:var(--star);font-size:15px}
.hero-rate b{color:#fff}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-price{font-size:14px;color:#98A0AA;line-height:1.3}
.hero-price b{display:block;font-size:25px;font-weight:900;color:#fff;letter-spacing:-.025em}
.hero-price small{display:block;font-size:12px;color:#828A94;margin-top:2px}

.hero-down{
  position:absolute;left:50%;bottom:18px;z-index:3;translate:-50% 0;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.3);border-radius:14px;
  display:grid;justify-items:center;padding-top:8px;
}
.hero-down span{width:3px;height:8px;border-radius:2px;background:rgba(255,255,255,.7);
  animation:heroDown 1.8s ease-in-out infinite}
@keyframes heroDown{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(9px);opacity:.2}}
@media (prefers-reduced-motion:reduce){.hero-down span{animation:none}}
@media (max-width:660px){.hero-down{display:none}}

/* ===========================================================
   Bloque de oferta — el precio deja de estar escondido
   =========================================================== */
.oferta{background:var(--bg);padding:0 0 10px}
.oferta-card{
  position:relative;margin:-46px auto 0;max-width:790px;
  background:linear-gradient(168deg,#FFFFFF,#F2F7F3);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 20px 48px rgba(17,33,26,.10);
  padding:clamp(26px,4vw,42px);text-align:center;
}
.oferta-card::before{
  content:"";position:absolute;top:-1px;left:12%;right:12%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.oferta-flag{
  display:inline-block;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 15px;border-radius:999px;margin-bottom:18px;
}
.oferta-card h2{font-size:clamp(1.22rem,2.9vw,1.7rem);margin-bottom:10px}
.oferta-rate{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;color:var(--ink-2);margin-bottom:24px}
.oferta-rate .stars{color:var(--star);font-size:15px}
.oferta-rate b{color:var(--ink)}

.oferta-precio{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}
.oferta-precio s{color:var(--ink-3);font-size:19px}
.oferta-precio b{
  font-size:clamp(2.7rem,7.4vw,3.9rem);font-weight:900;letter-spacing:-.04em;
  color:var(--gold);line-height:1;
}
.oferta-off{background:var(--red);color:#fff;font-size:13px;font-weight:800;
  padding:5px 11px;border-radius:6px}
.oferta-cuotas{font-size:14px;color:var(--ink-2);margin:9px 0 26px}
.oferta-cuotas b{color:var(--ink)}

.oferta-lista{display:grid;gap:11px;max-width:452px;margin:0 auto 24px;text-align:left}
/* Bloque y no flex: estos <li> mezclan texto suelto con <b>, y en flex cada
   tramo se vuelve una columna. */
.oferta-lista li{display:block;position:relative;padding-left:30px;
  font-size:14.5px;color:var(--ink-2);line-height:1.5}
.oferta-lista li::before{
  content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.oferta-lista b{color:var(--ink)}

/* Inline-block y no flex: adentro hay texto suelto entre <b> y <time>, y
   en flex cada tramo se separa con el gap. */
.oferta-timer{
  display:inline-block;text-align:center;line-height:1.6;
  background:var(--red-soft);border:1px solid rgba(193,39,45,.30);
  color:var(--red);border-radius:var(--r);padding:10px 17px;font-size:13.5px;margin-bottom:22px;
}
.oferta-timer time{font-variant-numeric:tabular-nums;font-weight:800;color:var(--red)}
.oferta-timer b{color:var(--ink)}
.oferta-timer[hidden]{display:none}

.oferta-cta{width:100%;max-width:470px;padding:20px 26px;font-size:clamp(15px,2.4vw,17.5px)}
.oferta-mp{font-size:12.5px;color:var(--ink-3);margin-top:13px}

/* ===========================================================
   Bloque de producto
   =========================================================== */
.product{padding:56px 0 62px}
.product-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:46px;align-items:start}

.gallery{position:sticky;top:88px}
.gal-main{
  position:relative;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:var(--bg-soft);aspect-ratio:4/3;
}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-main img.contain{object-fit:contain;padding:16px;background:var(--bg-soft)}
.gal-flag{
  position:absolute;top:12px;left:12px;background:var(--red);color:#fff;
  font-size:12px;font-weight:800;padding:5px 11px;border-radius:6px;letter-spacing:.03em;
}
.gal-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.gal-thumbs button{
  border:1px solid var(--line);border-radius:7px;overflow:hidden;aspect-ratio:1;
  background:var(--bg-soft);transition:border-color .16s;
}
.gal-thumbs button:hover{border-color:var(--line-strong)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.gal-thumbs button.on{border-color:var(--gold);border-width:2px}

.buy-title{font-size:clamp(1.35rem,2.6vw,1.72rem);margin-bottom:9px}
.buy-sub{font-size:15px;color:var(--ink-2);margin-bottom:15px}
.rating{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);margin-bottom:19px}
.stars{color:var(--star);letter-spacing:1px;font-size:14px}
.rating a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

.pricebox{border-block:1px solid var(--line);padding:18px 0;margin-bottom:21px}
.price-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-now{font-size:37px;font-weight:900;letter-spacing:-.035em;color:var(--gold)}
.price-was{color:var(--ink-3);text-decoration:line-through;font-size:16px}
.price-off{background:var(--red);color:#fff;font-size:12.5px;font-weight:800;
  padding:3px 9px;border-radius:5px}
.price-note{font-size:13.5px;color:var(--ink-2);margin-top:7px}
.price-note b{color:var(--ink)}

/* selector de vehículo */
.picker{border:1px solid var(--line-strong);border-radius:var(--r-l);
  padding:19px;margin-bottom:21px;background:var(--bg-card)}
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.picker-head h2{font-size:15.5px;font-weight:800}
.picker-head span{font-size:12.5px;color:var(--ink-3)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields .f-year{grid-column:span 2}
.f label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-3);
  margin-bottom:6px;letter-spacing:.05em;text-transform:uppercase}

.sel{position:relative}
.sel-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 13px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--bg-soft);font-size:14.5px;font-weight:600;text-align:left;transition:.16s;
}
.sel-btn:hover:not(:disabled){border-color:var(--ink-3)}
.sel-btn:disabled{background:var(--bg-dark);color:var(--ink-3);cursor:not-allowed}
.sel-btn.ph{font-weight:500;color:var(--ink-3)}
.sel-btn svg{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:2.2;flex:none;transition:transform .18s}
.sel.open .sel-btn{border-color:var(--gold)}
.sel.open .sel-btn svg{transform:rotate(180deg)}
.sel.set .sel-btn{border-color:var(--green);color:var(--ink)}
.sel-pop{
  display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;
  background:var(--bg-card);border:1px solid var(--line-strong);border-radius:var(--r);
  box-shadow:0 16px 40px rgba(17,33,26,.14);overflow:hidden;
}
.sel.open .sel-pop{display:block}
.sel-search{width:100%;padding:11px 13px;border:0;border-bottom:1px solid var(--line);
  font-size:14px;outline:0;background:var(--bg-dark);color:var(--ink)}
.sel-search::placeholder{color:var(--ink-3)}
.sel-list{max-height:250px;overflow-y:auto;scrollbar-width:thin}
.sel-list li{padding:10px 13px;font-size:14px;cursor:pointer}
.sel-list li:hover{background:var(--gold-soft);color:var(--gold)}
.sel-list .none{color:var(--ink-3);cursor:default;font-style:italic}
.sel-list .none:hover{background:none;color:var(--ink-3)}

.fit{margin-top:14px;font-size:13.5px;display:flex;gap:9px;align-items:flex-start;color:var(--ink-2)}
.fit svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--ink-3);fill:none;stroke-width:2}
.fit.ok{color:var(--green-dark);font-weight:600}
.fit.ok svg{stroke:var(--green)}
.fit b{color:var(--ink)}
.fit a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;font-weight:600}

/* kits y colores */
.opt{margin-bottom:21px}
.opt h2{font-size:13px;font-weight:800;margin-bottom:11px;letter-spacing:.04em;text-transform:uppercase}
.opt h2 span{font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:0}

.kits{display:grid;gap:9px}
.kit{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  border:1px solid var(--line-strong);border-radius:var(--r);padding:14px;
  text-align:left;background:var(--bg-card);transition:.16s;
}
.kit:hover{border-color:var(--ink-3)}
.kit.on{border-color:var(--gold);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold)}
.kit .dot{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none}
.kit.on .dot{border:5px solid var(--gold)}
.kit b{display:block;font-size:14.5px}
.kit small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.kit .kp{text-align:right;white-space:nowrap}
.kit .kp b{font-size:16.5px;color:var(--gold)}
.kit .kp s{font-size:12px;color:var(--ink-3)}
.kit .flag{
  position:absolute;top:-9px;left:12px;background:var(--gold);color:#fff;font-size:10.5px;
  font-weight:800;padding:2px 8px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase;
}

.incl{margin-top:12px;display:grid;gap:7px;padding-left:2px}
.incl li{display:flex;gap:9px;font-size:13px;color:var(--ink-2);align-items:flex-start;line-height:1.45}
.incl svg{width:14px;height:14px;flex:none;margin-top:3px;stroke:var(--green);fill:none;stroke-width:2.6}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:var(--r);
  border:1px solid var(--line-strong);background:var(--bg-card);font-size:13.5px;font-weight:600;transition:.16s;
}
.chip i{width:19px;height:19px;border-radius:50%;border:1px solid rgba(17,33,26,.20);flex:none}
.chip:hover{border-color:var(--ink-3)}
.chip.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}

.gift{display:flex;gap:12px;align-items:center;border:1px dashed var(--line-strong);
  border-radius:var(--r);padding:12px 14px;margin-bottom:21px;background:var(--gold-soft)}
.gift img{width:44px;height:44px;object-fit:contain;flex:none}
.gift b{font-size:13.5px;display:block;color:var(--gold)}
.gift small{font-size:12.5px;color:var(--ink-2)}

.stockline{font-size:13px;color:var(--amber);font-weight:700;margin-top:12px;text-align:center}
.assur{display:grid;gap:10px;margin-top:19px;padding-top:19px;border-top:1px solid var(--line)}
.assur li{display:flex;gap:10px;font-size:13.5px;color:var(--ink-2);align-items:flex-start}
.assur svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:var(--green);fill:none;stroke-width:2}
.assur b{color:var(--ink)}

/* ---------- tira de confianza ---------- */
.strip{border-block:1px solid var(--line);background:var(--bg-soft)}
.strip ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.strip li{background:var(--bg-soft);padding:20px 16px;display:flex;gap:11px;align-items:center}
.strip svg{width:22px;height:22px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.7}
.strip b{display:block;font-size:14px}
.strip small{font-size:12.5px;color:var(--ink-3)}

/* ---------- bloques con foto ---------- */
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:46px;align-items:center}
.feat.flip .feat-txt{order:2}
.feat-img{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)}
.feat-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.feat h2{margin-bottom:13px}
.feat ul{margin-top:19px;display:grid;gap:11px}
.feat li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2);align-items:flex-start}
.feat li svg{width:18px;height:18px;flex:none;margin-top:2px;stroke:var(--green);fill:none;stroke-width:2.2}
.feat li b{color:var(--ink)}

.tile{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--bg-card)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-soft)}
.tile div{padding:17px 18px}
.tile h3{margin-bottom:7px}
.tile p{font-size:14px}

/* ---------- comparador antes / después ---------- */
.cmp{
  position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:3/2;touch-action:none;user-select:none;cursor:ew-resize;background:#000;
}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .b{clip-path:inset(0 0 0 var(--pos,50%))}
.cmp .tag{
  position:absolute;bottom:12px;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:5px;
  background:rgba(0,0,0,.72);color:#fff;z-index:3;
}
.cmp .tag-a{left:12px}
.cmp .tag-b{right:12px;background:var(--green);color:#fff}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;
  z-index:4;translate:-50% 0;box-shadow:0 0 14px rgba(0,0,0,.45)}
.cmp .bar::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:40px;height:40px;
  border-radius:50%;background:var(--gold);box-shadow:0 3px 14px rgba(0,0,0,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:19px;
}
.cmp-cap{font-size:13px;color:var(--ink-3);margin-top:10px}

/* ---------- ficha técnica ---------- */
.specs{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.specs tr{border-bottom:1px solid var(--line)}
.specs tr:last-child{border-bottom:0}
.specs td{padding:13px 16px;font-size:14.5px}
.specs td:first-child{color:var(--ink-3);width:44%;background:var(--bg-soft)}
.specs td:last-child{font-weight:700}

/* ---------- comparativa ---------- */
.vs{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--bg-card)}
.vs th{
  text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 16px;background:var(--bg-dark);border-bottom:1px solid var(--line);
}
.vs th:nth-child(2){color:var(--gold);text-align:center}
.vs th:nth-child(3){text-align:center}
.vs td{padding:13px 16px;font-size:14.5px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.vs tr:last-child td{border-bottom:0}
.vs td:nth-child(2),.vs td:nth-child(3){text-align:center;width:22%;font-size:18px;font-weight:800}
.vs .si{color:var(--green-dark)}
.vs .no{color:var(--ink-3)}
.vs tbody tr:nth-child(odd){background:rgba(17,33,26,.022)}

/* ---------- detalles ---------- */
.det{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--bg-card)}
.det img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-soft)}
.det div{padding:18px 19px}
.det h3{margin-bottom:7px}
.det p{font-size:14px}

/* ---------- satisfacción ---------- */
.garantia-blk .sec-head p{font-size:1.05rem}
.garantia-blk .sec-head b{color:var(--gold)}
.garantia-stars{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px}
.garantia-stars .stars{font-size:19px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.nums div{text-align:center;border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px 14px;background:var(--bg-card)}
.nums b{display:block;font-size:clamp(2.1rem,5.2vw,3rem);font-weight:900;
  letter-spacing:-.035em;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.nums small{display:block;font-size:12px;color:var(--ink-3);margin-top:8px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* ---------- opiniones ---------- */
.rev-top{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r-l);padding:22px 24px;
  margin-bottom:22px;background:var(--bg-card)}
.rev-big{font-size:46px;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--gold)}
.rev-bars{flex:1;min-width:220px;display:grid;gap:5px}
.rb{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3)}
.rb .t{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.rb .t i{display:block;height:100%;background:var(--gold)}

.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{border:1px solid var(--line);border-radius:var(--r-l);padding:18px;background:var(--bg-card)}
.rev[hidden]{display:none}
.rev-tag{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);background:var(--gold-soft);
  border:1px solid rgba(12,107,53,.26);padding:3px 9px;border-radius:4px;margin-bottom:10px;
}
.rev-foto{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  margin-bottom:14px;background:var(--bg-soft);display:block}
.rev-hd{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.rev-av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--gold-soft);border:1px solid rgba(12,107,53,.26);
  font-size:13px;font-weight:800;color:var(--gold)}
.rev-hd b{font-size:14px;display:block;line-height:1.3}
.rev-hd small{font-size:12px;color:var(--ink-3)}
.rev .stars{margin-bottom:7px}
.rev p{font-size:14px;line-height:1.6}
.rev .ok{margin-top:12px;font-size:12px;color:var(--green-dark);font-weight:700;
  display:flex;align-items:center;gap:5px}
.rev .ok svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2.5}

/* ---------- preguntas ---------- */
.faq{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--bg-card)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;padding:17px 19px;font-weight:700;font-size:15px;cursor:pointer;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--bg-soft);color:var(--gold)}
.faq summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);rotate:45deg;translate:0 -3px;transition:rotate .18s}
.faq details[open] summary{color:var(--gold)}
.faq details[open] summary::after{rotate:225deg;translate:0 3px}
.faq .ans{padding:0 19px 19px;font-size:14.5px;color:var(--ink-2);max-width:70ch}

/* ---------- garantía ---------- */
.warr{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  border:1px solid rgba(12,107,53,.26);border-radius:var(--r-l);padding:30px;
  background:linear-gradient(120deg,var(--gold-soft),var(--bg-card) 60%)}
.warr-seal{width:100px;height:100px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-dark);border:2px solid var(--gold);text-align:center;
  box-shadow:0 0 0 7px rgba(12,107,53,.08)}
.warr-seal b{font-size:31px;font-weight:900;display:block;line-height:1;color:var(--gold)}
.warr-seal small{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- cierre ---------- */
.final{text-align:center}
.clock{display:flex;gap:9px;justify-content:center;margin:22px 0 20px}
.clock div{min-width:74px;border:1px solid var(--line-strong);border-radius:var(--r);
  padding:12px 7px;background:var(--bg-card)}
.clock b{font-size:29px;font-weight:900;display:block;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--gold)}
.clock small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- pie ---------- */
.ftr{background:var(--bg-dark);border-top:1px solid var(--line);padding:52px 0 24px;font-size:14px}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:34px}
.ftr h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.ftr li{margin-bottom:9px}
.ftr li a,.ftr li button{color:var(--ink-2);font-size:14px;text-align:left}
.ftr li a:hover,.ftr li button:hover{color:var(--gold)}
.pays{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.pays span{font-size:11px;font-weight:700;padding:5px 9px;border-radius:5px;
  border:1px solid var(--line-strong);background:var(--bg-card);color:var(--ink-2)}
.ftr-btm{margin-top:34px;padding-top:19px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}

/* ---------- carrito y modales ---------- */
.veil{position:fixed;inset:0;z-index:100;background:rgba(17,33,26,.50);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:none}
.veil.on{display:block}
.drw{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:101;
  background:var(--bg-soft);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .26s var(--ease);display:flex;flex-direction:column}
.drw.on{transform:none}
.drw-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 19px;border-bottom:1px solid var(--line);flex:none}
.drw-hd h2{font-size:16.5px}
.x{width:33px;height:33px;border-radius:var(--r);display:grid;place-items:center;
  border:1px solid var(--line-strong);font-size:17px;color:var(--ink-2);flex:none;transition:.16s}
.x:hover{background:var(--bg-soft);color:var(--ink)}
.drw-bd{flex:1;overflow-y:auto;padding:19px;scrollbar-width:thin}
.drw-ft{flex:none;padding:19px;border-top:1px solid var(--line);background:var(--bg-card)}

.ci{display:flex;gap:12px;padding:12px;border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:10px;background:var(--bg-card)}
.ci img{width:60px;height:60px;object-fit:contain;flex:none;background:var(--bg-dark);border-radius:7px}
.ci .m{min-width:0;flex:1}
.ci b{font-size:14px;display:block}
.ci small{font-size:12.5px;color:var(--ink-3);display:block;line-height:1.45}
.ci .rm{font-size:12px;color:var(--red);margin-top:5px;text-decoration:underline}
.ci .p{font-weight:800;font-size:14.5px;white-space:nowrap;color:var(--gold)}
.empty{text-align:center;padding:48px 16px;color:var(--ink-3);font-size:14.5px}
.tot{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);margin-bottom:5px}
.tot.big{font-size:15px;color:var(--ink);font-weight:800;margin:11px 0 15px;
  padding-top:11px;border-top:1px solid var(--line)}
.tot.big b{font-size:23px;color:var(--gold)}

.mod{position:fixed;z-index:101;top:50%;left:50%;translate:-50% -50%;
  width:min(680px,calc(100% - 28px));max-height:84vh;background:var(--bg-soft);
  border:1px solid var(--line-strong);border-radius:var(--r-l);
  box-shadow:0 24px 64px rgba(17,33,26,.22);display:none;flex-direction:column;overflow:hidden}
.mod.on{display:flex}
.mod .drw-bd h3{font-size:14.5px;margin:20px 0 6px;color:var(--gold)}
.mod .drw-bd h3:first-child{margin-top:0}
.mod .drw-bd p,.mod .drw-bd li{font-size:14.5px;margin-bottom:7px;color:var(--ink-2)}
.mod .drw-bd ul{list-style:disc;padding-left:19px;margin-bottom:9px}
.mod .drw-bd a{color:var(--gold);text-decoration:underline}

/* ---------- barra fija de precio ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:89;display:flex;gap:12px;align-items:center;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(17,33,26,.10);
  transform:translateY(110%);transition:transform .24s var(--ease);
}
.mbar.on{transform:none}
.mbar .i{flex:1;min-width:0}
.mbar b{font-size:20px;font-weight:900;display:block;line-height:1.15;color:var(--gold)}
.mbar small{font-size:11.5px;color:var(--ink-3);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media (min-width:661px){
  .mbar{padding-block:11px;padding-inline:max(20px,calc((100% - var(--wrap)) / 2))}
}

/* ===========================================================
   Checkout
   =========================================================== */
.co{position:fixed;inset:0;z-index:120;background:var(--bg);overflow-y:auto;overscroll-behavior:contain}
.co[hidden]{display:none}
.co-hd{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--line)}
.co-hd .wrap{display:flex;align-items:center;gap:20px;height:66px}
.co-hd .x{margin-left:auto}
.co-steps{display:flex;gap:6px;margin-inline:auto;font-size:13px;font-weight:700;color:var(--ink-3)}
.co-steps li{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px}
.co-steps i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:800;background:var(--line);color:var(--ink-2)}
.co-steps li.on{background:var(--gold-soft);color:var(--gold)}
.co-steps li.on i{background:var(--gold);color:#fff}
.co-steps li.done i{background:var(--green);color:#fff}

.co-seals{display:flex;justify-content:center;gap:8px 26px;flex-wrap:wrap;
  padding:11px 20px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.co-seals li{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.co-seals svg{width:15px;height:15px;stroke:var(--green);flex:none}

.co-body{padding:32px 0 100px}
.co-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;align-items:start}
.co-main h2{font-size:1.06rem;margin:26px 0 14px}
.co-main h2:first-child{margin-top:0}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-w2{grid-column:span 1}
.fld{margin-bottom:12px;min-width:0}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.fld label span{font-weight:400;color:var(--ink-3)}
.fld input,.fld select{
  width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--bg-card);font-size:15px;color:var(--ink);
}
.fld input::placeholder{color:var(--ink-3)}
.fld input:focus,.fld select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"]{border-color:var(--red);background:var(--red-soft)}
.fld small{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
.co-form .btn-lg{margin-top:14px}

.co-err{background:var(--red-soft);border:1px solid rgba(193,39,45,.32);color:#8C1D18;
  font-size:13.5px;padding:10px 13px;border-radius:var(--r);margin:12px 0}
.co-err[hidden]{display:none}
.co-err a{color:var(--gold);text-decoration:underline}
.co-back{font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:16px}
.co-back:hover{color:var(--gold)}
.co-note{font-size:13.5px;margin-bottom:16px;color:var(--ink-2)}
.co-loading{font-size:13.5px;color:var(--ink-3);text-align:center;padding:24px 0}
.co-loading[hidden]{display:none}

.co-side{border:1px solid var(--line);border-radius:var(--r-l);padding:20px;
  background:var(--bg-card);position:sticky;top:92px}
.co-side h2{font-size:15px;margin-bottom:14px}
.co-side .ci{background:var(--bg-soft)}
.co-assur{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:7px}
.co-assur li{font-size:12.5px;color:var(--ink-3);display:flex;gap:8px}
.co-assur li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);
  flex:none;margin-top:7px}

.co-timer{display:flex;align-items:center;gap:8px;margin-top:14px;
  background:var(--red-soft);border:1px solid rgba(193,39,45,.30);border-radius:var(--r);
  padding:9px 12px;font-size:13px;color:var(--red)}
.co-timer[hidden]{display:none}
.co-timer svg{width:15px;height:15px;stroke:var(--red);flex:none}
.co-timer b{font-variant-numeric:tabular-nums;color:var(--ink)}

.mp-note{font-size:13px;color:var(--ink-3);margin-top:12px;text-align:center}

/* ---------- pago con XPag: elegir método e instrucción ----------
   Sin tarjeta no hay formulario de pago: lo que hay que mostrar son datos
   para copiar. Entonces todo acá está pensado para leerse y copiarse bien
   desde el celular, que es donde el comprador tiene la app del banco. */
.xp-met{display:grid;gap:10px;margin-bottom:18px}
.xp-m{display:flex;gap:13px;align-items:center;text-align:left;width:100%;
  border:1px solid var(--line-strong);background:var(--bg-card);border-radius:var(--r-l);
  padding:15px 16px;transition:border-color .16s var(--ease),background .16s var(--ease)}
.xp-m:hover{border-color:var(--ink-3)}
.xp-m.on{border-color:var(--green);background:rgba(15,122,61,.07)}
.xp-m .xp-i{font-size:26px;line-height:1;flex:none}
.xp-m b{display:block;font-size:14.5px}
.xp-m small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px}

.xp-aviso{font-size:12.5px;color:var(--ink-3);margin:-8px 0 16px;line-height:1.5}

#xp-instr[hidden]{display:none}
.xp-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin-bottom:16px}
.xp-tag{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;
  background:var(--gold-soft);border:1px solid rgba(12,107,53,.30);color:var(--gold)}
.xp-head .ref{font-size:12.5px;color:var(--ink-3)}
.xp-head .ref b{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--ink-2)}

.xp-paso{font-size:14px;color:var(--ink-2);margin-bottom:16px;line-height:1.55}
.xp-paso b{color:var(--ink)}

.xp-dato{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  border:1px solid var(--line);background:var(--bg-soft);border-radius:var(--r);
  padding:12px 14px;margin-bottom:9px}
.xp-dato span{font-size:12px;color:var(--ink-3);width:100%}
.xp-dato b{font-size:15.5px;font-weight:700;flex:1 1 auto;word-break:break-all}
.xp-dato.xp-monto{border-color:rgba(15,122,61,.34);background:rgba(15,122,61,.07)}
.xp-dato.xp-monto b{color:var(--green-dark);font-size:1.3rem}
.xp-clabe{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;
  font-variant-numeric:tabular-nums}

.xp-copy{flex:none;font-size:12px;font-weight:700;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--bg-card);color:var(--ink-2)}
.xp-copy:hover{border-color:var(--gold);color:var(--gold)}
.xp-copy.ok{border-color:var(--green);color:var(--green-dark)}

/* El código de barras viene en PNG negro sobre transparente: sobre este
   fondo oscuro no se vería, así que va sobre blanco. */
.xp-barra{margin:14px 0;text-align:center}
.xp-barra img{background:#fff;border:1px solid var(--line);padding:12px;
  border-radius:var(--r);margin:0 auto;max-width:320px}
.xp-barra figcaption{font-size:12px;color:var(--ink-3);margin-top:8px}

.xp-ojo{display:grid;gap:8px;margin:16px 0}
/* Mismo motivo que .oferta-lista: texto suelto mezclado con <b>. */
.xp-ojo li{font-size:12.5px;color:var(--ink-3);line-height:1.5;
  position:relative;padding-left:13px}
.xp-ojo li::before{content:"";position:absolute;left:0;top:6px;
  width:5px;height:5px;border-radius:50%;background:var(--gold)}
.xp-ojo b{color:var(--ink-2)}

.xp-espera{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--ink-2);
  border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.xp-espera.xp-calma{color:var(--ink-3)}
.xp-espera.xp-calma .xp-spin{display:none}
.xp-spin{width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--gold);
  animation:xp-gira .9s linear infinite}
@keyframes xp-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.xp-spin{animation:none}}

.xp-link{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.xp-link a{color:var(--gold);text-decoration:underline}
.mp-trust{display:flex;gap:11px;align-items:flex-start;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.mp-trust svg{width:20px;height:20px;flex:none;stroke:var(--green);margin-top:1px}
.mp-trust b{display:block;font-size:13px}
.mp-trust small{font-size:12px;color:var(--ink-3);line-height:1.45}

.co-result{text-align:center;max-width:520px;margin:24px auto}
.co-result .ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 18px;font-size:30px}
.co-result .ok{background:rgba(15,122,61,.11);color:var(--green-dark)}
.co-result .wait{background:rgba(154,98,0,.11);color:var(--amber)}
.co-result .bad{background:var(--red-soft);color:var(--red)}
.co-result h2{font-size:1.35rem;margin-bottom:10px}
.co-result p{margin-bottom:14px}
.co-result .ref{display:inline-block;font-size:13px;background:var(--bg-card);
  border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;margin-bottom:18px}
.co-result .btn{margin:4px}

.co-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:122;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(17,33,26,.10);
  padding-block:11px;padding-bottom:calc(11px + env(safe-area-inset-bottom));
}
.co-bar .wrap{display:flex;align-items:center;gap:14px}
.co-bar-tot{line-height:1.15}
.co-bar-tot small{display:block;font-size:11px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.co-bar-tot b{font-size:23px;font-weight:900;letter-spacing:-.03em;color:var(--gold)}
.co-bar .btn{margin-left:auto;padding:14px 30px}
.co-bar[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .product-grid{grid-template-columns:1fr;gap:28px}
  .gallery{position:static}
  .mainnav{display:none}
  .burger{display:grid}
  .feat,.feat.flip{grid-template-columns:1fr;gap:26px}
  .feat.flip .feat-txt{order:0}
  .c3,.c4{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:repeat(2,1fr)}
  .strip ul{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .co-grid{grid-template-columns:1fr;gap:26px}
  .co-side{position:static;order:-1}
  .co-steps{display:none}
}
@media (max-width:660px){
  .sec{padding:50px 0}
  .product{padding:26px 0 44px}
  .c2,.c3,.c4{grid-template-columns:1fr}
  .revs{grid-template-columns:1fr}
  .gal-thumbs{grid-template-columns:repeat(4,1fr)}
  .fields{grid-template-columns:1fr}
  .fields .f-year{grid-column:auto}
  .warr{grid-template-columns:1fr;text-align:center;justify-items:center}
  .ftr-grid{grid-template-columns:1fr;gap:26px}
  .nums{grid-template-columns:1fr;gap:12px}
  .oferta-card{margin-top:-30px;padding:24px 18px}
  .clock{gap:7px}
  .clock div{min-width:0;flex:1;padding:11px 4px}
  .clock b{font-size:24px}
  .vs td,.vs th{padding:11px 10px;font-size:13.5px}
  .vs td:nth-child(2),.vs td:nth-child(3){width:18%}
  .co-row{grid-template-columns:1fr;gap:0}
  .co-body{padding:22px 0 96px}
  /* 16px es el mínimo que evita que iOS Safari haga zoom al enfocar */
  .fld input,.fld select{font-size:16px}
  .co-seals{gap:6px 16px;padding:9px 14px}
  .co-seals li{font-size:11.5px}
  .co-seals li:nth-child(n+3){display:none}
  .co-bar .btn{padding:14px 20px;font-size:15px}
  .co-bar-tot b{font-size:20px}
  .announce .wrap{font-size:12.5px}
}
@media print{.announce,.hdr,.mbar,.co-bar{display:none!important}}

/* ---------- aviso de compras recientes ----------
   Abajo a la izquierda, lejos del botón de comprar para no taparlo.
   Se alimenta de pedidos reales: si no hay, no aparece. */
.pop{
  position:fixed;left:18px;bottom:18px;z-index:88;max-width:330px;
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);border:1px solid var(--line-strong);
  border-radius:var(--r-l);box-shadow:0 14px 38px rgba(17,33,26,.16);
  padding:11px 13px;
  transform:translateY(150%);opacity:0;
  transition:transform .42s var(--ease),opacity .42s var(--ease),bottom .24s var(--ease);
}
/* Cuando aparece la barra de precio, el aviso sube para no quedar debajo. */
.mbar.on ~ .pop{bottom:92px}
.pop.on{transform:none;opacity:1}
.pop[hidden]{display:none}
.pop-img{width:52px;height:52px;flex:none;border-radius:8px;object-fit:contain;
  background:var(--bg-dark);border:1px solid var(--line)}
.pop-txt{min-width:0;flex:1}
.pop-txt b{display:block;font-size:13.5px;line-height:1.3}
.pop-txt small{display:block;font-size:12px;color:var(--ink-2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-hace{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  color:var(--green-dark);font-weight:700;margin-top:3px}
.pop-hace::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.pop-x{width:22px;height:22px;flex:none;align-self:flex-start;border-radius:5px;
  color:var(--ink-3);font-size:11px;display:grid;place-items:center}
.pop-x:hover{background:var(--bg-soft);color:var(--ink)}

@media (max-width:660px){
  .pop{left:12px;right:12px;max-width:none;bottom:82px}
}

/* ---------- prueba social de arriba ----------
   En el celular va de costado, no apilada: tres tarjetas apiladas
   empujaban el botón de comprar dos pantallas más abajo. Se ve un
   pedazo de la siguiente, que es lo que invita a deslizar. */
#revs-top .rev-foto{aspect-ratio:16/10}
#revs-top .rev p{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:660px){
  #revs-top{
    display:flex;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:-20px;padding:2px 20px 8px;
    scrollbar-width:none;
  }
  #revs-top::-webkit-scrollbar{display:none}
  #revs-top .rev{flex:0 0 83%;scroll-snap-align:center}
}

/* ---------- envío, dentro del resumen del checkout ----------
   El plazo y el "gratis" son de las dos cosas que más frenan la compra
   cuando no están dichas. Van al lado del total, no en el pie. */
.co-envio{
  display:flex;gap:11px;align-items:flex-start;margin-top:14px;
  background:rgba(15,122,61,.08);border:1px solid rgba(15,122,61,.28);
  border-radius:var(--r);padding:11px 13px;
}
.co-envio svg{width:19px;height:19px;flex:none;stroke:var(--green-dark);margin-top:1px}
.co-envio b{display:block;font-size:13.5px;color:var(--ink)}
.co-envio small{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.co-envio small b{display:inline;color:var(--green-dark);font-weight:800}