/* Estudios Insurgentes — sitio
   Tokens del manual de identidad v2. Cuatro colores, una grotesca en regular,
   mono solo para valores medidos, radio 0, sin sombras. */

:root {
  /* Base */
  --ei-sala: #080807;
  --ei-papel: #EDEAE4;
  --ei-rosa: #E4007C;
  --ei-concreto: #8F8B83;

  /* Texto sobre sala */
  --ei-texto: #EDEAE4;
  --ei-texto-suave: #B8B4AC;
  --ei-texto-tenue: #7A776F;

  /* Superficies */
  --ei-panel: #0E0E0D;
  --ei-linea: #1A1A18;
  --ei-linea-fuerte: #2A2A27;

  /* Tipografía */
  --ei-fuente: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ei-fuente-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ei-track-titulo: 0.02em;
  --ei-track-rotulo: 0.2em;
  /* El manual fija los rótulos en 11 px; en pantalla se leían chicos y Nacho los pidió
     un punto más grandes. Un solo lugar para moverlos. */
  --ei-t-rotulo: 12.5px;
  --ei-t-nav: 12px;

  /* Rejilla — el padding de sección del manual es 80 px; abajo de 1000 px cede */
  --ei-seccion-x: clamp(24px, 5.6vw, 80px);
  --ei-transicion: 120ms linear;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ei-sala);
}

body {
  color: var(--ei-texto);
  font-family: var(--ei-fuente);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 1 auto; }

a {
  color: var(--ei-rosa);
  text-decoration: none;
  transition: color var(--ei-transicion), border-color var(--ei-transicion);
}
a:hover { color: var(--ei-papel); }

::selection { background: var(--ei-rosa); color: var(--ei-papel); }

img { max-width: 100%; }

/* Rótulos y valores — las dos primitivas de texto del sistema.
   El rótulo va en grotesca caja alta con tracking 0.2em, NUNCA en mono.
   El valor va en mono, y solo para datos medidos (aquí: folios y año). */
.rotulo {
  font-size: var(--ei-t-rotulo);
  letter-spacing: var(--ei-track-rotulo);
  text-transform: uppercase;
  color: var(--ei-concreto);
}

.valor {
  font-family: var(--ei-fuente-mono);
  font-size: 12px;
  color: var(--ei-texto-tenue);
}

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ei-sala);
  border-bottom: 1px solid var(--ei-linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 var(--ei-seccion-x);
  height: 104px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  color: var(--ei-papel);
}
.marca:hover { color: var(--ei-papel); }

.simbolo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: block;
}

.logotipo {
  font-size: 15px;
  letter-spacing: var(--ei-track-titulo);
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
}

.navegacion {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}

.enlace-nav {
  font-size: var(--ei-t-nav);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ei-concreto);
  white-space: nowrap;
}
.enlace-nav:hover { color: var(--ei-papel); }

.boton {
  font-size: var(--ei-t-nav);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ei-papel);
  border: 1px solid var(--ei-linea-fuerte);
  padding: 13px 22px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.boton:hover {
  color: var(--ei-papel);
  border-color: var(--ei-rosa);
}
.boton-activo { border-color: var(--ei-rosa); }

/* Selector de idioma — el globo es una forma geométrica de un solo trazo,
   no un ícono importado: el sistema no usa librerías de íconos. */
.idioma { position: relative; display: flex; }

.idioma-boton {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ei-concreto);
  display: flex;
  align-items: center;
  transition: color var(--ei-transicion);
}
.idioma-boton:hover { color: var(--ei-papel); }
.idioma-boton svg { width: 20px; height: 20px; display: block; }

.idioma-menu {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  z-index: 50;
  background: var(--ei-panel);
  border: 1px solid var(--ei-linea-fuerte);
  display: flex;
  flex-direction: column;
  min-width: 148px;
}
.idioma-menu[hidden] { display: none; }

.idioma-opcion {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--ei-concreto);
  padding: 13px 20px;
  transition: color var(--ei-transicion), background-color var(--ei-transicion);
}
.idioma-opcion:hover { color: var(--ei-papel); background: #141416; }
.idioma-opcion.activo { color: var(--ei-papel); box-shadow: inset 3px 0 0 var(--ei-rosa); }

/* ---------- Portada ---------- */

.portada {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ei-linea);
  min-height: 660px;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--ei-seccion-x) 96px;
}

/* Patrón de marca: ondas concéntricas de 2 px cada 58 px, una sola tinta.
   Nunca se parte y nunca pasa por detrás de texto corrido — de eso se encarga el velo. */
.patron {
  position: absolute;
  left: -1520px;
  top: -1000px;
  width: 2600px;
  height: 2600px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(228, 0, 124, 0.45) 0 2px, transparent 2px 58px);
  pointer-events: none;
}

.velo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 340px;
  background: linear-gradient(to top, var(--ei-sala) 12%, rgba(8, 8, 7, 0) 100%);
  pointer-events: none;
}

.portada-texto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 1000px;
}

.portada-texto h1 {
  margin: 0;
  font-size: clamp(42px, 9.4vw, 86px);
  font-weight: 400;
  letter-spacing: var(--ei-track-titulo);
  text-transform: uppercase;
  line-height: 0.98;
}

.portada-texto p {
  margin: 0;
  font-size: clamp(18px, 3.4vw, 23px);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ei-texto-suave);
  max-width: 40ch;
  text-wrap: balance;
}

/* ---------- Bloques de contenido ---------- */

.bloque {
  padding: 96px var(--ei-seccion-x);
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 80px;
}
.bloque + .bloque { border-top: 1px solid var(--ei-linea); }

/* El ingeniero */

.ingeniero-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.ingeniero-cuerpo .nombre { margin-bottom: 6px; }
.ingeniero-cuerpo .enlace-texto { margin-top: 6px; }

.nombre {
  margin: 0;
  font-size: clamp(28px, 6.4vw, 40px);
  letter-spacing: var(--ei-track-titulo);
  text-transform: uppercase;
  line-height: 1.1;
}

.credenciales {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.credenciales li {
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ei-texto-suave);
}

/* «Entre otros» cierra la lista; el dato de muso.ai va debajo, con el mismo peso
   que las credenciales — es un dato más, no un remate. */
.entre-otros {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ei-texto-suave);
}

.credencial-muso {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ei-texto-suave);
  max-width: 46ch;
  text-wrap: pretty;
}

.enlace-texto {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ei-concreto);
  border-bottom: 1px solid var(--ei-linea-fuerte);
  padding-bottom: 3px;
}
.enlace-texto:hover {
  color: var(--ei-rosa);
  border-bottom-color: var(--ei-rosa);
}

/* Servicios */

.servicio-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.servicio-nota {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ei-concreto);
  max-width: 52ch;
  text-wrap: pretty;
}

.servicios-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.servicio {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 30px;
  align-items: baseline;
  padding: 34px 0;
  border-top: 1px solid var(--ei-linea);
}
.servicio:last-child { border-bottom: 1px solid var(--ei-linea); }

.servicio-nombre {
  font-size: clamp(28px, 6.4vw, 40px);
  letter-spacing: var(--ei-track-titulo);
  text-transform: uppercase;
  line-height: 1.1;
}

/* Contacto */

.contacto-lista {
  display: flex;
  flex-direction: column;
}

.contacto-fila {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 34px 0;
  border-top: 1px solid var(--ei-linea);
}
.contacto-fila:last-child { border-bottom: 1px solid var(--ei-linea); }

/* Correos y arrobas van en caja normal: son datos, no títulos */
.contacto-dato {
  font-size: clamp(21px, 4.6vw, 28px);
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--ei-papel);
}
.contacto-dato:hover { color: var(--ei-rosa); }

/* ---------- Galería ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border-top: 1px solid var(--ei-linea);
}

.galeria img {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 520px);
  object-fit: cover;
}

/* Encuadre por foto — el recorte es dirección de arte, va con la imagen */
.galeria img:nth-child(1) { object-position: center 58%; }
.galeria img:nth-child(2) { object-position: center 45%; }
.galeria img:nth-child(3) { object-position: center 60%; }

/* ---------- Pie ---------- */

.pie {
  padding: 60px var(--ei-seccion-x) 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  border-top: 1px solid var(--ei-linea);
}

.pie-marca {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ei-concreto);
}

/* Abajo de 32 px se cae la suspensión rosa: aquí va el símbolo mínimo */
.simbolo-minimo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: block;
}

.pie-contacto {
  display: flex;
  align-items: baseline;
  gap: 34px;
}

.pie-contacto a.rotulo { color: var(--ei-concreto); }
.pie-contacto a.rotulo:hover { color: var(--ei-papel); }
.pie-contacto .valor { font-size: var(--ei-t-nav); }

/* ---------- Pantallas chicas ---------- */

@media (max-width: 1000px) {
  .enlace-nav { display: none; } /* Instagram vive permanente en el pie */
}

@media (max-width: 900px) {
  .bloque {
    padding: 64px var(--ei-seccion-x);
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .galeria { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .encabezado {
    height: 80px;
    gap: 20px;
  }

  .navegacion { gap: 18px; }

  .simbolo { width: 36px; height: 36px; }
  .logotipo { font-size: 13px; }

  .boton {
    font-size: 11px;
    letter-spacing: 0.14em;
    padding: 11px 14px;
  }

  .idioma-menu { top: calc(100% + 14px); }

  .portada {
    min-height: max(440px, 74svh);
    padding-bottom: 64px;
  }

  .portada-texto { gap: 28px; }

  .patron {
    left: -1020px;
    top: -560px;
    width: 1620px;
    height: 1620px;
    background: repeating-radial-gradient(circle, rgba(228, 0, 124, 0.45) 0 2px, transparent 2px 44px);
  }

  /* Velo superior, solo móvil: recorta ~1/4 de arriba del patrón difuminándolo
     hacia el fondo de sala. Espejo del .velo de abajo; en escritorio no existe. */
  .portada::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 25%;
    background: linear-gradient(to bottom, var(--ei-sala) 40%, rgba(8, 8, 7, 0) 100%);
    pointer-events: none;
    z-index: 2;
  }

  .credenciales li,
  .entre-otros,
  .credencial-muso { font-size: 16px; }

  .servicio {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 20px;
    padding: 26px 0;
  }

  .contacto-fila { padding: 26px 0; }

  .pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding-top: 44px;
  }

  .pie-contacto {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}