/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #011D27;
  --white: #fff;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #eee;
  --gray-400: #999;
  --gray-600: #666;
  --accent: #008DD5;
  --radius: 16px;
  --max: 1280px;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--black);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  background: #fff;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  z-index: 100;
}

.header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }

.nav__list { display: flex; gap: 28px; list-style: none; }

.nav__list a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  transition: color .2s;
}
.nav__list a:hover { color: var(--black); }


.nav__list a.active {
  color: var(--accent);
  font-weight: 600;
  position: relative;
}

.nav__list a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.header__actions { display: flex; align-items: center; gap: 8px; }

.logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--black);
  transition: opacity .2s;
}

.logo span {
  color: var(--accent);
  margin-left: 4px;
}

.logo:hover {
  opacity: 0.85;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  position: relative;
  transition: background .2s;
}
.icon-btn:hover { background: var(--gray-100); }

.cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

.menu-btn { display: none; font-size: 20px; }

/* ===== CARRUSEL ===== */
.slider {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--black);
}

.slider__track {
  display: flex;
  transition: transform .5s ease;
}

.slide {
  flex: 0 0 100%;
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1309;
  overflow: hidden;
}

.slide > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.slide__actions {
  position: absolute;
  bottom: 30px;
  left: 80px;
  display: flex;
  gap: 16px;
  z-index: 2;
}


.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--black);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 5;
  cursor: pointer;
}

.slider__arrow--prev { left: 24px; }
.slider__arrow--next { right: 24px; }

.slider__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: all .2s;
  cursor: pointer;
}

.slider__dot.active {
  background: #fff;
  width: 32px;
  border-radius: 5px;
}




/* ===== BOTONES ===== */
.btn {
  padding: 13px 28px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  display: inline-block;
}
.btn--primary { background: var(--black); color: #fff; }
.btn--primary:hover { background: var(--accent); }
.btn--light { background: #fff; color: var(--black); }
.btn--light:hover { background: var(--accent); color: #fff; }
.btn--ghost { background: transparent; border: 1px solid var(--gray-200); color: var(--black); }
.btn--ghost:hover { border-color: var(--black); }
.btn--full { width: 100%; }

/* ===== SECCIONES ===== */
.section { max-width: var(--max); margin: 0 auto; padding: 60px 32px; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 20px;
  flex-wrap: wrap;
}

.section__head h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }

.link-more { font-size: 14px; color: var(--gray-600); transition: color .2s; }
.link-more:hover { color: var(--black); }

/* ===== GRID ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 24px;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.card__img {
  height: 200px;
  object-fit: contain;
  margin: 0 auto 16px;
  display: block;
}

.card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__desc {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 14px;
  line-height: 1.4;
}

.card__price {
  font-size: 22px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.card__actions {
  margin-top: auto;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.card__btn {
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s, color .2s, transform .2s;
}

.card__btn:hover {
  transform: translateY(-1px);
}

.card__btn--buy {
  background: var(--accent);
  color: #fff;
  flex: 1;
}

.card__btn--buy:hover {
  background: #0077b6;
}

.card__btn--add {
  background: var(--gray-100);
  color: var(--black);
}

.card__btn--add:hover {
  background: var(--gray-200);
}

/* ===== FEATURE (hero secundario) ===== */
.feature {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  align-items: center;
  gap: 60px;
  padding: 0;
  margin: 80px 0;
  max-width: 100%;
  min-height: 600px;
}

.feature--dark {
  background: var(--black);
  color: #fff;
}

.feature--reverse {
  grid-template-columns: 1.5fr 1fr;
}

.feature--reverse .feature__content { order: 2; }
.feature--reverse .feature__image   { order: 1; }

.feature__content { 
  padding: 60px;
  max-width: 100%; }

.feature__title {
  font-size: clamp(28px, 4vw, 80px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 14px;
}

.feature__subtitle {
  font-size: 16px;
  opacity: 0.75;
  margin-bottom: 26px;
}

.feature__image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.feature__image img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .feature,
  .feature--reverse {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 50px 24px;
    min-height: auto;
    gap: 30px;
  }
  .feature__image {
    order: -1;
    height: 300px;
  }
  .feature--reverse .feature__content { order: 0; }
  .feature--reverse .feature__image   { order: -1; }
}

/* ===== HERO SECUNDARIO 1 (feature--full): imagen al 100% + botón abajo a la izquierda =====
   DISEÑO DE IMAGEN (desktop first) — MEDIDA EXACTA, SIN ZONA SEGURA
   - Diseñar 2400 x 750 px (3.2:1), WebP <= 120 KB. Se respeta sin recorte.
   - La caja toma la proporción del diseño: alto = ancho / 3.2
       1280 -> 400px | 1440 -> 450px | 1920 -> 600px | 2240 -> 700px
   - Recorte 0 hasta 2240px de ancho (límite del max-height).
   - max-height: 700px evita heroes gigantes en pantallas anchas; POR ENCIMA
     de 2240px empieza el único recorte: 12.5% a 2560 (47px por borde).
   - min-height va en @supports: solo aplica en navegadores SIN aspect-ratio
     (fallback). Si estuviera suelto, forzaría 500px por debajo de 1600px y
     reintroduciría recorte horizontal (5% a 1440, 10% a 1280).
   - Inf. izquierda despejada: el overlay "Nuevo" + botón es HTML, no se recorta.
   MOBILE (<=860px, no prioritario): mantiene min-height 420px con cover, se ve
   ~29% central del ancho. Mejorar después con object-position o retrato 900x1100.
*/
.feature.feature--full {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 2400 / 750;
  min-height: 0;
  max-height: 700px;
  overflow: hidden;
}

@supports not (aspect-ratio: 1) {
  .feature.feature--full { min-height: 500px; }
}

.feature.feature--full .feature__image {
  position: absolute;
  inset: 0;
  height: 100%;
}

.feature.feature--full .feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature.feature--full .feature__content {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 40px 40px 40px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (max-width: 860px) {
  .feature.feature--full {
    min-height: 220px;
  }
  .feature.feature--full .feature__content {
    padding: 20px;
  }
  .feature.feature--full .feature__content .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  .feature.feature--full .feature__image img {
    object-fit: contain;
    background: var(--white);
  }
}

/* ===== SPLIT ===== */
.split {
  max-width: var(--max);
  margin: 40px auto 80px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.split__item {
  background: var(--white);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .25s;
}
.split__item:hover { transform: translateY(-4px); }

.split__text h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.split__text p { font-size: 14px; color: var(--gray-600); margin-bottom: 16px; }
.split__item img { width: 100%; border-radius: 7px; margin-top: auto; }

/* ===== BANNER ===== */
.banner {
  background: linear-gradient(135deg, #ff6900 0%, #ff9500 100%);
  color: #fff;
  padding: 80px 32px;
  margin: 40px 0;
  text-align: center;
}

.banner__content h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 12px;
}

.banner__content p { font-size: 17px; opacity: 0.9; margin-bottom: 26px; }

/* ===== BANNER DE PAGO ===== */
.banner-pago {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 32px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  font-size: 14px;
  color: var(--black);
  line-height: 1.5;
  position: relative;
  z-index: 100;
}

.banner-pago__contenido {
  max-width: calc(var(--max) - 64px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  flex-wrap: wrap;
}

.banner-pago__texto {
  color: var(--black);
  font-weight: 500;
}

.banner-pago__texto strong {
  color: var(--accent);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 860px) {
  .banner-pago {
    padding: 12px 20px;
    font-size: 13px;
  }
  .banner-pago__contenido {
    padding: 0 20px;
  }
}

/* ===== PAGE HERO (ofertas) ===== */
.page-hero {
  background: linear-gradient(135deg, #ff6900 0%, #ff9500 100%);
  color: #fff;
  padding: 70px 32px;
  text-align: center;
}

.page-hero .hero__tag { background: rgba(255,255,255,0.2); color: #fff; }

.page-hero__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.page-hero__subtitle { font-size: 17px; opacity: 0.9; }

/* ===== FILTROS ===== */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }

.filter {
  padding: 8px 18px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 600;
  transition: all .2s;
}

.filter:hover { background: var(--gray-200); color: var(--black); }
.filter.active { background: var(--black); color: #fff; }

/* ===== CARD OFERTA ===== */
.card--oferta {
  position: relative;
}

.card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,141,213,0.3);
}

.card__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.card__price-old {
  font-size: 15px;
  color: var(--gray-400);
  text-decoration: line-through;
}

/* ===== CARRITO ===== */
.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: #fff;
  box-shadow: -8px 0 40px rgba(0,0,0,0.1);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.cart-panel.open { transform: translateX(0); }

.cart-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--gray-200);
}

.cart-panel__body { flex: 1; overflow-y: auto; padding: 20px; }
.cart-empty { color: var(--gray-400); text-align: center; margin-top: 40px; }

.cart-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

.cart-item img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: var(--gray-50);
  border-radius: 3px;
}

.cart-item__info { flex: 1; }
.cart-item__info h4 { font-size: 14px; font-weight: 600; }
.cart-item__info p { font-size: 13px; color: var(--gray-600); }

.cart-item__remove {
  font-size: 12px;
  color: var(--gray-400);
  align-self: flex-start;
}
.cart-item__remove:hover { color: var(--accent); }

.cart-panel__foot { padding: 20px; border-top: 1px solid var(--gray-200); }

.cart-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 16px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 150;
}
.overlay.open { opacity: 1; pointer-events: auto; }

/* ===== FOOTER ===== */
.footer {
  background: var(--black);
  color: var(--gray-400);
  padding: 60px 32px 24px;
}

.footer__cols {
  max-width: var(--max);
  margin: 0 auto 40px;
  display: flex;
  gap: 80px;
  flex-wrap: wrap;
}

.footer__cols h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }

.footer__cols a {
  display: block;
  font-size: 13px;
  color: var(--gray-400);
  margin-bottom: 8px;
  transition: color .2s;
}
.footer__cols a:hover { color: #fff; }

.footer__copy {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid #222;
  font-size: 12px;
  color: #555;
  text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; text-align: center; padding: 50px 24px; }
  .feature__image { order: -1; }

  .split { grid-template-columns: 1fr; padding: 0 20px; }

  .nav { display: none; }
  .menu-btn { display: grid; }
  .header__inner { padding: 10px 20px; }
  .section { padding: 40px 20px; }
}


/* ===== MENÚ MÓVIL FUNCIONAL ===== */
@media (max-width: 860px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 20px;
    display: none;
  }

  .nav.nav--open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    gap: 16px;
  }

  .nav__list a {
    font-size: 16px;
  }
}

/* ===== CARRITO FULLSCREEN EN MÓVIL ===== */
@media (max-width: 500px) {
  .cart-panel {
    width: 100%;
    max-width: 100%;
  }
}
/* ===== COMPENSAR HEADER STICKY ===== */
section[id] {
  scroll-margin-top: 90px;
}
/* ===== SPLIT CON IMAGEN FULL + BOTÓN ===== */
.split__item--media {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 380px;
  display: block;
}

.split__item--media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}

.split__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  background: transparent;
  transition: background .3s;
}

.split__item--media:hover .split__overlay {
  background: transparent;
}

.split__overlay .btn {
  padding: 12px 32px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .split__item--media {
    min-height: 280px;
  }
}

.split__item--media img {
  border-radius: 0;
  margin-top: 0;
}

/* ===== MODAL DE PRODUCTO ===== */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.modal__box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: modalIn .25s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  display: grid;
  place-items: center;
  font-size: 16px;
  z-index: 2;
  transition: background .2s;
}
.modal__close:hover { background: rgba(0,0,0,0.12); }

.modal__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Columna izquierda: imagen */
.modal__media {
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  min-height: 400px;
}

.modal__media img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

/* Columna derecha: info */
.modal__info {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.modal__desc {
  font-size: 15px;
  color: var(--gray-600);
}

.modal__price {
  font-size: 28px;
  font-weight: 800;
  color: var(--black);
}

.modal__longdesc {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
}

.modal__specs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal__specs li {
  font-size: 13px;
  color: var(--gray-600);
  padding-left: 20px;
  position: relative;
}

.modal__specs li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.modal__actions {
  margin-top: auto;
  display: flex;
  gap: 12px;
  align-items: center;
}

.modal__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 30px;
  overflow: hidden;
}

.modal__qty button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--black);
  transition: background .2s;
}
.modal__qty button:hover { background: var(--gray-100); }

.modal__qty span {
  min-width: 40px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 720px) {
  .modal__body {
    grid-template-columns: 1fr;
  }
  .modal__media {
    min-height: 260px;
    padding: 24px;
  }
  .modal__media img {
    max-height: 260px;
  }
  .modal__info {
    padding: 24px;
  }
  .modal__title { font-size: 22px; }
  .modal__price { font-size: 22px; }
}

/* ===== BANNER DE SECCIÓN (imagen de fondo + texto) ===== */
.section-banner {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
}

.section-banner img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.section-banner__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 50px 50px 50px 90px;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.section-banner__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  color: #fff;
}

.section-banner__sub {
  font-size: 16px;
  opacity: 0.95;
  margin-bottom: 8px;
  max-width: 500px;
  color: #fff;
}

.section-banner .btn {
  margin-top: 8px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .section-banner {
    min-height: 240px;
    border-radius: 0;
    margin: 20px 0;
  }
  .section-banner__overlay {
    padding: 30px 24px;
  }
  .section-banner__title {
    font-size: 24px;
  }
  .section-banner__sub {
    font-size: 14px;
  }
}

/* ===== PANEL DE BÚSQUEDA ===== */
.search-panel {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  z-index: 99;
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  max-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
}

.search-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.search-panel__inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-panel__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 20px;
  font-family: inherit;
  color: var(--black);
  background: transparent;
  padding: 10px 0;
}

.search-panel__input::placeholder {
  color: var(--gray-400);
}

.search-panel__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--gray-600);
  transition: background .2s;
}
.search-panel__close:hover { background: var(--gray-100); }

.search-panel__results {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding: 0 32px 20px;
  overflow-y: auto;
  max-height: 60vh;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  color: inherit;
}

.search-result:hover {
  background: var(--gray-50);
}

.search-result img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--gray-50);
  border-radius: 8px;
  flex-shrink: 0;
}

.search-result__info {
  flex: 1;
  min-width: 0;
}

.search-result__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result__desc {
  font-size: 13px;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  flex-shrink: 0;
}

.search-empty {
  text-align: center;
  color: var(--gray-400);
  padding: 40px 20px;
  font-size: 14px;
}

@media (max-width: 860px) {
  .search-panel { top: 64px; }
  .search-panel__inner { padding: 16px 20px; }
  .search-panel__input { font-size: 17px; }
  .search-panel__results { padding: 0 20px 16px; }
  .search-result img { width: 48px; height: 48px; }
}

/* ===== GALERÍA DEL MODAL ===== */
.modal__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.modal__thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.modal__thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  padding: 4px;
  background: #fff;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .2s;
  display: grid;
  place-items: center;
}

.modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal__thumb:hover {
  border-color: var(--gray-200);
}

.modal__thumb.active {
  border-color: var(--accent);
}

/* ===== CÓMO COMPRAR ===== */
.how-buy {
  background: var(--gray-70);
  padding: 40px 32px;   /* antes 80px */
  margin: 20px 0;       /* antes 40px */
}

.how-buy__inner {
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}

.how-buy__title {
  font-size: clamp(24px, 3.5vw, 34px);   /* antes 28-42px */
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 10px;   /* antes 16px */
}

.how-buy__lead {
  font-size: 15px;   /* antes 17px */
  color: var(--gray-600);
  max-width: 580px;
  margin: 0 auto 30px;   /* antes 50px */
}

.how-buy__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;   /* antes 24px */
  text-align: left;
}

.how-buy__step {
  background: #fff;
  border-radius: var(--radius);
  padding: 22px 20px;   /* antes 32px 28px */
  border: 1px solid var(--gray-200);
}

.how-buy__num {
  width: 34px;   /* antes 44px */
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 15px;   /* antes 18px */
  display: grid;
  place-items: center;
  margin-bottom: 12px;   /* antes 18px */
}

.how-buy__step h3 {
  font-size: 16px;   /* antes 18px */
  font-weight: 700;
  margin-bottom: 6px;   /* antes 8px */
}

.how-buy__step p {
  font-size: 13px;   /* antes 14px */
  color: var(--gray-600);
  line-height: 1.5;   /* antes 1.6 */
}

.how-buy__step strong {
  color: var(--black);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  .how-buy {
    padding: 40px 20px;
  }
  .how-buy__steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .how-buy__lead {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .how-buy__step {
    padding: 18px 16px;
  }
}

/* ===== RECORDATORIO FINAL ===== */
.final-cta {
  background: var(--black);
  color: #fff;
  padding: 80px 32px;
  text-align: center;
}

.final-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.final-cta__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
  color: #fff;
}

.final-cta__text {
  font-size: 17px;
  color: #aaa;
  margin-bottom: 30px;
  line-height: 1.6;
}

.final-cta__text strong {
  color: #fff;
}

.final-cta .btn--primary {
  background: var(--accent);
  color: #fff;
  padding: 16px 40px;
  font-size: 15px;
}

.final-cta .btn--primary:hover {
  background: #e55f00;
}

@media (max-width: 860px) {
  .final-cta {
    padding: 50px 20px;
  }
  .final-cta__text {
    font-size: 15px;
  }
}

/* ===== BOTÓN FLOTANTE WHATSAPP ===== */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 90;
  transition: transform .25s ease, box-shadow .25s ease, background .25s;
  animation: whatsappPulse 2.5s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  background: #1ebe5b;
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

.whatsapp-float svg {
  width: 34px;
  height: 34px;
}

@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50%      { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* Responsive: más chico y más cerca del borde en móvil */
@media (max-width: 860px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 18px;
    right: 18px;
  }
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}





/* Banner animado full-width */

/* Animaciones visibles - Agrega al final de css/styles.css */

.banner-fuerte {
  position: relative;
  width: 100%;
  padding: 40px 32px;
  background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
  color: #fff;
  margin: 40px 0;
  overflow: hidden;
}

.banner-fuerte::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0.1) 0deg 30deg,
    transparent 30deg 60deg,
    rgba(255,255,255,0.1) 60deg 90deg,
    transparent 90deg 120deg,
    rgba(255,255,255,0.1) 120deg 150deg,
    transparent 150deg 180deg,
    rgba(255,255,255,0.1) 180deg 210deg,
    transparent 210deg 240deg,
    rgba(255,255,255,0.1) 240deg 270deg,
    transparent 270deg 300deg,
    rgba(255,255,255,0.1) 300deg 330deg,
    transparent 330deg 360deg
  );
  animation: girarRayos 3s linear infinite;
}

@keyframes girarRayos {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.banner-fuerte__contenido {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.banner-fuerte__contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.banner-fuerte__etiqueta {
  display: inline-block;
  background: #fff;
  color: #e53935;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 25px;
  animation: parpadear 1.5s ease-in-out infinite;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

@keyframes parpadear {
  0%, 90%, 100% { opacity: 1; transform: scale(1); }
  95% { opacity: 0.4; transform: scale(0.9); }
}

.banner-fuerte__titulo {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.1;
  margin: 15px 0 20px;
  position: relative;
  display: inline-block;
  animation: tituloExplosión 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  opacity: 0;
  transform: translateY(-30px);
}

@keyframes tituloExplosión {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-fuerte__descripcion {
  font-size: 18px;
  line-height: 1.5;
  max-width: 600px;
  margin-bottom: 30px;
  animation: descripcionDeslizar 0.8s ease-out 0.2s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes descripcionDeslizar {
  to { opacity: 1; transform: translateY(0); }
}

.banner-fuerte__boton {
  background: #fff;
  color: #e53935;
  padding: 16px 36px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid #fff;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  position: relative;
  overflow: hidden;
  animation: botonSaltar 0.8s ease-out 0.4s forwards;
  opacity: 0;
  transform: translateY(30px) scale(0.8);
}

.banner-fuerte__boton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.banner-fuerte__boton:hover::before {
  left: 100%;
}

.banner-fuerte__boton:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

@keyframes botonSaltar {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== COMBOS ===== */
#combosSection {
  background: var(--white);
  max-width: var(--max);
  margin: 0 auto;
  padding: 60px 32px;
}

#combosSection .section__head {
  max-width: var(--max);
  margin: 0 auto 32px;
  background-color: #ffffff;
  padding-bottom: 24px;
  padding-left: 20px;
  border-bottom: 3px solid var(--accent);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#combosSection .section__head h2 {
  font-size: 32px;
}

.card--combo {
  background: #fff;
  border: 2px solid var(--accent);
  position: relative;
}

.card__badge--combo {
  background: var(--black);
  color: #fff;
  top: 14px;
  left: 14px;
}

.card__badge--desc {
  top: 14px;
  right: 14px;
  left: auto;
  background: var(--accent);
  color: #fff;
}

.combo__list {
  list-style: none;
  text-align: left;
  margin: 12px auto;
  padding: 0 20px;
  max-width: 100%;
}

.combo__list li {
  font-size: 13px;
  color: var(--gray-600);
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
  line-height: 1.4;
}

.combo__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.modal__incluye {
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
  margin-top: 8px;
}

.modal__incluye h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--black);
}

@media (max-width: 860px) {
  #combosSection {
    padding: 40px 20px;
  }
}



/* Clones del loop infinito: invisibles al usuario y sin clicks */
.slide--clone {
  pointer-events: none;
  user-select: none;
}

/* El track no debe saltar antes de que el JS lo posicione */
.slider__track {
  will-change: transform;
}


/* ===== MÓVIL: compactar cards y botones ===== */
@media (max-width: 700px) {

  /* --- Cards --- */
  .card {
    padding: 14px 16px;
  }

  .card__img {
    height: 150px;
    margin-bottom: 12px;
  }

  .card__title {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .card__desc {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .card__price {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .card__actions {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .card__btn {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .card__btn--buy {
    flex: 1;
  }

  .card__btn--add {
    flex: 0 0 auto;
  }

  /* --- Botones generales (incluye heroes, banners, etc.) --- */
  .btn {
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 12px;
  }

  /* Botones del carrusel: un toque más chicos */
  .slide__actions {
    bottom: 16px;
    left: 20px;
    gap: 10px;
  }

  .slide__actions .btn {
    padding: 8px 16px;
    font-size: 12px;
  }

  /* Botón del banner fuerte (tiene clase propia) */
  .banner-fuerte__boton {
    padding: 12px 24px;
    font-size: 13px;
  }

  /* Botón del CTA final */
  .final-cta .btn--primary {
    padding: 12px 26px;
    font-size: 13px;
  }
}

.card__desc--agotado {
  color: #d32f2f;
  font-weight: 700;
}

/* ===== BUSCADOR MEJORADO ===== */

.search-block {
  padding: 16px 0;
}

.search-block__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-400);
  margin-bottom: 10px;
}

.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-chip {
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--black);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}

.search-chip:hover {
  background: var(--accent);
  color: #fff;
}

/* --- Resultado con badge, categoría y precio mejorado --- */

.search-result {
  align-items: center;
  padding: 14px 16px;
  gap: 14px;
}

.search-result img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
}

.search-result__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray-600);
  text-transform: capitalize;
}

.search-result__badge {
  background: #ff4d4d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.search-result__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.search-result__price-old {
  font-size: 12px;
  color: var(--gray-400);
  text-decoration: line-through;
}

.search-result__price span {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}

/* --- Resaltado de la palabra buscada --- */

.search-result__name mark {
  background: #fff8b8;
  color: var(--black);
  padding: 0 2px;
  border-radius: 3px;
}

/* --- Empty state --- */

.search-empty {
  text-align: center;
  color: var(--gray-600);
  padding: 20px 20px 10px;
  font-size: 14px;
}

.search-empty strong {
  color: var(--black);
}