/* Portada de venta. Usa los tokens y las piezas de app.css (zinc, un solo acento, Geist, líneas en vez de tarjetas);
   acá va solo lo propio de la portada. Pensada primero para 375 px. */
html { scroll-behavior: smooth; }
.lp { --aire: clamp(56px, 5vw + 36px, 112px); --pad: var(--gut); --oscuro: #27272a; }
.lp [id] { scroll-margin-top: 16px; }
.lp video { opacity: 0; transition: opacity 0.35s var(--ease); }
.lp video.is-vivo { opacity: 1; }
.lp figure { margin: 0; }

.saltar { position: absolute; left: 12px; top: -64px; z-index: 30; padding: 10px 14px; border-radius: var(--r-s); background: var(--ink); color: var(--paper); text-decoration: none; }
.saltar:focus { top: 12px; }

/* cabecera */
.lp-nav { display: flex; align-items: center; gap: 22px; }
.lp-nav__extra, .lp-nav__cta { display: none; }

/* títulos de sección */
.h2-l { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.5rem); line-height: 1.06; letter-spacing: -0.038em; }
.encabezado { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 52px); }
.banda > .wrap { position: relative; padding-block: var(--aire); }
.banda > .wrap::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }

/* ---------- a) héroe ---------- */
.hero { display: grid; gap: 40px; padding-block: 40px 64px; }
.hero__txt { display: grid; gap: 18px; justify-items: start; align-content: center; }
.hero__h1 { font-size: clamp(2.4rem, 1.55rem + 3.7vw, 3.7rem); line-height: 1; letter-spacing: -0.047em; }
.hero__lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); max-width: 38ch; }
.hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.hero__cta .btn { padding-inline: 10px; font-size: 0.9375rem; white-space: nowrap; }
.hero__precio { color: var(--ink-2); }
.hero__precio:empty { display: none; }
.prueba { display: flex; align-items: center; gap: 10px; }
.prueba::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--line-2); }
.prueba:empty { display: none; }

.duo { display: grid; grid-template-columns: 36fr 64fr; align-items: end; width: 100%; max-width: 440px; justify-self: center; }
.duo figure { min-width: 0; }
.duo figcaption { margin-top: 10px; }
.duo__crudo { position: relative; z-index: 1; margin-right: -10%; margin-bottom: 18%; }
.duo__crudo .fono { box-shadow: 0 0 0 4px var(--bg); }
.duo__editado figcaption { text-align: right; }
.fono { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--oscuro); }
.fono > img, .fono > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo__editado .fono { box-shadow: 0 28px 48px -30px rgba(24, 24, 27, 0.55); }

/* botón de pausa sobre un video */
.pp { position: absolute; right: 6px; bottom: 6px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--paper); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(24, 24, 27, 0.6); transition: background-color 0.15s var(--ease); }
.pp:hover::before { background: rgba(24, 24, 27, 0.8); }
.pp svg { position: relative; fill: currentColor; }
.pp:focus-visible { outline-color: var(--paper); outline-offset: -4px; border-radius: 50%; }
.pp .pp__play, .is-pausado .pp .pp__pausa { display: none; }
.is-pausado .pp .pp__play { display: inline; }
.btn--son .pp__pausa, .btn--son.is-on .pp__play { display: none; }
.btn--son.is-on .pp__pausa { display: inline; }

@media (prefers-reduced-motion: no-preference) {
  .hero__txt > *, .duo figure { animation: entra 0.7s var(--ease) both; }
  .hero__txt > :nth-child(2) { animation-delay: 60ms; }
  .hero__txt > :nth-child(3) { animation-delay: 120ms; }
  .hero__txt > :nth-child(4) { animation-delay: 180ms; }
  .hero__txt > :nth-child(5) { animation-delay: 220ms; }
  .duo__editado { animation-delay: 140ms !important; }
  .duo__crudo { animation-delay: 260ms !important; }
}
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

/* ---------- franja de prueba: números con línea, sin tarjetas ---------- */
.franja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; margin: 0; }
.franja--2 { border-bottom: 1px solid var(--line); }
.franja-sec { padding-bottom: 28px; }
.franja > div { display: grid; gap: 4px; align-content: start; padding-block: 16px 18px; border-top: 1px solid var(--line); }
.franja dt { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.045em; color: var(--ink); }
.franja dd { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--muted); max-width: 24ch; }
.franja__pie { margin-top: 16px; }

/* ---------- b) antes y después ---------- */
.cmp-sec { display: grid; gap: 28px; }
.cmp-sec__txt { display: grid; gap: 14px; }
.cmp-sec__txt .tabs { margin-top: 8px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.cmp-sec__media { display: grid; justify-items: center; }
.cmp {
  --p: 50; position: relative; width: min(100%, calc(76vh * 9 / 16)); width: min(100%, calc(76svh * 9 / 16)); min-width: min(100%, 250px); aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden; background: var(--oscuro);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 32px 56px -34px rgba(24, 24, 27, 0.6);
}
.cmp__capa { position: absolute; inset: 0; }
.cmp__capa > img, .cmp__capa > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cmp__capa--crudo { clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0); }
.cmp__linea { position: absolute; inset: 0; transform: translateX(calc(var(--p) * 1%)); pointer-events: none; }
.cmp__linea::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--paper); box-shadow: 0 0 0 1px rgba(24, 24, 27, 0.22); }
.cmp__perilla { position: absolute; left: -22px; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 2px 12px rgba(24, 24, 27, 0.4); }
.cmp.is-anim .cmp__capa--crudo { transition: clip-path 0.5s var(--ease); }
.cmp.is-anim .cmp__linea { transition: transform 0.5s var(--ease); }
.cmp__chip { position: absolute; top: 12px; pointer-events: none; transition: opacity 0.2s var(--ease); }
.cmp__chip--crudo { left: 12px; }
.cmp__chip--editado { right: 12px; }
.cmp.sin-crudo .cmp__chip--crudo, .cmp.sin-editado .cmp__chip--editado { opacity: 0; }
/* el control deslizante real: invisible, pero recibe el teclado */
.cmp__rango { position: absolute; left: 0; bottom: 0; width: 100%; height: 44px; margin: 0; opacity: 0; pointer-events: none; }
.cmp__rango:focus-visible ~ .cmp__linea .cmp__perilla { outline: 2px solid var(--accent); outline-offset: 3px; }

.cmp-sec__ctl { display: grid; gap: 16px; align-content: start; }
.seg--3 { flex-wrap: nowrap; }
.seg--3 label { flex: 1 1 0; min-width: 0; }
.seg--3 span { padding-inline: 8px; }
.cmp-sec__botones { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.btn--son.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--son .ondas { opacity: 0.35; transition: opacity 0.15s; }
.btn--son.is-on .ondas { opacity: 1; }
.cmp-sec__cambios > li { padding-block: 11px; }

/* ---------- c) qué le hacemos ---------- */
/* tres pasos en orden: los dos primeros con su prueba al lado, el tercero con sus recortes abajo */
.etapas { display: grid; gap: clamp(52px, 7vw, 96px); }
.etapa { display: grid; gap: 24px; min-width: 0; }
.etapa__txt { display: grid; gap: 10px; align-content: start; }
.etapa__txt p { color: var(--ink-2); max-width: 46ch; }
.etapa__media { display: grid; gap: 14px; min-width: 0; }
.etapa__caso { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.etapa__caso b { color: var(--ink); }
.hace { display: grid; gap: 40px; }
.hace > li { display: grid; gap: 14px; align-content: start; min-width: 0; }
.hace__txt { display: grid; gap: 4px; }
.hace__txt p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; max-width: 44ch; }
.clip { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-m); overflow: hidden; background: var(--oscuro); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.clip > img, .clip > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip--21 { aspect-ratio: 2 / 1; }
.clip--54 { aspect-ratio: 5 / 4; }
.clip--45 { aspect-ratio: 4 / 5; }
.clip::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; opacity: 0; transition: opacity 0.2s var(--ease);
  background: rgba(24, 24, 27, 0.66) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5v14l11-7z' fill='%23fafafa'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.clip.is-pausado::after { opacity: 1; }
.clip__rubro, .cmp__chip { font: 500 0.75rem/1 var(--mono); color: var(--paper); background: rgba(24, 24, 27, 0.66); border-radius: 999px; padding: 6px 10px; }
.clip__rubro { position: absolute; left: 10px; bottom: 10px; }
.panel { display: grid; gap: 18px; align-content: center; justify-items: start; min-height: 100%; padding: 22px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.panel > div { width: 100%; }

.cortes { display: grid; gap: 16px; }
.cortes__fila { display: grid; gap: 7px; }
.cortes__pista { position: relative; height: 30px; border-radius: 4px; overflow: hidden; background: var(--line); }
.cortes__pista > i { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.cortes__pista--editado { background: var(--accent); }

.onda { --t: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; }
.onda > .label:nth-of-type(1) { grid-area: 1 / 1; }
.onda > .label:nth-of-type(2) { grid-area: 2 / 1; }
.onda__barras { grid-area: 1 / 2; display: flex; align-items: center; gap: 2px; height: 46px; }
.onda__barras--fx { grid-area: 2 / 2; }
.onda__barras > i { flex: 1 1 0; height: 100%; min-width: 1px; border-radius: 1px; background: var(--ink); transform: scaleY(var(--h)); }
.onda__barras--fx > i { background: var(--accent); }
.onda__cursor { grid-area: 1 / 2 / 3 / 3; align-self: stretch; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.onda__cursor > i { display: block; width: 100%; height: 100%; border-left: 2px solid var(--accent); transform: translateX(calc(var(--t) * 100%)); }
.onda.is-on .onda__cursor { opacity: 1; }

/* ---------- d) cómo funciona ---------- */
.partida { display: grid; gap: 28px; }
.partida__cab { display: grid; gap: 14px; align-content: start; }
.pasos > li { display: grid; gap: 10px; padding-block: 22px; border-top: 1px solid var(--line); }
.pasos > li:last-child { border-bottom: 1px solid var(--line); }
.pasos p { margin-top: 6px; color: var(--ink-2); }
.reloj { margin-top: 24px; max-width: none; }

/* ---------- e) para quién ---------- */
.quien { display: grid; gap: 40px; }
.quien h3 { margin-bottom: 12px; font-weight: 500; }
.quien__si { color: var(--accent); }
.quien__lista > li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.quien__lista > li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; background: var(--muted); -webkit-mask: var(--marca) center / contain no-repeat; mask: var(--marca) center / contain no-repeat; }
.quien__lista--si { --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.quien__lista--si > li::before { background: var(--accent); }
.quien__lista--no { --marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.quien__crudo .row { flex-wrap: wrap; }

/* ---------- f) planes y calculador ---------- */
.planes-grid { display: grid; gap: 40px; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--line); }
.planes > .plan:last-child { border-bottom: 1px solid var(--line); }
.plan h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
/* La tira de cada plan: un cuadro vertical por video (la misma de «Uso del mes» en la cuenta, ver cuenta.css). */
.plan__tira { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.plan__tira i { display: block; width: 11px; aspect-ratio: 9 / 16; border-radius: 2.5px; background: var(--ink); }
.plan__precio { text-align: right; }
.plan__monto { font-size: 1.375rem; line-height: 1.2; font-weight: 500; color: var(--ink); }
.plan__unidad { margin-top: 4px; color: var(--ink); }
.plan .btn { grid-column: 1 / -1; margin-top: 12px; }
.plan__nota { grid-column: 1 / -1; margin-top: 4px; }
.plan--rec { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); background: var(--accent-soft); border-top-color: var(--accent); }
.plan--rec + .plan { border-top-color: transparent; }
/* la prueba va separada de los planes mensuales */
.plan--aparte { margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.plan--aparte .label { margin-bottom: 6px; }
.planes__pie { margin-top: 20px; }

.calc { display: grid; gap: 22px; align-content: start; padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.calc__fila { display: grid; grid-template-columns: minmax(0, 1fr) 5.75rem; align-items: center; gap: 14px; }
.calc__fila output { text-align: right; font-size: 0.9375rem; color: var(--ink-2); }
.calc input[type="range"] { width: 100%; height: 44px; margin: 0; padding: 0; background: none; accent-color: var(--ink); cursor: pointer; }
.calc__res { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid var(--line); }
.calc__num { font-size: 1.0625rem; color: var(--ink-2); }
.calc__num .mono { font-size: clamp(2.6rem, 2rem + 2.4vw, 3.4rem); line-height: 1; font-weight: 500; letter-spacing: -0.05em; color: var(--ink); margin-right: 4px; }

/* ---------- g) preguntas ---------- */
.lp .faq { display: grid; gap: 20px; }
.lp .faq details > .flow-l { padding-bottom: 20px; }

/* ---------- conocé al creador ---------- */
.creador { display: grid; gap: 28px; }
.creador__txt { display: grid; gap: 16px; }
.creador__txt p { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem); line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.creador__txt p:first-child { color: var(--ink); }
.creador__foto { width: min(100%, 300px); aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; background: var(--line); }
.creador__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- h) cierre ---------- */
.cierre { background: var(--ink); color: var(--paper); padding-block: clamp(72px, 9vw + 24px, 144px); }
.cierre__in { display: grid; gap: 32px; }
.cierre__h { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 15ch; }
.cierre__txt { display: grid; gap: 18px; }
.cierre__sub { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: #d4d4d8; }
.cierre__cta { display: grid; gap: 14px; justify-items: start; }
.cierre__cta .small { color: #a1a1aa; max-width: 34ch; }
.btn--claro { background: var(--paper); color: var(--ink); padding-inline: 28px; }
/* Botón de arranque al final de una sección, para no tener que volver arriba ni llegar al cierre */
.cta-medio { margin: 28px 0 0; }
.cta-medio .btn { padding-inline: 28px; }
.cierre :focus-visible { outline-color: var(--paper); }
.lp .foot { border-top: 0; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

/* ---------- i) barra fija del celular ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(var(--gut), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left));
  background: rgba(250, 250, 250, 0.94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateY(110%); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s 0.4s;
}
.barra.is-on { transform: none; visibility: visible; transition: transform 0.4s var(--ease), visibility 0s; }
.barra p { color: var(--ink-2); }
.barra .btn { flex: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp video, .cmp.is-anim .cmp__capa--crudo, .cmp.is-anim .cmp__linea, .barra, .barra.is-on { transition: none; }
}

/* ---------- desde 480 ---------- */
@media (min-width: 480px) {
  .hero__cta { display: flex; flex-wrap: wrap; width: auto; }
  .hero__cta .btn { padding-inline: 24px; font-size: 1rem; }
  .cmp-sec__botones { grid-template-columns: auto auto; justify-content: start; }
}

/* ---------- desde 640 ---------- */
@media (min-width: 640px) {
  .pasos > li { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 24px; }
  .pasos .label { padding-top: 3px; }
  .plan { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 28px; align-items: center; }
  .plan .btn { grid-column: auto; margin-top: 0; min-width: 11rem; }
  .plan__nota { margin-top: 2px; }
  .plan--rec { margin-inline: -16px; padding-inline: 16px; border-radius: 0; }
  .franja { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .franja--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quien { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .quien__crudo { grid-column: 1 / -1; }
  .quien__crudo .rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
  .quien__crudo .rows > li { display: grid; gap: 2px; border-bottom: 0; }
  .quien__crudo .row > :last-child { text-align: left; }
  .hace { grid-template-columns: 1fr 1fr; gap: 48px 24px; }
  .hace__sonido { grid-template-rows: minmax(0, 1fr) auto; }
}

/* ---------- desde 768: la barra fija se va y aparece la navegación completa ---------- */
@media (min-width: 768px) {
  .lp { --pad: 40px; }
  .lp [id] { scroll-margin-top: 84px; }
  .lp-cab { position: sticky; top: 0; z-index: 20; background: rgba(244, 244, 245, 0.93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(212, 212, 216, 0.6); }
  .lp-cab .top { padding-block: 12px; }
  .lp-nav__extra, .lp-nav__cta { display: inline-flex; }
  .barra { display: none; }
}

/* ---------- desde 920: columnas ---------- */
@media (min-width: 920px) {
  .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-block: 44px 80px; }
  .hero__txt { gap: 22px; }
  .hero__cta { margin-top: 8px; }
  .duo { justify-self: end; max-width: 468px; }

  .cmp-sec { grid-template-columns: minmax(0, 372px) minmax(0, 1fr); grid-template-areas: "media txt" "media ctl"; grid-template-rows: auto 1fr; gap: 36px 88px; align-items: start; }
  .cmp-sec__media { grid-area: media; }
  .cmp-sec__txt { grid-area: txt; padding-top: 12px; }
  .cmp-sec__ctl { grid-area: ctl; max-width: 460px; }
  .cmp-sec__txt .tabs { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
  .cmp { width: 100%; }

  /* zigzag: 6 y 6, 5 y 7, 7 y 5 */
  .hace { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 64px 32px; }
  .etapa { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .etapa--ancha { grid-template-columns: 1fr; gap: 36px; }
  .hace__subs { grid-column: 1 / span 7; grid-row: 1; }
  .hace__sonido { grid-column: 8 / span 5; grid-row: 1; grid-template-rows: minmax(0, 1fr) auto; }
  .hace__fotos { grid-column: 1 / span 5; grid-row: 2; }
  .hace__textos { grid-column: 6 / span 7; grid-row: 2; }
  .panel { padding: 28px 26px; }

  .partida { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .partida__cab { position: sticky; top: 104px; }
  .quien { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px 72px; }
  .planes-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
  .calc { position: sticky; top: 104px; padding: 28px; }
  .lp .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .cierre__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 72px; }
}

/* Cabecera de la portada en el celular: solo la marca. */
.lp-cab .top { padding-block: 14px 4px; }
/* La línea de "no cambiamos lo que decís", pegada al comparador. */
.cmp-sec__nota { max-width: 52ch; color: var(--ink-2); }
.cmp-sec__nota b { color: var(--ink); font-weight: 500; }
/* Videos completos: tres a lo ancho en escritorio; en el celular, uno al lado del otro con scroll. */
.completos { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 280px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; }
.completos > li { display: grid; gap: 10px; scroll-snap-align: start; }
.completos video { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-m); background: var(--oscuro); object-fit: cover; }
/* Los rubros del antes y después: en el celular se desvanecen al borde, para que se note que hay más. */
@media (max-width: 767px) {
  .cmp-sec__txt .tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); padding-right: 48px; }
}