/* Firma Legal Dra. Diana Cristal González Obregón — Pixelmex, oct 2026
   Idea: un código comentado. Papel, tinta y lacre; índice con puntos guía,
   notas al margen y «artículos». Un solo gesto: el subrayado en lacre. */

:root {
  --tinta: #16181D;
  --tinta-2: #2A2D35;
  --papel: #F5F1E8;
  --papel-2: #ECE6D9;
  --blanco: #FBF9F4;
  --linea: #D5CCBA;
  --gris: #565A63;
  --lacre: #8C1C26;
  --lacre-osc: #6E141C;
  --lacre-claro: #E3A39C;

  --serif: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --ancho: 1200px;
  --angosto: 760px;
  --cab: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 16px); }
body {
  margin: 0; background: var(--blanco); color: var(--tinta);
  font: 400 1.0625rem/1.68 var(--sans);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lacre); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--lacre-osc); }
:focus-visible { outline: 2px solid var(--lacre); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.14; letter-spacing: -.012em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 1.5rem + 3.4vw, 4.1rem); font-weight: 300; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.1em; }
b, strong { font-weight: 600; }
address { font-style: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 16px; }
.saltar:focus { top: 12px; }

.envoltura { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }
.envoltura-angosta { width: min(100% - 32px, var(--angosto)); }
.seccion { padding: clamp(64px, 9vw, 120px) 0; }
.seccion-ajustada { padding-top: clamp(32px, 4vw, 56px); }
.seccion-papel { background: var(--papel); }
.seccion-tinta { background: var(--tinta); color: var(--papel); }
.seccion-tinta a:not(.boton) { color: var(--lacre-claro); }
.intro { font-size: 1.15rem; color: var(--gris); max-width: 62ch; margin-bottom: 2.4em; }
.seccion-tinta .intro { color: #C9C3B6; }
.lead { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height: 1.5; color: var(--tinta-2); max-width: 60ch; }
.antetitulo { font-size: .9rem; color: var(--gris); margin-bottom: 1.4em; }
.antetitulo::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lacre); margin-right: .7em; vertical-align: .05em; }
.mas { margin-top: 2em; }
.enlace-fuerte { font-weight: 600; }

/* ---- botones ------------------------------------------------------------ */
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8em; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 12px 24px; border: 1px solid var(--lacre); border-radius: 8px;
  background: var(--lacre); color: var(--blanco); font: 600 1rem/1.2 var(--sans);
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.boton:hover { background: var(--lacre-osc); border-color: var(--lacre-osc); color: var(--blanco); }
.boton-linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton-linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.boton-chico { min-height: 42px; padding: 8px 18px; font-size: .95rem; }

/* ---- cabecera (fija siempre) -------------------------------------------- */
/* Barra en tinta, alta, con menú claro (referencia: gomeznavarroabogados.com.mx). */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--tinta); color: var(--papel); border-bottom: 1px solid #2E3139; }
.cabecera-in { width: min(100% - 32px, var(--ancho)); margin-inline: auto; height: var(--cab); display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 12px; color: var(--tinta); text-decoration: none; margin-right: auto; }
.logo:hover { color: var(--tinta); }
.cabecera .logo, .cabecera .logo:hover { color: var(--papel); }
.sello { width: 42px; height: 42px; flex: none; color: var(--lacre); }
.cabecera .sello { width: 48px; height: 48px; }
/* Logo de la Dra. tal cual (fondo blanco): va sobre una placa blanca para leerse en la barra oscura. */
.logo-img { display: block; height: 52px; width: auto; background: #fff; padding: 5px 10px; border-radius: 6px; box-sizing: content-box; }
.pie .logo-img { height: 48px; }
@media (max-width: 1080px) { .logo-img { height: 40px; padding: 4px 8px; } }
.logo-texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo-nombre { font-family: var(--serif); font-size: 1.32rem; font-weight: 500; letter-spacing: -.01em; }
.cabecera .logo-nombre { font-size: 1.42rem; }
.logo-sub { font-size: .78rem; color: var(--gris); margin-top: 3px; }
.cabecera .logo-sub { color: #A7A196; letter-spacing: .04em; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.menu ul a { color: var(--papel); text-decoration: none; font-size: .98rem; font-weight: 600; letter-spacing: .01em; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.menu ul a:hover, .menu ul a[aria-current] { border-bottom-color: var(--lacre-claro); color: var(--blanco); }
.menu-tel { color: #D2CCBF; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.menu-tel:hover { color: var(--blanco); }
.menu-boton { display: none; }
/* En escritorio los enlaces quedan centrados en la página; teléfono y botón, a la derecha. */
@media (min-width: 1081px) {
  .cabecera-in { position: relative; }
  .menu ul { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

@media (max-width: 1300px) {
  .menu-tel { display: none; }
  .menu ul { gap: 24px; }
}
@media (max-width: 1080px) {
  :root { --cab: 70px; }
  .sello { width: 38px; height: 38px; }
  .logo-nombre { font-size: 1.18rem; }
  .menu-boton {
    display: grid; place-items: center; width: 46px; height: 46px; margin-right: -8px;
    background: none; border: 0; cursor: pointer; color: var(--papel);
  }
  .menu-raya, .menu-raya::before, .menu-raya::after { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .2s; }
  .menu-raya { position: relative; }
  .menu-raya::before, .menu-raya::after { content: ''; position: absolute; left: 0; }
  .menu-raya::before { top: -7px; } .menu-raya::after { top: 7px; }
  .menu-boton[aria-expanded="true"] .menu-raya { background: transparent; }
  .menu-boton[aria-expanded="true"] .menu-raya::before { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-raya::after { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    position: fixed; inset: var(--cab) 0 auto 0; background: var(--tinta); border-bottom: 1px solid #2E3139;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 24px;
    display: none; max-height: calc(100dvh - var(--cab)); overflow-y: auto;
  }
  .menu.abierto { display: flex; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu ul a { display: block; padding: 14px 0; border-bottom: 1px solid #2E3139; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
  .menu ul a[aria-current] { color: var(--lacre-claro); border-bottom-color: #2E3139; }
  .menu-tel { display: block; padding: 18px 0 12px; }
  .menu .boton { width: 100%; }
}

/* ---- migas -------------------------------------------------------------- */
.migas { width: min(100% - 32px, var(--ancho)); margin: 0 auto; padding-top: 22px; font-size: .88rem; color: var(--gris); }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.migas li + li::before { content: '/'; margin: 0 .6em; color: var(--linea); }
.migas a { color: var(--gris); }

/* ---- portada ------------------------------------------------------------ */
/* Foto a sangre con velo en tinta, texto claro a la izquierda y corte en diagonal.
   La foto ocupa la mitad derecha mientras sea vertical; con la imagen horizontal
   de cabecera (2:1, la abogada a la derecha) basta con quitar el width de .portada-fondo. */
.portada {
  position: relative; isolation: isolate; overflow: hidden; background: var(--tinta); color: var(--papel);
  min-height: min(calc(100svh - var(--cab)), 860px); display: flex; align-items: center;
  padding: clamp(72px, 9vw, 120px) 0 clamp(110px, 13vw, 180px);
}
.portada-fondo { position: absolute; inset: 0; z-index: -2; }
/* la abogada un poco más grande: se amplía desde su lado, sin mover el borde de arriba */
@media (min-width: 901px) { .portada-fondo { transform: scale(1.15); transform-origin: 76% 0; } }
.portada-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%; }
.portada::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--tinta) 0%, var(--tinta) 42%, rgba(22, 24, 29, .72) 62%, rgba(22, 24, 29, .2) 100%);
}
.portada-in { width: min(100% - 32px, var(--ancho)); }
.portada-texto { max-width: 640px; }
.portada .antetitulo { color: #C9C3B6; }
.portada h1 { font-size: clamp(2.35rem, 1.4rem + 3vw, 3.9rem); max-width: 17ch; color: var(--blanco); }
.portada h1::after { content: ''; display: block; width: 88px; height: 2px; margin-top: .45em; background: var(--lacre-claro); transform-origin: left; }
.portada-lead { font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.45; max-width: 36ch; color: #E8E3D8; }
.portada .subrayado { background-image: linear-gradient(var(--lacre-claro), var(--lacre-claro)); }
.portada-sub { color: #B9B3A6; max-width: 52ch; }
.portada .boton-linea { color: var(--papel); border-color: #8E8A80; }
.portada .boton-linea:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.portada-corte { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(44px, 7vw, 110px); fill: var(--lacre); }
@media (max-width: 900px) {
  .portada { min-height: 0; align-items: flex-end; padding-top: clamp(260px, 62vw, 420px); }
  .portada-fondo { width: 100%; }
  .portada-fondo img { object-position: 78% 0%; }
  .portada::before { background: linear-gradient(180deg, rgba(22, 24, 29, .15) 0%, rgba(22, 24, 29, .55) 30%, var(--tinta) 58%); }
}

/* credenciales en tinto (el lacre de la marca); el corte de la portada usa el mismo tono */
.credenciales { background: var(--lacre); color: var(--blanco); padding: clamp(8px, 1.5vw, 16px) 0 clamp(28px, 4vw, 48px); }
.credenciales .ficha { border-top-color: rgba(251, 249, 244, .35); }
.credenciales .ficha > div + div, .credenciales .ficha > div:nth-child(n+3) { border-color: rgba(251, 249, 244, .22); }
.credenciales .ficha dt { color: #F2C9C4; }
.credenciales .ficha dd { color: var(--blanco); }
/* ficha compacta en la franja: etiqueta pequeña en versalitas y texto más chico */
.credenciales { padding-bottom: clamp(18px, 3vw, 32px); }
.credenciales .ficha > div { padding-top: 14px; padding-bottom: 14px; }
.credenciales .ficha dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.credenciales .ficha dd { font-size: 1rem; line-height: 1.3; }
@media (max-width: 520px) {
  .credenciales .ficha > div { padding: 10px 12px 10px 0; }
  .credenciales .ficha > div:nth-child(even) { padding-left: 12px; padding-right: 0; }
  .credenciales .ficha dt { font-size: .66rem; letter-spacing: .08em; }
  .credenciales .ficha dd { font-size: .86rem; line-height: 1.28; }
}
.ficha { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--tinta); }
.ficha > div { padding: 22px 24px 24px 0; }
.ficha > div + div { padding-left: 24px; border-left: 1px solid var(--linea); }
.ficha dt { font-size: .85rem; color: var(--lacre); font-weight: 600; margin-bottom: 6px; }
.ficha dd { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.35; }

@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr 1fr; }
  .ficha > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ficha > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
}


/* ---- el gesto: subrayado en lacre --------------------------------------- */
.subrayado {
  background: linear-gradient(var(--lacre), var(--lacre)) no-repeat 0 92% / 100% 2px;
  transition: background-size 1.1s cubic-bezier(.6, .1, .2, 1) .3s;
}
.con-js .subrayado:not(.visto) { background-size: 0% 2px; }

/* ---- índice de código --------------------------------------------------- */
.encabezado-seccion { max-width: 760px; margin-bottom: 2.6em; }
.encabezado-seccion p { color: var(--gris); font-size: 1.1rem; }
.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.indice-fila { border-bottom: 1px solid var(--linea); padding: 22px 0 20px; }
.indice-enlace { display: grid; grid-template-columns: 3.2rem auto 1fr auto; align-items: baseline; gap: 0 14px; color: var(--tinta); text-decoration: none; }
.indice-num { font-family: var(--serif); font-size: 1.05rem; color: var(--lacre); font-weight: 500; }
.indice-titulo { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.25; }
.indice-guia { border-bottom: 2px dotted #B9AE98; transform: translateY(-.3em); min-width: 24px; }
.indice-ref { font-size: .88rem; color: var(--gris); white-space: nowrap; }
.indice-enlace:hover .indice-titulo { color: var(--lacre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.indice-resumen { margin: 6px 0 0 calc(3.2rem + 14px); color: var(--gris); max-width: 70ch; font-size: 1rem; }
@media (max-width: 760px) {
  .indice-enlace { grid-template-columns: 2.4rem 1fr; }
  .indice-guia { display: none; }
  .indice-ref { grid-column: 2; margin-top: 4px; white-space: normal; }
  .indice-resumen { margin-left: calc(2.4rem + 14px); }
}

/* ---- directora ---------------------------------------------------------- */
.directora-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.directora-foto { margin: 0; }
.directora-foto img { width: 100%; filter: grayscale(1) contrast(1.05); }
.directora-texto p { max-width: 60ch; }
.cita { margin: 2em 0; padding: 0 0 0 26px; border-left: 2px solid var(--lacre); }
.cita p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); line-height: 1.35; margin-bottom: .5em; color: var(--tinta); }
.cita footer { font-size: .9rem; color: var(--gris); }
@media (max-width: 860px) { .directora-in { grid-template-columns: 1fr; } .directora-foto { max-width: 560px; } }

/* ---- método: artículos -------------------------------------------------- */
.articulos { columns: 2; column-gap: clamp(32px, 6vw, 80px); column-rule: 1px solid #3A3D46; }
.articulo { break-inside: avoid; font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; margin: 0 0 1.4em; color: #E8E3D8; }
.articulo b { font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--lacre-claro); margin-right: .4em; }
@media (max-width: 760px) { .articulos { columns: 1; } }

/* ---- mosaico de fotos --------------------------------------------------- */
.mosaico { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 2.4em; }
.mosaico figure { margin: 0; }
.mosaico img { width: 100%; height: 100%; object-fit: cover; background: var(--papel-2); }
.mosaico figcaption { font-size: .88rem; color: var(--gris); margin-top: 10px; }
.mosaico figure { display: grid; grid-template-rows: 1fr auto; }
.mosaico .m1 { grid-column: 1 / 3; grid-row: span 2; }
.mosaico .m2 { grid-column: 3 / 7; }
.mosaico .m3 { grid-column: 3 / 5; }
.mosaico .m4 { grid-column: 5 / 7; }
.mosaico .m2 img { aspect-ratio: 16 / 8; }
.mosaico .m3 img, .mosaico .m4 img { aspect-ratio: 4 / 3; }
.mosaico-tres { grid-template-columns: repeat(3, 1fr); }
.mosaico-tres img { aspect-ratio: 4 / 3; }
@media (max-width: 760px) {
  .mosaico { grid-template-columns: 1fr 1fr; }
  .mosaico .m1 { grid-column: 1 / 3; grid-row: auto; }
  .mosaico .m1 img { aspect-ratio: 4 / 4.4; object-position: 50% 20%; }
  .mosaico .m2 { grid-column: 1 / 3; }
  .mosaico .m3, .mosaico .m4 { grid-column: auto; }
  .mosaico-tres { grid-template-columns: 1fr 1fr; gap: 14px; }
  .mosaico-tres figcaption { font-size: .8rem; margin-top: 6px; }
}

/* ---- reconocimientos: título arriba, las dos revistas al centro y los textos a los lados */
.prensa-titulo { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.seccion .prensa-titulo::after { margin-inline: auto; }
.revistas {
  display: grid; grid-template-columns: 1fr minmax(0, 270px) minmax(0, 270px) 1fr;
  grid-template-areas: "izq poder veredicto der"; gap: clamp(20px, 3vw, 40px); align-items: center;
}
.revistas-izq { grid-area: izq; text-align: right; }
.revistas-der { grid-area: der; }
.revista-poder { grid-area: poder; }
.revista-veredicto { grid-area: veredicto; }
.revistas figure { margin: 0; }
.revistas img {
  display: block; width: 100%; border-radius: 6px;
  box-shadow: 0 1px 0 var(--linea), 0 24px 50px -30px rgba(22, 24, 29, .55);
  transition: transform .55s var(--curva), box-shadow .55s var(--curva);
}
/* lupa: círculo que sigue al cursor sobre la portada; la imagen no se mueve */
.revista-lupa { position: relative; display: block; cursor: none; }
.lupa-circulo {
  position: absolute; left: 0; top: 0; width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  background-color: var(--blanco); background-repeat: no-repeat;
  border: 3px solid var(--blanco); box-shadow: 0 0 0 1px rgba(22, 24, 29, .25), 0 14px 30px -8px rgba(22, 24, 29, .55);
  opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--curva);
}
.revista-lupa.activa .lupa-circulo { opacity: 1; transform: none; }
.revista-pie { margin: 0; padding-bottom: 18px; border-bottom: 2px solid var(--lacre); color: var(--tinta-2); font-size: .98rem; }
.revista-pie b, .reconocimientos b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--tinta); margin-bottom: 4px; }
.reconocimientos { list-style: none; margin: 0; padding: 0; }
.reconocimientos li { padding: 16px 0; border-bottom: 1px solid var(--linea); color: var(--gris); font-size: .94rem; }
.reconocimientos b { font-size: 1.05rem; }
@media (max-width: 960px) {
  .revistas { grid-template-columns: 1fr 1fr; grid-template-areas: "poder veredicto" "izq der"; align-items: start; max-width: 620px; margin-inline: auto; }
  .revistas-izq { text-align: left; }
}
@media (max-width: 520px) {
  .revistas { grid-template-columns: 1fr 1fr; grid-template-areas: "poder veredicto" "izq izq" "der der"; }
}


/* ---- en medios: revistero (portadas) y visor de páginas ---- */
.revistero-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.revista { display: flex; flex-direction: column; }
.revista-abrir { display: block; perspective: 1200px; margin-bottom: 18px; }
.revista-tapa { display: block; position: relative; transform-origin: 0 50%; transition: transform .6s var(--curva), box-shadow .6s var(--curva); border-radius: 2px 6px 6px 2px; overflow: hidden;
  box-shadow: 0 1px 0 var(--linea), 0 22px 40px -26px rgba(22, 24, 29, .6); }
/* lomo: sombra fina a la izquierda, como una revista sobre la mesa */
.revista-tapa::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 14px; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .12) 45%, transparent); z-index: 1; }
.revista-tapa img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; }
.revista-abrir:hover .revista-tapa, .revista-abrir:focus-visible .revista-tapa { transform: rotateY(-14deg) translateX(4px); box-shadow: 18px 26px 44px -24px rgba(22, 24, 29, .65); }
.revista-medio { margin: 0 0 4px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lacre); font-weight: 600; }
.revista-edicion { font-size: 1.22rem; margin: 0 0 8px; }
.revista-edicion::after { display: none; }
.revista-titulo { margin: 0 0 12px; font-family: var(--serif); font-style: italic; color: var(--tinta-2); line-height: 1.4; }
.revista-paginas { margin: auto 0 0; font-size: .9rem; color: var(--gris); }
.revista-paginas a { font-weight: 600; }
@media (max-width: 560px) {
  .revistero-lista { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .revista-abrir { margin-bottom: 12px; }
  .revista-medio { font-size: .68rem; letter-spacing: .08em; }
  .revista-edicion { font-size: 1.02rem; }
  .revista-titulo { font-size: .9rem; }
  .revista-paginas { font-size: .82rem; }
}

.visor-abierto, .visor-abierto body { overflow: hidden; }
.visor { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: #0E0F12; color: var(--papel); }
.visor[hidden] { display: none; }
.visor-barra { display: flex; align-items: center; gap: 20px; padding: 12px clamp(16px, 3vw, 32px); border-bottom: 1px solid #2E3139; }
.visor-titulo { margin: 0; font-family: var(--serif); font-size: 1.15rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-cuenta { margin: 0; font-size: .88rem; color: #A7A196; white-space: pre; }
.visor-cerrar { background: none; border: 1px solid #4A4D55; color: var(--papel); width: 42px; height: 42px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.visor-cerrar:hover { background: var(--papel); color: var(--tinta); }
.visor-escena { position: relative; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 20px 76px; }
.visor-pliego { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; perspective: 2000px; }
.visor-pliego img { display: block; width: auto; height: auto; max-height: 100%; max-width: 100%; min-width: 0; object-fit: contain; background: #fff; cursor: zoom-in; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.visor-pliego img[hidden] { display: none; }
.visor-pliego.doble img { max-width: 50%; }
.visor-pliego.doble img:first-child { box-shadow: inset -18px 0 24px -18px rgba(0, 0, 0, .35), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.visor-pliego.pasa-sig { animation: pasaSig .55s var(--curva); transform-origin: 0 50%; }
.visor-pliego.pasa-ant { animation: pasaAnt .55s var(--curva); transform-origin: 100% 50%; }
.visor-pliego.pasa-abre { animation: abreRev .5s var(--curva); }
@keyframes pasaSig { from { opacity: 0; transform: rotateY(-22deg) translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes pasaAnt { from { opacity: 0; transform: rotateY(22deg) translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes abreRev { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
/* ampliado: una página sola, a lo ancho, con desplazamiento vertical */
.visor.ampliado .visor-escena { align-items: flex-start; }
.visor.ampliado .visor-pliego { height: auto; width: 100%; }
.visor.ampliado .visor-pliego img { height: auto; width: min(100%, 980px); max-width: 100%; max-height: none; cursor: zoom-out; }
.visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #4A4D55; background: rgba(22, 24, 29, .8); color: var(--papel); font-size: 2rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.visor-flecha:hover:not(:disabled) { background: var(--papel); color: var(--tinta); }
.visor-flecha:disabled { opacity: .25; cursor: default; }
.visor-ant { left: clamp(10px, 2vw, 20px); }
.visor-sig { right: clamp(10px, 2vw, 20px); }
.visor.ampliado .visor-flecha { position: fixed; }
.visor-tira { display: flex; gap: 10px; overflow-x: auto; padding: 12px clamp(16px, 3vw, 32px) 16px; border-top: 1px solid #2E3139; justify-content: safe center; }
.visor-tira button { flex: none; background: none; border: 0; padding: 0; color: #A7A196; font-size: .74rem; cursor: pointer; opacity: .55; transition: opacity .2s; }
.visor-tira button:hover, .visor-tira button[aria-selected="true"] { opacity: 1; color: var(--papel); }
.visor-tira img { display: block; height: 76px; width: auto; margin-bottom: 4px; border: 2px solid transparent; }
.visor-tira button[aria-selected="true"] img { border-color: var(--lacre-claro); }
@media (max-width: 860px) {
  .visor-escena { padding: 12px 8px; }
  .visor-flecha { top: auto; bottom: 10px; transform: none; width: 44px; height: 44px; font-size: 1.6rem; }
  .visor-pliego { height: calc(100% - 56px); align-self: flex-start; }
  .visor.ampliado .visor-flecha { display: none; }
  .visor.ampliado .visor-pliego { height: auto; }
  .visor-tira img { height: 56px; }
  .visor-cuenta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .visor-pliego.pasa-sig, .visor-pliego.pasa-ant, .visor-pliego.pasa-abre { animation: none; } }

/* ---- preguntas ---------------------------------------------------------- */
.preguntas h2 { margin-bottom: 1em; }
.pregunta { border-top: 1px solid var(--linea); }
.pregunta:last-child { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--serif); font-size: 1.28rem; line-height: 1.3;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: '+'; position: absolute; right: 6px; top: 18px; font: 300 1.7rem/1 var(--sans); color: var(--lacre); transition: transform .25s; }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta summary:hover { color: var(--lacre); }
.pregunta-resp { padding: 0 0 22px; color: var(--tinta-2); max-width: 68ch; }

/* ---- visita / cierre ---------------------------------------------------- */
.visita-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.visita-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { .visita-in { grid-template-columns: 1fr; } }

/* Franja de llamada a la acción (referencia: gomeznavarroabogados.com.mx): foto de sala
   bajo un velo en tinta, borde superior en diagonal y la directora parada sobre el borde inferior. */
.cierre {
  --corte: clamp(32px, 5vw, 80px);   /* alto de la diagonal */
  --aire: clamp(40px, 5vw, 64px);    /* respiro arriba del texto */
  --sobre: clamp(48px, 7vw, 120px);  /* cuánto sobresale la directora por encima de la franja */
  position: relative; isolation: isolate; color: var(--papel); overflow-x: clip;
  margin-top: calc(-1 * var(--corte)); padding-top: calc(var(--corte) + var(--aire));
}
/* El fondo y la diagonal van en una capa aparte para que la foto pueda salirse de la franja. */
.cierre::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(rgba(22, 24, 29, .91), rgba(22, 24, 29, .91)), var(--tinta) url('../img/litigio-oral-sala-de-audiencias.webp') center 30% / cover;
  clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%);
}
.cierre-in { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: end; min-height: 500px; }
.cierre-foto {
  margin: 0; position: absolute; left: 0; bottom: 0; width: 40%;
  top: calc(-1 * (var(--corte) + var(--aire) + var(--sobre)));
}
.cierre-foto::before {
  content: ''; position: absolute; inset: 22% -8% 0; z-index: -1;
  background: radial-gradient(closest-side, rgba(227, 163, 156, .28), rgba(227, 163, 156, 0));
}
.cierre-foto img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
.cierre-texto { grid-column: 2; align-self: center; padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); }
.cierre h2 { color: var(--blanco); font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); max-width: 20ch; }
.cierre p { color: #D2CCBF; max-width: 54ch; }
.cierre-lista { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; gap: 10px; }
.cierre-lista li { position: relative; padding-left: 36px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; color: var(--papel); }
.cierre-lista li::before {
  content: ''; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--lacre);
}
.cierre-lista li::after {
  content: ''; position: absolute; left: 7px; top: calc(.2em + 5px); width: 6px; height: 10px;
  border: solid var(--blanco); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cierre .boton-linea { color: var(--papel); border-color: #8E8A80; }
.cierre .boton-linea:hover { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
@media (max-width: 860px) {
  .cierre-in { grid-template-columns: 1fr; min-height: 0; }
  .cierre-foto { position: relative; top: auto; width: auto; margin-top: calc(-1 * (var(--corte) + var(--aire) + var(--sobre))); }
  .cierre-foto img { width: min(78%, 320px); height: auto; margin-inline: auto; }
  .cierre-texto { grid-column: auto; padding-top: 8px; }
}
/* En celular la foto sobresale ~120 px por encima de la franja: se separa de la sección anterior
   para que no tape su último renglón, y el texto respira más. */
@media (max-width: 560px) {
  .cierre { margin-top: 100px; --aire: 56px; }
  .cierre-texto { padding: 24px 0 64px; }
  .cierre h2 { margin-bottom: .6em; }
  .cierre-lista { gap: 14px; margin-top: 1.8em; }
  .cierre .acciones { margin-top: 2.2em; }
  .cierre .acciones .boton { width: 100%; justify-content: center; }
}

/* ---- páginas interiores ------------------------------------------------- */
/* Cabeceras interiores como la de inicio, un poco más bajas: foto de fondo (.cabeza-fondo, la pone
   el generador; o la .cabeza-foto de la página) bajo velo en tinta, texto claro y corte en diagonal. */
.cabeza-pagina {
  --corte: clamp(36px, 6vw, 96px);
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: min(66svh, 620px); background: var(--tinta); color: var(--papel);
  padding: calc(var(--cab) + clamp(64px, 7vw, 96px)) 0 calc(var(--corte) + clamp(40px, 5vw, 64px));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%);
}
.cabeza-simple { min-height: min(56svh, 520px); }
.cabeza-fondo { position: absolute; inset: 0 0 0 auto; width: 58%; z-index: -2; background-position: 50% 25%; background-size: cover; filter: grayscale(.2); }
.cabeza-pagina::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(22, 24, 29, .8) 0, rgba(22, 24, 29, 0) calc(var(--cab) + 90px)),
    linear-gradient(90deg, var(--tinta) 0%, var(--tinta) 40%, rgba(22, 24, 29, .74) 62%, rgba(22, 24, 29, .3) 100%);
}
.cabeza-pagina > .envoltura { width: min(100% - 32px, var(--ancho)); }
.cabeza-pagina .envoltura-angosta { margin-left: max(16px, calc((100% - var(--ancho)) / 2)); }
.cabeza-in { display: block; }
.cabeza-in > div { max-width: 720px; }
.cabeza-pagina h1 { color: var(--blanco); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); max-width: 22ch; }
.cabeza-pagina h1::after { content: ''; display: block; width: 72px; height: 2px; margin-top: .45em; background: var(--lacre-claro); }
.cabeza-pagina .lead { color: #E8E3D8; }
.cabeza-pagina .antetitulo, .cabeza-pagina .firma-guia { color: #B9B3A6; }
.cabeza-pagina a:not(.boton) { color: var(--lacre-claro); }
.cabeza-pagina .boton-linea { color: var(--papel); border-color: #8E8A80; }
.con-mov .cabeza-pagina .boton-linea { --relleno: var(--papel); }
.cabeza-foto { position: absolute; inset: 0 0 0 auto; width: 58%; margin: 0; z-index: -2; }
.cabeza-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(.2); }
@media (max-width: 860px) {
  .cabeza-pagina { min-height: 0; align-items: flex-end; padding-top: calc(var(--cab) + clamp(150px, 40vw, 260px)); }
  .cabeza-simple { padding-top: calc(var(--cab) + clamp(110px, 30vw, 200px)); }
  .cabeza-fondo, .cabeza-foto { width: 100%; }
  .cabeza-pagina::after { background: linear-gradient(180deg, rgba(22, 24, 29, .7) 0%, rgba(22, 24, 29, .45) 24%, rgba(22, 24, 29, .75) 48%, var(--tinta) 72%); }
}

/* migas sobre la foto de la cabecera */
main { position: relative; }
main > .migas { position: absolute; left: 0; right: 0; top: calc(var(--cab) + 20px); z-index: 2; padding-top: 0; }
main > .migas, main > .migas a { color: #B9B3A6; }
main > .migas a:hover { color: var(--blanco); }
main > .migas li + li::before { color: #5A5D66; }

.columnas-texto { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: clamp(28px, 5vw, 72px); }
.nota-margen { position: relative; }
.nota-margen p { position: sticky; top: calc(var(--cab) + 32px); margin: 6px 0 0; padding-top: 14px; border-top: 2px solid var(--lacre); font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--gris); }
@media (max-width: 960px) {
  .columnas-texto { grid-template-columns: 1fr; }
  .nota-margen p { position: static; max-width: 40ch; }
}

.texto-largo h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); margin-top: 1.6em; }
.texto-largo h2:first-child, .texto-largo > figure + h2 { margin-top: 0; }
.texto-largo > figure + h2 { margin-top: 1.4em; }
.texto-largo ul, .texto-largo ol { padding-left: 1.2em; margin: 0 0 1.4em; }
.texto-largo li { margin-bottom: .55em; }
.texto-largo li::marker { color: var(--lacre); }
.lista-limpia { list-style: none; padding: 0 !important; border-top: 1px solid var(--linea); }
.lista-limpia li { padding: 12px 0 12px 22px; margin: 0 !important; border-bottom: 1px solid var(--linea); position: relative; }
.lista-limpia li::before { content: ''; position: absolute; left: 0; top: 1.25em; width: 8px; height: 1px; background: var(--lacre); }
.destacado { margin: 2.2em 0; padding: 20px 24px; background: var(--papel); border-left: 2px solid var(--lacre); }
.seccion-papel .destacado { background: var(--blanco); }

.linea-tiempo { list-style: none; padding: 0 !important; margin: 1.6em 0 0; }
.linea-tiempo li { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--linea); margin: 0 !important; }
.linea-tiempo p { margin: 0; }
.lt-fecha { font-family: var(--serif); font-size: 1.15rem; color: var(--lacre); }
@media (max-width: 560px) { .linea-tiempo li { grid-template-columns: 1fr; gap: 4px; } }

.autora { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: start; margin-top: 2.6em; padding-top: 26px; border-top: 1px solid var(--tinta); font-size: .98rem; }
.autora-foto { width: 112px; height: 112px; object-fit: cover; object-position: 30% 20%; filter: grayscale(1); border-radius: 50%; }
.autora-nombre { font-family: var(--serif); font-size: 1.2rem; margin-bottom: .3em; }
.autora p { margin-bottom: .5em; }
@media (max-width: 480px) { .autora { grid-template-columns: 1fr; } }

/* guías */
.firma-guia { font-size: .92rem; color: var(--gris); margin-top: 1.6em; }
.figura-guia { margin: 0 0 2em; }
.figura-guia img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.indice-guia ol { position: sticky; top: calc(var(--cab) + 32px); list-style: none; margin: 0; padding: 14px 0 0; border-top: 2px solid var(--lacre); counter-reset: g; }
.indice-guia-t { position: static !important; border: 0 !important; padding: 0 !important; font-style: normal !important; font-family: var(--sans) !important; font-size: .85rem !important; font-weight: 600; color: var(--tinta) !important; margin: 0 0 10px !important; }
.indice-guia li { counter-increment: g; margin-bottom: 10px; font-size: .95rem; line-height: 1.35; display: grid; grid-template-columns: 1.4em 1fr; }
.indice-guia li::before { content: counter(g) '.'; color: var(--lacre); }
.indice-guia a { color: var(--tinta-2); text-decoration: none; }
.indice-guia a:hover { color: var(--lacre); text-decoration: underline; }
@media (max-width: 960px) { .indice-guia ol { position: static; } }

.lista-guias { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinta); }
.lista-guias a { display: block; padding: 24px 0; border-bottom: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.lista-guias strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.25; margin-bottom: 6px; }
.lista-guias span { color: var(--gris); }
.lista-guias a:hover strong { color: var(--lacre); }
.nota-pie { margin-top: 2.4em; color: var(--gris); font-size: .98rem; }

/* contacto */
.contacto-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.contacto-datos dl { margin: 0 0 1.4em; border-top: 1px solid var(--tinta); }
.contacto-datos dt { font-size: .85rem; color: var(--lacre); font-weight: 600; padding-top: 16px; }
.contacto-datos dd { margin: 2px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--linea); font-family: var(--serif); font-size: 1.08rem; }
.contacto-datos dt { padding-top: 12px !important; }
.contacto-datos address { font-style: normal; }
.contacto-datos .nota { font-family: var(--sans); font-size: .85rem; color: var(--gris); margin-left: .4em; }
.correo, .pie-correo { overflow-wrap: anywhere; }
@media (max-width: 520px) { .contacto-datos .correo { font-size: .9rem; } }
.formulario {
  padding: clamp(24px, 4vw, 44px); border-radius: 12px; color: var(--papel);
  background: linear-gradient(rgba(22, 24, 29, .72), rgba(22, 24, 29, .82)), var(--tinta) url('../img/fondo-formulario.webp') center bottom / cover;
  box-shadow: 0 40px 60px -40px rgba(22, 24, 29, .7);
}
.formulario .campo label { color: var(--papel); }
.formulario a { color: var(--lacre-claro); }
.formulario .formulario-estado.ok { color: #9FD8B4; }
.formulario .formulario-estado.error { color: var(--lacre-claro); }
.formulario .campo [aria-invalid="true"] { outline: 2px solid var(--lacre-claro); }
.campo { margin-bottom: 18px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.campo label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #B9AE98; border-radius: 8px; background: var(--blanco);
  font: 400 1rem/1.4 var(--sans); color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--lacre); outline-offset: 0; border-color: var(--lacre); }
.campo [aria-invalid="true"] { border-color: var(--lacre); background: #FCF3F2; }
.campo-casilla { display: flex; gap: 10px; align-items: flex-start; }
.campo-casilla input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--lacre); }
.campo-casilla label { font-weight: 400; margin: 0; }
.campo-oculto { position: absolute; left: -9999px; }
.formulario-estado { margin: 14px 0 0; min-height: 1.5em; }
.formulario-estado.ok { color: #1E5B36; }
.formulario-estado.error { color: var(--lacre); }
@media (max-width: 860px) { .contacto-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .campo-doble { grid-template-columns: 1fr; } }
.mapa { margin-top: 1.6em; aspect-ratio: 16 / 9; background: var(--papel-2); display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.mapa iframe { width: 100%; height: 100%; border: 0; }

/* ---- pie ---------------------------------------------------------------- */
.pie { background: #0F1014; color: #C9C3B6; padding: 72px 0 0; font-size: .96rem; }
.pie a { color: #EDE7DA; }
.pie a:hover { color: var(--lacre-claro); }
.pie-in { width: min(100% - 32px, var(--ancho)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 40px; }
.pie-titulo { font-family: var(--sans); font-size: .88rem; font-weight: 600; color: var(--lacre-claro); margin-bottom: 14px; letter-spacing: 0; }
.logo-claro { color: var(--papel); margin-bottom: 18px; }
.logo-claro:hover { color: var(--papel); }
.logo-claro .sello { color: var(--lacre); }
.logo-claro .logo-sub { color: #A7A196; }
.redes-iconos { list-style: none; margin: 1.4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.redes-iconos a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3A3D45; color: #C9C3B6; transition: background .2s, color .2s, border-color .2s; }
.redes-iconos a:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.redes-iconos svg { width: 18px; height: 18px; }
.pie-lista { list-style: none; margin: 0; padding: 0; }
.pie-lista li { margin-bottom: 8px; }
.pie-legal { width: min(100% - 32px, var(--ancho)); margin: 56px auto 0; padding: 24px 0 96px; border-top: 1px solid #2A2C33; font-size: .85rem; color: #A7A196; }
.pie-legal p { margin-bottom: .6em; max-width: 90ch; }
@media (max-width: 960px) { .pie-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie-in { grid-template-columns: 1fr; } }

.flotante-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #1F7A4D; color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
}
.flotante-wa:hover { background: #17633E; color: #fff; }
.flotante-wa svg { width: 30px; height: 30px; }

/* ---- rediseño según gomeznavarroabogados.com.mx (sin módulos con íconos) ----- */

/* títulos de sección con filete corto */
.seccion h2::after, .cierre h2::after { content: ''; display: block; width: 64px; height: 2px; margin-top: .55em; background: var(--lacre); }
.seccion-tinta h2::after, .seccion-foto h2::after, .cierre h2::after { background: var(--lacre-claro); }
.texto-largo h2::after, .preguntas h2::after { content: none; }

/* situaciones: selector; a la izquierda las opciones, a la derecha un panel con foto que cambia */
.selector { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.selector-opciones { display: flex; flex-direction: column; border-top: 1px solid var(--tinta); }
.selector-opciones button {
  position: relative; display: flex; align-items: baseline; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  padding: 18px 12px 18px 0; background: none; border: 0; border-bottom: 1px solid var(--linea);
  font: 400 clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.25 var(--serif); color: var(--gris);
  transition: color .3s, padding-left .45s var(--curva), background-color .3s;
}
.selector-opciones button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lacre); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--curva); }
.selector-opciones button:hover { color: var(--tinta); }
.selector-opciones button[aria-selected="true"] { color: var(--tinta); padding-left: 20px; background: var(--papel); }
.selector-opciones button[aria-selected="true"]::before { transform: scaleY(1); }
.selector-opciones button:focus-visible { outline: 2px solid var(--lacre); outline-offset: -2px; }
.selector-num { font: 600 .85rem/1 var(--sans); color: var(--lacre); letter-spacing: .04em; }
.selector-paneles { position: relative; display: grid; gap: 16px; }
.selector-panel {
  position: relative; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: clamp(24px, 4vw, 44px); border-radius: 12px; overflow: hidden; color: var(--papel);
  background-color: var(--tinta); background-position: center 25%; background-size: cover;
}
.con-js .selector-paneles { display: block; min-height: 460px; }
.con-js .selector-panel { position: absolute; inset: 0; min-height: 0; animation: muestraPanel .7s var(--curva) both; }
.selector-panel[hidden] { display: none; }
@keyframes muestraPanel { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.selector-tipo { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lacre-claro); margin: 0 0 10px; }
.selector-panel h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.15; color: var(--blanco); margin: 0; }
.selector-panel h3::after { content: ''; display: block; width: 56px; height: 2px; margin: 16px 0 14px; background: var(--lacre-claro); }
.selector-panel p:not(.selector-tipo) { color: #E8E3D8; font-size: 1.08rem; max-width: 40ch; margin: 0 0 22px; }
@media (max-width: 860px) {
  .selector { grid-template-columns: 1fr; }
  .selector-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 0; }
  .selector-opciones button { padding: 14px 12px; border: 1px solid var(--linea); border-radius: 8px; font-size: 1.02rem; flex-direction: column; gap: 6px; }
  .selector-opciones button[aria-selected="true"] { padding-left: 12px; border-color: var(--lacre); }
  .selector-opciones button::before { display: none; }
  .con-js .selector-paneles { min-height: 380px; }
}

/* áreas: tarjetas con foto, título, filete, resumen y botón */
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tarjeta { display: flex; flex-direction: column; background: var(--blanco); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 var(--linea), 0 22px 40px -32px rgba(22, 24, 29, .55); transition: transform .4s var(--curva), box-shadow .4s; }
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--linea), 0 30px 50px -30px rgba(22, 24, 29, .6); }
.tarjeta-foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--papel-2); }
@media (max-width: 560px) { .tarjeta-foto { aspect-ratio: 16 / 8; } }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .8s var(--curva); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.06); }
/* la foto de litigio es vertical y la abogada está arriba a la izquierda: encuadre desde arriba */
.tarjeta-foto img[src*="litigio-oral-sala-de-audiencias"] { object-position: 30% 0; transform-origin: 30% 0; }
.tarjeta-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 26px; }
.tarjeta-ref { font-size: .82rem; font-weight: 600; color: var(--lacre); margin: 0 0 8px; }
.tarjeta h3 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.25; margin: 0; }
.tarjeta h3::after { content: ''; display: block; width: 40px; height: 2px; margin: 14px 0 12px; background: var(--lacre); }
.tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta h3 a:hover { color: var(--lacre); }
.tarjeta-cuerpo > p:not(.tarjeta-ref) { color: var(--gris); font-size: .98rem; flex: 1; margin: 0 0 20px; }
@media (max-width: 960px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tarjetas { grid-template-columns: 1fr; } }

/* directora: franja oscura con foto de fondo, texto a la izquierda y retrato a la derecha */
.seccion-foto {
  color: var(--papel);
  background: linear-gradient(rgba(22, 24, 29, .87), rgba(22, 24, 29, .87)), var(--tinta) url('../img/conferencia-sistema-penal-acusatorio.webp') center / cover;
}
.seccion-foto h2 { color: var(--blanco); }
.seccion-foto p { color: #D2CCBF; }
.directora-in { grid-template-columns: 1.1fr .9fr; }
.directora .cita { border-left-color: var(--lacre-claro); }
.directora .cita p { color: var(--blanco); }
.directora .cita footer { color: #A7A196; }
.directora-foto img { border-radius: 10px; }
.directora-foto .mascara-foto { border-radius: 10px; }
@media (max-width: 860px) { .directora-in { grid-template-columns: 1fr; } .directora-foto { order: -1; max-width: 420px; } }

/* trayectoria: texto, lista y botón junto a dos fotos encimadas */
.trayectoria-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.trayectoria-texto > p:not(.acciones) { color: var(--tinta-2); max-width: 54ch; }
.trayectoria-lista { list-style: none; margin: 1.2em 0 0; padding: 0; border-top: 1px solid var(--linea); }
.trayectoria-lista li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--linea); position: relative; font-family: var(--serif); font-size: 1.1rem; }
.trayectoria-lista li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 14px; height: 2px; background: var(--lacre); }
.collage { position: relative; padding: 0 0 18% 14%; }
.collage img { border-radius: 10px; object-fit: cover; }
.collage-grande { width: 100%; aspect-ratio: 4 / 4.4; object-position: 50% 20%; }
.collage-chica {
  position: absolute; left: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3;
  border: 8px solid var(--blanco); box-shadow: 0 24px 40px -24px rgba(22, 24, 29, .6);
}
@media (max-width: 860px) { .trayectoria-in { grid-template-columns: 1fr; } .collage { max-width: 520px; } }
.trayectoria-in { align-items: start; }
.trayectoria .collage { position: sticky; top: calc(var(--cab) + 32px); }
@media (max-width: 860px) { .trayectoria .collage { position: relative; top: 0; } }
/* reseña curricular: año al margen y texto, con filetes finos */
.cv { list-style: none; margin: 1.4em 0 0; padding: 0; border-top: 1px solid var(--linea); }
.cv li { display: grid; grid-template-columns: 7.5em 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.cv-fecha { font-family: var(--serif); color: var(--lacre); font-size: 1.05rem; line-height: 1.5; }
.cv p { margin: 0; font-size: .95rem; color: var(--tinta-2); }
.cv b { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; color: var(--tinta); }
.cv-formacion { margin-top: 1.2em; font-size: .95rem; }
/* reseña desplegable: «Ver más» abre la cronología y la formación */
.cv-mas { margin-top: 1.2em; }
.cv-mas summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-weight: 600; color: var(--lacre); padding: 6px 0; }
.cv-mas summary::-webkit-details-marker { display: none; }
.cv-mas summary::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.cv-mas[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.cv-mas summary:hover { color: var(--lacre-osc); }
.cv-mas .cv-cerrar, .cv-mas[open] .cv-abrir { display: none; }
.cv-mas[open] .cv-cerrar { display: inline; }
.cv-mas[open] > .cv { animation: cvAbre .45s var(--curva); }
@keyframes cvAbre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) { .cv li { grid-template-columns: 1fr; gap: 4px; } }
.prensa-acciones { justify-content: center; margin-top: clamp(32px, 4vw, 52px); }
/* collage: al aparecer, la foto chica entra después de la grande; al pasar el cursor ambas se levantan */
.collage img { transition: transform .6s var(--curva), box-shadow .6s var(--curva), opacity 1s var(--curva); }
.con-mov .collage .collage-grande { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--curva), transform .6s var(--curva), box-shadow .6s var(--curva); }
.con-mov .collage.visible .collage-grande { clip-path: inset(0 0 0 0); }
.con-mov .collage:not(.visible) .collage-chica { opacity: 0; }
.con-mov .collage.visible .collage-chica { animation: entraChica 1s var(--curva) .55s backwards; }
@keyframes entraChica { from { opacity: 0; transform: translate(-36px, 36px); } to { opacity: 1; transform: none; } }
.con-mov .collage.visible .collage-chica:hover, .collage .collage-chica:hover { transform: translateY(-12px) rotate(-2.5deg) scale(1.04); box-shadow: 0 34px 50px -24px rgba(22, 24, 29, .65); z-index: 1; }
.collage-grande:hover { transform: translateY(-8px) scale(1.015); box-shadow: 0 30px 50px -30px rgba(22, 24, 29, .6); }

/* menú transparente sobre la cabecera con foto (todas las páginas); se vuelve sólido al bajar */
.cabecera { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background-color .35s, border-color .35s, box-shadow .35s; }
.cabecera--sombra, .cabecera:has(.menu.abierto) { background: rgba(22, 24, 29, .94); border-bottom-color: #2E3139; }
@supports (backdrop-filter: blur(8px)) { .cabecera--sombra { background: rgba(22, 24, 29, .82); backdrop-filter: blur(10px); } }
.pagina-inicio .portada { min-height: min(100svh, 940px); padding-top: calc(var(--cab) + clamp(56px, 7vw, 100px)); }
.pagina-inicio .portada::before {
  background:
    linear-gradient(180deg, rgba(22, 24, 29, .7) 0, rgba(22, 24, 29, 0) calc(var(--cab) + 90px)),
    linear-gradient(90deg, rgba(22, 24, 29, .9) 0%, rgba(22, 24, 29, .75) 38%, rgba(22, 24, 29, .38) 62%, rgba(22, 24, 29, .22) 100%);
}
@media (max-width: 900px) {
  .pagina-inicio .portada { min-height: 0; padding-top: calc(var(--cab) + clamp(220px, 58vw, 400px)); }
  .pagina-inicio .portada::before { background: linear-gradient(180deg, rgba(22, 24, 29, .7) 0%, rgba(22, 24, 29, .35) 22%, rgba(22, 24, 29, .6) 40%, var(--tinta) 62%); }
}

/* ---- movimiento (referencia: lisonas.com) -------------------------------
   Solo aplica con .con-mov (lo pone sitio.js si no se pidió reducir movimiento). */
:root { --curva: cubic-bezier(.22, .8, .2, 1); }
.cabecera { transition: box-shadow .35s; }
.cabecera--sombra { box-shadow: 0 10px 28px -22px rgba(22, 24, 29, .55); }

/* entrada: título que sube palabra por palabra, lo demás en escalón */
.con-mov .palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.con-mov .palabra > span { display: inline-block; animation: subePalabra 1s var(--curva) both; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
@keyframes subePalabra { from { transform: translateY(105%); } to { transform: none; } }
.con-mov .entrada { animation: aparece 1s var(--curva) both; animation-delay: calc(var(--i, 0) * 110ms + 200ms); }
@keyframes aparece { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* foto de la cabeza: cortina de abajo hacia arriba y zoom que se asienta */
.con-mov .entrada-foto { animation: cortina 1.4s var(--curva) .25s both; }
@keyframes cortina {
  from { clip-path: inset(100% 0 0 0); transform: scale(1.12); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
/* portada: la foto de fondo se asienta despacio y el filete bajo el título se dibuja */
.con-mov .portada-fondo img, .con-mov .cabeza-foto img { animation: asienta 2.2s var(--curva) both; }
.con-mov .cabeza-pagina h1::after { animation: filete 1s var(--curva) .9s both; transform-origin: left; }
@keyframes asienta { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.con-mov .portada h1::after { animation: filete 1s var(--curva) .9s both; }
@keyframes filete { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.con-mov .portada .boton-linea { --relleno: var(--papel); }

/* revelado escalonado al bajar */
.con-mov .revelar { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--curva), transform 1s var(--curva); transition-delay: calc(var(--i, 0) * 100ms); }
.con-mov .revelar.visible { opacity: 1; transform: none; }

/* fotos interiores: cortina al entrar + paralaje dentro de la máscara */
.mascara-foto { display: block; overflow: hidden; }
.con-mov .mascara-foto img { transform: translateY(var(--desplaza, 0)) scale(1.1); will-change: transform; }
.con-mov .revelar-foto { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--curva); }
.con-mov .revelar-foto.visible { clip-path: inset(0 0 0 0); }

/* índice: la línea punteada se dibuja al aparecer la fila */
.con-mov .indice-enlace .indice-guia { transform: translateY(-.3em) scaleX(0); transform-origin: left; transition: transform 1.1s var(--curva) .35s; }
.con-mov .indice-fila.visible .indice-guia { transform: translateY(-.3em) scaleX(1); }
.indice-num { display: inline-block; transition: transform .45s var(--curva); }
.indice-enlace:hover .indice-num { transform: translateX(6px); }

/* botones: relleno que sube desde abajo */
.con-mov .boton, .con-mov .boton:hover {
  background-image: linear-gradient(var(--relleno), var(--relleno)); background-repeat: no-repeat;
  background-position: 50% 100%; background-size: 100% 0%;
  transition: background-size .5s var(--curva), color .35s, border-color .35s;
}
.con-mov .boton { --relleno: var(--lacre-osc); }
.con-mov .boton:hover { background-color: var(--lacre); background-size: 100% 100%; }
.con-mov .boton-linea { --relleno: var(--tinta); }
.con-mov .boton-linea:hover { background-color: transparent; }
.con-mov .cierre .boton-linea { --relleno: var(--papel); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .con-js .subrayado:not(.visto) { background-size: 100% 2px; }
}
@media print {
  .cabecera, .flotante-wa, .pie, .cierre, .formulario { display: none; }
}
.pie a[href^="https://wa.me"], .pie a[href^="tel:"] { white-space: nowrap; }