/* =========================================================
   SIC Tienda — prototipo
   Estructura comercial tipo SP Digital + identidad SIC
   Paleta tomada del tema Dawn actual de sictienda.cl
   ========================================================= */

:root {
  /* identidad SIC (extraida de paginas/index.html) */
  --morado:        #332062;
  --morado-claro:  #733B8D;
  --azul:          #334FB4;
  --magenta:       #DA1C5C;
  --oscuro:        #242833;

  --morado-900:    #26184a;
  --morado-50:     #f4f1fa;
  --azul-50:       #eef1fb;

  --verde:         #0f8a4d;
  --verde-50:      #e7f6ee;
  --naranjo:       #d9720b;

  --txt:           #1c1c22;
  --txt-2:         #5a5a68;
  --txt-3:         #8b8b98;
  --linea:         #e4e4ec;
  --fondo:         #f4f4f7;
  --blanco:        #fff;

  --radio:         10px;
  --radio-s:       6px;
  --sombra:        0 1px 2px rgba(28,28,34,.06), 0 2px 8px rgba(28,28,34,.06);
  --sombra-alta:   0 4px 12px rgba(28,28,34,.10), 0 12px 32px rgba(28,28,34,.12);

  --f-titulo: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-texto:  'Assistant', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ancho: 1320px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 15px;
  line-height: 1.5;
  color: var(--txt);
  background: var(--fondo);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select { font: inherit; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 700; margin: 0; line-height: 1.25; }

/* ---------- aviso de demo ---------- */
.demo-aviso {
  background: #fff4d6;
  border-bottom: 1px solid #f0d999;
  color: #7a5600;
  font-size: 12.5px;
  text-align: center;
  padding: 7px 16px;
}
.demo-aviso strong { font-weight: 700; }


/* ---------- header ---------- */
.header { background: var(--morado); color: #fff; position: sticky; top: 0; z-index: 60; }
.header__fila {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 16px; max-width: var(--ancho); margin: 0 auto;
}
/* El isotipo y el nombre, en fila. El cubo solo no basta: sus caras
   azul marino se pierden sobre el morado del header, y un isotipo
   suelto no lo reconoce nadie la primera vez que entra. */
.logo { display: flex; align-items: center; gap: 10px; line-height: 1; flex-shrink: 0; }
/* Fondo blanco detras del cubo.
   El logo tiene caras azul marino que sobre el morado del header
   se funden con el fondo: se veia como una mancha oscura. Sobre
   blanco el magenta y el cian saltan, que es como fue disenado.
   Es lo mismo que hace cualquier marca de color sobre una barra
   oscura. */
.logo__ico {
  width: 42px; height: 42px; flex-shrink: 0; display: block;
  background: #fff; border-radius: 9px; padding: 4px;
  box-sizing: border-box;
}
.logo__txt { display: flex; flex-direction: column; justify-content: center; }
.logo__t { font-family: var(--f-titulo); font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.logo__t em { font-style: normal; color: var(--magenta); }
.logo__s { font-size: 9.5px; font-weight: 700; letter-spacing: 3.2px; opacity: .72; margin-top: 3px; }

.buscador { flex: 1; position: relative; max-width: 620px; }
.buscador input {
  width: 100%; height: 42px; border-radius: 22px; border: 0;
  padding: 0 48px 0 20px; font-size: 14.5px; color: var(--txt);
}
.buscador input:focus { outline: 3px solid var(--magenta); }
.buscador button {
  position: absolute; right: 4px; top: 4px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--magenta); color: #fff;
  display: grid; place-items: center;
}
.sugerencias {
  position: absolute; top: 48px; left: 0; right: 0; background: #fff; color: var(--txt);
  border-radius: var(--radio); box-shadow: var(--sombra-alta); overflow: hidden;
  display: none; z-index: 70; max-height: 420px; overflow-y: auto;
}
.sugerencias.abierto { display: block; }
.sug {
  display: flex; gap: 12px; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid var(--linea);
}
.sug:hover { background: var(--morado-50); }
.sug img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.sug__t { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug__p { font-size: 13.5px; font-weight: 700; color: var(--morado); white-space: nowrap; }
.sug--ver { justify-content: center; font-weight: 700; color: var(--morado); font-size: 13.5px; border: 0; }

.header__acciones { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.hacc { display: flex; align-items: center; gap: 8px; font-size: 13px; position: relative; }
.hacc__txt { display: flex; flex-direction: column; line-height: 1.2; }
.hacc__l1 { font-size: 11.5px; opacity: .8; }
.hacc__l2 { font-weight: 700; }
.contador {
  position: absolute; top: -6px; left: 14px; min-width: 19px; height: 19px;
  background: var(--magenta); border-radius: 10px; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; padding: 0 5px;
}

/* ---------- mega menu ---------- */
.nav { background: var(--morado-900); position: relative; }
/* OJO: aqui NO se puede usar overflow-x para contener el desborde.
   Cualquier overflow distinto de visible crea contexto de recorte y
   cortaria el mega menu desplegable. En su lugar el espaciado de los
   items se ajusta con clamp() para que la barra siempre quepa.

   LOS 2 PX QUE FALTABAN

   Medido el 10-09-2026 con la ventana en 1265 px:

     ancho disponible en la fila .... 1233,0 px
     los 10 items suman ............. 1232,6 px
     mas 9 huecos de gap: 2px ....... +18,0 px

   El clamp() estaba calculado sobre los items y el gap quedo
   fuera de la cuenta: por eso la barra se pasaba justo en esa
   franja de anchos y la pagina ganaba 2 px de scroll horizontal.

   Se arregla por los dos lados: el gap baja a 1 px (recupera 9)
   y la pendiente del relleno de 1.05vw a 0.98vw (recupera otros
   20 a ese ancho). Con eso sobran ~11 px y la barra cabe en todo
   el rango, no solo en el que fallaba. */
.nav__fila { display: flex; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; gap: 1px; }
.nav__item { position: relative; }
.nav__btn {
  color: #fff; padding: 12px clamp(8px, 0.98vw, 15px);
  font-size: clamp(12.2px, 1.02vw, 13.5px); font-weight: 600;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.nav__item:hover .nav__btn, .nav__btn.activo { background: var(--morado-claro); }
.nav__btn svg { opacity: .7; }
.nav__item:hover .mega { display: grid; }
.mega {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; color: var(--txt); min-width: 560px;
  /* columnas automaticas: las categorias con tarjeta de video traen tres,
     las demas dos, sin dejar hueco */
  grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 0 28px;
  padding: 20px 24px; border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra-alta); z-index: 65;
}
.mega h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); margin-bottom: 8px; }
.mega a { display: block; padding: 5px 0; font-size: 13.5px; }
.mega a:hover { color: var(--magenta); }
.mega__col { min-width: 0; }
/* Los menus que no caben por la derecha se anclan al borde opuesto.
   La clase la pone acomodarMegas() midiendo cada uno al cargar. */
.nav__item .mega--der { left: auto; right: 0; }

.nav__empresas { margin-left: auto; }
.nav__empresas .nav__btn { color: #ffd66b; }
.nav__btn--destacado { color: #7ce0b0; }

/* El distintivo de "Pronto": lo lleva Arma tu PC mientras el
   armador esta apagado. Se ve que existe y que viene, sin
   prometer que ya se puede usar. */
.nav__pronto {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  opacity: .85;
}
.nav__btn--destacado svg { opacity: 1; }

/* ---------- hero ---------- */
.hero { padding: 22px 0 8px; }
.hero__caja {
  position: relative; border-radius: 14px; overflow: hidden;
  background: linear-gradient(115deg, var(--morado) 0%, var(--morado-claro) 48%, var(--magenta) 100%);
  min-height: 310px; display: flex; align-items: center;
}
.hero__slide { display: none; width: 100%; }
.hero__slide.activo { display: block; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 20px; padding: 34px 44px; }
.hero__kicker {
  display: inline-block; background: rgba(255,255,255,.16); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.hero h2 { color: #fff; font-size: 34px; margin-bottom: 10px; }
.hero p { color: rgba(255,255,255,.9); font-size: 15.5px; margin: 0 0 20px; max-width: 440px; }
.hero__precio { color: #fff; font-size: 15px; margin-bottom: 18px; }
.hero__precio b { font-size: 30px; font-family: var(--f-titulo); }
.hero__foto { display: grid; place-items: center; }
.hero__foto img { height: 240px; width: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.hero__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.9);
  display: grid; place-items: center; color: var(--morado); z-index: 3;
}
.hero__flecha:hover { background: #fff; }
.hero__flecha--izq { left: 14px; }
.hero__flecha--der { right: 14px; }
.hero__puntos { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 3; }
.hero__punto { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); }
.hero__punto.activo { background: #fff; width: 22px; border-radius: 4px; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 22px; border-radius: var(--radio-s);
  font-weight: 700; font-size: 14px; transition: filter .15s, background .15s;
}
.btn--magenta { background: var(--magenta); color: #fff; }
.btn--magenta:hover { filter: brightness(1.08); }
.btn--morado { background: var(--morado); color: #fff; }
.btn--morado:hover { filter: brightness(1.15); }
.btn--blanco { background: #fff; color: var(--morado); }
.btn--linea { border: 1.5px solid var(--linea); color: var(--txt); background: #fff; }
.btn--linea:hover { border-color: var(--morado); color: var(--morado); }
.btn--bloque { width: 100%; }
.btn:disabled { background: #d5d5de; color: #fff; cursor: not-allowed; filter: none; }

/* ---------- secciones ---------- */
.seccion { padding: 30px 0 6px; }
.seccion__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.seccion__cab h2 { font-size: 23px; }
.seccion__cab h2 em { font-style: normal; color: var(--magenta); }
.seccion__link { font-size: 13.5px; font-weight: 700; color: var(--morado); white-space: nowrap; }
.seccion__link:hover { color: var(--magenta); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab {
  padding: 8px 16px; border-radius: 20px; font-size: 13.5px; font-weight: 600;
  background: #fff; border: 1px solid var(--linea); color: var(--txt-2);
}
.tab:hover { border-color: var(--morado-claro); color: var(--morado); }
.tab.activo { background: var(--morado); border-color: var(--morado); color: #fff; }

/* ---------- carrusel de productos ---------- */
.carrusel { position: relative; }
.carrusel__pista {
  display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: 4px 2px 14px;
  scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * { flex: 0 0 234px; scroll-snap-align: start; }
.carrusel__flecha {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; background: #fff;
  box-shadow: var(--sombra-alta); display: grid; place-items: center;
  color: var(--morado); z-index: 4;
}
.carrusel__flecha:hover { background: var(--morado); color: #fff; }
.carrusel__flecha--izq { left: -14px; }
.carrusel__flecha--der { right: -14px; }

/* ---------- tarjeta de producto ---------- */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
}

.card {
  background: #fff; border-radius: var(--radio); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  box-shadow: var(--sombra); transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.card--nostock { opacity: .74; }

.card__badges { position: absolute; top: 9px; left: 9px; display: flex; flex-direction: column; gap: 4px; z-index: 2; align-items: flex-start; }
.badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3.5px 8px; border-radius: 4px; color: #fff; white-space: nowrap;
}
.badge--nacional   { background: var(--verde); }
.badge--importacion{ background: var(--azul); }
.badge--sinstock   { background: #9a9aa6; }
.badge--cond       { background: var(--naranjo); }
.badge--dcto {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  background: var(--magenta); font-size: 12px; padding: 5px 9px; border-radius: 5px;
  color: #fff; font-weight: 800;
}

/* La foto usa alto y ancho explicitos con object-fit, NO max-height: 100%.
   Un `max-height` en porcentaje sobre un item de grid no siempre resuelve,
   y la imagen terminaba desbordando el contenedor y tapando el titulo. */
.card__foto {
  display: block; height: 190px; padding: 24px 14px 8px;
  background: #fff; overflow: hidden;
}
.card__foto img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  mix-blend-mode: multiply;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__foto img { transform: scale(1.07); }

.card__cuerpo { padding: 0 14px 14px; display: flex; flex-direction: column; flex: 1; }
.card__marca { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--txt-3); margin-bottom: 5px; }
.card__t {
  font-size: 12.8px; line-height: 1.35; color: var(--txt); min-height: 52px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 10px;
}
.card:hover .card__t { color: var(--morado); }

.card__precios { margin-top: auto; }
.card__antes { font-size: 12px; color: var(--txt-3); text-decoration: line-through; height: 17px; }
.card__precio { font-family: var(--f-titulo); font-size: 20px; font-weight: 800; color: var(--morado); line-height: 1.2; }
.card__medio { font-size: 10.5px; color: var(--txt-2); margin-bottom: 8px; }
.card__otro { font-size: 11.5px; color: var(--txt-2); }
.card__otro b { color: var(--txt); font-weight: 700; }

.card__btn {
  margin-top: 10px; width: 100%; height: 36px; border-radius: var(--radio-s);
  background: var(--magenta); color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.card__btn:hover { filter: brightness(1.08); }
.card__btn:disabled { background: #d5d5de; cursor: not-allowed; filter: none; }

/* ---------- grid de categorias ---------- */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cat {
  background: #fff; border-radius: var(--radio); padding: 22px 16px; text-align: center;
  box-shadow: var(--sombra); transition: transform .18s, box-shadow .18s;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.cat__ico {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--morado-50); display: grid; place-items: center; color: var(--morado);
}
.cat__n { font-family: var(--f-titulo); font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.cat__c { font-size: 12.5px; color: var(--txt-3); }

/* ---------- marcas ---------- */
.marcas { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.marca {
  background: #fff; border-radius: var(--radio-s); height: 62px;
  display: grid; place-items: center; box-shadow: var(--sombra);
  font-family: var(--f-titulo); font-weight: 800; font-size: 13px; color: var(--txt-2);
  letter-spacing: .3px; text-align: center; padding: 6px; line-height: 1.15;
}
.marca:hover { color: var(--morado); box-shadow: var(--sombra-alta); }
.marca small { display: block; font-weight: 600; font-size: 10.5px; color: var(--txt-3); }

/* ---------- destacados (arma tu pc / servicio tecnico) ---------- */
.destacados { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dest {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start;
  border-radius: 14px; padding: 26px; color: #fff;
  transition: transform .18s, box-shadow .18s;
}
.dest:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.dest--pc { background: linear-gradient(120deg, var(--morado) 0%, var(--azul) 100%); }
.dest--st { background: linear-gradient(120deg, var(--oscuro) 0%, var(--morado-claro) 100%); }
.dest__ico { width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.dest h3 { font-size: 22px; margin-bottom: 7px; }
.dest p { margin: 0 0 12px; font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.55; }
.dest__cta { font-weight: 700; font-size: 14px; }

/* ---------- confianza ---------- */
.confianza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 34px 0 8px; }
.conf {
  background: #fff; border-radius: var(--radio); padding: 18px;
  display: flex; gap: 13px; align-items: center; box-shadow: var(--sombra);
}
.conf__ico { width: 42px; height: 42px; border-radius: 50%; background: var(--morado-50); display: grid; place-items: center; color: var(--morado); flex-shrink: 0; }
.conf__t { font-family: var(--f-titulo); font-weight: 700; font-size: 14px; }
.conf__d { font-size: 12.5px; color: var(--txt-2); }

/* ---------- catalogo ---------- */
.cat-layout { display: grid; grid-template-columns: 258px 1fr; gap: 22px; padding: 20px 0 40px; align-items: start; }
/* La columna que se pega al bajar es la envoltura; la lista de adentro
   es la que se desplaza si las opciones no caben. La cabecera, el pie,
   el fondo y el boton "Filtros" son solo del telefono (ver mas abajo). */
.filtros-panel { position: sticky; top: 128px; }
.filtros-panel__cab, .filtros-panel__pie, .filtros-fondo, .btn-filtros { display: none; }
.filtros { background: #fff; border-radius: var(--radio); padding: 4px 18px 18px; box-shadow: var(--sombra); max-height: calc(100vh - 148px); overflow-y: auto; }
.filtro { border-bottom: 1px solid var(--linea); padding: 15px 0; }
.filtro:last-child { border-bottom: 0; }
.filtro h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-3); margin-bottom: 10px; }
.opt { display: flex; align-items: center; gap: 9px; padding: 3.5px 0; font-size: 13.5px; cursor: pointer; }
.opt input { width: 15px; height: 15px; accent-color: var(--morado); cursor: pointer; }
.opt span { flex: 1; }
.opt small { color: var(--txt-3); font-size: 12px; }
.opt:hover span { color: var(--morado); }
.rango { display: flex; gap: 8px; align-items: center; }
.rango input { width: 100%; height: 34px; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 9px; font-size: 13px; }
.rango input:focus { outline: 2px solid var(--morado-claro); border-color: transparent; }

.cat-barra {
  background: #fff; border-radius: var(--radio); padding: 12px 16px; box-shadow: var(--sombra);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.cat-barra select { height: 36px; border: 1px solid var(--linea); border-radius: var(--radio-s); padding: 0 10px; background: #fff; }
.cat-barra__conteo { font-size: 13.5px; color: var(--txt-2); }
.cat-orden { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  background: var(--morado-50); color: var(--morado); border-radius: 16px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.chip button { color: var(--morado); font-weight: 800; line-height: 1; font-size: 15px; }
.chip--limpiar { background: none; color: var(--txt-2); text-decoration: underline; font-weight: 600; }

.vacio { background: #fff; border-radius: var(--radio); padding: 60px 24px; text-align: center; box-shadow: var(--sombra); }
.vacio h3 { font-size: 19px; margin-bottom: 8px; }
.vacio p { color: var(--txt-2); margin: 0 0 18px; }

.paginacion { display: flex; justify-content: center; gap: 6px; margin-top: 26px; flex-wrap: wrap; }
.pag { min-width: 38px; height: 38px; border-radius: var(--radio-s); background: #fff; box-shadow: var(--sombra); display: grid; place-items: center; font-weight: 600; font-size: 13.5px; padding: 0 10px; }
.pag:hover { color: var(--morado); }
.pag.activo { background: var(--morado); color: #fff; }
.pag:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- filtros en el telefono ----------
   Bajo 900 px la columna de filtros pasaba a ir ENCIMA de los
   productos, con todos sus bloques abiertos: en un telefono de 375 px
   el primer producto salia cuatro pantallas y media mas abajo (medido
   el 24-09-2026; detalle en catalogo.html).
   Ahora se esconde detras del boton "Filtros" (el de las tres rayas)
   y sale por la izquierda como un menu. Filtros y Ordenar van en dos
   mitades iguales, y el conteo debajo. */
@media (max-width: 900px) {
  .cat-barra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px; scroll-margin-top: 10px; }
  .cat-orden { min-width: 0; }
  .btn-filtros {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; border: 1.5px solid var(--linea); border-radius: var(--radio-s);
    background: #fff; color: var(--morado); font-weight: 700; font-size: 15px;
  }
  .btn-filtros:hover, .btn-filtros[aria-expanded="true"] { border-color: var(--morado); }
  .btn-filtros__n {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--magenta); color: #fff; font-size: 12px; font-weight: 800;
  }
  .btn-filtros__n:empty { display: none; }
  /* "Ordenar por" se sigue leyendo en voz alta, pero no ocupa lugar:
     con el texto al lado el selector no cabia en media pantalla. */
  .cat-orden__txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* 16 px no es capricho: con menos, el iPhone agranda la pagina
     al tocar el selector y no la vuelve a su tamano. */
  .cat-barra select { width: 100%; height: 44px; font-size: 16px; font-weight: 600; color: var(--txt); }
  .cat-barra__conteo { grid-column: 1 / -1; order: 3; font-size: 12.5px; padding: 0 2px; }
  .cat-barra > .ed-agregar { grid-column: 1 / -1; order: 4; margin-left: 0; }

  .filtros-panel {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 250;
    width: min(88vw, 380px);
    display: flex; flex-direction: column;
    background: #fff; box-shadow: var(--sombra-alta);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s;
  }
  .filtros-panel.abierto { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
  .filtros-panel__cab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 8px 10px 18px; border-bottom: 1px solid var(--linea);
  }
  .filtros-panel__cab h2 { font-size: 17px; }
  .filtros-panel__cerrar {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-size: 28px; line-height: 1; color: var(--txt-2);
  }
  .filtros-panel__cerrar:hover { background: var(--fondo); color: var(--morado); }
  .filtros {
    flex: 1; min-height: 0; max-height: none; border-radius: 0; box-shadow: none;
    padding: 0 18px 8px; overscroll-behavior: contain;
  }
  /* casillas para el dedo: la fila entera se toca, no el cuadrito de 15 px */
  .filtros .opt { padding: 8px 0; font-size: 14.5px; }
  .filtros .opt:hover { padding-left: 0; }
  .filtros .opt input { width: 18px; height: 18px; }
  .filtros .rango input { height: 40px; font-size: 16px; }
  .filtros-panel__pie {
    display: grid; grid-template-columns: auto 1fr; gap: 10px;
    padding: 12px 18px; border-top: 1px solid var(--linea);
  }
  .filtros-fondo {
    display: block; position: fixed; inset: 0; z-index: 240;
    background: rgba(20, 18, 34, .55);
    opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility 0s linear .3s;
  }
  .filtros-fondo.abierto { opacity: 1; visibility: visible; transition: opacity .3s; }
  html.sin-scroll, html.sin-scroll body { overflow: hidden; }
}

/* ---------- ficha de producto ---------- */
.miga { font-size: 12.5px; color: var(--txt-2); padding: 16px 0 4px; }
.miga a:hover { color: var(--morado); }
.miga span { margin: 0 6px; color: var(--txt-3); }

.ficha { display: grid; grid-template-columns: 1fr 1fr 320px; gap: 24px; padding: 12px 0 40px; align-items: start; }
.galeria { background: #fff; border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); }
.galeria__main { height: 400px; margin-bottom: 14px; overflow: hidden; }
.galeria__main img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.galeria__tiras { display: flex; gap: 8px; flex-wrap: wrap; }
.galeria__t {
  width: 62px; height: 62px; border: 2px solid var(--linea); border-radius: var(--radio-s);
  display: grid; place-items: center; padding: 4px; background: #fff;
}
.galeria__t.activo { border-color: var(--morado); }
.galeria__t img { width: 100%; height: 100%; object-fit: contain; }

.info h1 { font-size: 22px; line-height: 1.32; margin-bottom: 12px; }
.info__marca { font-size: 11.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--magenta); margin-bottom: 7px; }
.info__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.info__specs { background: #fff; border-radius: var(--radio); padding: 6px 18px 14px; box-shadow: var(--sombra); }
.info__specs h3 { font-size: 14px; margin: 14px 0 8px; }
.spec { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; }
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--txt-2); flex-shrink: 0; }
.spec dd { margin: 0; font-weight: 600; text-align: right; }
.info__desc { font-size: 13.8px; color: var(--txt-2); line-height: 1.65; }

.compra { background: #fff; border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); position: sticky; top: 128px; }
.compra__antes { font-size: 13.5px; color: var(--txt-3); text-decoration: line-through; }
.compra__precio { font-family: var(--f-titulo); font-size: 31px; font-weight: 800; color: var(--morado); line-height: 1.15; }
.compra__medio { font-size: 12.5px; color: var(--txt-2); margin-bottom: 12px; }
.compra__entrega { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin-bottom: 15px; padding: 11px; border-radius: var(--radio-s); background: var(--verde-50); color: #0b5f36; }
.compra__entrega--imp { background: var(--azul-50); color: #23336f; }
.compra__entrega--no  { background: #f1f1f4; color: var(--txt-2); }
.compra__cant { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.contador-cant { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; }
.contador-cant button { width: 34px; height: 38px; font-size: 17px; font-weight: 700; color: var(--morado); }
.contador-cant button:hover { background: var(--morado-50); }
.contador-cant span { width: 40px; text-align: center; font-weight: 700; }

/* ---------- carrito ---------- */
.carro { display: grid; grid-template-columns: 1fr 340px; gap: 22px; padding: 20px 0 50px; align-items: start; }
.carro__lista { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.linea { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; padding: 18px; border-bottom: 1px solid var(--linea); align-items: center; }
.linea:last-child { border-bottom: 0; }
.linea__foto { width: 92px; height: 92px; display: grid; place-items: center; }
.linea__foto img { width: 100%; height: 100%; object-fit: contain; }
.linea__t { font-size: 14px; line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.linea__marca { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--txt-3); margin-bottom: 4px; }
/* "Quitar" y "Vaciar carrito" median 21 y 23 px de alto: se midio
   en el carrito a 360 px y con el dedo se falla. Se les da area
   tocable sin agrandar la letra, para que no compitan con el boton
   de pagar, que es el que tiene que resaltar. */
.linea__quitar {
  font-size: 12.5px; color: var(--txt-3); text-decoration: underline;
  padding: 11px 6px; margin: -11px -6px;   /* crece el area, no el hueco */
}
.linea__quitar:hover { color: var(--magenta); }
.chip--limpiar { padding-top: 10px; padding-bottom: 10px; }
.linea__der { text-align: right; }
.linea__precio { font-family: var(--f-titulo); font-size: 17px; font-weight: 800; color: var(--morado); margin-bottom: 8px; }

.resumen { background: #fff; border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); position: sticky; top: 128px; }
.resumen h3 { font-size: 17px; margin-bottom: 14px; }
.res-fila { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--txt-2); }
.res-fila b { color: var(--txt); }
.res-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; border-top: 2px solid var(--linea); margin-top: 8px; }
.res-total span { font-weight: 700; font-size: 15px; }
.res-total b { font-family: var(--f-titulo); font-size: 25px; color: var(--morado); }
.res-ahorro { background: var(--verde-50); color: #0b5f36; border-radius: var(--radio-s); padding: 9px 12px; font-size: 12.8px; margin: 12px 0; text-align: center; font-weight: 600; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 26px; right: 26px; z-index: 200;
  background: var(--oscuro); color: #fff; border-radius: var(--radio);
  padding: 14px 18px; box-shadow: var(--sombra-alta); font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 11px;
  transform: translateY(90px); opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none;
}
.toast.visible { transform: translateY(0); opacity: 1; }
.toast__ok { width: 21px; height: 21px; border-radius: 50%; background: var(--verde); display: grid; place-items: center; flex-shrink: 0; }

/* ---------- footer ---------- */
.footer { background: var(--oscuro); color: rgba(255,255,255,.72); margin-top: 42px; padding: 40px 0 0; font-size: 13.5px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; }
.footer h4 { color: #fff; font-size: 13.5px; margin-bottom: 13px; text-transform: uppercase; letter-spacing: .6px; }
.footer a { display: block; padding: 4px 0; }
.footer a:hover { color: #fff; }
.footer__logo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-family: var(--f-titulo); font-size: 24px; font-weight: 800; color: #fff;
}
.footer__logo img {
  width: 36px; height: 36px; flex-shrink: 0;
  background: #fff; border-radius: 8px; padding: 3px; box-sizing: border-box;
}
.footer__logo i { font-style: normal; color: var(--magenta); }
.footer__bajo { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; font-size: 12.5px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- responsive ---------- */

/* Bajo 1250 px la barra ya no cabe con todos los items.
   Ahi si conviene scrollarla, porque en ese tramo tambien se oculta el
   mega menu: sin desplegable no hay nada que el recorte pueda cortar. */
@media (max-width: 1250px) {
  .nav__fila { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .nav__fila::-webkit-scrollbar { display: none; }
  .mega { display: none !important; }
  .nav__empresas { margin-left: 0; }
}

@media (max-width: 1180px) {
  .ficha { grid-template-columns: 1fr 1fr; }
  .compra { grid-column: 1 / -1; position: static; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .marcas { grid-template-columns: repeat(6, 1fr); }
  .confianza { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .header__fila { flex-wrap: wrap; gap: 12px; }
  .buscador { order: 3; flex: 1 0 100%; max-width: none; }
  .nav__fila { overflow-x: auto; scrollbar-width: none; }
  .nav__fila::-webkit-scrollbar { display: none; }
  .mega { display: none !important; }
  .nav__empresas { margin-left: 0; }
  .cat-layout { grid-template-columns: 1fr; }
  .carro { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .hero__grid { grid-template-columns: 1fr; padding: 26px; }
  .hero__foto { display: none; }
  .hero h2 { font-size: 26px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ficha { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .destacados { grid-template-columns: 1fr; }
  .marcas { grid-template-columns: repeat(3, 1fr); }
  .confianza { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .carrusel__pista > * { flex-basis: 60vw; }
  .carrusel__flecha { display: none; }
  .header__acciones .hacc__txt { display: none; }
  .hero__flecha { display: none; }
  .hero h2 { font-size: 23px; }
  .linea { grid-template-columns: 70px 1fr; }
  .linea__foto { width: 70px; height: 70px; }
  .linea__der { grid-column: 1 / -1; text-align: left; display: flex; justify-content: space-between; align-items: center; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- footer: contacto y redes ---------- */
.footer__contacto { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.footer__contacto a, .footer__contacto span {
  display: flex; align-items: flex-start; gap: 9px; padding: 0;
  font-size: 12.8px; line-height: 1.45;
}
.footer__contacto svg { flex-shrink: 0; margin-top: 2px; opacity: .8; }
.footer__redes { display: flex; gap: 8px; flex-wrap: wrap; }
.footer__redes a {
  padding: 6px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px;
  font-size: 12.5px; font-weight: 600;
}
.footer__redes a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }

/* ---------- metodos de envio en el carrito ---------- */
.envio {
  display: grid; grid-template-columns: 16px 30px 1fr auto; gap: 9px; align-items: center;
  border: 1.5px solid var(--linea); border-radius: var(--radio-s);
  padding: 10px 12px; margin-bottom: 7px; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.envio:hover { border-color: var(--morado-claro); }
.envio--activo { border-color: var(--morado); background: var(--morado-50); }
.envio input { width: 16px; height: 16px; accent-color: var(--morado); cursor: pointer; }
.envio__ico { color: var(--morado); display: grid; place-items: center; }
.envio__txt b { display: block; font-size: 13.2px; font-family: var(--f-titulo); }
.envio__txt small { display: block; font-size: 11.5px; color: var(--txt-2); }
.envio__precio { font-weight: 700; font-size: 13px; color: var(--morado); white-space: nowrap; }
.envio__nota { font-size: 11.8px; color: var(--txt-2); line-height: 1.55; margin: 8px 0 0; }
.envio__aviso {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--azul-50); border-radius: var(--radio-s); padding: 9px 11px;
  font-size: 12px; color: #23336f; line-height: 1.5; margin-top: 9px;
}
.envio__aviso svg { flex-shrink: 0; margin-top: 1px; }

/* =========================================================
   Bloques agregados: WhatsApp flotante, tabla de medios de
   pago y configurador de PC dentro de la ficha.
   ========================================================= */

/* ---- cuanto sale segun como pagues ---- */
.medios { margin: 14px 0 4px; border-top: 1px solid var(--linea); padding-top: 13px; }
.medios h4 {
  margin: 0 0 9px; font-family: var(--f-titulo); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--txt-2);
}
.medio {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--linea); font-size: 13.2px;
}
.medio:last-child { border-bottom: 0; }
.medio__n { color: var(--txt-2); }
.medio__n b { display: block; color: var(--txt); font-size: 13.4px; font-family: var(--f-titulo); }
.medio__n small { font-size: 11.4px; }
.medio__v { font-weight: 800; color: var(--morado); white-space: nowrap; font-size: 14.4px; }
.medio--base .medio__v { color: var(--verde); }
.medio--base { background: var(--verde-50); border-radius: var(--radio-s); padding: 8px 10px; border-bottom: 0; }
/* sin tarjeta operando: la misma frase que dice el carro */
.medios__nota { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--txt-3); }

/* ---- personaliza este PC ---- */
.pers { margin-top: 26px; }
.pers__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pers__cab h2 { margin: 0 0 4px; font-size: 21px; }
.pers__cab p { margin: 0; color: var(--txt-2); font-size: 13.5px; max-width: 62ch; }
.pers__total {
  background: var(--morado); color: #fff; border-radius: var(--radio-s);
  padding: 11px 16px; text-align: right; min-width: 190px;
}
.pers__total small { display: block; font-size: 11.5px; opacity: .8; }
.pers__total b { font-size: 21px; font-family: var(--f-titulo); }
.pers__total span { display: block; font-size: 11.8px; opacity: .85; margin-top: 2px; }

.grupo { border: 1.5px solid var(--linea); border-radius: var(--radio-s); margin-bottom: 9px; background: #fff; }
.grupo__cab {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: none; border: 0; padding: 13px 15px; cursor: pointer; font: inherit;
}
.grupo__cab:hover { background: var(--morado-50); }
.grupo__ico { color: var(--morado); display: grid; place-items: center; flex-shrink: 0; }
.grupo__t { font-family: var(--f-titulo); font-weight: 700; font-size: 14px; }
.grupo__sel { display: block; font-size: 12.2px; color: var(--txt-2); font-weight: 400; font-family: var(--f-texto); }
.grupo__delta { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--morado); white-space: nowrap; }
.grupo__flecha { transition: transform .2s; color: var(--txt-3); flex-shrink: 0; }
.grupo[open] .grupo__flecha { transform: rotate(180deg); }
.grupo__cuerpo { padding: 0 15px 14px; display: grid; gap: 7px; }

.opcion {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 11px; align-items: center;
  border: 1.5px solid var(--linea); border-radius: var(--radio-s);
  padding: 10px 12px; cursor: pointer; transition: border-color .18s, background .18s;
}
.opcion:hover { border-color: var(--morado-claro); }
.opcion--activa { border-color: var(--morado); background: var(--morado-50); }
.opcion input { width: 17px; height: 17px; accent-color: var(--morado); cursor: pointer; }
.opcion__t { display: block; font-size: 13.4px; font-family: var(--f-titulo); font-weight: 700; line-height: 1.35; }
.opcion__d { display: block; font-size: 11.8px; color: var(--txt-2); line-height: 1.45; margin-top: 1px; }
.opcion__p { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--morado); }
.opcion__p--incl { color: var(--verde); }
.opcion--nostock { opacity: .5; }

.pers__pie { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.pers__nota { font-size: 12.2px; color: var(--txt-2); line-height: 1.6; margin: 10px 0 0; }

/* mejoras del configurador dentro de una linea del carrito */
.linea__mejoras { list-style: none; margin: 0 0 7px; padding: 0; display: grid; gap: 2px; }
.linea__mejoras li {
  font-size: 12px; color: var(--txt-2); padding-left: 12px; position: relative;
}
.linea__mejoras li::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--morado-claro);
}
.linea__mejoras b { color: var(--morado); }

/* foto de la pieza dentro de una opcion de "Personaliza este PC" */
.opcion { grid-template-columns: 18px 44px 1fr auto; }
.opcion__foto {
  width: 44px; height: 44px; border-radius: var(--radio-s);
  background: var(--fondo); display: grid; place-items: center;
  overflow: hidden; color: var(--morado-claro);
}
.opcion__foto img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
/* El dibujo de la pieza se usa cuando todavia no hay foto cargada.
   Se le baja el tamano y la fuerza para que no pese mas que una foto
   real al lado. */
.opcion__foto svg.pieza { width: 34px; height: 34px; opacity: .8; }
@media (max-width: 480px) {
  .opcion { grid-template-columns: 18px 34px 1fr auto; gap: 8px; }
  .opcion__foto { width: 34px; height: 34px; }
}

/* =========================================================
   Ficha visual del producto.

   El cliente no compra leyendo "16GB DDR5": compra entendiendo
   para que le alcanza. Cada dato va con su icono, el valor
   grande y una frase que lo explica.
   ========================================================= */
.datos { display: grid; gap: 9px; margin: 0 0 6px; }
.dato {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start;
  border: 1px solid var(--linea); border-radius: var(--radio-s);
  padding: 11px 13px; background: #fff;
}
.dato__ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--morado-50); color: var(--morado);
  display: grid; place-items: center;
}
.dato__txt { min-width: 0; display: block; }
.dato__k { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--txt-3); }
.dato__v { display: block; font-family: var(--f-titulo); font-size: 16px; line-height: 1.3; margin: 1px 0 2px; }
.dato__q { display: block; font-size: 12.8px; color: var(--txt-2); line-height: 1.5; }

.datos__resto {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12.5px; color: var(--txt-2); padding: 10px 2px 0; margin-bottom: 4px;
}
.datos__resto b { color: var(--txt); font-weight: 600; }

/* ---- la ficha tecnica completa, en tabla ----
   La misma que el cliente ya conocia en Shopify: dos columnas,
   una fila por dato. Antes eran <span> pegados en letra chica y
   no habia como leerlos. */
.ficha-tabla {
  width: 100%; border-collapse: collapse; margin: 12px 0 4px;
  font-size: 13.5px; line-height: 1.5;
}
.ficha-tabla thead th {
  text-align: left; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-2);
  border-bottom: 1.5px solid var(--linea); padding: 0 10px 7px;
}
.ficha-tabla tbody tr { border-bottom: 1px solid var(--linea); }
.ficha-tabla tbody tr:last-child { border-bottom: 0; }
.ficha-tabla tbody tr:nth-child(odd) { background: var(--fondo); }
.ficha-tabla th[scope="row"] {
  text-align: left; font-weight: 600; color: var(--txt-2);
  padding: 8px 10px; width: 38%; vertical-align: top;
}
.ficha-tabla td { padding: 8px 10px; color: var(--txt); vertical-align: top; }

/* En telefono la etiqueta va arriba y el dato abajo: con 38% de
   ancho para la etiqueta, valores como "Intel Core Ultra 9
   275HX Serie 2" quedaban en cuatro lineas de dos palabras. */
@media (max-width: 520px) {
  .ficha-tabla, .ficha-tabla thead, .ficha-tabla tbody,
  .ficha-tabla tr, .ficha-tabla th, .ficha-tabla td { display: block; width: auto; }
  .ficha-tabla thead { display: none; }
  .ficha-tabla tbody tr { padding: 8px 10px; border-bottom: 1px solid var(--linea); }
  .ficha-tabla th[scope="row"] {
    padding: 0 0 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  }
  .ficha-tabla td { padding: 0; }
}

@media (max-width: 420px) {
  .dato { grid-template-columns: 32px 1fr; gap: 10px; padding: 10px; }
  .dato__ico { width: 32px; height: 32px; }
  .dato__ico svg { width: 17px; height: 17px; }
  .dato__v { font-size: 15px; }
}

/* ---- descripcion larga escrita por SIC ---- */
.porque {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--verde-50); border: 1px solid #b8e2ca; border-radius: var(--radio-s);
  padding: 11px 13px; margin: 12px 0; font-size: 13.2px; line-height: 1.6; color: #0b5f37;
}
.porque svg { flex-shrink: 0; margin-top: 2px; }
.porque b { font-family: var(--f-titulo); }

.ficha-larga { margin-top: 14px; }
.ficha-larga summary {
  cursor: pointer; font-family: var(--f-titulo); font-weight: 700;
  font-size: 13.4px; color: var(--morado); padding: 8px 0;
}
.ficha-larga summary:hover { color: var(--magenta); }
.ficha-larga dl { margin: 6px 0 0; display: grid; gap: 9px; }
.ficha-larga dt {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--txt-3); font-family: var(--f-titulo);
}
.ficha-larga dd { margin: 2px 0 0; font-size: 13.2px; line-height: 1.6; color: var(--txt-2); }
.ficha-larga__nota { font-size: 12px; color: var(--txt-3); margin: 12px 0 0; line-height: 1.5; }

/* Retiro inmediato en Talca: lo que SIC tiene y una tienda de
   Santiago no puede ofrecer. Va en verde, como el stock nacional,
   pero con su propio tono para que se distinga. */
.badge--talca { background: #0e7490; }
.compra__entrega--talca {
  background: #ecfeff; border-color: #a5e8f0; color: #0e5a6b; margin-top: 8px;
}
.compra__entrega--talca svg { color: #0e7490; }

/* =========================================================
   ELEGIR COMO PAGAR (carrito)

   Las dos formas se muestran juntas con su precio al lado. La
   transferencia sale mas barata y eso tiene que verse antes de
   decidir, no despues.
   ========================================================= */
.pg-titulo {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--txt-3); margin: 0 0 9px;
}
.pg-medios { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.pg-medio {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--linea); border-radius: var(--radio-s);
  padding: 10px 12px; cursor: pointer; background: #fff;
}
.pg-medio:hover { border-color: var(--morado); }
.pg-medio--activo { border-color: var(--morado); background: var(--morado-50); }
.pg-medio span { display: flex; flex-direction: column; line-height: 1.25; }
.pg-medio b { font-size: 13.5px; }
.pg-medio small { font-size: 11.5px; color: var(--txt-2); }
.pg-medio__p {
  margin-left: auto; font-family: var(--f-titulo); font-weight: 700;
  font-size: 14px; white-space: nowrap;
}

/* Que pasa despues de apretar, dicho antes de apretar */
.pg-como {
  font-size: 12px; color: var(--txt-2); line-height: 1.5;
  margin: 0 0 12px; padding: 9px 11px;
  background: var(--fondo); border-radius: var(--radio-s);
}

/* Dos campos por fila cuando hay espacio; uno solo en el telefono */
.pg-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
@media (max-width: 420px) { .pg-fila { grid-template-columns: 1fr; } }
.pg-fila .campo { margin-bottom: 0; }

/* =========================================================
   AVANCE DEL PEDIDO

   Cuatro puntos unidos por una linea. Los que ya pasaron van en
   morado. Es lo primero que mira quien vuelve a la pagina: no
   quiere leer, quiere ver donde va.
   ========================================================= */
.ped-pasos {
  display: flex; margin: 0 0 14px;
  background: var(--blanco); border-radius: var(--radio);
  padding: 16px 10px 12px; box-shadow: var(--sombra);
}
.ped-paso { flex: 1; text-align: center; position: relative; }
.ped-paso i {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--linea); margin: 0 auto 7px; position: relative; z-index: 1;
}
.ped-paso span { font-size: 11.5px; color: var(--txt-3); line-height: 1.3; display: block; }

/* la linea que une: va detras de los puntos */
.ped-paso::before {
  content: ''; position: absolute; top: 6px; right: 50%;
  width: 100%; height: 2px; background: var(--linea);
}
.ped-paso:first-child::before { display: none; }

.ped-paso--ok i { background: var(--morado); }
.ped-paso--ok span { color: var(--txt); font-weight: 600; }
.ped-paso--ok::before { background: var(--morado); }

/* Cuantos productos tiene una vista del menu (Open Box, Ofertas).
   Va chico y en otro tono: es un dato util, no un titulo. */
.nav__cuenta {
  font-size: 10.5px; font-weight: 700; opacity: .65;
  margin-left: 2px; vertical-align: 1px;
}

/* =========================================================
   CARRUSELES AUTOMATICOS (marquee)

   Los tres carruseles de la portada —productos, reseñas y
   marcas— se mueven solos hacia la izquierda, sin controles.

   COMO NO SALTA

   La pista lleva el contenido DOS veces. La animacion la corre de
   0 a -50%: cuando termina, la segunda copia esta exactamente
   donde estaba la primera al empezar, asi que el reinicio cae en
   un punto identico y no se ve.

   Por eso la duplicacion no es decorativa: sin ella el loop pega
   un salto al volver.

   POR QUE CSS Y NO setInterval

   La animacion corre en el compositor del navegador (transform),
   no en el hilo de JavaScript. Movia igual de bien con la pestaña
   cargando productos. JavaScript solo mide el ancho para calcular
   cuanto debe durar la vuelta.

   LA VELOCIDAD

   --marquee-vel la pone JavaScript en segundos, calculada como
   ancho/pixeles-por-segundo. Asi la velocidad se siente igual con
   5 tarjetas que con 14: si hubiera sido una duracion fija, mas
   tarjetas = mas rapido.
   ========================================================= */

.marquee {
  /* display:block a proposito: el contenedor de marcas venia con
     .marcas (grid de 9 columnas) y al volverse carrusel esa
     grilla peleaba con la pista. Esto la neutraliza sin tener
     que sacarle la clase, que se sigue usando en otras paginas. */
  display: block;
  position: relative;
  overflow: hidden;
  /* El cliente no lo maneja: no hay scroll, ni arrastre, ni foco
     que lo desplace. Los enlaces de adentro siguen funcionando. */
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

/* Un desvanecido corto en los bordes, para que las tarjetas
   entren y salgan en vez de cortarse en seco. */
.marquee--fade {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

.marquee__pista {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 4px 2px 14px;
  animation: marquee-izq var(--marquee-vel, 40s) linear infinite;
  will-change: transform;
}

/* Detener mientras el mouse esta encima no es "controlar el
   carrusel": es poder alcanzar el boton Agregar sin perseguirlo.
   Se sigue moviendo solo apenas se sale. */
.marquee:hover .marquee__pista,
.marquee:focus-within .marquee__pista { animation-play-state: paused; }

@keyframes marquee-izq {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Cada tarjeta conserva el ancho que ya tenia en el carrusel
   manual: no se rediseña nada, solo cambia como se mueve. */
.marquee__pista > * { flex: 0 0 234px; }
.marquee--resenas .marquee__pista > * { flex: 0 0 320px; }
.marquee--marcas  .marquee__pista > * { flex: 0 0 158px; }

/* Tablet: con 234 px solo entraban 2 tarjetas y se pedian 2-4.
   Con 208 entran 3 sin apretar el contenido de la tarjeta. */
@media (max-width: 1000px) {
  .marquee__pista > * { flex: 0 0 208px; }
  .marquee--resenas .marquee__pista > * { flex: 0 0 288px; }
  .marquee--marcas  .marquee__pista > * { flex: 0 0 146px; }
}
@media (max-width: 560px) {
  .marquee__pista > * { flex: 0 0 200px; }
  .marquee--resenas .marquee__pista > * { flex: 0 0 268px; }
  .marquee--marcas  .marquee__pista > * { flex: 0 0 138px; }
  .marquee--fade {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
}

/* Telefono (marqueeTactil en app.js): la fila la mueve el script y se
   desliza con el dedo, asi que no lleva la animacion CSS. Sin barra de
   scroll a la vista, y el deslizamiento no arrastra la pagina entera. */
.marquee--tactil {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.marquee--tactil::-webkit-scrollbar { display: none; }
.marquee--tactil .marquee__pista { animation: none; }

/* Accesibilidad: si el sistema pide menos movimiento, se detiene y
   la pista pasa a ser una fila que se puede recorrer a mano. La
   copia duplicada se esconde para no mostrar todo dos veces. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__pista { animation: none; width: auto; }
  .marquee__pista > [data-copia] { display: none; }
  .marquee--fade { -webkit-mask-image: none; mask-image: none; }
}

/* ---- tarjeta de marca con logo ----
   La caja es siempre del mismo alto aunque los logos tengan
   proporciones distintas: object-fit contain los mete adentro sin
   deformarlos. El nombre escrito solo aparece si el logo no
   existe (.marca--texto lo enciende el onerror de la imagen). */
.marca {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; height: 96px;
  padding: 12px 10px; text-decoration: none;
}
.marca__logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 100%; min-height: 40px;
}
.marca__logo img {
  max-width: 100%; max-height: 40px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1); opacity: .78;
  transition: filter .18s, opacity .18s;
}
.marca:hover .marca__logo img { filter: none; opacity: 1; }

/* El nombre va siempre: el logo dice de que marca es de un
   vistazo, pero el nombre escrito es lo que la gente busca y lo
   que lee un lector de pantalla. Cuando NO hay logo el nombre
   crece y ocupa su lugar, asi la tarjeta nunca queda vacia. */
.marca__nombre { font-size: 12px; letter-spacing: .3px; color: var(--txt-2); }
.marca--texto .marca__logo { height: auto; }
.marca--texto .marca__nombre { font-size: 15px; color: var(--txt-1); }

@media (max-width: 560px) {
  .marca { height: 84px; }
  .marca__logo, .marca__logo img { height: 34px; max-height: 34px; }
}

/* ---- reseñas: recorte y "Leer mas" ----
   El comentario se tapa a seis lineas, no se corta: el texto
   completo sigue en el HTML y "Leer mas" solo quita el recorte.
   Asi ninguna reseña larga estira la seccion entera. */
.res-card__txt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  overflow: hidden;
}
.res-card--abierta .res-card__txt { -webkit-line-clamp: unset; overflow: visible; }
.res-mas {
  align-self: flex-start; margin-top: 6px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--morado);
}
.res-mas:hover { text-decoration: underline; }

/* Las tarjetas quedan del mismo alto aunque los comentarios sean
   de largo distinto. */
.res-card { display: flex; flex-direction: column; }

/* Fotos dentro de una reseña: hoy Google no las entrega, esto
   queda listo por si algun dia lo hace. */
.res-card__fotos { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.res-card__fotos img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 8px;
}

/* =========================================================
   RESEÑAS DE GOOGLE

   Estas reglas vivian en builder.css, que index.html NUNCA carga.
   La seccion salia sin ningun estilo, y el sintoma raro era este:
   la foto de perfil quedaba de 0 x 0 px, y una imagen de tamaño
   cero con loading="lazy" el navegador no la baja nunca. Se veian
   diez avatares vacios y la culpa parecia de Google.

   Se copian aca porque la seccion es de la portada. Se dejaron
   fuera .res-demo, .res-aviso y .res-card--demo: eran los estilos
   del cartel de "datos de ejemplo", que ya no existe.
   ========================================================= */
.resenas { padding: 34px 0 10px; }
.res-cargando { color: var(--txt-3); padding: 30px; text-align: center; }
.res-cab { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.res-titulo { display: flex; align-items: center; gap: 14px; }
.res-google { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: var(--sombra); display: grid; place-items: center; flex-shrink: 0; }
.res-titulo h2 { font-size: 23px; }
.res-titulo p { margin: 3px 0 0; font-size: 13.5px; color: var(--txt-2); }
.res-nota { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px 16px; }
.res-nota b { font-family: var(--f-titulo); font-size: 27px; color: var(--txt); line-height: 1; }
.res-estrellas { display: flex; gap: 1px; }
.res-nota small { color: var(--txt-2); font-size: 12.5px; }

.res-card {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s, box-shadow .25s;
}
.res-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.res-card__cab { display: flex; align-items: center; gap: 11px; }

/* El tamaño explicito es lo que hace que la foto se cargue: sin
   el, la imagen mide cero y lazy no la pide jamas. */
.res-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.res-avatar--letra { background: var(--morado); color: #fff; display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 800; font-size: 15px; }

.res-card__cab b { display: block; font-size: 14px; font-family: var(--f-titulo); }
.res-card__cab small { display: block; font-size: 12px; color: var(--txt-3); }
.res-card__estrellas { display: flex; gap: 1px; }
.res-card__txt { margin: 0; font-size: 13.4px; color: var(--txt-2); line-height: 1.6; }
.res-pie { text-align: center; margin-top: 6px; }

/* =========================================================
   LA FICHA DE PRODUCTO CON LA FORMA DE SMARTDEAL (29-09-2026)

   Galeria fija a la izquierda, todo lo de comprar a la derecha,
   pestanas abajo con la ficha en tablas por grupo, y una barra de
   compra fija al pie. Colores de SIC. Ver producto.html.
   ========================================================= */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 12px 0 28px; align-items: start; }
.pdp__izq { position: sticky; top: 128px; }
.pdp .galeria__main { position: relative; height: 430px; }
.pdp__sello {
  position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: var(--morado); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px;
}
.pdp__chip-gar {
  position: absolute; left: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: var(--verde); border: 1px solid #b9e3cb; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px;
}
.pdp__lupa {
  position: absolute; right: 0; bottom: 0; z-index: 2; width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--linea); background: #fff; color: var(--txt); cursor: pointer; display: grid; place-items: center;
}
.pdp__lupa:hover { border-color: var(--morado); color: var(--morado); }
.pdp__pago {
  margin-top: 14px; background: var(--verde-50); border: 1px solid #c8ead7; border-radius: var(--radio); padding: 13px 16px;
  font-size: 13.5px; color: #0b5f36; line-height: 1.7;
}
.pdp__pago b { font-family: var(--f-titulo); font-size: 16px; color: var(--verde); }

.pdp__titulo { font-size: 24px; line-height: 1.3; margin-bottom: 10px; }
.pdp__nota {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: 9px;
  background: #fff8e6; border: 1px solid #f3dfa6; color: var(--txt); font-size: 13px; text-decoration: none;
}
.pdp__nota[hidden] { display: none; }
.pdp__nota b { font-family: var(--f-titulo); font-size: 14.5px; }
.pdp__nota em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--morado); }
.pdp__oferta {
  margin-bottom: 12px; padding: 9px 14px; border-radius: 9px; color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .3px;
  background: linear-gradient(90deg, var(--magenta), #f0602b);
}
.pdp__resumen {
  margin-bottom: 14px; padding: 12px 15px; background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--magenta);
  border-radius: 9px; font-size: 14.5px; font-weight: 600; line-height: 1.55;
}
.pdp__caja { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--sombra); }
.pdp__caja h4 { display: flex; align-items: center; gap: 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-2); margin-bottom: 8px; }
.pdp__caja h4 small { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--txt-3); margin-left: auto; }
.pdp__ent { border-top: 1px solid var(--linea); }
.pdp__ent:first-of-type { border-top: 0; }
.pdp__ent summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; }
.pdp__ent summary::-webkit-details-marker { display: none; }
.pdp__ent summary em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pdp__ent summary em.si { background: var(--verde-50); color: var(--verde); border: 1px solid #b9e3cb; }
.pdp__ent summary em.no { background: #f1f1f4; color: var(--txt-3); }
.pdp__ent p { margin: 0 0 10px 28px; font-size: 13px; color: var(--txt-2); line-height: 1.55; }

/* La caja del precio es tambien .compra: sin lo pegajoso de la vieja */
.pdp__precio.compra { position: static; border-top: 3px solid var(--verde); }
.pdp__precio-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdp__precio .compra__precio { font-size: 34px; color: var(--verde); }
.pdp__ahorro { background: var(--verde); color: #fff; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 7px; }

.pdp__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 6px; }
.pdp__tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 11px 6px; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--linea); background: #fff; font: inherit; color: var(--txt);
}
.pdp__tile b { font-size: 12.5px; line-height: 1.3; }
.pdp__tile small { font-size: 11px; color: var(--txt-3); }
.pdp__tile--0 { background: var(--morado-50); color: var(--morado); }
.pdp__tile--1 { background: var(--verde-50); color: #0b5f36; }
.pdp__tile--2 { background: #eef3ff; color: #23336f; }
.pdp__tile--3 { background: #fff5e8; color: #8a4a06; }
.pdp__tile.activo, .pdp__tile:hover { border-color: currentColor; }
.pdp__tile-det { margin: 4px 0 12px; padding: 10px 13px; border-radius: 9px; background: var(--fondo); font-size: 13px; color: var(--txt-2); line-height: 1.55; }
.pdp__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.pdp__chipe { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; background: #fff; border: 1px solid var(--linea); font-size: 12.8px; font-weight: 600; }
.pdp__cta { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-bottom: 9px; }
.pdp__cta .btn { height: 50px; font-size: 15.5px; gap: 8px; }
.pdp__wa { background: #1faa55; color: #fff; gap: 7px; padding: 0 18px; }
.pdp__wa:hover { filter: brightness(1.08); }
.pdp__dudas {
  display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 13px 15px; border-radius: var(--radio);
  background: #f0fbf4; border: 1px solid #c8ead7; color: var(--txt); text-decoration: none; font-size: 13.3px; line-height: 1.5;
}
.pdp__dudas > svg:last-child { margin-left: auto; flex-shrink: 0; }
.pdp__dudas-ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: #1faa55; color: #fff; display: grid; place-items: center; }
.pdp__segura { border-top: 3px solid var(--verde); }
.pdp__segura ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pdp__segura li b { display: block; font-size: 13.5px; }
.pdp__segura li span { font-size: 12.5px; color: var(--txt-2); }
.pdp__opin[hidden] { display: none; }
.pdp__opin .res-card { background: var(--fondo); border-radius: 9px; padding: 11px 13px; margin-bottom: 9px; }
.pdp__opin .res-card__txt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pdp__opin .res-mas { display: none; }
.pdp__vermas { font-size: 13px; font-weight: 700; color: var(--morado); }

/* ---- pestanas ---- */
.pdp-tabs { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 4px 22px 22px; margin-bottom: 28px; }
.pdp-tabs__botones { display: flex; gap: 6px; border-bottom: 2px solid var(--linea); margin-bottom: 18px; overflow-x: auto; }
.pdp-tabs__botones button {
  border: 0; background: none; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--txt-2); padding: 14px 14px 12px;
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
}
.pdp-tabs__botones button.activo { color: var(--morado); border-bottom-color: var(--magenta); }
.pdp-tabs__botones button[hidden] { display: none; }
.pdp-tabs__panel.info__specs { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.pdp-tabs__panel > h3 { font-size: 15px; margin: 4px 0 12px; }
.pdp-grupos { display: grid; gap: 12px; margin-top: 18px; }
.pdp-grupo { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; font-size: 13.8px; }
.pdp-grupo thead th {
  background: var(--morado-900); color: #fff; text-align: left; padding: 11px 14px; font-family: var(--f-titulo);
  font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase;
}
.pdp-grupo thead th svg { vertical-align: -3px; margin-right: 8px; }
.pdp-grupo tbody th { text-align: left; font-weight: 600; color: var(--txt-2); padding: 10px 14px; width: 42%; }
.pdp-grupo tbody td { text-align: right; padding: 10px 14px; color: var(--txt); font-weight: 600; }
.pdp-grupo tbody tr:nth-child(even) { background: var(--fondo); }

/* ---- la foto en grande ---- */
.pdp-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(20, 14, 40, .88); display: grid; place-items: center; cursor: zoom-out; padding: 20px; }
.pdp-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 10px; }

/* ---- la barra fija de abajo ---- */
.pdp-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid var(--linea); box-shadow: 0 -4px 18px rgba(28,28,34,.10); }
.pdp-barra[hidden] { display: none; }
.pdp-barra__in { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.pdp-barra__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pdp-barra__txt span { font-size: 12.5px; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-barra__txt b { font-family: var(--f-titulo); font-size: 22px; color: var(--verde); line-height: 1.2; }
.pdp-barra__txt small { font-size: 12px; color: var(--txt-3); }
.pdp-barra .btn { height: 46px; gap: 7px; }
body.con-pdp-barra { padding-bottom: 76px; }

@media (max-width: 1000px) {
  .pdp { grid-template-columns: 1fr; gap: 18px; }
  .pdp__izq { position: static; }
  .pdp .galeria__main { height: 320px; }
}
@media (max-width: 620px) {
  .pdp__titulo { font-size: 19px; }
  .pdp__tiles { grid-template-columns: repeat(2, 1fr); }
  .pdp__segura ul { grid-template-columns: 1fr; }
  .pdp .galeria__main { height: 260px; }
  .pdp-tabs { padding: 2px 12px 16px; }
  .pdp-grupo tbody th, .pdp-grupo tbody td { padding: 9px 10px; }
  .pdp-barra__txt span { display: none; }
  .pdp-barra__txt b { font-size: 19px; }
}
/* Con la barra de compra de la ficha a la vista, los flotantes suben */
body.con-pdp-barra .wsp, body.con-pdp-barra .social-flot, body.con-pdp-barra .toast { bottom: 92px; }
body.con-pdp-barra .arriba { bottom: 97px; }
/* En la pestana, las tarjetas de "Para que te alcanza" en columnas */
.pdp-tabs .datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.pdp-tabs .datos .dato { margin: 0; }
@media (max-width: 620px) { .pdp__tiles[style] { grid-template-columns: repeat(2, 1fr) !important; } }

/* =========================================================
   EL CIRCUITO DEL LOGO: FONDO Y CORRIENTE (29-09-2026)

   El dueno pidio el fondo con el circuito del logo y que el logo
   tenga "corriente" por sus pistas. Sin video del disenador: se hizo
   con el mismo logo.

   - assets/logo-circuito.png: SOLO las pistas celestes del cubo,
     recortadas de logo-512.png por su color (verde y azul altos,
     rojo bajo). Se usa de mascara: la luz que pasa por encima solo
     se ve donde hay pista.
   - assets/circuito.svg: un mosaico de pistas en los tres angulos
     del cubo, con un punto en cada punta, como las del logo. Nada
     toca el borde, asi se repite sin costuras.

   El encabezado (todas las paginas) y el banner de la portada llevan
   el circuito tenue de fondo y una luz que lo recorre. Con "reducir
   movimiento" pedido en el sistema, nada se mueve.
   ========================================================= */
.header::before, .header::after, .hero__caja::before, .hero__caja::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  -webkit-mask: url(circuito.svg) 0 0 / 312px 180px repeat;
          mask: url(circuito.svg) 0 0 / 312px 180px repeat;
}
/* las pistas, quietas y tenues */
.header::before { background: #5bd0ea; opacity: .13; }
/* la corriente: una franja de luz que cruza el circuito */
.header::after {
  background: linear-gradient(115deg, transparent 44%, rgba(190, 248, 255, .95) 50%, transparent 56%) 0 0 / 260% 100% no-repeat;
  animation: sic-corriente 7s linear infinite;
}
/* El banner ya es un contexto propio: sin esto el fondo quedaria detras de la pagina */
.hero__caja { isolation: isolate; }
.hero__caja::before { background: #9ff0ff; opacity: .11; }
.hero__caja::after {
  background: linear-gradient(115deg, transparent 44%, rgba(220, 252, 255, .95) 50%, transparent 56%) 0 0 / 260% 100% no-repeat;
  animation: sic-corriente 9s linear infinite .8s;
}
@keyframes sic-corriente { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ---- el logo: luz que corre por las pistas del cubo ---- */
.logo { position: relative; }
/* El contenedor pone el halo (drop-shadow alrededor de lo que se ve de
   la capa interior); la capa interior es la luz recortada a las pistas.
   Sin el halo, blanco sobre pistas celestes casi no se notaba a 34 px. */
.logo__corriente {
  position: absolute; left: 4px; top: 50%; width: 34px; height: 34px; margin-top: -17px; pointer-events: none;
  filter: drop-shadow(0 0 1px #d8fbff) drop-shadow(0 0 3px rgba(70, 215, 245, .95));
}
.logo__corriente::before {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url(logo-circuito.png) center / contain no-repeat;
          mask: url(logo-circuito.png) center / contain no-repeat;
  background: linear-gradient(120deg, transparent 32%, #ffffff 46%, #b9f7ff 54%, transparent 68%) 0 0 / 300% 100% no-repeat;
  animation: sic-corriente-logo 3.6s ease-in-out infinite;
}
/* pasa la luz y descansa un momento antes de la siguiente */
@keyframes sic-corriente-logo {
  0%        { background-position: 130% 0; }
  55%, 100% { background-position: -30% 0; }
}
.logo:hover .logo__corriente::before { animation-duration: 1.8s; }

@media (prefers-reduced-motion: reduce) {
  .header::after, .hero__caja::after, .logo__corriente::before { animation: none; opacity: 0; }
}

/* ---- el logo MAS VISIBLE (29-09-2026) ----
   El dueno pidio que "se vea que es de la tienda": el cubo pasa de 42
   a 56 px con un aro de brillo magenta y celeste, y el nombre crece.
   La luz de la corriente sigue al cubo en su nuevo tamaño. */
.logo { gap: 12px; }
.logo__ico {
  width: 56px; height: 56px; padding: 5px; border-radius: 12px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 14px rgba(218, 28, 92, .55), 0 0 22px rgba(80, 200, 235, .35);
}
.logo__corriente { left: 5px; width: 46px; height: 46px; margin-top: -23px; }
.logo__t { font-size: 32px; }
.logo__s { font-size: 10.5px; letter-spacing: 3.6px; }
@media (max-width: 620px) {
  .logo { gap: 9px; }
  .logo__ico { width: 46px; height: 46px; padding: 4px; border-radius: 10px; }
  .logo__corriente { left: 4px; width: 38px; height: 38px; margin-top: -19px; }
  .logo__t { font-size: 27px; }
  .logo__s { font-size: 9.5px; letter-spacing: 3px; }
}