:root{
  --navy:#242A44;
  --blue:#1971B4;
  --sky:#2A8DDA;
  --red:#D21F17;
  --yellow:#FBD418;
}

/* ✅ Evita espacio/scroll lateral en móvil */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* si prefieres: overflow-x: clip; */
}

/* ✅ Previene que imágenes/elementos se pasen del ancho */
img, svg, video, canvas{
  max-width: 100%;
}

/* Background soft blobs */
.bg-soft{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(42,141,218,.18), transparent 55%),
    radial-gradient(900px 700px at 90% 20%, rgba(25,113,180,.14), transparent 60%),
    radial-gradient(1000px 700px at 40% 95%, rgba(251,212,24,.18), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 50%, #ffffff 100%);
}

.dot-live{
  width:10px;height:10px;border-radius:999px;
  background: var(--yellow);
  box-shadow: 0 0 0 7px rgba(251,212,24,.25);
  animation: pulse 1.35s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.15); opacity: .75; }
}

/* Cards */
.card-white{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}

.offer-block{
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(25,113,180,.08), rgba(255,255,255,.85));
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}

/* Pills */
.pill{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.8);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.pill-title{ font-size:12px; color: rgba(15,23,42,.65); font-weight: 700; }
.pill-value{ font-size:16px; font-weight: 900; color: var(--navy); }
.pill-sub{ font-size:14px; font-weight: 800; color: var(--navy); }

/* ✅ Precio anterior tachado (garantizado) + nuevo precio grande */
.pill-old{
  position: relative;
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.50);
  padding: 0 2px;
}
.pill-old::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  top:50%;
  height:2px;
  background: rgba(210,31,23,.78);
  transform: translateY(-50%);
  border-radius: 2px;
}
.pill-new{
  margin-top: 2px;
  font-size: 20px;  /* más grande */
  font-weight: 900;
  line-height: 1.05;
  color: var(--navy);
}

/* Buttons */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.95rem 1.15rem;
  border-radius: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), #1c2140);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 45px rgba(36,42,68,.18);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  user-select:none;
}
.btn-primary:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 22px 55px rgba(36,42,68,.22);
}
.btn-primary:active{ transform: translateY(0px) scale(.99); }

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.95rem 1.15rem;
  border-radius: 16px;
  font-weight: 900;
  color: var(--navy);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.16);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  user-select:none;
}
.btn-outline:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
}
.btn-outline:active{ transform: translateY(0px) scale(.99); }

.cta-glow{
  box-shadow:
    0 22px 60px rgba(36,42,68,.20),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 34px rgba(42,141,218,.12);
}

/* ✅ Evita overflow horizontal por botones inline-flex en móvil */
.btn-primary,
.btn-outline{
  max-width: 100%;
  flex-wrap: wrap;
  white-space: normal;
  text-align: center;
}

/* Animated CTA */
.btn-wiggle{ animation: wiggle 2.3s ease-in-out infinite; }
@keyframes wiggle{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}
.btn-float{ animation: floatCTA 2.1s ease-in-out infinite; }
@keyframes floatCTA{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:"";
  position:absolute;
  inset:-120% -60%;
  background: linear-gradient(90deg, transparent, rgba(42,141,218,.22), transparent);
  transform: rotate(18deg);
  animation: shineMove 2.8s linear infinite;
}
@keyframes shineMove{
  0%{ transform: translateX(-40%) rotate(18deg); opacity:0; }
  20%{ opacity:.8; }
  100%{ transform: translateX(55%) rotate(18deg); opacity:0; }
}

/* Badges / check */
.badge-red{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--red), #ff3b30);
  box-shadow: 0 12px 30px rgba(210,31,23,.18);
}
.badge-blue{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: var(--navy);
  background: rgba(42,141,218,.16);
  border: 1px solid rgba(42,141,218,.25);
}
.check{
  width:20px;height:20px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(251,212,24,.22);
  border: 1px solid rgba(251,212,24,.35);
  color: var(--navy);
  font-weight: 900;
}

/* Products */
.product-card{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.16);
}
.product-media{
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(25,113,180,.06), rgba(255,255,255,.95));
  border: 1px solid rgba(15,23,42,.08);
  padding: 12px;
  aspect-ratio: 4 / 3;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.product-img{ max-height: 100%; width:auto; object-fit:contain; }
.tag{
  font-size: 11px;
  font-weight: 900;
  color: var(--navy);
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  padding: 6px 10px;
  border-radius: 999px;
}

.floaty{ animation: productFloat 3.3s ease-in-out infinite; }
@keyframes productFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Offer cards */
.price-card{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.trust-card{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}

/* Include mini cards */
.mini-card{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.mini-title{ font-weight: 900; color: var(--navy); }
.mini-text{ margin-top: 6px; color: rgba(15,23,42,.72); font-size: 14px; }

/* Photo slots */
.photo-slot{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}

/* Imagen: SIEMPRE llena el cuadro sin espacios blancos */
.photo-img{
  width: 100%;
  height: 200px; /* Ajusta 200-260 según te guste */
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Caption */
.photo-caption{
  padding: 14px 16px;
  background: rgba(255,255,255,.95);
}

/* FAQ */
.faq{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.faq summary{
  cursor:pointer;
  font-weight: 900;
  color: var(--navy);
}
.faq p{
  margin-top: 8px;
  color: rgba(15,23,42,.72);
  font-size: 14px;
}

/* WhatsApp floating */
.wa-float{
  position: fixed;
  right: 16px;
  bottom: 92px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(15,23,42,.14);
  transition: transform .18s ease, background .18s ease;
}
.wa-float:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.98);
}
.wa-dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  background: #25D366;
  box-shadow: 0 0 0 8px rgba(37,211,102,.14);
  animation: pulse 1.35s ease-in-out infinite;
}
.wa-text{ font-weight: 900; color: var(--navy); }

/* CTA principal más llamativo */
.cta-attention{
  animation: ctaPulse 1.1s ease-in-out infinite;
  transform-origin: center;
}
@keyframes ctaPulse{
  0%,100%{ transform: translateY(0) scale(1); filter: brightness(1); }
  50%{ transform: translateY(-2px) scale(1.03); filter: brightness(1.06); }
}

/* Reloj que se mueve */
.clock-wiggle{
  animation: clockShake 1.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes clockShake{
  0%,100%{ transform: rotate(0deg) translateY(0); }
  20%{ transform: rotate(-10deg) translateY(-1px); }
  40%{ transform: rotate(10deg) translateY(-1px); }
  60%{ transform: rotate(-6deg) translateY(0); }
  80%{ transform: rotate(6deg) translateY(0); }
}

/* Evita que el botón de "Unidades limitadas" mande el icono "por fuera" */
.nowrap-btn{
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-wiggle, .btn-float, .floaty, .shine::after, .dot-live, .wa-dot,
  .cta-attention, .clock-wiggle{
    animation: none !important;
  }
}