/* ==========================================================================
   SAVIA — portada (index.html).

   Movimiento: las entradas usan las curvas de referencia (in-mask, in-soft,
   in-scale, in-btn, in-pop) y las secciones narrativas (esfera, insignias,
   recorrido de la app) avanzan con el scroll desde js/animaciones.js, que
   solo escribe clases y variables CSS.

   Todo queda visible y en orden sin JavaScript (.js no está) y con
   prefers-reduced-motion: las escenas fijadas se convierten en contenido
   normal, una cosa debajo de la otra.
   ========================================================================== */

:root {
  --curva: cubic-bezier(.16, 1, .3, 1);
  --oscuro: #111827;
  --oscuro-2: #1F2937;
}

.ic {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contenedor--editorial { max-width: 820px; }

.nota-demo {
  margin-top: 12px;
  font-size: .78rem;
  color: var(--apagado);
}
.nota-demo--centro { text-align: center; }

/* ---------- Entradas (referencia de movimiento) ---------- */

@keyframes in-mask  { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes in-soft  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes in-scale { from { opacity: 0; transform: scale(.84); } to { opacity: 1; transform: none; } }
@keyframes in-btn   { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes in-pop   { 0% { opacity: 0; transform: scale(.9); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes in-side  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

.mascara { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mascara > span { display: inline-block; }

.js .a-mask  { animation: in-mask 1.05s var(--curva) var(--d, 0s) both; }
.js .a-soft  { animation: in-soft 1.15s var(--curva) var(--d, 0s) both; }
.js .a-scale { animation: in-scale 1s var(--curva) var(--d, 0s) both; }
.js .a-btn   { animation: in-btn 1s var(--curva) var(--d, 0s) both; }

/* ==========================================================================
   1. Inicio
   ========================================================================== */

.hero {
  min-height: calc(100vh - var(--alto-encabezado));
  min-height: calc(100svh - var(--alto-encabezado));
  display: flex;
  align-items: center;
  padding: 48px 0 72px;
}

.hero__grilla {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero__logo {
  width: 56px;
  height: 56px;
  border-radius: 22%;
  margin-bottom: 28px;
}

.hero__titulo {
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-bottom: 26px;
}

.hero__bajada {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--secundario);
  max-width: 30em;
  margin-bottom: 36px;
}

.hero__red { position: relative; }

.red {
  width: 100%;
  height: auto;
  overflow: visible;
}

.red .enlace {
  stroke: var(--borde);
  stroke-width: 1;
  fill: none;
}

/* Las conexiones se dibujan al entrar (dashoffset desde JS). */
.red .enlace--viva {
  stroke: var(--ambar);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity .9s ease;
}
.red .enlace--viva.encendida { opacity: .85; }

.red .nodo { fill: #D1D5DB; }
.red .nodo--ambar { fill: var(--ambar); }
.red .nodo--oscuro { fill: var(--secundario); }
.red .pulso { fill: var(--ambar); }
.red .halo { fill: var(--ambar); opacity: .16; }
.red .check { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   2. Qué es SAVIA — la esfera
   ========================================================================== */

.esfera { position: relative; }

.esfera__pin { padding: 96px 0; }

.esfera__cabecera {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.esfera__mapa {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 40px;
}

.esfera__lineas { display: none; }

.esfera__centro {
  position: relative;
  width: 168px;
  height: 168px;
}

.esfera__bola {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(255, 191, 0, .35), inset 0 -10px 30px rgba(0, 0, 0, .08);
}

.esfera__halo {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 191, 0, .22) 0%, rgba(255, 191, 0, 0) 65%);
}

.conceptos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
  max-width: 820px;
}

.concepto h3 { font-size: 1.05rem; margin-bottom: 6px; }
.concepto p { font-size: .95rem; color: var(--secundario); line-height: 1.55; }

.concepto__punto {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 6px rgba(255, 191, 0, .18);
  margin-bottom: 14px;
}

/* --- Escena fijada (computador, con JS y con movimiento) --- */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .esfera { height: 300vh; }

  .js .esfera__pin {
    position: sticky;
    top: var(--alto-encabezado);
    height: calc(100vh - var(--alto-encabezado));
    padding: 0;
    display: flex;
    align-items: center;
  }

  .js .esfera__cabecera { margin-bottom: 8px; }

  .js .esfera__mapa {
    display: block;
    height: min(560px, calc(100vh - var(--alto-encabezado) - 190px));
  }

  .js .esfera__lineas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .js .esfera__linea {
    fill: none;
    stroke: var(--ambar);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
  }

  .js .esfera__centro {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(130px, 15vw, 190px);
    height: clamp(130px, 15vw, 190px);
    transform: translate(-50%, -50%) scale(calc(.8 + .2 * var(--entrada, 0)));
    opacity: var(--entrada, 0);
  }

  .js .conceptos { display: block; max-width: none; }

  /* El punto de cada concepto queda justo donde termina su curva. */
  .js .concepto {
    position: absolute;
    width: 22%;
    transform: translateY(-5px);
    opacity: 0;
    transition: opacity .8s var(--curva), translate .8s var(--curva);
    translate: 0 14px;
  }

  .js .concepto.encendido { opacity: 1; translate: 0 0; }

  /* Mismos extremos que las curvas del SVG (viewBox 1000 × 600). */
  .js .concepto--1 { left: 1%; top: 25%; text-align: right; }
  .js .concepto--2 { left: 77%; top: 25%; }
  .js .concepto--3 { left: 1%; top: 75%; text-align: right; }
  .js .concepto--4 { left: 77%; top: 75%; }

  .js .concepto--1 .concepto__punto,
  .js .concepto--3 .concepto__punto { margin-left: auto; }
}

/* ==========================================================================
   3. Para quién es — insignias
   ========================================================================== */

.perfiles__pin { padding: 96px 0; background: var(--superficie); }

.perfiles__cabecera { text-align: center; }

.perfiles__ventana {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.perfiles__ventana::-webkit-scrollbar { display: none; }

.perfiles__pista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.tipo {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 8px;
}

.tipo h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: -.015em;
  margin: 34px 0 12px;
}

.tipo p {
  color: var(--secundario);
  font-size: 1.08rem;
  max-width: 28em;
}

.insignia--gigante {
  width: clamp(120px, 15vw, 168px);
  height: clamp(120px, 15vw, 168px);
  box-shadow: 0 20px 50px rgba(17, 24, 39, .10);
}
.insignia--gigante svg { stroke-width: 2.2; }
.insignia--gigante.insignia--vacia { box-shadow: none; border-width: 3px; color: var(--apagado); }
.insignia--gigante .ic { width: 44%; height: 44%; fill: currentColor; stroke: none; }

.perfiles__control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.flecha {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--blanco);
  color: var(--texto);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  transition: border-color .2s;
}
.flecha:hover { border-color: var(--texto); }

.puntos-nav { display: flex; gap: 6px; }
.puntos-nav button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.insignia--punto { width: 10px; height: 10px; opacity: .35; transition: opacity .3s, transform .3s; }
.insignia--punto.insignia--vacia { border-width: 1.5px; border-style: solid; border-color: var(--apagado); }
.puntos-nav button[aria-current="true"] .insignia--punto { opacity: 1; transform: scale(1.3); }

/* --- Recorrido horizontal fijado (computador) --- */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .perfiles { height: 360vh; }

  .js .perfiles__pin {
    position: sticky;
    top: var(--alto-encabezado);
    height: calc(100vh - var(--alto-encabezado));
    padding: 0;
    display: flex;
    align-items: center;
  }

  .js .perfiles__escena { width: 100%; }

  .js .perfiles__ventana { overflow: hidden; scroll-snap-type: none; }

  .js .perfiles__pista {
    transform: translateX(calc(var(--x, 0) * -100%));
    will-change: transform;
  }

  /* La que sale se achica y se apaga; la que entra viene desde la derecha. */
  .js .tipo {
    opacity: calc(1 - min(1, var(--dist, 0) * 1.4));
    transform: scale(calc(1 - min(.18, var(--dist, 0) * .18)));
  }
}

/* ==========================================================================
   4. Confianza — publicación con avales
   ========================================================================== */

.confianza { padding: 128px 0; }

.confianza__grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.confianza__texto h2 { margin-bottom: 20px; }
.confianza__texto > p { color: var(--secundario); font-size: 1.08rem; }
.confianza__final { margin-top: 22px; font-size: .98rem !important; }

.post-demo { margin: 0; position: relative; }

.post {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 18px;
  padding: 18px 20px 14px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 18px 40px rgba(17, 24, 39, .07);
  max-width: 460px;
}

.post__cabecera { display: flex; align-items: center; gap: 12px; }
.post__autor { flex: 1; min-width: 0; }
.post__nombre { font-weight: 700; font-size: .98rem; display: flex; align-items: center; gap: 5px; }
.post__meta { font-size: .8rem; color: var(--secundario); }
.post__titulo { margin-top: 14px; font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.post__cuerpo { margin-top: 6px; font-size: .95rem; line-height: 1.5; }

.post__etiquetas { display: flex; gap: 14px; margin-top: 12px; font-size: .8rem; color: var(--apagado); }
.post__etiquetas span { display: inline-flex; align-items: center; gap: 4px; }
.post__etiquetas .ic { font-size: 12px; }

.post__acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}

.aprobar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--secundario);
  position: relative;
}
.aprobar .ic { font-size: 18px; }
.aprobar__lleno { display: none; color: var(--azul); }
.aprobar.aprobado { color: var(--azul); font-weight: 700; }
.aprobar.aprobado .aprobar__vacio { display: none; }
.aprobar.aprobado .aprobar__lleno { display: block; animation: in-pop .5s var(--curva) both; }

.conteos { display: inline-flex; align-items: center; gap: 14px; font-size: .85rem; color: var(--secundario); }
.conteo { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.conteo .ic { font-size: 16px; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
}
.avatar--ambar { background: var(--ambar-suave); color: var(--ambar-oscuro); }
.avatar--azul { background: #E8F4FD; color: #1479BD; }
.avatar--gris { background: #F3F4F6; color: var(--secundario); }
.avatar--chico { width: 34px; height: 34px; font-size: .7rem; }
.avatar--grande { width: 76px; height: 76px; font-size: 1.2rem; border: 4px solid var(--blanco); }

.insignia--micro { width: 13px; height: 13px; }

/* Quienes avalan: entran de a uno. */
.avaladores {
  display: flex;
  margin-top: 18px;
  padding-left: 8px;
}

.avalador {
  width: 34px;
  height: 34px;
  margin-left: -8px;
  border-radius: 50%;
  border: 3px solid var(--blanco);
  display: grid;
  place-items: center;
  font-size: .62rem;
  font-weight: 800;
  position: relative;
}
.avalador--azul { background: #E8F4FD; color: #1479BD; }
.avalador--gris { background: #F3F4F6; color: var(--secundario); }
.avalador::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--blanco);
}
.avalador--azul::after { background: var(--azul); }
.avalador--gris::after { background: var(--gris); }

.js .post-demo .post { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--curva), transform .9s var(--curva); }
.js .post-demo .avalador { opacity: 0; }
.js .post-demo.animar .post { opacity: 1; transform: none; }
.js .post-demo.animar .avalador { animation: in-pop .55s var(--curva) both; }
.js .post-demo.animar .avalador:nth-child(1) { animation-delay: 1.1s; }
.js .post-demo.animar .avalador:nth-child(2) { animation-delay: 1.35s; }
.js .post-demo.animar .avalador:nth-child(3) { animation-delay: 1.6s; }
.js .post-demo.animar .avalador:nth-child(4) { animation-delay: 2.05s; }
.js .post-demo.animar .avalador:nth-child(5) { animation-delay: 2.3s; }

/* ==========================================================================
   5. Misión — pausa editorial oscura
   ========================================================================== */

.proposito-osc {
  background: var(--oscuro);
  color: var(--blanco);
  padding: 140px 0;
  text-align: center;
}

.proposito-osc h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.linea-ambar {
  display: block;
  width: 120px;
  height: 2px;
  margin: 34px auto;
  background: var(--ambar);
  border-radius: 2px;
}
.js .linea-ambar { transform: scaleX(0); opacity: 1; transition: transform 1.4s var(--curva) .2s; }
.js .linea-ambar.visible { transform: scaleX(1); }

.proposito-osc__texto { font-size: 1.15rem; color: #D1D5DB; max-width: 32em; margin: 0 auto; }
.proposito-osc__frase { margin-top: 22px; font-weight: 600; color: var(--ambar); letter-spacing: .02em; }

.valores-linea {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 36px;
}
.valores-linea li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #E5E7EB; }
.valores-linea .ic { font-size: 20px; color: var(--ambar); }

.oficial {
  margin: 48px auto 0;
  max-width: 640px;
  text-align: left;
}
.oficial summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  color: #9CA3AF;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.oficial summary::-webkit-details-marker { display: none; }
.oficial summary:hover { color: var(--blanco); }
.oficial__cuerpo { margin-top: 22px; display: grid; gap: 16px; color: #D1D5DB; font-size: .98rem; }
.oficial__cuerpo strong { color: var(--blanco); }

/* ==========================================================================
   6. Conoce nuestra app — recorrido con la barra de la app
   ========================================================================== */

.recorrido__pin { padding: 112px 0 96px; }

.recorrido__cabecera { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.recorrido__cabecera h2 { margin-bottom: 12px; }
.recorrido__cabecera p { color: var(--secundario); }

.modulos { display: grid; gap: 64px; }

.modulo {
  display: grid;
  grid-template-columns: 1fr minmax(0, 360px);
  gap: 56px;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
  width: 100%;
}

.modulo__texto h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.015em; margin-bottom: 14px; }
.modulo__texto p { color: var(--secundario); font-size: 1.08rem; max-width: 24em; }

/* Un fragmento de pantalla de la app, sin teléfono alrededor. */
.pantalla {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 60px rgba(17, 24, 39, .08);
  font-size: .86rem;
  min-height: 360px;
  overflow: hidden;
}

.pantalla .ic { font-size: 18px; }
.pantalla__barra-sup { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pantalla__marca { width: 86px; height: auto; }
.pantalla__iconos { display: inline-flex; gap: 14px; color: var(--texto); }
.pantalla__titulo { font-size: 1.4rem; font-weight: 700; margin-bottom: 12px; }

.pantalla__pestanas { display: flex; border-bottom: 1px solid var(--borde); margin: 0 -18px 12px; }
.pantalla__pestanas span {
  flex: 1;
  text-align: center;
  padding: 6px 0 9px;
  font-weight: 600;
  color: var(--apagado);
  border-bottom: 2px solid transparent;
}
.pantalla__pestanas .activa { color: var(--texto); border-bottom-color: var(--ambar); }

.mini-post { padding: 10px 0; }
.mini-post + .mini-post { border-top: 1px solid var(--borde); }
.mini-post--tenue { opacity: .55; }
.mini-post__cab { display: flex; gap: 10px; align-items: center; }
.mini-post__nombre { font-weight: 700; display: flex; align-items: center; gap: 4px; line-height: 1.3; }
.mini-post__meta { font-size: .74rem; color: var(--secundario); display: flex; align-items: center; gap: 4px; }
.mini-post__texto { margin-top: 8px; line-height: 1.45; }
.mini-post__acc { display: flex; justify-content: space-between; margin-top: 10px; color: var(--secundario); font-weight: 600; }
.mini-post__acc span { display: inline-flex; align-items: center; gap: 5px; }
.mini-post__conteos { gap: 8px !important; }

.grupo-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.grupo-cab__icono { width: 46px; height: 46px; border-radius: 50%; background: var(--ambar-suave); color: var(--ambar-oscuro); display: grid; place-items: center; }
.grupo-cab__icono .ic { font-size: 22px; }
.grupo-cab__nombre { font-weight: 700; font-size: .95rem; }
.grupo-cab__meta { font-size: .76rem; color: var(--secundario); }

.chat { display: grid; gap: 10px; }
.burbuja { background: var(--superficie); border-radius: 16px 16px 16px 4px; padding: 8px 12px; max-width: 85%; line-height: 1.4; }
.burbuja b { display: block; font-size: .72rem; color: var(--ambar-oscuro); }
.burbuja--mia { justify-self: end; background: var(--ambar-suave); border-radius: 16px 16px 4px 16px; }

.publicar-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.publicar-cab__alcance { font-size: .76rem; font-weight: 600; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; color: var(--secundario); }
.publicar-campo { color: var(--apagado); min-height: 120px; line-height: 1.5; }
.publicar-adjunto { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; font-weight: 600; margin-bottom: 14px; }
.publicar-adjunto .ic { color: var(--ambar-oscuro); }
.publicar-barra { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--borde); padding-top: 12px; }
.publicar-herramientas { display: inline-flex; gap: 14px; color: var(--secundario); }
.publicar-boton { background: var(--ambar); border-radius: 999px; padding: 6px 16px; font-weight: 700; }

.buscar-campo { display: flex; align-items: center; gap: 8px; height: 42px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); padding: 0 12px; font-size: .95rem; }
.buscar-campo .ic { color: var(--apagado); }
.buscar-chips { display: flex; gap: 6px; margin: 10px 0 6px; overflow: hidden; }
.buscar-chips span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--borde); border-radius: 999px; padding: 4px 10px; font-size: .74rem; color: var(--secundario); white-space: nowrap; }
.buscar-chips .ic { font-size: 12px; }
.buscar-chips .activa { border-color: var(--ambar); background: var(--ambar-suave); color: var(--ambar-oscuro); font-weight: 700; }
.buscar-seccion { margin-top: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.buscar-fila { display: flex; gap: 10px; align-items: center; padding: 8px 0; }

.pantalla--perfil { padding-top: 0; text-align: center; }
.perfil-portada { height: 86px; margin: 0 -18px; background: linear-gradient(120deg, var(--ambar) 0%, #FFD966 100%); }
.pantalla--perfil .avatar--grande { margin-top: -38px; }
.perfil-nombre { margin-top: 8px; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 6px; }
.perfil-titular { color: var(--secundario); font-size: .8rem; }
.perfil-numeros { display: flex; justify-content: center; gap: 22px; margin: 16px 0; font-size: .72rem; color: var(--secundario); }
.perfil-numeros span { display: grid; }
.perfil-numeros b { font-size: 1rem; color: var(--texto); }

/* La barra de pestañas de la app: píldora blanca de 60 px, cinco ítems
   iguales, ícono de 22 y etiqueta de 10; activo en ámbar oscuro. */
.barra-app {
  display: none;
  margin: 40px auto 0;
  width: min(420px, 100%);
  height: 60px;
  border-radius: 30px;
  background: var(--blanco);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  position: relative;
  overflow: hidden;
}

.barra-app button {
  flex: 1;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--apagado);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: color .3s;
  position: relative;
  z-index: 1;
}
.barra-app .ic { font-size: 22px; }
.barra-app button[aria-selected="true"] { color: var(--ambar-oscuro); }
.barra-app button:focus-visible { outline-offset: -4px; border-radius: 24px; }

/* Progreso del recorrido: una línea ámbar fina bajo los íconos. */
.barra-app::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: calc(var(--avance, 0) * 100%);
  background: var(--ambar);
  transition: width .2s linear;
}

.js .barra-app { display: flex; }

/* Con JS: un módulo a la vez, el resto se va con un fundido. */
.js .modulos { display: grid; gap: 0; }
.js .modulo {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .55s var(--curva), transform .55s var(--curva), visibility 0s .55s;
}
.js .modulo.activo {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s var(--curva), transform .55s var(--curva), visibility 0s 0s;
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .recorrido { height: 460vh; }

  .js .recorrido__pin {
    position: sticky;
    top: var(--alto-encabezado);
    height: calc(100vh - var(--alto-encabezado));
    padding: 24px 0;
    display: flex;
    align-items: center;
  }

  .js .recorrido__escena { width: 100%; }
  .js .recorrido__cabecera { margin-bottom: 28px; }
  .js .barra-app { margin-top: 28px; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .js .recorrido__cabecera p { display: none; }
  .js .pantalla { min-height: 300px; }
}

/* ==========================================================================
   7. SAVIA Ask
   ========================================================================== */

.ask {
  background: var(--oscuro);
  color: var(--blanco);
  padding: 140px 0;
  overflow: hidden;
}

.ask__grilla {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.ask__texto h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; margin: 18px 0; }
.ask__texto > p { color: #D1D5DB; font-size: 1.08rem; }
.ask__texto > p.pronto-chip { color: var(--oscuro); font-size: .72rem; }
.ask .resalte { background: none; color: var(--ambar); }
.ask__aviso { margin-top: 18px; font-size: .9rem !important; color: #9CA3AF !important; }

.pronto-chip {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oscuro);
  background: var(--ambar);
  border-radius: 999px;
  padding: 5px 12px;
}

.consola {
  margin: 0;
  background: var(--oscuro-2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 191, 0, .06);
}

.consola__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 191, 0, .35);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 54px;
  font-weight: 600;
}
.consola__barra .ic { font-size: 20px; }
.ic--ambar { color: var(--ambar); }

.cursor { display: none; width: 2px; height: 1.1em; background: var(--ambar); animation: parpadeo 1s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.consola__cuerpo { padding: 18px 6px 6px; min-height: 250px; }

.consola__pensando { display: none; align-items: center; gap: 10px; color: #9CA3AF; font-size: .9rem; }
.puntitos { display: inline-flex; gap: 4px; }
.puntitos i { width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); animation: puntito 1.2s infinite ease-in-out; }
.puntitos i:nth-child(2) { animation-delay: .15s; }
.puntitos i:nth-child(3) { animation-delay: .3s; }
@keyframes puntito { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }

.consola__titulo { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ambar); margin: 4px 0 10px; }
.consola__respuesta ul { margin: 0 0 20px; padding-left: 18px; color: #E5E7EB; font-size: .95rem; line-height: 1.6; }
.consola__fuentes { display: grid; gap: 8px; }
.fuente {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: .86rem;
  color: #E5E7EB;
}
.fuente .ic { color: var(--ambar); font-size: 18px; }
.fuente em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 4px; color: #9CA3AF; font-size: .8rem; }

.consola__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .75rem;
  color: #9CA3AF;
}

.consola__repetir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: var(--blanco);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.consola__repetir:hover { border-color: var(--ambar); }

/* Fases de la demostración (las pone JS en data-fase). Sin JS se ve todo. */
.consola[data-fase] .consola__respuesta > * { opacity: 0; transform: translateY(10px); }
.consola[data-fase="escribiendo"] .cursor,
.consola[data-fase="pensando"] .cursor { display: inline-block; }
.consola[data-fase="pensando"] .consola__pensando { display: flex; }
.consola[data-fase="respuesta"] .consola__respuesta > * { animation: in-soft .8s var(--curva) both; }
.consola[data-fase="respuesta"] .consola__respuesta > :nth-child(2) { animation-delay: .15s; }
.consola[data-fase="respuesta"] .consola__respuesta > :nth-child(3) { animation-delay: .7s; }
.consola[data-fase="respuesta"] .consola__respuesta > :nth-child(4) { animation-delay: .85s; }

/* ==========================================================================
   8. Privacidad
   ========================================================================== */

.privacidad { padding: 140px 0 112px; text-align: center; }

.escudo {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ambar-suave);
  color: var(--ambar-oscuro);
  margin-bottom: 26px;
}
.escudo .ic { font-size: 34px; }

.privacidad__bajada { color: var(--secundario); font-size: 1.08rem; margin-top: 14px; }

.garantias-lista {
  list-style: none;
  margin: 48px auto 0;
  padding: 0;
  max-width: 620px;
  text-align: left;
  display: grid;
}

.garantias-lista li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-top: 1px solid var(--borde);
  color: var(--secundario);
}
.garantias-lista li:last-child { border-bottom: 1px solid var(--borde); }
.garantias-lista b { color: var(--texto); }
.garantias-lista li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 27px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 5px rgba(255, 191, 0, .16);
}

/* ==========================================================================
   9. Preguntas frecuentes
   ========================================================================== */

.faq { padding: 112px 0; background: var(--superficie); }
.faq h2 { text-align: center; margin-bottom: 40px; }

.pregunta__cuerpo p { padding: 0 24px 22px; color: var(--secundario); }

/* Apertura suave donde el navegador lo permite; en el resto, al instante. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .pregunta::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .35s var(--curva), content-visibility .35s allow-discrete;
  }
  .pregunta[open]::details-content { block-size: auto; }
}

/* ==========================================================================
   10. Cierre
   ========================================================================== */

.cierre {
  background: var(--oscuro);
  color: var(--blanco);
  padding: 140px 0;
  text-align: center;
}

.cierre__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 36px;
}
.cierre__marca img { width: 64px; height: 64px; border-radius: 22%; }

.cierre__rama {
  display: block;
  width: 90px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 191, 0, 0), var(--ambar));
}
.cierre__rama--der { background: linear-gradient(90deg, var(--ambar), rgba(255, 191, 0, 0)); }
/* Las dos ramas nacen del isotipo y se extienden hacia afuera. */
.js .cierre__rama { transform: scaleX(0); transition: transform 1.2s var(--curva) .3s; transform-origin: right; }
.js .cierre__rama--der { transform-origin: left; }
.js .cierre__marca.visible .cierre__rama { transform: scaleX(1); }

.cierre h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.1; letter-spacing: -.02em; }
.cierre p { color: #D1D5DB; font-size: 1.1rem; margin: 20px 0 36px; }
.cierre .boton--primario { box-shadow: 0 10px 34px rgba(255, 191, 0, .35); }
.cierre p.cierre__tiendas { margin: 22px 0 0; font-size: .88rem; color: #9CA3AF; }

/* ==========================================================================
   Movimiento reducido y pantallas chicas
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .a-mask, .js .a-soft, .js .a-scale, .js .a-btn { animation: none; }
  .js .linea-ambar, .js .cierre__rama { transition: none; transform: none; }
  .js .post-demo .post, .js .post-demo .avalador { opacity: 1; transform: none; animation: none; }
  .js .modulo { transition: none; }
  .cursor, .puntitos i { animation: none; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding: 40px 0 64px; }
  .hero__grilla { grid-template-columns: 1fr; gap: 20px; }
  /* Celular: la red, el título, la descripción y el botón son un solo
     grupo, centrado en el alto visible. El espacio que sobra se reparte
     arriba y abajo del grupo (no entre el texto y el botón), y el botón va
     a 40 px de la descripción, como parte del mismo bloque.

     Alto: 100svh es el alto con las barras del navegador desplegadas, con
     100vh de respaldo. Es un mínimo: en un teléfono bajo el inicio crece y
     se hace scroll, sin encimarse. En uno alto, el grupo queda al medio.

     El logo grande se omite: el encabezado ya lo muestra. */
  .hero {
    min-height: calc(100vh - var(--alto-encabezado));
    min-height: calc(100svh - var(--alto-encabezado));
    padding: clamp(8px, 2svh, 20px) 0 max(24px, calc(env(safe-area-inset-bottom) + 16px));
    /* La grilla toma todo el alto, para poder centrar el grupo dentro. */
    align-items: stretch;
  }
  .hero__grilla {
    display: flex;
    flex-direction: column;
    /* El de computador centra en horizontal; aquí cada fila toma el ancho. */
    align-items: stretch;
    justify-content: center;
    gap: clamp(12px, 3svh, 28px);
  }
  .hero__red {
    order: -1;
    flex: none;
    height: clamp(170px, 30svh, 280px);
  }
  .hero__red .red { width: 100%; height: 100%; }
  .hero__logo { display: none; }
  .hero__titulo { margin-bottom: 14px; }
  .hero__bajada { margin-bottom: 40px; max-width: 34em; }

  .confianza { padding: 96px 0; }
  .confianza__grilla { grid-template-columns: 1fr; gap: 44px; }
  .post { max-width: none; }

  .modulo { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .modulo__texto p { margin: 0 auto; }
  .pantalla { text-align: left; max-width: 380px; width: 100%; margin: 0 auto; }
  .pantalla--perfil { text-align: center; }

  .ask { padding: 104px 0; }
  .ask__grilla { grid-template-columns: 1fr; gap: 44px; }

  .proposito-osc, .cierre { padding: 104px 0; }
  .privacidad { padding: 104px 0 88px; }
}

@media (max-width: 640px) {
  .hero__titulo { font-size: clamp(2rem, 9.4vw, 2.7rem); }
  .hero .boton--grande { width: 100%; }
  .conceptos { grid-template-columns: 1fr; text-align: center; }
  .concepto__punto { margin: 0 auto 12px; }
  .esfera__pin, .perfiles__pin, .recorrido__pin { padding: 80px 0; }
  .consola__pie { flex-direction: column; align-items: flex-start; }
  .conteos { gap: 10px; }
  .faq, .confianza { padding: 80px 0; }
}
.consola__repetir[hidden] { display: none; }