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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--e4);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--familia);
  font-size: var(--texto-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

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

[hidden] {
  display: none !important;
}

.icono {
  flex: none;
  width: 1em;
  height: 1em;
}

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

.saltar {
  position: absolute;
  left: var(--e3);
  top: -4rem;
  z-index: 10;
  padding: var(--e2) var(--e3);
  background: var(--acento);
  color: var(--acento-tinta);
  border-radius: var(--radio-s);
}

.saltar:focus {
  top: var(--e3);
}

.ancho {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding-inline: var(--e3);
}

.ancho--lectura {
  max-width: var(--ancho-lectura);
}

@media (min-width: 48rem) {
  .ancho {
    padding-inline: var(--e5);
  }
}

/* Cabecera -------------------------------------------------------------- */

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

.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--e4);
  padding-block: var(--e2);
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  font-weight: 650;
  font-stretch: 88%;
  font-size: var(--texto-l);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.menu {
  display: flex;
  column-gap: var(--e1);
  margin-inline: calc(var(--e2) * -1);
  overflow-x: auto;
  scrollbar-width: none;
}

.menu::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48rem) {
  .menu {
    column-gap: var(--e3);
  }
}

.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--e2);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.menu a:hover,
.menu a[aria-current] {
  color: var(--tinta);
}

.menu a[aria-current] {
  box-shadow: inset 0 -2px 0 var(--tinta);
}

/* Estados --------------------------------------------------------------- */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: var(--texto-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.estado--cumplida { color: var(--cumplida-texto); background: var(--cumplida-fondo); }
.estado--en_proceso { color: var(--en-proceso-texto); background: var(--en-proceso-fondo); }
.estado--parcial { color: var(--parcial-texto); background: var(--parcial-fondo); }
.estado--incumplida { color: var(--incumplida-texto); background: var(--incumplida-fondo); }
.estado--sin_iniciar { color: var(--sin-iniciar-texto); background: var(--sin-iniciar-fondo); }
.estado--cambio_de_rumbo { color: var(--cambio-texto); background: var(--cambio-fondo); }

.solido--cumplida { background: var(--cumplida-solido); }
.solido--en_proceso { background: var(--en-proceso-solido); }
.solido--parcial { background: var(--parcial-solido); }
.solido--incumplida { background: var(--incumplida-solido); }
.solido--sin_iniciar { background: var(--sin-iniciar-solido); }
.solido--cambio_de_rumbo { background: var(--cambio-solido); }

/* Portada --------------------------------------------------------------- */

.portada {
  padding-block: var(--e6) var(--e6);
}

.portada__titulo {
  max-width: 17ch;
  font-size: var(--texto-3xl);
  font-stretch: 82%;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.portada__bajada {
  max-width: 34rem;
  margin-top: var(--e4);
  color: var(--tinta-suave);
  font-size: var(--texto-l);
  line-height: 1.4;
}

.portada > .ancho {
  display: flex;
  flex-direction: column;
}

.portada__cabeza {
  display: contents;
}

.mapa {
  order: 1;
  margin-top: var(--e6);
}

/* Mapa de barrios -------------------------------------------------------- */

.mapa {
  margin-inline: 0;
  margin-bottom: 0;
  max-width: 20rem;
}

.mapa__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mapa__barrio {
  fill: var(--borde);
  stroke: var(--fondo);
  stroke-width: 1.5;
  stroke-linejoin: round;
  cursor: default;
  transition: fill var(--transicion);
}

.mapa__enlace .mapa__barrio {
  fill: var(--tinta-suave);
  cursor: pointer;
}

.mapa__barrio:hover,
.mapa__barrio.activo,
.mapa__enlace:focus-visible .mapa__barrio {
  fill: var(--acento);
}

.mapa__enlace:focus-visible {
  outline: none;
}

.mapa__enlace:focus-visible .mapa__barrio {
  stroke: var(--tinta);
}

.mapa__nombre {
  min-height: 2.6em;
  margin-top: var(--e3);
  color: var(--tinta);
  font-size: var(--texto-s);
  font-weight: 600;
  line-height: 1.3;
}

.mapa__nota {
  margin-top: var(--e1);
  color: var(--tinta-suave);
  font-size: var(--texto-xs);
  line-height: 1.4;
}

@media (min-width: 56rem) {
  .portada__cabeza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: center;
    gap: var(--e6);
  }

  .mapa {
    order: 0;
    margin-top: 0;
  }
}

.balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-fuerte);
}

.balance__numero {
  font-size: var(--texto-2xl);
  font-stretch: 82%;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.balance__leyenda {
  margin-top: var(--e2);
  color: var(--tinta-suave);
}

.reloj {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.reloj strong,
.reloj__fino {
  white-space: nowrap;
}

.reloj strong {
  color: var(--tinta);
  font-weight: 600;
}

.balance__detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e4);
}

.mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 6px;
  max-width: 34rem;
}

.mosaico__casilla {
  display: block;
  aspect-ratio: 1;
  border-radius: 7px;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.mosaico__casilla:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--tinta);
}

.conteo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e4);
}

.conteo a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  text-decoration: none;
}

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

.conteo__muestra {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.conteo__cantidad {
  color: var(--tinta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 56rem) {
  .portada {
    padding-block: var(--e7) var(--e7);
  }

  .balance {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--e6);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mosaico li {
    animation: aparecer 320ms ease-out backwards;
    animation-delay: calc(var(--i) * 14ms + 120ms);
  }

  @keyframes aparecer {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
  }
}

/* Lo que vence pronto --------------------------------------------------- */

.proximos {
  padding-bottom: var(--e7);
}

.proximos__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
}

.proximos h2 {
  font-size: var(--texto-xl);
}

.proximos__cabecera a {
  font-size: var(--texto-s);
  font-weight: 500;
}

.agenda {
  margin-top: var(--e3);
  border-top: 1px solid var(--borde-fuerte);
}

.agenda__fecha {
  display: grid;
  gap: var(--e3);
  padding-block: var(--e4);
  border-bottom: 1px solid var(--borde);
}

.agenda__cuando {
  display: grid;
  align-content: start;
  gap: 2px;
}

.agenda__cuando time {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.agenda__cuando span {
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

.agenda__fecha--vencida .agenda__cuando span {
  color: var(--incumplida-texto);
  font-weight: 600;
}

.agenda__promesas {
  display: grid;
  gap: var(--e3);
}

.agenda__promesas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e3);
}

.agenda__promesas a {
  flex: 1 1 16rem;
  color: var(--tinta);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.agenda__promesas a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

@media (min-width: 48rem) {
  .agenda__fecha {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--e6);
  }
}

/* Primeros 100 días ----------------------------------------------------- */

.cien__avance {
  max-width: var(--ancho-lectura);
  margin-top: var(--e5);
}

.cien__dia {
  font-size: var(--texto-xl);
  font-stretch: 86%;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cien__barra {
  height: 10px;
  margin-top: var(--e3);
}

.cien__cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1) var(--e3);
  margin-top: var(--e3);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

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

.cien__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}

.cien .pagina__bajada {
  max-width: var(--ancho-lectura);
}

.cien .grupo:first-of-type {
  margin-top: var(--e6);
}

/* Compartir ------------------------------------------------------------- */

.compartir {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
}

.compartir .boton {
  gap: var(--e2);
}

.boton--claro {
  border-color: var(--borde-fuerte);
  background: var(--superficie);
  color: var(--tinta);
}

/* Listado --------------------------------------------------------------- */

.listado {
  padding-bottom: var(--e8);
}

.listado h2 {
  font-size: var(--texto-xl);
}

.buscador {
  position: relative;
  display: flex;
  gap: var(--e2);
  margin-top: var(--e4);
}

.buscador > .icono {
  position: absolute;
  left: 1.125rem;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--tinta-suave);
  transform: translateY(-50%);
  pointer-events: none;
}

.buscador input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 var(--e3) 0 3.25rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-l);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.buscador input[type="search"]::placeholder {
  color: var(--tinta-suave);
}

.buscador input[type="search"]:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

.con-js [data-solo-sin-js] {
  display: none;
}

.filtros {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e4);
}

.filtros__grupo {
  display: grid;
  gap: var(--e2);
}

.filtros__nombre {
  color: var(--tinta-suave);
  font-size: var(--texto-xs);
  font-weight: 600;
}

.chips {
  display: flex;
  gap: var(--e2);
  margin-inline: calc(var(--e3) * -1);
  padding-inline: var(--e3);
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--e3);
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--tinta);
  font-size: var(--texto-s);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transicion), background-color var(--transicion), color var(--transicion);
}

.chip:hover {
  border-color: var(--tinta);
}

.chip[aria-current] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--fondo);
}

@media (min-width: 48rem) {
  .filtros__grupo {
    grid-template-columns: 6rem 1fr;
    align-items: start;
  }

  .filtros {
    grid-template-columns: auto 1fr;
    column-gap: var(--e3);
  }

  .filtros__grupo--categoria {
    grid-column: 1 / -1;
  }

  .filtros__grupo--plazo {
    grid-template-columns: 1fr;
    justify-self: start;
    padding-left: var(--e3);
    border-left: 1px solid var(--borde);
  }

  .filtros__nombre {
    line-height: 44px;
  }

  .chips {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.listado__cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  min-height: 44px;
  margin-top: var(--e4);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

.grupo {
  margin-top: var(--e5);
}

.listado__cuenta + .grupo {
  margin-top: var(--e3);
}

.grupo__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borde-fuerte);
  font-size: var(--texto-l);
  letter-spacing: -0.015em;
}

.grupo__cuenta {
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--e3);
  margin-top: var(--e3);
}

/* Tarjeta --------------------------------------------------------------- */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.tarjeta:hover {
  border-color: var(--borde-fuerte);
  box-shadow: var(--sombra);
}

.tarjeta:focus-within {
  border-color: var(--acento);
}

.tarjeta__titulo {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.tarjeta__titulo a {
  color: inherit;
  text-decoration: none;
}

.tarjeta__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio-l);
}

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

.tarjeta__titulo a:focus-visible::after {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.tarjeta__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
}

.tarjeta__plazo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--tinta-suave);
  font-size: var(--texto-xs);
  font-weight: 500;
}

.tarjeta__pie--vencida .tarjeta__plazo {
  color: var(--incumplida-texto);
  font-weight: 600;
}

.plazo__barra--vencida span {
  background: var(--incumplida-solido);
}

/* Plazo ----------------------------------------------------------------- */

.plazo {
  display: grid;
  gap: var(--e2);
}

.plazo__texto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e1) var(--e3);
  color: var(--tinta-suave);
  font-size: var(--texto-xs);
}

.plazo__texto span:first-child {
  color: var(--tinta);
  font-weight: 600;
}

.plazo__texto span:only-child {
  color: var(--tinta-suave);
  font-weight: 400;
}

.plazo__barra {
  height: 6px;
  border-radius: 999px;
  background: var(--hundido);
  overflow: hidden;
}

.plazo__barra span {
  display: block;
  width: var(--avance);
  height: 100%;
  border-radius: inherit;
  background: var(--tinta-suave);
}

.plazo--vencida .plazo__barra span {
  background: var(--incumplida-solido);
}

.plazo--vencida .plazo__texto span:last-child {
  color: var(--incumplida-texto);
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .plazo__barra span {
    animation: crecer 700ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    transform-origin: left;
  }

  @keyframes crecer {
    from {
      transform: scaleX(0);
    }
  }
}

/* Estado vacío ---------------------------------------------------------- */

.vacio {
  margin-top: var(--e4);
  padding: var(--e6) var(--e4);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-l);
  color: var(--tinta-suave);
  text-align: center;
}

.vacio--izquierda {
  padding: var(--e4);
  text-align: left;
}

.vacio__titulo {
  margin-bottom: var(--e1);
  color: var(--tinta);
  font-weight: 600;
}

/* Ficha de promesa ------------------------------------------------------ */

.ficha,
.pagina {
  padding-block: var(--e5) var(--e8);
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  font-weight: 500;
  text-decoration: none;
}

.volver:hover {
  color: var(--tinta);
}

.ficha__cabecera {
  display: grid;
  justify-items: start;
  gap: var(--e3);
  margin-top: var(--e4);
}

.ficha__categoria {
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  font-weight: 500;
}

.ficha h1,
.pagina h1 {
  font-size: var(--texto-2xl);
  font-stretch: 86%;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.datos {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e5);
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  background: var(--superficie);
}

.datos > div + div {
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
}

.datos dt {
  margin-bottom: var(--e2);
  color: var(--tinta-suave);
  font-size: var(--texto-xs);
  font-weight: 600;
}

.datos .plazo__texto {
  font-size: var(--texto-s);
}

.datos__texto {
  font-size: var(--texto-s);
  line-height: 1.5;
}

.datos__texto p + p {
  margin-top: var(--e2);
}

.datos__nota {
  margin-top: var(--e2);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

.fuentes {
  display: grid;
  gap: var(--e1);
}

.fuentes a,
.linea__evidencia a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding-block: 0.375rem;
  font-weight: 500;
}

.fuentes .icono,
.linea__evidencia .icono {
  align-self: center;
  width: 0.875em;
  height: 0.875em;
}

.historial {
  margin-top: var(--e6);
}

.historial h2 {
  font-size: var(--texto-xl);
}

.ficha__correccion,
.pagina__nota {
  margin-top: var(--e5);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

/* Línea de tiempo ------------------------------------------------------- */

.linea {
  margin-top: var(--e4);
}

.linea__paso {
  position: relative;
  display: grid;
  gap: var(--e2);
  padding: 0 0 var(--e5) var(--e5);
}

.linea__paso::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1.25rem;
  bottom: -0.25rem;
  width: 2px;
  background: var(--borde);
}

.linea__paso:last-child {
  padding-bottom: 0;
}

.linea__paso:last-child::before {
  display: none;
}

.linea__punto {
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--fondo);
}

.linea__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
}

.linea__cabecera time {
  color: var(--tinta-suave);
  font-size: var(--texto-s);
  font-weight: 500;
}

.linea__titulo {
  font-size: var(--texto-l);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.linea__titulo a {
  color: inherit;
  text-decoration: none;
}

.linea__titulo a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.linea__paso:target .linea__punto {
  box-shadow: 0 0 0 4px var(--fondo), 0 0 0 6px var(--tinta);
}

/* Páginas de texto ------------------------------------------------------ */

.pagina__bajada {
  margin-top: var(--e3);
  color: var(--tinta-suave);
  font-size: var(--texto-l);
  line-height: 1.4;
}

.prosa p + p,
.prosa ul + p,
.prosa p + ul {
  margin-top: var(--e3);
}

.prosa h2 {
  margin-top: var(--e6);
  margin-bottom: var(--e3);
  font-size: var(--texto-xl);
}

.prosa ul {
  display: grid;
  gap: var(--e2);
  padding-left: 1.25rem;
  list-style: disc;
}

.glosario {
  display: grid;
  border-top: 1px solid var(--borde);
}

.glosario > div {
  display: grid;
  gap: var(--e2);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--borde);
}

@media (min-width: 40rem) {
  .glosario > div {
    grid-template-columns: 11rem 1fr;
    gap: var(--e3);
  }
}

/* Formulario ------------------------------------------------------------ */

.formulario {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e5);
}

.campo {
  display: grid;
  gap: var(--e2);
}

.campo label {
  font-size: var(--texto-s);
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem var(--e3);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo textarea {
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

.campo__ayuda {
  color: var(--tinta-suave);
  font-size: var(--texto-xs);
}

.formulario__error {
  color: var(--incumplida-texto);
  font-size: var(--texto-s);
  font-weight: 600;
}

.trampa {
  position: absolute;
  left: -9999px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 48px;
  padding-inline: var(--e4);
  border: 1px solid var(--acento);
  border-radius: var(--radio-m);
  background: var(--acento);
  color: var(--acento-tinta);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transicion);
}

.boton:hover {
  opacity: 0.88;
}

.boton--secundario {
  min-height: 56px;
  border-color: var(--borde-fuerte);
  border-radius: var(--radio-l);
  background: var(--superficie);
  color: var(--tinta);
}

.aviso {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e3);
  border-radius: var(--radio-m);
  background: var(--cumplida-fondo);
  color: var(--cumplida-texto);
  font-weight: 500;
}

/* Pie ------------------------------------------------------------------- */

.pie {
  padding-block: var(--e6);
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-size: var(--texto-s);
}

.pie__columnas {
  display: grid;
  gap: var(--e5);
}

@media (min-width: 48rem) {
  .pie__columnas {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pie__titulo {
  margin-bottom: var(--e2);
  color: var(--tinta);
  font-weight: 600;
}

.pie__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e4);
  margin-top: var(--e2);
}

.pie__datos a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .mosaico__casilla:hover {
    transform: none;
  }
}