/* =====================================================================
   IKREAA · base.css
   Mundo visual: ALBARAN — el dossier de obra.
   Papel autocopiativo, tinta violeta de calco, sellos de caucho, laton.
   Este archivo es el sistema compartido por las cuatro superficies.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */

:root {
  /* --- Papeles (los fondos son papel, nunca "color de fondo") --- */
  --papel-blanco:  #F3F0E8;   /* original */
  --papel-vellum:  #E7E3D7;   /* copia 1 · vegetal, Interiores */
  --papel-canario: #EFE2A6;   /* copia 2 · canario, Enterprises */
  --papel-rosa:    #EDD2CB;   /* copia 3 · rosa, Retail */
  --papel-azul:    #D5DEE6;   /* copia 4 · reservada */
  --kraft:         #C3A176;
  --manila:        #DCC7A2;

  /* --- Tinta de calco --- */
  --tinta:      #26202F;      /* texto principal · violeta-negro */
  --tinta-70:   #4A4256;
  --tinta-45:   #605969;   /* AA sobre los cuatro papeles, tambien sobre rosa */
  --tinta-20:   rgba(38, 32, 47, .20);
  --tinta-12:   rgba(38, 32, 47, .12);
  --tinta-07:   rgba(38, 32, 47, .07);

  /* --- Sellos de caucho --- */
  --sello-violeta: #5B3E8C;
  --sello-rojo:    #A63125;

  /* --- Laton: la unica linea metalica, heredada de la marca --- */
  --laton:       #B08544;   /* linea de marca: decorativa */
  --laton-firme: #97702F;   /* cuando el trazo significa algo (enlaces) */
  --laton-claro: #D3AE73;   /* sobre superficies oscuras */

  /* --- Superficies oscuras (montaje nocturno, pie) --- */
  --noche:      #17141C;
  --noche-2:    #221E29;

  /* --- Tipografia --- */
  --rotulo: 'Archivo', 'Helvetica Neue', Arial, sans-serif;            /* preimpreso */
  --dato:   'Martian Mono', ui-monospace, 'Cascadia Mono', monospace;  /* rellenado */

  /* --- Reticula del formulario --- */
  --linea: 1px;
  --paso: 8px;
  --margen: clamp(1.25rem, 4.2vw, 4.5rem);
  --medida: 66ch;

  /* --- Movimiento --- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-sello: cubic-bezier(.22, 1.22, .36, 1); /* impacto del sello: un solo golpe, sin rebote de dibujo animado */
  --t-corto: .28s;
  --t-medio: .55s;
  --t-largo: .9s;

  /* Fibra del papel: ruido finisimo, no textura decorativa. */
  --fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)' opacity='.34'/%3E%3C/svg%3E");

}

/* ---------------------------------------------------------------
   2. Reset y base
   --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--papel-blanco);
  color: var(--tinta);
  font-family: var(--rotulo);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* La fibra se pinta una vez sobre todo el documento. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--fibra);
  opacity: .42;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9998;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
figure, figcaption, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--sello-violeta); outline-offset: 3px; }
::selection { background: var(--laton-claro); color: var(--tinta); }

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

.saltar {
  position: absolute; top: -100%; left: var(--paso);
  z-index: 10000; background: var(--tinta); color: var(--papel-blanco);
  padding: .75rem 1.25rem; font: 600 .8125rem/1 var(--rotulo);
  letter-spacing: .1em; text-transform: uppercase;
}
.saltar:focus { top: var(--paso); }

/* ---------------------------------------------------------------
   3. Gramatica del formulario preimpreso
   Es el ADN del mundo: rotulo diminuto arriba, dato debajo, filete.
   --------------------------------------------------------------- */

.rotulo {
  display: block;
  font-family: var(--rotulo);
  font-size: .625rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-45);
  line-height: 1;
}

.dato {
  font-family: var(--dato);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.4;
}

.casilla {
  display: grid;
  gap: calc(var(--paso) * .75);
  padding-bottom: calc(var(--paso) * .875);
  border-bottom: var(--linea) solid var(--tinta-20);
}

.filete { border: 0; border-top: var(--linea) solid var(--tinta-20); margin: 0; }
.filete--laton { border-top-color: var(--laton); }

/* Perforacion de arrastre: el borde troquelado entre copias. */
.perforacion {
  background-image: radial-gradient(circle at 50% 50%, var(--perf-color, var(--tinta-20)) 0 1.4px, transparent 1.7px);
  background-size: 100% 11px;
  background-repeat: repeat-y;
  background-position: 50% 0;
}

/* ---------------------------------------------------------------
   4. El sello de caucho — el gesto de marca
   --------------------------------------------------------------- */

.sello {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em .85em;
  border: 2px solid currentColor;
  border-radius: 2px;
  color: var(--sello-violeta);
  font-family: var(--rotulo);
  font-size: .6875rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  transform: rotate(-1.8deg);
  opacity: .92;
  /* El caucho no apoya igual en todo el perimetro: el borde se rompe y la
     tinta se motea. Eso no es una mascara uniforme, es un filtro. */
  filter: url(#tinta-caucho);
}
.sello--rojo  { color: var(--sello-rojo); transform: rotate(1.4deg); }
.sello--laton { color: var(--laton); }

@keyframes estampar {
  0%   { opacity: 0; transform: rotate(-9deg) scale(1.7); filter: blur(3px); }
  62%  { opacity: .97; transform: rotate(-1.8deg) scale(.965); filter: blur(0); }
  100% { opacity: .9; transform: rotate(-1.8deg) scale(1); }
}

/* ---------------------------------------------------------------
   5. Logotipo IKREAA
   Unico elemento obligatorio en las cuatro superficies.
   Cada division lo declina cambiando --marca-color y el sufijo.
   --------------------------------------------------------------- */

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  color: var(--marca-color, var(--tinta));
  line-height: 1;
  white-space: nowrap;
}

.marca__palabra {
  font-family: var(--rotulo);
  font-size: var(--marca-tam, 1.0625rem);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
}

/* La segunda A se apoya en un filete de laton: la firma del taller. */
.marca__palabra em {
  font-style: normal;
  border-bottom: 2px solid var(--laton);
  padding-bottom: .1em;
}

.marca__division {
  font-family: var(--dato);
  font-size: calc(var(--marca-tam, 1.0625rem) * .48);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--marca-division-color, var(--tinta-45));
}

/* ---------------------------------------------------------------
   6. Controles — todo control es una casilla que se pulsa
   --------------------------------------------------------------- */

.boton {
  --b-fondo: var(--tinta);
  --b-tinta: var(--papel-blanco);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 52px;
  padding: 0 1.15rem;
  background: var(--b-fondo);
  color: var(--b-tinta);
  border: 0;
  border-radius: 1px;
  font-family: var(--rotulo);
  font-size: .75rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--t-corto) var(--ease),
              box-shadow var(--t-corto) var(--ease),
              background-color var(--t-corto) var(--ease);
  box-shadow: 0 1px 0 0 var(--laton);
}
.boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 0 0 var(--laton), 0 12px 24px -14px rgba(38, 32, 47, .6);
}
.boton:active { transform: translateY(0); box-shadow: 0 1px 0 0 var(--laton); }
.boton[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 1px 0 0 var(--tinta-20); }

.boton--hueco {
  --b-fondo: transparent;
  --b-tinta: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta-20), 0 1px 0 0 var(--laton);
}
.boton--hueco:hover {
  --b-fondo: rgba(38, 32, 47, .045);
  box-shadow: inset 0 0 0 1px var(--tinta-45), 0 3px 0 0 var(--laton);
}

.boton__flecha { flex: none; width: 22px; height: 8px; }

/* ---------------------------------------------------------------
   7. Formulario de captacion
   --------------------------------------------------------------- */

.hoja {
  position: relative;
  background: var(--hoja-papel, var(--papel-blanco));
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: 0 1px 0 var(--tinta-12), 0 26px 52px -34px rgba(38, 32, 47, .5);
}

.hoja__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--paso);
  padding-bottom: calc(var(--paso) * 1.5);
  border-bottom: 2px solid var(--tinta);
  margin-bottom: calc(var(--paso) * 3.5);
}

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--paso) * 3.25) calc(var(--paso) * 2.5);
}
.campo--ancho { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .campos { grid-template-columns: 1fr; gap: calc(var(--paso) * 2.75); }
}

.campo { display: grid; gap: calc(var(--paso) * .875); }

.campo > input,
.campo > select,
.campo > textarea {
  width: 100%;
  padding: 0 0 calc(var(--paso) * .875);
  background: transparent;
  border: 0;
  border-bottom: var(--linea) solid var(--tinta-20);
  border-radius: 0;
  color: var(--tinta);
  font-family: var(--dato);
  font-size: .875rem;
  letter-spacing: -.04em;
  line-height: 1.5;
  transition: border-color var(--t-corto) var(--ease),
              background-color var(--t-corto) var(--ease);
  appearance: none;
}

.campo > textarea { min-height: 6.5rem; resize: vertical; }

.campo > input::placeholder,
.campo > textarea::placeholder { color: var(--tinta-45); opacity: 1; font-size: .8125rem; }

.campo > input:hover,
.campo > select:hover,
.campo > textarea:hover { border-bottom-color: var(--tinta-45); }

.campo > input:focus,
.campo > select:focus,
.campo > textarea:focus {
  outline: none;
  border-bottom-color: var(--laton);
  border-bottom-width: 2px;
  padding-bottom: calc(var(--paso) * .875 - 1px);
  background: linear-gradient(to bottom, transparent 60%, rgba(176, 133, 68, .12));
}

.campo--select { position: relative; }
.campo--select::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 1.05rem;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--tinta-45);
  border-bottom: 1.5px solid var(--tinta-45);
  transform: rotate(45deg);
  pointer-events: none;
}
.campo > select { padding-right: 1.75rem; cursor: pointer; }
.campo > select option { background: var(--papel-blanco); color: var(--tinta); }

.campo[data-error] > input,
.campo[data-error] > select,
.campo[data-error] > textarea { border-bottom-color: var(--sello-rojo); border-bottom-width: 2px; }
.campo[data-error] .rotulo { color: var(--sello-rojo); }

.campo__error {
  font-family: var(--dato);
  font-size: .6875rem;
  letter-spacing: -.03em;
  color: var(--sello-rojo);
}
.campo:not([data-error]) .campo__error { display: none; }

.consentimiento {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: calc(var(--paso) * 1.5);
  align-items: start;
}
.consentimiento input {
  appearance: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--tinta-45);
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color var(--t-corto) var(--ease);
}
.consentimiento input::after {
  content: '';
  width: 11px; height: 11px;
  background: var(--sello-violeta);
  clip-path: polygon(14% 0, 50% 34%, 86% 0, 100% 16%, 64% 50%, 100% 84%, 86% 100%, 50% 66%, 14% 100%, 0 84%, 36% 50%, 0 16%);
  transform: scale(0) rotate(-25deg);
  transition: transform var(--t-corto) var(--ease-sello);
}
.consentimiento input:checked { border-color: var(--sello-violeta); }
.consentimiento input:checked::after { transform: scale(1) rotate(0); }
.consentimiento label { font-size: .8125rem; line-height: 1.55; color: var(--tinta-70); }
.consentimiento a { border-bottom: 1px solid var(--laton-firme); }
.consentimiento[data-error] input { border-color: var(--sello-rojo); }

.hoja__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  margin-top: calc(var(--paso) * 4);
  padding-top: calc(var(--paso) * 2.5);
  border-top: 2px solid var(--tinta);
}

.hoja__aviso {
  grid-column: 1 / -1;
  display: none;
  gap: .75rem;
  align-items: flex-start;
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2);
  font-family: var(--dato);
  font-size: .75rem;
  line-height: 1.55;
  letter-spacing: -.03em;
}
.hoja__aviso[data-visible] { display: flex; }
.hoja__aviso[data-tipo="error"] { background: rgba(166, 49, 37, .1);  color: #7A2419; box-shadow: inset 0 0 0 1px rgba(166, 49, 37, .3); }
.hoja__aviso[data-tipo="ok"]    { background: rgba(91, 62, 140, .1); color: #422D66; box-shadow: inset 0 0 0 1px rgba(91, 62, 140, .28); }

/* Acuse de recibo: sustituye al formulario cuando el envio cuaja. */
.acuse { display: none; text-align: center; padding: clamp(2rem, 6vw, 4.5rem) 0; }
.acuse[data-visible] { display: grid; justify-items: center; gap: calc(var(--paso) * 3); }
.acuse__sello {
  display: inline-flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.15rem 1.9rem;
  border: 3px double var(--sello-violeta);
  color: var(--sello-violeta);
  animation: estampar .75s var(--ease-sello) both;
  filter: url(#tinta-caucho);
}
.acuse__sello b {
  font: 700 clamp(1.25rem, 3vw, 1.6rem)/1 var(--rotulo);
  font-stretch: 118%; letter-spacing: .18em; text-transform: uppercase;
}
.acuse__sello span { font: 400 .6875rem/1 var(--dato); letter-spacing: .04em; }
.acuse p { max-width: 46ch; color: var(--tinta-70); font-size: .9375rem; }

/* Trampa antibot: invisible y fuera del orden de tabulacion. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------
   8. Pie de pagina comun
   --------------------------------------------------------------- */

.pie {
  position: relative;
  background: var(--noche);
  color: rgba(243, 240, 232, .74);
  padding: clamp(3rem, 7vw, 5.5rem) var(--margen) clamp(2rem, 4vw, 3rem);
}

.pie__reticula {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: calc(var(--paso) * 5) calc(var(--paso) * 4);
  max-width: 1400px;
  margin-inline: auto;
  padding-bottom: calc(var(--paso) * 5);
  border-bottom: var(--linea) solid rgba(243, 240, 232, .16);
}

@media (max-width: 900px) { .pie__reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pie__reticula { grid-template-columns: 1fr; gap: calc(var(--paso) * 3.5); } }

.pie .marca { --marca-color: var(--papel-blanco); --marca-tam: 1.25rem; --marca-division-color: rgba(243, 240, 232, .55); }
.pie .rotulo { color: rgba(243, 240, 232, .55); }
.pie__intro { margin-top: calc(var(--paso) * 2); max-width: 34ch; font-size: .9375rem; line-height: 1.6; }

.pie__lista { display: grid; gap: calc(var(--paso) * 1.25); margin-top: calc(var(--paso) * 2); }
.pie__lista a,
.pie__lista span {
  font-size: .875rem;
  color: rgba(243, 240, 232, .8);
  justify-self: start;
}
.pie__lista a {
  border-bottom: 1px solid transparent;
  transition: color var(--t-corto) var(--ease), border-color var(--t-corto) var(--ease);
}
.pie__lista a:hover { color: var(--papel-blanco); border-bottom-color: var(--laton); }

.pie__firma {
  display: flex; flex-wrap: wrap; gap: var(--paso) calc(var(--paso) * 3);
  justify-content: space-between;
  max-width: 1400px; margin: calc(var(--paso) * 3) auto 0;
  font-family: var(--dato); font-size: .6875rem; letter-spacing: -.02em;
  color: rgba(243, 240, 232, .52);
}
.pie__firma a { border-bottom: 1px solid rgba(176, 133, 68, .6); }

/* Dato pendiente de sustituir por el real. */
.pendiente {
  display: inline-block;
  padding: .1em .45em;
  background: rgba(176, 133, 68, .2);
  box-shadow: inset 0 0 0 1px rgba(176, 133, 68, .55);
  font-family: var(--dato); font-size: .6875rem; letter-spacing: -.03em;
  color: inherit;
}

/* ---------------------------------------------------------------
   9. Revelado al scroll — una sola entrada, orquestada
   --------------------------------------------------------------- */

[data-revelar] { opacity: 1; }   /* sin JS se ve todo */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-largo) var(--ease), transform var(--t-largo) var(--ease);
  transition-delay: var(--retardo, 0ms);
}
.js [data-revelar][data-visible] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-revelar] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   10. Andamiaje de las paginas de division
   Solo la estructura. Cada division la viste a su manera.
   --------------------------------------------------------------- */

.envoltorio { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--margen); }
.envoltorio--estrecho { max-width: 980px; }

.seccion { padding-block: clamp(3.5rem, 9vw, 8rem); }
.seccion--apretada { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* Cabecera fija de division */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso) calc(var(--paso) * 3);
  padding: calc(var(--paso) * 1.75) var(--margen);
  background: var(--cab-fondo, var(--papel-blanco));
  border-bottom: 1px solid var(--cab-filete, var(--tinta-20));
  transition: transform var(--t-medio) var(--ease),
              padding var(--t-corto) var(--ease),
              background-color var(--t-corto) var(--ease);
}
.cabecera[data-compacta] { padding-block: calc(var(--paso) * 1.125); }
.cabecera[data-oculta]   { transform: translateY(-102%); }

.cabecera__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }
.cabecera__nav a {
  font-family: var(--rotulo);
  font-size: .75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cab-tinta, var(--tinta-70));
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--t-corto) var(--ease), border-color var(--t-corto) var(--ease);
}
.cabecera__nav a:hover { color: var(--cab-tinta-fuerte, var(--tinta)); border-bottom-color: var(--laton); }

/* El enlace de vuelta al talonario: presente en las tres divisiones. */
.volver {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--dato); font-size: .6875rem; letter-spacing: -.03em;
  color: var(--cab-tinta, var(--tinta-45));
  transition: color var(--t-corto) var(--ease);
}
.volver:hover { color: var(--laton); }
.volver svg { flex: none; width: 18px; height: 8px; }

/* En movil las paginas de division miden mas de cuatro mil pixeles. Ocultar
   las anclas dejaba al visitante sin ninguna forma de saltar; ahora la
   navegacion se desliza en horizontal y el CTA se queda fijo al final. */
@media (max-width: 780px) {
  .cabecera { flex-wrap: wrap; gap: calc(var(--paso) * 1.5); }
  .cabecera__nav {
    order: 3;
    flex-basis: 100%;
    gap: calc(var(--paso) * 2.5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--margen) * -1);
    padding-inline: var(--margen);
    padding-bottom: 2px;
  }
  .cabecera__nav::-webkit-scrollbar { display: none; }
  .cabecera__nav a { white-space: nowrap; font-size: .6875rem; }
  .cabecera__nav a[data-clave] {
    position: sticky;
    right: calc(var(--margen) * -1);
    padding-inline: calc(var(--paso) * 1.25);
    /* Opaco de verdad: --cab-fondo es translucido y dejaba leer el enlace
       que pasa por debajo al desplazar. */
    background: var(--cab-solido, var(--papel-blanco));
    color: var(--cab-tinta-fuerte, var(--tinta));
    border-bottom-color: var(--laton);
  }
  /* Un degradado ancho de verdad: con catorce pixeles el enlace que pasa por
     debajo se cortaba en seco y parecia una palabra rota. */
  .cabecera__nav a[data-clave]::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--cab-solido, var(--papel-blanco)) 82%);
  }
  .cabecera[data-compacta] .cabecera__nav { display: none; }
}

/* Titulos de seccion: el filete arranca la seccion, no una etiqueta. */
.titulo {
  font-size: clamp(1.65rem, 4.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  max-width: 22ch;
}
.entradilla {
  margin-top: calc(var(--paso) * 2.5);
  max-width: 58ch;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.62;
  color: var(--tinta-70);
}