/* =============================================================================
   Licencia2 — Hero selector 3D + túnel de logos + barra de confianza fija
   Reemplaza al hero de constelación 3D (hero3d) en la portada. Todo el hero va
   namespaced bajo .lc2* para no colisionar con estilos existentes ni con los
   hooks de cinematic.js (que buscan .hero / .hero__*).
   ============================================================================= */
:root{ --lc2-trustH:0px; }

/* En la portada, la barra fija reserva espacio y sube los FAB existentes. */
body[data-page="inicio"]{ padding-bottom:var(--lc2-trustH); }
body[data-page="inicio"] .wa-fab{ bottom:calc(var(--lc2-trustH) + clamp(1.1rem,3.5vh,2rem)) !important; }
body[data-page="inicio"] .cart-fab{ bottom:calc(var(--lc2-trustH) + clamp(1.1rem,3.5vh,2rem) + 4.2rem) !important; }

/* ---------------- Hero ---------------- */
.lc2hero{ position:relative; overflow:hidden; min-height:clamp(600px,90vh,880px);
  display:flex; align-items:center;
  background:radial-gradient(120% 100% at 50% 24%,#0c1730 0%,#070d1e 54%,#03050c 100%);
  --lc2-blue:#2176f5; --lc2-blue-strong:#3b8bff; --lc2-blue-deep:#0b3aa8;
  --lc2-mono:"JetBrains Mono",ui-monospace,"Cascadia Code","Consolas",monospace; }
.lc2hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.lc2hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 46% at 50% 42%, rgba(3,6,14,.72) 0%, rgba(3,6,14,.30) 54%, rgba(3,6,14,0) 80%); }
.lc2hero__inner{ position:relative; z-index:3; width:100%; text-align:center;
  padding:clamp(1.5rem,4vh,3rem) 0 clamp(1.5rem,4vh,3rem); }

.lc2hero__eyebrow{ font-family:var(--lc2-mono); font-size:12px; letter-spacing:.2em;
  color:#79adff; text-transform:uppercase; margin:0 0 .5rem; font-weight:600; }
.lc2hero__title{ font-size:clamp(28px,4.6vw,50px); line-height:1.04; letter-spacing:-.032em;
  font-weight:800; margin:.1rem 0 .6rem; color:#f2f6ff; text-wrap:balance; }
.lc2hero__title span{ background:linear-gradient(100deg,#7fb0ff,#4f86ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lc2hero__sub{ color:#aebfd8; font-size:clamp(14px,1.7vw,17px); max-width:540px;
  margin:0 auto; line-height:1.5; }
.lc2hero__promises{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  margin:1rem 0 .2rem; font-size:13px; color:#c4d3ec; font-weight:600; }
.lc2hero__promises span{ display:inline-flex; align-items:center; gap:6px; }
.lc2hero__promises svg{ width:15px; height:15px; color:#6aa6ff; }

/* ---------------- Selector coverflow ---------------- */
.lc2stage{ position:relative; width:min(940px,100%); height:280px; margin:1.4rem auto .2rem;
  perspective:1500px; }
.lc2reel{ position:absolute; inset:0; transform-style:preserve-3d; }
.lc2tile{ position:absolute; left:50%; top:50%; width:150px; height:150px;
  margin-left:-75px; margin-top:-81px; border-radius:22px; cursor:pointer;
  transition:transform .52s cubic-bezier(.2,.75,.2,1),opacity .45s ease;
  will-change:transform,opacity; backface-visibility:hidden; transform-style:preserve-3d; }
.lc2tile .card{ width:100%; height:100%; border-radius:22px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:11px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,#eef4ff 100%); border:1px solid #dbe6fb;
  box-shadow:0 12px 30px rgba(10,30,80,.14); transition:transform .14s ease-out,box-shadow .3s; }
.lc2tile .brand-glyph{ box-shadow:0 8px 18px rgba(10,30,80,.22); }
.lc2tile .nm{ font-size:12.5px; font-weight:700; color:#0b1220; padding:0 10px;
  line-height:1.15; letter-spacing:-.01em; }
.lc2tile .pick{ position:absolute; top:9px; right:9px; width:20px; height:20px; border-radius:50%;
  background:#2fd07a; color:#042413; display:none; place-items:center; font-size:12px; font-weight:800; z-index:4; }
.lc2tile.is-active .pick{ display:grid; }
/* Card de producto a sangre completa dentro de la casilla (cubre logo + nombre) */
.lc2tileimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:22px; z-index:2; display:block; }

.lc2tile.is-active .card{ border-color:transparent;
  background:linear-gradient(155deg,#12233f 0%,#0a1530 55%,#0b1a3a 100%);
  box-shadow:0 26px 58px rgba(6,16,50,.55),0 0 0 4px rgba(90,150,255,.34);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
.lc2tile.is-active .nm{ color:#eef4ff; }
.lc2holo{ position:absolute; inset:0; border-radius:22px; opacity:0; pointer-events:none; z-index:3;
  transition:opacity .5s ease; mix-blend-mode:screen; overflow:hidden;
  background:radial-gradient(150px 150px at var(--mx,50%) var(--my,36%),rgba(190,220,255,.55),rgba(190,220,255,0) 62%),
    linear-gradient(120deg,rgba(60,130,255,.20) 0%,rgba(120,180,255,.16) 45%,rgba(90,150,255,.22) 75%,rgba(60,120,255,.14) 100%); }
.lc2tile.is-active .lc2holo{ opacity:1; }
.lc2holo::before{ content:""; position:absolute; top:-40%; left:-60%; width:50%; height:180%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:rotate(18deg); animation:lc2shine 5s ease-in-out infinite; }
@keyframes lc2shine{ 0%{left:-60%} 58%{left:135%} 100%{left:135%} }

.lc2nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:46px; height:46px;
  border-radius:50%; border:1px solid rgba(140,175,255,.30); background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px); color:#cfe0ff; font-size:22px; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 8px 22px rgba(0,0,0,.4); transition:transform .15s,background .15s; }
.lc2nav:hover{ background:rgba(255,255,255,.16); transform:translateY(-50%) scale(1.06); }
.lc2nav--prev{ left:2px; } .lc2nav--next{ right:2px; }
@media(max-width:560px){ .lc2nav--prev{left:-4px} .lc2nav--next{right:-4px} }

/* ---------------- Panel del producto activo ---------------- */
.lc2panel{ position:relative; z-index:4; min-height:150px; display:flex; flex-direction:column;
  align-items:center; gap:9px; margin-top:.6rem; }
.lc2panel .pill{ font-family:var(--lc2-mono); font-size:11px; letter-spacing:.10em; text-transform:uppercase;
  color:#a9ccff; background:rgba(90,150,255,.12); border:1px solid rgba(120,170,255,.30);
  padding:4px 11px; border-radius:999px; font-weight:600; }
.lc2panel .pname{ font-size:clamp(20px,2.6vw,27px); font-weight:800; letter-spacing:-.02em; margin:0; color:#f2f6ff; }
.lc2panel .prices{ display:flex; align-items:baseline; gap:10px; font-family:var(--lc2-mono); }
.lc2panel .psol{ font-size:26px; font-weight:800; color:#f2f6ff; }
.lc2panel .pusd{ font-size:13px; color:#aebfd8; }
.lc2panel .pold{ font-size:13px; color:#6b7a90; text-decoration:line-through; }
.lc2cta{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; margin-top:3px;
  background:linear-gradient(135deg,#3b8bff 0%,var(--lc2-blue) 46%,var(--lc2-blue-deep) 100%); color:#fff;
  border:none; padding:13px 30px; border-radius:13px; font-weight:800; font-size:15px; letter-spacing:.01em;
  cursor:pointer; text-decoration:none; font-family:inherit;
  box-shadow:0 10px 24px rgba(23,99,227,.42),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s,box-shadow .16s; }
.lc2cta::before{ content:""; position:absolute; top:0; left:-120%; width:58%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); animation:lc2ctashine 4.6s ease-in-out infinite; }
@keyframes lc2ctashine{ 0%{left:-120%} 22%{left:135%} 100%{left:135%} }
.lc2cta:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(23,99,227,.55),inset 0 1px 0 rgba(255,255,255,.45); }
.lc2micro{ font-size:12px; color:#8ea3c2; }
.lc2micro a{ color:#7fb0ff; text-decoration:none; font-weight:600; }

.lc2dots{ position:relative; z-index:4; display:flex; gap:7px; justify-content:center; margin-top:.9rem;
  flex-wrap:wrap; max-width:420px; margin-left:auto; margin-right:auto; }
.lc2dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.24); cursor:pointer;
  transition:all .25s; border:none; padding:0; }
.lc2dot.on{ background:#5aa0ff; width:22px; border-radius:5px; }
.lc2cue{ position:relative; z-index:4; margin:1.3rem auto 0; font-size:12.5px; color:#8ea3c2;
  display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--lc2-mono); }
.lc2cue .arw{ animation:lc2bob 1.6s ease-in-out infinite; }
@keyframes lc2bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ---------------- Barra de confianza fija ---------------- */
.lc2trust{ position:fixed; left:0; right:0; bottom:0; z-index:180;
  background:rgba(9,15,28,.94); backdrop-filter:blur(10px);
  border-top:1px solid rgba(120,160,255,.18); box-shadow:0 -8px 30px rgba(0,0,0,.4); }
.lc2trust__inner{ display:flex; flex-wrap:wrap; gap:8px 30px; justify-content:center; padding:13px 16px; }
.lc2trust .t{ display:inline-flex; align-items:center; gap:9px; color:#cdd9ee; font-size:13.5px;
  font-weight:600; white-space:nowrap; }
.lc2trust .t svg{ width:18px; height:18px; color:#6aa6ff; }
.lc2trust .t b{ color:#fff; }
@media(max-width:640px){
  .lc2trust__inner{ gap:5px 16px; padding:9px 8px; }
  .lc2trust .t{ font-size:11.5px; gap:6px; }
  .lc2trust .t svg{ width:15px; height:15px; }
}

@media (prefers-reduced-motion:reduce){
  .lc2holo::before,.lc2cta::before{ display:none; }
  .lc2tile.is-active .card{ transform:none; }
  .lc2cue .arw{ animation:none; }
}