@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-400-700.woff2') format('woff2-variations'),
       url('../fonts/archivo-var-400-700.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../fonts/spectral-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../fonts/spectral-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../fonts/spectral-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}



:root {
  
  --tinta:    #151b24;  
  --papel:    #eef1f5;  
  --foja:     #fbfcfd;  
  --hondo:    #dbe1e9;  
  --cobalto:  #1b4e8c;  
  --nota:     #4e5866;  
  --cobalto-claro: #8fb4de;  

  

  
  --linea:        rgba(21, 27, 36, 0.16);
  --linea:        color-mix(in srgb, var(--tinta) 16%, transparent);
  --linea-firme:  rgba(21, 27, 36, 0.34);
  --linea-firme:  color-mix(in srgb, var(--tinta) 34%, transparent);
  --cobalto-hover: #123a6c;

  
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-texto:   'Spectral', Georgia, 'Times New Roman', serif;
  --f-dato:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  
  --t-xs:      0.6875rem;
  --t-sm:      0.8125rem;
  --t-base:    1rem;
  --t-md:      1.0625rem;
  --t-lg:      clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --t-xl:      clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);
  --t-display: clamp(1.95rem, 0.9rem + 4.6vw, 4.4rem);
  --t-folio:   clamp(2.4rem, 1.4rem + 4.2vw, 4rem);

  
  --ritmo:   1.7rem;
  --e-1:     0.425rem;
  --e-2:     0.85rem;
  --e-3:     1.7rem;
  --e-4:     2.55rem;
  --e-5:     3.4rem;
  --e-6:     5.1rem;

  
  --medida:  70rem;
  --rail:    12rem;
  --gap:     3rem;
  --pad:     2.5rem;

  --ease:    cubic-bezier(0.33, 1, 0.68, 1);
}

@media (max-width: 60rem) {
  :root {
    --rail: 9rem;
    --gap:  2rem;
    --pad:  1.75rem;
  }
}

@media (max-width: 46rem) {
  :root {
    --gap:   0rem;
    --pad:   1.25rem;
    --ritmo: 1.6rem;
  }
}



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

html {
  font-size: 106.25%;               
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (max-width: 46rem) {
  html { font-size: 100%; }         
}

body {
  margin: 0;
  
  background-color: var(--papel);
  background-image: url('../img/papel.jpg');
  background-repeat: repeat;
  background-size: 512px 512px;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-md);
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--ritmo); max-width: 38em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--cobalto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--cobalto) 40%, transparent);
  transition: color 0.15s linear, text-decoration-color 0.15s linear;
}

a {
  text-decoration-color: rgba(27, 78, 140, 0.4);
  text-decoration-color: color-mix(in srgb, var(--cobalto) 40%, transparent);
}

a:hover {
  color: var(--cobalto-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--cobalto);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: rgba(27, 78, 140, 0.22);
  background: color-mix(in srgb, var(--cobalto) 22%, transparent);
}


.nav,
.idioma,
.hero-pie > *,
.hero-pie-resto > * { min-width: 0; }

.pendiente,
.registro dd,
.dato-grande { overflow-wrap: anywhere; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--pad); top: -4rem;
  z-index: 50;
  background: var(--tinta);
  color: var(--foja);
  padding: var(--e-2) var(--e-3);
  font-family: var(--f-dato);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: top 0.15s linear;
}
.saltar:focus { top: var(--e-2); color: var(--foja); }



.hoja {
  position: relative;
  max-width: var(--medida);
  margin-inline: auto;
  padding-inline: var(--pad);
}


.hoja::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--pad) + var(--rail) + var(--gap) / 2);
  width: 1px;
  background: var(--linea-firme);
  transform-origin: top;
  animation: trazar-vertical 0.9s var(--ease) backwards;
}

.fila {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--gap);
  padding-block: var(--e-6);
  border-top: 1px solid var(--linea);
}

.fila:first-of-type { border-top: 0; }





.margen {
  position: sticky;
  top: var(--e-4);
  align-self: start;
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nota);
}

.cuerpo { min-width: 0; }


.clausula {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 1.1rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--cobalto);
  margin-bottom: var(--e-2);
}

.rotulo {
  display: block;
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea-firme);
  color: var(--nota);
}

@media (max-width: 46rem) {
  .hoja::before { left: 0.5rem; }
  .fila {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--e-5);
    row-gap: var(--e-2);
  }
  .margen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--e-2);
  }
  .clausula { margin-bottom: 0; }
}



.encabezado {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
}

.encabezado-int {
  max-width: var(--medida);
  margin-inline: auto;
  padding: var(--e-2) var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.nav a {
  color: var(--nota);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

.nav a:hover { color: var(--tinta); border-bottom-color: var(--linea-firme); }

.nav a[aria-current='page'] {
  color: var(--tinta);
  border-bottom-color: var(--cobalto);
}

.idioma {
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  padding-left: var(--e-3);
  border-left: 1px solid var(--linea);
}

.idioma a { color: var(--nota); text-decoration: none; }
.idioma a:hover { color: var(--tinta); }
.idioma [aria-current='page'] { color: var(--tinta); font-weight: 500; }
.idioma-sep { color: var(--linea-firme); }

@media (max-width: 46rem) {
  .marca { width: 100%; margin-right: 0; }
  .idioma { padding-left: 0; border-left: 0; margin-left: auto; }
}



.hero {
  position: relative;
  
  min-height: 82vh;
  min-height: min(74svh, 44rem);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  
  grid-template-rows: 1fr auto;
  column-gap: var(--gap);
  align-items: end;
  padding-block: var(--e-5) var(--e-4);
  border-top: 0;
}


.hero::after {
  content: '';
  position: absolute;
  top: var(--e-4);
  right: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-top: 1px solid var(--linea-firme);
  border-right: 1px solid var(--linea-firme);
  pointer-events: none;
  animation: aparecer 0.6s linear 1.5s backwards;
}

.hero-margen {
  font-family: var(--f-dato);
  color: var(--nota);
}

.folio {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-folio);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cobalto);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--e-1);
}

.constante {
  display: block;
  font-size: var(--t-xs);
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: var(--e-2);
  margin-top: var(--e-2);
  border-top: 1px solid var(--linea);
}

.constante b {
  display: block;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tinta);
  text-transform: none;
  font-size: var(--t-sm);
}

.razon {
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-transform: uppercase;
  margin-bottom: var(--e-3);
  text-wrap: pretty;
}

.razon span { display: block; }

.razon .razon-tipo {
  font-size: 0.42em;
  letter-spacing: 0.12em;
  font-weight: 500;
  color: var(--nota);
  margin-top: 0.35em;
}

.filete {
  height: 1px;
  background: var(--linea-firme);
  margin-bottom: var(--e-3);
  max-width: 22rem;
  transform-origin: left;
  animation: trazar-horizontal 0.9s var(--ease) 1.15s backwards;
}

.hero-texto {
  font-size: var(--t-lg);
  line-height: 1.5;
  max-width: 30em;
  text-wrap: pretty;
}



.hero-pie {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--gap);
  margin-top: var(--e-5);
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea);
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nota);
}

.hero-pie-resto {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  min-width: 0;
}

@media (max-width: 46rem) {
  .hero-pie { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-1); }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--e-4);
    min-height: 0;
    padding-block: var(--e-5) var(--e-4);
  }
  .hero::after { display: none; }
  
  .hero-margen { display: block; }
  .folio { margin-bottom: var(--e-2); }
  .hero-pie { margin-top: var(--e-3); }
}



.titulo {
  font-size: var(--t-xl);
  letter-spacing: -0.018em;
  margin-bottom: var(--e-3);
}

.entrada {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-top: var(--e-3);
  margin-bottom: var(--e-1);
}

.prosa > *:last-child { margin-bottom: 0; }

.prosa ul, .prosa ol {
  max-width: 38em;
  margin: 0 0 var(--ritmo);
  padding-left: 1.35em;
}

.prosa li { margin-bottom: var(--e-1); }
.prosa li::marker { color: var(--cobalto); }

.menudo {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--nota);
  max-width: 34em;
}



.registro {
  margin: 0 0 var(--e-3);
  background: var(--foja);
  border: 1px solid var(--linea);
  padding: var(--e-3) var(--e-3) var(--e-2);
}

.registro-fila {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--linea);
}

.registro-fila:last-child { border-bottom: 0; }

.registro dt {
  flex: none;
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nota);
  width: 11rem;
}

.registro-guia {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 0;
  border-bottom: 1px dotted var(--linea-firme);
  transform: translateY(-0.3em);
}


.registro dd {
  flex: 0 1 21rem;
  width: 21rem;
  margin: 0;
  font-family: var(--f-dato);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta);
  text-align: left;
}

@media (max-width: 46rem) {
  .registro { padding: var(--e-2) var(--e-3); }
  .registro-fila { flex-wrap: wrap; gap: 0.15rem; }
  .registro dt { width: 100%; }
  .registro-guia { display: none; }
  .registro dd { flex: 1 1 100%; width: 100%; }
}


.pendiente {
  font-family: var(--f-dato);
  font-size: 0.9em;
  color: var(--cobalto);
  background: rgba(27, 78, 140, 0.09);
  background: color-mix(in srgb, var(--cobalto) 9%, transparent);
  border-bottom: 1px dashed var(--cobalto);
  padding: 0.05em 0.3em;
  white-space: normal;
}



.tarjeta {
  background: var(--foja);
  border: 1px solid var(--linea);
  padding: var(--e-3);
  margin-bottom: var(--e-3);
  max-width: 40em;
}

.tarjeta:last-child { margin-bottom: 0; }

.dato-grande {
  font-family: var(--f-dato);
  font-size: var(--t-lg);
  line-height: 1.3;
  word-break: break-word;
}

.aviso {
  border-left: 2px solid var(--cobalto);
  padding: var(--e-2) 0 var(--e-2) var(--e-3);
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--nota);
  max-width: 40em;
}

.vacio {
  border: 1px dashed var(--linea-firme);
  padding: var(--e-4) var(--e-3);
  text-align: center;
  font-family: var(--f-dato);
  font-size: var(--t-sm);
  color: var(--nota);
  max-width: 40em;
}



.pie {
  border-top: 1px solid var(--linea-firme);
  background: var(--hondo);
}

.pie-int {
  max-width: var(--medida);
  margin-inline: auto;
  padding: var(--e-5) var(--pad) var(--e-3);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--e-4) var(--gap);
}

.pie-col > h2 {
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nota);
  margin-bottom: var(--e-2);
  padding-bottom: var(--e-1);
  border-bottom: 1px solid var(--linea);
}

.pie-marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--e-2);
}

.pie-razon {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
}

.pie-datos {
  font-family: var(--f-dato);
  font-size: var(--t-sm);
  line-height: 1.8;
  color: var(--nota);
  font-style: normal;
  max-width: 26em;
}

.pie-datos b { font-weight: 500; color: var(--tinta); }

.pie-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-dato);
  font-size: var(--t-sm);
  line-height: 1.35;
}

.pie-lista li { margin-bottom: var(--e-2); }

.pie-lista a {
  color: var(--nota);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.pie-lista a:hover { color: var(--tinta); border-bottom-color: var(--linea-firme); }


.pie-legal {
  border-top: 1px solid var(--linea);
  margin-top: var(--e-2);
}

.pie-legal-int {
  max-width: var(--medida);
  margin-inline: auto;
  padding: var(--e-2) var(--pad) var(--e-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  color: var(--nota);
}

.pie-legal-int > * { min-width: 0; }

@media (max-width: 62rem) {
  .pie-int { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .pie-int { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  }



.logo {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
}

.marca-grupo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--tinta);
}

.marca-grupo:hover .marca-texto { color: var(--cobalto); }

.marca-texto {
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.15s linear;
}



.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.9em 1.6em;
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--tinta);
  background: var(--tinta);
  color: var(--foja);
  transition: background 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.boton:hover {
  background: transparent;
  color: var(--tinta);
  text-decoration: none;
}

.boton-linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-firme);
}

.boton-linea:hover {
  background: var(--tinta);
  color: var(--foja);
  border-color: var(--tinta);
}

.boton .flecha { font-family: var(--f-dato); font-weight: 400; }



.actividades { margin-top: var(--e-4); }

.actividad {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: var(--e-4);
  align-items: start;
  padding-block: var(--e-4);
  border-top: 1px solid var(--linea);
}

.actividad:first-child { border-top: 0; padding-top: 0; }

.actividad-lamina {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linea);
  background: var(--foja);
}

.actividad-num {
  display: block;
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--cobalto);
  margin-bottom: var(--e-2);
}

.actividad-titulo {
  font-size: var(--t-xl);
  letter-spacing: -0.018em;
  margin-bottom: var(--e-2);
}

.actividad p {
  font-size: var(--t-base);
  line-height: 1.6;
  max-width: 34em;
  margin-bottom: var(--e-3);
}


.actividad-estado {
  display: block;
  max-width: 34em;
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nota);
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea-firme);
}

@media (max-width: 52rem) {
  .actividad {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--e-3);
  }
}




.crono,
.prosa .crono {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--linea);
}

.crono li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--e-2);
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--linea);
  margin: 0;
}

.crono time {
  font-family: var(--f-dato);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--cobalto);
  font-variant-numeric: tabular-nums;
}

.crono p { margin: 0; font-size: var(--t-base); max-width: 44em; }

@media (max-width: 40rem) {
  .crono li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}



.banda-tinta {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  color: var(--papel);
  
}


.banda-tinta::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -14%;
  width: 46rem;
  height: 46rem;
  transform: translateY(-50%);
  background-color: var(--cobalto-claro);
  -webkit-mask: url('../img/guilloche.svg') center / contain no-repeat;
  mask: url('../img/guilloche.svg') center / contain no-repeat;
  opacity: 0.17;
  pointer-events: none;
}


.oscuro .hoja { z-index: 1; }

@media (max-width: 46rem) {
  .banda-tinta::after { width: 30rem; height: 30rem; right: -30%; opacity: 0.13; }
}


.oscuro .pendiente {
  color: var(--cobalto-claro);
  background: rgba(143, 180, 222, 0.13);
  border-bottom-color: var(--cobalto-claro);
}

.oscuro .hoja::before {
  background: rgba(231, 235, 239, 0.3);
}

.oscuro .fila { border-top-color: rgba(231, 235, 239, 0.18); }
.oscuro .margen,
.oscuro .rotulo { color: rgba(231, 235, 239, 0.6); }
.oscuro .clausula { color: var(--cobalto-claro); }
.oscuro .titulo { color: var(--papel); }
.oscuro p { color: rgba(231, 235, 239, 0.82); }

.oscuro a {
  color: var(--cobalto-claro);
  text-decoration-color: rgba(143, 180, 222, 0.45);
}
.oscuro a:hover { color: #b9d2ec; text-decoration-color: currentColor; }

.oscuro .boton {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
  text-decoration: none;
}
.oscuro .boton:hover { background: transparent; color: var(--papel); }

.oscuro .boton-linea {
  background: transparent;
  color: var(--papel);
  border-color: rgba(231, 235, 239, 0.4);
}
.oscuro .boton-linea:hover {
  background: var(--papel);
  color: var(--tinta);
  border-color: var(--papel);
}

.oscuro :focus-visible { outline-color: var(--cobalto-claro); }


.contacto-directo {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

@media (min-width: 46rem) {
  .contacto-directo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contacto-campo {
  border-top: 1px solid rgba(231, 235, 239, 0.22);
  padding-top: var(--e-2);
}

.contacto-campo dt {
  font-family: var(--f-dato);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(231, 235, 239, 0.6);
  margin-bottom: 0.3rem;
}

.contacto-campo dd {
  margin: 0;
  font-family: var(--f-dato);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--papel);
  overflow-wrap: anywhere;
}




@keyframes trazar-vertical   { from { transform: scaleY(0); } }
@keyframes trazar-horizontal { from { transform: scaleX(0); } }
@keyframes subir             { from { opacity: 0; transform: translateY(0.9rem); } }
@keyframes aparecer          { from { opacity: 0; } }

.entra {
  animation: subir 0.85s var(--ease) backwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.11s);
}


.e1 { --i: 1; }
.e2 { --i: 2; }
.e3 { --i: 3; }
.e4 { --i: 4; }
.e5 { --i: 5; }
.e6 { --i: 6; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra,
  .filete,
  .hero::after,
  .hoja::before { animation: none; }
}



.lamina {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--e-4);
  border: 1px solid var(--linea);
  background: var(--foja);
}



@media (max-width: 46rem) {
  .margen { position: static; }
  .clausula { font-size: var(--t-lg); margin-bottom: 0; }
  .rotulo { border-top: 0; padding-top: 0; }
}



.banda,
.banda-tinta {
  background: var(--tinta);
  color: var(--papel);
}

.oscuro { color: var(--papel); }

.oscuro .entrada { color: var(--papel); }
.oscuro .crono { border-top-color: rgba(231, 235, 239, 0.22); }
.oscuro .crono li { border-bottom-color: rgba(231, 235, 239, 0.18); }
.oscuro .crono time { color: var(--cobalto-claro); }
.oscuro .prosa li::marker { color: var(--cobalto-claro); }
.oscuro strong { color: #fff; }


.oscuro .lamina,
.oscuro .actividad-lamina { border-color: rgba(231, 235, 239, 0.3); }

.pie-int { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 46rem) { .pie-int { grid-template-columns: minmax(0, 1fr); } }

#contacto .contacto-campo { border-color: var(--linea-firme); }
#contacto .contacto-campo dt { color: var(--nota); }
#contacto .contacto-campo dd { color: var(--tinta); }