/* Darling Digital Pro: estilos compartidos (botón de guía gratis, formulario y botones de compartir) */

/* ---------- Botón "Recibe mi guía gratis" ---------- */
.guia-row{display:flex; justify-content:center; margin-top:14px;}
.guia-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 26px; border-radius:999px; font:inherit; font-family:'Inter',system-ui,sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#D4AF37; background:rgba(212,175,55,.08); border:1px dashed rgba(212,175,55,.7);
  transition:background .2s, border-color .2s, transform .15s;
}
.guia-btn:hover{background:rgba(212,175,55,.16); border-style:solid; transform:translateY(-1px);}
.guia-btn:focus-visible{outline:2px solid #F2F0EE; outline-offset:3px;}
.guia-btn svg{width:18px; height:18px; flex-shrink:0;}

/* ---------- Formulario (ventana) ---------- */
#guia-modal{position:fixed; inset:0; z-index:99999; overflow-y:auto; display:flex; padding:24px 16px;
  background:rgba(5,5,5,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:'Inter',system-ui,sans-serif; color:#F2F0EE; -webkit-font-smoothing:antialiased;}
#guia-modal[hidden]{display:none}
html.guia-open, html.guia-open body{overflow:hidden}
#guia-modal .lg-card{position:relative; margin:auto; width:100%; max-width:440px; padding:34px 28px; border-radius:20px; background:#141414;
  border:1px solid rgba(212,175,55,.35); box-shadow:0 30px 80px -30px rgba(0,0,0,.9); text-align:left;}
#guia-modal .lg-close{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid #545454; background:transparent;
  color:#cfcfcf; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0; box-shadow:none;}
#guia-modal .lg-close:hover{border-color:#cfcfcf; color:#fff}
#guia-modal .lg-gift{display:block; width:44px; height:44px; margin:0 auto 10px; color:#D4AF37;}
#guia-modal .lg-brand{margin:0 0 6px; text-align:center; font-family:'Playfair Display',serif; font-size:15px; letter-spacing:.08em; color:#cfcfcf;}
#guia-modal .lg-brand b{font-weight:500; color:#E52B2B;}
#guia-modal h2{margin:0 0 10px; text-align:center; font-family:'Playfair Display',serif; font-weight:500; font-size:26px; line-height:1.25; color:#F2F0EE;}
#guia-modal .lg-sub{margin:0 0 22px; text-align:center; font-size:14px; line-height:1.6; color:#9A9A9A;}
#guia-modal label{display:block; margin:0 0 6px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#D4AF37;}
#guia-modal input[type=text],#guia-modal input[type=email],#guia-modal input[type=tel]{width:100%; margin:0 0 16px; padding:13px 14px; font:inherit; font-size:16px; color:#F2F0EE;
  background:#0E0E0E; border:1px solid #545454; border-radius:10px; box-sizing:border-box;}
#guia-modal select{width:100%; margin:0 0 16px; padding:13px 14px; font:inherit; font-size:16px; color:#F2F0EE;
  background:#0E0E0E; border:1px solid #545454; border-radius:10px; box-sizing:border-box; cursor:pointer;}
#guia-modal select:focus{outline:2px solid #D4AF37; outline-offset:1px; border-color:#D4AF37}
#guia-modal select[aria-invalid=true]{border-color:#E52B2B}
#guia-modal select option, #guia-modal select optgroup{background:#141414; color:#F2F0EE;}
#guia-modal .lg-phone{display:flex; align-items:stretch; margin:0 0 16px;}
#guia-modal .lg-prefix{display:flex; align-items:center; padding:0 12px; min-width:62px; justify-content:center; font-size:15px; font-weight:600; color:#D4AF37;
  background:#1a1a1a; border:1px solid #545454; border-right:0; border-radius:10px 0 0 10px;}
#guia-modal .lg-phone input[type=tel]{margin:0; border-radius:0 10px 10px 0; min-width:0; flex:1;}
#guia-modal input::placeholder{color:#666}
#guia-modal input:focus{outline:2px solid #D4AF37; outline-offset:1px; border-color:#D4AF37}
#guia-modal input[aria-invalid=true]{border-color:#E52B2B}
#guia-modal .lg-consent{display:flex; gap:10px; align-items:flex-start; margin:2px 0 6px; font-size:12.5px; line-height:1.5; color:#9A9A9A; text-transform:none; letter-spacing:0; font-weight:400;}
#guia-modal .lg-consent input{margin-top:3px; accent-color:#E52B2B; flex-shrink:0}
#guia-modal .lg-consent a{color:#D4AF37}
#guia-modal .lg-err{min-height:18px; margin:6px 0 10px; font-size:12.5px; color:#ff6b6b;}
#guia-modal .lg-send{width:100%; padding:15px 20px; font:inherit; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  color:#fff; background:#E52B2B; border:0; border-radius:10px; box-shadow:0 0 24px -4px rgba(229,43,43,.5);}
#guia-modal .lg-send:hover{opacity:.92} #guia-modal .lg-send:disabled{opacity:.6; cursor:default}
#guia-modal .lg-send:focus-visible{outline:2px solid #F2F0EE; outline-offset:2px}
#guia-modal .lg-done{text-align:center}
#guia-modal .lg-done p{margin:0 0 22px; font-size:15px; line-height:1.6; color:#cfcfcf}
/* Trampa invisible para robots: las personas no ven este campo */
#guia-modal .lg-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

/* ---------- Precios largos en celular (ej. US$16,60/mes) ---------- */
@media (max-width:480px){
  .price-card .price-big{font-size:clamp(28px, 9.5vw, 40px); overflow-wrap:anywhere;}
}

/* ---------- Compartir ---------- */
.share-box{max-width:520px; margin:0 auto; padding:40px 20px 10px; text-align:center; font-family:'Inter',system-ui,sans-serif;}
.share-title{margin:0 0 16px; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-foreground, #9A9A9A);}
.share-btns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.share-btn{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; text-decoration:none; color:var(--foreground, #F2F0EE);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); transition:border-color .2s, background .2s;}
.share-btn:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.4);}
.share-btn:focus-visible{outline:2px solid var(--foreground, #F2F0EE); outline-offset:2px;}
.share-btn svg{width:18px; height:18px; flex-shrink:0;}
.share-btn.wa svg{color:#25D366} .share-btn.fb svg{color:#1877F2}
.share-btn.copied{border-color:#25D366; color:#25D366;}
.share-hint{min-height:20px; margin:12px 0 0; font-size:13px; color:var(--muted-foreground, #9A9A9A);}

/* ---------- Barra de progreso de lectura ---------- */
.ddp-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:9998; pointer-events:none;
  background:linear-gradient(90deg,#E52B2B,#D4AF37); transform:scaleX(0); transform-origin:0 50%;
  box-shadow:0 0 10px rgba(229,43,43,.55);}


/* ================= PÁGINAS DE PRODUCTO: interactividad ================= */

/* ---------- 1. Módulos desplegables con línea de tiempo ---------- */
.ddp-tl{position:relative;}
.ddp-tl-all{display:block; margin:0 0 18px auto; font:inherit; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary,#D4AF37); background:none; border:1px solid rgba(212,175,55,.35); padding:8px 14px; border-radius:999px; cursor:pointer; transition:background .2s;}
.ddp-tl-all:hover{background:rgba(212,175,55,.1);}
.ddp-tl-all:focus-visible{outline:2px solid var(--foreground,#fff); outline-offset:2px;}
.ddp-tl-line{position:absolute; left:15px; top:32px; bottom:40px; width:2px; background:var(--border,#2a2a2a); border-radius:2px; overflow:hidden;}
.ddp-tl-fill{position:absolute; inset:0; background:linear-gradient(180deg,#E8C25A,var(--primary,#D4AF37)); transform:scaleY(0); transform-origin:50% 0; transition:transform .15s linear;}
.ddp-tl .stage{display:block !important; position:relative; padding:0 0 0 48px !important; margin:0 0 14px !important; border:0 !important; background:none !important;}
.ddp-tl .stage::before{content:""; position:absolute; left:8px; top:24px; width:16px; height:16px; border-radius:50%; z-index:1;
  background:var(--background,#0b0b0b); border:2px solid var(--border,#333); transition:border-color .3s, background .3s, box-shadow .3s;}
.ddp-tl .stage.is-past::before{border-color:var(--primary,#D4AF37);}
.ddp-tl .stage.is-open::before{background:var(--primary,#D4AF37); border-color:var(--primary,#D4AF37); box-shadow:0 0 0 5px rgba(212,175,55,.15), 0 0 18px rgba(212,175,55,.5);}
.ddp-acc-btn{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  padding:16px 20px; border-radius:14px; background:var(--card,#141414); border:1px solid var(--border,#2a2a2a); transition:border-color .25s, background .25s, box-shadow .25s;}
.ddp-acc-btn:hover{border-color:rgba(212,175,55,.45);}
.ddp-acc-btn:focus-visible{outline:2px solid var(--primary,#D4AF37); outline-offset:2px;}
.stage.is-open .ddp-acc-btn{border-color:rgba(212,175,55,.5); background:linear-gradient(135deg, rgba(212,175,55,.08), transparent 60%), var(--card,#141414); box-shadow:0 18px 40px -26px rgba(0,0,0,.9);}
.ddp-acc-btn .stage-title{min-width:0 !important; flex-wrap:wrap; row-gap:4px;}
.ddp-acc-meta{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.ddp-acc-count{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground,#9a9a9a); white-space:nowrap;}
.ddp-acc-chev{width:28px; height:28px; border-radius:50%; border:1px solid rgba(212,175,55,.35); position:relative; transition:transform .35s, background .25s;}
.ddp-acc-chev::before{content:""; position:absolute; left:50%; top:45%; width:7px; height:7px; border-right:2px solid var(--primary,#D4AF37); border-bottom:2px solid var(--primary,#D4AF37); transform:translate(-50%,-50%) rotate(45deg);}
.stage.is-open .ddp-acc-chev{transform:rotate(180deg); background:rgba(212,175,55,.12);}
.ddp-acc{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.25,.1,.25,1);}
.stage.is-open .ddp-acc{grid-template-rows:1fr;}
.ddp-acc-in{overflow:hidden; min-height:0;}
.ddp-acc-in .stage-tags{padding:14px 4px 6px;}
.stage.is-open .stage-tag{animation:ddpTag .45s cubic-bezier(.25,.1,.25,1) both;}
.stage.is-open .stage-tag:nth-child(2){animation-delay:.04s} .stage.is-open .stage-tag:nth-child(3){animation-delay:.08s}
.stage.is-open .stage-tag:nth-child(4){animation-delay:.12s} .stage.is-open .stage-tag:nth-child(5){animation-delay:.16s}
.stage.is-open .stage-tag:nth-child(n+6){animation-delay:.2s}
@keyframes ddpTag{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (max-width:600px){
  .ddp-tl .stage{padding-left:34px !important;}
  .ddp-tl-line{left:9px;} .ddp-tl .stage::before{left:2px; width:14px; height:14px; top:22px;}
  .ddp-acc-btn{padding:14px 14px;} .ddp-acc-count{display:none;}
  .ddp-acc-btn .stage-name{font-size:18px;}
}

/* ---------- 2. Cifras animadas ---------- */
.ddp-stats .wrap{display:grid !important; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px !important; max-width:900px;}
.ddp-stat{padding:22px 16px; border-radius:16px; background:linear-gradient(160deg, rgba(212,175,55,.07), transparent 60%), var(--card,#141414);
  border:1px solid rgba(212,175,55,.18); opacity:0; transform:translateY(16px); transition:opacity .6s, transform .6s, border-color .3s, box-shadow .3s;}
.ddp-stats.is-in .ddp-stat{opacity:1; transform:none;}
.ddp-stats.is-in .ddp-stat:nth-child(2){transition-delay:.1s} .ddp-stats.is-in .ddp-stat:nth-child(3){transition-delay:.2s} .ddp-stats.is-in .ddp-stat:nth-child(4){transition-delay:.3s}
.ddp-stat:hover{border-color:rgba(212,175,55,.45); box-shadow:0 0 30px -12px rgba(212,175,55,.45);}
.ddp-stat .stat-num{background:linear-gradient(135deg,#F3D27A,var(--primary,#D4AF37)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums;}
.ddp-stat .ddp-word{font-size:clamp(20px,2.4vw,26px); line-height:1.3;}
@media (max-width:600px){ .ddp-stat:last-child:nth-child(odd){grid-column:1/-1;} .ddp-stats .wrap{grid-template-columns:1fr 1fr;} .ddp-stat{padding:18px 10px;} .ddp-stat .stat-num{font-size:26px;} .ddp-stat .ddp-word{font-size:18px;} }

/* ---------- 3. Botón de compra flotante ---------- */
.ddp-buy{position:fixed; left:50%; bottom:16px; z-index:9990; width:min(720px, calc(100% - 24px)); display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 10px 10px 20px; border-radius:999px; background:rgba(16,18,24,.82); border:1px solid rgba(212,175,55,.35);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 50px -18px rgba(0,0,0,.9), 0 0 30px -14px rgba(212,175,55,.5);
  transform:translate(-50%, 140%); opacity:0; transition:transform .45s cubic-bezier(.25,.1,.25,1), opacity .3s; font-family:'Inter',system-ui,sans-serif;}
.ddp-buy.is-on{transform:translate(-50%, 0); opacity:1;}
.ddp-buy-info{display:flex; flex-direction:column; min-width:0;}
.ddp-buy-info b{font-family:'Playfair Display',serif; font-weight:500; font-size:16px; color:var(--foreground,#f2f0ee); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ddp-buy-info span{font-size:12px; color:var(--primary,#D4AF37); font-weight:600;}
.ddp-buy-btn{flex-shrink:0; display:inline-flex; align-items:center; padding:13px 22px; border-radius:999px; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--primary-foreground,#111); background:linear-gradient(135deg,#F3D27A,var(--primary,#D4AF37)); box-shadow:0 0 24px -6px rgba(212,175,55,.7); transition:transform .2s;}
.ddp-buy-btn:hover{transform:translateY(-1px);}
.ddp-buy-btn:focus-visible{outline:2px solid #fff; outline-offset:2px;}
@media (max-width:600px){
  .ddp-buy{bottom:10px; padding:8px; border-radius:18px;}
  .ddp-buy-info{display:none;}
  .ddp-buy-btn{width:100%; justify-content:center; padding:14px 16px; border-radius:12px;}
}

/* ---------- 4. "¿Es para ti?" interactivo ---------- */
.ddp-fit-hint{margin:-12px 0 18px; font-size:12.5px; color:var(--muted-foreground,#9a9a9a);}
.ddp-fit-hint b{color:var(--primary,#D4AF37);}
.ddp-fit .fw-row{cursor:pointer; padding:12px 14px; margin:0 0 10px !important; border-radius:12px; border:1px solid var(--border,#2a2a2a); transition:border-color .25s, background .25s, transform .15s; user-select:none;}
.ddp-fit .fw-row:hover{border-color:rgba(212,175,55,.45);}
.ddp-fit .fw-row:active{transform:scale(.99);}
.ddp-fit .fw-row:focus-visible{outline:2px solid var(--primary,#D4AF37); outline-offset:2px;}
.ddp-fit .fw-mark{flex-shrink:0; width:22px; height:22px; margin-top:0 !important; border-radius:50%; display:grid; place-items:center; font-size:0; border:1.5px solid rgba(212,175,55,.5); transition:background .25s, transform .25s;}
.ddp-fit .fw-row.is-on{border-color:rgba(212,175,55,.6); background:rgba(212,175,55,.08);}
.ddp-fit .fw-row.is-on .fw-mark{background:var(--primary,#D4AF37) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; transform:scale(1.08);}
.ddp-fit-ok{max-height:0; opacity:0; overflow:hidden; text-align:center; border-radius:14px; transition:max-height .5s ease, opacity .4s, margin .4s, padding .4s;}
.ddp-fit.is-all .ddp-fit-ok{max-height:420px; opacity:1; margin-top:18px; padding:20px 16px; background:linear-gradient(135deg, rgba(212,175,55,.14), rgba(212,175,55,.04)); border:1px solid rgba(212,175,55,.45);}
.ddp-fit-title{font-family:'Playfair Display',serif; font-size:24px; margin:0 0 4px; color:var(--primary,#D4AF37);}
.ddp-fit-sub{font-size:14px; color:var(--secondary-foreground,#cfcfcf); margin:0 0 14px;}
.ddp-fit-btn{display:inline-flex !important;}

@media (prefers-reduced-motion: reduce){
  .ddp-acc, .ddp-tl-fill, .ddp-acc-chev, .ddp-stat, .ddp-buy, .ddp-fit-ok, .ddp-fit .fw-row, .ddp-fit .fw-mark{transition:none !important;}
  .stage.is-open .stage-tag{animation:none;}
  .ddp-stat{opacity:1; transform:none;}
}