/* Meliver · hoja de estilos única */

/* ---------- Fuentes ---------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-wdth.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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-wdth.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;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --tinta: #0E4A3A;
  --tinta-hundida: #0D4435;
  --original: #F7F9F8;
  --canario: #F5DE68;
  --rosa: #EDBBC6;
  --celeste: #B2D2E7;
  --verde: #BFDABF;
  --dorso: #E4E9E6;
  --calco: #4436A6;
  --rojo: #D2262F;
  --papel: #E3F0EA;
  --tinta-2: #3F6458;
  --raya: rgb(14 74 58 / 0.24);

  --regla: 1.5px;
  --sombra-hoja: 0 -6px 14px -10px rgb(14 74 58 / 0.3);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  --familia: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-rotulo: 0.84375rem;
  --t-cuerpo: 1.125rem;
  --t-entradilla: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
  --t-subtitulo: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --t-titulo: clamp(1.875rem, 1.2rem + 2.2vw, 2.667rem);
  --t-display: clamp(2.25rem, min(4.4vw, 8.5vh), 4.75rem);

  --matriz: 0px;
  --margen: 16px;
  --margen-dcho: 16px;
  --aire: clamp(48px, 8vh, 96px);

  --h-copia: 30px;
  --canto: 10px;
  --pila: 0px;
  --hoja-max: 76rem;

  --visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M1.6 8.9c1.7 1 3.1 2.6 4.3 5.3C8.3 8.5 12.1 4.1 18.4 1.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --visto-violeta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M1.6 8.9c1.7 1 3.1 2.6 4.3 5.3C8.3 8.5 12.1 4.1 18.4 1.5' fill='none' stroke='%234436A6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0 0 0 .95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%230E4A3A' stroke-width='1.5'/%3E%3C/svg%3E");
}

@media (min-width: 47.5em) {
  :root {
    --margen: 32px;
    --margen-dcho: 32px;
    --h-copia: clamp(36px, 4.8vh, 46px);
    --canto: 8px;
  }
}

@media (min-width: 64em) {
  :root {
    --matriz: 232px;
    --margen: clamp(40px, 5vw, 72px);
    --margen-dcho: clamp(32px, 4vw, 56px);
  }
}

/* ---------- Base ---------- */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--original);
  scroll-padding-bottom: var(--pila);
  scrollbar-color: var(--tinta) var(--original);
}

html:not(.js) {
  scroll-padding-bottom: calc(4 * var(--canto) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--original);
  color: var(--tinta);
  font-family: var(--familia);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  caret-color: var(--calco);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--canario);
  color: var(--tinta);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--original);
}

::-webkit-scrollbar-thumb {
  background: var(--tinta);
  border: 3px solid var(--original);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 120ms ease-out;
}

a:hover {
  text-decoration-thickness: 2.5px;
}

:focus-visible {
  outline: 2px solid var(--calco);
  outline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

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

.solo-js {
  display: none;
}

.js .solo-js {
  display: block;
}

.salto {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--tinta);
  color: var(--original);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-160%);
}

.salto:focus {
  transform: none;
}

main:focus {
  outline: none;
}

/* ---------- Tipografía ---------- */

.t-titulo {
  font-size: var(--t-titulo);
  font-stretch: 118%;
  font-weight: 780;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.t-subtitulo {
  font-size: var(--t-subtitulo);
  font-stretch: 112%;
  font-weight: 740;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-entradilla {
  font-size: var(--t-entradilla);
  line-height: 1.42;
  max-width: 50ch;
  text-wrap: pretty;
}

.t-rotulo {
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
  line-height: 1.3;
}

html {
  hyphenate-limit-chars: 12 5 5;
}

.nombre-propio {
  hyphens: manual;
}

.prosa p,
.prosa li {
  max-width: 62ch;
  hyphens: auto;
  text-wrap: pretty;
}

.prosa > * + * {
  margin-top: 1em;
}

.letra-pequena {
  font-size: var(--t-rotulo);
  line-height: 1.45;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: var(--tinta);
  color: var(--original);
  font-size: var(--t-cuerpo);
  font-stretch: 100%;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}

.boton:hover {
  background: var(--tinta-hundida);
}

.boton:active {
  transform: translateY(1px);
}

.boton[aria-disabled="true"] {
  cursor: progress;
}

.boton--linea {
  min-height: 44px;
  padding: 9px 16px;
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 var(--regla) var(--tinta);
  font-size: 1rem;
}

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

.boton--papel {
  background: var(--original);
  color: var(--tinta);
}

.boton--papel:hover {
  background: var(--papel);
}

/* ---------- Perforaciones ---------- */

.perforacion {
  height: 3px;
  margin: 0 calc(-1 * var(--margen-dcho)) 0 calc(-1 * var(--margen));
  border: 0;
  background: radial-gradient(circle at 50% 50%, var(--tinta) 1.25px, transparent 1.6px) 0 0 / 7px 3px repeat-x;
  opacity: 0.18;
  mix-blend-mode: multiply;
}

/* ---------- Matriz (cabecera) ---------- */

.matriz {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 52px;
  padding: 8px var(--margen-dcho) 10px var(--margen);
  background: var(--original);
}

.matriz::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 3px;
  background: radial-gradient(circle at 50% 50%, var(--tinta) 1.25px, transparent 1.6px) 0 0 / 7px 3px repeat-x;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.matriz__cabeza {
  margin-right: auto;
}

.matriz__marca {
  display: inline-block;
  font-size: 1.25rem;
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.matriz__lema {
  display: none;
  font-size: var(--t-rotulo);
  line-height: 1.3;
}

.matriz__numero {
  display: none;
}

.matriz__atajo {
  display: none;
  font-size: 0.9375rem;
  text-decoration: none;
}

.matriz__menu {
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 var(--regla) var(--tinta);
  font-size: 0.9375rem;
  font-weight: 650;
  cursor: pointer;
}

.matriz__menu[aria-expanded="true"] {
  background: var(--tinta);
  color: var(--original);
}

.matriz__nav {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 4px 0 6px;
  font-size: 0.9375rem;
}

.matriz__lista,
.matriz__lista > li {
  display: contents;
}

.matriz__lista a {
  text-decoration: none;
}

.matriz__lista a:hover {
  text-decoration: underline;
}

.matriz__sublista {
  display: none;
}

.matriz__cta {
  min-height: 40px;
  font-size: 0.9375rem;
}

.js .matriz__atajo {
  display: inline-block;
}

.js .matriz__nav {
  display: none;
}

.js .matriz__nav.abierta {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  padding: 16px var(--margen) 24px;
  background: var(--original);
  box-shadow: inset 0 var(--regla) 0 var(--tinta), 0 14px 18px -14px rgb(14 74 58 / 0.4);
  font-size: 1.125rem;
}

.js .matriz__nav.abierta .matriz__lista {
  display: block;
}

.js .matriz__nav.abierta .matriz__lista > li {
  display: block;
  border-bottom: var(--regla) solid var(--raya);
}

.js .matriz__nav.abierta .matriz__lista a {
  display: block;
  padding: 11px 0;
}

.js .matriz__nav.abierta .matriz__sublista {
  display: block;
  padding: 0 0 8px 16px;
}

.js .matriz__nav.abierta .matriz__sublista a {
  padding: 6px 0;
  font-size: 1rem;
}

.js .matriz__nav.abierta .matriz__cta {
  margin-top: 18px;
  width: 100%;
}

@media (max-width: 23.74em) {
  .js .matriz__atajo {
    display: none;
  }
}

@media (max-width: 63.99em) {
  .matriz {
    z-index: 50;
  }
}

@media (min-width: 64em) {
  .matriz {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--matriz);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(20px, 4.4vh, 40px);
    padding: clamp(24px, 4.6vh, 40px) 24px 24px 40px;
    background: transparent;
    pointer-events: none;
  }

  .matriz > * {
    pointer-events: auto;
  }

  .matriz::after {
    top: 0;
    left: auto;
    right: -1.5px;
    bottom: 0;
    width: 3px;
    height: auto;
    background-size: 3px 7px;
    background-repeat: repeat-y;
  }

  .matriz__cabeza {
    margin: 0;
  }

  .matriz__marca {
    font-size: 1.625rem;
  }

  .matriz__lema {
    display: block;
    margin-top: 6px;
  }

  .matriz__numero {
    display: flex;
  }

  .matriz__numero .numero__valor {
    flex: 1;
    min-width: 0;
  }

  .js .matriz__atajo,
  .matriz__menu {
    display: none;
  }

  .matriz__nav,
  .js .matriz__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(14px, 3vh, 24px);
    padding: 0;
    font-size: 1rem;
  }

  .matriz__lista {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vh, 8px);
  }

  .matriz__lista > li {
    display: block;
  }

  .matriz__lista a {
    position: relative;
    display: inline-block;
    padding: 2px 0;
  }

  .matriz__sublista {
    display: block;
    margin-top: 2px;
    padding-left: 14px;
    font-size: 0.9375rem;
  }

  .matriz__lista a[aria-current]::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 50%;
    width: 18px;
    height: 14px;
    margin-top: -8px;
    background: var(--visto-violeta) center / contain no-repeat;
  }

  .matriz__cta {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.9375rem;
    font-stretch: 85%;
    white-space: nowrap;
  }
}

/* N.º del numerador */

.numero {
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.numero__rotulo {
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.numero__valor {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  min-width: 7.2em;
  min-height: 1.15em;
  color: var(--rojo);
  font-size: 1.875rem;
  font-stretch: 62%;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.numero__valor:empty {
  box-shadow: inset 0 calc(-1 * var(--regla)) 0 var(--tinta);
}

.rueda {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}

.rueda__medida {
  visibility: hidden;
}

.rueda__tira {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rueda__tira > span {
  height: 1em;
  line-height: 1;
}

/* ---------- Hojas (secciones) ---------- */

.hoja {
  position: relative;
  padding: var(--aire) var(--margen-dcho) calc(var(--aire) * 1.2) calc(var(--matriz) + var(--margen));
}

.hoja--original { background: var(--original); }
.hoja--canario { background: var(--canario); }
.hoja--rosa { background: var(--rosa); }
.hoja--celeste { background: var(--celeste); }
.hoja--verde { background: var(--verde); }
.hoja--dorso { background: var(--dorso); }

.hoja--tinta {
  background: var(--tinta);
  color: var(--original);
}

.hoja--tinta :focus-visible,
.membrete :focus-visible {
  outline-color: var(--papel);
}

@media (min-width: 64em) {
  .hoja--tinta {
    background: linear-gradient(to right, var(--bajo-matriz, var(--dorso)) var(--matriz), var(--tinta) var(--matriz));
  }
}

.hoja__cabecera {
  display: grid;
  gap: clamp(12px, 2vh, 20px);
  max-width: 60rem;
  margin-bottom: clamp(32px, 6vh, 56px);
}

.pagina-contacto {
  --bajo-matriz: var(--verde);
}

.pagina-respuesta {
  --bajo-matriz: var(--original);
}

/* ---------- Membrete (banda de tinta) ---------- */

.portada {
  background: var(--original);
}

.membrete {
  margin-left: var(--matriz);
  padding: clamp(24px, 4vh, 44px) var(--margen-dcho) clamp(26px, 4.4vh, 48px) var(--margen);
  background: var(--tinta);
  color: var(--original);
}

.membrete__titulo {
  max-width: 13em;
  font-size: var(--t-display);
  font-stretch: 118%;
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.membrete__entradilla {
  max-width: 58ch;
  margin-top: clamp(12px, 2.4vh, 24px);
  color: var(--papel);
  font-size: clamp(1.0625rem, 0.85rem + 0.55vw, 1.375rem);
  line-height: 1.42;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}

@media (max-width: 47.49em) {
  .membrete__titulo {
    font-stretch: 110%;
    line-height: 1;
  }
}

@media (min-width: 64em) {
  .membrete__titulo {
    max-width: 17em;
  }
}

/* ---------- Original (zona del formulario) ---------- */

.original {
  display: grid;
  padding: clamp(16px, 2.4vh, 24px) var(--margen-dcho) clamp(20px, 3.4vh, 32px) calc(var(--matriz) + var(--margen));
}

.original > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.formulario {
  position: relative;
  max-width: var(--hoja-max);
  background: var(--original);
}

.formulario__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin-bottom: 10px;
}

.formulario__titulo {
  font-size: var(--t-cuerpo);
  font-stretch: 100%;
  font-weight: 650;
  line-height: 1.3;
}

.formulario__aviso {
  font-size: var(--t-rotulo);
  line-height: 1.35;
}

.formulario__numero {
  display: flex;
  margin-left: auto;
}

.formulario__numero .numero__valor {
  min-width: 6.4em;
  font-size: 1.5rem;
}

@media (min-width: 64em) {
  .formulario__numero {
    display: none;
  }
}

@media (max-width: 23.74em) {
  .formulario__numero:has(.numero__valor:empty) {
    display: none;
  }
}

@media (max-width: 47.49em) {
  .formulario__aviso {
    order: 3;
    flex-basis: 100%;
  }
}

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 12px;
}

.formulario__pie > .letra-pequena:first-child {
  max-width: 62ch;
}

.formulario__hoja {
  margin-left: auto;
  font-stretch: 85%;
}

.formulario__prueba {
  flex-basis: 100%;
  order: -1;
  font-size: 0.9375rem;
}

@media (min-width: 64em) {
  .formulario__prueba {
    display: none;
  }

  .formulario__pie > .letra-pequena:first-child {
    max-width: none;
  }
}

/* Rejilla de casillas con reglas compartidas */

.rejilla {
  display: grid;
  gap: var(--regla);
  background: var(--tinta);
  border: var(--regla) solid var(--tinta);
}

.rejilla > * {
  background: var(--original);
  min-width: 0;
}

.rejilla--portada {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "mensaje"
    "perfil"
    "nombre"
    "email"
    "consentimiento"
    "enviar";
}

.rejilla--contacto {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "mensaje"
    "tipo"
    "perfil"
    "nombre"
    "email"
    "empresa"
    "telefono"
    "consentimiento"
    "enviar";
}

@media (min-width: 47.5em) {
  .rejilla--contacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "mensaje mensaje"
      "tipo tipo"
      "perfil perfil"
      "nombre email"
      "empresa telefono"
      "consentimiento enviar";
  }
}

.casilla--tipo { grid-area: tipo; }
.casilla--empresa { grid-area: empresa; }
.casilla--telefono { grid-area: telefono; }
.casilla--mensaje { grid-area: mensaje; }
.casilla--opciones { grid-area: perfil; }
.casilla--nombre { grid-area: nombre; }
.casilla--email { grid-area: email; }
.casilla--consentimiento { grid-area: consentimiento; }
.casilla--enviar { grid-area: enviar; }

@media (min-width: 47.5em) {
  .rejilla--portada {
    grid-template-columns: 34fr 40fr 26fr;
    grid-template-areas:
      "mensaje mensaje mensaje"
      "perfil perfil perfil"
      "nombre email enviar"
      "consentimiento consentimiento enviar";
  }
}

.casilla {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 7px 12px 8px;
}

.casilla:focus-within {
  outline: 2px solid var(--calco);
  outline-offset: -5px;
}

.casilla--opciones:focus-within,
.casilla--consentimiento:focus-within,
.casilla--enviar:focus-within {
  outline: none;
}

.casilla--suelta {
  border: var(--regla) solid var(--tinta);
  background: transparent;
}

.casilla__rotulo {
  display: block;
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
  line-height: 1.3;
}

.casilla__campo {
  display: block;
  width: 100%;
  min-height: 34px;
  margin: 2px 0 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--calco);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  caret-color: var(--calco);
  appearance: none;
}

.casilla__campo:focus,
.casilla__campo:focus-visible {
  outline: none;
}

.casilla__campo::placeholder {
  color: var(--tinta-2);
  opacity: 1;
}

.casilla__campo--rayado {
  --lh: 32px;
  min-height: calc(var(--lh) * 3 + 2px);
  max-height: calc(var(--lh) * 9 + 2px);
  padding: 0;
  line-height: var(--lh);
  resize: none;
  field-sizing: content;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--lh) - 1px), var(--raya) calc(var(--lh) - 1px), var(--raya) var(--lh));
  background-attachment: local;
}

@media (min-width: 47.5em) {
  .casilla__campo--rayado {
    --lh: 30px;
    min-height: calc(var(--lh) * 2 + 2px);
  }

  .rejilla--portada .casilla__campo--rayado {
    max-height: calc(var(--lh) * 4 + 2px);
    overflow-y: auto;
  }
}

input.casilla__campo {
  background: linear-gradient(var(--raya), var(--raya)) left bottom / 100% 1px no-repeat;
}

select.casilla__campo {
  padding-right: 28px;
  background: var(--flecha) right 4px center / 14px 9px no-repeat;
  cursor: pointer;
}

.casilla__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 20px;
  margin-top: 4px;
}

.casilla__ayuda,
.casilla__pista,
.casilla__contador {
  font-size: var(--t-rotulo);
  line-height: 1.4;
  color: var(--tinta-2);
}

.casilla__ayuda {
  margin-top: 2px;
}

.casilla__pie .casilla__ayuda {
  margin-top: 0;
}

.casilla__pista {
  color: var(--tinta-2);
}

.casilla__contador {
  font-variant-numeric: tabular-nums;
}

.casilla__error {
  margin-top: 4px;
  color: var(--rojo);
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.4;
}

.casilla.con-error {
  box-shadow: inset 0 0 0 2px var(--rojo);
}

/* Opciones (radio y casilla de verificación) */

.opciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin-top: 6px;
}

@media (min-width: 47.5em) {
  .opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 28px;
    margin-top: 0;
  }

  .casilla--opciones {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    padding-block: 9px;
  }

  .casilla--opciones .casilla__rotulo {
    min-width: 6.5rem;
  }

  .casilla--email .casilla__ayuda {
    position: absolute;
    top: 7px;
    right: 12px;
    max-width: calc(100% - 5rem);
    margin: 0;
    text-align: right;
  }
}

.opcion {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 32px;
  padding: 3px 0;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
}

.opcion input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: var(--regla) solid var(--tinta);
  border-radius: 50%;
  background: var(--original);
  appearance: none;
  cursor: pointer;
}

.opcion input[type="checkbox"] {
  border-radius: 0;
}

.opcion input:checked {
  background: var(--visto-violeta) 3px -1px / 17px 14px no-repeat, var(--original);
}

.opcion input:focus-visible {
  outline: 2px solid var(--calco);
  outline-offset: 3px;
}

.casilla--consentimiento {
  justify-content: center;
  padding-block: 10px;
}

.casilla--consentimiento .opcion {
  font-size: 0.9375rem;
}

.casilla--enviar {
  display: flex;
  padding: 0;
  background: var(--tinta);
}

.boton--enviar {
  flex: 1;
  justify-content: flex-start;
  align-items: flex-end;
  min-height: 56px;
  padding: 14px 18px;
  text-align: left;
}

@media (min-width: 47.5em) {
  .boton--enviar {
    min-height: 100%;
    padding: 16px 20px 18px;
  }
}

.boton--enviar:focus-visible {
  outline: 2px solid var(--calco);
  outline-offset: 3px;
}

/* Campo trampa */

.trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Resumen de errores y aviso de envío */

.resumen-errores,
.aviso-envio {
  margin: 0 0 12px;
  padding: 12px 14px;
  box-shadow: inset 0 0 0 2px var(--rojo);
  background: var(--original);
}

.resumen-errores:focus {
  outline: 2px solid var(--calco);
  outline-offset: 3px;
}

.resumen-errores__titulo,
.aviso-envio__titulo {
  color: var(--rojo);
  font-weight: 650;
}

.resumen-errores__lista {
  margin-top: 4px;
}

.resumen-errores__lista a {
  color: var(--rojo);
}

.aviso-envio {
  margin: 12px 0 0;
}

.aviso-envio__texto {
  max-width: 62ch;
  margin-top: 2px;
  font-size: 1rem;
}

/* Confirmación (copia canario) */

.confirmacion {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(20px, 3vh, 32px) clamp(16px, 2.4vw, 28px);
  background: var(--canario);
  box-shadow: var(--sombra-hoja);
}

.confirmacion__titulo {
  font-size: var(--t-titulo);
  font-stretch: 118%;
  font-weight: 780;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.confirmacion__titulo:focus {
  outline: none;
}

.confirmacion__titulo:focus-visible {
  outline: 2px solid var(--calco);
  outline-offset: 3px;
}

.confirmacion__numero {
  display: flex;
}

.confirmacion__texto {
  max-width: 60ch;
}

.confirmacion__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.confirmacion .casilla--suelta {
  max-width: 62ch;
}

/* ---------- Calco ---------- */

.calco {
  color: var(--calco);
  font-weight: var(--peso-calco, 520);
  text-shadow: 0 0 0.4px currentColor;
}

.calco span {
  position: relative;
  top: var(--dy, 0);
  opacity: var(--o, 1);
}

.calco--completo {
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-mask-image: var(--grano);
  mask-image: var(--grano);
  -webkit-mask-size: 140px;
  mask-size: 140px;
}

@keyframes entintar {
  from {
    opacity: 0.2;
    filter: blur(0.8px);
  }
}

.calco .tinta {
  animation: entintar 180ms var(--curva) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* ---------- Conversación de ejemplo ---------- */

.intro {
  display: grid;
  gap: clamp(32px, 5vh, 48px);
  padding-bottom: calc(var(--aire) * 1.1);
}

@media (min-width: 64em) {
  .intro {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(40px, 5vw, 80px);
  }
}

.intro__texto {
  display: grid;
  gap: clamp(14px, 2.4vh, 22px);
}

.conversacion {
  border: var(--regla) solid var(--tinta);
}

.conversacion__pie {
  padding: 7px 12px 6px;
  border-bottom: var(--regla) solid var(--tinta);
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.conversacion__linea {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 12px;
  padding: 9px 12px 10px;
  font-size: 1rem;
  line-height: 1.45;
}

.conversacion__linea + .conversacion__linea {
  border-top: 1px solid var(--raya);
}

.conversacion__quien {
  padding-top: 2px;
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.conversacion__linea--cliente p {
  color: var(--calco);
  font-weight: 500;
}

@media (max-width: 47.49em) {
  .conversacion__linea {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .conversacion__quien {
    padding-top: 0;
  }
}

/* ---------- Talonario: copias pegadas al pie ---------- */

.talonario {
  position: relative;
}

.copia {
  --b: calc((3 - var(--i)) * var(--h-copia));
  position: sticky;
  bottom: var(--b);
  z-index: 5;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: end;
  column-gap: 14px;
  height: var(--h-copia);
  padding: 0 var(--margen-dcho) 4px var(--margen);
  box-shadow: var(--sombra-hoja);
  font-size: 0.9375rem;
  line-height: 1.2;
}

.copia > * {
  transition: opacity 140ms ease-out;
}

.copia--canario { --i: 0; background: var(--canario); }
.copia--rosa { --i: 1; background: var(--rosa); }
.copia--celeste { --i: 2; background: var(--celeste); }
.copia--verde { --i: 3; background: var(--verde); }

@media (min-width: 47.5em) {
  .copia {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    align-items: last baseline;
    column-gap: 20px;
    padding: 0 var(--margen-dcho) calc(var(--h-copia) / 2 - 0.72em) calc(var(--matriz) + var(--margen));
    font-size: 1.0625rem;
  }
}

.copia__nombre {
  font-size: 1.0625rem;
  font-stretch: 118%;
  font-weight: 760;
  line-height: 1.1;
  white-space: nowrap;
}

@media (min-width: 47.5em) {
  .copia__nombre {
    font-size: clamp(1.25rem, 1rem + 0.55vw, 1.5rem);
    font-weight: 780;
    letter-spacing: -0.01em;
  }
}

.copia__nombre a {
  text-decoration: none;
}

.copia__nombre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.copia__nombre a:focus-visible {
  outline: none;
}

.copia__nombre a:focus-visible::after {
  outline: 2px solid var(--calco);
  outline-offset: -4px;
}

.copia__linea {
  --peso-calco: calc(530 - var(--i) * 14);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--calco);
  -webkit-mask-image: var(--grano);
  mask-image: var(--grano);
  -webkit-mask-size: 140px;
  mask-size: 140px;
}

.copia__linea--cola {
  direction: rtl;
  text-align: left;
}

.copia__texto {
  position: relative;
  left: calc(0.4px + var(--i) * 0.3px);
  top: calc(var(--i) * 0.25px);
  direction: ltr;
  unicode-bidi: isolate;
}

.copia__ejemplo {
  margin-right: 0.3em;
  color: var(--tinta);
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
  text-shadow: none;
}

.copia__linea .calco {
  font-size: 1em;
  text-shadow: 0 0 0.6px rgb(68 54 166 / 0.55), 0.3px 0.25px 0 rgb(68 54 166 / 0.22);
}

/* Modos de la pila: completa (por defecto), siguiente, cantos y oculta */

.talonario[data-pila="siguiente"] .copia {
  --b: calc((3 - var(--i)) * var(--canto));
}

.talonario[data-pila="siguiente"] .copia.esperando {
  z-index: calc(30 - var(--i));
}

.talonario[data-pila="cantos"] .copia {
  --b: calc((3 - var(--i)) * var(--canto) - var(--h-copia) + var(--canto));
}

.talonario[data-pila="cantos"] .copia.esperando {
  z-index: calc(26 + var(--i));
}

.talonario[data-pila="cantos"] .copia.esperando > *,
.talonario[data-pila="siguiente"] .copia.esperando.tapada > * {
  opacity: 0;
}

.talonario[data-pila="completa"] .copia.esperando {
  z-index: calc(26 + var(--i));
}

.talonario[data-pila="oculta"] .copia.esperando {
  visibility: hidden;
}

.talonario[data-pila="cantos"] .copia.esperando,
.talonario[data-pila="oculta"] .copia.esperando,
.talonario[data-pila="siguiente"] .copia.tapada {
  pointer-events: none;
}

@media (max-width: 47.49em), (max-height: 43.74em) {
  .talonario:not([data-pila]) .copia {
    --b: calc((3 - var(--i)) * var(--canto) - var(--h-copia) + var(--canto));
    pointer-events: none;
  }
}

.talonario:not([data-pila]):has(.formulario :focus) .copia {
  --b: calc((3 - var(--i)) * var(--canto) - var(--h-copia) + var(--canto));
}

.talonario .copia:focus-within {
  z-index: 40;
}

.talonario .copia:focus-within > * {
  opacity: 1 !important;
}

.talonario[data-pila="cantos"] .copia.esperando:focus-within,
.talonario[data-pila="siguiente"] .copia.tapada:focus-within {
  --b: calc((3 - var(--i)) * var(--h-copia));
}

/* ---------- Cuerpos de cada copia ---------- */

.copia + .hoja {
  margin-top: -1px;
}

.fase {
  display: grid;
  align-content: start;
  gap: clamp(28px, 5vh, 48px);
  padding-top: clamp(36px, 6.5vh, 64px);
  padding-bottom: clamp(56px, 10vh, 112px);
}

.fase--ultima {
  padding-bottom: clamp(48px, 8vh, 88px);
}

.pasos {
  display: grid;
  gap: clamp(28px, 4.5vh, 44px);
  max-width: 72rem;
}

.intro__texto .pasos {
  margin-top: 8px;
}

.paso {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  align-items: baseline;
}

@media (min-width: 47.5em) {
  .paso {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
}

.paso__num {
  grid-row: span 2;
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
  font-stretch: 62%;
  font-weight: 600;
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
}

.paso__titulo {
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.paso__texto {
  max-width: 54ch;
  hyphens: auto;
  text-wrap: pretty;
}

@media (max-width: 47.49em) {
  .paso {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .paso__num {
    grid-row: auto;
  }

  .paso__texto {
    grid-column: 1 / -1;
  }
}

.por-ejemplo {
  max-width: 44rem;
  border: var(--regla) solid var(--tinta);
}

@media (min-width: 47.5em) {
  .por-ejemplo {
    margin-left: calc(3rem + 14px);
  }
}

.por-ejemplo__rotulo,
.publicado__rotulo {
  padding: 7px 12px 0;
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.por-ejemplo__texto {
  padding: 4px 12px 12px;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.4;
}

/* Tabla de conceptos */

.conceptos {
  width: 100%;
  max-width: 64rem;
  border: var(--regla) solid var(--tinta);
  font-size: 1rem;
  line-height: 1.4;
  text-align: left;
}

.fase .conceptos {
  margin-left: calc(2.25rem + 14px);
  width: calc(100% - 2.25rem - 14px);
}

@media (min-width: 47.5em) {
  .fase .conceptos {
    margin-left: calc(3rem + 14px);
    width: calc(100% - 3rem - 14px);
  }
}

.conceptos__pie {
  padding: 0 0 8px;
  caption-side: top;
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
  text-align: left;
}

.conceptos th,
.conceptos td {
  padding: 9px 12px 10px;
  border: var(--regla) solid var(--tinta);
  vertical-align: top;
}

.conceptos thead th {
  padding-block: 6px 5px;
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.conceptos tbody th {
  font-weight: 650;
}

.conceptos__hecho {
  width: 4.5rem;
  text-align: center;
}

.visto {
  display: inline-block;
  width: 22px;
  height: 17px;
  vertical-align: middle;
  background-color: var(--calco);
  -webkit-mask: var(--visto) center / contain no-repeat;
  mask: var(--visto) center / contain no-repeat;
}

@media (max-width: 47.49em) {
  .fase .conceptos,
  .conceptos--funciones {
    font-size: 0.9375rem;
  }

  .fase .conceptos {
    margin-left: 0;
    width: 100%;
  }

  .conceptos th,
  .conceptos td {
    padding: 8px 8px 9px;
  }
}

/* Marcas de publicación */


@media (min-width: 47.5em) {
  .publicado {
    margin-left: calc(3rem + 14px);
  }
}

.publicado__rotulo {
  padding: 0 0 8px;
}

.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 3vw, 40px);
}

.marca {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.marca__caja {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  box-shadow: inset 0 0 0 var(--regla) var(--tinta);
}

.marca__caja .visto {
  position: absolute;
  left: 4px;
  top: -2px;
  width: 24px;
  height: 19px;
}

.marca__texto {
  display: grid;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.2;
}

.marca__nota {
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Qué puedes encargarnos ---------- */

.tipos {
  max-width: 72rem;
  border-top: var(--regla) solid var(--tinta);
}

.tipos__fila {
  display: grid;
  gap: 6px 32px;
  padding: 16px 0 18px;
  border-bottom: var(--regla) solid var(--tinta);
}

@media (min-width: 47.5em) {
  .tipos__fila {
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
    padding: 18px 0 20px;
  }
}

.tipos dt {
  text-wrap: balance;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tipos dd {
  max-width: 60ch;
  hyphens: auto;
  text-wrap: pretty;
}

.tipos dd a {
  white-space: nowrap;
}

/* ---------- Proyectos ---------- */

.proyectos {
  padding-bottom: calc(var(--aire) * 0.8);
}

.proyecto {
  display: grid;
  gap: clamp(28px, 4vh, 40px);
  padding: clamp(32px, 6vh, 64px) 0 clamp(40px, 7vh, 72px);
}

.proyecto__datos {
  display: grid;
  align-content: start;
  gap: 14px;
  max-width: 34rem;
}

.proyecto__nombre {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.556rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
}

.proyecto__tipo {
  font-weight: 650;
}

.proyecto__texto {
  max-width: 58ch;
  hyphens: manual;
  text-wrap: pretty;
}

.proyecto__enlace {
  margin-top: 6px;
}

.ficha {
  display: grid;
  gap: var(--regla);
  margin-top: 6px;
  background: var(--tinta);
  border: var(--regla) solid var(--tinta);
}

@media (min-width: 30em) {
  .ficha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ficha__casilla {
  padding: 7px 12px 10px;
  background: var(--original);
}

.ficha dt {
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
  line-height: 1.3;
}

.ficha dd {
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1.4;
}

.ficha dd a {
  white-space: nowrap;
}

.adjuntos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 220px);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}

.adjuntos:focus-visible {
  outline-offset: 4px;
}

.adjunto {
  scroll-snap-align: start;
  border: var(--regla) solid var(--tinta);
  background: var(--original);
}

.adjunto__pie {
  padding: 6px 10px 6px;
  border-bottom: var(--regla) solid var(--tinta);
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.adjunto img {
  width: 100%;
  padding: 8px;
  background: #fff;
}

.proyecto__nota {
  color: var(--tinta-2);
}

.proyecto__grupo {
  display: contents;
}

@media (min-width: 64em) {
  .proyecto--bomshop {
    row-gap: 12px;
  }

  .proyecto--bomshop .proyecto__datos {
    grid-template-columns: minmax(0, 34rem) minmax(0, 26rem);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
    max-width: none;
  }

  .proyecto--bomshop .proyecto__grupo {
    display: grid;
    align-content: start;
    gap: 14px;
  }

  .proyecto--bomshop .proyecto__grupo--lateral .ficha {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }

  .proyecto--bomshop .adjuntos {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 300px));
    margin-top: clamp(16px, 3vh, 32px);
    overflow: visible;
    padding-bottom: 0;
  }

  .proyecto--bomtask {
    grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
}

.conceptos--funciones tbody th {
  width: 38%;
}

/* ---------- Para quién ---------- */

.publico {
  padding-bottom: calc(var(--aire) * 0.6);
}

.publico__caja {
  max-width: 72rem;
  padding: 0;
}

.publico__caja > .casilla__rotulo {
  padding: 7px 12px 8px;
}

.publico__fila {
  display: grid;
  gap: 6px;
  padding: 14px 12px 16px;
  border-top: var(--regla) solid var(--tinta);
}

@media (min-width: 47.5em) {
  .publico__fila {
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }

  .publico__fila > dt,
  .publico__fila > dd {
    padding: 16px 16px 18px;
  }

  .publico__fila > dt {
    padding-left: 12px;
    border-right: var(--regla) solid var(--tinta);
  }
}

.publico dt {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.publico dd {
  max-width: 60ch;
  hyphens: auto;
  text-wrap: pretty;
}

.publico__fila--agencia dd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px 32px;
  max-width: none;
}

.publico__texto {
  flex: 0 1 34rem;
  max-width: 60ch;
}

.publico__fila--agencia .en-blanco {
  flex: none;
}

.en-blanco {
  display: grid;
  gap: 9px;
  width: 200px;
  padding: 0 0 12px;
  border: var(--regla) solid var(--tinta);
  background: var(--original);
}

.en-blanco__membrete {
  display: grid;
  place-items: center;
  height: 34px;
  margin: 6px 6px 0;
  border: var(--regla) dashed var(--tinta);
}

.en-blanco__rotulo {
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.en-blanco__raya {
  display: block;
  height: 1px;
  margin: 0 10px;
  background: var(--raya);
}

/* ---------- Preguntas ---------- */

.preguntas {
  padding-top: calc(var(--aire) * 0.6);
}

.preguntas__lista {
  max-width: 64rem;
  border-top: var(--regla) solid var(--tinta);
}

.pregunta {
  border-bottom: var(--regla) solid var(--tinta);
}

.pregunta__titulo {
  position: relative;
  display: block;
  padding: 16px 44px 17px 0;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  font-weight: 650;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.pregunta__titulo::-webkit-details-marker {
  display: none;
}

.pregunta__titulo::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  box-shadow: inset 0 0 0 var(--regla) var(--tinta);
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 1.5px 10px no-repeat;
}

.pregunta[open] > .pregunta__titulo::after {
  background: linear-gradient(var(--tinta), var(--tinta)) center / 10px 1.5px no-repeat;
}

.pregunta__titulo:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.pregunta__titulo:focus-visible {
  outline-offset: 2px;
}

.pregunta__respuesta {
  padding: 0 44px 22px 0;
}

.pregunta__respuesta p {
  max-width: 62ch;
  hyphens: auto;
  text-wrap: pretty;
}

/* ---------- Cierre y contraportada ---------- */

.cierre {
  display: grid;
  justify-items: start;
  gap: clamp(16px, 2.6vh, 24px);
  padding-top: calc(var(--aire) * 1.1);
  padding-bottom: calc(var(--aire) * 0.9);
}

.cierre__titulo {
  max-width: 22em;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 2.875rem);
}

.cierre__texto {
  max-width: 52ch;
  color: var(--papel);
}

.cierre__accion {
  margin-top: 8px;
}

.contraportada {
  display: grid;
  gap: 32px 40px;
  padding-top: clamp(40px, 6vh, 56px);
  padding-bottom: clamp(32px, 5vh, 48px);
  font-size: 1rem;
}

.contraportada::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--matriz) + var(--margen));
  right: var(--margen-dcho);
  height: 1px;
  background: rgb(227 240 234 / 0.35);
}

main:not(:has(> .cierre:last-child)) + .contraportada::before {
  content: none;
}

@media (min-width: 47.5em) {
  .contraportada {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
}

.contraportada a {
  text-decoration-color: rgb(227 240 234 / 0.6);
}

.contraportada a:hover {
  text-decoration-color: currentColor;
}

.contraportada__nombre {
  font-size: 1.625rem;
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.contraportada__frase {
  max-width: 24ch;
  margin-top: 10px;
  color: var(--papel);
}

.contraportada__dominio {
  margin-top: 6px;
  color: var(--papel);
}

.contraportada__rotulo {
  margin-bottom: 8px;
  color: var(--papel);
  font-size: var(--t-rotulo);
  font-stretch: 85%;
  font-weight: 500;
}

.contraportada__columna li + li {
  margin-top: 6px;
}

.contraportada__pie {
  grid-column: 1 / -1;
  color: var(--papel);
  font-size: var(--t-rotulo);
}

/* ---------- Migas de pan (páginas interiores) ---------- */

.migas {
  margin-bottom: 14px;
  color: var(--papel);
  font-size: 0.9375rem;
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
}

.migas li + li::before {
  content: "/";
  margin: 0 0.5em;
}

.migas a {
  text-decoration-color: rgb(227 240 234 / 0.6);
}

.migas a:hover {
  text-decoration-color: currentColor;
}

.migas [aria-current] {
  color: var(--original);
}

/* ---------- Páginas de proyecto ---------- */

.caso > * + * {
  margin-top: clamp(32px, 5.5vh, 56px);
}

.caso > .perforacion,
.caso > .perforacion + * {
  margin-top: clamp(44px, 8vh, 80px);
}

.caso .hoja__cabecera {
  margin-bottom: clamp(24px, 4vh, 40px);
}

.caso > .hoja__cabecera {
  margin-bottom: 0;
}

.caso .ficha {
  max-width: var(--hoja-max);
  margin-top: 0;
}

.caso .conceptos {
  max-width: var(--hoja-max);
}

@media (min-width: 64em) {
  .ficha--fila {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.adjuntos--caso {
  grid-auto-columns: minmax(212px, 250px);
}

@media (min-width: 64em) {
  .adjuntos--caso {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: var(--hoja-max);
    overflow: visible;
    padding-bottom: 0;
  }
}

.caso__nota {
  margin-top: 10px;
}

.observaciones {
  max-width: 48rem;
  padding: 7px 16px 16px;
}

.observaciones__lista {
  margin-top: 4px;
}

.observaciones__lista dt,
.observaciones__lista dd > p,
.observaciones__lista dd:not(:has(p)) {
  line-height: 32px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--raya) 31px, var(--raya) 32px);
  text-wrap: pretty;
}

.observaciones__lista dt {
  font-weight: 650;
}

.observaciones__lista dd + dt {
  padding-top: 32px;
}

.conceptos--quien {
  max-width: 34rem;
  margin-top: 16px;
  background: var(--dorso);
}

.conceptos--quien tbody th {
  font-weight: 500;
}

.cierre__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 4px;
  color: var(--papel);
  font-size: 1rem;
}

.cierre__enlaces a {
  text-decoration-color: rgb(227 240 234 / 0.6);
}

.cierre__enlaces a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Contacto ---------- */

.original--contacto {
  row-gap: clamp(36px, 6vh, 56px);
}

.original--contacto > .despues {
  grid-area: 2 / 1;
}

@media (min-width: 75em) {
  .original--contacto {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    column-gap: clamp(36px, 4vw, 64px);
  }

  .original--contacto > .despues {
    grid-area: 1 / 2;
    align-self: start;
    margin-top: 38px;
  }
}

@media (min-width: 47.5em) {
  .rejilla--contacto .opciones {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 40px;
  }
}

.rejilla--contacto .casilla--email .casilla__ayuda {
  position: static;
  max-width: none;
  margin-top: 2px;
  text-align: left;
}

@media (min-width: 47.5em) {
  .casilla--tipo {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    column-gap: 28px;
  }

  .casilla--tipo .casilla__rotulo,
  .casilla--tipo .casilla__error {
    grid-column: 1 / -1;
  }

  .casilla--tipo .casilla__ayuda {
    margin-top: 0;
  }
}

select.casilla__campo:has(option[value=""]:checked) {
  color: var(--tinta-2);
}

select.casilla__campo option {
  color: var(--tinta);
}

.despues {
  padding-top: 10px;
  border-top: var(--regla) solid var(--tinta);
}

.despues__titulo {
  font-size: 1.25rem;
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.despues__lista {
  counter-reset: paso;
  margin-top: 12px;
}

.despues__lista li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 10px;
  padding: 11px 0 13px;
  border-top: 1px solid var(--raya);
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.despues__lista li::before {
  content: counter(paso);
  counter-increment: paso;
  font-size: 1.5rem;
  font-stretch: 62%;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fase--breve {
  gap: 0;
  padding-top: clamp(14px, 2.6vh, 24px);
  padding-bottom: clamp(30px, 5.4vh, 52px);
}

.fase--breve.fase--ultima {
  padding-bottom: clamp(56px, 10vh, 104px);
}

.fase__texto {
  max-width: 52ch;
  font-size: var(--t-entradilla);
  line-height: 1.42;
  hyphens: manual;
  text-wrap: pretty;
}

/* ---------- Página no encontrada ---------- */

.extravio {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: clamp(16px, 3vh, 28px);
  min-height: 72vh;
  padding-top: clamp(40px, 9vh, 104px);
}

.extravio__titulo {
  max-width: 13em;
  font-size: var(--t-display);
  font-stretch: 118%;
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (max-width: 47.49em) {
  .extravio__titulo {
    font-stretch: 110%;
    line-height: 1;
  }
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 8px;
}

/* ---------- Respuestas del formulario sin JavaScript ---------- */

.original.respuesta {
  justify-items: start;
  align-content: start;
  gap: 18px;
  min-height: 58vh;
}

.original.respuesta > * {
  grid-area: auto;
}

.respuesta .confirmacion,
.respuesta .resumen-errores {
  justify-self: stretch;
  max-width: 64rem;
}

.respuesta .resumen-errores {
  margin: 0;
  padding: 14px 16px;
}

.errores li {
  color: var(--rojo);
  font-weight: 560;
  line-height: 1.4;
}

.errores li + li {
  margin-top: 6px;
}

.respuesta__texto {
  max-width: 60ch;
}

/* ---------- Partición de palabras en pantallas estrechas ---------- */

@media (max-width: 47.49em) {
  .prosa p,
  .prosa li,
  .paso__texto,
  .tipos dd,
  .publico dd,
  .pregunta__respuesta p {
    hyphens: manual;
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .calco .tinta {
    animation: none;
  }
}

/* ---------- Impresión de la copia ---------- */

@media print {
  .matriz,
  .copia,
  .salto {
    display: none !important;
  }

  html.enviado body {
    visibility: hidden;
  }

  html.enviado [data-confirmacion],
  html.enviado [data-confirmacion] * {
    visibility: visible;
  }

  html.enviado [data-confirmacion] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: none;
  }

  html.enviado [data-confirmacion] .confirmacion__acciones {
    display: none;
  }
}