/* El idioma de los gestos — hoja de estilos.

   La paleta, la tipografía y el ritmo vienen de universougo.com
   (universougo-web/input/assets/css/site.css): blanco roto, negro carbón, un
   acento cálido, EB Garamond con Georgia de reserva y mucho espacio en blanco.
   No se ha inventado ninguna paleta nueva. */

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

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-italic.woff2') format('woff2');
}

:root {
  --color-fondo:     #faf9f7;
  --color-texto:     #1a1a1a;
  --color-suave:     #6b6b6b;
  --color-enlace:    #2c2c2c;
  --color-borde:     #e0ddd8;
  --color-acento:    #8a6845;  /* cobre apagado */
  --color-acento-op: #5a3a18;  /* cobre oscuro, para contraste sobre fondo */
  --color-tenue:     #f3f1ed;  /* gris cálido muy claro: fondos secundarios */

  --fuente-cuerpo: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --fuente-ui:     system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho-max:  42rem;
  --espaciado:  1.6rem;
  --tacto:      3.2rem;  /* objetivo táctil amplio: ≈ 56 px con la raíz a 18 px */
  --transicion: 300ms;   /* fundidos de 250–400 ms (§15.4) */
}

/* ── Tamaño de texto (ajuste de accesibilidad, aplicado en vivo) ── */

html { font-size: 18px; }
html[data-texto="grande"]     { font-size: 21px; }
html[data-texto="muy-grande"] { font-size: 25px; }

/* ── Alto contraste: blanco y negro puros, contornos reforzados (§15.2) ── */

html[data-contraste="alto"] {
  --color-fondo:     #ffffff;
  --color-texto:     #000000;
  --color-suave:     #303030;
  --color-enlace:    #000000;
  --color-borde:     #000000;
  --color-acento:    #5a3a18;
  --color-acento-op: #3d2610;
  --color-tenue:     #ffffff;
}

/* ── Reducción de movimiento ── */

html[data-movimiento="reducido"] *,
html[data-movimiento="reducido"] *::before,
html[data-movimiento="reducido"] *::after {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Base ── */

html {
  background: var(--color-fondo);
  color: var(--color-texto);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-cuerpo);
  line-height: 1.75;
  min-height: 100vh;
  padding: 0 1rem;
}

/* Lectura fácil: más aire entre líneas y entre bloques. Los textos secundarios
   se omiten en el marcado, no se recortan aquí. */
html[data-lectura="facil"] body { line-height: 1.95; }
html[data-lectura="facil"] p    { max-width: 34rem; }

h1, h2, h3 { font-weight: 400; }

h1 {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: var(--espaciado);
}

h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: calc(var(--espaciado) * 1.6) 0 0.6rem;
}

p { margin-bottom: var(--espaciado); }

a {
  color: var(--color-enlace);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover { color: var(--color-suave); }

/* Foco siempre visible y del color de acento: nunca se elimina el contorno. */
:focus-visible {
  outline: 2px solid var(--color-acento-op);
  outline-offset: 3px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Arranque (mientras se descarga la experiencia) ── */

.arranque {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 80vh;
  font-family: var(--fuente-cuerpo);
  color: var(--color-suave);
}

.arranque-marca { height: 5.5rem; width: auto; opacity: 0.75; }

.cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--color-suave);
}

/* ── Cabecera ── */

.cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--espaciado) 0 0.9rem;
  border-bottom: 1px solid var(--color-borde);
  font-family: var(--fuente-ui);
}

.marca {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-texto);
}

.acceso-accesibilidad {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--color-suave);
}

.acceso-accesibilidad:hover { color: var(--color-texto); }
.acceso-accesibilidad .icono { width: 1.15rem; height: 1.15rem; flex: none; }

.volver {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-top: 0.9rem;
  font-family: var(--fuente-ui);
  font-size: 0.82rem;
}

.volver a {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  color: var(--color-suave);
}

.volver a::before { content: "← "; margin-right: 0.3rem; }

/* ── Contenido ── */

.contenido {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: calc(var(--espaciado) * 1.4) 0 calc(var(--espaciado) * 3);
}

.contenido:focus { outline: none; }

.entradilla {
  color: var(--color-suave);
  font-size: 1.05rem;
}

.etiqueta {
  display: inline-block;
  font-family: var(--fuente-ui);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-suave);
  margin-bottom: 0.35rem;
}

.nota, .explicacion {
  font-size: 0.92rem;
  color: var(--color-suave);
  line-height: 1.6;
}

.aviso {
  border-left: 3px solid var(--color-acento);
  background: var(--color-tenue);
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
}

/* ── Botones (§7.3, §7.5: contorno, objetivo amplio, contracción leve) ── */

.acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  margin-top: calc(var(--espaciado) * 1.2);
}

.boton-principal,
.boton-secundario,
.boton-texto {
  font-family: var(--fuente-ui);
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: var(--color-texto);
  transition: background-color var(--transicion) ease, border-color var(--transicion) ease;
}

.boton-principal {
  min-height: var(--tacto);
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--color-texto);
  letter-spacing: 0.01em;
}

.boton-principal:hover { background: var(--color-tenue); }
.boton-principal:active { transform: scale(0.99); }

.boton-secundario {
  min-height: var(--tacto);
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--color-borde);
  color: var(--color-suave);
}

.boton-secundario:hover {
  border-color: var(--color-texto);
  color: var(--color-texto);
}

.boton-texto {
  min-height: 2.9rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  color: var(--color-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.boton-texto:hover { color: var(--color-texto); }

/* Los enlaces que hacen de botón dentro de .acciones se alinean igual. */
.acciones a.boton-texto {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Pantalla principal ── */

.inicio { text-align: center; }
.inicio h1 { margin-bottom: 0.5rem; }
.inicio .entradilla { font-style: italic; margin-bottom: calc(var(--espaciado) * 1.5); }

.ilustracion {
  display: block;
  width: min(15rem, 70%);
  height: auto;
  margin: 0 auto calc(var(--espaciado) * 1.5);
  color: var(--color-texto);
}

.huella-figura { fill: var(--color-acento); }

.inicio .estado {
  font-size: 1.05rem;
  margin-bottom: calc(var(--espaciado) * 1.2);
}

.inicio .boton-principal {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}

.acciones-secundarias,
.pie-funcional {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  font-family: var(--fuente-ui);
}

.acciones-secundarias {
  margin-top: calc(var(--espaciado) * 1.3);
  font-size: 0.95rem;
}

.pie-funcional {
  margin-top: calc(var(--espaciado) * 2.5);
  font-size: 0.82rem;
}

.acciones-secundarias a,
.pie-funcional a {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  color: var(--color-suave);
  text-decoration-color: var(--color-borde);
}

.acciones-secundarias a:hover,
.pie-funcional a:hover { color: var(--color-texto); }

/* ── Bienvenida ── */

.bienvenida { text-align: center; }

.bienvenida .posicion {
  font-family: var(--fuente-ui);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-suave);
  margin-bottom: calc(var(--espaciado) * 1.5);
}

.bienvenida .idea {
  font-size: 1.3rem;
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 auto calc(var(--espaciado) * 1.5);
}

.bienvenida .acciones { max-width: 24rem; margin-inline: auto; }

/* ── Mapa ── */

.bloque { margin-bottom: calc(var(--espaciado) * 1.5); }

.lista-momentos { list-style: none; display: grid; gap: 0.6rem; }

.momento {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-borde);
  text-decoration: none;
  color: var(--color-texto);
  transition: border-color var(--transicion) ease;
}

a.momento:hover { border-color: var(--color-texto); }

.momento-numero {
  font-family: var(--fuente-cuerpo);
  font-size: 1.3rem;
  color: var(--color-suave);
  min-width: 1.6rem;
  text-align: right;
}

.momento-cuerpo { display: flex; flex-direction: column; gap: 0.15rem; }
.momento-titulo { font-size: 1.1rem; }

.momento-aprendizaje {
  font-size: 0.95rem;
  color: var(--color-suave);
  line-height: 1.55;
}

/* El estado se dice con palabras. El color y la opacidad solo acompañan. */
.momento-estado {
  font-family: var(--fuente-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-suave);
  margin-top: 0.3rem;
}

.disponible .momento { border-left: 3px solid var(--color-acento); }
.completado .momento-estado { color: var(--color-acento-op); }
.mas-adelante .momento,
.en-preparacion .momento { opacity: 0.6; }

/* ── Escena (la página de un momento) ──
   Ojo: la clase .momento es la tarjeta del mapa. La escena usa .escena para
   que las dos no se pisen. */

.escena-encabezado { margin-bottom: 0.2rem; }
.escena h1 { margin-bottom: calc(var(--espaciado) * 1.2); }

.fase { animation: aparecer var(--transicion) ease both; }

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.intro { font-size: 1.15rem; line-height: 1.7; }

.entorno {
  background: var(--color-tenue);
  padding: 1rem 1.1rem;
  font-size: 0.98rem;
}

.indicacion {
  font-family: var(--fuente-ui);
  font-size: 0.95rem;
  color: var(--color-suave);
  margin-bottom: var(--espaciado);
}

.senales { list-style: none; display: grid; gap: 1.1rem; }

.senal {
  border-left: 2px solid var(--color-borde);
  padding-left: 1.1rem;
}

.senal p { margin-bottom: 0.4rem; }
.senal-visual { font-size: 1.08rem; }
.senal-texto  { color: var(--color-suave); font-size: 0.98rem; }

.senal-sonido {
  font-size: 0.95rem;
  color: var(--color-acento-op);
}

.senal-sonido .etiqueta { color: inherit; margin-right: 0.2rem; margin-bottom: 0; }

/* Tarjetas de opción: grandes, una pulsación, texto completo visible. */
.tarjetas { list-style: none; display: grid; gap: 0.7rem; }

.tarjeta {
  width: 100%;
  min-height: var(--tacto);
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-borde);
  background: transparent;
  font-family: var(--fuente-cuerpo);
  font-size: 1.08rem;
  line-height: 1.5;
  text-align: left;
  color: var(--color-texto);
  cursor: pointer;
  transition: border-color var(--transicion) ease, background-color var(--transicion) ease;
}

.tarjeta:hover { border-color: var(--color-texto); }

.tarjeta.seleccionada {
  border-color: var(--color-acento-op);
  border-left-width: 3px;
  background: var(--color-tenue);
}

.reaccion-descripcion { font-size: 1.15rem; line-height: 1.7; }

.narrador {
  font-style: italic;
  color: var(--color-suave);
  border-left: 2px solid var(--color-acento);
  padding-left: 1.1rem;
}

.rectificar {
  background: var(--color-tenue);
  padding: 1rem 1.1rem;
  font-size: 1rem;
}

.pausa { background: var(--color-tenue); padding: 1.3rem 1.2rem; }
.pausa h2 { margin-top: 0; }

.resolucion { font-size: 1.15rem; line-height: 1.7; }

.reflexion, .conversar { margin-bottom: var(--espaciado); }
.reflexion p, .conversar p { margin-bottom: 0; }
.conversar p { font-style: italic; color: var(--color-suave); }

/* ── Huellas ── */

.huella {
  border-top: 1px solid var(--color-borde);
  padding-top: 1.1rem;
  margin-bottom: var(--espaciado);
}

.cierre .huella {
  border: 0;
  border-left: 3px solid var(--color-acento);
  padding: 0.2rem 0 0.2rem 1.1rem;
}

.huella-frase { font-size: 1.15rem; line-height: 1.65; margin-bottom: 0.5rem; }
.huella-ampliado { color: var(--color-suave); font-size: 0.98rem; margin-bottom: 0; }

.lista-huellas { list-style: none; display: grid; gap: 1.4rem; }
.lista-huellas .pendiente { opacity: 0.6; }
.lista-huellas .pendiente .huella-frase { font-style: italic; font-size: 1rem; }
.lista-huellas .descubierta .etiqueta { color: var(--color-acento-op); }

/* ── Ajustes ── */

.ajustes-grupo {
  border-top: 1px solid var(--color-borde);
  padding: 1.2rem 0;
  display: grid;
  gap: 0.85rem;
}

.ajustes-grupo fieldset { border: 0; }

.ajustes-grupo legend {
  font-family: var(--fuente-ui);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--color-suave);
  margin-bottom: 0.5rem;
}

/* Cada control es su propia etiqueta: el área pulsable incluye el texto. */
.conmutador, .opcion {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.9rem;
  font-family: var(--fuente-ui);
  font-size: 0.98rem;
  cursor: pointer;
}

.conmutador input, .opcion input {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  accent-color: var(--color-acento-op);
  cursor: pointer;
}

.ajustes-grupo .nota { margin-bottom: 0; }

.enlaces-externos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: calc(var(--espaciado) * 1.5);
  font-family: var(--fuente-ui);
  font-size: 0.9rem;
}

/* ── Error de la plataforma ── */

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem;
  background: var(--color-tenue);
  border-top: 1px solid var(--color-borde);
  font-family: var(--fuente-ui);
  font-size: 0.9rem;
  text-align: center;
}

/* ── Pantallas anchas: el contenido no se estira, respira ── */

@media (min-width: 48rem) {
  body { padding: 0 2rem; }
  h1 { font-size: 2.1rem; }

  .acciones {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .acciones .boton-principal,
  .acciones .boton-secundario { flex: 0 1 auto; }

  .inicio .acciones,
  .bienvenida .acciones { flex-direction: column; }

  .tarjetas { grid-template-columns: 1fr 1fr; }
}