/* Heter — extras compartidos: botón destellante, logo animado, bienvenida, aviso de WhatsApp, membresía */

/* ───────── Botón premium con destello ───────── */
.btn-shine{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(110deg,#b8862b 0%,#e8c468 38%,#fff1b8 50%,#e8c468 62%,#b8862b 100%);
  background-size:220% 100%;
  color:#100E0B; border-color:#e8c468;
  box-shadow:0 0 0 0 rgba(232,196,104,.55), 0 8px 26px rgba(232,196,104,.22);
  animation:bs-flow 3.2s linear infinite, bs-pulse 2.4s ease-out infinite;
}
.btn-shine::before{
  content:""; position:absolute; top:-40%; bottom:-40%; width:34%; left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-20deg); z-index:-1; pointer-events:none;
  animation:bs-sweep 2.8s ease-in-out infinite;
}
.btn-shine:hover{ filter:brightness(1.08); transform:translateY(-2px); }
@keyframes bs-flow{ to{ background-position:-220% 0; } }
@keyframes bs-sweep{ 0%,35%{ left:-50%; } 75%,100%{ left:130%; } }
@keyframes bs-pulse{ 0%{ box-shadow:0 0 0 0 rgba(232,196,104,.55), 0 8px 26px rgba(232,196,104,.22);} 70%,100%{ box-shadow:0 0 0 16px rgba(232,196,104,0), 0 8px 26px rgba(232,196,104,.22);} }

/* ───────── Logo animado del inicio ───────── */
.hl{ position:relative; width:min(400px,68vw); aspect-ratio:445/232; margin:0 0 26px; }
.hl > *{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hl-base{ object-fit:contain; animation:hl-in 1.5s cubic-bezier(.18,.9,.25,1) both, hl-glow 4.2s ease-in-out 1.5s infinite; }
.hl-gold,.hl-shine,.hl-r,.hl-c{
  -webkit-mask:url(img/heter-logo.png) center/100% 100% no-repeat; mask:url(img/heter-logo.png) center/100% 100% no-repeat;
  pointer-events:none;
}
.hl-gold{
  background:linear-gradient(115deg,#8a5e14 0%,#e8c468 22%,#fff3c4 38%,#c9a24b 55%,#7a5210 72%,#e8c468 90%,#8a5e14 100%);
  background-size:300% 100%; mix-blend-mode:normal; opacity:0;
  animation:hl-in 1.5s cubic-bezier(.18,.9,.25,1) .35s both, hl-goldflow 6s linear 1.2s infinite;
}
.hl-shine{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%);
  background-size:260% 100%; background-position:130% 0; opacity:.9;
  animation:hl-sweep 3.6s ease-in-out 1.6s infinite;
}
.hl-r,.hl-c{ opacity:0; mix-blend-mode:screen; }
.hl-r{ background:#ff2d55; animation:hl-gl-r 7s steps(1,end) 2.5s infinite; }
.hl-c{ background:#00e5ff; animation:hl-gl-c 7s steps(1,end) 2.5s infinite; }
.hl-spark{ pointer-events:none; inset:-30px !important; width:calc(100% + 60px) !important; height:calc(100% + 60px) !important; }
@keyframes hl-in{
  0%{ opacity:0; filter:blur(22px) brightness(2.2); transform:scale(1.5) translateY(14px); }
  55%{ opacity:1; filter:blur(3px) brightness(1.5); transform:scale(1.04); }
  70%{ transform:translateX(-4px) scale(1.02); }
  78%{ transform:translateX(5px) scale(1.01); }
  100%{ opacity:1; filter:blur(0) brightness(1); transform:none; }
}
@keyframes hl-glow{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(232,196,104,.25)) drop-shadow(0 0 22px rgba(232,196,104,.1)); }
  50%{ filter:drop-shadow(0 0 14px rgba(255,226,150,.65)) drop-shadow(0 0 38px rgba(232,196,104,.35)); }
}
@keyframes hl-goldflow{ to{ background-position:-300% 0; } }
@keyframes hl-sweep{ 0%{ background-position:130% 0; } 55%,100%{ background-position:-30% 0; } }
@keyframes hl-gl-r{ 0%,93%{ opacity:0; transform:none; } 93.5%{ opacity:.9; transform:translate(-7px,2px); clip-path:inset(10% 0 55% 0);} 95%{ opacity:.9; transform:translate(6px,-2px); clip-path:inset(55% 0 12% 0);} 96.5%{ opacity:0; clip-path:none; } 100%{ opacity:0; } }
@keyframes hl-gl-c{ 0%,93%{ opacity:0; transform:none; } 93.5%{ opacity:.9; transform:translate(7px,-2px); clip-path:inset(50% 0 10% 0);} 95%{ opacity:.9; transform:translate(-6px,2px); clip-path:inset(8% 0 58% 0);} 96.5%{ opacity:0; clip-path:none; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .hl-base,.hl-gold,.hl-shine,.hl-r,.hl-c{ animation:none !important; }
  .hl-gold{ opacity:.0; } .hl-spark{ display:none; }
}
@media (hover:none) and (max-width:820px){ .hl{ margin-bottom:22px; } }

/* separación del texto de entrega en el inicio */
.hero .entrega-line{ margin-top:14px; }

/* ───────── Botón bajo «foto de referencia» ───────── */
.pop-cta{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:22px 6vw 0; text-align:center; }
.pop-cta small{ color:var(--muted); font-size:.85rem; }
@media (max-width:640px){ .pop-cta .btn{ width:100%; } }

/* ───────── Membresía ───────── */
.cupos[hidden]{ display:none !important; }
.mem-grid{ align-items:stretch !important; }
.mem-live{ display:grid; gap:18px; align-content:start; min-width:0; }
.mem-live .usp{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); line-height:1.15; color:var(--gold-bright); margin:0; }
.mem-live .mem-lead{ color:var(--beige); margin:0; }
.mem-box{ border:1px solid rgba(201,162,75,.45); background:linear-gradient(160deg,rgba(201,162,75,.08),rgba(16,14,11,.4)); padding:18px 20px; border-radius:6px; min-width:0; }
.mem-box h3{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; font-weight:700; }
.mem-meter{ height:10px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.mem-meter i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#b8862b,#ffe08a); transition:width 1.4s cubic-bezier(.2,.8,.2,1); position:relative; }
.mem-meter i::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%); background-size:200% 100%; animation:bs-flow 2.2s linear infinite; }
.mem-q{ display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:.95rem; color:var(--beige); flex-wrap:wrap; }
.mem-q b{ color:var(--gold-bright); font-size:1.15rem; }
.mem-next{ display:flex; align-items:center; gap:12px; }
.mem-next .dot{ flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:#5fcf80; animation:ent-pulse 2s infinite; }
.mem-next p{ margin:0; color:var(--beige); font-size:1rem; }
.mem-next p b{ color:var(--gold-bright); }
.mem-weeks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mem-week{ border:1px solid rgba(201,162,75,.35); border-radius:6px; padding:12px 12px 14px; background:rgba(16,14,11,.55); min-width:0; position:relative; }
.mem-week .n{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; }
.mem-week .d{ display:block; margin:6px 0 4px; color:var(--beige); font-size:.92rem; line-height:1.3; }
.mem-week .t{ display:block; color:var(--muted); font-size:.82rem; line-height:1.35; }
.mem-week::after{ content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); opacity:.6; }
.mem-how{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:mh; }
.mem-how li{ counter-increment:mh; position:relative; padding-left:38px; color:var(--beige); font-size:.96rem; line-height:1.45; }
.mem-how li::before{ content:counter(mh); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-bright); display:grid; place-items:center; font-family:var(--font-mono); font-size:.8rem; }
.mem-how li b{ color:var(--gold-bright); }
@media (max-width:820px){ .mem-weeks{ grid-template-columns:1fr; } .mem-week{ display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:center; } .mem-week .n{ grid-row:1/3; } .mem-week .d{ margin:0; } }

/* ───────── Bienvenida interactiva ───────── */
.hw-ov{ position:fixed; inset:0; z-index:200; background:rgba(8,7,5,.86); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); overflow-y:auto; animation:hw-fade .35s ease both; }
.hw-ov[hidden]{ display:none; }
@keyframes hw-fade{ from{ opacity:0; } }
.hw-box{ position:relative; width:min(560px,100%); background:#14110c; border:1px solid var(--gold); border-radius:14px; padding:28px 22px 20px; box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,196,104,.12); animation:hw-up .5s cubic-bezier(.2,.8,.2,1) both; margin:auto; }
@keyframes hw-up{ from{ opacity:0; transform:translateY(26px) scale(.97); } }
.hw-x{ position:absolute; top:8px; right:10px; background:none; border:0; color:var(--muted); font-size:1.7rem; line-height:1; cursor:pointer; padding:6px 10px; }
.hw-x:hover{ color:var(--beige); }
.hw-step{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; color:var(--gold); text-transform:uppercase; margin:0 0 8px; }
.hw-box h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.55rem,5vw,2rem); line-height:1.15; color:var(--beige); margin:0 0 6px; }
.hw-sub{ color:var(--muted); margin:0 0 18px; font-size:.95rem; }
.hw-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hw-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; background:rgba(201,162,75,.06); border:1px solid rgba(201,162,75,.35); border-radius:10px; padding:14px 14px 13px; color:var(--beige); font-family:inherit; cursor:pointer; min-height:92px; transition:border-color .2s,background .2s,transform .2s; animation:hw-opt .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i)*70ms + 150ms); }
@keyframes hw-opt{ from{ opacity:0; transform:translateY(14px); } }
.hw-opt:hover,.hw-opt:focus-visible{ border-color:var(--gold-bright); background:rgba(201,162,75,.14); transform:translateY(-2px); outline:none; }
.hw-opt svg{ width:26px; height:26px; stroke:var(--gold-bright); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.hw-opt b{ font-size:1rem; font-weight:700; line-height:1.2; }
.hw-opt span{ font-size:.82rem; color:var(--muted); line-height:1.3; }
.hw-back{ background:none; border:0; color:var(--gold); font-family:inherit; font-size:.9rem; cursor:pointer; padding:0 0 12px; }
.hw-skip{ display:block; margin:16px auto 0; background:none; border:0; color:var(--muted); font-family:inherit; font-size:.85rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.hw-skip:hover{ color:var(--beige); }
@media (max-width:380px){ .hw-grid{ grid-template-columns:1fr; } .hw-opt{ min-height:0; } }
@media (min-width:700px){ .hw-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .hw-box{ width:min(680px,100%); padding:34px 30px 24px; } }

/* ───────── Aviso antes de ir a WhatsApp ───────── */
.wg-ov{ position:fixed; inset:0; z-index:210; background:rgba(8,7,5,.82); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto; animation:hw-fade .25s ease both; }
.wg-ov[hidden]{ display:none; }
.wg-box{ position:relative; width:min(420px,100%); background:#14110c; border:1px solid var(--gold); border-radius:14px; padding:26px 22px 18px; margin:auto; animation:hw-up .4s cubic-bezier(.2,.8,.2,1) both; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.wg-box h2{ font-family:var(--font-display); font-weight:400; font-size:1.55rem; color:var(--beige); margin:0 0 6px; }
.wg-box p{ color:var(--muted); margin:0 0 14px; font-size:.93rem; }
.wg-box label{ display:block; font-size:.82rem; color:var(--gold); margin:10px 0 4px; }
.wg-box input{ width:100%; padding:13px 14px; background:#0b0907; border:1px solid rgba(201,162,75,.45); border-radius:8px; color:var(--beige); font:inherit; font-size:1rem; }
.wg-box input:focus{ outline:2px solid var(--gold-bright); outline-offset:1px; }
.wg-err{ color:#e0836f; font-size:.85rem; min-height:1.1em; margin-top:6px; }
.wg-box .btn{ width:100%; justify-content:center; text-align:center; margin-top:12px; cursor:pointer; }
.wg-go{ display:block; width:100%; margin-top:10px; padding:13px 14px; background:none; border:1px solid rgba(217,205,178,.35); border-radius:8px; color:var(--beige); font:inherit; font-weight:700; cursor:pointer; }
.wg-go:hover{ border-color:var(--beige); background:rgba(217,205,178,.06); }
.wg-x{ position:absolute; top:8px; right:10px; background:none; border:0; color:var(--muted); font-size:1.7rem; line-height:1; cursor:pointer; padding:6px 10px; }
.wg-priv{ font-size:.75rem; color:var(--muted); margin-top:10px; text-align:center; }