/* -------------------- Variables y Base -------------------- */
:root {
  --bg: #0C0C0E;
  --text: #EDEDED;
  --muted: #B5B5BA;
  --accent: #FFC700;
  --accent-soft: #FDE79F;
  --line: rgba(255, 255, 255, 0.08);
  --radius: 20px;
  --space-hero: 120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Fondo Animado de Orbes */
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1;
  background: 
    radial-gradient(circle at 15% 15%, rgba(255,199,0,0.12), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(255,199,0,0.08), transparent 40%);
  filter: blur(60px);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wrap { width: min(1200px, 92%); margin-inline: auto; }

/* -------------------- Navbar (Ancho 100%) -------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  background: rgba(12, 12, 14, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  padding-inline: 4%; /* Margen interno para que no toque los bordes */
}

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: white; font-weight: 900; letter-spacing: 1px; }
.brand__logo { color: var(--accent); font-size: 1.2rem; }

.nav-links { display: flex; list-style: none; gap: 2rem; align-items: center; }
.nav-links a { text-decoration: none; color: var(--muted); font-size: 0.9rem; font-weight: 600; transition: color 0.3s; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { background: var(--accent); color: #000 !important; padding: 8px 16px; border-radius: 99px; transition: background 0.3s ease, transform 0.3s ease; }
.nav-cta:hover { background: var(--accent-soft); transform: scale(1.05); }

/* -------------------- Hero (Split 2 Columnas) -------------------- */
.hero {
  padding-top: var(--space-hero);
  min-height: 90vh;
  display: flex;
  align-items: center;
  animation: fadeInUp 0.8s ease;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* División en 2 */
  gap: 4rem;
  align-items: center;
}

.eyebrow { color: var(--accent); font-weight: 800; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 1rem; }
.brand-grad { background: linear-gradient(135deg, #FFE070, var(--accent)); -webkit-background-clip: text; color: transparent; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; font-weight: 900; margin-bottom: 1.5rem; }
.lead { font-size: 1.1rem; color: var(--muted); margin-bottom: 2rem; max-width: 500px; }

.bullets { list-style: none; margin-bottom: 2.5rem; }
.bullets li { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.bullets li::before { content: "✓"; color: var(--accent); font-weight: 900; }

.btn.primary {
  display: inline-block;
  padding: 16px 32px;
  background: var(--accent);
  color: #000;
  text-decoration: none;
  font-weight: 700;
  border-radius: 99px;
  box-shadow: 0 10px 30px rgba(255, 199, 0, 0.3);
}

/* -------------------- Reel Scrolleable (Derecha) -------------------- */
.hero__reel {
  position: relative;
  height: 600px; /* Altura de la ventana de scroll */
}

.reelCard {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.reelHead { margin-bottom: 15px; }
.reelEyebrow { font-size: 0.7rem; font-weight: 800; color: var(--muted); }

.reelViewport {
  flex: 1;
  overflow-y: auto; /* Scroll vertical */
  padding-right: 10px;
}

/* Personalización del scroll */
.reelViewport::-webkit-scrollbar { width: 4px; }
.reelViewport::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 10px; }

.reelTrack { display: flex; flex-direction: column; gap: 20px; }
.reelShot { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.reelShot:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.reelShot img { width: 100%; display: block; filter: saturate(1.1); }
.reelShot figcaption {
  padding: 10px; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
  font-size: 0.8rem; text-align: center; color: #fff;
}

/* -------------------- Resto de secciones -------------------- */
section { padding-block: 80px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: rgba(255,255,255,0.03); padding: 30px; border-radius: 20px; border: 1px solid var(--line); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

.flowlist { list-style: none; padding-left: 40px}
.flowlist li { position: relative; margin-bottom: 30px; }
.dot { position: absolute; left: -56px; width: 30px; height: 30px; background: var(--accent); color: #000; display: grid; place-items: center; border-radius: 50%; font-weight: 900; }

.cta__box { background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent); padding: 60px; border-radius: 30px; text-align: center; border: 1px solid var(--line); }

.site-footer { padding: 40px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }
.footer__grid { display: flex; justify-content: space-between; }

/* -------------------- Mobile -------------------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__text { display: flex; flex-direction: column; align-items: center; }
  .hero__reel { height: 450px; }
  .navbar { padding-inline: 0; }
  .nav-links { flex-wrap: wrap; gap: 1rem; justify-content: center; width: 100%; }
  .nav-links a { font-size: 0.8rem; }
  .brand { font-size: 0.8rem; }
  .hero { padding-top: calc(var(--space-hero) + 1rem); }
}

/* -------------------- TESTIMONIOS (Restaurado) -------------------- */
.testimonials { 
  padding-block: var(--space-8); 
  position: relative;
  animation: fadeInUp 0.8s ease 0.2s both;
}

.testimonials .wrap { position: relative; }

.testimonials .section-badge {
  position: absolute; 
  top: -22px; 
  left: 50%; 
  transform: translateX(-50%);
  display: inline-block; 
  padding: .45rem .95rem; 
  border-radius: 999px; 
  font-weight: 900;
  color: #0C0C0E; 
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  box-shadow: 0 10px 28px rgba(255, 199, 0, 0.35); 
  z-index: 3;
}

.testimonials .head {
  text-align: center;
  margin-bottom: 3rem;
}

.testimonials .sliderframe {
  position: relative; 
  border: 1px solid var(--line); 
  border-radius: 22px;
  padding: 80px 1rem 2rem; /* Espacio para el badge y contenido */
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

/* Efecto de brillo dorado detrás del carrusel */
.testimonials .sliderframe::before {
  content: ""; position: absolute; inset: -10% -6%;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255, 199, 0, .18), transparent 60%);
  filter: blur(18px); z-index: -1;
}

.testimonials .slider {
  display: flex; 
  gap: 1.5rem; 
  overflow-x: auto; 
  scroll-snap-type: x mandatory;
  scrollbar-width: none; 
  padding: 1rem;
}

.testimonials .slider::-webkit-scrollbar { display: none; }

.testimonials .slide {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 280px; 
  scroll-snap-align: center;
  border: 1px solid var(--line); 
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.testimonials .quote blockquote {
  font-style: italic;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--text);
  flex-grow: 1;
}

.testimonials .quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.testimonials .avatar {
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  object-fit: cover;
  border: 1px solid var(--accent);
}

/* Botones de navegación */
.testimonials .navbtn {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%);
  width: 44px; 
  height: 44px; 
  border-radius: 50%;
  background: #1c1d21; 
  color: white; 
  border: 1px solid var(--line);
  cursor: pointer; 
  z-index: 10;
  display: grid; 
  place-items: center;
  transition: 0.3s;
}

.testimonials .prev { left: 10px; }
.testimonials .next { right: 10px; }
.testimonials .navbtn:hover { background: var(--accent); color: #000; }

@media (max-width: 960px) {
  .testimonials .slide { flex: 0 0 80%; }
}

/* -------------------- Variables de marca -------------------- */
:root{
  --bg:#0C0C0E; --text:#EDEDED; --muted:#B5B5BA;
  --accent:#FFC700; --accent-soft:#FDE79F;
  --line:#2C2C2F; --radius:20px;

  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem;
  --space-5:2rem;  --space-6:3rem;  --space-7:4rem;  --space-8:6rem;

  /* Galería “Así se ve por dentro” */
  --shot-ratio:62.5%;   /* 16:10 */

  /* Testimonios */
  --fb-gap:1rem;
}

/* -------------------- Reset básico -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
}
body::before{
  content:""; position:fixed; inset:-20% -10%; z-index:-2;
  background:
    radial-gradient(800px 400px at 15% 5%, rgba(255,199,0,.16), transparent 60%),
    radial-gradient(600px 300px at 85% 0%, rgba(255,199,0,.10), transparent 70%),
    radial-gradient(500px 280px at 70% 90%, rgba(255,199,0,.08), transparent 70%);
  filter:blur(22px); opacity:.7; animation:orbs 28s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 10 10'><circle cx='1' cy='1' r='.3' fill='white' opacity='.035'/></svg>");
  background-size:160px 160px; mix-blend-mode:overlay; opacity:.25;
}
@keyframes orbs{
  0%   {transform:translate3d(0,0,0) scale(1);}
  100% {transform:translate3d(0,-2%,0) scale(1.03);}
}

.wrap{width:min(1120px,90%); margin-inline:auto}
h1,h2,h3{line-height:1.15; letter-spacing:-.015em}
section{padding-block:var(--space-6)}
@media (min-width:1000px){ section{padding-block:var(--space-7)} }
a{color:inherit; text-decoration:none}

/* -------------------- Hero compacto -------------------- */
.section-divider{display:none !important}
.hero{padding-top:var(--space-8); padding-bottom:20px; position:relative}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(900px 320px at 10% -10%, rgba(255,199,0,.10), transparent 60%),
  radial-gradient(540px 240px at 90% 0%, rgba(255,199,0,.08), transparent 70%);filter:blur(8px)}
.hero__grid{display:grid;gap:var(--space-6);grid-template-columns:1.2fr .9fr;align-items:center}
@media (max-width:960px){ .hero__grid{grid-template-columns:1fr} }
.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:#9B9BA1;font-size:.85rem}
.hero h1{font-size:clamp(2.2rem,5.2vw,4rem);line-height:1.05;margin:.25rem 0 .75rem;font-weight:900}
.brand-grad{background:linear-gradient(180deg,#FFE070 0%,var(--accent) 60%,#EAB308 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 4px 18px rgba(255,199,0,.18)}
.lead{color:#EDEDEDB3;max-width:62ch;margin-bottom:var(--space-3)}

/* -------------------- Formulario (card) -------------------- */
.hero__card{
  background:
    radial-gradient(120% 100% at 50% -40%, rgba(255,199,0,.20) 0%, rgba(255,199,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px; padding:1rem;
  box-shadow:0 18px 60px rgba(0,0,0,.40),0 8px 24px rgba(255,199,0,.12);
}
.hero__card fieldset{border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:var(--space-4); margin:0}
.hero__card legend{font-size:1rem;font-weight:900;color:#EDEDED;padding:0 .4rem}
.form label{display:block;margin:.6rem 0 .35rem;color:#E0E0E3;font-weight:700}
.form label span{color:#919191;font-weight:900;margin-left:.15rem}
.form input,.form select{
  width:100%;height:46px;padding:.75rem .85rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);background:#0F1012;color:var(--text);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.grid-2 .redes {
  grid-column: 1 / -1;   
}

.form input::placeholder{color:#7E7E84}
.form select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><path fill='%23EDEDED' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:18px;padding-right:2.2rem}
.form input:hover,.form select:hover{border-color:rgba(255,255,255,.14)}
.form input:focus,.form select:focus{border-color:rgba(255,199,0,.65);background:#0D0E10;box-shadow:0 0 0 3px rgba(255,199,0,.25),0 8px 22px rgba(0,0,0,.25)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:480px){ .grid-2{grid-template-columns:1fr} }
.form .check{display:flex;gap:.6rem;align-items:center;margin:var(--space-3) 0}
.form .check input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);border-radius:4px;border:1px solid #3a3a3f;background:#0E0F11}
.form .hint{color:#9B9BA1;font-size:.85rem;margin-top:.5rem}
.form .btn.primary{
  height:48px;border-radius:32px;background:linear-gradient(135deg,var(--accent),var(--accent-soft));width:100%;
  color:#0C0C0E;font-weight:900;border:0;box-shadow:0 14px 34px rgba(255,199,0,.28);position:relative;overflow:hidden}
.form .btn.primary::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 35%,transparent 65%);transform:translateX(-120%);transition:transform .6s ease}
.form .btn.primary:hover::after{transform:translateX(120%)}

/* -------------------- Banner beta (sin CTA, full width) -------------------- */
.banner{border-left:none;border-right:none;border-radius:0;width:100%;margin-top:20px}
.banner .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-5);padding:1.25rem 1.5rem}
.banner .grid > div:first-child{grid-column:1 / -1}
.banner h2{margin:0 0 .25rem;font-weight:900;font-size:clamp(1.9rem,3.4vw,2.6rem)}
.banner .sub{margin:0 0 var(--space-3);color:#EDEDEDB3}
.banner .cta{display:none !important}
.banner .countbox{display:flex;align-items:center;gap:.9rem;flex-wrap:nowrap;width:100%;padding:.9rem;border-radius:16px;border:1px solid var(--line);background:#0E0F1199}
.banner .clock{display:flex;align-items:center;gap:.9rem;flex-wrap:nowrap;min-width:0}
.banner .time{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:70px;padding:.5rem .7rem;text-align:center;border-radius:12px;background:#17181c;border:1px solid var(--line)}
.banner .time span{font-size:1.15rem;font-weight:900;line-height:1}
.banner .time small{margin-top:.15rem;opacity:.75}
.banner .left{margin-left:auto;white-space:nowrap;font-weight:800;color:#EDEDED}
.banner .progress{width:100%;height:10px;margin-top:.85rem;background:#2C2C2F;border-radius:999px}
.banner .progress .bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
@media (max-width:720px){
  .banner .grid{grid-template-columns:1fr}
  .banner .countbox{flex-wrap:wrap;row-gap:.8rem}
  .banner .left{margin-left:0;width:100%}
}

/* -------------------- Features (3 cards) -------------------- */
.tools{ text-align:center; margin-bottom:var(--space-3) }
.tools .eyebrow{ display:block; margin:0 auto .5rem; letter-spacing:.14em; color:#9B9BA1 }
.tools .sub{ max-width:56ch; margin:0 auto 1.25rem; color:#EDEDEDB3 }
.tools h2{ margin:0 auto .4rem; font-weight:900 }
.features .cards{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:860px){.features .cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:20px;padding:1rem;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.card::after{content:'';position:absolute;left:16px;top:16px;width:22px;height:22px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-soft));box-shadow:0 8px 20px rgba(255,199,0,.25)}
.card .ic{visibility:hidden}
.card h3{margin:.4rem 0 .25rem}
.card p{color:var(--muted)}
.microconf{text-align:center;color:var(--muted);margin-top:.5rem}

/* -------------------- PRODUCTO — “Así se ve por dentro”  -------------------- */
.product .shots{
  display:grid; grid-template-columns:repeat(2, minmax(280px, 1fr));
  gap:20px; align-items:start;
}
.product .shot{
  position:relative; display:grid; grid-template-rows:auto auto;
  border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.product .shot::before{content:""; grid-area:1 / 1; padding-top:var(--shot-ratio)}
.product .shot::after{content:none !important; display:none !important}
.product .shot > img{grid-area:1 / 1; width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:auto !important}
.product .shot figcaption{
  grid-area:2 / 1; padding:12px 16px; color:var(--muted);
  border-top:1px solid var(--line); background:rgba(12,12,14,.5); backdrop-filter:blur(2px);
}
@media (max-width:640px){
  :root{ --shot-ratio:100%; }
  .product .shots{ grid-template-columns:1fr; }
}

/* -------------------- FLOW / Roadmap (De “match” a publicación, sin dolores) -------------------- */
.flow .head{margin-bottom:var(--space-3)}
.flow .flowlist{
  position:relative; list-style:none; margin:0; padding-left:3rem; display:grid; gap:1rem;
}
.flow .flowlist::before{
  content:""; position:absolute; left:1.6rem; top:.5rem; bottom:.5rem; width:2px;
  background:linear-gradient(180deg,var(--accent),transparent);
  opacity:.6;
}
.flow .flowlist li{
  position:relative; background:#15161a; border:1px solid var(--line);
  border-radius:16px; padding:1rem 1rem 1rem 1.25rem; box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.flow .dot{
  position:absolute; left:-2.6rem; top:1rem; width:28px; height:28px; display:grid; place-items:center;
  font-weight:900; border-radius:999px; color:#0C0C0E;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft)); box-shadow:0 8px 20px rgba(255,199,0,.25);
}
.flow h4{margin:.1rem 0 .25rem; font-size:1rem}
@media (min-width:960px){
  .flow .flowlist{gap:1.2rem}
}


.testimonials .wrap{ position:relative }


.testimonials .section-badge{
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  display:inline-block; padding:.45rem .95rem; border-radius:999px; font-weight:900;
  color:#0C0C0E; background:linear-gradient(135deg,var(--accent),var(--accent-soft));
  box-shadow:0 10px 28px rgba(255,199,0,.35); z-index:3;
}


.testimonials .head{
  position:absolute; top:32px; left:50%; transform:translateX(-50%);
  text-align:center; width:calc(100% - 64px); z-index:2; margin:0;
}
.testimonials .head .eyebrow{ letter-spacing:.14em; color:#9b9ba1; margin:0 0 .25rem }
.testimonials .head h2{ font-size:clamp(1.8rem,3.1vw,2.6rem); font-weight:900; margin:0 }


.testimonials .sliderframe{
  position:relative; border:1px solid var(--line); border-radius:22px;
  padding: 110px  calc(var(--fb-gap) + 2rem) 1.8rem;  
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.testimonials .sliderframe::before{
  content:""; position:absolute; inset:-10% -6%;
  background:radial-gradient(60% 50% at 50% 0%, rgba(255,199,0,.18), transparent 60%);
  filter:blur(18px); z-index:-1;
}

.testimonials .sliderframe::after{ display:none !important }
.testimonials .sliderframe .progress{ display:none !important }


.testimonials .slider{
  display:flex; gap:var(--fb-gap); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:.25rem 2.4rem;
}
.testimonials .slider::-webkit-scrollbar{ display:none }

/* Tarjetas */
.testimonials .slider .slide{
  flex:0 0 calc(33.333% - (var(--fb-gap) * 2 / 3));
  min-width:280px; scroll-snap-align:center;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  box-shadow:0 10px 28px rgba(0,0,0,.22); padding:1rem;
}
.testimonials .quote .stars{ color:var(--accent); letter-spacing:.2em; font-size:.95rem }
.testimonials .quote blockquote{ margin:.5rem 0 .9rem; font-size:1.02rem; line-height:1.55 }
.testimonials .quote blockquote::before{ content:"“"; color:var(--accent); font-size:1.6rem; margin-right:.25rem }
.testimonials .quote figcaption{ display:flex; align-items:center; gap:.5rem; color:var(--muted) }
.testimonials .avatar{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background:#0e0f11; border:1px solid var(--line); font-size:.8rem; font-weight:800; color:#EDEDED;
}


.testimonials .navbtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:999px; border:1px solid var(--line);
  background:#1c1d21; color:#EDEDED; cursor:pointer; display:grid; place-items:center;
  z-index:4; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.testimonials .prev{ left: -22px; }
.testimonials .next{ right: -22px; }

.testimonials .navbtn:hover,
.testimonials .prev:hover,
.testimonials .next:hover{ background:#232429 }

.testimonials .navbtn[disabled],
.testimonials .prev[disabled],
.testimonials .next[disabled]{ opacity:.35; pointer-events:none; }  


@media (max-width:980px){
  .testimonials .slider .slide{ flex-basis:calc(50% - var(--fb-gap)) }
}
@media (max-width:620px){
  .testimonials .sliderframe{ padding-top:100px }
  .testimonials .slider{ padding:.25rem 2.2rem }
  .testimonials .slider .slide{ flex-basis:100% }
}

/* -------------------- FAQ y CTA final (estilos suaves) -------------------- */
.faq .faq__group{margin:var(--space-4) 0}
.faq .faq__group h3{color:#9B9BA1;font-size:1rem;margin:.25rem 0 .5rem}
.faq .faq__group details{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:12px;padding:.8rem;margin:.5rem 0}
details summary{cursor:pointer;font-weight:800;color:#EDEDED}
details p{color:var(--muted);margin:.4rem 0 0}

.cta{
  padding-block: 32px 64px;       
}

.cta .wrap{ position: relative; }

.cta__box{

  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1rem;

  padding: 36px 28px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.03) inset;
  position: relative;
  overflow: hidden;
}


.cta__box::before{
  content:"";
  position:absolute; inset:-18% -10% auto -10%;
  height:160%;
  background:radial-gradient(60% 45% at 50% 15%, rgba(255,199,0,.25), transparent 60%);
  filter:blur(26px);
  z-index:-1;
}

.cta__title{
  margin: 0;
  font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);  /* como la ref */
  align-content: center;
  text-align: center;
}

.cta__sub{
  margin: 0 0 1rem;
  color: #EDEDEDB3;
  max-width: 72ch;
    align-content: center;
  text-align: center;
}

/* botón ancho, redondo y con brillo */
.cta .btn.primary{
  width: min(820px, 100%);
  height: 54px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #0C0C0E;
  font-weight: 900;
  box-shadow:
    0 16px 42px rgba(255,199,0,.32),
    0 1px 0 rgba(255,255,255,.25) inset;
  position: relative;
  overflow: hidden;
  text-align: center;
    align-content: center;
  text-align: center;
}

/* pequeño “shine” al hover */
.cta .btn.primary::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.38) 35%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
    align-content: center;
  text-align: center;
}
.cta .btn.primary:hover::after{ transform: translateX(120%); }


.cta__box .cta__back{ display:none !important; }

@media (max-width:640px){
  .cta__box{ padding: 28px 20px; border-radius: 20px; }
  .cta .btn.primary{ height: 50px; }


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

:root{

  --mesh-a:#FFE070;
  --mesh-b:#FFC700;
  --mesh-c:#EAB308;
  --mesh-d:#8B5CF6;       
  --grid:rgba(255,255,255,.035);
  --grain:rgba(255,255,255,.18);
  --bg-vignette: radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,.0), rgba(0,0,0,.22) 70%, rgba(0,0,0,.38) 100%);
}


html, body, button, input, select, textarea {
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}


html::before{
  content:"";
  position:fixed; inset:-10% -10% -10% -10%;
  z-index:-3; pointer-events:none;
  background:

    radial-gradient(45% 60% at 15% 15%, color-mix(in oklab, var(--mesh-a) 35%, transparent), transparent 70%),
    radial-gradient(50% 60% at 85% 10%, color-mix(in oklab, var(--mesh-b) 28%, transparent), transparent 70%),
    radial-gradient(50% 55% at 70% 85%, color-mix(in oklab, var(--mesh-c) 22%, transparent), transparent 70%),
    conic-gradient(from 220deg at 60% 40%, rgba(255,199,0,.18), transparent 20%, rgba(139,92,246,.10) 35%, transparent 52%, rgba(255,199,0,.14) 70%, transparent 100%);
  filter: blur(24px) saturate(105%);
  animation: mesh-pan 42s ease-in-out infinite alternate;
  opacity:.85;
}


html::after{
  content:"";
  position:fixed; inset:-5% -5% -5% -5%;
  z-index:-2; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 64px),
    var(--bg-vignette);
  mix-blend-mode:overlay;
  transform-origin:50% 50%;
  animation:grid-rotate 120s linear infinite;
  opacity:.45;
}

body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1; pointer-events:none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 10 10'><circle cx='1' cy='1' r='.32' fill='white' opacity='.32'/></svg>");
  background-size:160px 160px;
  mix-blend-mode:overlay;
  opacity:.18;
  animation: grain-breathe 6s ease-in-out infinite;
}

/* Mantengo tus “orbes” pero los hago parpadear sutil y con pan del bg */
body::before{
  content:"";
  position:fixed; inset:-20% -10%;
  z-index:-2; pointer-events:none;
  background:
    radial-gradient(800px 400px at 15% 5%, rgba(255,199,0,.16), transparent 60%),
    radial-gradient(600px 300px at 85% 0%, rgba(255,199,0,.10), transparent 70%),
    radial-gradient(500px 280px at 70% 90%, rgba(255,199,0,.08), transparent 70%);
  filter:blur(22px);
  animation: orbs 28s ease-in-out infinite alternate,
             bg-shimmer 22s ease-in-out infinite;
  opacity:.7;
}

/* ---------- “ASÍ SE VE POR DENTRO” — FONDO MÁS PROFESIONAL ---------- */

.product{ position:relative; overflow:hidden; }

/* Halo dorado + malla suave animada detrás de los shots */
.product::before{
  content:"";
  position:absolute; inset:-10% -10% -10% -10%;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,199,0,.18), transparent 70%),
    conic-gradient(from 120deg at 60% 40%, rgba(255,199,0,.18), transparent 25%, rgba(139,92,246,.08) 45%, transparent 70%, rgba(255,199,0,.12) 90%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  filter: blur(20px) saturate(104%);
  animation: mesh-pan 48s ease-in-out infinite alternate-reverse;
  opacity:.8;
}

/* Grilla difusa que rota MUY lento para dar profundidad */
.product::after{
  content:"";
  position:absolute; inset:-6% -6% -6% -6%;
  z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 56px);
  filter: blur(8px);
  mix-blend-mode:overlay;
  animation:grid-rotate 140s linear infinite reverse;
  opacity:.35;
}

/* Opcional: sutil borde luminoso de las cards de shots al hover */
.product .shot{
  transition: box-shadow .35s ease, transform .35s ease;
}
.product .shot:hover{
  box-shadow:0 16px 36px rgba(0,0,0,.35), 0 0 0 1px rgba(255,199,0,.12) inset;
  transform: translateY(-1px);
}

/* ---------- ANIMACIONES ---------- */

@keyframes mesh-pan{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(0,-2%,0) scale(1.015); }
  100% { transform: translate3d(0,-3%,0) scale(1.03); }
}

@keyframes grid-rotate{
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.01); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes grain-breathe{
  0%,100% { opacity:.16; }
  50%     { opacity:.22; }
}

@keyframes bg-shimmer{
  0%   { filter: blur(22px) brightness(1) }
  50%  { filter: blur(22px) brightness(1.05) }
  100% { filter: blur(22px) brightness(1) }
}

/* Mantengo tu animación original de orbs y la combino arriba */
@keyframes orbs{
  0%   { transform: translate3d(0,0,0) scale(1) }
  100% { transform: translate3d(0,-2%,0) scale(1.03) }
}

/* ====== MOBILE OVERRIDES + FIXES (pegar al final) ====== */

/* 1) Bloqueos de desborde lateral + medios fluidos */
html, body{ overflow-x:hidden }
img, video, svg{ max-width:100%; height:auto }

/* 2) Carrusel: impedir que las flechas generen scroll horizontal */
.testimonials .sliderframe{ overflow:hidden }

/* 3) Ajustes generales en ≤640px */
@media (max-width:640px){

  /* contenedor con safe-area (iOS notch) */
  .wrap{
    width:100%;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* hero más compacto */
  .hero{ padding-top: var(--space-6) }
  .hero__card{ padding:.75rem }
  .hero__card fieldset{ padding: var(--space-3) }
  .grid-2{ grid-template-columns:1fr }

  /* banner (countdown) respirado y sin cortes */
  .banner .grid{ grid-template-columns:1fr }
  .banner .countbox{ padding:.7rem; row-gap:.6rem }
  .banner .clock{ gap:.5rem }
  .banner .time{ min-width:56px; padding:.45rem .5rem }
  .banner .left{ margin-left:0; width:100% }

  /* “Así se ve por dentro”: 1 columna + cuadrado */
  :root{ --shot-ratio:100% }
  .product .shots{ grid-template-columns:1fr }

  /* carrusel de testimonios: badge ancho, flechas adentro y target más grande */
  .testimonials .sliderframe{
    padding-top:120px;
    padding-left:16px; padding-right:16px;
  }
  .testimonials .section-badge{
    max-width:calc(100% - 32px);
    white-space:normal; line-height:1.2;
    text-align:center;
  }
  .testimonials .navbtn{ width:40px; height:40px }
  .testimonials .prev{ left:6px }
  .testimonials .next{ right:6px }
  .testimonials .slider{ padding:.25rem 12px }
  .testimonials .slider .slide{ flex-basis:100% }

  /* FAQ: resumen más tocable */
  details summary{ padding:.2rem 0 }

  /* CTA final: botón 100% */
  .cta__box{ padding:24px 16px; border-radius:20px }
  .cta .btn.primary{ width:100%; height:50px }

  /* ========= Fondo en mobile igual a desktop (sin animaciones) ========= */
  html::before,
  html::after,
  body::before,
  body::after,
  .product::before,
  .product::after{
    animation:none !important;
    transform:none !important;
  }

html::before{
  filter:none;
  opacity:1;
  background: var(--bg); /* mismo color de fondo que desktop */
}

html::after,
body::before,
body::after,
.product::before,
.product::after{
  background:none;
  opacity:0;
}

}

.hero__reel {
  max-height: 560px;          /* controla el alto total */
  display: flex;
}

.reelCard {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* viewport con scroll */
.reelViewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,199,0,.6) transparent;

  border-radius: 16px;
}

/* scrollbar webkit */
.reelViewport::-webkit-scrollbar {
  width: 6px;
}
.reelViewport::-webkit-scrollbar-thumb {
  background: rgba(255,199,0,.6);
  border-radius: 10px;
}

/* track vertical (una imagen debajo de otra) */
.reelTrack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 6px; /* evita que el scroll tape contenido */
}

/* cada imagen contenida */
.reelShot {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.reelShot img {
  width: 100%;
  height: auto;
  display: block;
}

/* 4) Micro-tweaks para medianos (≤980px) */
@media (max-width:980px){
  .testimonials .slider .slide{ flex-basis:calc(50% - var(--fb-gap)) }
}

/* 5) Prevención de “saltos” por palabras largas */
*{ word-break:break-word }

@media (max-width: 640px) {
  .hero__reel {
    max-height: 420px;
  }
}

}