/* ════════════════════════════════════════════════════════════════
   COLEGIO DE CONSULTORES — hoja de estilo del sitio público

   COLOR — manual de identidad (Enigma Estudio, enero 2026), pág. 21.
   Sólo hay tres colores de marca, más blanco y negro:
     COLOR 1  PANTONE 490 C        #451413   vino
     COLOR 2  PANTONE WARM GRAY 2  #C5C0B7   arena
     COLOR 3  PANTONE 448 C        #4F4231   pardo
   Lo demás son derivados para pantalla, no colores nuevos de marca.

   LETRA — el manual pide Founders Grotesk (títulos) y Wremena
   (acentos); las dos son de pago y sin licencia escrita para web. Se
   usan sus equivalentes libres: Archivo por la grotesca y Cormorant
   Garamond por la serif de contraste alto, que además es la pareja
   del logotipo.

   PROPORCIÓN — medida contra los cinco despachos de referencia
   (Creel, Galicia, Ritch Mueller, Von Wobeser, Basham): su cuerpo va
   de 14 a 16 px y sus títulos de sección de 21 a 30 px. Lo grande es
   la declaración de apertura, no cada encabezado.
   ════════════════════════════════════════════════════════════════ */

:root{
  --vino:#451413;
  --vino2:#5E1D1B;
  --vino-hondo:#2B0D0C;
  --arena:#C5C0B7;
  --pardo:#4F4231;
  --dorado:#B08D57;

  --papel:#FCFBF9;
  --papel2:#F4F1EC;
  --tinta:#1A1614;
  --gris:#6E6657;
  --gris2:#8A8175;
  --linea:#DFDAD2;
  --linea-clara:rgba(197,192,183,.22);

  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  --reja:1220px;
  --rotulo-col:190px;
  --aire:clamp(64px,7.5vw,116px);

  /* Grano de piel: PNG gris CON alpha, encima del color de fondo, así
     que sirve sobre cualquier tinta. Es lo que separa esta paleta del
     color plano y saturado de la identidad institucional. */
  --textura:url('/img/textura.png');
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .2s,border-color .2s}
::selection{background:var(--vino);color:var(--papel)}
:focus-visible{outline:2px solid var(--dorado);outline-offset:4px}

.salto{position:absolute;left:-9999px;top:0;z-index:999;background:var(--vino);color:var(--papel);padding:12px 20px}
.salto:focus{left:12px;top:12px}

.reja{width:100%;max-width:var(--reja);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ── Rótulos, títulos y enlaces ─────────────────────────────── */

.rotulo{
  font-family:var(--sans);
  font-size:11px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris2);
}
.rotulo-claro{color:rgba(197,192,183,.75)}

h2{
  font-family:var(--sans);
  font-size:clamp(19px,2.1vw,25px);
  font-weight:600;line-height:1.25;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--vino);
  margin-bottom:20px;
}

p+p{margin-top:1.1em}
.intro{color:var(--gris);max-width:52ch}

.enlace-flecha{
  display:inline-block;margin-top:26px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vino);
  border-bottom:1px solid var(--linea);
  padding-bottom:5px;
}
.enlace-flecha::after{content:'  →';letter-spacing:0}
.enlace-flecha:hover{color:var(--dorado);border-color:var(--dorado)}
.enlace-claro{color:var(--arena);border-color:var(--linea-clara)}
.enlace-claro:hover{color:var(--dorado);border-color:var(--dorado)}
.enlace-chico{margin-top:12px;font-size:11px}

/* ── Cabecera ───────────────────────────────────────────────── */

.cabecera{
  position:sticky;top:0;z-index:100;
  background:rgba(252,251,249,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s;
}
.cabecera.desplazada{border-bottom-color:var(--linea)}
.cabecera-int{
  max-width:var(--reja);margin:0 auto;
  padding:18px clamp(20px,4vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.marca img{height:26px;width:auto}

.cabecera nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.cabecera nav a{
  font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);
  padding-bottom:3px;border-bottom:1px solid transparent;
}
.cabecera nav a:hover{color:var(--vino);border-bottom-color:var(--vino)}

.menu-btn{
  display:none;width:40px;height:40px;
  background:transparent;border:none;cursor:pointer;
  flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;padding:0;
}
.menu-btn span{display:block;width:22px;height:1px;background:var(--tinta);transition:transform .25s,opacity .25s}
.menu-btn span:nth-child(2){width:15px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Apertura ───────────────────────────────────────────────── */

.apertura{padding:clamp(72px,11vw,150px) 0 clamp(64px,8vw,110px)}
.apertura .rotulo{margin-bottom:clamp(30px,4vw,48px)}
.declaracion{
  font-family:var(--serif);
  font-size:clamp(30px,4.6vw,56px);
  font-weight:300;line-height:1.2;
  letter-spacing:-.005em;
  max-width:19ch;
  text-wrap:balance;
}
.declaracion em{font-style:normal;color:var(--vino)}
.declaracion-pie{
  margin-top:clamp(26px,3vw,38px);
  max-width:46ch;color:var(--gris);
}

/* ── Bandas a sangre ────────────────────────────────────────── */

.banda{
  position:relative;
  background-color:var(--vino-hondo);
  background-image:var(--textura);
  background-size:200px 200px;
  color:var(--arena);
  padding:var(--aire) 0;
  overflow:hidden;
}
.banda-int{
  position:relative;z-index:2;
  max-width:760px;margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
}
.banda-ancha{max-width:var(--reja)}
.banda-isotipo{width:64px;margin-bottom:26px;opacity:.75;filter:brightness(0) invert(1)}
.banda .rotulo{margin-bottom:22px}
.banda-frase{
  font-family:var(--serif);
  font-size:clamp(24px,3.2vw,38px);
  font-weight:300;line-height:1.3;
  color:var(--papel);
  max-width:24ch;
}
.banda-frase-chica{font-size:clamp(20px,2.4vw,27px);max-width:28ch}
.banda-texto{
  margin-top:24px;max-width:56ch;
  font-size:15.5px;line-height:1.8;
  color:rgba(197,192,183,.82);
}
.banda-texto strong{color:var(--papel);font-weight:600}

/* ── Bloques ────────────────────────────────────────────────── */

.bloque{padding:var(--aire) 0;border-top:1px solid var(--linea)}
.bloque-claro{background:var(--papel2)}
.reja-partida{
  display:grid;grid-template-columns:var(--rotulo-col) 1fr;
  gap:clamp(24px,4vw,56px);align-items:start;
}
.columna-rotulo .rotulo{padding-top:6px}
.columna-texto{max-width:62ch}
.columna-texto p{color:var(--gris)}

/* ── Áreas de práctica ──────────────────────────────────────── */
/* Lista tipográfica con reglas finas. Ninguno de los cinco despachos
   de referencia usa tarjetas con iconito: es el gesto que más delata
   una plantilla. */

.areas{
  list-style:none;
  max-width:var(--reja);margin:clamp(40px,5vw,64px) auto 0;
  padding:0 clamp(20px,4vw,48px);
  border-top:1px solid var(--linea);
}
.areas li{border-bottom:1px solid var(--linea)}
.areas a{
  display:grid;
  grid-template-columns:64px minmax(210px,.9fr) 1.6fr;
  gap:clamp(16px,3vw,44px);align-items:baseline;
  padding:26px 8px 26px 0;
  transition:background .25s,padding .25s;
}
.areas a:hover{background:rgba(69,20,19,.035);padding-left:14px;padding-right:0}
.area-num{
  font-family:var(--serif);font-size:15px;
  letter-spacing:.18em;color:var(--gris2);
  /* Cormorant trae cifras de estilo antiguo: el 3 y el 4 bajan de la
     línea y el 1 parece una I. En una numeración corrida se lee mal. */
  font-variant-numeric:lining-nums;
  font-feature-settings:'lnum' 1;
}
.area-nombre{
  font-size:13px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--vino);line-height:1.5;
}
.area-desc{font-size:15px;line-height:1.7;color:var(--gris)}
.areas a:hover .area-nombre{color:var(--vino2)}

/* ── Método ─────────────────────────────────────────────────── */

.criterios{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 clamp(32px,5vw,70px);
  margin-top:clamp(36px,4.5vw,56px);
}
.criterios>div{padding:24px 0;border-top:1px solid var(--linea)}
.criterios dt{
  font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--vino);margin-bottom:10px;
}
.criterios dd{font-size:15px;line-height:1.72;color:var(--gris)}

/* ── NotarIA ────────────────────────────────────────────────── */

.banda-notaria{border-top:1px solid var(--linea)}
/* «NotarIA» es Notaría + IA: si el text-transform lo sube a caja alta
   queda «NOTARIA», que ya no dice nada. */
.titulo-producto{text-transform:none;letter-spacing:0;margin:18px 0 clamp(32px,4vw,50px)}
.marca-notaria{width:clamp(190px,21vw,290px);height:auto}
.nav-producto,.cabecera nav a.nav-producto{text-transform:none;letter-spacing:.02em;font-size:12.5px}
.ia{color:var(--dorado)}

.notaria-reja{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(32px,5vw,80px);align-items:start;
}
.lista-fina{list-style:none;padding-top:8px}
.lista-fina li{
  padding:13px 0;border-top:1px solid var(--linea-clara);
  font-size:14px;line-height:1.6;color:rgba(197,192,183,.82);
}
.lista-fina li:last-child{border-bottom:1px solid var(--linea-clara)}

/* ── Contacto ───────────────────────────────────────────────── */

.contacto-reja{
  display:grid;grid-template-columns:var(--rotulo-col) 1fr;
  gap:clamp(24px,4vw,56px);
  margin-top:clamp(40px,5vw,62px);align-items:start;
}
.datos{font-style:normal}
.dato{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--linea)}
.dato:last-child{border-bottom:none}
.dato .rotulo{display:block;margin-bottom:7px}
.dato p{font-size:14.5px;line-height:1.65;color:var(--pardo)}
.dato a:hover{color:var(--vino)}

/* Campos de línea, no cajas: se lee como un documento, no como un
   formulario de alta de servicio. */
.formulario{max-width:640px}
.campo{margin-bottom:26px}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.campo label{
  display:block;margin-bottom:7px;
  font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris2);
}
.opcional{font-weight:400;text-transform:none;letter-spacing:0}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--tinta);
  padding:8px 0;background:transparent;
  border:none;border-bottom:1px solid var(--linea);border-radius:0;
  transition:border-color .2s;
}
.campo select{cursor:pointer}
.campo textarea{resize:vertical;min-height:84px;line-height:1.7}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--vino)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{border-bottom-color:#9B2C2C}
.campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consentimiento{
  display:flex;gap:12px;align-items:flex-start;
  margin:4px 0 28px;font-size:13.5px;line-height:1.6;color:var(--gris);
}
.consentimiento input{margin-top:5px;width:15px;height:15px;flex:none;accent-color:var(--vino)}
.consentimiento a{border-bottom:1px solid var(--linea)}
.consentimiento a:hover{color:var(--vino);border-color:var(--vino)}

.enviar{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--vino);
  background:transparent;border:none;border-bottom:1px solid var(--vino);
  padding:0 0 7px;cursor:pointer;transition:color .2s,border-color .2s;
}
.enviar::after{content:'  →';letter-spacing:0}
.enviar:hover{color:var(--dorado);border-color:var(--dorado)}
.enviar:disabled{color:var(--gris2);border-color:var(--linea);cursor:default}

.formulario-aviso{margin-top:20px;font-size:14px;line-height:1.6;display:none}
.formulario-aviso.visible{display:block}
.formulario-aviso.error{color:#9B2C2C}
.formulario-aviso.exito{color:var(--vino)}
.formulario-pie{margin-top:22px;font-size:12.5px;line-height:1.6;color:var(--gris2)}

/* ── Pie ────────────────────────────────────────────────────── */

.pie{
  background-color:var(--vino-hondo);
  background-image:var(--textura);
  background-size:200px 200px;
  color:var(--arena);
  padding:clamp(56px,6.5vw,88px) 0 30px;
}
.pie-alto{padding-bottom:clamp(36px,4.5vw,52px);border-bottom:1px solid var(--linea-clara)}
.pie-marca{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.pie-lema{
  margin-top:16px;font-family:var(--serif);
  font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--dorado);
}
.pie-reja{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(28px,4vw,56px);padding:clamp(36px,4.5vw,52px) 0;
}
.pie-reja .rotulo{display:block;margin-bottom:12px}
.pie-reja p{font-size:13.5px;line-height:1.85;color:rgba(197,192,183,.72)}
.pie-reja a:hover{color:var(--dorado)}
.pie-legal{
  padding-top:24px;border-top:1px solid var(--linea-clara);
  display:flex;flex-wrap:wrap;gap:8px 40px;justify-content:space-between;
}
.pie-legal p{font-size:11.5px;line-height:1.7;color:rgba(197,192,183,.45)}

/* ── La lámina del dibujo ───────────────────────────────────── */
/* El papel del PNG es el mismo --papel de la página, así que no lleva
   marco ni sombra: se lee como una lámina dibujada sobre la hoja. El
   archivo mide 1696 px y la reja tope 1220, así que nunca se amplía. */

.lamina{padding:0 0 clamp(52px,6.5vw,86px);background:var(--papel)}
.lamina img{width:100%;height:auto}
.lamina figcaption{
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--linea);
}


@media (max-width:620px){
  .lamina{padding-bottom:40px}
}

/* ── Pantallas chicas ───────────────────────────────────────── */

@media (max-width:1000px){
  .notaria-reja{grid-template-columns:1fr;gap:34px}
  .areas a{grid-template-columns:46px 1fr;gap:10px 22px}
  .area-desc{grid-column:2}
}

@media (max-width:860px){
  .menu-btn{display:flex}
  .cabecera-int{position:relative}
  .cabecera nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--papel);border-bottom:1px solid var(--linea);
    padding:4px clamp(20px,4vw,48px) 20px;
  }
  .cabecera nav.abierto{display:flex}
  .cabecera nav a{padding:16px 0;border-bottom:1px solid var(--linea);font-size:12.5px}
  .cabecera nav a:hover{border-bottom-color:var(--linea)}

  .reja-partida,.contacto-reja{grid-template-columns:1fr;gap:14px}
  .columna-rotulo .rotulo{padding-top:0}
  .contacto-reja{gap:44px}
}

@media (max-width:620px){
  .campo-fila{grid-template-columns:1fr;gap:0}
  .criterios{gap:0}
  .pie-legal{flex-direction:column}
  .areas a:hover{padding-left:6px}
}

@media print{
  .cabecera,.menu-btn,.formulario,.enlace-flecha{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .banda,.pie{background:#fff!important;color:#000!important}
  .banda-frase,.banda-texto{color:#000!important}
}