/* ============================================================
   Activo Indumentaria — storefront v2 (rediseño premium)
   Base clara, tipografía Outfit/Inter, acentos fucsia de marca
   ============================================================ */
:root {
  --fucsia: #E91E63;
  --fucsia-oscuro: #C2185B;
  --fucsia-profundo: #880E4F;
  --negro: #1A1A1A;
  --tinta: #222222;
  --fondo: #FAF7F5;
  --blanco: #FFFFFF;
  --gris-foto: #F1ECE9;
  --gris-borde: #E6DFDB;
  --gris-texto: #6E645F;
  --gradiente: linear-gradient(135deg, #E91E63, #C2185B);
  --radio: 16px;
  --radio-chico: 12px;
  --sombra: 0 1px 2px rgba(26,26,26,.05), 0 4px 16px rgba(26,26,26,.05);
  --sombra-media: 0 8px 28px rgba(26,26,26,.12);
  --sombra-cta: 0 6px 18px rgba(233,30,99,.30);
  --trans: .18s ease;
  --ancho: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3 { font-family: 'Outfit', system-ui, sans-serif; margin: 0; line-height: 1.15; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; color: var(--tinta); }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* ===== Botones ===== */
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--negro); color: #fff; font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  padding: 12px 26px; border-radius: 999px; border: none;
  transition: transform var(--trans), background var(--trans), opacity var(--trans);
}
@media (hover: hover) { .btn-cta:hover { background: #3a3a3e; } }
.btn-cta:active { transform: scale(.97); }
.btn-cta--full { width: 100%; }
.btn-cta[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanco); color: var(--negro); font-weight: 600; font-size: .92rem;
  padding: 13px 22px; border-radius: 999px; border: 1.5px solid var(--negro);
  transition: background var(--trans), color var(--trans), transform var(--trans);
}
@media (hover: hover) { .btn-outline:hover { background: var(--negro); color: #fff; } }
.btn-outline:active { transform: scale(.96); }

.btn-icono {
  width: 34px; height: 34px; border-radius: 50%; background: var(--blanco);
  border: 1.5px solid var(--gris-borde); font-size: 1.05rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--trans), background var(--trans);
}
@media (hover: hover) { .btn-icono:hover { border-color: var(--negro); } }
.btn-icono:active { background: var(--gris-foto); transform: scale(.94); }

.link-volver {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--gris-texto); font-size: .9rem;
  transition: color var(--trans);
}
@media (hover: hover) { .link-volver:hover { color: var(--negro); } }
.link-volver:active { color: var(--negro); }
.volver-bar { padding: 18px 16px 4px; max-width: var(--ancho); margin: 0 auto; }

.microcopy { color: var(--gris-texto); font-size: .85rem; margin: 4px 0 0; }
.estado-vacio {
  text-align: center; color: var(--gris-texto); padding: 56px 16px;
  background: var(--fondo); border-radius: var(--radio); margin: 8px 16px;
}
.estado-vacio a { color: var(--fucsia-oscuro); font-weight: 600; }
.alerta-error {
  background: #FDECEF; color: #880E4F; border: 1px solid rgba(233,30,99,.25);
  border-radius: var(--radio-chico); padding: 14px 16px; margin: 16px 0; font-size: .9rem;
}

/* ===== Header ===== */
.sitio-header {
  background: rgba(250,247,245,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gris-borde);
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow .25s ease;
}
.sitio-header--sombra { box-shadow: 0 6px 24px rgba(26,26,26,.08); }

/* ===== Micro-animaciones sutiles (solo con JS activo y sin reduced-motion) ===== */
html.js-anim img.lazy-fade { opacity: 0; }
html.js-anim .prod-card__img img, html.js-anim .cat-card img { transition: opacity .4s ease, transform .35s ease; }
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .aparecer { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  html.js-anim .aparecer.aparecer--visto { opacity: 1; transform: none; }
}
.sitio-header__top {
  display: flex; align-items: center; gap: 14px; padding: 8px 16px;
  max-width: var(--ancho); margin: 0 auto; flex-wrap: nowrap;
}
.sitio-header__logo { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.sitio-header__logo img { height: 42px; width: 42px; object-fit: contain; }
.sitio-header__marca {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.01em; color: var(--negro); display: none;
}
.sitio-header__marca em { font-style: normal; color: var(--fucsia); }
.sitio-header__buscador {
  flex: 1; display: flex; align-items: center; background: var(--fondo);
  border: 1.5px solid transparent; border-radius: 999px; padding: 9px 16px;
  flex-wrap: nowrap; min-width: 0; transition: border-color var(--trans), background var(--trans);
}
.sitio-header__buscador:focus-within { border-color: var(--fucsia); background: #fff; }
.sitio-header__buscador input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: .92rem; }
.sitio-header__buscador input::placeholder { color: #A7A7AF; }
.sitio-header__buscador button { color: var(--gris-texto); display: flex; padding: 0; }
.sitio-header__carrito {
  position: relative; display: flex; align-items: center; justify-content: center;
  color: var(--negro); flex-shrink: 0; width: 44px; height: 44px;
  border-radius: 50%; background: var(--fondo);
  transition: background var(--trans), transform var(--trans);
}
@media (hover: hover) { .sitio-header__carrito:hover { background: var(--gris-foto); } }
.sitio-header__carrito:active { transform: scale(.92); }
.sitio-header__carrito-count {
  position: absolute; top: -2px; right: -4px; background: var(--gradiente);
  color: #fff; font-size: .66rem; font-weight: 700; min-width: 19px; height: 19px;
  border-radius: 999px; align-items: center; justify-content: center; padding: 0 5px;
  border: 2px solid #fff;
}
.sitio-header__carrito-count.bump { animation: bump .35s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.sitio-header__categorias {
  display: flex; gap: 8px; flex: 1; min-width: 0; align-items: center;
  flex-wrap: wrap;
}
.sitio-header__menu {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--fondo);
  color: var(--negro); flex-shrink: 0; padding: 0;
  transition: background var(--trans), transform var(--trans);
}
.sitio-header__menu:active { transform: scale(.92); }
@media (max-width: 760px) {
  .sitio-header__menu { display: flex; }
  .sitio-header__categorias { display: none; }
  .sitio-header__top { gap: 10px; }
  .sitio-header__logo img { height: 46px; width: 46px; }
}

/* ===== Drawer de categorías (mobile) ===== */
.drawer-fondo {
  position: fixed; inset: 0; background: rgba(26,26,26,.45); z-index: 90;
  opacity: 0; transition: opacity .22s ease;
}
.drawer-fondo.visible { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; right: 0; width: min(310px, 84vw); z-index: 95;
  background: var(--blanco); display: flex; flex-direction: column; flex-wrap: nowrap;
  transform: translateX(102%); transition: transform .26s ease;
  box-shadow: var(--sombra-media); overflow-y: auto;
}
.drawer.abierto { transform: translateX(0); }
.drawer__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--gris-borde);
}
.drawer__titulo { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--negro); }
.drawer__cerrar {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--fondo); color: var(--negro); padding: 0;
}
.drawer__cerrar:active { transform: scale(.92); }
.drawer__lista { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 10px 10px; }
.drawer__item {
  padding: 13px 14px; border-radius: var(--radio-chico); font-weight: 600; font-size: .95rem;
  color: var(--tinta); transition: background var(--trans);
}
.drawer__item:active { background: var(--gris-foto); }
.drawer__item--activo { background: var(--negro); color: #fff; }
.drawer__item--secundario { color: var(--gris-texto); font-weight: 500; font-size: .9rem; }
.drawer__pie { margin-top: auto; border-top: 1px solid var(--gris-borde); padding: 10px 10px 18px; }
.sitio-header__anuncio {
  background: var(--negro); color: #fff; text-align: center; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; font-weight: 600;
}
.sitio-header__anuncio strong, .sitio-header__anuncio em { color: #FF8AB5; font-style: normal; }

/* ===== Chips ===== */
.chip {
  flex-shrink: 0; display: inline-flex; align-items: center;
  background: var(--blanco); color: var(--tinta); border: 1.5px solid var(--gris-borde);
  border-radius: 999px; padding: 8px 16px; font-size: .84rem; font-weight: 600; white-space: nowrap;
  transition: border-color var(--trans), background var(--trans), color var(--trans), transform var(--trans);
}
.chip--activo { background: var(--negro); color: #fff; border-color: var(--negro); }
@media (hover: hover) { .chip:not(.chip--activo):hover { border-color: var(--negro); } }
.chip:active { transform: scale(.95); }

/* Nav de categorías desktop estilo texto (tipo Nike) */
@media (min-width: 761px) {
  .sitio-header__categorias { gap: 16px; justify-content: flex-start; margin-left: 6px; }
  .sitio-header__buscador { flex: 0 0 225px; padding: 7px 14px; }
}
/* Escritorios angostos: todo sigue entrando en una sola fila */
@media (min-width: 761px) and (max-width: 1240px) {
  .sitio-header__categorias { gap: 11px; }
  .sitio-header__categorias .chip { font-size: .8rem; }
  .sitio-header__buscador { flex: 0 0 44px; padding: 7px 10px; justify-content: center; }
  .sitio-header__buscador input { display: none; }
  .sitio-header__buscador:focus-within, .sitio-header__buscador--abierto { flex: 0 0 200px; }
  .sitio-header__buscador:focus-within input, .sitio-header__buscador--abierto input { display: block; }
}
@media (min-width: 761px) {
  .sitio-header__carrito { width: 40px; height: 40px; }
  .sitio-header__categorias .chip {
    background: none; border: none; border-radius: 0; padding: 4px 0;
    font-size: .88rem; font-weight: 600; color: var(--negro); white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent; transition: box-shadow var(--trans), color var(--trans);
  }
  .sitio-header__categorias .chip--activo { background: none; color: var(--negro); box-shadow: inset 0 -2px 0 var(--negro); }
  .sitio-header__categorias .chip:not(.chip--activo):hover { box-shadow: inset 0 -2px 0 var(--negro); }
  .sitio-header__categorias .chip:active { transform: none; }
}

/* ===== Hero ===== */
.hero-carousel { position: relative; margin: 0 auto; padding: 0; }
.hero-carousel__track {
  position: relative; overflow: hidden;
  aspect-ratio: 4/5; background: var(--gris-foto);
}
@media (min-width: 761px) { .hero-carousel__track { aspect-ratio: 21/8; max-height: 620px; } }
.hero-carousel__slide { position: absolute; inset: 0; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel__texto {
  position: absolute; inset: 0; display: flex; flex-direction: column; flex-wrap: nowrap;
  justify-content: flex-end; align-items: flex-start; padding: 28px 24px;
  background: linear-gradient(to top, rgba(10,10,12,.72) 0%, rgba(10,10,12,.25) 45%, rgba(10,10,12,0) 70%);
  color: #fff;
}
.hero-carousel__texto h2 {
  font-size: clamp(1.45rem, 4.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em;
  max-width: 18ch; text-shadow: 0 2px 14px rgba(0,0,0,.3);
}
.hero-carousel__texto p { margin: 7px 0 14px; font-size: clamp(.88rem, 2.4vw, 1rem); opacity: .92; max-width: 42ch; }
.hero-carousel__texto .btn-cta { padding: 11px 24px; background: #fff; color: var(--negro); }
@media (hover: hover) { .hero-carousel__texto .btn-cta:hover { background: var(--gris-foto); } }
.hero-carousel__dots {
  position: absolute; bottom: 14px; right: 24px; display: flex; gap: 6px; z-index: 2;
}
.dot {
  width: 22px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.4);
  padding: 0; transition: background var(--trans), width var(--trans);
}
.dot--activo { background: #fff; width: 34px; }

/* ===== Secciones ===== */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 32px 16px 8px; }
.seccion__titulo {
  font-size: clamp(1.25rem, 3.4vw, 1.65rem); font-weight: 800; letter-spacing: -.02em; color: var(--negro);
}
.seccion__subtitulo { color: var(--gris-texto); font-size: .88rem; margin: 5px 0 18px; }
.seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seccion__ver-todo {
  font-weight: 600; font-size: .88rem; color: var(--negro); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
  padding-bottom: 24px; transition: color var(--trans);
}
@media (hover: hover) { .seccion__ver-todo:hover { color: var(--gris-texto); } }

/* ===== Franja de beneficios ===== */
.beneficios { max-width: var(--ancho); margin: 28px auto 0; padding: 0 16px; }
.beneficios__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  background: var(--fondo); border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 18px 16px;
}
.beneficio { display: flex; align-items: center; gap: 12px; min-width: 0; }
.beneficio svg { width: 26px; height: 26px; flex: 0 0 26px; color: var(--fucsia-oscuro); }
.beneficio div { display: flex; flex-direction: column; flex-wrap: nowrap; min-width: 0; }
.beneficio strong { font-family: 'Outfit', sans-serif; font-size: .88rem; font-weight: 700; color: var(--negro); }
.beneficio span { font-size: .78rem; color: var(--gris-texto); }
@media (min-width: 761px) { .beneficios__grid { grid-template-columns: repeat(4, 1fr); padding: 22px 24px; } }
@media (max-width: 480px) {
  .beneficios { margin-top: 20px; }
  .beneficios__grid { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; }
  .beneficio svg { width: 24px; height: 24px; flex-basis: 24px; }
  .beneficio strong { font-size: .92rem; }
  .beneficio span { font-size: .82rem; }
}

/* En mobile los beneficios son una línea de tiempo vertical alternada (pedido de Pablo) */
@media (max-width: 760px) {
  /* Fondo general con textura de puntitos tipo n8n (que no sea blanco heladera) */
  body {
    background-color: #F4F1EE;
    background-image: radial-gradient(rgba(26, 26, 26, .07) 1px, transparent 1px);
    background-size: 14px 14px;
  }
  .beneficios__grid { display: block; position: relative; padding: 10px 4px 2px; background: none; border: none; box-shadow: none; }
  .beneficios__grid::before {
    content: ''; position: absolute; left: 50%; top: 4px; bottom: 10px; width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--fucsia), var(--gris-borde) 85%);
    border-radius: 2px;
  }
  .beneficio {
    position: relative; width: calc(50% - 14px); margin: 0 0 8px;
    background: var(--blanco); border: 1px solid var(--gris-borde); border-radius: 9px;
    padding: 6px 9px; box-shadow: var(--sombra);
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px;
  }
  .beneficio:last-child { margin-bottom: 0; }
  .beneficio:nth-child(odd) { margin-right: auto; }
  .beneficio:nth-child(even) { margin-left: auto; }
  .beneficio::after {
    content: ''; position: absolute; top: 11px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--fucsia); border: 2px solid #F4F1EE;
  }
  .beneficio:nth-child(odd)::after { right: -19px; }
  .beneficio:nth-child(even)::after { left: -19px; }
  .beneficio svg { width: 13px; height: 13px; flex-basis: auto; align-self: flex-start; }
  .beneficio strong { font-size: .7rem; line-height: 1.2; }
  .beneficio span { font-size: .62rem; line-height: 1.3; }
  @media (prefers-reduced-motion: no-preference) {
    html.js-anim .beneficio { opacity: 0; transition: opacity .55s ease, transform .55s ease; }
    html.js-anim .beneficio:nth-child(odd) { transform: translateX(-26px); }
    html.js-anim .beneficio:nth-child(even) { transform: translateX(26px); }
    html.js-anim .beneficio.beneficio--visto { opacity: 1; transform: none; }
    /* Las cards de producto entran deslizando hacia arriba al scrollear */
    html.js-anim .prod-card { opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.36,1); }
    html.js-anim .prod-card.prod-card--visto { opacity: 1; transform: none; }
  }
}

/* ===== Círculos de categoría con foto ===== */
.cat-circulos { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cat-circulo { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 7px; width: 88px; }
.cat-circulo__aro {
  width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gris-borde); padding: 3px; background: var(--blanco);
  transition: border-color var(--trans), transform var(--trans);
}
.cat-circulo__aro img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cat-circulo__nombre { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .78rem; text-align: center; }
.cat-circulo__cantidad { font-size: .7rem; color: var(--gris-texto); margin-top: -6px; }
@media (hover: hover) {
  .cat-circulo:hover .cat-circulo__aro { border-color: var(--fucsia); transform: translateY(-2px); }
}
.cat-circulo:active .cat-circulo__aro { transform: scale(.95); }
/* En mobile los círculos se vuelven fichas cuadradas (elección de Pablo, modelo M2) */
@media (max-width: 760px) {
  .cat-circulos { gap: 8px; }
  .cat-circulo { position: relative; width: calc((100% - 24px) / 4); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--gris-foto); }
  .cat-circulo__aro { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 0; padding: 0; }
  .cat-circulo__aro img { border-radius: 0; }
  .cat-circulo__aro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 45%, rgba(26,26,26,.62)); }
  .cat-circulo__nombre { position: absolute; left: 7px; right: 7px; bottom: 4px; z-index: 1; color: #fff; font-size: .66rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-circulo__cantidad { display: none; }
  .cat-circulo:active { transform: scale(.96); }
}
/* Compatibilidad con el HTML cacheado previo al restart (borrar después) */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 761px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }
.cat-card { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--gris-foto); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; }
.cat-card__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0) 40%, rgba(26,26,26,.72) 100%); }
.cat-card__info { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; flex-wrap: nowrap; }
.cat-card__nombre { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem; color: #fff; }
.cat-card__cantidad { font-size: .78rem; color: rgba(255,255,255,.85); }
.categorias-fila--resto { margin-top: 14px; }
.categorias-fila--resto:empty { display: none; }

/* ===== Banner rotador de categorías (compacto, va pasando imágenes) ===== */
.banner-rotador {
  position: relative; max-width: calc(var(--ancho) - 32px); margin: 44px auto 0;
  height: 190px; border-radius: var(--radio); overflow: hidden; background: var(--negro);
}
.banner-rotador__slide {
  position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
}
.banner-rotador__slide.activo { opacity: 1; pointer-events: auto; }
.banner-rotador__slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-rotador__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,26,26,.78) 0%, rgba(26,26,26,.45) 45%, rgba(26,26,26,.05) 100%); }
.banner-rotador__info {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; color: #fff; max-width: 60%;
}
.banner-rotador__sobre { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #FF8AB5; }
.banner-rotador__nombre { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.banner-rotador__bajada { font-size: .8rem; color: rgba(255,255,255,.8); }
.banner-rotador__cta { margin-top: 6px; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .82rem; border-bottom: 2px solid var(--fucsia); align-self: flex-start; padding-bottom: 1px; }
.banner-rotador__puntos { position: absolute; right: 16px; bottom: 12px; display: flex; gap: 6px; z-index: 2; }
.banner-rotador__puntos span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .3s ease, transform .3s ease; }
.banner-rotador__puntos span.activo { background: #fff; transform: scale(1.3); }
@media (max-width: 760px) {
  .banner-rotador { height: 140px; margin: 30px 16px 0; border-radius: 12px; }
  .banner-rotador__info { left: 16px; max-width: 72%; }
  .banner-rotador__nombre { font-size: 1.1rem; }
  .banner-rotador__bajada { font-size: .72rem; }
  .banner-rotador__cta { font-size: .76rem; }
}

/* ===== Banner partido ===== */
.banner-split {
  max-width: var(--ancho); margin: 48px auto 0; padding: 0 16px;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.banner-split__media { border-radius: var(--radio) var(--radio) 0 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--gris-foto); }
.banner-split__media img { width: 100%; height: 100%; object-fit: cover; }
.banner-split__texto {
  background: var(--negro); color: #fff; border-radius: 0 0 var(--radio) var(--radio);
  padding: 28px 24px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px;
}
.banner-split__sobre { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fucsia); }
.banner-split__texto h2 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; line-height: 1.2; }
.banner-split__bajada { color: rgba(255,255,255,.75); font-size: .95rem; }
.banner-split__texto .btn-cta { margin-top: 6px; }
@media (min-width: 900px) {
  .banner-split { grid-template-columns: 1.1fr 1fr; }
  .banner-split__media { border-radius: var(--radio) 0 0 var(--radio); aspect-ratio: auto; }
  .banner-split__texto { border-radius: 0 var(--radio) var(--radio) 0; padding: 48px 44px; justify-content: center; }
  .banner-split__texto h2 { font-size: 1.6rem; }
}

.categorias-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.categoria-pildora {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fondo); border: 1.5px solid var(--gris-borde); border-radius: 999px;
  padding: 12px 22px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .92rem;
  color: var(--negro); transition: background var(--trans), border-color var(--trans), color var(--trans), transform var(--trans);
}
@media (hover: hover) { .categoria-pildora:hover { border-color: var(--negro); background: #fff; } }
.categoria-pildora:active { transform: scale(.96); background: var(--negro); color: #fff; }

.seccion-custom img { border-radius: var(--radio); margin-bottom: 16px; }
.seccion-custom__contenido { color: var(--gris-texto); font-size: .95rem; }

.seccion--cta {
  text-align: center; background: var(--fondo); border-radius: 24px;
  margin: 48px 16px 0; padding: 48px 24px; max-width: calc(var(--ancho) - 32px);
}
@media (min-width: 1232px) { .seccion--cta { margin-left: auto; margin-right: auto; } }
.seccion--cta .btn-cta { margin-top: 8px; }

/* ===== Cards de producto ===== */
.prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.prod-card {
  display: flex; flex-direction: column; flex-wrap: nowrap; min-width: 0;
}
.prod-card__info { min-width: 0; }
@media (hover: hover) {
  .prod-card:hover .prod-card__img img { transform: scale(1.04); }
  .prod-card:hover .prod-card__nombre { text-decoration: underline; text-underline-offset: 3px; }
  .prod-card:hover .prod-card__img-alt { opacity: 1; }
}
.prod-card__img-alt {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
}
.prod-card:active { opacity: .85; }
.prod-card__img { position: relative; aspect-ratio: 4/5; background: var(--gris-foto); overflow: hidden; border-radius: 0; }
.prod-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.badge-oferta {
  position: absolute; top: 0; left: 0; background: var(--fucsia); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 0;
}
.prod-card__info { padding: 11px 2px 15px; }
.prod-card__nombre {
  font-size: .9rem; font-weight: 600; color: var(--negro); margin: 0 0 3px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-card__precios { display: flex; align-items: baseline; gap: 7px; flex-wrap: nowrap; }
.precio-tachado { font-size: .78rem; color: #A7A7AF; text-decoration: line-through; }
.precio-final { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--negro); }
.prod-card .precio-final--oferta, .precio-final--oferta { color: var(--fucsia-oscuro); }

/* ===== Catálogo / filtros ===== */
.pagina-productos { max-width: var(--ancho); margin: 0 auto; }
.pagina-productos__titulo {
  padding: 6px 16px 0; font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -.02em;
}
.pagina-productos .seccion__subtitulo { padding: 0 16px; }
.pagina-productos > .prod-grid { padding: 0 16px; }

.filtros-bar { display: flex; gap: 10px; padding: 0 16px 14px; max-width: var(--ancho); margin: 0 auto; flex-wrap: wrap; }
.filtros-bar__buscar {
  flex: 1 1 100%; min-width: 0; border: 1.5px solid var(--gris-borde); border-radius: 999px;
  padding: 12px 18px; font-size: .92rem; background: var(--fondo); outline: none;
  transition: border-color var(--trans), background var(--trans);
}
.filtros-bar__buscar:focus { border-color: var(--fucsia); background: #fff; }
.filtros-bar__select {
  flex: 1; min-width: 0; border: 1.5px solid var(--gris-borde); border-radius: 999px;
  padding: 11px 14px; background: #fff; font-size: .86rem; font-weight: 500; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2370707A' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 32px;
}
.filtros-bar .btn-outline { padding: 11px 20px; font-size: .86rem; }
@media (min-width: 761px) { .filtros-bar__buscar { flex: 1 1 260px; } }

.chips-categorias { display: flex; gap: 8px; padding: 0 16px 22px; max-width: var(--ancho); margin: 0 auto; flex-wrap: wrap; }

.paginacion { display: flex; justify-content: center; gap: 8px; padding: 32px 16px; flex-wrap: wrap; }
.paginacion__item {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--blanco); border: 1.5px solid var(--gris-borde);
  font-size: .88rem; font-weight: 600; transition: border-color var(--trans);
}
@media (hover: hover) { .paginacion__item:not(.paginacion__item--activo):hover { border-color: var(--negro); } }
.paginacion__item:active { transform: scale(.94); }
.paginacion__item--activo { background: var(--negro); color: #fff; border-color: var(--negro); }
.paginacion__puntos { display: inline-flex; align-items: flex-end; padding: 0 2px 8px; color: var(--gris-texto); }

/* ===== Detalle de producto ===== */
.pagina-producto { max-width: 1100px; margin: 0 auto; padding-bottom: 110px; }
.producto-detalle { display: flex; flex-direction: column; gap: 24px; padding: 8px 16px 0; flex-wrap: nowrap; }
.producto-detalle__principal {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 4/5; background: var(--gris-foto);
}
.producto-detalle__principal img { width: 100%; height: 100%; object-fit: cover; }
.producto-detalle__principal .badge-oferta { top: 14px; left: 14px; font-size: .78rem; padding: 5px 11px; }
.producto-detalle__miniaturas {
  display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; flex-wrap: nowrap;
  padding-bottom: 4px; scrollbar-width: none;
}
.producto-detalle__miniaturas::-webkit-scrollbar { display: none; }
.miniatura {
  width: 64px; height: 76px; object-fit: cover; border-radius: var(--radio-chico);
  border: 2px solid transparent; flex-shrink: 0; cursor: pointer; background: var(--gris-foto);
  transition: border-color var(--trans), opacity var(--trans); opacity: .75;
}
.miniatura--activa { border-color: var(--negro); opacity: 1; }
@media (hover: hover) { .miniatura:hover { opacity: 1; } }

.producto-detalle__info h1 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.producto-detalle__precios { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; flex-wrap: nowrap; }
.producto-detalle__precios .precio-final { font-size: 1.45rem; }
.producto-detalle__precios .precio-tachado { font-size: .9rem; }
.producto-detalle__desc { color: var(--gris-texto); font-size: .9rem; line-height: 1.6; margin: 0 0 6px; }

.selector-talles { margin: 16px 0 6px; }
.selector-talles__label { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .88rem; margin: 0 0 8px; }
.selector-talles__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.talle-btn {
  position: relative; min-width: 44px; height: 40px; border-radius: var(--radio-chico);
  border: 1.5px solid var(--gris-borde); background: #fff; font-weight: 600; font-size: .82rem;
  padding: 0 10px; overflow: hidden;
  transition: border-color var(--trans), background var(--trans), color var(--trans), transform var(--trans);
}
.talle-btn--seleccionado { border-color: var(--negro); background: var(--negro); color: #fff; }
.talle-btn--disabled { color: #C4C4CA; border-color: var(--gris-borde); background: var(--fondo); }
.talle-btn--disabled::after {
  content: ""; position: absolute; left: -8%; right: -8%; top: 50%; height: 1.5px;
  background: #C4C4CA; transform: rotate(-24deg);
}
@media (hover: hover) { .talle-btn:not(.talle-btn--disabled):not(.talle-btn--seleccionado):hover { border-color: var(--negro); } }
.talle-btn:not(.talle-btn--disabled):active { transform: scale(.93); }

.selector-cantidad { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; flex-wrap: nowrap; }
.selector-cantidad label { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .88rem; }
.selector-cantidad__control {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
  border: 1.5px solid var(--gris-borde); border-radius: 999px; padding: 4px;
}
.selector-cantidad__control .btn-icono { border: none; }
.selector-cantidad__control input { width: 38px; text-align: center; border: none; background: none; font-weight: 700; font-size: .95rem; outline: none; }
.selector-cantidad--chico .btn-icono { width: 28px; height: 28px; font-size: .92rem; }

.mensaje-carrito { margin-top: 12px; font-size: .88rem; font-weight: 600; color: var(--fucsia-oscuro); }

/* Confirmación de agregado con acción */
.confirm-carrito {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(86px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  background: var(--negro); color: #fff; border-radius: 999px;
  padding: 10px 10px 10px 18px; max-width: calc(100vw - 32px);
  box-shadow: var(--sombra-media); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.confirm-carrito--visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.confirm-carrito__check {
  width: 22px; height: 22px; border-radius: 50%; background: #1B7A3D; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex-shrink: 0;
}
.confirm-carrito__texto { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.confirm-carrito__cta {
  background: #fff; color: var(--negro); border-radius: 999px; padding: 8px 16px;
  font-size: .84rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
@media (min-width: 761px) { .confirm-carrito { bottom: 36px; } }

/* Llamado de atención al selector de talles */
.selector-talles--atencion { animation: talles-atencion 1s ease; border-radius: var(--radio-chico); }
@keyframes talles-atencion {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233,30,99,0); }
  25% { box-shadow: 0 0 0 4px rgba(233,30,99,.35); }
}

.bottom-bar-mobile {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--gris-borde);
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40; display: none;
}
@media (max-width: 760px) {
  .bottom-bar-mobile { display: block; }
  /* En el celu el único "Finalizar compra" es el de la barra inferior; el resumen queda informativo */
  .carrito-resumen .btn-cta { display: none; }
}

/* ===== Carrito ===== */
.pagina-carrito { max-width: var(--ancho); margin: 0 auto; padding: 0 0 110px; }
.pagina-carrito__titulo { padding: 6px 16px 0; font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; }
.pagina-carrito .seccion__subtitulo { padding: 0 16px; }
.carrito-layout { display: flex; flex-direction: column; gap: 18px; padding: 0 16px; flex-wrap: nowrap; }
.carrito-lista { display: flex; flex-direction: column; gap: 12px; flex-wrap: nowrap; flex: 1; min-width: 0; }
.carrito-item {
  display: flex; gap: 14px; background: #fff; border-radius: var(--radio); padding: 12px;
  box-shadow: var(--sombra); align-items: center; flex-wrap: nowrap;
}
.carrito-item img { width: 76px; height: 92px; object-fit: cover; border-radius: var(--radio-chico); flex-shrink: 0; background: var(--gris-foto); }
.carrito-item__info { flex: 1; min-width: 0; }
.carrito-item__nombre { font-size: .92rem; font-weight: 600; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrito-item__talle { font-size: .8rem; color: var(--gris-texto); margin: 0 0 8px; }
.carrito-item__derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
.carrito-item__precio { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .98rem; margin: 0; }
.carrito-item__quitar {
  color: var(--gris-texto); font-size: .78rem; font-weight: 600; text-decoration: underline;
  transition: color var(--trans); padding: 0;
}
@media (hover: hover) { .carrito-item__quitar:hover { color: #B71C1C; } }
.carrito-item__quitar:active { color: #B71C1C; }

.carrito-resumen {
  background: #fff; border-radius: var(--radio); padding: 20px;
  box-shadow: var(--sombra); flex-shrink: 0;
}
.carrito-resumen h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }
.carrito-resumen__linea {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .95rem; margin-bottom: 14px; flex-wrap: nowrap;
}
.carrito-resumen__linea span:last-child { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.15rem; }

/* ===== Checkout ===== */
.pagina-checkout { max-width: var(--ancho); margin: 0 auto; padding: 0 16px 48px; }
.pagina-checkout__titulo { padding-top: 6px; font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; }
.checkout-layout { display: flex; flex-direction: column; gap: 18px; flex-wrap: nowrap; align-items: stretch; }
.form-checkout { display: flex; flex-direction: column; gap: 18px; flex-wrap: nowrap; flex: 1; min-width: 0; }
.form-checkout__bloque {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 20px; display: flex; flex-direction: column; gap: 14px; flex-wrap: nowrap;
}
.form-checkout__bloque h2 {
  font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.form-checkout__paso {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: var(--negro); color: #fff;
  font-size: .78rem; font-weight: 700; font-family: 'Inter', sans-serif;
}
.form-checkout__bloque label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--gris-texto); flex-wrap: nowrap; }
.form-checkout__bloque input, .form-checkout__bloque textarea {
  border: 1.5px solid var(--gris-borde); border-radius: var(--radio-chico);
  padding: 13px 14px; font-weight: 400; font-size: .95rem; color: var(--tinta);
  background: var(--fondo); outline: none; width: 100%;
  transition: border-color var(--trans), background var(--trans);
}
.form-checkout__bloque input:focus, .form-checkout__bloque textarea:focus { border-color: var(--fucsia); background: #fff; }
.form-checkout__condicional { display: flex; flex-direction: column; gap: 14px; flex-wrap: nowrap; }
.form-checkout__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.chips-opciones { display: flex; flex-direction: column; gap: 10px; flex-wrap: nowrap; }
.chip-radio {
  position: relative; display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--gris-borde); border-radius: var(--radio-chico);
  padding: 14px 16px; font-size: .92rem; font-weight: 500; flex-wrap: nowrap;
  cursor: pointer; background: #fff; transition: border-color var(--trans), background var(--trans);
}
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.form-checkout__bloque label.chip-radio {
  flex-direction: row; align-items: center; gap: 12px;
  font-size: .92rem; font-weight: 500; color: var(--tinta); text-align: left;
}
.chip-radio__punto {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #C4C4CA; background: #fff; transition: border-color var(--trans), box-shadow var(--trans);
}
.chip-radio:has(input:checked) { border-color: var(--fucsia); background: rgba(233,30,99,.04); }
.chip-radio:has(input:checked) .chip-radio__punto {
  border-color: var(--fucsia); box-shadow: inset 0 0 0 4.5px #fff; background: var(--fucsia);
}
.chip-radio__icono {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fondo); color: var(--gris-texto);
  transition: background var(--trans), color var(--trans);
}
.chip-radio__icono svg { width: 21px; height: 21px; }
.chip-radio:has(input:checked) .chip-radio__icono { background: rgba(233,30,99,.1); color: var(--fucsia-oscuro); }
.chip-radio__texto { display: flex; flex-direction: column; flex-wrap: nowrap; min-width: 0; }
.chip-radio__texto small { color: var(--gris-texto); font-size: .78rem; font-weight: 400; }
@media (hover: hover) { .chip-radio:hover { border-color: var(--fucsia); } }
.chip-radio:active { transform: scale(.99); }

.form-checkout__cupon { display: flex; gap: 10px; flex-wrap: nowrap; }
.form-checkout__cupon input { flex: 1; min-width: 0; }
.form-checkout__cupon .btn-outline { flex-shrink: 0; padding: 11px 20px; font-size: .86rem; }

.checkout-resumen {
  background: #fff; border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 20px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; flex-wrap: nowrap;
}
.checkout-resumen h2 { font-size: 1.05rem; font-weight: 700; }
.checkout-resumen__item { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--gris-texto); flex-wrap: nowrap; }
.checkout-resumen__item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.checkout-resumen__item span:last-child { flex-shrink: 0; }
.checkout-resumen__total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--gris-borde); padding-top: 12px; margin-top: 4px;
  font-weight: 600; flex-wrap: nowrap;
}
.checkout-resumen__total span:last-child { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.25rem; }

/* ===== Resultado / consulta de pedido ===== */
.pagina-resultado { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 24px 16px; }
.resultado-card {
  background: #fff; border-radius: 20px; padding: 40px 28px; text-align: center;
  max-width: 440px; width: 100%; box-shadow: var(--sombra-media);
}
.resultado-card__icono {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: rgba(233,30,99,.1); color: var(--fucsia);
}
.resultado-card--exito .resultado-card__icono { background: #E8F5E9; color: #2E7D32; }
.resultado-card--pendiente .resultado-card__icono { background: #FFF8E1; color: #B28704; }
.resultado-card--error .resultado-card__icono { background: #FDECEC; color: #B71C1C; }
.resultado-card h1 { font-size: 1.45rem; font-weight: 800; margin-bottom: 8px; }
.resultado-card p { color: var(--gris-texto); margin: 0 0 6px; }
.resultado-card__numero { margin-top: 14px; font-size: 1rem; color: var(--tinta); }
.resultado-card .btn-cta { margin-top: 22px; }

.pagina-consulta { max-width: 560px; margin: 0 auto; padding: 0 16px 48px; }
.pagina-consulta .pagina-checkout__titulo { padding-top: 6px; }

/* ===== Footer ===== */
.sitio-footer { background: var(--negro); color: #C9C9CE; padding: 30px 16px 18px; margin-top: 44px; }
.sitio-footer__grid { display: flex; flex-direction: column; gap: 20px; max-width: var(--ancho); margin: 0 auto; flex-wrap: nowrap; }
.sitio-footer__col { display: flex; flex-direction: column; gap: 7px; font-size: .84rem; flex-wrap: nowrap; }
.sitio-footer__col p { margin: 0; }
.sitio-footer__col a { transition: color var(--trans); }
@media (hover: hover) { .sitio-footer__col a:hover { color: #fff; } }
.sitio-footer__col a:active { color: #fff; }
.sitio-footer__col h3 {
  color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 4px;
}
.sitio-footer__logo { height: 44px; width: 44px; object-fit: contain; margin-bottom: 4px; }
.sitio-footer__marca { font-family: 'Outfit', sans-serif; font-weight: 800; color: #fff; font-size: 1.05rem; margin: 0 0 4px; }
.sitio-footer__marca em { font-style: normal; color: var(--fucsia); }
.sitio-footer__redes { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.sitio-footer__redes a { font-weight: 600; color: #fff; border-bottom: 1.5px solid var(--fucsia); padding-bottom: 1px; }
.sitio-footer__copy {
  text-align: center; font-size: .74rem; color: #7A7A82; margin: 20px auto 0;
  max-width: var(--ancho); border-top: 1px solid #2C2C30; padding-top: 14px;
}
.sitio-footer__firma { display: inline-block; }
.sitio-footer__firma::before { content: '· '; color: #55555C; margin: 0 2px; }
.sitio-footer__firma a { color: #A9A9B2; font-weight: 600; border-bottom: 1px solid #55555C; padding-bottom: 1px; }
@media (hover: hover) { .sitio-footer__firma a:hover { color: #fff; } }

/* ===== WhatsApp flotante ===== */
.whatsapp-flotante {
  position: fixed; bottom: 20px; right: 16px; width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.4); z-index: 45; transition: transform var(--trans);
}
@media (hover: hover) { .whatsapp-flotante:hover { transform: scale(1.06); } }
.whatsapp-flotante:active { transform: scale(.94); }
@media (max-width: 760px) { .whatsapp-flotante { bottom: 86px; } }

/* ===== Popup ===== */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(15,15,18,.6); backdrop-filter: blur(3px);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.popup-card {
  background: #fff; border-radius: 20px; max-width: 420px; width: 100%;
  position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: popup-in .25s ease;
}
@keyframes popup-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.popup-card img { width: 100%; }
.popup-card h3 { margin: 18px 20px 4px; font-size: 1.2rem; font-weight: 800; }
.popup-card .btn-cta { margin: 14px 20px 20px; }
.popup-card__cerrar {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15,15,18,.55); color: #fff; font-size: 1.25rem; line-height: 1; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.popup-card__cerrar:active { transform: scale(.9); }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(16px);
  background: var(--negro); color: #fff; font-size: .88rem; font-weight: 600;
  padding: 13px 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 110; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--error { background: #B71C1C; }
@media (min-width: 761px) { .toast { bottom: 36px; } }

/* ===== Desktop ===== */
@media (min-width: 761px) {
  .sitio-header__top { gap: 16px; }
  .prod-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .seccion { padding-top: 56px; }
  .hero-carousel__texto { padding: 52px 56px; }
  .hero-carousel__texto h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
  .hero-carousel__dots { bottom: 22px; right: 48px; }

  .producto-detalle { flex-direction: row; gap: 44px; padding-top: 16px; }
  .producto-detalle__galeria { flex: 0 1 430px; min-width: 0; }
  .producto-detalle__info { flex: 1; min-width: 0; padding-top: 8px; max-width: 520px; }

  .carrito-layout { flex-direction: row; align-items: flex-start; gap: 28px; }
  .carrito-resumen { width: 340px; position: sticky; top: 92px; }

  .checkout-layout { flex-direction: row; align-items: flex-start; gap: 28px; }
  .checkout-resumen { width: 360px; position: sticky; top: 92px; }
  .chips-opciones { flex-direction: row; flex-wrap: wrap; }
  .chips-opciones .chip-radio { flex: 1 1 180px; }

  .sitio-footer__grid { flex-direction: row; justify-content: space-between; gap: 48px; }
  .sitio-footer__col { max-width: 320px; }
}

/* ===== Ajustes finos mobile ===== */
@media (max-width: 760px) {
  .hero-carousel__texto { padding: 22px 18px; }
  .hero-carousel__texto p { margin: 6px 0 14px; }
  .hero-carousel__dots { bottom: 12px; right: 20px; }
  .seccion { padding: 32px 16px 8px; }
  .seccion__titulo { font-size: 1.15rem; }
  .cat-grid { gap: 10px; }
  .prod-grid { gap: 10px; }
  .banner-split { margin-top: 36px; padding: 0 12px; }
  .banner-split__texto { padding: 24px 20px; }
  .banner-split__texto h2 { font-size: 1.35rem; }
  .seccion--cta { margin: 36px 12px 0; padding: 36px 20px; }
}

/* ===== Detalles de ecommerce: cards y producto ===== */
.badge-nuevo {
  position: absolute; top: 0; left: 0; background: var(--negro); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 0;
}
.prod-card__agotado {
  position: absolute; inset: auto 0 0 0; background: rgba(26,26,26,.78); color: #fff;
  text-align: center; font-size: .78rem; font-weight: 600; padding: 7px 8px;
}
.prod-card__categoria {
  margin: 0 0 2px; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gris-texto);
}
.prod-card__efectivo { margin: 3px 0 0; font-size: .78rem; font-weight: 600; color: #1B7A3D; }
.prod-card__talles {
  margin: 7px 0 0; font-size: .74rem; color: var(--gris-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.producto-detalle__migas { display: flex; gap: 7px; font-size: .8rem; color: var(--gris-texto); margin-bottom: 8px; flex-wrap: wrap; }
.producto-detalle__migas a { font-weight: 600; transition: color var(--trans); }
@media (hover: hover) { .producto-detalle__migas a:hover { color: var(--fucsia-oscuro); } }
.producto-detalle__efectivo { margin: -6px 0 2px; font-size: .9rem; color: #1B7A3D; }
.producto-detalle__efectivo strong { font-size: .98rem; }
.producto-detalle__cuotas { margin: 0 0 14px; font-size: .84rem; color: var(--gris-texto); }

.stock-aviso { margin: 10px 0 0; font-size: .84rem; font-weight: 600; color: var(--fucsia-oscuro); }

.compra-info {
  list-style: none; margin: 22px 0 0; padding: 16px 18px;
  background: var(--fondo); border: 1px solid var(--gris-borde); border-radius: var(--radio);
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px;
}
.compra-info li { display: flex; align-items: center; gap: 11px; font-size: .86rem; color: var(--tinta); }
.compra-info svg { width: 21px; height: 21px; flex: 0 0 21px; color: var(--fucsia-oscuro); }

/* ===== Catálogo: head + toolbar + filtros activos ===== */
.catalogo-head { display: flex; align-items: baseline; gap: 10px; padding: 0 16px; max-width: var(--ancho); margin: 0 auto; flex-wrap: wrap; }
.catalogo-head__conteo { margin: 0; color: var(--gris-texto); font-size: .88rem; }
.catalogo-head__conteo strong { color: var(--negro); }

.catalogo-toolbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; gap: 8px; align-items: center;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  padding: 10px 16px; max-width: var(--ancho); margin: 10px auto 0;
  transition: box-shadow var(--trans);
}
.catalogo-toolbar.pegada { box-shadow: 0 6px 18px rgba(26,26,26,.08); }
.toolbar-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--gris-borde); background: #fff; border-radius: 999px;
  padding: 10px 18px; font-weight: 600; font-size: .88rem; color: var(--negro);
  transition: border-color var(--trans), background var(--trans), transform var(--trans);
}
@media (hover: hover) { .toolbar-btn:hover { border-color: var(--negro); } }
.toolbar-btn:active { transform: scale(.96); }
.toolbar-btn--icono { width: 42px; height: 42px; padding: 0; justify-content: center; }
.toolbar-btn__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--gradiente); color: #fff; font-size: .68rem; font-weight: 700;
}
.catalogo-buscar { padding: 4px 16px 0; max-width: var(--ancho); margin: 0 auto; }
.catalogo-buscar input {
  width: 100%; border: 1.5px solid var(--gris-borde); border-radius: 999px;
  padding: 11px 18px; font-size: .92rem; outline: none; background: var(--fondo);
  transition: border-color var(--trans), background var(--trans);
}
.catalogo-buscar input:focus { border-color: var(--fucsia); background: #fff; }

.filtros-activos {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px 0; max-width: var(--ancho); margin: 0 auto;
}
.chip-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(233,30,99,.08); border: 1.5px solid rgba(233,30,99,.35);
  color: var(--fucsia-oscuro); border-radius: 999px; padding: 7px 14px;
  font-size: .82rem; font-weight: 600; transition: background var(--trans);
}
.chip-filtro span { font-size: .95rem; line-height: 1; }
.chip-filtro:active { background: rgba(233,30,99,.16); }
.chip-limpiar { font-size: .82rem; font-weight: 600; color: var(--gris-texto); text-decoration: underline; padding: 7px 4px; }

/* ===== Bottom sheet de filtros ===== */
.sheet-fondo {
  position: fixed; inset: 0; background: rgba(26,26,26,.45); z-index: 90;
  opacity: 0; transition: opacity .22s ease;
}
.sheet-fondo.visible { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: #fff; border-radius: 20px 20px 0 0;
  transform: translateY(104%); transition: transform .26s ease;
  display: flex; flex-direction: column; flex-wrap: nowrap;
  max-height: 84vh; box-shadow: 0 -10px 40px rgba(26,26,26,.18);
}
.sheet.abierto { transform: translateY(0); }
@media (min-width: 761px) {
  .sheet { left: 50%; right: auto; width: 460px; transform: translate(-50%, 104%); }
  .sheet.abierto { transform: translate(-50%, 0); }
}
.sheet__handle { width: 42px; height: 4px; border-radius: 999px; background: var(--gris-borde); margin: 10px auto 0; flex-shrink: 0; }
.sheet__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 12px; border-bottom: 1px solid var(--gris-borde); flex-shrink: 0;
}
.sheet__cabecera h2 { font-size: 1.05rem; font-weight: 800; }
.sheet__cerrar {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--fondo); padding: 0;
}
.sheet__cerrar:active { transform: scale(.92); }
.sheet__cuerpo { overflow-y: auto; padding: 6px 20px 14px; }
.sheet__seccion { padding: 14px 0 4px; }
.sheet__seccion h3 { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris-texto); margin-bottom: 10px; }
.sheet-radios { display: flex; flex-direction: column; flex-wrap: nowrap; }
.sheet-radio {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px; font-size: .92rem; font-weight: 500; color: var(--tinta);
  border-bottom: 1px solid var(--gris-borde); text-align: left;
}
.sheet-radio:last-child { border-bottom: none; }
.sheet-radio__punto {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--gris-borde);
  flex-shrink: 0; transition: border-color var(--trans), box-shadow var(--trans);
}
.sheet-radio--activo { font-weight: 700; }
.sheet-radio--activo .sheet-radio__punto { border-color: var(--fucsia); box-shadow: inset 0 0 0 4.5px var(--fucsia); }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-chip {
  border: 1.5px solid var(--gris-borde); background: #fff; border-radius: 999px;
  padding: 10px 17px; font-size: .86rem; font-weight: 600; color: var(--tinta);
  transition: border-color var(--trans), background var(--trans), color var(--trans), transform var(--trans);
}
.sheet-chip:active { transform: scale(.95); }
.sheet-chip--activo { background: rgba(233,30,99,.08); border-color: var(--fucsia); color: var(--fucsia-oscuro); }
.sheet__pie {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gris-borde); flex-shrink: 0;
}
.sheet__limpiar { font-weight: 600; font-size: .9rem; color: var(--gris-texto); padding: 10px 6px; flex-shrink: 0; }
.sheet__limpiar[disabled] { opacity: .4; }
.sheet__pie .btn-cta { flex: 1; }
.estado-vacio .btn-outline { margin-top: 14px; }
.anim-lottie { margin: 0 auto; }
.anim-lottie--vacio { width: 170px; height: 170px; margin-bottom: 4px; }
.anim-lottie--carrito { width: 150px; height: 150px; margin-bottom: 2px; }
.estado-vacio .btn-cta { margin-top: 16px; display: inline-block; color: #fff; }
.anim-lottie--exito { width: 110px; height: 110px; margin-bottom: 10px; }

/* ===== Checkout fácil (mobile primero) ===== */
.checkout-mini {
  display: none; background: var(--fondo); border: 1px solid var(--gris-borde);
  border-radius: var(--radio-chico); padding: 0; margin: 4px 0 16px; overflow: hidden;
}
.checkout-mini summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px; font-size: .9rem; cursor: pointer;
}
.checkout-mini summary::-webkit-details-marker { display: none; }
.checkout-mini__ver { font-size: .82rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.checkout-mini[open] .checkout-mini__ver { display: none; }
.checkout-mini__items { padding: 0 16px 12px; border-top: 1px solid var(--gris-borde); }

.cupon-plegado { margin: 2px 0 18px; }
.cupon-plegado summary {
  list-style: none; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--negro);
  text-decoration: underline; text-underline-offset: 3px; padding: 4px 0;
}
.cupon-plegado summary::-webkit-details-marker { display: none; }
.cupon-plegado[open] summary { text-decoration: none; color: var(--gris-texto); }
.cupon-plegado .form-checkout__cupon { margin-top: 10px; }

.form-checkout__nota { margin-top: 10px; }

@media (max-width: 760px) {
  .checkout-mini { display: block; }
  .pagina-checkout { padding-bottom: 110px; }
  .form-checkout__confirmar, .form-checkout__nota { display: none; }
  .checkout-resumen { display: none; }
}

/* ===== DNI con autocompletado en checkout ===== */
.campo-dni { position: relative; display: block; }
.campo-dni input { width: 100%; padding-right: 40px; }
.campo-dni__estado {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: #1B7A3D; font-weight: 700; font-size: 1rem;
}
.cliente-alerta {
  background: #EAF6EE; border: 1px solid rgba(27,122,61,.3); color: #14532D;
  border-radius: var(--radio-chico); padding: 11px 14px; font-size: .86rem; font-weight: 500;
  margin: 10px 0 2px;
}

/* ===== Checkout UX: totales en vivo, estados y animaciones ===== */
.checkout-resumen__linea {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: .92rem; color: var(--tinta); padding: 6px 0;
}
.checkout-resumen__linea--verde, .checkout-resumen__item--verde { color: #1B7A3D; font-weight: 600; }
.checkout-resumen__total {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-top: 1px solid var(--gris-borde); margin-top: 8px; padding-top: 12px;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--negro);
}
.total-vivo { display: inline-block; }
.total-vivo.bump { animation: bump .35s ease; }

.microcopy--ok { color: #1B7A3D; font-weight: 600; }
.microcopy--error { color: #B71C1C; font-weight: 600; }

/* Botón confirmando */
.btn-cta--procesando { opacity: .85; pointer-events: none; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: girar .7s linear infinite; vertical-align: -3px; margin-right: 6px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Validación amable sin JS (solo tras interactuar) */
.form-checkout input:user-valid:not([type="radio"]) { border-color: #9CCDAD; }
.form-checkout input:user-invalid:not([type="radio"]) { border-color: #E3A9A9; }

/* Entradas con vida */
.cliente-alerta { animation: aparecer .3s ease; }
.form-checkout__condicional { animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.chip-radio { transition: border-color var(--trans), background var(--trans), box-shadow var(--trans); }
.chip-radio:has(input:checked) { box-shadow: 0 0 0 1.5px var(--fucsia); }

.resumen-seguro { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.anim-lottie--seguro { width: 26px; height: 26px; flex-shrink: 0; }
.resumen-seguro--mobile { display: none; }
@media (max-width: 760px) { .resumen-seguro--mobile { display: flex; margin-bottom: 4px; } }

/* ===== Agregado rápido desde la card ===== */
.prod-card__fila-precio {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap;
}
.prod-card__quick {
  position: relative; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%; background: var(--fondo); color: var(--negro);
  border: 1.5px solid var(--gris-borde);
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: transform var(--trans), background var(--trans), color var(--trans), border-color var(--trans);
}
.prod-card__quick svg { width: 17px; height: 17px; }
.prod-card__quick-mas {
  position: absolute; top: 2px; right: 4px; font-size: .74rem; font-weight: 800; line-height: 1;
}
@media (hover: hover) { .prod-card__quick:hover { background: var(--negro); color: #fff; border-color: var(--negro); } }
.prod-card__quick:active { transform: scale(.9); }

.qa-fondo {
  position: fixed; inset: 0; background: rgba(26,26,26,.45); z-index: 110;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.qa-fondo--visible { opacity: 1; pointer-events: auto; }
.qa-sheet {
  background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 480px;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(14px); transition: transform .22s ease;
}
.qa-fondo--visible .qa-sheet { transform: none; }
.qa-sheet__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.qa-sheet__titulo { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--negro); }
.qa-sheet__nombre { margin: 2px 0 0; font-size: .85rem; color: var(--gris-texto); }
.qa-sheet__cerrar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--fondo);
  font-size: 1.3rem; line-height: 1; flex-shrink: 0; padding: 0;
}
.qa-sheet__talles { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 761px) {
  .qa-fondo { align-items: center; }
  .qa-sheet { border-radius: 20px; }
}

/* ===== Botón de compra (verde, invita a comprar) ===== */
.btn-comprar {
  background: linear-gradient(135deg, #00A650, #008A43);
  box-shadow: 0 6px 18px rgba(0,166,80,.32);
}
@media (hover: hover) { .btn-comprar:hover { background: linear-gradient(135deg, #00B257, #00984A); box-shadow: 0 8px 22px rgba(0,166,80,.4); } }
.btn-comprar:active { transform: scale(.97); }
.btn-comprar[disabled] { box-shadow: none; }

/* ============================================================
   Catálogo editorial: tapa, filtros al costado y pieza promo
   ============================================================ */
.cat-tapa {
  max-width: var(--ancho); margin: 0 auto; padding: 26px 16px 10px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cat-tapa .link-volver { display: inline-block; font-size: .82rem; color: var(--gris-texto); margin-bottom: 14px; }
@media (hover: hover) { .cat-tapa .link-volver:hover { color: var(--negro); } }
.cat-tapa__kicker {
  margin: 0 0 10px; display: flex; align-items: center; gap: 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--fucsia);
}
.cat-tapa__kicker::after { content: ""; height: 1px; width: 56px; background: var(--fucsia); }
.cat-tapa__h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: .92;
}
.cat-tapa__lado { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 8px; padding-bottom: 6px; }
.cat-tapa__dato { margin: 0; text-align: right; }
.cat-tapa__dato strong { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 800; }
.cat-tapa__dato span { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-texto); }
.cat-tapa__orden label { font-size: .84rem; color: var(--gris-texto); display: flex; align-items: center; gap: 8px; }
.cat-tapa__orden select {
  border: none; background: none; font-weight: 700; color: var(--negro); font-size: .88rem;
  border-bottom: 2px solid var(--negro); padding: 3px 2px;
}

.catalogo-cuerpo { max-width: var(--ancho); margin: 10px auto 0; padding: 0 16px; }
.catalogo-main { min-width: 0; }
.prod-grid--catalogo { padding: 0; }

/* Filtros laterales tipo Mercado Libre (solo escritorio) */
.filtros-lado { display: none; }
@media (min-width: 981px) {
  .catalogo-cuerpo { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 40px; align-items: start; }
  .filtros-lado { display: block; position: sticky; top: 92px; }
  .catalogo-toolbar, .catalogo-buscar, .filtros-activos--mobile { display: none !important; }
  .prod-grid--catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
}
.filtros-lado__aplicados { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.chip-aplicado {
  display: inline-flex; align-items: center; gap: 8px; background: var(--negro); color: #fff;
  font-size: .76rem; font-weight: 600; padding: 6px 12px;
}
.chip-aplicado i { font-style: normal; opacity: .6; }
@media (hover: hover) { .chip-aplicado:hover i { opacity: 1; } }
.filtros-lado__limpiar { font-size: .78rem; color: var(--gris-texto); text-decoration: underline; text-underline-offset: 3px; }
.filtros-lado__sec { padding: 20px 0; border-top: 1px solid var(--gris-borde); }
.filtros-lado__sec:first-of-type { border-top: none; padding-top: 0; }
.filtros-lado__sec h3 {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px;
}
.filtros-lado__sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 9px; }
.filtros-lado__sec ul a { font-size: .9rem; color: var(--gris-texto); }
@media (hover: hover) { .filtros-lado__sec ul a:hover { color: var(--negro); } }
.filtros-lado__sec .f-n { font-size: .76rem; color: #B5A89F; }
.filtros-lado__sec a.f-activo {
  color: var(--fucsia); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--fucsia); padding-left: 10px; margin-left: -10px;
}
.filtros-lado__talles { display: flex; flex-wrap: wrap; gap: 8px; }
.talle-filtro {
  min-width: 40px; text-align: center; border: 1.5px solid var(--gris-borde); background: #fff;
  padding: 7px 5px; font-size: .8rem; font-weight: 600;
}
@media (hover: hover) { .talle-filtro:not(.talle-filtro--on):hover { border-color: var(--negro); } }
.talle-filtro--on { border-color: var(--negro); background: var(--negro); color: #fff; }
.filtros-lado__rango { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--gris-texto); }
.filtros-lado__rango input {
  width: 0; flex: 1; border: 1.5px solid var(--gris-borde); background: #fff; padding: 8px 9px; font-size: .82rem;
}
.filtros-lado__rango input:focus { outline: none; border-color: var(--negro); }
.filtros-lado__aplicar {
  margin-top: 12px; width: 100%; border: 1.5px solid var(--negro); background: var(--negro); color: #fff;
  padding: 11px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background var(--trans), border-color var(--trans);
}
@media (hover: hover) { .filtros-lado__aplicar:hover { background: var(--fucsia); border-color: var(--fucsia); } }

/* Pieza promocional negra intercalada en la grilla */
.pieza-promo {
  background: var(--negro); color: #fff; aspect-ratio: 4/5;
  display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; padding: 24px;
}
.pieza-promo small {
  font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #FF8AB5; margin-bottom: 10px;
}
.pieza-promo strong {
  font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
}
.pieza-promo span {
  margin-top: 16px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
@media (hover: hover) { .pieza-promo:hover span { color: #FF8AB5; } }
@media (max-width: 980px) { .pieza-promo { aspect-ratio: auto; padding: 22px; } }

/* Botón a Instagram cuando el cupón agotó su tope de usos */
.btn-instagram-cupon {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .85rem;
  color: #fff !important; text-decoration: none;
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
  border-radius: 999px; padding: 8px 18px;
}
.btn-instagram-cupon::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="white" stroke="none"/></svg>');
}
@media (hover: hover) { .btn-instagram-cupon:hover { filter: brightness(1.08); } }
.btn-instagram-cupon:active { transform: scale(.97); }

/* ===== Cursor de marca: degradé negro→fucsia (elección de Pablo, modelo C3 del mockup) =====
   Solo en dispositivos con mouse; el táctil no se entera. Los campos de texto conservan la barra I. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 24 24"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%231A1A1A"/><stop offset="1" stop-color="%23E91E63"/></linearGradient></defs><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.45 0 .67-.54.35-.85L6.35 2.85a.5.5 0 0 0-.85.36Z" fill="url(%23g)" stroke="white" stroke-width="1.4"/></svg>') 8 5, auto;
  }
  a, button, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"],
  select, label, summary, [role="button"] {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%23E91E63"/><stop offset="1" stop-color="%23880E4F"/></linearGradient></defs><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.45 0 .67-.54.35-.85L6.35 2.85a.5.5 0 0 0-.85.36Z" fill="url(%23g)" stroke="white" stroke-width="1.4"/></svg>') 9 6, pointer;
  }
}