/* Portada de las comunidades de CERCA.
 *
 * Mismos colores y mismas reglas que la web de cada comunidad
 * (solarbot/web/estatico/estilo.css): móvil primero y pensada para leerse a
 * partir de los 60, con tamaños en rem y zonas de toque de 48 px como mínimo.
 */

:root {
  --fondo: #fbfaf7;
  --tarjeta: #ffffff;
  --texto: #1c1a17;
  --suave: #5b5650;
  --borde: #ddd6cc;
  --sol: #f7a600;
  --sobre-sol: #1c1a17;
  --pie: #1c1a17;
  --sobre-pie: #fff8e1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14130f;
    --tarjeta: #201e1a;
    --texto: #f5f1ea;
    --suave: #b5ada1;
    --borde: #3a3630;
    --pie: #000000;
  }
}

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

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

/* En iPhone, seguir el «Tamaño del texto» de Ajustes → Pantalla y brillo */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.cabecera {
  background: var(--sol);
  color: var(--sobre-sol);
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top));
  font-weight: 700;
  font-size: 1.15rem;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0.5rem 0 0.75rem;
}

h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.75rem;
}

.entrada { font-size: 1.05rem; }

p { margin: 0 0 1rem; }

.nota { color: var(--suave); }

/* ── Lista de comunidades ─────────────────────────────────────────────────── */
.comunidades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.comunidad {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 1rem;
  min-height: 48px;
  padding: 1rem;
  background: var(--tarjeta);
  border: 2px solid var(--borde);
  border-radius: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.comunidad:hover,
.comunidad:focus-visible {
  border-color: var(--sol);
  outline: none;
}

.comunidad-nombre {
  font-size: 1.3rem;
  font-weight: 700;
}

.comunidad-detalle {
  grid-column: 1;
  color: var(--suave);
}

.comunidad-ir {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.6rem;
  color: var(--sol);
}

/* ── Páginas de texto (aviso legal, privacidad) ───────────────────────────── */
.texto h2 { margin-top: 2rem; }

.texto dl { margin: 0 0 1rem; }
.texto dt { font-weight: 700; margin-top: 0.75rem; }
.texto dd { margin: 0.15rem 0 0; color: var(--suave); }

.texto ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.texto li { margin-bottom: 0.5rem; }

.texto a { color: inherit; }

mark {
  background: var(--sol);
  color: var(--sobre-sol);
  padding: 0 0.25rem;
  font-weight: 700;
}

.volver,
.pie a {
  display: inline-block;
  min-height: 48px;
  line-height: 48px;
  color: inherit;
}

.pie a { margin: 0 0.5rem; }

.marca { color: inherit; text-decoration: none; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.pie {
  background: var(--pie);
  color: var(--sobre-pie);
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.9rem;
}

@media (min-width: 40rem) {
  h1 { font-size: 2rem; }
  .comunidades { grid-template-columns: 1fr 1fr; }
}