/* ============================================================
   ENSO MEDIA — Cómo trabajamos
   El motor viene de horizontal.css; la píldora, el panel claro y
   los tokens compartidos, de nosotros.css. Aquí sólo el reloj de
   seis pasos, el mapa con fichas y el ecosistema.

   El "dorado" del brief se resuelve otra vez con la gama cálida de
   marca (#EBDB00 → #F3B000): el manual no tiene oro.
   ============================================================ */

/* ============================================================
   1 · Hero
   ============================================================ */

.ct-hero .hero__titulo { max-width: 14ch; }

/* El trazo acompaña sin competir: es el mismo ciclo que cuenta la
   sección de abajo, insinuado. */
.ct-hero__trazo {
  position: absolute;
  right: -8vw;
  top: 50%;
  z-index: 1;
  width: min(84vh, 700px);
  height: auto;
  translate: 0 -50%;
  fill: var(--blanco);
  opacity: 0.07;
  pointer-events: none;
}

/* ============================================================
   2 · El reloj de seis pasos
   ============================================================ */

.modelo { gap: var(--flow-lg); align-items: center; }
.modelo__intro { flex: none; width: min(25ch, 20vw); }
.modelo__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* El diagrama del ADN: seis pasos en círculo, como las horas de un
   reloj. El anillo exterior se cierra conforme avanzas — el ciclo de
   seis pasos ES literalmente un trazo que se completa. */
.reloj {
  position: relative;
  flex: none;
  width: min(var(--util), 470px);
  aspect-ratio: 1;
}

.reloj__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.reloj__pista {
  fill: none;
  stroke: var(--linea);
  stroke-width: 2;
}

.reloj__avance {
  fill: none;
  stroke: url(#gradReloj);
  stroke: var(--marca);
  stroke-width: 3;
  stroke-linecap: round;
}

.reloj__flechas path {
  fill: none;
  stroke: var(--linea-fuerte);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Por fuera del anillo, no encima: al 86 % se solapaba con la pista y
   parecía un segundo círculo sucio. */
.reloj__marca {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124%;
  height: auto;
  translate: -50% -50%;
  fill: var(--tinta);
  opacity: 0.055;
  pointer-events: none;
}

.reloj__centro {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}

.reloj__centro b {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1;
  color: var(--tinta);
}

.reloj__centro span {
  font-family: var(--display);
  font-size: var(--fs-micro);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--marca-tinta);
}

.reloj__nodos { position: absolute; inset: 0; list-style: none; }

/* La lista vertical la genera el mismo JS que el reloj, pero sólo se
   usa en móvil: en escritorio manda el círculo. */
.modelo__pasos { display: none; }

.reloj__nodo {
  position: absolute;
  translate: -50% -50%;
}

/* Botón real: los seis pasos se recorren con Tab y con las flechas */
.reloj__nodo button {
  width: clamp(52px, 8.4vh, 66px);
  height: clamp(52px, 8.4vh, 66px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--linea-fuerte);
  background: var(--fondo);
  font-family: var(--display);
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: var(--tinta-tenue);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease),
              background-color 0.35s var(--ease), scale 0.35s var(--ease);
}

.panel--alterno .reloj__nodo button { background: var(--fondo-2); }

.reloj__nodo button:hover { border-color: var(--marca); color: var(--tinta); }

.reloj__nodo.is-activo button {
  border-color: var(--marca);
  background: var(--marca);
  color: var(--sobre-marca);
  scale: 1.12;
}

/* El paso que se está mirando, contado en texto y no en un globito
   flotante: en un globito no cabe y no se puede leer con lector. */
.paso-activo {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(26ch, 21vw);
  display: grid;
  gap: var(--space-2xs);
  align-content: center;
}

/* El loop de la columna derecha: pequeño, en penumbra y con un filete
   de marca. Es contexto, no protagonista — el reloj manda. */
.paso-activo__media {
  position: relative;
  margin-bottom: var(--flow-sm);
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fondo-3);
}

.paso-activo__media video,
.paso-activo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(calc(var(--foto-brillo) * 0.82)) saturate(0.86);
}

.paso-activo__marco {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--linea-fuerte);
  background: linear-gradient(0deg, rgb(var(--velo) / 0.5) 0%, rgb(var(--velo) / 0) 55%);
}

/* Un filete de marca marca la esquina, como en las fichas de proyecto */
.paso-activo__marco::after {
  content: "";
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  width: 34px;
  height: 2px;
  background: var(--marca);
}

.paso-activo__num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: 1;
  color: var(--marca-tinta);
}

.paso-activo h3 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.paso-activo p { color: var(--tinta-suave); }

.paso-activo__pista {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--linea);
  font-size: 0.78rem;
  color: var(--tinta-tenue);
}

/* ============================================================
   3 · Cobertura
   ============================================================ */

.cobertura { gap: var(--flow-lg); align-items: center; }
.cobertura__intro { flex: none; width: min(24ch, 19vw); }
.cobertura__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

/* El mapa dejaba el panel en negro plano. Mismo recurso que en el home:
   resplandor cálido detrás del centro del país y trama de puntos que se
   apaga en los bordes. El manual pide puntos, líneas y tramas. */
.mapa--vivo { position: relative; flex: none; width: min(40vw, 540px); }

/* La luz y la trama viven dentro del SVG, recortadas al contorno de
   México (ver mapaCT en como-trabajamos.js). Como rectángulos de CSS se
   veían como una caja luminosa alrededor del país. */
.mapa--vivo svg { position: relative; z-index: 1; }

[data-tema="claro"] .mapa--vivo .mapa__brillo { opacity: 0.6; }

/* El pin activo crece y se pinta; los demás esperan */
.mapa--vivo .pin { cursor: pointer; }
.mapa--vivo .pin__punto { transition: r 0.3s var(--ease), fill 0.3s var(--ease); }
.mapa--vivo .pin__label { transition: fill 0.3s var(--ease); }

.mapa--vivo .pin.is-activo .pin__punto { r: 11; }
.mapa--vivo .pin.is-activo .pin__halo { opacity: 0.3; }
.mapa--vivo .pin:not(.is-activo) .pin__punto { fill: var(--tinta); opacity: 0.4; }
.mapa--vivo .pin:not(.is-activo) .pin__label { fill: var(--tinta-tenue); }
.mapa--vivo .pin:focus-visible { outline: none; }
.mapa--vivo .pin:focus-visible .pin__halo { opacity: 0.55; stroke: var(--marca); stroke-width: 3; }

/* La lista de sedes es el contenido; el mapa la ilustra. Al revés
   —mapa con globitos— la información quedaba escondida detrás de un
   gesto que en teléfono no existe. */
.sedes { flex: none; width: min(31ch, 26vw); list-style: none; display: grid; gap: 0; }

/* La ficha de Google Maps cierra la lista. Compacta: con el alto de la
   del home, a 1280×760 el panel se pasaba dos píxeles. */
.sedes .matriz { margin-top: var(--space-md); padding: var(--space-2xs) var(--space-sm); }
.sedes .matriz__pin { width: 34px; height: 34px; }
.sedes .matriz__pin svg { width: 16px; height: 16px; }

.sede button {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--linea);
  text-align: left;
  transition: translate 0.35s var(--ease);
}

.sede:first-child button { border-top: 0; }
.sede button:hover { translate: var(--space-2xs) 0; }

.sede__ciudad {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--tinta);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
}

.sede__ciudad em {
  font-family: var(--texto-font);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.sede.is-activa .sede__ciudad { color: var(--marca-tinta); }
.sede.is-activa .sede__ciudad em { color: var(--marca-tinta); opacity: 0.8; }

.sede__detalle { font-size: 0.86rem; color: var(--tinta-suave); }

.sede__area { font-size: 0.86rem; color: var(--tinta-tenue); }
.sede__area b { font-family: var(--display); color: var(--tinta); margin-right: 0.4em; }

/* Pantallas bajas: las fichas de sede y el reloj ceden antes de que
   nada se corte. */
@media (min-width: 900px) and (max-height: 820px) {
  .modelo__intro { width: min(23ch, 18vw); }
  .paso-activo { width: min(24ch, 19vw); }
  .cobertura__intro { width: min(22ch, 17vw); }
  .mapa--vivo { width: min(36vw, 460px); }
  .sedes { width: min(29ch, 24vw); }
  .sede button { padding: var(--space-xs) 0; }
  .sede__detalle, .sede__area { font-size: 0.8rem; }
}

/* ============================================================
   4 · Ecosistema
   ============================================================ */

/* El panel declara data-oscuro: es oscuro en los dos temas. Se fijan los
   tokens para que en tema claro el velo no tape con crema mientras el
   header ya se puso blanco. */
.ecosistema {
  gap: var(--flow-lg);
  align-items: center;
  --velo: 0 0 0;
  --fondo: #050505;
  --tinta: #ffffff;
  --tinta-suave: rgba(255, 255, 255, 0.72);
  --tinta-tenue: rgba(255, 255, 255, 0.58);
  --linea: rgba(255, 255, 255, 0.14);
  --linea-fuerte: rgba(255, 255, 255, 0.3);
  --marca-tinta: var(--marca);
  color: var(--blanco);
  /* base opaca: ver la nota de horizontal.css */
  background: var(--negro-panel);
}

.ecosistema__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ecosistema__media video,
.ecosistema__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desenfocado: aquí el metraje es atmósfera, no algo que haya que mirar. */
  filter: grayscale(0.94) contrast(1.1) brightness(0.52) blur(6px);
}

.ecosistema__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(var(--velo) / 0.94) 0%, rgb(var(--velo) / 0.82) 44%, rgb(var(--velo) / 0.62) 100%),
    linear-gradient(0deg, rgb(var(--velo) / 0.55) 0%, rgb(var(--velo) / 0) 55%);
}

/* Trama de puntos de marca, el mismo recurso del mapa y de Nosotros */
.ecosistema__velo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--marca);
  opacity: 0.1;
  mask-image: radial-gradient(64% 66% at 60% 50%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(64% 66% at 60% 50%, #000 0%, transparent 76%);
}

.ecosistema__intro { position: relative; z-index: 2; flex: none; width: min(24ch, 20vw); }
.ecosistema__intro h2 { font-size: var(--fs-h2); margin: var(--flow-sm) 0 var(--flow-md); }

.ecos { position: relative; z-index: 2; flex: none; width: min(56vw, 820px); display: grid; gap: var(--flow-md); }

/* Un riel de marca a la izquierda de la frase: los cinco frentes dejan de
   flotar y se leen como una sola lista encadenada. */
.ecos__frase { position: relative; padding-left: var(--flow-md); }

.ecos__frase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  bottom: 0.55em;
  width: 1px;
  background: var(--linea-fuerte);
}

.ecos__frase i {
  position: absolute;
  left: -1px;
  width: 3px;
  height: 1.15em;
  margin-top: 0.28em;
  border-radius: 2px;
  background: var(--marca);
  opacity: 0;
  /* La altura queda fija y lo que crece es la escala: animar height
     obliga al navegador a recalcular la caja en cada fotograma. */
  transform-origin: 50% 0;
  scale: 1 0.78;
  transition: opacity 0.45s var(--ease), scale 0.45s var(--ease);
}

.ecos__frase li.is-activo i { opacity: 1; scale: 1 1; }

/* Cinco cajas con ícono habrían sido la sexta rejilla de tarjetas del
   sitio, y además dirían lo contrario del mensaje: el argumento es que
   los cinco frentes van JUNTOS, así que van en una sola frase. */
.ecos__frase {
  list-style: none;
  display: grid;
  gap: var(--space-xs);
  font-size: clamp(1.3rem, 2.5vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.ecos__frase li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  transition: opacity 0.5s var(--ease);
}

.ecos__frase span {
  font-family: var(--texto-font);
  color: var(--tinta-tenue);
}

.ecos__frase b {
  font-family: var(--display);
  font-weight: 700;
  color: var(--tinta);
}

.ecos__frase li.is-activo b { color: var(--marca-tinta); }

.ecos__cierre {
  max-width: 54ch;
  padding-top: var(--flow-md);
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: var(--fs-lead);
}

/* ============================================================
   Móvil
   ============================================================ */

@media (max-width: 899px) {
  .modelo__intro,
  .cobertura__intro,
  .ecosistema__intro,
  .paso-activo,
  .sedes,
  .mapa--vivo,
  .ecos { width: 100%; max-width: none; }

  .ct-hero__trazo { right: -30vw; opacity: 0.06; }

  /* --- El reloj se endereza: en 350 px de ancho un círculo de seis
     nodos deja cada uno del tamaño de una uña. --- */
  .reloj { display: none; }

  .paso-activo { display: none; }

  .modelo__pasos {
    display: grid;
    gap: 0;
    margin-top: var(--flow-lg);
  }

  .paso-lista {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: var(--space-md);
    align-items: start;
    padding: var(--flow-md) 0;
    border-top: 1px solid var(--linea);
  }

  .paso-lista:first-child { border-top: 0; padding-top: 0; }

  .paso-lista__num {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--marca-tinta);
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--marca-tinta);
  }

  .paso-lista h3 { font-family: var(--display); font-size: 1.1rem; line-height: 1.15; margin-bottom: var(--space-2xs); }
  .paso-lista p { font-size: 0.94rem; color: var(--tinta-suave); }

  /* --- Cobertura --- */
  .mapa--vivo { margin-block: var(--flow-md); }
  .sedes { margin-top: var(--flow-md); }
  .sede button { min-height: 56px; }

  /* --- Ecosistema --- */
  .ecos { margin-top: var(--flow-lg); gap: var(--flow-md); }
  .ecos__frase { font-size: clamp(1.15rem, 5.4vw, 1.5rem); gap: var(--space-sm); padding-left: var(--space-lg); }
  .ecos__frase i { opacity: 1; }

  /* Apilado, el metraje se ve arriba y el texto baja sobre velo casi opaco */
  .ecosistema__velo {
    background: linear-gradient(180deg, rgb(var(--velo) / 0.72) 0%, rgb(var(--velo) / 0.94) 26%, rgb(var(--velo) / 0.97) 100%);
  }
  .ecosistema__velo::after { opacity: 0.05; mask-image: none; -webkit-mask-image: none; }
  .ecos__frase li.is-activo b,
  .ecos__frase b { color: var(--tinta); }
}