/* 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).
   Las pestanas Documentos | FAQ (22-oct-2026): su marcado .dd-pestanas va en las dos paginas y su
   comportamiento en /investor-deck/panel-dd.js, igual de comun que este fichero.
   Al cambiar este fichero (o panel-dd.js), subir el ?v= de su <link>/<script> 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,calc(1.4vw / var(--lw-z, 1)) + 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}
/* Pestanas y titulos de bloque en tarjeta (opcion D, Andrea 24-oct-2026: «destacarlas un poco»; con
   el subrayado de 12 px al 62 % no parecian pulsables). Circulo con icono + titulo + una linea de lo que
   hay dentro. El mismo dibujo sirve de titulo de cada bloque en movil (alli no hay pestanas: van
   apilados) y en escritorio cuando el proyecto solo publica uno de los dos. */
.dd-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(143,155,122,.22);color:var(--rl);transition:background .25s,color .25s}
.dd-ic .material-symbols-outlined{font-size:19px}
.dd-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.dd-tit{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--sa);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rl);line-height:1.3}
.dd-sub{font-family:var(--sa);font-size:12px;font-weight:400;letter-spacing:.01em;text-transform:none;color:rgba(245,240,230,.65);line-height:1.4}
#faq h3.dd-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:inherit;letter-spacing:normal;text-transform:none;color:var(--rl)}
.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 B (Andrea, 22-oct-2026; sustituye a la A del 6-oct, documentos | FAQ al 58/42):
   en escritorio, si el proyecto publica las dos cosas, van en dos pestanas a todo el ancho. Al
   58/42 la FAQ se quedaba en 223 px y una respuesta ocupaba 11 lineas de 5 palabras («demasiado
   compactas»). con-docs / con-faq los pone el JS de cada pagina al pintar cada bloque; las
   pestanas las enciende /investor-deck/panel-dd.js (data-pestana en .dd-cols) solo con las dos.
   Con un bloque solo, ese bloque ocupa todo el ancho y sin pestanas. Movil: los dos apilados. */
.dd-cols{display:flex;flex-direction:column;gap:30px}
.dd-cols > div{min-width:0}
.dd-pestanas{display:none}
@media(min-width:1024px){
  .dd-pestanas:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:none;padding:16px 28px 4px}
  .dd-pestana{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;
    border:1px solid rgba(245,240,230,.18);border-radius:12px;background:rgba(245,240,230,.04);transition:background .25s,border-color .25s}
  .dd-pestana:hover{border-color:rgba(245,240,230,.4);background:rgba(245,240,230,.08)}
  .dd-pestana[aria-selected="true"]{background:var(--tg);border-color:var(--pg)}
  .dd-pestana[aria-selected="true"] .dd-ic{background:var(--rl);color:var(--tg-dark)}
  .dd-pestana[aria-selected="true"] .dd-sub{color:rgba(245,240,230,.85)}
  .dd-pestana:focus-visible{outline:2px solid var(--ss);outline-offset:3px}
  .dd-pestana .dd-n{font-size:10.5px;font-weight:500;letter-spacing:.04em;padding:1px 7px;border-radius:20px;background:rgba(245,240,230,.14);color:var(--rl)}
  .dd-pestana .dd-n:empty{display:none}
  /* el titulo de cada bloque ya lo dice su pestana */
  .dd-cols[data-pestana] #docs-bloque > h3,.dd-cols[data-pestana] #faq-bloque > h3{display:none}
  .dd-cols[data-pestana="docs"] #faq-bloque,.dd-cols[data-pestana="faq"] #docs-bloque{display:none}
}
@media (prefers-reduced-motion:reduce){.dd-pestana,.dd-ic{transition:none}}
@media(min-width:1024px){
  #faq{position:absolute;top:clamp(78px,calc(11vh / var(--lw-z, 1)),96px);right:var(--cpd);bottom:clamp(22px,calc(4vh / var(--lw-z, 1)),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: cada uno en su tarjeta, en movil y en escritorio (Andrea, 22-oct-2026: «se ven
   muy juntos»; eligio las tarjetas en un tablero medido y las pidio tambien en movil) */
#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:10px}
.doc{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid rgba(245,240,230,.08);border-radius:12px;background:rgba(245,240,230,.045)}
.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}

/* Carpetas de la rejilla (29-oct-2026 «Villa dossiers», opcion A de Andrea; 2-nov-2026 cualquier carpeta del deck): con
   dos o mas documentos, una tarjeta-carpeta en la rejilla que abre en el sitio su vista (.dd-carpeta) con flecha de vuelta
   a Documentos. La pinta panel-dd.js (lwDDDocs, lwDDDosieres). Es un .doc como los demas, sin borde ni color propio
   (owner, 2-nov: «que se vean todas las casillas iguales»). La vista va FUERA de #docs-lista: al abrirla se esconde la
   lista y la cifra de la pestana no cambia. */
#docs-lista[hidden],.dd-carpeta[hidden]{display:none}
button.doc{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;box-sizing:border-box;transition:background .25s,border-color .25s}
button.doc:hover{background:rgba(245,240,230,.09);border-color:rgba(245,240,230,.3)}
button.doc:focus-visible,.dd-volver:focus-visible{outline:2px solid var(--ss);outline-offset:3px}
.doc-carpeta .doc-tit{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}
.doc-n{font-family:var(--sa);font-size:10.5px;font-weight:500;letter-spacing:.04em;padding:1px 7px;border-radius:20px;background:rgba(245,240,230,.14);color:var(--rl)}
.dd-carpeta-cab{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid rgba(245,240,230,.12)}
.dd-volver{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;
  font-family:var(--sa);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ss);transition:color .25s}
.dd-volver:hover{color:var(--rl)}
.dd-volver .material-symbols-outlined{font-size:17px}
.dd-carpeta-tit{display:inline-flex;align-items:center;gap:8px;font-family:var(--sa);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rl)}
.dd-carpeta-lista{display:grid;grid-template-columns:1fr;gap:10px}
@media (prefers-reduced-motion:reduce){button.doc,.dd-volver{transition:none}}

/* 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}
/* Pregunta en frase normal, no en mayusculas pequenas (Andrea, 22-oct-2026: «demasiado compactas») */
.faq-item summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  font-family:var(--sa);font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--rl);line-height:1.4}
.faq-item summary > span:first-child{flex:1}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .mi{width:14px;height:14px;position:relative;flex:none;margin-top:4px}
.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:15px;line-height:1.7;color:rgba(245,240,230,.78);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); las filas de FAQ solo se aprietan en pantallas bajas (abajo). 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,.dd-carpeta-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #docs-lista.un-doc{grid-template-columns:1fr}
  /* la tarjeta es la de movil (arriba); aqui solo su relleno */
  #docs-lista .doc,.dd-carpeta-lista .doc{padding:16px 18px;gap:8px}
  .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 a todo el ancho (22-oct-2026): la letra legible es la de movil (arriba); aqui el icono
     alineado, el hover y el ancho de lectura de la respuesta */
  .faq-item .mi{margin-top:6px}
  .faq-item summary:hover{color:#fff}
  .faq-item__body{padding:0 32px 20px 0;max-width:62ch}
}
/* 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}
  #docs-lista .doc,.dd-carpeta-lista .doc{padding:12px 16px}
  .faq-item summary{padding:11px 0}
  .dd-pestanas:not([hidden]){padding:12px 26px 2px}
  .dd-pestana{padding:9px 12px;gap:10px}
  .dd-pestana .dd-ic{width:30px;height:30px}
}
/* 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}
  #docs-lista,.dd-carpeta-lista{gap:10px}
  #docs-lista .doc,.dd-carpeta-lista .doc{padding:10px 14px}
  .dd-carpeta-cab{margin-bottom:8px;padding-bottom:2px}
  .dd-volver{min-height:36px}
  .faq-item summary{padding:9px 0;font-size:14px}
  .faq-item__body{font-size:14px}
  /* la linea de la tarjeta cede su alto para que el panel siga sin scroll a 1280x720 */
  .dd-pestana .dd-sub{display:none}
}
/* Los documentos tienen siempre el ancho entero (solos o en su pestana): tres columnas */
@media(min-width:1280px){
  .dd-cols.con-docs #docs-lista:not(.un-doc),.dd-cols.con-docs .dd-carpeta-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 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} }
/* La barra de pestanas reserva ese mismo hueco (Andrea, 28-oct-2026: «la pestana de FAQ no casa con el
   tercer documento»). Con barra clasica la rejilla de documentos perdia 10-13 px por la derecha y la
   pestana FAQ no. Mismo mecanismo y mismo grosor que .dd-cuerpo = mismo ancho con cualquier barra (y cero
   con barra superpuesta). El scrollbar-width:thin no es estetico: sin el, el ::-webkit-scrollbar{display:none}
   global de cada pagina deja el hueco a cero. overflow:hidden es lo que hace que reserve y recorta el foco
   (2 + 3 px de offset) por abajo: el aire de abajo pasa al padding y el margen negativo deja el panel a la
   misma altura que antes. Medido a 1100, 1280, 1440 y 1920: bordes iguales al decimo de px. */
@media(min-width:1024px){
  .dd-pestanas:not([hidden]){overflow:hidden;scrollbar-gutter:stable;scrollbar-width:thin;padding-bottom:8px;margin-bottom:-4px}
}
@media(min-width:1024px) and (max-height:820px){
  .dd-pestanas:not([hidden]){padding-bottom:6px}
}