/* Portada de ProfitHunt: cinta de chollos, escena con el producto, rasgos, comparativa, calculadora y planes */

/* ---------- cinta "últimos cazados" (segunda fila de la cabecera): entran de uno en uno por la izquierda ---------- */
.cinta-chollos{display:flex;align-items:center;gap:12px;border-top:1px solid var(--borde);height:68px;overflow:hidden;color:var(--txt2)}
.cc-titulo{flex:none;display:flex;align-items:center;gap:8px;padding:0 6px 0 16px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt);white-space:nowrap}
.cc-punto{width:7px;height:7px;border-radius:50%;background:var(--verde);animation:vivo 2.4s ease-out infinite}
.cc-ventana{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.cc-pista{display:flex;gap:8px;margin:0;padding:0 0 0 2px;list-style:none}
.drop{flex:none;display:flex;align-items:center;gap:10px;width:232px;max-width:232px;height:54px;padding:0 12px 3px 8px;position:relative;
  background:var(--sup);border:1px solid var(--borde);border-radius:10px;overflow:hidden;
  transition:max-width 1.4s cubic-bezier(.22,.8,.22,1),padding 1.4s cubic-bezier(.22,.8,.22,1),margin 1.4s cubic-bezier(.22,.8,.22,1),opacity .9s .55s ease,transform .9s .55s cubic-bezier(.22,.8,.22,1),border-color .9s .55s}
/* la "rareza": una línea fina abajo, del color del beneficio */
.drop::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--c-tramo);opacity:.85}
.d-alto{--c-tramo:var(--verde)} .d-medio{--c-tramo:#ffd23f} .d-bajo{--c-tramo:#9fb0d0}
.drop.llega{max-width:0;padding-left:0;padding-right:0;margin-right:-8px;opacity:0;transform:translateY(-6px);border-color:transparent}
.drop-cat{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--c-tramo) 12%,transparent)}
.drop-cat .ico{width:17px;height:17px;color:var(--c-tramo)}
.drop-txt{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2;white-space:nowrap}
.drop-txt b{font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis}
.drop-txt>span{display:flex;gap:7px;font-size:13px}
.drop-precio{color:var(--txt2);font-variant-numeric:tabular-nums}
.drop-margen{font-weight:800;color:var(--verde-txt);font-variant-numeric:tabular-nums}
.drop-txt small{font-size:11px;color:var(--txt2);opacity:.8}
@media (prefers-reduced-motion:reduce){.drop{transition:none}.cc-ventana{overflow-x:auto}}
@media (max-width:600px){.cc-titulo{display:none}.cinta-chollos{height:64px}.drop{width:200px;max-width:200px}.cc-pista{padding-left:10px}}

/* ---------- calculadora: lo que añade el Pro ---------- */
.cl-pro{grid-column:1/-1;background:linear-gradient(135deg,color-mix(in srgb,var(--verde) 9%,var(--sup)),var(--sup) 60%);border:1px solid color-mix(in srgb,var(--verde) 35%,transparent);border-radius:var(--r2);padding:22px 24px}
.cl-pro.entra{animation:proEntra .6s cubic-bezier(.22,.8,.22,1)}
@keyframes proEntra{from{opacity:0;transform:translateY(8px)}}
.cl-pro-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cl-pro-cab h3{margin:0;font-size:20px}
.cl-pro-items{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cl-pro-items>div{display:flex;gap:12px;align-items:flex-start}
.cl-pro-items .ico{flex:none;margin-top:2px}
.cl-pro-items p{margin:0;color:var(--txt2)} .cl-pro-items b{color:var(--txt)}
@media (max-width:700px){.cl-pro-items{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.cl-pro.entra{animation:none}}

/* ---------- cabecera del titular ---------- */
.antetitulo{position:relative;display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:7px 14px;border:1px solid var(--borde2);border-radius:999px;background:color-mix(in srgb,var(--sup) 70%,transparent);font-size:14px;font-weight:600;color:var(--txt2)}
.punto-vivo{width:8px;height:8px;border-radius:50%;background:var(--verde);animation:vivo 2.4s ease-out infinite}
@keyframes vivo{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--verde) 70%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}
@media (prefers-reduced-motion:reduce){.punto-vivo{animation:none}}
.heroe2{padding-top:72px}
.ico{width:26px;height:26px;color:var(--verde-txt)}

/* ---------- la escena: el panel en un portátil y en un móvil ---------- */
.escena{position:relative;max-width:1100px;margin:64px auto 0;padding:0 16px;display:grid;justify-items:center}
.brillo-escena{position:absolute;inset:10% 10% 0;background:radial-gradient(ellipse 50% 45% at 50% 40%,color-mix(in srgb,var(--verde) 16%,transparent),transparent 70%);filter:blur(30px);pointer-events:none}
.portatil{position:relative;margin:0;width:min(900px,100%)}
.portatil-pantalla{background:#1a1d23;border:1px solid #2c313b;border-radius:16px 16px 0 0;padding:12px 12px 0;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.portatil-pantalla img{display:block;width:100%;height:auto;border-radius:8px 8px 0 0;aspect-ratio:16/10;object-fit:cover;object-position:top}
.portatil-base{height:16px;margin:0 -6%;background:linear-gradient(#2a2f38,#15181d);border-radius:0 0 18px 18px;box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
.movil{position:absolute;right:max(16px,calc(50% - 520px));bottom:-26px;margin:0;width:min(200px,24vw);padding:8px;background:#111317;border:1px solid #2c313b;border-radius:30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.85)}
.movil img{display:block;width:100%;height:auto;border-radius:23px;aspect-ratio:390/844;object-fit:cover;object-position:top}
.escena-nota{margin-top:42px}
@media (max-width:700px){.movil{width:34vw;right:8px;bottom:-18px;border-radius:22px;padding:5px}.movil img{border-radius:18px}
  .escena-nota{justify-self:start;text-align:left;max-width:52%;margin-top:28px}}

/* ---------- franja, rasgos y comparativa ---------- */
.franja{margin-top:56px}
.franja-tit{margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2)}
.rasgos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.rasgo{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r2);padding:22px;transition:border-color .2s,transform .2s}
.rasgo:hover{border-color:var(--borde2);transform:translateY(-2px)}
.rasgo h3{margin:14px 0 6px} .rasgo p{margin:0;color:var(--txt2)}
@media (prefers-reduced-motion:reduce){.rasgo:hover{transform:none}}
.tabla-comp-env{max-width:860px;margin:30px auto 0;border:1px solid var(--borde);border-radius:var(--r2);overflow:hidden}
.tabla-comp{width:100%;border-collapse:collapse;font-size:16px}
.tabla-comp th,.tabla-comp td{padding:15px 18px;border-bottom:1px solid var(--borde);text-align:left}
.tabla-comp thead th{background:var(--sup);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt2)}
.tabla-comp thead th:last-child{color:var(--verde-txt)}
.tabla-comp tbody th{font-weight:700;color:var(--txt);background:var(--sup);width:30%}
.tabla-comp td:nth-child(2){color:var(--txt2)}
.tabla-comp td:last-child{color:var(--txt);font-weight:600;background:color-mix(in srgb,var(--verde) 5%,transparent)}
.tabla-comp tr:last-child>*{border-bottom:0}
@media (max-width:600px){.tabla-comp{font-size:14px}.tabla-comp th,.tabla-comp td{padding:12px 10px}}

/* ---------- calculadora ---------- */
.calc-landing{max-width:860px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.cl-controles,.cl-resultado{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r2);padding:24px}
.cl-controles{display:grid;gap:10px}
.cl-controles label{display:flex;justify-content:space-between;font-weight:600;margin-top:6px}
.cl-controles output{font-weight:800;color:var(--txt)}
.cl-controles input[type=range]{width:100%;accent-color:var(--verde)}
.cl-controles select{min-height:44px;border-radius:10px;border:1px solid var(--borde2);background:var(--fondo);color:var(--txt);font:500 15px var(--fuente);padding:8px 10px}
.cl-resultado{display:flex;flex-direction:column;justify-content:center;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 8%,var(--sup)),var(--sup))}
.cl-resultado span{color:var(--txt2);font-weight:600}
.cl-resultado b{font:800 clamp(40px,5vw,56px)/1.1 var(--fuente);color:var(--verde-txt);margin:6px 0;font-variant-numeric:tabular-nums}
.cl-resultado b.neg{color:var(--rojo)}
.cl-resultado p{margin:0;color:var(--txt2);font-size:15px}
@media (max-width:700px){.calc-landing{grid-template-columns:1fr}}

/* ---------- planes con el interruptor del Club ---------- */
.plan{position:relative;overflow:hidden;overflow:clip} /* clip: recorta la cinta sin dejar que el navegador desplace la tarjeta al pulsar el interruptor */
.plan-cab{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan-lema{margin-top:-6px!important}
.plan-cinta{position:absolute;top:16px;right:-38px;transform:rotate(35deg);background:var(--verde);color:var(--verde-tinta);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 44px}
.plan-dest .plan-cab{padding-right:56px}
.club-sw{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--txt2);cursor:pointer;user-select:none;white-space:nowrap}
.club-sw input{position:absolute;opacity:0;width:1px;height:1px}
.club-sw .sw{position:relative;width:32px;height:18px;border-radius:999px;background:var(--borde2);transition:background .2s}
.club-sw .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--txt);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.club-sw input:checked+.sw{background:var(--verde)} .club-sw input:checked+.sw::after{transform:translateX(14px);background:var(--verde-tinta)}
.club-sw input:focus-visible+.sw{outline:3px solid var(--foco);outline-offset:2px}
.plan:has(.club-check:checked) .club-sw{color:var(--verde-txt)}
.precios{display:grid;min-height:74px;align-items:end}
.p-normal,.p-club{grid-area:1/1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.precios b{font:800 44px/1 var(--fuente);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.precios small{color:var(--txt2);font-weight:600}
.p-club{flex-direction:column;align-items:flex-start;gap:6px;opacity:0;transform:translateY(10px);pointer-events:none}
.p-club>span:last-child{display:flex;align-items:baseline;gap:8px}
.p-club b{color:var(--verde-txt)}
.p-antes{display:flex;align-items:center;gap:8px}
.p-antes s{position:relative;text-decoration:none;color:var(--txt2);font-weight:700;font-size:17px}
.p-antes s::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:var(--rojo);transform:scaleX(0);transform-origin:left;transition:transform .35s .15s}
.p-desc{font-size:12.5px;font-weight:800;color:var(--verde-tinta);background:var(--verde);border-radius:999px;padding:2px 8px;transform:scale(.6);opacity:0;transition:transform .3s .3s cubic-bezier(.3,1.6,.5,1),opacity .2s .3s}
.plan:has(.club-check:checked) .p-normal{opacity:0;transform:translateY(-10px)}
.plan:has(.club-check:checked) .p-club{opacity:1;transform:none;pointer-events:auto}
.plan:has(.club-check:checked) .p-antes s::after{transform:scaleX(1)}
.plan:has(.club-check:checked) .p-desc{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.p-normal,.p-club,.p-antes s::after,.p-desc,.club-sw .sw::after{transition:none}}
.plan-iva{font-size:13px!important;margin-top:-4px!important}
.plan li.pronto{color:var(--txt2)}
.etq-pronto{display:inline-block;margin-left:4px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ambar);border:1px solid color-mix(in srgb,var(--ambar) 50%,transparent);border-radius:999px;padding:1px 7px;vertical-align:1px}
.cta-final{position:relative;overflow:hidden}
.brillo-cta{position:absolute;inset:-40% 10% auto;height:200px;background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in srgb,var(--verde) 14%,transparent),transparent 70%);filter:blur(20px);pointer-events:none}
.cta-final>*:not(.brillo-cta){position:relative}
/* desglose del IVA de cada tarjeta: el normal o el del Club, según "Soy del Club" */
.plan-iva .iva-club{display:none}
.plan:has(.club-check:checked) .plan-iva .iva-normal{display:none}
.plan:has(.club-check:checked) .plan-iva .iva-club{display:inline}

/* lo del Pro que ya funciona (avisos al móvil), frente a lo que "llega muy pronto" */
.etq-ya{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--verde-tinta);background:var(--verde);border-radius:999px;padding:2px 8px;vertical-align:middle}