/* Sitio público de Ozor.

   La idea que ordena todo: el papeleo fiscal bien hecho. Papel, tinta de
   bolígrafo, un sello de goma y formularios con casillas, porque eso es lo que
   el cliente conoce de Hacienda y lo que Ozor le quita de encima. Nada de
   brillos ni tarjetas flotando: cada adorno es un objeto de oficina.

   Es un documento estático, sin framework ni paso de construcción. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fuentes/archivo.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fuentes/plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fuentes/plex-mono-600.woff2") format("woff2");
}

:root {
  --papel: #f3efe7;
  --mesa: #ebe5d9;
  --hoja: #fbf9f4;
  --tinta: #1c2026;
  --tinta-2: #3c4148;
  --grafito: #6b7077;
  --regla: #d6cebf;
  --azul: #2346a0;
  --rojo: #c0391f;

  --letra: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --ancho: 1180px;
  --margen: clamp(18px, 4vw, 44px);
  --seccion: clamp(64px, 9vw, 120px);

  /* El grano del papel: ruido fractal muy tenue, en un mosaico que el
     navegador pinta una vez. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--grano), var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: rgb(35 70 160 / 18%);
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

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

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.oculto {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 0 var(--margen);
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--tinta);
  color: var(--hoja);
  text-decoration: none;
}

.saltar:focus {
  top: 16px;
}

/* --- marca ------------------------------------------------------------------ */

.logotipo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--tinta);
  text-decoration: none;
}

.logotipo span {
  font-size: 27px;
  font-weight: 700;
  font-stretch: 122%;
  letter-spacing: -0.02em;
  line-height: 1;
}

.monograma {
  width: 26px;
  height: 26px;
  flex: none;
}

.monograma path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.8;
  stroke-linecap: round;
}

.monograma circle {
  fill: var(--rojo);
}

/* --- botones y enlaces ------------------------------------------------------ */

/* Un botón con su canto: se hunde al pulsarlo, como una tecla. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 90ms ease-out,
    box-shadow 90ms ease-out,
    background-color 150ms ease;
}

.boton-tinta {
  background: var(--tinta);
  color: var(--hoja);
  box-shadow: 0 3px 0 #000;
}

.boton-tinta:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #000;
}

.boton-chico {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
  box-shadow: 0 2px 0 #000;
}

.boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (hover: hover) {
  .boton-tinta:hover {
    background: #2b3038;
  }
}

.enlace-flecha {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--azul);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.enlace-flecha::after {
  content: " →";
}

.nota-mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grafito);
}

/* --- cabecera ----------------------------------------------------------------- */

.cabecera {
  position: relative;
  z-index: 5;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--regla);
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}

.navegacion {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15.5px;
}

.navegacion a:not(.boton) {
  color: var(--tinta-2);
  text-decoration: none;
}

@media (hover: hover) {
  .navegacion a:not(.boton):hover {
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: var(--azul);
    text-underline-offset: 5px;
  }
}

.navegacion-entrar {
  padding-left: 28px;
  border-left: 1px solid var(--regla);
}

.boton-menu {
  display: none;
  min-height: 42px;
  padding: 0 16px;
  border: 1.5px solid var(--tinta);
  border-radius: 3px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* --- portada ------------------------------------------------------------------ */

.portada {
  padding: clamp(40px, 7vw, 88px) 0 0;
}

.portada-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.portada-texto {
  padding-top: clamp(0px, 3vw, 36px);
}

.titular {
  margin-top: 22px;
  font-size: clamp(3.1rem, 7.2vw, 6.3rem);
  font-weight: 760;
  font-stretch: 74%;
  line-height: 0.93;
  letter-spacing: -0.012em;
}

/* El subrayado lo traza una mano con plumón rojo, una vez, al cargar. */
.subrayado {
  position: relative;
  white-space: nowrap;
}

.subrayado svg {
  position: absolute;
  left: -2%;
  bottom: -0.06em;
  width: 104%;
  height: 0.26em;
  overflow: visible;
}

.subrayado path {
  fill: none;
  stroke: var(--rojo);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: trazo 700ms cubic-bezier(0.6, 0.1, 0.3, 1) 900ms forwards;
}

@keyframes trazo {
  to {
    stroke-dashoffset: 0;
  }
}

.entrada {
  max-width: 32em;
  margin-top: 30px;
  font-size: clamp(17px, 1.45vw, 19.5px);
  color: var(--tinta-2);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  margin-top: 36px;
}

/* --- el escritorio: la impresora, el ticket y el sello --------------------- */

.escritorio {
  position: relative;
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 4px;
}

.impresora {
  position: relative;
  z-index: 2;
  height: 26px;
  margin: 0 -10px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(#4a4f57, #2a2e34);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 8px 14px -8px rgb(0 0 0 / 50%);
}

/* La ranura por donde sale el papel. */
.impresora span {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background: #0d0f12;
}

.rollo {
  position: relative;
  z-index: 1;
  margin: -9px 6px 0;
  padding: 0 12px 26px;
  overflow: hidden;
  transform-origin: 50% 0;
  animation:
    arrancar 450ms cubic-bezier(0.3, 0.7, 0.3, 1) 2150ms both,
    golpe 220ms ease-out 3050ms;
}

.ticket {
  position: relative;
  padding: 20px 16px 34px;
  background: #fdfcf8;
  color: #23272d;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  filter: drop-shadow(0 12px 12px rgb(60 45 20 / 16%));
  /* El borde de abajo, dentado: así queda el papel térmico al arrancarlo. */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  /* Sale a tirones, como de una impresora de verdad: el motor avanza por
     pasos, no con suavidad. */
  animation: imprimir 1700ms steps(28, end) 350ms both;
}

/* Se desenrolla desde la ranura, renglón a renglón: el recorte deja margen a
   los lados y abajo para que no se coma la sombra. */
@keyframes imprimir {
  from {
    clip-path: inset(0 -30px 100% -30px);
  }
  to {
    clip-path: inset(0 -30px -40px -30px);
  }
}

@keyframes arrancar {
  to {
    transform: translateY(16px) rotate(2.4deg);
  }
}

@keyframes golpe {
  0%,
  100% {
    transform: translateY(16px) rotate(2.4deg);
  }
  35% {
    transform: translateY(19px) rotate(2.1deg);
  }
}

.ticket p {
  margin: 0;
}

.ticket hr {
  height: 0;
  margin: 9px 0;
  border: 0;
  border-top: 1.5px dashed #9aa0a6;
}

.t-centro {
  text-align: center;
}

.t-fuerte {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.t-tenue {
  color: #7a7f86;
}

.t-par,
.t-linea {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.t-total {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
}

/* El QR a la izquierda deja a su derecha el hueco donde cae el sello. */
.t-qr {
  width: 92px;
  height: 92px;
  margin: 14px 0 8px;
  fill: #23272d;
}

.t-sello {
  font-size: 9.5px;
  letter-spacing: 0.02em;
}

.t-muestra {
  position: absolute;
  left: 50%;
  top: 44%;
  font-family: var(--letra);
  font-size: 58px;
  font-weight: 800;
  font-stretch: 70%;
  letter-spacing: 0.08em;
  color: rgb(35 39 45 / 6%);
  transform: translate(-50%, -50%) rotate(-32deg);
  pointer-events: none;
}

/* El sello de goma. La tinta lleva el filtro #tinta: grano, huecos y bordes
   que no son del todo rectos. `multiply` la mezcla con el papel. */
.sello-goma {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 156px;
  width: 160px;
  color: var(--rojo);
  mix-blend-mode: multiply;
  transform: rotate(-9deg);
  animation: estampar 420ms cubic-bezier(0.2, 0.9, 0.25, 1.25) 2800ms both;
}

.sello-goma rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
}

.sello-goma .sello-fino {
  stroke-width: 1.6;
}

.sello-goma text {
  fill: currentColor;
  font-family: var(--letra);
  text-anchor: middle;
}

.sello-grande {
  font-size: 46px;
  font-weight: 800;
  font-stretch: 66%;
  letter-spacing: 0.06em;
}

.sello-chico {
  font-size: 14px;
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: 0.14em;
}

@keyframes estampar {
  0% {
    opacity: 0;
    transform: translateY(-34px) scale(1.4) rotate(-15deg);
  }
  65% {
    opacity: 0.95;
    transform: translateY(0) scale(0.95) rotate(-9deg);
  }
  100% {
    opacity: 0.92;
    transform: translateY(0) scale(1) rotate(-9deg);
  }
}

.escritorio figcaption {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grafito);
  text-align: center;
}

.tipos {
  margin-top: clamp(48px, 7vw, 84px);
  padding: 22px 0;
  border-top: 1px solid var(--regla);
  border-bottom: 1px solid var(--regla);
  font-size: 15.5px;
  color: var(--tinta-2);
}

.tipos strong {
  color: var(--tinta);
}

/* --- secciones ---------------------------------------------------------------- */

.seccion {
  padding: var(--seccion) 0;
}

.seccion-corta {
  padding: calc(var(--seccion) * 0.7) 0;
}

.seccion-mesa {
  background: var(--grano), var(--mesa);
}

.seccion h2 {
  max-width: 17ch;
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  font-weight: 720;
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: -0.008em;
}

.seccion-titulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.seccion-titulo p,
.seccion-texto {
  max-width: 32em;
  font-size: 18px;
  color: var(--tinta-2);
}

.seccion-texto {
  margin-top: 20px;
}

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

/* --- servicios: casillas ------------------------------------------------------ */

.casillas {
  border-top: 2px solid var(--tinta);
}

.casilla {
  display: grid;
  grid-template-columns: 34px minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 8px 28px;
  align-items: start;
  padding: 26px 8px 26px 4px;
  border-bottom: 1px solid var(--regla);
  cursor: pointer;
  transition: background-color 150ms ease;
}

@media (hover: hover) {
  .casilla:hover {
    background: rgb(35 70 160 / 3.5%);
  }
}

.casilla input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.casilla-caja {
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border: 1.8px solid var(--tinta);
  border-radius: 2px;
  background: var(--hoja);
}

.casilla-caja svg {
  width: 30px;
  height: 28px;
  margin: -6px 0 0 1px;
  overflow: visible;
}

.casilla-caja path {
  fill: none;
  stroke: var(--azul);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 320ms cubic-bezier(0.6, 0.1, 0.3, 1);
}

.casilla input:checked + .casilla-caja path {
  stroke-dashoffset: 0;
}

.casilla input:focus-visible + .casilla-caja {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

.casilla-nombre {
  font-size: 22px;
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.2;
}

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

.casilla-texto small {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--grafito);
}

.casilla-texto a {
  color: var(--azul);
}

/* Etiqueta puesta a mano, un poco torcida. */
.marca-texto {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px 0;
  border: 1.5px solid var(--rojo);
  border-radius: 2px;
  color: var(--rojo);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  font-stretch: 72%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 3px;
  transform: rotate(-3deg);
}

.marca-azul {
  border-color: var(--azul);
  color: var(--azul);
  transform: rotate(2deg);
}

.casillas-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 32px;
}

.casillas-pie span {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grafito);
}

/* --- cómo trabajamos ------------------------------------------------------------ */

.pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
  border-top: 2px solid var(--tinta);
}

.pasos li {
  padding: 22px 0 22px 34px;
  border-bottom: 1px solid var(--regla);
  counter-increment: paso;
  position: relative;
  color: var(--tinta-2);
}

.pasos li::before {
  content: counter(paso) ".";
  position: absolute;
  left: 0;
  top: 21px;
  font-weight: 800;
  font-stretch: 80%;
  color: var(--rojo);
}

.pasos strong {
  color: var(--tinta);
}

/* --- calendario ---------------------------------------------------------------- */

.calendario {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.calendario h2 {
  max-width: 15ch;
}

.calendario h2 span {
  color: var(--rojo);
}

.calendario-nota {
  max-width: 34em;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--grafito);
}

/* La hoja de un calendario de escritorio, con sus arillos. */
.hoja-calendario {
  position: relative;
  width: 100%;
  max-width: 430px;
  justify-self: center;
  padding: 34px 26px 22px;
  border: 1px solid var(--regla);
  border-radius: 3px;
  background: var(--hoja);
  box-shadow:
    0 1px 0 rgb(0 0 0 / 4%),
    0 26px 36px -26px rgb(60 45 20 / 45%);
  transform: rotate(1.2deg);
}

.hoja-calendario-arillos {
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
}

.hoja-calendario-arillos span {
  width: 9px;
  height: 26px;
  border-radius: 5px;
  background: linear-gradient(90deg, #5d626a, #9da2a9 45%, #4b5057);
}

.hoja-calendario-mes {
  font-size: 26px;
  font-weight: 720;
  font-stretch: 84%;
  text-transform: capitalize;
}

.mes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px 0;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 14px;
  text-align: center;
}

.mes-cabeza {
  padding-bottom: 6px;
  font-size: 11px;
  color: var(--grafito);
}

.dia {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.dia-libre {
  color: #a8abaf;
}

.dia-asueto {
  color: #a8abaf;
  text-decoration: line-through;
  text-decoration-color: var(--rojo);
}

/* Los días del plazo, pasados con resaltador: una franja amarilla que no
   llena la celda y se une con la del día de al lado. */
.dia-plazo {
  background: linear-gradient(
    180deg,
    transparent 26%,
    rgb(247 206 70 / 62%) 27% 73%,
    transparent 74%
  );
}

.dia-vence {
  color: var(--rojo);
  font-weight: 600;
}

/* El círculo de plumón alrededor del día del plazo. Lo traza el script cuando
   la hoja entra en pantalla. */
.dia-vence svg {
  position: absolute;
  inset: -9px -10px -8px -9px;
  width: calc(100% + 19px);
  height: calc(100% + 17px);
  max-width: none;
  overflow: visible;
}

.dia-vence path {
  fill: none;
  stroke: var(--rojo);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.js .hoja-calendario:not(.visto) .dia-vence path {
  stroke-dashoffset: 1;
}

.js .hoja-calendario.visto .dia-vence path {
  animation: trazo-inverso 900ms cubic-bezier(0.55, 0.1, 0.3, 1) 250ms both;
}

@keyframes trazo-inverso {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.hoja-calendario-leyenda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grafito);
}

.leyenda-habil {
  width: 22px;
  height: 9px;
  border-radius: 1px;
  background: rgb(247 206 70 / 62%);
}

/* --- lo que cuidamos ----------------------------------------------------------- */

.clausulas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 40px;
  margin: 0;
}

.clausulas div {
  padding-top: 16px;
  border-top: 2px solid var(--tinta);
}

.clausulas dt {
  font-size: 20px;
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.25;
}

.clausulas dd {
  margin: 8px 0 0;
  color: var(--tinta-2);
}

/* --- integradores ---------------------------------------------------------------- */

.integradores .enlace-flecha {
  display: inline-block;
  margin-top: 24px;
}

.hoja-codigo {
  margin: 0;
  padding: 26px 28px;
  overflow-x: auto;
  border: 1px solid var(--regla);
  border-radius: 3px;
  background: var(--hoja);
  box-shadow: 0 22px 32px -26px rgb(60 45 20 / 40%);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--tinta);
}

.c-azul {
  color: var(--azul);
  font-weight: 600;
}

.c-nota {
  color: var(--azul);
}

.c-tenue {
  color: var(--grafito);
}

/* --- preguntas ------------------------------------------------------------------ */

.preguntas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 64px;
}

.preguntas div {
  padding-top: 16px;
  border-top: 1px solid var(--regla);
}

.preguntas h3 {
  font-size: 20px;
  font-weight: 650;
  font-stretch: 90%;
  line-height: 1.25;
}

.preguntas p {
  margin-top: 8px;
  color: var(--tinta-2);
}

/* --- contacto: la hoja de solicitud ------------------------------------------ */

.contacto {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.contacto-despues {
  max-width: 30em;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--regla);
  color: var(--tinta-2);
}

.hoja-formulario {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--regla);
  border-radius: 3px;
  background: var(--hoja);
  box-shadow:
    0 1px 0 rgb(0 0 0 / 4%),
    0 34px 50px -36px rgb(60 45 20 / 50%);
}

/* El fondo de seguridad del papel: el guilloché de la marca, en azul y casi
   invisible, como en un cheque. */
.hoja-formulario::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -170px;
  top: -170px;
  width: 460px;
  height: 460px;
  background: var(--azul);
  opacity: 0.07;
  -webkit-mask: url("marca/sello.svg") center / contain no-repeat;
  mask: url("marca/sello.svg") center / contain no-repeat;
}

.hoja-membrete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--tinta);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grafito);
}

.hoja-membrete-marca {
  font-family: var(--letra);
  font-size: 22px;
  font-weight: 700;
  font-stretch: 122%;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.formulario {
  display: grid;
  gap: 22px;
}

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
}

.campo {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo > span,
.campo legend {
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta-2);
}

.campo abbr {
  color: var(--rojo);
  text-decoration: none;
}

.campo small {
  font-weight: 400;
  color: var(--grafito);
}

/* Campos de formulario de papel: una línea sobre la que se escribe. */
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 2px 6px;
  border: 0;
  border-bottom: 1.5px solid var(--tinta);
  border-radius: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 17px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tinta) 50%),
    linear-gradient(-45deg, transparent 50%, var(--tinta) 50%);
  background-position:
    calc(100% - 13px) 20px,
    calc(100% - 8px) 20px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* El mensaje, en hoja rayada. */
.campo textarea {
  min-height: 0;
  padding: 0 2px;
  border-bottom: 0;
  line-height: 34px;
  background: repeating-linear-gradient(transparent 0 33px, var(--regla) 33px 34px);
  resize: vertical;
}

.campo input:focus,
.campo select:focus {
  outline: none;
  border-bottom-color: var(--azul);
  box-shadow: 0 1.5px 0 var(--azul);
}

.campo textarea:focus {
  outline: none;
  background: repeating-linear-gradient(transparent 0 33px, rgb(35 70 160 / 45%) 33px 34px);
}

.campo [aria-invalid="true"] {
  border-bottom-color: var(--rojo);
  box-shadow: 0 1.5px 0 var(--rojo);
}

.campo-intereses {
  gap: 10px;
}

.intereses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.intereses label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  cursor: pointer;
}

.intereses input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--azul);
}

.tarro {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-error {
  padding: 10px 12px;
  border-left: 3px solid var(--rojo);
  background: rgb(192 57 31 / 8%);
  color: #8f2412;
  font-size: 15px;
}

.formulario-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding-top: 6px;
}

.formulario-pie p {
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grafito);
}

.formulario-pie a {
  color: var(--tinta);
}

.enviando {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid rgb(251 249 244 / 35%);
  border-top-color: var(--hoja);
  border-radius: 50%;
  animation: gira 700ms linear infinite;
}

@keyframes gira {
  to {
    transform: rotate(360deg);
  }
}

/* Enviada: el formulario queda con lo que se escribió, y encima, el sello. */
.formulario[data-enviado] {
  opacity: 0.55;
  pointer-events: none;
}

.formulario[data-enviado] .formulario-pie {
  display: none;
}

.formulario-listo {
  position: relative;
  padding-top: 18px;
}

.formulario-listo:focus {
  outline: none;
}

.sello-recibido {
  position: absolute;
  right: 10px;
  bottom: calc(100% + 30px);
  width: 250px;
  transform: rotate(-7deg);
  animation: estampar-recibido 420ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
}

@keyframes estampar-recibido {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(1.45) rotate(-13deg);
  }
  65% {
    opacity: 0.95;
    transform: scale(0.95) rotate(-7deg);
  }
  100% {
    opacity: 0.92;
    transform: rotate(-7deg);
  }
}

.formulario-listo h3 {
  font-size: 24px;
  font-weight: 700;
  font-stretch: 86%;
}

.formulario-listo p {
  margin-top: 6px;
  color: var(--tinta-2);
}

/* --- pie ------------------------------------------------------------------------- */

.pie {
  padding: 56px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--tinta);
  font-size: 15.5px;
}

.pie-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
}

.pie-rejilla > div p {
  max-width: 24em;
  margin-top: 14px;
  color: var(--tinta-2);
}

.pie nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.pie nav a {
  color: var(--tinta-2);
  text-decoration: none;
}

@media (hover: hover) {
  .pie nav a:hover {
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: var(--azul);
    text-underline-offset: 4px;
  }
}

.pie-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 44px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--grafito);
}

/* --- página de texto (aviso de privacidad) ------------------------------------ */

.texto-legal {
  max-width: 760px;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: var(--seccion);
}

.texto-legal h1 {
  margin-top: 18px;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 740;
  font-stretch: 78%;
  line-height: 1;
}

.texto-legal h2 {
  margin-top: 40px;
  font-size: 21px;
  font-weight: 700;
  font-stretch: 88%;
}

.texto-legal p,
.texto-legal li {
  color: var(--tinta-2);
}

.texto-legal p {
  margin-top: 12px;
}

.texto-legal ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

/* --- tableta ------------------------------------------------------------------- */

@media (max-width: 1020px) {
  .portada-rejilla,
  .dos-columnas,
  .calendario,
  .contacto {
    grid-template-columns: minmax(0, 1fr);
  }

  .escritorio {
    margin-top: 12px;
  }

  .seccion-titulo {
    grid-template-columns: minmax(0, 1fr);
  }

  .clausulas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .casilla {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .casilla-texto {
    grid-column: 2;
  }
}

/* --- teléfono ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .boton-menu {
    display: inline-flex;
    align-items: center;
  }

  .navegacion {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--margen) 22px;
    background: var(--grano), var(--hoja);
    border-bottom: 2px solid var(--tinta);
    box-shadow: 0 24px 30px -24px rgb(60 45 20 / 45%);
  }

  .navegacion:not([data-abierta="true"]) {
    display: none;
  }

  .navegacion a:not(.boton) {
    padding: 14px 0;
    border-bottom: 1px solid var(--regla);
    font-size: 17px;
  }

  .navegacion-entrar {
    padding-left: 0;
    border-left: 0;
  }

  .navegacion .boton {
    margin-top: 18px;
    min-height: 50px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .cabecera-fila {
    height: 70px;
  }

  .titular {
    font-size: clamp(2.7rem, 13vw, 3.4rem);
  }

  .acciones .boton {
    width: 100%;
  }

  .escritorio {
    width: 270px;
  }

  .sello-goma {
    right: 16px;
    bottom: 150px;
    width: 142px;
  }

  .clausulas,
  .preguntas,
  .campos {
    grid-template-columns: minmax(0, 1fr);
  }

  .casilla {
    gap: 6px 16px;
  }

  .casilla-nombre {
    font-size: 20px;
  }

  .sello-recibido {
    width: 190px;
  }

  .pie-rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pie-rejilla > div:first-child {
    grid-column: 1 / -1;
  }
}

/* Quien pide menos movimiento ve todo terminado: el ticket impreso, el sello
   puesto y las marcas trazadas. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}