/* Hoja común de las páginas del sitio (soporte, privacidad, condiciones).
 *
 * Los colores son los de src/theme.js, copiados a mano: la web no comparte
 * código con la app y no vale la pena montar un paso de build para tres
 * ficheros estáticos. Si se toca el verde de marca, se toca en los dos sitios.
 *
 * El fondo imita el de la app (un blanco roto con manchas del verde de marca),
 * pero con radial-gradient en vez del <Fondo> nativo. No hay cristal: aquí se
 * lee texto largo, y el texto largo sobre translúcido se lee peor. */
:root {
  color-scheme: light;
  --bg: #EFF4F1;
  --text: #151A2D;
  --soft: #5C6377;
  --faint: #8A90A3;
  --accent: #25705F;
  --borde: rgba(21, 26, 45, .09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(60rem 40rem at 12% -8%, #DCEBE4 0%, transparent 60%),
    radial-gradient(45rem 32rem at 100% 0%, #BFDDD1 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.envoltura { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; }

/* Marca */
.marca {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--text);
  font-weight: 800; letter-spacing: -.02em; font-size: 1.125rem;
}
.marca span { font-size: 1.375rem; }

h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.03em; margin: 2rem 0 .5rem; }
h2 {
  font-size: 1.1875rem; letter-spacing: -.02em; margin: 2.75rem 0 .75rem;
  padding-top: 1.5rem; border-top: 1px solid var(--borde);
}
h3 { font-size: 1rem; margin: 1.5rem 0 .25rem; }
p, li { color: var(--soft); }
p { margin: 0 0 1rem; }
strong { color: var(--text); font-weight: 600; }
.entrada { font-size: 1.125rem; color: var(--soft); }
.fecha { color: var(--faint); font-size: .875rem; margin: 0 0 2rem; }

ul, ol { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: .375rem; }

a { color: var(--accent); text-underline-offset: .15em; }

/* Tarjeta de contacto: lo único que casi todo el mundo viene a buscar, así que
 * va sólida y arriba del todo, no escondida al final. */
.tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: 1.25rem;
  padding: 1.5rem; margin: 0 0 2rem;
  box-shadow: 0 1px 2px rgba(21, 26, 45, .04);
}
.tarjeta p:last-child { margin-bottom: 0; }
.correo {
  display: inline-block; font-size: 1.25rem; font-weight: 700;
  color: var(--accent); text-decoration: none; letter-spacing: -.01em;
}
.correo:hover { text-decoration: underline; }

.boton {
  display: inline-block; background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 700; padding: .8rem 1.4rem;
  border-radius: 999px;
}

/* Preguntas frecuentes: <details> y no JavaScript. Una página de soporte tiene
 * que abrir aunque falle todo lo demás, y así el navegador ya sabe buscarlas
 * con Cmd+F aunque estén cerradas (los navegadores modernos abren el <details>
 * al encontrar dentro). */
details {
  border-bottom: 1px solid var(--borde);
  padding: .875rem 0;
}
summary {
  cursor: pointer; font-weight: 600; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--faint); font-weight: 400; font-size: 1.25rem; line-height: 1; }
details[open] summary::after { content: "\2013"; }
details > *:not(summary) { margin-top: .75rem; }
details p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .9375rem; }
th, td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--borde); color: var(--soft); }
th { color: var(--text); font-weight: 600; }

footer {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--borde);
  color: var(--faint); font-size: .875rem;
}
footer a { color: var(--faint); }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  background: rgba(37, 112, 95, .08);
  padding: .1em .35em; border-radius: .35em;
  white-space: nowrap;
}

/* Selector de idioma de la política de privacidad.
 *
 * Son 39 enlaces: en lista vertical ocuparían media pantalla, así que van en
 * rejilla que se adapta al ancho. El idioma actual no es enlace (<strong>), que
 * es la forma más barata de decir "estás aquí" sin JavaScript. */
.idiomas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .375rem 1rem;
  font-size: .9375rem;
  margin-bottom: 1rem;
}
.idiomas a { color: var(--soft); text-decoration: none; }
.idiomas a:hover { color: var(--accent); text-decoration: underline; }
.idiomas strong { color: var(--text); }