/* Muchos de Nosotros — sistema visual compartido
   Times New Roman apretada en todo, blanco, negro y el naranja del logotipo.
   Pensado primero para el móvil: tipografía grande, botones al alcance del pulgar
   y nada que se salga de la pantalla. */

:root {
  --papel: #ffffff;
  --tinta: #000000;
  --naranja: #ff4f00;
  --gris: #8a8a8a;
  --linea: #e3e3e3;
  --hueco: #f4f4f4;

  --serif: "Times New Roman", Times, "Liberation Serif", serif;

  /* Escala tipográfica (móvil) */
  --t-cuerpo: 1.3125rem;                       /* 21px */
  --t-pequeno: 1.0625rem;
  --t-titulo: clamp(2.15rem, 9.2vw, 3.6rem);
  --t-gigante: clamp(2.7rem, 12.5vw, 5.4rem);

  /* Interletrado apretado, como el logotipo */
  --i-cuerpo: -0.028em;
  --i-titulo: -0.05em;

  --margen: 1.35rem;
  --ancho: 40rem;
}
@media (min-width: 48rem) {
  :root {
    --t-cuerpo: 1.6rem; --t-pequeno: 1.2rem; --margen: 3rem; --ancho: 50rem;
    --t-titulo: clamp(3rem, 5.4vw, 4.8rem);
    --t-gigante: clamp(3.8rem, 7.4vw, 7rem);
  }
}

/* Modo oscuro: sigue la preferencia del dispositivo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --papel: #000000; --tinta: #ffffff; --gris: #9b9b9b; --linea: #2c2c2c; --hueco: #161616; color-scheme: dark; }
  :root:not([data-theme="light"]) .logo .claro { display: none; }
  :root:not([data-theme="light"]) .logo .oscuro { display: block; }
}
:root[data-theme="dark"] { --papel: #000000; --tinta: #ffffff; --gris: #9b9b9b; --linea: #2c2c2c; --hueco: #161616; color-scheme: dark; }
:root[data-theme="dark"] .logo .claro { display: none; }
:root[data-theme="dark"] .logo .oscuro { display: block; }

/* Márgenes seguros en móviles con barras translúcidas */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }

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

/* «clip» evita el desplazamiento horizontal sin anular los elementos fijos (sticky) */
html { overflow-x: hidden; }
body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--t-cuerpo);
  line-height: 1.32;
  letter-spacing: var(--i-cuerpo);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }

p { margin: 0 0 0.85em; }

/* ---------- Titulares ---------- */

.titulo, h1, h2 {
  font-size: var(--t-titulo);
  font-weight: 700;
  letter-spacing: var(--i-titulo);
  line-height: 0.98;
  margin: 0 0 0.55em;
}
.gigante { font-size: var(--t-gigante); line-height: 0.92; }
h3 { font-size: 1.6rem; letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 0.5em; }

.cursiva { font-style: italic; }
.ligera { font-weight: 400; }
/* Frases cortas, una por línea */
.versos { margin: 0 0 1em; }
.versos p { margin: 0 0 0.3em; }
.naranja { color: var(--naranja); }
.gris { color: var(--gris); }
.pequeno { font-size: var(--t-pequeno); line-height: 1.35; }

/* El recurso del logotipo: etiqueta naranja de bordes irregulares detrás de una palabra */
.recorte {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 0 0.14em;
  color: #fff;
  font-weight: 700;
}
.recorte::before {
  content: "";
  position: absolute;
  inset: 0.06em -0.02em 0 -0.03em;
  background: var(--naranja);
  filter: url(#mdn-rugoso);
  z-index: -1;
}

/* ---------- Cabecera y pie ---------- */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--margen) 0.6rem;
}
.cabecera .logo img { display: block; height: 1.45rem; width: auto; }
.cabecera .logo .oscuro { display: none; }
@media (min-width: 48rem) { .cabecera .logo img { height: 2rem; } .cabecera { padding-top: 1.6rem; } }

.pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  padding: 1.5rem var(--margen);
  font-size: var(--t-pequeno);
  color: var(--gris);
}
.pie a, .pie button { color: var(--gris); }
.pie[hidden] { display: none; }

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

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.9rem;
  padding: 0.6rem 1.5rem 0.7rem;
  font: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--papel);
  background: var(--tinta);
  border: 2px solid var(--tinta);
  border-radius: 3rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease;
}
.boton:active { transform: scale(0.98); }
.boton:disabled { background: var(--linea); border-color: var(--linea); color: var(--gris); cursor: default; transform: none; }
.boton.secundario { background: var(--papel); color: var(--tinta); }
@media (min-width: 48rem) { .boton { width: auto; min-width: 20rem; font-size: 1.6rem; min-height: 4.4rem; } .opcion { font-size: 1.6rem; min-height: 4.4rem; } }

button.enlace {
  font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em;
}

/* ---------- Opciones (preguntas) ---------- */

.opciones { display: grid; gap: 0.6rem; margin: 1.4rem 0 0; }
.opcion {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 3.9rem;
  padding: 0.7rem 1.15rem;
  font: inherit;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.035em;
  text-align: left;
  color: var(--tinta);
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.opcion .letra {
  flex: none;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  letter-spacing: 0;
}
.opcion[aria-pressed="true"] {
  background: var(--naranja);
  border-color: var(--naranja);
  color: #fff;
  font-weight: 700;
}
.opcion[aria-pressed="true"] .letra { background: #fff; border-color: #fff; color: var(--naranja); }
@media (hover: hover) { .opcion:hover { background: var(--hueco); } .opcion[aria-pressed="true"]:hover { background: var(--naranja); } }

/* ---------- Campos de texto ---------- */

.campo { display: block; margin: 0 0 1.4rem; }
.campo > span { display: block; font-size: var(--t-pequeno); color: var(--gris); margin-bottom: 0.25rem; }
input[type="text"], input[type="email"], textarea {
  width: 100%;
  font: inherit;
  font-size: 1.6rem;
  letter-spacing: -0.035em;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--tinta);
  border-radius: 0;
  padding: 0.45rem 0 0.4rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input:focus, textarea:focus { border-bottom-color: var(--naranja); }
textarea { resize: none; min-height: 6rem; line-height: 1.2; }
::placeholder { color: #b8b8b8; }

.casilla { display: flex; gap: 0.85rem; align-items: flex-start; font-size: var(--t-pequeno); line-height: 1.35; cursor: pointer; }
.casilla input {
  flex: none; width: 1.6rem; height: 1.6rem; margin: 0.05rem 0 0;
  appearance: none; -webkit-appearance: none;
  border: 2px solid var(--tinta); border-radius: 0.35rem; background: var(--papel); cursor: pointer;
}
.casilla input:checked { background: var(--naranja); border-color: var(--naranja); box-shadow: inset 0 0 0 3px var(--papel); }

/* ---------- Aviso de cookies ---------- */

.aviso-cookies {
  position: fixed;
  left: 0.6rem; right: 0.6rem;
  bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 1.2rem;
  padding: 1.1rem 1.2rem 1.2rem;
  font-size: var(--t-pequeno);
  line-height: 1.35;
}
.aviso-cookies p { margin: 0 0 0.9rem; }
.aviso-cookies .botones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.aviso-cookies .boton { min-height: 3.1rem; font-size: 1.15rem; width: 100%; min-width: 0; }
.aviso-cookies[hidden] { display: none; }

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

.pagina-texto { max-width: var(--ancho); margin: 0 auto; padding: 1.5rem var(--margen) 3rem; }
.pagina-texto h1 { margin-bottom: 0.7em; }
.pagina-texto h2 { font-size: 1.75rem; letter-spacing: -0.04em; margin: 2.2rem 0 0.5rem; }
.pagina-texto ul { padding-left: 1.1rem; margin: 0 0 1em; }
.pagina-texto li { margin-bottom: 0.45rem; }
.pagina-texto table { width: 100%; border-collapse: collapse; font-size: var(--t-pequeno); margin: 0 0 1.2rem; }
.pagina-texto th, .pagina-texto td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem 0.6rem 0; border-bottom: 1px solid var(--linea); }
.tabla-scroll { overflow-x: auto; }

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