/* Dekkin Style — sistema visual (sección 3 del plan de Anto).
   Los valores salen de los mock-ups, que son la fuente de verdad. */

@font-face { font-family: Poppins; src: url(../fonts/Poppins-Regular.woff2) format('woff2');  font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/Poppins-Medium.woff2) format('woff2');   font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/Poppins-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/Poppins-Bold.woff2) format('woff2');     font-weight: 700; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/Poppins-ExtraBold.woff2) format('woff2');font-weight: 800; font-display: swap; }

:root {
  --violeta:        #6B4BA8;
  --violeta-hondo:  #453C7E;
  --violeta-claro:  #C6A6DC;
  --coral:          #F0526B;
  --naranja:        #F5A03C;
  --amarillo:       #FFC72C;
  --rosa-palido:    #F9E7E5;
  --crema:          #F8F5EF;
  --gris-claro:     #E8E8E8;
  --negro:          #2B2B2B;
  --grad: linear-gradient(115deg, var(--violeta) 0%, #8B4FA8 35%, var(--coral) 70%, var(--naranja) 100%);
  --sombra: 0 6px 24px rgba(69, 60, 126, .10);
  --radio: 22px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--crema); color: var(--negro);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Volanta: sans espaciada en mayúscula, cuerpo chico (3.4) ───────────────── */
.volanta {
  text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 600;
}

/* ── Header (5.1): dos franjas sobre crema, sticky ─────────────────────────── */
.header { position: sticky; top: 0; z-index: 40; background: var(--crema); }
.header.scrolled { box-shadow: 0 2px 14px rgba(69,60,126,.08); }
.header__f1 { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px 24px; }
/* El logo del header es el sticker (mock-up `Home Style.png`), que es casi
   cuadrado: con los 42px del horizontal quedaba diminuto. */
.header__logo img { height: 66px; width: auto; }
.header__acciones { position: absolute; right: 24px; display: flex; gap: 10px; }
.iconobtn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--violeta-claro); color: #fff; display: grid; place-items: center;
}
.iconobtn:hover { background: var(--violeta); }
.header__f2 { border-top: 1px solid rgba(69,60,126,.12); }
.nav { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 12px 24px; flex-wrap: wrap; }
.nav a { font-weight: 700; font-size: 14px; color: var(--violeta-hondo); }
.nav a:hover, .nav a.activo { color: var(--violeta); }
.nav .sep { width: 1px; height: 18px; background: rgba(69,60,126,.25); }
.nav a.secundario { color: var(--coral); }
.hamburguesa { display: none; }

/* ── Hero (5.2) ────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
/* 🚨 El cambio de slide es DESLIZANDO, no un corte (pedido de Anto, 16-09-2026). Los
   slides van en una pista de ancho 4× que se corre con `transform`: es lo único que el
   browser anima en el compositor, así que no repinta la imagen en cada cuadro.
   Antes eran `display:none/block`, y por eso además hacía falta forzarles el `eager`:
   una imagen en display:none no la baja nunca. Ahora están todas en el layout. */
.hero__pista { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.hero__slide { flex: 0 0 100%; min-width: 100%; position: relative; }
.hero__slide img { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .hero__pista { transition: none; } }
.hero__txt {
  position: absolute; left: 6%; top: 50%; transform: translateY(-50%);
  color: #fff; max-width: 40%;
}
.hero__txt h1 {
  font-size: clamp(28px, 4.2vw, 62px); line-height: .95; margin: 10px 0 14px;
  text-transform: uppercase; font-weight: 800; letter-spacing: -.01em;
}
.hero__slide[data-tono="amarillo"] .hero__txt h1 { color: var(--amarillo); }
.hero__txt p { margin: 0 0 20px; font-size: clamp(12px, 1.2vw, 16px); line-height: 1.45; }
.hero__nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.hero__nav button { pointer-events: auto; margin: 0 14px; }
.hero__puntos { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; }
.hero__puntos button {
  width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.5);
}
.hero__puntos button.activo { background: #fff; width: 24px; border-radius: 5px; }

/* ── Botones (3.5) ─────────────────────────────────────────────────────────── */
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
  border: 1.5px solid currentColor; border-radius: 999px; background: transparent;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; color: #fff;
}
.btn-outline:hover { background: rgba(255,255,255,.14); }
.btn-outline.coral { color: var(--coral); }
.btn-outline.coral:hover { background: rgba(240,82,107,.08); }
.redondo {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--violeta-hondo); display: grid; place-items: center;
  box-shadow: var(--sombra); font-size: 17px;
}

/* ── Banner de categoría (6.2) ─────────────────────────────────────────────── */
.catbanner { position: relative; }
.catbanner img { width: 100%; }
.catbanner__txt { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); color: #fff; max-width: 42%; }
.catbanner__txt h1 { margin: 8px 0 10px; font-size: clamp(26px, 4vw, 52px); text-transform: uppercase; font-weight: 800; line-height: 1; }
.catbanner__txt p { margin: 0; font-size: clamp(12px, 1.15vw, 15px); }

/* ── Filtros (6.3) ─────────────────────────────────────────────────────────── */
.filtros { display: flex; gap: 10px; padding: 26px 0 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px;
  border-radius: 999px; border: 1px solid rgba(69,60,126,.22); background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--violeta-hondo); cursor: pointer;
}
.chip.activo { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.chip .tag-new { background: #7FD4F5; color: #fff; border-radius: 5px; padding: 1px 6px; font-size: 10px; font-weight: 700; }

/* ── Grilla y tarjeta (6.4 / 6.5) ──────────────────────────────────────────── */
.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 18px 0 54px; }
.tarjeta {
  background: #fff; border-radius: var(--radio); overflow: hidden; cursor: pointer;
  box-shadow: var(--sombra); border: 0; padding: 0; text-align: left; font: inherit;
  display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(69,60,126,.14); }
/* Dentro de un <button> sólo puede haber contenido en línea, así que la tarjeta se
   arma con <span>. Hay que devolverles el display a mano: por inline, la zona de imagen
   colapsa a cero de alto y la grilla entera se desarma. */
.tarjeta__img { display: block; position: relative; aspect-ratio: 1/1; background: var(--rosa-palido); }
.tarjeta__datos, .tarjeta__cat, .tarjeta__nombre { display: block; }
.tarjeta__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 12%; transition: opacity .25s ease;       /* crossfade del hover (7.3) */
}
.tarjeta__img img.lifestyle { opacity: 0; object-fit: cover; padding: 0; }
.tarjeta:hover .tarjeta__img img.lifestyle { opacity: 1; }
.tarjeta:hover .tarjeta__img img.producto { opacity: 0; }
.tarjeta__datos { background: #fff; padding: 16px 18px 18px; }
.tarjeta__cat { color: var(--violeta-claro); }
.tarjeta__nombre { color: var(--violeta-hondo); font-weight: 700; font-size: 16px; margin: 6px 0 10px; }
.tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.precio { color: var(--coral); font-weight: 700; font-size: 15px; }
.precio.vacio { color: var(--violeta-claro); font-weight: 500; font-size: 13px; }
.swatches { display: flex; gap: 6px; }
.swatch {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
  padding: 0; cursor: pointer; background-size: cover; background-position: center;
}
.swatch.activo { outline: 2px solid var(--violeta); outline-offset: 2px; }
.swatch[disabled] { cursor: default; }

/* ── Pop-up (8) ────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 80; display: none; }
.modal.abierto { display: block; }
.modal__fondo { position: absolute; inset: 0; background: rgba(69,60,126,.34); backdrop-filter: blur(6px); }
.modal__caja {
  position: relative; margin: 4vh auto; max-width: 1000px; background: #fff;
  border-radius: 26px; box-shadow: 0 24px 60px rgba(43,43,43,.3); overflow: hidden;
  display: grid; grid-template-columns: 55% 45%; grid-template-rows: minmax(0, 1fr); max-height: 92vh;
}
/* 🚨 Sin `minmax(0, 1fr)` en la fila, el grid la dimensiona por el CONTENIDO: crecía
   más que el `max-height` de la caja y el `overflow: hidden` de arriba la RECORTABA.
   O sea que el `overflow-y: auto` de la ficha nunca se activaba y las últimas
   características quedaban cortadas sin forma de llegar a ellas — la corrección 10.
   El `min-height: 0` es la otra mitad: un ítem de grid no baja de su tamaño mínimo
   de contenido si no se lo decís. */
.modal__fotos, .modal__ficha { min-height: 0; }
.modal__cerrar {
  position: absolute; top: 18px; right: 18px; z-index: 3; width: 36px; height: 36px;
  border-radius: 50%; border: 0; cursor: pointer; background: #F2EDE4; color: var(--negro); font-size: 16px;
}
/* 🚨 La foto se posiciona en ABSOLUTO, y no es un detalle: mientras estuvo en el flujo
   ERA ELLA la que definía el alto de la fila del grid, así que su `max-height: 88%`
   resolvía contra un alto que dependía de sí misma —o sea, contra `auto`, o sea que no
   se aplicaba— y la columna crecía con el alto natural de la imagen. Como la caja está
   limitada a 92vh con `overflow: hidden`, lo que sobraba se RECORTABA: es la foto
   cortada abajo que marcó Anto el 16-09-2026 en el Soporte Grid, la Correa con Cable y
   los Mini Charms — tres fotos verticales. Sacándola del flujo, el alto de la fila lo
   fijan el `aspect-ratio` de la columna y la ficha, y la foto entra siempre entera.
   El `inset: 6%` con 88×88% es el centrado: 6 + 88 + 6 = 100. */
.modal__fotos { position: relative; background: var(--rosa-palido); overflow: hidden; }
/* El cuadrado es un PISO, no una medida fija: lo pone el pseudo-elemento y no
   `aspect-ratio`, porque el aspect-ratio le da a la columna un alto DEFINIDO y un ítem
   de grid con alto definido ya no se estira — la columna quedaba en 550 px con la ficha
   midiendo 828 y abajo del rosa aparecía una franja blanca. Con el padding del pseudo,
   la columna no tiene alto propio: se estira con la fila. */
.modal__fotos::before { content: ""; display: block; padding-top: 100%; }
.modal__fotos.tecnico { background: var(--gris-claro); }
.modal__fotos img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.modal__flechas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.modal__flechas button { pointer-events: auto; }
/* La ficha scrollea sola, pero sin nada que lo anuncie la gente cree que el texto
   está cortado (corrección 10). El degradé de abajo se ve SÓLO mientras queda algo
   por leer: es la señal de "seguí bajando". */
.modal__ficha { padding: 34px 34px 30px; overflow-y: auto; scrollbar-width: thin; }
.modal__ficha.hay-mas { -webkit-mask-image: linear-gradient(#000 calc(100% - 46px), transparent); mask-image: linear-gradient(#000 calc(100% - 46px), transparent); }
.modal__mas {
  position: absolute; right: 22px; bottom: 16px; z-index: 4; display: none;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--violeta-hondo); box-shadow: var(--sombra); font-size: 15px;
}
.modal__caja.hay-mas .modal__mas { display: grid; place-items: center; }
.modal__ficha .volanta { color: var(--violeta-claro); }
.modal__ficha h2 { color: var(--violeta-hondo); font-weight: 700; font-size: 27px; line-height: 1.16; margin: 8px 0 16px; }
.specs { width: 100%; border-collapse: collapse; margin: 18px 0 6px; }
.specs td { padding: 9px 0; border-bottom: 1px solid rgba(69,60,126,.13); font-size: 14px; }
.specs td:first-child { color: #8A8A94; }
.specs td:last-child { text-align: right; font-weight: 700; color: var(--negro); }
.features { margin: 20px 0 0; padding: 0; list-style: none; }
.features li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; margin-bottom: 8px; }
.features li::before { content: "◦"; color: var(--violeta); font-weight: 700; }
.modal__manual { display: flex; justify-content: flex-end; margin: 22px 0 0; }
.btn-manual {
  padding: 10px 26px; border-radius: 999px; border: 1px solid rgba(69,60,126,.25);
  background: #FBF8F2; color: #55555F; font: inherit; font-weight: 700; font-size: 13px;
  letter-spacing: .08em; cursor: pointer;
}
.btn-manual:hover { background: #F1EADF; }
.btn-manual.apretado { background: var(--violeta); border-color: var(--violeta); color: #fff; }
.modal__desc { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(69,60,126,.13); color: #6E6E78; font-size: 14px; line-height: 1.6; }

/* ── Footer (6.6) ──────────────────────────────────────────────────────────── */
.footer { background: var(--violeta); color: #fff; margin-top: 10px; }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; flex-wrap: wrap; }
.footer__links { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.footer__links .sep { width: 1px; height: 14px; background: rgba(255,255,255,.45); }
.footer__legal { font-size: 12px; opacity: .92; }
.footer__legal a { text-decoration: underline; }
.footer__logo { height: 34px; }

/* ── Responsive (10) ───────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .grilla { grid-template-columns: repeat(2, 1fr); }
  .hero__txt, .catbanner__txt { max-width: 52%; }
  .hero__txt { background: linear-gradient(90deg, rgba(69,60,126,.55), transparent 92%); padding: 16px 22px; border-radius: 16px; left: 4%; }
}
@media (max-width: 768px) {
  .grilla { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .nav { display: none; }
  .nav.abierto { display: flex; flex-direction: column; align-items: flex-start; }
  .hamburguesa { display: grid; }
  .hero__txt, .catbanner__txt { max-width: 86%; }
  /* En una sola columna las filas van APILADAS y cada una mide su contenido: el
     `minmax(0, 1fr)` del desktop aplasta la primera (la foto quedaba en una banda de
     135 px). Acá el que scrollea es la caja entera, no la ficha. */
  .modal__caja { grid-template-columns: 1fr; grid-template-rows: auto auto; margin: 2vh 10px; max-height: 96vh; overflow-y: auto; }
  .modal__cerrar { position: fixed; top: 3vh; right: 20px; }
  .tarjeta__img img.lifestyle { display: none; }   /* en mobile no hay hover (7.3) */
}
/* El plan admite 1–2 columnas en mobile. A 2 la tarjeta entra bien hasta ~380px y
   evita una página infinita de scroll; abajo de eso, una sola. */
@media (max-width: 380px) { .grilla { grid-template-columns: 1fr; } }

/* ── Buscador (pedido de Anto, 16-09-2026) ─────────────────────────────────────
   Barra sobre la página, no una pantalla aparte: se abre con la lupa del header,
   busca mientras se tipea y se cierra con Escape o tocando afuera. */
.buscador { position: fixed; inset: 0; z-index: 85; display: none; }
.buscador.abierto { display: block; }
.buscador__fondo { position: absolute; inset: 0; background: rgba(69,60,126,.34); backdrop-filter: blur(6px); }
.buscador__caja {
  position: relative; max-width: 640px; margin: 10vh auto 0; background: #fff;
  border-radius: 22px; box-shadow: 0 24px 60px rgba(43,43,43,.3); overflow: hidden;
}
.buscador__barra { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(69,60,126,.12); }
.buscador__lupa { font-size: 22px; color: var(--violeta); }
/* `min-width: 0` no es adorno: un input flexible NO baja de su ancho intrínseco si no
   se lo decís, así que en el celu empujaba la cruz fuera de la pantalla (medido: la ✕
   arrancaba en 386 de 390 y se cortaba). Es el pariente del `min-height: 0` del grid
   del pop-up. */
.buscador__barra input {
  flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; color: var(--negro); background: transparent;
}
.buscador__x { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; background: #F2EDE4; color: var(--negro); }
.buscador__res { max-height: 56vh; overflow-y: auto; padding: 8px; }
.buscador__ayuda { padding: 22px 14px; color: #8A8A94; font-size: 14px; }
.bres {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px 10px; border: 0;
  border-radius: 14px; background: transparent; font: inherit; text-align: left; cursor: pointer;
}
.bres:hover, .bres:focus { background: var(--crema); }
.bres__f { width: 52px; height: 52px; border-radius: 12px; background: var(--rosa-palido); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.bres__f img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; }
.bres__t { display: flex; flex-direction: column; gap: 2px; }
.bres__t b { color: var(--violeta-hondo); font-size: 15px; }
.bres__t i { font-style: normal; color: #8A8A94; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.bres--pag { padding-left: 14px; }
@media (max-width: 768px) { .buscador__caja { margin: 0; border-radius: 0; max-width: none; height: 100%; } .buscador__res { max-height: calc(100% - 64px); } }

/* ── Marca de entorno ──────────────────────────────────────────────────────────
   Chip discreto que avisa que esto NO es el sitio público. Se muestra solo cuando
   el host arranca con "test.", así que el mismo código puesto en producción no lo
   muestra y no hay que acordarse de sacarlo. */
/* 🚨 Iba abajo a la IZQUIERDA y ahí está el logo del footer: lo tapaba entero, que es
   lo que reportó Anto el 16-09-2026 («el logo del footer se ve mal»). Va a la derecha,
   donde no pisa nada. */
.entorno-test {
  display: none; position: fixed; right: 14px; bottom: 14px; z-index: 90;
  background: var(--negro); color: #fff; border-radius: 999px; padding: 7px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(43,43,43,.35); opacity: .85; pointer-events: none;
}
body.es-test .entorno-test { display: block; }
/* El chip vive pegado al borde de la ventana, así que al final de la página se le
   sienta encima al footer: en test el footer respira un poco más abajo. */
body.es-test .footer .wrap { padding-bottom: 46px; }


/* ── Cinta de claim (corrección 4 de Anto, 15-09-2026) ──────────────────────────
   Barra negra bajo el hero con el claim en movimiento continuo. El texto se repite
   en DOS tiras idénticas y se desplaza media pista: al terminar la primera, la
   segunda está exactamente donde arrancó, así que el loop no tiene salto.
   🚨 Con `prefers-reduced-motion` se queda quieta: es decorativa, no vale marear. */
.cinta { background: #333; overflow: hidden; }
.cinta__pista { display: flex; width: max-content; animation: cinta 38s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta span {
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; padding: 13px 0; white-space: nowrap;
}
.cinta span i { font-style: normal; opacity: .45; padding: 0 22px; }
@keyframes cinta { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta__pista { animation: none; } }

/* ── Pastillas de categoría (corrección 3) ─────────────────────────────────────
   Color pleno + nombre + botón a la izquierda, foto a la derecha. Dos por fila,
   como el mock-up `Home Style.png`. */
.pastillas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 44px 0 10px; }
.pastilla {
  display: grid; grid-template-columns: 48% 52%; border-radius: 14px; overflow: hidden;
  min-height: 168px; box-shadow: var(--sombra); transition: transform .18s ease, box-shadow .18s ease;
}
.pastilla:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(69,60,126,.14); }
.pastilla__txt { padding: 24px 26px; color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.pastilla__txt .volanta { opacity: .8; }
.pastilla__txt b { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 2px 0 14px; }
.pastilla__cta {
  align-self: flex-start; background: #fff; color: var(--negro); border-radius: 999px;
  padding: 8px 20px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.pastilla:hover .pastilla__cta { background: var(--crema); }
.pastilla__foto { position: relative; overflow: hidden; background: var(--gris-claro); }
.pastilla__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pastilla:hover .pastilla__foto img { transform: scale(1.05); }

/* ── Bloque de video (5.3) ──────────────────────────────────────────────────── */
.videobloque {
  margin: 42px 0 8px; border-radius: 14px; overflow: hidden; position: relative;
  aspect-ratio: 16/7; background: var(--grad); display: grid; place-items: center; color: #fff;
}
.videobloque video, .videobloque img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.videobloque .nota { position: relative; text-align: center; opacity: .92; }
.videobloque .nota b { display: block; font-size: 19px; margin-bottom: 4px; }
.videobloque__v { background: #000; }
/* El botón queda POR ENCIMA del video: el <video> está en absolute/inset:0, así que sin
   z-index el botón se dibuja debajo y no recibe el click. */
.videobloque__sonido {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff; font-size: 17px; line-height: 1;
  display: grid; place-items: center; backdrop-filter: blur(2px);
}
.videobloque__sonido:hover { background: rgba(0,0,0,.65); }

/* ── "Lo más vendido": carrusel en línea, no grilla (corrección 6) ──────────── */
.carrusel { position: relative; padding: 18px 0 54px; }
.carrusel__pista {
  /* 🚨 El mínimo NO puede ser 0: con `minmax(0, X)` las columnas se achican hasta
     entrar todas y en el celu quedaban 4 tarjetas de 85px, ilegibles, sin scroll.
     El mínimo es lo que fuerza el desborde y, con él, el carrusel. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 10px; scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * { scroll-snap-align: start; }
.carrusel__nav { position: absolute; top: 50%; left: -8px; right: -8px; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.carrusel__nav button { pointer-events: auto; }
@media (max-width: 1200px) { .carrusel__pista { grid-auto-columns: minmax(46%, 1fr); } }
@media (max-width: 768px)  { .carrusel__pista { grid-auto-columns: minmax(76%, 1fr); gap: 14px; } .carrusel__nav { display: none; } }

/* ── Páginas de texto (Nosotros / Contacto / Manuales) ─────────────────────── */
.pagina { padding: 46px 0 60px; }
.pagina h1 { color: var(--violeta-hondo); font-size: clamp(30px, 4vw, 46px); font-weight: 800; text-transform: uppercase; margin: 10px 0 18px; line-height: 1.05; }
.pagina h2 { color: var(--violeta-hondo); font-size: 22px; margin: 34px 0 10px; }
.pagina p { font-size: 15px; line-height: 1.7; color: #55555F; max-width: 68ch; margin: 0 0 14px; }
.pagina .volanta { color: var(--violeta-claro); }
.bloques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 26px 0 0; }
.bloque { background: #fff; border-radius: 14px; padding: 24px; box-shadow: var(--sombra); }
.bloque b { display: block; color: var(--violeta-hondo); font-size: 17px; margin-bottom: 8px; }
.bloque p { font-size: 14px; margin: 0; }
.manuales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.manual-item {
  display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--sombra); transition: transform .18s ease;
}
.manual-item:hover { transform: translateY(-2px); }
.manual-item img { width: 56px; height: 56px; object-fit: contain; background: var(--rosa-palido); border-radius: 10px; padding: 6px; flex: 0 0 auto; }
/* Son <span> dentro de un <a>: sin display:block el nombre y la categoría
   quedan pegados en el mismo renglón. */
.manual-item > span { display: block; min-width: 0; }
.manual-item .n { display: block; color: var(--violeta-hondo); font-weight: 700; font-size: 14px; line-height: 1.25; }
.manual-item .c { display: block; color: var(--violeta-claro); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin-top: 3px; }
@media (max-width: 900px) {
  .pastillas { grid-template-columns: 1fr; }
  .bloques, .manuales { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pastilla { grid-template-columns: 1fr; min-height: 0; }
  .pastilla__foto { aspect-ratio: 16/9; }
}