/* ══════════════════════════════════════════════════════════════════════
   insiti — landing de la app de Shopify (visor 3D + AR)
   Sitio estático autocontenido. Sin build, sin dependencias.

   IDENTIDAD VISUAL: naranja insiti + negro + blanco, sobre fondo blanco.

   NOTA DE CONTRASTE (importante si retocas colores):
   el naranja de marca #D76B30 sobre blanco da 3,48:1 — suficiente para
   TITULARES grandes, insuficiente para texto pequeño (AA pide 4,5:1).
   Por eso hay dos naranjas de texto:
     --c-accent      #D76B30  → rellenos y titulares grandes
     --c-accent-ink  #A24717  → enlaces y texto pequeño (5,85:1) ✓
   Y los botones naranjas llevan texto CASI NEGRO, no blanco: blanco
   sobre #D76B30 se queda en 3,48:1 y no pasa AA a 15px.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Tinta (negro) ───────────────────────────────────────────────── */
  --c-ink:       #1B1B1B;   /* igual que el kit de marca y --hm-bg-soft del client */
  --c-ink-deep:  #000000;
  --c-ink-70:    rgba(27, 27, 27, 0.72);
  --c-ink-55:    rgba(27, 27, 27, 0.56);
  --c-ink-30:    rgba(27, 27, 27, 0.32);
  --c-ink-12:    rgba(27, 27, 27, 0.13);
  --c-ink-06:    rgba(27, 27, 27, 0.07);

  /* ── Naranja insiti ───────────────────────────────────────────────── */
  --c-accent:      #D76B30;   /* PANTONE 7413C — rellenos, titulares */
  --c-accent-d:    #B85A22;   /* hover de relleno */
  --c-accent-ink:  #A24717;   /* texto pequeño sobre blanco (AA ✓) */
  --c-accent-soft: #FBE4D3;   /* tintes suaves */
  --c-accent-glow: #F6B481;   /* naranja claro de acentos gráficos */
  --c-on-accent:   #14100D;   /* texto sobre naranja (AA ✓) */

  /* ── Superficies ─────────────────────────────────────────────────── */
  --c-white:     #FFFFFF;
  --c-cream:     #FBFDF0;   /* PANTONE 7499C — el hueso del kit y del client */
  --c-sand:      #EDE6DC;
  --c-sand-soft: #F7F0EA;
  --c-line:      rgba(27, 27, 27, 0.10);

  /* ── Tipografía ──────────────────────────────────────────────────── */
  --f-display: 'Exo 2', 'Inter', system-ui, sans-serif;   /* = --hm-display del client */
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Ritmo ───────────────────────────────────────────────────────── */
  --max:     1200px;
  --gutter:  clamp(1.15rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --r:       18px;
  --r-lg:    26px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ Tipografía base ═══════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  /* 700 y -0.025em son los valores del client (client/src/index.css:156).
     Antes esto era 400 porque Instrument Serif solo tiene ese peso; Exo 2 va
     de 100 a 900 y un sans geométrico a 400 en un titular grande se ve
     anémico. */
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--c-ink);
  margin: 0;
}
p { margin: 0; color: var(--c-ink-70); line-height: 1.6; }
a { color: inherit; text-decoration: none; }

.h1 { font-size: clamp(2.05rem, 3.4vw, 2.7rem); }
.h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.14; }
.h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.25; }

/* Palabra destacada en titular grande: naranja puro (≥24px → AA con 3:1) */
.em { color: var(--c-accent); }

.eyebrow {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-55);
}
.lead { font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.55; }

/* ══ Botones ══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s ease, color .22s ease, transform .22s ease,
              border-color .22s ease, box-shadow .22s ease;
}
.btn svg { transition: transform .22s ease; flex: none; }
.btn:hover svg { transform: translateX(3px); }

/* Texto casi negro sobre naranja — ver nota de contraste arriba. */
.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: 0 8px 22px -12px rgba(215, 107, 48, 0.95);
}
.btn--primary:hover { background: var(--c-accent-d); color: #fff; transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--c-ink); padding-inline: 0.4rem; }
.btn--ghost:hover { color: var(--c-accent-ink); }

.btn--outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink-12); }
.btn--outline:hover { border-color: var(--c-ink-30); background: var(--c-cream); }

.btn:focus-visible,
.tab:focus-visible,
.nav__trigger:focus-visible,
.topbar__tab:focus-visible,
.showcase__arrow:focus-visible,
.showcase__dot:focus-visible {
  outline: 2px solid var(--c-accent-ink);
  outline-offset: 3px;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--c-accent-ink);
}
.link svg { transition: transform .22s ease; }
.link:hover svg { transform: translateX(4px); }

/* ══ 1 · Barra de audiencia ═══════════════════════════════════════ */
.topbar { background: var(--c-sand-soft); border-bottom: 1px solid var(--c-line); }
.topbar__inner { display: flex; gap: 0.25rem; }
.topbar__tab {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.65rem 1.15rem;
  color: var(--c-ink-55);
  border-radius: 0 0 10px 10px;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: background .2s ease, color .2s ease;
}
.topbar__tab:hover { color: var(--c-ink); }
.topbar__tab.is-active { background: var(--c-accent); color: var(--c-on-accent); }

/* ══ 2 · Nav sticky ═══════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 8px 24px -20px rgba(0, 0, 0, .7);
}
.nav__inner { display: flex; align-items: center; gap: 1.75rem; height: 72px; }

.nav__brand { display: inline-flex; align-items: center; gap: 0.55rem; }
/* El isotipo del kit (brand/isotipo.png) va suelto, sin el chip oscuro que
   había antes: es un cubo macizo naranja con su propio peso visual, y
   encerrarlo en un cuadrado le quita aire. El chip existía para dar contraste
   a un icono de línea; con una forma sólida ya no hace falta.
   Se sirve a 64 px y se muestra a 30, así que en pantallas retina va a 2x. */
.nav__mark {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  flex: none;
}
.nav__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Wordmark oficial (insiti-horizontal-*.svg): Inter, «insiti» en peso 500 y
   «.io» en 400 gris. Antes esto era Instrument Serif, que no es la tipografía
   de la marca. El letter-spacing sale del kit: 2,7 sobre 54 px = 0,05em. */
.nav__brandtext {
  font-family: var(--f-sans);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--c-ink);
}
.nav__brandtld { font-weight: 400; color: #9B9B94; }
.nav__brandtext sup {
  font-family: var(--f-sans);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-ink-55);
  margin-left: 0.25rem;
}

.nav__links { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; }
.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s ease;
}
.nav__trigger:hover { background: var(--c-cream); }
.nav__trigger svg { transition: transform .2s ease; }
.nav__item.is-open .nav__trigger svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  padding: 0.5rem;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .5);
  display: none;
  gap: 0.15rem;
}
.nav__item.is-open .nav__menu { display: grid; }
.nav__menu a { display: block; padding: 0.6rem 0.75rem; border-radius: 12px; font-size: 0.9rem; transition: background .16s ease; }
.nav__menu a:hover { background: var(--c-cream); }
.nav__menu small { display: block; color: var(--c-ink-55); font-size: 0.78rem; margin-top: 0.1rem; }

.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.nav__burger { display: none; background: transparent; border: 0; color: var(--c-ink); padding: 0.4rem; cursor: pointer; }

.nav__mobile { display: none; border-top: 1px solid var(--c-line); background: #fff; padding: 0.75rem var(--gutter) 1.5rem; }
.nav__mobile.is-open { display: block; }
.nav__mobile a { display: block; padding: 0.8rem 0; font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--c-line); }
.nav__mobile .btn { width: 100%; justify-content: center; margin-top: 1rem; border-bottom: 0; }

/* ══ 3 · Hero ═════════════════════════════════════════════════════ */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.6rem; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-70);
}
.hero__badge svg { color: var(--c-accent-ink); }
.hero__title { margin-bottom: 1.25rem; }
.hero__sub { max-width: 32ch; margin-bottom: 2rem; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.hero__note {
  margin-top: 1.4rem;
  font-size: 0.82rem;
  color: var(--c-ink-55);
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.hero__note svg { flex: none; margin-top: 0.18em; color: var(--c-accent-ink); }

/* ── Showcase ── */
.showcase { position: relative; background: var(--c-sand); border-radius: var(--r-lg); padding: 1.15rem; }
.showcase::before {
  content: '';
  position: absolute;
  inset: -18px 6% auto 6%;
  height: 60px;
  background: var(--c-accent-glow);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index: 0;
}
/* Los cuatro paneles se apilan en LA MISMA celda de grid (fila 2), no se
   alternan con display. Así la fila mide siempre lo que el panel más alto y la
   tarjeta no cambia de tamaño al rotar el carrusel.
   Antes los inactivos eran `display: none`: solo el activo aportaba altura, y
   como el mosaico de 9 vídeos es mucho más alto que el de analítica, la tarjeta
   crecía y encogía arrastrando el layout de toda la página. */
.showcase__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  /* Alto FIJO para la fila de paneles, no `1fr` sobre contenido: así la tarjeta
     mide siempre lo mismo y se queda en el tamaño compacto en vez de estirarse
     hasta el panel más alto. El clamp la hace responsive sin medias queries.
     Que quepa todo es responsabilidad de cada panel: sus medias están
     dimensionadas contra el contenedor, no por su tamaño intrínseco.

     Lo que marca el mínimo no son los vídeos, que se adaptan, sino el TEXTO:
     no se puede encoger sin dejar de leerse. En móvil los paneles apilan sus
     columnas y necesitan MÁS alto que en escritorio, justo al revés de lo que
     da un clamp por vw — por eso el caso móvil va en su media query de abajo
     y no aquí. */
  grid-template-rows: auto clamp(300px, 24vw, 360px);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .55);
}
.showcase__label { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; text-align: center; margin-bottom: 0.9rem; }

/* `visibility: hidden` y no `display: none`: los inactivos tienen que seguir
   ocupando su sitio en la fila para que la altura la marque el más alto.
   visibility los saca además del árbol de accesibilidad, así que un lector de
   pantalla no lee los cuatro paneles a la vez. */
.showcase__panel {
  grid-area: 2 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* min-height:0 es obligatorio: sin él un hijo con contenido intrínseco
     (un vídeo vertical) impone su alto y revienta la fila fija de arriba. */
  min-height: 0;
  overflow: hidden;
}
.showcase__panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: fade .45s ease both;
}
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Panel A — mosaico 3×3 */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Filas en 1fr, NO celdas con aspect-ratio: así el mosaico llena el alto
     que le da la tarjeta en vez de imponer el suyo. Antes las celdas eran
     cuadradas y el mosaico entero medía de alto lo que medía de ancho. */
  grid-template-rows: repeat(3, minmax(0, 1fr));
  height: 100%;
  gap: 0.5rem;
}
.mosaic__cell { position: relative; min-height: 0; border-radius: 12px; overflow: hidden; background: var(--c-cream); }
.mosaic__cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic__tag {
  position: absolute;
  left: 5px; right: 5px; bottom: 5px;
  background: rgba(255,255,255,.93);
  border-radius: 7px;
  padding: 3px 5px;
  font-size: 0.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}
.mosaic__tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mosaic__tag b { color: var(--c-accent-ink); }

/* Panel B — ficha de producto */
.pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; height: 100%; }
.pdp__media { position: relative; min-height: 0; border-radius: 14px; overflow: hidden; background: var(--c-cream); }
.pdp__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__chip {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,255,255,.95);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pdp__info { display: flex; flex-direction: column; gap: 0.55rem; }
.pdp__title { font-family: var(--f-display); font-size: 0.98rem; font-weight: 600; }
.pdp__price { font-size: 1.15rem; font-weight: 700; }
.pdp__swatches { display: flex; gap: 0.4rem; }
.pdp__sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-ink-12); }
.pdp__sw.is-on { box-shadow: 0 0 0 2px var(--c-accent); }
.pdp__ar {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: var(--c-ink);
  color: #fff;
  border-radius: 10px;
  padding: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.pdp__cart {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-ink-12);
  border-radius: 10px;
  padding: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-ink-55);
}

/* Panel C — AR en móvil */
.arview { display: flex; align-items: center; justify-content: center; height: 100%; gap: 1.25rem; }
.arview__phone {
  align-self: stretch;
  height: 100%;
  width: auto;
  aspect-ratio: 9 / 17.5;
  max-width: 45%;
  border-radius: 22px;
  border: 6px solid var(--c-ink);
  overflow: hidden;
  background: var(--c-cream);
  flex: none;
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .85);
}
.arview__phone video { width: 100%; height: 100%; object-fit: cover; }
.arview__steps { display: grid; gap: 0.7rem; }
.arview__step { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.78rem; color: var(--c-ink-70); }
.arview__num {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* Panel D — analítica */
.metrics { display: grid; align-content: center; gap: 0.7rem; height: 100%; }
.metrics__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--c-cream);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}
.metrics__k { font-size: 0.78rem; font-weight: 600; color: var(--c-ink-70); }
.metrics__v { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; }
.metrics__v.up { color: var(--c-accent-ink); }
.metrics__bar { height: 6px; border-radius: 999px; background: var(--c-ink-06); overflow: hidden; margin-top: 0.5rem; }
.metrics__bar i { display: block; height: 100%; background: var(--c-accent); border-radius: 999px; }
.metrics__cap { font-size: 0.75rem; text-align: center; margin-top: 0.3rem; }

/* Controles */
.showcase__controls { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 0.35rem 0.15rem; }
.showcase__arrow {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--c-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.showcase__arrow:hover { transform: scale(1.08); box-shadow: 0 8px 18px -10px rgba(0,0,0,.6); }
.showcase__dots { display: flex; gap: 0.4rem; }
.showcase__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: var(--c-ink-30);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, width .2s ease;
}
.showcase__dot.is-active { background: var(--c-accent); width: 20px; border-radius: 999px; }

/* ══ 4 · Métricas ═════════════════════════════════════════════════ */
.stats { border-block: 1px solid var(--c-line); background: var(--c-cream); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--c-line); }
.stat {
  background: var(--c-cream);
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(0.9rem, 2vw, 1.6rem);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem;
}
.stat__icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--c-accent-soft);
  color: var(--c-accent-ink);
  display: grid; place-items: center;
  margin-bottom: 0.2rem;
}
.stat__v { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 600; line-height: 1; }
.stat__k { font-size: 0.82rem; color: var(--c-ink-55); max-width: 18ch; }

/* ══ 5 · Marcas ═══════════════════════════════════════════════════ */
.brands { padding: var(--section) 0; }
.brands__head { max-width: 46ch; margin-bottom: 2.5rem; }
.brands__head .eyebrow { display: block; margin-bottom: 1rem; }
.brands__head p { margin-top: 1.1rem; }

.tabs { display: flex; gap: clamp(0.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-ink-30);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.85rem 0.25rem;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.tab:hover { color: var(--c-ink-70); }
.tab.is-active { color: var(--c-ink); border-bottom-color: var(--c-accent); }

.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; padding-top: 2.75rem; animation: fade .4s ease both; }
.logos__cell { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 1.25rem 0.75rem; }
.logos__mark { height: 46px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: filter .25s ease, opacity .25s ease; }
.logos__cell:hover .logos__mark { filter: grayscale(0); opacity: 1; }
.logos__case {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 600;
  color: var(--c-ink-70);
  background: var(--c-sand-soft);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  transition: background .2s ease, color .2s ease;
}
.logos__case:hover { background: var(--c-accent); color: var(--c-on-accent); }

/* ══ 6 · Plataforma ═══════════════════════════════════════════════ */
.platform { padding: var(--section) 0; background: var(--c-cream); }
.platform__head { max-width: 52ch; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.platform__head .eyebrow { display: block; margin-bottom: 1rem; }
.platform__head p { margin-top: 1.2rem; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  border-top: 1px solid var(--c-line);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature--flip .feature__body { order: 2; }

.feature__body { display: grid; gap: 1.1rem; justify-items: start; }
.feature__body p { max-width: 44ch; }
.feature__stat { display: flex; align-items: baseline; gap: 0.55rem; margin-top: 0.15rem; }
.feature__stat b { font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; line-height: 1; color: var(--c-accent-ink); }
.feature__stat span { font-size: 0.85rem; color: var(--c-ink-55); max-width: 16ch; line-height: 1.3; }

.feature__visual { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.feature__visual video { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature__pills { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.feature__pill { background: rgba(255,255,255,.95); border-radius: 999px; padding: 0.32rem 0.7rem; font-size: 0.68rem; font-weight: 600; }

.partners { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.partners span {
  font-size: 0.72rem; font-weight: 600;
  color: var(--c-ink-70);
  border: 1px solid var(--c-ink-12);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: #fff;
}

/* ══ 7 · Por qué insiti ════════════════════════════════════════════ */
.why { padding: var(--section) 0; }
.why__head { max-width: 48ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.why__head .eyebrow { display: block; margin-bottom: 1rem; }
.why__head p { margin-top: 1.1rem; }

.why__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.15rem; }
.reason {
  grid-column: span 2;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.reason:hover { transform: translateY(-3px); border-color: var(--c-ink-12); box-shadow: 0 24px 44px -34px rgba(0, 0, 0, .9); }
.reason--wide { grid-column: span 3; }
.reason__icon { width: 42px; height: 42px; border-radius: 13px; background: var(--c-accent); color: var(--c-on-accent); display: grid; place-items: center; }
.reason p { font-size: 0.94rem; }
.reason .link { margin-top: auto; padding-top: 0.4rem; }

.chat { display: grid; gap: 0.5rem; margin-top: 0.3rem; }
.chat__msg { border-radius: 14px; padding: 0.6rem 0.8rem; font-size: 0.8rem; line-height: 1.4; max-width: 88%; }
.chat__msg--in { background: #fff; border: 1px solid var(--c-line); color: var(--c-ink-70); }
.chat__msg--out { background: var(--c-ink); color: #fff; margin-left: auto; }
.chat__time { font-size: 0.62rem; color: var(--c-ink-30); font-weight: 600; letter-spacing: .06em; }

.seals { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.seal {
  border: 1px solid var(--c-ink-12);
  border-radius: 12px;
  padding: 0.5rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-ink-70);
  background: #fff;
  line-height: 1.3;
}

.price { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--f-display); }
.price b { font-size: clamp(2.2rem, 4.2vw, 3rem); font-weight: 600; line-height: 1; color: var(--c-accent-ink); }
.price i { font-style: normal; font-size: 0.9rem; color: var(--c-ink-55); font-family: var(--f-sans); }

/* ══ 8 · Voces ════════════════════════════════════════════════════ */
.voices { padding: var(--section) 0; background: var(--c-ink); overflow: hidden; }
.voices .eyebrow { color: rgba(255,255,255,.6); display: block; margin-bottom: 1rem; }
.voices .h2 { color: #fff; }
.voices__head { max-width: 44ch; margin-bottom: 3rem; }
.voices__head p { color: rgba(255,255,255,.75); margin-top: 1.1rem; }

.marquee { display: grid; gap: 1.15rem; }
.marquee__track { display: flex; gap: 1.15rem; width: max-content; }
/* La animación cuelga de .is-live, que pone script.js DESPUÉS de duplicar las
   citas. El keyframe traslada -50 %, así que sin duplicar se vería el hueco:
   sin JS quedan las seis citas quietas y legibles, que es mejor fallback.
   El atajo `animation` resetea direction y play-state, así que las dos reglas
   siguientes necesitan igual o más peso que esta y venir después. */
.marquee.is-live .marquee__track { animation: scroll 46s linear infinite; }
.marquee.is-live .marquee__track--rev { animation-direction: reverse; animation-duration: 58s; }
.marquee.is-live:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.quote {
  width: min(360px, 78vw);
  flex: none;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  padding: 1.4rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.quote__stars { display: flex; gap: 2px; color: var(--c-accent-glow); }
.quote p { color: rgba(255,255,255,.92); font-size: 0.93rem; line-height: 1.55; }
.quote__who { margin-top: auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,.58); }

/* ══ 9 · CTA final ════════════════════════════════════════════════ */
.cta { padding: var(--section) 0; text-align: center; }
.cta .eyebrow { display: block; margin-bottom: 1rem; }
.cta p { margin: 1.2rem auto 2rem; max-width: 48ch; }
.cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
.cta__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem); margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--c-line); }
.cta__stat { display: flex; align-items: center; gap: 0.65rem; }
.cta__stat b { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--c-accent-ink); }
.cta__stat span { font-size: 0.8rem; color: var(--c-ink-55); max-width: 14ch; line-height: 1.3; text-align: left; }

/* ══ 10 · Footer ══════════════════════════════════════════════════ */
.footer { background: var(--c-cream); border-top: 1px solid var(--c-line); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
/* minmax(0,…) obligatorio: con `1.4fr repeat(4,1fr)` el mínimo automático
   de la columna de marca se come el grid y desborda el contenedor. */
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.footer__about p { font-size: 0.88rem; margin-top: 1rem; max-width: 32ch; }
.footer__col h4 { font-family: var(--f-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-55); margin: 0 0 1rem; }
.footer__col a { display: block; font-size: 0.88rem; color: var(--c-ink-70); padding: 0.32rem 0; transition: color .18s ease; }
.footer__col a:hover { color: var(--c-accent-ink); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); font-size: 0.8rem; color: var(--c-ink-55); }

/* ══ Responsive ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__about { grid-column: 1 / -1; }
  .reason, .reason--wide { grid-column: span 3; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-grid; place-items: center; }
  .nav__actions .btn--ghost { display: none; }
  .nav__inner { gap: 0.65rem; }
  .nav__brand { flex: 0 1 auto; min-width: 0; }
  .nav__actions .btn--primary { padding: 0.7rem 1.05rem; font-size: 0.86rem; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__sub { max-width: 46ch; }
  /* El showcase NO se adelanta al titular: la tarjeta empujaría la
     promesa y el CTA fuera del primer pantallazo en móvil. */

  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__body { order: 0; }
  .feature__visual { order: -1; }
}

@media (max-width: 640px) {
  .reason, .reason--wide { grid-column: 1 / -1; }
  .why__grid { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { min-height: 150px; }
  .arview { flex-direction: column; }
  /* Apilado, el móvil no puede ocupar todo el alto o expulsa los tres pasos.
     Se dimensiona por ancho y el aspect-ratio le da el alto. */
  .arview__phone { align-self: center; height: auto; width: 118px; max-width: none; }
  /* Y la fila necesita más alto que en escritorio: aquí las dos columnas de
     cada panel pasan a estar una debajo de la otra. */
  .showcase__card { grid-template-rows: auto 430px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar__tab { font-size: 0.72rem; padding: 0.55rem 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}