/* -------------------- 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;
}
/* Fondo animado sutil (orbes dorados + grano) */
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;
}
.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” (reemplazo completo) -------------------- */
.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}
}

/* -------------------- TESTIMONIOS — idéntico a la referencia #2 -------------------- */
/* La envoltura sirve de referencia para posicionar el badge y el header dentro del frame */
.testimonials .wrap{ position:relative }

/* Badge centrado por encima del marco */
.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;
}

/* Header (eyebrow + H2) colocado dentro del marco, arriba */
.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 }

/* Marco contenedor del carrusel */
.testimonials .sliderframe{
  position:relative; border:1px solid var(--line); border-radius:22px;
  padding: 110px  calc(var(--fb-gap) + 2rem) 1.8rem;  /* espacio para el header dentro */
  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;
}
/* Sin barras/progresos */
.testimonials .sliderframe::after{ display:none !important }
.testimonials .sliderframe .progress{ display:none !important }

/* Carrusel: sin scrollbar visible, con snap */
.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;
}

/* Flechas funcionales (usa tu JS para scrollBy) */
.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; }  

/* Responsive: 2 y 1 tarjetas */
@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;         /* aire superior/inferior */
}

.cta .wrap{ position: relative; }

.cta__box{
  /* contenedor centrado y con halo dorado suave */
  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;
}

/* halo dorado detrás del card */
.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%); }

/* por si existía un link lateral (ej. “Volver al formulario”) */
.cta__box .cta__back{ display:none !important; }

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


  /* ===========================
   FONDOS DINÁMICOS + TIPOGRAFÍA
   (pegar al final del CSS)
   =========================== */

/* Tipografía Montserrat (por si no está linkeada en el HTML) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

:root{
  /* Extras para animaciones de fondo */
  --mesh-a:#FFE070;
  --mesh-b:#FFC700;
  --mesh-c:#EAB308;
  --mesh-d:#8B5CF6;        /* toque frío muy sutil para contraste */
  --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%);
}

/* Asegurar Montserrat en todo el form/UI */
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;
}

/* ---------- FONDO GLOBAL MÁS VIVO ---------- */

/* Capa 1: “mesh” animado con conic/radial */
html::before{
  content:"";
  position:fixed; inset:-10% -10% -10% -10%;
  z-index:-3; pointer-events:none;
  background:
    /* malla de color con movimiento sutil */
    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;
}

/* Capa 2: grilla fina que rota muy despacio */
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;
}

/* Capa 3: grano fino con respiración de opacidad */
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;
}

}

/* 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 }


}