/* =========================================
   ESCENAS animadas con el scroll (10-2026)
   - .catalogo (home): el índice de sectores con un escenario fijo que
     cambia según la fila que pasa por el centro.
   - .relato (páginas de producto): «qué resuelve», paso a paso, con el
     mismo escenario.
   Sin JS, o con «reducir movimiento», se ve como una lista estática con su
   captura: js/escenas.js añade .es-viva solo si puede.
   ========================================= */

/* --- Arranque del titular: el grosor sube de 400 a 800 una sola vez --- */
@media (prefers-reduced-motion: no-preference) {
  .titular-vivo { animation: titular-peso 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes titular-peso {
    from { font-weight: 400; letter-spacing: -.01em; opacity: .25; }
    to   { font-weight: 800; letter-spacing: -.035em; opacity: 1; }
  }
}

/* =========================================
   B · CATÁLOGO: índice con escenario fijo
   A la izquierda, los sectores; a la derecha, un escenario con el tono de
   la interfaz de cada producto (--tinte) donde se ve en el ordenador y, por
   delante, en el móvil. La fila que cruza el centro manda.
   ========================================= */
.catalogo__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); }
.catalogo__lista { border-top: 2px solid var(--tinta); position: relative; }
.catalogo__fila {
  display: block; text-decoration: none; color: var(--tinta);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; border-bottom: 1px solid var(--linea);
}
.catalogo__sector { font: 700 clamp(1.6rem, 3.2vw, 2.6rem)/1.05 var(--f-display); letter-spacing: -.025em; }
.catalogo__meta { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.catalogo__producto { font: 600 1.1rem/1.2 var(--f-display); color: var(--violeta); }
.catalogo__resuelve { margin-top: .6rem; color: var(--tinta-2); max-width: 44ch; }
.catalogo__ir { display: none; }
/* Última fila: no tiene escena, queda fuera del juego del scroll. */
.catalogo__otra { display: block; text-decoration: none; color: var(--tinta-2); padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; }
.catalogo__otra .catalogo__producto { color: var(--violeta); }
.catalogo__otra:hover .catalogo__sector { color: var(--tinta); }
.catalogo__fila .escena { margin-top: 1rem; }
.catalogo__pantallas { display: none; }

/* --- Escena: ordenador + móvil sobre el tinte del producto --- */
.escena {
  --tinte: var(--papel-2);
  position: relative; margin: 0; border-radius: 16px; background: var(--tinte);
  aspect-ratio: 16 / 11; overflow: hidden;
}
.escena__escritorio {
  position: absolute; left: 6%; top: 8%; width: 82%; height: auto;
  border-radius: 8px; border: 1px solid rgba(24, 20, 58, .12); background: #fff;
  box-shadow: 0 18px 40px -18px rgba(24, 20, 58, .35);
}
.escena__movil {
  position: absolute; right: 5%; bottom: -6%; width: 23%; height: auto;
  border-radius: 18px; border: 5px solid var(--tinta); background: #fff;
  box-shadow: 0 24px 48px -16px rgba(24, 20, 58, .45);
}
/* Cuando la captura ya trae su propio marco de teléfono (la maqueta de
   CampoOS) o cuando solo hay móvil, el teléfono va al centro y más grande. */
.escena--solo-movil .escena__movil { right: auto; left: 50%; bottom: auto; top: 7%; height: 86%; width: auto; transform: translateX(-50%); }
.escena__movil--con-marco { border: 0; border-radius: 0; background: none; box-shadow: none; mix-blend-mode: multiply; } /* el fondo blanco de la captura toma el tinte */

/* Solo escritorio (WhatsApp en el CRM): la captura más grande y centrada. */
.escena--solo-escritorio .escena__escritorio { left: 7%; width: 86%; top: 50%; transform: translateY(-50%); }

/* --- Viva --- */
.catalogo.es-viva .catalogo__lista { padding-left: 1.25rem; }
/* Riel: marca por dónde vas en el catálogo. */
.catalogo.es-viva .catalogo__lista::before,
.catalogo.es-viva .catalogo__lista::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; }
.catalogo.es-viva .catalogo__lista::before { bottom: 0; background: var(--linea); }
.catalogo.es-viva .catalogo__lista::after { height: calc(var(--avance, 0) * 100%); background: var(--violeta); transition: height .5s cubic-bezier(.2, .7, .2, 1); }

.catalogo.es-viva .catalogo__fila { padding: clamp(1.6rem, 6vh, 3.25rem) 0; transition: color .35s ease; color: color-mix(in srgb, var(--tinta) 30%, var(--papel)); }
.catalogo.es-viva .catalogo__fila .catalogo__producto,
.catalogo.es-viva .catalogo__fila .indice__estado { color: inherit; transition: color .35s ease; }
.catalogo.es-viva .catalogo__fila .escena { display: none; }
.catalogo.es-viva .catalogo__resuelve,
.catalogo.es-viva .catalogo__ir { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .45s ease, margin-top .45s ease; }
.catalogo.es-viva .catalogo__resuelve > span,
.catalogo.es-viva .catalogo__ir > span { overflow: hidden; }
.catalogo.es-viva .catalogo__ir { font-weight: 600; color: var(--violeta); text-decoration: underline; text-underline-offset: .22em; }
.catalogo.es-viva .catalogo__fila.is-activo { color: var(--tinta); }
.catalogo.es-viva .catalogo__fila.is-activo .catalogo__producto { color: var(--violeta); }
.catalogo.es-viva .catalogo__fila.is-activo .indice__estado { color: var(--tinta-2); }
.catalogo.es-viva .catalogo__fila.is-activo .catalogo__resuelve { grid-template-rows: 1fr; margin-top: .6rem; color: var(--tinta-2); }
.catalogo.es-viva .catalogo__fila.is-activo .catalogo__ir { grid-template-rows: 1fr; margin-top: .75rem; }
.catalogo.es-viva .catalogo__fila:hover { color: var(--tinta); }

/* El punto «en producción» late una vez al activarse la fila. */
.catalogo.es-viva .catalogo__fila.is-activo .indice__estado--vivo::before { animation: latido 1.2s ease-out 1; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--naranja) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--naranja) 0%, transparent); }
}

.catalogo.es-viva .catalogo__pantallas {
  display: block; position: sticky; top: calc(68px + 5vh); align-self: start;
  height: min(calc(100vh - 68px - 10vh), 640px);
}
:is(.catalogo__pantallas, .relato__escenario) .escena {
  position: absolute; inset: 0; aspect-ratio: auto; background: var(--tinte);
  opacity: 0; transition: opacity .5s ease, background-color .5s ease;
}
:is(.catalogo__pantallas, .relato__escenario) .escena.is-activa { opacity: 1; z-index: 1; }
/* Dirección: lo que viene después espera abajo, lo de antes queda arriba;
   el ordenador se mueve un poco, el móvil un poco más. */
:is(.catalogo__pantallas, .relato__escenario) .escena > * { transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
:is(.catalogo__pantallas, .relato__escenario) .escena.is-despues .escena__escritorio { transform: translateY(14%); }
:is(.catalogo__pantallas, .relato__escenario) .escena.is-antes   .escena__escritorio { transform: translateY(-14%); }
:is(.catalogo__pantallas, .relato__escenario) .escena.is-despues .escena__movil { transform: translateY(30%); }
:is(.catalogo__pantallas, .relato__escenario) .escena.is-antes   .escena__movil { transform: translateY(-30%); }
:is(.catalogo__pantallas, .relato__escenario) .escena--solo-escritorio.is-despues .escena__escritorio { transform: translateY(-36%); }
:is(.catalogo__pantallas, .relato__escenario) .escena--solo-escritorio.is-antes   .escena__escritorio { transform: translateY(-64%); }
:is(.catalogo__pantallas, .relato__escenario) .escena--solo-movil.is-despues .escena__movil { transform: translate(-50%, 30%); }
:is(.catalogo__pantallas, .relato__escenario) .escena--solo-movil.is-antes   .escena__movil { transform: translate(-50%, -30%); }
:is(.catalogo__pantallas, .relato__escenario) .escena.is-activa .escena__movil { transition-delay: .08s; }

@media (max-width: 860px) {
  .catalogo__grid { grid-template-columns: 1fr; }
  .catalogo.es-viva .catalogo__pantallas { order: -1; top: 68px; height: 36vh; z-index: 2; background: var(--papel); padding: .5rem 0; }
  .catalogo.es-viva .catalogo__lista { padding-left: .9rem; }
  .catalogo.es-viva .catalogo__fila { padding: 2.2rem 0; }
  .escena__movil { width: 26%; }
}

/* =========================================
   RELATO de producto: «qué resuelve», paso a paso
   Cada paso empieza por el problema (en gris, como lo diría el cliente) y
   sigue con lo que hace el producto; a la derecha, la pantalla que lo hace.
   ========================================= */
.relato__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.relato__pasos { border-top: 2px solid var(--tinta); position: relative; }
.relato__paso { padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--linea); }
.relato__problema { color: var(--tinta-2); font-size: 1rem; max-width: 44ch; }
.relato__problema::before { content: '«'; } .relato__problema::after { content: '»'; }
.relato__titulo { margin-top: .6rem; font: 700 clamp(1.45rem, 2.6vw, 2rem)/1.12 var(--f-display); letter-spacing: -.022em; max-width: 22ch; }
.relato__texto { margin-top: .6rem; color: var(--tinta-2); max-width: 46ch; }
.relato__paso .escena { margin-top: 1.25rem; }
.relato__escenario { display: none; }

.relato.es-viva .relato__pasos { padding-left: 1.25rem; }
.relato.es-viva .relato__pasos::before,
.relato.es-viva .relato__pasos::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; }
.relato.es-viva .relato__pasos::before { bottom: 0; background: var(--linea); }
.relato.es-viva .relato__pasos::after { height: calc(var(--avance, 0) * 100%); background: var(--violeta); transition: height .5s cubic-bezier(.2, .7, .2, 1); }
/* Pasos largos: cada uno se queda en pantalla un buen tramo de scroll. */
.relato.es-viva .relato__paso { padding: clamp(3rem, 14vh, 7rem) 0; border-bottom: 0; color: color-mix(in srgb, var(--tinta) 30%, var(--papel)); transition: color .35s ease; }
.relato.es-viva .relato__paso:first-child { padding-top: clamp(1.75rem, 4vh, 2.5rem); }
.relato.es-viva .relato__paso .escena { display: none; }
.relato.es-viva .relato__problema,
.relato.es-viva .relato__texto { color: inherit; transition: color .35s ease; }
.relato.es-viva .relato__paso.is-activo { color: var(--tinta); }
.relato.es-viva .relato__paso.is-activo .relato__problema,
.relato.es-viva .relato__paso.is-activo .relato__texto { color: var(--tinta-2); }
.relato.es-viva .relato__escenario {
  display: block; position: sticky; top: calc(68px + 5vh); align-self: start;
  height: min(calc(100vh - 68px - 10vh), 640px);
}
@media (max-width: 860px) {
  .relato__grid { grid-template-columns: 1fr; }
  .relato.es-viva .relato__escenario { order: -1; top: 68px; height: 36vh; z-index: 2; background: var(--papel); padding: .5rem 0; }
  .relato.es-viva .relato__pasos { padding-left: .9rem; }
  .relato.es-viva .relato__paso { padding: 3rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .catalogo *, .relato * { transition: none !important; animation: none !important; }
}