/* =====================================================================
   FAQ — dudas frecuentes
   ---------------------------------------------------------------------
   Rediseño: antes era una lista de hairlines a dos columnas con la
   cabecera pegada al costado. Se leía como un índice, no como
   respuestas. Ahora son tarjetas con ícono, en dos columnas, y cada
   respuesta lleva su frase clave resaltada — que es lo que hace que un
   FAQ se pueda barrer con la vista en vez de tener que leerlo entero.

   Cabecera CENTRADA. Es la única sección centrada de la página, y se
   justifica: acá no hay una columna de contenido que acompañar, hay una
   grilla simétrica debajo. Alinearla a la izquierda dejaría la mitad
   derecha del encabezado vacía sobre dos columnas llenas.

   Mismo motor de despliegue que el mapa ([data-disclosure]): resorte
   crítico, interrumpible. No hay dos acordeones distintos en la página.
   ===================================================================== */

/* La cabecera es .sec__head (css/v2.css). Esta sección fue la que salió
   bien primero; ahora la pieza está compartida y la usan todas. */

/* =====================================================================
   LA LISTA — UNA columna, centrada
   Se probó a dos columnas y se descartó: al abrir una tarjeta crece su
   fila y la vecina se queda corta, dejando un hueco muerto del alto de
   la respuesta. Las alternativas eran peores — estirar la vecina cambia
   el alto de algo que nadie tocó, y column-count rebalancea saltando
   tarjetas de columna en el momento del clic.

   Una columna angosta además es lo correcto para leer: un FAQ es una
   tarea de lectura, no una grilla para barrer.
   ===================================================================== */
.faq__lista{
  list-style:none;margin:0 auto;padding:0;
  max-width:860px;
  display:grid;gap:clamp(12px, 1.4vw, 16px);
}

.faq__item{
  border-radius:var(--radius-lg);
  background:#08193B;
  border:1px solid rgba(255,255,255,.09);
  overflow:hidden;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.faq__item:hover{
  background:#0A1E44;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 16px 40px rgba(0,6,20,.45);
}
/* La abierta se queda levantada: mientras se lee, sigue siendo la
   tarjeta activa aunque el puntero se haya ido a otro lado. */
.faq__item:has([aria-expanded="true"]){
  background:#0A1E44;
  border-color:rgba(12,192,223,.34);
}

.faq__head-btn{
  width:100%;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-4);align-items:center;
  padding:clamp(18px, 2vw, 24px);
  border:0;background:transparent;
  font:inherit;color:inherit;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  /* El aprieto se siente en el pointer-down, no al soltar. */
  transition:transform var(--dur-instant) var(--ease-out-soft);
}
.faq__head-btn:active{transform:scale(.988)}
.faq__head-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-3px}

.faq__ico{
  display:grid;place-items:center;
  width:42px;height:42px;flex:0 0 auto;
  border-radius:var(--radius-xs);
  background:rgba(12,192,223,.14);
  border:1px solid rgba(12,192,223,.26);
  color:var(--cyan-300);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.faq__ico .ico{--ico-size:20px}
.faq__item:has([aria-expanded="true"]) .faq__ico{background:rgba(12,192,223,.24)}

.faq__q{
  margin:0;
  font-family:var(--font-subhead);
  font-size:var(--text-md);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-title);line-height:var(--lh-heading);
  color:var(--text-strong);text-wrap:pretty;
}

/* El + se vuelve × a los 45°. Una pieza contando dos estados, girando
   con el mismo --open que mueve el panel: van sincronizados por
   construcción y no por casualidad. */
.faq__signo{
  display:grid;place-items:center;
  width:30px;height:30px;flex:0 0 auto;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.07);
  color:var(--paper-dim);
  transform:rotate(calc(var(--open, 0) * 45deg));
}
.faq__signo .ico{--ico-size:16px}

/* Panel. Por defecto ABIERTO: sin JS las ocho respuestas se leen. Es
   js/v2.js el que marca .is-js y las cierra. */
.faq__panel{overflow:hidden}
.faq__item.is-js .faq__panel{height:0}
.faq__panel-in{
  padding:0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px)
          calc(clamp(18px, 2vw, 24px) + 42px + var(--space-4));
}
.faq__a{
  margin:0;
  font-size:var(--text-sm);line-height:var(--lh-body);
  color:var(--text-muted);text-wrap:pretty;
}
/* La frase que contesta de verdad, resaltada. Es lo que permite barrer
   el FAQ con la vista en vez de leerlo entero. Una por respuesta: si se
   resalta todo, no se resalta nada. */
.faq__hl{color:var(--cyan-200);font-weight:var(--fw-semibold)}

/* =====================================================================
   CIERRE — la pregunta que no está
   ===================================================================== */
.faq__cta{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px, 3vw, 40px);flex-wrap:wrap;
  margin-top:clamp(8px, 1vw, 16px);
  padding:clamp(22px, 2.6vw, 32px);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(2,79,206,.22), rgba(12,192,223,.14));
  border:1px solid rgba(12,192,223,.3);
}
.faq__cta-txt{min-width:0;flex:1 1 380px}
.faq__cta-title{
  margin:0 0 var(--space-2);
  font-family:var(--font-subhead);
  font-size:var(--type-h4-size);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-title);color:var(--text-strong);
}
.faq__cta-sub{
  margin:0;max-width:56ch;
  font-size:var(--text-sm);line-height:var(--lh-body);color:var(--text-body);
}

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

@media (max-width:640px){
  .faq__head-btn{gap:var(--space-3);padding:var(--space-4)}
  .faq__ico{width:36px;height:36px}
  .faq__ico .ico{--ico-size:18px}
  .faq__q{font-size:var(--text-base)}
  .faq__panel-in{padding-left:var(--space-4);padding-right:var(--space-4)}
  .faq__cta{flex-direction:column;align-items:flex-start}
}

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  /* El despliegue sigue funcionando: js/v2.js se saltea el resorte y
     aplica el alto de una. El signo salta a su estado en vez de girar. */
  .faq__head-btn,.faq__item,.faq__ico{transition:none}
}
@media (prefers-contrast: more){
  .faq__item{border-color:rgba(255,255,255,.34)}
  .faq__a{color:var(--paper-dim)}
  .faq__hl{color:var(--cyan-100)}
  .faq__cta{border-color:rgba(12,192,223,.6)}
}