/* [hidden] siempre oculta (el show/hide de store.js togglea el atributo) */
[hidden]{display:none!important}

/* ============================================================
   SALUHA · LANDING TEMPLATE
   Paleta: Turquesa #00A1A1 · Dorado #D4AF37 · Lima #B2D235
   Tipografía: Poppins
   ============================================================ */

:root {
  --turquesa: #00A1A1;
  --turquesa-dark: #007878;
  --turquesa-light: #E6F7F7;
  --dorado: #D4AF37;
  --dorado-dark: #B8941E;
  --lima: #B2D235;
  --lima-dark: #8FAF1F;
  --negro: #1A1A1A;
  --gris-text: #4A4A4A;
  --gris-muted: #8A8A8A;
  --gris-bg: #EFEFEF;
  --gris-light: #F8F8F8;
  --blanco: #FFFFFF;
  --rojo-oferta: #E63946;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow: 0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);

  --container: 1200px;

  /* Tipografía Saluha (Poppins) — esta tienda no carga base.css del tema,
     así que el body/headings se definen aquí o caerían a Times (serif). */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Fuente base de toda la landing (Poppins). Antes el body heredaba Times. */
body { font-family: var(--font); color: var(--negro); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6,
.title, .combo-slider__title,
.bx-caracs__title, .bx-por-que__title, .bx-section__title, .bx-garantia__title,
.bx-proceso__secure, .bx-compara__title { font-family: var(--font-heading); }

/* ---------- SCOPE LANDING ----------
   El reset/body lo provee base.css del tema. Aquí solo
   añadimos lo necesario en el contexto de la landing.
*/

/* Espacio extra abajo solo en mobile (donde aparece la sticky bar) */
@media (max-width: 720px) {
  .template-landing-active { padding-bottom: 80px; }
}

/* Reglas locales — encapsuladas para no romper otras páginas */
.section-landing img { max-width: 100%; height: auto; display: block; }
.section-landing a { color: var(--turquesa); text-decoration: none; }
.section-landing a:hover { color: var(--turquesa-dark); }
.section-landing button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- TOPBAR ---------- */
.topbar {
  background: var(--dorado);
  color: var(--negro);
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  letter-spacing: 0.3px;
}

/* ---------- HEADER ---------- */
.header {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.header__logo img { height: 36px; width: auto; }
.header__nav { display: flex; gap: 24px; }
.header__nav a {
  color: var(--negro);
  font-weight: 500;
  font-size: 14px;
}
.header__nav a:hover { color: var(--turquesa); }
@media (max-width: 720px) {
  .header__nav { display: none; }
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  padding: 14px 0;
  background: var(--gris-light);
  font-size: 13px;
  color: var(--gris-muted);
}
.breadcrumb .container { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--gris-muted); }
.breadcrumb a:hover { color: var(--turquesa); }
.breadcrumb__current { color: var(--negro); font-weight: 500; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s;
  letter-spacing: 0.4px;
}
.btn--primary {
  background: var(--dorado);
  color: var(--negro);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35);
}
.btn--primary:hover {
  background: var(--dorado-dark);
  color: var(--negro);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.45);
}
.btn--lg { padding: 18px 32px; font-size: 17px; }
.btn--md { padding: 12px 22px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }

/* ---------- HERO ---------- */
.hero {
  padding: 32px 0 56px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* GALERÍA */
.gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gallery__main {
  position: relative;
  background: var(--gris-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1;
}
.gallery__main img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.thumb {
  border: 2px solid transparent;
  background: var(--gris-light);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  transition: border 0.2s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { border-color: var(--turquesa-light); }
.thumb.is-active { border-color: var(--turquesa); }

/* BADGES */
.badge {
  position: absolute;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.badge--nuevo {
  top: 16px;
  left: 16px;
  background: var(--lima);
  color: var(--negro);
}
.badge--descuento {
  top: 16px;
  right: 16px;
  background: var(--rojo-oferta);
  color: var(--blanco);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* INFO LATERAL */
.info { display: flex; flex-direction: column; gap: 16px; }

.social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--gris-text);
}
.stars { color: var(--dorado); letter-spacing: 2px; font-size: 16px; }
.reviews-text { font-weight: 500; }
.dot { color: var(--gris-muted); }
.sold { font-weight: 600; color: var(--turquesa); }

.title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--negro);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  text-align: center;
}
.subtitle {
  font-size: 16px;
  color: var(--gris-text);
  margin: 0;
}

/* PRECIO */
.pricing {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--gris-bg);
  border-bottom: 1px solid var(--gris-bg);
}
.price-old {
  color: var(--gris-muted);
  text-decoration: line-through;
  font-size: 18px;
}
.price-now {
  color: var(--turquesa);
  font-size: 36px;
  font-weight: 800;
}
.price-off {
  background: var(--rojo-oferta);
  color: var(--blanco);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
}
.price-note {
  font-size: 13px;
  color: var(--gris-text);
  margin: 0;
  font-weight: 500;
}

/* SELECTOR DE TALLAS / VARIANTES */
.variant-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 4px;
}
.variant-picker__option {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.variant-picker__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-text);
  text-transform: capitalize;
}
.variant-picker__chosen {
  color: var(--turquesa-dark);
  font-weight: 700;
}
.variant-picker__values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.variant-chip {
  appearance: none;
  cursor: pointer;
  border: 1.5px solid var(--gris-bg);
  background: var(--blanco);
  color: var(--gris-text);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  transition: border-color .15s, background .15s, color .15s;
}
.variant-chip:hover { border-color: var(--turquesa); }
.variant-chip.is-selected {
  border-color: var(--turquesa);
  background: var(--turquesa-light);
  color: var(--turquesa-dark);
}
.variant-chip:focus-visible {
  outline: 2px solid var(--turquesa);
  outline-offset: 2px;
}

/* GUÍA DE TALLAS */
.size-guide {
  margin: 4px 0 8px;
}
.size-guide__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-text);
  margin-bottom: 8px;
}
.size-guide__table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid var(--gris-bg);
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
}
.size-guide__table th {
  background: var(--turquesa-light);
  color: var(--turquesa-dark);
  font-weight: 700;
  text-align: left;
  padding: 9px 14px;
  font-size: 13px;
}
.size-guide__table td {
  padding: 9px 14px;
  border-top: 1px solid var(--gris-bg);
  color: var(--gris-text);
}
.size-guide__table td:first-child {
  font-weight: 700;
  color: var(--turquesa-dark);
  white-space: nowrap;
}
.size-guide__note {
  font-size: 12.5px;
  color: var(--gris-muted);
  margin: 6px 0 0;
  line-height: 1.45;
}

/* BENEFICIOS RÁPIDOS */
.quick-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.quick-benefits li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  color: var(--negro);
  font-weight: 500;
}
.quick-benefits li::before {
  /* el ✓ ya viene en el texto del HTML; ahí solo estilo */
}

/* COUNTDOWN */
.countdown {
  background: linear-gradient(135deg, var(--turquesa) 0%, var(--turquesa-dark) 100%);
  color: var(--blanco);
  padding: 16px 20px;
  border-radius: var(--radius);
  text-align: center;
}
.countdown__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.countdown__clock {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.countdown__clock span {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  min-width: 70px;
}
.countdown__clock b {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.countdown__clock small {
  font-size: 10px;
  margin-top: 4px;
  letter-spacing: 0.6px;
  opacity: 0.85;
}

/* GARANTÍAS RÁPIDAS */
.hero-guarantees {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.hero-guarantees > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: var(--gris-text);
  font-weight: 500;
  background: var(--gris-light);
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  line-height: 1.3;
}
.hero-guarantees span {
  font-size: 22px;
  margin-bottom: 4px;
}
@media (max-width: 480px) {
  .hero-guarantees { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- CREDIBILIDAD ---------- */
.credibility {
  background: var(--turquesa-light);
  padding: 32px 0;
}
.credibility__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.credibility__icon { font-size: 56px; }
.credibility__text h3 { margin: 0 0 4px; font-size: 20px; color: var(--turquesa-dark); }
.credibility__text p { margin: 0; color: var(--gris-text); }
.credibility__stats {
  display: flex;
  gap: 24px;
}
.credibility__stats > div {
  text-align: center;
  display: flex;
  flex-direction: column;
}
.credibility__stats b {
  font-size: 22px;
  font-weight: 800;
  color: var(--turquesa);
  line-height: 1;
}
.credibility__stats small {
  font-size: 11px;
  color: var(--gris-muted);
  margin-top: 4px;
  letter-spacing: 0.3px;
}
@media (max-width: 900px) {
  .credibility__inner { grid-template-columns: 1fr; text-align: center; }
  .credibility__stats { justify-content: center; flex-wrap: wrap; }
}

/* ---------- HOOK ---------- */
.hook { padding: 72px 0; }
.hook__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.overline {
  display: inline-block;
  color: var(--turquesa);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hook__text h2 {
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 16px;
}
.hook__text p { color: var(--gris-text); font-size: 16px; }
.hook__highlight {
  font-size: 20px !important;
  color: var(--turquesa-dark) !important;
  font-weight: 600;
}
.hook__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .hook__grid { grid-template-columns: 1fr; }
  .hook__text h2 { font-size: 26px; }
}

/* ---------- BENEFITS ZIG-ZAG ---------- */
.benefits {
  padding: 72px 0;
  background: var(--gris-light);
}
.section-title {
  font-size: 32px;
  text-align: center;
  margin: 0 0 48px;
  font-weight: 700;
}
.benefit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.benefit:last-child { margin-bottom: 0; }
.benefit--right .benefit__media { order: 2; }
.benefit__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.benefit__num {
  display: inline-block;
  background: var(--lima);
  color: var(--negro);
  font-weight: 800;
  font-size: 16px;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.benefit__text h3 {
  font-size: 26px;
  margin: 0 0 12px;
  font-weight: 700;
}
.benefit__text p {
  color: var(--gris-text);
  margin: 0 0 16px;
}
.checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.checks li {
  position: relative;
  padding-left: 28px;
  color: var(--negro);
  font-weight: 500;
  font-size: 14px;
}
.checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--lima);
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  color: var(--negro);
}
@media (max-width: 900px) {
  .benefit, .benefit--right { grid-template-columns: 1fr; }
  .benefit--right .benefit__media { order: 0; }
  .benefit__text h3 { font-size: 22px; }
}

/* ---------- SPECS ---------- */
.specs { padding: 72px 0; }
.specs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.spec-item {
  background: var(--gris-light);
  border-left: 4px solid var(--turquesa);
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
}
.spec-item__label {
  font-size: 12px;
  color: var(--gris-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}
.spec-item__value {
  font-size: 15px;
  color: var(--negro);
  font-weight: 600;
  margin-top: 4px;
}
.specs__includes {
  background: var(--turquesa-light);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
.specs__includes h3 { margin: 0 0 16px; color: var(--turquesa-dark); }
.specs__includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.specs__includes li {
  position: relative;
  padding-left: 28px;
  font-weight: 500;
}
.specs__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--turquesa);
  color: var(--blanco);
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}
@media (max-width: 720px) {
  .specs__grid { grid-template-columns: 1fr; }
  .specs__includes ul { grid-template-columns: 1fr; }
}

/* ---------- SHIPPING ---------- */
.shipping {
  background: linear-gradient(135deg, var(--turquesa) 0%, var(--turquesa-dark) 100%);
  color: var(--blanco);
  padding: 64px 0;
}
.shipping__head { text-align: center; margin-bottom: 36px; }
.shipping__head h2 { margin: 0 0 8px; font-size: 30px; }
.shipping__head p { margin: 0; opacity: 0.9; font-size: 16px; }
.shipping__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.ship-card {
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(4px);
}
.ship-card__zone {
  font-weight: 600;
  font-size: 15px;
}
.ship-card__time {
  font-weight: 800;
  font-size: 20px;
  color: var(--lima);
}
.shipping__legal {
  text-align: center;
  margin: 0;
  font-weight: 600;
  background: rgba(0,0,0,0.2);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
}
@media (max-width: 720px) {
  .shipping__grid { grid-template-columns: 1fr; }
}

/* ---------- TESTIMONIALS ---------- */
.testimonials { padding: 72px 0; }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial {
  background: var(--gris-light);
  padding: 28px;
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--lima);
}
.testimonial__stars {
  color: var(--dorado);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial__text {
  color: var(--negro);
  font-style: italic;
  margin: 0 0 16px;
  line-height: 1.5;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #DDD;
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--turquesa);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
.testimonial__author strong { display: block; font-size: 14px; }
.testimonial__author small { color: var(--gris-muted); font-size: 12px; }
@media (max-width: 900px) {
  .testimonials__grid { grid-template-columns: 1fr; }
}

/* ---------- SUMMARIES ---------- */
.summaries {
  padding: 64px 0;
  background: var(--gris-light);
}
.summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  background: var(--blanco);
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.summary:last-child { margin-bottom: 0; }
.summary__emoji {
  font-size: 56px;
  line-height: 1;
}
.summary h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--turquesa-dark);
}
.summary p { margin: 0; color: var(--gris-text); font-size: 16px; }
@media (max-width: 600px) {
  .summary { grid-template-columns: 1fr; text-align: center; }
}

/* ---------- FAQ ---------- */
.faq { padding: 72px 0; }
.faq__list { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--gris-light);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border 0.2s;
}
.faq-item[open] {
  border-color: var(--turquesa);
  background: var(--blanco);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  padding: 18px 22px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::after {
  content: "+";
  color: var(--turquesa);
  font-size: 24px;
  font-weight: 400;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__body {
  padding: 0 22px 22px;
  color: var(--gris-text);
  line-height: 1.6;
}

/* ---------- FORM COD ---------- */
.form-cod {
  background: linear-gradient(135deg, var(--turquesa) 0%, #006666 100%);
  padding: 72px 0;
  color: var(--blanco);
}
.form-cod__inner { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.form-cod__head { text-align: center; margin-bottom: 32px; }
.form-cod__pretitle {
  display: inline-block;
  background: var(--dorado);
  color: var(--negro);
  padding: 6px 14px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.form-cod__head h2 { margin: 0 0 12px; font-size: 32px; }
.form-cod__head p { margin: 0; opacity: 0.92; font-size: 16px; }

.form-cod__form {
  background: var(--blanco);
  color: var(--negro);
  padding: 32px;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-text);
  margin-bottom: 6px;
}
.field input, .field select {
  padding: 12px 14px;
  border: 2px solid var(--gris-bg);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  background: var(--blanco);
  transition: border 0.15s;
}
.field input:focus, .field select:focus {
  outline: 0;
  border-color: var(--turquesa);
}
.form-cod__guarantees {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  font-weight: 600;
  font-size: 14px;
}
@media (max-width: 600px) {
  .form-cod__form { grid-template-columns: 1fr; }
}

/* ---------- TRUST BAR ---------- */
.trust-bar {
  padding: 64px 0;
  background: var(--blanco);
}
.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-card {
  text-align: center;
  padding: 24px 16px;
}
.trust-card__icon {
  font-size: 44px;
  margin-bottom: 12px;
}
.trust-card h4 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--turquesa-dark);
  letter-spacing: 0.5px;
}
.trust-card p {
  margin: 0;
  font-size: 13px;
  color: var(--gris-text);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .trust-bar__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--negro);
  color: var(--blanco);
  padding: 56px 0 0;
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer__logo { filter: brightness(0) invert(1); margin-bottom: 12px; }
.footer__tagline { color: #BBB; font-size: 14px; }
.footer h5 {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--dorado);
}
.footer a, .footer p {
  display: block;
  color: #CCC;
  font-size: 14px;
  margin-bottom: 8px;
  text-decoration: none;
}
.footer a:hover { color: var(--lima); }
.footer__bottom {
  border-top: 1px solid #333;
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #888;
}
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- FOOTER de la tienda (.site-foot) + disclaimer legal ---------- */
.site-foot{background:#13211f;color:#cfe0de;margin-top:40px}
.site-foot__in{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:32px 20px 18px}
.site-foot__brand{font-family:var(--font-heading,'Poppins');font-weight:900;font-size:22px;color:#fff;text-transform:capitalize}
.site-foot p{margin:8px 0 0;font-size:13px;line-height:1.6;opacity:.85}
.site-foot__col{display:flex;flex-direction:column;gap:7px;font-size:14px}
.site-foot__col b{color:#fff;margin-bottom:3px}
.site-foot__col a,.site-foot__col span{color:#cfe0de;text-decoration:none}
.site-foot__col a:hover{color:#fff}
.site-foot__copy{text-align:center;font-size:12px;opacity:.6;padding:14px 16px 6px;border-top:1px solid rgba(255,255,255,.08)}
.site-foot__legal{max-width:960px;margin:0 auto;text-align:center;font-size:11px;line-height:1.6;opacity:.42;padding:0 18px 20px}

/* ---------- STICKY CTA MOBILE ----------
   Botón pegado al borde inferior REAL del viewport, edge-to-edge.
   Misma técnica que apps tipo EasySell COD: el contenedor toca bottom:0
   y el botón llena 100% sin paddings extras de safe-area (el home
   indicator del iPhone queda visualmente sobre el fondo del botón). */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  /* z-index moderado: sobre el contenido normal (header=50) pero DEBAJO de
     cualquier overlay/modal de Releasit (que usa z-index altísimos), para
     no tapar el formulario de pago en móvil. */
  z-index: 60;
  display: none;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.sticky-cta .sticky-cta__btn {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 16px 16px 20px !important;
  text-align: center !important;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.18);
  box-sizing: border-box !important;
  /* mismo azul (gradiente turquesa) que el botón principal, no el dorado base */
  background: linear-gradient(135deg, #00C5C5 0%, #00A1A1 50%, #008888 100%) !important;
  color: #FFFFFF !important;
}

@media (max-width: 720px) {
  .sticky-cta { display: block; }
  .sticky-cta.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   FIX CRÍTICO — sticky CTA NO debe tapar el formulario Releasit
   ============================================================
   Cuando el formulario de Releasit existe en el DOM, ocultamos el
   sticky CTA con CSS PURO (:has). Esto NO depende de JavaScript, así
   que funciona aunque el JS esté cacheado en el móvil. Cubre el caso
   donde el sticky interceptaba toques sobre los dropdowns
   (Departamento / Ciudad) en iOS Safari. */
body:has([class*="rsi-form"]) .sticky-cta,
body:has([id*="form-cod"]) .sticky-cta,
body:has(.rsi-shipping-rates-wrapper) .sticky-cta {
  display: none !important;
  pointer-events: none !important;
}

/* Salvavidas extra: si CUALQUIER input/select/textarea del documento
   tiene foco (el usuario está escribiendo o eligiendo en el form),
   ocultamos el sticky para que jamás intercepte. */
body:focus-within .sticky-cta {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(110%) !important;
}


/* ============================================================
   CARDS/FICHAS — cada sección se ve como una "ficha" elevada
   sobre un fondo gris suave (estilo Bulevar mejorado)
   ============================================================ */

/* Fondo gris claro de la página landing — body en su template */
body.template-product-landing,
body[class*="template-product"] {
  background: #F4F6F7 !important;
}

/* Cada sección de la landing se convierte en una card */
.section-landing > .hero,
.section-landing > .credibility,
.section-landing > .hook,
.section-landing > .benefits,
.section-landing > .specs,
.section-landing > .shipping,
.section-landing > .testimonials,
.section-landing > .summaries,
.section-landing > .faq,
.section-landing > .trust-bar {
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06),
              0 1px 3px rgba(0, 0, 0, 0.04);
  margin: 16px 12px;
  overflow: hidden;
  background-clip: padding-box;
}

/* Hero un poco diferente — ya tiene su grid */
.section-landing > .hero {
  background: #FFFFFF;
  padding: 32px 0;
}

/* Trust bar al final con margin extra */
.section-landing > .trust-bar {
  margin-bottom: 32px;
  background: #FFFFFF;
}

/* Form COD al final (placeholder cuando no usa Releasit) */
.section-landing > .form-cod {
  border-radius: 24px;
  margin: 16px 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Ajustes responsive — menos margin en mobile */
@media (max-width: 720px) {
  .section-landing > .hero,
  .section-landing > .credibility,
  .section-landing > .hook,
  .section-landing > .benefits,
  .section-landing > .specs,
  .section-landing > .shipping,
  .section-landing > .testimonials,
  .section-landing > .summaries,
  .section-landing > .faq,
  .section-landing > .trust-bar {
    margin: 12px 8px;
    border-radius: 18px;
  }
}


/* ============================================================
   STICKY INFO — la columna derecha del hero permanece visible
   mientras el usuario scrollea las imágenes/thumbs de la izquierda
   ============================================================ */

/* La info se queda sticky en su lugar */
.info {
  position: sticky !important;
  top: 100px !important;
  align-self: start !important;
  z-index: 5 !important;
}

/* El hero NO debe tener overflow:hidden (rompe el sticky) */
.section-landing > .hero {
  overflow: visible !important;
}

/* Galería — tamaño balanceado con info derecha */
.gallery__main {
  aspect-ratio: auto !important;   /* se adapta a la imagen: no recorta piezas verticales */
  max-width: 540px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.gallery {
  max-width: 540px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* En mobile sin sticky (apilado) */
@media (max-width: 900px) {
  .info {
    position: static !important;
  }
}


/* ============================================================
   LANDING LAYOUT — Grid de 2 columnas
   Izquierda: galería + todas las secciones (scrolea)
   Derecha:   info del producto (sticky, no se mueve al scrollear)
   ============================================================ */

.landing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
  align-items: start;
}

.landing-left {
  min-width: 0;
}

.landing-left > * {
  margin-bottom: 16px;
}

.landing-right {
  min-width: 0;
  position: sticky;
  top: 90px;
  align-self: start;
  z-index: 5;
}

.landing-right .info {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06),
              0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Hero ahora solo tiene galería (sin grid de 2 columnas) */
.hero {
  padding: 0 !important;
}

.hero__gallery-wrap {
  padding: 0;
}

/* En mobile: layout apilado con orden: galería → info+CTA → resto del contenido */
@media (max-width: 900px) {
  .landing-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px;
  }

  /* .landing-left desaparece como contenedor; sus hijos (hero + content-card)
     pasan a participar del grid del padre, y se pueden reordenar con `order`.
     Importante !important porque otra regla más abajo le pone display:flex. */
  .landing-left {
    display: contents !important;
    background: transparent;
    padding: 0;
  }
  .landing-left > .hero               { order: 1; }
  .landing-right                      { order: 2; }
  .landing-left > .landing-content-card,
  .landing-left > .trust-badges-banner,
  .landing-left > .banner-paga-casa   { order: 3; }

  .landing-right {
    position: static;
  }

  .landing-right .info {
    padding: 20px;
  }
}

/* Anular el sticky de la versión anterior (solo del hero) que ya no aplica */
.info {
  position: static;
}


/* ============================================================
   INFO SHIPPING CARD — bloque tipo "envío + garantías"
   Reemplaza la nota del precio y los checks de beneficios
   ============================================================ */

.info-shipping-card {
  background: #F8FAFA;
  border: 1px solid #E5EDED;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}

.iss-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.35;
}

.iss__icon {
  font-size: 17px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  margin-top: 1px;
}

.iss__body {
  flex: 1;
  min-width: 0;
}

.iss__body strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #00A1A1;
  margin: 0 0 1px;
  letter-spacing: 0.15px;
}

.iss__body strong em {
  font-style: normal;
  background: #B2D235;
  color: #1A1A1A;
  font-weight: 800;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 100px;
  margin: 0 2px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.iss__body p,
.iss__body span {
  display: block;
  font-size: 11.5px;
  color: #555;
  margin: 0;
  line-height: 1.4;
}

.iss__body b {
  color: #1A1A1A;
  font-weight: 700;
}


/* ============================================================
   BOTÓN PEDIR AHORA — versión PREMIUM con animaciones
   Sobrescribe .btn--primary.btn--lg.btn--block dentro de .info
   ============================================================ */

.landing-right .info .btn--primary,
.landing-right .info a[href="/rsi-btn-hook"],
.landing-right .info .rsi-buy-now-button,
.landing-right .info #rsi_buy_now_button,
.landing-right .info ._rsi-buy-now-button {
  position: relative !important;
  background: linear-gradient(135deg, #00C5C5 0%, #00A1A1 50%, #008888 100%) !important;
  background-size: 200% 200% !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 13px 18px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  box-shadow:
    0 10px 24px rgba(0, 161, 161, 0.4),
    0 0 0 3px rgba(0, 161, 161, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 0 !important;
  animation: saluhaCtaBounce 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite,
             saluhaCtaGradient 4s ease infinite !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Shine line que cruza el botón */
.landing-right .info .btn--primary::before,
.landing-right .info a[href="/rsi-btn-hook"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -50% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 65%,
    transparent 100%
  ) !important;
  transform: skewX(-20deg) !important;
  animation: saluhaCtaShine 2.5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.landing-right .info .btn--primary:hover,
.landing-right .info a[href="/rsi-btn-hook"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 20px 40px rgba(0, 161, 161, 0.55),
    0 0 0 6px rgba(0, 161, 161, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  animation-play-state: paused !important;
}

.landing-right .info .btn--primary:active,
.landing-right .info a[href="/rsi-btn-hook"]:active {
  transform: translateY(-1px) scale(0.99) !important;
}

/* Animaciones */
@keyframes saluhaCtaBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 10px 24px rgba(0, 161, 161, 0.4),
      0 0 0 0 rgba(0, 161, 161, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  20% {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
      0 18px 36px rgba(0, 161, 161, 0.55),
      0 0 0 8px rgba(0, 161, 161, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  40% {
    transform: translateY(0) scale(1);
  }
  60% {
    transform: translateY(-4px) scale(1.01);
  }
  80% {
    transform: translateY(0) scale(1);
  }
}

@keyframes saluhaCtaShine {
  0%   { left: -60%; }
  50%  { left: 120%; }
  100% { left: 120%; }
}

@keyframes saluhaCtaGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Respeta reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .landing-right .info .btn--primary,
  .landing-right .info a[href="/rsi-btn-hook"] {
    animation: none !important;
  }
  .landing-right .info .btn--primary::before,
  .landing-right .info a[href="/rsi-btn-hook"]::before {
    display: none !important;
  }
}


/* ============================================================
   COMPACTAR ESPACIO en la columna derecha (.info)
   Menos gap entre elementos, sin espacios en blanco grandes
   ============================================================ */

.landing-right .info {
  gap: 12px !important;
}

.landing-right .info .info-shipping-card {
  margin: 0 !important;
}

.landing-right .info > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ============================================================
   TRUST BADGES BANNER (imagen Gemini con 4 badges Saluha)
   Reemplaza el trust-bar de 4 cards individuales
   ============================================================ */
.trust-badges-banner {
  background: transparent !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  text-align: center;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.trust-badges-banner img {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  display: block;
  height: auto;
}

@media (max-width: 720px) {
  .trust-badges-banner {
    padding: 14px 12px !important;
  }
  .trust-badges-banner img {
    max-width: 420px;
  }
}


/* ============================================================
   COLUMNA IZQUIERDA — cada sección como su propia CARD separada
   ============================================================ */

.landing-left {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

/* Cards individuales: SOLO hero y el wrapper unificado (que ahora incluye trust-badges) */
.landing-left > .hero,
.landing-left > .landing-content-card {
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06),
              0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin: 0;
}

/* Secciones dentro del card unificado pierden sus cards individuales */
.landing-content-card > .trust-badges-banner,
.landing-content-card > .credibility,
.landing-content-card > .hook,
.landing-content-card > .benefits,
.landing-content-card > .specs,
.landing-content-card > .shipping,
.landing-content-card > .testimonials,
.landing-content-card > .summaries,
.landing-content-card > .faq {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Padding interno para la card del hero (galería + thumbs) */
.landing-left > .hero {
  padding: 24px 24px 20px !important;
}

.landing-left > .hero .hero__gallery-wrap {
  padding: 0 !important;
}

@media (max-width: 720px) {
  .landing-left > .hero {
    padding: 16px 16px 14px !important;
  }
}

/* Colores propios para secciones dentro del card unificado */
.landing-content-card > .credibility { background: #E6F7F7; }
.landing-content-card > .benefits    { background: #F8F8F8; }
.landing-content-card > .shipping    { background: linear-gradient(135deg, #00A1A1 0%, #008888 100%); color: #FFFFFF; }

/* Trust badges con padding interno mínimo (la imagen ya tiene su composición) */
.landing-left > .trust-badges-banner {
  padding: 20px 24px !important;
  background: #FFFFFF !important;
}

.landing-left > .trust-badges-banner img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   BANNER PAGA EN CASA — debajo de trust-badges, dentro del card
   ============================================================ */
.banner-paga-casa {
  margin: 0;
  padding: 8px 24px 28px;
  text-align: center;
}

.banner-paga-casa img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 161, 161, 0.18);
}

@media (max-width: 720px) {
  .banner-paga-casa {
    padding: 6px 12px 20px;
  }
}


/* ============================================================
   FLUJO BULEVAR — 16 BLOQUES (prefijo .bx-*)
   ============================================================ */

/* Variables locales del bloque */
.landing-content-card {
  --bx-navy: #1A2A4F;
  --bx-gray: #6B7280;
  --bx-pink-hot: #E94570;
  --bx-check: #00A14B;
  --bx-bg-soft: #F8F9FB;
}

/* Espaciado consistente entre bloques nuevos */
.bx-headline,
.bx-hero-promo,
.bx-banner,
.bx-lifestyle,
.bx-feature,
.bx-caracs,
.bx-por-que,
.bx-paquete,
.bx-pocas,
.bx-envio,
.bx-atencion,
.bx-resenas {
  padding: 28px 24px;
}

@media (max-width: 720px) {
  .bx-headline,
  .bx-hero-promo,
  .bx-banner,
  .bx-lifestyle,
  .bx-feature,
  .bx-caracs,
  .bx-por-que,
  .bx-paquete,
  .bx-pocas,
  .bx-envio,
  .bx-atencion,
  .bx-resenas {
    padding: 20px 14px;
  }
}

/* ====== 1. HEADLINE ====== */
.bx-headline {
  text-align: center;
  padding-bottom: 12px;
}
.bx-headline__title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--bx-navy);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.bx-headline__subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: var(--bx-gray);
  font-weight: 600;
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .bx-headline__title { font-size: 24px; }
  .bx-headline__subtitle { font-size: 16px; }
}

/* ====== 2. HERO PROMO ====== */
.bx-hero-promo {
  padding-top: 10px;
}
.bx-hero-promo__inner {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.bx-hero-promo__img {
  display: block;
  width: 100%;
  height: auto;
}
.bx-hero-promo__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32%;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  animation: bxPulse 2.4s ease-in-out infinite;
}
@keyframes bxPulse {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(-6deg) scale(1.07); }
}
@media (max-width: 720px) {
  .bx-hero-promo__badge { width: 38%; top: 10px; right: 10px; }
}

/* ====== 3-5-7-12-13-14-17. BANNERS FULL-WIDTH ====== */
.bx-banner {
  padding: 14px 24px;
  text-align: center;
}
.bx-banner img {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.bx-banner--medallas img {
  box-shadow: none;
  background: transparent;
  max-width: 540px;
}
.bx-banner--video video {
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  background: #00A1A1;
}
@media (max-width: 720px) {
  .bx-banner--video video { border-radius: 10px; }
}
@media (max-width: 720px) {
  .bx-banner { padding: 10px 12px; }
  .bx-banner img { border-radius: 10px; }
}

/* ====== 4. LIFESTYLE (párrafo + GIF) ====== */
.bx-lifestyle {
  text-align: center;
}
.bx-lifestyle__text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--bx-gray);
  max-width: 600px;
  margin: 0 auto 22px;
}
.bx-lifestyle__text strong {
  color: #2D3F66;
  font-weight: 700;
}
.bx-lifestyle__media {
  max-width: 480px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.bx-lifestyle__gif {
  display: block;
  width: 100%;
  height: auto;
}

/* ====== 6. FEATURE (Carga en Movimiento) ====== */
.bx-feature {
  text-align: center;
}
.bx-feature__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--bx-navy);
  line-height: 1.3;
  margin: 0 0 14px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.bx-feature__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--bx-gray);
  max-width: 580px;
  margin: 0 auto 24px;
}
.bx-feature__text strong {
  color: #2D3F66;
  font-weight: 700;
}
.bx-feature__grid,
.bx-feature__zoom {
  max-width: 580px;
  margin: 0 auto 20px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.bx-feature__grid img,
.bx-feature__zoom img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 720px) {
  .bx-feature__title { font-size: 19px; }
  .bx-feature__text  { font-size: 15px; }
}

/* ====== 7B. ANTES / DESPUÉS ====== */
.bx-antes-despues {
  max-width: 620px;
  margin: 0 auto 24px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.bx-antes-despues img {
  display: block;
  width: 100%;
  height: auto;
}

/* ====== 8. CARACTERÍSTICAS (lista ✅) ====== */
.bx-caracs__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--bx-navy);
  letter-spacing: 0.02em;
  margin: 0 0 18px;
}
.bx-caracs__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bx-carac {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--bx-gray);
}
.bx-carac__check {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.4;
}
.bx-carac__body strong {
  color: var(--bx-navy);
  font-weight: 700;
  display: inline;
  margin-right: 6px;
}
.bx-carac__body span {
  color: var(--bx-gray);
}
.bx-caracs__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 540px;
  margin: 0 auto;
}
.bx-caracs__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
@media (max-width: 720px) {
  .bx-caracs__title { font-size: 17px; }
  .bx-carac { font-size: 15px; }
}

/* ====== 9. ¿POR QUÉ ADQUIRIRLO? ====== */
.bx-por-que__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--bx-navy);
  margin: 0 0 14px;
}
.bx-por-que__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--bx-gray);
  margin: 0 0 24px;
}
.bx-por-que__text strong {
  color: #2D3F66;
  font-weight: 700;
}
.bx-por-que__media,
.bx-por-que__dimensiones {
  max-width: 580px;
  margin: 0 auto 22px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}
.bx-por-que__dimensiones {
  background: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.bx-por-que__media img,
.bx-por-que__dimensiones img {
  display: block;
  width: 100%;
  height: auto;
}

/* ====== 10. TU PAQUETE INCLUYE ====== */
.bx-paquete {
  text-align: center;
}
.bx-paquete__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--bx-navy);
  letter-spacing: 0.05em;
  margin: 0 0 18px;
}
.bx-paquete__list {
  list-style: none;
  counter-reset: paquete;
  padding: 0;
  margin: 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.bx-paquete__list li {
  counter-increment: paquete;
  position: relative;
  padding: 12px 0 12px 40px;
  font-size: 16px;
  font-weight: 600;
  color: var(--bx-navy);
  border-bottom: 1px solid #E8EAEF;
}
.bx-paquete__list li:last-child { border-bottom: none; }
.bx-paquete__list li::before {
  content: counter(paquete) ".";
  position: absolute;
  left: 0;
  top: 12px;
  font-weight: 800;
  color: #00A1A1;
  font-size: 18px;
}

/* ====== 11. POCAS UNIDADES (encabezado grande estilo Bulevar) ====== */
.bx-pocas {
  text-align: center;
  padding-top: 36px;
  padding-bottom: 28px;
}
.bx-pocas__title {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bx-pocas__title span:first-child {
  color: var(--bx-navy);
}
.bx-pocas__hot {
  color: var(--bx-pink-hot);
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.bx-pocas__text {
  font-size: 16px;
  color: var(--bx-gray);
  line-height: 1.55;
  max-width: 500px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .bx-pocas__title { font-size: 26px; }
  .bx-pocas__hot   { font-size: 30px; }
}

/* ====== 13/15. ENVÍO GRATIS + tiempos (destacado) ====== */
.bx-envio {
  text-align: center;
  background: linear-gradient(135deg, #00A1A1 0%, #007575 100%);
  color: #FFFFFF;
  border-radius: 18px;
  margin: 18px 18px;
  padding: 32px 22px !important;
  box-shadow: 0 10px 28px rgba(0, 117, 117, 0.30);
  position: relative;
  overflow: hidden;
}
/* variante imagen: la foto ya trae su propio diseño → sin fondo ni padding */
.bx-envio--img { background: none !important; padding: 0 !important; box-shadow: none; overflow: visible; }
.bx-envio--img::before { display: none; }
.bx-envio--img img { display: block; width: 100%; height: auto; border-radius: 18px; }
.bx-envio::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(178, 210, 53, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.bx-envio__icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
.bx-envio__title {
  font-size: 26px;
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.20);
}
.bx-envio__sub {
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.bx-envio__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bx-envio__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}
.bx-envio__pin {
  line-height: 1;
  flex-shrink: 0;
  color: var(--turquesa);
  display: inline-flex;
}
.bx-envio__pin svg { width: 20px; height: 20px; }
.bx-envio__list li div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.bx-envio__list strong {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
}
.bx-envio__list span {
  color: #D4AF37;
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 720px) {
  .bx-envio__title { font-size: 22px; }
}

/* ====== 16. ⚠️ ATENCIÓN (efecto neón rojo) ====== */
.bx-atencion {
  text-align: center;
  background: #0F1626;
  border: 2px solid #FF3B3B;
  border-radius: 18px;
  margin: 18px 18px;
  padding: 30px 22px !important;
  box-shadow:
    0 0 24px rgba(255, 60, 60, 0.45),
    inset 0 0 22px rgba(255, 60, 60, 0.18);
  position: relative;
}
.bx-atencion__head {
  font-size: 30px;
  font-weight: 900;
  color: #FF4F4F;
  letter-spacing: 0.14em;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-shadow:
    0 0 6px  #FF4F4F,
    0 0 14px #FF2A2A,
    0 0 26px #FF0000,
    0 0 40px rgba(255, 0, 0, 0.6);
  animation: bxNeonPulse 1.8s ease-in-out infinite;
}
@keyframes bxNeonPulse {
  0%, 100% {
    text-shadow:
      0 0 6px  #FF4F4F,
      0 0 14px #FF2A2A,
      0 0 26px #FF0000,
      0 0 40px rgba(255, 0, 0, 0.6);
  }
  50% {
    text-shadow:
      0 0 4px  #FF4F4F,
      0 0 10px #FF2A2A,
      0 0 18px #FF0000,
      0 0 28px rgba(255, 0, 0, 0.45);
  }
}
.bx-atencion__warn {
  font-size: 30px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(255, 80, 80, 0.7));
}
.bx-atencion__line1 {
  font-size: 17px;
  color: #FFFFFF;
  margin: 0 0 6px;
  font-weight: 600;
}
.bx-atencion__line1 strong {
  color: #FFD93B;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.bx-atencion__line2 {
  font-size: 18px;
  color: #FFFFFF;
  margin: 0;
  font-weight: 700;
  opacity: 0.92;
}
@media (max-width: 720px) {
  .bx-atencion__head  { font-size: 24px; letter-spacing: 0.10em; }
  .bx-atencion__warn  { font-size: 26px; }
  .bx-atencion__line1 { font-size: 15px; }
  .bx-atencion__line2 { font-size: 16px; }
}

/* ====== BREADCRUMB SUPERIOR ESTILO BULEVAR ====== */
.bx-topbar {
  background: #FFFFFF;
  border-bottom: 1px solid #ECEEF3;
}
.bx-topbar__strip {
  height: 4px;
  background: linear-gradient(90deg,
    #007878 0%,
    #00A1A1 30%,
    #00C5C5 50%,
    #B2D235 72%,
    #D4AF37 100%);
}
.bx-topbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.bx-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  font-size: 15px;
  color: #6B7280;
  min-width: 0;
  overflow: hidden;
}
.bx-breadcrumb a {
  color: #1A2A4F;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.bx-breadcrumb a:hover { color: #00A1A1; }
.bx-breadcrumb__sep {
  color: #9CA3AF;
  flex-shrink: 0;
}
.bx-breadcrumb__current {
  color: #1A2A4F;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-prevnext {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  flex-shrink: 0;
}
.bx-prevnext__link {
  color: #1A2A4F;
  font-weight: 600;
  text-decoration: none;
}
.bx-prevnext__link:hover { color: #00A1A1; }
.bx-prevnext__link--disabled {
  color: #C5C9D2;
  cursor: not-allowed;
}
.bx-prevnext__sep { color: #C5C9D2; }
@media (max-width: 720px) {
  .bx-topbar__inner { padding: 10px 14px; gap: 10px; }
  .bx-breadcrumb { font-size: 13px; gap: 6px; }
  .bx-prevnext { font-size: 13px; gap: 6px; }
}

/* ====== TRUST FINAL — 4 garantías antes del footer ====== */
.bx-trust-final {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 16px;
  background: transparent;
  box-sizing: border-box;
}
@media (min-width: 760px) {
  .bx-trust-final {
    grid-template-columns: repeat(4, 1fr);
    padding: 44px 16px;
    gap: 32px;
  }
}
.bx-trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.bx-trust-item__icon {
  width: 44px;
  height: 44px;
  color: #1A2A4F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-trust-item__icon svg {
  width: 100%;
  height: 100%;
}
.bx-trust-item__title {
  font-size: 16px;
  font-weight: 800;
  color: #1A2A4F;
  margin: 0;
  letter-spacing: 0.04em;
}
.bx-trust-item__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #6B7280;
  margin: 0;
}
@media (max-width: 720px) {
  .bx-trust-item__title { font-size: 14px; }
  .bx-trust-item__text  { font-size: 12.5px; }
}

/* ====== FORM CTA COD — wrapper sin margen/padding (form alrededor del botón) ====== */
.form-cta-cod {
  margin: 0;
  padding: 0;
}
.form-cta-cod--sticky {
  flex: 1;
}

/* ====== BOTÓN CTA — 2 LÍNEAS (¡PAGAR CONTRAENTREGA / CON ENVÍO GRATIS!) ====== */
.btn--cod {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.15;
  padding: 16px 22px;
}
.btn--cod .btn__line1 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}
.btn--cod .btn__line2 {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.95;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}
.btn--cod-sm {
  padding: 10px 14px;
}
.btn--cod-sm .btn__line1 { font-size: 15px; }
.btn--cod-sm .btn__line2 { font-size: 11px; }

/* ====== 18. RESEÑAS CON FOTOS ====== */
.bx-resenas__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--bx-navy);
  text-align: center;
  margin: 0 0 22px;
}
.bx-resenas__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
  margin: 0 auto;
}
.bx-resena {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 0;
}
.bx-resena__photo {
  position: relative;
  width: 128px;
  height: 100%;
  min-height: 128px;
  background: #EFEFEF;
  border-right: 3px solid #D4AF37;
  border-bottom: none;
}
.bx-resena__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bx-resena__icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 2px 6px;
  opacity: 0.85;
}
.bx-resena__body {
  padding: 14px 16px 16px;
}
.bx-resena__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.bx-resena__avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.bx-resena__avatar--turquesa { background: #00A1A1; }
.bx-resena__avatar--verde    { background: #5BAA3D; }
.bx-resena__avatar--dorado   { background: #D4AF37; }
.bx-resena__avatar--rosa     { background: #E94570; }
.bx-resena__verify {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  background: #00A1A1;
  color: #FFFFFF;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
}
.bx-resena__name {
  font-size: 16px;
  color: var(--bx-navy);
  font-weight: 700;
}
.bx-resena__text {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bx-gray);
  margin: 0 0 12px;
}
.bx-resena__stars {
  color: #15D6D6;
  font-size: 22px;
  letter-spacing: 2px;
}
@media (max-width: 720px) {
  .bx-resenas__title { font-size: 18px; }
  /* Stack vertical: foto arriba a lo ancho, texto abajo */
  .bx-resena         {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .bx-resena__photo  {
    width: 100%;
    height: 220px;
    min-height: 220px;
    border-right: none;
    border-bottom: 3px solid #D4AF37;  /* línea dorada ahora abajo de la foto */
  }
  .bx-resena__photo img {
    object-position: center;
  }
  .bx-resena__body   { padding: 14px 16px 16px; }
  .bx-resena__name   { font-size: 15px; }
  .bx-resena__text   { font-size: 14px; }
}

/* ---------- OCULTAR MÉTODO DE ENVÍO en Releasit COD ----------
   Solo hay 1 método (gratis), el selector es ruido visual.
   El JS de auto-select (en landing.js::initReleasitAutoSelect) se
   asegura que la opción gratis quede marcada para que el form valide. */
.rsi-shipping-rates-wrapper {
  display: none !important;
}



/* ============================================================
   BLOQUES ESTRUCTURA GANADORA (problema, solución, beneficios,
   comparativa, antes/después, cómo funciona, FAQ, garantía, CTA)
   Paleta Saluha.
   ============================================================ */

.bx-problema, .bx-solucion, .bx-beneficios, .bx-compara,
.bx-antesdesp, .bx-pasos, .bx-faq { padding: 28px 24px; }
@media (max-width: 720px) {
  .bx-problema, .bx-solucion, .bx-beneficios, .bx-compara,
  .bx-antesdesp, .bx-pasos, .bx-faq { padding: 20px 14px; }
}

.bx-beneficios__title, .bx-compara__title, .bx-antesdesp__title,
.bx-pasos__title, .bx-faq__title, .bx-problema__title, .bx-solucion__title {
  font-size: 22px; font-weight: 800; color: var(--bx-navy);
  text-align: center; margin: 0 0 18px; line-height: 1.25; letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .bx-beneficios__title, .bx-compara__title, .bx-antesdesp__title,
  .bx-pasos__title, .bx-faq__title, .bx-problema__title, .bx-solucion__title { font-size: 19px; }
}

/* 9/10 Problema y Solución */
.bx-problema, .bx-solucion { text-align: center; }
.bx-problema__title { color: var(--rojo-oferta); }
.bx-solucion__title { color: var(--turquesa-dark); }
.bx-problema__media, .bx-solucion__media { max-width: 460px; margin: 0 auto 14px; }
.bx-problema__media img, .bx-solucion__media img { width: 100%; border-radius: 14px; display: block; }
.bx-problema__text, .bx-solucion__text {
  font-size: 16px; color: var(--gris-text); line-height: 1.6; max-width: 600px; margin: 0 auto;
}

/* 11 Beneficios con GIF (alternando lado) */
.bx-beneficios__list { display: flex; flex-direction: column; gap: 24px; max-width: 640px; margin: 0 auto; }
.bx-beneficio { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.bx-beneficio--alt { grid-template-columns: 1fr 200px; }
.bx-beneficio--alt .bx-beneficio__media { order: 2; }
.bx-beneficio__media img { width: 100%; border-radius: 14px; display: block; background: var(--gris-light); }
.bx-beneficio__title { font-size: 17px; font-weight: 800; color: var(--turquesa-dark); margin: 0 0 6px; }
.bx-beneficio__text { font-size: 15px; color: var(--gris-text); line-height: 1.5; margin: 0; }
@media (max-width: 620px) {
  .bx-beneficio, .bx-beneficio--alt { grid-template-columns: 1fr; }
  .bx-beneficio--alt .bx-beneficio__media { order: 0; }
  .bx-beneficio__body { text-align: center; }
}

/* 12 Comparativa */
.bx-compara__wrap { max-width: 560px; margin: 0 auto; border: 1px solid var(--gris-bg); border-radius: 16px; overflow: hidden; }
.bx-compara__head, .bx-compara__row { display: grid; grid-template-columns: 1fr 1fr; }
.bx-compara__th { padding: 12px 10px; text-align: center; font-weight: 800; font-size: 14px; }
.bx-compara__th--ours { background: var(--turquesa); color: #fff; }
.bx-compara__th--theirs { background: var(--gris-bg); color: var(--gris-text); }
.bx-compara__row { border-top: 1px solid var(--gris-bg); }
.bx-compara__cell { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; font-size: 14px; line-height: 1.35; }
.bx-compara__cell--ours { background: var(--turquesa-light); color: var(--negro); font-weight: 600; }
.bx-compara__cell--theirs { color: var(--gris-muted); }
.bx-compara__ic { flex: 0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.bx-compara__ic svg { width:16px; height:16px; }
.bx-compara__ic--yes { color:#1f9d55; }
.bx-compara__ic--no { color:#c0392b; }

/* 13 Antes / después */
.bx-antesdesp { text-align: center; }
.bx-antesdesp__media { max-width: 520px; margin: 0 auto; }
.bx-antesdesp__media img { width: 100%; border-radius: 14px; display: block; }
.bx-antesdesp__cap { font-size: 14px; color: var(--gris-muted); margin: 10px 0 0; font-weight: 600; }

/* 14 Cómo funciona (pasos numerados) */
.bx-pasos__list { list-style: none; counter-reset: paso; max-width: 520px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bx-paso { counter-increment: paso; display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.bx-paso::before {
  content: counter(paso); flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--turquesa); color: #fff; font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.bx-paso__body { padding-top: 4px; }
.bx-paso__body strong { display: block; font-size: 16px; color: var(--bx-navy); }
.bx-paso__body span { display: block; font-size: 14px; color: var(--gris-text); margin-top: 2px; line-height: 1.45; }

/* 17 FAQ (acordeón) */
.bx-faq__list { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.bx-faq__item { border: 1px solid var(--gris-bg); border-radius: 12px; background: #fff; overflow: hidden; }
.bx-faq__q { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 15px; color: var(--bx-navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bx-faq__q::-webkit-details-marker { display: none; }
.bx-faq__q::after { content: "+"; font-size: 22px; color: var(--turquesa); font-weight: 700; line-height: 1; }
.bx-faq__item[open] .bx-faq__q::after { content: "\2212"; }
.bx-faq__a { padding: 0 16px 14px; font-size: 14px; color: var(--gris-text); line-height: 1.55; }

/* 18 Garantía */
.bx-garantia { text-align: center; max-width: 560px; margin: 24px auto; background: var(--turquesa-light); border: 2px solid var(--turquesa); border-radius: 18px; padding: 26px 22px; }
.bx-garantia__seal { font-size: 40px; line-height: 1; }
.bx-garantia__title { font-size: 20px; font-weight: 800; color: var(--turquesa-dark); margin: 8px 0 6px; }
.bx-garantia__text { font-size: 15px; color: var(--gris-text); line-height: 1.5; margin: 0; }

/* CTA de cierre (intermedio y final) */
.bx-cta-band { text-align: center; max-width: 560px; margin: 0 auto; padding: 24px; }
.bx-cta-band__text { font-size: 18px; font-weight: 800; color: var(--bx-navy); margin: 0 0 14px; line-height: 1.3; }
.bx-cta-band--final .bx-cta-band__text { color: var(--turquesa-dark); }
.bx-cta-band .btn--cod {
  background: linear-gradient(135deg, #00C5C5 0%, #00A1A1 55%, #008888 100%);
  color: #fff; border: 0; box-shadow: 0 8px 20px rgba(0, 161, 161, 0.35); max-width: 420px; margin: 0 auto;
}

/* Prueba social (aside) */
.sold-line { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: 13.5px; color: var(--gris-text); }
.sold-line__stars { color: var(--dorado); letter-spacing: 1px; font-size: 15px; }
.sold-line__rating { font-weight: 800; color: var(--negro); }
.sold-line__reviews { color: var(--gris-muted); }
.sold-line__sep { color: var(--gris-muted); }
.sold-line__count { font-weight: 700; color: var(--turquesa-dark); }

/* Pill "$X de descuento" + "DE" + flecha % */
.price-lead { font-size: 13px; color: var(--gris-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.price-saving { display: inline-block; background: var(--rojo-oferta); color: #fff; font-weight: 800; font-size: 12.5px; padding: 4px 11px; border-radius: 100px; }

/* Tarjeta vendedor (estilo Bulevar · marca Saluha) */
.seller-card { border: 1px solid var(--gris-bg); border-radius: 14px; padding: 14px; background: #fff; }
.seller-card__head { display: flex; gap: 10px; align-items: center; }
.seller-card__check { flex: 0 0 auto; width: 34px; height: 34px; color: var(--turquesa); }
.seller-card__check svg { width: 100%; height: 100%; }
.seller-card__title { display: block; font-size: 14px; font-weight: 800; color: var(--bx-navy); }
.seller-card__sub { display: block; font-size: 12px; color: var(--gris-muted); }
.seller-card__bar { height: 6px; border-radius: 100px; margin: 12px 0; background: linear-gradient(to right, var(--rojo-oferta), var(--dorado), var(--lima), var(--turquesa)); }
.seller-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.seller-stat b { display: block; font-size: 15px; color: var(--turquesa-dark); font-weight: 800; }
.seller-stat span { display: block; font-size: 10.5px; color: var(--gris-muted); line-height: 1.3; margin-top: 2px; }
.seller-stat--num b { font-size: 18px; color: var(--negro); }

/* Sello verificado junto al título */
.verify-check { display: inline-block; width: 20px; height: 20px; vertical-align: -3px; color: var(--turquesa); }
.verify-check svg { width: 100%; height: 100%; }


/* Características destacadas — fichas que se mueven solas en bucle (marquee · estilo Molino · marca Saluha) */
.bx-caracs{overflow:hidden}
.bx-caracs__list{display:flex;flex-direction:row;flex-wrap:nowrap;gap:14px;list-style:none;padding:4px 2px 12px;margin:0 auto;max-width:760px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bx-caracs__list::-webkit-scrollbar{display:none}
/* modo marquee: desplazamiento automático continuo (lo activa store.js al duplicar las fichas) */
.bx-caracs__list.is-marquee{gap:0;max-width:none;width:max-content;margin:0;overflow:visible;scroll-snap-type:none;animation:slhCaracsScroll 30s linear infinite;will-change:transform}
.bx-caracs__list.is-marquee .bx-carac{margin-right:14px}
.bx-caracs:hover .bx-caracs__list.is-marquee{animation-play-state:paused}
@keyframes slhCaracsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bx-caracs__list.is-marquee{animation:none}}
.bx-carac{flex:0 0 190px;scroll-snap-align:start;background:#fff;border:1px solid var(--gris-bg);border-radius:16px;padding:22px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.bx-carac__icon{width:54px;height:54px;border-radius:50%;background:var(--turquesa-light);color:var(--turquesa-dark);display:grid;place-items:center;flex:0 0 auto}
.bx-carac__icon svg{width:28px;height:28px}
.bx-carac__title{font-size:15px;font-weight:800;color:var(--bx-navy,#1A2A4F);line-height:1.25;margin:0}
.bx-carac__text{font-size:12.5px;color:var(--gris-text);line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:620px){.bx-carac{flex:0 0 160px;padding:18px 12px}}
/* Variante dentro del aside (zona de compra, debajo de los combos) */
.bx-caracs--aside{margin:14px 0 0}
.bx-caracs--aside .bx-caracs__title{font-size:14px;margin:0 0 10px;text-align:center}
.bx-caracs--aside .bx-caracs__list{max-width:100%;gap:10px}
.bx-caracs--aside .bx-caracs__list.is-marquee{gap:0}
.bx-caracs--aside .bx-caracs__list.is-marquee .bx-carac{margin-right:10px}
.bx-caracs--aside .bx-carac{flex:0 0 150px;padding:18px 12px}


/* Proceso de pedido (paso a paso) + Compra 100% segura — íconos Saluha */
.bx-proceso{text-align:center;padding:26px 20px}
.bx-proceso__secure{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:16px;color:var(--bx-navy,#1A2A4F);margin:0 0 22px}
.bx-proceso__secure svg{width:22px;height:22px;color:var(--turquesa)}
.bx-proceso__steps{display:flex;justify-content:center;max-width:520px;margin:0 auto}
.bx-pstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
.bx-pstep__ico{width:56px;height:56px;border-radius:50%;background:var(--turquesa);color:#fff;display:grid;place-items:center;z-index:1;box-shadow:0 6px 14px rgba(0,161,161,.25)}
.bx-pstep__ico svg{width:26px;height:26px}
.bx-pstep__date{font-size:14px;color:var(--bx-navy,#1A2A4F);font-weight:800}
.bx-pstep__label{font-size:12.5px;color:var(--gris-text);line-height:1.2}
.bx-pstep:not(:last-child)::after{content:"";position:absolute;top:28px;left:50%;width:100%;height:3px;background:var(--gris-bg);z-index:0}
/* Variante compacta dentro del aside (junto al botón de compra) — sin línea divisora */
.bx-proceso--aside{padding:6px 4px 2px;margin-top:30px}
.bx-proceso--aside .bx-proceso__secure{font-size:14.5px;margin:0 0 28px}
.bx-proceso--aside .bx-proceso__steps{max-width:100%}
.bx-proceso--aside .bx-pstep__ico{width:46px;height:46px}
.bx-proceso--aside .bx-pstep__ico svg{width:22px;height:22px}
.bx-proceso--aside .bx-pstep:not(:last-child)::after{top:23px}
.bx-proceso--aside .bx-pstep__date{font-size:12.5px}
.bx-proceso--aside .bx-pstep__label{font-size:11px}
.bx-garantia__seal svg{width:44px;height:44px;color:var(--turquesa-dark)}

/* ====== Landing por IMÁGENES (modo imágenes · ATIDCOA) ====== */
.img-landing{max-width:none;width:100%;margin:0;padding:0 0 24px;background:#f7f4f6}   /* de lado a lado (ancho completo); el JS pone el tinte real */
/* width/height reales en el <img> reservan el alto exacto (sin salto al cargar).
   height:auto conserva la proporción; el navegador deriva aspect-ratio del w/h. */
.imgl__img{display:block;width:100%;height:auto;background:rgba(0,0,0,.035)}   /* placeholder tenue mientras carga (sin destello) */
.imgl__img:not([width]){aspect-ratio:4/5}   /* fallback para imágenes remotas sin dimensiones conocidas */
.imgl__slide{position:relative}   /* flujo continuo; el botón va dentro con espaciado simétrico */

/* ---- Aviso de pago de envío por adelantado (alto riesgo) ---- */
#freightAlert{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px}
#freightAlert .fa__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
#freightAlert .fa__card{position:relative;background:#fff;border-radius:18px;max-width:380px;width:100%;padding:26px 22px 20px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.32);animation:faIn .25s ease}
@keyframes faIn{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
#freightAlert .fa__emoji{font-size:40px;line-height:1}
#freightAlert .fa__title{margin:8px 0 8px;font-size:21px;color:#15202b}
#freightAlert .fa__text{color:#4b5563;font-size:15px;line-height:1.5;margin:0 0 14px}
#freightAlert .fa__amount{background:#f0fdfa;border:1px solid #99f6e4;border-radius:12px;padding:10px;font-size:18px;color:#0f766e;margin-bottom:16px}
#freightAlert .fa__pay{width:100%}
#freightAlert .fa__close{display:block;margin:10px auto 0;background:none;border:none;color:#9ca3af;font-size:14px;cursor:pointer;text-decoration:underline}

/* ---- Botón de pago en línea (anticipado con descuento) + logos ---- */
.btn--payonline{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;background:#2563eb;color:#fff;border:none;border-radius:12px;padding:15px 16px;font-size:14.5px;font-weight:800;line-height:1.25;cursor:pointer;text-align:center;box-shadow:0 8px 20px rgba(37,99,235,.28)}
.btn--payonline:active{transform:translateY(1px)}
.btn--payonline[disabled]{opacity:.7;cursor:default}
.payonline__ic{font-size:20px;flex:none}
.paylogos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:9px 0 2px}
.paylogos span{font-size:11px;font-weight:700;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:3px 8px;letter-spacing:.3px}
/* Pie mínimo de cumplimiento (sin branding) */
.minfoot{padding:22px 16px 40px;text-align:center;border-top:1px solid #eee;background:#fff}
.minfoot__links{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:0 0 12px}
.minfoot__links a{color:#64748b;font-size:13px;text-decoration:none}
.minfoot__links a:hover{color:var(--turquesa,#00A1A1)}
.minfoot__legal{max-width:760px;margin:0 auto;color:#9aa4b2;font-size:11px;line-height:1.5}
.imgl__cta{padding:22px 16px;background:transparent}   /* simétrico: igual arriba y abajo */
.imgl__cta .btn{max-width:560px;margin:0 auto;background:linear-gradient(135deg,#00C5C5 0%,#00A1A1 50%,#008888 100%)!important;color:#fff!important;box-shadow:0 10px 24px rgba(0,161,161,.3)}
@media(max-width:600px){ .imgl__cta{padding:18px 14px} }
/* Movimiento: pulso suave en los botones inline (centrados, no desbordan) */
@keyframes slhCtaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.imgl__cta .btn{animation:slhCtaPulse 1.9s ease-in-out infinite;will-change:transform}
/* Flotante (ancho completo): brillo que lo recorre en vez de escalar */
.sticky-cta__btn{position:relative;overflow:hidden}
.sticky-cta__btn::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:slhShine 2.8s ease-in-out infinite;pointer-events:none}
@keyframes slhShine{0%{left:-60%}55%,100%{left:135%}}
@media(prefers-reduced-motion:reduce){ .imgl__cta .btn{animation:none} .sticky-cta__btn::after{animation:none;display:none} }