/* Paleta oficial HSDA: #33394C, #3C5775, #A5B7CF, #F8F4EF, #FFFFFF, #000000 (respaldo). */
@font-face { font-family: "Avenir"; font-weight: 300; font-style: normal; font-display: swap; src: url("./assets/fonts/avenir-light.ttf") format("truetype"); }
@font-face { font-family: "Avenir"; font-weight: 500; font-style: normal; font-display: swap; src: url("./assets/fonts/avenir-medium.ttf") format("truetype"); }
@font-face { font-family: "Avenir"; font-weight: 900; font-style: normal; font-display: swap; src: url("./assets/fonts/avenir-black.ttf") format("truetype"); }

:root {
  --azul-oscuro: #33394C;
  --azul-medio: #3C5775;
  --azul-claro: #A5B7CF;
  --crema: #F8F4EF;
  --blanco: #FFFFFF;
  --negro: #000000;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { overflow-x: hidden; font-size: clamp(17px, 1.2vw + 13px, 21px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: linear-gradient(170deg, var(--azul-claro) 0%, var(--azul-medio) 45%, var(--azul-oscuro) 100%) fixed;
  color: var(--blanco);
  font-family: "Avenir", sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

/* Isotipo grande y tenue de fondo: imagotipo original, sin recortar ni deformar. */
body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 56%;
  width: min(120vw, 900px);
  aspect-ratio: 1000 / 353;
  transform: translate(-50%, -50%);
  background: url("./assets/img/HSDA-ImagotipoHorizontalAzul.png") center / contain no-repeat;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
}

.barra-logo {
  position: relative; z-index: 1;
  padding: 1.25rem 1.25rem 0.5rem;
  display: flex;
  justify-content: center;
}
.logo { display: block; width: 220px; min-width: 180px; max-width: 70%; height: auto; }

main {
  position: relative; z-index: 1;
  flex: 1; width: 100%; max-width: 46rem; margin: 0.75rem auto 1.5rem;
  padding: 1.5rem 1.25rem 2rem;
  isolation: isolate;
  border: 1.5px solid var(--azul-claro);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Velo de vidrio: blanco de la paleta con opacidad, detrás del contenido. */
main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--blanco); opacity: 0.14;
}
main:focus { outline: none; }

h1 { font-weight: 900; font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.75rem; color: var(--blanco); }
h2 {
  display: flex; align-items: center; gap: 0.7rem; scroll-margin-top: 5.5rem;
  font-weight: 900; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin: 1.75rem 0 0.75rem; color: var(--blanco);
}
h2::after { content: ""; flex: 1; height: 1px; background: var(--azul-claro); opacity: 0.5; }
#preguntas > h2:first-child { margin-top: 0.25rem; }
.lead { font-weight: 500; font-size: 1.1rem; }
.aviso, .nota { font-size: 0.9rem; }
.aviso { background: var(--azul-medio); border: 1px solid var(--azul-claro); border-radius: 14px; padding: 0.9rem 1rem; }

.btn {
  display: inline-block; min-height: 48px; min-width: 48px; padding: 0.7rem 1.75rem;
  font-family: "Avenir", sans-serif; font-weight: 900; font-size: 1.05rem; cursor: pointer;
  color: var(--azul-oscuro); background: var(--blanco); border: 2px solid var(--blanco); border-radius: 14px;
}
.btn:hover { background: var(--crema); border-color: var(--crema); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-secundario { color: var(--blanco); background: var(--azul-oscuro); border-color: var(--azul-claro); margin-top: 1rem; }
.btn-secundario:hover { color: var(--azul-oscuro); background: var(--blanco); border-color: var(--blanco); }

a { color: var(--blanco); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .opcion input:focus-visible + span {
  outline: 3px solid var(--blanco); outline-offset: 3px;
}

#preguntas { counter-reset: pregunta; }
.pregunta {
  counter-increment: pregunta; scroll-margin-top: 5.5rem;
  border: 1px solid var(--azul-claro); border-radius: 20px; background: var(--azul-medio);
  padding: 1.15rem 1rem 1rem; margin: 0 0 1rem; min-width: 0;
}
.pregunta:focus-within { border-color: var(--blanco); box-shadow: 0 0 0 2px var(--blanco); }
.pregunta legend, .pregunta > label.titulo {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-weight: 500; font-size: 1.02rem; line-height: 1.35;
}
.pregunta > label.titulo { padding: 0 0 0.75rem; }
/* Número de pregunta; al contestarla cambia a una palomita. */
.pregunta legend::before, .pregunta > label.titulo::before {
  content: counter(pregunta); flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--azul-oscuro); color: var(--blanco); border: 1px solid var(--azul-claro);
  font-weight: 900; font-size: 0.8rem;
}
.pregunta.contestada legend::before, .pregunta.contestada > label.titulo::before {
  content: "\2713"; background: var(--blanco); color: var(--azul-oscuro); border-color: var(--blanco);
}
.pregunta.con-error { border: 4px solid var(--blanco); }
.pregunta.hija { margin-left: 0.75rem; border-left: 6px solid var(--azul-claro); }

/* Barra de avance fija arriba mientras se contesta. */
.progreso {
  position: sticky; top: calc(env(safe-area-inset-top) + 0.5rem); z-index: 5;
  margin: 0 0 1.1rem; padding: 0.65rem 0.9rem 0.8rem;
  background: var(--azul-oscuro); border: 1px solid var(--azul-claro); border-radius: 16px;
}
.progreso-texto { margin: 0 0 0.45rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; color: var(--azul-claro); }
.progreso-pista { height: 8px; border-radius: 999px; background: var(--azul-medio); overflow: hidden; }
.progreso-barra { height: 100%; width: 0; border-radius: 999px; background: var(--blanco); }

.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.opcion { position: relative; flex: 1 1 5.5rem; }
.opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 58px; padding: 0.4rem 0.5rem; border: 1.5px solid var(--azul-claro); border-radius: 14px;
  background: var(--azul-oscuro); font-weight: 500; font-size: 0.95rem; line-height: 1.2; color: var(--blanco);
}
.opcion span b { font-weight: 900; font-size: 1.3rem; }
.opcion input:checked + span { background: var(--blanco); border-color: var(--blanco); color: var(--azul-oscuro); }
.opcion input:hover + span { border-color: var(--blanco); }

input[type="text"], textarea {
  width: 100%; min-height: 52px; padding: 0.65rem 0.9rem; font-family: "Avenir", sans-serif; font-weight: 300; font-size: 1rem;
  color: var(--blanco); background: var(--azul-oscuro); border: 1.5px solid var(--azul-claro); border-radius: 14px;
}
input[type="text"]::placeholder, textarea::placeholder { color: var(--azul-claro); }
textarea { min-height: 7rem; resize: vertical; }
.contador { font-size: 0.85rem; margin: 0.25rem 0 0; text-align: right; }

.mensaje-error { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.6rem 0 0; font-weight: 900; font-size: 0.95rem; color: var(--blanco); }
.mensaje-error::before {
  content: "!"; flex: none; width: 1.4rem; height: 1.4rem; line-height: 1.2rem; text-align: center;
  font-weight: 900; border: 2px solid var(--blanco); border-radius: 50%;
}
#resumen-errores { border: 4px solid var(--blanco); border-radius: 14px; padding: 0.75rem; background: var(--azul-oscuro); margin-bottom: 1rem; }

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

.barra-pie {
  position: relative; z-index: 1;
  text-align: center; color: var(--blanco); padding: 0 1.25rem 1.25rem; font-size: 0.85rem; font-weight: 300;
}
.barra-pie p { margin: 0.1rem 0; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .opcion span { transition: background 0.15s, border-color 0.15s; }
  .progreso-barra { transition: width 0.35s ease; }
}

/* Celular: la tarjeta llena la pantalla y se ajusta al ancho. */
@media (max-width: 600px) {
  .barra-logo { padding: 0.9rem 1rem 0.25rem; }
  .logo { width: 200px; }
  main { width: auto; margin: 0.5rem 0.6rem 0.6rem; padding: 1.25rem 0.9rem 1.5rem; border-radius: 24px; }
  h1 { font-size: 1.45rem; }
  .pregunta { padding: 0.8rem 0.75rem; }
  .pregunta.hija { margin-left: 0.4rem; }
  .opcion { flex: 1 1 4.2rem; }
  .btn { width: 100%; }
  .barra-pie { padding: 0 1rem 1rem; }
}
/* Vertical: el imagotipo de fondo se agranda para llenar el ancho. */
@media (orientation: portrait) {
  body::before { width: 125vw; }
}
/* Tableta: tarjeta centrada, más ancha y con letra un poco mayor. */
@media (min-width: 601px) and (max-width: 1100px) {
  main { max-width: 42rem; padding: 2rem 2rem 2.5rem; margin-top: 1rem; margin-bottom: 1.5rem; }
  .opcion { flex: 1 1 6rem; }
}

/* El enunciado de cada pregunta va dentro del recuadro, sin que el borde lo cruce. */
.pregunta legend { float: left; width: 100%; padding: 0 0 0.75rem; }
.pregunta legend + * { clear: both; }

@media (max-width: 600px) {
  /* Escala de 5: una sola fila. De 4 opciones: dos por fila. */
  .opciones { gap: 0.35rem; }
  .opcion:first-child:nth-last-child(5), .opcion:first-child:nth-last-child(5) ~ .opcion { flex: 1 1 0; min-width: 0; }
  .opcion:first-child:nth-last-child(5) span, .opcion:first-child:nth-last-child(5) ~ .opcion span { padding: 0.4rem 0.1rem; font-size: 0.64rem; }
  .opcion:first-child:nth-last-child(4), .opcion:first-child:nth-last-child(4) ~ .opcion { flex: 1 1 45%; }
}

/* Escala de 5 opciones siempre en una fila, también en tableta. */
.opcion:first-child:nth-last-child(5), .opcion:first-child:nth-last-child(5) ~ .opcion { flex: 1 1 0; min-width: 0; }
@media (min-width: 601px) {
  .opcion:first-child:nth-last-child(5) span, .opcion:first-child:nth-last-child(5) ~ .opcion span { padding: 0.4rem 0.2rem; font-size: 0.85rem; }
}

/* ===== Estilo neumórfico: fondo crema, relieve con blanco y azul claro de la paleta ===== */
body { background: var(--crema); color: var(--azul-oscuro); }
body::before { opacity: 0.1; }
main { border: none; border-radius: 34px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 12px 12px 26px var(--azul-claro), -12px -12px 26px var(--blanco); }
main::before { display: none; }
h1, h2, .barra-pie, a { color: var(--azul-oscuro); }
h2 { color: var(--azul-medio); }
h2::after { background: var(--azul-claro); opacity: 1; }
.aviso { background: var(--crema); border: none; border-radius: 20px; box-shadow: inset 5px 5px 10px var(--azul-claro), inset -5px -5px 10px var(--blanco); }
.btn { color: var(--blanco); background: var(--azul-medio); border-color: var(--azul-medio); border-radius: 18px; box-shadow: 6px 6px 14px var(--azul-claro), -6px -6px 14px var(--blanco); }
.btn:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.btn-secundario { color: var(--azul-oscuro); background: var(--crema); border-color: var(--crema); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .opcion input:focus-visible + span { outline-color: var(--azul-oscuro); }
.progreso { background: var(--crema); border: none; border-radius: 20px; box-shadow: 6px 6px 14px var(--azul-claro), -6px -6px 14px var(--blanco); }
.progreso-texto { color: var(--azul-medio); }
.progreso-pista { background: var(--crema); box-shadow: inset 3px 3px 6px var(--azul-claro), inset -3px -3px 6px var(--blanco); }
.progreso-barra { background: var(--azul-medio); }
.pregunta { background: var(--crema); border: none; border-radius: 26px; box-shadow: 8px 8px 18px var(--azul-claro), -8px -8px 18px var(--blanco); }
.pregunta:focus-within { box-shadow: 8px 8px 18px var(--azul-claro), -8px -8px 18px var(--blanco), 0 0 0 2px var(--azul-medio); }
.pregunta.con-error { border: 3px solid var(--azul-oscuro); }
.pregunta.hija { border-left: 6px solid var(--azul-medio); }
.pregunta legend::before, .pregunta > label.titulo::before { background: var(--crema); color: var(--azul-medio); border: none; box-shadow: 3px 3px 7px var(--azul-claro), -3px -3px 7px var(--blanco); }
.pregunta.contestada legend::before, .pregunta.contestada > label.titulo::before { background: var(--azul-medio); color: var(--blanco); }
.opcion span { background: var(--crema); color: var(--azul-oscuro); border: none; border-radius: 18px; box-shadow: 5px 5px 11px var(--azul-claro), -5px -5px 11px var(--blanco); }
.opcion input:checked + span { background: var(--azul-medio); color: var(--blanco); box-shadow: inset 4px 4px 9px var(--azul-oscuro), inset -3px -3px 8px var(--azul-claro); }
.opcion input:hover + span { box-shadow: 3px 3px 8px var(--azul-claro), -3px -3px 8px var(--blanco); }
input[type="text"], textarea { color: var(--azul-oscuro); background: var(--crema); border: none; border-radius: 18px; box-shadow: inset 5px 5px 10px var(--azul-claro), inset -5px -5px 10px var(--blanco); }
input[type="text"]::placeholder, textarea::placeholder { color: var(--azul-medio); }
.mensaje-error { color: var(--azul-oscuro); }
.mensaje-error::before { border-color: var(--azul-oscuro); }
#resumen-errores { background: var(--crema); border-color: var(--azul-oscuro); }