:root{
  --brand:#E03687;      /* rose */
  --brand-2:#B388EB;    /* lilac */
  --bg:#FFF7FA;         /* blush */
  --ink:#2B1E1E;        /* deep plum */
  --muted:#5B4A53;      /* muted plum */
  --card:#FFFFFF;
  --stroke:#FADAE7;     /* soft pink border */
}
*{box-sizing:border-box} html{scroll-behavior:smooth}

.container{max-width:1180px; margin:0 auto; padding:0 20px}
.section{padding:30px 0}
h1,h2,h3{margin:0 0 12px; line-height:1.15} h1{font-size:clamp(34px,4vw,56px)} h2{font-size:clamp(26px,3vw,38px)} h3{font-size:clamp(20px,2vw,26px)}
p{color:var(--muted); font-size:18px; line-height:1.75}
.btn{display:inline-block; padding:14px 22px; border-radius:14px; font-weight:700; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; border:none; box-shadow:0 10px 24px rgba(124,58,237,.2); transition:transform .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(124,58,237,.3)}
.btn.outline{background:#fff; color:var(--ink); border:2px solid var(--stroke)}
.badge{padding:8px 12px; border-radius:999px; background:#FCE7F3; color:#6B21A8; font-size:14px; font-weight:700}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:18px; padding:5px; box-shadow:0 10px 30px rgba(17,24,39,.04)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px}
.kpi strong{display:block; font-size:26px; color:#111827}
.image img{width:110%; height:auto; border-radius:16px; border:1px solid var(--stroke); display:block}
.table{width:100%; border-collapse:collapse; font-size:15px}
.table th,.table td{padding:12px 14px; border-bottom:1px solid var(--stroke); text-align:left}
.accordion{display:grid; gap:10px; margin-top:16px}
details{background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:14px}
summary{cursor:pointer; font-weight:700; color:#4338CA}
.faq details{background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:14px}
.faq summary{cursor:pointer; font-weight:600; color:#4338CA}
.cta-bar{position:sticky; bottom:14px; z-index:50}
.cta-inner{max-width:920px; margin:0 auto; background:#fff; border:1px solid var(--stroke); border-radius:16px; padding:14px 18px; display:flex; gap:16px; align-items:center; box-shadow:0 20px 50px rgba(0,0,0,.06)}
.price{font-size:32px; font-weight:800; color:#111827}
.price del{color:#9CA3AF; margin-left:8px; font-weight:500}
.countdown{font-variant-numeric:tabular-nums; font-weight:800; color:#B91C1C; font-size:28px; letter-spacing:1px}
.notice{font-size:13px; color:#6B7280}
ul.feature-list{margin:0; padding-left:18px}
.testis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.testi strong{color:#111827}
.stars{color:#F59E0B; font-size:16px; letter-spacing:1px}
.footer{padding:30px 0; font-size:14px; color:#6B7280; border-top:1px solid var(--stroke)}
.cookie{position:fixed; left:16px; right:16px; bottom:16px; background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:14px; display:none; z-index:60; box-shadow:0 10px 24px rgba(0,0,0,.06)}
.cookie button{margin-left:auto}
.breadcrumbs{font-size:14px; color:#6B21A8; margin-bottom:10px}

/* Responsive YouTube */
.video-block{margin-top:16px}
.video-title{font-weight:800; margin:8px 0 6px}
.video-wrap{position:relative; width:100%; border-radius:16px; overflow:hidden; border:1px solid var(--stroke); box-shadow:0 6px 24px rgba(0,0,0,.06)}
.video-wrap::before{content:""; display:block; padding-top:56.25%} /* 16:9 */
.video-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .testis{grid-template-columns:1fr}
}


/* === Senior-friendly readability upgrades === */
body{font-size:18px}
p{font-size:19px; line-height:1.9}
h1{letter-spacing:.2px}
h2,h3{letter-spacing:.15px}
.btn{padding:16px 26px; font-size:18px; border-radius:18px; font-weight:800}
.btn:focus-visible{outline:3px solid var(--brand-2); outline-offset:2px}
input, select, textarea{font-size:18px; padding:14px 16px; border-radius:14px; border:1.5px solid var(--stroke)}
label{font-size:16px}
.small{font-size:16px}
.badge{background:#FCE4EC; color:#6A1B9A}
.section{padding:30px 0}

/* Soft gradient hero */
.hero{background:linear-gradient(145deg, rgba(255,247,250,1) 0%, rgba(243,229,245,.9) 45%, rgba(250,218,231,.85) 100%)}
.hero .wrap{gap:36px}

/* Cards with softer look */
.card{border-color:var(--stroke); box-shadow:0 14px 42px rgba(179,136,235,.12)}
.cards{gap:22px}

/* Buttons secondary */
.btn.outline{border-color:#F3E5F5}

/* CTA button extra emphasis */
.cta-big{font-size:20px; padding:18px 28px; border-radius:22px}

/* Better links */
a{color:var(--brand); text-underline-offset:4px}
a:hover{opacity:.9}

/* Cookie bar size */
.cookie p{font-size:16px}

/* Video and images rounded more */
img, .video-wrap{border-radius:18px}

/* Larger counters */
.countdown{font-size:22px; font-weight:800}
.kpis .num{font-size:28px;}

/* Mobile tweaks */
@media(max-width:980px){
  .btn{font-size:17px; padding:15px 22px}
  p{font-size:18px}
  .cta-big{font-size:19px}
}


/* === Friendly colorful background for seniors === */


/* Subtle confetti pattern overlay */


/* Elevate content cards so text remains readable on colorful bg */
.section:not(.hero) .container{
  background: rgba(255,255,255,.92);
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:24px 26px;
  box-shadow: 0 18px 50px rgba(179,136,235,.12);
}

/* Make hero much more colorful and inviting */
.hero{
  background:
    radial-gradient(500px 240px at 15% 20%, rgba(255,214,233,.85), transparent 70%),
    radial-gradient(600px 300px at 85% 10%, rgba(210,195,255,.75), transparent 70%),
    linear-gradient(120deg, #FFD6E8 0%, #F3E5F5 52%, #FFD4E2 100%);
  position:relative;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 10px, rgba(255,255,255,0) 10px 20px);
  mix-blend-mode: soft-light; opacity:.5;
  border-radius:0 0 32px 32px;
}
.hero .wrap{padding:12px 0}

/* CTA area highlight */
.cta-band{
  background: linear-gradient(90deg, rgba(229,115,160,.12), rgba(179,136,235,.12));
  border:1px dashed var(--stroke);
  padding:18px;
  border-radius:18px;
}

/* Stronger main CTA */
.btn, .cta-big{background: var(--brand); color:#fff}
.btn:hover, .cta-big:hover{filter: brightness(1.05) saturate(1.05)}


/* === Pastel floral background, behind all content === */


/* Soft flower pattern as SVG, sits underneath content */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  z-index:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>  <defs>    <g id='fl'>      <circle cx='10' cy='0' r='6' fill='%23F8BBD0' opacity='0.55'/>      <circle cx='-10' cy='0' r='6' fill='%23E1BEE7' opacity='0.55'/>      <circle cx='0' cy='10' r='6' fill='%23FFE0B2' opacity='0.55'/>      <circle cx='0' cy='-10' r='6' fill='%23B3E5FC' opacity='0.55'/>      <circle cx='0' cy='0' r='3' fill='%23E03687' opacity='0.8'/>    </g>  </defs>  <g transform='translate(30,30)'><use href='%23fl'/></g>  <g transform='translate(90,30)'><use href='%23fl'/></g>  <g transform='translate(30,90)'><use href='%23fl'/></g>  <g transform='translate(90,90)'><use href='%23fl'/></g></svg>");
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity:.4;
}

/* Make all main content sit above the pattern */
.topbar, header, main, section, footer, .section, .container, .card, .video-wrap, img, video{
  position: relative;
  z-index: 1;
}


/* === Topbar with logo === */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.82);
  border-bottom:1px solid var(--stroke);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand-left{display:flex; align-items:center; gap:10px}
.logo{width:110px!important; height:110px!important; border-radius:16px;}
.brand-name{font-weight:800; letter-spacing:.3px}
.cta-small{padding:10px 16px; border-radius:14px; font-weight:800}
@media(max-width:760px){ .brand-name{display:none} }


/* === Trust badges === */
.trust-badges .badges-wrap{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; align-items:center
}
.trust-badges .badge-item{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border:1px dashed var(--stroke); border-radius:16px;
  background: linear-gradient(90deg, rgba(224,54,135,.08), rgba(179,136,235,.08));
  font-weight:700;
}
.trust-badges svg{color: var(--brand)}
@media(max-width:900px){ .trust-badges .badges-wrap{grid-template-columns:1fr} }


.logo{width:110px!important; height:110px!important; border-radius:16px;}
.brand-name{font-size:20px; font-weight:700;}


body{
  position: relative;
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(179,136,235,.55), transparent 60%),
    radial-gradient(900px 600px at 90% 100%, rgba(224,54,135,.35), transparent 60%),
    linear-gradient(180deg, #CFA8FF 0%, #B983FF 60%, #A56BFF 100%);
  background-attachment: fixed;
}


/* === Fixed Offer Bar (sticky & eye-catching) === */

.offer-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.offer-badge{
  background:#fff; color:#E03687; font-weight:900;
  padding:6px 10px; border-radius:999px; font-size:13px;
}
.offer-text{font-weight:800}
.offer-bar .countdown{font-weight:900; letter-spacing:.5px}
.offer-cta{background:#fff; color:#5B2A6E; font-weight:900; padding:10px 14px; border-radius:12px}
.offer-cta:hover{filter:brightness(1.05)}
/* Pulse highlight */

@keyframes pulseGlow{
  0%,100%{box-shadow:0 18px 40px rgba(224,54,135,.25)}
  50%{box-shadow:0 22px 54px rgba(179,136,235,.35)}
}
@media (max-width: 520px){
  .offer-text{display:none}
}

.topbar, header, main, section, footer, .section, .container, .card, .video-wrap, img, video{position:relative; z-index:1}


.offer-bar .price{
  font-weight:800;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.offer-bar .price s{
  opacity:.7;
  font-weight:600;
}


.price-block{
  display:flex; flex-direction:column; align-items:center;
  margin-top:4px;
}
.price-now{font-weight:900; font-size:20px;}
.price-old{opacity:.7; font-size:16px;}




h1::after{
  content:"✨"; margin-left:8px; animation: sparkle 1.8s ease-in-out infinite;
}
@keyframes sparkle{0%,100%{opacity:1;}50%{opacity:.3;}}

.emotional-bar{
  text-align:center; padding:8px 0;
  background:#E03687; color:#fff; font-weight:700;
  position:sticky; top:0; z-index:9998;
}

.offer-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
}
.price-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:6px;
}
.price-now{font-weight:900; font-size:22px;}
.price-old{opacity:.7; font-size:18px;}

.offer-left{display:flex; flex-direction:column; align-items:center; text-align:center;}
.offer-cta{background:#fff; color:#5B2A6E; font-weight:900; padding:12px 22px; border-radius:12px;}
.price-block{margin-top:4px;}


@media (max-width: 780px){
  
  .offer-cta{width:100%; text-align:center; font-size:18px; padding:14px 0; border-radius:14px}
}


/* === Offer bar layout cleanup === */

.offer-inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: 28px; /* space between text and button */
}
.offer-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:10px;        /* space between lines */
  line-height:1.35;
}
.offer-badge{font-size:16px; font-weight:800}
.countdown{font-size:24px; font-weight:900; letter-spacing:.5px}
.price-block{margin-top:2px; display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.price-now{font-weight:900; font-size:22px}
.price-old{opacity:.8; font-size:16px}

.offer-cta{
  background:#fff;
  color:#5B2A6E;
  font-weight:900;
  padding:14px 26px;
  border-radius:14px;
  border:none;
}

/* Mobile: full-width stacking with generous spacing */
@media (max-width: 780px){
  .offer-inner{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .offer-left{
    align-items:center;
    text-align:center;
    gap:8px;
  }
  .offer-cta{
    width:100%;
    text-align:center;
    font-size:18px;
    padding:14px 0;
  }
}


.offer-left .offer-text{margin-top:2px}
.offer-left .countdown{margin-top:2px}
.price-block .price-now{margin-top:2px}


/* === Offer bar laid out horizontally (desktop) === */
.offer-bar .offer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.offer-bar .offer-left{
  display:flex;
  flex-direction:row;    /* INLINE, not stacked */
  align-items:center;
  gap:22px;
  text-align:left;
  flex-wrap:nowrap;      /* keep in one line on desktop */
}

.offer-bar .price-block{
  display:flex;
  flex-direction:row;    /* price inline */
  align-items:center;
  gap:10px;
  margin-top:0;
}
.offer-bar .price-now{font-size:22px; font-weight:900}
.offer-bar .price-old{font-size:16px; opacity:.8}

/* Keep button sized nicely */
.offer-bar .offer-cta{
  white-space:nowrap;
}

/* Mobile: allow wrapping nicely */
@media (max-width: 780px){
  .offer-bar .offer-inner{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:0 14px;
  }
  .offer-bar .offer-left{
    justify-content:center;
    flex-wrap:wrap;       /* allows wrap on small screens */
    gap:10px 16px;
    text-align:center;
  }
  .offer-bar .offer-cta{
    width:100%;
    text-align:center;
    font-size:18px;
    padding:14px 0;
  }
}

.offer-bar{
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0; right: 0;
  width: 100%;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(90deg, #E03687, #B388EB);
  color:#fff;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  border-radius:0;
  box-shadow:0 -6px 28px rgba(0,0,0,.25);
  transform: translateZ(0);
  will-change: transform;
}

body {
  padding-bottom: 100px; /* prevent content overlap */
}

@supports (height: 100svh){
  body{ padding-bottom: 14svh; }
}
/* ===== Offer Bar (usa --brand / --brand-2) ===== */
.offer-bar{
  position:fixed; left:0; right:0; bottom:env(safe-area-inset-bottom);
  z-index:9999;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 32px rgba(0,0,0,.22);
}
.offer-inner{
  max-width:1180px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.offer-left{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.offer-badge{
  background:#fff; color:var(--brand); font-weight:900;
  padding:6px 12px; border-radius:999px; font-size:14px;
  border:2px solid var(--stroke);
}
.offer-text{font-weight:800; opacity:.95}
.offer-timer{display:flex; gap:10px; align-items:center}
.offer-timer .unit{
  background:#2B1E1E; color:#fff; border-radius:10px; padding:8px 12px;
  text-align:center; min-width:68px; line-height:1;
}
.offer-timer .unit span{display:block; font-weight:900; font-variant-numeric:tabular-nums}
.offer-timer .unit small{display:block; font-size:11px; opacity:.8; margin-top:4px}

.price-block{display:flex; align-items:center; gap:10px}
.price-now{background:#fff; color:#16a34a; font-weight:900; padding:6px 10px; border-radius:8px}
.price-old{color:#FFE0E0; font-weight:700}

.offer-cta{ /* usa tu botón outline blanco */
  composes: btn outline;
  background:#fff; color:var(--ink);
  font-weight:900; border-color:var(--stroke);
}

/* Evitar que la barra tape el contenido */
body{padding-bottom:110px}

/* Responsive */
@media (max-width:780px){
  .offer-inner{flex-direction:column; align-items:stretch; gap:12px}
  .offer-left{justify-content:center; text-align:center}
  .offer-cta{width:100%; text-align:center}
}

/* ===== MOBILE FIX FOR OFFER BAR ===== */
@media (max-width: 780px){

  .offer-bar{
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(0,0,0,.15);
  }

  .offer-inner{
    gap:10px;
  }

  .offer-left{
    flex-wrap:wrap;
    gap:6px 10px;
    text-align:center;
    justify-content:center;
  }

  .offer-badge{
    font-size:12px;
    padding:5px 10px;
  }

  .offer-text{
    font-size:13px;
  }

  /* Compactar el timer */
  .offer-timer .unit{
    min-width:auto;
    padding:4px 6px;
    border-radius:6px;
  }
  .offer-timer .unit span{
    font-size:14px;
    font-weight:800;
  }
  .offer-timer .unit small{
    font-size:9px;
  }

  /* Precios más pequeños */
  .price-now{
    font-size:16px;
    padding:4px 8px;
  }
  .price-old{
    font-size:14px;
  }

  /* Botón más pequeño y sin ocupar demasiado */
  .offer-cta{
    font-size:15px;
    padding:10px 16px;
    border-radius:10px;
    width:auto;
  }

  /* Reducir la altura total visible para que no tape medio móvil */
  body{
    padding-bottom:80px !important;
  }
}

/* ====== RESPONSIVE MOBILE FIX ====== */
@media (max-width: 768px) {

  body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }

  .container, .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  h1 {
    font-size: 28px !important;
    line-height: 1.25;
  }
  h2 {
    font-size: 22px !important;
  }
  p, li, span, a {
    font-size: 16px !important;
    line-height: 1.4;
  }

  .stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    gap: 12px;
  }

  button, .btn, .cta-btn {
    width: 100% !important;
    padding: 14px 0 !important;
    border-radius: 12px !important;
    font-size: 18px !important;
  }

  .precio-box {
    text-align: center;
    padding: 24px 16px !important;
  }

  img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* ===== CTA RESPONSIVE FIX ===== */
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Botón */
.btn.cta {
  background: var(--brand);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

/* Ajuste móvil */
@media (max-width: 768px) {
  .cta-inner {
    flex-direction: column;
    text-align: center;
  }
  .btn.cta {
    width: 100%;
  }
}

.cta-text {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Espacio entre ellos */
  text-align: center; /* Si lo quieres centrado */
}

.price {
  display: flex;
  flex-direction: column;
  align-items: center; /* o flex-start si lo quieres a la izquierda */
  gap: 6px;
}

/* Precio principal */
.price-now {
  font-size: 32px !important;   /* Hazlo grande */
  font-weight: 900 !important;
  color: #111827;               /* Negro elegante */
  line-height: 1.1;
}

/* Precio tachado */
.price-old {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #9CA3AF;               /* Gris suave */
}

/* Tachado */
.price-old del {
  opacity: .65;
}

/* --- Precio Oferta (premium, pequeño y elegante) --- */
.price-now {
  display: inline-block;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #fff;
  padding: 1px 2px;        /* más pequeño */
  border-radius: 2px;
  font-size: 10px;          /* más pequeño aún */
  font-weight: 800;
  letter-spacing: 0.3px;
  animation: pulsePremium 2.6s ease-in-out infinite;
}

/* --- Precio Viejo en Rojo Premium --- */
.price-old, 
.price-old del {
  color: #E03687 !important;
  font-size: 13px;          /* más pequeño */
  font-weight: 700;
  opacity: 0.9;
}

/* --- Animación Premium (sin verse exagerado) --- */
@keyframes pulsePremium {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(224, 54, 135, 0.25); }
  50% { transform: scale(1.045); box-shadow: 0 0 14px rgba(224, 54, 135, 0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(224, 54, 135, 0.25); }
}

/* Reduce el tamaño del contenedor completo del precio */
.price {
  transform: scale(0.85); /* ↓ CAMBIA ESTE VALOR PARA AJUSTAR TAMAÑO */
  transform-origin: center;
}

/* Quitar línea del botón */
a.btn.cta,
a.btn,
.offer-cta,
.cta-band a,
a[href*="hotmart"] {
  text-decoration: none !important;
}

/* Animación Premium para el botón */
@keyframes pulseBtn {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(224, 54, 135, 0.25); }
  50% { transform: scale(1.05); box-shadow: 0 0 18px rgba(224, 54, 135, 0.40); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(224, 54, 135, 0.25); }
}

/* Aplica la animación solo a los botones comprar */
.btn.cta,
.offer-cta {
  animation: pulseBtn 2.2s ease-in-out infinite;
  transition: transform .2s;
}

/* Que al pasar el mouse se vea aún más bonito */
.btn.cta:hover,
.offer-cta:hover {
  transform: scale(1.08);
}