/* =====================================================================
   SAYPRES | BANNERS PROGRAMADOS · VERSIÓN MEJORADA
   - Cero imágenes, fuentes adicionales, librerías y solicitudes API.
   - No modifica clases globales de Catálogo, Inicio, Lo nuevo ni Ofertas.
   - El contenedor permite comprobar también vista de celular en el demo.
   ===================================================================== */

.sp-hero-zone {
  display: block;
  width: 100%;
  container-type: inline-size;
}
.sp-hero {
  --sp-brand: #28676E;
  --sp-deep: #154E55;
  --sp-ink: #293337;
  box-sizing: border-box;
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  min-height: 178px;
  padding: 23px clamp(20px, 4vw, 55px);
  background: #fbfaf7;
  border-bottom: 1px solid rgba(35, 78, 84, .08);
  color: var(--sp-ink);
  font-family: 'Barlow', Arial, sans-serif;
}
.sp-hero *, .sp-hero *::before, .sp-hero *::after { box-sizing: border-box; }
.sp-hero::before, .sp-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.sp-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
}
.sp-hero__overline {
  margin: 0 0 10px;
  color: #28676E;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  letter-spacing: .38em;
  line-height: 1.25;
  text-transform: uppercase;
}
.sp-hero__title {
  padding: 0;
  margin: 0;
  color: #164F56;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.sp-hero__text {
  margin: 11px 0 0;
  color: #536166;
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .055em;
}
.sp-hero--catalogo .sp-hero__content,
.sp-hero--nuevo .sp-hero__content,
.sp-hero--ofertas .sp-hero__content {
  text-align: center;
}

/* INICIO: acento editorial contemporáneo, con un fondo cálido. */
.sp-hero--inicio {
  min-height: 228px;
  background:
    radial-gradient(ellipse 42% 90% at 102% 7%, rgba(225,205,183,.58), transparent 87%),
    radial-gradient(ellipse 40% 115% at 109% 114%, rgba(232,199,155,.37), transparent 88%),
    linear-gradient(115deg, #fdfcf9 0%, #faf7f2 63%, #f3eadd 100%);
}
.sp-hero--inicio .sp-hero__content { padding: 0 0 0 clamp(0px,2.5vw,20px); }
.sp-hero--inicio .sp-hero__overline { letter-spacing: .40em; }
.sp-hero--inicio .sp-hero__title {
  max-width: 740px;
  color: #2d2e31;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: clamp(36px, 4.35vw, 63px);
  font-weight: 700;
  line-height: .99;
  letter-spacing: -.044em;
  text-wrap: initial;
}
.sp-hero--inicio .sp-hero__title strong { color: #21666d; font-weight: 700; }
.sp-hero--inicio .sp-hero__text {
  max-width: 560px;
  font-size: clamp(15px, 1.65vw, 21px);
  letter-spacing: -.012em;
}
.sp-hero--inicio::before {
  width: 350px; height: 160px; right: -30px; bottom: -103px;
  transform: rotate(-10deg); border-radius: 50% 50% 0 0;
  background: linear-gradient(115deg, rgba(189,159,127,.30),rgba(245,230,211,.19));
  border: 1px solid rgba(207,176,144,.23);
}
.sp-hero--inicio::after {
  width: 270px; height: 270px; right: 7%; top: -170px;
  border: 24px solid rgba(205,184,158,.16); border-radius: 50%;
}

/* CATÁLOGO: composición centrada, ondas simétricas. */
.sp-hero--catalogo {
  background:
    radial-gradient(ellipse 190px 200px at -2% -26%, rgba(40,103,110,.93) 0 53%, transparent 54%),
    radial-gradient(ellipse 215px 195px at 102% 133%, rgba(40,103,110,.85) 0 55%, transparent 56%),
    linear-gradient(100deg, #faf8f3, #fffdf9 48%, #f7f4ed);
}
.sp-hero--catalogo::before {
  width: 210px; height: 240px; top: -170px; left: -95px;
  border-radius: 50%; border: 2px solid rgba(213,184,145,.60);
}
.sp-hero--catalogo::after {
  width: 260px; height: 260px; right: -125px; bottom: -198px;
  border-radius: 50%; border: 2px solid rgba(203,172,132,.49);
}

/* LO NUEVO: curvas suaves y carácter tipográfico elegante. */
.sp-hero--nuevo {
  background:
    radial-gradient(ellipse 210px 205px at -4% 52%, rgba(40,103,110,.85) 0 54%, transparent 55%),
    radial-gradient(ellipse 245px 220px at 105% 131%, rgba(34,103,108,.93) 0 55%, transparent 56%),
    linear-gradient(105deg, #f9f7f2, #fffefa 54%, #f9f6ef);
}
.sp-hero--nuevo::before {
  width: 285px; height: 255px; top: -126px; left: -212px;
  border: 2px solid #d2bea1; border-radius: 50%; transform: rotate(-25deg);
}
.sp-hero--nuevo::after {
  width: 350px; height: 300px; right: -225px; bottom: -196px;
  border: 2px solid rgba(217,194,164,.78); border-radius: 50%;
}
.sp-hero--nuevo .sp-hero__title { font-size: clamp(36px,5vw,65px); }

/* OFERTAS: detalles crema, verde y sutil acento dorado. */
.sp-hero--ofertas {
  background:
    radial-gradient(ellipse 260px 220px at -6% 131%, rgba(40,103,110,.85) 0 55%, transparent 56%),
    radial-gradient(ellipse 250px 230px at 105% -24%, rgba(238,231,221,.82) 0 60%, transparent 61%),
    linear-gradient(110deg, #faf8f4, #fffdfa 55%, #f9f7f2);
}
.sp-hero--ofertas::before {
  width: 320px; height: 185px; bottom: -160px; left: -88px;
  border-radius: 50%; border: 2px solid rgba(215,189,153,.70);
}
.sp-hero--ofertas::after {
  width: 260px; height: 300px; top: -153px; right: -220px;
  border-radius: 50%; border: 2px solid rgba(40,103,110,.55);
}
.sp-hero--ofertas .sp-hero__overline {
  display: inline-block;
  border: 1px solid rgba(40,103,110,.30);
  border-radius: 999px;
  padding: 7px 20px;
  margin-bottom: 10px;
  letter-spacing: .25em;
  background: rgba(233,242,238,.68);
}
.sp-hero--ofertas .sp-hero__title em { font-weight: 400; }

/* Mantiene en el DOM los carruseles antiguos para compatibilidad con JS.
   Sus consultas SOLO se eliminarán después de revisar los JS de la tienda. */
.sp-hero-legacy { display: none !important; }

/* Los banners se ajustan al ancho real disponible, incluso en vista previa. */
@container (max-width: 640px) {
  .sp-hero {
    min-height: 153px;
    padding: 18px 19px;
  }
  .sp-hero__overline { font-size: 9px; letter-spacing: .22em; margin-bottom: 8px; }
  .sp-hero__title { font-size: clamp(27px, 7vw, 37px); line-height: 1.08; }
  .sp-hero__text { font-size: 12px; letter-spacing: .015em; margin-top: 9px; }
  .sp-hero--inicio { min-height: 200px; padding: 21px 20px; }
  .sp-hero--inicio .sp-hero__content { padding-left: 0; }
  .sp-hero--inicio .sp-hero__title { font-size: clamp(30px, 8vw, 40px); line-height: 1.02; }
  .sp-hero--inicio .sp-hero__text { max-width: 320px; font-size: 14px; }
  .sp-hero--inicio::after { right: -24%; opacity: .55; }
  .sp-hero--nuevo .sp-hero__title { font-size: clamp(29px, 7.5vw, 40px); }
  .sp-hero--ofertas .sp-hero__title { font-size: clamp(26px, 7vw, 36px); }
  .sp-hero--ofertas .sp-hero__overline { padding: 6px 12px; letter-spacing: .12em; }
}
@container (max-width: 370px) {
  .sp-hero { padding: 18px 12px; min-height: 168px; }
  .sp-hero__title { font-size: 27px; }
  .sp-hero--inicio { min-height: 207px; }
  .sp-hero--inicio .sp-hero__title { font-size: 30px; }
  .sp-hero--ofertas .sp-hero__title { font-size: 27px; }
}
/* Ajuste fino: mantener títulos legibles en celulares de 320–430px. */
@container (max-width: 640px) {
  .sp-hero--inicio .sp-hero__title { font-size: clamp(29px, 9cqw, 38px); }
  .sp-hero--catalogo .sp-hero__title { font-size: clamp(26px, 8cqw, 35px); }
  .sp-hero--nuevo {
    min-height: 172px;
    background:
      radial-gradient(ellipse 145px 176px at -19% 7%, rgba(40,103,110,.72) 0 52%, transparent 53%),
      radial-gradient(ellipse 170px 185px at 122% 144%, rgba(40,103,110,.80) 0 52%, transparent 53%),
      linear-gradient(105deg, #faf8f4, #fffefa 54%, #faf7f2);
  }
  .sp-hero--nuevo .sp-hero__title {
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(27px, 7.7cqw, 34px);
  }
  .sp-hero--nuevo .sp-hero__text {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .sp-hero--ofertas .sp-hero__title {
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(26px, 7.4cqw, 32px);
  }
  .sp-hero--ofertas .sp-hero__text {
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Fallback responsive para navegadores sin container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .sp-hero { min-height: 155px; padding: 18px 15px; }
    .sp-hero__title { font-size: 30px; }
    .sp-hero--inicio { min-height: 200px; }
    .sp-hero--inicio .sp-hero__title { font-size: 33px; }
    .sp-hero__text { font-size: 13px; }
  }
}


/* =====================================================================
   SAYPRES | AJUSTE EXCLUSIVO DEL BANNER DE INICIO
   Mantiene intactos el resto de banners, páginas y botones exteriores.
   ===================================================================== */

.sp-hero--inicio .sp-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
}

.sp-hero--inicio .sp-hero__left,
.sp-hero--inicio .sp-hero__right {
  min-width: 0;
}

.sp-hero--inicio .sp-hero__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.sp-hero--inicio .sp-hero__right .sp-hero__text {
  margin: 0;
  max-width: 390px;
}

.sp-hero--inicio .sp-hero__pdf {
  cursor: pointer;

transition:
  background-color 0.2s ease,
  color 0.2s ease,
  border-color 0.2s ease,
  box-shadow 0.2s ease,
  transform 0.15s ease;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid #28676E;
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  color: #28676E;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.sp-hero--inicio .sp-hero__pdf .material-symbols-rounded {
  font-size: 20px;
}

.sp-hero--inicio .sp-hero__pdf:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/* ==========================================================
   SAYPRES - BOTÓN PDF INTERACTIVO
   Hover, clic, pantalla táctil y accesibilidad
   ========================================================== */

/* MOUSE: cambio de color y elevación suave */
@media (hover: hover) and (pointer: fine) {

  .sp-hero--inicio .sp-hero__pdf:not(:disabled):hover {
    background-color: #28676E;
    color: #FFFFFF;
    border-color: #28676E;

    box-shadow: 0 5px 14px rgba(40, 103, 110, 0.20);

    transform: translateY(-2px);
  }

}

/* CLIC Y TOQUE EN CELULAR */
.sp-hero--inicio .sp-hero__pdf:not(:disabled):active {
  background-color: #154E55;
  color: #FFFFFF;
  border-color: #154E55;

  transform: scale(0.97);

  box-shadow: 0 2px 6px rgba(40, 103, 110, 0.12);
}

/* ACCESIBILIDAD CON TECLADO */
.sp-hero--inicio .sp-hero__pdf:focus-visible {
  outline: 3px solid rgba(40, 103, 110, 0.30);
  outline-offset: 3px;
}

/* RESPETAR PREFERENCIAS DE MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {

  .sp-hero--inicio .sp-hero__pdf {
    transition: none;
  }

}

@container (max-width: 800px) {
  .sp-hero--inicio .sp-hero__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
  }

  .sp-hero--inicio .sp-hero__right {
    gap: 12px;
  }
}

@container (max-width: 640px) {
  .sp-hero--inicio {
    min-height: 0;
  }

  .sp-hero--inicio .sp-hero__right .sp-hero__text {
    max-width: 320px;
  }

  .sp-hero--inicio .sp-hero__pdf {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* Alternativa cuando el navegador no soporta container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 800px) {
    .sp-hero--inicio .sp-hero__content {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (max-width: 640px) {
    .sp-hero--inicio { min-height: 0; }
  }
}


/* =========================================================
   SAYPRES - OFERTAS: AJUSTE EXCLUSIVO PARA MÓVIL
   ========================================================= */

@container (max-width: 640px) {

  .sp-hero--ofertas {
    min-height: 0;
    padding: 16px 14px;
    background: linear-gradient(
      110deg,
      #faf8f4,
      #fffdfa 60%,
      #f9f7f2
    );
  }

  /* Quitar figuras decorativas en móvil */
  .sp-hero--ofertas::before,
  .sp-hero--ofertas::after {
    display: none;
  }

  .sp-hero--ofertas .sp-hero__content {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .sp-hero--ofertas .sp-hero__overline {
    font-size: 9px;
    padding: 5px 12px;
    margin-bottom: 8px;
    letter-spacing: 0.10em;
  }

  .sp-hero--ofertas .sp-hero__title {
    max-width: 100%;
    margin: 0 auto;
    font-size: clamp(23px, 7cqw, 27px);
    line-height: 1.14;
  }

  .sp-hero--ofertas .sp-hero__text {
    max-width: 290px;
    margin: 8px auto 0;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: break-word;
  }

}


/* =====================================================
   SAYPRES - LO NUEVO: ETIQUETA RECIÉN LLEGADOS
   ===================================================== */

.sp-hero--nuevo .sp-hero__overline {
  display: inline-block;
  border: 1px solid rgba(40, 103, 110, 0.30);
  border-radius: 999px;
  padding: 7px 20px;
  margin-bottom: 10px;
  letter-spacing: 0.25em;
  background: rgba(233, 242, 238, 0.68);
}

/* Ajuste para celulares */
@container (max-width: 640px) {
  .sp-hero--nuevo .sp-hero__overline {
    padding: 6px 12px;
    letter-spacing: 0.12em;
  }
}


/* =====================================================
   SAYPRES - CATÁLOGO: ETIQUETA PRINCIPAL
   ===================================================== */

.sp-hero--catalogo .sp-hero__overline {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(40, 103, 110, 0.30);
  border-radius: 999px;
  padding: 7px 20px;
  margin-bottom: 10px;
  background: rgba(233, 242, 238, 0.68);
  color: #28676E;
  letter-spacing: 0.15em;
  text-align: center;
  white-space: normal;
  line-height: 1.5;
}

/* Adaptación exclusiva para celulares */
@container (max-width: 640px) {
  .sp-hero--catalogo .sp-hero__overline {
    padding: 6px 10px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }
}



/* =====================================================
   SAYPRES - INICIO: ETIQUETA BIENVENIDO A SAYPRES
   ===================================================== */

.sp-hero--inicio .sp-hero__overline {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(40, 103, 110, 0.30);
  border-radius: 999px;
  padding: 7px 20px;
  margin-bottom: 10px;
  background: rgba(233, 242, 238, 0.68);
  color: #28676E;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  line-height: 1.5;
  text-align: center;
}

/* Adaptación exclusiva para celulares */
@container (max-width: 640px) {
  .sp-hero--inicio .sp-hero__overline {
    padding: 6px 12px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}
/* =====================================================
   SAYPRES - CATÁLOGO: BANNER LIMPIO EN CELULAR
   ===================================================== */

@container (max-width: 640px) {

  .sp-hero--catalogo {
    min-height: 0;
    padding: 16px 14px;

    background: linear-gradient(
      110deg,
      #faf8f4,
      #fffdfa 60%,
      #f9f7f2
    );
  }

  /* Eliminar las franjas y curvas decorativas */
  .sp-hero--catalogo::before,
  .sp-hero--catalogo::after {
    display: none;
  }

  .sp-hero--catalogo .sp-hero__content {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

}

/* =====================================================
   SAYPRES - LO NUEVO: BANNER LIMPIO EN CELULAR
   ===================================================== */

@container (max-width: 640px) {

  .sp-hero--nuevo {
    min-height: 0;
    padding: 16px 14px;

    background: linear-gradient(
      110deg,
      #faf8f4,
      #fffdfa 60%,
      #f9f7f2
    );
  }

  /* Eliminar curvas y franjas decorativas */
  .sp-hero--nuevo::before,
  .sp-hero--nuevo::after {
    display: none;
  }

  .sp-hero--nuevo .sp-hero__content {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

}
/* SAYPRES - ESPACIO ENTRE BANNER Y CATEGORÍAS */
/* Aplicable en PC y móvil */

.sp-hero--catalogo {
  margin-bottom: 12px;
}