/* 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 ------------------------------------------------------------ */
/* La franja que la cabecera pegajosa se queda ocupando arriba. Todo lo que
   también se pegue debajo de ella, o a lo que se salte con scrollIntoView,
   tiene que descontarla.
   Sin esto, en la ficha del producto la foto se pegaba a 80px (`--e20`) y
   la cabecera mide 130: al bajar, los 50px de arriba de la foto quedaban
   detrás de la barra, y cada salto de la flecha dejaba el título de la
   sección justo debajo del borde, sin verse.
   Vive aquí y no en hs.css con el resto de los tokens porque es una medida
   de esta cabecera, no del sistema: cambia el relleno de `.cab__int` y este
   número deja de ser cierto. El valor es el de escritorio; producto.html lo
   remide con JavaScript, que en pantalla estrecha el buscador se va a su
   propia línea y la cabecera crece. */
:root { --alto-cab: 130px; }

.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); }
/* El anillo lo pone la barra entera con `:focus-within`. El global de
   `:focus-visible` se lo ponía TAMBIÉN al input de dentro, y salían dos
   amarillos concéntricos: uno pegado al borde de la caja y otro pegado al
   texto. Se quita el de dentro; el de fuera ya dice lo mismo. */
.buscar input:focus-visible { box-shadow: none; outline: none; }

/* --- Sugerencias del buscador -------------------------------------------
   Sin esto la barra solo servía para escribir y darle a Enter: había que
   saber de antemano qué existe. Ahora se ve mientras se escribe. */
.buscar { position: relative; }
.buscar__sug { position: absolute; z-index: 65; top: calc(100% + 8px);
  left: 0; right: 0; max-height: min(70vh, 480px); overflow-y: auto;
  padding: var(--e2); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-3); }
.buscar__sug[hidden] { display: none; }
.buscar__eti { display: block; padding: var(--e3) var(--e3) var(--e2);
  font-size: var(--t-xs); color: var(--texto-medio);
  text-transform: uppercase; letter-spacing: .06em; font-weight: var(--peso-semi); }
.buscar__it { display: flex; align-items: center; gap: var(--e3);
  padding: var(--e2) var(--e3); border-radius: var(--r-sm);
  color: var(--texto); transition: var(--trans); }
.buscar__it:hover, .buscar__it.esta-activa { background: var(--fondo-alt); }
.buscar__mini { flex: none; width: 44px; height: 44px; display: grid;
  place-items: center; background: var(--fondo-alt);
  border-radius: var(--r-sm); overflow: hidden; }
.buscar__mini img { width: 100%; height: 100%; object-fit: contain; }
.buscar__mini svg { width: 70%; opacity: .2; }
.buscar__nom { font-size: var(--t-sm); font-weight: var(--peso-semi);
  line-height: var(--i-sm); }
.buscar__de { font-size: var(--t-xs); color: var(--texto-medio); }
.buscar__todo { display: block; padding: var(--e3); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: var(--peso-semi); color: var(--texto); }
.buscar__todo:hover { background: var(--fondo-alt); }
.buscar__nada { padding: var(--e4) var(--e3); font-size: var(--t-sm);
  color: var(--texto-medio); }

@media (max-width: 640px) {
  /* Sigue colgando de la barra, no `fixed`. Con `position: fixed` y
     `top: auto` el panel se queda en su posición estática —que está
     DENTRO del formulario— y tapaba la mitad del campo mientras se
     escribía: no se veía lo que uno estaba tecleando. Lo que sí cambia
     es cuánto puede crecer, para que quepan más de tres resultados. */
  .buscar__sug { max-height: calc(100vh - 210px); }
}

.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; }
  /* La marca ocupa las dos columnas y las cuatro secciones quedan en un
     2x2 debajo. Compartiendo fila con «Comprar», el bloque de la marca
     empujaba todo y «Ayuda» se quedaba sola al final. */
  .pie__cols > :first-child { grid-column: 1 / -1; }
}
.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; }
/* El teléfono iba pegado abajo y sangrando fuera de la tarjeta con un
   margen negativo. La idea era que pareciera que asoma; el resultado es
   que queda descolgado del texto y cortado por el borde, mientras la
   tarjeta de al lado tiene su dibujo centrado. Centrado los dos. */
.grande__arte--tel { width: 140px; align-self: center; }
.grande__arte img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.22)); }
.grande__arte--kit { width: 230px; }
@media (max-width: 1080px) { .grande { padding: var(--e8); } .grande__arte { width: 140px; } .grande__arte--kit { width: 170px; } }
@media (max-width: 620px) {
  .grande { grid-template-columns: 1fr; }
  /* Los títulos traen un salto de línea puesto a mano, que en escritorio
     está bien: la tarjeta es angosta porque el dibujo ocupa la otra
     mitad. Aquí el dibujo no está y sobra el ancho, así que el corte
     parte la frase sin motivo. Se anula y que fluya.

     El salto lleva un espacio delante en el HTML a propósito: sin él,
     al ocultarlo las dos palabras quedaban pegadas («¿Te gustareparar?»).
     En escritorio ese espacio cae al final de la línea y se colapsa. */
  .grande h3 br { display: none; }
  /* Fuera. En una columna el dibujo se va debajo del botón, así que
     alarga la tarjeta sin que nadie llegue nunca a verlo: el que va a
     pulsar ya pulsó. */
  .grande__arte { display: none; }
}

.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; }
/* El botón medía por su relleno y el campo por su altura fija: uno
   quedaba unos píxeles más bajo que el otro y se notaba. */
.avisame .hs-btn { height: 48px; padding-block: 0; }
@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, .paso__arte img { width: 100%; display: block; }
/* `height: auto` hace falta: sin él manda el `height` del <img> y la foto
   salía alta y recortada en vez de 16:9. */
.paso__arte img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* En una columna el dibujo pasa de ser un apoyo a ser el protagonista:
   ocupa el ancho entero y hay que rodar para llegar al paso siguiente. */
@media (max-width: 800px) {
  .paso__arte { max-width: 320px; margin-inline: auto; }
}

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

/* Botón de borde claro, para fondos oscuros (portada, tarjetas con foto). */
.hs-btn--fantasma { background: transparent; color: var(--texto-inv);
  border-color: rgba(255,255,255,.28); }
.hs-btn--fantasma:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,.07); }

/* «Para empresas» con foto de fondo. La foto trae la mitad izquierda
   oscura y desenfocada; el degradado la termina de oscurecer para que el
   texto blanco se lea igual en cualquier ancho. */
.grande--foto { color: var(--texto-inv); border: 0; min-height: 420px;
  background: linear-gradient(90deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 42%, transparent 66%),
              #0b0b0b url(/estaticos/fotos-web/empresas.webp) right center / cover no-repeat; }
.grande--foto p { color: #c9c9c3; }
@media (max-width: 760px) {
  /* Angosta, la persona queda detrás del texto: se oscurece de abajo
     arriba y el texto va al pie. */
  .grande--foto { align-items: end; min-height: 520px;
    background: linear-gradient(0deg, rgba(11,11,11,.96) 0%, rgba(11,11,11,.75) 48%, rgba(11,11,11,.1) 75%),
                #0b0b0b url(/estaticos/fotos-web/empresas.webp) 78% center / cover no-repeat; }
}

/* --- 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); }
/* En el teléfono cada filtro medía lo que medía su palabra, así que
   «Almacenamiento» ocupaba una fila entera y «Año» se quedaba con un
   hueco al lado: siete chips de anchos distintos repartidos en tres
   filas escalonadas. En una rejilla de dos columnas iguales quedan
   alineados y se leen como un grupo. */
@media (max-width: 640px) {
  .filtros-barra { display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--e2); align-items: stretch; }
  .filtro-btn { width: 100%; justify-content: space-between; }
}
.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; }
/* La de la garantía lleva foto: un MacBook con el kit de herramientas,
   «si falla, lo reparamos» dicho sin palabras. La foto trae arriba el
   amarillo liso para el texto; el fondo de la tarjeta es ese mismo
   amarillo (#edbf36), no el de la marca, para que no se vea la unión. */
.promo--garantia { background: #edbf36 url(/estaticos/fotos-web/garantia.webp)
    center bottom / 100% auto no-repeat; }

.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--foto { position: relative; overflow: hidden; isolation: isolate;
  color: #fff; background: var(--hs-negro); }
.promo--foto img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; transition: transform 600ms cubic-bezier(.2,0,.2,1); }
.promo--foto:hover img { transform: scale(1.03); }
.promo--foto::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 28%,
                                      transparent 50%, rgba(0,0,0,.78) 100%); }
.promo__grande { display: block; font-weight: 900; letter-spacing: -0.055em;
  line-height: .86; font-size: clamp(40px, 4.2vw, 60px); text-wrap: balance; }
.promo__grande--abajo { margin-top: auto; }
.promo__nota { margin-top: var(--e3); font-size: var(--t-sm); line-height: var(--i-sm);
  color: rgba(255,255,255,.88); }
.promo--foto .promo__mas { padding-top: var(--e3); margin-top: 0; }
/* En una columna la tarjeta se estiraba a lo ancho y quedaba baja: el
   titular tapaba a la persona. Vertical, como la del sofá. */
@media (max-width: 620px) { .promo--foto { aspect-ratio: 4 / 5; } }

.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: 272px; 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; }
/* En el teléfono deja de ser una ventanita colgando del icono —que se ve
   como un cuadro suelto en medio de la pantalla, sin relación con nada— y
   pasa a ser una hoja pegada abajo, que es donde está el pulgar.

   El fondo oscuro detrás no es decoración: sin él, una caja blanca sobre
   contenido blanco no se lee como algo que se abrió encima. */
@media (max-width: 640px) {
  .cuenta-menu__caja { position: fixed; inset: auto 0 0 0; top: auto;
    width: auto; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--e3) var(--e3) calc(var(--e5) + env(safe-area-inset-bottom));
    /* El oscurecido va como sombra y no como capa aparte.
       Con un `::before` a pantalla completa y `z-index:-1`, el fondo
       oscuro pintaba por encima del blanco de la propia hoja —así es el
       orden de pintado dentro de un contexto de apilamiento— y la hoja
       entera salía griseada, con el botón amarillo apagado. Una sombra
       de extensión enorme oscurece solo lo de AFUERA, que es lo que se
       quería, y no puede taparse a sí misma. */
    box-shadow: 0 -8px 40px rgba(16,16,20,.28),
                0 0 0 100vmax rgba(16,16,20,.5); }
  /* Un asa arriba: dice «esto se cierra» sin escribirlo. */
  .cuenta-menu__caja::after { content: ""; position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: var(--borde); }
  .cuenta-menu__quien { padding-top: var(--e5); }
  .cuenta-menu__caja a:not(.hs-btn),
  .cuenta-menu__caja button:not(.hs-btn) { padding: var(--e4); }
}
.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); }
/* `word-break: break-all` estaba puesto para que un correo largo no se
   saliera de la caja, pero parte por donde sea: «favoritos» salía como
   «favorito» y una «s» sola en la línea de abajo. `anywhere` solo parte
   cuando la palabra de verdad no cabe, que es lo que hacía falta. */
.cuenta-menu__quien span { font-size: var(--t-xs); color: var(--texto-medio);
  overflow-wrap: anywhere; text-wrap: pretty; }
/* El `:not(.hs-btn)` no es un adorno. Esta regla es más específica que
   `.hs-btn--principal`, así que le ponía `background: none; border: 0` a
   los botones de Entrar y Crear cuenta y los dejaba en texto pelado. Solo
   parecían botones al pasarles el ratón por encima, porque el `:hover` de
   aquí abajo les pintaba un gris. */
.cuenta-menu__caja a:not(.hs-btn), .cuenta-menu__caja button:not(.hs-btn) {
  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:not(.hs-btn):hover,
.cuenta-menu__caja button:not(.hs-btn):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;
  position: relative; }
.prod__foto { background: var(--fondo-alt); aspect-ratio: 4/3; display: grid;
  place-items: center; position: relative; }
/* Las fotos de producto vienen sobre blanco. Dentro de una caja gris se
   veía el rectángulo blanco de la foto recortado contra el gris, que es
   peor que no tener fondo. */
.prod__foto:has(.prod__img) { background: #fff; }
.prod__foto svg { width: 52%; opacity: .16; }
/* La foto va centrada y con aire, no pegada a los bordes.
   `contain` y no `cover`: con `cover` la foto se recortaba por arriba y
   por abajo para llenar el hueco, y un equipo fotografiado de frente
   salía con el teclado cortado. Con la caja de proporción fija —que es
   lo que se arregló abajo— ya no hay franjas de altos distintos, que es
   lo que había hecho escoger `cover` en su momento.

   Va en posición absoluta y no en el flujo. Con `height:100%` dentro de
   una fila de rejilla automática la altura se resuelve en círculo: la
   fila mide lo que mida la imagen y la imagen mide lo que mida la fila,
   así que ganaba la proporción del archivo y el `aspect-ratio` de la
   caja no servía de nada. Con una foto cuadrada de 1024x1024 la caja
   salía cuadrada, empujaba el cuerpo de la tarjeta hacia abajo y el
   nombre del modelo se perdía por debajo del recorte. */
.prod__img { position: absolute; inset: var(--e4);
  width: auto; height: auto; max-width: calc(100% - var(--e4) * 2);
  max-height: calc(100% - var(--e4) * 2);
  margin: auto; object-fit: contain; display: block;
  /* Bajada un pelo y crecida un 13%. Las fotos de producto traen el
     equipo algo alto dentro del cuadro y con bastante blanco alrededor,
     así que a tamaño natural se ve pequeño y flotando. Lo que se sale
     del hueco al agrandarla es ese blanco, no el equipo. */
  transform: translateY(4%) scale(1.13); }
/* Por encima de la foto. Sin `z-index` la imagen —que también está en
   posición absoluta y va después en el HTML— le pasaba por delante y se
   comía la etiqueta de la estética, que es lo único que distingue dos
   tarjetas del mismo modelo. */
.prod__cinta { position: absolute; top: var(--e3); left: var(--e3); z-index: 2; }
.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); }
/* Lo que va incluido sin cobrar. En verde de «correcto», no en el gris de
   la letra pequeña: es un argumento de venta, no una nota al pie. */
.prod__silueta { display: contents; }
.prod__silueta[hidden] { display: none; }
.prod__regalo { font-size: var(--t-xs); line-height: var(--i-xs);
  color: var(--ok); font-weight: var(--peso-medio); margin-top: var(--e1); }
.prod__regalo::before { content: "\2713\00a0"; }
.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 es una capa invisible sobre la tarjeta entera —no
   solo sobre la foto, que era lo que había y obligaba a apuntarle a la
   imagen o al nombre— y los botones de favorito y comparar quedan por
   encima con su propio z-index. */
.prod__enlace { position: absolute; inset: 0; z-index: 1; }
.prod__pie { margin-top: auto; padding-top: var(--e3);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e3); }
.prod__pie .prod__precio { margin-top: 0; padding-top: 0; }
.prod__ver { font-size: var(--t-xs); font-weight: var(--peso-medio);
  color: var(--texto-medio); white-space: nowrap;
  border: 1px solid var(--borde); border-radius: var(--r-full);
  padding: 5px 11px; transition: var(--trans); }
.prod:hover .prod__ver { border-color: var(--hs-negro); color: var(--texto); }
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); }
/* Anclado a la IZQUIERDA, que es donde está el botón que lo abre. Con el
   botón a un lado y el panel saliendo por el otro, el dedo cruza la
   pantalla entera y por un momento no se sabe qué acaba de pasar. */
.movil { position: fixed; inset: 0 auto 0 0; 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; }
}

/* --- Secciones de página -------------------------------------------------
   `.seccion` y `.seccion__cab` estaban puestas en cinco plantillas desde el
   primer día y no tenían ni una regla de CSS. El aire entre bloques lo ponían
   por accidente los márgenes de los títulos, así que en el centro de ayuda
   «Lo que más nos preguntan» arrancaba pegado a la portada negra y terminaba
   pegado a «Por tema», sin nada que separara una cosa de la otra. */
.seccion { padding-top: var(--e12); }
.seccion:last-child { padding-bottom: var(--e16); }
.seccion__cab { margin-bottom: var(--e6); }
.seccion__cab h2 { font-size: var(--t-xl); line-height: var(--i-xl); }
.seccion__cab p { margin: var(--e2) 0 0; max-width: 64ch;
  font-size: var(--t-sm); line-height: var(--i-sm); color: var(--texto-medio); }
@media (max-width: 700px) {
  .seccion { padding-top: var(--e10); }
  .seccion:last-child { padding-bottom: var(--e12); }
}

/* --- Modal de sesión ------------------------------------------------------
   Entrar o crear cuenta SIN salir de la página. Lo abre el corazón de
   favoritos, en la rejilla y en la ficha. Vive en la hoja compartida y no
   dentro de una plantilla porque lo pintan dos sitios distintos y sería
   la tercera copia de un componente que ya vamos por dos. */
.ses { position: fixed; inset: 0; z-index: 90; display: grid;
  place-items: center; padding: var(--e4); }
.ses__fondo { position: absolute; inset: 0; background: rgba(16,16,20,.5); }
.ses__caja { position: relative; width: min(420px, 100%);
  max-height: calc(100dvh - var(--e8)); overflow: auto;
  padding: var(--e8) var(--e6) var(--e6);
  background: var(--fondo); border-radius: var(--r-lg);
  box-shadow: var(--sombra-3); }
.ses__x { position: absolute; top: var(--e2); right: var(--e3);
  border: 0; background: none; font-size: 26px; line-height: 1;
  padding: var(--e1) var(--e2); color: var(--texto-medio); cursor: pointer; }
.ses__x:hover { color: var(--texto); }
.ses__tit { margin: 0 0 var(--e2); font-size: var(--t-xl);
  line-height: var(--i-xl); }
.ses__bajada { margin: 0 0 var(--e5); font-size: var(--t-sm);
  line-height: var(--i-sm); color: var(--texto-medio); }
.ses__tabs { display: flex; gap: var(--e2); margin-bottom: var(--e5);
  padding: var(--e1); background: var(--fondo-alt); border-radius: var(--r); }
.ses__tab { flex: 1; padding: var(--e2); border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: var(--t-sm);
  font-weight: var(--peso-medio); color: var(--texto-medio); cursor: pointer;
  transition: var(--trans); }
.ses__tab.esta-activa { background: var(--fondo); color: var(--texto);
  box-shadow: var(--sombra-1); }
.ses__campo { display: block; margin-bottom: var(--e4); }
.ses__campo > span { display: block; margin-bottom: var(--e1);
  font-size: var(--t-xs); color: var(--texto-medio); }
.ses__err { margin: 0 0 var(--e4); padding: var(--e3) var(--e4);
  background: var(--error-fondo); border-radius: var(--r);
  font-size: var(--t-sm); line-height: var(--i-sm); color: var(--error); }
.ses__olvide { display: block; margin-top: var(--e4); text-align: center;
  font-size: var(--t-xs); color: var(--texto-medio);
  text-decoration: underline; }

/* --- La cinta de la estética, un color por grado -------------------------
   Los tres salían en amarillo de marca, así que la cinta decía «esto es
   una etiqueta» y no «este equipo está así». Con tres colores, el grado
   se lee de lejos y sin leer: verde impecable, ámbar muy bueno, gris con
   detalles.

   El gris es deliberado para «Con detalles»: es el más golpeado de los
   tres y NO tiene que gritar. Pintarlo de rojo espantaría de un equipo
   que funciona perfecto y que para mucha gente es la mejor compra de la
   tienda; pintarlo de amarillo, como estaba, lo vendía como si fuera lo
   mismo que un impecable. */
.prod__cinta--impecable { background: var(--ok-fondo); color: var(--ok); }
.prod__cinta--muy_bueno { background: var(--alerta-fondo);
  color: var(--alerta); }
.prod__cinta--con_detalles { background: var(--fondo-alt);
  color: var(--texto-medio); box-shadow: inset 0 0 0 1px var(--borde); }


/* --- WhatsApp ------------------------------------------------------------
   El botón flotante va abajo a la derecha, donde se busca. Comparte esa
   esquina con la flecha de avance de la ficha y con la barra de encargo
   de repuestos: cuando alguna de las dos está, se apartan. En la ficha,
   con la barra de compra abierta, sube por encima de ella.
   El verde es el de WhatsApp: es lo que hace que se reconozca de lejos. */
.wa-flotante { --wa: #25d366; --wa-osc: #1da851;
  position: fixed; right: var(--e5); bottom: var(--e5); z-index: 48;
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 10px var(--e4) 10px var(--e3); border-radius: var(--r-full);
  background: var(--wa); color: #fff; font-weight: var(--peso-semi);
  font-size: var(--t-sm); text-decoration: none;
  box-shadow: 0 6px 20px rgba(16,16,20,.18);
  transition: bottom 220ms cubic-bezier(.2,0,.2,1), background var(--trans); }
.wa-flotante:hover { background: var(--wa-osc); }
.wa-flotante:focus-visible { outline: 3px solid var(--hs-amarillo); outline-offset: 2px; }
body.con-barra .wa-flotante { bottom: 108px; }
/* Va a la derecha, debajo de la flecha de avance de la ficha. Con la barra
   de compra abierta los dos suben, y la flecha se aparta para no pisarlo. */
@media (min-width: 621px) { body.con-barra .flecha { bottom: 164px; } }
body:has(.enc-barra:not([hidden])) .wa-flotante { bottom: 92px; }
@media (max-width: 620px) {
  .wa-flotante { right: var(--e4); bottom: var(--e4); padding: 12px; }
  .wa-flotante span { display: none; }
  /* En el teléfono, con la barra de compra abierta, se va: tapaba el
     borde del «Agregar al carrito» de la página, y la ficha ya tiene su
     propio «pídelo directo por WhatsApp». */
  body.con-barra .wa-flotante { display: none; }
}

/* --- Banda editorial ----------------------------------------------------
   Dos fotos grandes con el titular encima, partido arriba y abajo de la
   imagen, en letra muy gruesa y apretada. Las dos fotos se eligieron con
   la parte de arriba y la de abajo despejadas, que es donde va el texto. */
.banda { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); }
/* Columna: titular arriba, el resto abajo. Con posiciones absolutas
   la segunda línea del titular pisaba la nota cuando esta partía en dos. */
.banda__foto { position: relative; display: flex; flex-direction: column;
  justify-content: space-between; gap: var(--e3); overflow: hidden;
  aspect-ratio: 4 / 5; padding: 4% 5% 5%; border-radius: var(--r-lg); color: #fff;
  text-decoration: none; isolation: isolate; }
.banda__foto img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; transition: transform 600ms cubic-bezier(.2,0,.2,1); }
.banda__foto:hover img { transform: scale(1.03); }
/* Sombra arriba y abajo para que el blanco se lea sobre cualquier foto. */
.banda__foto::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 30%,
                                      transparent 58%, rgba(0,0,0,.62) 100%); }
.banda__arriba, .banda__abajo { display: block;
  font-weight: 900; letter-spacing: -0.055em; line-height: .86;
  font-size: clamp(44px, 7.4vw, 112px); text-wrap: balance; }
.banda__abajo { margin-top: auto; text-align: right; }
.banda__nota { font-size: var(--t-sm); line-height: var(--i-sm); color: rgba(255,255,255,.88); }
@media (max-width: 760px) {
  .banda { grid-template-columns: 1fr; }
  .banda__arriba, .banda__abajo { font-size: clamp(44px, 15vw, 96px); }
}