@charset "UTF-8";
/* ============================================================================
   TCLEX ABOGADOS · HOJA GLOBAL 2026  ·  /web-assets/css/tclex-2026.css
   ----------------------------------------------------------------------------
   Dirección B (arquitectura, retícula, ritmo de bloques, rombo, hovers)
   con la voz de A (titulares en serif caja baja, Modena racionada, verde
   racionado, filetes en vez de sombras).  SIN FOTOGRAFÍA: toda la gráfica se
   resuelve con SVG inline, tramas CSS, tipografía y espacio.

   ── CÓMO SE USA ────────────────────────────────────────────────────────────
   En <head> de CADA página:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/web-assets/css/tclex-2026.css">
   Copiar de index.html tal cual: .barra, .cabecera (nav + menú móvil), .pie y
   el <script> del final (menú, año, servicios). Marcar la página activa con
   aria-current="page" en su enlace del nav y del pie.

   ── REGLAS TIPOGRÁFICAS NO NEGOCIABLES ─────────────────────────────────────
   · Titulares: EB Garamond (serif) en CAJA BAJA; el énfasis va en <em> cursiva.
   · Modena Sans (var(--marca)): SOLO logotipo, numerales y microetiquetas en
     versalitas tracked. Nunca titulares largos ni prosa. Una sola cara: 400.
   · Lato (var(--sans)): prosa, nav, tablas, formularios.
   · --verde-acento NO se usa para texto pequeño sobre blanco (4.36:1):
     es filete, rombo y marca gráfica. Para texto/enlaces usar --verde-marca.

   ── TOKENS (custom properties) ─────────────────────────────────────────────
   Paleta:      --verde-marca --verde-acento --azul-profundo --tinta
                --tinta-suave --blanco --gris-linea --gris-claro
   Derivados:   --verde-tinta --verde-papel --verde-niebla --menta
                --gris-lectura --blanco-suave --linea-inversa
   Semánticos (los consumen TODOS los componentes; se voltean solos dentro de
   .inverso / .seccion--tinta / .seccion--verde):
                --c-fondo --c-texto --c-titulo --c-suave --c-linea
                --c-linea-fuerte --c-marca --c-acento
   Tipografía:  --display --sans --marca
                --txt-xs --txt-sm --txt-base --txt-md --txt-lg --txt-xl
                --txt-2xl --txt-3xl
   Métrica:     --ancho --margen --col-gap --medida --aire --aire-sec
   Movimiento:  --ease --dur

   ── COMPONENTES ────────────────────────────────────────────────────────────
   Layout:    .u .rejilla .malla(--2 --3 --4) .seccion(--papel --tinta --verde
              --ceñida) .inverso .trama .filete(--fuerte --marca) .medida
   Texto:     .prosa .capitular .destacado .cita .etiqueta(--gris) .rombo
              .sr .saltar .revelar
   Cabecera:  .barra .ciudades .cabecera .marca .nav .nav__grupo
              .nav__desplegable .menu-boton .panel
   Cabeceras: .rotulo(__num __titulo __nota) .portada(__titulo __entrada) .miga
   Acción:    .btn(--solido --linea --claro) .enlace
   Bloques:   .hero .cifras/.cifra .cinta .areas/.area .areas-mas
              .fases/.fase .lista-num .notas/.nota .indice-notas
              .datos .personas/.persona .campos/.campo .pie
   ========================================================================= */

/* 1 ─ FUENTE PROPIA ────────────────────────────────────────────────────────
   Modena-Sans.otf es UNA sola cara estática (211 glifos). Se declara sólo
   font-weight:400: no existen otros pesos, no los inventes. */
@font-face{
  font-family:'modena';
  src:url('/web-assets/fonts/Modena-Sans.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* 2 ─ TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  /* paleta de marca (identidad real, no se cambia) */
  --verde-marca:#035144;
  --verde-acento:#008972;
  --azul-profundo:#264c59;
  --gris-linea:#e5e5e5;
  --gris-claro:#d4d4d4;
  --tinta:#191919;
  --tinta-suave:#313131;
  --blanco:#ffffff;

  /* derivados: misma familia, sólo luminancia */
  --verde-tinta:#023a31;      /* verde marca oscurecido, degradados */
  --verde-niebla:#eef2f1;     /* hover tenue sobre blanco */
  --verde-papel:#f7f9f8;      /* fondo de sección claro */
  --menta:#8fd6c7;            /* acento legible sobre fondo oscuro (5.5:1) */
  --gris-lectura:#5b5b5b;     /* texto secundario AA sobre blanco (6.7:1) */
  --blanco-suave:#e8f0ee;     /* texto secundario sobre verde */
  --linea-inversa:rgba(255,255,255,.22);

  /* tokens semánticos: contexto claro */
  --c-fondo:var(--blanco);
  --c-texto:var(--tinta-suave);
  --c-titulo:var(--tinta);
  --c-suave:var(--gris-lectura);
  --c-linea:var(--gris-linea);
  --c-linea-fuerte:var(--tinta);
  --c-marca:var(--verde-marca);
  --c-acento:var(--verde-marca);

  /* tipografía */
  --display:'EB Garamond','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Lato',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --marca:'modena','Lato',system-ui,sans-serif;

  /* escala fluida */
  --txt-xs:.6875rem;                                   /* microetiquetas */
  --txt-sm:clamp(.8125rem,.79rem + .1vw,.875rem);      /* notas, pies */
  --txt-base:clamp(.9375rem,.9rem + .2vw,1.0625rem);   /* prosa */
  --txt-md:clamp(1.0625rem,1rem + .32vw,1.25rem);      /* entradillas */
  --txt-lg:clamp(1.2rem,1.05rem + .65vw,1.6rem);       /* h4 / titulares de nota */
  --txt-xl:clamp(1.5rem,1.2rem + 1.35vw,2.35rem);      /* h3 */
  --txt-2xl:clamp(1.8rem,1.3rem + 2.15vw,3.1rem);      /* h2 de sección */
  --txt-3xl:clamp(2.2rem,1.35rem + 3.9vw,4.35rem);     /* h1 / declaración */

  /* métrica */
  --ancho:1440px;
  --margen:clamp(1.25rem,4.2vw,5.5rem);
  --col-gap:clamp(1.25rem,2.6vw,2.75rem);
  --medida:38em;                                       /* medida de lectura */
  --aire:clamp(2.5rem,5vw,5rem);
  --aire-sec:clamp(3.25rem,6.5vw,7rem);                /* padding de sección */

  /* movimiento */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.5s;
}

/* 3 ─ RESET Y BASE ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--blanco);
  color:var(--c-texto);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--txt-base);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--c-titulo);
  overflow-wrap:break-word;
}
h1{font-size:var(--txt-3xl)}
h2{font-size:var(--txt-2xl)}
h3{font-size:var(--txt-xl)}
h4{font-size:var(--txt-lg);line-height:1.18}
h1 em,h2 em,h3 em,h4 em,.cita em{font-style:italic;color:var(--c-marca)}
strong,b{font-weight:700}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
hr{border:0;border-top:1px solid var(--c-linea);margin:0}
::selection{background:var(--verde-marca);color:#fff}

/* foco visible, también sobre fondo oscuro */
:focus-visible{outline:2px solid var(--verde-acento);outline-offset:3px}
.inverso :focus-visible,.inverso a:focus-visible,.inverso button:focus-visible,
.seccion--verde :focus-visible,.seccion--tinta :focus-visible,
.hero :focus-visible,.pie :focus-visible,.panel :focus-visible{outline-color:#fff}

/* el header es sticky: los anclajes no deben quedar debajo */
[id]{scroll-margin-top:clamp(4.5rem,9vw,7.5rem)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--verde-marca);color:#fff;padding:.85rem 1.35rem;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;transition:top .2s;
}
.saltar:focus{top:.75rem}

/* 4 ─ UTILIDADES DE RETÍCULA Y COLOR ─────────────────────────────────────── */
/* .u  — envoltura: ancho máximo + márgenes laterales fluidos */
.u{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
/* .rejilla — 12 columnas; usa grid-column en el hijo (ej. style="grid-column:1/span 7") */
.rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
/* .malla — retícula de fichas con filetes, sin sombras */
.malla{display:grid;gap:0;border-top:1px solid var(--c-linea)}
.malla--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.malla--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.malla--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.malla > *{
  border-bottom:1px solid var(--c-linea);border-left:1px solid var(--c-linea);
  padding:clamp(1.35rem,2.4vw,2.25rem) clamp(1rem,1.8vw,2rem) clamp(1.75rem,3vw,2.5rem);
}
.malla--2 > :nth-child(2n+1),
.malla--3 > :nth-child(3n+1),
.malla--4 > :nth-child(4n+1){border-left:0;padding-left:0}
@media (max-width:900px){
  .malla--3,.malla--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .malla--3 > :nth-child(3n+1),.malla--4 > :nth-child(4n+1){border-left:1px solid var(--c-linea);padding-left:clamp(1rem,1.8vw,2rem)}
  .malla--3 > :nth-child(2n+1),.malla--4 > :nth-child(2n+1){border-left:0;padding-left:0}
}
@media (max-width:620px){
  .malla--2,.malla--3,.malla--4{grid-template-columns:1fr}
  .malla > *{border-left:0;padding-left:0}
}

.filete{border:0;border-top:1px solid var(--c-linea)}
.filete--fuerte{border-top-color:var(--c-linea-fuerte)}
.filete--marca{border-top:2px solid var(--c-marca)}
.medida{max-width:var(--medida)}
.centro{margin-inline:auto}

/* prosa: medida de lectura cuidada + capitular verde */
.prosa{max-width:var(--medida);color:var(--c-texto)}
.prosa p + p{margin-top:1.15em}
.prosa p + h3,.prosa p + h4{margin-top:1.8em}
.prosa h3 + p,.prosa h4 + p{margin-top:.7em}
.prosa ul{margin-top:1em}
.prosa ul li{position:relative;padding-left:1.4rem;margin-top:.5em}
.prosa ul li::before{
  content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--c-marca);transform:rotate(45deg);
}
.prosa a{color:var(--c-acento);border-bottom:1px solid var(--c-linea)}
.prosa a:hover{border-bottom-color:currentColor}
.capitular::first-letter{
  float:left;font-family:var(--display);font-weight:400;
  font-size:4.4em;line-height:.78;color:var(--c-marca);
  padding:.06em .12em 0 0;
}
@media (min-width:900px){.capitular{text-align:justify;hyphens:auto}}

/* microetiqueta: Modena en versalitas tracked (único uso de Modena en texto) */
.etiqueta{
  display:block;font-family:var(--marca);font-size:var(--txt-xs);
  letter-spacing:.24em;text-transform:uppercase;line-height:1.5;
  color:var(--c-marca);
}
.etiqueta--gris{color:var(--c-suave)}
.rombo{display:inline-block;width:6px;height:6px;flex:none;
  background:var(--verde-acento);transform:rotate(45deg);vertical-align:middle}
.rombo--linea{background:none;border:1px solid var(--verde-acento)}

/* contexto oscuro: voltea los tokens semánticos y todo el sistema le sigue */
.inverso{
  --c-fondo:var(--tinta);
  --c-texto:var(--gris-claro);
  --c-titulo:var(--blanco);
  --c-suave:#c4c4c4;
  --c-linea:rgba(255,255,255,.18);
  --c-linea-fuerte:rgba(255,255,255,.45);
  --c-marca:var(--menta);
  --c-acento:var(--menta);
  background:var(--c-fondo);
  color:var(--c-texto);
}
.inverso .rombo{background:var(--menta)}
.inverso .rombo--linea{background:none;border-color:var(--menta)}

/* 5 ─ SECCIONES ──────────────────────────────────────────────────────────── */
.seccion{padding-block:var(--aire-sec);background:var(--c-fondo)}
.seccion--ceñida{padding-block:clamp(2.25rem,4vw,3.5rem)}
.seccion--papel{--c-fondo:var(--verde-papel)}
.seccion--tinta{
  --c-fondo:var(--tinta);--c-texto:var(--gris-claro);--c-titulo:var(--blanco);
  --c-suave:#c4c4c4;--c-linea:rgba(255,255,255,.18);
  --c-linea-fuerte:rgba(255,255,255,.45);--c-marca:var(--menta);--c-acento:var(--menta);
  color:var(--c-texto);
}
/* verde en masa RACIONADO: como máximo dos bandas por página (hero + una) */
.seccion--verde{
  position:relative;isolation:isolate;overflow:hidden;
  --c-fondo:var(--verde-marca);--c-texto:var(--blanco-suave);--c-titulo:var(--blanco);
  --c-suave:var(--blanco-suave);--c-linea:var(--linea-inversa);
  --c-linea-fuerte:rgba(255,255,255,.5);--c-marca:var(--menta);--c-acento:var(--menta);
  color:var(--c-texto);
  background-image:linear-gradient(160deg,var(--verde-marca) 0%,var(--verde-tinta) 100%);
}
.seccion--tinta h1,.seccion--tinta h2,.seccion--tinta h3,.seccion--tinta h4,
.seccion--verde h1,.seccion--verde h2,.seccion--verde h3,.seccion--verde h4{color:var(--c-titulo)}
/* trama de rombos, sólo patrón CSS (sin imágenes) */
.trama::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:.14;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.6) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 1px,transparent 1px 72px);
  -webkit-mask-image:linear-gradient(150deg,transparent 8%,#000 70%);
  mask-image:linear-gradient(150deg,transparent 8%,#000 70%);
}

/* rótulo de sección: filete + número + título serif + nota lateral (3 columnas) */
.rotulo{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,26ch);
  gap:clamp(.75rem,3vw,3rem);align-items:start;
  padding-top:1.25rem;border-top:2px solid var(--c-marca);
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.rotulo__num{
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  color:var(--c-marca);padding-top:.75em;
}
.rotulo__titulo{
  font-family:var(--display);font-weight:400;font-size:var(--txt-2xl);
  line-height:1.05;letter-spacing:-.012em;color:var(--c-titulo);max-width:18ch;
}
.rotulo__nota{
  font-size:var(--txt-sm);line-height:1.6;color:var(--c-suave);padding-top:.9em;
}
@media (max-width:860px){
  .rotulo{grid-template-columns:3.25rem minmax(0,1fr);gap:.5rem 1rem}
  .rotulo__num{padding-top:.45em}
  .rotulo__nota{grid-column:1/-1;padding-top:.85rem;max-width:46ch}
}

/* portada de página interior (todas las páginas salvo la home) */
.portada{
  padding-block:clamp(2.75rem,5.5vw,5rem) clamp(2rem,4vw,3.5rem);
  border-bottom:1px solid var(--c-linea);background:var(--c-fondo);
}
.portada__titulo{
  margin-top:clamp(.9rem,1.8vw,1.5rem);
  font-size:var(--txt-3xl);line-height:1.04;max-width:16ch;text-wrap:balance;
}
.portada__entrada{
  margin-top:clamp(1.25rem,2.4vw,2rem);padding-top:1.15rem;
  border-top:1px solid var(--c-linea);
  font-size:var(--txt-md);line-height:1.55;color:var(--c-suave);max-width:46ch;
}
/* miga de pan */
.miga{display:flex;flex-wrap:wrap;gap:.5rem .75rem;font-family:var(--marca);
  font-size:var(--txt-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--c-suave)}
.miga a:hover{color:var(--c-acento)}
.miga li::after{content:'·';margin-left:.75rem;color:var(--verde-acento)}
.miga li:last-child::after{content:none}
.miga li{display:flex;align-items:center}

/* 6 ─ BOTONES Y ENLACES ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;line-height:1;
  padding:1.05rem 1.65rem;border:1px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn span[aria-hidden]{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover span[aria-hidden]{transform:translateX(5px)}
.btn--solido{background:var(--verde-marca);color:#fff}
.btn--solido:hover{background:var(--verde-tinta);color:#fff}
.btn--linea{border-color:var(--c-linea-fuerte);color:var(--c-acento)}
.btn--linea:hover{background:var(--verde-marca);color:#fff;border-color:var(--verde-marca)}
.btn--claro{background:#fff;color:var(--verde-marca)}
.btn--claro:hover{background:var(--menta);color:var(--verde-tinta)}
.inverso .btn--linea,.seccion--verde .btn--linea,.seccion--tinta .btn--linea{color:#fff}
.inverso .btn--linea:hover,.seccion--verde .btn--linea:hover,.seccion--tinta .btn--linea:hover{
  background:#fff;color:var(--verde-marca);border-color:#fff}

/* enlace-flecha: el CTA discreto del sistema */
.enlace{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-acento);
  padding-block:.25rem;border-bottom:1px solid currentColor;
}
.enlace span[aria-hidden]{display:inline-block;transition:transform .3s var(--ease)}
.enlace:hover span[aria-hidden]{transform:translateX(5px)}

/* 7 ─ BARRA DE UTILIDAD + CABECERA + NAV ─────────────────────────────────── */
.barra{background:var(--blanco);border-bottom:1px solid var(--gris-linea)}
.barra__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.6rem}
.ciudades{
  display:flex;flex-wrap:wrap;gap:.2rem 1.15rem;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris-lectura);
}
.ciudades li{display:flex;align-items:center;gap:.5rem}
.ciudades li::before{content:'';width:5px;height:5px;flex:none;background:var(--verde-acento);transform:rotate(45deg)}
.barra__dato{
  display:flex;align-items:center;gap:.75rem;white-space:nowrap;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris-lectura);
}
.barra__dato a:hover{color:var(--verde-marca)}
.barra__dato i{font-style:normal;color:var(--verde-marca)}
@media (max-width:900px){.ciudades{display:none}.barra__fila{justify-content:center}}
@media (max-width:460px){
  .barra__dato{font-size:.625rem;letter-spacing:.12em;gap:.35rem;
    flex-wrap:wrap;justify-content:center;white-space:normal;text-align:center}
  .barra__fila{padding-block:.4rem;min-height:0}
}

.cabecera{position:sticky;top:0;z-index:40;background:var(--blanco);border-bottom:1px solid var(--tinta)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-block:clamp(.85rem,1.6vw,1.2rem)}

/* logotipo: Modena, uno de sus tres usos permitidos */
.marca{display:inline-block;line-height:1}
.marca__nombre{
  display:block;font-family:var(--marca);
  font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--verde-marca);
}
.marca__nombre i{font-style:normal;color:var(--verde-acento)}
.marca__pie{
  display:block;margin-top:.45em;font-family:var(--marca);
  font-size:clamp(.55rem,.5rem + .2vw,.6875rem);
  letter-spacing:.6em;text-indent:.6em;text-transform:uppercase;color:var(--tinta-suave);
}
/* el logotipo sobre fondo oscuro: nombre en blanco, pie al 70 % y el punto
   central en menta.  Con --verde-acento el punto caía a 2.13:1 sobre el verde
   de marca (banda .seccion--verde) y prácticamente desaparecía; menta da 5.5:1
   sobre verde y 9:1 sobre tinta, y mantiene el acento de la identidad. */
.inverso .marca__nombre,.pie .marca__nombre,.hero .marca__nombre,
.seccion--verde .marca__nombre,.seccion--tinta .marca__nombre,
.panel .marca__nombre{color:var(--blanco)}
.inverso .marca__pie,.pie .marca__pie,.hero .marca__pie,
.seccion--verde .marca__pie,.seccion--tinta .marca__pie,
.panel .marca__pie{color:rgba(255,255,255,.7)}
.inverso .marca__nombre i,.pie .marca__nombre i,.hero .marca__nombre i,
.seccion--verde .marca__nombre i,.seccion--tinta .marca__nombre i,
.panel .marca__nombre i{color:var(--menta)}

.nav{display:flex;align-items:center;gap:0}
.nav > a,.nav__boton{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-suave);
  padding:.5rem clamp(.5rem,.85vw,1rem);white-space:nowrap;
  transition:color .25s ease;
}
.nav > a + a,.nav__grupo + a,.nav > a + .nav__grupo{box-shadow:-1px 0 0 var(--gris-linea)}
.nav > a::after,.nav__boton::after{
  content:'';position:absolute;left:clamp(.5rem,.85vw,1rem);right:clamp(.5rem,.85vw,1rem);
  bottom:.15rem;height:1px;background:var(--verde-marca);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav > a:hover,.nav__boton:hover{color:var(--verde-marca)}
.nav > a:hover::after,.nav__boton:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--verde-marca)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--verde-acento)}
.nav i{font-style:normal;color:var(--verde-marca)} /* el acento no llega a AA en 11px */

/* desplegable "servicios": 4 áreas + CEPT + LegalTech */
.nav__grupo{position:relative}
.nav__boton svg{width:8px;height:5px;transition:transform .3s var(--ease)}
.nav__grupo[data-abierto="true"] .nav__boton svg{transform:rotate(180deg)}
.nav__desplegable{
  position:absolute;top:calc(100% + .55rem);left:clamp(.5rem,.85vw,1rem);z-index:50;
  min-width:19rem;background:var(--blanco);
  border:1px solid var(--gris-linea);border-top:2px solid var(--verde-marca);
  padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav__grupo[data-abierto="true"] .nav__desplegable{opacity:1;visibility:visible;transform:none}
.nav__desplegable a{
  display:block;padding:.7rem clamp(1rem,1.4vw,1.4rem);
  font-family:var(--sans);font-size:var(--txt-sm);letter-spacing:.01em;
  text-transform:none;color:var(--tinta-suave);
  border-left:2px solid transparent;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.nav__desplegable a:hover,.nav__desplegable a[aria-current="page"]{
  background:var(--verde-niebla);color:var(--verde-marca);border-left-color:var(--verde-acento)}

.menu-boton{
  display:none;align-items:center;gap:.6rem;padding:.45rem 0;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta);
}
.menu-boton svg{width:22px;height:12px}
@media (max-width:1100px){
  .nav{display:none}
  .menu-boton{display:inline-flex}
}

/* panel móvil a pantalla completa */
.panel{
  position:fixed;inset:0;z-index:60;
  background:var(--verde-marca);
  background-image:linear-gradient(160deg,var(--verde-marca) 0%,var(--verde-tinta) 100%);
  color:var(--blanco);padding:var(--margen);
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  transform:translateY(-100%);visibility:hidden;overflow-y:auto;
  transition:transform .45s var(--ease),visibility 0s linear .45s;
}
.panel[data-abierto="true"]{transform:none;visibility:visible;
  transition:transform .45s var(--ease),visibility 0s}
.panel[hidden]{display:none}
.panel__cerrar{
  align-self:flex-end;color:var(--blanco);padding:.5rem 0;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;text-transform:uppercase;
}
.panel nav a{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.45rem,5.5vw,2.35rem);line-height:1.25;padding-block:.34rem;
  border-bottom:1px solid var(--linea-inversa);color:var(--blanco);
}
.panel nav a[aria-current="page"]{color:var(--menta)}
.panel .etiqueta{color:var(--menta);margin:1.6rem 0 .4rem}
.panel nav .panel__sub a{font-size:clamp(1.05rem,4vw,1.4rem);color:var(--blanco-suave)}
.panel__pie{display:grid;gap:.3rem;font-size:var(--txt-sm);color:var(--blanco-suave)}
.panel__pie a{border-bottom:1px solid var(--linea-inversa)}

/* 8 ─ HERO (home y landings) ─────────────────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:var(--blanco-suave);
  --c-texto:var(--blanco-suave);--c-titulo:var(--blanco);--c-suave:var(--blanco-suave);
  --c-linea:var(--linea-inversa);--c-linea-fuerte:rgba(255,255,255,.5);
  --c-marca:var(--menta);--c-acento:var(--menta);
  background-image:
    radial-gradient(115% 90% at 88% 6%,rgba(0,137,114,.5) 0%,rgba(0,137,114,0) 58%),
    linear-gradient(158deg,var(--verde-marca) 0%,var(--verde-marca) 38%,var(--verde-tinta) 100%);
}
.hero__fila{position:relative;padding-block:clamp(3rem,7vw,6.5rem) clamp(2rem,4vw,3.25rem)}
.hero .etiqueta{color:var(--menta);letter-spacing:.2em;max-width:62ch}
.hero h1{
  margin-top:clamp(1.35rem,2.4vw,2.25rem);
  font-size:var(--txt-3xl);line-height:1.07;letter-spacing:-.014em;
  color:var(--blanco);max-width:19ch;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--menta)}
.hero__pie{
  margin-top:clamp(1.6rem,3vw,2.6rem);padding-top:1.15rem;
  border-top:1px solid var(--linea-inversa);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.25rem;max-width:54ch;
}
.hero__pie p{color:var(--blanco-suave);font-size:var(--txt-sm);max-width:34ch}
.hero .enlace{color:var(--menta)}
.hero__geo{position:absolute;z-index:-1;pointer-events:none}

/* cifras / credenciales con peso visual */
.cifras{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--c-linea);
}
.cifra{
  padding:1.5rem clamp(.75rem,1.6vw,1.75rem) clamp(1.75rem,3.5vw,3rem);
  border-left:1px solid var(--c-linea);
}
.cifra:first-child{border-left:0;padding-left:0}
.cifra b{
  display:block;font-family:var(--marca);font-weight:400;color:var(--c-titulo);
  font-size:clamp(2.4rem,1.2rem + 4.4vw,4.35rem);line-height:.92;letter-spacing:.01em;
}
.cifra span{
  display:block;margin-top:.7rem;font-family:var(--marca);font-size:var(--txt-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--c-marca);
}
@media (max-width:620px){
  .cifras{grid-template-columns:1fr}
  .cifra{border-left:0;border-top:1px solid var(--c-linea);padding:1.1rem 0}
  .cifra:first-child{border-top:0}
}

/* 9 ─ CINTA (tira estrecha de enlaces / recorrido) ───────────────────────── */
.cinta{background:var(--tinta);color:var(--gris-claro)}
.cinta__fila{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.75rem;padding-block:1rem;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.18em;text-transform:uppercase;
}
.cinta strong{color:var(--menta);font-weight:400}
.cinta .rombo{width:4px;height:4px;background:var(--verde-acento)}
.cinta a{border-bottom:1px solid transparent;padding-bottom:.15rem}
.cinta a:hover{color:#fff;border-bottom-color:var(--menta)}
@media (max-width:620px){.cinta__fila{gap:.5rem 1rem;font-size:.625rem;letter-spacing:.12em}}

/* 10 ─ ÁREAS DE PRÁCTICA (retícula 2×2, verde que sube, rombo que gira) ──── */
.areas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--c-linea);border-left:1px solid var(--c-linea);
}
.area{
  position:relative;isolation:isolate;overflow:hidden;
  border-right:1px solid var(--c-linea);border-bottom:1px solid var(--c-linea);
  padding:clamp(1.6rem,3vw,2.9rem);
  display:flex;flex-direction:column;gap:1.05rem;
  min-height:clamp(17rem,24vw,22rem);color:var(--c-texto);
  transition:color var(--dur) var(--ease);
}
.area::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--verde-marca);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur) var(--ease);
}
.area__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.area__num{font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  color:var(--c-marca);transition:color var(--dur) var(--ease)}
.area__mark{width:14px;height:14px;border:2px solid var(--verde-acento);transform:rotate(45deg);
  transition:transform .6s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.area__titulo{
  font-family:var(--display);font-weight:400;font-size:var(--txt-xl);
  line-height:1.06;letter-spacing:-.012em;color:var(--c-titulo);max-width:13ch;
  transition:color var(--dur) var(--ease);
}
.area__texto{font-size:var(--txt-sm);line-height:1.65;color:var(--c-suave);max-width:44ch;
  transition:color var(--dur) var(--ease)}
.area__tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;padding-top:1.1rem;
  border-top:1px solid var(--c-linea);transition:border-color var(--dur) var(--ease)}
.area__tags li{
  font-family:var(--marca);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-suave);border:1px solid var(--c-linea);padding:.4rem .6rem;line-height:1;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.area__ir{
  display:inline-flex;align-items:center;gap:.65rem;font-family:var(--marca);
  font-size:var(--txt-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--c-acento);
  transition:color var(--dur) var(--ease);
}
.area__ir span{display:inline-block;transition:transform var(--dur) var(--ease)}
.area:hover,.area:focus-visible{color:#fff}
.area:hover::before,.area:focus-visible::before{transform:scaleY(1)}
.area:hover .area__titulo,.area:focus-visible .area__titulo{color:#fff}
.area:hover .area__texto,.area:focus-visible .area__texto{color:var(--blanco-suave)}
.area:hover .area__num,.area:focus-visible .area__num,
.area:hover .area__ir,.area:focus-visible .area__ir{color:var(--menta)}
.area:hover .area__mark,.area:focus-visible .area__mark{transform:rotate(135deg);background:var(--menta);border-color:var(--menta)}
.area:hover .area__tags,.area:focus-visible .area__tags{border-top-color:rgba(255,255,255,.28)}
.area:hover .area__tags li,.area:focus-visible .area__tags li{color:#fff;border-color:rgba(255,255,255,.34)}
.area:hover .area__ir span,.area:focus-visible .area__ir span{transform:translateX(5px)}
@media (max-width:860px){
  .areas{grid-template-columns:1fr}
  .area{min-height:0;padding-inline:0;border-right:0;padding-block:1.75rem 2rem}
  .areas{border-left:0}
}
/* áreas complementarias en línea */
.areas-mas{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;align-items:baseline;
  margin-top:clamp(1.5rem,3vw,2.5rem)}
.areas-mas li{display:flex;align-items:center;gap:.7rem;font-size:var(--txt-sm);color:var(--c-texto)}
.areas-mas li::before{content:'';width:6px;height:6px;flex:none;border:1px solid var(--verde-acento);transform:rotate(45deg)}
.areas-mas a:hover{color:var(--c-acento)}

/* 11 ─ FASES (método de trabajo, 5 columnas con filetes) ─────────────────── */
.fases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--c-linea-fuerte)}
.fase{position:relative;border-left:1px solid var(--c-linea);
  padding:clamp(1.4rem,2.4vw,2.15rem) clamp(.9rem,1.6vw,1.7rem) clamp(1.6rem,3vw,2.6rem)}
.fase:first-child{border-left:0;padding-left:0}
.fase::before{content:'';position:absolute;top:-5px;left:-5px;width:9px;height:9px;
  background:var(--c-marca);transform:rotate(45deg)}
.fase:first-child::before{left:0}
.fase__num{font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.18em;color:var(--c-marca)}
.fase__nombre{margin-top:.7rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.2rem,.9rem + .85vw,1.8rem);line-height:1.1;color:var(--c-titulo)}
.fase__linea{margin-top:.9rem;font-size:var(--txt-sm);line-height:1.6;color:var(--c-suave)}
@media (max-width:900px){
  .fases{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fase{border-left:1px solid var(--c-linea);border-top:1px solid var(--c-linea);padding-left:clamp(.9rem,1.6vw,1.7rem)}
  .fase:nth-child(odd){border-left:0;padding-left:0}
  .fase:nth-child(-n+2){border-top:0}
  .fase:nth-child(odd)::before{left:0}
}
@media (max-width:520px){
  .fases{grid-template-columns:1fr}
  .fase{border-left:0;padding-left:0;border-top:1px solid var(--c-linea)}
  .fase:first-child{border-top:0}
  .fase::before{left:0}
}

/* 12 ─ LISTA NUMERADA CON FILETES (propósitos, requisitos, pasos) ────────── */
.lista-num{counter-reset:ln;border-top:1px solid var(--c-linea);margin-top:1.5rem}
.lista-num li{
  counter-increment:ln;display:grid;grid-template-columns:2.75rem minmax(0,1fr);
  gap:1rem;padding-block:1rem;border-bottom:1px solid var(--c-linea);
  font-size:var(--txt-sm);line-height:1.65;color:var(--c-texto);
}
.lista-num li::before{
  content:counter(ln,decimal-leading-zero);font-family:var(--marca);
  font-size:var(--txt-xs);letter-spacing:.14em;color:var(--c-marca);padding-top:.3em;
}

/* 13 ─ PUBLICACIONES ─────────────────────────────────────────────────────── */
/* .notas: tres tarjetas alineadas con subgrid (meta, título, entradilla, CTA) */
.notas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-linea-fuerte)}
.nota{
  position:relative;display:flex;flex-direction:column;gap:1rem;
  border-left:1px solid var(--c-linea);
  padding:clamp(1.4rem,2.4vw,2.15rem) clamp(1rem,1.8vw,2rem) clamp(1.75rem,3vw,2.6rem);
  transition:background .35s var(--ease);
}
.nota:first-child{border-left:0;padding-left:0}
.nota::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--verde-acento);transition:width .5s var(--ease)}
.nota:hover::before{width:100%}
.nota:hover{background:var(--verde-niebla)}
.inverso .nota:hover,.seccion--tinta .nota:hover,.seccion--verde .nota:hover{background:rgba(255,255,255,.05)}
.nota__meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;
  font-family:var(--marca);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-marca)}
.nota__meta .rombo{width:4px;height:4px}
.nota__meta time{color:var(--c-suave)}
.nota__titulo{font-family:var(--display);font-weight:400;font-size:var(--txt-lg);
  line-height:1.18;letter-spacing:-.005em;color:var(--c-titulo);transition:color .3s ease}
.nota:hover .nota__titulo{color:var(--c-acento)}
.nota__extracto{font-size:var(--txt-sm);line-height:1.65;color:var(--c-suave)}
.nota__ir{margin-top:auto;padding-top:1.15rem;border-top:1px solid var(--c-linea);
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--c-acento)}
.nota__ir span{display:inline-block;transition:transform .3s var(--ease)}
.nota:hover .nota__ir span{transform:translateX(5px)}
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .notas{grid-template-rows:auto auto 1fr auto}
    .nota{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:1rem}
    .nota__ir{align-self:end}
  }
}
@media (max-width:900px){
  .notas{grid-template-columns:1fr}
  .nota{border-left:0;padding-inline:0;border-top:1px solid var(--c-linea)}
  .nota:first-child{border-top:0}
}
/* índice de publicaciones: filas con filete (listado del blog) */
.indice-notas{border-top:1px solid var(--c-linea-fuerte)}
.indice-notas li{border-bottom:1px solid var(--c-linea)}
.indice-notas a{
  display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:1rem clamp(1rem,2.5vw,2.5rem);
  align-items:baseline;padding-block:1.15rem;transition:background .3s ease,padding .3s var(--ease);
}
.indice-notas a:hover{background:var(--verde-niebla);padding-inline:.75rem}
.indice-notas time{font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.14em;color:var(--c-marca)}
.indice-notas .titulo{font-family:var(--display);font-size:var(--txt-lg);line-height:1.2;color:var(--c-titulo)}
.indice-notas .ir{font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-acento);white-space:nowrap}
@media (max-width:760px){
  .indice-notas a{grid-template-columns:1fr;gap:.4rem;padding-block:1.1rem}
  .indice-notas .ir{display:none}
}

/* 14 ─ CITA / DESTACADO ──────────────────────────────────────────────────── */
.cita{
  margin-top:clamp(2rem,4vw,3.25rem);padding-top:1.5rem;border-top:2px solid var(--c-marca);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
}
.cita q{
  quotes:none;font-family:var(--display);font-weight:400;
  font-size:clamp(1.35rem,1rem + 1.6vw,2.35rem);line-height:1.2;
  letter-spacing:-.01em;color:var(--c-titulo);max-width:24ch;
}
.cita q em{font-style:italic;color:var(--c-marca)}
@media (max-width:760px){.cita{grid-template-columns:1fr}.cita svg{display:none}}
.destacado{
  border-left:2px solid var(--verde-acento);padding:.35rem 0 .35rem 1.35rem;
  font-family:var(--display);font-size:var(--txt-md);font-style:italic;line-height:1.45;
  color:var(--c-marca);max-width:30ch;
}

/* 15 ─ DATOS (dl de contacto / ficha técnica) ────────────────────────────── */
.datos{border-top:1px solid var(--c-linea-fuerte)}
.datos > div{
  display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;
  padding-block:.85rem;border-bottom:1px solid var(--c-linea);font-size:var(--txt-sm);
}
.datos dt{font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-suave);padding-top:.25em}
.datos dd{margin:0;color:var(--c-texto);line-height:1.6}
.datos a{border-bottom:1px solid var(--c-linea)}
.datos a:hover{color:var(--c-acento);border-bottom-color:currentColor}
@media (max-width:420px){.datos > div{grid-template-columns:1fr;gap:.25rem}}

/* 16 ─ PERSONAS (equipo, sin fotografía: monograma tipográfico) ──────────── */
.personas{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  border-top:1px solid var(--c-linea);border-left:1px solid var(--c-linea)}
.persona{
  display:flex;flex-direction:column;gap:.65rem;
  padding:clamp(1.35rem,2.2vw,2rem);
  border-right:1px solid var(--c-linea);border-bottom:1px solid var(--c-linea);
  transition:background .35s var(--ease);
}
.persona:hover{background:var(--verde-niebla)}
.persona__monograma{
  width:3.75rem;height:3.75rem;display:grid;place-items:center;margin-bottom:.5rem;
  border:1px solid var(--c-linea);color:var(--c-marca);
  font-family:var(--marca);font-size:.9375rem;letter-spacing:.12em;
  background:
    linear-gradient(135deg,transparent calc(50% - .5px),var(--gris-linea) 50%,transparent calc(50% + .5px));
}
.persona__nombre{font-family:var(--display);font-size:var(--txt-lg);line-height:1.15;color:var(--c-titulo)}
.persona__cargo{font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-marca)}
.persona__correo{font-size:var(--txt-sm);color:var(--c-suave);
  border-bottom:1px solid var(--c-linea);align-self:flex-start;overflow-wrap:anywhere}
.persona__correo:hover{color:var(--c-acento)}

/* 17 ─ FORMULARIOS ──────────────────────────────────────────────────────── */
.campos{display:grid;gap:1.35rem;max-width:34rem}
.campo{display:grid;gap:.4rem}
.campo label{font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-suave)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:var(--txt-sm);color:var(--c-titulo);
  background:var(--blanco);border:1px solid var(--gris-linea);border-radius:0;
  padding:.85rem 1rem;width:100%;transition:border-color .25s ease;
}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--verde-acento)}
.campo textarea{min-height:8rem;resize:vertical}
.campo--nota{font-size:var(--txt-sm);color:var(--c-suave)}

/* 18 ─ PIE ──────────────────────────────────────────────────────────────── */
.pie{
  --c-fondo:var(--tinta);--c-texto:var(--gris-claro);--c-titulo:var(--blanco);
  --c-suave:#c4c4c4;--c-linea:rgba(255,255,255,.18);--c-marca:var(--menta);--c-acento:var(--menta);
  background:var(--tinta);color:var(--gris-claro);
  padding-block:clamp(2.75rem,5vw,4.5rem) 1.5rem;
}
.pie__fila{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,3vw,3rem);
}
.pie__direccion{margin-top:1.5rem;font-size:var(--txt-sm);line-height:1.7;max-width:26ch;color:var(--gris-claro);font-style:normal}
.pie__contacto{margin-top:1rem;display:grid;gap:.35rem;font-size:var(--txt-sm)}
.pie__contacto a{color:#fff;border-bottom:1px solid var(--linea-inversa);justify-self:start}
.pie__contacto a:hover{border-color:#fff}
.pie h2{color:#fff}
/* rótulo de columna del pie.  Va en <h3> (no <h4>): el último encabezado del
   documento antes del pie es un <h2>, así que un <h4> abría un salto de nivel
   en la jerarquía.  El aspecto no cambia: microetiqueta Modena en versalitas. */
.pie h3,.pie h4{
  font-family:var(--marca);font-weight:400;font-size:var(--txt-xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--menta);
  padding-bottom:.75rem;border-bottom:1px solid var(--linea-inversa);margin-bottom:.9rem;
}
.pie li{padding-block:.3rem}
.pie li a{font-size:var(--txt-sm);border-bottom:1px solid transparent}
.pie li a:hover{color:#fff;border-bottom-color:var(--linea-inversa)}
.pie li a[aria-current="page"]{color:var(--menta)}
.pie__ciudades{
  margin-top:clamp(2.25rem,4.5vw,3.75rem);padding-top:1.25rem;
  border-top:1px solid var(--linea-inversa);
  display:flex;flex-wrap:wrap;gap:.55rem 1.75rem;
  font-family:var(--marca);font-size:var(--txt-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gris-claro);
}
.pie__ciudades li{display:flex;align-items:center;gap:.5rem;padding:0}
.pie__ciudades li::before{content:'';width:4px;height:4px;flex:none;background:var(--verde-acento);transform:rotate(45deg)}
.pie__legal{
  margin-top:1.35rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
  font-size:.75rem;color:#bdbdbd;
}
@media (max-width:900px){.pie__fila{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pie__fila{grid-template-columns:1fr}}

/* 19 ─ REVELADO SUAVE (opcional; requiere el script de index.html) ───────── */
.revelar{opacity:0;transform:translateY(12px)}
.revelar.visible{opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s var(--ease)}

/* 20 ─ MOVIMIENTO REDUCIDO ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .revelar{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   21 ─ SISTEMA GRÁFICO  ·  añadido 2026
   --------------------------------------------------------------------------
   Bloque AÑADIDO: no toca ninguna regla anterior. Sólo suma tokens --g-* y
   clases con prefijo .g-.

   El sitio no tiene ni tendrá fotografía. Toda la gráfica se dibuja en SVG
   inline y sale SIEMPRE del mismo vocabulario de marca: el rombo del
   logotipo, la retícula a 45°, los arcos concéntricos de 360° del hero, los
   filetes y los numerales Modena. Una pieza que no se pueda construir con
   eso, no pertenece al sistema.

   ── REGLA DE DOSIS (dura) ─────────────────────────────────────────────────
   Máximo 3 piezas por página CONTANDO las que ya existen (SVG del hero,
   geometría de portada, figura del laboratorio). Un juego de iconos dentro de
   una misma retícula cuenta como UNA pieza. .g-separador y el ornamento de
   .cita no cuentan como pieza, pero no más de dos separadores por página.
   La gráfica acompaña al titular serif; nunca compite con él.

   ── PIEZAS ────────────────────────────────────────────────────────────────
   .g-simbolos   contenedor oculto de los <symbol>; se pega UNA vez por página
   .g-icono      glifo de área de práctica (8 ids), caja 48×48
   .g-portada    composición de cabecera de página interior, caja 600×600
   .g-agua       marca de agua de sección / figura de cierre, caja 400×400
   .g-separador  filete con rombo central, respiro entre bloques de texto
   .g-anfitrion  utilidad: prepara la sección que aloja .g-portada o .g-agua
   .g-gira       deriva opcional lentísima; por defecto NO se usa

   ── COLOR ─────────────────────────────────────────────────────────────────
   Dentro de un <symbol> instanciado con <use> las reglas CSS no entran (vive
   en un shadow tree): sólo heredan `color` y las custom properties. Por eso
   el trazo estructural se dibuja en currentColor y los dos acentos en
   var(--g-acento) y var(--g-solido). Los tres tokens se voltean solos en
   .inverso, .hero, .seccion--verde, .seccion--tinta, .pie y .panel, igual
   que los --c-*, así que la misma pieza sirve sobre blanco y sobre verde.
   ═══════════════════════════════════════════════════════════════════════ */

/* 21.1 ─ tokens gráficos ─────────────────────────────────────────────────── */
:root{
  --g-acento:var(--verde-acento);   /* filete fino y rombo pequeño */
  --g-solido:var(--verde-marca);    /* arco grueso y núcleo macizo */
  --g-traza:var(--gris-claro);      /* estructura: círculos, ejes, retícula */
}
.inverso,.hero,.seccion--verde,.seccion--tinta,.pie,.panel,.cinta{
  --g-acento:var(--menta);
  --g-solido:var(--verde-acento);
  --g-traza:var(--linea-inversa);
}

/* 21.2 ─ hoja de símbolos ────────────────────────────────────────────────── */
/* Nunca display:none: rompe <use> en Safari. Se oculta por tamaño cero. */
.g-simbolos{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* 21.3 ─ ICONOS DE ÁREA DE PRÁCTICA ──────────────────────────────────────────
   <svg class="g-icono" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
     <use href="#g-ico-tributario"></use></svg>
   La estructura hereda el color del texto del contenedor: dentro de una .area
   que se pone verde al hover, el icono se vuelve blanco solo.               */
.g-icono{
  display:block;flex:none;
  width:var(--g-tam,2.75rem);height:var(--g-tam,2.75rem);
  overflow:visible;
}
.g-icono--sm{--g-tam:1.75rem}
.g-icono--lg{--g-tam:clamp(3rem,5.5vw,4.25rem)}
/* la ficha .area vira a verde en hover: el acento pasa a menta con ella */
.area:hover,.area:focus-visible{--g-acento:var(--menta)}
/* si el icono acompaña a un titular en línea */
.g-titulo-ico{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.5rem)}

/* 21.4 ─ ANFITRIÓN de piezas de fondo ────────────────────────────────────── */
.g-anfitrion{position:relative;isolation:isolate;overflow:hidden}

/* 21.5 ─ CABECERA GRÁFICA DE PÁGINA INTERIOR ─────────────────────────────────
   <section class="portada g-anfitrion"> … <svg class="g-portada" …>
   Cuatro variantes (#g-portada-estratos, -orbita, -reticula, -cuadrantes)
   para que no todas las secciones lleven la misma cabecera.                 */
.g-portada{
  position:absolute;z-index:-1;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%);
  width:min(46vw,460px);height:auto;
  color:var(--g-traza);opacity:.95;
}
@media (max-width:1080px){
  .g-portada{width:min(80vw,420px);right:-24%;top:auto;bottom:-22%;transform:none;opacity:.55}
}
@media (max-width:640px){
  /* en móvil la pieza se retira a la esquina y baja a susurro: la portada es
     texto y el texto manda. Nunca por encima de .22 de opacidad aquí. */
  .g-portada{width:min(66vw,280px);right:-24%;bottom:-16%;opacity:.22}
}

/* 21.6 ─ MARCA DE AGUA / FIGURA DE CIERRE ────────────────────────────────────
   Respiro para bloques largos y remate de la banda de contacto. Siempre
   detrás del texto y fuera de la medida de lectura; en móvil desaparece:
   a 390 px el texto necesita todo el ancho.                                 */
.g-agua{
  position:absolute;z-index:-1;pointer-events:none;
  right:-7%;top:50%;transform:translateY(-50%);
  width:min(34vw,360px);height:auto;
  color:var(--g-traza);opacity:.9;
}
.g-agua--izq{right:auto;left:-9%}
.g-agua--baja{top:auto;bottom:-14%;transform:none}
@media (max-width:1080px){
  .g-agua{width:min(52vw,320px);right:-16%;opacity:.6}
  .g-agua--izq{right:auto;left:-18%}
}
@media (max-width:760px){.g-agua{display:none}}

/* 21.7 ─ SEPARADOR DE SECCIÓN ────────────────────────────────────────────────
   <div class="g-separador" aria-hidden="true">
     <svg viewBox="0 0 64 64"><use href="#g-marca-rosa"></use></svg></div>   */
.g-separador{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.25rem);
  margin-block:clamp(2rem,4.5vw,3.25rem);
  color:var(--c-linea);
}
.g-separador::before,.g-separador::after{
  content:'';flex:1 1 0;height:1px;background:currentColor;
}
.g-separador > svg{
  flex:none;width:clamp(2.25rem,4.5vw,3rem);height:auto;
  color:var(--c-suave);
}
.g-separador--centro{max-width:34rem;margin-inline:auto}

/* 21.8 ─ MOVIMIENTO (opcional, apagado por defecto) ─────────────────────────
   Deriva de 300 s: casi imperceptible, sólo para piezas de fondo radiales.
   No se aplica en ninguna de las páginas del sitio salvo indicación expresa. */
@media (prefers-reduced-motion:no-preference){
  @keyframes g-deriva{to{transform:rotate(360deg)}}
  .g-gira{animation:g-deriva 300s linear infinite;transform-origin:50% 50%}
  .g-agua.g-gira{transform:none;top:50%;margin-top:-17vw}
}
