:root {
  --color-rojo: #e8332f;
  --color-celeste: #44c2dd;
  --color-amarillo: #d9c93b;
  --color-verde-agua: #1d8e7a;
  --color-verde: #7ab24e;
  --color-azul-suave: #56a4af;
  --color-azul-oscuro: #403786;
  --color-gris-claro: #dadada;
  --color-verde-oscuro: #4c5f41;
  --color-negro: #111110;
  --color--verde-claro: #9fdc7a;
  --color--verde-medio: #6fae5c;
  --color--verde-bosque: #2f5d34;
  --color--verde-musgo: #597a4a;
  --color--verde-menta: #90d8c2;
  --color--verde-lima: #c7e86a;
  --color--azul-cielo: #7dd5ef;
  --color--azul-profundo: #2b2f5b;
  --color--azul-turquesa: #2fb8b0;
  --color--azul-gris: #8aa9b1;
  --color--amarillo-suave: #f3e57c;
  --color--amarillo-ocre: #d3a724;
  --color--naranja-suave: #e8a16a;
  --color--cafe-madera: #6a4a2b;
  --color--cafe-claro: #d7b89c;
  --color--cafe-arena: #c9a27d;
  --color--cafe-tierra: #8b5e34;
  --color--gris-medio: #a0a0a0;
  --color--gris-oscuro: #5a5a5a;
  --color--blanco-hueso: #f4f4f1;
  --color--verde-hoover: #4fe721;
  --color--cafe-hoover: #4e342e;
  --color--gris-borde: #c5c5c5;
}

body {
  background-image: url("https://images.unsplash.com/photo-1683874314997-deef6c2ef698?q=80&w=1887&auto=format&fit=crop");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--color--verde-bosque);
  color: var(--color--cafe-madera);
  min-height: 100vh;
  margin: 0;
}

main {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 20px;
}

.container-pregunta {
  background: var(--color--blanco-hueso);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 20px;
  border-radius: 12px;
  border-left: 6px solid var(--color--verde-medio);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out,
    box-shadow 0.3s ease, border-left-color 0.3s ease;
}

.container-pregunta:hover {
  transform: translateY(-5px);
  background: var(--color--blanco-hueso);
  border-left-color: var(--color--verde-hoover);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.btn-pregunta {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 25px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.titulo-pregunta {
  font-family: "Merriweather", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color--verde-bosque);
  margin: 0;
  transition: color 0.3s ease;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.container-pregunta.active .titulo-pregunta {
  color: var(--color--naranja-suave);
}

.btn-pregunta::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color--naranja-suave);
  transition: transform 0.3s ease;
}

.container-pregunta.active {
  background: var(--color--blanco-hueso);
}

.container-pregunta.active .titulo-pregunta {
  color: var(--color--verde-bosque);
}

.container-pregunta.active .btn-pregunta::after {
  content: "-";
  transform: rotate(180deg);
  color: var(--color--verde-bosque);
}

.respuesta-pregunta {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 25px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color--gris-oscuro);
  margin-left: 6px;
  transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
}

.respuesta-activa {
  max-height: 400px;
  opacity: 1;
  padding-bottom: 25px;
}

.container-pregunta.visible {
  opacity: 1;
  transform: translateY(0);
}

.container-pregunta:nth-child(even) {
  transition-delay: 0.1s;
}