/* ============================================================================
   ESTILOS DEL SITIO — EPARQS
   ============================================================================
   Organización del archivo:
   1. Variables (colores, tipografía, espaciados) — TODO lo que quieras
      cambiar de aspecto general del sitio se edita ACÁ ARRIBA.
   2. Reset básico y estilos generales
   3. Utilidades (contenedor, botones, etc.)
   4. Header / navegación
   5. Cada sección del sitio, en el mismo orden en que aparecen en index.html
   6. Footer
   7. Media queries grandes (si hace falta algún ajuste que no entró arriba)
   ========================================================================= */

/* ----------------------------------------------------------------------
   1. VARIABLES — editá acá los colores y tipografías del sitio entero
   ---------------------------------------------------------------------- */
:root {
  /* Paleta: escala de grises + un único acento sutil.
     Para cambiar el "look" del sitio, alcanza con tocar estos valores. */
  --color-fondo: #ffffff;
  --color-fondo-alterno: #f4f3f1;       /* gris muy claro, para secciones alternadas */
  --color-texto: #1a1a18;               /* negro cálido, no negro puro */
  --color-texto-suave: #5c5b57;         /* gris medio, para bajadas y textos secundarios */
  --color-borde: #dedcd7;
  --color-acento: #2d3693;              /* azul del logo real — hover de links, badges, filtro activo */
  --color-acento-suave: #e8e9f5;        /* fondo del acento (badges, etc.) */
  --color-overlay-hero: rgba(20, 19, 17, 0.45); /* oscurece la foto de portada para legibilidad */

  /* Tipografía: una sola familia, variando el peso entre títulos y cuerpo.
     Se carga "Work Sans" desde Google Fonts, con una pila de respaldo por
     si el sitio se abre sin conexión a internet. */
  --fuente-principal: "Work Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Serif itálica para la palabra de acento del título del hero (*así*) */
  --fuente-acento: "Playfair Display", Georgia, "Times New Roman", serif;
  --tracking-titulos: 0.01em;

  /* Espaciados y medidas reutilizables */
  --ancho-maximo: 1180px;
  --radio-borde: 2px;
  --sombra-tarjeta: 0 1px 3px rgba(0, 0, 0, 0.06);
  --transicion: 0.2s ease;
}

/* ----------------------------------------------------------------------
   2. RESET BÁSICO Y ESTILOS GENERALES
   ---------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-principal);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: var(--tracking-titulos);
  line-height: 1.2;
}

/* Link "saltar al contenido", solo visible al navegar con teclado (accesibilidad) */
.enlace-saltar {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-texto);
  color: var(--color-fondo);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.enlace-saltar:focus {
  left: 1rem;
  top: 1rem;
}

/* Estado de foco visible y consistente en todo el sitio */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------
   3. UTILIDADES
   ---------------------------------------------------------------------- */
.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.seccion {
  padding: 5rem 0;
}

.seccion--alterna {
  background: var(--color-fondo-alterno);
}

.encabezado-seccion {
  max-width: 640px;
  margin-bottom: 3rem;
}

.encabezado-seccion .eyebrow {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-acento);
  margin-bottom: 0.75rem;
}

.encabezado-seccion h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

.encabezado-seccion p {
  color: var(--color-texto-suave);
  font-size: 1.05rem;
}

.boton {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--color-texto);
  border-radius: var(--radio-borde);
  font-size: 0.95rem;
  transition: background var(--transicion), color var(--transicion);
}

.boton:hover {
  background: var(--color-texto);
  color: var(--color-fondo);
}

.boton--claro {
  border-color: var(--color-fondo);
  color: var(--color-fondo);
}

.boton--claro:hover {
  background: var(--color-fondo);
  color: var(--color-texto);
}

/* ----------------------------------------------------------------------
   4. HEADER / NAVEGACIÓN
   ---------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  background: rgba(255, 255, 255, 0);
  transition: background var(--transicion), box-shadow var(--transicion), padding var(--transicion);
}

/* Franja oscura fija detrás del header, independiente de la foto de
   portada: así el logo y el menú se leen bien sin importar qué imagen
   uses de fondo (no depende de que esa zona de la foto sea oscura). */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 170px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  transition: opacity var(--transicion);
}

.header.header--con-fondo::before {
  opacity: 0;
}

/* Cuando el usuario scrollea, JS agrega esta clase para que el header
   pase a tener fondo blanco sólido y no se confunda con la foto del hero */
.header.header--con-fondo {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 var(--color-borde);
  padding: 0.75rem 1.5rem;
}

.header__marca {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-texto);
}

/* Tarjeta blanca detrás del logo: como el logo es a color (no monocromático),
   en vez de invertirlo a blanco sobre la foto de portada le damos un fondo
   blanco propio, así se lee igual de bien en los dos estados del header. */
.header__logo-img {
  height: 32px;
  width: auto;
  display: block;
}

/* Logo claro (logo-hero.png): va sobre la foto de portada. Sombra suave
   para que se distinga incluso sobre zonas claras de la foto. Se muestra
   por default y se oculta cuando el header pasa a fondo blanco. */
.header__logo-img--claro {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.header.header--con-fondo .header__logo-img--claro {
  display: none;
}

/* Logo oscuro (logo-header.jpg): pensado para fondo blanco. Oculto por
   default, se muestra solo cuando el header pasa a fondo blanco sólido. */
.header__logo-img--oscuro {
  display: none;
}
.header.header--con-fondo .header__logo-img--oscuro {
  display: block;
}

/* En el hero (fondo oscuro) la marca se ve blanca; JS controla la clase */
.header:not(.header--con-fondo) .header__marca,
.header:not(.header--con-fondo) .nav__link {
  color: #fff;
}

.nav__lista {
  display: flex;
  gap: 2.1rem;
}

.nav__link {
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), color var(--transicion);
}

.nav__link:hover {
  border-color: currentColor;
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.4rem;
}

.nav__toggle-barra {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: transform var(--transicion), opacity var(--transicion);
}

.header:not(.header--con-fondo) .nav__toggle {
  color: #fff;
}

/* ----------------------------------------------------------------------
   5. HERO
   ---------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder del hero: gradiente prolijo en escala de grises, mientras
   no haya una foto real en img/hero/portada.jpg (ver img/hero/LEEME.txt) */
.hero__fondo--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, #3a3834 0%, #201f1d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.hero__fondo--placeholder span {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 320px;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Viñeta: oscuro solo en una franja fina arriba (el header ya tiene su
     propio scrim independiente, ver .header::before, así que acá no hace
     falta oscurecer de más) y otra abajo (para el título y el botón) — el
     centro queda bien claro para que la foto se vea con su color real. */
  background:
    linear-gradient(90deg, rgba(10,10,9,0.05) 0%, rgba(10,10,9,0.22) 100%),
    linear-gradient(
      180deg,
      rgba(8,8,7,0.5) 0%,
      rgba(8,8,7,0.1) 15%,
      rgba(10,10,9,0.1) 60%,
      rgba(8,8,7,0.78) 100%
    );
}

.hero__contenido {
  /* El contenido queda anclado abajo (.hero usa align-items: flex-end), así
     que el padding inferior es lo que define qué tan cerca del borde de
     abajo (la parte más oscura del degradado) quedan el botón y los
     servicios — lo bajamos para que tengan mejor contraste. */
  padding: 3.5rem 1.5rem 3rem;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  width: 100%;
}

.hero__titulo {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  font-weight: 500;
  line-height: 1.1;
  max-width: 780px;
}

/* Tamaños alternativos del título, elegibles desde contenido.hero.tamanioTitulo
   (o desde el editor visual) sin tener que tocar CSS */
.hero__titulo--chico {
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  max-width: 680px;
}

.hero__titulo--grande {
  font-size: clamp(2.8rem, 7.6vw, 5.4rem);
  max-width: 900px;
}

/* La palabra marcada con *asteriscos* en contenido.hero.titulo se
   convierte en <em> y se muestra en la serif itálica de acento */
.hero__titulo em {
  font-family: var(--fuente-acento);
  font-style: italic;
  font-weight: 400;
}

.hero__divisor {
  width: 64px;
  height: 3px;
  margin-top: 1.5rem;
  background: var(--color-fondo);
  opacity: 0.85;
}

.hero__bajada {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 540px;
}

.hero__cta {
  margin-top: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}

.hero__cta:hover {
  background: var(--color-fondo);
  border-color: var(--color-fondo);
  color: var(--color-texto);
}

.hero__cta-flecha {
  transition: transform var(--transicion);
}

.hero__cta:hover .hero__cta-flecha {
  transform: translateX(3px);
}

.hero__servicios {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.hero__servicios li {
  display: flex;
  align-items: center;
}

/* Puntito de acento entre cada servicio, en vez de separador de texto */
.hero__servicios li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-acento);
  margin: 0 0.9rem;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------------
   5.0 CLIENTES (franja de logos)
   ---------------------------------------------------------------------- */
.seccion--clientes {
  padding: 3rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.clientes__eyebrow {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  margin-bottom: 2rem;
}

.seccion--clientes .contenedor {
  max-width: 1650px;
}

.clientes__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3.5rem;
}

.clientes__fila img {
  max-height: 45px;
  width: auto;
  max-width: 172px;
  object-fit: contain;
}

/* ----------------------------------------------------------------------
   5.1 EL ESTUDIO
   ---------------------------------------------------------------------- */
.estudio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.estudio__texto p {
  color: var(--color-texto-suave);
  margin-bottom: 1.1rem;
  font-size: 1.05rem;
}

.estudio__datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
  padding: 2rem;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
}

.estudio__dato dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-suave);
  margin-bottom: 0.35rem;
}

.estudio__dato dd {
  font-size: 1.6rem;
  font-weight: 500;
}

.estudio__dato dd small {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-texto-suave);
  display: block;
}

/* ----------------------------------------------------------------------
   5.2 SERVICIOS
   ---------------------------------------------------------------------- */
.servicios__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-borde);
  border: 1px solid var(--color-borde);
}

.servicio {
  position: relative;
  overflow: hidden;
  background: var(--color-fondo);
  padding: 2.5rem 2rem;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

/* Trazo de acento que aparece arriba de la card al pasar el mouse */
.servicio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.servicio:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-tarjeta);
  z-index: 1;
}

.servicio:hover::before {
  transform: scaleX(1);
}

/* El número pasa a ser una cifra grande "marca de agua" detrás del texto,
   en vez de una etiqueta chica arriba del título — le da presencia visual
   a cada card sin agregar elementos nuevos. */
.servicio__numero {
  position: absolute;
  top: -0.6rem;
  right: 1.1rem;
  font-size: 5.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-acento);
  opacity: 0.08;
  transition: opacity var(--transicion);
  pointer-events: none;
  user-select: none;
}

.servicio:hover .servicio__numero {
  opacity: 0.16;
}

.servicio h3 {
  position: relative;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.servicio p {
  position: relative;
  color: var(--color-texto-suave);
  font-size: 0.98rem;
}

/* ----------------------------------------------------------------------
   5.3 PORTFOLIO / OBRAS
   ---------------------------------------------------------------------- */

/* Barra de categorías: texto simple centrado con divisores finos entre
   cada una (estilo editorial, referencia MRA), sin forma de botón — la
   categoría activa se distingue por color y peso, no por un relleno. */
.portfolio__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.portfolio__tab {
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-borde);
  border-bottom: 2px solid transparent;
  padding: 0.5rem 1.75rem 0.6rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-texto-suave);
  transition: all var(--transicion);
}

.portfolio__tab:last-child {
  border-right: none;
}

.portfolio__tab:hover {
  color: var(--color-texto);
}

.portfolio__tab.activo {
  color: var(--color-acento);
  font-weight: 700;
  border-bottom-color: var(--color-acento);
}

/* La grilla vive fuera de .contenedor (ver index.html) para aprovechar más
   ancho de pantalla; acá la centramos con un tope generoso para que en
   monitores muy anchos las fotos no se estiren de más. */
.portfolio__grilla {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  max-width: 1800px;
  margin: 2.5rem auto 0;
}

/* Cuando hay más de 3 filas, portfolio.js le pone un alto máximo y esta
   clase — el degradado hacia blanco insinúa que hay más para ver abajo. */
.portfolio__grilla--recortada {
  overflow: hidden;
}

.portfolio__grilla--recortada::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-fondo) 85%);
  pointer-events: none;
}

.portfolio__ver-mas-wrap {
  display: flex;
  justify-content: center;
}

.portfolio__ver-mas {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.8rem;
  border: 1px solid var(--color-borde);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color var(--transicion), color var(--transicion);
}

.portfolio__ver-mas:hover {
  border-color: var(--color-acento);
  color: var(--color-acento);
}

.tarjeta-obra {
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
}

.tarjeta-obra__imagen-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e9e7e3;
}

.tarjeta-obra__imagen-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tarjeta-obra:hover .tarjeta-obra__imagen-wrap img {
  transform: scale(1.04);
}

/* Placeholder de una imagen de obra: se muestra cuando la foto del proyecto
   todavía no existe (ver el sistema de fallback en portfolio.js). Se usa
   tanto en las tarjetas de la grilla como en la imagen grande del modal. */
.placeholder-imagen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  text-align: center;
  background: repeating-linear-gradient(
    135deg,
    #e9e7e3,
    #e9e7e3 10px,
    #e2dfda 10px,
    #e2dfda 20px
  );
}

.placeholder-imagen span {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  font-weight: 500;
}

.tarjeta-obra__leed {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-acento);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.36rem 0.72rem;
}

.tarjeta-obra__leed img {
  width: 19px;
  height: 19px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Datos superpuestos abajo de la foto, sobre un degradado oscuro — mismo
   lenguaje visual que el overlay de la portada (hero). Así cada obra se ve
   como una pieza de portfolio y no como una card de catálogo. */
.tarjeta-obra__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(15, 14, 12, 0.82), rgba(15, 14, 12, 0) 75%);
  color: #fff;
}

.tarjeta-obra__cliente {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 0.3rem;
}

.tarjeta-obra__titulo {
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.45rem;
}

.tarjeta-obra__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.portfolio__vacio {
  color: var(--color-texto-suave);
  padding: 2rem 1.5rem;
  font-size: 0.95rem;
}

/* ----------------------------------------------------------------------
   5.4 MODAL DE FICHA DE OBRA (lightbox)
   ---------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 2.5rem 1.25rem;
  background: rgba(15, 14, 13, 0.72);
}

.modal.abierto {
  display: flex;
}

.modal__caja {
  background: var(--color-fondo);
  max-width: 780px;
  width: 100%;
  position: relative;
  margin: auto;
}

.modal__cerrar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__imagen-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #e9e7e3;
}

.modal__imagen-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal__galeria-miniaturas {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-fondo-alterno);
  overflow-x: auto;
}

.modal__galeria-miniaturas img {
  width: 84px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--transicion);
  flex-shrink: 0;
}

.modal__galeria-miniaturas img:hover,
.modal__galeria-miniaturas img.activa {
  opacity: 1;
}

.modal__cuerpo {
  padding: 2rem 2.25rem 2.25rem;
}

.modal__cliente {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-acento);
  margin-bottom: 0.5rem;
}

.modal__titulo {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.modal__ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-borde);
}

.modal__ficha dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
  margin-bottom: 0.3rem;
}

.modal__ficha dd {
  font-size: 1rem;
}

.leed-icono {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 0.4rem;
  margin-top: -0.15rem;
}

/* ----------------------------------------------------------------------
   5.5 EQUIPO
   ---------------------------------------------------------------------- */
.equipo__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.persona__foto-wrap {
  position: relative;
  width: 70%;
  aspect-ratio: 3 / 4;
  background: #e9e7e3;
  margin: 0 auto 1.25rem;
  overflow: hidden;
}

.persona__foto-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona__foto-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ece9e4;
}

.persona__foto-placeholder span {
  font-size: 2.5rem;
  font-weight: 500;
  color: #c9c5bd;
}

.persona__nombre {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.persona__titulo {
  font-size: 0.9rem;
  color: var(--color-acento);
  margin-bottom: 0.75rem;
}

.persona__rol {
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}

/* Resto del equipo (Asociados Senior, Semi Senior, Juniors): lista simple
   sin foto, agrupada por categoría, debajo de las tarjetas de los socios */
.equipo__ampliado {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-borde);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.equipo__categoria-titulo {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

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

.persona-chica {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.persona-chica:last-child {
  border-bottom: none;
}

.persona-chica__foto-wrap {
  position: relative;
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  background: #ece9e4;
}

.persona-chica__foto-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-chica__foto-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.persona-chica__foto-placeholder span {
  font-size: 1.22rem;
  font-weight: 500;
  color: #c9c5bd;
}

.persona-chica__datos {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.persona-chica__datos strong {
  font-size: 0.92rem;
  font-weight: 500;
}

.persona-chica__datos span {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

/* Jerarquía visual: las fotos de Asociados Senior son más grandes que
   las del resto (Staff, Asesores), para reflejar la jerarquía. */
.equipo__categoria--senior .persona-chica__foto-wrap {
  width: 98px;
  height: 98px;
}

.equipo__categoria--senior .persona-chica__foto-placeholder span {
  font-size: 1.51rem;
}

/* ----------------------------------------------------------------------
   5.6 CONTACTO
   ---------------------------------------------------------------------- */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.contacto__datos-lista {
  margin-bottom: 2rem;
}

.contacto__datos-lista > div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-borde);
}

.contacto__datos-lista dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-texto-suave);
  margin-bottom: 0.3rem;
}

.contacto__datos-lista dd a:hover {
  color: var(--color-acento);
}

/* Contactos directos (ej. Diego, Mariano): además de los datos generales
   de arriba, muestra el teléfono/mail de personas puntuales */
.contacto__directos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--color-fondo-alterno);
  border: 1px solid var(--color-borde);
}

.contacto__directo-nombre {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.contacto__directo-dato {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
}

.contacto__directo-dato a:hover {
  color: var(--color-acento);
}

.formulario label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-suave);
  margin-bottom: 0.4rem;
}

.formulario .campo {
  margin-bottom: 1.4rem;
}

.formulario input,
.formulario textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  font-family: inherit;
  font-size: 0.98rem;
  background: var(--color-fondo);
}

.formulario textarea {
  resize: vertical;
  min-height: 120px;
}

.formulario input:focus,
.formulario textarea:focus {
  border-color: var(--color-acento);
}

.formulario__nota {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.formulario__estado {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.formulario__estado--ok {
  color: var(--color-acento);
}

.formulario__estado--error {
  color: #b3261e;
}

/* ----------------------------------------------------------------------
   6. FOOTER
   ---------------------------------------------------------------------- */
.footer {
  background: var(--color-acento);
  color: rgba(255, 255, 255, 0.8);
  padding: 3.5rem 0 2rem;
}

.footer__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer__marca {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.footer__datos li {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

.footer__instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__icono-instagram {
  flex-shrink: 0;
}

.footer__datos a:hover {
  color: #fff;
}

.footer__linea {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ============================================================================
   7. RESPONSIVE — mobile-first: lo de arriba ya es la versión mobile.
      Acá se agranda la grilla a partir de tablet/desktop.
   ========================================================================= */

/* Tablet en adelante (>= 700px) */
@media (min-width: 700px) {
  .seccion { padding: 6.5rem 0; }

  .servicios__grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio__grilla { grid-template-columns: repeat(2, 1fr); }
  .equipo__grilla { grid-template-columns: repeat(3, 1fr); }
  .contacto__grid { grid-template-columns: 1.1fr 1fr; }
}

/* Desktop en adelante (>= 960px) */
@media (min-width: 960px) {
  .nav__toggle { display: none !important; }

  .estudio__grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .servicios__grid { grid-template-columns: repeat(4, 1fr); }
  .portfolio__grilla { grid-template-columns: repeat(3, 1fr); }
  .equipo__ampliado { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { flex-direction: row; justify-content: space-between; }
  .modal__ficha { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile (< 960px): menú hamburguesa */
@media (max-width: 959px) {
  .nav__toggle {
    display: block;
  }

  .nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--color-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform var(--transicion);
    z-index: 90;
  }

  .nav.nav--abierto {
    transform: translateY(0);
  }

  .nav__lista {
    flex-direction: column;
    text-align: center;
    gap: 1.75rem;
  }

  .nav__link {
    color: var(--color-texto) !important;
    font-size: 1.3rem;
  }

  /* Cuando el menú mobile está abierto, la marca y el botón de menú
     quedan siempre oscuros para verse sobre el fondo blanco del menú */
  body.menu-abierto .header__marca,
  body.menu-abierto .nav__toggle {
    color: var(--color-texto) !important;
  }

  /* Ícono hamburguesa -> X cuando el menú está abierto */
  .nav__toggle.activo .nav__toggle-barra:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav__toggle.activo .nav__toggle-barra:nth-child(2) {
    opacity: 0;
  }
  .nav__toggle.activo .nav__toggle-barra:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}