/* ==========================================================================
   RAZONES PARA QUEDARTE · Hoja de estilos
   --------------------------------------------------------------------------
   Índice:
     1. Variables y temas (día / noche / alto contraste)
     2. Base
     3. Cabecera, menú y barra de accesibilidad
     4. Botones
     5. La hoja de cuaderno (la carta)
     6. Acciones de la carta
     7. Páginas interiores (acerca de, ayuda, formulario...)
     8. Pie de página
     9. Móvil
    10. Impresión y movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES Y TEMAS
   ========================================================================== */

:root {
  /* Ritmo vertical de la hoja: los renglones y el texto comparten esta medida.
     Si cambias --linea, todo el cuaderno se reajusta solo. */
  --linea: 2rem;

  --fuente-maquina: 'Courier Prime', 'Courier New', Courier, monospace;
  --fuente-titulo: 'Special Elite', 'Courier Prime', 'Courier New', monospace;

  /* Papel y tinta: marfil + azul noche para que el amarillo no dificulte la lectura */
  --papel: #fffaf0;
  --papel-2: #fff1c7;
  --papel-3: #ffe5a3;
  --tinta: #1d2a35;
  --tinta-suave: #45515c;
  --borde: #e6c979;

  /* Cuaderno */
  --renglon: #f0d58a;
  --margen-color: #e79a5b;
  --margen-x: clamp(2rem, 7vw, 3.1rem);

  /* Mesa sobre la que descansa el papel */
  --mesa-1: #f4dfaa;
  --mesa-2: #e6b978;

  /* Acentos */
  --acento: #b84a12;
  --acento-oscuro: #84350e;
  --acento-suave: #ffe2b8;

  /* Aviso de crisis */
  --crisis-fondo: #fff3bf;
  --crisis-tinta: #263746;
  --crisis-borde: #e6b94f;

  --sombra-papel: 0 22px 45px -22px rgba(64, 45, 20, .55), 0 3px 10px -4px rgba(64, 45, 20, .25);
  --radio: 3px;
}

/* --- Modo noche: papel oscuro, tinta clara ------------------------------- */
html.pref-noche {
  --papel: #29251d;
  --papel-2: #38301f;
  --papel-3: #4a3d25;
  --tinta: #fff4d6;
  --tinta-suave: #dfcfa7;
  --borde: #6d592f;
  --renglon: rgba(247, 202, 77, .30);
  --margen-color: rgba(238, 145, 78, .62);
  --mesa-1: #1d1710;
  --mesa-2: #100c08;
  --acento: #f08a3c;
  --acento-oscuro: #ffb15e;
  --acento-suave: #4b321e;
  --crisis-fondo: #493919;
  --crisis-tinta: #fff0bd;
  --crisis-borde: #a67a2a;
  --sombra-papel: 0 22px 45px -22px rgba(0, 0, 0, .85), 0 3px 10px -4px rgba(0, 0, 0, .6);
}

/* --- Alto contraste ------------------------------------------------------ */
html.pref-contraste {
  --papel: #ffffff;
  --papel-2: #ffffff;
  --papel-3: #f2f2f2;
  --tinta: #000000;
  --tinta-suave: #1a1a1a;
  --borde: #000000;
  --renglon: #8d8d8d;
  --margen-color: #a00000;
  --mesa-1: #ffffff;
  --mesa-2: #e8e8e8;
  --acento: #000000;
  --acento-oscuro: #000000;
  --acento-suave: #e8e8e8;
  --crisis-fondo: #ffffff;
  --crisis-tinta: #000000;
  --crisis-borde: #000000;
  --sombra-papel: none;
}

html.pref-contraste body::before,
html.pref-contraste .hoja::before { display: none; }
html.pref-contraste .hoja { transform: none; }
html.pref-contraste .boton,
html.pref-contraste .menu__enlace,
html.pref-contraste .campo__control { border-width: 2px; }

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente-maquina);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--mesa-1);
  background-image:
    radial-gradient(130% 70% at 50% -10%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%),
    linear-gradient(175deg, var(--mesa-1), var(--mesa-2));
  background-attachment: fixed;
  transition: background-color .3s ease, color .3s ease;
}

/* Textura de fondo, muy sutil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

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

a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento-oscuro); }

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

.contenedor {
  width: min(100% - 2.5rem, 66rem);
  margin-inline: auto;
}

.contenido { display: block; }

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--papel);
  color: var(--tinta);
  border: 2px solid var(--tinta);
  text-decoration: none;
}
.saltar:focus { left: .5rem; top: .5rem; }

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

/* ==========================================================================
   3. CABECERA, MENÚ Y ACCESIBILIDAD
   ========================================================================== */

.tira-crisis {
  background: var(--crisis-fondo);
  color: var(--crisis-tinta);
  border-bottom: 1px solid var(--crisis-borde);
  font-size: .8125rem;
}
.tira-crisis__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .5rem 0;
}
.tira-crisis__texto { margin: 0; }
.tira-crisis__texto strong { font-weight: 700; }
.tira-crisis__enlace {
  color: var(--crisis-tinta);
  white-space: nowrap;
  font-weight: 700;
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: 1.5px solid var(--borde);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 18px -14px rgba(60, 40, 15, .5);
}
.cabecera__interior {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
}

.marca-bloque {
  flex: 0 1 auto;
  min-width: 0;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--tinta);
}
.marca__icono { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.marca__icono img { display: block; width: 32px; height: 32px; object-fit: contain; }
.marca__texto {
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  letter-spacing: .02em;
  line-height: 1.2;
}
.marca__iniciativa {
  margin: .22rem 0 0 2.15rem;
  color: var(--tinta-suave);
  font-size: .6875rem;
  line-height: 1.25;
  white-space: nowrap;
}
.marca__iniciativa a {
  color: var(--acento-oscuro);
  font-weight: 700;
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__enlace {
  display: inline-block;
  padding: .35rem .1rem;
  color: var(--tinta);
  text-decoration: none;
  font-size: .9375rem;
  border-bottom: 2px solid transparent;
}
.menu__enlace:hover { border-bottom-color: var(--acento); color: var(--acento-oscuro); }
.menu__enlace.es-actual { border-bottom-color: var(--tinta); font-weight: 700; }
.menu__enlace--ayuda {
  color: var(--acento-oscuro);
  font-weight: 700;
}
.menu__enlace--ayuda::before { content: "♥ "; font-size: .8em; }

.donar-enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: .5rem .8rem;
  color: #fff;
  background: var(--acento);
  border: 1.5px solid var(--acento-oscuro);
  border-radius: var(--radio);
  box-shadow: 2px 2px 0 var(--acento-oscuro);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.donar-enlace:hover {
  color: #fff;
  background: var(--acento-oscuro);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--acento-oscuro);
}

.menu-boton {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  font-family: var(--fuente-maquina);
  font-size: .875rem;
  color: var(--tinta);
  background: var(--papel-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
}
.menu-boton__lineas,
.menu-boton__lineas::before,
.menu-boton__lineas::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--tinta);
  content: "";
  position: relative;
}
.menu-boton__lineas::before { position: absolute; top: -5px; }
.menu-boton__lineas::after { position: absolute; top: 5px; }

.barra-acces {
  background: var(--papel-2);
  border-bottom: 1px solid var(--borde);
  font-size: .8125rem;
}
.barra-acces__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem;
  padding: .4rem 0;
}
.barra-acces__titulo {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .6875rem;
  color: var(--tinta-suave);
}
.barra-acces__grupo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.barra-acces button {
  font-family: var(--fuente-maquina);
  font-size: .8125rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .2rem .6rem;
  cursor: pointer;
}
.barra-acces button:hover { background: var(--acento-suave); border-color: var(--acento); }
.barra-acces button[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento-oscuro);
  color: #fff;
  font-weight: 700;
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  font-family: var(--fuente-maquina);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio);
  box-shadow: 2px 2px 0 var(--tinta);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.boton:hover {
  color: var(--tinta);
  background: var(--papel-2);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--tinta);
}
.boton:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--tinta); }

.boton--principal {
  color: #fff;
  background: var(--acento);
  border-color: var(--acento-oscuro);
  box-shadow: 2px 2px 0 var(--acento-oscuro);
}
.boton--principal:hover { background: var(--acento-oscuro); color: #fff; box-shadow: 1px 1px 0 var(--acento-oscuro); }
.boton--principal:active { box-shadow: 0 0 0 var(--acento-oscuro); }

.boton--discreto {
  border-color: var(--borde);
  box-shadow: none;
  font-weight: 400;
  background: transparent;
}
.boton--discreto:hover { border-color: var(--tinta); background: var(--papel-2); transform: none; }

.boton[disabled],
.boton[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   5. LA HOJA DE CUADERNO
   ========================================================================== */

.lectura {
  padding: clamp(1.5rem, 4vw, 3rem) 0 2.5rem;
}

.lectura__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1rem;
  margin-bottom: .9rem;
  font-size: .8125rem;
  color: var(--tinta-suave);
}
.lectura__contador { letter-spacing: .06em; text-transform: uppercase; font-size: .6875rem; }
.lectura__pista { margin: 0; }

.hoja {
  position: relative;
  width: min(100%, 47rem);
  margin-inline: auto;
  padding: calc(var(--linea) * 2) clamp(1.4rem, 6vw, 3.5rem) calc(var(--linea) * 2) clamp(3.2rem, 11vw, 5rem);
  color: var(--tinta);
  background-color: var(--papel);
  background-image:
    /* agujeros del cuaderno */
    radial-gradient(circle at 50% 50%, rgba(105, 85, 55, .30) 0 .42rem, rgba(105, 85, 55, .12) .42rem .5rem, rgba(0, 0, 0, 0) .5rem),
    radial-gradient(circle at 50% 50%, rgba(105, 85, 55, .30) 0 .42rem, rgba(105, 85, 55, .12) .42rem .5rem, rgba(0, 0, 0, 0) .5rem),
    /* línea roja del margen */
    linear-gradient(to right,
      rgba(0, 0, 0, 0) 0 var(--margen-x),
      var(--margen-color) var(--margen-x) calc(var(--margen-x) + 1px),
      rgba(0, 0, 0, 0) calc(var(--margen-x) + 1px) 100%),
    /* renglones */
    repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0 calc(var(--linea) - 1px),
      var(--renglon) calc(var(--linea) - 1px) var(--linea));
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem, 100% 100%, 100% var(--linea);
  background-position: .1rem 20%, .1rem 74%, 0 0, 0 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-papel);
  transform: rotate(-.35deg);
}

/* Grano del papel */
.hoja::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* Esquina inferior derecha ligeramente levantada */
.hoja::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-bottom-right-radius: var(--radio);
  pointer-events: none;
  background: linear-gradient(315deg, rgba(60, 45, 25, .22), rgba(60, 45, 25, 0) 55%);
}
html.pref-noche .hoja::after { background: linear-gradient(315deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%); }

/* --- Contenido de la carta ---------------------------------------------- */

.hoja__cuerpo { position: relative; z-index: 1; }

.hoja__meta,
.hoja__tema,
.hoja__texto p,
.hoja__firma,
.hoja__cierre {
  line-height: var(--linea);
  margin: 0;
}

.hoja__meta {
  font-size: .8125rem;
  color: var(--tinta-suave);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hoja__punto { padding: 0 .35rem; }

.hoja__titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  font-weight: 400;
  line-height: calc(var(--linea) * 2);
  letter-spacing: .01em;
}

.hoja__tema {
  font-size: .8125rem;
  color: var(--tinta-suave);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hoja__tema::before { content: "sobre "; text-transform: none; letter-spacing: 0; }

.hoja__texto { margin-top: var(--linea); font-size: 1.0625rem; }
.hoja__texto p { margin-bottom: var(--linea); }
.hoja__texto p:first-child { text-indent: 0; }
.hoja__texto p + p { text-indent: 0; }

.hoja__firma {
  margin-top: var(--linea);
  font-style: italic;
  font-size: 1.0625rem;
}

.hoja__cierre {
  margin-top: var(--linea);
  font-size: .8125rem;
  color: var(--tinta-suave);
  font-style: italic;
}

/* ==========================================================================
   6. ACCIONES DE LA CARTA
   ========================================================================== */

.acciones {
  width: min(100%, 47rem);
  margin: 1.75rem auto 0;
}

.acciones__principal {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: .75rem;
}
.acciones__principal .boton { flex: 1 1 12rem; }

.acciones__secundario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
  margin-top: 1.1rem;
  font-size: .875rem;
}
.enlace-boton {
  padding: .2rem 0;
  font-family: var(--fuente-maquina);
  font-size: .875rem;
  color: var(--acento);
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--acento);
  cursor: pointer;
  text-decoration: none;
}
.enlace-boton:hover { color: var(--acento-oscuro); border-bottom-style: solid; }

.aviso-copiado {
  width: min(100%, 47rem);
  margin: .9rem auto 0;
  padding: .5rem .9rem;
  font-size: .8125rem;
  text-align: center;
  color: var(--crisis-tinta);
  background: var(--acento-suave);
  border: 1px dashed var(--acento);
  border-radius: var(--radio);
}
.aviso-copiado[hidden] { display: none; }

.invitacion {
  width: min(100%, 47rem);
  margin: 2.25rem auto 0;
  padding: 1.25rem 1.4rem;
  background: var(--papel-2);
  border: 1.5px dashed var(--borde);
  border-radius: var(--radio);
  font-size: .9375rem;
}
.invitacion p { margin: 0 0 .6rem; }
.invitacion p:last-child { margin-bottom: 0; }

.sin-cartas {
  width: min(100%, 47rem);
  margin-inline: auto;
  padding: 2rem;
  text-align: center;
  background: var(--papel);
  border: 1.5px dashed var(--borde);
  border-radius: var(--radio);
}

/* ==========================================================================
   7. PÁGINAS INTERIORES
   ========================================================================== */

.pagina {
  padding: clamp(1.75rem, 4vw, 3rem) 0 3rem;
}
.pagina__caja {
  width: min(100%, 47rem);
  margin-inline: auto;
  padding: clamp(1.6rem, 5vw, 3rem) clamp(1.4rem, 6vw, 3.5rem);
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra-papel);
}
.pagina__caja--ancha { width: min(100%, 60rem); }

.pagina__titulo {
  margin: 0 0 .4rem;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
}
.pagina__entrada {
  margin: 0 0 1.6rem;
  font-size: 1.0625rem;
  color: var(--tinta-suave);
}
.pagina h2 {
  margin: 2rem 0 .5rem;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  font-weight: 400;
}
.pagina h3 { margin: 1.4rem 0 .35rem; font-size: 1.0625rem; }
.pagina p { margin: 0 0 1rem; }
.pagina ul, .pagina ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.pagina li { margin-bottom: .4rem; }

.regla {
  height: 1px;
  margin: 1.75rem 0;
  border: 0;
  background: repeating-linear-gradient(to right, var(--borde) 0 8px, transparent 8px 14px);
}

/* --- Aviso destacado ---------------------------------------------------- */
.destacado {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--acento-suave);
  border-left: 4px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.destacado p:last-child { margin-bottom: 0; }
.destacado--crisis {
  background: var(--crisis-fondo);
  border-left-color: var(--crisis-borde);
  color: var(--crisis-tinta);
}
.destacado--crisis a { color: var(--crisis-tinta); }

/* --- Formulario --------------------------------------------------------- */
.formulario { margin-top: 1.5rem; }
.campo { margin-bottom: 1.35rem; }
.campo__etiqueta {
  display: block;
  margin-bottom: .35rem;
  font-size: .9375rem;
  font-weight: 700;
}
.campo__ayuda {
  margin: .35rem 0 0;
  font-size: .8125rem;
  color: var(--tinta-suave);
}
.campo__control {
  width: 100%;
  padding: .7rem .8rem;
  font-family: var(--fuente-maquina);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
}
.campo__control:focus {
  border-color: var(--acento);
  outline: 3px solid var(--acento-suave);
  outline-offset: 0;
}
textarea.campo__control {
  min-height: 16rem;
  line-height: var(--linea);
  resize: vertical;
  background-image: repeating-linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0 calc(var(--linea) - 1px),
    var(--renglon) calc(var(--linea) - 1px) var(--linea));
  background-size: 100% var(--linea);
  background-position: 0 .7rem;
  background-attachment: local;
}
.campo__contador {
  margin: .35rem 0 0;
  font-size: .8125rem;
  color: var(--tinta-suave);
}
.campo__contador.es-corto { color: #a8341f; }
html.pref-noche .campo__contador.es-corto { color: #ffb4a2; }

.campo--casilla {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .9375rem;
}
.campo--casilla input { margin-top: .3rem; }
.campo--antispam { margin-top: -.2rem; }
.campo--antispam .cf-turnstile { min-height: 65px; }
.campo--trampa { position: absolute; left: -9999px; }

.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.25rem;
  margin-top: 1.75rem;
}

.guia-cartas {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--borde);
}
.guia-cartas h2 { margin-top: 0; }
.guia-cartas ul { list-style: none; padding-left: 0; }
.guia-cartas li { padding-left: 1.6rem; position: relative; }
.guia-cartas li::before { content: "✎"; position: absolute; left: 0; }

/* --- Mensajes de aviso -------------------------------------------------- */
.mensaje {
  margin: 0 0 1.25rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radio);
  font-size: .9375rem;
  border: 1.5px solid;
}
.mensaje--error { background: #fdecea; border-color: #e5a79c; color: #7a2718; }
.mensaje--ok { background: #eaf5ec; border-color: #a8cdb1; color: #1f4d2b; }
html.pref-noche .mensaje--error { background: #3a201c; border-color: #7a4239; color: #ffc9bd; }
html.pref-noche .mensaje--ok { background: #1e2f23; border-color: #3f6b4c; color: #bfe6c8; }
.mensaje ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* --- Recursos de ayuda -------------------------------------------------- */
.pais {
  margin-bottom: .75rem;
  background: var(--papel);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
}
.pais[open] { border-color: var(--acento); }
.pais__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.1rem;
  font-family: var(--fuente-titulo);
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}
.pais__titulo::-webkit-details-marker { display: none; }
.pais__titulo::after { content: "＋"; font-family: var(--fuente-maquina); color: var(--acento); }
.pais[open] .pais__titulo::after { content: "−"; }
.pais__cuerpo { padding: 0 1.1rem 1.1rem; }

.recurso {
  padding: .75rem 0;
  border-top: 1px dashed var(--borde);
}
.recurso:first-child { border-top: 0; }
.recurso__nombre { margin: 0; font-weight: 700; }
.recurso__detalle { margin: .2rem 0 0; font-size: .875rem; color: var(--tinta-suave); }
.recurso__telefono {
  display: inline-block;
  margin-top: .3rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.recurso__web { font-size: .875rem; }

.rejilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tarjeta {
  padding: 1.1rem 1.2rem;
  background: var(--papel-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
}
.tarjeta h3 { margin-top: 0; }
.tarjeta p:last-child { margin-bottom: 0; }

/* --- Pasos numerados ---------------------------------------------------- */
.pasos { list-style: none; padding-left: 0; counter-reset: paso; }
.pasos li {
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
  counter-increment: paso;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  font-family: var(--fuente-titulo);
  color: var(--papel);
  background: var(--acento);
  border-radius: 50%;
}

/* ==========================================================================
   8. PIE DE PÁGINA
   ========================================================================== */

.pie {
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
  background: var(--papel);
  border-top: 1.5px solid var(--borde);
  font-size: .875rem;
}
.pie__interior {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pie__marca {
  margin: 0 0 .35rem;
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
}
.pie__eslogan { margin: 0 0 .75rem; color: var(--tinta-suave); }
.pie__iniciativa { margin: -.35rem 0 .75rem; color: var(--tinta-suave); font-size: .8125rem; }
.pie__iniciativa a { color: var(--acento-oscuro); font-weight: 700; }
.pie__donar {
  display: inline-block;
  margin-bottom: .75rem;
  padding: .5rem .75rem;
  color: #fff;
  background: var(--acento);
  border: 1px solid var(--acento-oscuro);
  border-radius: var(--radio);
  font-weight: 700;
  text-decoration: none;
}
.pie__donar:hover { color: #fff; background: var(--acento-oscuro); }
.pie__nota { margin: 0; font-size: .8125rem; color: var(--tinta-suave); }
.pie__titulo {
  margin: 0 0 .6rem;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.pie__lista { margin: 0; padding: 0; list-style: none; }
.pie__lista li { margin-bottom: .35rem; }
.pie__bloque--ayuda strong { letter-spacing: .04em; }
.pie__final {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--borde);
  font-size: .8125rem;
  color: var(--tinta-suave);
}
.pie__final p { margin: 0; }

/* ==========================================================================
   9. MÓVIL
   ========================================================================== */

@media (max-width: 820px) {
  :root { --linea: 1.75rem; }

  .contenedor { width: min(100% - 1.75rem, 66rem); }

  .menu-boton { display: inline-flex; }

  .marca__texto { font-size: 1.0625rem; }
  .marca__icono, .marca__icono img { width: 28px; height: 28px; }
  .marca__iniciativa { margin-left: 1.85rem; font-size: .625rem; }

  .donar-enlace { padding: .42rem .6rem; font-size: .75rem; }

  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: var(--papel);
    border-bottom: 1.5px solid var(--borde);
    box-shadow: 0 14px 24px -18px rgba(50, 35, 10, .6);
  }
  .menu.es-abierto { display: block; }
  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .4rem 1rem .9rem;
  }
  .menu__enlace {
    display: block;
    padding: .7rem .2rem;
    border-bottom: 1px solid var(--borde);
  }
  .menu__enlace.es-actual { border-bottom-color: var(--borde); }

  .barra-acces__interior { gap: .35rem .5rem; }
  .barra-acces__titulo { display: none; }

  .hoja {
    /* Los rellenos verticales son múltiplos de --linea para que el texto
       siga cayendo justo encima de los renglones. */
    padding: calc(var(--linea) * 2) 1.25rem calc(var(--linea) * 2) 2.4rem;
    background-position: .05rem 18%, .05rem 76%, 0 0, 0 0;
    background-size: 2.1rem 2.1rem, 2.1rem 2.1rem, 100% 100%, 100% var(--linea);
    transform: none;
  }
  :root { --margen-x: 1.6rem; }

  .hoja__texto,
  .hoja__firma { font-size: .9688rem; }

  .acciones__principal .boton { flex: 1 1 100%; }
  .acciones__secundario { justify-content: center; }

  .pie__interior { gap: 1.6rem; }
}

@media (max-width: 420px) {
  :root { --linea: 1.65rem; }
  .hoja { padding-left: 2.1rem; padding-right: 1rem; }
  :root { --margen-x: 1.35rem; }
}

/* ==========================================================================
   10. IMPRESIÓN Y MOVIMIENTO REDUCIDO
   ========================================================================== */

@media print {
  body { background: #fff; }
  body::before,
  .tira-crisis,
  .barra-acces,
  .cabecera,
  .acciones,
  .invitacion,
  .pie { display: none !important; }
  .hoja {
    width: 100%;
    box-shadow: none;
    transform: none;
    border-radius: 0;
    padding-left: 2.5rem;
  }
  .hoja::after { display: none; }
  a { color: #000; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}