/* ============================================================
   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.
   ============================================================ */

/* La portada de "Cómo trabajamos" ya no existe: la página se retiró
   del menú y sus dos paneles vivos —el reloj de 6 pasos y la cobertura—
   se mudaron a Nosotros; el ecosistema, a Servicios. Esta hoja se
   conserva porque esos tres paneles la siguen necesitando. */

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

.modelo { gap: var(--flow-lg); align-items: center; }

/* 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;
}
/* Por fuera del anillo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124%;
  height: auto;
  translate: -50% -50%;
  fill: var(--tinta);
  opacity: 0.055;
  pointer-events: 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);
}
/* Un filete de marca marca la esquina {
  content: "";
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  width: 34px;
  height: 2px;
  background: var(--marca);
}

.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; }
/* El titular pasó de "Presencia en 5 ciudades de México" a la versión
   larga de cobertura nacional e internacional: a 19 vw caía en siete
   líneas de dos palabras. */
.cobertura__intro { flex: none; width: min(34ch, 26vw); }
.panel .cobertura__intro .display { font-size: clamp(1.7rem, 2.5vw, 2.3rem); }

/* 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. */
/* La ficha de la matriz y la lista, en una sola columna. El documento
   pide la ficha ARRIBA: su dirección repetía la de la primera fila. */
.cobertura__sedes { flex: none; width: min(31ch, 26vw); display: grid; gap: var(--space-sm); align-content: center; }
.sedes { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }

.cobertura__sedes .matriz { margin: 0; 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) {
  .paso-activo { width: min(24ch, 19vw); }
  .cobertura__intro { width: min(30ch, 23vw); }
  .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;
  /* 2 px de sangrado, no 0: con `inset: 0` el borde del velo y el
     recorte de la foto caen en píxeles distintos al estar el panel
     en una posición fraccionaria, y asoma una línea de foto sin
     velo. El panel recorta, así que el sangrado no se ve. */
  inset: -2px;
  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%);
}

.ecos { position: relative; z-index: 2; flex: none; width: min(56vw, 820px); display: grid; gap: var(--flow-md); }
/* 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 {
  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;
}

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

@media (max-width: 899px) {
/* `.cobertura__sedes` faltaba en esta lista: es la columna que envuelve
   la ficha de la matriz y la lista, y con su `min(31ch, 26vw)` de
   escritorio se quedaba en 101 px en un teléfono de 390. La ficha salía
   estrujada en una tira de seis renglones. */
.cobertura__intro,
.cobertura__sedes,
.paso-activo,
.sedes,
.mapa--vivo,
.ecos { width: 100%; max-width: none; }

  /* --- 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); }

  /* 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; }
}