/* ══════════════════════════════════════════════════════════════════
   PACHECO & APARICIO · la página pública del despacho (02/10/2026)
   ══════════════════════════════════════════════════════════════════
   La misma piel que la entrada del equipo y el portal de clientes:
   navy de fondo fuerte, marfil y papel claro para leer, grafito para el
   texto y champagne SÓLO de acento (filetes, el anillo del sello, el «&»
   grande sobre navy). Sobre fondo claro el champagne nunca va en texto
   chico (da 1.97:1 en blanco): ahí el dorado legible es
   --champagne-oscuro (6.2:1 en blanco, 4.97:1 en marfil).

   Todo es de casa: esta hoja y la letra se sirven desde /static (la
   política de seguridad del servidor sólo admite lo propio; el enlace a
   Google Fonts que tenía la página se bloqueaba en silencio y la página
   salía en Georgia). Sin estilos en línea en el HTML.

   Contrastes medidos (texto chico pide 4.5:1):
     sobre navy   blanco 16.5 · marfil 13.2 · --sobre-navy-2 9.8 ·
                  --sobre-navy-3 7.9 · champagne 8.4
     sobre claro  --grafito-500 6.4 blanco / 5.8 papel / 5.1 marfil
   ══════════════════════════════════════════════════════════════════ */

/* ── Letra: Montserrat variable (300–700) e itálica 400 ─────────────── */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/static/fuentes/montserrat-latin-ext-var.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/static/fuentes/montserrat-latin-var.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;
  src:url(/static/fuentes/montserrat-latin-ext-italic.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:400;font-display:swap;
  src:url(/static/fuentes/montserrat-latin-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --navy:#0B1F3B;
  --navy-700:#1B3A66;          /* la acción en claro: 11.4:1 con blanco */
  --navy-50:#ECEFF4;
  --champagne:#D4B483;
  --champagne-oscuro:#7A5C26;  /* «dorado» legible sobre claro */
  --marfil:#EAE6D9;
  --papel:#F6F4EF;
  --papel-25:#FAF9F6;
  --blanco:#FFFFFF;
  --grafito:#1F2937;
  --grafito-700:#3D4656;
  --grafito-500:#566070;
  --borde:#E4E0D6;
  --borde-suave:#EEEBE4;
  --borde-control:#7C8190;     /* límite de un botón de línea: 3.9:1 */
  --sobre-navy:#EAE6D9;
  --sobre-navy-2:#C9C8C1;
  --sobre-navy-3:#B2B4B2;
  --linea-navy:#22375A;
  --fuente:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ancho:1200px;
  --margen:clamp(20px,5vw,48px);
  --cab-alto:72px;
  --radio:12px;
  --radio-chico:8px;
  --sombra:0 1px 2px rgba(11,31,59,.04),0 8px 24px rgba(11,31,59,.06);
  --sombra-alta:0 1px 2px rgba(0,0,0,.10),0 28px 56px -16px rgba(0,0,0,.45);
}

/* ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papel);color:var(--grafito);font-family:var(--fuente);
  font-size:16px;line-height:1.6;font-kerning:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,ol{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--navy-700);color:#fff}
/* El foco se ve siempre: navy sobre claro; champagne sobre navy (8.4:1). */
:focus-visible{outline:2px solid var(--navy-700);outline-offset:3px}
.cab :focus-visible,.portada-marca :focus-visible,.pie :focus-visible,.saltar:focus-visible{outline-color:var(--champagne)}
/* El ancla queda debajo de la cabecera fija, no tapada por ella. */
[id]{scroll-margin-top:calc(var(--cab-alto) + 16px)}

.contenedor{width:100%;max-width:calc(var(--ancho) + 2 * var(--margen));margin-inline:auto;padding-inline:var(--margen)}
.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Para quien llega con teclado: brincar la cabecera. */
.saltar{position:absolute;left:12px;top:-120px;z-index:100;padding:12px 18px;border-radius:var(--radio-chico);
  background:var(--blanco);color:var(--navy);font-size:14px;font-weight:600;box-shadow:var(--sombra)}
.saltar:focus{top:12px}

/* ── El sello: el monograma del despacho sobre su disco blanco ─────── */
.sello{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--blanco)}
.sello img{width:100%;height:auto}
.sello-chico{width:40px;height:40px;padding:3px}
/* El anillo champagne es un filete: va a 8 px del disco, sobre el navy. */
.sello-grande{width:88px;height:88px;padding:5px;box-shadow:0 0 0 9px var(--navy),0 0 0 10px var(--champagne)}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
  border:1px solid transparent;border-radius:var(--radio-chico);font:inherit;font-size:15px;font-weight:600;
  line-height:1.2;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.btn svg{flex:none}
.btn-navy{background:var(--navy-700);border-color:var(--navy-700);color:#fff}
.btn-linea{background:var(--blanco);border-color:var(--borde-control);color:var(--navy)}
.btn-claro{background:var(--sobre-navy);border-color:var(--sobre-navy);color:var(--navy)}
@media (hover:hover){
  .btn-navy:hover{background:var(--navy);border-color:var(--navy)}
  .btn-linea:hover{background:var(--navy-50);border-color:var(--navy)}
  .btn-claro:hover{background:var(--blanco);border-color:var(--blanco)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .flecha{transition:transform .2s ease}
  .btn:hover .flecha{transform:translateX(3px)}
}
.btn:active{filter:brightness(.94)}

/* ── Cabecera (navy, fija) ─────────────────────────────────────────── */
.cab{position:sticky;top:0;z-index:40;background:var(--navy);color:var(--sobre-navy);border-bottom:1px solid var(--linea-navy)}
.cab-fila{min-height:var(--cab-alto);display:flex;align-items:center;justify-content:space-between;gap:16px}
.cab-marca{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:44px;min-height:44px;
  border-radius:6px;color:var(--sobre-navy)}
.cab-nombre{font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.cab-nav{display:flex;align-items:center;gap:clamp(4px,1.6vw,20px)}
.cab-enlace{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:6px;
  font-size:14px;font-weight:500;color:var(--sobre-navy-2);transition:color .15s ease}
@media (hover:hover){.cab-enlace:hover{color:var(--blanco)}}
.btn-cab{min-height:44px;padding:0 18px;font-size:14px}

/* ── Portada ────────────────────────────────────────────────────────── */
.portada{background:var(--navy);color:var(--sobre-navy);padding-block:clamp(56px,8vw,112px) clamp(64px,9vw,128px)}
.portada-rejilla{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(48px,7vw,112px);align-items:center}
.portada-marca .sello{margin:10px 0 0 10px}
.portada-nombre{margin-top:44px;font-size:clamp(44px,2rem + 3.4vw,80px);font-weight:600;line-height:1.02;
  letter-spacing:-.025em;color:var(--blanco)}
.portada-nombre>span{display:block}
.amp{font-weight:300;color:var(--champagne)}
.portada-descriptor{margin-top:24px;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--champagne)}
.filete{display:block;width:56px;height:1px;margin:32px 0;background:var(--champagne)}
.portada-lema{max-width:33em;font-size:clamp(16px,.85rem + .35vw,18px);line-height:1.75;color:var(--sobre-navy-2);text-wrap:pretty}

/* Los dos accesos: una tarjeta blanca sobre el navy. */
.accesos{background:var(--blanco);color:var(--grafito);border-radius:var(--radio);box-shadow:var(--sombra-alta);overflow:hidden}
.acceso{padding:clamp(24px,3vw,36px)}
.acceso+.acceso{border-top:1px solid var(--borde)}
.acceso-titulo{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--navy)}
.acceso-texto{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--grafito-500);text-wrap:pretty}
.acceso .btn{width:100%;margin-top:20px}
.accesos-nota{display:flex;align-items:flex-start;gap:12px;padding:18px clamp(24px,3vw,36px);
  background:var(--papel-25);border-top:1px solid var(--borde-suave);font-size:13px;line-height:1.55;color:var(--grafito-500)}
.accesos-nota svg{flex:none;margin-top:1px;color:var(--champagne-oscuro)}

/* ── Secciones de lectura ──────────────────────────────────────────── */
.seccion{padding-block:clamp(72px,10vw,136px)}
.seccion-blanca{background:var(--blanco)}
.seccion-papel{background:var(--papel)}
.seccion-marfil{background:var(--marfil)}
.ceja{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne-oscuro)}
.titulo-2{margin-top:16px;font-size:clamp(30px,1.2rem + 2vw,46px);font-weight:600;line-height:1.12;
  letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
.parrafo{margin-top:20px;max-width:34em;font-size:17px;line-height:1.75;color:var(--grafito-700);text-wrap:pretty}
.rejilla-2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:start}

/* Áreas de práctica: un índice con filete; el tramo champagne marca cada entrada. */
.practica{list-style:none;padding:0;border-bottom:1px solid var(--borde)}
.practica li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;
  padding:32px 0 34px;border-top:1px solid var(--borde)}
.practica li::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:1px;background:var(--champagne)}
.practica-num{padding-top:3px;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--champagne-oscuro);
  font-variant-numeric:tabular-nums}
.practica h3{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--navy)}
.practica p{grid-column:2;margin-top:8px;max-width:36em;font-size:15.5px;line-height:1.7;color:var(--grafito-500);text-wrap:pretty}

/* El titular. */
.rejilla-titular{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,112px);align-items:center}
.cita{margin-top:32px;padding-left:20px;border-left:2px solid var(--champagne);font-size:18px;font-style:italic;
  line-height:1.6;color:var(--navy)}
.titular-logo{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:clamp(24px,4vw,44px);box-shadow:var(--sombra)}
.titular-logo img{width:100%;height:auto}

/* Contacto. */
.rejilla-contacto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,7vw,112px);align-items:end}
.contacto-acciones{display:flex;flex-direction:column;gap:12px}
.btn-grande{min-height:56px;font-size:16px}
.horario{margin-top:6px;font-size:14px;line-height:1.5;color:var(--grafito-500);text-align:center}

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie{background:var(--navy);color:var(--sobre-navy-2);padding-block:40px}
.pie-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.pie-marca{display:flex;align-items:center;gap:14px}
.pie-marca p{font-size:13px;line-height:1.65;color:var(--sobre-navy-3)}
.pie-nav{display:flex;flex-wrap:wrap;gap:0 28px}
.pie-nav a{display:inline-flex;align-items:center;min-height:44px;border-radius:4px;font-size:14px;font-weight:600;
  color:var(--sobre-navy);transition:color .15s ease}
@media (hover:hover){.pie-nav a:hover{color:var(--champagne)}}

/* ── Tableta y teléfono ────────────────────────────────────────────── */
@media (max-width:960px){
  .portada-rejilla,.rejilla-2,.rejilla-titular,.rejilla-contacto{grid-template-columns:minmax(0,1fr)}
  .accesos{max-width:560px}
  .titular-logo{max-width:440px}
  .contacto-acciones{max-width:440px}
  .horario{text-align:left}
}
@media (max-width:600px){
  :root{--cab-alto:64px}
  /* En el teléfono la cabecera lleva el sello y los dos accesos; el
     nombre sigue ahí para el lector de pantalla y, grande, en la portada. */
  .cab-nombre{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .cab-fila{gap:8px}
  .cab-nav{gap:4px}
  .cab-enlace{padding:0 10px}
  .btn-cab{padding:0 14px;font-size:13.5px}
  .sello-grande{width:76px;height:76px;padding:4px}
  .portada-nombre{margin-top:38px}
  .portada-descriptor{font-size:12px;letter-spacing:.2em}
  .filete{margin:26px 0}
  .practica li{grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding:26px 0 28px}
  .practica h3{font-size:19px}
  .parrafo{font-size:16px}
  .cita{font-size:17px}
  .pie-fila{flex-direction:column;align-items:flex-start}
  .pie-marca{align-items:flex-start}
}

/* ── Preferencias del sistema ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-property:color,background-color,border-color,opacity!important}
  html{scroll-behavior:auto}
}
@media (prefers-contrast:more){
  :root{--borde:#8A8F9C;--borde-suave:#A9ADB6;--grafito-500:#3D4656;--sobre-navy-2:#EAE6D9;--sobre-navy-3:#D4D2C9;--linea-navy:#667A9A}
}
@media (forced-colors:active){
  .filete,.practica li::before{background:CanvasText}
  .btn{border-color:ButtonText}
}
@media print{
  .cab{position:static}
  .saltar{display:none}
}