/* ============================================================
   IMPERIO ALGORÍTMICO — Página pública de preguntas
   ============================================================
   Se apoya en portal.css (tokens, botones, avisos, cabecera,
   hero, bloques y pie). Aquí solo va lo que esta página añade:
   el formulario sobre fondo claro y la lista de preguntas.
   ============================================================ */

.hero-sub {
  color: var(--texto-suave);
  font-size: 15.5px;
  max-width: 560px;
  margin: 0 auto;
}

/* ======================== FORMULARIO ======================== */

/* Nombre y correo caben en una fila en escritorio y se apilan en el móvil. */
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.campo--claro .campo-label { color: var(--tinta); }

.campo--claro input,
.campo--claro textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--borde-claro);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo--claro textarea { resize: vertical; min-height: 118px; line-height: 1.6; }
.campo--claro input::placeholder,
.campo--claro textarea::placeholder { color: #a89698; }
.campo--claro input:focus,
.campo--claro textarea:focus {
  outline: none;
  border-color: var(--rojo-tinta);
  box-shadow: 0 0 0 3px rgba(201, 51, 58, 0.14);
}

.campo-ayuda { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 6px; }

/* El campo trampa. `display:none` no vale: hay robots que lo detectan y lo
   saltan. Así queda fuera de la pantalla pero sigue siendo un campo normal. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#form-pregunta .boton--principal { margin-top: 4px; }

.nota-privacidad {
  font-size: 13px;
  color: var(--tinta-suave);
  margin-top: 14px;
  text-align: center;
}
.nota-privacidad strong { color: var(--tinta); }

/* ====================== LISTA DE PREGUNTAS ====================== */

.bloque-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.bloque-cabecera .bloque-titulo { margin-bottom: 0; }

/* Ojo con el nombre: portal.css ya usa `.cuenta` para las tarjetas de cuenta
   Master/Normal/Inverso, y esa regla la ponia en `display:flex`, asi que la
   pastilla se estiraba a lo ancho del titulo y caia a la linea de abajo. */
.cuenta-respondidas {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 999px;
  padding: 3px 11px;
  margin-left: 6px;
  vertical-align: middle;
}

.buscador {
  font-family: inherit;
  font-size: 14px;
  color: var(--tinta);
  background: var(--fondo-claro-2);
  border: 1px solid var(--borde-claro);
  border-radius: 999px;
  padding: 9px 16px;
  min-width: 200px;
}
.buscador:focus {
  outline: none;
  border-color: var(--rojo-tinta);
  background: var(--blanco);
}

/* Cada pregunta es un <details>: cerrada se ve la pregunta, y al abrirla
   aparece la respuesta. Todas nacen cerradas y apretadas a propósito: esta
   lista va PRIMERA en la página y, si ocupa mucho, el formulario de abajo se
   va fuera de pantalla y nadie se entera de que se puede preguntar. */
.qa {
  border: 1px solid var(--borde-claro);
  border-radius: 10px;
  background: var(--blanco);
  margin-bottom: 7px;
  overflow: hidden;
}
.qa[open] { background: var(--fondo-claro-2); }

.qa-pregunta {
  list-style: none;
  cursor: pointer;
  padding: 11px 42px 11px 15px;
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.45;
}
.qa-pregunta::-webkit-details-marker { display: none; }
.qa-pregunta:hover { color: var(--rojo-tinta); }

.qa-pregunta::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--rojo-tinta);
  border-bottom: 2px solid var(--rojo-tinta);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.qa[open] .qa-pregunta::after { transform: rotate(-135deg); top: 22px; }

.qa-firma {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--tinta-suave);
  margin-top: 3px;
}

.qa-respuesta {
  padding: 0 15px 16px;
  border-top: 1px solid var(--borde-claro);
  margin-top: 0;
}

.qa-etiqueta {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rojo-tinta);
  margin: 13px 0 7px;
}

.qa-texto { font-size: 14.5px; color: var(--tinta-suave); line-height: 1.65; white-space: pre-wrap; }

.vacio { padding: 26px 0; text-align: center; color: var(--tinta-suave); font-size: 15px; }

/* =========================== RESPONSIVE =========================== */

@media (max-width: 620px) {
  .campo-fila { grid-template-columns: 1fr; }
  .bloque-cabecera { flex-direction: column; align-items: stretch; }
  .buscador { width: 100%; }
  .qa-pregunta { font-size: 14px; padding-right: 38px; }
}

/* ============ BARRA, CTA DEL HERO Y PISTA DE LA LISTA ============ */

/* El botón a las empresas de fondeo, en la barra de arriba. Va con el estilo
   principal (no fantasma) porque tiene que verse desde el primer vistazo. */
.boton--barra {
  width: auto;
  padding: 9px 20px;
  font-size: 14px;
  white-space: nowrap;
}

.hero-cta { margin-top: 22px; }

/* Debajo del título de la lista: dice a la vez cómo se abre una respuesta y
   que hay un sitio donde preguntar, que es lo que se perdía al poner la lista
   arriba del todo. */
.lista-pista {
  font-size: 13.5px;
  color: var(--tinta-suave);
  margin: -4px 0 14px;
}
.lista-pista a { color: var(--rojo-tinta); font-weight: 600; text-decoration: none; }
.lista-pista a:hover { text-decoration: underline; }

.ver-todas {
  width: 100%;
  margin-top: 4px;
  background: var(--fondo-claro-2);
  color: var(--tinta-suave);
  border: 1px solid var(--borde-claro);
  font-size: 14px;
  padding: 11px 20px;
}
.ver-todas:hover { background: var(--blanco); color: var(--rojo-tinta); }

@media (max-width: 720px) {
  /* En la barra solo caben las dos cosas si el botón de fondeo se acorta:
     el <span> se va y queda "Empresas de fondeo". */
  .solo-ancho { display: none; }
  .boton--barra { padding: 8px 15px; font-size: 13px; }
  .cabecera-derecha { gap: 8px; }
  .cabecera-derecha .boton--fantasma { padding: 8px 13px; font-size: 13px; }
  .cabecera-logo { width: 108px; }
}

@media (max-width: 430px) {
  /* A esta anchura ya no caben las dos. Se queda la de fondeo, que es la que
     Nicolás quiere destacada; a la zona de alumnos se llega por el pie. */
  .cabecera-derecha .boton--fantasma { display: none; }
}