/* ============================================================
   Publinovo — Landing "Videos Promocionales con IA"
   Hereda tokens y componentes de styles.css.
   Solo añade lo específico de esta landing. Prefijo: .vid-
   ============================================================ */

.vid-soft{ background:var(--bg-soft) }

/* Acortar el espacio entre "Nuestro trabajo" y "Prueba social" */
.section.vid-soft{ padding-bottom:clamp(40px,5vw,64px) }
.section.testi{ padding-top:clamp(40px,5vw,64px) }

/* ============================================================
   1 · HERO (split: copy + mockup vertical)
   ============================================================ */
.vid-hero{
  position:relative; overflow:hidden;
  padding-block:clamp(28px,4vw,52px) clamp(56px,7vw,96px);
  background:
    radial-gradient(110% 120% at 92% -10%, rgba(28,157,215,.12), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.16), transparent 55%),
    linear-gradient(135deg, #f4faee 0%, #eef7f4 50%, #ecf6fb 100%);
}
.vid-hero__blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0 }
.vid-hero__blob--1{ width:340px; height:340px; top:-120px; right:-80px; background:radial-gradient(circle, rgba(28,157,215,.30), transparent 70%) }
.vid-hero__blob--2{ width:300px; height:300px; bottom:-130px; left:-90px; background:radial-gradient(circle, rgba(140,198,63,.30), transparent 70%) }
.vid-hero .wrap{ position:relative; z-index:2 }

.vid-crumbs{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-head);
  font-size:13px; font-weight:500; color:var(--ink-3); margin-bottom:clamp(20px,3vw,32px);
}
.vid-crumbs a{ color:var(--ink-3); transition:color .2s }
.vid-crumbs a:hover{ color:var(--blue-d) }
.vid-crumbs span[aria-current]{ color:var(--green-d); font-weight:600 }
.vid-crumbs i{ font-style:normal; color:var(--line-2) }

.vid-hero__grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.vid-badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; margin-bottom:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--ff-head); font-size:13px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.vid-badge .dot{ width:9px; height:9px; border-radius:50%; background:#8CC63F; box-shadow:0 0 0 4px rgba(140,198,63,.25); animation:pulse 2s infinite }
.vid-hero__copy h1{ font-size:clamp(34px,4.8vw,56px); letter-spacing:-.03em; text-wrap:balance }
.vid-hero__copy .lead{ margin-top:20px; max-width:54ch }

/* flash de precio en el hero */
.vid-price-flash{
  display:inline-flex; align-items:center; gap:18px; margin-top:26px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 20px; box-shadow:var(--shadow-md);
}
.vid-price-flash__nums{ display:flex; align-items:baseline; gap:12px }
.vid-price-flash__old{ font-family:var(--ff-head); font-weight:600; font-size:19px; color:var(--muted); text-decoration:line-through }
.vid-price-flash__now{ font-family:var(--ff-head); font-weight:700; font-size:34px; line-height:1; color:var(--ink); letter-spacing:-.02em }
.vid-price-flash__now small{ font-size:15px; font-weight:600; color:var(--ink-3) }
.vid-price-flash__tag{
  font-family:var(--ff-head); font-weight:700; font-size:13px; letter-spacing:.04em; color:#fff;
  background:var(--grad); padding:8px 14px; border-radius:var(--r-pill); box-shadow:var(--shadow-brand);
}

.vid-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px }
.vid-hero__chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,36px) }
.vid-chip{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px 9px 13px; box-shadow:var(--shadow-sm); font-size:13.5px; color:var(--ink-2);
}
.vid-chip b{ font-family:var(--ff-head); color:var(--ink); font-weight:700 }
.vid-chip svg{ width:17px; height:17px; color:var(--green-d); flex:none }

/* media: celular vertical con el mockup */
.vid-hero__media{ position:relative; display:flex; justify-content:center }
.vid-hero__phone{
  position:relative; width:min(100%,316px); aspect-ratio:420/747;
  border-radius:40px; padding:0; display:grid; place-items:center; isolation:isolate;
  background:transparent;
  border:0; box-shadow:none;
}
.vid-hero__phone img{ width:100%; height:auto; display:block; filter:drop-shadow(0 18px 30px rgba(28,40,64,.20)) }
/* botón play sobre el mockup */
.vid-hero__play{
  position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--blue-d); border:0;
  box-shadow:0 16px 34px -10px rgba(28,40,64,.45); cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.vid-hero__play::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.8); animation:vid-ripple 2.6s ease-out infinite }
.vid-hero__play svg{ width:30px; height:30px; margin-left:3px }
.vid-hero__play:hover{ transform:translate(-50%,-50%) scale(1.08); box-shadow:0 22px 44px -10px rgba(28,40,64,.55) }
@keyframes vid-ripple{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.5); opacity:0 } }

.vid-float{
  position:absolute; z-index:4; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:13px 17px; display:flex; align-items:center; gap:12px; border:1px solid var(--line);
}
.vid-float small{ display:block; font-size:11px; color:var(--ink-3) }
.vid-float b{ font-family:var(--ff-head); font-size:15px; color:var(--ink); line-height:1.1 }
.vid-float__ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff }
.vid-float__ic svg{ width:21px; height:21px }
.vid-float--1{ top:-2%; left:-10%; animation:vid-bob 5s ease-in-out infinite }
.vid-float--2{ bottom:30%; right:-12%; animation:vid-bob 5s ease-in-out infinite .8s }
@keyframes vid-bob{ 50%{ transform:translateY(-9px) } }
@media (prefers-reduced-motion:reduce){ .vid-float--1,.vid-float--2,.vid-hero__play::after{ animation:none } }

/* ============================================================
   2 · POR QUÉ VIDEO CON IA (banda de 3 razones)
   ============================================================ */
.vid-why__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px) }
.vid-why{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,34px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.vid-why:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent }
.vid-why__ic{
  width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--grad-soft); color:var(--blue-d); margin-bottom:18px;
}
.vid-why__ic svg{ width:28px; height:28px }
.vid-why h3{ font-size:20px; margin-bottom:9px; letter-spacing:-.01em }
.vid-why p{ font-size:14.5px; color:var(--ink-3); line-height:1.6 }

/* ============================================================
   3 · ELEMENTOS INCLUIDOS
   ============================================================ */
.vid-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px) }
.vid-feat{
  display:flex; gap:16px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2vw,26px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.vid-feat:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent }
.vid-feat__ic{
  width:50px; height:50px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--grad-soft); color:var(--blue-d);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.vid-feat:hover .vid-feat__ic{ transform:translateY(-2px) scale(1.06) rotate(-4deg) }
.vid-feat__ic svg{ width:26px; height:26px }
.vid-feat h3{ font-size:17px; margin-bottom:6px; letter-spacing:-.01em }
.vid-feat p{ font-size:14px; color:var(--ink-3); line-height:1.55 }

/* franja destacada: entrega lista para publicar */
.vid-bonus{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(20px,2.4vw,28px); padding:clamp(22px,2.6vw,32px) clamp(24px,3vw,40px);
  border-radius:var(--r-xl); position:relative; overflow:hidden;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(28,157,215,.20), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(140,198,63,.16), transparent 55%), var(--ink);
  box-shadow:var(--shadow-lg);
}
.vid-bonus__ic{
  width:64px; height:64px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.vid-bonus__ic svg{ width:34px; height:34px }
.vid-bonus__txt{ flex:1; min-width:0 }
.vid-bonus__txt h3{ color:#fff; font-size:clamp(20px,2.1vw,27px); letter-spacing:-.02em }
.vid-bonus__txt .grad-text{ background:linear-gradient(120deg,#a6d957,#5bc4e6); -webkit-background-clip:text; background-clip:text }
.vid-bonus__txt p{ color:rgba(255,255,255,.74); font-size:14.5px; line-height:1.55; margin-top:8px; max-width:64ch }
.vid-bonus__tag{
  flex:none; align-self:flex-start; font-family:var(--ff-head); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:#0e1320;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); padding:8px 16px; border-radius:var(--r-pill);
}

/* ============================================================
   4 · PROCESO (flujo horizontal de 4 pasos)
   ============================================================ */
.vid-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px); position:relative }
.vid-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center }
.vid-step:not(:last-child)::before{
  content:""; position:absolute; top:38px; left:calc(50% + 46px); right:calc(-50% + 46px);
  height:2px; background:repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); z-index:0;
}
.vid-step__node{
  position:relative; z-index:1; width:76px; height:76px; border-radius:22px;
  display:grid; place-items:center; background:#fff; border:1.5px solid var(--line);
  color:var(--blue-d); box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s, color .4s, background .4s;
}
.vid-step__node svg{ width:34px; height:34px }
.vid-step__num{
  position:absolute; top:-9px; right:-9px; z-index:2;
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:13px;
  box-shadow:0 6px 14px -5px rgba(43,45,58,.5); transition:background .4s;
}
.vid-step:hover .vid-step__node{
  transform:translateY(-6px); border-color:transparent; background:var(--grad); color:#fff;
  box-shadow:0 20px 38px -14px rgba(28,157,215,.5);
}
.vid-step:hover .vid-step__num{ background:var(--green-d) }
.vid-step h3{ font-size:18px; margin:22px 0 9px }
.vid-step p{ font-size:14px; color:var(--ink-3); line-height:1.58; max-width:24ch }

/* ============================================================
   5 · GALERÍA DE TRABAJOS (carrusel lateral)
   ============================================================ */
.vid-gallery{ position:relative }
.vid-gallery__bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap }
.vid-gallery__bar .eyebrow{ margin:0 }
.vid-gallery__bar h2{ font-size:clamp(26px,3.4vw,40px); margin-top:10px; letter-spacing:-.02em }
.vid-gallery__head{ max-width:560px }
.vid-gallery__nav{ display:flex; gap:10px; flex:none }
.vid-arrow{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--line-2); color:var(--ink);
  transition:background .25s, color .25s, border-color .25s, transform .2s, opacity .2s;
}
.vid-arrow svg{ width:22px; height:22px }
.vid-arrow:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px) }
.vid-arrow:disabled{ opacity:.35; cursor:not-allowed; transform:none; background:#fff; color:var(--ink); border-color:var(--line-2) }

.vid-track{
  display:flex; gap:clamp(16px,2vw,24px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:6px 2px 18px;
  scrollbar-width:none; cursor:grab;
}
.vid-track::-webkit-scrollbar{ display:none }
.vid-track.is-dragging{ cursor:grabbing; scroll-snap-type:none }
.vid-track.is-snapping{ scroll-snap-type:none }
.vid-track.is-dragging *{ pointer-events:none }
.vid-item{ flex:0 0 calc((100% - 2 * clamp(16px,2vw,24px)) / 3); scroll-snap-align:start }

.vid-card{
  position:relative; display:block; width:100%; aspect-ratio:9/16; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--ink);
  box-shadow:var(--shadow-sm); cursor:pointer; isolation:isolate;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.vid-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.vid-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.vid-card:hover img{ transform:scale(1.07) }
.vid-card::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,28,46,.05) 0%, rgba(14,28,46,.18) 48%, rgba(14,28,46,.82) 100%) }
.vid-card__top{ position:absolute; top:14px; left:14px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:8px }
.vid-card__tag{
  font-family:var(--ff-head); font-weight:600; font-size:12px; color:var(--ink);
  background:rgba(255,255,255,.92); padding:6px 12px; border-radius:var(--r-pill);
}
.vid-card__dur{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-head); font-weight:600; font-size:12px; color:#fff;
  background:rgba(14,28,46,.55); backdrop-filter:blur(4px); padding:6px 11px; border-radius:var(--r-pill);
}
.vid-card__dur svg{ width:13px; height:13px }
.vid-card__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--blue-d);
  box-shadow:0 12px 28px -8px rgba(14,28,46,.5); transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s;
}
.vid-card__play svg{ width:26px; height:26px; margin-left:3px }
.vid-card:hover .vid-card__play{ transform:translate(-50%,-50%) scale(1.1); background:#fff }
.vid-card__btm{ position:absolute; left:16px; right:16px; bottom:16px; color:#fff }
.vid-card__btm h3{ color:#fff; font-size:16.5px; letter-spacing:-.01em; line-height:1.25 }
.vid-card__btm p{ color:rgba(255,255,255,.78); font-size:12.5px; margin-top:4px }

/* video real cargado al hacer clic */
.vid-card__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; background:var(--ink) }
.vid-card.is-playing{ cursor:default }
.vid-card.is-playing:hover{ transform:none; box-shadow:var(--shadow-sm) }
.vid-card.is-playing .vid-card__top,
.vid-card.is-playing .vid-card__play,
.vid-card.is-playing .vid-card__btm,
.vid-card.is-playing::after{ opacity:0; pointer-events:none; transition:opacity .25s }

.vid-progress{
  position:relative; height:4px; border-radius:4px; background:var(--line);
  margin-top:clamp(18px,2.2vw,28px); overflow:hidden;
}
.vid-progress__bar{
  position:absolute; top:0; left:0; height:100%; border-radius:4px;
  background:var(--grad); width:30%; transition:left .25s ease, width .25s ease;
}

/* ============================================================
   6 · PRECIO / OFERTA
   ============================================================ */
.vid-pricing__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3vw,40px); align-items:stretch }
.vid-plan{
  position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(28,157,215,.20), transparent 55%),
    radial-gradient(80% 110% at 0% 100%, rgba(140,198,63,.16), transparent 55%), var(--ink);
  color:#fff; border-radius:var(--r-xl); padding:clamp(30px,3.4vw,46px); box-shadow:var(--shadow-lg);
}
.vid-plan__flag{
  display:inline-block; font-family:var(--ff-head); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:#0e1320;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); padding:7px 14px; border-radius:var(--r-pill); margin-bottom:20px;
}
.vid-plan__title{ color:#fff; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.02em }
.vid-plan__sub{ color:rgba(255,255,255,.72); font-size:15.5px; margin-top:8px }
.vid-plan__price{ display:flex; align-items:flex-end; gap:16px; margin:26px 0 6px; flex-wrap:wrap }
.vid-plan__old{ font-family:var(--ff-head); font-weight:600; font-size:24px; color:rgba(255,255,255,.45); text-decoration:line-through }
.vid-plan__now{ display:flex; align-items:baseline; gap:8px }
.vid-plan__now b{ font-family:var(--ff-head); font-weight:700; font-size:clamp(48px,6vw,68px); line-height:.9; letter-spacing:-.03em;
  background:linear-gradient(120deg,#a6d957,#5bc4e6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.vid-plan__now span{ font-family:var(--ff-head); font-weight:600; font-size:18px; color:rgba(255,255,255,.7) }
.vid-plan__once{ color:rgba(255,255,255,.55); font-size:13.5px; margin-bottom:26px }
.vid-plan__list{ display:flex; flex-direction:column; gap:13px; margin-bottom:30px }
.vid-plan__list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:rgba(255,255,255,.9) }
.vid-plan__list svg{ width:20px; height:20px; flex:none; margin-top:1px; color:#a6d957 }
.vid-plan__hl{ font-weight:600 }
.vid-plan__hl b{ color:#fff; font-weight:700 }
.vid-plan__cta{ width:100% }
.vid-plan__guarantee{ text-align:center; color:rgba(255,255,255,.55); font-size:13px; margin-top:16px }

.vid-extras{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,3.2vw,42px); display:flex; flex-direction:column }
.vid-extras__title{ font-size:clamp(20px,2vw,25px); letter-spacing:-.02em }
.vid-extras__intro{ color:var(--ink-3); font-size:14.5px; line-height:1.55; margin:12px 0 24px }
.vid-extras__list{ display:flex; flex-direction:column; gap:18px; margin-bottom:26px }
.vid-extras__list li{ display:flex; gap:15px; align-items:flex-start }
.vid-extras__ic{ width:46px; height:46px; flex:none; border-radius:var(--r-md); display:grid; place-items:center; background:var(--grad-soft); color:var(--blue-d) }
.vid-extras__ic svg{ width:23px; height:23px }
.vid-extras__list b{ display:block; font-family:var(--ff-head); font-size:16px; color:var(--ink); margin-bottom:2px }
.vid-extras__list span{ font-size:13.5px; color:var(--ink-3); line-height:1.5 }
.vid-extras__cta{
  margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--blue-d);
  padding:12px 22px; border-radius:var(--r-pill); border:1.5px solid var(--line-2);
  transition:border-color .25s, color .25s, background .25s, transform .25s;
}
.vid-extras__cta:hover{ border-color:transparent; color:#fff; background:var(--grad); transform:translateX(2px) }

/* campo opcional del formulario (no validado por app.js) */
.lf-optional{ margin-top:18px }
.lf-optional input,
.lf-optional textarea{
  width:100%; height:58px; padding:0 20px; border:1.5px solid transparent;
  border-radius:14px; background:#fff; color:var(--ink); font-family:var(--ff-body); font-size:15.5px;
  transition:box-shadow .2s, border-color .2s; -webkit-appearance:none; appearance:none;
}
.lf-optional textarea{
  height:auto; min-height:128px; padding:16px 20px; line-height:1.55; resize:vertical;
}
.lf-optional input::placeholder,
.lf-optional textarea::placeholder{ color:var(--muted) }
.lf-optional input:focus,
.lf-optional textarea:focus{ outline:none; border-color:#5bc4e6; box-shadow:0 0 0 4px rgba(91,196,230,.22) }

/* ============================================================
   7 · FAQ (acordeón nativo)
   ============================================================ */
.vid-faq{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:14px }
.vid-faq__item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:4px 22px; box-shadow:var(--shadow-sm); transition:box-shadow .25s, border-color .25s;
}
.vid-faq__item[open]{ box-shadow:var(--shadow-md); border-color:transparent }
.vid-faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; font-family:var(--ff-head); font-weight:600; font-size:16.5px; color:var(--ink);
}
.vid-faq__item summary::-webkit-details-marker{ display:none }
.vid-faq__item summary::after{
  content:"+"; flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:22px; font-weight:400; line-height:1;
  background:var(--grad-soft); color:var(--blue-d); transition:transform .3s, background .3s, color .3s;
}
.vid-faq__item[open] summary::after{ content:"−"; background:var(--grad); color:#fff; transform:rotate(180deg) }
.vid-faq__item p{ padding:0 0 20px; color:var(--ink-2); font-size:15px; line-height:1.65; max-width:62ch }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .vid-hero__grid{ grid-template-columns:1fr; gap:40px }
  .vid-hero__media{ order:1; width:min(100%,420px); margin-inline:auto }
  .vid-why__grid{ grid-template-columns:1fr }
  .vid-feats{ grid-template-columns:repeat(2,1fr) }
  .vid-pricing__grid{ grid-template-columns:1fr }
  .vid-flow{ grid-template-columns:repeat(2,1fr); gap:40px 24px }
  .vid-step:not(:last-child)::before{ display:none }
  .vid-item{ flex-basis:calc((100% - clamp(16px,2vw,24px)) / 2) }   /* 2 por vista */
}
@media (max-width:620px){
  .vid-bonus{ flex-direction:column; text-align:center }
  .vid-bonus__tag{ align-self:center }
  .vid-feats{ grid-template-columns:1fr; max-width:440px; margin-inline:auto }
  .vid-flow{ grid-template-columns:1fr; max-width:340px; margin-inline:auto; gap:34px }
  .vid-price-flash{ width:100% }
  .vid-float{ transform:scale(.82) }
  .vid-float--1{ left:-4% }
  .vid-float--2{ right:-4% }
  .vid-item{ flex-basis:84%; }                                     /* 1 por vista (peek) */
  .vid-gallery__nav{ order:3 }
}