/* Página mínima de ZaharDev. Cada medida sale de los tokens de :root. */

:root {
  color-scheme: light dark;

  --color-fondo: #ffffff;
  --color-texto: #14161a;
  --color-texto-suave: #4a505c;
  --color-acento: #3730a3;
  --color-acento-texto: #ffffff;
  --color-borde: #d9dce3;

  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-6: 1.5rem;
  --espacio-8: 2rem;
  --espacio-12: 3rem;
  --margen-lateral: clamp(1rem, 5vw, 4rem);

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --texto-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --texto-grande: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --texto-titulo: clamp(2.25rem, 1.25rem + 4.5vw, 4.5rem);
  --texto-titulo-documento: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --texto-chico: 0.875rem;
  --interlineado: 1.5;
  --interlineado-titulo: 1.05;

  --ancho-titulo: 18ch;
  --ancho-texto: 38rem;
  --ancho-pagina: 80rem;
  --objetivo-tactil: 3rem;
  --objetivo-tactil-compacto: 2.75rem;
  --radio: 0.5rem;
  --contorno-foco: 3px;
  --separacion-subrayado: 0.2em;
  --tracking-marca: -0.01em;
  --tracking-titulo: -0.02em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #0f1115;
    --color-texto: #eceef2;
    --color-texto-suave: #a6adbb;
    --color-acento: #a5b4fc;
    --color-acento-texto: #14161a;
    --color-borde: #2b303a;
  }
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  /* La franja del aviso ocupa la primera fila; oculta, la fila mide cero y nada se mueve. */
  grid-template-rows: auto auto 1fr auto;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  -webkit-text-size-adjust: 100%;
}

.marco {
  width: 100%;
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  padding-block: var(--espacio-4);
}

.marca {
  font-weight: 700;
  font-size: var(--texto-grande);
  letter-spacing: var(--tracking-marca);
}

.idioma {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding-inline: var(--espacio-3);
  border-radius: var(--radio);
  color: var(--color-texto);
  text-underline-offset: var(--separacion-subrayado);
}

.principal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espacio-6);
  padding-block: var(--espacio-12);
}

h1 {
  margin: 0;
  max-width: var(--ancho-titulo);
  font-size: var(--texto-titulo);
  line-height: var(--interlineado-titulo);
  letter-spacing: var(--tracking-titulo);
  text-wrap: balance;
}

.aviso {
  margin: 0;
  max-width: var(--ancho-texto);
  font-size: var(--texto-grande);
  color: var(--color-texto-suave);
}

.boton {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding-inline: var(--espacio-6);
  border-radius: var(--radio);
  background: var(--color-acento);
  color: var(--color-acento-texto);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.boton:hover {
  text-decoration: underline;
  text-underline-offset: var(--separacion-subrayado);
}

/* El correo, como enlace de texto bajo el botón: mismo objetivo táctil, sin competir con la llamada. */
.correo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  color: var(--color-acento);
  font-weight: 600;
  text-underline-offset: var(--separacion-subrayado);
}

.pie {
  padding-block: var(--espacio-6);
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
}

.pie p {
  margin: 0;
}

body > .franja { grid-row: 1; }
body > header { grid-row: 2; }
body > main { grid-row: 3; }
body > footer { grid-row: 4; }

.pie a {
  color: inherit;
  text-underline-offset: var(--separacion-subrayado);
}

/* La franja del aviso de privacidad: arriba y en el flujo, para no tapar el botón de llamar.
   Compacta: una fila en escritorio; en el teléfono, el texto y debajo los dos botones a lo ancho. */
.franja {
  padding-block: var(--espacio-3);
  border-bottom: 1px solid var(--color-borde);
  font-size: var(--texto-chico);
}

.franja-contenido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-6);
}

.franja p {
  flex: 999 1 20rem;
  margin: 0;
}

.franja .franja-botones {
  flex: 1 0 auto;
  justify-content: flex-end;
  gap: var(--espacio-2);
}

.franja .boton-secundario {
  flex: 1 0 auto;
  justify-content: center;
  min-height: var(--objetivo-tactil-compacto);
  padding-inline: var(--espacio-4);
}

.franja a {
  color: var(--color-acento);
  font-weight: 600;
  text-underline-offset: var(--separacion-subrayado);
}

/* Rechazar y Aceptar pesan lo mismo: rechazar no debe costar más que aceptar. */
.franja-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.boton-secundario {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo-tactil);
  padding-inline: var(--espacio-6);
  border: 1px solid var(--color-acento);
  border-radius: var(--radio);
  background: transparent;
  color: var(--color-acento);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.boton-secundario:hover {
  text-decoration: underline;
  text-underline-offset: var(--separacion-subrayado);
}

/* La página del aviso: texto largo, a lo ancho legible. */
.documento {
  padding-block: var(--espacio-8) var(--espacio-12);
}

.documento h1 {
  max-width: none;
  font-size: var(--texto-titulo-documento);
}

.documento h2 {
  margin-block: var(--espacio-8) var(--espacio-3);
  font-size: var(--texto-grande);
}

.documento p,
.documento ul,
.documento ol {
  max-width: var(--ancho-texto);
}

.documento a {
  color: var(--color-acento);
  text-underline-offset: var(--separacion-subrayado);
}

.fecha {
  color: var(--color-texto-suave);
}

.eleccion {
  margin-block: var(--espacio-8);
  padding: var(--espacio-4) var(--espacio-6) var(--espacio-6);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}

.eleccion h2 {
  margin-block-start: 0;
}

a:focus-visible,
button:focus-visible {
  outline: var(--contorno-foco) solid var(--color-acento);
  outline-offset: var(--espacio-2);
}