/* ═══════════════════════════════════════════════════════════════════════════
   SENDAR — proyecto-academia-arabe.html · la plataforma por dentro (2026-09)
   Solo las secciones nuevas: mapa, recorrido en vídeo, piezas, proceso y FAQ.
   Se carga DESPUÉS de proyecto-academia-arabe.css y ANTES de sendar-shared.css.
   Prefijo `aap-` para no chocar con las clases que comparten los 6 proyectos.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Suisse Intl'; src: url('assets/fonts/SuisseIntl-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --aap-linea: rgba(238,238,242,0.12);
  --aap-tenue: rgba(238,238,242,0.72);
  --aap-panel: rgba(34,38,80,0.55);
  --aap-turq: #4fc0a4;
}

/* ── Textos comunes ─────────────────────────────────────────────────────────── */
.pj-section-title em, .aap-h2 em { font-style: normal; color: var(--accent); }
.aap-lead {
  font-size: clamp(16px, 1.3vw, 20px); line-height: 1.7; color: rgba(238,238,242,0.92);
  max-width: 62ch; text-wrap: pretty;
}
.aap-h2 {
  font-family: 'TT Tunnels Bold', "Impact", sans-serif; font-weight: 900;
  font-size: clamp(38px, 6vw, 96px); text-transform: uppercase; letter-spacing: -0.03em;
  line-height: 0.9; margin-bottom: clamp(18px, 2vw, 28px); text-wrap: balance;
}

/* ── Botón «Pausar las animaciones» ───────────────────────────────────────── */
.aap-pausa {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 20px 11px 16px; border-radius: 100px;
  border: 1.5px solid rgba(238,238,242,0.28); background: rgba(19,22,46,0.55); color: var(--light);
  font-family: 'TT Lakes Neue', "Impact", sans-serif; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.aap-pausa:hover { border-color: var(--accent); background: rgba(214,46,73,0.14); }
.aap-pausa:focus-visible, .aap-indice a:focus-visible, .aap-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.aap-pausa i { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.aap-pausa i::before, .aap-pausa i::after { content: ''; position: absolute; top: 0; width: 4px; height: 12px; background: currentColor; border-radius: 1px; }
.aap-pausa i::before { left: 1px; } .aap-pausa i::after { right: 1px; }
.aap-pausa[aria-pressed="true"] i::before { left: 2px; width: 0; height: 0; background: none; border-radius: 0;
  border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.aap-pausa[aria-pressed="true"] i::after { display: none; }

/* ── El «vídeo»: la animación SVG en su marco ───────────────────────────────── */
.aap-video { margin: 0; position: relative; }
.aap-pantalla {
  position: relative; border-radius: 22px; padding: clamp(6px, 1vw, 14px);
  background: radial-gradient(120% 90% at 20% 0%, rgba(214,46,73,0.10), transparent 55%), var(--aap-panel);
  border: 1px solid rgba(238,238,242,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.28);
}
.aap-pantalla img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; max-width: 100%; }
.aap-rec {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px;
  font-family: 'TT Lakes Neue', "Impact", sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--aap-tenue);
}
.aap-rec b { color: var(--light); font-weight: normal; }
.aap-rec-lado { display: flex; align-items: center; gap: 10px; }
.aap-body-sep { margin-top: clamp(24px, 3vw, 40px); }
.aap-titulo-ancho { max-width: 760px; }
.aap-rec-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(214,46,73,0.6); animation: aapRec 1.8s ease-out infinite; }
@keyframes aapRec { 0% { box-shadow: 0 0 0 0 rgba(214,46,73,0.55); } 70% { box-shadow: 0 0 0 9px rgba(214,46,73,0); } 100% { box-shadow: 0 0 0 0 rgba(214,46,73,0); } }
html.aap-quieto .aap-rec-punto { animation: none; background: rgba(238,238,242,0.5); }

/* ── MAPA ─────────────────────────────────────────────────────────────────────── */
#pj-mapa { position: relative; z-index: 1; padding: clamp(64px, 8vw, 110px) var(--pad); }
.aap-mapa-hdr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.aap-mapa-hdr .pj-section-title { margin-bottom: 0; }
.aap-mapa-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }

/* ── RECORRIDO ───────────────────────────────────────────────────────────────── */
#pj-recorrido { position: relative; z-index: 1; padding: clamp(72px, 9vw, 130px) var(--pad); background: rgba(14,16,36,0.60); }
.aap-rec-hdr { max-width: 900px; margin-bottom: clamp(28px, 3vw, 40px); }
.aap-indice { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: clamp(56px, 7vw, 110px); }
.aap-indice a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--aap-linea); color: rgba(238,238,242,0.9); text-decoration: none;
  font-family: 'TT Lakes Neue', "Impact", sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.aap-indice a span { color: var(--accent); }
.aap-indice a:hover { border-color: rgba(214,46,73,0.6); color: var(--light); }
.aap-indice .aap-pausa { margin-left: auto; }

.aap-caps { display: flex; flex-direction: column; gap: clamp(88px, 11vw, 170px); }
.aap-cap {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-areas: "cab video" "lista video"; grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 4.5vw, 80px); row-gap: 22px; align-items: start; scroll-margin-top: 40px;
}
.aap-cap--der { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "video cab" "video lista"; }
.aap-cap-cab { grid-area: cab; }
.aap-cap .aap-video { grid-area: video; }
.aap-cap-lista { grid-area: lista; }
.aap-cap-num {
  font-family: 'TT Lakes Neue', "Impact", sans-serif; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 16px; line-height: 1.6;
}
.aap-cap-num b { font-weight: normal; color: rgba(238,238,242,0.55); }
.aap-cap h3 {
  font-family: 'TT Tunnels Bold', "Impact", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(28px, 3.1vw, 48px); letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 18px; text-wrap: balance;
}
.aap-cap-cab p { font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.75; color: rgba(238,238,242,0.94); max-width: 60ch; }
.aap-como {
  font-family: 'TT Lakes Neue', "Impact", sans-serif; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--aap-tenue); margin: 6px 0 12px;
}
.aap-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aap-pasos li {
  position: relative; padding-left: 26px; font-size: clamp(15px, 1.02vw, 16.5px); line-height: 1.65; color: rgba(238,238,242,0.92);
}
/* el hexágono de SENDAR como viñeta */
.aap-pasos li::before {
  content: ''; position: absolute; left: 2px; top: .52em; width: 10px; height: 11px; background: var(--accent);
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
}
.aap-pasos b { color: var(--light); font-family: 'Suisse Intl', "Helvetica", sans-serif; font-weight: 700; }
.aap-cap .pj-chips { margin-top: 22px; }

/* ── PIEZAS (reutiliza .pj-module) ──────────────────────────────────────────── */
.aap-modulos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* ── EN NÚMEROS ──────────────────────────────────────────────────────────────── */
.aap-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.aap-cifras .pj-result-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aap-seo { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--aap-linea);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.aap-seo-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.aap-seo h3 { font-family: 'TT Tunnels Bold', "Impact", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.02em; line-height: 0.95; margin: 0 0 16px; }

/* ── CÓMO SE HACE ─────────────────────────────────────────────────────────────── */
#pj-proceso { position: relative; z-index: 1; padding: clamp(72px, 9vw, 130px) var(--pad); }
.aap-proceso-hdr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.aap-fases { list-style: none; margin: 0; padding: 0; counter-reset: fase;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 40px); }
.aap-fases li { counter-increment: fase; border-top: 1px solid var(--aap-linea); padding-top: 20px; }
.aap-fases li::before {
  content: counter(fase, decimal-leading-zero); display: block; margin-bottom: 14px;
  font-family: 'TT Tunnels Bold', "Impact", sans-serif; font-weight: 900; font-size: clamp(30px, 3vw, 46px);
  letter-spacing: -0.02em; line-height: 1; color: var(--accent);
}
.aap-fases h3 { font-family: 'TT Tunnels Bold', "Impact", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(18px, 1.6vw, 23px); letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 10px; }
.aap-fases p { font-size: clamp(15px, 1.02vw, 16.5px); line-height: 1.7; color: rgba(238,238,242,0.9); }
.aap-para {
  margin-top: clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
}
.aap-para > span { font-family: 'TT Lakes Neue', "Impact", sans-serif; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-right: 6px; }

/* ── PREGUNTAS FRECUENTES ─────────────────────────────────────────────────────── */
#pj-faq { position: relative; z-index: 1; padding: clamp(72px, 9vw, 130px) var(--pad); background: rgba(14,16,36,0.60); }
.aap-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.aap-faq { border-top: 1px solid var(--aap-linea); }
.aap-faq details { border-bottom: 1px solid var(--aap-linea); }
.aap-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2vw, 26px) 0; font-family: 'Suisse Intl', "Helvetica", sans-serif; font-weight: 700;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.35; color: var(--light);
}
.aap-faq summary::-webkit-details-marker { display: none; }
.aap-faq summary::after {
  content: '+'; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(214,46,73,0.5); color: var(--accent); font-size: 20px; line-height: 1; font-weight: 400;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.aap-faq details[open] summary::after { transform: rotate(45deg); background: var(--accent); color: #fff; }
.aap-faq summary:hover { color: #fff; }
.aap-faq-r { padding: 0 0 clamp(20px, 2.2vw, 28px); max-width: 68ch; }
.aap-faq-r p { font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.75; color: rgba(238,238,242,0.92); }
.aap-faq-r a { color: var(--light); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ── Enlaces de texto dentro de las secciones nuevas ─────────────────────────── */
.aap-cap-cab a, .aap-fases a, .aap-lead a { color: var(--light); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .aap-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .aap-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .aap-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .aap-mapa-hdr, .aap-proceso-hdr, .aap-faq-grid, .aap-seo { grid-template-columns: minmax(0, 1fr); }
  .aap-cap, .aap-cap--der { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "video" "lista"; grid-template-rows: auto; }
  .aap-indice .aap-pausa { margin-left: 0; }
}
@media (max-width: 600px) {
  .aap-modulos, .aap-fases { grid-template-columns: minmax(0, 1fr) !important; }
  .aap-seo-cifras { grid-template-columns: minmax(0, 1fr); }
  /* en el móvil el «vídeo» ocupa todo el ancho: cada píxel cuenta para leer la interfaz */
  .aap-pantalla { margin-inline: calc(-1 * var(--pad)); border-radius: 0; border-inline: 0; padding: 0; box-shadow: none; }
  .aap-rec { font-size: 11px; letter-spacing: 0.12em; }
  .aap-indice a { padding: 8px 12px; font-size: 11px; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  .aap-rec-punto { animation: none; }
  .aap-faq summary::after { transition: none; }
}