/* Panel «Investor Deck · Due Diligence» de la hero: documentos + FAQ + atajos.
   FUENTE UNICA para todos los decks (owner, 6-oct-2026): la cargan investor-deck/index.php
   (generico) y investor-deck/palmfield/index.html. Antes estas reglas vivian copiadas a mano en
   las dos paginas y podian separarse al tocar solo una. Cada pagina conserva solo la geometria
   de su propia hero (#vision, --pw, .hero-texto, .hero-pie, cifras).
   El marcado que pinta el JS es el mismo en las dos: .doc / .doc-cab / .doc-txt / .doc-tit /
   .doc-sub / .doc-des / .doc-acc / .doc-btn, y .faq-item con summary > span + span.mi.
   Usa las variables de color y tipo del :root de cada pagina (--rl, --sc, --ss, --tg, --pg,
   --tg-dark, --ob, --sa, --se, --ease, --cpd, --pw).
   Al cambiar este fichero, subir el ?v= de su <link> en LAS DOS paginas. */

/* Movil: debajo de la foto, en flujo (leccion de la v2: un panel largo superpuesto en pantalla
   pequena es un callejon sin salida). Desde 1024px flota a la derecha sobre la foto, en cristal. */
#faq{position:relative;z-index:6;background:var(--ob);color:var(--rl);padding:40px var(--cpd) 48px}
#faq .kicker{color:var(--sc)}
#faq .kicker::before{background:var(--sc)}
#faq h2{font-family:var(--sa);font-weight:200;font-size:clamp(28px,1.4vw + 16px,40px);line-height:1.05;text-transform:uppercase;margin:12px 0 0;color:var(--rl)}
#faq h2 em{font-family:var(--se);font-weight:400;font-style:normal;color:var(--ss)}
.dd-lema{font-family:var(--sa);font-size:14px;line-height:1.7;color:rgba(245,240,230,.75);margin:14px 0 0}
.dd-lema b{color:var(--rl);font-weight:500}
#faq h3{font-family:var(--sa);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sc);margin:0 0 6px}
.dd-cab{padding-bottom:22px;border-bottom:1px solid rgba(245,240,230,.16)}
.dd-cuerpo{display:flex;flex-direction:column;gap:30px;padding-top:24px}

/* Estructura A (owner, 6-oct-2026): documentos | FAQ al 58/42 desde 1280px, solo si el proyecto
   publica las dos cosas. con-docs / con-faq los pone el JS al pintar cada bloque: con uno solo,
   ese bloque ocupa todo el ancho. */
.dd-cols{display:flex;flex-direction:column;gap:30px}
.dd-cols > div{min-width:0}
@media(min-width:1280px){
  .dd-cols.con-docs.con-faq{display:grid;grid-template-columns:1.38fr 1fr;gap:26px;align-items:start}
}
@media(min-width:1024px){
  #faq{position:absolute;top:clamp(78px,11vh,96px);right:var(--cpd);bottom:clamp(22px,4vh,40px);width:var(--pw);min-width:400px;
    padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;
    background:rgba(12,14,10,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(190,179,165,.3);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);box-sizing:border-box}
  .dd-cab{padding:26px 28px 20px;flex:none}
  .dd-cuerpo{flex:1;min-height:0;overflow-y:auto;padding:20px 28px 26px;scrollbar-width:thin;scrollbar-color:rgba(245,240,230,.25) transparent}
}

/* Documentos: filas con filete */
#docs-bloque{display:flex;flex-direction:column}
/* [hidden] tiene que ganar al display:flex de arriba (el preflight de Tailwind lo pone sin !important) */
#docs-bloque[hidden],#faq-bloque[hidden]{display:none}
#docs-lista{display:grid;grid-template-columns:1fr;gap:0}
.doc{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid rgba(245,240,230,.16)}
.doc:last-child{border-bottom:1px solid rgba(245,240,230,.16)}
.doc-cab{display:flex;align-items:flex-start;gap:10px}
.doc-cab .material-symbols-outlined{font-size:18px;color:var(--sc);flex:none}
.doc-txt{display:flex;flex-direction:column;min-width:0}
.doc-tit{font-family:var(--sa);font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--rl);overflow-wrap:anywhere}
.doc-sub{font-family:var(--sa);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ss)}
.doc-des{font-family:var(--sa);font-size:12px;line-height:1.6;color:rgba(245,240,230,.7);margin-top:4px}
.doc-acc{display:flex;flex-wrap:wrap;gap:8px}
.doc-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:30px;text-decoration:none;font-family:var(--sa);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rl);border:1px solid rgba(245,240,230,.4);transition:background .25s}
.doc-btn:hover{background:rgba(245,240,230,.12)}
.doc-btn .material-symbols-outlined{font-size:15px}

/* FAQ: acordeon con + / - de la home (el + lo dibujan ::before/::after de un span.mi vacio) */
#faq-lista{display:flex;flex-direction:column}
#faq-lista p{color:rgba(245,240,230,.7)}
/* enlace del aviso «no se pudieron cargar las preguntas»: claro sobre el cristal oscuro */
#faq-lista p a{color:var(--rl);text-decoration:underline}
.faq-item{border:0;border-top:1px solid rgba(245,240,230,.18);border-radius:0;background:transparent}
.faq-item:last-child{border-bottom:1px solid rgba(245,240,230,.18)}
.faq-item + .faq-item{margin-top:0}
.faq-item summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--sa);font-size:13px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--rl);line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .mi{width:14px;height:14px;position:relative;flex:none}
.faq-item .mi::before,.faq-item .mi::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(245,240,230,.8)}
.faq-item .mi::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
.faq-item[open] .mi::after{transform:rotate(0)}
.faq-item__body{padding:0 0 20px;font-family:var(--sa);font-size:14px;line-height:1.75;color:rgba(245,240,230,.72);max-width:64ch}

/* Atajos, justo tras el lema (owner, 6-oct-2026). Verde Lawang con flecha (opcion 2 de la
   maqueta): tinte verde y borde salvia en reposo; relleno verde de la marca al pasar; verde
   oscuro al pulsar. La flecha baja 2px al pasar: llevan a una seccion mas abajo. */
.dd-atajos{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.dd-atajos .btn{padding:10px 16px;font-size:10px}
.dd-atajos .btn-atajo{gap:6px;padding:10px 14px;border-color:rgba(143,155,122,.7);color:var(--rl);background:rgba(72,91,55,.18)}
.dd-atajos .btn-atajo .material-symbols-outlined{font-size:15px;transition:transform .3s var(--ease)}
.dd-atajos .btn-atajo:hover{background:var(--tg);border-color:var(--pg)}
.dd-atajos .btn-atajo:hover .material-symbols-outlined{transform:translateY(2px)}
.dd-atajos .btn-atajo:active{background:var(--tg-dark);border-color:var(--tg-dark)}
.dd-atajos .btn-atajo:focus-visible{outline:2px solid var(--ss);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.dd-atajos .btn-atajo .material-symbols-outlined{transition:none}.dd-atajos .btn-atajo:hover .material-symbols-outlined{transform:none}}

/* Panel sin scroll en escritorio (owner, 6-oct-2026): documentos en dos columnas con tarjeta baja
   (View / Download como texto) y filas de FAQ mas prietas. El cuerpo conserva su overflow-y:auto:
   al abrir una respuesta larga hace scroll en vez de recortarla. Movil intacto. */
@media(min-width:1024px){
  .dd-cuerpo{padding-top:16px;padding-bottom:20px}
  .dd-cols{gap:22px}
  #docs-lista{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  #docs-lista.un-doc{grid-template-columns:1fr}
  .doc{padding:10px 0;gap:5px}
  /* filete inferior en toda la ultima fila, tenga uno o dos documentos */
  #docs-lista .doc:nth-child(2n+1):nth-last-child(-n+2),#docs-lista .doc:nth-child(2n+1):nth-last-child(-n+2) ~ .doc{border-bottom:1px solid rgba(245,240,230,.16)}
  .doc-tit{font-size:13px}
  .doc-sub{font-size:10px}
  .doc-acc{padding-left:28px;gap:14px;flex-wrap:nowrap}
  .doc-btn{padding:0;border:0;border-radius:0;font-size:10px;letter-spacing:.12em;color:var(--ss);transition:color .25s}
  .doc-btn:hover{background:none;color:var(--rl)}
  .faq-item summary{padding:11px 0;font-size:12px}
}
/* Columna estrecha (1024-1279 y portatiles a 1280): View / Download alineados con el icono,
   para que quepan en una linea */
@media(min-width:1024px) and (max-width:1365px){ .doc-acc{padding-left:0;gap:12px} }
/* Pantallas bajas (1366x768, 1280x720): cabecera y filas mas prietas para que quepa sin scroll.
   ACEPTADO (owner, 6-oct-2026): entre 1024 y 1279 px de ancho (iPad horizontal, ventanas
   pequenas) el panel puede hacer scroll; el objetivo sin scroll es desde 1280. */
@media(min-width:1024px) and (max-height:820px){
  .dd-cab{padding:20px 26px 16px}
  #faq h2{font-size:28px}
  .dd-lema{font-size:13px;line-height:1.6;margin-top:10px}
  .dd-atajos{padding-top:12px;gap:6px}
  .dd-atajos .btn-atajo{padding:8px 10px;letter-spacing:.1em}
  .dd-cuerpo{padding:12px 26px 14px}
  .dd-cols{gap:16px}
  .doc{padding:8px 0}
  .faq-item summary{padding:8px 0}
}
/* Pantallas de 760px de alto o menos (1280x720): un escalon mas, porque en espanol e indonesio
   las preguntas y los botones son mas largos y en ingles ya cabia (medido 6-oct-2026) */
@media(min-width:1024px) and (max-height:760px){
  .dd-cab{padding:16px 26px 12px}
  #faq h2{font-size:26px}
  .dd-lema{line-height:1.5}
  .dd-cuerpo{padding:10px 26px 10px}
  .doc{padding:6px 0}
  .faq-item summary{padding:6px 0}
}
/* ...y a esa altura la FAQ gana ancho: en indonesio sus preguntas pasaban a tres lineas */
@media(min-width:1280px) and (max-height:760px){ .dd-cols.con-docs.con-faq{grid-template-columns:1.1fr 1fr} }
/* Sin FAQ, los documentos aprovechan el ancho entero: tres columnas */
@media(min-width:1280px){
  .dd-cols.con-docs:not(.con-faq) #docs-lista:not(.un-doc){grid-template-columns:repeat(3,minmax(0,1fr))}
  .dd-cols.con-docs:not(.con-faq) #docs-lista .doc{border-bottom:0}
  .dd-cols.con-docs:not(.con-faq) #docs-lista .doc:nth-child(3n+1):nth-last-child(-n+3),
  .dd-cols.con-docs:not(.con-faq) #docs-lista .doc:nth-child(3n+1):nth-last-child(-n+3) ~ .doc{border-bottom:1px solid rgba(245,240,230,.16)}
}
/* El hueco de la barra de scroll va reservado siempre (owner, 6-oct-2026: «cuando abro
   Preguntas frecuentes se mueve hacia la izquierda»). Al abrir una respuesta larga aparece la
   barra y, sin reserva, le quitaba su ancho al contenido y todo saltaba a la izquierda.
   Sin tocar el padding: con barra clasica (Windows) el contenido pierde su ancho (~12px) y
   sigue cabiendo (medido en es/id a 1280x720); con barra superpuesta (Mac, iPad) no se reserva
   nada y el panel queda simetrico. Un padding fijo compensado descuadraba ese segundo caso. */
@media(min-width:1024px){ .dd-cuerpo{scrollbar-gutter:stable} }