/* ============================================================
   PAGINAS INTERNAS — se carga despues de main.css
   Incluye tambien los bloques compartidos que el contenido de las paginas
   hereda con nombres del concepto anterior (.sec, .eyebrow, .h2, .btn, .cta,
   .steps, .proof), reescritos en el lenguaje de Veredicto.
   ============================================================ */

.sec { padding-block: clamp(3.5rem, 7vw, 6rem); }

.eyebrow {
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem;
}
.h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.015em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.pull {
  font-family: var(--display); font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.25;
  color: var(--gold); margin: clamp(1.35rem, 2.6vw, 2rem) 0;
  padding-left: clamp(1rem, 2vw, 1.6rem); border-left: 1px solid var(--gold);
}

/* Botones: mismos nombres de antes, apariencia de Veredicto. */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .9rem 1.6rem; border: 0; background: transparent; color: #000;
  cursor: pointer; transition: color .25s ease;
}
.btn::before, .btn::after {
  content: ""; position: absolute; pointer-events: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn::before { inset: 0; z-index: -2; background: var(--gold); transition: background .25s ease; }
.btn::after { inset: 1px; z-index: -1; background: var(--btn-bg); opacity: 0; transition: opacity .25s ease; }
.btn:hover::before { background: var(--gold-lt); }

.btn--navy { color: var(--ink); }
.btn--navy::before { background: var(--ink); }
.btn--navy::after { opacity: 1; }
.btn--navy:hover { color: var(--paper); }
.btn--navy:hover::after { opacity: 0; }
.btn--navy:hover::before { background: var(--ink); }

.btn--ghost { color: var(--gold-lt); }
.btn--ghost::after { opacity: 1; }
.btn--ghost:hover { color: var(--ink); }
.btn--ghost:hover::after { opacity: 0; }

/* Cabecera de pagina: version compacta del hero, sin video. */
.pagehero { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.pagehero__media { position: absolute; inset: 0; z-index: -2; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28,39,69,.88) 0%, rgba(18,26,48,.94) 100%);
}
.pagehero .wrap {
  position: relative; z-index: 1; text-align: center;
  padding: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)) var(--pad) clamp(2.5rem, 5vw, 4rem);
}
.pagehero h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1.14; letter-spacing: .01em;
  color: #fff; margin: 0 auto; max-width: 24ch; text-wrap: balance;
  /* La perspectiva vive en el padre: sin ella el giro sobre Y no es un giro, es la
     marca aplastandose y volviendo. Con ella el as pasa de canto, como una moneda. */
  perspective: 620px;
}
/* El as cierra el titular, como una firma. Va en em para que escale con la tipografia
   y en ::after para no tocar el marcado de las noventa y una paginas. */
.pagehero h1::after {
  content: ""; display: inline-block; vertical-align: -.06em;
  width: .64em; height: .72em; margin-left: .38em;
  background: url(/assets/img/mark-gold.webp) center / contain no-repeat;
  /* Tres vueltas y para. 1080deg acaba mirando al frente, igual que empezo, asi que
     `both` deja la marca quieta y de cara al terminar. El retardo la deja entrar
     despues de que el titular se haya asentado, no a la vez.
     La curva es la de la casa: sale rapida y frena al final, como una moneda que gira
     y se posa. Quien pida menos movimiento no ve nada: la regla global de
     prefers-reduced-motion en main.css apaga las animaciones tambien en ::after. */
  animation: girar-as 1.7s cubic-bezier(.22, 1, .36, 1) .4s both;
}
@keyframes girar-as {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(1080deg); }
}
.pagehero > .wrap > p { font-family: var(--text); color: var(--grey-dk); max-width: 62ch; margin: 1.15rem auto 0; }
/* Cabecera corta para las paginas de tercer y cuarto nivel: el mismo bloque, con
   menos aire, porque debajo empieza texto largo y no una portada. */
.pagehero--slim .wrap { padding-top: calc(var(--header-h) + clamp(1.5rem, 3.5vw, 2.5rem)); padding-bottom: clamp(2rem, 4vw, 3rem); }
.pagehero--slim h1 { font-size: clamp(1.55rem, 3.4vw, 2.6rem); }

.crumbs { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dk); margin: 0 0 1.1rem; }
/* Cada miga entera o nada: partir "Personal Injury" a mitad se ve descuidado. */
.crumbs a { white-space: nowrap; }
.crumbs a { color: var(--gold); }
.crumbs a:hover { color: var(--gold-lt); }
.crumbs i { font-style: normal; margin: 0 .5rem; opacity: .5; }

/* Texto largo */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose p { font-family: var(--text); font-size: 1.02rem; line-height: 1.75; color: var(--grey); }
.prose h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.15; color: var(--ink); margin-top: 2.75rem;
}
.prose h3 { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--ink); margin-top: 1.9rem; }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: .7rem; }
.prose ul li { position: relative; padding-left: 1.6rem; font-family: var(--text); color: var(--grey); line-height: 1.7; }
.prose ul li::before {
  content: ""; position: absolute; left: .25rem; top: .72em;
  width: 7px; height: 1px; background: var(--gold);
}
.prose strong { color: var(--ink); font-weight: 700; }
/* Asociaciones de la ficha del equipo enlazadas a su web oficial (ContenidoFicha). Mismo
   texto y color que el resto de la lista, para que una lista con y sin enlaces se vea
   pareja: lo que las delata es un subrayado fino dorado y la flecha. Al pasar o con el
   foco, tinta azul y el subrayado en dorado pleno. */
.prose a.asoc { color: inherit; transition: color .2s ease; }
.asoc__txt {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
  text-decoration-color: rgba(184,135,59,.45); transition: text-decoration-color .2s ease;
}
.asoc__ext { font-size: .9em; color: var(--gold); white-space: nowrap; }
.prose a.asoc:hover, .prose a.asoc:focus-visible { color: var(--ink); }
.prose a.asoc:hover .asoc__txt, .prose a.asoc:focus-visible .asoc__txt { text-decoration-color: var(--gold); }
.prose a.asoc:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Solo para lectores de pantalla (p. ej. el aviso de que un enlace abre otra pestana). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Contenido + barra lateral */
.with-aside { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
/* Barra lateral a la izquierda. .with-aside la pone a la derecha, que es lo que piden
   las paginas de areas; aqui las categorias van delante porque son el indice de la
   pagina, no un apendice. Al plegarse a una columna quedan arriba, que es donde sirven. */
.with-aside--izq { grid-template-columns: 340px 1fr; }
.aside { position: sticky; top: calc(var(--header-h) + 1rem); display: grid; gap: 1.15rem; }
.aside__card { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.6rem; }
.aside__card h3 { font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin: 0 0 .5rem; color: var(--ink); }
.aside__card p { font-family: var(--text); font-size: .95rem; line-height: 1.65; color: var(--grey); margin: 0 0 1.25rem; }
.aside__card .btn { width: 100%; justify-content: center; }
.aside__card--navy { background: var(--ink); border-color: var(--ink); --btn-bg: var(--ink); }
.aside__card--navy h3 { color: #fff; }
.aside__card--navy p { color: var(--grey-dk); }
/* Con el boton fuera, el telefono es la unica accion de la tarjeta: pasa a bloque, a
   cuerpo de titular y con el auricular al lado. El numero va en Caslon y no en la mono
   de los rotulos porque aqui no rotula nada — es la llamada a la accion.
   Sigue siendo un enlace tel:, asi que en el movil marca de un toque. */
/* El numero es lo unico que queda por pulsar en la tarjeta, asi que se enmarca en vez de
   flotar suelto: panel con el corte de esquina de la casa y el fondo levantado sobre el
   azul. Relleno y sin borde a proposito — el clip-path corta un borde normal en las
   diagonales, que es justo por lo que los botones de la casa usan dos capas.
   El numero va en el oro claro: sobre el azul contrasta bastante mas que el oro medio,
   y ahi la legibilidad importa mas que en un rotulo. */
.aside__tel {
  display: block; text-align: center; padding: 1.05rem .9rem 1.15rem;
  background: rgba(184,135,59,.13);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: background .25s ease;
}
.aside__tel span {
  display: block; font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem;
}
.aside__tel b {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 2.1vw, 2.15rem);
  line-height: 1; color: var(--gold-lt);
}
.aside__tel svg { flex: none; }
.aside__tel:hover { background: rgba(184,135,59,.22); }
.aside__list { list-style: none; margin: 0; padding: 0; display: grid; }
.aside__list a {
  display: block; padding: .85rem 0; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule);
}
.aside__list li:last-child a { border-bottom: 0; }
.aside__list a:hover, .aside__list a.is-here { color: var(--gold); }

/* Sub-servicios */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; margin-top: 1.6rem; }
/* Variante de tres columnas (ficha de Kevin). Como clase y no en el atributo style,
   para que las consultas de medios de abajo puedan reducirla en movil. */
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc { background: var(--paper); border: 1px solid var(--rule); border-top: 2px solid var(--gold); padding: 1.5rem 1.35rem; }
/* El titulo de cada tarjeta es lo que se escanea: tiene que mandar sobre el parrafo. Libre
   Caslon TEXT en 700 —el peso existe de verdad; la Display solo se carga en 400 y en negrita
   saldria sintetica—, casi negro, y un filete dorado corto debajo que separa titulo y texto.
   Al pasar por encima el titulo se tine de un dorado oscuro (contraste AA sobre blanco) y el
   filete se alarga: la tarjeta entera es el enlace y asi se nota.

   Es EL titulo de practica del sitio: las sub-practicas (.svc, p. ej. las de Criminal
   Defense), las areas (.pcard h3: portada, indice de areas y areas de cada ciudad) y cada
   entrada del arbol del indice de areas (.treelist: madres e hijas, y las que en espanol
   todavia no tienen pagina). Un solo estilo, en EN y en ES. Las .pcard de ciudades usan h2
   y no entran. Lo propio de la lista (inline-block, margenes, tamano de las hijas) va con
   las reglas del arbol, mas abajo. */
.svc h3, .pcard h3, .treelist a, .treelist .tree__pendiente {
  position: relative;
  font-family: var(--text); font-weight: 700;
  font-size: clamp(1.16rem, 1.08rem + .35vw, 1.32rem); line-height: 1.25; letter-spacing: .005em;
  margin: 0 0 1.05rem; padding-bottom: .7rem;
  color: var(--ink-dk);
  transition: color .25s ease;
}
.svc h3::after, .pcard h3::after, .treelist a::after, .treelist .tree__pendiente::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.1rem; height: 2px; background: var(--gold);
  transition: width .3s ease;
}
a.svc:hover h3, a.svc:focus-visible h3, a.pcard:hover h3, a.pcard:focus-visible h3,
.treelist a:hover, .treelist a:focus-visible { color: #8A6424; }
a.svc:hover h3::after, a.svc:focus-visible h3::after, a.pcard:hover h3::after, a.pcard:focus-visible h3::after,
.treelist a:hover::after, .treelist a:focus-visible::after { width: 3.6rem; }
.svc p { font-family: var(--text); font-size: .92rem; line-height: 1.6; color: var(--grey); margin: 0; }
a.svc:hover { border-color: rgba(184,135,59,.55); border-top-color: var(--gold); }
/* Tarjeta que ademas es enlace: se anuncia como tal. */
a.svc { display: block; }
.svc__go { display: block; margin-top: .9rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
a.svc:hover .svc__go { color: var(--gold-lt); }
/* Enlace de vuelta al nodo padre dentro del menu lateral. */
.aside__up { margin: .9rem 0 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.aside__up a { color: var(--gold); }

/* Preguntas frecuentes */
.faq { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.6rem; }
.faq details { background: var(--paper); padding: 1.2rem 1.4rem; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .9rem;
  font-family: var(--display); font-size: 1.06rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 400;
  font-size: 1.3rem; line-height: 1; color: var(--gold); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { font-family: var(--text); margin: .9rem 0 0; font-size: .97rem; line-height: 1.7; color: var(--grey); }

/* Equipo completo */
.roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.35rem; }
.person__photo {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center;
  background: var(--paper-2);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.person__initials {
  width: 100%; aspect-ratio: 3/4; display: grid; place-items: center;
  background: var(--ink); color: var(--gold);
  font-family: var(--display); font-size: 2.2rem;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
/* Marco dorado desplazado de las fotos del equipo (tarjetas y ficha de cada persona). Un
   filete de 1 px con la MISMA esquina cortada que la foto, detras y corrido abajo a la
   derecha. El marco reserva su desplazamiento con padding, asi que no invade el hueco
   entre tarjetas ni el texto de debajo. El filete es un poligono con agujero (evenodd):
   el borde exterior y, dentro, el mismo contorno 1 px mas adentro (.41 px es lo que se
   corre el vertice de un corte a 45 grados). Al pasar el raton la foto se desliza hacia
   su marco; sin raton o con menos movimiento, el marco se queda quieto y visible. */
.marco {
  --marco-d: 12px; --marco-c: 24px;
  position: relative; display: block; isolation: isolate;
  padding: 0 var(--marco-d) var(--marco-d) 0;
}
.marco::before {
  content: ""; position: absolute; inset: var(--marco-d) 0 0 var(--marco-d); z-index: -1;
  background: var(--gold);
  clip-path: polygon(evenodd,
    var(--marco-c) 0, 100% 0, 100% calc(100% - var(--marco-c)), calc(100% - var(--marco-c)) 100%, 0 100%, 0 var(--marco-c), var(--marco-c) 0,
    calc(var(--marco-c) + .41px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--marco-c) - .41px),
    calc(100% - var(--marco-c) - .41px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--marco-c) + .41px), calc(var(--marco-c) + .41px) 1px);
}
.marco img { position: relative; display: block; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .marco img { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
  .person:hover .marco img, .marco:hover img { transform: translate(calc(var(--marco-d) * .6), calc(var(--marco-d) * .6)); }
}

.person h3 { font-family: var(--display); font-weight: 400; font-size: 1.12rem; margin: 1rem 0 .2rem; color: var(--ink); }
.person .role { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
.person p { font-family: var(--text); font-size: .93rem; line-height: 1.6; color: var(--grey); margin: 0; }
.roster-group + .roster-group { margin-top: 3.25rem; }
.roster-group > h2, .postgroup > h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--ink);
  margin: 0 0 1.4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule);
}

/* Bio de Kevin. El retrato queda fijo mientras se lee la columna larga. */
.bio { display: grid; grid-template-columns: .95fr 1.25fr; gap: clamp(2rem, 4.5vw, 3.75rem); align-items: start; }
/* Espejo: el texto a la izquierda y el retrato a la derecha, como lo tenia la pagina
   de resultados en el sitio viejo. La ficha de Kevin usa el orden contrario, asi las
   dos no se leen como la misma pagina. */
.bio--flip { grid-template-columns: 1.25fr .95fr; }
/* Dentro de una columna de .bio el ancho ya lo limita la propia rejilla, asi que el tope
   de 58 caracteres de .lede sobra: lo unico que hace es dejar un hueco dentro de la
   columna. */
.bio .lede { max-width: none; }
/* Foto centrada respecto al texto. .bio alinea arriba porque las fichas largas lo
   necesitan —la foto queda fija mientras se lee—, pero cuando el texto es bastante mas
   alto que la imagen esa alineacion la deja colgando del techo. Aqui se centra, y se
   quita el sticky: pegarse arriba y estar centrada son cosas incompatibles. */
.bio--centro { align-items: center; }
.bio--centro .bio__photo { position: static; }
.bio__photo { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.bio__photo img {
  width: 100%;
  clip-path: polygon(44px 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%, 0 44px);
}
/* Sustituto del retrato para quien todavia no tiene foto propia: iniciales en Caslon
   sobre el azul de la casa. Mejor un hueco con intencion que la foto de otra persona. */
.bio__initials {
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  background: var(--ink); color: var(--gold-lt);
  font-family: var(--display); font-size: clamp(3rem, 7vw, 5rem); letter-spacing: .06em;
  border: 1px solid var(--rule-dk);
}

.bio__facts { list-style: none; margin: 1.9rem 0 0; padding: 0; display: grid; }
.bio__facts li {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.25rem;
  padding: .9rem 0; border-top: 1px solid var(--rule);
  font-family: var(--text); font-size: .95rem; line-height: 1.6; color: var(--grey);
}
.bio__facts b { font-family: var(--mono); font-weight: 400; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); padding-top: .4em; }

/* Ficha de cada persona del equipo (.bio--ficha: /en/our-team/[slug] y /es/nuestro-equipo/
   [slug]). La foto se queda fija al bajar y tiene que caber ENTERA en la pantalla. Dos cosas
   lo impedian: el sticky se media con --header-h, que es la cabecera SIN compactar (194 px
   con la franja superior) cuando al bajar mide 105; y la foto llenaba el ancho de la columna
   sin tope de alto, asi que una foto alta pasaba de 800 px en una pantalla de 900.
   Ahora el tope es la pantalla menos la cabecera compacta, el aire y la firma, con un suelo
   para que en pantallas muy bajas no se quede en un sello. El ancho sale de ese alto y de la
   proporcion real de la foto (--foto-ar, que pone RetratoFicha con las medidas de Payload):
   ni se deforma ni se recorta, y una foto mas alta sale mas estrecha, centrada en su columna. */
/* La foto va dentro de su .marco (filete dorado desplazado, ver .person), con el corte de
   44 px de la ficha. El tope de alto descuenta tambien el desplazamiento del marco, y el
   ancho se le pone al marco —foto mas desplazamiento— para que la foto llene su hueco. */
.bio--ficha {
  --ficha-aire: 1.5rem;
  --firma-h: 4.25rem;
  --foto-max-h: max(26rem, calc(100vh - var(--header-h-compacto, 105px) - 2 * var(--ficha-aire) - var(--firma-h) - 16px));
}
.bio--ficha .bio__photo { top: calc(var(--header-h-compacto, 105px) + var(--ficha-aire)); }
.bio__retrato { margin: 0; display: flex; flex-direction: column; align-items: center; }
.bio--ficha .bio__retrato .marco {
  --marco-d: 16px; --marco-c: 44px;
  width: min(100%, calc(var(--foto-max-h) * var(--foto-ar, .75) + var(--marco-d)));
}
.bio--ficha .bio__retrato img { height: auto; }
/* El nombre como una firma, en tinta azul. Italianno se carga solo en estas fichas (ver
   RetratoFicha); mientras llega no se pinta nada (display=block) y, si no llegara, sale en
   la Caslon de los titulos. */
.bio__firma {
  font-family: "Italianno", var(--display); font-weight: 400;
  font-size: 2.75rem; line-height: 1.15; color: var(--ink);
  text-align: center; text-wrap: balance;
  margin: .15rem 0 0; padding: 0 .35em .1em;
}
/* Entrada: la firma se escribe de izquierda a derecha al cargar. Sin movimiento para quien
   pidio menos. */
@media (prefers-reduced-motion: no-preference) {
  .bio--ficha .bio__firma { animation: firmaTrazo 1.3s cubic-bezier(.45,.05,.35,1) .35s backwards; }
}
@keyframes firmaTrazo {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Texto suelto fuera de .prose */
.band { background: var(--paper-2); }
.lede { font-family: var(--text); font-size: 1.02rem; line-height: 1.75; color: var(--grey); max-width: 64ch; margin: 1.2rem 0 0; }
.subh { font-family: var(--display); font-weight: 400; font-size: 1.32rem; line-height: 1.2; color: var(--ink); margin: 2.6rem 0 1rem; }

/* Ficha de datos: franja fina bajo la cabecera, antes de la biografia. */
.facts-bar { border-bottom: 1px solid var(--rule); }
.facts-bar .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem clamp(1.5rem, 3vw, 3rem); padding-block: clamp(1.75rem, 3vw, 2.25rem); }
.facts-bar div b { display: block; font-family: var(--mono); font-weight: 500; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .45rem; }
.facts-bar div span { font-family: var(--text); font-size: .95rem; line-height: 1.55; color: var(--ink); }

/* Trayectoria: riel vertical, el ano a la izquierda y el rombo sobre la linea. */
.path { list-style: none; margin: 2.6rem 0 0; padding: 0 0 0 2.25rem; border-left: 1px solid var(--rule); }
.path li {
  position: relative; display: grid; grid-template-columns: 11rem 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-bottom: 2.6rem;
}
.path li:last-child { padding-bottom: 0; }
/* Absoluto: sale del flujo, asi que no cuenta como celda de la rejilla del li. */
.path li::before {
  content: ""; position: absolute; left: calc(-2.25rem - 3px); top: .4rem;
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
}
.path .when { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); line-height: 1.55; padding-top: .1rem; }
.path h3 { font-family: var(--display); font-weight: 400; font-size: 1.22rem; line-height: 1.2; margin: 0 0 .55rem; color: var(--ink); }
.path p { font-family: var(--text); font-size: .96rem; line-height: 1.68; color: var(--grey); margin: 0; max-width: 62ch; }

/* Expediente. Son cinco fichas de alto distinto: con grid de dos columnas una
   quedaba 300px mas corta que la otra, asi que se usan columnas de texto, que
   se equilibran solas, con las fichas marcadas para no partirse. */
.record { column-count: 2; column-gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: 2.2rem; }
.cred {
  break-inside: avoid; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper); border: 1px solid var(--rule); border-top: 2px solid var(--gold);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
}
.cred .where { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 .65rem; }
.cred h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.22; margin: 0 0 1.3rem; color: var(--ink); }

.honors { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.honors li { position: relative; padding-left: 1.5rem; font-family: var(--text); font-size: .94rem; line-height: 1.62; color: var(--grey); }
.honors li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--gold); }
.honors--two { grid-template-columns: 1fr 1fr; gap: .8rem clamp(1.5rem, 3vw, 2.5rem); }
/* Entradas con titulo propio: premios, licencias. */
.honors--rich { gap: 1.35rem; }
.honors b { display: block; font-family: var(--text); font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: .15rem; }
.honors .years { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .45rem; }

/* Fuera de la corte: tres columnas iguales. */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.75rem); align-items: start; margin-top: 2.2rem; }
.trio > div > h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.24rem; color: var(--ink);
  margin: 0 0 1.1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule);
}
.trio p { font-family: var(--text); font-size: .95rem; line-height: 1.7; color: var(--grey); margin: 0; }
/* La foto es de 900x867, casi cuadrada. El encuadre 4/3 que habia aqui recortaba un
   22% por abajo y le cortaba los brazos: la proporcion del archivo manda y se ve
   entera. .trio lleva align-items:start, asi que la columna mas alta no estira a las
   otras dos. */
.trio__img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  margin-top: 1.25rem;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}

/* Pie de la foto de la pareja: dos nombres con su cargo, separados por el mismo rombo
   que la casa usa en las migas. El nombre en Caslon y el cargo en mono, como en las
   tarjetas del equipo, para que se lean como dos fichas y no como una frase. */
/* Una ficha por persona, con el mismo par que las tarjetas del equipo: el nombre en
   Caslon y el cargo en mono dorada. Corridos en una linea se leian como una frase sola
   y no se veia donde acababa uno y empezaba el otro. */
.trio__pie { display: grid; gap: .55rem; margin-top: .9rem; }
.trio__pie p { margin: 0 !important; }
.trio__pie b {
  display: block; font-family: var(--display); font-weight: 400; font-size: 1rem;
  line-height: 1.2; color: var(--ink-dk);
}
.trio__pie span {
  display: block; font-family: var(--mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: .25rem;
}
/* El rombo que separa cargo y parentesco, el mismo recurso de las migas. */
.trio__pie i { font-style: normal; padding-inline: .4rem; opacity: .65; }

/* Medios y perfiles verificables */
.outlets { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.outlets li { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--rule); padding: .6rem 1rem; }
.profiles { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.profiles a {
  display: inline-block; font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--rule); padding: .7rem 1.1rem;
  transition: border-color .25s ease, color .25s ease;
}
.profiles a:hover { border-color: var(--gold); color: var(--gold); }
.cred .profiles { margin-top: 0; }

/* Contacto */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
/* Mapa de la oficina: embed de Google dentro del corte de esquina de la casa. La
   proporcion la fija el contenedor y el iframe la rellena — un iframe no tiene tamano
   intrinseco, asi que sin esto colapsaria a la altura por defecto. */
.mapa {
  margin-top: 2rem; aspect-ratio: 2 / 1; overflow: hidden;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.mapa__pie2 {
  margin: .85rem 0 0; font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
.mapa__pie2 a { color: var(--gold); }
.mapa__pie2 a:hover { color: var(--gold-lt); }

.reach { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; }
.reach li { display: grid; grid-template-columns: 46px 1fr; gap: 1.15rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid var(--rule); }
.reach .ico { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--rule); color: var(--gold); }
.reach b { display: block; font-family: var(--mono); font-size: .62rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
.reach a, .reach span { font-family: var(--text); color: var(--ink); font-size: 1rem; line-height: 1.55; }
.reach a:hover { color: var(--gold); }

.formcard { background: var(--paper-2); border: 1px solid var(--rule); padding: clamp(1.6rem, 3vw, 2.4rem); --btn-bg: #F3F4F7; }
.formcard h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .35rem; color: var(--ink); }
.field { display: grid; gap: .4rem; margin-bottom: .95rem; }
.field label { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.field input, .field select, .formcard textarea {
  font-family: var(--sans); font-size: .95rem; padding: .75rem .9rem; width: 100%;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
}
.formcard textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .formcard textarea:focus { border-color: var(--gold); outline: none; }
.formcard .btn { width: 100%; justify-content: center; margin-top: .5rem; }
.formcard .btn[disabled] { opacity: .55; cursor: progress; }

/* .tree__pendiente: entrada del indice de areas que todavia no tiene pagina en el idioma
   que se esta leyendo. Se ve como las demas pero sin ser enlace (la informacion sigue ahi
   y no hay nada roto que pulsar): toma el estilo de la regla compartida de titulos de
   practica, sin hover. */

/* Trampa para robots. Se esconde sin display:none ni visibility:hidden a proposito: hay
   rellenadores automaticos que saltan esos dos, y menos los que ven un campo que de
   verdad ocupa sitio en el documento pero esta fuera de la pantalla. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; white-space: nowrap;
}

/* Errores de validacion: el mensaje va pegado a su campo, no todos juntos arriba. */
.field__error {
  font-family: var(--sans); font-size: .82rem; line-height: 1.4;
  color: #B3261E; margin: 0;
}
.field:has(.field__error) input,
.field:has(.field__error) select,
.field:has(.field__error) textarea { border-color: #B3261E; }

/* Fallo de envio: no es culpa de quien escribe, asi que va junto al boton. */
.form__fallo {
  font-family: var(--sans); font-size: .9rem; line-height: 1.5;
  color: #B3261E; background: #FDF2F1; border: 1px solid #F0C4C0;
  padding: .75rem .9rem; margin: 0 0 .9rem;
}

/* Listados: blog, videos, programas */
.cardlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.listcard { border-top: 2px solid var(--ink); padding-top: 1.5rem; display: flex; flex-direction: column; transition: border-top-color .3s ease; }
.listcard:hover { border-top-color: var(--gold); }
.listcard .tag, .listcard p.tag {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .9rem;
}
.listcard h3 { font-family: var(--display); font-weight: 400; font-size: 1.28rem; line-height: 1.24; margin: 0 0 .8rem; color: var(--ink); transition: color .25s ease; }
.listcard:hover h3 { color: var(--gold); }
.listcard p { font-family: var(--text); font-size: .95rem; line-height: 1.65; color: var(--grey); margin: 0 0 1.5rem; }
.listcard .go { margin-top: auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* Resultados */
.result { background: var(--ink); padding: 1.9rem 1.5rem; text-align: center; }
.result b { display: block; font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.result .kind { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-dk); margin-top: .9rem; }
.result p { font-family: var(--text); font-size: .93rem; color: var(--grey-dk); margin: 1rem 0 0; }

/* Pasos numerados */
.steps-sec { background: var(--paper-2); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); margin-top: 2.5rem; counter-reset: step; }
.step { position: relative; padding-top: 2.9rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: .8rem; color: var(--gold);
  border-bottom: 1px solid var(--gold); padding-bottom: .4rem;
}
.step h3 { font-family: var(--display); font-weight: 400; font-size: 1.24rem; margin: 0 0 .6rem; color: var(--ink); }
.step p { font-family: var(--text); font-size: .96rem; line-height: 1.68; color: var(--grey); margin: 0; }

/* Banda de cifras */
.proof { background: var(--ink); position: relative; isolation: isolate; }
.proof::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/assets/img/hero.webp) center / cover no-repeat; opacity: .14;
}
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: clamp(3rem, 5.5vw, 4.5rem); }
.proof div { text-align: center; padding-inline: clamp(1rem, 2vw, 2rem); border-left: 1px solid rgba(255,255,255,.15); }
.proof div:first-child { border-left: 0; }
.proof b { display: block; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: .95; color: #fff; font-variant-numeric: tabular-nums; }
.proof span { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .9rem; }

/* Cierre. Va en claro como el de la portada: en azul quedaba pegado al pie —y en
   Practice Areas tambien a la banda de cifras— y tres bloques oscuros seguidos con
   la misma textura se leen como una sola mancha. El filete de arriba lo despega
   cuando la seccion anterior tambien es clara. */
.cta { background: var(--paper-2); text-align: center; border-top: 1px solid var(--rule); --btn-bg: var(--paper-2); }
.cta .h2 { color: var(--ink); }
.cta .eyebrow { color: var(--gold); }
.cta p { font-family: var(--text); color: var(--grey); max-width: 60ch; margin: 1.35rem auto 2.25rem; }
/* En la ficha de Kevin el cierre va a media pagina y le sigue otra seccion clara:
   el mismo filete la despega por abajo. */
.cta + .sec { border-top: 1px solid var(--rule); }
/* Boton secundario con filete azul, el mismo par que cierra la portada. */
.cta .btn--ghost { color: var(--ink); }
.cta .btn--ghost::before { background: var(--ink); }
.cta .btn--ghost:hover { color: var(--paper); }
.cta-btns { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* Aviso para datos que aun faltan del cliente */
.todo {
  border: 1px dashed rgba(184,135,59,.6); background: rgba(184,135,59,.07);
  padding: 1.15rem 1.35rem; font-family: var(--text); font-size: .95rem; line-height: 1.7; color: var(--grey);
}
.todo b { color: var(--ink); }

@media (max-width: 1080px) {
  .with-aside, .bio, .contact-grid, .trio { grid-template-columns: 1fr; }
  .record { column-count: 1; }
  .aside, .bio__photo { position: static; }
  /* Apilada, la foto no puede llenar los 900 px de una tableta (el original mide 440 de
     ancho): tope de 28rem. El tope de alto sigue valiendo para la tableta apaisada, donde
     la pantalla es baja; en un movil vertical manda el ancho y ocupa el disponible. */
  .bio--ficha .bio__retrato .marco { width: min(100%, calc(28rem + var(--marco-d)), calc(var(--foto-max-h) * var(--foto-ar, .75) + var(--marco-d))); }
  .roster { grid-template-columns: repeat(3, 1fr); }
  .cardlist, .steps, .svc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .proof .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .proof div:nth-child(3) { border-left: 0; }
}
@media (max-width: 760px) {
  .svc-grid, .svc-grid--3, .cardlist, .steps, .honors--two { grid-template-columns: 1fr; }
  .facts-bar .wrap { grid-template-columns: 1fr 1fr; }
  .path { padding-left: 1.5rem; }
  .path li { grid-template-columns: 1fr; gap: .5rem; }
  .path li::before { left: calc(-1.5rem - 3px); }
  .roster { grid-template-columns: repeat(2, 1fr); }
  .proof .wrap { grid-template-columns: 1fr; }
  .proof div { border-left: 0; }
  .bio__facts li { grid-template-columns: 1fr; gap: .2rem; }
}

/* Rejilla estatica de resenas para la pagina completa (la portada usa el carrusel). */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 1080px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .vgrid { grid-template-columns: 1fr; } }

/* Fichas de la pagina de resenas (ReviewCard expandible). La fila de la rejilla mide lo
   que la ficha mas alta; con el texto entero, una resena larga estiraba la fila y las
   otras dos quedaban con un hueco en blanco. Aqui todas tienen el mismo esqueleto:
   estrellas, seis lineas de texto como mucho (y como poco, para que midan lo mismo), una
   fila reservada para "Leer resena completa"/"Mostrar traduccion", y el autor abajo.
   El recorte es solo visual: el texto entero sigue en el HTML. La portada no usa esto. */
.vcard--pagina .vcard__stars { margin-bottom: .9rem; }
.vcard--pagina .vtexto__cita {
  margin: 0; font-family: var(--text); font-size: 1.02rem; line-height: 1.65; color: var(--ink);
  white-space: pre-line; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6;
  min-height: calc(1.02rem * 1.65 * 6);
}
.vtexto__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.4rem;
  min-height: 1.9rem; margin: .85rem 0 1.25rem;
}
.vtexto__btn {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--gold);
  padding: .25rem 0 .15rem; cursor: pointer; color: var(--ink);
  font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s ease;
}
.vtexto__btn:hover { color: var(--gold); }
/* Solo estrellas: el mismo alto que texto + acciones, para no descuadrar la fila. */
.vtexto__vacia {
  margin: 0 0 1.25rem; min-height: calc(1.02rem * 1.65 * 6 + 2.75rem);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}

/* La resena completa, en un <dialog> modal (ReviewTexto). Mismo registro que la ficha:
   papel, filete dorado arriba, Caslon para el texto y mono para los rotulos. */
.vmodal {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: min(720px, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); overflow: visible;
}
.vmodal::backdrop { background: rgba(17, 23, 41, .72); }
.vmodal__caja {
  --vmodal-pad: clamp(1.75rem, 4vw, 2.75rem);
  position: relative; background: var(--paper); border-top: 2px solid var(--gold);
  padding: var(--vmodal-pad); max-height: calc(100dvh - 2rem); overflow: auto;
  box-shadow: 0 30px 80px rgba(17, 23, 41, .35);
}
/* Estrellas y cerrar, pegados arriba: con una resena larga la caja se desplaza por debajo
   (movil) y el boton sigue a mano sin tapar ninguna linea. */
.vmodal__barra {
  position: sticky; top: calc(-1 * var(--vmodal-pad)); z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: calc(-1 * var(--vmodal-pad)) calc(-1 * var(--vmodal-pad)) .5rem;
  padding: .75rem .75rem .5rem var(--vmodal-pad); background: var(--paper);
}
.vmodal__cerrar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink);
  font-size: 1.5rem; line-height: 1; transition: border-color .2s ease, color .2s ease;
}
.vmodal__cerrar:hover { border-color: var(--gold); color: var(--gold); }
.vmodal__estrellas { margin: 0; font-size: .82rem; letter-spacing: .2em; color: var(--gold); }
.vmodal__titulo {
  margin: 0 0 1.25rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--ink);
}
.vmodal__cita { margin: 0; font-family: var(--text); font-size: 1.06rem; line-height: 1.75; white-space: pre-line; color: var(--ink); }
.vmodal__nota { margin: 1rem 0 0; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.vmodal__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.75rem; padding-top: 1.15rem; border-top: 1px solid var(--rule);
}
.vmodal__fuente { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
  .vmodal[open] .vmodal__caja { animation: vmodalEntra .28s ease-out; }
  .vmodal[open]::backdrop { animation: vmodalFondo .28s ease-out; }
  @keyframes vmodalEntra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes vmodalFondo { from { opacity: 0; } to { opacity: 1; } }
}

/* Los nombres del listado del equipo llevan a su ficha; el enlace no debe cambiar
   el aspecto de la tarjeta, solo el color al pasar por encima. */
.person h3 a { color: inherit; }
.person h3 a:hover { color: var(--gold); }

/* Presentacion del equipo: ocupa el sitio de la foto de grupo. En pantalla ancha va a
   dos columnas, titular a la izquierda y texto a la derecha, alineado a la izquierda:
   centrada y en una columna estrecha media mas de 500 px de alto y empujaba el listado
   fuera de la pantalla. Asi ocupa la mitad y se lee mejor que un bloque centrado. Por
   debajo de 860 px vuelve a apilarse y centrarse, como estaba. */
.teamintro { padding-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.teamintro .h2 { max-width: 22ch; margin-inline: auto; }
.teamintro__text p {
  font-family: var(--text); font-size: 1.02rem; line-height: 1.75; color: var(--grey);
  max-width: 68ch; margin: 1.35rem auto 0;
}
@media (min-width: 861px) {
  .teamintro {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem); align-items: start; text-align: left;
  }
  .teamintro .h2 { max-width: 16ch; margin-inline: 0; }
  /* El texto arranca a la altura del titular, no de la etiqueta de encima. */
  .teamintro__text { padding-top: 1.55rem; }
  .teamintro__text p { margin: 0; max-width: 66ch; }
  .teamintro__text p + p { margin-top: 1.1rem; }
}
/* El listado que sigue a la presentacion es su continuacion, no una seccion nueva: el aire
   de arriba de .sec (hasta 96 px) dejaba un hueco entre el ultimo parrafo y "Attorneys"
   que partia la pagina. Aqui basta la mitad, algo menos en movil. */
.teamintro + .sec { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Formacion: el titulo en una linea y las menciones debajo, en monoespaciada pequena.
   Es una lista de datos, no un parrafo, y se lee mejor tabulada. */
.degrees { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.degrees li { padding-left: 1rem; border-left: 1px solid var(--rule-dk); }
.degrees b { display: block; font-family: var(--text); font-weight: 700; color: var(--ink); line-height: 1.5; }
.degrees span { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--grey); margin-top: .35rem; line-height: 1.7; }

/* Indice completo del arbol de areas de practica, en /en/practice-areas/.
   Un bloque por area: cabecera a la izquierda, paginas a la derecha con su definicion. */
.tree-head { max-width: 60ch; }
.tree-head p:not(.eyebrow) { font-family: var(--text); color: var(--grey); margin: 1rem 0 0; }
.tree { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.treearea {
  display: grid; grid-template-columns: 17.5rem 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--rule);
}
.treearea__head { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
/* El area es la madre de todo su bloque y se tiene que leer antes que sus paginas. En la
   Display a 400 pesaba menos que las entradas de la lista (Caslon Text 700) y la jerarquia
   salia al reves. Ahora es la misma Caslon Text 700, ~1,35x el tamano de una entrada, con
   un filete dorado ENCIMA —las entradas lo llevan debajo— y mas aire hasta la entradilla.
   `balance` reparte los nombres largos (Business & Civil Litigation) en dos lineas parejas
   en vez de dejar una palabra suelta. */
.treearea__head h3 {
  position: relative;
  font-family: var(--text); font-weight: 700;
  font-size: clamp(1.55rem, 1.35rem + .55vw, 1.78rem); line-height: 1.16; letter-spacing: -.005em;
  text-wrap: balance;
  margin: 0; padding-top: 1.05rem;
}
.treearea__head h3::before { content: ""; position: absolute; left: 0; top: 0; width: 2.75rem; height: 3px; background: var(--gold); }
.treearea__head h3 a { color: var(--ink-dk); transition: color .25s ease; }
.treearea__head h3 a:hover, .treearea__head h3 a:focus-visible { color: #8A6424; }
.treearea__head p { font-family: var(--text); font-size: .9rem; line-height: 1.65; color: var(--grey); margin: .75rem 0 0; }
.treearea__lede { color: var(--ink) !important; font-size: .97rem !important; margin-top: 1.1rem !important; }
/* El enlace al area cierra la cabecera: un filete tenue encima lo ata al bloque, y el dorado
   oscuro (el del hover de los titulos, AA sobre blanco) lo hace legible a este tamano. */
.treearea__go { margin-top: 1.4rem !important; padding-top: .95rem; border-top: 1px solid var(--rule-dk); }
.treearea__go a { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8A6424; transition: color .25s ease; }
.treearea__go a:hover, .treearea__go a:focus-visible { color: var(--ink-dk); }

/* Columnas y no retícula: con una madre de cinco hijas al lado de otra de una sola,
   la retícula dejaba medio hueco vacio. Las columnas reparten el alto ellas solas. */
.treelist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(1.5rem, 3vw, 2.75rem); }
.treelist > li { break-inside: avoid; margin-bottom: 1.5rem; }
.treelist li { position: relative; }
/* El aspecto de cada entrada lo pone la regla compartida de titulos de practica (arriba).
   Aqui solo lo de la lista: el enlace abraza su texto (inline-block) para que el filete
   quede debajo de el, sin el margen de las tarjetas, y la descripcion con aire propio. */
.treelist a, .treelist .tree__pendiente { display: inline-block; margin: 0; }
.treelist span { display: block; font-family: var(--text); font-size: .86rem; line-height: 1.55; color: var(--grey); margin-top: .55rem; }
/* Las hijas cuelgan de su madre, sangradas y con un filete que lo hace explicito. Un
   punto mas pequenas que la madre: mismo estilo, jerarquia visible. */
.treesub { list-style: none; margin: .75rem 0 0; padding: 0 0 0 1rem; display: grid; gap: .75rem; border-left: 1px solid var(--rule-dk); }
.treesub a, .treesub .tree__pendiente { font-size: clamp(1.04rem, 1rem + .2vw, 1.14rem); }

/* Cada entrada se cierra con un filete. La lista es larga y va a dos columnas: sin
   separacion, la descripcion de una entrada y el titulo de la siguiente se leian como un
   solo bloque. El filete va abajo y no arriba a proposito: con `columns`, un borde
   superior en `li + li` le saldria tambien a la primera entrada de la segunda columna,
   que visualmente encabeza la columna y no continua nada.
   La ultima del DOM no lo lleva: cae al pie de la segunda columna, justo encima del
   filete que ya cierra el area. */
.treelist > li { padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.treelist > li:last-child { padding-bottom: 0; border-bottom: 0; }
/* Dentro del grupo el filete es mas tenue, y del mismo tinte dorado que el borde
   vertical del .treesub: son la misma linea doblada. Con el gris de las madres los dos
   niveles pesaban igual y la jerarquia se emborronaba. */
.treesub li + li { border-top: 1px solid var(--rule-dk); padding-top: .75rem; }

@media (max-width: 1080px) {
  /* Apilado, el enlace al area queda justo encima de la primera entrada: algo mas de aire
     para que se lea como cierre de la cabecera y no como titulo de la lista. */
  .treearea { grid-template-columns: 1fr; gap: 1.75rem; }
  .treearea__head { position: static; }
}
@media (max-width: 640px) { .treelist { columns: 1; } }

/* Seccion que continua a la anterior sin cambiar de fondo: se le quita el aire de
   arriba para que las dos se lean como un bloque y no como dos identicas separadas. */
.sec--tight { padding-top: 0; }

/* ================= VIDEOS DEL CANAL ================= */
/* La miniatura es una imagen estatica con un boton encima; el iframe de YouTube solo
   entra cuando alguien pulsa play (ver site/js/main.js). La pagina no carga nada de
   Google mientras nadie lo pida. */
.vidgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.vidgrid--video { grid-template-columns: repeat(3, 1fr); }
.vidgrid--short { grid-template-columns: repeat(5, 1fr); }
.vid__play {
  display: block; width: 100%; padding: 0; border: 1px solid var(--rule); background: var(--ink);
  position: relative; cursor: pointer; overflow: hidden; line-height: 0;
  transition: border-color .25s ease;
}
.vid--video .vid__play { aspect-ratio: 16 / 9; }
.vid--short .vid__play { aspect-ratio: 9 / 16; }
.vid__play img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
.vid__play:hover { border-color: var(--gold); }
.vid__play:hover img { transform: scale(1.04); opacity: .85; }
/* Triangulo de play en un disco dorado, dibujado con CSS: sin otra peticion al servidor. */
.vid__play::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: background-color .25s ease, transform .25s ease;
}
.vid__play:hover::after { background-color: var(--gold-lt); transform: translate(-50%, -50%) scale(1.08); }
.vid__dur {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 1;
  background: rgba(10,16,32,.85); color: #fff; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .04em; padding: .18rem .4rem; line-height: 1.4;
}
.vid h3 { font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.3; margin: .9rem 0 0; }
.vid--short h3 { font-size: .95rem; }
.vid h3 a { color: var(--ink); }
.vid h3 a:hover { color: var(--gold); }
.vid__meta { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin: .45rem 0 0; }
.vid__lang { color: var(--gold); }
/* El iframe sustituye al boton conservando la caja, para que nada salte al pulsar. */
.vid iframe { width: 100%; aspect-ratio: inherit; border: 0; display: block; }
.vid--video iframe { aspect-ratio: 16 / 9; }
.vid--short iframe { aspect-ratio: 9 / 16; }

/* Enlace al canal, arriba a la derecha de la galeria (dentro de .vhead). El mismo boton
   achaflanado del sitio, en el rojo de YouTube. #CC0000 y no el #FF0000 de la marca: con
   texto blanco, el rojo puro no llega al contraste AA (4,0:1); este da 5,9:1. */
.btn--youtube { color: #fff; white-space: nowrap; gap: .8rem; padding-inline: 1.2rem 1.35rem; }
/* Centrado en vertical respecto al texto de la izquierda, no pegado a su ultima linea. */
.vhead > .btn--youtube { align-self: center; }
.btn--youtube::before { background: #CC0000; }
.btn--youtube:hover::before { background: #A30000; }
.btn--youtube:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--youtube svg { width: 1.05em; height: 1.05em; flex: none; }
/* En movil .vhead ya apila el boton bajo el texto; ahi ocupa el ancho entero. */
@media (max-width: 760px) {
  .btn--youtube { justify-content: center; }
}

@media (max-width: 1080px) {
  .vidgrid--video { grid-template-columns: repeat(2, 1fr); }
  .vidgrid--short { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .vidgrid--video { grid-template-columns: 1fr; }
  .vidgrid--short { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Video a pantalla grande al pulsar play ---- */
/* El ancho se limita por el alto disponible (148vh ~ 84vh x 16/9) para que un video
   apaisado nunca se salga por abajo en una pantalla de portatil. */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%; display: grid; place-items: center;
}
.lightbox::backdrop { background: rgba(10, 16, 32, .92); }
.lightbox__frame { width: min(92vw, 148vh, 1180px); aspect-ratio: 16 / 9; background: #000; }
.lightbox--short .lightbox__frame { height: min(84vh, 760px); width: auto; max-width: 92vw; aspect-ratio: 9 / 16; }
.lightbox iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Aspa dibujada con dos filetes: sin fuente de iconos ni otra peticion. */
.lightbox__close {
  position: fixed; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  width: 44px; height: 44px; border: 1px solid var(--rule-dk); background: transparent;
  cursor: pointer; transition: border-color .25s ease, transform .25s ease;
}
.lightbox__close::before, .lightbox__close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 17px; height: 1px;
  background: var(--gold-lt);
}
.lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox__close:hover { border-color: var(--gold); transform: rotate(90deg); }

/* Boton de "cargar mas" de la pagina de resenas y su contador. */
.vmore { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.vmore__count { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.vmore button[disabled] { opacity: .55; cursor: progress; }

/* ================= AREAS DE LA FICHA DE KEVIN, EN OSCURO ================= */
/* La pagina entera va sobre blanco. Este bloque —el ultimo antes del cierre— pasa al
   azul de la casa, el mismo tratamiento que la portada le da a sus bloques fuertes:
   destaca por contraste, sin inventar un lenguaje nuevo. La fachada del juzgado detras,
   como en la portada, le da fondo sin restar lectura.
   Las tarjetas no llevan la esquina cortada a proposito: el clip-path corta el borde en
   las diagonales, y aqui el filete dorado de arriba es justo lo que las define. */
.areas { background: var(--ink); position: relative; isolation: isolate; --btn-bg: var(--ink); }
.areas::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/assets/img/hero.webp) center / cover no-repeat;
  opacity: .14;
}
.areas .h2 { color: var(--paper); }
.areas .svc {
  background: rgba(255,255,255,.055); border-color: var(--rule-dk);
  border-top: 2px solid var(--gold);
  transition: background .25s ease, border-color .25s ease;
}
.areas .svc h3 { color: var(--paper); }
.areas .svc h3::after { background: var(--gold-lt); }
.areas a.svc:hover h3, .areas a.svc:focus-visible h3 { color: var(--gold-lt); }
.areas .svc p { color: var(--grey-dk); }
.areas a.svc:hover { background: rgba(255,255,255,.1); border-color: rgba(184,135,59,.5); border-top-color: var(--gold-lt); }

/* Cifra dentro de una columna de texto, sobre papel. La banda de la portada la pinta en
   blanco sobre el azul; aqui el numero va en el azul cerrado y el rotulo en oro, como la
   ficha de datos de la pagina de Kevin. El filete dorado la separa del parrafo sin
   necesidad de una caja. */
.winrate { margin-top: 2.4rem; border-left: 2px solid var(--gold); padding-left: 1.4rem; }
.winrate b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: .95;
  color: var(--ink-dk); font-variant-numeric: tabular-nums;
}
.winrate > span {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin-top: .75rem;
}
.winrate p {
  font-family: var(--text); font-size: .78rem; line-height: 1.6; color: var(--grey);
  margin: .95rem 0 0; max-width: 44ch;
}

/* Retrato de la pagina de resultados: el mismo tratamiento que la portada le da a la
   foto de Kevin. En reposo va algo desaturada y al pasar por encima recupera el color y
   crece. overflow:hidden en el contenedor para que el zoom no se salga del corte de
   esquina, que lo dibuja el clip-path de .bio__photo img.
   El gris vive dentro de @media (hover: hover): donde no se puede pasar el raton, la
   foto sale a color y ya. Va por capacidad del dispositivo y no por ancho a proposito,
   porque .bio colapsa a 1080 y un corte por ancho dejaba las tabletas —que tampoco
   tienen hover— con la foto gris para siempre. */
.bio--flip .bio__photo { overflow: hidden; }
@media (hover: hover) {
  .bio--flip .bio__photo img {
    filter: grayscale(.32) contrast(1.04);
    transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
  }
  .bio--flip .bio__photo:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .bio--flip .bio__photo img { transition: filter .5s ease; }
  .bio--flip .bio__photo:hover img { transform: none; }
}

/* Cuerpo de una entrada del blog. El texto sale del editor, asi que no lleva clases:
   se le da forma por etiqueta. Ancho de lectura acotado —una linea de 100 caracteres
   cansa— y el mismo par de tipografias que el resto del sitio. */
/* Sin barra al lado, el ancho de lectura lo pone este tope; con barra, lo pone la
   columna y el tope sobra. Dos topes a la vez dejaban el texto pegado a la izquierda. */
.prose--articulo { max-width: 72ch; }
.with-aside .prose--articulo { max-width: none; }
.with-aside .articulo__portada { max-width: none; }
.prose--articulo p {
  font-family: var(--text); font-size: 1rem; line-height: 1.75; color: var(--ink);
  margin: 0 0 1.2rem;
}
.prose--articulo h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.2; color: var(--ink-dk); margin: 2.4rem 0 .9rem;
}
.prose--articulo h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.25;
  color: var(--ink-dk); margin: 1.9rem 0 .7rem;
}
.prose--articulo h4 {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 1.9rem 0 .7rem;
}
.prose--articulo ul, .prose--articulo ol {
  font-family: var(--text); font-size: 1rem; line-height: 1.7; color: var(--ink);
  margin: 0 0 1.4rem; padding-left: 1.3rem;
}
.prose--articulo li { margin-bottom: .5rem; }
.prose--articulo li::marker { color: var(--gold); }
.prose--articulo a { color: var(--gold); text-decoration: underline; }
.prose--articulo a:hover { color: var(--ink-dk); }
.prose--articulo blockquote {
  margin: 1.8rem 0; padding-left: 1.2rem; border-left: 2px solid var(--gold);
  font-family: var(--display); font-size: 1.15rem; line-height: 1.45; color: var(--ink-dk);
}


/* La cabecera es fija: sin esto el ancla deja el titulo del area debajo de la barra. */
.roster-group[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* Agrupadas por area, la etiqueta de categoria de cada tarjeta sobra: la dice el titulo
   del grupo. Se quita del marcado, y el hueco que dejaba lo recupera el titular. */
.roster-group .listcard h3 { margin-top: 0; }

/* ================= BLOG ================= */

/* Recuento por categoria: dice cuanto hay detras antes de saltar. */
.aside__list--cuenta a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.aside__list--cuenta span {
  font-family: var(--mono); font-size: .62rem; color: var(--gold); flex: none;
}

/* Con la barra al lado, la columna de entradas se estrecha: tres tarjetas dejarian el
   extracto en columnas de texto demasiado finas para leerlas. */
.cardlist--blog { grid-template-columns: repeat(2, 1fr); }

/* Imagen de la entrada. Va antes del titular y con proporcion fija, para que las
   tarjetas de una fila empiecen su texto a la misma altura aunque las fotos vengan del
   panel con tamanos distintos. */
.listcard__img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  margin-bottom: 1.1rem; background: var(--paper-2);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: opacity .3s ease;
}
.listcard:hover .listcard__img { opacity: .88; }

/* Portada de la entrada abierta, sobre el ancho de lectura. */
.articulo__portada {
  display: block; width: 100%; max-width: 72ch; aspect-ratio: 2 / 1; object-fit: cover;
  margin: 0 0 2.2rem;
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}

@media (max-width: 1080px) {
  /* .with-aside ya baja a una columna en este corte; la variante hereda ese cambio. */
  .cardlist--blog { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .cardlist--blog { grid-template-columns: 1fr; }
}

/* Entradas recientes en la barra: miniatura cuadrada y el titular al lado. La fecha va
   antes del titulo —en mono, pequena— porque en una lista de cinco lo que distingue una
   de otra de un vistazo es cuando se publico. */
.recientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.recientes li + li { border-top: 1px solid var(--rule); padding-top: 1rem; }
.recientes a { display: grid; grid-template-columns: 62px 1fr; gap: .85rem; align-items: start; }
/* Sin portada no hay primera columna que llenar: si se deja, el titular cae en los
   62 px de la miniatura y se parte palabra por linea. */
.recientes a.recientes--sin-foto { grid-template-columns: 1fr; }
.recientes img {
  width: 62px; height: 62px; object-fit: cover; display: block; background: var(--paper);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.recientes time {
  display: block; font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem;
}
.recientes b {
  display: block; font-family: var(--display); font-weight: 400; font-size: .95rem;
  line-height: 1.3; color: var(--ink-dk); transition: color .25s ease;
}
.recientes a:hover b { color: var(--gold); }