/* ============================================================
   nosotros.css — página de equipo y trayectoria
   ============================================================ */

.declaracion-bloque {
  border-radius: var(--radio-2xl);
  margin-top: var(--esp-6);
}

/* ══════════════════════════════════════════════════════════
   LA IDEA — de dónde sale VitalFit

   Antes era un párrafo más dentro de la rejilla de la foto, así
   que la frase que explica la marca pesaba lo mismo que el resto
   del texto. Aquí sale de la rejilla y se lee como titular: el
   tamaño de la página (--txt-3xl, el mayor fuera de la portada)
   y una medida corta, para que caiga en varias líneas en vez de
   estirarse de lado a lado.
   ══════════════════════════════════════════════════════════ */

.idea-titular {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(2rem, 5vw, var(--txt-3xl));
  line-height: 1.08;
  letter-spacing: -0.01em;
  /* Medida corta a propósito: es lo que le da la forma de bloque */
  max-width: 21ch;
  margin: 0 0 var(--esp-4);
  text-wrap: balance;
}

/* El énfasis va en cursiva, como en el titular de la portada.
   El color lo pone .enfasis, que es la regla de marca (p. 23). */
.idea-titular em { font-style: italic; }

.idea-entrada {
  font-size: var(--txt-md);
  font-weight: var(--peso-ligero);
  line-height: 1.7;
  color: var(--color-texto-secundario);
  max-width: 62ch;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════
   TRAYECTORIA — formación, estudios, distinciones y comunidad

   Es un currículum, y un currículum se lee por bloques, no de
   corrido. Cada grupo va con su etiqueta a la izquierda y el
   contenido a la derecha, separados por una línea: en una
   pantalla ancha se recorren las etiquetas de un vistazo y se
   entra solo al bloque que interesa. Por debajo de 800 px la
   etiqueta se pone encima, porque a dos columnas no cabría.
   ══════════════════════════════════════════════════════════ */

.trayectoria-grupo {
  display: grid;
  gap: var(--esp-1);
  padding-top: var(--esp-3);
  margin-top: var(--esp-3);
  border-top: 1px solid var(--color-borde);
}

@media (min-width: 800px) {
  .trayectoria-grupo {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--esp-4);
    padding-top: var(--esp-4);
    margin-top: var(--esp-4);
  }
}

.trayectoria-etiqueta {
  margin: 0;
  font-family: var(--font-cuerpo);
  font-size: var(--txt-sm);
  font-weight: var(--peso-cuerpo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
}

/* La rejilla da una columna de más de 850 px: sin tope, las
   líneas pasarían de 100 caracteres y costaría saltar de una a
   la siguiente. */
.trayectoria-cuerpo {
  max-width: 68ch;
}

.trayectoria-cuerpo > :first-child { margin-top: 0; }
.trayectoria-cuerpo > :last-child { margin-bottom: 0; }

.trayectoria-destacado {
  font-family: var(--font-titular);
  font-size: var(--txt-md);
  line-height: 1.3;
  margin: 0 0 4px;
}

.trayectoria-detalle {
  font-size: var(--txt-sm);
  font-weight: var(--peso-ligero);
  line-height: 1.65;
  color: var(--color-texto-secundario);
  margin: 0;
}

/* ── Las listas ──
   Sin viñeta redonda: un guion largo del color de acento ata la
   lista al resto de la página sin pesar como un punto negro. */
.trayectoria-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-2);
}

.trayectoria-lista li {
  position: relative;
  padding-left: var(--esp-3);
  font-weight: var(--peso-ligero);
  line-height: 1.65;
  color: var(--color-texto-secundario);
}

.trayectoria-lista li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-acento);
}

.trayectoria-lista p { margin: 0; }

.trayectoria-lista b {
  font-weight: var(--peso-cuerpo);
  color: var(--color-texto);
}

.trayectoria-lista i { font-style: italic; }

/* Las publicaciones llevan botón, así que respiran más */
.trayectoria-lista--publicaciones { gap: var(--esp-3); }

.trayectoria-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  margin: var(--esp-2) 0 0;
}

/* ══════════════════════════════════════════════════════════
   ESENCIA — compromiso, misión, visión y valores

   Iban como una lista de definición: tres filas idénticas de
   etiqueta y párrafo, que es exactamente como se ve un documento
   corporativo y no una marca. Aquí cada pieza tiene el peso que le
   toca: el compromiso manda porque es la promesa, misión y visión
   se leen en paralelo porque se complementan, y los valores son lo
   único que se puede leer de un vistazo.
   ══════════════════════════════════════════════════════════ */

.esencia { overflow: hidden; }

.esencia-cabecera {
  max-width: min(100%, 920px);
  margin-bottom: var(--esp-8);
}

/* El isotipo es 4.27:1: a tamaño pequeño se pierde, así que va
   ancho y suelto, como una firma sobre el bloque. */
.esencia-marca {
  display: block;
  width: clamp(120px, 14vw, 168px);
  height: auto;
  margin-bottom: var(--esp-4);
  opacity: 0.85;
}

.esencia-frase {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
  font-size: clamp(1.6rem, 3.4vw, var(--txt-2xl));
  line-height: 1.22;
  margin: var(--esp-2) 0 0;
  color: var(--color-texto-inverso);
  text-wrap: balance;
}

.esencia-frase em {
  font-style: italic;
  color: var(--color-acento-texto);
}

/* ── Misión y visión, en paralelo ── */
.esencia-par {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 820px) {
  .esencia-par { grid-template-columns: repeat(2, 1fr); gap: var(--esp-8); }
}

.esencia-pieza {
  padding-top: var(--esp-3);
  border-top: 2px solid var(--color-acento);
}

.esencia-etiqueta {
  display: block;
  margin-bottom: var(--esp-2);
  font-size: var(--txt-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-acento-texto);
}

.esencia-pieza p {
  margin: 0;
  font-weight: var(--peso-ligero);
  line-height: 1.75;
  color: var(--color-texto-inverso);
}

/* ── Los valores: lo único que se lee de un vistazo ── */
.esencia-valores {
  margin-top: var(--esp-8);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--velo-borde);
}

.esencia-valores ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

.esencia-valores li {
  padding: 9px 20px;
  border: 1px solid var(--velo-borde);
  border-radius: var(--radio-pill);
  font-family: var(--font-titular);
  font-size: var(--txt-base);
  color: var(--color-texto-inverso);
}

/* ── El equipo en rotación ──
   Texto y fotos a dos columnas. Las fotos usan el mismo relevo que las
   fichas de tratamiento (`.diapos`), así no hay un segundo carrusel con
   su propio comportamiento que mantener. */
.equipo-rotacion {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
}

@media (min-width: 860px) {
  .equipo-rotacion {
    grid-template-columns: 1fr 1fr;
    gap: var(--esp-8);
  }

  .equipo-rotacion > .diapos { margin-top: 0; }
}

/* Vertical 3:4, la proporción a la que se recortaron las fotos */
.equipo-rotacion .diapos-marco { --diapos-ratio: 3 / 4; }

.equipo-rotacion-texto { min-width: 0; }