/* Serenix — una columna tranquila, alineada a la izquierda, centrada en pantallas grandes. */

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3.woff2') format('woff2-variations'), url('../fonts/source-sans-3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Color */
  --arena: #F3ECE0;        /* fondo */
  --papel: #FBF7F0;        /* tarjetas y campos */
  --pino: #1D3B33;         /* color principal: texto y marca */
  --pino-claro: #2E5A4D;
  --pino-tinte: #E2EAE3;   /* opción elegida */
  --arcilla: #AD4B2B;      /* acento: botón principal */
  --arcilla-osc: #923C20;
  --sol: #E79A6C;          /* sol del logotipo */
  --gris: #5A645E;         /* texto secundario */
  --linea: #D6CBB9;        /* bordes suaves */
  --linea-fuerte: #8A8170; /* bordes de campos (3:1) */
  --error: #9E2B20;
  --foco: #2E5A4D;

  /* Tipografía */
  /* Títulos: serif de sistema, de estilo libro humanista (no se descarga nada).
     iPhone/Mac: Iowan Old Style · Windows: Palatino Linotype · Android: su serif (Noto Serif). */
  --f-titulo: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --f-texto: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t-xs: 0.875rem;
  --t-s: 1rem;
  --t-m: 1.125rem;
  --t-l: clamp(1.625rem, 1.2rem + 1.8vw, 2.125rem);
  --t-xl: clamp(2.125rem, 1.4rem + 3.4vw, 3.25rem);

  --radio: 18px;
  --ancho: 36rem;
  --toque: 3rem;  /* 48px, zona mínima de toque */

  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--arena);
  color: var(--pino);
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: var(--pino-claro); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--pino); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 6px;
}
[tabindex="-1"]:focus { outline: none; }

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

.saltar {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--pino);
  color: var(--papel);
  border-radius: 10px;
}
.saltar:focus { top: 1rem; color: var(--papel); }

/* ---------- Estructura ---------- */

.cabecera__in,
.contenido,
.pie__in {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * 1.25rem);
  margin-inline: auto;
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}

.cabecera__in { padding-block: 1.125rem 0.5rem; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--toque);
  color: var(--pino);
  text-decoration: none;
}
.logo:hover { color: var(--pino); }
.logo__marca { width: 2rem; height: 2rem; flex: none; }
.logo__disco { fill: var(--pino); }
.logo__sol { fill: var(--sol); }
.logo__horizonte { fill: var(--arena); }
.logo__texto {
  font-family: var(--f-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.contenido {
  flex: 1 0 auto;
  padding-block: 1.5rem 3rem;
}

.pantalla {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: entrar 0.25s ease-out both;
}
@keyframes entrar {
  from { opacity: 0.55; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Tipografía ---------- */

.antetitulo {
  margin: 0;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--pino-claro);
  max-width: 30rem;
  text-wrap: balance;
}

.titulo-xl,
.titulo-l {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.titulo-xl { font-size: var(--t-xl); }
.titulo-xl__resto {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.56em;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--pino-claro);
}
.titulo-l { font-size: var(--t-l); }

.texto { margin: 0; max-width: 34rem; }
.nota, .ayuda { margin: 0; font-size: var(--t-s); color: var(--gris); }
.ayuda { margin-top: -0.5rem; max-width: 32rem; }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-m);
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s, color 0.15s, transform 0.15s, opacity 0.15s;
}
.boton:active:not(:disabled) { transform: translateY(1px); }

.boton--principal { background: var(--arcilla); color: #FFFFFF; }
.boton--principal:hover:not(:disabled) { background: var(--arcilla-osc); }
.boton--principal:disabled { opacity: 0.45; cursor: not-allowed; }
.boton--principal[aria-busy="true"]:disabled { opacity: 0.85; cursor: progress; }

.boton--secundario { background: transparent; color: var(--pino); border-color: var(--pino); }
.boton--secundario:hover { background: var(--pino); color: var(--arena); }

.boton__spinner { display: none; }
.boton[aria-busy="true"] .boton__spinner {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

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

/* ---------- Inicio ---------- */

.pantalla--inicio { gap: 1.5rem; padding-top: 1rem; }
.inicio__accion { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 0.75rem; }
.inicio__nota {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: var(--t-s);
  color: var(--gris);
}
.puntos { display: inline-flex; gap: 4px; }
.puntos i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--linea-fuerte);
  opacity: 0.55;
}
.puntos i:first-child { background: var(--arcilla); opacity: 1; }

/* ---------- Cuestionario ---------- */

.quiz-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: -0.5rem;
}
.boton-atras {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--toque);
  margin-left: -0.5rem;
  padding: 0 0.75rem 0 0.375rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pino);
  font: inherit;
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
}
.boton-atras:hover { background: var(--pino-tinte); }
.boton-atras svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.quiz-barra__numero {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.progreso {
  height: 4px;
  margin-top: -0.75rem;
  border-radius: 4px;
  background: var(--linea);
  overflow: hidden;
}
.progreso__barra {
  height: 100%;
  background: var(--pino);
  transform-origin: left center;
  transform: scaleX(0.1);
  transition: transform 0.35s ease;
}

.pregunta-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }

.opciones {
  display: grid;
  gap: 0.625rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.opciones__nota { margin: -0.5rem 0 -0.5rem; font-size: var(--t-s); color: var(--gris); }

.opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.75rem;
  padding: 0.875rem 1.125rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--pino);
  font: inherit;
  font-size: var(--t-m);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.opcion:hover { border-color: var(--pino-claro); }
.opcion__texto { min-width: 0; }

.opcion__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.375rem; height: 1.375rem;
  border: 2px solid var(--linea-fuerte);
  background: var(--papel);
  transition: background-color 0.15s, border-color 0.15s;
}
.opcion--unica .opcion__marca { border-radius: 50%; }
.opcion--multiple .opcion__marca { border-radius: 6px; }

/* elegida */
.opcion[aria-pressed="true"],
.opcion--multiple:has(.opcion__input:checked) {
  border-color: var(--pino);
  background: var(--pino-tinte);
  box-shadow: inset 0 0 0 1px var(--pino);
}
.opcion[aria-pressed="true"] .opcion__marca,
.opcion__input:checked + .opcion__marca {
  border-color: var(--pino);
  background: var(--pino);
}
.opcion[aria-pressed="true"] .opcion__marca::after {
  content: '';
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--papel);
}
.opcion__input:checked + .opcion__marca::after {
  content: '';
  width: 0.4rem; height: 0.7rem;
  margin-top: -0.15rem;
  border: solid var(--papel);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.opcion__input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.opcion--multiple:has(.opcion__input:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

/* edad */
.campo-edad { display: flex; flex-direction: column; gap: 0.5rem; }
.campo-edad__caja {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
}
.campo-edad__caja:focus-within { border-color: var(--pino); box-shadow: inset 0 0 0 1px var(--pino); }
.campo-edad__input {
  width: 3ch;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pino);
  font-family: var(--f-titulo);
  font-size: 2.5rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.campo-edad__input:focus { outline: none; }
.campo-edad__caja:has(.campo-edad__input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.campo-edad__caja:has([aria-invalid="true"]) { border-color: var(--error); }
.campo-edad__sufijo { font-size: var(--t-m); color: var(--gris); }

/* ---------- Listas con iconos ---------- */

.lista-iconos {
  display: grid;
  gap: 1rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  list-style: none;
}
.lista-iconos li { display: flex; gap: 1rem; align-items: flex-start; }
.icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--pino);
  color: var(--sol);
}
.icono svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lista-iconos li > span:last-child { padding-top: 0.55rem; }

.lista-candado {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-s);
  color: var(--pino-claro);
}
.lista-candado li { display: flex; gap: 0.6rem; align-items: center; }
.lista-candado svg { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: var(--arcilla); stroke-width: 1.7; stroke-linecap: round; }

/* ---------- Formulario ---------- */

.formulario { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 0.25rem; }

.campo { display: flex; flex-direction: column; gap: 0.375rem; }
.campo__etiqueta { font-size: var(--t-s); font-weight: 600; }
.campo__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 14px;
  background: var(--papel);
  color: var(--pino);
  font: inherit;
  font-size: var(--t-m);
}
.campo__input:focus { border-color: var(--pino); box-shadow: inset 0 0 0 1px var(--pino); outline: none; }
.campo__input:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.campo__input[aria-invalid="true"] { border-color: var(--error); }

.campo__error { margin: 0; font-size: var(--t-s); font-weight: 600; color: var(--error); }
.campo__error:empty { display: none; }

.campo--casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.875rem;
  row-gap: 0.375rem;
  align-items: start;
  padding: 1rem;
  border-radius: 14px;
  background: var(--papel);
  border: 1.5px solid var(--linea);
}
.campo--casilla:has([aria-invalid="true"]) { border-color: var(--error); }
.campo--casilla .campo__error { grid-column: 1 / -1; }
.casilla {
  width: 1.5rem; height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--pino);
  cursor: pointer;
}
.casilla__texto { font-size: var(--t-s); line-height: 1.5; cursor: pointer; }

.form-error {
  margin: 0;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  background: #F6DED8;
  color: var(--error);
  font-weight: 600;
  font-size: var(--t-s);
}

.trampa {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Pie ---------- */

.pie {
  flex: none;
  background: var(--pino);
  color: #E3DACB;
}
.pie__in {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1.75rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
}

.confianza {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--f-titulo);
  font-size: 1.0625rem;
  font-weight: 400;
  font-style: normal;
  color: var(--arena);
}
.confianza li { display: inline-flex; align-items: center; gap: 0.5rem; }
.confianza li::before {
  content: '';
  width: 0.5rem; height: 0.5rem;
  border-radius: 50% 50% 0 0;
  background: var(--sol);
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  font-size: var(--t-xs);
}
.pie__enlaces a,
.pie__enlaces .enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #E3DACB;
}
.pie__enlaces a:hover,
.pie__enlaces .enlace:hover { color: #FFFFFF; }
.pie :focus-visible { outline-color: var(--sol); }

/* ---------- Páginas legales ---------- */

.legal { max-width: 40rem; }
.legal h1 { margin: 0 0 0.5rem; font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.01em; }
.legal h2 { margin: 2.25rem 0 0.75rem; font-family: var(--f-titulo); font-weight: 700; font-size: 1.375rem; line-height: 1.25; }
.legal h3 { margin: 1.5rem 0 0.5rem; font-size: var(--t-m); font-weight: 700; }
.legal p, .legal li { max-width: 65ch; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal li::marker { color: var(--arcilla); }
.legal .actualizado { color: var(--gris); font-size: var(--t-s); margin-bottom: 1.5rem; }
.legal .aviso-crisis {
  padding: 1rem 1.125rem;
  border-radius: 14px;
  background: var(--papel);
  border: 1.5px solid var(--linea);
}
.legal code { font-size: 0.92em; background: var(--papel); padding: 0.1em 0.35em; border-radius: 5px; }

.tabla { overflow-x: auto; margin: 0 0 1rem; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--papel); }
.tabla table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-s); }
.tabla th, .tabla td { padding: 0.65rem 0.875rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th { font-weight: 700; background: var(--pino-tinte); }

.volver { display: inline-flex; align-items: center; min-height: var(--toque); font-weight: 600; }

/* ---------- Vista previa ---------- */

.demo-badge {
  position: fixed;
  right: max(0.5rem, env(safe-area-inset-right, 0px));
  top: calc(0.5rem + env(safe-area-inset-top, 0px));
  z-index: 50;
  max-width: 14rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: #3D3A33;
  color: #FFFFFF;
  font-size: 0.75rem;
  line-height: 1.3;
  pointer-events: none;
}

/* ---------- Banner de cookies (CookieConsent v3) ---------- */

#cc-main {
  --cc-font-family: var(--f-texto);
  --cc-bg: var(--papel);
  --cc-primary-color: var(--pino);
  --cc-secondary-color: var(--gris);
  --cc-btn-primary-bg: var(--pino);
  --cc-btn-primary-color: var(--papel);
  --cc-btn-primary-border-color: var(--pino);
  --cc-btn-primary-hover-bg: var(--pino-claro);
  --cc-btn-primary-hover-color: var(--papel);
  --cc-btn-primary-hover-border-color: var(--pino-claro);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--pino);
  --cc-btn-secondary-border-color: var(--pino);
  --cc-btn-secondary-hover-bg: var(--pino-tinte);
  --cc-btn-secondary-hover-color: var(--pino);
  --cc-btn-secondary-hover-border-color: var(--pino);
  --cc-separator-border-color: var(--linea);
  --cc-toggle-on-bg: var(--pino);
  --cc-toggle-off-bg: var(--linea-fuerte);
  --cc-toggle-readonly-bg: var(--linea);
  --cc-toggle-on-knob-bg: var(--papel);
  --cc-toggle-off-knob-bg: var(--papel);
  --cc-toggle-readonly-knob-bg: var(--papel);
  --cc-cookie-category-block-bg: var(--arena);
  --cc-cookie-category-block-border: var(--linea);
  --cc-cookie-category-block-hover-bg: var(--pino-tinte);
  --cc-cookie-category-block-hover-border: var(--linea);
  --cc-section-category-border: var(--linea);
  --cc-footer-bg: var(--arena);
  --cc-footer-color: var(--gris);
  --cc-footer-border-color: var(--linea);
  --cc-overlay-bg: rgba(29, 59, 51, 0.55);
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius: 999px;
  --cc-link-color: var(--pino-claro);
}
/* «body» sube la especificidad: cookieconsent.css se carga después de este archivo. */
body #cc-main .cm__title,
body #cc-main .pm__title { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; }
body #cc-main .cm__btn,
body #cc-main .pm__btn { min-height: 2.875rem; font-weight: 650; font-size: 0.95rem; }

/* ---------- Escritorio ---------- */

@media (min-width: 48rem) {
  .contenido { padding-block: 3rem 4.5rem; }
  .pantalla--inicio { padding-top: 2.5rem; }
  .cabecera__in { padding-block: 1.75rem 0.5rem; }
  .pie__in { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

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

.pagina-legal { --ancho: 42rem; }