/* Estilos del sitio. Mobile-first; los tokens viven en tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fuente);
  font-weight: var(--peso-cuerpo);
  font-size: var(--texto-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  z-index: 20;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--texto-chico);
}
.saltar:focus { top: var(--espacio-2); }

.etiqueta {
  color: var(--label);
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

.titulo-seccion {
  font-size: var(--texto-titulo);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
}

main > section {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: clamp(72px, 11vw, 140px) var(--margen);
}

/* El SVG del grupo es cuadrado (1264×1264) pero la figura ocupa solo los 880 de arriba. */
.logo-grupo {
  aspect-ratio: 1264 / 880;
  object-fit: cover;
  object-position: top;
}

/* ---------- Fondo: logos flotantes ---------- */
/* Capa fija detrás de todo (z-index -1 sobre el lienzo del body). Solo se anima transform. */
.fondo-logos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.fondo-logos img {
  --tam: 28px;
  --giro: 0deg;
  --vuelta: 10deg;
  --dx: 24px;
  --dy: -32px;
  --dur: 30s;
  position: absolute;
  width: var(--tam);
  aspect-ratio: 1264 / 880;      /* el SVG del grupo es cuadrado: se recorta a la figura */
  object-fit: cover;
  object-position: top;
  opacity: 0.16;
  transform: rotate(var(--giro));
  animation: flotar var(--dur) ease-in-out calc(var(--dur) * -0.4) infinite alternate;
  will-change: transform;
}

@keyframes flotar {
  from { transform: translate3d(0, 0, 0) rotate(var(--giro)); }
  to { transform: translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--giro) + var(--vuelta))); }
}

/* Posiciones: sobre todo en los márgenes, para no quedar detrás de los titulares. */
.fondo-logos img:nth-child(1) { --tam: 40px; top: 16%; left: 4%;  --giro: -8deg; --dur: 34s; }
.fondo-logos img:nth-child(2) { --tam: 30px; top: 24%; left: 90%; --giro: 12deg; --dur: 28s; --dx: -20px; }
.fondo-logos img:nth-child(3) { --tam: 26px; top: 52%; left: 94%; --giro: -14deg; --dur: 31s; --dy: 28px; }
.fondo-logos img:nth-child(4) { --tam: 28px; top: 72%; left: 3%;  --giro: 6deg; --dur: 26s; }
.fondo-logos img:nth-child(5) { --tam: 24px; top: 90%; left: 34%; --giro: -10deg; --dur: 37s; --dx: -28px; }
.fondo-logos img:nth-child(6) { --tam: 32px; top: 9%;  left: 60%; --giro: 18deg; --dur: 29s; --dy: 24px; }
.fondo-logos img:nth-child(7) { --tam: 46px; top: 82%; left: 80%; --giro: -4deg; --dur: 40s; --dx: -30px; }
.fondo-logos img:nth-child(8) { --tam: 22px; top: 62%; left: 66%; --giro: 9deg; --dur: 24s; }
.fondo-logos img:nth-child(9) { --tam: 20px; top: 93%; left: 58%; --giro: -16deg; --dur: 33s; --dy: 30px; }
.fondo-logos img:nth-child(10) { --tam: 26px; top: 46%; left: 1.5%; --giro: 14deg; --dur: 35s; --dx: 16px; }
.fondo-logos img:nth-child(11) { --tam: 34px; top: 66%; left: 88%; --giro: -9deg; --dur: 27s; --dy: 26px; }
.fondo-logos img:nth-child(12) { --tam: 24px; top: 28%; left: 70%; --giro: 5deg; --dur: 38s; --dx: -22px; }

/* Celular: menos logos y más chicos. */
@media (max-width: 639px) {
  .fondo-logos img:nth-child(5),
  .fondo-logos img:nth-child(8),
  .fondo-logos img:nth-child(9),
  .fondo-logos img:nth-child(12) { display: none; }
  .fondo-logos img { width: calc(var(--tam) * 0.75); opacity: 0.12; }
  .fondo-logos img:nth-child(2) { left: 84%; }
  .fondo-logos img:nth-child(3) { left: 88%; }
  .fondo-logos img:nth-child(7) { left: 74%; }
  .fondo-logos img:nth-child(11) { left: 86%; }
}

/* ---------- Barra ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
}

.barra__interior {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--espacio-3) var(--margen);
  display: flex;
  align-items: center;
  gap: var(--espacio-5);
}

.barra__marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  text-decoration: none;
  font-weight: var(--peso-enfasis);
  font-size: var(--texto-chico);
  letter-spacing: 0.08em;
}
.barra__marca img { width: 36px; }

.barra__nav { display: none; }
.barra__nav a,
.idiomas button {
  color: var(--text-secondary);
  font-size: var(--texto-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  font-weight: var(--peso-titular);
  transition: color var(--duracion) var(--curva);
}
.barra__nav a:hover,
.idiomas button:hover { color: var(--text); }

.idiomas {
  margin-left: auto;
  display: flex;
  gap: var(--espacio-1);
}
.idiomas button {
  min-width: 32px;
  min-height: 32px;
  letter-spacing: 0.08em;
}
.idiomas button[aria-pressed="true"] {
  color: var(--text);
  font-weight: var(--peso-enfasis);
}

@media (min-width: 768px) {
  .barra__nav { display: flex; gap: var(--espacio-5); margin-left: auto; }
  .idiomas { margin-left: var(--espacio-4); }
}

/* ---------- Portada ---------- */
.portada {
  min-height: calc(100svh - 70px);
  display: grid;
  align-content: center;
  gap: var(--espacio-6);
}

.portada__texto { display: grid; gap: var(--espacio-4); }

.portada__titulo {
  font-size: var(--texto-display);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  max-width: 12ch;
}

.portada__logo {
  width: clamp(120px, 34vw, 200px);
  order: -1;
}

@media (min-width: 1025px) {
  .portada {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
  }
  .portada__logo {
    order: 0;
    width: min(100%, 420px);
    justify-self: end;
  }
}

/* ---------- Quiénes somos ---------- */
.quienes {
  display: grid;
  gap: var(--espacio-5);
}

.quienes__texto {
  max-width: 58ch;
  color: var(--text);
}

.quienes__mision {
  display: grid;
  gap: var(--espacio-3);
  padding-top: var(--espacio-5);
}

.quienes__mision-texto {
  font-size: var(--texto-destacado);
  font-weight: var(--peso-titular);
  letter-spacing: -0.02em;
  line-height: 1.3;
  max-width: 34ch;
}

@media (min-width: 1025px) {
  .quienes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--espacio-7); }
  .quienes__mision { grid-column: 1 / -1; padding-top: var(--espacio-6); }
}

/* ---------- Galería de empresas ---------- */
.empresas { display: grid; gap: var(--espacio-6); }

.empresas__grilla {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
/* Respaldo sin JavaScript: misma información que las tarjetas, en texto. */
.empresas__respaldo li { display: grid; gap: var(--espacio-1); color: var(--text-secondary); }
.empresas__respaldo h3 { font-size: var(--texto-destacado); font-weight: var(--peso-titular); color: var(--text); }
.empresas__respaldo a { color: var(--link); }

@media (min-width: 640px) {
  .empresas__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.empresa {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3.2vw, 44px);
  background: var(--surface);
  border-radius: var(--radio);
  transition: transform var(--duracion) var(--curva), background-color var(--duracion) var(--curva);
}
.empresa:hover { background: var(--surface-raised); }

/* Entrada tipo galería: solo con JavaScript, para que sin él las tarjetas se vean igual. */
.js .empresa { opacity: 0; }
.js .empresa.es-visible {
  opacity: 1;
  animation: entrar var(--duracion-entrada) var(--curva) backwards;
}
.js .empresa.es-visible:nth-child(2) { animation-delay: 150ms; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.empresa__cabecera {
  display: grid;
  gap: var(--espacio-4);
}

.empresa__logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
}
.empresa__logo img { width: 30px; }

.empresa__marco {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radio-chico);
  overflow: hidden;
  background: var(--bg);
}

.empresa__captura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity var(--duracion) var(--curva), transform 600ms var(--curva);
}
.empresa__captura--celular {
  inset: 7% auto auto 50%;
  width: auto;
  height: 86%;
  aspect-ratio: 390 / 844;
  border-radius: 8px;
  translate: -50% 0;
}
.empresa__captura.es-activa { opacity: 1; }

.empresa__puntos {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--espacio-1);
  margin-top: var(--espacio-2);
}

.empresa__punto {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.empresa__punto::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-secondary);
  opacity: 0.45;
  transition: opacity var(--duracion) var(--curva);
}
.empresa__punto:hover::before { opacity: 0.8; }
.empresa__punto[aria-pressed="true"]::before { background: var(--text); opacity: 1; }

.empresa__tipo {
  margin-top: clamp(28px, 5vw, 56px);
  color: var(--text-secondary);
  font-size: var(--texto-chico);
}

.empresa__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
  margin-top: var(--espacio-1);
}
.empresa__titulo h3 {
  white-space: nowrap;
  font-size: clamp(1.875rem, 11cqi, 3.5rem);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
}

.empresa__estado {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--radio-chico);
  background: var(--bg);
  color: var(--label);
  font-size: var(--texto-etiqueta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.empresa__descripcion {
  margin-top: var(--espacio-3);
  max-width: 42ch;
  color: var(--text-secondary);
}

.empresa__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
  margin-top: auto;
  padding-top: clamp(28px, 4vw, 48px);
  font-size: var(--texto-chico);
}
.empresa__dominio { color: var(--text-secondary); }

.empresa__visitar {
  color: var(--link);
  text-decoration: none;
  font-size: var(--texto-etiqueta);
  font-weight: var(--peso-titular);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  text-underline-offset: 5px;
}
/* Toda la tarjeta es el enlace; los puntos quedan por encima. */
.empresa__visitar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radio);
}
.empresa__visitar:focus-visible { outline: none; }
.empresa:has(.empresa__visitar:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}
.empresa:hover .empresa__visitar { color: var(--link-hover); text-decoration: underline; }

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tarjeta ancha: logo a la izquierda y captura a la derecha, como en la referencia. */
@container (min-width: 420px) {
  .empresa__cabecera {
    grid-template-columns: auto minmax(0, 72%);
    justify-content: space-between;
    align-items: start;
  }
}

/* PC: hover leve como pista. */
@media (hover: hover) and (min-width: 1025px) {
  .empresa:hover { transform: translateY(-4px); }
  .empresa:hover .empresa__captura--escritorio { transform: scale(1.02); }
}

/* ---------- Contacto y pie ---------- */
.contacto { display: grid; gap: var(--espacio-3); }

/* Un correo por empresa: apilados en celular y tablet, lado a lado en PC. */
.contacto__correos {
  display: grid;
  gap: var(--espacio-5);
  margin-top: var(--espacio-3);
}
.contacto__correos li {
  display: grid;
  justify-items: start;
  gap: var(--espacio-1);
}
@media (min-width: 1025px) {
  .contacto__correos { grid-template-columns: repeat(2, max-content); column-gap: var(--espacio-7); }
}

.contacto__correo {
  font-size: var(--texto-destacado);
  font-weight: var(--peso-cuerpo);
  color: var(--link);
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
  word-break: break-word;
  transition: color var(--duracion) var(--curva);
}
.contacto__correo:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.pie {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding: var(--espacio-5) var(--margen) var(--espacio-6);
  color: var(--text-secondary);
  font-size: var(--texto-chico);
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Reducir movimiento: sin entrada animada ni desplazamientos; el hover solo resalta. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .empresa { opacity: 1; }
  .empresa:hover { transform: none; }
  .empresa:hover .empresa__captura--escritorio { transform: none; }
}

.pie__credito {
  margin-top: var(--espacio-2);
  font-size: var(--texto-etiqueta);
}
.pie__credito a { text-underline-offset: 3px; }