/* Integraciones, Centro de ayuda, Contacto y sus subpáginas (renders 04–06 de Álvaro, 18/10/2026; D-61).
   Bloque 1: piezas que comparten esas páginas, que cargan esta hoja con «css: ayuda, …». Son candidatas a sitio.css
   si otras páginas las adoptan (la llamada final oscura aparece también en los renders de Funciones y Precios).
   Bloque 2: Centro de ayuda y Preguntas frecuentes. Colores: tokens de marco.css y sitio.css; texto ≥ 4,5:1. */

/* ───────────────────────────── Bloque 1 · piezas compartidas ───────────────────────────── */

.ap-sec { padding: 64px 0; }
.ap-cab { display: grid; gap: 6px; margin-bottom: 24px; justify-items: start; }
.ap-cab-centro { justify-items: center; text-align: center; }
.ap-h2 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0; }
.ap-h2-g { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem); line-height: 1.1; }
.ap-titulo-tarjeta { font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.ap-titulo-tarjeta-g { font-size: 22px; }
.ap-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* Cabecera centrada en banda con cuadrados decorativos (renders 04 y 05) */
.ap-heroe { position: relative; overflow: hidden; padding: 64px 0 60px; }
.ap-heroe > .wrap { position: relative; }
.ap-heroe-centro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.ap-heroe .rd-lead { font-size: 18px; line-height: 1.5; max-width: 640px; }
.ap-deco { position: absolute; display: block; background: #dfeeea; opacity: .8; border-radius: 24px; pointer-events: none; }
.ap-deco-1 { left: 60px; top: 60px; width: 110px; height: 110px; }
.ap-deco-2 { left: 150px; top: 150px; width: 70px; height: 70px; border-radius: 18px; background: #d3e8e2; }
.ap-deco-3 { right: 70px; top: 40px; width: 130px; height: 130px; border-radius: 28px; }
.ap-deco-4 { right: 180px; top: 170px; width: 60px; height: 60px; border-radius: 16px; background: #d3e8e2; }
@media (max-width: 1180px) { .ap-deco { display: none; } }

/* Cabecera de las subpáginas sin render (plataformas, preguntas frecuentes, seguridad) */
.ap-heroe-sub { padding: 40px 0 56px; }
.ap-heroe-sub > .wrap { display: grid; gap: 16px; justify-items: start; }
.ap-heroe-sub .rd-h1 { max-width: 20ch; }
.ap-heroe-sub .rd-lead { max-width: 720px; }
.ap-heroe-sub .ap-acciones { margin-top: 8px; }
.ap-migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; color: var(--color-muted); }
.ap-migas li { display: inline-flex; align-items: center; }
.ap-migas li + li::before { content: "›"; margin-right: 8px; }
.ap-migas a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--color-muted); font-weight: 600; }
.ap-migas a:hover { color: var(--color-brand); }

/* Antetítulo en píldora, sellos y etiquetas de estado */
.ap-pildora { display: inline-flex; align-items: center; margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand); background: var(--color-info-bg); border-radius: 999px; padding: 6px 12px; }
.ap-sellos { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ap-heroe-sub .ap-sellos { justify-content: flex-start; margin: 0; }
.ap-sellos li { display: inline-flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; }
.ap-sellos svg { width: 16px; height: 16px; flex: none; color: var(--color-brand); }
.ap-insignia { align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--color-brand); background: var(--color-info-bg); border-radius: 999px; padding: 6px 12px; }
.ap-insignia-aviso { color: var(--color-warning); background: var(--color-warning-bg); }
.ap-insignia-neutra { color: var(--color-muted); background: var(--color-background); box-shadow: inset 0 0 0 1px var(--color-border); }

/* Iconos en círculo (los cuadrados de 48 px usan .icono-caja de sitio.css) */
.ap-icono { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--color-info-bg); color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center; }
.ap-icono svg { width: 24px; height: 24px; }
.ap-icono-g { width: 64px; height: 64px; }
.ap-icono-g svg { width: 28px; height: 28px; }
.ap-icono-p { width: 36px; height: 36px; }
.ap-icono-p svg { width: 18px; height: 18px; }

/* Tarjetas y rejillas */
.ap-tarjeta { padding: 26px 28px; }
.ap-rejilla-2, .ap-rejilla-3 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-tema { display: flex; gap: 20px; align-items: flex-start; }
.ap-tema-cuerpo { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.ap-tema-cuerpo .enlace-flecha { margin-top: 2px; }

/* Aviso en banda con icono sobre círculo de marca */
.ap-aviso { display: flex; align-items: center; gap: 14px; background: #d9eee8; border-radius: 14px; padding: 16px 20px; }
.ap-aviso-icono { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ap-aviso-icono svg { width: 18px; height: 18px; }
.ap-aviso p { margin: 0; }
.ap-aviso-titulo { font-size: 14.5px; font-weight: 800; line-height: 1.45; }
.ap-aviso .rd-nota { font-size: 13.5px; }

/* Tablas */
.ap-tabla-marco { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.ap-tabla-marco:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 2px; }
.ap-tabla { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.ap-tabla caption { text-align: left; padding: 14px 16px; font-size: 15px; font-weight: 800; }
.ap-tabla th, .ap-tabla td { padding: 12px 16px; border: 0; border-top: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.ap-tabla thead th { font-size: 13px; font-weight: 800; color: var(--color-text); background: var(--color-info-bg); border-top-color: var(--color-border); }
.ap-tabla tbody th { font-weight: 700; }
.ap-tabla td { color: var(--color-muted); }
.ap-tabla td strong { color: var(--color-text); }

/* Margen de la llamada final (la variante oscura es común, en sitio.css) */
.ap-final { padding: 0 0 56px; }

@media (max-width: 1100px) {
  .ap-rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ap-rejilla-2, .ap-rejilla-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ap-sec { padding: 48px 0; }
  .ap-heroe { padding: 48px 0 44px; }
  .ap-heroe-sub { padding: 28px 0 44px; }
  .ap-tarjeta { padding: 22px 20px; }
  .ap-aviso { align-items: flex-start; }
}
@media (max-width: 480px) {
  .ap-tema { flex-direction: column; gap: 14px; }
  .ap-acciones .boton { flex: 1 1 100%; }
}

/* ───────────────────────────── Bloque 2 · Centro de ayuda ───────────────────────────── */

.ayuda-sellos { margin-top: 6px; }
.ayuda-sellos li { background: #d9eee8; border-color: #d9eee8; font-size: 14px; padding: 10px 18px; }
.ayuda-atajos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; }

.ayuda-temas-sec { padding: 64px 0 24px; }
.ayuda-temas-sec .ap-cab { margin-bottom: 28px; }
.ayuda-temas-sec .ap-cab .rd-lead { font-size: 17px; }

.ayuda-asistida-sec { padding: 24px 0; }
.ayuda-asistida { background: var(--color-band); border-radius: 20px; padding: 36px 40px; display: grid; gap: 22px; }
.ayuda-asistida-cuerpo { display: flex; align-items: center; gap: 32px; }
.ayuda-asistida-icono { flex: none; width: 120px; height: 120px; border-radius: 50%; background: #d9eee8; color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center; }
.ayuda-asistida-icono svg { width: 56px; height: 56px; }
.ayuda-asistida-texto { display: grid; gap: 10px; justify-items: start; }
.ayuda-asistida-texto .ap-acciones { margin-top: 6px; }

.ayuda-equipo-sec { padding: 24px 0 56px; }
.ayuda-equipo { display: grid; gap: 18px; align-content: start; }
.ayuda-equipo .ap-tema-cuerpo .boton { margin-top: 4px; }
.ayuda-email { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; font-weight: 700; }
.ayuda-email svg { width: 18px; height: 18px; flex: none; color: var(--color-brand); }
.ayuda-email a { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; overflow-wrap: anywhere; }
.ayuda-email a:hover { text-decoration: underline; }
.ayuda-datos { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--color-line); display: grid; gap: 10px; }
.ayuda-datos li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.ayuda-datos svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ayuda-rapido { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ayuda-rapido li { display: flex; gap: 14px; align-items: flex-start; }
.ayuda-rapido .numero-paso { width: 32px; height: 32px; }
.ayuda-rapido h3 { font-size: 15.5px; line-height: 1.35; font-weight: 800; margin: 0 0 3px; }
.ayuda-rapido p { font-size: 14px; line-height: 1.5; color: var(--color-muted); margin: 0; }

@media (max-width: 720px) {
  .ayuda-temas-sec { padding: 48px 0 16px; }
  .ayuda-asistida { padding: 28px 20px; }
  .ayuda-asistida-cuerpo { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ayuda-asistida-icono { width: 80px; height: 80px; }
  .ayuda-asistida-icono svg { width: 38px; height: 38px; }
  .ayuda-equipo-sec { padding-bottom: 44px; }
}

/* ───────────────────────────── Bloque 2 · Preguntas frecuentes ───────────────────────────── */

.faq-buscar { display: grid; gap: 6px; width: min(100%, 520px); margin-top: 8px; }
.faq-buscar label { font-size: 14px; font-weight: 700; }
.faq-buscar input {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--color-text);
  background: var(--color-surface); border: 1px solid #7d968f; border-radius: 10px;
}
.faq-buscar input::placeholder { color: var(--color-muted); opacity: 1; }
.faq-buscar input:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 2px; }
.faq-buscar p { margin: 0; min-height: 1.5em; font-size: 14px; color: var(--color-muted); }
.faq-indice { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.faq-indice a {
  display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 16px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.faq-indice a:hover { border-color: var(--color-brand); color: var(--color-brand); }

.faq-grupo { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px 56px; align-items: start; padding: 48px 0; scroll-margin-top: 16px; }
.faq-grupo + .faq-grupo { border-top: 1px solid var(--color-line); }
.faq-grupo-cab { display: grid; gap: 10px; }
.faq-grupo .acordeon a { font-weight: 700; }
.faq-cierre { padding: 8px 0 56px; }

@media (max-width: 900px) {
  .faq-grupo { grid-template-columns: 1fr; padding: 36px 0; }
}
@media print {
  .faq-buscar, .faq-indice { display: none !important; }
  .acordeon details > div { display: block; }
}