@import url('fuentes.css');

/* ==========================================================================
   ELTON Abogados — sistema visual
   Paleta y tipografía del Manual de Marca 2020 (docs/sistema-de-marca.md).
   El dorado y los papeles cálidos responden al encargo de los socios:
   «más color y calidez», la maqueta se veía «plana» y «gélida».
   ========================================================================== */

:root {
  /* Marca */
  --azul-profundo: #002d47;   /* PMS 296 C */
  --azul: #004b87;            /* PMS 301 C */
  --celeste: #b5d1e8;         /* PMS 277 C */
  --dorado: #c29141;          /* acento cálido, confirmado por JJ 29-08-2026 */
  /* Dorado para TEXTO sobre fondos claros: el #c29141 da 2,5:1 y falla WCAG AA;
     este da 4,7+:1. Sobre azul profundo el #c29141 sí cumple (5,1:1). */
  --dorado-texto: #8a6428;

  /* Superficies cálidas: sustituyen al #f4f9ff frío del manual */
  --papel: #fbf9f6;
  --papel-hondo: #f3efe8;
  --tinta: #1b2b38;
  --tinta-suave: #55636e;
  --linea: #e2dbd0;

  /* Tipografía */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;   /* títulos (JJ, 11-10-2026) */
  --texto: 'Poppins', system-ui, sans-serif;                      /* cuerpo, rótulos y botones */

  /* Espaciado — base 4, con los 10/20/40 del manual (pág. 26) */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 20px;
  --e5: 40px;  --e6: 64px;  --e7: 96px;  --e8: 128px;

  --ancho: 1200px;
  --borde-pagina: 20px;      /* margen de seguridad del manual (pág. 25) */
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Peso 400 en el cuerpo: el 300 se veía débil a 17px en pantallas Windows
   (validado en el rediseño del 29-08-2026). */
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;          /* la serif no necesita el «Thin» del manual */
  font-variation-settings: 'opsz' 72;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; font-variation-settings: 'opsz' 24; }
p { margin: 0 0 1.1em; max-width: 68ch; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--borde-pagina);
}

/* overflow-x: clip no crea contenedor de scroll (el índice pegajoso sigue
   funcionando) y evita que la hoja 3D del origami asome por el costado. */
.seccion { padding-block: clamp(var(--e6), 9vw, var(--e8)); overflow-x: clip; }
.seccion--honda { background: var(--papel-hondo); }
.seccion--azul { background: var(--azul-profundo); color: #fff; }
.seccion--azul .rotulo { color: var(--celeste); }
.seccion--azul p { color: #d6e2ec; }

/* Rótulo de sección: reemplaza los «numeritos colgados» que los socios
   pidieron eliminar (01 / 02 / 03). */
.rotulo {
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin: 0 0 var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

/* --------------------------------------------------------------- Cabecera */
/* Fondo sólido a propósito: un backdrop-filter aquí cuesta repintado en cada
   scroll y no aporta nada al diseño. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 72px;
}
.cabecera__logo img { width: 168px; }
.nav { display: flex; align-items: center; gap: var(--e5); }
.nav a {
  font-size: 0.9rem;
  text-decoration: none;
  padding-block: var(--e2);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, color 200ms;
}
.nav a:focus-visible { border-color: var(--dorado); color: var(--azul); }

.idiomas { display: flex; gap: var(--e2); font-size: 0.78rem; letter-spacing: 0.08em; }
.idiomas a { text-decoration: none; color: var(--tinta-suave); padding: var(--e1) var(--e2); }
.idiomas a[aria-current='true'] { color: var(--azul-profundo); font-weight: 600; }

.menu-boton {
  display: none;
  background: none; border: 1px solid var(--linea);
  border-radius: 2px; padding: var(--e2) var(--e3);
  font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--tinta);
  transition: transform 160ms var(--ease-salida);
}
.menu-boton:active { transform: scale(0.96); }

/* -------------------------------------------------------------------- Hero */
/* Hero «la foto, viva» (prototipo 1, elegido por JJ el 10-10-2026): la foto de
   la recepción a sangre, con avance lento hacia el fondo del pasillo, paralaje
   con el scroll y un velo que respira a la derecha. Solo transform y opacity.
   Las entradas viven bajo html.anima (la pone un script inline en la portada
   solo si el visitante no pidió reducir movimiento): sin JS, todo visible. */
:root {
  --ease-salida: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-pliegue: cubic-bezier(0.77, 0, 0.175, 1);
}
.hero { position: relative; overflow: clip; background: var(--azul-profundo); color: #fff; }
/* Capa exterior: paralaje (más alta por arriba para no abrir hueco al bajar).
   Capa interior: avance con origen en el punto de fuga del pasillo. */
.hero__foto { position: absolute; top: -12%; right: 0; bottom: 0; left: 0; will-change: transform; }
.hero__zoom { position: absolute; inset: 0; transform-origin: 48% 46%; will-change: transform; }
.hero__zoom picture { display: block; width: 100%; height: 100%; }
.hero__zoom img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Velo: oscuro donde va el texto, casi transparente donde están las luces del
   techo y el mármol. Blanco sobre la zona clara más cercana al texto: 4,5:1+. */
.hero__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,45,71,0.92) 0%, rgba(0,45,71,0.84) 32%, rgba(0,45,71,0.66) 50%, rgba(0,45,71,0.22) 68%, rgba(0,45,71,0.04) 86%, rgba(0,45,71,0) 100%),
    linear-gradient(to top, rgba(0,45,71,0.6) 0%, rgba(0,45,71,0) 46%);
}
.hero__cuerpo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(86dvh, 880px);
  padding-block: clamp(var(--e6), 8vw, 120px) clamp(var(--e5), 7vw, 104px);
}
.hero__texto { max-width: 44rem; }
/* Titular en Newsreader 400, tracking apenas cerrado. Cada línea es un bloque
   con máscara para poder subirla por separado. */
.hero h1 {
  color: #fff;
  font-weight: 400;
  font-size: clamp(2.3rem, 1.1rem + 3.3vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: initial;
}
html[lang="de"] .hero h1 { font-size: clamp(2.1rem, 1rem + 2.8vw, 3.6rem); }
.hero h1 em { font-style: normal; color: var(--celeste); }
.hero__linea { display: block; overflow: hidden; padding-block: 0.06em; margin-block: -0.06em; }
.hero__linea > span { display: block; }
/* Filete dorado que se desvanece hacia la derecha, como las líneas de luz del
   techo de la foto. */
.hero__filete {
  display: block; width: min(100%, 28rem); height: 1px;
  margin-top: clamp(var(--e4), 3vw, var(--e5));
  background: linear-gradient(90deg, var(--dorado), rgba(194,145,65,0));
  transform-origin: left center;
}
.hero__bajada { max-width: 32rem; margin: var(--e4) 0 0; font-size: 1.02rem; line-height: 1.65; color: #dbe6ee; }
.hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); margin-top: var(--e5); }
.hero__enlace {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding-block: var(--e2);
  color: #fff; font-size: 0.92rem; letter-spacing: 0.04em; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 200ms;
}
.hero__enlace span { display: inline-block; transition: transform 200ms var(--ease-salida); }
@media (hover: hover) and (pointer: fine) {
  .hero__enlace:hover { border-color: var(--dorado); }
  .hero__enlace:hover span { transform: translateX(4px); }
}
/* Entradas del texto del hero en CSS puro (solo con html.anima): arrancan en el
   primer cuadro, sin esperar a que cargue GSAP (JJ notó que el titular tardaba).
   El avance de la foto y el paralaje sí van en movimiento.js. */
.anima .hero__linea > span { animation: hero-sube 800ms var(--ease-salida) both; }
.anima .hero__linea:nth-child(1) > span { animation-delay: 60ms; }
.anima .hero__linea:nth-child(2) > span { animation-delay: 150ms; }
.anima .hero__linea:nth-child(3) > span { animation-delay: 240ms; }
.anima .hero__filete   { animation: hero-trazo 800ms var(--ease-salida) 420ms both; transform-origin: left center; }
.anima .hero__bajada   { animation: hero-aparece 700ms var(--ease-salida) 500ms both; }
.anima .hero__acciones { animation: hero-aparece 700ms var(--ease-salida) 620ms both; }
@keyframes hero-sube    { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hero-trazo   { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes hero-aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- Cifra 50 */
.cifra { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e4); }
.cifra strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 5.5rem);
  line-height: 0.9;
  color: var(--dorado-texto);
}
.cifra span { font-size: 0.95rem; color: var(--tinta-suave); letter-spacing: 0.04em; }
.seccion--azul .cifra span { color: #cfdce6; }

/* ------------------------------------------------------------------ Dúplex */
.duplex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(var(--e5), 5vw, var(--e6));
  align-items: start;
}


/* ------------------------------------------------------------------- Áreas */
/* Índice en dos columnas con filetes, sin cajas: el nombre manda y la
   descripción acompaña en gris. La flecha avanza al pasar el cursor. */
.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  column-gap: clamp(var(--e5), 6vw, var(--e7));
  border-top: 1px solid var(--linea);
}
.area {
  padding: var(--e4) 0 var(--e4);
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titulo flecha" "texto flecha";
  column-gap: var(--e4);
  row-gap: var(--e1);
  align-items: baseline;
}
.area h3 { grid-area: titulo; font-family: var(--display); font-weight: 500; font-variation-settings: 'opsz' 24; font-size: 1.25rem; transition: color 200ms; }
.area p { grid-area: texto; font-size: 0.88rem; color: var(--tinta-suave); margin: 0; max-width: 40ch; }
.area__flecha { grid-area: flecha; align-self: center; color: var(--dorado-texto); font-size: 0.8rem; letter-spacing: 0.1em; white-space: nowrap; transition: transform 220ms var(--ease-salida); }
.area:focus-visible h3 { color: var(--azul); }
.area:focus-visible .area__flecha { transform: translateX(4px); }

/* --------------------------------------------------------------- Abogados */
/* Listado vertical y sin movimiento: los socios rechazaron el carrusel
   («hover imposible»); la foto completa es clickeable. Flex centrado para
   que la última fila no quede pegada al margen izquierdo (pedido de JJ). */
.abogados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e5) var(--e4);
}
/* Columna: el nombre reserva dos líneas para que los cargos queden alineados
   aunque un nombre ocupe una sola. */
.abogado { text-decoration: none; display: flex; flex-direction: column; flex: 0 1 205px; text-align: center; }
.abogado__retrato {
  aspect-ratio: 1;
  background: var(--papel-hondo);
  overflow: hidden;
  margin-bottom: var(--e3);
  border-bottom: 2px solid transparent;
  transition: border-color 200ms;
}
.abogado__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform 500ms var(--ease-salida); }
.abogado:focus-visible .abogado__retrato { border-color: var(--dorado); }
.abogado:focus-visible .abogado__retrato img { transform: scale(1.03); }
.abogado__nombre { font-family: var(--display); font-weight: 500; font-variation-settings: 'opsz' 24; font-size: 1.08rem; line-height: 1.3; min-height: 2.6em; margin: 0 0 var(--e1); }
.abogado__cargo { margin: 0; }
.abogado__cargo { font-size: 0.78rem; color: var(--dorado-texto); letter-spacing: 0.08em; text-transform: uppercase; }
.abogado__retrato--pendiente {
  display: grid; place-items: center;
  color: var(--tinta-suave); font-size: 0.75rem; text-align: center; padding: var(--e3);
  border: 1px dashed var(--linea);
}

/* ------------------------------------------------------------------ Botón */
.boton {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--texto); font-size: 0.88rem; font-weight: 400;
  letter-spacing: 0.06em;
  padding: var(--e3) var(--e4);
  border: 1px solid currentColor;
  color: var(--azul);
  text-decoration: none;
  transition: transform 160ms var(--ease-salida), background-color 200ms, color 200ms;
}
.boton:focus-visible { background: var(--azul); color: #fff; }
.boton:active { transform: scale(0.97); }
.boton--dorado {
  background: var(--dorado); border-color: var(--dorado); color: var(--azul-profundo);
  font-weight: 600; min-height: 48px; padding-inline: 28px;
  transition: transform 160ms var(--ease-salida), background-color 200ms, border-color 200ms;
}
.boton--dorado:focus-visible { background: #d3a458; border-color: #d3a458; color: var(--azul-profundo); }
.boton--dorado:active { transform: scale(0.97); }
.boton--claro { color: var(--celeste); }
.boton--claro:focus-visible { background: var(--celeste); color: var(--azul-profundo); }

/* --------------------------------------------------------------- Contacto */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(var(--e5), 5vw, var(--e7)); align-items: start; }
.contacto__datos { display: grid; gap: var(--e4); }
.contacto__datos h2 { margin-bottom: var(--e2); }
.contacto__datos .dato { font-size: 1.05rem; }
.contacto__acciones { margin: var(--e3) 0 0; }
.dato { display: flex; gap: var(--e3); align-items: flex-start; }
.dato svg { width: 20px; height: 20px; flex: none; color: var(--dorado); margin-top: 3px; }
/* En el pie los datos van en una columna compacta con el ícono a la izquierda. */
.pie__datos { display: grid; gap: var(--e2); }
.dato--pie { margin: 0; align-items: center; gap: var(--e2); }
.dato--pie a { border-bottom: 0; }   /* en el pie los enlaces no llevan subrayado */
.dato--pie svg { width: 16px; height: 16px; margin-top: 0; }
.mapa__enlace { margin: var(--e3) 0 0; font-size: 0.88rem; }
.mapa__enlace a { text-decoration: none; border-bottom: 1px solid var(--linea); transition: border-color 200ms; }
.mapa__enlace a:focus-visible { border-color: var(--dorado); }
.dato a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.dato a:focus-visible { border-color: var(--dorado); }
.mapa { border: 0; width: 100%; aspect-ratio: 4 / 3; background: var(--papel-hondo); }

/* ------------------------------------------------------------------- Pie */
.pie { background: var(--azul-profundo); color: #cfdce6; padding-block: var(--e6) var(--e5); font-size: 0.9rem; }
.pie a { color: #fff; text-decoration: none; }
.pie a:focus-visible { color: var(--dorado); }
.pie__fila { display: flex; flex-wrap: wrap; gap: var(--e5); justify-content: space-between; }
.pie__legal {
  margin-top: var(--e5); padding-top: var(--e4);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: space-between;
  font-size: 0.82rem;
}
.pie__logo img { width: 180px; margin-bottom: var(--e4); }

.marcador {
  border: 1px dashed var(--dorado);
  background: rgba(194,145,65,0.07);
  padding: var(--e3) var(--e4);
  font-size: 0.82rem;
  color: var(--tinta-suave);
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--azul-profundo); color: #fff; padding: var(--e3) var(--e4); z-index: 100;
}
.saltar:focus { left: var(--e4); top: var(--e2); }

:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }

/* ------------------------------------------------------------------ Móvil */
@media (max-width: 900px) {
  .hero__cuerpo { min-height: min(84dvh, 760px); padding-block: var(--e6) var(--e5); }
  .hero h1 { font-size: clamp(2rem, 7.6vw, 2.7rem); }
  /* La foto pasa por detrás del texto a ancho completo: velo reforzado de
     arriba abajo. */
  .hero__velo { background: linear-gradient(to bottom, rgba(0,45,71,0.48) 0%, rgba(0,45,71,0.74) 28%, rgba(0,45,71,0.9) 48%, rgba(0,45,71,0.95) 100%); }
  .hero__zoom { transform-origin: 40% 46%; }
  .hero__zoom img { object-position: 52% 50%; }
  .hero__bajada { font-size: 0.98rem; }
  .menu-boton { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--papel); border-bottom: 1px solid var(--linea);
    padding: var(--e4) var(--borde-pagina);
    /* Cerrado: invisible y fuera del foco. Abre en 220 ms, cierra en 160 ms. */
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 160ms var(--ease-salida), transform 160ms var(--ease-salida), visibility 0s 160ms;
  }
  .nav[data-abierto='true'] {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 220ms var(--ease-salida), transform 220ms var(--ease-salida), visibility 0s;
  }
  /* Áreas en móvil: lista compacta de títulos; la descripción vive en la
     página de áreas (la portada medía 5.700 px). */
  .area { padding-block: var(--e3); }
  .area p { display: none; }
  .area h3 { font-size: 1.02rem; }
  .nav a { width: 100%; padding-block: var(--e3); }
}

/* ======================================================== Páginas interiores */

.pagina-hero {
  background: var(--azul-profundo);
  color: #fff;
  padding-block: var(--e6) var(--e5);
}
.pagina-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.pagina-hero .migas { margin-bottom: var(--e4); }

.migas {
  font-size: 0.8rem;
  color: var(--celeste);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
}
.migas a { color: inherit; text-decoration: none; }
.migas a:focus-visible { color: #fff; }
.migas li { list-style: none; display: flex; gap: var(--e2); }
.migas li + li::before { content: '›'; opacity: 0.6; }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; padding: 0; }

/* Perfil de abogado */
.perfil {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(var(--e5), 5vw, var(--e7));
  align-items: start;
}
.perfil__foto img { width: 100%; height: auto; }
.perfil__linea {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  line-height: 1.3;
  color: var(--azul);
  margin-bottom: var(--e4);
}
.perfil h2 {
  font-size: 0.8rem;
  font-family: var(--texto);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dorado-texto);
  margin: var(--e5) 0 var(--e3);
}
.perfil h2:first-of-type { margin-top: 0; }
.perfil__correo { font-size: 0.95rem; margin-top: var(--e3); display: flex; align-items: center; gap: 8px; }
.perfil__correo svg { color: var(--dorado); flex: none; }
.perfil__correo a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.perfil__correo a:focus-visible { border-color: var(--dorado); }

.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0; margin: 0; }
.etiquetas li { list-style: none; }
.etiquetas a {
  display: inline-block;
  font-size: 0.82rem;
  padding: var(--e1) var(--e3);
  border: 1px solid var(--linea);
  text-decoration: none;
  transition: border-color 200ms, color 200ms;
}
.etiquetas a:focus-visible { border-color: var(--dorado); color: var(--azul); }

/* Bloques de área con ancla */
.area-bloque { padding-block: var(--e6); border-top: 1px solid var(--linea); }
.area-bloque:first-of-type { border-top: 0; }
.area-bloque h2 { margin-bottom: var(--e4); max-width: 22ch; }
.area-bloque .duplex { gap: clamp(var(--e5), 4vw, var(--e6)); }

/* FAQ: details/summary sin JS */
.faq { border: 1px solid var(--linea); border-bottom: 0; }
.faq details { border-bottom: 1px solid var(--linea); background: #fff; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--e4);
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 24;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--dorado-texto); font-size: 1.2rem; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 var(--e4) var(--e4); }
.faq p { font-size: 0.95rem; }

/* Índice pegajoso de áreas */
.indice-areas {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  font-size: 0.88rem;
}
.indice-areas a {
  text-decoration: none;
  color: var(--tinta-suave);
  padding: var(--e1) 0 var(--e1) var(--e3);
  border-left: 2px solid var(--linea);
  transition: border-color 200ms, color 200ms;
}
.indice-areas a:focus-visible { border-color: var(--dorado); color: var(--azul); }

.dos-columnas-areas {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(var(--e5), 5vw, var(--e7));
  align-items: start;
}

/* Prosa legal (política de privacidad) */
.prosa h2 { font-size: 1.4rem; margin: var(--e5) 0 var(--e3); }
.prosa ul { padding-left: 1.2em; }
.prosa li { margin-bottom: var(--e2); }

@media (max-width: 900px) {
  .perfil { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; }
  /* Dos retratos por fila en móvil: la nómina de 18 medía más de 7.000 px. */
  .abogados { gap: var(--e4) var(--e3); }
  .abogado { flex: 0 1 calc(50% - var(--e3) / 2); }
  .abogado__nombre { font-size: 0.98rem; }
  .perfil__foto { max-width: 320px; }
  .dos-columnas-areas { grid-template-columns: 1fr; }
  .indice-areas { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--e3); }
  .indice-areas a { border-left: 0; border-bottom: 1px solid var(--linea); padding: var(--e1) 0; }
}

/* Sobre fondos azules el dorado original cumple contraste (5,1:1) y conserva
   la calidez; el dorado-texto es solo para fondos claros. */
.seccion--azul .rotulo { color: var(--celeste); }
.seccion--azul .cifra strong { color: var(--dorado); }

/* ===================================================== Detalles de origami */
/* El pliegue como firma repetida en microdetalles, no como adorno grande
   (los socios pidieron «origami sin exceso»; JJ pidió una página más viva). */

/* Viñeta de molinillo plegado delante de cada rótulo de sección. */
.rotulo::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h12L0 12z' fill='%23c29141'/%3E%3Cpath d='M12 0h12v12z' fill='%23c29141' opacity='.55'/%3E%3Cpath d='M24 12v12H12z' fill='%23c29141' opacity='.8'/%3E%3Cpath d='M12 24H0V12z' fill='%23c29141' opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Marca de agua de pliegues en las bandas azules y cabeceras de página. */
.pagina-hero,
.seccion--azul { position: relative; overflow: hidden; }
.pagina-hero::before,
.seccion--azul::before {
  content: '';
  position: absolute;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  pointer-events: none;
  opacity: 0.08;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='white' stroke-width='1.5'%3E%3Crect x='1' y='1' width='198' height='198'/%3E%3Cpath d='M1 1l198 198M199 1L1 199M100 1v198M1 100h198'/%3E%3Cpath d='M1 1l99 99L1 199M199 1l-99 99 99 99' stroke-dasharray='5 6' opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pagina-hero > .contenedor,
.seccion--azul > .contenedor { position: relative; }


/* Banda fotográfica a todo el ancho (La Firma: la galería de la oficina). */
.banda-foto img {
  width: 100%;
  height: clamp(300px, 48vh, 520px);
  object-fit: cover;
  object-position: center 60%;
}


/* Servicios concretos por área (rescatados de la maqueta): lista escaneable
   con viñeta de pliegue. */
.servicios {
  padding: 0;
  margin: 0 0 var(--e4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--e2) var(--e5);
}
.servicios li {
  list-style: none;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  padding-left: 18px;
  position: relative;
}
.servicios li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--dorado) 50%, rgba(194, 145, 65, 0.35) 50%);
}

/* Cita de cierre (relato origami: «Detalles»). */
.cita {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.35;
  color: var(--celeste);
  max-width: 34ch;
  margin: var(--e5) 0 0;
}

/* Cabeceras interiores con fotografía real y velo uniforme: los socios
   pidieron foto por pestaña con formato consistente (REV 13-08-2025). */
.pagina-hero--foto {
  background-size: cover;
  background-position: center 42%;
}
.pagina-hero--galeria {
  background-image: linear-gradient(rgba(0, 45, 71, 0.87), rgba(0, 45, 71, 0.84)), url('../img/galeria-1600.webp');
}
.pagina-hero--recepcion {
  background-image: linear-gradient(rgba(0, 45, 71, 0.87), rgba(0, 45, 71, 0.84)), url('../img/recepcion-1600.webp');
}
.pagina-hero--sala {
  background-image: linear-gradient(rgba(0, 45, 71, 0.87), rgba(0, 45, 71, 0.84)), url('../img/sala-1600.webp');
}

/* ================================================ Hover solo con puntero fino */
/* En pantallas táctiles el hover queda pegado tras el toque; aquí solo entra
   quien tiene mouse. Los estados de foco quedan arriba, para todos. */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { border-color: var(--dorado); color: var(--azul); }
  .abogado:hover .abogado__retrato { border-color: var(--dorado); }
  .abogado:hover .abogado__retrato img { transform: scale(1.03); }
  .boton:hover { background: var(--azul); color: #fff; }
  .boton--dorado:hover { background: #d3a458; border-color: #d3a458; color: var(--azul-profundo); }
  .boton--claro:hover { background: var(--celeste); color: var(--azul-profundo); }
  .dato a:hover { border-color: var(--dorado); }
  .pie a:hover { color: var(--dorado); }
  .migas a:hover { color: #fff; }
  .perfil__correo a:hover { border-color: var(--dorado); }
  .etiquetas a:hover { border-color: var(--dorado); color: var(--azul); }
  .indice-areas a:hover { border-color: var(--dorado); color: var(--azul); }
  .area:hover h3 { color: var(--azul); }
  .area:hover .area__flecha { transform: translateX(4px); }
}

/* ======================================================= Aparición al hacer scroll */
/* Solo con html.anima (sin JS o con «reducir movimiento», nada se oculta).
   El CSS oculta estos bloques desde el primer cuadro y movimiento.js los
   revela con GSAP por lotes al entrar en pantalla.
   Red de seguridad: pase lo que pase, a los 4 s todo queda visible. */
.anima :where(.duplex > *, .areas > .area, .abogados > .abogado, .contacto > *, .perfil > *,
  .seccion > .contenedor > .rotulo, .seccion > .contenedor > h2, .area-bloque, .banda-foto, .cita) {
  opacity: 0;
  transform: translateY(16px);
  animation: revela-seguro 0s linear 4s forwards;
}
@keyframes revela-seguro { to { opacity: 1; transform: none; } }

/* ====================================================== Transición entre páginas */
/* Fundido breve entre páginas (View Transitions entre documentos); la
   cabecera conserva su nombre para que no se funda consigo misma. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
}
.cabecera { view-transition-name: cabecera; }

/* ============================================ Clases que reemplazan estilos en línea */
.nav a[aria-current="page"] { color: var(--azul); border-color: var(--dorado); }
.seccion__titulo { margin-bottom: var(--e5); max-width: 24ch; }
.duplex--centrado { align-items: center; }
.nota { color: var(--tinta-suave); font-size: 0.92rem; }
.contenedor--estrecho { max-width: 820px; }
.pie__legal--solo { border-top: 0; margin-top: 0; padding-top: 0; }
.pagina-hero__cargo { color: var(--celeste); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; margin: var(--e3) 0 0; }
.pagina-hero__bajada { color: #cfdce6; max-width: 56ch; margin: var(--e4) 0 0; }
.abogado__nota { font-size: 0.78rem; color: var(--tinta-suave); margin: var(--e1) 0 0; }
/* Márgenes puntuales (los únicos «utilitarios» del sitio). */
.u-m0 { margin: 0; }
.u-mb0 { margin-bottom: 0; }
.u-mb2 { margin: 0 0 var(--e2); }
.u-mb4 { margin-bottom: var(--e4); }
.u-mt4 { margin-top: var(--e4); }
.u-mt5 { margin-top: var(--e5); }

/* ======================================================= Origami: la montaña */
/* Montaña de papel plegado (SVG en línea). movimiento.js la dibuja con GSAP;
   este CSS solo fija el estado terminado. Nunca sobre el logo. */
.mt { width: 100%; max-width: 380px; display: block; overflow: visible; }
.seccion--azul .mt__caras { stroke: #002d47; }

/* ====================================== Perfil: abogado anterior y siguiente */
.vecinos { border-top: 1px solid var(--linea); }
.vecinos__fila { display: flex; justify-content: space-between; gap: var(--e4); padding-block: var(--e4); }
.vecinos__anterior, .vecinos__siguiente { text-decoration: none; display: flex; flex-direction: column; gap: 2px; max-width: 45%; }
.vecinos__siguiente { text-align: right; margin-left: auto; }
.vecinos__rotulo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado-texto); }
.vecinos__nombre { font-family: var(--display); font-weight: 500; font-variation-settings: 'opsz' 24; font-size: 1.1rem; color: var(--azul); transition: color 200ms; }
.vecinos__anterior .vecinos__nombre::before { content: '← '; }
.vecinos__siguiente .vecinos__nombre::after { content: ' →'; }
.vecinos__anterior:focus-visible .vecinos__nombre, .vecinos__siguiente:focus-visible .vecinos__nombre { color: var(--azul-profundo); }

/* ====================================================== Áreas: equipo e índice */
.area-bloque__equipo { font-size: 0.92rem; margin: var(--e4) 0 0; max-width: none; }
.area-bloque__equipo span { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado-texto); margin-bottom: var(--e1); }
.area-bloque__equipo a { text-decoration: none; border-bottom: 1px solid var(--linea); transition: border-color 200ms; }
.area-bloque__equipo a:focus-visible { border-color: var(--dorado); }
.indice-areas a[aria-current="true"] { border-color: var(--dorado); color: var(--azul); }

@media (hover: hover) and (pointer: fine) {
  .area-bloque__equipo a:hover { border-color: var(--dorado); }
  .mapa__enlace a:hover { border-color: var(--dorado); }
  .vecinos__anterior:hover .vecinos__nombre, .vecinos__siguiente:hover .vecinos__nombre { color: var(--azul-profundo); }
}
@media (max-width: 900px) {
  .mt { max-width: 280px; }
}