/* =========================================================
   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; }
.filtros { background: #fff; border-radius: var(--radio); padding: 4px 18px 18px; box-shadow: var(--sombra); position: sticky; top: 128px; 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; }
.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; }

/* ---------- 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; }
  .filtros { position: static; max-height: none; }
  .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; }

/* ---- 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);
  }
}

/* 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; }