/* Reelab · landing · marca: naranja eléctrico sobre tinta */
:root {
  --fondo: #0F0E13;
  --fondo-alt: #15131A;
  --papel: #1C1922;
  --borde: rgba(255, 236, 222, .12);
  --texto: #FFF5EC;
  --texto-2: #D8CEC6;
  --texto-3: #9F948E;
  --naranja: #FF5A1F;
  --naranja-2: #FF7A45;
  --naranja-rgb: 255, 90, 31;
  --amarillo: #FFC23D;
  --radio: 20px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--texto); overflow-x: clip; font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
s { color: var(--texto-3); text-decoration-color: var(--naranja); text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: clamp(30px, 4.4vw, 48px); max-width: 22ch; text-wrap: balance; }
h3 { font-size: 19px; }
p { margin: 0; }
.contenedor { width: min(1160px, 100% - 36px); margin-inline: auto; }
.angosto { width: min(820px, 100% - 36px); }
.centro { text-align: center; display: grid; justify-items: center; gap: 16px; }
.centro h2 { margin-inline: auto; }
.etiqueta { color: var(--amarillo); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.intro { color: var(--texto-2); font-size: 18px; max-width: 60ch; margin-top: 14px; }
.resaltado { color: var(--naranja); }

/* Aviso superior */
.aviso-lanzamiento { background: var(--naranja); color: #fff; text-align: center; font-size: 14px; font-weight: 600; padding: 8px 14px; }
.aviso-lanzamiento s { color: rgba(255, 255, 255, .75); text-decoration-color: #fff; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: var(--naranja); color: #fff; text-decoration: none; font-weight: 800; font-size: 17px;
  padding: 15px 26px; border-radius: 14px; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(var(--naranja-rgb), .40), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.boton:hover { transform: translateY(-2px); background: var(--naranja-2); box-shadow: 0 16px 40px rgba(var(--naranja-rgb), .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.boton-chico { padding: 10px 16px; font-size: 15px; border-radius: 11px; }
.boton-grande { padding: 18px 30px; font-size: 19px; }
.boton-ancho { width: 100%; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(15, 14, 19, .82); border-bottom: 1px solid transparent; transition: border-color .3s; }
@supports (backdrop-filter: blur(12px)) { .nav { backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); } }
.nav.con-borde { border-bottom-color: var(--borde); }
.nav-fila { display: flex; align-items: center; gap: 24px; height: 64px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 21px; text-decoration: none; letter-spacing: -.02em; }
.logo { width: 32px; height: 32px; border-radius: 10px; background: var(--naranja); display: grid; place-items: center; box-shadow: 0 0 22px rgba(var(--naranja-rgb), .55); }
.logo span { width: 0; height: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--texto-2); font-weight: 600; font-size: 15px; }
.nav-links a:hover { color: var(--texto); }
@media (max-width: 860px) { .nav-links { display: none; } .nav .boton-chico { margin-left: auto; } }

/* Luces de fondo */
.luz {
  position: absolute; inset: -10% -20% auto -20%; height: 820px; pointer-events: none; z-index: 0;
  background: radial-gradient(38% 38% at 72% 28%, rgba(var(--naranja-rgb), .32), transparent 70%),
              radial-gradient(30% 30% at 18% 22%, rgba(255, 194, 61, .10), transparent 70%);
  filter: blur(30px);
}

/* Hero: en el celular el orden es título → video → botón */
.hero { position: relative; padding: 56px 0 88px; }
.hero-grid {
  position: relative; z-index: 1; display: grid; gap: 22px 56px; align-items: center;
  grid-template-columns: 1.1fr .9fr; grid-template-areas: "texto celular" "cta celular";
}
.hero-texto { grid-area: texto; align-self: end; }
.hero-celular { grid-area: celular; display: grid; justify-items: center; }
.hero-cta { grid-area: cta; align-self: start; }
h1 { font-size: clamp(44px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.hero-sub { color: var(--texto-2); font-size: clamp(17px, 1.6vw, 20px); margin-top: 18px; max-width: 52ch; }
.hero-mini { color: var(--texto-3); font-size: 14px; margin-top: 12px; }
.chips { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--borde); border-radius: 99px; padding: 6px 13px; font-size: 14px; color: var(--texto-2); background: rgba(255, 255, 255, .03); }
.chips li::before { content: "✓ "; color: var(--naranja); font-weight: 900; }
.celular {
  width: min(310px, 74vw); border-radius: 44px; padding: 11px;
  background: linear-gradient(160deg, #2C2630, #111015); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--naranja-rgb), .22), 0 0 80px rgba(var(--naranja-rgb), .20);
}
.celular-pantalla { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; background: #000; cursor: pointer; }
.celular-pantalla video { width: 100%; height: 100%; object-fit: contain; }
.pausa-ico { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--naranja-rgb), .92); color: #fff; font-size: 34px; padding-left: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; pointer-events: none; }
.celular-pantalla.pausado .pausa-ico { opacity: 1; transform: none; }
.sonido { position: absolute; right: 12px; bottom: 12px; border: 0; border-radius: 99px; padding: 8px 12px; font: 700 13px var(--sans); cursor: pointer; background: rgba(10, 9, 13, .72); color: #fff; white-space: nowrap; }
.sonido.activo { background: var(--naranja); }
@media (max-width: 900px) {
  .hero { padding: 28px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "texto" "cta" "celular"; text-align: center; }
  .hero-texto, .hero-cta { display: grid; justify-items: center; }
  .hero-sub { font-size: 17px; }
  .chips { justify-content: center; }
  .hero-cta .boton { width: min(420px, 100%); }
}

/* Secciones */
.seccion { position: relative; padding: 88px 0; }
.seccion-alt { background: var(--fondo-alt); border-block: 1px solid var(--borde); }
@media (max-width: 700px) { .seccion { padding: 64px 0; } }

/* Galería: en el celular, carrusel deslizable */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.tarjeta-video { margin: 0; display: grid; gap: 12px; }
.marco-video { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--borde); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.marco-video video { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-video figcaption { color: var(--texto-2); font-size: 15px; line-height: 1.4; }
.tarjeta-video figcaption b { display: block; color: var(--naranja); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
@media (max-width: 960px) {
  .galeria { display: flex; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 18px 14px; margin-inline: -18px; scrollbar-width: none; }
  .galeria::-webkit-scrollbar { display: none; }
  .tarjeta-video { flex: 0 0 64%; scroll-snap-align: center; }
}

/* Antes / después */
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.col { border-radius: var(--radio); padding: 26px; border: 1px solid var(--borde); background: var(--papel); }
.col h3 { margin-bottom: 14px; }
.col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.col li { display: flex; gap: 10px; color: var(--texto-2); }
.col-antes li::before { content: "✕"; color: var(--texto-3); font-weight: 900; flex: 0 0 18px; }
.col-con { border-color: rgba(var(--naranja-rgb), .5); background: linear-gradient(170deg, rgba(var(--naranja-rgb), .14), rgba(255, 255, 255, .02)); }
.col-con li { color: var(--texto); }
.col-con li::before { content: "✓"; color: var(--naranja); font-weight: 900; flex: 0 0 18px; }
@media (max-width: 760px) { .comparar { grid-template-columns: 1fr; } }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.paso { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; display: grid; gap: 14px; align-content: start; }
.paso-num { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--naranja); font-weight: 900; font-size: 20px; }
.paso h3 { margin-bottom: 6px; }
.paso p { color: var(--texto-2); font-size: 16px; }
@media (max-width: 860px) {
  .pasos { grid-template-columns: 1fr; gap: 12px; }
  .paso { grid-template-columns: 44px 1fr; padding: 20px; }
}

/* Qué incluye */
.incluye { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; }
.pieza { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; display: grid; gap: 10px; align-content: start; }
.pieza-ico { font-size: 28px; }
.pieza p { color: var(--texto-2); }
.pieza-destacada { border-color: rgba(var(--naranja-rgb), .55); background: linear-gradient(170deg, rgba(var(--naranja-rgb), .16), rgba(255, 255, 255, .02)); }
@media (max-width: 760px) { .incluye { grid-template-columns: 1fr; gap: 12px; } .pieza { padding: 22px; } }

/* Carátulas */
.dos-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.caratulas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.caratulas img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--borde); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.caratulas img:nth-child(2) { transform: translateY(-18px); }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; gap: 28px; } .caratulas { gap: 10px; } .caratulas img:nth-child(2) { transform: none; } }

/* Requisitos */
.requisitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.req { display: flex; gap: 14px; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; }
.req-ico { font-size: 28px; line-height: 1; }
.req h3 { margin-bottom: 4px; }
.req p { color: var(--texto-2); font-size: 15px; }
.nota { margin-top: 20px; color: var(--texto-2); }
@media (max-width: 860px) { .requisitos { grid-template-columns: 1fr; gap: 12px; } }

/* Precio */
.luz-precio { inset: 0 -20% auto -20%; height: 700px; }
.precio {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: radial-gradient(70% 90% at 0% 0%, rgba(var(--naranja-rgb), .28), transparent 70%), var(--papel);
  border: 1px solid rgba(var(--naranja-rgb), .5); border-radius: 28px; padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4), 0 0 60px rgba(var(--naranja-rgb), .16);
}
.insignia { display: inline-block; background: var(--amarillo); color: #2A1A00; font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 99px; margin-bottom: 14px; }
.precio-num { font-size: 22px; font-weight: 800; color: var(--texto-2); margin: 14px 0 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.precio-num s { font-size: 26px; }
.precio-num span { font-size: clamp(68px, 10vw, 100px); color: var(--texto); letter-spacing: -.04em; line-height: 1; }
.precio-sub { color: var(--texto-2); margin-bottom: 22px; }
.precio-sub b { color: var(--texto); }
.precio-mini { color: var(--texto-3); font-size: 14px; margin-top: 12px; text-align: center; }
.precio-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.precio-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; }
.precio-lista li::before { content: "✓"; flex: 0 0 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--naranja-rgb), .18); color: var(--naranja); font-weight: 900; font-size: 14px; }
.garantia { position: relative; z-index: 1; display: flex; gap: 20px; align-items: center; margin-top: 18px; padding: 22px 26px; border-radius: var(--radio); border: 1px dashed rgba(255, 194, 61, .5); background: rgba(255, 194, 61, .05); }
.garantia-sello { flex: 0 0 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: var(--amarillo); color: #2A1A00; font-weight: 900; font-size: 28px; line-height: 1; }
.garantia-sello small { font-size: 12px; font-weight: 800; }
.garantia h3 { margin-bottom: 4px; }
.garantia p { color: var(--texto-2); font-size: 15px; }
@media (max-width: 860px) { .precio { grid-template-columns: 1fr; gap: 26px; } .garantia { flex-direction: column; text-align: center; } }

/* FAQ */
.faq { margin-top: 28px; display: grid; gap: 10px; }
.faq details { background: var(--papel); border: 1px solid var(--borde); border-radius: 16px; padding: 2px 20px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--naranja); font-size: 24px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--texto-2); padding: 0 0 18px; }
.faq a { color: var(--naranja-2); }

/* Cierre y pie */
.cierre .contenedor { position: relative; z-index: 1; }
.cierre .luz { inset: -20% -20% auto -20%; height: 560px; }
.pie { border-top: 1px solid var(--borde); padding: 32px 0 40px; color: var(--texto-3); font-size: 14px; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.pie .marca { color: var(--texto); font-size: 18px; }
.pie a { color: var(--texto-2); }
.pie-legal { margin-left: auto; }
@media (max-width: 700px) { .pie-legal { margin-left: 0; } .pie { padding-bottom: 110px; } }

/* Barra de compra fija (solo celular, aparece al pasar el hero) */
.barra-compra { display: none; }
@media (max-width: 860px) {
  .barra-compra {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(28, 25, 34, .96); border: 1px solid rgba(var(--naranja-rgb), .45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
    transform: translateY(140%); transition: transform .35s var(--ease);
  }
  .barra-compra.visible { transform: none; }
  .barra-precio { display: grid; line-height: 1.1; font-size: 13px; color: var(--texto-3); grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; }
  .barra-precio b { color: var(--texto); font-size: 20px; }
  .barra-precio small { grid-column: 1 / -1; font-size: 12px; }
  .barra-compra .boton { padding: 12px 18px; font-size: 16px; }
}

/* Aparición suave (el contenido ya está en el HTML; esto solo lo anima) */
.aparece { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.aparece.visible { opacity: 1; transform: none; }

/* Ajustes para celular */
.solo-cel { display: none; }
@media (max-width: 600px) {
  .solo-pc { display: none; }
  .solo-cel { display: inline; }
  .aviso-lanzamiento { font-size: 13px; padding: 7px 10px; }
  .celular { width: min(250px, 66vw); border-radius: 36px; padding: 9px; }
  .celular-pantalla { border-radius: 28px; }
  h1 { font-size: clamp(40px, 11vw, 52px); }
  .hero-grid { gap: 18px; }
}

/* Aviso «Toca para escuchar» del video del hero */
.toca-sonido {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  border: 0; border-radius: 99px; padding: 14px 22px; cursor: pointer; white-space: nowrap;
  font: 800 17px var(--sans); color: #fff; background: var(--naranja);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 0 rgba(var(--naranja-rgb), .6);
  animation: latidoSonido 1.8s ease-out infinite;
  transition: opacity .3s, transform .3s;
}
.toca-sonido.oculto { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.9); }
@keyframes latidoSonido { 0% { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(var(--naranja-rgb), .6); } 100% { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 22px rgba(var(--naranja-rgb), 0); } }

/* Botón «Ver el video» del hero: grande, con latido, vibración suave y flecha que invita a tocar */
.pausa-ico { display: none; }
.ver-video {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; border-radius: 99px;
  background: var(--naranja); color: #fff; font: 800 19px var(--sans); white-space: nowrap; pointer-events: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 0 rgba(var(--naranja-rgb), .7);
  opacity: 0; transition: opacity .3s;
}
.celular-pantalla.pausado .ver-video { opacity: 1; animation: verLatido 1.6s ease-out infinite, verEmpuje 3.2s ease-in-out infinite; }
.celular-pantalla.pausado::after { content: ""; position: absolute; inset: 0; background: rgba(10, 8, 12, .35); z-index: 1; pointer-events: none; }
.ver-play { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: 0 0 46px; }
.ver-play::before { content: ""; width: 0; height: 0; margin-left: 5px; border-left: 16px solid var(--naranja); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
@keyframes verLatido {
  0% { box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 0 rgba(var(--naranja-rgb), .7); }
  100% { box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 0 26px rgba(var(--naranja-rgb), 0); }
}
@keyframes verEmpuje {
  0%, 70%, 100% { transform: translate(-50%, -50%) scale(1); }
  76% { transform: translate(-50%, -50%) scale(1.08); }
  82% { transform: translate(-50%, -50%) scale(.97); }
  88% { transform: translate(-50%, -50%) scale(1.04); }
}
.celular-pantalla:hover .ver-video { filter: brightness(1.08); }