/* LUNARE · negro, beige, dorado.
 *
 * Sin fuentes externas y sin CDN: la politica de contenido del servidor
 * (`default-src 'self'`) las bloquearia, y esa politica es lo que impide que
 * una inyeccion de HTML traiga un script de fuera. La tipografia sale de
 * pilas del sistema — el dorado es joya, no tapiz.
 */

:root {
  --negro:    #0b0a09;
  --carbon:   #16140f;
  --beige:    #e8dcc8;
  --beige-2:  #b8ab96;
  --dorado:   #c9a34e;
  --dorado-2: #8c6f2f;
  --alerta:   #c96a4e;
  --serif: Cormorant, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--negro);
  color: var(--beige);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

/* --- Marca --------------------------------------------------------------- */

.marca {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 0 2rem;
  text-align: center;
  position: relative;
}

.marca h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 9vw, 4rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  margin: 0;
  color: var(--beige);
}

.lema {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--dorado);
  margin: 0.5rem 0 0;
  opacity: 0.85;
}

#salir {
  position: absolute;
  top: 3rem;
  right: 0;
}

main { max-width: 46rem; margin: 0 auto; }

.pantalla { animation: entrar 0.4s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--beige);
  margin: 2rem 0 0.5rem;
}

.nota { color: var(--beige-2); font-size: 0.9rem; margin: 0 0 1.5rem; }

/* --- Formularios --------------------------------------------------------- */

form { display: flex; flex-direction: column; gap: 1rem; }

label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--beige-2);
}

label small {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  opacity: 0.7;
}

label.casilla {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
}

input, textarea {
  background: var(--carbon);
  border: 1px solid #2c2822;
  border-radius: 2px;
  color: var(--beige);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  width: 100%;
}

input[type="checkbox"] { width: auto; accent-color: var(--dorado); }

input:focus, textarea:focus {
  outline: none;
  border-color: var(--dorado-2);
}

textarea { resize: vertical; font-family: var(--serif); font-size: 1.1rem; }

.fila { display: flex; gap: 0.75rem; }
.fila label { flex: 1; }

/* --- Bienvenida ---------------------------------------------------------- */

.promesa {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.5;
  color: var(--beige);
  margin: 1rem 0 1.1rem;
  text-wrap: balance;
}

.promesa-apoyo {
  color: var(--beige-2);
  font-size: 1rem;
  margin: 0 0 3rem;
  max-width: 44ch;
}

.tres {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: 3rem;
}

.bloque h3 {
  color: var(--dorado);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.bloque p {
  color: var(--beige-2);
  font-size: 0.95rem;
  margin: 0;
}

.bloque em { color: var(--beige); font-style: italic; }

#pantalla-bienvenida .principal { align-self: flex-start; }
#pantalla-bienvenida #ya-tengo-cuenta { display: block; margin-top: 1.25rem; }

/* --- Puertas de entrada -------------------------------------------------- */

.puertas h2 { margin-top: 1rem; }

.lista-puertas {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.puerta {
  background: var(--carbon);
  border: 1px solid #2c2822;
  border-radius: 2px;
  cursor: pointer;
  display: block;
  padding: 1rem 1.1rem;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}

.puerta:hover,
.puerta:focus-visible {
  background: #1a1509;
  border-color: var(--dorado-2);
  outline: none;
}

.puerta .area {
  color: var(--dorado);
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.puerta .frase {
  color: var(--beige);
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.4;
}

/* --- La carta ------------------------------------------------------------ */

.carta { margin-top: 1.5rem; }
.carta h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0 0 0.35rem;
}

.tabla-carta {
  border-collapse: collapse;
  font-size: 0.92rem;
  width: 100%;
}

.tabla-carta th {
  border-bottom: 1px solid #2c2822;
  color: var(--beige-2);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  padding: 0 0.6rem 0.5rem 0;
  text-align: left;
  text-transform: uppercase;
}

.tabla-carta td {
  border-bottom: 1px solid #1c1a16;
  padding: 0.5rem 0.6rem 0.5rem 0;
}

.tabla-carta .cuerpo { color: var(--beige); font-family: var(--serif); font-size: 1.05rem; }
.tabla-carta .casa,
.tabla-carta .retro { color: var(--beige-2); font-size: 0.85rem; }
.tabla-carta .retro { color: var(--dorado-2); }

.angulos {
  color: var(--dorado-2);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin: 1rem 0 0;
}

/* --- Rechazo ------------------------------------------------------------- */

.rechazado-texto {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0;
}

.detalle-tecnico { margin-top: 0.75rem; }

.detalle-tecnico summary {
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  opacity: 0.7;
  text-transform: uppercase;
}

.detalle-tecnico ul {
  font-size: 0.78rem;
  margin: 0.5rem 0 0;
  opacity: 0.8;
  padding-left: 1.2rem;
}

/* --- Mi memoria ---------------------------------------------------------- */

.recuerdo { margin: 1.5rem 0; }

select {
  background: var(--carbon);
  border: 1px solid #2c2822;
  border-radius: 2px;
  color: var(--beige);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  width: 100%;
}

select:focus { border-color: var(--dorado-2); outline: none; }

.rasgos {
  border: 1px solid #221f1a;
  border-radius: 2px;
  margin: 0;
  padding: 0.9rem 1rem;
}

.rasgos legend {
  color: var(--beige-2);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 0 0.4rem;
  text-transform: uppercase;
}

.rasgos legend small { letter-spacing: 0; opacity: 0.7; text-transform: none; }

#rec-rasgos {
  display: grid;
  gap: 0.4rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.coincidencia {
  border: 1px solid var(--dorado-2);
  border-radius: 2px;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.2rem;
}

.coincidencia-titulo {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.8rem;
}

.coincidencia-fila {
  align-items: baseline;
  border-bottom: 1px solid #221f1a;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.coincidencia .principal { margin-top: 1rem; }

.lista-memoria { margin: 1.5rem 0; }

.recuerdo-fila {
  border-bottom: 1px solid #1c1a16;
  padding: 0.9rem 0;
}

.recuerdo-que {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0 0 0.2rem;
}

.recuerdo-meta {
  color: var(--beige-2);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.3rem;
}

.lista-patrones { margin: 2rem 0 1.5rem; }

.lista-patrones h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 0.3rem;
  text-transform: none;
}

.patron {
  border-left: 1px solid var(--dorado-2);
  margin-bottom: 1.25rem;
  padding-left: 1rem;
}

.patron-texto {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}

.patron-base { color: var(--beige-2); font-size: 0.8rem; margin: 0; }

.acciones-patron { display: flex; gap: 1.25rem; margin-top: 0.5rem; }

/* --- Buscador de ciudad -------------------------------------------------- */

.buscador { position: relative; }

.resultados {
  background: var(--carbon);
  border: 1px solid var(--linea, #2c2822);
  border-radius: 2px;
  list-style: none;
  margin: 0.35rem 0 0;
  max-height: 17rem;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 5;
}

.resultados li {
  border-bottom: 1px solid #221f1a;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.65rem 0.8rem;
}

.resultados li:last-child { border-bottom: none; }
.resultados li:hover,
.resultados li:focus { background: #221c10; color: var(--dorado); outline: none; }
.resultados li.vacio { color: var(--beige-2); cursor: default; font-style: italic; }
.resultados li.vacio:hover { background: none; color: var(--beige-2); }

.elegida {
  color: var(--dorado);
  font-size: 0.95rem;
  margin: 0.5rem 0 0;
}

.manual {
  border-left: 1px solid var(--dorado-2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
}

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

.principal {
  background: transparent;
  border: 1px solid var(--dorado-2);
  border-radius: 2px;
  color: var(--dorado);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  transition: background 0.25s, color 0.25s;
}

.principal:hover:not(:disabled) { background: var(--dorado); color: var(--negro); }
.principal:disabled { opacity: 0.4; cursor: progress; }

.enlace {
  background: none;
  border: none;
  color: var(--beige-2);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 0.35rem 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enlace:hover { color: var(--dorado); }
.enlace.peligro { color: var(--alerta); }

.pestanas { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; }

.pestana {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--beige-2);
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  padding: 0.4rem 0;
  text-transform: uppercase;
}

.pestana.activa { color: var(--dorado); border-bottom-color: var(--dorado); }

/* --- Conversacion -------------------------------------------------------- */

.conversacion { margin: 1rem 0 2rem; }

.turno { margin-bottom: 2.5rem; }

.pregunta {
  border-left: 1px solid var(--dorado-2);
  color: var(--beige-2);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  padding-left: 1rem;
}

.acto {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.65;
  margin: 0 0 1rem;
}

/* La palabra que suena. Sin animacion: un subrayado que se mueve solo ya
 * es suficiente movimiento, y el parpadeo distrae de lo que se dice. */
.palabra.sonando { color: var(--dorado); }

.rechazado {
  border: 1px solid var(--alerta);
  border-radius: 2px;
  color: var(--alerta);
  font-size: 0.9rem;
  padding: 1rem;
}

.rechazado ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }

.pie-turno {
  align-items: center;
  border-top: 1px solid #221f1a;
  color: var(--beige-2);
  display: flex;
  font-size: 0.75rem;
  gap: 1rem;
  letter-spacing: 0.08em;
  margin-top: 1rem;
  padding-top: 0.75rem;
}

.pie-turno .voz { color: var(--dorado-2); }

audio { height: 32px; max-width: 16rem; }

/* --- Estados ------------------------------------------------------------- */

.oculto { display: none !important; }

.pensando {
  color: var(--beige-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  padding: 1rem 0;
}

.pensando::after {
  animation: puntos 1.4s steps(4, end) infinite;
  content: "";
}

@keyframes puntos {
  0% { content: ""; } 25% { content: "·"; }
  50% { content: "· ·"; } 75% { content: "· · ·"; }
}

.aviso {
  background: var(--carbon);
  border: 1px solid var(--dorado-2);
  border-radius: 2px;
  bottom: 1.5rem;
  color: var(--beige);
  font-size: 0.9rem;
  left: 50%;
  max-width: 30rem;
  padding: 0.9rem 1.2rem;
  position: fixed;
  transform: translateX(-50%);
  z-index: 10;
}

.aviso.error { border-color: var(--alerta); color: var(--alerta); }

.estado {
  color: #4b453c;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  margin: 3rem auto 0;
  max-width: 46rem;
  text-align: center;
}

.ajustes { margin-top: 3rem; }

.ajustes summary {
  color: var(--beige-2);
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.acciones { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 1rem; }

.volcado {
  background: var(--carbon);
  border: 1px solid #2c2822;
  color: var(--beige-2);
  font-size: 0.72rem;
  margin-top: 1rem;
  max-height: 22rem;
  overflow: auto;
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 34rem) {
  .fila { flex-direction: column; gap: 1rem; }
  #salir { position: static; display: block; margin: 1rem auto 0; }
}