/* Cabecera, pie y páginas de la tienda. Los tokens viven en hs.css. */

/* --- Ancho de la cabecera ----------------------------------------------
   Más ancho que el contenido: pegado a la izquierda se veía apretado y
   desaprovechaba la pantalla. */


/* --- Cinta superior ------------------------------------------------------ */
.avisos { background: var(--hs-negro); color: #b4b4be; font-size: var(--t-xs); }
.avisos__int { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e6); height: 34px; }
.avisos__izq { display: flex; gap: var(--e6); }
.avisos__izq a { font-weight: var(--peso-medio); color: #e8e8ec; transition: var(--trans); }
.avisos__izq a:hover { color: var(--hs-amarillo); }
.avisos__der { display: flex; align-items: center; gap: var(--e3); }
.avisos__lugar { display: inline-flex; align-items: center; gap: 5px; }
.avisos__sep { opacity: .35; }

/* --- Cabecera ------------------------------------------------------------ */
.cab { position: sticky; top: 0; z-index: 40; background: var(--fondo);
  border-bottom: 1px solid var(--borde); }
.cab__int { display: flex; align-items: center; gap: var(--e8);
  padding-top: var(--e4); padding-bottom: var(--e4); }
.cab__logo { flex: none; }
.cab__logo img { height: 42px; width: auto; display: block; }

.buscar { flex: 1; max-width: 680px; display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e5); height: 46px;
  background: var(--fondo-alt); border: 1px solid transparent;
  border-radius: var(--r); color: var(--texto-tenue); transition: var(--trans); }
.buscar:focus-within { background: var(--fondo); border-color: var(--hs-negro); box-shadow: var(--anillo); }
.buscar input { flex: 1; border: 0; background: none; outline: none;
  font-size: var(--t-sm); color: var(--texto); }

.cab__acc { display: flex; align-items: center; gap: var(--e6); margin-left: auto; }
.cab__enlace { font-size: var(--t-sm); font-weight: var(--peso-semi);
  white-space: nowrap; transition: var(--trans); }
.cab__enlace:hover { color: var(--texto-medio); }
.cab__icono { position: relative; display: flex; align-items: center;
  justify-content: center; border: 0; background: none; padding: 0;
  cursor: pointer; color: inherit; transition: var(--trans); }
.cab__icono:hover { color: var(--texto-medio); }
.cesta-n { position: absolute; top: -6px; right: -9px; }

/* --- Menú de categorías --------------------------------------------------
   Categorías a la izquierda, servicios a la derecha: son otra intención. */
.menu { border-top: 1px solid var(--borde); }
.menu__int { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e6); }
.menu__izq, .menu__der { display: flex; gap: var(--e6); overflow-x: auto;
  scrollbar-width: none; }
.menu__izq::-webkit-scrollbar, .menu__der::-webkit-scrollbar { display: none; }
.menu__der { flex: none; }
.menu__int a { flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: var(--e3) 0; font-size: var(--t-sm); font-weight: var(--peso-medio);
  border-bottom: 2px solid transparent; transition: var(--trans); white-space: nowrap; }
.menu__int a:hover { border-bottom-color: var(--hs-negro); }
.menu__destacado svg { color: var(--hs-amarillo-osc); }
.menu__der a { color: var(--texto-medio); }
.menu__der a:hover { color: var(--texto); }

/* --- Pie ----------------------------------------------------------------- */
.pie { margin-top: var(--e20); background: var(--hs-negro); color: var(--texto-inv);
  padding: var(--e16) 0 var(--e6); }
.pie__cols { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: var(--e8); }
@media (max-width: 1080px) { .pie__cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .pie__cols { grid-template-columns: 1fr 1fr; } }
.pie__logo { height: 34px; width: auto; margin-bottom: var(--e4); }
.pie__lema { font-size: var(--t-sm); line-height: var(--i-sm); color: #a9a9b2; }
.pie h4 { font-size: var(--t-sm); margin-bottom: var(--e3); }
.pie__cols a { display: block; padding: 5px 0; font-size: var(--t-sm); color: #a9a9b2;
  transition: var(--trans); }
.pie__cols a:hover { color: var(--hs-amarillo); }
.pie__base { display: flex; justify-content: space-between; gap: var(--e4);
  margin-top: var(--e12); padding-top: var(--e5);
  border-top: 1px solid #2b2b33; font-size: var(--t-xs); color: #7d7d87; }
.pie__amor { display: inline-flex; align-items: center; gap: 5px; }
.pie__corazon { color: #e02a35; font-size: 13px; line-height: 1; }

/* --- Teléfono ------------------------------------------------------------ */
@media (max-width: 860px) {
  .cab__int { flex-wrap: wrap; gap: var(--e3) var(--e4);
    padding-top: var(--e3); padding-bottom: var(--e3); }
  .cab__logo img { height: 34px; }
  .buscar { order: 3; flex-basis: 100%; max-width: none; height: 42px; }
  .cab__acc { gap: var(--e4); }
  .menu__int { gap: var(--e4); }
  .menu__der { display: none; }
  .avisos__int { height: 30px; }
  .avisos__izq { gap: var(--e4); }
  .pie { padding: var(--e12) 0 var(--e5); margin-top: var(--e12); }
  .pie__base { flex-direction: column; gap: var(--e2); }
}

/* --- Tarjetas grandes de sección ----------------------------------------
   El patrón que más rinde ahorita: una tarjeta ancha, con su ilustración a
   un lado y una sola acción. Se usan de a dos por fila. */
.dos-grandes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); }
@media (max-width: 960px) { .dos-grandes { grid-template-columns: 1fr; } }

.grande { display: grid; grid-template-columns: 1fr auto; gap: var(--e5);
  align-items: center; padding: var(--e10); border-radius: var(--r-lg);
  overflow: hidden; position: relative; }
.grande__texto { max-width: 340px; }
.grande h3 { font-size: var(--t-2xl); line-height: var(--i-2xl);
  font-weight: var(--peso-fuerte); margin-bottom: var(--e3); }
.grande p { font-size: var(--t-sm); line-height: var(--i-sm); margin-bottom: var(--e5); }
.grande__arte { width: 190px; flex: none; }
.grande__arte--tel { width: 140px; align-self: end; margin-bottom: calc(var(--e10) * -1); }
@media (max-width: 1080px) { .grande { padding: var(--e8); } .grande__arte { width: 140px; } }
@media (max-width: 620px) {
  .grande { grid-template-columns: 1fr; }
  .grande__arte { width: 150px; justify-self: center; }
  .grande__arte--tel { margin-bottom: calc(var(--e8) * -1); }
}

.grande--oscura { background: var(--hs-negro); color: var(--texto-inv); }
.grande--oscura p { color: #a9a9b2; }
.grande--oscura b { color: var(--hs-amarillo); font-weight: var(--peso-semi); }
.grande__ic { display: grid; place-items: center; width: 40px; height: 40px;
  margin-bottom: var(--e4); background: var(--hs-amarillo);
  color: var(--hs-negro); border-radius: var(--r-sm); }

.grande--marca { background: var(--hs-amarillo); color: var(--hs-negro); }
.grande--marca p { color: #4a4113; }
.grande__pronto { background: var(--hs-negro); color: var(--hs-amarillo);
  margin-bottom: var(--e4); }

.avisame { display: flex; gap: var(--e2); }
.avisame .hs-campo { background: #fff; border-color: rgba(16,16,20,.18); height: 48px; }
.avisame .hs-campo::placeholder { color: #9a9aa4; }
.avisame .hs-campo:focus { border-color: var(--hs-negro);
  box-shadow: 0 0 0 3px rgba(16,16,20,.14); }
.avisame__ok { font-size: var(--t-sm); font-weight: var(--peso-semi);
  margin: var(--e3) 0 0 !important; }
@media (max-width: 480px) { .avisame { flex-direction: column; } }

/* --- Ilustración dentro de las tarjetas pequeñas ------------------------- */
.porque__i { display: flex; flex-direction: column; }
.porque__arte { margin: var(--e4) calc(var(--e6) * -1) calc(var(--e6) * -1);
  margin-top: auto; padding-top: var(--e5); }
.porque__arte svg { width: 100%; display: block; }

.paso__arte { margin-bottom: var(--e5); background: var(--fondo-alt);
  border-radius: var(--r); overflow: hidden; }
.paso__arte svg { width: 100%; display: block; }

/* --- Barra de compra fija -----------------------------------------------
   El total vive abajo, no arriba: así se ve mientras el cliente configura,
   y el precio cambia delante de sus ojos al tocar cada opción. */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--fondo); border-top: 1px solid var(--borde);
  box-shadow: 0 -4px 20px rgba(16,16,20,.10);
  transform: translateY(100%); transition: transform 220ms cubic-bezier(.2,0,.2,1);
}
.barra-compra.esta-visible { transform: translateY(0); }
body.con-barra { padding-bottom: 92px; }

/* Cuánto falta para el final de la página. */
.barra-compra__progreso { height: 3px; background: var(--borde); }
.barra-compra__progreso span { display: block; height: 100%;
  background: var(--hs-amarillo); width: 0; transition: width 90ms linear; }

.barra-compra__int { display: flex; align-items: center; gap: var(--e5);
  padding: var(--e3) var(--e5); }
.barra-compra__info { min-width: 0; flex: 1; }
.barra-compra__info strong { display: block; font-size: var(--t-sm);
  font-weight: var(--peso-semi); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.barra-compra__info span { font-size: var(--t-xs); color: var(--texto-medio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.barra-compra__precio { flex: none; text-align: right; line-height: 1.1; }
.barra-compra__precio small { display: block; font-size: var(--t-xs);
  color: var(--texto-medio); }
.barra-compra__precio b { font-size: var(--t-xl); font-weight: var(--peso-fuerte);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.barra-compra .hs-btn { flex: none; }

@media (max-width: 620px) {
  .barra-compra__int { gap: var(--e3); padding: var(--e3) var(--e4); }
  .barra-compra__info { display: none; }
  .barra-compra__precio { flex: 1; text-align: left; }
  .barra-compra .hs-btn { padding: var(--e3) var(--e4); }
  body.con-barra { padding-bottom: 76px; }
}

/* --- Flecha de avance ---------------------------------------------------
   Un anillo que se va llenando: dice cuánto falta y de paso te lleva. */
.flecha { position: fixed; right: var(--e5); bottom: 104px; z-index: 49;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: var(--r-full);
  background: conic-gradient(var(--hs-amarillo) var(--avance, 0%),
                             rgba(16,16,20,.12) 0);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity var(--trans); }
.flecha.esta-visible { opacity: 1; pointer-events: auto; }
.flecha::before { content: ""; position: absolute; inset: 3px;
  background: var(--hs-negro); border-radius: var(--r-full); }
.flecha svg { position: relative; color: var(--hs-amarillo);
  transition: transform 200ms cubic-bezier(.2,0,.2,1); }
.flecha.arriba svg { transform: rotate(180deg); }
@media (max-width: 620px) { .flecha { right: var(--e4); bottom: 88px;
  width: 42px; height: 42px; } }

/* Empresas: tarjeta a todo el ancho debajo de las dos. Otro público, otro
   peso visual — no compite con iFixit ni con la app. */
.grande--ancha { grid-column: 1 / -1; margin-top: var(--e5);
  background: var(--fondo-alt); border: 1px solid var(--borde);
  padding: var(--e10) var(--e12); }
.grande__texto--ancho { max-width: 500px; }
.grande--ancha h3 { font-size: var(--t-3xl); line-height: var(--i-3xl); }
.grande--ancha .hs-etiqueta { margin-bottom: var(--e4); }
.grande__acciones { display: flex; gap: var(--e3); flex-wrap: wrap; }
.grande--ancha .hs-btn--borde { border-color: var(--hs-negro); background: transparent; }
.grande--ancha .hs-btn--borde:hover { background: var(--fondo); }
.grande__arte--ancha { width: 320px; }
@media (max-width: 1080px) {
  .grande--ancha { padding: var(--e8); }
  .grande__arte--ancha { width: 240px; }
  .grande--ancha h3 { font-size: var(--t-2xl); line-height: var(--i-2xl); }
}
@media (max-width: 620px) { .grande__arte--ancha { width: 100%; max-width: 300px; } }

/* --- Tarjeta iFixit -----------------------------------------------------
   Va con el azul de iFixit (#0071ce, tomado de ifixit.com), no con el
   nuestro: es su marca la que respalda el repuesto. */
.grande--ifixit { background: #0071ce; color: #fff; }
.grande--ifixit p { color: #d6e8f8; }
.grande--ifixit b { color: #fff; font-weight: var(--peso-semi); }
.ifixit-sello { display: flex; align-items: center; gap: 5px; width: fit-content;
  padding: 4px var(--e3); margin-bottom: var(--e4);
  background: rgba(255,255,255,.18); border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: var(--peso-semi); }
/* El logo va sobre blanco: su círculo azul se perdería contra el azul del
   fondo, y repintarlo sería alterar una marca ajena. */
.ifixit-chip { display: inline-flex; align-items: center;
  padding: var(--e2) var(--e4); margin-bottom: var(--e3);
  background: #fff; border-radius: var(--r); }
.ifixit-chip img { height: 22px; width: auto; display: block; }
.hs-btn--blanco { background: #fff; color: #0b4a86; font-weight: var(--peso-fuerte);
  box-shadow: 0 2px 0 rgba(0,0,0,.14); }
.hs-btn--blanco:hover:not(:disabled) { background: #eaf3fb; transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(0,0,0,.14); }
.hs-btn--blanco:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

/* --- Filtros del catálogo -----------------------------------------------
   Antes solo se podía filtrar por línea, que con cinco modelos no filtra
   nada. Estos salen de las variantes reales: si no hay un equipo de 16 GB,
   la opción no aparece. */
.filtros-barra { display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; margin-bottom: var(--e4); }
.filtro-menu { position: relative; }
.filtro-btn { display: inline-flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e4); background: var(--fondo);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: var(--peso-medio);
  cursor: pointer; transition: var(--trans); white-space: nowrap; }
.filtro-btn:hover { border-color: var(--hs-negro); }
.filtro-btn[aria-expanded="true"] { border-color: var(--hs-negro); }
.filtro-btn.tiene { background: var(--hs-negro); color: var(--texto-inv);
  border-color: var(--hs-negro); }

.filtro-btn svg { transition: transform var(--trans); }
.filtro-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.filtro-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 230px; max-height: 320px; overflow-y: auto;
  padding: var(--e2); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-3); }
.filtro-panel[hidden] { display: none; }
.filtro-op { display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: var(--e2) var(--e3); background: none; border: 0; border-radius: var(--r-sm);
  font-size: var(--t-sm); text-align: left; cursor: pointer; transition: var(--trans); }
.filtro-op:hover { background: var(--fondo-alt); }
.filtro-op__caja { flex: none; display: grid; place-items: center;
  width: 17px; height: 17px; border: 1.5px solid var(--borde-fuerte);
  border-radius: 4px; color: transparent; transition: var(--trans); }
.filtro-op[aria-pressed="true"] .filtro-op__caja { background: var(--hs-negro);
  border-color: var(--hs-negro); color: var(--hs-amarillo); }
.filtro-op__txt { flex: 1; }
.filtro-op__n { color: var(--texto-tenue); font-size: var(--t-xs); }

.chips { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e4); }
.chips[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--e3); background: var(--hs-amarillo-tenue);
  border: 1px solid var(--hs-negro); border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: var(--peso-medio); cursor: pointer; }
.chip:hover { background: rgba(255,205,47,.2); }
.chip span { font-size: 14px; line-height: 1; }
.chip--limpiar { background: none; border-color: var(--borde-fuerte);
  color: var(--texto-medio); font-weight: var(--peso-normal); }
.chip--limpiar:hover { border-color: var(--hs-negro); color: var(--texto); background: none; }

/* El desplegable de orden vestido como las píldoras de filtro: era el único
   control con apariencia del sistema operativo y se notaba. */
.orden__sel { appearance: none; -webkit-appearance: none;
  padding: var(--e2) var(--e10) var(--e2) var(--e4);
  background: var(--fondo) no-repeat right var(--e4) center/12px 12px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101014' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: var(--peso-medio);
  cursor: pointer; transition: var(--trans); }
.orden__sel:hover { border-color: var(--hs-negro); }
.orden__sel:focus { outline: none; border-color: var(--hs-negro); box-shadow: var(--anillo); }

/* Los iconos de "Por qué comprarnos" eran emoji de color: chocaban con el
   trazo del resto de la página. */
.porque__ic svg { display: block; }

/* --- Tarjetas de mensaje dentro de la rejilla ---------------------------
   Ocupan una celda como un producto más: cortan la monotonía y dicen lo que
   una ficha suelta no alcanza a decir. */
.promo { display: flex; flex-direction: column; padding: var(--e6);
  border-radius: var(--r); transition: var(--trans); min-height: 220px; }
.promo__ic { display: grid; place-items: center; width: 38px; height: 38px;
  margin-bottom: var(--e5); border-radius: var(--r-sm); }
.promo b { font-size: var(--t-base); line-height: var(--i-sm); margin-bottom: var(--e2); }
.promo__txt { font-size: var(--t-sm); line-height: var(--i-sm); }
.promo__mas { display: inline-flex; align-items: center; gap: 6px; margin-top: auto;
  padding-top: var(--e5); font-size: var(--t-sm); font-weight: var(--peso-semi); }
.promo:hover .promo__mas svg { transform: translateX(3px); }
.promo__mas svg { transition: transform var(--trans); }

.promo--marca { background: var(--hs-amarillo); color: var(--hs-negro); }
.promo--marca .promo__ic { background: var(--hs-negro); color: var(--hs-amarillo); }
.promo--marca .promo__txt { color: #4a4113; }

.promo--oscura { background: var(--hs-negro); color: var(--texto-inv); }
.promo--oscura .promo__ic { background: var(--hs-amarillo); color: var(--hs-negro); }
.promo--oscura .promo__txt { color: #a9a9b2; }

.promo--ifixit { background: #0071ce; color: #fff; }
.promo--ifixit .promo__ic { background: rgba(255,255,255,.18); color: #fff; }
.promo--ifixit .promo__txt { color: #d6e8f8; }

/* --- Páginas de contenido ----------------------------------------------- */
.pg-cab { background: var(--hs-negro); color: var(--texto-inv);
  padding: var(--e10) 0 var(--e12); margin-bottom: var(--e12);
  position: relative; overflow: hidden; }
.pg-cab::after { content: ""; position: absolute; right: -10%; top: -70%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,205,47,.18), transparent 66%); }
.pg-cab > * { position: relative; z-index: 1; }
.pg-cab .cat-miga { color: #8e8e98; padding-bottom: var(--e5); }
.pg-cab .cat-miga a:hover { color: var(--hs-amarillo); }
.pg-cab .hs-tenue { color: #b9b9c2; }
.pg-cab h1 { font-size: var(--t-3xl); line-height: var(--i-3xl); }
.pg-bajada { margin: var(--e3) 0 0; max-width: 620px;
  font-size: var(--t-lg); line-height: var(--i-lg); color: #b9b9c2; }
@media (max-width: 640px) {
  .pg-cab { padding: var(--e8) 0 var(--e10); margin-bottom: var(--e8); }
  .pg-cab h1 { font-size: var(--t-2xl); line-height: var(--i-2xl); }
  .pg-bajada { font-size: var(--t-base); line-height: var(--i-base); }
}

/* Columna de lectura: ancho cómodo y centrada. */
.pg-lectura { width: min(100%, 760px); margin-inline: auto; }
.pg-cuerpo { width: min(100%, 760px); margin-inline: auto; padding-bottom: var(--e20); }
.pg-cuerpo h2 { font-size: var(--t-xl); line-height: var(--i-xl); margin: var(--e10) 0 var(--e3); }
.pg-cuerpo h2:first-child { margin-top: 0; }
.pg-cuerpo p { line-height: var(--i-base); color: #35353d; }
.pg-lista { margin: 0 0 var(--e4); padding: 0; list-style: none; }
.pg-lista li { position: relative; padding: 5px 0 5px var(--e6); color: #35353d; }
.pg-lista li::before { content: ""; position: absolute; left: 6px; top: 14px;
  width: 6px; height: 6px; background: var(--hs-amarillo-osc); border-radius: 50%; }

.pg-pasos { margin: var(--e5) 0; padding: 0; list-style: none;
  display: grid; gap: var(--e5); }
.pg-pasos li { display: flex; gap: var(--e4); }
.pg-pasos__n { flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border: 1.5px solid var(--hs-negro);
  border-radius: var(--r-full); font-size: var(--t-sm); font-weight: var(--peso-fuerte); }
.pg-pasos b { display: block; margin-bottom: 2px; }
.pg-pasos p { margin: 0; font-size: var(--t-sm); line-height: var(--i-sm); color: var(--texto-medio); }

.pg-cajas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4);
  margin: var(--e5) 0 var(--e8); }
@media (max-width: 620px) { .pg-cajas { grid-template-columns: 1fr; } }
.pg-caja { padding: var(--e5); background: var(--fondo-alt); border-radius: var(--r); }
.pg-caja b { display: block; margin-bottom: var(--e2); font-size: var(--t-sm); }
.pg-caja p { margin: 0; font-size: var(--t-sm); line-height: var(--i-sm); color: var(--texto-medio); }

.pg-cta { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap; margin-top: var(--e12);
  padding: var(--e6); background: var(--hs-amarillo); border-radius: var(--r-lg); }
.pg-cta b { display: block; font-size: var(--t-lg); margin-bottom: var(--e1); }
.pg-cta p { margin: 0; font-size: var(--t-sm); color: #4a4113; }
.cargando { padding: var(--e20) 0; text-align: center; color: var(--texto-medio); }
/* El contador solo canta cuando hay algo dentro. */

/* --- Aviso al agregar al carrito ---------------------------------------
   Confirma la acción sin sacar al cliente de la ficha, que es donde puede
   seguir comprando. */
.aviso-cesta { position: fixed; right: var(--e5); bottom: 108px; z-index: 60;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e5); max-width: 380px;
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra-3);
  transform: translateY(14px); opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,0,.2,1); }
.aviso-cesta.esta-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.aviso-cesta__ok { flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; background: var(--ok-fondo); color: var(--ok);
  border-radius: var(--r-full); }
.aviso-cesta b { display: block; font-size: var(--t-sm); }
.aviso-cesta span { font-size: var(--t-xs); color: var(--texto-medio); }
.aviso-cesta .hs-btn { flex: none; }
@media (max-width: 560px) {
  .aviso-cesta { left: var(--e4); right: var(--e4); bottom: 92px; max-width: none; }
}
/* Una faceta sin opciones no se esconde: se ve apagada. Que desaparezcan
   dejaba la categoría sin filtros y parecía otra página. */
.filtro-btn.esta-vacia { opacity: .4; cursor: not-allowed; }
.filtro-btn.esta-vacia:hover { border-color: var(--borde-fuerte); }

/* --- Comparar y favoritos ------------------------------------------------ */
.cmp-barra { position: fixed; left: 50%; bottom: var(--e6); z-index: 55;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4) var(--e3) var(--e3);
  background: var(--hs-negro); color: var(--texto-inv);
  border-radius: var(--r-full); box-shadow: var(--sombra-3); }

.cmp-barra__txt { font-size: var(--t-sm); white-space: nowrap; }
/* Dentro de una píldora, un botón de esquinas cuadradas se ve mal pegado al
   borde curvo. Los botones de la barra son píldoras también. */
.cmp-barra .hs-btn { border-radius: var(--r-full); }
.cmp-barra .hs-btn--principal { padding-left: var(--e6); padding-right: var(--e6); }
.cmp-barra .hs-btn--plano { color: #a9a9b2; border-radius: var(--r-full); }
.cmp-barra .hs-btn--plano:hover { color: #fff; background: rgba(255,255,255,.1); }
.cmp-barra .esta-apagado { opacity: .45; pointer-events: none; }
@media (max-width: 620px) {
  .cmp-barra { left: var(--e4); right: var(--e4); transform: none; bottom: var(--e4); }
  .cmp-barra__txt { display: none; }
  .cmp-barra .hs-btn { flex: 1; justify-content: center; }
}

/* Corazón y casilla de comparar sobre la foto del producto. */
.prod__acc { position: absolute; top: var(--e3); right: var(--e3); z-index: 2;
  display: flex; flex-direction: column; gap: var(--e2); }
.prod__btn { display: grid; place-items: center; width: 32px; height: 32px;
  padding: 0; border: 1px solid var(--borde); border-radius: var(--r-full);
  background: rgba(255,255,255,.94); color: var(--texto-medio);
  cursor: pointer; transition: var(--trans); }
.prod__btn:hover { border-color: var(--hs-negro); color: var(--texto); }
.prod__btn.esta-activa { background: var(--hs-negro); border-color: var(--hs-negro);
  color: var(--hs-amarillo); }
.prod__btn--fav.esta-activa { background: var(--error); border-color: var(--error);
  color: var(--texto-inv); }
/* Guardado se ve de lejos: el corazón se rellena, no se queda en contorno.
   Con solo el fondo rojo había que fijarse para saber si estaba puesto. */
.prod__btn--fav.esta-activa svg { fill: currentColor; }
.prod__btn--fav:hover svg { fill: var(--error-fondo); }
.prod__btn--fav.esta-activa:hover svg { fill: currentColor; }

/* --- Menú de la cuenta --------------------------------------------------- */
.cuenta-menu { position: relative; }
.cuenta-menu__ini { min-width: 28px; height: 28px; font-size: var(--t-xs); }
.cuenta-menu__caja { position: absolute; right: 0; top: calc(100% + 12px);
  z-index: 60; width: 260px; padding: var(--e2);
  background: var(--fondo); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra-3); }
.cuenta-menu__caja[hidden] { display: none; }
.cuenta-menu__quien { padding: var(--e3) var(--e4) var(--e4);
  border-bottom: 1px solid var(--borde); margin-bottom: var(--e2); }
.cuenta-menu__quien b { display: block; font-size: var(--t-sm); }
.cuenta-menu__quien span { font-size: var(--t-xs); color: var(--texto-medio);
  word-break: break-all; }
.cuenta-menu__caja a, .cuenta-menu__caja button { display: flex; align-items: center;
  width: 100%; padding: var(--e3) var(--e4); border: 0; background: none;
  border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: var(--peso-medio);
  text-align: left; cursor: pointer; transition: var(--trans); }
.cuenta-menu__caja a:hover, .cuenta-menu__caja button:hover { background: var(--fondo-alt); }
.cuenta-menu__n { margin-left: auto; font-size: var(--t-xs); color: var(--texto-medio); }
.cuenta-menu__acc { display: grid; gap: var(--e2); padding: 0 var(--e2) var(--e3);
  margin-bottom: var(--e2); border-bottom: 1px solid var(--borde); }
.cuenta-menu__acc .hs-btn { justify-content: center; }
#b-salir-menu { color: var(--error); }

/* --- Tarjeta de producto -------------------------------------------------
   Estaba copiada a mano en tienda.html, catalogo.html y ofertas.html, y
   faltaba en el carrito y en la cuenta: allí el dibujo del portátil salía
   negro y a tamaño completo, sin fondo, y la tarjeta parecía rota. Tres
   copias además ya habían empezado a separarse —una usaba `--texto-medio`
   donde las otras `--texto-tenue`—. Aquí una sola vez, para todas. */
.prod { display: flex; flex-direction: column; overflow: hidden; }
.prod__foto { background: var(--fondo-alt); aspect-ratio: 4/3; display: grid;
  place-items: center; position: relative; }
.prod__foto svg { width: 52%; opacity: .16; }
/* La foto real ocupa el hueco entero. `cover` y no `contain`: los equipos
   se fotografían de cualquier manera y con `contain` cada tarjeta tenía
   una franja gris de un alto distinto. */
.prod__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod__cinta { position: absolute; top: var(--e3); left: var(--e3); }
.prod__cuerpo { padding: var(--e4); display: flex; flex-direction: column;
  flex: 1; gap: var(--e1); }
.prod__nom { font-size: var(--t-sm); font-weight: var(--peso-semi);
  line-height: var(--i-sm); }
.prod__spec { font-size: var(--t-xs); line-height: var(--i-xs);
  color: var(--texto-medio); }
.prod__opts { font-size: var(--t-xs); color: var(--texto-tenue);
  margin-top: var(--e1); }
.prod__precio { margin-top: auto; padding-top: var(--e3); }
.prod__precio small { display: block; font-size: var(--t-xs);
  color: var(--texto-medio); }

/* La tarjeta dejó de ser un enlace envolvente para poder llevar botones
   dentro. El enlace ahora es una capa invisible sobre la foto. */
.prod__enlace { position: absolute; inset: 0; z-index: 1; }
a.prod__nom { display: block; }
a.prod__nom:hover { text-decoration: underline; }

.aviso-corto { position: fixed; left: 50%; bottom: 96px; z-index: 70;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: var(--e3) var(--e5); background: var(--hs-negro); color: var(--texto-inv);
  border-radius: var(--r-full); font-size: var(--t-sm); box-shadow: var(--sombra-3);
  transition: opacity 160ms ease, transform 160ms cubic-bezier(.2,0,.2,1); }
.aviso-corto.esta-visible { opacity: 1; transform: translate(-50%, 0); }

/* --- Miga de pan --------------------------------------------------------
   Estaba definida dentro de una plantilla suelta, así que las páginas que
   la usaban sin copiarla perdían el espaciado. Vive aquí para todas. */
.cat-miga { display: flex; align-items: center; gap: var(--e2);
  padding-bottom: var(--e4); font-size: var(--t-xs); color: var(--texto-medio); }
.cat-miga a:hover { text-decoration: underline; }
.cat-miga span { opacity: .7; }
.cat-miga .hs-tenue { opacity: 1; }

/* --- Menú de teléfono ---------------------------------------------------
   En la barra no caben las categorías, los servicios y la cuenta a la vez.
   Antes simplemente se ocultaban: "¿Necesitas ayuda?" y "Para empresas" no
   existían en teléfono. Ahora viven en un cajón al que se llega siempre. */
.cab__hamb { display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 40px; height: 40px; padding: 0 10px;
  border: 0; background: none; cursor: pointer; }
.cab__hamb span { display: block; height: 2px; background: var(--texto);
  border-radius: 2px; transition: var(--trans); }

.movil-fondo { position: fixed; inset: 0; z-index: 70;
  background: rgba(16,16,20,.5); }
.movil { position: fixed; inset: 0 0 0 auto; z-index: 71;
  width: min(86vw, 360px); display: flex; flex-direction: column;
  background: var(--fondo); box-shadow: var(--sombra-3); }
.movil__cab { display: flex; align-items: center; justify-content: space-between;
  padding: var(--e4) var(--e5); border-bottom: 1px solid var(--borde); }
.movil__tit { font-weight: var(--peso-semi); }
.movil__cerrar { display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; background: none; border-radius: var(--r-full); cursor: pointer; }
.movil__cerrar:hover { background: var(--fondo-alt); }
.movil__cuerpo { flex: 1; overflow-y: auto; padding: var(--e4) var(--e3) var(--e8); }
.movil__grupo { margin-bottom: var(--e5); }
.movil__eti { display: block; padding: 0 var(--e4) var(--e2);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-tenue); font-weight: var(--peso-semi); }
.movil__cuerpo a, .movil__cuerpo button { display: flex; align-items: center;
  width: 100%; min-height: 44px; padding: var(--e2) var(--e4);
  border: 0; background: none; border-radius: var(--r-sm);
  font-size: var(--t-base); text-align: left; cursor: pointer; }
.movil__cuerpo a:active, .movil__cuerpo a:hover { background: var(--fondo-alt); }
.movil__quien { padding: var(--e3) var(--e4) var(--e4); margin: 0 0 var(--e2);
  background: var(--fondo-alt); border-radius: var(--r); }
.movil__quien b { display: block; font-size: var(--t-sm); }
.movil__quien span { font-size: var(--t-xs); color: var(--texto-medio);
  word-break: break-all; }
.movil__salir { color: var(--error) !important; }

@media (max-width: 860px) {
  .cab__hamb { display: flex; }
  /* En teléfono la cinta solo deja el mensaje que vende, no una lista de
     enlaces que no caben. */
  .avisos__izq a:not(:first-child) { display: none; }
  .menu { display: none; }        /* las categorías viven en el cajón */
}
@media (min-width: 861px) {
  .movil, .movil-fondo { display: none !important; }
}

/* --- Objetivos táctiles en teléfono -------------------------------------
   Un icono de 21px es imposible de acertar con el pulgar. Se le da área
   sin agrandar el dibujo: el icono se ve igual, la zona sensible crece. */
@media (max-width: 860px) {
  .cab__icono, .cuenta-menu > .cab__icono {
    min-width: 44px; min-height: 44px; }
  .cab__hamb { min-width: 44px; min-height: 44px; }
  .avisos__izq a { display: inline-flex; align-items: center; min-height: 34px; }
  .buscar { height: 46px; }
  .buscar input { min-height: 44px; }
  .menu__int a, .movil__cuerpo a, .movil__cuerpo button { min-height: 44px; }
  .filtro-btn, .hs-filtro, .orden__sel { min-height: 40px; }
  .chip { min-height: 34px; }
  .cesta-n { top: 2px; right: 2px; }
  .cuenta-menu__ini { position: relative; }
}

/* La barra de comparar tapaba el final de la página. Se le hace sitio. */
body.con-comparar { padding-bottom: 88px; }
body.con-barra.con-comparar { padding-bottom: 168px; }
@media (max-width: 620px) {
  body.con-comparar { padding-bottom: 80px; }
  body.con-barra.con-comparar { padding-bottom: 150px; }
  .cmp-barra { bottom: var(--e3); }
}

@media (max-width: 860px) {
  /* Controles sueltos: los que no son texto dentro de una frase necesitan
     área de dedo. Los enlaces en línea dentro de un párrafo quedan fuera
     de esta regla a propósito (WCAG 2.5.8 los exceptúa). */
  .prod__btn { width: 40px; height: 40px; }
  .prod__acc { gap: var(--e3); }
  .cr__cant button { width: 40px; height: 40px; font-size: 18px; }
  .cr__cant span { min-width: 34px; }
  .cr__quitar { min-height: 40px; padding: 0 var(--e2); }
  .pie__cols a { min-height: 40px; display: flex; align-items: center; }
  .cu__menu button, .ay-cat a, .cat-miga a { min-height: 40px; }
  .ay-cat a { display: flex; align-items: center; }
  .ac__pie a, .rc__pie a { display: inline-flex; align-items: center; min-height: 40px; }
}

@media (max-width: 860px) {
  .cm__nom, .cm__quitar { min-height: 40px; display: inline-flex; align-items: center; }
  .ay-buscar { height: 52px; }
  .ay-buscar input { min-height: 44px; }
  .miga a { min-height: 40px; display: inline-flex; align-items: center; }
  /* El botón de flecha del scroll y el de cerrar aviso también son dedos. */
  .aviso-cesta .hs-btn { min-height: 40px; }
  .cmp-barra .hs-btn { min-height: 40px; }
}