/* ============================================================================
   BOOST HN — Estilos por página.
   Cada bloque va rotulado con la página a la que pertenece. Agregá al final.
   ========================================================================= */

/* ===== HOME ===== */

/* ── 1. Hero ──────────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(94svh, 940px);
  padding-block: clamp(7rem, 16vh, 11rem) clamp(4.5rem, 10vh, 7rem);
  background: var(--negro);
  overflow: hidden;
}

.home-hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.06);
}

.home-hero-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* El video venía subexpuesto (mediana de luma 36/255) y este velo lo tapaba
     con 75-78% de negro. Ya corregido el metraje, el velo solo tiene que
     asegurar contraste del texto: se oscurece donde hay letras (arriba la barra
     y abajo el titular) y se abre en el medio para que se vea el gimnasio. */
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.52) 0%, rgb(0 0 0 / 0.12) 34%, rgb(0 0 0 / 0.62) 74%, rgb(0 0 0 / 0.92) 100%),
    radial-gradient(130% 90% at 12% 88%, rgb(164 35 37 / 0.34) 0%, transparent 62%);
}

.home-hero-contenido { position: relative; z-index: 2; width: 100%; min-width: 0; flex: 1 1 auto; }

.home-hero-etiqueta { color: var(--crema); }

.home-hero-titular {
  margin-top: var(--e-4);
  color: var(--blanco);
  text-shadow: 0 12px 60px rgb(0 0 0 / 0.6);
}

.home-hero-linea { display: block; }
.home-hero-linea + .home-hero-linea { margin-top: -0.06em; }

.home-hero-acento { color: var(--rojo-vivo); }

@supports (-webkit-text-stroke: 1px red) {
  .home-hero-acento {
    color: transparent;
    -webkit-text-stroke: clamp(1.5px, 0.22vw, 3px) var(--crema);
  }
}

.home-hero-bajada {
  margin-top: var(--e-5);
  max-width: 46ch;
  font-size: var(--t-md);
  color: var(--crema-suave);
}

.home-hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

.home-hero-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(1rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde-fuerte);
}

.home-dato { display: flex; flex-direction: column; gap: 2px; }

.home-dato-num {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--blanco);
}

.home-dato-txt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--texto-suave);
}

.home-hero-scroll {
  position: absolute;
  z-index: 2;
  bottom: var(--e-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--texto-suave);
  transition: color var(--normal) var(--curva);
}

.home-hero-scroll:hover { color: var(--blanco); }

.home-hero-scroll-linea {
  position: relative;
  width: 1px;
  height: 54px;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
}

.home-hero-scroll-linea::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -60%;
  height: 60%;
  background: linear-gradient(180deg, transparent, var(--rojo-vivo));
  animation: home-scroll-baja 1.9s var(--curva) infinite;
}

@keyframes home-scroll-baja {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}

/* Entrada del hero (arriba del pliegue: anima solo, sin observer) */
.home-anim {
  opacity: 0;
  animation: aparecer-abajo 0.9s var(--curva) forwards;
  animation-delay: var(--retraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .home-anim { opacity: 1; animation: none; }
  .home-hero-scroll-linea::after { animation: none; }
}

@media (max-width: 700px) {
  .home-hero { min-height: 92svh; padding-bottom: clamp(3rem, 9vh, 4.5rem); }
  .home-hero-bajada { max-width: none; }
  .home-hero-acciones .btn { flex: 1 1 100%; justify-content: center; }
  .home-hero-datos { gap: var(--e-5) var(--e-6); }
  .home-dato-num { font-size: 1.5rem; }
  .home-hero-scroll { display: none; }
}

/* ── 3. Flash sale ────────────────────────────────────────────────────────── */
.home-flash {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.6rem, 4vw, 2.8rem);
  background: linear-gradient(100deg, var(--rojo-oscuro) 0%, var(--rojo) 48%, var(--rojo-vivo) 100%);
  color: var(--blanco);
  border-block: 1px solid rgb(0 0 0 / 0.35);
}

.home-flash-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.home-flash-texto { flex: 1 1 320px; }
.home-flash-insignia { margin-bottom: var(--e-3); }
.home-flash-texto h2 { color: var(--blanco); }

.home-flash-sub {
  margin-top: var(--e-2);
  max-width: 46ch;
  font-size: var(--t-sm);
  color: rgb(255 255 255 / 0.82);
}

.home-cuenta {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1vw, 0.7rem);
}

.home-cuenta-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: clamp(58px, 8vw, 86px);
  padding: clamp(0.4rem, 1vw, 0.7rem) clamp(0.4rem, 1vw, 0.8rem);
  border-radius: var(--radio);
  background: rgb(0 0 0 / 0.34);
  border: 1px solid rgb(255 255 255 / 0.16);
  backdrop-filter: blur(6px);
}

.home-cuenta-num {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--blanco);
}

.home-cuenta-etq {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(255 255 255 / 0.72);
}

.home-cuenta-sep {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  font-weight: 800;
  color: rgb(255 255 255 / 0.5);
  animation: latido-punto 1.6s ease-in-out infinite;
}

.home-cuenta.terminada { opacity: 0.55; }

.home-flash-btn { flex-shrink: 0; }

@media (max-width: 900px) {
  .home-flash-interior { justify-content: flex-start; }
  .home-flash-btn { width: 100%; justify-content: center; }
}

/* ── 4. Categorías ────────────────────────────────────────────────────────── */
.home-cats {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.home-cat-todo {
  background:
    radial-gradient(120% 120% at 20% 100%, rgb(164 35 37 / 0.55) 0%, transparent 65%),
    var(--carbon);
  border-color: rgb(212 45 48 / 0.35);
}

.home-cat-todo::before { background: none; }
.home-cat-todo h3 { color: var(--crema); }

@media (max-width: 1100px) { .home-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .home-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .home-cats { grid-template-columns: 1fr; } }

/* ── 6. Colecciones ───────────────────────────────────────────────────────── */
.home-cols { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }

.home-col {
  --acento: var(--rojo);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background:
    linear-gradient(100deg, rgb(255 255 255 / 0.03), transparent 60%),
    var(--superficie);
  transition: border-color var(--normal) var(--curva), transform var(--normal) var(--curva);
}

.home-col::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 4px;
  background: var(--acento);
  z-index: 3;
}

.home-col:hover {
  transform: translateY(-4px);
  border-color: var(--acento);
}

.home-col-figura { position: relative; overflow: hidden; min-height: 260px; }

.home-col-figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}

.home-col:hover .home-col-figura img { transform: scale(1.06); }

.home-col-figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.35) 0%, transparent 45%, var(--superficie) 98%);
}

.home-col-num {
  position: absolute;
  z-index: 2;
  top: var(--e-4);
  left: var(--e-4);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acento);
}

.home-col-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.home-col-conteo {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--acento);
}

.home-col-titulo {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--blanco);
}

.home-col-desc { color: var(--texto-suave); font-size: var(--t-sm); max-width: 52ch; }

.home-col-mini { display: flex; gap: var(--e-2); flex-wrap: wrap; }

.home-col-mini img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  padding: 6px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: linear-gradient(160deg, var(--pizarra), var(--carbon));
  transition: border-color var(--rapido), transform var(--rapido) var(--curva);
}

.home-col-mini a:hover img { border-color: var(--acento); transform: translateY(-3px); }

.home-col-btn { margin-top: var(--e-2); }

@media (max-width: 860px) {
  .home-col { grid-template-columns: 1fr; }
  .home-col-figura { min-height: 220px; }
  .home-col-figura::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, transparent 40%, var(--superficie) 99%);
  }
}

/* ── 7. Banner partido ────────────────────────────────────────────────────── */
.home-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--carbon);
  border-block: 1px solid var(--borde);
}

.home-banner-figura { position: relative; overflow: hidden; min-height: 100%; }

.home-banner-figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.45) contrast(1.04) saturate(1.05);
}

.home-banner-figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.05) 45%, rgb(10 10 11 / 0.85) 100%);
}

.home-banner-cuerpo {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5rem);
}

.home-banner-texto { position: relative; z-index: 2; max-width: 56ch; }
.home-banner-texto h2 { margin-top: var(--e-4); color: var(--blanco); }
.home-banner-texto .subtitulo { margin-top: var(--e-4); }

.home-garantias {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-block: clamp(1.75rem, 4vw, 2.75rem);
}

.home-garantia {
  display: flex;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
}

.home-garantia:last-child { border-bottom: 0; padding-bottom: 0; }

.home-garantia-num {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--rojo-vivo);
}

.home-garantia h3 {
  font-size: 1.25rem;
  font-style: italic;
  text-transform: uppercase;
  color: var(--crema);
}

.home-garantia p { margin-top: 4px; font-size: var(--t-sm); color: var(--texto-suave); }

@media (max-width: 900px) {
  .home-banner { grid-template-columns: 1fr; }
  .home-banner-figura { min-height: 320px; }
  .home-banner-figura::after {
    background: linear-gradient(180deg, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.05) 45%, rgb(10 10 11 / 0.95));
  }
}

/* ── 8. Pestañas ──────────────────────────────────────────────────────────── */
.home-pestanas {
  display: flex;
  gap: var(--e-2);
  padding: 5px;
  border: 1px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie);
}

.home-pestana {
  padding: 0.55rem 1.35rem;
  border-radius: 99px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  white-space: nowrap;
  transition: background var(--normal) var(--curva), color var(--normal);
}

.home-pestana:hover { color: var(--blanco); }
.home-pestana.activo { background: var(--rojo); color: var(--blanco); }

.home-panel { display: none; }
.home-panel.activo { display: block; animation: aparecer 0.45s var(--curva); }

@media (max-width: 560px) {
  .home-pestanas { width: 100%; }
  .home-pestana { flex: 1; text-align: center; padding-inline: 0.5rem; }
}

/* ── 9. Combos ────────────────────────────────────────────────────────────── */
.home-combos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.home-combo {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  transition: border-color var(--normal), transform var(--normal) var(--curva);
}

.home-combo:hover { transform: translateY(-4px); border-color: rgb(212 45 48 / 0.5); }

.home-combo-figura { position: relative; overflow: hidden; min-height: 240px; background: var(--negro); }

.home-combo-figura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}

.home-combo:hover .home-combo-figura img { transform: scale(1.07); }

.home-combo-etq { position: absolute; top: var(--e-3); left: var(--e-3); z-index: 2; }

.home-combo-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: clamp(1.25rem, 2.4vw, 2rem);
}

.home-combo-titulo { font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--blanco); }
.home-combo-desc { font-size: var(--t-sm); color: var(--texto-suave); }

.home-combo-items { display: flex; flex-direction: column; gap: var(--e-2); }

.home-combo-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: rgb(0 0 0 / 0.35);
}

.home-combo-item img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  padding: 4px;
  border-radius: var(--radio-sm);
  background: linear-gradient(160deg, var(--pizarra), var(--carbon));
  flex-shrink: 0;
}

.home-combo-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.home-combo-item-txt a {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--rapido);
}

.home-combo-item-txt a:hover { color: var(--rojo-vivo); }

.home-combo-item-txt span {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.home-combo-add { width: 30px; height: 30px; flex-shrink: 0; }

.home-combo-pie {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}

.home-combo-btn { justify-content: center; }

.home-combo-precios { display: flex; flex-direction: column; }

.home-combo-antes {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  text-decoration: line-through;
}

.home-combo-precio {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  color: var(--blanco);
}

.home-combo-ahorro {
  margin-top: 4px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stock);
}

@media (max-width: 1080px) {
  .home-combos { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .home-combo { grid-template-columns: 1fr; }
  .home-combo-figura { min-height: 200px; }
}

/* ── 10. Marcas ───────────────────────────────────────────────────────────── */
.home-marcas .marquesina + .marquesina { border-top: 0; }
.home-marcas .seccion-encabezado { margin-bottom: var(--e-6); }

/* ── 11. Blog ─────────────────────────────────────────────────────────────── */
.home-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  transition: border-color var(--normal), transform var(--normal) var(--curva);
}

.home-post:hover { transform: translateY(-5px); border-color: rgb(212 45 48 / 0.5); }

.home-post-figura { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

.home-post-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}

.home-post:hover .home-post-figura img { transform: scale(1.06); }

.home-post-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.home-post-meta {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.home-post-titulo {
  font-family: var(--display);
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1;
}

.home-post-titulo a { transition: color var(--rapido); }
.home-post-titulo a:hover { color: var(--rojo-vivo); }

.home-post-bajada { font-size: var(--t-sm); color: var(--texto-suave); }

.home-post-fecha {
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--texto-tenue);
}

/* ── 12. Boletín ──────────────────────────────────────────────────────────── */
.home-boletin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background:
    radial-gradient(90% 130% at 85% 20%, rgb(164 35 37 / 0.45) 0%, transparent 60%),
    var(--carbon);
  border-top: 1px solid var(--borde);
}

.home-boletin-interior {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
}

.home-boletin h2 { margin-top: var(--e-4); color: var(--blanco); }
.home-boletin .subtitulo { margin-top: var(--e-4); }
.home-boletin-form .campo-ayuda { margin-top: var(--e-3); }

.home-enlace-tenue {
  color: var(--crema);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(232 213 199 / 0.45);
  transition: color var(--rapido), text-decoration-color var(--rapido);
}

.home-enlace-tenue:hover { color: var(--blanco); text-decoration-color: var(--rojo-vivo); }
.home-boletin-form .boletin-form { max-width: 100%; }

@media (max-width: 860px) {
  .home-boletin-interior { grid-template-columns: 1fr; }
}

/* ============================================================================
   CUENTA — entrar, crear cuenta y "mis pedidos"
   ========================================================================= */

.cuenta-caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.cuenta-pestanas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--borde);
}

.cuenta-pestana {
  padding: 1rem 0.75rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--texto-tenue);
  background: rgb(255 255 255 / 0.02);
  border-bottom: 2px solid transparent;
  transition: color var(--rapido), background var(--rapido), border-color var(--rapido);
}

.cuenta-pestana:hover { color: var(--texto); }

.cuenta-pestana.activa {
  color: var(--blanco);
  background: transparent;
  border-bottom-color: var(--rojo-vivo);
}

.cuenta-form {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.cuenta-form .campo-ayuda.centrado { text-align: center; }

.cuenta-datos {
  display: grid;
  gap: var(--e-3);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.cuenta-datos > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}

.cuenta-datos > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cuenta-datos dt { color: var(--texto-tenue); font-size: var(--t-sm); }
.cuenta-datos dd { font-weight: 600; text-align: right; word-break: break-word; }

.cuenta-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
}

.cuenta-beneficios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-6);
}

.cuenta-beneficios li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: rgb(255 255 255 / 0.02);
}

.cuenta-beneficios strong {
  font-family: var(--display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}

.cuenta-beneficios span { color: var(--texto-tenue); font-size: var(--t-sm); }

/* ── Mis pedidos ──────────────────────────────────────────────────────────── */
.mis-resumen { margin-bottom: var(--e-6); }

.mis-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
}

.mis-tarjeta span {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.mis-tarjeta strong {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1;
}

.mis-pedidos { display: grid; gap: var(--e-4); }

.mis-pedido {
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  overflow: hidden;
  transition: border-color var(--normal);
}

.mis-pedido:hover { border-color: var(--borde-fuerte); }

.mis-pedido-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--borde);
}

.mis-pedido-ref {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-lg);
  line-height: 1;
}

.mis-pedido-fecha { font-size: var(--t-sm); color: var(--texto-tenue); }

.mis-pedido-items {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--e-4) var(--e-5) 0;
}

.mis-pedido-items img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
}

.mis-pedido-mas {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radio-sm);
  border: 1px dashed var(--borde-fuerte);
  color: var(--texto-tenue);
  font-size: var(--t-sm);
}

.mis-pedido-lista {
  display: grid;
  gap: 6px;
  padding: var(--e-4) var(--e-5);
  font-size: var(--t-sm);
}

.mis-pedido-lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  color: var(--texto-suave);
}

.mis-pedido-lista em { font-style: normal; color: var(--texto-tenue); }
.mis-pedido-lista strong { white-space: nowrap; }

.mis-pedido-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--borde);
  background: rgb(255 255 255 / 0.02);
}

.mis-pedido-total { display: flex; align-items: baseline; gap: var(--e-3); }
.mis-pedido-total span { color: var(--texto-tenue); font-size: var(--t-sm); }

.mis-pedido-total strong {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--t-lg);
}

@media (max-width: 760px) {
  .cuenta-beneficios { grid-template-columns: 1fr; }
  .cuenta-acciones .btn { width: 100%; }
  .mis-pedido-pie { flex-direction: column; align-items: stretch; }
  .mis-pedido-pie .flex { justify-content: stretch; }
  .mis-pedido-pie .btn { flex: 1; }
}

/* ===== TIENDA ===== */
/* Catálogo con filtros, ficha de producto, colecciones y combos.
   Móvil primero en los breakpoints ya definidos (1200 / 980 / 700). */

/* ── Encabezado de listado ────────────────────────────────────────────────── */
.catalogo-hero {
  position: relative;
  padding-block: var(--e-4) var(--e-6);
  overflow: hidden;
  isolation: isolate;
}

.catalogo-hero.con-imagen {
  padding-block: var(--e-4) var(--e-8);
  border-bottom: 1px solid var(--borde);
}

.catalogo-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.catalogo-hero.con-imagen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.75) 55%, var(--negro) 100%);
}

.catalogo-hero-titulo { margin-block: var(--e-3) var(--e-4); }
.catalogo-hero .subtitulo { max-width: 68ch; }

/* ── Estructura del catálogo ──────────────────────────────────────────────── */
.catalogo-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  align-items: start;
}

.filtros-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.filtros-boton { display: none; }

.filtros {
  position: sticky;
  top: calc(var(--header-alto) + 1rem);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
}

.filtros-form { display: flex; flex-direction: column; gap: var(--e-5); }

.filtros-bloque { display: flex; flex-direction: column; gap: var(--e-3); }

.filtros-bloque + .filtros-bloque { border-top: 1px solid var(--borde); padding-top: var(--e-5); }

.filtros-titulo {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blanco);
}

.filtros-precio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--e-2);
}

.filtros-precio .campo label { font-size: 0.75rem; letter-spacing: 0.12em; }
.filtros-precio input { padding-inline: 0.7rem; }

.filtros-guion { padding-bottom: 0.8rem; color: var(--texto-tenue); }

.filtros-acciones {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  border-top: 1px solid var(--borde);
  padding-top: var(--e-5);
}

/* ── Barra superior del listado ───────────────────────────────────────────── */
.catalogo-cuerpo { min-width: 0; }

.catalogo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e-5);
}

.catalogo-conteo { font-size: var(--t-sm); color: var(--texto-suave); }
.catalogo-conteo strong { color: var(--blanco); font-family: var(--display); font-size: 1.0625rem; }

.catalogo-orden {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.catalogo-orden label {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.catalogo-orden select {
  width: auto;
  min-width: 210px;
  padding-block: 0.55rem;
  appearance: none;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23b4b4bd' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto);
  padding-right: 2.4rem;
  padding-left: 0.9rem;
}

.catalogo-orden select:focus { outline: none; border-color: var(--rojo-vivo); }

/* ── Chips de filtros activos ─────────────────────────────────────────────── */
.catalogo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}

.catalogo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 5px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  font-size: var(--t-xs);
  color: var(--texto-suave);
  background: var(--superficie);
  transition: border-color var(--rapido), color var(--rapido), background-color var(--rapido);
}

.catalogo-chip:hover {
  border-color: var(--rojo-vivo);
  background: rgb(212 45 48 / 0.12);
  color: var(--blanco);
}

.catalogo-chip svg { opacity: 0.7; }
.catalogo-chip:hover svg { opacity: 1; }

/* ── Ficha de producto ────────────────────────────────────────────────────── */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: var(--e-7);
}

.ficha-galeria {
  position: sticky;
  top: calc(var(--header-alto) + 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.ficha-imagen {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: linear-gradient(160deg, var(--pizarra), var(--carbon));
}

.ficha-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(1rem, 3vw, 2.5rem);
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform 0.5s var(--curva);
}

@media (hover: hover) {
  .ficha-imagen:hover img { transform: scale(1.75); }
}

.ficha-etiquetas {
  position: absolute;
  top: var(--e-4);
  left: var(--e-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
}

.ficha-minis {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.ficha-mini {
  width: 74px;
  height: 74px;
  padding: 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  overflow: hidden;
  transition: border-color var(--rapido), transform var(--rapido);
}

.ficha-mini img { width: 100%; height: 100%; object-fit: contain; }
.ficha-mini:hover { transform: translateY(-3px); border-color: var(--borde-fuerte); }
.ficha-mini.activa { border-color: var(--rojo-vivo); box-shadow: 0 0 0 1px var(--rojo-vivo) inset; }

/* Columna de datos */
.ficha-info { display: flex; flex-direction: column; gap: var(--e-4); }

.ficha-marca {
  align-self: flex-start;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rojo-vivo);
  transition: color var(--rapido);
}
.ficha-marca:hover { color: var(--crema); }

.ficha-titulo {
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  color: var(--blanco);
}

.ficha-resumen { color: var(--texto-suave); max-width: 60ch; }

.ficha-precios {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-3);
}

.ficha-precio {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: var(--blanco);
}

.ficha-antes {
  font-size: var(--t-md);
  color: var(--texto-tenue);
  text-decoration: line-through;
}

.ficha-impuesto { font-size: var(--t-xs); color: var(--texto-tenue); margin-top: -0.6rem; }

.ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  padding-block: var(--e-3);
  border-block: 1px solid var(--borde);
}

.ficha-datos li { display: flex; flex-direction: column; gap: 2px; }

.ficha-datos span {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
}

.ficha-datos strong { font-size: var(--t-sm); color: var(--texto); }

/* Estado de stock */
.ficha-stock {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 500;
}

.ficha-stock .punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.ficha-stock.hay { color: var(--stock); }
.ficha-stock.hay .punto { animation: latido-punto 1.8s ease-in-out infinite; }
.ficha-stock.poco { color: var(--poco-stock); }
.ficha-stock.sin { color: var(--sin-stock); }

/* Compra */
.ficha-compra { display: flex; flex-direction: column; gap: var(--e-3); }

.ficha-variante select { max-width: 340px; }

.ficha-acciones {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.ficha-cant {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  overflow: hidden;
  flex-shrink: 0;
}

.ficha-cant-btn {
  width: 46px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--texto-suave);
  transition: background-color var(--rapido), color var(--rapido);
}

.ficha-cant-btn:hover { background: var(--humo); color: var(--blanco); }

.ficha-cant input {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blanco);
  appearance: textfield;
  -moz-appearance: textfield;
}

.ficha-cant input::-webkit-outer-spin-button,
.ficha-cant input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.ficha-cant input:focus { outline: none; }

.ficha-add { flex: 1 1 220px; }
.ficha-comprar { margin-top: -0.25rem; }

/* Garantías */
.ficha-garantias {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.ficha-garantias li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.ficha-garantias svg { color: var(--rojo-vivo); flex-shrink: 0; margin-top: 2px; }
.ficha-garantias strong { display: block; color: var(--blanco); font-size: var(--t-base); }

/* Descripción y acordeón */
.ficha-detalle {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-top: var(--e-6);
  border-top: 1px solid var(--borde);
}

.ficha-descripcion h2 { margin-block: var(--e-3) var(--e-4); }

.ficha-prosa { color: var(--texto-suave); line-height: 1.85; }
.ficha-prosa p + p { margin-top: var(--e-4); }
.ficha-prosa strong { color: var(--texto); }

.ficha-plegables { display: flex; flex-direction: column; }

.ficha-plegable { border-bottom: 1px solid var(--borde); }
.ficha-plegable:first-child { border-top: 1px solid var(--borde); }

.ficha-plegable summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto);
  transition: color var(--rapido);
}

.ficha-plegable summary::-webkit-details-marker { display: none; }
.ficha-plegable summary:hover { color: var(--blanco); }
.ficha-plegable summary svg { color: var(--rojo-vivo); flex-shrink: 0; transition: transform var(--normal) var(--curva); }
.ficha-plegable[open] summary svg { transform: rotate(135deg); }

.ficha-plegable-cuerpo {
  padding-bottom: var(--e-5);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  animation: aparecer 0.35s var(--curva);
}

.ficha-puntos { display: flex; flex-direction: column; gap: var(--e-2); }

.ficha-puntos li {
  position: relative;
  padding-left: var(--e-4);
}

.ficha-puntos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rojo-vivo);
}

/* ── Colecciones ──────────────────────────────────────────────────────────── */
.colecciones-grid { gap: clamp(1rem, 2vw, 1.75rem); }

.card-col { border-color: color-mix(in srgb, var(--acento, var(--rojo)) 35%, transparent); }
.card-col:hover { border-color: var(--acento, var(--rojo-vivo)); }
.card-col:hover::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acento, var(--rojo)) 25%, transparent) 0%,
    rgb(0 0 0 / 0.65) 45%,
    rgb(0 0 0 / 0.95) 100%);
}
.card-col .card-cat-flecha { color: var(--acento, var(--crema)); }
.card-col-destacada { margin-bottom: var(--e-2); }

.colecciones-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  padding-top: var(--e-6);
}

.colecciones-cta > div:first-child { max-width: 58ch; }
.colecciones-cta .subtitulo { margin-top: var(--e-3); }

.coleccion-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--e-4) clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--borde);
}

.coleccion-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.coleccion-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 120% at 8% 0%, color-mix(in srgb, var(--acento, var(--rojo)) 40%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.8) 60%, var(--negro) 100%);
}

.coleccion-hero-interior { position: relative; z-index: 1; }

.coleccion-titulo { margin-block: var(--e-3) var(--e-4); color: var(--blanco); }
.coleccion-bajada { max-width: 62ch; }

.coleccion-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}

/* ── Combos ───────────────────────────────────────────────────────────────── */
.combos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.combo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--superficie);
  transition: transform var(--normal) var(--curva), border-color var(--normal);
}

.combo-card:hover { transform: translateY(-5px); border-color: rgb(212 45 48 / 0.55); }

.combo-card-figura {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--negro);
}

.combo-card-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform var(--lento) var(--curva), opacity var(--normal);
}

.combo-card:hover .combo-card-figura img { transform: scale(1.06); opacity: 1; }

.combo-card-pct { position: absolute; top: var(--e-3); left: var(--e-3); z-index: 2; }
.combo-card-top { position: absolute; top: var(--e-3); right: var(--e-3); z-index: 2; }

.combo-card-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  flex: 1;
}

.combo-card-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 0.98;
  color: var(--blanco);
}

.combo-card-titulo a { transition: color var(--rapido); }
.combo-card-titulo a:hover { color: var(--rojo-vivo); }

.combo-card-texto { font-size: var(--t-sm); color: var(--texto-suave); }

.combo-lista { display: flex; flex-direction: column; gap: var(--e-2); }

.combo-lista li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--carbon);
}

.combo-lista img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--negro);
  border-radius: var(--radio-sm);
  flex-shrink: 0;
}

.combo-lista span { display: flex; flex-direction: column; min-width: 0; }

.combo-lista strong {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-lista em {
  font-style: normal;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
}

.combo-card-pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}

.combo-precios { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2); }

.combo-precio {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: var(--blanco);
}

.combo-antes { font-size: var(--t-sm); color: var(--texto-tenue); text-decoration: line-through; }

.combo-ahorro {
  width: 100%;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--stock);
}

.combo-piezas {
  font-family: var(--display);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.combo-card-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.combo-card-acciones form { display: contents; }

/* Detalle del combo */
.combo-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: var(--e-7);
}

.combo-ficha-figura {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--negro);
}

.combo-ficha-figura > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 0.9;
}

.combo-ficha-pct { position: absolute; top: var(--e-4); left: var(--e-4); }

.combo-ficha-tiras {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3);
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.85));
}

.combo-ficha-tiras img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 4px;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}

.combo-ficha-info { display: flex; flex-direction: column; gap: var(--e-4); }
.combo-ficha-texto { font-size: var(--t-sm); }

.combo-ahorro-grande {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin-top: -0.6rem;
}

.combo-ahorro-grande strong {
  font-family: var(--display);
  font-size: var(--t-md);
  font-style: italic;
  text-transform: uppercase;
  color: var(--stock);
}

.combo-desglose {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie);
}

.combo-desglose > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  border-bottom: 1px solid var(--borde);
}

.combo-desglose > li:last-child { border-bottom: 0; }

.combo-desglose img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--negro);
  border-radius: var(--radio-sm);
}

.combo-desglose-txt { display: flex; flex-direction: column; min-width: 0; }

.combo-desglose-txt a {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--rapido);
}

.combo-desglose-txt a:hover { color: var(--rojo-vivo); }

.combo-desglose-txt em {
  font-style: normal;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
}

.combo-desglose-cant {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--texto-tenue);
}

.combo-desglose-precio {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
}

.combo-desglose-total {
  grid-template-columns: minmax(0, 1fr) auto !important;
  background: var(--carbon);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.combo-desglose-total strong {
  font-family: var(--display);
  font-size: var(--t-md);
  color: var(--texto);
  text-decoration: line-through;
  text-decoration-color: var(--rojo-vivo);
}

.combo-desglose-total.destacado { background: rgb(212 45 48 / 0.12); color: var(--blanco); }
.combo-desglose-total.destacado strong {
  font-size: var(--t-lg);
  font-style: italic;
  color: var(--blanco);
  text-decoration: none;
}

.combo-ficha-form { display: flex; flex-direction: column; gap: var(--e-2); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .catalogo-layout { grid-template-columns: 240px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .catalogo-layout { grid-template-columns: minmax(0, 1fr); }

  .filtros-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    background: var(--superficie);
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--texto);
    cursor: pointer;
    transition: border-color var(--rapido), color var(--rapido);
  }

  .filtros-boton:hover { border-color: var(--rojo-vivo); color: var(--blanco); }
  .filtros-check:focus-visible + .filtros-boton { outline: 2px solid var(--rojo-vivo); outline-offset: 3px; }
  .filtros-check:checked + .filtros-boton { border-color: var(--rojo-vivo); color: var(--blanco); }
  .filtros-check:checked + .filtros-boton svg { transform: rotate(180deg); }
  .filtros-boton svg { transition: transform var(--normal) var(--curva); }

  .filtros { display: none; position: static; }
  .filtros-check:checked ~ .filtros { display: block; animation: aparecer 0.3s var(--curva); }

  .ficha,
  .ficha-detalle,
  .combo-ficha { grid-template-columns: minmax(0, 1fr); }

  .ficha-galeria { position: static; }
}

@media (max-width: 700px) {
  .catalogo-barra { align-items: stretch; flex-direction: column; gap: var(--e-3); }
  .catalogo-orden { justify-content: space-between; }
  .catalogo-orden select { flex: 1; min-width: 0; }

  .ficha-acciones { flex-direction: column; align-items: stretch; }
  .ficha-cant { align-self: flex-start; }
  .ficha-add { width: 100%; }

  .combos-grid { grid-template-columns: minmax(0, 1fr); }

  .combo-desglose > li { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .combo-desglose img { width: 44px; height: 44px; }
  .combo-desglose-precio { grid-column: 2 / -1; }

  .ficha-minis { gap: 6px; }
  .ficha-mini { width: 60px; height: 60px; }
}

/* ============================================================================
   ===== ASISTENTE =====
   Buscador instantáneo del encabezado + widget "Coach Boost".
   (El JS de ambos vive en public/assets/js/asistente.js)
   ========================================================================= */

/* ── Resultados del buscador ──────────────────────────────────────────────── */

.buscador-grupo + .buscador-grupo { margin-top: var(--e-4); }

.buscador-grupo-titulo {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
  margin-bottom: var(--e-2);
  padding-left: var(--e-3);
}

.buscador-resultado {
  border: 1px solid transparent;
  cursor: pointer;
}
.buscador-resultado.marcado { border-color: var(--borde-fuerte); }

.buscador-resultado-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.buscador-resultado-marca {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  line-height: 1.3;
}

.buscador-resultado-titulo {
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.buscador-resultado-precio {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.buscador-resultado-precio s {
  font-family: var(--cuerpo);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--texto-tenue);
}
.buscador-resultado-precio em {
  font-family: var(--cuerpo);
  font-size: 0.66rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sin-stock);
}

.buscador-atajos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding: 0 var(--e-3);
}

.buscador-atajo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: var(--t-sm);
  transition: border-color var(--rapido), background-color var(--rapido), transform var(--rapido);
}
.buscador-atajo em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--texto-tenue);
}
.buscador-atajo:hover,
.buscador-atajo.marcado {
  border-color: var(--rojo-vivo);
  background: rgb(212 45 48 / 0.12);
  transform: translateY(-1px);
}

.buscador-todos {
  display: block;
  margin-top: var(--e-4);
  padding: var(--e-3);
  text-align: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
  transition: border-color var(--rapido), color var(--rapido), background-color var(--rapido);
}
.buscador-todos:hover,
.buscador-todos.marcado {
  border-color: var(--rojo-vivo);
  background: rgb(212 45 48 / 0.1);
  color: var(--blanco);
}

.buscador-vacio {
  padding: var(--e-5) var(--e-3);
  color: var(--texto-suave);
}
.buscador-vacio strong { color: var(--blanco); }

/* ── Coach Boost: contenedor y burbuja ────────────────────────────────────── */

.coach {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 2rem);
  bottom: clamp(0.9rem, 2.5vw, 2rem);
  z-index: var(--z-chat);
  font-family: var(--cuerpo);
}

.coach-burbuja {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--blanco);
  background: linear-gradient(145deg, var(--rojo-vivo), var(--rojo-oscuro));
  border: 1px solid rgb(255 255 255 / 0.16);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.55), var(--brillo-rojo);
  transition: transform var(--normal) var(--rebote), box-shadow var(--normal);
}
.coach-burbuja:hover { transform: translateY(-3px) scale(1.05); }
.coach-burbuja:active { transform: translateY(-1px) scale(0.98); }

.coach-burbuja::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgb(212 45 48 / 0.5);
  opacity: 0;
  animation: coach-onda 3.4s var(--curva) infinite;
  pointer-events: none;
}
.coach-activo .coach-burbuja::before { animation: none; }

.coach-burbuja-icono,
.coach-burbuja-cerrar {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva);
}
.coach-burbuja-cerrar { opacity: 0; transform: rotate(-90deg) scale(0.6); }

.coach-activo .coach-burbuja-icono { opacity: 0; transform: rotate(90deg) scale(0.6); }
.coach-activo .coach-burbuja-cerrar { opacity: 1; transform: none; }

.coach-punto {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--crema);
  color: var(--negro);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
  animation: coach-salto 2.6s var(--curva) infinite;
}
.coach-punto[hidden] { display: none; }

/* ── Aviso proactivo ──────────────────────────────────────────────────────── */

.coach-globo {
  position: absolute;
  right: 2px;
  bottom: calc(100% + 14px);
  width: min(255px, 68vw);
  padding: 0.8rem 2.1rem 0.8rem 0.95rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie-2);
  box-shadow: var(--sombra-lg);
  cursor: pointer;
  animation: coach-globo-in 0.55s var(--rebote) both;
}
.coach-globo[hidden] { display: none; }

.coach-globo::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--superficie-2);
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  transform: rotate(45deg);
}

.coach-globo-texto {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--texto);
}

.coach-globo-cerrar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--texto-tenue);
  transition: color var(--rapido), background-color var(--rapido);
}
.coach-globo-cerrar:hover { color: var(--blanco); background: rgb(255 255 255 / 0.08); }

/* ── Panel del chat ───────────────────────────────────────────────────────── */

.coach-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: min(380px, calc(100vw - 1.8rem));
  height: min(560px, calc(100dvh - 7.5rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--carbon), var(--negro));
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  box-shadow: 0 32px 80px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(0 0 0 / 0.6);
  transform-origin: 100% 100%;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva);
}
.coach-panel[hidden] { display: none; }
.coach-panel.abierto { opacity: 1; transform: none; }

.coach-cabecera {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--borde);
  background: rgb(255 255 255 / 0.025);
  flex-shrink: 0;
}

.coach-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blanco);
  background: linear-gradient(140deg, var(--rojo-vivo), var(--rojo-oscuro));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18);
}

.coach-identidad {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.coach-nombre {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--blanco);
}

.coach-estado {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  line-height: 1.3;
}

.coach-luz {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stock);
  flex-shrink: 0;
  animation: coach-latido 2.6s ease-in-out infinite;
}

.coach-accion {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--texto-tenue);
  transition: color var(--rapido), background-color var(--rapido);
}
.coach-accion:hover { color: var(--blanco); background: rgb(255 255 255 / 0.08); }

/* ── Hilo de mensajes ─────────────────────────────────────────────────────── */

.coach-hilo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: thin;
}
.coach-hilo:focus-visible { outline-offset: -3px; }

.coach-msg {
  max-width: 86%;
  padding: 0.58rem 0.85rem;
  border-radius: 15px;
  font-size: var(--t-sm);
  line-height: 1.55;
  animation: coach-msg-in 0.34s var(--curva) both;
}
.coach-msg.sin-animar { animation: none; }

.coach-msg-coach {
  align-self: flex-start;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 5px;
  color: var(--texto);
}

.coach-msg-yo {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--rojo-vivo), var(--rojo-oscuro));
  border-bottom-right-radius: 5px;
  color: var(--blanco);
  font-weight: 500;
}

.coach-escribiendo {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.72rem 0.9rem;
  max-width: none;
  width: fit-content;
}
.coach-escribiendo span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--texto-tenue);
  animation: coach-puntos 1.15s ease-in-out infinite;
}
.coach-escribiendo span:nth-child(2) { animation-delay: 0.16s; }
.coach-escribiendo span:nth-child(3) { animation-delay: 0.32s; }

/* ── Fichas de producto dentro del chat ───────────────────────────────────── */

.coach-fichas {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: coach-msg-in 0.36s var(--curva) both;
}
.coach-fichas.sin-animar { animation: none; }

.coach-ficha {
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--superficie);
  overflow: hidden;
  transition: border-color var(--rapido), transform var(--rapido);
}
.coach-ficha:hover { border-color: var(--borde-fuerte); transform: translateY(-1px); }

.coach-prod {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.6rem;
}

.coach-prod-figura {
  position: relative;
  display: block;
  border-radius: 10px;
  background: var(--pizarra);
  padding: 5px;
}
.coach-prod-figura img {
  width: 100%;
  height: 52px;
  object-fit: contain;
}

.coach-prod-etiqueta {
  position: absolute;
  top: -6px;
  left: -5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--rojo-vivo);
  color: var(--blanco);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.coach-prod-cuerpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.coach-prod-marca {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  line-height: 1.3;
}

.coach-prod-titulo {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color var(--rapido);
}
.coach-prod-titulo:hover { color: var(--crema); }

.coach-prod-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.coach-prod-precio {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blanco);
  white-space: nowrap;
}
.coach-prod-precio s {
  font-family: var(--cuerpo);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--texto-tenue);
}

.coach-prod-add {
  flex-shrink: 0;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: background-color var(--rapido), transform var(--rapido);
}
.coach-prod-add:hover { background: var(--rojo-vivo); transform: translateY(-1px); }

.coach-prod-agotado {
  flex-shrink: 0;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sin-stock);
}

.coach-prod-razon {
  margin: 0 0.6rem 0.6rem;
  padding: 0.45rem 0.6rem;
  border-left: 2px solid var(--rojo);
  border-radius: 0 6px 6px 0;
  background: rgb(255 255 255 / 0.03);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--texto-suave);
}

/* ── Chips de opción ──────────────────────────────────────────────────────── */

.coach-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--borde);
  max-height: 34%;
  overflow-y: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
  animation: coach-msg-in 0.3s var(--curva) both;
}
.coach-opciones:empty { display: none; }
.coach-opciones.ocupado { opacity: 0.45; pointer-events: none; }

.coach-chip {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  color: var(--texto);
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: left;
  transition: border-color var(--rapido), background-color var(--rapido),
              color var(--rapido), transform var(--rapido);
}
.coach-chip:hover {
  border-color: var(--rojo-vivo);
  background: rgb(212 45 48 / 0.16);
  color: var(--blanco);
  transform: translateY(-1px);
}
.coach-chip-enlace {
  border-color: var(--borde);
  color: var(--texto-suave);
}
.coach-chip-enlace:hover { color: var(--crema); }

/* ── Entrada de texto ─────────────────────────────────────────────────────── */

.coach-entrada {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem 0.5rem;
  border-top: 1px solid var(--borde);
  background: rgb(255 255 255 / 0.02);
  flex-shrink: 0;
}

.coach-texto {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 0.82rem;
  outline: none;
  transition: border-color var(--rapido);
}
.coach-texto::placeholder { color: var(--texto-tenue); }
.coach-texto:focus { border-color: var(--rojo-vivo); }
.coach-texto:disabled { opacity: 0.5; }

.coach-enviar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  transition: background-color var(--rapido), transform var(--rapido);
}
.coach-enviar:hover { background: var(--rojo-vivo); transform: scale(1.06); }

.coach-pie {
  padding: 0 0.9rem 0.65rem;
  font-size: 0.63rem;
  line-height: 1.45;
  text-align: center;
  color: var(--texto-tenue);
  flex-shrink: 0;
}
.coach-pie a { color: var(--texto-suave); text-decoration: underline; text-underline-offset: 2px; }
.coach-pie a:hover { color: var(--crema); }

/* ── Animaciones del asistente ────────────────────────────────────────────── */

@keyframes coach-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes coach-puntos {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

@keyframes coach-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgb(62 214 96 / 0.55); }
  70%      { box-shadow: 0 0 0 6px rgb(62 214 96 / 0); }
}

@keyframes coach-onda {
  0%       { opacity: 0.7; transform: scale(1); }
  60%,100% { opacity: 0;   transform: scale(1.35); }
}

@keyframes coach-salto {
  0%, 88%, 100% { transform: translateY(0); }
  93%           { transform: translateY(-3px); }
}

@keyframes coach-globo-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .coach { right: 0.9rem; bottom: 0.9rem; }

  .coach-burbuja { width: 54px; height: 54px; }

  .coach-panel {
    position: fixed;
    inset: auto 0.7rem calc(0.9rem + 64px) 0.7rem;
    width: auto;
    height: min(74dvh, 540px);
    border-radius: var(--radio-lg);
  }

  .coach-msg { max-width: 92%; }
  .coach-opciones { max-height: 40%; }
}

@media (max-height: 620px) {
  .coach-panel { height: calc(100dvh - 6.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .coach-panel,
  .coach-msg,
  .coach-fichas,
  .coach-opciones,
  .coach-globo { animation: none; transition: opacity var(--rapido) linear; }

  .coach-burbuja::before,
  .coach-punto,
  .coach-luz { animation: none; }

  .coach-panel { transform: none; }
  .coach-escribiendo span { animation-duration: 2.4s; }
}

/* ===== CHECKOUT ===== */
/* Carrito, checkout, 3-D Secure, confirmación y recibo.
   Todo con los tokens de base.css para que el tema claro funcione solo.       */

/* ── Carrito · cabecera ──────────────────────────────────────────────────── */
.carrito-cab {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin: var(--e-4) 0 var(--e-6);
}

.carrito-conteo {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── Carrito · barra de envío gratis ─────────────────────────────────────── */
.envio-barra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-5);
}

.envio-barra-texto {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  margin-bottom: 10px;
}

.envio-barra-texto strong { color: var(--texto); font-weight: 700; }

.envio-barra-pista {
  height: 6px;
  border-radius: 99px;
  background: var(--humo);
  overflow: hidden;
}

.envio-barra-relleno {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--rojo), var(--rojo-vivo));
  transition: width var(--lento) var(--curva);
}

.envio-barra.completa .envio-barra-relleno {
  background: linear-gradient(90deg, var(--stock), #7ef29a);
}

.envio-barra.completa .envio-barra-texto strong { color: var(--stock); }

/* ── Carrito · layout ────────────────────────────────────────────────────── */
.carrito-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: var(--e-6);
  align-items: start;
}

[data-carrito].ocupado { cursor: progress; }

.carrito-encabezado-tabla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 140px 130px 44px;
  gap: var(--e-4);
  align-items: center;
  padding: 0 var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--texto-tenue);
}

.carrito-encabezado-tabla > span:nth-child(2),
.carrito-encabezado-tabla > span:nth-child(4) { text-align: right; }
.carrito-encabezado-tabla > span:nth-child(3) { text-align: center; }

.carrito-lista { display: flex; flex-direction: column; }

/* ── Carrito · línea ─────────────────────────────────────────────────────── */
.linea-carrito {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 140px 130px 44px;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-4);
  border-bottom: 1px solid var(--borde);
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva),
              background var(--rapido);
}

.linea-carrito:hover { background: rgb(255 255 255 / 0.02); }
.linea-carrito.cargando { opacity: 0.5; pointer-events: none; }
.linea-carrito.saliendo { opacity: 0; transform: translateX(-24px); }
.linea-carrito.agotada .linea-figura img { filter: grayscale(1) brightness(0.7); }

.linea-producto {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-width: 0;
}

.linea-figura {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.linea-figura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  transition: transform var(--normal) var(--curva);
}

.linea-carrito:hover .linea-figura img { transform: scale(1.06); }

.linea-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.linea-marca {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rojo-vivo);
  font-weight: 700;
}

.linea-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-md);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--texto);
  transition: color var(--rapido);
}

.linea-titulo:hover { color: var(--rojo-vivo); }

.linea-variante,
.linea-precio-movil {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.linea-precio-movil { display: none; }

.linea-info .insignia { align-self: flex-start; margin-top: 3px; }

.linea-precio,
.linea-subtotal {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.linea-precio { color: var(--texto-suave); font-size: var(--t-sm); }

.linea-subtotal {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--t-md);
  color: var(--texto);
}

.linea-cantidad { display: flex; justify-content: center; }
.linea-acciones { display: flex; justify-content: flex-end; }

/* Selector − N + */
.selector-cant {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  background: var(--superficie);
  overflow: hidden;
}

.selector-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--texto-suave);
  transition: background var(--rapido), color var(--rapido);
}

.selector-btn:hover { background: var(--rojo); color: var(--blanco); }
.selector-btn:active { transform: scale(0.92); }

.selector-input {
  width: 42px;
  height: 34px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  -moz-appearance: textfield;
  appearance: textfield;
}

.selector-input::-webkit-outer-spin-button,
.selector-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.selector-input:focus { outline: none; }
.selector-cant:focus-within { border-color: var(--rojo-vivo); }

.linea-quitar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--texto-tenue);
  transition: background var(--rapido), color var(--rapido), transform var(--rapido);
}

.linea-quitar:hover {
  background: rgb(212 45 48 / 0.12);
  color: var(--rojo-vivo);
  transform: rotate(8deg);
}

/* ── Carrito · pie ───────────────────────────────────────────────────────── */
.carrito-pie-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-top: var(--e-5);
}

.btn-vaciar {
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--rapido);
}

.btn-vaciar:hover { color: var(--rojo-vivo); }

/* ── Panel de resumen (carrito y checkout) ───────────────────────────────── */
.pegajoso { position: sticky; top: calc(var(--header-alto) + 1.25rem); }

.resumen {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-5);
}

.resumen-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  margin-bottom: var(--e-4);
}

/* Cupón */
.cupon-caja { margin-bottom: var(--e-4); }

.cupon-form { display: flex; gap: var(--e-2); }
.cupon-form .entrada { flex: 1; min-width: 0; text-transform: uppercase; }
.cupon-form button { flex-shrink: 0; }

.cupon-activo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
}

.cupon-activo .insignia { gap: 6px; }

.cupon-quitar {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cupon-quitar:hover { color: var(--rojo-vivo); }

.cupon-msg { font-size: var(--t-xs); margin-top: 6px; }
.cupon-msg:empty { display: none; }
.cupon-msg.bien { color: var(--stock); }
.cupon-msg.mal  { color: var(--rojo-vivo); }

/* Filas de totales */
.resumen-filas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}

.resumen-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-sm);
}

.resumen-fila dt { color: var(--texto-suave); }
.resumen-fila dd { font-variant-numeric: tabular-nums; font-weight: 600; }
.resumen-fila.tenue { font-size: var(--t-xs); color: var(--texto-tenue); }
.resumen-fila.tenue dt, .resumen-fila.tenue dd { color: var(--texto-tenue); font-weight: 400; }
.resumen-fila.descuento dd { color: var(--stock); }

.resumen-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-4) 0 var(--e-5);
}

.resumen-total span {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-md);
  letter-spacing: 0.02em;
}

.resumen-total strong {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.resumen-sellos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--e-4);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.resumen-sellos li { display: flex; align-items: center; gap: var(--e-2); }
.resumen-sellos svg { color: var(--texto-suave); flex-shrink: 0; }

/* Líneas compactas del resumen (checkout, gracias) */
.resumen-lineas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: var(--e-4);
}

.resumen-linea {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: center;
}

.resumen-linea-figura {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  overflow: visible;
}

.resumen-linea-figura img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  border-radius: var(--radio-sm);
}

.resumen-linea-cant {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--rojo);
  color: var(--blanco);
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
}

.resumen-linea-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.resumen-linea-titulo {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--texto);
}

a.resumen-linea-titulo:hover { color: var(--rojo-vivo); }

.resumen-linea-var { font-size: var(--t-xs); color: var(--texto-tenue); }

.resumen-linea-precio {
  font-size: var(--t-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Checkout ────────────────────────────────────────────────────────────── */
.checkout-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  margin: var(--e-4) 0 var(--e-6);
}

.checkout-pasos {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
  flex-wrap: wrap;
}

.checkout-pasos li { display: flex; align-items: center; gap: 8px; }

.checkout-pasos span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  font-size: 0.7rem;
  font-weight: 700;
}

.checkout-pasos .activo { color: var(--texto); }
.checkout-pasos .activo span { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.checkout-pasos .hecho span { background: var(--stock); border-color: var(--stock); color: var(--negro); }

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: var(--e-6);
  align-items: start;
}

.checkout-form { display: flex; flex-direction: column; gap: var(--e-5); }

.checkout-aviso-cuenta { font-size: var(--t-sm); }

.checkout-bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-5);
}

.checkout-bloque-titulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  margin-bottom: var(--e-5);
}

.checkout-numero {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--cuerpo);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
}

.grid-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
}

.grid-campos .campo.ancho { grid-column: 1 / -1; }

.campo-opcional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-tenue);
}

.campo.valido input,
.campo.valido select { border-color: rgb(62 214 96 / 0.55); }

.campo-prefijo { display: flex; align-items: stretch; }

.campo-prefijo .prefijo {
  display: grid;
  place-items: center;
  padding-inline: var(--e-3);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-right: 0;
  border-radius: var(--radio) 0 0 var(--radio);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  white-space: nowrap;
}

.campo-prefijo input { border-radius: 0 var(--radio) var(--radio) 0; }

/* Bloque de pago */
.pago-caja {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-4);
  background: var(--fondo);
}

.pago-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  flex-wrap: wrap;
}

.pago-seguro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stock);
}

.pago-marcas { display: flex; align-items: center; gap: 6px; opacity: 0.85; }

.pago-montaje { min-height: 120px; }

.pago-esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  max-width: 380px;
  margin-inline: auto;
}

.pago-esqueleto .esqueleto { display: block; width: 100%; height: 48px; }

#pago-aviso { margin-top: var(--e-4); }

/* Botón de pagar */
.checkout-accion { display: flex; flex-direction: column; gap: var(--e-3); }

#btn-pagar { position: relative; gap: 10px; }
#btn-pagar.aprobado { background: var(--stock); border-color: var(--stock); color: var(--negro); }

.btn-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

#btn-pagar.cargando .btn-spinner { display: block; }

.checkout-legal {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

.checkout-legal a { color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; }
.checkout-legal a:hover { color: var(--texto); }

/* Resumen del checkout */
.checkout-resumen {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--e-5);
}

.resumen-toggle { display: none; }

.resumen-editar { margin-top: var(--e-4); font-size: var(--t-sm); }

/* ── Confirmación ────────────────────────────────────────────────────────── */
.gracias-cab { text-align: center; margin-bottom: var(--e-7); }

.exito-marca {
  display: inline-grid;
  place-items: center;
  color: var(--stock);
  margin-bottom: var(--e-4);
}

.exito-marca.pendiente { color: var(--poco-stock); }

.exito-circulo {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: exito-trazo 0.7s var(--curva) forwards;
}

.exito-tilde {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: exito-trazo 0.45s var(--curva) 0.55s forwards;
}

@keyframes exito-trazo { to { stroke-dashoffset: 0; } }

.gracias-cab .etiqueta { margin-bottom: var(--e-3); }
.gracias-cab h1 { margin-bottom: var(--e-4); }

.gracias-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.gracias-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4);
  padding: var(--e-5);
  border-bottom: 1px solid var(--borde);
}

.gracias-datos dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
  margin-bottom: 4px;
}

.gracias-datos dd { font-size: var(--t-sm); font-weight: 600; }
.gracias-datos .fuerte { color: var(--texto); font-size: var(--t-md); font-weight: 700; }

.mono { font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace; letter-spacing: 0.04em; }

.gracias-items { padding: var(--e-5); }

.gracias-subtitulo {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  margin-bottom: var(--e-4);
}

.gracias-items .resumen-lineas { max-height: none; }

/* Próximos pasos */
.pasos-siguientes { margin-top: var(--e-7); }

.pasos-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-5);
}

.pasos-lista li { display: flex; gap: var(--e-3); }

.pasos-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  color: var(--rojo-vivo);
}

.pasos-lista h3 { font-size: var(--t-base); font-weight: 700; margin-bottom: 2px; }
.pasos-lista p { font-size: var(--t-sm); color: var(--texto-tenue); }

.gracias-acciones {
  display: flex;
  gap: var(--e-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--e-7);
}

.gracias-ayuda {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  margin-top: var(--e-5);
}

/* ── 3-D Secure ──────────────────────────────────────────────────────────── */
.tresds-caja {
  max-width: 520px;
  margin-inline: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--sombra-lg);
}

.tresds-cab { text-align: center; margin-bottom: var(--e-5); }

.tresds-escudo {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgb(212 45 48 / 0.12);
  color: var(--rojo-vivo);
  margin-bottom: var(--e-3);
}

.tresds-rot {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--texto-tenue);
  margin-bottom: var(--e-2);
}

.tresds-titulo { font-size: var(--t-xl); margin-bottom: var(--e-3); }

.tresds-texto { font-size: var(--t-sm); color: var(--texto-suave); }

.tresds-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e-5);
}

.tresds-datos dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  margin-bottom: 3px;
}

.tresds-datos dd { font-size: var(--t-sm); font-weight: 600; }
.tresds-datos .fuerte { font-size: var(--t-md); font-weight: 700; }

.tresds-form { display: flex; flex-direction: column; gap: var(--e-4); }

.tresds-codigo {
  width: 100%;
  padding: var(--e-4);
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  color: var(--texto);
  text-align: center;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}

.tresds-codigo:focus {
  outline: none;
  border-color: var(--rojo-vivo);
  box-shadow: 0 0 0 3px rgb(212 45 48 / 0.22);
}

.campo.error .tresds-codigo { border-color: var(--error); }

.tresds-cancelar {
  text-align: center;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tresds-cancelar:hover { color: var(--texto); }

.tresds-demo {
  margin-top: var(--e-4);
  padding: var(--e-3);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  text-align: center;
}

.tresds-copiar {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-weight: 700;
  color: var(--rojo-vivo);
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tresds-pie {
  margin-top: var(--e-4);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  text-align: center;
}

/* ── Recibo ──────────────────────────────────────────────────────────────── */
.recibo-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}

.recibo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.recibo-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  padding-bottom: var(--e-4);
  border-bottom: 2px solid var(--rojo);
}

.recibo-logo { font-size: var(--t-xl); line-height: 1; display: block; }

.recibo-lema {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  margin-top: 4px;
}

.recibo-emisor {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  line-height: 1.7;
  text-align: right;
}

.recibo-titulo-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin: var(--e-5) 0 var(--e-4);
}

.recibo-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
}

.recibo-estado {
  padding: 5px 14px;
  border-radius: 99px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid currentColor;
}

.recibo-estado.pagado { color: var(--stock); }
.recibo-estado.otro { color: var(--poco-stock); }

.recibo-meta,
.recibo-partes {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--borde);
}

.recibo-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recibo-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.recibo-rot {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
  margin-bottom: 4px;
}

.recibo-val { font-size: var(--t-sm); font-weight: 600; }
.recibo-corto { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.recibo-bloque { font-size: var(--t-sm); line-height: 1.7; }
.recibo-tenue { color: var(--texto-tenue); }

.recibo-tabla-caja { overflow-x: auto; margin-top: var(--e-4); }

.recibo-tabla { min-width: 480px; font-size: var(--t-sm); }

.recibo-tabla th {
  text-align: left;
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--borde-fuerte);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
  font-weight: 600;
}

.recibo-tabla td {
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

.recibo-tabla .der { text-align: right; font-variant-numeric: tabular-nums; }
.recibo-tabla .cen { text-align: center; }

.recibo-totales {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--e-5);
  margin-left: auto;
  width: min(320px, 100%);
}

.recibo-total-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.recibo-total-fila.tenue { color: var(--texto-tenue); font-size: var(--t-xs); }

.recibo-total-fila.grande {
  margin-top: 6px;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde-fuerte);
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-md);
}

.recibo-pie {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.recibo-pie p + p { margin-top: 6px; }

/* Impresión: hoja blanca, tinta negra, sin adornos. */
@media print {
  .recibo-pagina { padding: 0; }

  .recibo {
    background: #fff;
    color: #000;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .recibo-cab { border-bottom: 2px solid #000; }
  .recibo-logo, .recibo-titulo, .recibo-total-fila.grande { color: #000; }
  .recibo-emisor, .recibo-rot, .recibo-tenue, .recibo-pie,
  .recibo-total-fila.tenue, .recibo-tabla th { color: #444; }
  .recibo-meta, .recibo-partes, .recibo-tabla td { border-color: #ccc; }
  .recibo-tabla th, .recibo-total-fila.grande { border-color: #000; }
  .recibo-estado { border-color: #000; color: #000; }
  .recibo-tabla-caja { overflow: visible; }
  .recibo-tabla { min-width: 0; }
  .recibo-pie { border-color: #ccc; }
}

/* ── Tema claro: los overlays blancos no sirven sobre fondo claro ────────── */
:root[data-tema="claro"] .linea-carrito:hover { background: rgb(20 20 26 / 0.03); }
:root[data-tema="claro"] .btn-spinner { border-color: rgb(0 0 0 / 0.25); }
:root[data-tema="claro"] .pago-caja { background: var(--superficie-2); }
:root[data-tema="claro"] .tresds-codigo { background: var(--superficie-2); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .carrito-layout,
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 940px) {
  .carrito-layout,
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }

  .pegajoso { position: static; }

  .carrito-encabezado-tabla { display: none; }

  /* La línea pasa a tarjeta apilada */
  .linea-carrito {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "producto acciones"
      "cantidad subtotal";
    gap: var(--e-3) var(--e-4);
    padding: var(--e-4) 0;
  }

  .linea-producto { grid-area: producto; }
  .linea-acciones { grid-area: acciones; align-items: flex-start; }
  .linea-cantidad { grid-area: cantidad; justify-content: flex-start; }
  .linea-subtotal { grid-area: subtotal; align-self: center; }
  .linea-precio { display: none; }
  .linea-precio-movil { display: block; margin-top: 2px; }

  .checkout-resumen { order: -1; }

  .resumen-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    width: 100%;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto);
  }

  .resumen-toggle strong { font-size: var(--t-md); }

  .resumen-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--rapido);
    margin-left: auto;
  }

  .resumen-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

  .checkout-resumen .resumen-cuerpo[hidden] { display: none; }
  .checkout-resumen .resumen-cuerpo { margin-top: var(--e-4); }
  .checkout-resumen .resumen-titulo { display: none; }

  .gracias-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos-lista { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .recibo-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .grid-campos { grid-template-columns: minmax(0, 1fr); }
  .grid-campos .campo.ancho { grid-column: auto; }

  .linea-figura { width: 68px; height: 68px; }
  .linea-titulo { font-size: var(--t-base); }

  .carrito-pie-acciones { justify-content: space-between; }

  .cupon-form { flex-direction: column; }
  .cupon-form button { width: 100%; }

  .gracias-datos,
  .recibo-meta,
  .recibo-partes,
  .tresds-datos { grid-template-columns: minmax(0, 1fr); }

  .gracias-acciones .btn { width: 100%; }

  .recibo-emisor { text-align: left; }

  .checkout-bloque { padding: var(--e-4); }
  .resumen, .checkout-resumen { padding: var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
  .exito-circulo,
  .exito-tilde { animation: none; stroke-dashoffset: 0; }
  .linea-carrito,
  .envio-barra-relleno { transition: none; }
}

/* ============================================================================
   ===== CONTENIDO =====
   Blog, artículo, lifestyle y páginas institucionales.
   ========================================================================= */

/* ── Blog: hero del destacado ─────────────────────────────────────────────── */
.blog-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 640px);
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
}

.blog-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.2s var(--curva);
}

.blog-hero:hover .blog-hero-fondo { transform: scale(1.07); }

.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.95) 12%, rgb(0 0 0 / 0.55) 55%, rgb(0 0 0 / 0.25) 100%),
    linear-gradient(100deg, rgb(0 0 0 / 0.7), transparent 65%);
}

.blog-hero-enlace { position: absolute; inset: 0; z-index: 3; }

.blog-hero-interior {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 900px;
  pointer-events: none;
}

.blog-hero-seccion {
  display: inline-block;
  margin: var(--e-3) 0 var(--e-4);
  padding: 5px 12px;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.blog-hero-titulo { color: var(--blanco); max-width: 18ch; }

.blog-hero-bajada {
  margin-top: var(--e-4);
  color: var(--crema);
  max-width: 60ch;
}

.blog-hero-meta {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.blog-hero-meta strong { color: var(--blanco); font-weight: 600; }
.blog-hero-meta .sep { opacity: 0.45; margin-inline: 6px; }

.blog-hero-btn { margin-top: var(--e-5); pointer-events: none; }

.blog-encabezado-simple { padding-top: clamp(2rem, 5vw, 3.5rem); }
.blog-encabezado-simple h1 { margin-block: var(--e-4) var(--e-3); }

/* ── Blog: filtros ────────────────────────────────────────────────────────── */
.blog-filtros-barra {
  position: sticky;
  top: var(--header-alto);
  z-index: 20;
  background: rgb(0 0 0 / 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
  padding-block: var(--e-4);
}

.blog-filtros {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.blog-chips {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 99px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--texto-suave);
  white-space: nowrap;
  transition: all var(--rapido) var(--curva);
}

.blog-chip:hover { border-color: var(--borde-fuerte); color: var(--blanco); }

.blog-chip.activo {
  background: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco);
}

.blog-chip-conteo {
  font-size: 0.6875rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.blog-buscador {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 4px 4px 4px 0.9rem;
  border: 1px solid var(--borde);
  border-radius: 99px;
  background: var(--superficie);
  min-width: min(340px, 100%);
  color: var(--texto-tenue);
}

.blog-buscador:focus-within { border-color: var(--rojo-vivo); }

.blog-buscador input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--texto);
  font-size: var(--t-sm);
}

.blog-buscador input::placeholder { color: var(--texto-tenue); }
.blog-buscador input::-webkit-search-cancel-button { filter: invert(0.6); }

/* ── Card de artículo ─────────────────────────────────────────────────────── */
.blog-grid { gap: clamp(1.1rem, 2vw, 1.8rem); }

.card-art {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: transform var(--normal) var(--curva), border-color var(--normal), box-shadow var(--normal);
}

.card-art:hover {
  transform: translateY(-6px);
  border-color: rgb(212 45 48 / 0.55);
  box-shadow: var(--sombra-lg);
}

.card-art-enlace { position: absolute; inset: 0; z-index: 2; }

.card-art-figura {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pizarra);
}

.card-art-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}

.card-art:hover .card-art-figura img { transform: scale(1.06); }

.card-art-seccion {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 4px 10px;
  background: rgb(0 0 0 / 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--crema);
}

.card-art-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  flex: 1;
}

.card-art-meta {
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card-art-meta .sep { margin-inline: 6px; opacity: 0.5; }

.card-art-titulo {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--blanco);
  text-wrap: balance;
}

.card-art:hover .card-art-titulo { color: var(--crema); }

.card-art-bajada {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.55;
}

.card-art-autor {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

.card-art-compacta { flex-direction: row; align-items: stretch; }
.card-art-compacta .card-art-figura { width: 38%; aspect-ratio: auto; flex-shrink: 0; }
.card-art-compacta .card-art-cuerpo { padding: var(--e-4); }
.card-art-compacta .card-art-titulo { font-size: 1rem; }
.card-art-compacta .card-art-seccion { display: none; }

.blog-cta-boletin {
  border-top: 1px solid var(--borde);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(164 35 37 / 0.18), transparent 60%),
    var(--carbon);
}

.blog-cta-boletin h2 { margin-block: var(--e-3); }
.blog-cta-boletin .boletin-form { margin-top: var(--e-5); justify-content: center; }

/* ── Artículo: barra de progreso ──────────────────────────────────────────── */
.lectura-progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 5);
  background: rgb(255 255 255 / 0.06);
  pointer-events: none;
}

.lectura-progreso span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--rojo), var(--rojo-vivo), var(--crema));
  will-change: transform;
}

/* ── Artículo: portada ────────────────────────────────────────────────────── */
.articulo-portada {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 58vh, 620px);
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
}

.articulo-portada-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.articulo-portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.96) 10%, rgb(0 0 0 / 0.6) 50%, rgb(0 0 0 / 0.3));
}

.articulo-portada-interior {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 950px;
}

.articulo-titulo {
  margin-block: var(--e-4) var(--e-4);
  color: var(--blanco);
  max-width: 20ch;
}

.articulo-bajada {
  font-size: var(--t-md);
  color: var(--crema);
  max-width: 62ch;
  line-height: 1.6;
}

.articulo-meta {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde-fuerte);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.articulo-meta strong { color: var(--blanco); font-weight: 600; }
.articulo-meta .sep { opacity: 0.45; }

/* ── Artículo: cuerpo ─────────────────────────────────────────────────────── */
.articulo-lienzo {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.articulo-compartir {
  position: sticky;
  top: calc(var(--header-alto) + 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}

.articulo-compartir-titulo {
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--texto-tenue);
  margin-bottom: var(--e-2);
}

.articulo-cuerpo {
  max-width: 70ch;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height: 1.78;
  color: var(--texto-suave);
}

.articulo-cuerpo > * + * { margin-top: 1.35em; }

.articulo-cuerpo h2 {
  margin-top: 2.2em;
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--blanco);
}

.articulo-cuerpo h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 0.55rem;
  background: var(--rojo);
}

.articulo-cuerpo h3 {
  margin-top: 1.9em;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 700;
  color: var(--crema);
}

.articulo-cuerpo p { text-wrap: pretty; }

.articulo-cuerpo strong { color: var(--blanco); font-weight: 600; }
.articulo-cuerpo em { color: var(--crema-suave); }

.articulo-cuerpo a {
  color: var(--crema);
  text-decoration: underline;
  text-decoration-color: rgb(212 45 48 / 0.7);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color var(--rapido);
}

.articulo-cuerpo a:hover { color: var(--blanco); text-decoration-color: var(--rojo-vivo); }

.articulo-cuerpo ul,
.articulo-cuerpo ol {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  padding-left: 1.4rem;
}

.articulo-cuerpo ul li { position: relative; list-style: none; }

.articulo-cuerpo ul li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.72em;
  width: 7px;
  height: 7px;
  background: var(--rojo-vivo);
  transform: rotate(45deg);
}

.articulo-cuerpo ol { list-style: decimal; }
.articulo-cuerpo ol li { list-style: decimal; }
.articulo-cuerpo ol li::marker {
  color: var(--rojo-vivo);
  font-family: var(--display);
  font-weight: 800;
}

.articulo-cuerpo blockquote {
  margin-block: 2em;
  padding: var(--e-5) var(--e-6);
  border-left: 4px solid var(--rojo);
  background: linear-gradient(100deg, rgb(164 35 37 / 0.12), transparent);
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.7rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
  color: var(--crema);
}

.articulo-firma {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-top: 3rem;
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
}

.articulo-firma-inicial {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 800;
  font-style: italic;
}

.articulo-firma div { display: flex; flex-direction: column; }
.articulo-firma strong { color: var(--blanco); font-size: var(--t-base); }
.articulo-firma span { font-size: var(--t-sm); color: var(--texto-tenue); }

.articulo-compartir-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-top: var(--e-6);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.articulo-cta { border-top: 1px solid var(--borde); background: var(--carbon); }
.articulo-relacionados { border-top: 1px solid var(--borde); }

@media (max-width: 900px) {
  .articulo-lienzo { grid-template-columns: minmax(0, 1fr); }

  .articulo-compartir {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: var(--e-4);
    border-bottom: 1px solid var(--borde);
  }

  .articulo-compartir-titulo { writing-mode: horizontal-tb; margin: 0 var(--e-2) 0 0; }
}

@media (max-width: 700px) {
  .blog-filtros-barra { position: static; }
  .blog-buscador { min-width: 100%; }
  .blog-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .card-art-compacta { flex-direction: column; }
  .card-art-compacta .card-art-figura { width: 100%; aspect-ratio: 16 / 10; }
  .articulo-compartir-pie { flex-direction: column; align-items: flex-start; }
}

/* ── Lifestyle ────────────────────────────────────────────────────────────── */
.life-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 76vh, 780px);
  overflow: hidden;
}

.life-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.life-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg, rgb(0 0 0 / 0.94) 18%, rgb(0 0 0 / 0.6) 58%, rgb(0 0 0 / 0.35)),
    linear-gradient(to top, rgb(0 0 0 / 0.85), transparent 45%);
}

.life-hero-interior { position: relative; max-width: 720px; }
.life-hero-interior h1 { margin-block: var(--e-4) var(--e-5); color: var(--blanco); }
.life-hero-bajada { color: var(--crema); }
.life-hero-botones { margin-top: var(--e-6); flex-wrap: wrap; }

.life-cinta { border-block: 1px solid var(--borde); }

.life-bloque { border-bottom: 1px solid var(--borde); }

.life-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.life-bloque-invertido { background: var(--carbon); }

.life-figura {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--borde);
}

.life-figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}

.life-figura:hover img { transform: scale(1.04); }

.life-figura figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: var(--e-5);
  background: linear-gradient(to top, rgb(0 0 0 / 0.9), transparent);
  font-family: var(--display);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--crema);
}

.life-texto h2 { margin-block: var(--e-3) var(--e-5); }
.life-texto p { color: var(--texto-suave); margin-bottom: var(--e-4); max-width: 58ch; }

.life-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-block: var(--e-5);
}

.life-lista li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

.life-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--rojo-vivo);
}

.life-testimonios { background: var(--carbon); border-bottom: 1px solid var(--borde); }
.life-testimonios-grid { gap: clamp(1.2rem, 2.5vw, 2rem); }

.life-testimonio {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.life-testimonio::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--rojo);
}

.life-comilla {
  display: block;
  font-family: var(--display);
  font-size: 4rem;
  font-weight: 800;
  font-style: italic;
  line-height: 0.6;
  color: rgb(212 45 48 / 0.5);
}

.life-testimonio blockquote {
  margin-top: var(--e-4);
  color: var(--texto-suave);
  line-height: 1.7;
  font-size: var(--t-base);
}

.life-testimonio figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}

.life-testimonio figcaption strong {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blanco);
}

.life-testimonio figcaption span { font-size: var(--t-xs); color: var(--texto-tenue); }

.life-galeria {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}

.life-galeria-item {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde);
  aspect-ratio: 1;
}

.life-galeria-item:first-child,
.life-galeria-item:nth-child(4) { grid-column: span 2; grid-row: span 2; }

.life-galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva), filter var(--normal);
  filter: grayscale(0.25);
}

.life-galeria-item:hover img { transform: scale(1.07); filter: none; }

.life-lecturas { border-top: 1px solid var(--borde); }

.life-cierre {
  border-top: 1px solid var(--borde);
  background:
    radial-gradient(ellipse at 50% 120%, rgb(164 35 37 / 0.28), transparent 62%),
    var(--carbon);
}

.life-cierre h2 { margin-bottom: var(--e-3); }

@media (max-width: 900px) {
  .life-split { grid-template-columns: minmax(0, 1fr); }
  .life-bloque-invertido .life-figura { order: -1; }
  .life-galeria { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  .life-galeria { grid-template-columns: repeat(2, 1fr); }
  .life-galeria-item:first-child,
  .life-galeria-item:nth-child(4) { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
}

/* ── Nosotros ─────────────────────────────────────────────────────────────── */
.nos-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 70vh, 720px);
  overflow: hidden;
}

.nos-hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.96) 12%, rgb(0 0 0 / 0.55) 55%, rgb(0 0 0 / 0.35)),
    linear-gradient(100deg, rgb(0 0 0 / 0.75), transparent 62%);
}

.nos-hero-interior {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 780px;
}

.nos-hero-interior h1 { margin-block: var(--e-4) var(--e-5); color: var(--blanco); }
.nos-hero-bajada { color: var(--crema); }

.nos-numeros-barra { border-bottom: 1px solid var(--borde); background: var(--carbon); }

.nos-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-5);
}

.nos-numero {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: var(--e-4);
  border-left: 2px solid var(--rojo);
}

.nos-numero-valor {
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.7rem + 3vw, 4rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.9;
  color: var(--blanco);
  font-variant-numeric: tabular-nums;
}

.nos-numero-etiqueta {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-tenue);
}

.nos-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.nos-texto h2 { margin-block: var(--e-3) var(--e-5); }
.nos-texto p { color: var(--texto-suave); margin-bottom: var(--e-4); max-width: 62ch; }
.nos-texto strong { color: var(--crema); }

.nos-figura {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--borde);
}

.nos-figura img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.nos-figura figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--e-5);
  background: linear-gradient(to top, rgb(0 0 0 / 0.9), transparent);
  font-size: var(--t-sm);
  color: var(--crema);
}

.nos-mision {
  border-block: 1px solid var(--borde);
  background:
    radial-gradient(ellipse at 50% 0%, rgb(164 35 37 / 0.2), transparent 65%),
    var(--carbon);
}

.nos-mision-texto {
  margin-top: var(--e-5);
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.8rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.12;
  color: var(--crema);
  text-wrap: balance;
}

.nos-linea { position: relative; display: flex; flex-direction: column; }

.nos-linea::before {
  content: "";
  position: absolute;
  left: 96px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--rojo), var(--borde) 60%, transparent);
}

.nos-hito {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: var(--e-5);
}

.nos-hito-anio {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  font-style: italic;
  color: var(--rojo-vivo);
  line-height: 1.4;
}

.nos-hito-cuerpo { position: relative; }

.nos-hito-cuerpo::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 3vw, 2.5rem) - 5px);
  top: 0.55em;
  width: 11px;
  height: 11px;
  background: var(--negro);
  border: 2px solid var(--rojo);
  border-radius: 50%;
}

.nos-hito-cuerpo h3 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  color: var(--blanco);
  margin-bottom: var(--e-2);
}

.nos-hito-cuerpo p { color: var(--texto-suave); max-width: 68ch; font-size: var(--t-sm); }

.nos-valores-seccion { border-top: 1px solid var(--borde); background: var(--carbon); }
.nos-valores { gap: clamp(1rem, 2vw, 1.5rem); }

.nos-valor {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  transition: border-color var(--normal), transform var(--normal) var(--curva);
}

.nos-valor:hover { border-color: rgb(212 45 48 / 0.5); transform: translateY(-4px); }

.nos-valor-num {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: rgb(255 255 255 / 0.12);
}

.nos-valor h3 {
  margin-block: var(--e-2) var(--e-3);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  color: var(--blanco);
}

.nos-valor p { color: var(--texto-suave); font-size: var(--t-sm); }

.nos-cta-caja {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  flex-wrap: wrap;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-xl);
  background:
    radial-gradient(ellipse at 15% 0%, rgb(164 35 37 / 0.35), transparent 60%),
    var(--grafito);
  overflow: hidden;
}

.nos-cta-caja h2 { margin-block: var(--e-3); }
.nos-cta-caja > div:first-child { max-width: 46ch; }
.nos-cta-botones { flex-wrap: wrap; }

@media (max-width: 900px) {
  .nos-numeros { grid-template-columns: repeat(2, 1fr); }
  .nos-split { grid-template-columns: minmax(0, 1fr); }
  .nos-figura { order: -1; }
}

@media (max-width: 600px) {
  .nos-linea::before { left: 5px; }
  .nos-hito { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); padding-left: var(--e-6); }
  .nos-hito-cuerpo::before { left: -1.5rem; }
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */
.faq-encabezado { padding-top: clamp(2rem, 5vw, 3.5rem); }
.faq-encabezado h1 { margin-block: var(--e-4) var(--e-4); }

.faq-lienzo {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq-indice {
  position: sticky;
  top: calc(var(--header-alto) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
}

.faq-indice-titulo {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rojo-vivo);
  margin-bottom: var(--e-2);
}

.faq-indice a {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  padding: 4px 0;
  transition: color var(--rapido), padding-left var(--rapido);
}

.faq-indice a:hover { color: var(--blanco); padding-left: 6px; }

.faq-indice-ayuda {
  margin-top: var(--e-3);
  padding-top: var(--e-3) !important;
  border-top: 1px solid var(--borde);
  color: var(--crema) !important;
  font-weight: 500;
}

.faq-grupo + .faq-grupo { margin-top: clamp(2.5rem, 5vw, 4rem); }

.faq-grupo-titulo {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  color: var(--blanco);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-4);
  border-bottom: 2px solid var(--rojo);
}

.faq-item {
  border-bottom: 1px solid var(--borde);
  transition: background var(--rapido);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-3) var(--e-5) 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--rapido);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blanco); }

.faq-item summary:focus-visible {
  outline: 2px solid var(--rojo-vivo);
  outline-offset: 2px;
}

.faq-pregunta {
  font-family: var(--display);
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--texto);
}

.faq-item[open] .faq-pregunta { color: var(--crema); }

.faq-cruz {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  color: var(--texto-suave);
  transition: transform var(--normal) var(--curva), background var(--normal), color var(--normal);
}

.faq-item[open] .faq-cruz {
  transform: rotate(135deg);
  background: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco);
}

.faq-respuesta {
  padding: 0 var(--e-6) var(--e-5) 0;
  max-width: 72ch;
  animation: aparecer-abajo 0.35s var(--curva);
}

.faq-respuesta p { color: var(--texto-suave); font-size: var(--t-sm); line-height: 1.75; }
.faq-respuesta p + p { margin-top: var(--e-3); }
.faq-respuesta .enlace-linea { margin-top: var(--e-4); }

.faq-cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background:
    radial-gradient(ellipse at 0% 0%, rgb(164 35 37 / 0.25), transparent 60%),
    var(--superficie);
}

.faq-cierre p { color: var(--texto-suave); font-size: var(--t-sm); margin-top: var(--e-2); }

@media (max-width: 900px) {
  .faq-lienzo { grid-template-columns: minmax(0, 1fr); }
  .faq-indice { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--e-3); }
  .faq-indice-titulo { width: 100%; margin-bottom: 0; }
  .faq-indice-ayuda { border-top: 0; margin-top: 0; padding-top: 4px !important; }
}

/* ── Contacto ─────────────────────────────────────────────────────────────── */
.contacto-encabezado { padding-top: clamp(2rem, 5vw, 3.5rem); }
.contacto-encabezado h1 { margin-block: var(--e-4) var(--e-4); }

.contacto-lienzo {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contacto-formulario {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
}

.contacto-formulario h2 { margin-bottom: var(--e-2); }
.contacto-formulario form { display: flex; flex-direction: column; gap: var(--e-5); margin-top: var(--e-5); }

.contacto-fila { gap: var(--e-4); }

.contacto-nota { font-size: var(--t-sm); color: var(--texto-tenue); }
.contacto-nota .req { color: var(--rojo-vivo); }

.contacto-legal { font-size: var(--t-xs); color: var(--texto-tenue); text-align: center; }
.contacto-legal a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }

.contacto-datos { display: flex; flex-direction: column; gap: var(--e-4); }

.contacto-tarjeta {
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
}

.contacto-tarjeta h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blanco);
  margin-bottom: var(--e-3);
}

.contacto-tarjeta p { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--e-4); }
.contacto-tarjeta .btn { margin-top: var(--e-2); }

.contacto-tarjeta-wa {
  background:
    radial-gradient(ellipse at 0% 0%, rgb(164 35 37 / 0.3), transparent 65%),
    var(--superficie);
}

.contacto-tarjeta-icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--e-3);
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
}

.contacto-tarjeta-tenue { background: transparent; border-style: dashed; }

.contacto-lista,
.contacto-horario { display: flex; flex-direction: column; gap: var(--e-3); }

.contacto-lista li,
.contacto-horario li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-sm);
  flex-wrap: wrap;
}

.contacto-lista li:last-child,
.contacto-horario li:last-child { border-bottom: 0; padding-bottom: 0; }

.contacto-lista li > span,
.contacto-horario li > span { color: var(--texto-tenue); }

.contacto-lista li a { color: var(--crema); transition: color var(--rapido); }
.contacto-lista li a:hover { color: var(--blanco); }
.contacto-horario li strong { color: var(--texto); font-weight: 500; text-align: right; }

.contacto-direccion {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--crema) !important;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .contacto-lienzo { grid-template-columns: minmax(0, 1fr); }
}

/* ── Envíos ───────────────────────────────────────────────────────────────── */
.envios-encabezado { padding-top: clamp(2rem, 5vw, 3.5rem); }
.envios-encabezado h1 { margin-block: var(--e-4) var(--e-4); }
.envios-encabezado .subtitulo strong { color: var(--crema); }

.envios-tarjetas { gap: clamp(1rem, 2vw, 1.5rem); }

.envios-tarjeta {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
}

.envios-tarjeta-valor {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  color: var(--rojo-vivo);
  margin-bottom: var(--e-3);
}

.envios-tarjeta h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: var(--e-2);
}

.envios-tarjeta p { font-size: var(--t-sm); color: var(--texto-suave); }

.envios-tabla-seccion { border-top: 1px solid var(--borde); background: var(--carbon); }

.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  -webkit-overflow-scrolling: touch;
}

.tabla-envios { min-width: 720px; font-size: var(--t-sm); }

.tabla-envios thead th {
  padding: var(--e-4) var(--e-5);
  text-align: left;
  background: var(--pizarra);
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--crema);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla-envios tbody th,
.tabla-envios tbody td {
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
  text-align: left;
}

.tabla-envios tbody tr:last-child th,
.tabla-envios tbody tr:last-child td { border-bottom: 0; }

.tabla-envios tbody tr:hover { background: rgb(255 255 255 / 0.03); }

.tabla-envios tbody th {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blanco);
  min-width: 190px;
}

.envios-costo {
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.envios-costo-gratis {
  color: var(--stock);
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  font-style: italic;
}

.envios-detalle { color: var(--texto-suave); max-width: 42ch; }

.envios-fila-gratis { background: rgb(62 214 96 / 0.06); }

.envios-pie-tabla {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-tenue);
  max-width: 70ch;
}

.envios-pasos { gap: clamp(1rem, 2vw, 1.5rem); }

.envios-paso {
  padding: var(--e-5);
  border-left: 2px solid var(--rojo);
  background: linear-gradient(100deg, rgb(164 35 37 / 0.08), transparent 70%);
}

.envios-paso-num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 800;
  font-style: italic;
  color: rgb(255 255 255 / 0.16);
  line-height: 1;
}

.envios-paso h3 {
  margin-block: var(--e-2) var(--e-2);
  font-size: 1.15rem;
  color: var(--blanco);
}

.envios-paso p { font-size: var(--t-sm); color: var(--texto-suave); }

.envios-notas { border-top: 1px solid var(--borde); }
.envios-notas-grid { gap: clamp(1.25rem, 3vw, 2.5rem); }

.envios-nota h3 { font-size: 1.3rem; color: var(--blanco); margin-bottom: var(--e-3); }
.envios-nota p { font-size: var(--t-sm); color: var(--texto-suave); max-width: 60ch; }
.envios-nota a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }

.envios-cta {
  border-top: 1px solid var(--borde);
  background:
    radial-gradient(ellipse at 50% 120%, rgb(164 35 37 / 0.3), transparent 60%),
    var(--carbon);
}

.envios-cta h2 { margin-bottom: var(--e-3); }

@media (max-width: 980px) {
  .envios-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .envios-pasos { grid-template-columns: minmax(0, 1fr); }
}

/* ── Páginas legales ──────────────────────────────────────────────────────── */
.legal-encabezado { padding-top: clamp(2rem, 5vw, 3.5rem); }
.legal-encabezado h1 { margin-block: var(--e-4) var(--e-4); }

.legal-lienzo {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.legal-indice {
  position: sticky;
  top: calc(var(--header-alto) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
}

.legal-indice-titulo {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rojo-vivo);
  margin-bottom: var(--e-3);
}

.legal-indice a {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--rapido), padding-left var(--rapido);
}

.legal-indice a:hover { color: var(--blanco); padding-left: 6px; }

.legal-cuerpo { max-width: 76ch; }

.legal-resumen {
  padding: var(--e-5);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgb(212 45 48 / 0.4);
  border-radius: var(--radio-lg);
  background: rgb(164 35 37 / 0.1);
}

.legal-resumen h2 {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rojo-vivo);
  margin-bottom: var(--e-3);
}

.legal-resumen p { color: var(--crema); font-size: var(--t-md); line-height: 1.6; }

.legal-bloque { scroll-margin-top: calc(var(--header-alto) + 2rem); }
.legal-bloque + .legal-bloque { margin-top: clamp(2rem, 4vw, 3rem); }

.legal-bloque h2 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  color: var(--blanco);
  padding-bottom: var(--e-3);
  margin-bottom: var(--e-4);
  border-bottom: 1px solid var(--borde);
}

.legal-bloque p {
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: 1.8;
}

.legal-bloque p + p { margin-top: var(--e-4); }

.legal-bloque ul {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-block: var(--e-4);
  padding-left: var(--e-5);
}

.legal-bloque li {
  position: relative;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: 1.7;
}

.legal-bloque li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.68em;
  width: 6px;
  height: 6px;
  background: var(--rojo-vivo);
  transform: rotate(45deg);
}

.legal-pie {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.legal-pie p + p { margin-top: var(--e-3); }
.legal-pie a { color: var(--crema); text-decoration: underline; text-underline-offset: 3px; }
.legal-pie a:hover { color: var(--blanco); }

@media (max-width: 900px) {
  .legal-lienzo { grid-template-columns: minmax(0, 1fr); }
  .legal-indice { position: static; }
}

.campo-error:empty { display: none; }


/* ============================================================================
   ===== NAV Y PIE =====
   Piezas que la cabecera y el pie ya usan en el HTML pero que componentes.css
   no define: el mega-menú de categorías, la barra de avisos rotativos, los
   remates del buscador, el botón "volver arriba" y el detalle del pie.

   OJO: los bloques de navegación de acá comparten geometría exacta con
   assets/css/navegacion.css (que se carga después). Si tocás uno, tocá el otro:
   están escritos para dar el mismo resultado gane el que gane la cascada.
   ========================================================================= */

/* ── Barra de avisos rotativos ────────────────────────────────────────────── */
/* Los mensajes se apilan uno sobre otro y entran desde abajo: la barra nunca
   cambia de alto, así que la página no da saltos al rotar el aviso. */
.aviso-rotativo {
  position: relative;
  height: 1.4em;
  overflow: hidden;
}

.aviso-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva);
}

.aviso-item.activo { opacity: 1; transform: none; }

/* El que se va sale hacia arriba: da la sensación de cinta que gira. */
.aviso-item.saliendo { opacity: 0; transform: translateY(-100%); }

.aviso-item strong { font-weight: 700; }

/* ── Mega-menú de categorías ──────────────────────────────────────────────── */
/* .nav-desplegable queda estático a propósito: así el panel se posiciona
   contra la .cabecera (que es sticky, o sea, bloque contenedor) y puede caer
   a todo el ancho en vez de colgar del botón. */
.nav-desplegable {
  position: static;
  display: flex;
  align-items: center;
}

.nav-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-boton svg { transition: transform var(--normal) var(--curva); }
.nav-boton[aria-expanded="true"] { color: var(--blanco); }
.nav-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-boton[aria-expanded="true"]::after { transform: scaleX(1); }

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) - 1);
  padding: var(--e-6) 0 var(--e-7);
  background: rgb(10 10 11 / 0.97);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 22px 50px rgb(0 0 0 / 0.55);

  /* Cerrado por defecto: sin esto el menú se desparrama sobre la página. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition:
    opacity var(--normal) var(--curva),
    transform var(--normal) var(--curva),
    visibility var(--normal);
}

/* La clase la pone app.js; el atributo ARIA queda como respaldo. */
.nav-panel.abierto,
.nav-boton[aria-expanded="true"] + .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* La grilla interior es la que respeta el ancho del contenedor. */
.nav-panel-grid {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--pad-lateral);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e-2);
}

.nav-panel-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--radio);
  transition: background-color var(--rapido), border-color var(--rapido), transform var(--rapido);
}

.nav-panel-item:hover {
  background: rgb(255 255 255 / 0.06);
  border-color: var(--borde);
  transform: translateX(3px);
}

.nav-panel-item img {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
}

.nav-panel-item span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.nav-panel-item strong {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--texto);
}
.nav-panel-item:hover strong { color: var(--rojo-vivo); }

.nav-panel-item em {
  font-style: normal;
  font-size: var(--t-xs);
  color: var(--texto-tenue);
}

/* En móvil el desplegable es un acordeón dentro del menú lateral. */
@media (max-width: 1080px) {
  .nav-desplegable {
    display: block;
    width: 100%;
  }

  .nav-boton {
    width: 100%;
    justify-content: space-between;
    font-size: 1.5rem;
    padding-block: var(--e-3);
    border-bottom: 1px solid var(--borde);
  }

  .nav-panel {
    position: static;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    /* El acordeón se cierra por altura, no por opacidad. */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--normal) var(--curva);
  }

  .nav-panel.abierto,
  .nav-boton[aria-expanded="true"] + .nav-panel { grid-template-rows: 1fr; }

  .nav-panel-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 0;
    min-height: 0;
    overflow: hidden;   /* sin esto el grid-template-rows: 0fr no recorta */
  }

  .nav-panel-item {
    padding: var(--e-2) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--borde);
  }
  .nav-panel-item:hover { transform: none; background: none; }
  .nav-panel-item img { width: 42px; height: 42px; }
  .nav-panel-item strong { font-size: 1rem; }
}

/* ── Remates del buscador ─────────────────────────────────────────────────── */
.buscador-pista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--t-sm);
  color: var(--texto-tenue);
}

.chip-sugerencia {
  padding: 4px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 99px;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  transition: all var(--rapido) var(--curva);
}

.chip-sugerencia:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco);
  transform: translateY(-2px);
}

/* ── Utilidad: esconder en pantallas chicas ───────────────────────────────── */
@media (max-width: 620px) {
  .oculto-movil { display: none !important; }
}

/* ── Botón "volver arriba" ────────────────────────────────────────────────── */
/* app.js lo inyecta en <body> y le suma .visible al pasar el primer viewport.
   Va arriba de la burbuja del Coach Boost para no taparla. */
.boton-arriba {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(5.5rem, 10vw, 7rem);
  z-index: calc(var(--z-chat) - 1);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  color: var(--texto);
  box-shadow: var(--sombra);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--normal) var(--curva);
}

.boton-arriba.visible,
.boton-arriba.activo,
.boton-arriba[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }

.boton-arriba:hover {
  background: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco);
  transform: translateY(-3px);
}
.boton-arriba:active { transform: translateY(-1px) scale(0.96); }

/* ── Pie: columna de marca ────────────────────────────────────────────────── */
.pie-logo { color: var(--blanco); margin-bottom: var(--e-3); }
.pie-logo svg { height: 34px; }

.pie-lema {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--crema);
  margin-bottom: var(--e-3);
  max-width: 30ch;
}

.pie-texto {
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 42ch;
  margin-bottom: var(--e-4);
}

.pie-contacto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--e-5);
  font-size: var(--t-sm);
}

.pie-contacto li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  color: var(--texto-suave);
}

.pie-contacto svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--rojo-vivo);
}

.pie-contacto a { transition: color var(--rapido); }
.pie-contacto a:hover {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie-col { min-width: 0; }

.pie-nota {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  max-width: 40ch;
}
.pie-nota a { color: var(--texto-suave); text-decoration: underline; text-underline-offset: 2px; }
.pie-nota a:hover { color: var(--blanco); }

/* Respuesta del boletín: la escribe app.js después del fetch. */
.boletin-nota {
  margin-top: var(--e-2);
  min-height: 1.2em;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.boletin-nota.ok    { color: var(--stock); }
.boletin-nota.error { color: var(--rojo-vivo); }

.boletin-form .btn { flex-shrink: 0; }

/* ── Pie: barra legal y medios de pago ────────────────────────────────────── */
.pie-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--e-3);
  margin: 0;
}

.pie-hecho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: var(--e-3);
  border-left: 1px solid var(--borde);
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

.pie-bandera {
  border-radius: 2px;
  border: 1px solid var(--borde);
  flex-shrink: 0;
}

.pie-pagos-titulo {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-tenue);
}

.pago-marca {
  display: inline-flex;
  border-radius: 5px;
  overflow: hidden;
  filter: grayscale(0.35);
  opacity: 0.9;
  transition: filter var(--rapido), opacity var(--rapido), transform var(--rapido) var(--curva);
}
.pago-marca:hover { filter: none; opacity: 1; transform: translateY(-2px); }
.pago-marca svg { display: block; }

.pago-sello {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgb(62 214 96 / 0.35);
  border-radius: 999px;
  background: rgb(62 214 96 / 0.08);
  color: var(--stock);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pie-pasarela {
  padding-bottom: var(--e-5);
  font-size: var(--t-xs);
  color: var(--texto-tenue);
  opacity: 0.75;
}

/* ── Pie: marca de agua ───────────────────────────────────────────────────── */
/* Va al final del <footer>, que tiene overflow:hidden: la palabra queda
   recortada contra el borde inferior, igual que en el sitio real. */
.pie-marca-agua {
  position: relative;
  z-index: 0;
  margin-top: calc(var(--e-4) * -1);
  letter-spacing: -0.02em;
}

@media (max-width: 900px) {
  .pie-marca-agua { margin-top: 0; }
}

/* ── Pie: acomodo en pantallas chicas ─────────────────────────────────────── */
@media (max-width: 700px) {
  .pie-legal {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .pie-hecho { padding-left: 0; border-left: 0; }

  .pie-pagos { gap: var(--e-2); }
  .pie-texto,
  .pie-lema,
  .pie-nota { max-width: none; }
}

/* ── Tema claro ───────────────────────────────────────────────────────────── */
:root[data-tema="claro"] .nav-panel {
  background: rgb(246 245 243 / 0.98);
  box-shadow: 0 22px 50px rgb(20 20 26 / 0.16);
}
:root[data-tema="claro"] .nav-panel-item:hover { background: rgb(20 20 26 / 0.05); }
:root[data-tema="claro"] .nav-boton[aria-expanded="true"] { color: var(--texto); }

:root[data-tema="claro"] .boton-arriba:hover { color: var(--blanco); }

:root[data-tema="claro"] .pie-logo { color: var(--texto); }
:root[data-tema="claro"] .pie-lema { color: var(--rojo); }
:root[data-tema="claro"] .pie-contacto a:hover,
:root[data-tema="claro"] .pie-nota a:hover { color: var(--texto); }
:root[data-tema="claro"] .pago-marca { filter: none; opacity: 1; }

/* ── Menos movimiento ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aviso-item,
  .nav-panel,
  .nav-panel-item,
  .boton-arriba,
  .chip-sugerencia,
  .pago-marca { transition-duration: 1ms; }

  .nav-panel-item:hover,
  .boton-arriba:hover,
  .chip-sugerencia:hover,
  .pago-marca:hover { transform: none; }
}

/* ===== GLOBAL JS ===== */
/* Estilos que necesita public/assets/js/app.js: los estados que el script
   enciende y apaga (cabecera oculta, toasts, botones cargando) y las páginas
   de error. Todo lo demás del encabezado vive en navegacion.css. */

/* ── 1. Revelado en cascada ───────────────────────────────────────────────── */
/* base.css deja a los hijos con la animación corriendo desde el arranque; acá
   la dejamos en pausa para que .cascada.visible sea la que la suelte cuando el
   IntersectionObserver de app.js llega al bloque. */
.cascada > * { animation-play-state: paused; }

/* ── 2. Cabecera que se esconde al bajar ──────────────────────────────────── */
.cabecera {
  transition:
    background-color var(--normal),
    border-color var(--normal),
    transform var(--normal) var(--curva);
  will-change: transform;
}

.cabecera.oculta { transform: translateY(calc(-100% - 6px)); }

/* Con el menú móvil o el buscador abiertos app.js nunca la esconde, pero por
   las dudas dejamos el panel lateral siempre a la vista. */
.nav-principal.abierto { transform: none; }

/* ── 3. Toasts ────────────────────────────────────────────────────────────── */
.toast { cursor: pointer; }

.toast-texto {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.toast-ok    .toast-icono { background: #12833c; }
.toast-error .toast-icono { background: var(--rojo-vivo); }
.toast-info  .toast-icono { background: var(--negro); }

.toast-error { box-shadow: var(--sombra-lg), inset 4px 0 0 var(--rojo-vivo); }
.toast-info  { box-shadow: var(--sombra-lg), inset 4px 0 0 var(--negro); }

/* ── 4. Botones mientras viaja la petición ────────────────────────────────── */
/* Se limita a los botones que maneja app.js para no pisar el .cargando propio
   del carrito ni el de #btn-pagar. */
[data-agregar].cargando,
[data-agregar-combo].cargando,
[data-boletin] button.cargando,
.boletin-form button.cargando {
  position: relative;
  opacity: 0.72;
  cursor: progress;
  pointer-events: none;
}

[data-agregar].cargando::after,
[data-agregar-combo].cargando::after,
[data-boletin] button.cargando::after,
.boletin-form button.cargando::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.7rem;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

/* El botón cuadrado de la card no tiene lugar al costado: va centrado. */
.card-prod-add.cargando { transform: none; }
.card-prod-add.cargando svg { opacity: 0; }
.card-prod-add.cargando::after {
  right: auto;
  left: 50%;
  margin-left: -7px;
}

/* ── 5. Video del hero en pausa ───────────────────────────────────────────── */
/* app.js le corta las fuentes cuando hay prefers-reduced-motion o ahorro de
   datos: queda solo el poster, que ya trae el propio <video>. */
.video-en-pausa { background-color: var(--negro); }

/* ── 6. Páginas de error (404 / 500) ──────────────────────────────────────── */
.error-pagina {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 13vh, 8.5rem);
}

.error-pagina::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 70%;
  background: radial-gradient(ellipse at 50% 0%, rgb(164 35 37 / 0.42), transparent 68%);
  pointer-events: none;
}

.error-pagina > .contenedor { position: relative; z-index: 1; }

.error-numero {
  margin: var(--e-4) 0 var(--e-2);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgb(255 255 255 / 0.22);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), transparent 78%);
  -webkit-background-clip: text;
  background-clip: text;
}

:root[data-tema="claro"] .error-numero {
  -webkit-text-stroke-color: rgb(20 20 26 / 0.2);
  background: linear-gradient(180deg, rgb(20 20 26 / 0.12), transparent 78%);
  -webkit-background-clip: text;
  background-clip: text;
}

.error-pagina .subtitulo { max-width: 52ch; }

.error-categorias {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding-top: var(--e-6);
  border-top: 1px solid var(--borde);
}

.error-categorias .buscador-seccion-titulo {
  justify-content: center;
  text-align: center;
  margin-bottom: var(--e-4);
}

@media (max-width: 620px) {
  .error-pagina { padding-block: clamp(3rem, 10vh, 5rem); }
  .error-numero { -webkit-text-stroke-width: 1.5px; }
}

/* ── 7. Menos movimiento ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Sin observador: los bloques en cascada tienen que verse igual. */
  .cascada > * { animation-play-state: running; }

  /* La cabecera no se desliza: app.js igual la deja quieta. */
  .cabecera.oculta { transform: none; }

  [data-agregar].cargando::after,
  [data-agregar-combo].cargando::after,
  [data-boletin] button.cargando::after,
  .boletin-form button.cargando::after { animation-duration: 1.6s; }
}