/* EconoHogar · hoja de estilo de la tienda
   ---------------------------------------------------------------
   GENERADO. No editar a mano: se pisa.
   Fuente: seed/home.template.html + seed/vista.template.html +
           seed/parciales/{fuentes,ui,marca,movil,esqueleto}.css, más las
           adaptaciones del final.
   Para regenerar:  node seed/construir-css.mjs
   --------------------------------------------------------------- */

/* ===== 0. fuentes propias (parciales/fuentes.css) ===== */
/* Fuentes servidas desde el propio dominio.
   Antes venían de Google Fonts: una hoja de estilo en otro dominio que
   frenaba la primera pintura (el navegador no dibuja nada hasta tenerla)
   y dos conexiones más (fonts.googleapis.com y fonts.gstatic.com), cada
   una con su DNS y su TLS. En 4G eso es más de medio segundo. Además,
   cada visita le pasaba la IP del cliente a Google.

   Son los mismos archivos que entregaba Google (subconjunto latino, que
   cubre el español completo). Licencia SIL Open Font License 1.1: ver
   assets/fuentes/LICENCIA.txt. */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 100%;font-display:swap;
  src:url(fuentes/archivo.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fuentes/plex-sans.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/plex-mono-400.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url(fuentes/plex-mono-600.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===== 1. base y portada (home.template.html) ===== */

/* Mismo sistema de color que la vitrina: derivado del logo EconoHogar.
   verde = ahorro · azul = estructura · rojo = precio. */
:root{
  --marca-verde:#4CAF50; --marca-azul:#1E88C7; --marca-rojo:#E0312A;
  --precio:#C62828; --precio-fondo:#D32F2F; --ahorro:#2E7D32;
  --azul:#14618F; --azul-nav:#0E4D72;
  --fondo:#F1F5F8; --superficie:#FFFFFF; --superficie-2:#E7EEF3;
  --linea:#D6E1E9; --linea-fuerte:#B7C8D4;
  --tinta:#0F1D26; --tinta-2:#33505F; --tenue:#647F8E;
  --grad-blando:linear-gradient(168deg,#D7EBF7 0%,#E4F4E8 56%,#FFFFFF 100%);
  --sombra:0 1px 2px rgba(15,29,38,.06), 0 10px 26px -18px rgba(15,29,38,.30);
  --radio:3px;
  /* Claro por defecto, a propósito: el modo oscuro solo llega si
     el visitante lo elige con el botón. */
  color-scheme:light;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --marca-verde:#5CC463; --marca-azul:#4FA8DC; --marca-rojo:#EE4A42;
  --precio:#FF7B70; --precio-fondo:#D8342C; --ahorro:#4ADE80;
  --azul:#6FBCE8; --azul-nav:#0B2C3D;
  --fondo:#0A1319; --superficie:#111E26; --superficie-2:#182831;
  --linea:#24363F; --linea-fuerte:#334A56;
  --tinta:#E2EDF3; --tinta-2:#BCCFDA; --tenue:#8399A6;
  --grad-blando:linear-gradient(168deg,#12333F 0%,#123329 56%,#111E26 100%);
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{
  background:var(--fondo);color:var(--tinta);padding-bottom:66px;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.pr,.disp,.logo-txt,.hero-pr,.cta,.reloj{font-family:"Archivo",Impact,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:2px}
.env{max-width:1400px;margin:0 auto;padding:0 16px}

/* ---------- suscripción por WhatsApp ---------- */
.suscribe{
  background:var(--superficie);border:1px solid var(--linea);border-radius:22px;
  padding:24px 22px;display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
}
@media(min-width:780px){.suscribe{grid-template-columns:1.2fr 1fr;padding:28px 30px}}
.suscribe h2{font-size:clamp(1.2rem,2.6vw,1.65rem);font-weight:800;font-stretch:86%;margin:0 0 6px;letter-spacing:-.01em}
.suscribe p{margin:0;color:var(--tinta-2);font-size:13.5px;line-height:1.5;max-width:48ch}
.suscribe-form{display:flex;gap:8px}
.suscribe-form input{
  flex:1;min-width:0;border:1.5px solid var(--linea);border-radius:12px;
  padding:12px 14px;font:inherit;font-size:14.5px;background:var(--superficie);color:var(--tinta);
}
.suscribe-form input::placeholder{color:var(--tenue)}
.suscribe-form button{
  background:#25D366;color:#06301A;border-radius:12px;padding:12px 22px;
  font-weight:700;font-size:14px;white-space:nowrap;
}

/* ---------- 1. financiación, arriba de todo ---------- */
.financ{
  background:var(--precio-fondo);color:#fff;text-align:center;padding:9px 14px;
  font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:700;font-size:15px;letter-spacing:.005em;
}
.financ b{font-weight:800;font-size:19px;font-stretch:80%;vertical-align:-1px}
.financ .fino{font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-size:12.5px;opacity:.88;display:block}

/* ---------- 2. cabecera blanca ---------- */
header.top{background:var(--superficie);border-bottom:1px solid var(--linea)}
.top-in{padding:12px 16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.logo{
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  color:inherit;border-radius:5px;padding:2px;margin:-2px;
  transition:transform .16s cubic-bezier(.34,1.4,.64,1);
}
.logo:hover{transform:translateY(-1.5px)}
.logo:active{transform:translateY(0)}
.logo-txt{font-size:21px;font-weight:800;font-stretch:88%;letter-spacing:-.01em;line-height:1}
.logo-txt .e{color:var(--marca-verde)}
.logo-txt .h{color:var(--marca-azul)}
.buscador{flex:1;min-width:200px;max-width:640px;display:flex;border:2px solid var(--azul);border-radius:var(--radio);overflow:hidden;background:var(--superficie)}
.buscador input{flex:1;border:0;padding:10px 13px;font:inherit;font-size:14.5px;background:transparent;color:var(--tinta);min-width:0}
.buscador input::placeholder{color:var(--tenue)}
.buscador button{background:var(--azul);color:#fff;padding:0 20px;font-weight:600}
.acc{display:flex;gap:14px;align-items:center;margin-left:auto}
.acc .it{display:flex;flex-direction:column;line-height:1.15;font-size:11px;color:var(--tenue);white-space:nowrap}
.acc .it b{font-size:12.5px;color:var(--tinta-2);font-weight:600}
.acc .carrito{background:var(--precio-fondo);color:#fff;padding:8px 14px;border-radius:var(--radio);font-weight:700;font-size:13px}
.acc .carrito small{display:block;font-weight:500;opacity:.85;font-size:10.5px}

/* ---------- 3. nav azul ---------- */
nav.dep{background:var(--azul-nav)}
.dep-in{display:flex;gap:2px;align-items:stretch;overflow-x:auto;padding:0 16px;scrollbar-width:none}
.dep-in::-webkit-scrollbar{display:none}
.dep-in a,.dep-in button{
  color:#EAF4FA;padding:11px 14px;font-size:13px;font-weight:600;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
.dep-in a:hover{background:rgba(255,255,255,.09)}
.dep-in .todos{background:rgba(255,255,255,.13);font-weight:700}
.dep-in .of{color:#0F1D26;background:var(--marca-verde);font-weight:700}

/* ---------- 4. cobertura ---------- */
.cobertura{
  background:var(--superficie);border-bottom:1px solid var(--linea);
  display:flex;gap:26px;justify-content:center;flex-wrap:wrap;padding:8px 16px;
  font-size:12.5px;color:var(--tinta-2);font-weight:500;
}
.cobertura span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cobertura b{color:var(--ahorro);font-weight:700}

/* ---------- 5. hero ---------- */
.hero{display:grid;grid-template-columns:1fr;gap:10px;padding-top:14px}
@media(min-width:900px){.hero{grid-template-columns:2.05fr 1fr}}
.hero-main{
  background:linear-gradient(135deg,var(--azul-nav) 0%,var(--azul) 62%,var(--marca-azul) 100%);
  border-radius:var(--radio);padding:26px 26px 22px;color:#fff;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr;gap:16px;align-items:center;min-height:290px;
}
@media(min-width:620px){.hero-main{grid-template-columns:1.15fr .85fr}}
.hero-txt{position:relative;z-index:2}
.hero-kicker{
  display:inline-block;background:var(--precio-fondo);color:#fff;font-weight:800;
  font-family:"Archivo",sans-serif;font-stretch:80%;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;margin-bottom:12px;
}
.hero-main h1{
  font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:800;font-stretch:84%;line-height:1.05;
  margin:0 0 14px;letter-spacing:-.015em;text-wrap:balance;
}
.hero-precios{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.hero-pr{font-size:clamp(2.4rem,6vw,3.4rem);font-weight:800;font-stretch:76%;line-height:.92;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero-antes{font-size:16px;opacity:.72;text-decoration:line-through;font-variant-numeric:tabular-nums}
.hero-cuota{
  display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  padding:6px 11px;border-radius:2px;font-size:14px;font-weight:600;margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}
.cta{
  display:inline-block;background:var(--precio-fondo);color:#fff;padding:12px 26px;
  border-radius:2px;font-weight:800;font-stretch:86%;font-size:15px;letter-spacing:.01em;
}
.hero-fig{display:grid;place-items:center;position:relative;z-index:1}
.hero-fig svg{width:100%;max-width:230px;height:auto;color:rgba(255,255,255,.9);stroke-width:3}
.hero-badge{
  position:absolute;top:14px;right:14px;background:#fff;color:var(--precio);
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:78%;font-size:26px;
  width:66px;height:66px;border-radius:50%;display:grid;place-items:center;z-index:3;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.45);
}
.hero-lado{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.lado{
  border-radius:var(--radio);padding:18px;display:flex;flex-direction:column;justify-content:center;
  min-height:138px;position:relative;overflow:hidden;
}
.lado.a{background:var(--marca-verde);color:#062B10}
.lado.b{background:var(--superficie);border:1px solid var(--linea);color:var(--tinta)}
.lado h3{font-size:17px;font-weight:800;font-stretch:86%;margin:0 0 5px;line-height:1.14}
.lado p{margin:0;font-size:13px;line-height:1.4;opacity:.9}
.lado .mas{margin-top:9px;font-weight:700;font-size:12.5px}
.lado.b .mas{color:var(--azul)}

/* ---------- riel de categorías ---------- */
section.bloque{padding-top:30px}
.cab{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.cab h2{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:800;font-stretch:86%;margin:0;letter-spacing:-.01em}
.cab .sub{font-size:13px;color:var(--tenue)}
.cab .vertodo{margin-left:auto;font-size:13px;font-weight:700;color:var(--azul);white-space:nowrap}
.cat-riel{display:flex;gap:14px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin}
.cat-it{flex-shrink:0;width:96px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
.cat-disco{
  width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linea);background:var(--superficie);
}
.cat-disco svg{width:48px;height:48px;color:var(--tinta-2);opacity:.8}
.cat-it span{font-size:11.5px;line-height:1.25;color:var(--tinta-2);font-weight:500}

/* ---------- ofertas con reloj ---------- */
.ofertas-cab{
  background:var(--precio-fondo);color:#fff;border-radius:var(--radio) var(--radio) 0 0;
  padding:11px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.ofertas-cab h2{font-size:19px;font-weight:800;font-stretch:84%;margin:0;letter-spacing:.005em}
.reloj{display:flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums}
.reloj i{
  background:rgba(0,0,0,.28);border-radius:2px;padding:3px 7px;font-style:normal;
  font-weight:800;font-size:16px;font-stretch:80%;min-width:32px;text-align:center;
}
.reloj em{font-style:normal;font-size:12px;opacity:.8;font-family:"IBM Plex Sans",sans-serif}
.ofertas-cab .vertodo{margin-left:auto;color:#fff;font-size:13px;font-weight:700}
.ofertas-caja{background:var(--superficie);border:1px solid var(--linea);border-top:0;border-radius:0 0 var(--radio) var(--radio);padding:10px}

/* ---------- rejilla y tarjetas ---------- */
.rej{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
@media(min-width:560px){.rej{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.rej{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1120px){.rej{grid-template-columns:repeat(6,1fr)}}
.rej.c5{grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.rej.c5{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1120px){.rej.c5{grid-template-columns:repeat(5,1fr)}}

.tarjeta{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;position:relative;text-align:left;
  transition:border-color .12s,box-shadow .12s;
}
.tarjeta:hover{border-color:var(--linea-fuerte);box-shadow:var(--sombra)}
.foto{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.foto svg{width:64%;height:64%;color:var(--tinta-2);opacity:.72}
.desc{
  position:absolute;top:0;left:0;background:var(--precio-fondo);color:#fff;
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:78%;font-size:13px;
  padding:2px 6px;
}
.agot{
  position:absolute;inset:0;background:color-mix(in srgb,var(--superficie) 74%,transparent);
  display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tenue);
}
.cuerpo{padding:6px 7px 8px;display:flex;flex-direction:column;gap:3px;flex:1}
.prfila{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.pr{font-size:21px;font-weight:800;font-stretch:78%;color:var(--precio);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.antes{font-size:10.5px;color:var(--tenue);text-decoration:line-through;font-variant-numeric:tabular-nums}
.cuota{font-size:11px;font-weight:600;color:var(--ahorro);font-variant-numeric:tabular-nums;min-height:16px}
.nom{font-size:11.5px;line-height:1.28;color:var(--tinta-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.insig{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px}
.ins{font-size:9px;padding:1px 4px;border-radius:2px;white-space:nowrap;font-weight:600}
.ins.e{background:color-mix(in srgb,var(--ahorro) 14%,transparent);color:var(--ahorro)}
.ins.g{background:color-mix(in srgb,var(--azul) 13%,transparent);color:var(--azul)}
.pie{margin-top:auto;padding-top:4px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.vend{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--tenue)}
.disp{font-size:10px;font-weight:700}
.disp.si{color:var(--ahorro)} .disp.poco{color:var(--precio)} .disp.no{color:var(--tenue)}

/* ============================================================
   ZONA BLANDA — el único lugar donde el lenguaje visual cambia.
   El catálogo es denso y urgente porque ahí se compara.
   Aquí el cliente se compromete, y lo que necesita es calma:
   esquinas grandes, degradado suave, personajes, aire.
   ============================================================ */
.blando{
  position:relative;overflow:hidden;border-radius:26px;padding:30px 22px 24px;
  background:var(--grad-blando);
}
@media(min-width:720px){.blando{padding:38px 34px 30px}}
.chispa{position:absolute;color:var(--marca-verde);opacity:.55;pointer-events:none}
.chispa svg{width:100%;height:100%;display:block}
.chispa.c1{width:26px;height:26px;top:26px;left:5%;color:var(--marca-rojo);opacity:.4}
.chispa.c2{width:17px;height:17px;top:78px;left:16%;color:var(--marca-azul);opacity:.45}
.chispa.c3{width:30px;height:30px;top:20px;right:9%;color:var(--marca-verde);opacity:.5}
.chispa.c4{width:15px;height:15px;top:96px;right:4%;color:var(--marca-azul);opacity:.4}

.blando-top{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;position:relative;z-index:2}
@media(min-width:820px){.blando-top{grid-template-columns:1.05fr .95fr;gap:28px}}
.pildora{
  display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.72);
  border:1px solid rgba(20,97,143,.16);color:var(--azul);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:700;margin-bottom:14px;
}
:root[data-theme="dark"] .pildora{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16)}
.blando h2{
  font-size:clamp(1.75rem,4.4vw,2.7rem);font-weight:800;font-stretch:84%;line-height:1.04;
  margin:0 0 12px;letter-spacing:-.018em;text-wrap:balance;
}
/* Énfasis por color y peso dentro del titular, como en la referencia. */
.blando h2 em{font-style:normal;color:var(--azul);display:block}
.blando h2 .lig{font-weight:500;font-stretch:96%;font-size:.62em;display:block;color:var(--tinta-2);letter-spacing:0}
.blando-top p{margin:0;color:var(--tinta-2);font-size:14px;max-width:44ch;line-height:1.55}

.personajes{display:flex;justify-content:center;align-items:flex-end;gap:2px}
.personajes > div{flex:1;max-width:150px}
.personajes svg{width:100%;height:auto;display:block}
.personajes .p-med{transform:translateY(-14px);max-width:172px;z-index:2}

/* --- tres tarjetas de valor, el patrón de la referencia --- */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0 20px;position:relative;z-index:2}
.fcard{
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
  border-radius:18px;padding:14px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  box-shadow:0 6px 18px -12px rgba(15,29,38,.4);
}
:root[data-theme="dark"] .fcard{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
.fcard .fi{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  color:#fff;margin-bottom:2px;
}
.fcard .fi svg{width:23px;height:23px}
.fcard .fi.v{background:linear-gradient(150deg,#6CC870,#2E7D32)}
.fcard .fi.a{background:linear-gradient(150deg,#4FA8DC,#14618F)}
.fcard .fi.r{background:linear-gradient(150deg,#F0736C,#C62828)}
.fcard b{font-size:13.5px;font-weight:700;line-height:1.2}
.fcard span:last-child{font-size:11px;color:var(--tinta-2);line-height:1.3}

/* --- panel de planes --- */
.panel{
  background:var(--superficie);border-radius:22px;padding:20px 18px;position:relative;z-index:2;
  box-shadow:0 10px 34px -20px rgba(15,29,38,.5);
}
.panel-sel{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.panel-sel label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tenue)}
.panel-sel select{
  width:100%;border:1.5px solid var(--linea);border-radius:12px;padding:11px 12px;
  font:inherit;font-size:13.5px;background:var(--superficie);color:var(--tinta);
}
.planes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px}
@media(min-width:640px){.planes{grid-template-columns:repeat(4,1fr)}}
.plan{
  position:relative;border:2px solid var(--linea);border-radius:16px;padding:16px 10px 12px;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  background:var(--superficie);transition:border-color .12s,background .12s;
}
.plan:hover{border-color:var(--linea-fuerte)}
.plan[aria-pressed=true]{border-color:var(--azul);background:color-mix(in srgb,var(--azul) 6%,var(--superficie))}
.plan-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--ahorro);color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;
  padding:2px 9px;border-radius:999px;white-space:nowrap;display:flex;align-items:center;gap:4px;
}
.plan-badge svg{width:10px;height:10px}
.plan-n{font-size:11.5px;color:var(--tenue);font-weight:600}
.plan-m{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:78%;font-size:23px;
  color:var(--tinta);line-height:1.05;font-variant-numeric:tabular-nums;
}
.plan[aria-pressed=true] .plan-m{color:var(--azul)}
.plan-x{font-size:10.5px;color:var(--tenue)}
.plan-check{
  position:absolute;top:8px;right:8px;width:19px;height:19px;border-radius:50%;
  border:2px solid var(--linea);display:grid;place-items:center;
}
.plan[aria-pressed=true] .plan-check{background:var(--azul);border-color:var(--azul)}
.plan-check svg{width:10px;height:10px;color:#fff;opacity:0}
.plan[aria-pressed=true] .plan-check svg{opacity:1}

.panel-tot{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;margin-bottom:18px}
@media(min-width:640px){.panel-tot{grid-template-columns:auto 1fr;gap:26px}}
.monto-caja{position:relative;padding-right:34px}
.monto-caja .et{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);display:block;margin-bottom:2px}
.monto{
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:74%;
  font-size:clamp(2.6rem,8vw,3.6rem);line-height:.92;letter-spacing:-.025em;
  color:var(--precio);font-variant-numeric:tabular-nums;display:block;
}
.monto-caja .por{font-size:12.5px;color:var(--tinta-2)}
.trazo-sub{display:block;width:118px;height:13px;color:var(--precio);opacity:.5;margin-top:1px}
.trazo-rayas{position:absolute;top:14px;right:0;width:30px;height:34px;color:var(--precio);opacity:.42}
.panel-tot table{width:100%;border-collapse:collapse;font-size:12.5px}
.panel-tot td{padding:5px 0;border-bottom:1px solid var(--linea);color:var(--tinta-2)}
.panel-tot td:last-child{text-align:right;font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums}
.panel-tot tr:last-child td{border-bottom:0}
.cta-grande{
  width:100%;background:var(--azul-nav);color:#fff;border-radius:16px;padding:15px;
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:88%;font-size:16px;letter-spacing:.005em;
}
:root[data-theme="dark"] .cta-grande{background:var(--azul);color:#06222F}
.panel .letra{font-size:11.5px;color:var(--tenue);margin:10px 0 0;line-height:1.45;text-align:center}

/*__UI_CSS__*/

/* ---------- confianza ---------- */
.conf{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:780px){.conf{grid-template-columns:repeat(4,1fr)}}
.conf-it{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:16px}
.conf-it b{display:block;font-size:13.5px;margin-bottom:3px}
.conf-it span{font-size:12.5px;color:var(--tinta-2);line-height:1.4}
/* Sin medida explícita, un <svg> sin width/height se expande al ancho del
   contenedor: por eso los iconos salían gigantes. */
.conf-it .ic{width:26px;height:26px;display:block;color:var(--azul);margin-bottom:8px;flex-shrink:0}

/* ---------- pie ---------- */
footer{background:var(--azul-nav);color:#D6E9F4;margin-top:38px;padding:30px 0 22px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
footer h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.7;margin:0 0 9px;font-weight:500}
footer ul{list-style:none;padding:0;margin:0;font-size:13px;line-height:1.85}
footer .deps{font-size:12.5px;line-height:1.7;opacity:.85}
.foot-legal{border-top:1px solid rgba(255,255,255,.15);margin-top:22px;padding-top:14px;font-size:11.5px;opacity:.68;line-height:1.6}

/* ---------- barra inferior + WhatsApp ---------- */
.inferior{
  position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--superficie);
  border-top:1px solid var(--linea);display:flex;padding:7px 10px;gap:8px;align-items:center;
}
.inferior .wa{display:flex;align-items:center;gap:7px;padding:10px 15px;border-radius:var(--radio);background:#25D366;color:#06301A;font-weight:700;font-size:13px}
.inferior .cr{flex:1;text-align:center;padding:10px;border-radius:var(--radio);background:var(--precio-fondo);color:#fff;font-weight:700;font-size:13.5px}
.inferior .ct{padding:10px 15px;border-radius:var(--radio);box-shadow:inset 0 0 0 2px var(--azul);color:var(--azul);font-weight:700;font-size:13px}
.flota{
  position:fixed;right:16px;bottom:76px;z-index:49;background:#25D366;color:#06301A;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.5);font-weight:800;font-size:11px;
}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ===== 2. propio del catálogo (vista.template.html) ===== */

.mono{font-family:"IBM Plex Mono",monospace}


/* ---------- franja de cupones ---------- */
.franja{
  background:var(--precio-fondo);color:#fff;
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  padding:7px 14px;font-size:12px;font-weight:600;letter-spacing:.01em;
}

.franja span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}


/* ---------- rieles de categorías ---------- */
.cats{max-width:1400px;margin:0 auto;padding:12px 16px 0}

.cats-riel{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}

.chip{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 10px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--superficie);min-width:78px;font-size:10.5px;line-height:1.2;
  text-align:center;color:var(--tinta-2);font-weight:500;
}

.chip svg{width:26px;height:26px;color:var(--azul)}

.chip[aria-pressed="true"]{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul);color:var(--azul);font-weight:600}

.chip .n{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--tenue)}


/* ---------- barra de control ---------- */
.control{
  max-width:1400px;margin:0 auto;padding:10px 16px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--linea);
}

.control select{
  border:1px solid var(--linea);border-radius:var(--radio);padding:6px 9px;
  font:inherit;font-size:12.5px;background:var(--superficie);color:var(--tinta);
}

.tog{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tinta-2);cursor:pointer}

.tog input{accent-color:var(--azul);width:15px;height:15px}

.conteo{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tenue)}

.filtro-activo{
  display:inline-flex;align-items:center;gap:7px;background:var(--azul);color:#fff;
  border-radius:999px;padding:5px 9px 5px 13px;font-size:12.5px;font-weight:700;
}

.filtro-activo::after{
  content:"✕";font-size:11px;line-height:1;background:rgba(255,255,255,.24);
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
}


/* ---------- rejilla ---------- */
.rejilla{
  max-width:1400px;margin:0 auto;padding:12px 16px 40px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px;
}

.rejilla.sin-resultados{display:block;padding-top:44px;padding-bottom:64px}

.vacio{
  max-width:420px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}

.vacio b{font-size:16px;font-weight:700}

.vacio p{margin:0;font-size:13px;color:var(--tinta-2);line-height:1.5}

.vacio .accion{
  margin-top:12px;background:var(--azul);color:#fff;border-radius:var(--radio);
  padding:10px 20px;font-weight:700;font-size:13px;
}

@media(min-width:560px){.rejilla{grid-template-columns:repeat(3,1fr)}}

@media(min-width:860px){.rejilla{grid-template-columns:repeat(4,1fr)}}

@media(min-width:1120px){.rejilla{grid-template-columns:repeat(5,1fr)}}

.desc{
  position:absolute;top:0;left:0;background:var(--precio-fondo);color:#fff;
  font-family:"Archivo",sans-serif;font-weight:800;font-stretch:78%;font-size:13px;
  padding:2px 6px;letter-spacing:.01em;
}

.agot{
  position:absolute;inset:0;background:color-mix(in srgb,var(--superficie) 74%,transparent);
  display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tenue);
}

.pie-in{max-width:1400px;margin:0 auto;padding:0 16px}

.pie-marca{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;margin-bottom:10px}

.pie-marca svg{display:block;flex-shrink:0}
/* ===== 3. ficha y carrito (parciales/ui.css) ===== */
/* ============================================================
   BARRAS DE DESPLAZAMIENTO — estilo iOS
   Finas, en píldora, sin riel y translúcidas. Se avivan mientras
   se desplaza y se apagan solas. Reemplazan la barra gruesa de
   Windows, que en una tienda compite con el producto.
   ============================================================ */
:root{
  --barra:rgba(15,29,38,.20);
  --barra-viva:rgba(15,29,38,.40);
  --barra-mano:rgba(15,29,38,.52);
}
:root[data-theme="dark"]{
  --barra:rgba(255,255,255,.20);
  --barra-viva:rgba(255,255,255,.38);
  --barra-mano:rgba(255,255,255,.52);
}

/* Firefox y el estándar */
html{scrollbar-width:thin;scrollbar-color:var(--barra) transparent}
*{scrollbar-width:thin;scrollbar-color:var(--barra) transparent}

/* WebKit / Chromium */
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner{background:transparent;border:0}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-thumb{
  background:var(--barra);
  border-radius:99px;
  /* El borde transparente con background-clip deja la píldora de 6 px
     centrada en un canal de 10 px, como el desplazador de iOS. */
  border:2px solid transparent;
  background-clip:content-box;
  transition:background-color .25s ease;
}
::-webkit-scrollbar-thumb:hover{background:var(--barra-mano);background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:var(--barra-mano);background-clip:content-box}

/* Mientras se desplaza, la píldora se aviva; al parar vuelve sola. */
.desplazando::-webkit-scrollbar-thumb{background:var(--barra-viva);background-clip:content-box}
.desplazando{scrollbar-color:var(--barra-viva) transparent}

/* Rieles horizontales: la barra no debe pegarse a las etiquetas. */
.cats-riel,.cat-riel{padding-bottom:10px}

/* Nada de encadenar el desplazamiento hacia la página de atrás. */
.f-cuerpo,.f-envio,.c-lista,.envio-scroll{overscroll-behavior:contain}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ============================================================
   VIDRIO LÍQUIDO — ficha de producto y carrito
   El resto de la tienda es opaca y densa. Estas dos superficies
   flotan sobre el catálogo, así que se comportan como vidrio:
   dejan ver el color de lo que hay detrás, difuminado.
   ============================================================ */
:root{
  --vidrio:rgba(255,255,255,.60);
  --vidrio-panel:rgba(255,255,255,.42);
  --vidrio-borde:rgba(255,255,255,.62);
  --vidrio-brillo:rgba(255,255,255,.85);
  --vidrio-linea:rgba(15,29,38,.09);
  --vidrio-sombra:0 30px 80px -28px rgba(8,24,34,.55);
}
:root[data-theme="dark"]{
  --vidrio:rgba(20,33,42,.58);
  --vidrio-panel:rgba(255,255,255,.06);
  --vidrio-borde:rgba(255,255,255,.15);
  --vidrio-brillo:rgba(255,255,255,.18);
  --vidrio-linea:rgba(255,255,255,.10);
  --vidrio-sombra:0 30px 80px -28px rgba(0,0,0,.85);
}

/* ---------- diálogo ---------- */
dialog.vidrio{
  border:0;padding:0;background:transparent;color:var(--tinta);
  max-width:660px;width:calc(100% - 26px);overflow:visible;
}
dialog.vidrio::backdrop{
  background:rgba(8,20,28,.42);
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
}
/* La cáscara lleva el color; el interior lo esmerila. */
.vaso{
  position:relative;border-radius:30px;overflow:hidden;
  box-shadow:var(--vidrio-sombra);
  background:
    radial-gradient(46% 44% at 18% 6%, var(--aura-a, #4CAF50) 0%, transparent 68%),
    radial-gradient(52% 50% at 88% 92%, var(--aura-b, #1E88C7) 0%, transparent 70%),
    linear-gradient(150deg, #8FB9D8 0%, #B8CFDD 55%, #9CC4A6 100%);
}
.vaso-in{
  background:var(--vidrio);
  backdrop-filter:blur(34px) saturate(185%);
  -webkit-backdrop-filter:blur(34px) saturate(185%);
  border:1px solid var(--vidrio-borde);
  border-radius:30px;
  box-shadow:inset 0 1px 0 var(--vidrio-brillo);
  display:flex;flex-direction:column;max-height:88vh;
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .vaso{background:none}
  .vaso-in{background:var(--superficie)}
}

/* ---------- cabecera de la ficha ---------- */
.f-cab{display:flex;gap:16px;padding:22px 22px 16px;align-items:flex-start}
.f-foto{
  width:104px;height:104px;flex-shrink:0;border-radius:22px;display:grid;place-items:center;
  background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);
  box-shadow:inset 0 1px 0 var(--vidrio-brillo);
}
.f-foto svg{width:68%;height:68%;color:var(--tinta);opacity:.62}
.f-marca{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-2);opacity:.85;margin-bottom:5px;
}
.f-cab h2{
  font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:800;
  font-size:clamp(1.15rem,3.2vw,1.5rem);line-height:1.12;margin:0 0 4px;letter-spacing:-.015em;
}
.f-sub{font-size:12.5px;color:var(--tinta-2)}
.f-cerrar{
  margin-left:auto;flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);
  display:grid;place-items:center;font-size:15px;line-height:1;color:var(--tinta-2);
}

/* ---------- pastillas de atributo ---------- */
.f-pastillas{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 22px 16px}
.past{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:18px;
  background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);
  box-shadow:inset 0 1px 0 var(--vidrio-brillo);
}
.past .ico{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;color:#fff;
}
.past .ico svg{width:17px;height:17px}
.past .ico.v{background:linear-gradient(148deg,#6CC870,#2E7D32)}
.past .ico.a{background:linear-gradient(148deg,#4FA8DC,#14618F)}
.past .ico.r{background:linear-gradient(148deg,#F0736C,#C62828)}
.past b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.past span{font-size:11px;color:var(--tinta-2);line-height:1.25}

/* ---------- bloque de precio ---------- */
.f-precio{
  margin:0 22px 16px;padding:15px 16px;border-radius:22px;
  background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);
  box-shadow:inset 0 1px 0 var(--vidrio-brillo);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.f-precio .et{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-2);display:block;margin-bottom:2px;
}
.f-precio .val{
  font-family:"Archivo",sans-serif;font-stretch:76%;font-weight:800;
  font-size:clamp(1.9rem,6vw,2.5rem);line-height:1;letter-spacing:-.02em;
  color:var(--precio);font-variant-numeric:tabular-nums;
}
.f-precio .antes{font-size:12.5px;color:var(--tinta-2);text-decoration:line-through;margin-left:8px}
.f-precio .cuota{font-size:12.5px;color:var(--ahorro);font-weight:600;margin-top:3px}
.f-precio .pct{
  margin-left:auto;background:var(--precio-fondo);color:#fff;border-radius:999px;
  padding:5px 12px;font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:800;font-size:14px;
}

/* ---------- cuerpo desplazable ---------- */
.f-cuerpo{padding:0 22px;overflow-y:auto;flex:1;min-height:0}
.f-cuerpo h3{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-2);font-weight:500;margin:18px 0 8px;
}
.f-tabla{
  border-radius:18px;background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);
  overflow:hidden;box-shadow:inset 0 1px 0 var(--vidrio-brillo);
}
.f-tabla table{width:100%;border-collapse:collapse;font-size:12.5px}
.f-tabla td{padding:8px 14px;border-bottom:1px solid var(--vidrio-linea)}
.f-tabla tr:last-child td{border-bottom:0}
.f-tabla td:first-child{color:var(--tinta-2)}
.f-tabla td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.f-envio{max-height:190px;overflow-y:auto}
.no-disp{color:var(--precio);font-weight:700}

/* ---------- pie con acciones ---------- */
.f-pie{display:flex;gap:9px;padding:16px 22px 20px;flex-wrap:wrap}
.f-btn{
  flex:1;min-width:145px;padding:14px 18px;border-radius:18px;
  font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:800;font-size:14.5px;text-align:center;
}
/* El único elemento opaco de la ficha: lo que la gente tiene que tocar. */
.f-btn.comprar{
  background:linear-gradient(140deg,#E8443C,#B71C1C);color:#fff;
  box-shadow:0 12px 26px -12px rgba(183,28,28,.75);
}
.f-btn.carro{
  background:var(--vidrio-panel);color:var(--tinta);
  border:1px solid var(--vidrio-borde);box-shadow:inset 0 1px 0 var(--vidrio-brillo);
}
.f-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ============================================================
   CARRITO
   ============================================================ */
.c-lanzador{position:relative}
.c-n{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--ahorro);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px var(--superficie);
}
.c-n[hidden]{display:none}

dialog.carrito{
  border:0;padding:0;background:transparent;color:var(--tinta);
  max-width:460px;width:calc(100% - 22px);margin:0 0 0 auto;height:100%;max-height:100%;
  overflow:visible;
}
dialog.carrito::backdrop{
  background:rgba(8,20,28,.42);
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
}
dialog.carrito .vaso{border-radius:30px 0 0 30px;height:100%}
dialog.carrito .vaso-in{border-radius:30px 0 0 30px;max-height:100%;height:100%}
@media(max-width:560px){
  dialog.carrito{max-width:100%;width:100%}
  dialog.carrito .vaso,dialog.carrito .vaso-in{border-radius:26px 26px 0 0}
}

.c-cab{display:flex;align-items:center;gap:12px;padding:20px 20px 14px}
.c-cab h2{font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:800;font-size:1.25rem;margin:0}
.c-lista{flex:1;min-height:0;overflow-y:auto;padding:0 20px;display:flex;flex-direction:column;gap:9px}
.c-item{
  display:grid;grid-template-columns:60px 1fr auto;gap:11px;align-items:center;
  padding:10px;border-radius:20px;
  background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);
  box-shadow:inset 0 1px 0 var(--vidrio-brillo);
}
.c-foto{width:60px;height:60px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.28)}
.c-foto svg{width:66%;height:66%;color:var(--tinta);opacity:.6}
.c-nom{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-pr{font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:800;font-size:16px;color:var(--precio);margin-top:3px;font-variant-numeric:tabular-nums}
.c-der{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.c-cant{display:flex;align-items:center;gap:2px;border-radius:999px;background:rgba(255,255,255,.34);border:1px solid var(--vidrio-borde)}
.c-cant button{width:26px;height:26px;border-radius:50%;font-size:15px;line-height:1;color:var(--tinta);font-weight:700}
.c-cant button[disabled]{opacity:.35;cursor:not-allowed}
.c-cant span{min-width:20px;text-align:center;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.c-quitar{font-size:11px;color:var(--tinta-2);text-decoration:underline}
.c-tope{font-size:10.5px;color:var(--precio);font-weight:600}

.c-vacio{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:30px 20px}
.c-vacio .fig{width:120px}
.c-vacio .fig svg{width:100%;height:auto;display:block}
.c-vacio b{font-size:15px}
.c-vacio p{margin:0;font-size:12.5px;color:var(--tinta-2);max-width:30ch;line-height:1.45}

.c-entrega{padding:14px 20px 0;display:grid;gap:8px}
.c-metodos{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.c-metodo{
  padding:9px 10px;border-radius:15px;font-size:12.5px;font-weight:700;text-align:center;
  background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);color:var(--tinta-2);
}
.c-metodo[aria-pressed=true]{border-color:var(--azul);color:var(--azul);background:rgba(20,97,143,.12)}
.c-entrega select{
  width:100%;border:1px solid var(--vidrio-borde);border-radius:15px;padding:10px 12px;
  font:inherit;font-size:13px;background:var(--vidrio-panel);color:var(--tinta);
}
.c-aviso{
  font-size:12px;color:var(--precio);font-weight:600;line-height:1.4;
  background:rgba(198,40,40,.10);border-radius:14px;padding:9px 12px;
}

.c-totales{padding:14px 20px 0}
.c-totales table{width:100%;border-collapse:collapse;font-size:12.5px}
.c-totales td{padding:5px 0;color:var(--tinta-2)}
.c-totales td:last-child{text-align:right;font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums}
.c-totales tr.total td{
  padding-top:10px;border-top:1px solid var(--vidrio-linea);
  font-family:"Archivo",sans-serif;font-stretch:86%;font-weight:800;font-size:19px;color:var(--tinta);
}
.c-totales tr.total td:first-child{font-size:14px}
.c-cuota{font-size:12.5px;color:var(--ahorro);font-weight:600;text-align:right;margin-top:4px}
.c-pie{padding:14px 20px 20px}
.c-pagar{
  width:100%;padding:15px;border-radius:18px;
  background:linear-gradient(140deg,#E8443C,#B71C1C);color:#fff;
  font-family:"Archivo",sans-serif;font-stretch:88%;font-weight:800;font-size:15.5px;
  box-shadow:0 12px 26px -12px rgba(183,28,28,.75);
}
.c-pagar[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.c-letra{font-size:11px;color:var(--tinta-2);text-align:center;margin:9px 0 0;line-height:1.45}

/* ---------- aviso flotante ---------- */
.tostada{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(10px);
  z-index:90;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--vidrio);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--vidrio-borde);box-shadow:var(--vidrio-sombra);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.tostada.ver{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){.tostada{transition:none}}

/* ---------- interruptor de tema ---------- */
#tema [data-tema-icono]{display:inline-flex;align-items:center}
#tema [data-tema-icono] svg{width:15px;height:15px;display:block}

/* ============================================================
   Añadidos de la tienda real (no vienen del prototipo)
   ============================================================ */

/* Fotos de producto. En la rejilla se recorta al centro para que las
   tarjetas queden parejas; en la ficha se muestra entera. */
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.f-foto img{width:100%;height:100%;object-fit:contain;display:block;padding:14px}
.c-foto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
.hero-fig img{width:100%;height:100%;object-fit:contain;display:block}

/* Miniaturas de la ficha, cuando el producto tiene más de una foto. */
.f-tiras{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.f-tiras button{
  width:54px;height:54px;border:1.5px solid var(--linea);border-radius:7px;
  overflow:hidden;background:var(--superficie-2);padding:0;cursor:pointer;
}
.f-tiras button[aria-current="true"]{border-color:var(--azul)}
.f-tiras img{width:100%;height:100%;object-fit:cover;display:block}

/* Acceso al panel, discreto, en el pie. */
.pie-panel{display:inline-flex;align-items:center;gap:6px;opacity:.7;font-size:12px}
.pie-panel:hover{opacity:1;text-decoration:underline}
.pie-panel svg{width:13px;height:13px}

/* Paginación del catálogo: el prototipo pintaba todo de una vez. */
.paginas{display:flex;justify-content:center;align-items:center;gap:6px;margin:26px 0;flex-wrap:wrap}
.paginas a,.paginas span{
  min-width:36px;padding:7px 11px;text-align:center;border-radius:var(--radio);
  border:1px solid var(--linea);font-size:13px;background:var(--superficie);color:var(--tinta-2);
}
.paginas a:hover{border-color:var(--azul);color:var(--azul)}
.paginas .aqui{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:700}
.paginas .nada{opacity:.4}

/* Ficha de producto como página propia (el prototipo solo tenía la ventana). */
.miga{font-size:12.5px;color:var(--tenue);padding:14px 0}
.miga a{color:var(--tinta-2)}
.miga a:hover{color:var(--azul);text-decoration:underline}
.ficha-pag{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:860px){.ficha-pag{grid-template-columns:1fr 1fr;gap:34px}}
.ficha-col{min-width:0}
.ficha-grande{
  width:100%;aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden;
  background:var(--superficie-2);border:1px solid var(--linea);
  display:grid;place-items:center;
}
.ficha-grande svg{width:58%;height:58%;color:var(--tinta-2);opacity:.6}
.ficha-grande img{width:100%;height:100%;object-fit:contain;padding:18px}
.ficha-pag h1{font-size:clamp(1.2rem,3vw,1.7rem);font-weight:800;margin:4px 0 6px;line-height:1.2;letter-spacing:-.015em}
.f-h3{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-2);font-weight:500;margin:20px 0 8px}
.ficha-compra{display:flex;gap:10px;align-items:stretch;margin:16px 0 18px;flex-wrap:wrap}
.ficha-compra .f-btn{flex:1;min-width:190px}
.cantidad{display:flex;align-items:center;border:1.5px solid var(--linea-fuerte);border-radius:var(--radio)}
.cantidad button{width:38px;height:44px;font-size:18px;font-weight:700;color:var(--tinta-2);background:none;border:0;cursor:pointer}
.cantidad input{width:46px;height:44px;text-align:center;border:0;background:transparent;
  font:inherit;font-weight:700;color:var(--tinta);-moz-appearance:textfield}
.cantidad input::-webkit-outer-spin-button,.cantidad input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* La barra de cuotas ahora es un enlace a su página. */
a.financ{display:block;text-decoration:none}
a.financ:hover .fino{text-decoration:underline}
.cobertura a{color:inherit}
.cobertura a:hover{text-decoration:underline}

/* Invitación a preguntar, donde antes estaba la calculadora de cuotas. */
.invita{text-align:center;padding:6px 0 4px}
.invita p{max-width:60ch;margin:0 auto 18px;color:var(--tinta-2);font-size:14px;line-height:1.6}
.invita-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta-borde{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:var(--radio);font-weight:700;font-size:14.5px;
  border:1.5px solid var(--linea-fuerte);color:var(--tinta);background:var(--superficie);
}
.cta-borde:hover{border-color:var(--azul);color:var(--azul)}

/* Páginas de información y salas de ventas. */
.info-pag{max-width:760px;margin:0 auto}
.info-pag h1{font-size:clamp(1.3rem,3.4vw,1.9rem);font-weight:800;margin:0 0 14px;letter-spacing:-.015em}
.info-pag p{color:var(--tinta-2);font-size:14.5px;line-height:1.7;margin:0 0 14px}
.info-h2{font-size:1.05rem;font-weight:700;margin:22px 0 8px}
.info-aviso{
  background:var(--superficie-2);border-left:3px solid var(--azul);
  padding:13px 16px;border-radius:var(--radio);font-size:13.5px;
  color:var(--tinta-2);line-height:1.6;margin:18px 0;
}
.info-lista{list-style:none;margin:0 0 14px;padding:0}
.info-lista li{padding:7px 0;border-bottom:1px solid var(--linea);font-size:14px}
.info-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.sucs{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:720px){.sucs{grid-template-columns:repeat(2,1fr)}}
.suc{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:18px}
.suc h2{font-size:1.05rem;font-weight:800;margin:0 0 6px}
.suc-dir{margin:0 0 10px;font-size:13.5px;color:var(--tinta-2);line-height:1.5}
.suc-datos{list-style:none;margin:0 0 14px;padding:0;font-size:13px;color:var(--tinta-2)}
.suc-datos li{padding:3px 0}
.suc-datos b{color:var(--tinta)}
.suc-btns{display:flex;gap:8px;flex-wrap:wrap}
.suc-btns .cta-borde{padding:8px 14px;font-size:13px}

/* Atribución de las fotos. Obligatoria en CC BY y CC BY-SA. */
.foto-credito{
  margin:8px 0 0;font-size:11.5px;color:var(--tenue);line-height:1.5;
}
.foto-credito a{color:var(--tenue);text-decoration:underline}
.creditos{list-style:none;margin:16px 0;padding:0}
.creditos li{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--linea);font-size:13.5px;
}
.cr-autor{font-weight:600;flex:1;min-width:180px}
.cr-lic{font-size:12px;color:var(--tenue);font-family:"IBM Plex Mono",monospace}
.cr-org{font-size:12.5px}

/* «Avisarme»: la respuesta del servidor queda escrita, no se esfuma. */
.suscribe-msg{margin:10px 0 0;font-size:13.5px;line-height:1.45;padding:9px 12px;border-radius:10px}
.suscribe-msg.bien{background:color-mix(in srgb,var(--ahorro) 12%,transparent);color:var(--ahorro)}
.suscribe-msg.ya{background:color-mix(in srgb,var(--azul) 12%,transparent);color:var(--azul)}
.suscribe-msg.mal{background:rgba(214,47,47,.10);color:var(--precio)}
.suscribe-letra{margin:8px 0 0;font-size:12px;color:var(--tenue);line-height:1.45}
.suscribe-form button[disabled]{opacity:.6;cursor:wait}

/* Confirmación del pedido: si la copia por correo salió o no. */
.gracias .copia-correo{font-size:13.5px;padding:10px 14px;border-radius:10px;margin:0 auto 16px}
.gracias .copia-correo.bien{background:color-mix(in srgb,var(--ahorro) 10%,transparent);color:var(--tinta-2)}
.gracias .copia-correo.mal{background:rgba(214,47,47,.09);color:var(--precio)}

/* Confirmación del pedido. */
.gracias{
  max-width:620px;margin:40px auto;background:var(--superficie);
  border:1px solid var(--linea);border-radius:14px;padding:32px 26px;text-align:center;
}
.gracias .marca-ok{width:58px;height:58px;color:var(--ahorro);margin:0 auto 14px}
.gracias h1{font-size:1.5rem;margin:0 0 8px;font-weight:800}
.gracias p{color:var(--tinta-2);margin:0 auto 16px;max-width:46ch;font-size:13.5px;line-height:1.6}
.gracias .codigo{
  font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;
  background:var(--superficie-2);padding:9px 16px;border-radius:var(--radio);
  display:inline-block;margin:10px 0 16px;letter-spacing:.04em;
}
.gracias .f-tabla{text-align:left;margin:14px 0}
.gracias .c-pagar{max-width:320px;margin:6px auto 0}

/* La barra inferior: en la ficha el boton rojo es «Agregar». */
.inferior button.cr{border:0;cursor:pointer;font:inherit;font-weight:700}
.inferior button.cr[disabled]{background:var(--superficie-2);color:var(--tenue);cursor:not-allowed}

/* El flotante puede ser <a> o <button> segun haya numero de WhatsApp. */
button.flota{border:0;cursor:pointer;font:inherit}
.inferior button.wa{border:0;cursor:pointer;font:inherit}

/* El pie tiene cuatro bloques (el prototipo tenia tres): sin esto el
   cuarto caia solo en una fila aparte. */
@media(min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* El menu azul marca en cual familia estas parado. */
.dep-in a.aqui{background:rgba(255,255,255,.22);color:#fff}

/* Campos del pedido. El prototipo no pedía nombre ni teléfono (no guardaba
   pedidos), así que solo le daba estilo al <select>. Los campos nuevos
   quedaban con el aspecto por defecto del navegador: 13 px de letra y 21 px
   de alto. Van con el mismo vidrio que el select.
   La letra es de 16 px en todas las pantallas: con menos, iOS hace zoom a la
   página entera cada vez que se toca un campo. */
.c-entrega input:not([type=radio]),.c-entrega textarea,.c-entrega select{
  width:100%;border:1px solid var(--vidrio-borde);border-radius:15px;padding:11px 13px;
  font:inherit;font-size:16px;background:var(--vidrio-panel);color:var(--tinta);min-height:46px;
}
.c-entrega textarea{min-height:64px;resize:vertical;line-height:1.4}
.c-entrega input::placeholder,.c-entrega textarea::placeholder{color:var(--tenue)}
.c-entrega input:not([type=radio]):focus,.c-entrega textarea:focus,.c-entrega select:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(20,97,143,.15);
}
.c-metodo{min-height:42px}

/* Dónde retirar: una tarjeta por sala, con el mismo vidrio del carrito. */
.c-salas{border:0;margin:0 0 2px;padding:0;display:grid;gap:7px;min-width:0}
.c-salas legend{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-2);margin:0 0 6px;padding:0;
}
.c-sala{
  display:flex;align-items:flex-start;gap:10px;padding:11px 13px;min-height:48px;
  border-radius:15px;border:1px solid var(--vidrio-borde);background:var(--vidrio-panel);cursor:pointer;
}
.c-sala input{margin:2px 0 0;width:19px;height:19px;accent-color:var(--azul);flex-shrink:0}
.c-sala b{display:block;font-size:14px;line-height:1.3}
.c-sala small{display:block;font-size:12px;color:var(--tinta-2);margin-top:2px;line-height:1.35}
.c-sala:has(input:checked){border-color:var(--azul);background:rgba(20,97,143,.12)}
.c-sala:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
.c-sala-nota{
  margin:0;padding:10px 13px;border-radius:15px;font-size:12.5px;line-height:1.45;
  color:var(--tinta-2);background:var(--vidrio-panel);border:1px solid var(--vidrio-borde);
}

/* Dónde retirar, en la confirmación del pedido. */
.gracias .sala-retiro{
  text-align:left;background:var(--superficie-2);border-radius:10px;padding:13px 15px;margin:0 0 16px;
}
.gracias .sala-retiro b{display:block;font-size:15px;margin-bottom:2px}
.gracias .sala-retiro span{display:block;font-size:13px;color:var(--tinta-2);line-height:1.5}

/* Avisos del formulario de pedido. */
.c-error{
  background:rgba(214,47,47,.12);border-left:3px solid var(--precio-fondo);
  color:var(--precio);padding:9px 11px;border-radius:3px;font-size:12.5px;margin-bottom:10px;
}

/* ===== logo oficial (parciales/marca.css) ===== */
/* Logo oficial
   ---------------------------------------------------------------
   assets/logo.svg, vectorizado del logo de la marca: 6 KB (2.7 KB
   comprimido) contra 36 KB del JPG original, y nítido en cualquier
   pantalla. Se usa con <use>, así queda en caché y no se repite en
   cada página.

   Los colores salen de variables (--logo-r, -v, -a, -b) con los
   oficiales como valor por defecto. En modo oscuro se aclaran: el azul
   oficial sobre el fondo oscuro casi no se lee. */
/* 20 % más grande que la primera versión (48 px), a pedido del cliente. */
.logo-img{display:block;height:58px;width:auto;aspect-ratio:816/331}

/* Logo y teléfono, uno encima del otro. */
.marca-cab{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0}
.logo-tel{
  display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:5px;
  font:700 14px/1.2 "Archivo",sans-serif;font-stretch:90%;letter-spacing:.03em;
  color:var(--tinta);text-decoration:none;white-space:nowrap;
}
.logo-tel svg{color:var(--logo-a,#0B57E0);flex-shrink:0}
.logo-tel:hover{background:color-mix(in srgb,var(--tinta) 7%,transparent);text-decoration:none}
[data-theme="dark"] .marca-cab{--logo-r:#FF5347;--logo-v:#2FC45E;--logo-a:#5B9BFF}

/* ===== 4. teléfono primero (parciales/movil.css) ===== */
/* ============================================================
   Teléfono primero
   ------------------------------------------------------------
   Medido en un teléfono de 375 px antes de tocar nada:
     · el 54 % de la primera pantalla era cabecera (436 px)
     · el primer producto aparecía 2.1 pantallas más abajo
     · la portada medía 11 pantallas de alto
     · 25 cosas tocables de menos de 40 px, 193 textos de menos de 12 px

   Todo va dentro de max-width:767.98px a propósito: el escritorio es
   el que ya se aprobó y no debe moverse ni un píxel.
   ============================================================ */

/* Detalles que valen en cualquier pantalla táctil. */
html{-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,label{touch-action:manipulation}

@media (max-width:767.98px){

  /* ---------- 1. barra de cuotas: una sola línea ---------- */
  .financ{padding:11px 12px;font-size:13px;line-height:1.3;min-height:40px}
  .financ .fino{display:none}

  /* ---------- 2. cabecera: marca y carrito arriba, buscador abajo ----------
     Antes se partía en tres o cuatro filas y medía 191 px. */
  .top-in{
    display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo . acc" "busca busca busca";
    gap:10px 8px;padding:10px 12px;
  }
  .marca-cab{grid-area:logo}
  .logo{min-height:40px}
  .logo-img{height:48px}
  .logo-tel{font-size:13px;min-height:26px;padding:3px 6px}
  .acc{grid-area:acc;gap:6px;margin:0}
  .buscador{grid-area:busca;max-width:none;min-width:0}
  .buscador input{padding:10px 12px;font-size:16px}  /* 16 px: iOS no hace zoom al enfocar */
  .buscador button{padding:0 14px}

  /* «Hola, Administrar» ya está en el pie; acá ocupa lugar. */
  .acc a.it{display:none}
  #tema{padding:6px 4px;min-height:40px;min-width:44px}
  #tema > span{display:none}
  #tema b{font-size:11.5px}
  .acc .carrito{padding:7px 10px;font-size:12px;min-height:40px}
  .acc .carrito small{font-size:10px}

  /* ---------- 3. menú azul: más compacto, sigue deslizándose ---------- */
  .dep-in{padding:0 8px}
  .dep-in a,.dep-in button{padding:11px 11px;font-size:12.5px}

  /* ---------- 4. cobertura: una línea que se desliza ----------
     Eran cuatro renglones apilados: 125 px. */
  .cobertura{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    gap:20px;padding:8px 14px;font-size:12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .cobertura::-webkit-scrollbar{display:none}
  .cobertura a{display:inline-flex;align-items:center;min-height:40px;margin:-11px 0}

  /* ---------- 5. contenedor ---------- */
  .env{padding:0 12px}
  .bloque{margin-top:22px}

  /* ---------- 6. hero: foto al lado del texto, no debajo ---------- */
  .hero{padding-top:10px;gap:8px}
  .hero-main{
    padding:18px 16px 16px;min-height:0;gap:8px;
    grid-template-columns:1fr 36%;align-items:center;
  }
  .hero-main h1{font-size:1.2rem;margin:0 0 10px}
  .hero-kicker{font-size:11.5px;margin-bottom:8px;padding:3px 7px}
  .hero-pr{font-size:2rem}
  .hero-antes{font-size:12.5px}
  .hero-cuota{font-size:12px;padding:5px 8px;margin-bottom:10px}
  .hero-main .cta{padding:10px 16px;font-size:14px}
  .hero-fig svg,.hero-fig img{max-height:150px;width:100%}
  .hero-badge{transform:scale(.8);transform-origin:top right}

  /* Las dos tarjetas de al lado van lado a lado, sin el párrafo largo. */
  .hero-lado{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:8px}
  .lado{min-height:0;padding:13px 12px}
  .lado h3{font-size:14px;margin:0 0 4px}
  .lado p{display:none}
  .lado .mas{margin-top:4px;font-size:12px}

  /* ---------- 7. títulos de sección y «ver todo» ---------- */
  .cab{gap:6px 10px;margin-bottom:10px}
  .cab .sub{order:3;width:100%;font-size:12px}
  .cab .vertodo,.ofertas-cab .vertodo{
    display:inline-flex;align-items:center;min-height:40px;padding:0 2px;
  }

  /* ---------- 8. categorías: discos más chicos ---------- */
  .cat-riel{gap:10px;margin:0 -12px;padding:4px 12px 10px;scrollbar-width:none}
  .cat-riel::-webkit-scrollbar{display:none}
  .cat-it{width:74px}
  .cat-disco{width:62px;height:62px}
  .cat-disco svg{width:36px;height:36px}
  .cat-it span{font-size:11.5px}

  /* ---------- 9. rieles de productos: se deslizan de costado ----------
     La portada tenía cinco rejillas de 2 columnas: ~1000 px cada una.
     Como riel, una fila con la tercera tarjeta asomando para que se
     note que hay más. La grilla del catálogo NO cambia: ahí sí se
     quiere ver todo. */
  .rej,.rej.c5{
    display:flex;grid-template-columns:none;gap:8px;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -12px;padding:2px 12px 8px;scroll-padding:0 12px;
  }
  .rej::-webkit-scrollbar{display:none}
  .rej > .tarjeta{flex:0 0 43%;scroll-snap-align:start}
  .ofertas-caja{padding:10px 0}
  .ofertas-caja .rej{margin:0;padding:2px 10px 6px;scroll-padding:0 10px}

  .ofertas-cab{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .ofertas-cab h2{font-size:17px}
  .reloj i{min-width:26px;padding:3px 4px;font-size:13px}

  /* ---------- 10. tarjeta de producto: se lee sin entrecerrar los ojos ---------- */
  .cuerpo{padding:8px 8px 9px;gap:3px}
  .pr{font-size:19px}
  .antes{font-size:12px}
  .cuota{font-size:12px;min-height:0}
  .nom{font-size:13px;line-height:1.3}
  .ins{font-size:11px;padding:2px 5px}
  .vend{font-size:11.5px}
  .disp{font-size:12px}
  .desc{font-size:12px}

  /* ---------- 11. bloque de cuotas con los personajes ---------- */
  .blando{padding:22px 16px 20px}
  .chispa.c2,.chispa.c4{display:none}
  .blando h2{font-size:1.45rem}
  .blando-top p{font-size:13.5px}
  .personajes > div{max-width:96px}
  .personajes .p-med{max-width:110px;transform:translateY(-8px)}
  .tres{gap:6px;margin:16px 0}
  .fcard{padding:12px 8px}
  .fcard b{font-size:12.5px}
  .fcard span:last-child{font-size:11.5px}
  .invita p{font-size:13.5px}
  .invita-btns{flex-direction:column}
  .invita-btns a{width:100%;justify-content:center;min-height:48px}

  /* ---------- 12. confianza ---------- */
  .conf{gap:6px}
  .conf-it{padding:12px}
  .conf-it b{font-size:13px}
  .conf-it span{font-size:12.5px}
  .conf-it a{display:inline-flex;align-items:center;min-height:40px}

  /* ---------- 13. suscripción ---------- */
  .suscribe{padding:20px 16px}
  .suscribe-form input{font-size:16px}   /* sin zoom en iOS */

  /* ---------- 14. catálogo ---------- */
  .cats-riel{padding:0 12px;scrollbar-width:none}
  .cats-riel::-webkit-scrollbar{display:none}
  .chip{min-height:36px;display:inline-flex;align-items:center}

  /* Orden, filtros y conteo en una sola fila que se desliza. */
  .control{
    flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:8px 12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .control::-webkit-scrollbar{display:none}
  .control > *{flex-shrink:0}
  .control select{font-size:14px;min-height:40px}
  .tog{min-height:40px;white-space:nowrap}
  .conteo{white-space:nowrap}

  .rejilla{padding:8px 12px 24px;gap:8px}

  /* ---------- 15. ficha de producto como página ---------- */
  .ficha-pag{gap:16px}
  .ficha-grande{border-radius:10px}
  .ficha-pag h1{font-size:1.2rem}
  .ficha-compra .f-btn{min-height:48px}
  .miga{padding:10px 0;font-size:12px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}

  /* ---------- 16. pie ---------- */
  footer{padding:24px 0 16px;margin-top:28px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:18px 14px}
  .foot-grid > div:first-child{grid-column:1 / -1}
  footer ul{font-size:13.5px;line-height:1.35}
  footer ul li{padding:0}
  footer ul li a,footer .pie-panel{display:flex;align-items:center;min-height:42px}
  footer h4{font-size:11.5px}
  footer .deps{font-size:12px}
  .foot-legal{font-size:11.5px}

  /* ---------- 17. barra inferior y flotante ---------- */
  .inferior{padding:7px 8px calc(7px + env(safe-area-inset-bottom));gap:6px}
  .inferior .wa,.inferior .ct,.inferior .cr{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .flota{width:48px;height:48px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom))}

  /* ---------- 18. carrito ----------
     Los botones de cantidad medían 26 px: se erraba el dedo. */
  .c-cant button{width:38px;height:38px;font-size:18px}
  .c-quitar{min-height:38px;display:inline-flex;align-items:center;padding:0 6px}
  .c-pagar{min-height:52px}

  /* ---------- 19. páginas de información y salas ---------- */
  .info-pag h1{font-size:1.35rem}
  .info-btns a{width:100%;justify-content:center;min-height:48px}
  .suc{padding:16px}
}

/* ---------- teléfonos chicos (360 px y menos) ---------- */
@media (max-width:374.98px){
  .logo-img{height:43px}
  .acc .carrito small{display:none}
  .hero-main{grid-template-columns:1fr 32%}
  .hero-pr{font-size:1.75rem}
  .rej > .tarjeta{flex-basis:46%}
  .tres{grid-template-columns:1fr}
  .fcard{display:flex;align-items:center;gap:10px;text-align:left}
}

/* ===== 5. esqueleto de las fotos (parciales/esqueleto.css) ===== */
/* Esqueleto de las fotos
   ---------------------------------------------------------------
   Mientras una foto baja, su caja muestra un brillo que pasa de lado a
   lado: se entiende que ahí viene algo, en vez de un hueco quieto.

   El brillo va DEBAJO de la imagen (z-index:-1 dentro de la caja
   aislada), no encima: la foto lo tapa sola en cuanto se pinta, sin
   esperar a ningún script, y nunca se esconde una foto que ya está.
   Así tampoco se atrasa el LCP de la portada ni el de la ficha.
   tienda.js saca la clase «esq» cuando la foto terminó, para que el
   brillo no siga corriendo detrás de las fotos con fondo transparente.

   Solo con la marca «js» en <html>: sin JavaScript nadie apagaría el
   brillo. */
.js .esq{position:relative;isolation:isolate}
.js .esq::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 65%)
             color-mix(in srgb,var(--tinta-2) 7%,transparent);
  background-size:250% 100%;
  animation:esq-brillo 1.4s linear infinite;
}
.js[data-theme="dark"] .esq::before{
  background:linear-gradient(100deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 65%)
             rgba(255,255,255,.04);
  background-size:250% 100%;
}
@keyframes esq-brillo{from{background-position:100% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){
  .js .esq::before{animation:none;background-image:none}
}