/* ════════════════════════════════════════════════════════════
   SECCIÓN FAQ
   6 preguntas en dos columnas independientes (abrir una no mueve la
   otra). Cabecera partida: título a la izquierda, entradilla a la
   derecha. Cerrado: tarjeta con número + pregunta + botón "+". Abierto: fondo azul muy sutil,
   el "+" pasa a "−", el texto se descubre con clip-path y la
   respuesta crece con altura real
   (CSS Grid 0fr→1fr) para que las respuestas largas (pasos) no
   estén limitadas a una altura fija.
   ════════════════════════════════════════════════════════════ */

.faq{padding-block:var(--section-pad);background:var(--bg);position:relative;overflow:hidden;--faq-ease-out:cubic-bezier(.16,1,.3,1)}
.faq-container{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter)}

/* ── CABECERA ── */
.faq-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px 64px;align-items:end;margin-bottom:44px}
.faq-head .faq-eyebrow{grid-column:1/-1;margin-bottom:-8px}
.faq-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-sky)}
.faq-title{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--text-1);margin:0}
.faq-sub{font-size:15px;line-height:1.6;color:var(--text-2);margin:0;justify-self:end;max-width:40ch}

/* ── LISTA: dos columnas ── */
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.faq-col{display:flex;flex-direction:column;gap:14px}

/* ── ITEM ── */
.faq-item{
  position:relative;border-radius:18px;
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--faq-ease-out);
}
/* brillo azul en la esquina al abrir */
.faq-item::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--c-deep) 16%,transparent),transparent 60%);
  transition:opacity .4s ease}
.faq-item:not(.is-open):hover{border-color:var(--border-strong);transform:translateY(-1px)}
.faq-item.is-open{border-color:color-mix(in srgb,var(--c-sky) 40%,transparent)}
.faq-item.is-open::before{opacity:1}

.faq-q-heading{position:relative;margin:0;font-weight:inherit}

.faq-question{
  display:flex;align-items:center;gap:16px;
  width:100%;padding:20px 20px 20px 18px;
  background:none;border:none;margin:0;
  font-family:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.faq-question:focus-visible{outline:2px solid var(--c-sky);outline-offset:-3px;border-radius:16px}

/* número en pastilla */
.faq-num{
  flex-shrink:0;display:grid;place-items:center;width:38px;height:28px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.faq-item.is-open .faq-num{color:#fff;background:var(--c-deep);border-color:var(--c-deep)}
/* brand.css pinta el número abierto en --c-sky con !important: aquí va blanco sobre azul */
.faq .faq-col .faq-item.is-open .faq-num{color:#fff!important}

.faq-q-text{
  flex:1;min-width:0;
  font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.005em;
  color:var(--text-1);
}

/* ── BOTÓN +/− ── */
.faq-toggle{
  position:relative;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border-strong);
  background:transparent;
  transition:border-color .25s ease,background .25s ease,transform .45s var(--faq-ease-out);
}
.faq-toggle::before,.faq-toggle::after{
  content:'';position:absolute;left:50%;top:50%;border-radius:2px;
  background:var(--text-1);
  transform:translate(-50%,-50%);
  transition:background .2s ease,transform .35s var(--faq-ease-out);
}
.faq-toggle::before{width:11px;height:1.6px}
.faq-toggle::after{width:1.6px;height:11px}
.faq-question:hover .faq-toggle{border-color:var(--c-sky)}
.faq-item.is-open .faq-toggle{border-color:var(--c-deep);background:var(--c-deep);transform:rotate(180deg)}
/* la barra vertical se pliega: "+" → "−" */
.faq-item.is-open .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-item.is-open .faq-toggle::before,
.faq-item.is-open .faq-toggle::after{background:#fff}

/* ── RESPUESTA (altura real vía CSS Grid 0fr→1fr) ── */
.faq-answer-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.faq-answer-wrap.is-open{grid-template-rows:1fr}
.faq-answer-inner{overflow:hidden;min-height:0}

.faq-answer{
  position:relative;padding:0 22px 22px 72px;
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:opacity .2s ease,clip-path .2s ease;
}
/* al abrir: el texto se descubre de arriba abajo mientras crece la altura */
.faq-answer-wrap.is-open .faq-answer{
  opacity:1;clip-path:inset(0 0 0 0);
  transition:opacity .3s ease .08s,clip-path .55s var(--faq-ease-out) .08s;
}

.faq-p{font-size:14.5px;line-height:1.65;color:var(--text-2);margin:0;max-width:60ch}
.faq-p + .faq-p{margin-top:11px}
.faq-p strong{color:var(--text-1);font-weight:600}
/* pasos numerados (type:'steps'): número en círculo + título + texto */
.faq-step{display:flex;gap:12px;margin-top:12px}
.faq-p + .faq-step{margin-top:14px}
.faq-step + .faq-p{margin-top:16px}
.faq-step-num{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--c-deep) 18%,transparent);color:var(--c-sky);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
[data-theme="light"] .faq-step-num{color:var(--c-deep)}
.faq-step-body{min-width:0;padding-top:2px}
.faq-step-title{margin:0 0 2px;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--text-1)}
.faq-step-text{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.faq-step-text strong{color:var(--text-1);font-weight:600}
/* viñetas (list) */
.faq-bullets{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;max-width:60ch}
.faq-bullets li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:var(--text-2)}
.faq-bullets li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--c-sky)}
.faq-bullets li strong{color:var(--text-1);font-weight:600}
.faq-bullets + .faq-p{margin-top:14px}

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media(max-width:900px){
  .faq-head{grid-template-columns:1fr;gap:14px}
  .faq-head .faq-eyebrow{margin-bottom:0}
  .faq-sub{justify-self:start}
  .faq-list{grid-template-columns:1fr;gap:10px}
  .faq-col{gap:10px}
}
@media(max-width:640px){
  .faq-head{margin-bottom:28px}
  .faq-question{padding:16px 14px;gap:12px}
  .faq-num{width:34px;height:26px;font-size:11px}
  .faq-q-text{font-size:14.5px}
  .faq-toggle{width:28px;height:28px}
  .faq-answer{padding:0 16px 18px 60px}
  .faq-p{font-size:14px}
}

/* ════════════════════════════════
   PREFERS-REDUCED-MOTION
   ════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .faq-answer-wrap{transition:none !important}
  .faq-answer{transition:none !important;clip-path:none !important}
  .faq-toggle,.faq-toggle::before,.faq-toggle::after,.faq-item,.faq-item::before{transition:none !important}
}