/* =========================================================
   MCDV & ASOCIADOS — ESTUDIO JURÍDICO
   Sistema editorial: negro/azul muy oscuro (a tono con el
   escudo de MCDV) + acento bronce, tipografía enorme, listas
   interactivas en vez de grids de tarjetas, líneas finas entre
   secciones. Retratos circulares del equipo inspirados en el
   criterio institucional de bouhan.com.
========================================================= */

:root {
  /* Antes gris grafito neutro; ahora con un leve subtono azul
     ("azules oscuros con negro") para acercarse al negro real
     del escudo de MCDV en vez de un gris frío genérico. */
  --graphite-950: #0e1016;
  --graphite-900: #161923;
  --graphite-850: #1f232f;
  --graphite-800: #2a2f3d;

  --slate-light: #6b6e73;

  --paper: #f7f6f4;
  --paper-light: #fbfaf8;
  --white: #ffffff;

  --charcoal: #2b2c2f;
  /* Antes #6f7276 (4.48:1 sobre --paper, no llega al mínimo AA de
     4.5:1 para texto normal) — oscurecido lo justo para pasar 4.5:1
     sin cambio visual perceptible.
     2026-09-18: --gray pasaba el mínimo AA pero la clienta lo veía
     "gris" sobre fondo claro y pidió texto negro con más peso — los
     párrafos de cuerpo en secciones claras (Nosotros, Quiénes Somos,
     FAQ, páginas de área) ahora usan --charcoal (el mismo negro que ya
     era el color de texto por defecto de <body>) en vez de --gray.
     --gray/--gray-light siguen siendo correctos para texto secundario
     sobre fondo OSCURO (header, menú, Áreas, Statement, Contacto,
     Footer) — no tocar esos. */
  --gray: #696c70;
  --gray-light: #a6a8ac;

  --bronze: #ad7d4c;
  --bronze-light: #c89a68;
  --bronze-dark: #8a6138;

  --green: #2f8b57;

  --font-display: "Forum", serif;
  --font-body: "DM Sans", sans-serif;

  --container: 1280px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.7;
  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

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

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

ul {
  list-style: none;
}

::selection {
  background: var(--bronze);
  color: var(--white);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* Link "saltar al contenido" para navegación por teclado: invisible
   hasta recibir foco (primer Tab de la página), con el z-index más
   alto del sitio para que nada se le pueda superponer. */
.skip-link {
  position: fixed;
  z-index: 10000;
  top: -80px;
  left: 16px;

  background: var(--bronze);
  color: var(--graphite-950);

  padding: 14px 22px;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;

  transition: top 0.2s ease;
}

.skip-link:focus-visible,
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--graphite-950);
  outline-offset: 3px;
}

/* =========================================================
   ÁREAS TÁCTILES AMPLIADAS (sin cambio visual)
   Varios links/botones son texto o íconos chicos (10-13px) sin
   padding, por debajo del mínimo táctil recomendado de 44×44px.
   En vez de agrandar el texto/ícono real (cambiaría el look que ya
   se ajustó en varias rondas), se amplía solo el ÁREA CLICKEABLE con
   un ::after invisible y absoluto que sobresale 10px por lado —
   mismo patrón que "hit-slop" en apps nativas. Verificado que el
   espacio libre alrededor de cada elemento (gap de footer-bottom,
   etc.) alcanza para los 10px sin que las zonas invisibles de
   elementos vecinos se superpongan.
========================================================= */

.menu-toggle,
.footer-instagram,
.area-card-link,
.team-link,
.area-page-back {
  position: relative;
}

.menu-toggle::after,
.menu-close::after,
.footer-instagram::after,
.area-card-link::after,
.team-link::after,
.area-page-back::after {
  content: "";
  position: absolute;
  inset: -10px;
}

section[id],
#contact {
  scroll-margin-top: 90px;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 130px 0;
}

/* Líneas finas negras entre secciones (a pedido, referencia
   bouhan.com): translúcidas para leer bien tanto contra fondo
   claro (línea nítida) como oscuro (costura sutil). */
.hairline-top {
  border-top: 1px solid rgba(0, 0, 0, 0.55);
}

/* =========================================================
   REVEAL POR SCROLL
========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
}

.js-ready [data-reveal] {
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HEADER — barra oscura, sin logo a propósito (el nombre del estudio
   ya es el h1 del hero): queda solo el botón de Menú. Al scrollear
   más allá del hero se compacta un poco y suma un borde inferior
   bronce; el punto de cambio depende del alto real del hero,
   calculado por JS (updateHeader() en script.js).
========================================================= */

.header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;

  background: var(--graphite-950);
  border-bottom: 2px solid transparent;

  transition: border-color 0.3s ease, padding 0.3s ease;
}

.header.scrolled {
  border-bottom-color: var(--bronze);
}

.header-inner {
  width: min(calc(100% - 48px), 1320px);
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 0;

  transition: padding 0.3s ease;
}

.header.scrolled .header-inner {
  padding: 13px 0;
}

/* Logo real en el navbar — antes no había ninguno (solo texto). Fondo
   del header siempre oscuro (--graphite-950), por eso la versión
   crema del escudo, nunca la negra. */
.header-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-brand img {
  height: 38px;
  width: auto;
  transition: height 0.3s ease;
}

.header.scrolled .header-brand img {
  height: 32px;
}

/* Navbar de secciones: reemplaza al botón de menú en desktop
   (≥1101px, ver el override en "RESPONSIVE — 1100px" más abajo, que
   invierte ambos display). Debajo de ese ancho vuelve a ser el botón
   de menú de siempre. "Áreas de práctica" es también un link directo
   (va a #areas / ../index.html#areas) que además, con mouse real,
   despliega un submenú con las 5 áreas al pasar o enfocar — nunca es
   la ÚNICA forma de llegar a una: el link principal ya funciona
   solo. */
.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
}

.header-nav > a,
.header-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--gray-light);
  transition: color 0.25s ease;
}

.header-nav > a:hover,
.header-nav > a:focus-visible,
.header-nav-dropdown-trigger:hover,
.header-nav-dropdown-trigger:focus-visible {
  color: var(--bronze-light);
}

.header-nav > a[aria-current="page"] {
  color: var(--bronze);
}

.header-nav-caret {
  font-size: 0.85em;
  transition: transform 0.3s var(--ease);
}

.header-nav-dropdown {
  position: relative;
}

/* Zona "puente" invisible entre el trigger y el panel visible: el
   padding-top (no margin) hace que ese hueco siga siendo parte de
   este mismo elemento, así el mouse no pierde el :hover al bajar
   desde el link hasta el submenú. */
.header-nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 14px;

  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.25s;
}

.header-nav-dropdown-menu-inner {
  display: flex;
  flex-direction: column;
  min-width: 230px;

  background: var(--graphite-900);
  border: 1px solid rgba(200, 154, 104, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  padding: 8px 0;

  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.header-nav-dropdown-menu a {
  padding: 10px 22px;

  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--gray-light);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.header-nav-dropdown-menu a:hover,
.header-nav-dropdown-menu a:focus-visible {
  color: var(--bronze-light);
  background: rgba(255, 255, 255, 0.04);
}

.header-nav-dropdown-menu a[aria-current="page"] {
  color: var(--bronze);
}

.header-nav-dropdown:hover .header-nav-dropdown-menu,
.header-nav-dropdown:focus-within .header-nav-dropdown-menu {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.header-nav-dropdown:hover .header-nav-dropdown-menu-inner,
.header-nav-dropdown:focus-within .header-nav-dropdown-menu-inner {
  opacity: 1;
  transform: translateY(0);
}

.header-nav-dropdown:hover .header-nav-caret,
.header-nav-dropdown:focus-within .header-nav-caret {
  transform: rotate(180deg);
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 11px;

  color: var(--paper);
  transition: color 0.25s ease;
}

.menu-toggle:hover {
  color: var(--bronze-light);
}

.menu-label {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.menu-icon {
  width: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.menu-icon span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}

.menu-icon span:last-child {
  width: 65%;
  margin-left: auto;
}

.menu-toggle:hover .menu-icon span:last-child {
  width: 100%;
}

/* =========================================================
   MENU — pantalla completa, sube desde abajo
========================================================= */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: var(--graphite-950);
  color: var(--paper);

  transform: translateY(100%);
  visibility: hidden;

  padding: 40px clamp(24px, 6vw, 90px);
}

.menu-overlay.active {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.6s var(--ease);
}

.menu-overlay:not(.active) {
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
}

.menu-close {
  position: absolute;
  top: 34px;
  right: clamp(24px, 6vw, 90px);

  width: 40px;
  height: 40px;
}

.menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 1px;
  background: var(--paper);
}

.menu-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-navigation {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vh, 16px);
}

.menu-navigation a {
  display: flex;
  align-items: baseline;
  gap: 22px;

  padding: 6px 0;
  transition: color 0.3s ease;
}

.menu-navigation a em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--bronze);
  font-weight: 700;
}

.menu-link-text {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, min(6vw, 9vh), 7.5rem);
  line-height: 1.05;
  transition: transform 0.4s var(--ease), color 0.3s ease;
  display: inline-block;
}

.menu-navigation a:hover .menu-link-text {
  color: var(--bronze-light);
  transform: translateX(20px);
}

.menu-foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;

  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  font-size: 1.3rem;
  color: var(--gray-light);
}

.menu-foot > div,
.menu-foot > a {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-foot > a:last-child {
  text-align: right;
  align-items: flex-end;
}

.menu-foot a:hover {
  color: var(--bronze-light);
}

.menu-small-label {
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 1rem;
}


/* =========================================================
   FOTOGRAFÍA — DUOTONO NEGRO/AZUL OSCURO
   (antes tenía un lavado bronce marcado; ahora más neutro y
   oscuro, en línea con el escudo de MCDV — el bronce queda
   como acento de interfaz, no como tinte de foto).
========================================================= */

.photo-duo {
  position: relative;
  overflow: hidden;
}

.photo-duo img {
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.9);
}

.photo-duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 24, 34, 0.35), rgba(8, 9, 13, 0.65));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* =========================================================
   BOTONES
========================================================= */

.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;

  padding: 17px 36px;

  border: 1px solid var(--graphite-950);
  color: var(--graphite-950);

  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;

  overflow: hidden;
  isolation: isolate;
}

.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: var(--graphite-950);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
}

.btn-outline:hover {
  color: var(--paper);
}

.btn-outline:hover::before {
  transform: translateY(0);
}

.btn-outline--light {
  border-color: var(--paper);
  color: var(--paper);
}

.btn-outline--light::before {
  background: var(--bronze);
}

.btn-outline--light:hover {
  color: var(--graphite-950);
}

/* =========================================================
   HERO "PORTAL" — dos paneles cerrados que se abren revelando la
   foto de fondo, con el nombre partido en dos viajando hacia los
   bordes; después el nombre se desvanece y en su lugar aparece
   .hero-portal-message (ver más abajo) sobre la misma foto — un solo
   acto continuo, ya no dos secciones separadas. Por defecto (sin JS,
   o con reduced-motion, o en mobile) es un hero normal de un
   viewport: paneles y wordmark ocultos por CSS (nunca tapan nada a
   ciegas), foto + .hero-portal-message visibles de entrada. JS agrega
   "is-portal-active" SOLO cuando el efecto va a correr de verdad
   (desktop ancho + GSAP + sin reduced-motion): recién ahí la sección
   crece a 280vh con el stage sticky adentro (mismo patrón sticky+scrub
   ya usado en el telón de rondas anteriores, sin pin de GSAP) y
   arranca el timeline.
========================================================= */

.hero-portal {
  position: relative;
  height: 100svh;

  background: var(--graphite-950);
}

.hero-portal.is-portal-active {
  height: 280vh;
}

.hero-portal-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.hero-portal.is-portal-active .hero-portal-stage {
  position: sticky;
  top: 0;
  height: 100svh;
}

/* Ya no hay foto de fondo fija — el carrusel de video ocupa
   directamente el lugar que tenía .hero-portal-media (mismo
   inset:0/z-index:0, primero en el DOM del stage, debajo del
   duotone/viñeta que sí deben teñirlo). El primer <video> arranca con
   .is-active puesto en el HTML (ver index.html) — visible desde el
   primer render, sin esperar a JS. Los otros dos arrancan en
   opacity:0 hasta que initHeroVideoCarousel (script.js) les pone
   .src y los activa. Si JS fallara del todo, el primero sigue
   reproduciéndose solo por sus atributos autoplay/loop nativos —
   nunca queda una pantalla negra. */
.hero-portal-video-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-portal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) contrast(1.08) brightness(0.78);

  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero-portal-video.is-active {
  opacity: 1;
}

/* Wash a dos colores (bronce/grafito) sobre la foto — mix-blend-mode
   la funde con la imagen en vez de taparla; arranca en 0 (foto al
   natural) y JS la sube al abrirse los paneles. */
.hero-portal-duotone {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(135deg, var(--bronze) 0%, var(--graphite-950) 75%);
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
}

/* Viñeta radial fija (no anima, no depende de JS): oscurece bordes Y
   centro (antes el centro quedaba transparente del todo — justo donde
   cae el texto del hero, .hero-portal-message, centrado — así que el
   contraste con video de fondo claro era insuficiente para alguien con
   baja visión pese al text-shadow ya puesto en cada elemento). Ahora
   el centro también lleva una capa de oscurecimiento base, más fuerte
   hacia los bordes como antes. */
.hero-portal-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;

  background: radial-gradient(ellipse at center, rgba(14, 16, 22, 0.38) 0%, rgba(14, 16, 22, 0.5) 45%, rgba(14, 16, 22, 0.8) 100%);
  pointer-events: none;
}

/* Los paneles ("puertas"): por defecto ni existen visualmente
   (display:none) — no tapan nada, y de paso evitan un problema real
   de GSAP: si en vez de esto arrancaran fuera de pantalla con un
   "transform" puesto por CSS, el xPercent que escribe GSAP (que usa
   la propiedad "translate" moderna) se SUMARÍA a ese transform en vez
   de reemplazarlo, y el panel quedaría trabado sin poder "cerrarse"
   (mismo bug ya encontrado con las solapas de Áreas). Al no haber
   ningún transform previo, JS puede manejar xPercent con total
   libertad. Solo JS los hace visibles y los manda al centro (posición
   "cerrada") cuando el efecto va a correr — desde ahí, el scroll los
   vuelve a sacar hacia los bordes. */
.hero-portal-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;

  display: none;
  width: 52%;
  background: var(--graphite-950);
}

.hero-portal-panel--left {
  left: 0;
}

.hero-portal-panel--right {
  right: 0;
}

/* Escudo partido al medio, oculto por defecto (fallback seguro). JS lo
   hace visible centrado/armado sobre la costura; el scrub lo hace
   crecer y separar cada mitad hacia su lado junto con los paneles —
   mismo rol que antes cumplía el wordmark de texto (MCDV/Asociados),
   ahora con el escudo real partiéndose en vez de dos palabras. */
.hero-portal-wordmark {
  position: absolute;
  inset: 0;
  z-index: 6;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-portal-logo {
  width: clamp(120px, 16vw, 200px);
  height: auto;
  opacity: 0;

  /* No depende de qué tan oscuro esté el video en ese punto exacto —
     drop-shadow (no box-shadow) sigue el contorno real del logo, que
     tiene fondo transparente. */
  filter: drop-shadow(0 2px 14px rgba(14, 16, 22, 0.55)) drop-shadow(0 1px 4px rgba(14, 16, 22, 0.75));
}

/* Aviso de "scroll" — a pedido explícito: un usuario que no esté
   acostumbrado a un hero con scroll-jack (edad adulta, poco
   familiarizado con sitios "novedosos") necesita una señal clara de
   que hay más contenido bajando. Por eso, a diferencia del resto de
   este portal, NO depende del efecto de escritorio para mostrarse:
   visible por defecto en cualquier tamaño de pantalla (mismo criterio
   que .hero-portal-message — seguro primero, JS solo lo apaga cuando
   el scroll-jack SÍ va a correr, y el propio timeline lo vuelve a
   mostrar/ocultar en su momento). Centrado abajo (antes vivía en la
   esquina, como un dato editorial más discreto) y con una flecha que
   rebota suave — apagada con reduced-motion, queda estática pero
   igual de visible. */
.hero-portal-meta {
  position: absolute;
  z-index: 6;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 246, 244, 0.8);
  text-shadow: 0 2px 10px rgba(14, 16, 22, 0.6);
  pointer-events: none;
}

.hero-portal-meta-arrow {
  font-size: 1.3rem;
  color: var(--bronze-light);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-portal-meta-arrow {
    animation: hero-scroll-bounce 2s ease-in-out infinite;
  }
}

@keyframes hero-scroll-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Degradé de legibilidad para el contenido real del hero (escudo,
   título, texto, botones) — siempre presente, no depende del scroll,
   igual que en la versión anterior del hero. */
.hero-portal-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;

  background: linear-gradient(
    to bottom,
    rgba(14, 16, 22, 0.78) 0%,
    rgba(14, 16, 22, 0.5) 42%,
    rgba(14, 16, 22, 0.45) 65%,
    rgba(14, 16, 22, 0.85) 100%
  );
  pointer-events: none;
}

/* =========================================================
   HERO PORTAL — MENSAJE (segundo acto, ahora adentro del mismo
   portal). Superpuesto a la misma foto, en el mismo punto centrado
   que ocupaba el wordmark (ver .hero-portal-wordmark más arriba) —
   por diseño no compiten al mismo tiempo: el timeline en script.js
   apaga el nombre antes de prender esto (ver heroPortalTl). Visible
   por defecto vía CSS (opacity:1, sin depender de scroll) — es el
   fallback seguro para mobile/reduced-motion/sin JS, donde el portal
   queda como un hero estático de un viewport con este mensaje ya
   encima de la foto. Colores pensados para foto oscura (texto claro
   + sombra de legibilidad), ya no reutiliza .hero-eyebrow/.hero-huge
   (esas eran para el fondo --paper claro de la vieja .hero-message,
   ahora eliminada).
========================================================= */

.hero-portal-message {
  position: absolute;
  inset: 0;
  z-index: 7;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.hero-portal-eyebrow {
  display: inline-block;
  margin-bottom: 20px;

  font-family: "Cormorant Garamond", var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--bronze-light);
  text-shadow: 0 2px 10px rgba(14, 16, 22, 0.6);
}

.hero-portal-title {
  font-family: "Cormorant Garamond", var(--font-display);
  font-weight: 500;
  font-size: clamp(3.6rem, 6vw, 6.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 780px;
  text-shadow: 0 4px 24px rgba(14, 16, 22, 0.55), 0 1px 6px rgba(14, 16, 22, 0.7);
}

.hero-portal-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--bronze-light);
}

.hero-portal-lead {
  max-width: 520px;
  margin-top: 24px;

  color: rgba(247, 246, 244, 0.85);
  font-size: 1.5rem;
  line-height: 1.6;
  text-shadow: 0 2px 12px rgba(14, 16, 22, 0.5);
}

.hero-portal-cta {
  margin-top: 34px;
}

/* =========================================================
   NOSOTROS — MANIFIESTO
========================================================= */

.manifesto {
  background: var(--paper-light);
  padding: 64px 0 80px;
}

/* Dos columnas asimétricas: la oración real más fuerte del estudio
   como pull-quote grande a la izquierda, el resto del texto (real +
   relleno) a la derecha con el nombre de sección como kicker chico
   — reemplaza al bloque centrado genérico que había antes. */
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.manifesto-pull {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  line-height: 1.25;
  color: var(--graphite-900);
}

.manifesto-kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--bronze-dark);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.manifesto-body p {
  max-width: 480px;
  margin-bottom: 20px;
  color: var(--charcoal);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.7;
}

.manifesto-body .btn-outline {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .manifesto-grid {
    grid-template-columns: 1fr;
  }
}

.manifesto-lead {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3vw, 3.6rem);
  line-height: 1.3;
  color: var(--graphite-900);
  margin-bottom: 28px;
}

.manifesto-lead em {
  font-style: italic;
  /* Mismo motivo que .team-role: --bronze no pasa 4.5:1 sobre
     --paper (fondo real de .area-page-intro en las páginas de área). */
  color: var(--bronze-dark);
}


/* =========================================================
   ÁREAS DE PRÁCTICA — acordeón: clic en el nombre expande la
   descripción adentro de la misma fila (grid-template-rows: 0fr →
   1fr, 100% CSS, sin JS); el ícono +/− rota con el mismo lenguaje de
   líneas finas que .menu-icon. <details name="areas-accordion"> las
   hace mutuamente excluyentes (una sola abierta a la vez), como un
   acordeón real. Comparte con Equipo (.team-directory-*) el
   lenguaje tipográfico de las filas — nombre serif + hairlines —
   pero la interacción es otra: acá cada fila se expande en el lugar,
   en Equipo un clic en el nombre cambia qué panel se ve en una
   columna aparte.
========================================================= */

.areas-index {
  position: relative;
  background: var(--graphite-950);
  color: var(--paper);
  padding: 48px 0 60px;
}

.areas-accordion {
  margin-top: 20px;
  border-top: 1px solid rgba(200, 154, 104, 0.25);
}

.areas-accordion-item {
  border-bottom: 1px solid rgba(200, 154, 104, 0.25);
}

.areas-accordion-summary {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);

  padding: 22px 8px;
  cursor: pointer;
  list-style: none;
  background-color: transparent;
}

/* Ítem abierto: un tinte bronce muy sutil que queda puesto mientras
   está expandido (no solo en el instante de hover), así se ve de un
   vistazo cuál está activo sin tener que fijarse en el ícono +/−. */
.areas-accordion-item[open] .areas-accordion-summary {
  background-color: rgba(200, 154, 104, 0.05);
}

/* Saca el triángulo nativo de <summary> (Chrome/Safari usan un
   pseudo-elemento propio, Firefox respeta list-style: none solo en
   parte) — el ícono +/− de acá abajo lo reemplaza. */
.areas-accordion-summary::-webkit-details-marker {
  display: none;
}

.areas-accordion-number {
  min-width: 2.4ch;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--bronze);
}

.areas-accordion-name {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  color: var(--paper);
  transition: color 0.3s ease;
}

.areas-accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.areas-accordion-icon::before,
.areas-accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--bronze-light);
  transition: transform 0.3s var(--ease);
}

.areas-accordion-icon::before {
  width: 15px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.areas-accordion-icon::after {
  width: 1.5px;
  height: 15px;
  transform: translate(-50%, -50%);
}

/* La línea vertical se achica a 0 (queda solo la horizontal: "+" -> "−"). */
.areas-accordion-item[open] .areas-accordion-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.areas-accordion-item[open] .areas-accordion-name {
  color: var(--bronze-light);
}

/* El truco para animar el alto de <details> (que por defecto abre/
   cierra de golpe, sin transición): un grid con grid-template-rows
   0fr/1fr en vez de max-height/height — no necesita JS ni conocer el
   alto real del contenido de antemano. display:grid acá pisa el
   "display:none" que el navegador le pone por defecto a los hijos de
   <details> quando está cerrado. */
.areas-accordion-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

.areas-accordion-item[open] .areas-accordion-collapse {
  grid-template-rows: 1fr;
}

/* Antes la descripción arrancaba pegada al borde superior (margin-top:0)
   y alineada con el borde izquierdo del acordeón entero, no con el
   título de arriba (que empieza más a la derecha, después de la
   columna del número romano) — se veía desprolijo y distinto según el
   largo del texto de cada área. Ahora el bloque entero se indenta lo
   mismo que mide esa columna (número + separador) y lleva un margen
   superior fijo, así las 5 descripciones arrancan parejas, alineadas
   con su propio título. */
.areas-accordion-body {
  overflow: hidden;
  min-height: 0;
  padding-left: calc(2.4ch + clamp(14px, 2.4vw, 28px));
}

.areas-accordion-body p {
  max-width: 620px;
  margin: 18px 0 16px;
  padding-right: 8px;
  color: var(--gray-light);
  font-size: 1.4rem;
  line-height: 1.6;
}

.areas-accordion-body .area-card-link {
  margin: 0 8px 26px 0;
}

.areas-accordion-summary:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -4px;
}

@media (hover: hover) and (pointer: fine) {
  /* La fila entera (la "tarjetita" rectangular de cada área) responde
     al hover: fondo bronce tenue + un crecimiento vertical chico de
     padding — no es la fila que se abre (eso lo hace el click, ver
     .areas-accordion-collapse), es solo la señal de "esto responde".
     Mismo padding para las 5, así que no reserva ni deja huecos
     asimétricos entre una fila y otra. */
  .areas-accordion-summary {
    transition: background-color 0.3s ease, padding-block 0.3s var(--ease);
  }

  .areas-accordion-summary:hover {
    background-color: rgba(200, 154, 104, 0.08);
    padding-block: 27px;
  }

  .areas-accordion-summary:hover .areas-accordion-name {
    color: var(--bronze-light);
  }
}

/* =========================================================
   ÁREAS DE PRÁCTICA — encabezado
========================================================= */

.areas-head-centered {
  max-width: 560px;
  margin: 0 auto 20px;
  text-align: center;
}

.areas-head-centered h2 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2.8vw, 3.2rem);
  font-weight: 400;
  color: var(--paper);
}

.areas-underline {
  display: block;
  width: 56px;
  height: 2px;
  margin: 12px auto;
  background: var(--bronze);
}

.areas-head-centered p {
  color: var(--gray-light);
  font-size: 1.3rem;
  max-width: 480px;
  margin-inline: auto;
}

/* Usado por la lista de detalle de las páginas de cada área
   (areas/*.html). */
.area-card-link {
  display: inline-block;
  margin-top: 12px;

  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bronze-light);
  border-bottom: 1px solid var(--bronze);
}

/* =========================================================
   STATEMENT
========================================================= */

.statement {
  position: relative;
  overflow: hidden;
  background: var(--graphite-900);
  padding: 90px 0 120px;
}

/* Foto de fondo con duotono (mismo criterio que .photo-duo). Se declara
   background-image dos veces a propósito: la primera (url simple) es el
   fallback real para navegadores sin soporte de image-set(); si lo
   soportan, la segunda declaración gana por cascada y sirve WebP. */
.statement-media {
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("img/hero_facade.jpg");
  background-image: image-set(url("img/hero_facade.webp") type("image/webp"), url("img/hero_facade.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  filter: grayscale(0.85) contrast(1.1) brightness(0.65);
}

/* Parallax real (CSS puro, sin GSAP): el fondo queda fijo respecto al
   viewport mientras el contenido de la sección scrollea encima. Gateado
   igual que los efectos de scroll con GSAP del resto del sitio (desktop
   ≥900px, nunca con prefers-reduced-motion) aunque acá no hay JS de por
   medio — mobile/reduced-motion se quedan con background-attachment:scroll
   (foto fija en su lugar, sin el desplazamiento relativo, nunca sin foto). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .statement-media {
    background-attachment: fixed;
  }
}

.statement-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(14, 16, 22, 0.88) 0%, rgba(14, 16, 22, 0.78) 55%, rgba(14, 16, 22, 0.9) 100%);
}

.statement-inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin-top: 60px;
}

.statement-mark {
  display: block;
  margin-bottom: -14px;
  font-family: var(--font-display);
  font-size: clamp(6rem, 10vw, 11rem);
  line-height: 0.6;
  color: var(--bronze-dark);
}

.statement h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 6vw, 7.2rem);
  line-height: 1.08;
  color: var(--paper);
}

.statement p {
  max-width: 620px;
  margin-top: 32px;
  color: var(--gray-light);
  font-size: 1.6rem;
}

/* =========================================================
   EQUIPO — quinta vuelta de diseño (historial, por si se vuelve a
   tocar):
   1) tarjetas que crecían en hover, igual que Áreas de práctica —
      se sentía repetido, y 5/6 tarjetas mostraban un casillero gris
      "Foto de perfil" sin terminar de resolver nada.
   2) "perfil destacado" (Pablo) + roster simple para el resto — a
      pedido explícito, quedó sin jerarquía real entre Pablo y los
      demás y el roster se sentía pobre.
   3) .team-index-*: índice de filas (nombre | foto circular | cargo
      revelados en hover/foco) — funcionaba, pero cuando Áreas de
      práctica se rehizo terminó con la misma forma (filas + foto
      circular) y el usuario lo notó: "repetiste el diseño de los
      abogados".
   4) .team-collage-*: collage tipográfico asimétrico sin fotos —
      descartado antes de llegar a producción; el usuario pidió en
      cambio un formato más organizado.
   5) (actual) .team-directory-*: directorio maestro-detalle, spec
      exacta del usuario ("a la izquierda los nombres estilo tabla
      como Áreas, en el medio una franja, a la derecha foto + texto").
      Lista de nombres a la izquierda (mismo lenguaje tipográfico que
      Áreas: nombre serif + hairlines), franja vertical bronce al
      medio, panel de foto+cargo+bio a la derecha que cambia según
      qué nombre está marcado. 100% CSS: <input type="radio"> nativos
      (círculo visible, foco de teclado nativo, sin necesidad del
      truco hit-slop) + :has() para mostrar el panel correspondiente
      (bajo @supports selector(:has(*)), con el panel de Pablo como
      fallback fijo si el navegador no soporta :has()). Selección por
      click/tap, no por hover — funciona igual en mouse y en touch, y
      no repite el patrón "contenido detrás de hover" de la versión 3.
      Solo Pablo tiene foto real; el resto usa una silueta rectangular
      con iniciales (a propósito NO circular, para no repetir la
      forma de foto de la versión 3).
========================================================= */

.team {
  background: var(--paper);
  padding: 56px 0 70px;
}

.team-head-centered {
  max-width: 620px;
  margin: 0 auto 32px;
  text-align: center;
}

.team-head-centered h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 3.2vw, 3.6rem);
  font-weight: 400;
  color: var(--graphite-900);
}

.team-underline {
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto;
  background: var(--bronze);
}

.team-head-centered p {
  color: var(--charcoal);
  font-weight: 500;
  font-size: 1.4rem;
  max-width: 480px;
  margin-inline: auto;
}

/* Tres columnas casi iguales (nombres | foto | texto), separadas por
   dos franjas finas — a pedido explícito: "dividir un rectángulo en
   3 partes iguales casi". El grid principal ya define las 3 columnas
   con el mismo ancho (1fr cada una) más sus dos franjas; nombres
   ocupa la 1ª, y .team-directory-detail ocupa un solo elemento que
   se extiende sobre la 2ª franja + foto + 3ª franja + texto
   (columnas 3 a 6) — adentro, cada .team-detail-panel repite esas
   mismas proporciones para que foto y texto queden igual de anchos
   que nombres. Una sola franja "vive" acá (nombres/foto); la otra
   (foto/texto) vive dentro de cada panel, ver más abajo, porque
   cambia junto con la foto y el texto según qué nombre está marcado
   — así no duplica la lógica de :has() para una segunda franja
   suelta en el grid de afuera. */
.team-directory {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1px minmax(160px, 1fr) 1px minmax(200px, 1fr);
  align-items: stretch;
  gap: 0 clamp(20px, 3vw, 48px);

  margin-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.team-directory-list {
  display: flex;
  flex-direction: column;
}

.team-directory-row {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 20px 12px 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* Radio nativo, estilizado como un punto de selección — visible a
   propósito (no oculto con opacity:0) para que el foco de teclado
   nativo caiga exactamente donde está la marca visual. */
.team-directory-row-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1.5px solid rgba(200, 154, 104, 0.5);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: border-color 0.25s ease;
}

.team-directory-row-input::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bronze);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.team-directory-row-input:checked {
  border-color: var(--bronze);
}

.team-directory-row-input:checked::after {
  opacity: 1;
}

.team-directory-row-input:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.team-directory-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 2vw, 2.2rem);
  color: var(--graphite-900);
  transition: color 0.25s ease;
}

.team-directory-row:has(.team-directory-row-input:checked) .team-directory-name {
  color: var(--bronze-dark);
}

@media (hover: hover) and (pointer: fine) {
  .team-directory-row:hover {
    background-color: rgba(173, 125, 76, 0.05);
  }
}

.team-directory-divider {
  background: rgba(173, 125, 76, 0.3);
}

/* Se extiende sobre la 2ª franja + la columna de foto + la 3ª franja
   + la columna de texto (columnas 3 a 6 del grid de afuera) — así la
   foto y el texto quedan tan anchos como la columna de nombres, en
   vez de repartirse la mitad que sobraba. */
.team-directory-detail {
  grid-column: 3 / 6;
  display: grid;
  padding: 8px 6px;
}

/* Cada panel repite las mismas proporciones que el grid de afuera
   (foto | franja | texto, ambas columnas 1fr) — como solo uno está
   visible a la vez (opacity), las franjas de los paneles ocultos
   quedan apiladas exactamente debajo de la del panel activo, sin
   duplicarse a la vista. */
.team-detail-panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 1px minmax(160px, 1fr);
  align-items: center;
  gap: 0 clamp(20px, 3vw, 48px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.team-detail-divider {
  align-self: stretch;
  background: rgba(173, 125, 76, 0.3);
}

/* Fallback sin :has(): el panel de Pablo queda siempre visible. Con
   :has() soportado, el bloque de abajo pisa esto y deja que el panel
   visible sea el que corresponde al radio marcado. */
.team-detail-panel[data-panel="1"] {
  opacity: 1;
  pointer-events: auto;
}

@supports selector(:has(*)) {
  .team-detail-panel[data-panel="1"] {
    opacity: 0;
    pointer-events: none;
  }

  /* Solo Pablo (1) y Belén (2) por ahora — ver nota 2026-09-17 en
     index.html. Al sumar a alguien más, agregar acá su
     "team-directory:has(#team-tab-N:checked) .team-detail-panel[data-panel="N"]"
     junto con su fila/panel en el HTML, nada más cambia. */
  .team-directory:has(#team-tab-1:checked) .team-detail-panel[data-panel="1"],
  .team-directory:has(#team-tab-2:checked) .team-detail-panel[data-panel="2"] {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Antes tenía un ancho fijo chico (clamp tope 184px) sin relación con
   el espacio real disponible; ahora ocupa el 100% de su columna (~un
   tercio de la caja) y el aspect-ratio la mantiene proporcionada sea
   cual sea ese ancho — "más grande, respetando el tamaño de esa
   área". El tope en max-width es solo para que no quede gigante en
   pantallas muy anchas. */
.team-detail-photo {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
}

.team-detail-photo picture,
.team-detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La foto de Belén (845x1228, más angosta que el recuadro 4:5) con
   object-position centrado por defecto le cortaba la frente al recortar
   parejo arriba/abajo — se corre el foco hacia arriba para que el
   sobrante se recorte de abajo en vez de la cara. */
.team-photo-belen {
  object-position: center 15%;
}

.team-detail-photo--placeholder {
  display: grid;
  place-items: center;

  background: var(--graphite-950);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--bronze-light);
}

.team-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-detail-copy .team-role {
  color: var(--bronze-dark);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.team-detail-bio {
  color: var(--charcoal);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.65;
}

.team-detail-copy .team-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bronze-dark);
  border-bottom: 1px solid var(--bronze-dark);
  width: fit-content;
}

/* Mobile: columna única — lista arriba, franja fuera (no tiene
   sentido una línea vertical de 1px de alto), panel debajo con foto
   apilada sobre el texto. */
@media (max-width: 760px) {
  .team-directory {
    grid-template-columns: 1fr;
  }

  .team-directory-divider {
    display: none;
  }

  .team-directory-detail {
    /* Sin esto, el grid-column:3/6 de escritorio crearía columnas
       implícitas de más en vez de apilarse en la única columna que
       queda acá. */
    grid-column: 1;
    padding: 24px 6px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* Ídem que .team-directory-divider: una franja horizontal de 1px
     no suma nada acá, así que se oculta y el panel pasa a una sola
     columna (foto arriba, texto debajo). */
  .team-detail-panel {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 20px;
  }

  .team-detail-divider {
    display: none;
  }

  .team-detail-photo {
    max-width: 220px;
  }
}

/* =========================================================
   PREGUNTAS FRECUENTES — grilla de 2 columnas, todo visible de
   entrada (sin <details>, sin hover-reveal): a propósito distinta de
   Áreas (acordeón) y Equipo (directorio con radios), y mejor para
   SEO/accesibilidad ya que ningún contenido depende de una
   interacción para existir en el DOM/pantalla.
========================================================= */

.faq {
  background: var(--paper);
  padding: 90px 0 100px;
}

.faq-head-centered {
  max-width: 560px;
  margin: 0 auto 40px;
  text-align: center;
}

.faq-head-centered h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 3.2vw, 3.6rem);
  color: var(--graphite-900);
}

.faq-underline {
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto;
  background: var(--bronze);
}

.faq-head-centered p {
  color: var(--charcoal);
  font-weight: 500;
  font-size: 1.4rem;
  max-width: 460px;
  margin-inline: auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Divisor vertical entre columnas — el mismo lenguaje de "franja"
   que ya se usa en el directorio de Equipo, acá aplicado a una
   grilla en vez de a dos bloques fijos. */
.faq-item:nth-child(odd) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding-right: 40px;
}

.faq-item:nth-child(even) {
  padding-left: 40px;
}

.faq-item h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--graphite-900);
  margin-bottom: 10px;
}

.faq-item p {
  color: var(--charcoal);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-item:nth-child(odd) {
    border-right: 0;
    padding-right: 0;
  }

  .faq-item:nth-child(even) {
    padding-left: 0;
  }
}

/* =========================================================
   CONTACTO
========================================================= */

.contact {
  position: relative;
  padding: 110px 0;

  background: var(--graphite-950);
  color: var(--paper);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 460px);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.contact-kicker {
  display: block;
  margin-bottom: 20px;
  color: var(--bronze-light);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.contact-mega {
  display: block;

  font-family: var(--font-display);
  font-size: clamp(3.6rem, 6.5vw, 8rem);
  line-height: 1.02;

  color: var(--paper);
  max-width: 900px;

  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.contact-mega:hover {
  color: var(--bronze-light);
  border-color: var(--bronze);
}

.contact-note {
  max-width: 560px;
  margin-top: 34px;

  color: var(--gray-light);
  font-size: 1.5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.contact-form label > span {
  color: var(--bronze-light);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 0;

  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);

  outline: 0;
  background: transparent;
  color: var(--paper);

  transition: border-color 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--bronze);
}

.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
  border-color: #d16a5a;
}

/* Mensaje de error puntual por campo (antes solo cambiaba el borde a
   rojo, sin texto — no decía qué estaba mal ni era anunciado por
   lectores de pantalla). Oculto por defecto; JS le pone texto y la
   clase .show cuando el campo es inválido al enviar. */
.field-error {
  display: none;
  color: #d16a5a;
  font-size: 1.2rem;
}

.field-error.show {
  display: block;
}

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

.contact-form .btn-outline {
  align-self: flex-start;
}

.form-confirm {
  display: none;
  padding: 14px;
  border: 1px solid var(--green);
  color: #8fd1a8;
  font-size: 1.3rem;
}

.form-confirm.show {
  display: block;
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
  background: var(--graphite-950);
  color: var(--paper);
}

.footer-band {
  position: relative;
  height: 220px;
}

.footer-band img {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.footer-band-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  background: rgba(14, 16, 22, 0.6);

  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Selector más específico que ".photo-duo img" y ".footer-band img"
   (pensadas para la FOTO de fondo del banner — position:absolute,
   opacity:0.5, filter duotono — no para este logo, que solo por estar
   anidado adentro de .footer-band también matcheaba esas reglas). */
.footer-band-overlay img.footer-band-logo {
  position: static;
  height: clamp(48px, 6vw, 72px);
  width: auto;
  margin-bottom: 4px;
  opacity: 1;
  object-fit: contain;
  filter: none;
}

.footer-band-word {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.5rem);
  color: var(--paper);
}

.footer-band-sub {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--bronze-light);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;

  padding: 34px 0;

  color: var(--gray-light);
  font-size: 1.2rem;
  text-align: center;
}

/* Las 3 sedes reales del estudio (CABA/Trelew/Rawson) — antes decía
   "Dirección a confirmar". En una sola fila si entran, se envuelven
   centradas si no (mobile). */
.footer-addresses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 32px;
}

.footer-address strong {
  color: var(--bronze-light);
  font-weight: 700;
  margin-right: 6px;
}

.footer-instagram {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--gray-light);
  font-weight: 600;

  transition: color 0.25s ease;
}

/* Ícono un poco más grande que antes (18px→24px) y con dos acentos
   bronce fijos (aro interior + punto) en vez de heredar un solo
   currentColor — así ya se lee "gris + dorado" en reposo, no solo al
   hacer hover. */
.footer-instagram svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.footer-instagram:hover {
  color: var(--bronze-light);
}

.footer-instagram:hover svg rect {
  stroke: var(--bronze-light);
}

.footer-studio {
  color: var(--gray-light);
}

.footer-studio a {
  color: var(--bronze-light);
  font-weight: 600;
  border-bottom: 1px solid rgba(200, 154, 104, 0.6);
}

.footer-studio a:hover {
  color: var(--paper);
}

/* =========================================================
   PÁGINA DE ÁREA (areas/*.html)
========================================================= */

.area-page-hero {
  position: relative;
  overflow: hidden;

  height: 46vh;
  min-height: 320px;

  margin-top: 88px;
}

.area-page-hero-content {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;

  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

/* Antes color:var(--gray-light) sin text-shadow: el degradé de
   .photo-duo (que tiñe la foto de cada hero) es diagonal y arranca
   más claro justo arriba a la izquierda — exactamente donde cae este
   botón (align-self:flex-start) — así que con fotos más claras el
   texto se perdía. Mismo criterio ya usado en .hero-portal-title: un
   color más claro (--paper, casi blanco) + text-shadow oscuro en capas
   para que se lea sobre CUALQUIER foto, sin depender de qué tan oscuro
   haya quedado el degradé en ese punto exacto. */
.area-page-back {
  display: inline-flex;
  align-self: flex-start;

  margin-bottom: 24px;

  font-size: 1.2rem;
  font-weight: 600;
  color: var(--paper);
  text-shadow: 0 2px 10px rgba(14, 16, 22, 0.7), 0 1px 4px rgba(14, 16, 22, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 2px;
}

.area-page-back:hover {
  color: var(--bronze-light);
  border-color: var(--bronze-light);
}

.area-page-hero-content h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.6rem, 6vw, 6.5rem);
  color: var(--paper);
}

.area-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

/* La columna izquierda (pull-quote + 2 párrafos + CTA) es siempre
   más corta que la lista de servicios de la derecha (varía entre 3 y
   6 ítems según el área) — con align-items:start terminaba mucho más
   arriba, dejando un bloque de espacio vacío feo al lado de la lista.
   position:sticky la deja acompañando a la lista mientras se
   scrollea en vez de quedar huérfana arriba; el borde bronce la
   enmarca como panel propio (no como texto que "se quedó corto"). Se
   desactiva en el media de abajo cuando la grilla pasa a una sola
   columna — ahí el orden normal del documento alcanza. */
.area-page-intro {
  position: sticky;
  top: 104px;
  align-self: start;

  border-left: 3px solid var(--bronze);
  padding-left: 28px;
}

.area-page-intro p {
  color: var(--charcoal);
  font-weight: 500;
  margin-bottom: 22px;
  font-size: 1.7rem;
}

.area-page-intro .manifesto-lead {
  margin-top: 26px;
}

.area-detail-list {
  border-top: 1px solid rgba(23, 24, 26, 0.14);
}

.area-detail-list li {
  padding: 26px 0;
  border-bottom: 1px solid rgba(23, 24, 26, 0.14);
}

.area-detail-list h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--graphite-900);
  margin-bottom: 8px;
}

.area-detail-list p {
  color: var(--charcoal);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .area-page-grid {
    grid-template-columns: 1fr;
  }

  .area-page-intro {
    position: static;
    border-left: 0;
    padding-left: 0;
    margin-bottom: 8px;
  }
}

/* =========================================================
   WHATSAPP FLOTANTE
========================================================= */

.wa-float {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 800;

  width: 58px;
  height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.3s ease;
}

.wa-icon {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}

.wa-float:hover {
  transform: translateY(-4px) scale(1.05);
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width: 1100px) {
  /* Debajo de 1100px las 5 áreas ya no entran cómodas en una línea:
     se invierte lo de arriba, vuelve el botón de menú de siempre. */
  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* =========================================================
   RESPONSIVE — 760px
========================================================= */

@media (max-width: 760px) {
  .container {
    width: min(calc(100% - 36px), var(--container));
  }

  .header-inner {
    width: calc(100% - 36px);
  }

  .menu-label {
    display: none;
  }

  .menu-link-text {
    font-size: clamp(3rem, 9vh, 4rem);
  }

  .menu-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .menu-foot > a:last-child {
    text-align: left;
    align-items: flex-start;
  }

  .section {
    padding: 90px 0;
  }

  /* .hero-portal-message queda encerrado en el mismo viewport que la
     foto (100svh) acá — sin el scroll-jack de escritorio no hay
     280vh de sección para respirar, así que el ritmo vertical se
     aprieta para que entre completo sin recortarse. */
  .hero-portal-eyebrow {
    margin-bottom: 14px;
  }

  .hero-portal-lead {
    margin-top: 16px;
    font-size: 1.3rem;
  }

  .hero-portal-cta {
    margin-top: 24px;
  }

  .manifesto {
    padding-bottom: 90px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .wa-float {
    right: 18px;
    bottom: 18px;
  }
}

@media (max-width: 480px) {
  .hero-portal-title {
    font-size: 3.2rem;
  }

  .hero-portal-lead {
    display: none;
  }

  .contact-mega {
    font-size: 3.4rem;
  }

  .statement h2 {
    font-size: 3.4rem;
  }
}