/* Nosotros · nuestra historia
   Sólo lo PROPIO de esta sección. Lo compartido —fichas de color, menú,
   portada, cifras, hitos, pilares, mosaico, aliados, prensa, eventos,
   contacto, carrusel, video, pie— vive en v2.css, que se carga antes.
   La carga el layout a partir de `hojaSeccion` (ver views/layouts/v2.hbs). */

/* ─── Quiénes somos ───────────────────────────────────────────────── */
.somos { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.somos__texto { font-size: 21px; line-height: 1.6; }
.somos__texto b { font-weight: 800; }
.somos__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.somos__foto { aspect-ratio: 1; border-radius: var(--radio-sm); background: var(--linea) center / cover no-repeat; }

@media (max-width: 900px) {
  .somos { grid-template-columns: 1fr; gap: 26px; }
  .somos__texto { font-size: 18px; }
}

/* Mismo caso que en Travel: el texto llega del JSON con justify en línea. */
.somos__texto p { text-align: left !important; }

/* ─── Nuestras sedes: país arriba, ciudad grande ──────────────────── */
/* Dos bloques iguales, lado a lado en escritorio y apilados en el teléfono:
   gris oscuro, borde sutil, mucho aire y un ícono chico de ubicación. */
.sedes__intro { margin-bottom: 22px; }
.sedes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sede { display: flex; flex-direction: column; gap: 8px; padding: 34px 32px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); }
.sede__icono { width: 22px; height: 22px; color: var(--acento-chico); margin-bottom: 8px; }
.sede__pais { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.sede__ciudad { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
@media (max-width: 640px) {
  .sedes { grid-template-columns: 1fr; }
  .sede { padding: 26px 24px; align-items: center; text-align: center; }
  .sedes__intro { text-align: center; }
}

/* ─── Redes y alcance: título, intro y dos cifras grandes ─────────── */
.alcance-redes { text-align: center; max-width: 860px; margin-inline: auto; }
.alcance-redes__titulo { font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.alcance-redes__intro { margin: 16px auto 30px; max-width: 680px; }
.alcance-redes__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.alcance-redes .cifra__sub { font-size: 15px; margin-top: 10px; }
@media (max-width: 640px) {
  .alcance-redes__cifras { grid-template-columns: 1fr; }
}

/* ─── Marcas con las que hemos colaborado: marquesina ─────────────── */
/* Dos filas que avanzan solas en sentidos opuestos, a todo lo ancho, sin
   cajas: en cuadrícula 36 logos se amontonaban. Cada fila trae su lista dos
   veces seguidas y se recorre la mitad (una lista entera), así el giro no
   tiene corte. Los bordes se desvanecen con una máscara. Los logos ya son
   blancos y traen su tamaño de pantalla (width/height del <img>). */
.marcas-sec .rotulo { margin-bottom: 26px; }
.marquesina {
  display: flex; flex-direction: column; gap: 34px; overflow: hidden; padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquesina:focus-visible { outline: 2px solid var(--acento-chico); outline-offset: 4px; }
.marquesina__fila { display: flex; width: max-content; animation: marquesina 80s linear infinite; }
.marquesina__fila--reversa { animation-direction: reverse; animation-duration: 90s; }
.marquesina__pista { list-style: none; flex: none; display: flex; align-items: center; gap: 72px; padding-right: 72px; }
.marquesina__logo { flex: none; display: flex; align-items: center; height: 64px; }
.marquesina__logo img { display: block; opacity: .82; transition: opacity .2s; }
.marquesina__logo img:hover { opacity: 1; }
/* Se detiene para mirarla: con el cursor encima, al enfocarla o al tocarla. */
.marquesina:hover .marquesina__fila,
.marquesina:focus-within .marquesina__fila,
.marquesina:active .marquesina__fila { animation-play-state: paused; }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .marquesina { gap: 26px; }
  .marquesina__pista { gap: 48px; padding-right: 48px; }
  /* Un poco más chicos en el teléfono, sin perder la proporción de cada uno. */
  .marquesina__logo { height: 52px; }
  .marquesina__logo img { transform: scale(.82); }
}
/* Sin movimiento: filas quietas que se recorren con el dedo, sin la copia. */
@media (prefers-reduced-motion: reduce) {
  .marquesina__fila { animation: none; }
  .marquesina__fila { width: auto; overflow-x: auto; scrollbar-width: none; }
  .marquesina__pista[aria-hidden="true"] { display: none; }
}

/* El cierre lleva dos botones (WhatsApp y correo), centrados. */
.nosotros__acciones { justify-content: center; }

/* ─── 10 años de historia (2016–2026) ─────────────────────────────── */
/* El azul de la campaña del aniversario, más claro que el de marca
   (#1B17EF, que sobre el fondo oscuro casi no se ve): sólo en el «10», la
   línea punteada y los puntos; los textos van en blanco y gris. */
.decada { --aniv: #4F81FF; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.decada__marca { position: sticky; top: 110px; }
.decada__diez { font-size: clamp(120px, 16vw, 220px); font-weight: 900; letter-spacing: -.06em; line-height: .8; color: var(--aniv); }
.decada__titulo { font-size: clamp(28px, 3.2vw, 40px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-top: 18px; }
.decada__rango { font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--tinta-2); margin-top: 8px; }
.decada__lema { font-size: 16px; color: var(--tinta-2); margin-top: 16px; max-width: 360px; }
.decada__hitos { list-style: none; border-left: 2px dashed var(--aniv); padding-left: 26px; display: flex; flex-direction: column; gap: 22px; }
.decada__hito { position: relative; }
.decada__hito::before { content: ''; position: absolute; left: -34px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--aniv); }
.decada__hito--hoy::before { background: var(--aniv); }
.decada__anio { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--tinta-2); }
.decada__que { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
.decada__detalle { font-size: 14px; color: var(--tinta-2); margin-top: 2px; }
@media (max-width: 900px) {
  .decada { grid-template-columns: 1fr; gap: 30px; }
  .decada__marca { position: static; }
}

/* ─── Premios ─────────────────────────────────────────────────────── */
.premio__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.premio__icono { width: 26px; height: 26px; color: var(--acento-chico); flex: none; }