/* "Calendario de pared": paper, navy ink, a red band with two punched holes, saffron accent.
   Same palette and typefaces as the app (Zilla Slab + Public Sans). No scripts, no external requests. */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/zilla-slab-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zilla-slab-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  --papel: #f5f3ec;
  --carta: #ffffff;
  --hundido: #ece9df;
  --tinta: #172033;
  --tinta-media: #465066;
  --tinta-suave: #646d80;
  --sobre-tinta: #ffffff;
  --sobre-tinta-suave: #b9c1d1;
  --rojo: #c8362b;
  --rojo-texto: #a3261c;
  --rojo-suave: #fbe5e1;
  --azafran: #f2b01e;
  --azafran-texto: #7a5200;
  --azafran-suave: #fcefc9;
  --verde: #2e7d5b;
  --verde-texto: #1f6146;
  --verde-suave: #dcefe5;
  --azul: #2f5d8a;
  --azul-suave: #e1eaf3;
  --borde: #dcd8ca;
  --borde-fuerte: #bdb8a6;

  --slab: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --margen: 20px;
  --diente: 10px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--slab);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

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

a {
  color: var(--rojo-texto);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--tinta);
}

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

.banda :focus-visible,
.cierre :focus-visible,
.tramo--tinta :focus-visible,
.pie :focus-visible {
  outline-color: #ffffff;
}

.salto {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  padding: 12px 18px;
  background: var(--tinta);
  color: #ffffff;
  border-radius: 8px;
  font-weight: 600;
}

.salto:focus {
  top: 12px;
  color: #ffffff;
}

.ancho {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--margen);
}

.ancho--texto {
  max-width: 860px;
}

.antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.3;
  text-transform: uppercase;
}

.antetitulo::before {
  content: "";
  flex: none;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--rojo);
}

.entradilla {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--tinta-media);
}

.nota {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

.subrayado {
  background: linear-gradient(transparent 68%, var(--azafran) 68%, var(--azafran) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  font-weight: 600;
}

.enlace-flecha::after {
  content: "→";
  margin-left: 8px;
  color: var(--rojo);
}

.enlace-flecha:hover {
  color: var(--rojo-texto);
}

/* ---------- Buttons ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 24px;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.boton__icono {
  flex: none;
}

.boton--tinta {
  background: var(--tinta);
  color: #ffffff;
  box-shadow: 5px 5px 0 var(--azafran);
}

.boton--tinta:hover {
  background: #0d1424;
  color: #ffffff;
}

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

.boton--papel:hover {
  background: #ffffff;
  color: var(--tinta);
}

/* Not published yet: a label, not a link. */
.boton--pendiente {
  cursor: default;
  border-style: dashed;
  box-shadow: none;
}

.boton--tinta.boton--pendiente {
  background: transparent;
  color: var(--tinta);
}

.boton--papel.boton--pendiente {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

/* ---------- Red band (header) ---------- */

.banda {
  position: relative;
  background: var(--rojo);
  color: #ffffff;
  padding: 36px 0 12px;
}

.banda__agujeros span {
  position: absolute;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 2px 0 rgba(23, 32, 51, 0.28);
}

.banda__agujeros span:first-child {
  left: 26%;
}

.banda__agujeros span:last-child {
  right: 26%;
}

.banda__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: #ffffff;
  text-decoration: none;
}

.marca:hover {
  color: #ffffff;
}

.marca__icono {
  flex: none;
  width: 30px;
  height: auto;
}

.marca__nombre {
  font-family: var(--slab);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.1;
}

.banda__cta .boton {
  min-height: 44px;
  padding: 6px 10px;
  font-size: 0.875rem;
}

.banda__cta .boton__icono {
  display: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  order: 3;
  width: 100%;
  justify-content: space-between;
  gap: 0 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.menu a:hover,
.menu a[aria-current="page"] {
  border-bottom-color: #ffffff;
}

.perforado {
  height: 0;
  margin-top: 7px;
  border-top: 3px dotted var(--borde-fuerte);
}

/* ---------- Hero ---------- */

.portada {
  padding: 40px 0 56px;
}

.portada__rejilla {
  display: grid;
  gap: 24px;
}

.portada__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 24px 0 20px;
}

.semana {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 40px 0 0;
  border-top: 3px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
}

.semana__dia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--borde);
}

.semana__dia:last-child {
  grid-column: 1 / -1;
  border-bottom: 0;
}

.semana__letra {
  flex: none;
  width: 30px;
  color: var(--borde-fuerte);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
}

.semana__dato {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}

.semana__dia--festivo .semana__letra {
  color: var(--rojo);
}

.portada__hojas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 22px;
  margin-top: 40px;
  align-items: start;
}

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

/* ---------- Screenshot as a torn calendar sheet ---------- */

.lamina {
  margin: 0;
  min-width: 0;
}

.lamina figcaption {
  margin-top: 18px;
  padding-left: 12px;
  border-left: 3px solid var(--rojo);
  color: var(--tinta-media);
  font-size: 0.875rem;
  line-height: 1.4;
}

.hoja {
  position: relative;
  margin-right: 8px;
}

.hoja::before,
.hoja__papel,
.hoja__papel img {
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--diente)) var(--diente) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--diente) + 0.5px) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--diente)) var(--diente) repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--diente) + 0.5px) no-repeat;
}

.hoja::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(8px, 8px);
  border-radius: 18px 18px 0 0;
  background: rgba(23, 32, 51, 0.16);
}

.hoja__papel {
  position: relative;
  padding: 3px 3px 5px;
  border-radius: 18px 18px 0 0;
  background: var(--tinta);
}

.hoja__papel img {
  display: block;
  width: 100%;
  border-radius: 15px 15px 0 0;
  background: var(--papel);
  object-fit: cover;
  object-position: top;
  aspect-ratio: 400 / 600;
}

.lamina--corta img {
  aspect-ratio: 400 / 470;
}

.lamina--larga img {
  aspect-ratio: 400 / 740;
}

.tramo--tinta .hoja::before {
  background: rgba(0, 0, 0, 0.4);
}

/* ---------- Sections ---------- */

.tramo {
  padding: 64px 0;
  border-top: 3px dotted var(--borde-fuerte);
}

.tramo--carta {
  background: var(--carta);
}

.tramo--tinta {
  background: var(--tinta);
  color: var(--sobre-tinta);
  border-top: 0;
}

.tramo--tinta + .tramo {
  border-top: 0;
}

.tramo__cabecera {
  max-width: 720px;
  margin-bottom: 36px;
}

.tramo__cabecera h2 {
  margin-bottom: 16px;
}

.tramo__cabecera p {
  color: var(--tinta-media);
}

.tramo--tinta .tramo__cabecera p,
.tramo--tinta .antetitulo {
  color: var(--sobre-tinta-suave);
}

.tramo--tinta .antetitulo::before {
  background: var(--azafran);
}

/* ---------- Tear-off date sheet ---------- */

.talon {
  flex: none;
  align-self: flex-start;
  width: 66px;
  overflow: hidden;
  border: 2px solid var(--tinta);
  border-radius: 9px;
  background: var(--carta);
  text-align: center;
}

.talon__mes {
  display: block;
  padding: 4px 2px 3px;
  background: var(--rojo);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.talon__dia {
  display: block;
  padding: 4px 0 6px;
  color: var(--tinta);
  font-family: var(--slab);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.talon__dia--version {
  font-size: 1.25rem;
  padding: 9px 0 10px;
}

.talon--proxima .talon__mes {
  background: var(--azafran);
  color: var(--tinta);
}

.talon--en-plazo .talon__mes {
  background: var(--azul);
}

.talon--futura .talon__mes {
  background: var(--tinta);
}

.talon--hecha .talon__mes {
  background: var(--verde);
}

.tramo--tinta .talon {
  border-color: #ffffff;
}

.tramo--tinta .talon--futura .talon__mes {
  box-shadow: inset 0 -2px 0 #ffffff;
}

.talon--grande {
  width: 150px;
  border-width: 3px;
  border-radius: 14px;
}

.talon--grande .talon__mes {
  padding: 8px 2px 6px;
  font-size: 0.875rem;
}

.talon--grande .talon__dia {
  padding: 14px 0 18px;
  font-size: 3.25rem;
}

/* ---------- Steps ---------- */

.pasos {
  display: grid;
  gap: 0;
}

.paso {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--borde);
}

.paso:last-child {
  border-bottom: 1px solid var(--borde);
}

.paso__texto h3 {
  margin-bottom: 6px;
}

.paso__texto p {
  color: var(--tinta-media);
  font-size: 1rem;
}

/* ---------- Deadline card section ---------- */

.ficha {
  display: grid;
  gap: 44px;
}

.renglones {
  margin: 0;
  border-top: 2px solid var(--tinta);
}

.renglon {
  padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}

.renglon dt {
  margin-bottom: 4px;
  font-family: var(--slab);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
}

.renglon dd {
  margin: 0;
  color: var(--tinta-media);
  font-size: 1rem;
}

.ficha__hojas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.ficha__hoja-2 {
  margin-top: 48px;
}

/* ---------- Coverage ---------- */

.cobertura__entrada {
  display: grid;
  gap: 28px;
  margin-bottom: 40px;
}

.cobertura__entrada .tramo__cabecera {
  margin-bottom: 0;
}

.cobertura__hoja {
  max-width: 340px;
}

.territorios {
  display: grid;
  gap: 18px;
}

.territorio {
  display: grid;
  gap: 18px;
  padding: 22px 22px 24px;
  border: 1px solid var(--borde-fuerte);
  border-left: 8px solid var(--verde);
  border-radius: 10px;
  background: var(--carta);
}

.territorio--aviso {
  border-left-color: var(--azafran);
}

.territorio h3 {
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.territorio__nombre p {
  margin-bottom: 10px;
}

.territorio__detalle {
  color: var(--tinta-media);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.territorio h4 {
  margin-bottom: 10px;
  color: var(--tinta-media);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.territorio__cuerpo p,
.territorio__falta p {
  font-size: 1rem;
  line-height: 1.5;
}

.territorio__falta p {
  color: var(--tinta-media);
}

.sello {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--verde-suave);
  color: var(--verde-texto);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  vertical-align: middle;
}

.sello--aviso {
  background: var(--azafran-suave);
  color: var(--azafran-texto);
}

.lista-marcada li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.5;
}

.lista-marcada li:last-child {
  margin-bottom: 0;
}

.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--rojo);
}

.fiabilidad {
  margin-top: 44px;
}

.fiabilidad__titulo {
  margin-bottom: 18px;
  font-size: 1.5rem;
}

.fiabilidad__rejilla {
  display: grid;
  gap: 14px;
}

.fiabilidad__nivel {
  padding: 18px 20px;
  border-left: 6px solid var(--azafran);
  border-radius: 6px;
  background: var(--azafran-suave);
}

.fiabilidad__nivel--comprobada {
  border-left-color: var(--verde);
  background: var(--verde-suave);
}

.fiabilidad__nivel h4 {
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
}

.fiabilidad__nivel p {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.fiabilidad__pie {
  margin-top: 18px;
  color: var(--tinta-media);
  font-size: 0.9375rem;
}

/* ---------- Colours / no notifications ---------- */

.colores {
  display: grid;
  gap: 12px;
}

.estado {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.estado:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.estado p {
  margin: 0;
  color: var(--sobre-tinta-suave);
  font-size: 1rem;
  line-height: 1.45;
}

.estado strong {
  color: #ffffff;
}

/* ---------- Tasks and templates ---------- */

.tareas {
  display: grid;
  gap: 44px;
}

.tareas__texto {
  order: -1;
}

.tareas__hojas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.tareas__hoja-2 {
  margin-top: 40px;
}

.apuntes {
  display: grid;
  gap: 18px;
  margin-bottom: 30px;
}

.apunte {
  padding-left: 16px;
  border-left: 3px solid var(--rojo);
}

.apunte h3 {
  margin-bottom: 4px;
}

.apunte p {
  color: var(--tinta-media);
  font-size: 1rem;
}

.plantillas {
  display: grid;
  border: 2px solid var(--tinta);
  border-radius: 10px;
  background: var(--carta);
  overflow: hidden;
}

.plantillas__grupo {
  padding: 16px 18px 18px;
  border-bottom: 1px solid var(--borde);
}

.plantillas__grupo:last-child {
  border-bottom: 0;
}

.plantillas__grupo h3 {
  margin-bottom: 8px;
  color: var(--rojo-texto);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plantillas__grupo li {
  padding: 3px 0;
  font-family: var(--slab);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ---------- Export ---------- */

.exportar {
  display: grid;
  gap: 44px;
}

.exportar__hoja {
  max-width: 340px;
}

.salidas {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--tinta);
}

.salidas li {
  padding: 16px 0;
  border-bottom: 1px solid var(--borde);
}

.salidas h3 {
  margin-bottom: 4px;
  font-size: 1.1875rem;
}

.salidas p {
  color: var(--tinta-media);
  font-size: 1rem;
}

/* ---------- Privacy summary ---------- */

.privado {
  display: grid;
  gap: 12px;
}

.privado .tramo__cabecera {
  margin-bottom: 12px;
}

.privado__lista {
  counter-reset: punto;
  border-top: 2px solid var(--tinta);
}

.privado__lista li {
  counter-increment: punto;
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
  font-family: var(--slab);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
}

.privado__lista li::before {
  content: counter(punto);
  flex: none;
  width: 22px;
  color: var(--rojo);
  font-weight: 700;
}

/* ---------- Disclaimer and sources ---------- */

.tramo--aviso {
  padding-top: 0;
  border-top: 0;
}

.aviso {
  display: grid;
  gap: 28px;
  padding: 28px 22px 30px;
  border: 2px solid var(--tinta);
  border-left: 12px solid var(--azafran);
  border-radius: 10px;
  background: var(--carta);
}

.aviso__texto h2 {
  margin-bottom: 16px;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

.aviso__fuentes h3 {
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.aviso__fuentes ul {
  border-top: 1px solid var(--borde-fuerte);
}

.aviso__fuentes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
}

.aviso__fuentes a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 600;
}

.aviso__fuentes span {
  color: var(--tinta-media);
  font-size: 0.875rem;
}

/* ---------- Closing band ---------- */

.cierre {
  position: relative;
  padding: 64px 0 60px;
  background: var(--rojo);
  color: #ffffff;
}

.cierre__rejilla {
  display: grid;
  gap: 28px;
}

.cierre h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.2rem);
  line-height: 1.06;
}

.cierre__accion p {
  margin-top: 18px;
  font-size: 0.9375rem;
}

.cierre a:not(.boton) {
  color: #ffffff;
  font-weight: 600;
}

/* ---------- Footer ---------- */

.pie {
  padding: 48px 0 36px;
  background: var(--tinta);
  color: var(--sobre-tinta-suave);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.pie a {
  color: #ffffff;
}

.pie a:hover {
  color: var(--azafran);
}

.pie__rejilla {
  display: grid;
  gap: 30px;
}

.pie__nombre {
  margin-bottom: 8px;
  color: #ffffff;
  font-family: var(--slab);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.pie__acento {
  color: var(--azafran);
}

.pie h2 {
  margin-bottom: 10px;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pie__menu a,
.pie__contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.pie__legal {
  margin-top: 32px;
  font-size: 0.8125rem;
}

.pie__legal p:first-child {
  max-width: none;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.pie__legal p {
  max-width: 900px;
  margin-bottom: 8px;
}

/* ---------- Inner pages ---------- */

.interior {
  padding: 44px 0 72px;
}

.interior__cabecera {
  max-width: 860px;
  margin-bottom: 44px;
  padding-bottom: 28px;
  border-bottom: 3px solid var(--tinta);
}

.interior__cabecera h1 {
  margin-bottom: 18px;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.06;
}

.fecha-politica {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--hundido);
  font-size: 0.9375rem;
  font-weight: 600;
}

.recuadro {
  padding: 22px 22px 24px;
  border: 1px solid var(--borde-fuerte);
  border-left: 8px solid var(--azafran);
  border-radius: 10px;
  background: var(--carta);
}

.recuadro h2 {
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.recuadro p {
  color: var(--tinta-media);
  font-size: 1rem;
}

.correo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--slab);
  font-size: 1.25rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Privacy policy */

.politica {
  display: grid;
  gap: 36px;
}

.politica__indice {
  padding: 20px 22px;
  border: 2px solid var(--tinta);
  border-radius: 10px;
  background: var(--carta);
}

.politica__indice h2 {
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.politica__indice ol {
  counter-reset: indice;
}

.politica__indice li {
  counter-increment: indice;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.9375rem;
}

.politica__indice li::before {
  content: counter(indice);
  flex: none;
  width: 20px;
  color: var(--rojo-texto);
  font-family: var(--slab);
  font-weight: 700;
  text-align: right;
}

.politica__indice a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--tinta);
}

.politica__texto {
  min-width: 0;
  max-width: 760px;
}

.politica__texto section {
  padding: 28px 0;
  border-top: 1px solid var(--borde-fuerte);
  scroll-margin-top: 16px;
}

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

.politica__texto h2 {
  margin-bottom: 14px;
  font-size: 1.6rem;
}

.politica__texto ul {
  margin-bottom: 1em;
}

.tabla-envoltorio {
  margin: 0 0 1em;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.tabla thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.tabla tr {
  display: block;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 8px;
  background: var(--carta);
}

.tabla th,
.tabla td {
  display: block;
  padding: 0;
  text-align: left;
  font-weight: 400;
}

.tabla tbody th {
  margin-bottom: 8px;
  font-weight: 600;
}

.tabla td {
  color: var(--tinta-media);
}

.tabla td:nth-child(2)::before {
  content: "Quién lo introduce: ";
  font-weight: 600;
  color: var(--tinta);
}

.tabla td:nth-child(3)::before {
  content: "Dónde está: ";
  font-weight: 600;
  color: var(--tinta);
}

/* Support */

.ayuda {
  display: grid;
  gap: 44px;
}

.ayuda__principal {
  display: grid;
  gap: 48px;
  min-width: 0;
}

.ayuda__principal h2 {
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.ayuda__principal .nota {
  margin-top: 18px;
}

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

.duda {
  border-bottom: 1px solid var(--borde-fuerte);
}

.duda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 12px 0;
  cursor: pointer;
  font-family: var(--slab);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
}

.duda summary::-webkit-details-marker {
  display: none;
}

.duda summary::after {
  content: "+";
  flex: none;
  width: 32px;
  height: 32px;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
}

.duda[open] summary::after {
  content: "–";
  background: var(--tinta);
  color: #ffffff;
}

.duda__respuesta {
  padding: 0 0 20px;
  max-width: 680px;
  color: var(--tinta-media);
  font-size: 1rem;
}

.ayuda__lateral {
  display: grid;
  gap: 22px;
  align-content: start;
  min-width: 0;
}

.tarjeta-contacto {
  overflow: hidden;
  border: 2px solid var(--tinta);
  border-radius: 12px;
  background: var(--carta);
}

.tarjeta-contacto__banda {
  position: relative;
  height: 40px;
  background: var(--rojo);
  border-bottom: 2px solid var(--tinta);
}

.tarjeta-contacto__banda span {
  position: absolute;
  top: 11px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tinta);
}

.tarjeta-contacto__banda span:first-child {
  left: 24%;
}

.tarjeta-contacto__banda span:last-child {
  right: 24%;
}

.tarjeta-contacto__cuerpo {
  padding: 22px 22px 24px;
}

.tarjeta-contacto h2 {
  margin-bottom: 6px;
  font-size: 1.6rem;
}

.tarjeta-contacto h3 {
  margin: 20px 0 10px;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tarjeta-contacto .nota {
  margin-top: 16px;
}

/* Changelog */

.versiones {
  margin-bottom: 40px;
}

.version {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--borde-fuerte);
}

.version .talon {
  width: 78px;
}

.version h2 {
  margin-bottom: 4px;
  font-size: 1.6rem;
}

.version__etiqueta {
  color: var(--tinta-media);
}

/* 404 */

.perdida {
  display: grid;
  gap: 30px;
  align-items: start;
}

.perdida h1 {
  margin-bottom: 16px;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
}

.perdida__enlaces {
  margin-top: 18px;
}

/* ---------- From 620px ---------- */

@media (min-width: 620px) {
  :root {
    --margen: 32px;
  }

  .semana {
    grid-template-columns: repeat(7, 1fr);
    border-bottom-width: 1px;
  }

  .semana__dia,
  .semana__dia:last-child {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 10px 16px;
    border-bottom: 0;
    border-left: 1px solid var(--borde-fuerte);
  }

  .semana__dia:first-child {
    border-left: 0;
    padding-left: 0;
  }

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

  .portada__hoja-1 {
    grid-column: auto;
  }

  .apuntes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

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

  .plantillas__grupo {
    border-bottom: 0;
    border-right: 1px solid var(--borde);
  }

  .plantillas__grupo:last-child {
    border-right: 0;
  }

  .pie__rejilla {
    grid-template-columns: 1.3fr 1fr 1.3fr;
  }

  .perdida {
    grid-template-columns: auto 1fr;
    gap: 44px;
  }

  .tabla thead {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    display: table-header-group;
  }

  .tabla tr {
    display: table-row;
    border: 0;
    background: none;
  }

  .tabla th,
  .tabla td {
    display: table-cell;
    padding: 12px 14px 12px 0;
    border-bottom: 1px solid var(--borde-fuerte);
    vertical-align: top;
  }

  .tabla thead th {
    border-bottom: 2px solid var(--tinta);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .tabla tbody th {
    width: 46%;
    font-weight: 600;
  }

  .tabla td:nth-child(2)::before,
  .tabla td:nth-child(3)::before {
    content: none;
  }
}

/* ---------- From 900px ---------- */

@media (min-width: 900px) {
  :root {
    --margen: 40px;
    --diente: 12px;
  }

  body {
    font-size: 1.125rem;
  }

  .banda {
    padding: 40px 0 16px;
  }

  .banda__agujeros span {
    top: 12px;
    width: 20px;
    height: 20px;
  }

  .banda__fila {
    flex-wrap: nowrap;
  }

  .menu {
    order: 0;
    width: auto;
    margin: 0 0 0 auto;
    gap: 0 26px;
    border-top: 0;
  }

  .menu a {
    font-size: 0.9375rem;
  }

  .banda__cta .boton {
    padding: 6px 16px;
    font-size: 0.9375rem;
  }

  .banda__cta .boton__icono {
    display: block;
  }

  .marca__nombre {
    font-size: 1.6rem;
  }

  .marca__icono {
    width: 34px;
  }

  .portada {
    padding: 64px 0 88px;
  }

  .portada__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: end;
  }

  .portada__entrada {
    padding-bottom: 8px;
  }

  .portada__accion {
    margin: 28px 0 22px;
  }

  .semana {
    margin-top: 56px;
  }

  .semana__letra {
    font-size: 2.25rem;
  }

  .semana__dato {
    font-size: 1rem;
  }

  .semana__dia,
  .semana__dia:last-child {
    padding: 18px 16px 20px;
  }

  .portada__hojas {
    gap: 44px;
    margin-top: 56px;
  }

  .portada__hoja-1 {
    margin-top: 36px;
  }

  .portada__hoja-3 {
    margin-top: 72px;
  }

  .tramo {
    padding: 104px 0;
  }

  .tramo__cabecera {
    margin-bottom: 48px;
  }

  .pasos:not(.pasos--columna) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-top: 3px dotted var(--borde-fuerte);
  }

  .pasos:not(.pasos--columna) .paso {
    flex-direction: column;
    gap: 20px;
    margin-top: -24px;
    padding: 0 26px 0 0;
    border: 0;
  }

  .ficha {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 72px;
    align-items: start;
  }

  .ficha__hojas {
    gap: 32px;
  }

  .ficha__hoja-2 {
    margin-top: 96px;
  }

  .cobertura__entrada {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 72px;
    align-items: end;
    margin-bottom: 56px;
  }

  .territorios {
    gap: 0;
    border-top: 3px solid var(--tinta);
  }

  .territorio {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr);
    gap: 48px;
    padding: 30px 0 32px 26px;
    border-width: 0 0 1px 8px;
    border-bottom-color: var(--borde-fuerte);
    border-radius: 0;
    background: none;
  }

  .territorio__cuerpo--aviso {
    grid-column: 2 / -1;
    max-width: 640px;
  }

  .fiabilidad {
    margin-top: 64px;
  }

  .fiabilidad__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .colores {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 80px;
    align-items: center;
  }

  .colores .tramo__cabecera {
    margin-bottom: 0;
  }

  .estado {
    padding: 18px 0;
  }

  .tareas {
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
  }

  .tareas__texto {
    order: 0;
  }

  .tareas__hojas {
    gap: 30px;
  }

  .tareas__hoja-2 {
    margin-top: 88px;
  }

  .exportar {
    grid-template-columns: minmax(0, 7fr) 340px;
    gap: 96px;
    align-items: start;
  }

  .salidas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }

  .privado {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 80px;
    align-items: start;
  }

  .tramo--aviso {
    padding-top: 0;
  }

  .aviso {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    padding: 44px 48px 48px 40px;
  }

  .cierre {
    padding: 104px 0 96px;
  }

  .cierre__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: end;
  }

  .pie {
    padding: 64px 0 40px;
  }

  .interior {
    padding: 72px 0 112px;
  }

  .interior__cabecera {
    margin-bottom: 64px;
  }

  .politica {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }

  .politica__indice {
    position: sticky;
    top: 24px;
  }

  .ayuda {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 72px;
    align-items: start;
  }

  .ayuda__lateral {
    position: sticky;
    top: 24px;
  }
}

@media print {
  .banda,
  .perforado,
  .cierre,
  .pie__menu {
    display: none;
  }
}