/* ===== preguntas-frecuentes ===== */
/* ==========================================================================
   Página /preguntas-frecuentes — Centro de ayuda / FAQ (Securex)
   Prefijo de clases: faqp-  ·  Usa tokens de css/tokens.css.
   El acordeón reutiliza las clases canónicas faq-* (css/sections.css +
   js/sections.js). Aquí solo va el layout propio: hero, ancho de columna
   (920px como el original) y la tarjeta CTA oscura del final.
   Grises Tailwind fuera del set de tokens → variables locales --fp-* scopeadas
   al contenedor .faqp para no hardcodear hex en las reglas.
   Breakpoints: mobile <768 (base) · tablet/desktop ≥768 (idéntico a useBreakpoint).
   ========================================================================== */
.faqp{
  --fp-page:var(--sx-gris-fondo);
  --fp-muted:var(--sx-text-muted);
  --fp-cta-1:#0E1828;
  --fp-cta-2:#1A2A4A;

  display:block;
  background:var(--fp-page);
  color:var(--sx-text);
}

/* Contenedor estándar del sitio: 1200px + padding clamp, alineado a la izquierda.
   El ancho de lectura de las preguntas se limita luego en la lista (.faq-list). */
.faqp-wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4vw,24px)}

/* ==========================================================================
   HERO — encabezado del centro de ayuda
   El padding-top libera el navbar fijo (~68px) + aire, como en /lupa.
   ========================================================================== */
.faqp-hero{padding:clamp(96px,12vh,128px) 0 16px}

.faqp-eyebrow{
  font-family:var(--sx-font-title);
  font-size:13px;font-weight:600;color:var(--sx-blue-texto);
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;
}
.faqp-title{
  font-family:var(--sx-font-title);font-weight:800;
  font-size:clamp(2.1rem,4.2vw,3.4rem);
  line-height:1.05;letter-spacing:-.01em;
  color:var(--sx-text);margin:0 0 14px;
}
.faqp-lede{
  font-family:var(--sx-font-body);font-weight:400;
  font-size:clamp(15px,1.6vw,18px);line-height:1.55;
  color:#4B5563;margin:0;max-width:62ch;
}
.faqp-lede-link{
  color:var(--sx-blue-texto);font-weight:500;text-decoration:none;
  transition:color .2s ease;
}
.faqp-lede-link:hover{color:var(--sx-blue-hover)}

/* ==========================================================================
   FAQ — reusa .faq-section / .faq-item (canónico). Solo ajustamos ancho y
   padding: aquí el H1 de la página ya encabeza, así que el bloque va pegado
   al hero y sin fondo/relleno extra (el original usa variant="inline").
   ========================================================================== */
.faqp-faq{padding:8px 0 36px}
.faqp-faq-container{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4vw,24px)}
/* Ancho de lectura de las preguntas, alineado a la izquierda del contenedor. */
.faqp-faq .faq-list{max-width:820px}

/* Respuesta con dos bloques (persona natural / jurídica) */
.faqp-answer-lead{font-weight:600;color:var(--sx-text)}

/* ==========================================================================
   CTA — tarjeta oscura "¿Aún tienes dudas?"
   ========================================================================== */
.faqp-cta-section{padding:24px 0 64px}
.faqp-cta{
  background:linear-gradient(135deg,var(--fp-cta-1) 0%,var(--fp-cta-2) 100%);
  border-radius:24px;padding:32px 24px;text-align:center;color:var(--sx-white);
}
.faqp-cta-title{
  font-family:var(--sx-font-title);font-weight:700;
  font-size:24px;line-height:1.15;letter-spacing:-.02em;
  color:var(--sx-white);margin:0 0 10px;
}
.faqp-cta-lede{
  font-family:var(--sx-font-title);font-weight:300;font-size:14px;line-height:1.6;
  color:rgba(255,255,255,.75);margin:0 auto 24px;max-width:460px;
}
.faqp-cta-actions{
  display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;
}
/* Enlace textual (equivalente al botón "quaternary" del original: link azul
   con subrayado animado que crece desde la izquierda). */
.faqp-cta-link{
  position:relative;
  font-family:var(--sx-font-title);font-size:15px;font-weight:500;
  color:var(--sx-blue-texto);text-decoration:none;padding:2px 0;
}
.faqp-cta-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--sx-ease-smooth);
}
.faqp-cta-link:hover::after{transform:scaleX(1)}

/* ==========================================================================
   Tablet / desktop (≥768px)
   ========================================================================== */
@media (min-width:768px){
  .faqp-hero{padding:clamp(112px,12vh,128px) 0 28px}

  .faqp-faq{padding:12px 0 56px}

  .faqp-cta-section{padding:40px 0 96px}
  .faqp-cta{padding:44px 44px}
  .faqp-cta-title{font-size:32px}
  .faqp-cta-lede{font-size:16px}
}