/* Componente CONTENIDO — sección informativa después del hero, estilo Photopea:
   mucho contexto y valor, sin invadir la experiencia del lector/reproductor. */
.contenido{
  background:transparent; /* video de fondo fijo se ve a través */
  color:#FFFFFF;
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  padding:3rem 1.5rem 2rem;
}

.contenido__interior{
  max-width:38rem;
  margin:0 auto;
}

.contenido__eyebrow{
  font-family:"Orbitron", system-ui, sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#BEE3F5;
  margin-bottom:.5rem;
}

.contenido__titulo{
  font-size:1.5rem;
  font-weight:700;
  line-height:1.3;
  margin-bottom:.9rem;
}

.contenido__parrafo{
  font-size:.95rem;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  margin-bottom:1.1rem;
}

.contenido__subtitulo{
  font-size:1.15rem;
  font-weight:700;
  margin:2.2rem 0 1rem;
}

/* Pasos numerados de "¿Cómo funciona?" */
.contenido__pasos{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.contenido__paso{
  display:flex;
  gap:.9rem;
  padding:1rem;
  background:rgba(190,227,245,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:14px;
}
.contenido__pasoNumero{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(190,227,245,0.18);
  border:1px solid rgba(255,255,255,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Orbitron", system-ui, sans-serif;
  font-size:.85rem;
  font-weight:700;
  color:#BEE3F5;
}
.contenido__pasoTexto h3{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:.3rem;
}
.contenido__pasoTexto p{
  font-size:.85rem;
  line-height:1.5;
  color:rgba(255,255,255,.75);
}

/* Grid de casos de uso (profesional / académico / accesibilidad) */
.contenido__usos{
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem;
}
.contenido__uso{
  padding:1rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
}
.contenido__uso h3{
  font-size:.92rem;
  font-weight:700;
  margin-bottom:.35rem;
  color:#BEE3F5;
}
.contenido__uso p{
  font-size:.85rem;
  line-height:1.5;
  color:rgba(255,255,255,.75);
}

/* PREGUNTAS FRECUENTES — usa <details>/<summary> nativo, sin JS aparte */
.faq{
  background:transparent; /* video de fondo fijo se ve a través */
  color:#FFFFFF;
  font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
  padding:1rem 1.5rem 3rem;
}
.faq__interior{
  max-width:38rem;
  margin:0 auto;
}
.faq__titulo{
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:1rem;
}
.faq__lista{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.faq__item{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  overflow:hidden;
}
.faq__pregunta{
  padding:.9rem 1rem;
  font-size:.92rem;
  font-weight:700;
  color:#BEE3F5;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  -webkit-tap-highlight-color:transparent;
}
.faq__pregunta::-webkit-details-marker{ display:none; }
.faq__pregunta::after{
  content:"+";
  font-size:1.1rem;
  flex-shrink:0;
  transition:transform .2s ease;
}
.faq__item[open] .faq__pregunta::after{ transform:rotate(45deg); }
.faq__pregunta:focus-visible{
  outline:2px solid #BEE3F5;
  outline-offset:-2px;
}
.faq__respuesta{
  padding:0 1rem 1rem;
  font-size:.85rem;
  line-height:1.55;
  color:rgba(255,255,255,.78);
}