/* ==========================================================================
   EQUIPO-COMUNIDAD.CSS — Directivos (fix), Voluntarios y FAQ de Nosotros
   --------------------------------------------------------------------------
   Reconstruido contra el documento DISENOWEB_NOSOTROS.ai (escritorio, 1440) y
   DISENOTABMOB_NOSOTROS.ai (tablet 768 / móvil 375), TransferNow-20260803.
   Enlazado AL FINAL de la cadena de estilos de nosotros.html a propósito:
   estas tres secciones tenían HTML correcto pero CSS ausente o en colisión
   con capas más viejas (ver notas en cada bloque), así que esta hoja gana
   sin necesitar !important en casi nada.
   ========================================================================== */

/* ==========================================================================
   1. DIRECTIVOS — quitar lo roto, no el marco
   --------------------------------------------------------------------------
   El blob morado por-persona (trébol/squircle/quatrefoil) YA estaba bien
   resuelto en retratos.css (§"DIRECTIVOS — blobs morados"). Lo que fallaba:

   a) filter:grayscale(1) — hereda de la regla más vieja de retratos.css (la
      "gota" del brandbook, pensada para OTRO tratamiento fotográfico) y nadie
      la había apagado para los directivos. El .ai los pide a color.
      OJO: este filter:none NO bastaba solo (ver §4 de la skill punto37-sitio
      — "la trampa del grayscale"). ginna.webp y neyder.webp venían
      desaturados en el propio ARCHIVO (saturación 0 medida con PIL, no
      recuperable por CSS); sergio.webp ya estaba a color pero con proporción
      560×624 declarada cuando el archivo real era 4488×5608 (0.897 vs 0.800).
      Los tres se re-extrajeron DIRECTO del PDF de referencia
      (DISENOWEB_NOSOTROS.pdf, xrefs 70/71/72 + sus soft-masks 518/519/520)
      con pymupdf, sin pasar por el render aplanado de la página — así se
      recupera la foto rectangular completa con transparencia real, no un
      recorte ya mordido por el blob. Quedaron en equipo/{ginna,sergio,
      neyder}.webp a 1100px de lado largo, con su alto real en el <img>.
   b) .etiqueta — seguía siendo la barra diagonal con degradado azul de esa
      misma regla vieja, pensada para ir ENCIMA de la foto. El .ai pone el
      nombre y el cargo DEBAJO del blob, en texto plano centrado, sin barras
      ni giro. Se reescribe completa para los directivos, no se hereda nada.

   No se toca el marco (la forma del blob): eso es lo que pidió el usuario. */

.equipo .organigrama-directivos .persona .retrato .foto{
  filter:none;
}

/* .etiqueta ahora es HERMANA de .retrato en el HTML (antes vivía dentro,
   posicionada absoluta y rotada encima de la foto — el motivo original de
   "todo roto"). Al ser hermana fluye en el documento normal, debajo del
   blob, sin pelear con la foto absoluta que hay dentro de .retrato. */
.equipo .organigrama-directivos .persona .etiqueta{
  position:static;
  text-align:center;
  transform:none;
  margin-top:16px;
}
.equipo .organigrama-directivos .persona .etiqueta h4,
.equipo .organigrama-directivos .persona .etiqueta .rol{
  display:block;
  width:auto; max-width:none;
  margin-left:0; margin-right:0;
  background-image:none;
  text-align:center;
  text-transform:none;
  padding:0;
}
.equipo .organigrama-directivos .persona .etiqueta h4{
  font-size:20px;
  font-weight:900;
  color:var(--negro);
  letter-spacing:.01em;
  margin-bottom:2px;
}
.equipo .organigrama-directivos .persona .etiqueta .rol{
  font-size:15px;
  font-weight:400;
  color:#4a4a4a;
  margin-top:0;
}
/* El párrafo de descripción (fuera del retrato) también centrado, como en el
   .ai — la regla vieja lo alineaba a la izquierda para acompañar las barras
   diagonales, que aquí ya no existen. */
.equipo .organigrama-directivos .persona > p{
  text-align:center;
  max-width:32ch;
  margin:6px auto 0;
  font-size:14px;
  color:#4a4a4a;
}
/* Alto contraste: la regla vieja quita el degradado de las barras; aquí no
   hay barras que perder, así que no hace falta el override — se anula el
   selector para que no reintroduzca un fondo que no existe. */
@media (prefers-contrast:more){
  .equipo .organigrama-directivos .persona .etiqueta h4,
  .equipo .organigrama-directivos .persona .etiqueta .rol{
    background-color:transparent;
  }
}

/* Ginna arranca la fila "uno" sola; medido sobre el .ai, su centro cae casi
   exacto sobre el centro de la foto de Neyder (columna derecha de la fila
   "dos"), no sobre el hueco entre Sergio y Neyder ni centrada sobre las dos.
   El intento anterior (justify-content:flex-end + padding-right:6%) no hacía
   nada visible: .orga-fila.uno tenía max-width:360px, el mismo ancho que la
   tarjeta, así que no quedaba espacio sobrante donde "empujar" con flex-end.

   Solución: en vez de aproximar con porcentaje, .orga-fila.uno usa LA MISMA
   rejilla que .orga-fila.dos (mismas columnas, mismo gap, mismo
   justify-content) y la tarjeta de Ginna se coloca en la columna 2 — así
   queda alineada con Neyder por construcción, a cualquier ancho ≥601px, sin
   recalcular nada a mano. Mismo corte que .orga-fila.dos en estilo.css
   (601px: ahí la fila "dos" ya es de 2 columnas de verdad — antes ese corte
   estaba en 768px, que colapsaba de más la mesa tablet). */
@media (min-width:601px){
  .organigrama-directivos .orga-fila.uno{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 360px));
    gap:34px;
    justify-content:center;
    max-width:none;
    width:100%;
  }
  .organigrama-directivos .orga-fila.uno .persona{
    grid-column:2;
  }
}

/* Ginna/Sergio/Neyder salían en tres tamaños distintos en móvil (274px,
   210px, 144px de ancho — medido con getBoundingClientRect, no a ojo): la
   regla genérica `.persona{max-width:340px;margin-inline:auto}` de
   estilo.css (§móvil, línea ~2465) le pone MARGIN-INLINE:AUTO a cada
   tarjeta. Un margen automático en el eje en línea cancela el stretch por
   defecto de CSS Grid (igual que en flexbox) — así que en vez de llenar la
   columna de `.orga-fila`, cada `.persona` se encoge a fit-content, y ese
   fit-content sale distinto porque cada `<img class="foto">` de directivos
   trae su propio width/height HTML (574×496, 551×513, 552×514) y esos
   números, no el mismo ancho de tarjeta, son los que terminan mandando.
   Con width:100% el grid vuelve a estirar la tarjeta a la columna completa
   (339px en un iPhone de 375) y los tres quedan iguales — el max-width:340
   y el margin-inline:auto de la regla genérica se conservan intactos, así
   que el resto de `.persona` del sitio (voluntarios, comunidad) no cambia:
   esto sólo pisa el ancho para las tres fichas de Directivos. */
@media (max-width:600px){
  .organigrama-directivos .persona{
    width:100%;
  }
}

/* ==========================================================================
   2. VOLUNTARIOS — plantilla de tarjeta tal cual el documento
   --------------------------------------------------------------------------
   El HTML ya traía las clases exactas (v-card v-amarillo/v-azul, v-foto-wrap
   v-circ-morado/v-circ-amarillo, v-nombre-chip v-chip-morado/v-chip-amarillo,
   v-cargo) en el mismo patrón de tablero de ajedrez que el .ai. No existía
   NINGUNA regla CSS para ellas — de ahí que se viera como HTML crudo. Esta es
   la plantilla completa; el "sobreponer la imagen en el marco" ya lo hacía el
   HTML (cada <img> real ya está dentro de su v-foto-wrap), aquí sólo se
   define el marco (círculo) y el resto de la tarjeta. */

.seccion-voluntarios{ margin-top:64px }

.voluntarios-hdr{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 28px;
  margin-bottom:34px;
}
.voluntarios-tag{
  font-size:15px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--negro);
  flex-basis:100%;
}
.voluntarios-hdr h3{
  font-size:17px; font-weight:900; margin:0;
  flex:1 1 auto; min-width:220px;
}
.voluntarios-hdr .btn-voluntario-red{ flex:none; margin-left:auto }

/* 3 columnas, no 4: el .ai arma la grilla en filas de 3 (2+3+3, la primera
   fila trae sólo 2 fichas de persona porque la 3ª celda la ocupa el botón
   "Quiero ser voluntario" + la estrella, ver .v-cta-card en voluntarios.css
   y el orden real de las 8 personas en voluntarios.html). */
.voluntarios-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 24px;
}
@media (max-width:900px) and (min-width:601px){
  .voluntarios-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px){
  .voluntarios-grid{ grid-template-columns:1fr; max-width:340px; margin-inline:auto }

  /* margin-left:auto es para desktop (empuja el botón al borde derecho del
     header, junto al h3). En móvil el h3 se queda sin espacio en la misma
     fila y el botón cae solo a su propia línea — ahí margin-left:auto lo
     pega contra el borde derecho en vez de centrarlo. margin:0 auto en un
     flex row centra el item cuando es el único en su línea. */
  .voluntarios-hdr .btn-voluntario-red{ margin:0 auto }
}

.v-card{
  border-radius:28px;
  padding:28px 22px 26px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.v-amarillo{ background:var(--naranja) }
.v-azul{ background:var(--azul) }

.v-foto-wrap{
  width:62%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:18px;
  display:block;
}
/* El color de respaldo asoma sólo si una foto tarda en cargar o falta; con
   las fotos reales puestas (que ya trae el HTML) queda cubierto por completo,
   que es exactamente "plantilla + imagen del miembro encima". */
.v-circ-morado{ background:#997AFF }
.v-circ-amarillo{ background:var(--naranja) }
.v-foto-wrap img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
  display:block;
}

/* Los ajustes por-persona que había aquí (scale/translateY a mano por cada
   nombre) estaban calibrados contra las fotos ANTERIORES. Las 8 fotos
   nuevas (FINALES/VOLUNTARIOS) vienen recortadas de forma consistente
   entre sí, así que el object-position:center 18% de arriba ya las encuadra
   bien a todas sin necesitar ajustes individuales — verificado una por una
   contra el .ai. Si en el futuro entra una foto con un encuadre distinto,
   el ajuste va aquí, dirigido por su nombre en el src. */

.v-nombre-chip{
  display:inline-block;
  padding:7px 16px;
  border-radius:9px;
  font-size:15px; font-weight:900;
  color:#fff;
  margin-bottom:6px;
  max-width:100%;
}
.v-chip-morado{ background:#997AFF }
.v-chip-amarillo{ background:var(--naranja) }
/* El chip sobre tarjeta amarilla no puede repetir el mismo amarillo: usa el
   morado vivo (arriba); el chip sobre tarjeta azul usa el ámbar. Evita que
   el nombre desaparezca por falta de contraste contra su propia tarjeta. */

.v-cargo{
  font-size:14px; font-weight:900;
  color:#fff;
  margin-bottom:10px;
}
.v-card p{
  font-size:13px; line-height:1.42;
  color:#20232b;
  margin:0;
}

/* ==========================================================================
   3. PREGUNTAS FRECUENTES — plantilla completa + acordeón real encima
   --------------------------------------------------------------------------
   No existía NINGUNA regla para .seccion-faq/.faq-*: por eso se veía como
   una lista pelada. El HTML del acordeón (<details>/<summary>, preguntas y
   respuestas reales y todas distintas) ya estaba correcto — el .ai sólo
   repite un texto de relleno seis veces porque es EL DISEÑO, no el contenido
   final. Aquí se monta la plantilla (tarjeta morada + borde punteado +
   mascota) y el acordeón real queda montado encima, con el texto que ya
   traía el HTML.

   El borde punteado reutiliza .marco-punteado (el mismo componente que ya
   usan Visión 2030 y las tres tarjetas de Valores) en vez de inventar uno
   nuevo: es la pieza "parametrizada" del sitio para este motivo exacto. */

.seccion-faq{ margin-top:70px; position:relative }

.faq-card.m-faq{
  --trazo:var(--azul);
  background:#997AFF;
  border-radius:34px;
  padding:40px clamp(20px,4vw,52px) 44px;
}
/* El punteado de .marco-punteado está pensado para tarjetas más pequeñas
   (Visión, Valores); en una tarjeta de este tamaño el inset por defecto queda
   corto. Se amplía sólo aquí. */
.faq-card.m-faq::after{
  inset:20px -22px -22px 20px;
  border-radius:34px;
}

.faq-hdr{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.faq-hdr-txt{ flex:1 1 auto; min-width:220px }
.faq-sub{
  display:block;
  font-size:15px; font-weight:400; color:#fff;
  margin-bottom:6px;
}
.faq-title{
  font-size:clamp(28px,3.2vw,38px);
  font-weight:900;
  color:var(--negro);
  line-height:1.08;
  margin:0;
  max-width:11ch;
}
.faq-mascota{
  width:min(150px,22%);
  height:auto;
  flex:none;
  align-self:flex-end;
}
/* Animación ligera: la mascota "mueve el brazo con el signo de interrogación"
   — como es un gráfico horneado (mascota+signo juntos), se logra con un
   pequeño balanceo de rotación de toda la pieza, apoyado en la base (no en
   el centro), que lee como un gesto de saludo/pregunta. */
@media (prefers-reduced-motion: no-preference){
  .faq-mascota{
    animation: faq-saludo 2.8s ease-in-out infinite;
    transform-origin: bottom center;
  }
  @keyframes faq-saludo{
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-4deg); }
    75%      { transform: rotate(4deg); }
  }
}

.faq-accordion{
  display:flex; flex-direction:column;
  gap:14px;
}
.faq-accordion details{
  background:#F7F5FF;
  border-radius:18px;
  overflow:hidden;
}
.faq-accordion summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:17px 20px;
  cursor:pointer;
  font-size:15px; font-weight:700;
  color:var(--negro);
}
.faq-accordion summary::-webkit-details-marker{ display:none }
.faq-accordion summary::marker{ content:"" }
.faq-accordion .icon-plus{
  flex:none;
  width:30px; height:30px;
  border-radius:50%;
  background:#C9BFF5;
  display:grid; place-items:center;
  font-style:normal;
  font-size:17px; font-weight:900;
  color:#2c2340;
  line-height:1;
  transition:transform .2s ease;
}
.faq-accordion details[open] .icon-plus{ transform:rotate(45deg) }
.faq-ans{
  padding:0 20px 20px;
}
.faq-ans p{
  margin:0;
  font-size:14px; line-height:1.5;
  color:#3a3550;
}

/* ---- 601–900 (tablet) y ≤600 (móvil): la cabecera pasa a columna, el
   acordeón queda a todo el ancho debajo, como en DISENOTABMOB_NOSOTROS.ai. */
@media (max-width:900px){
  .faq-hdr{ flex-direction:column; align-items:flex-start }
  .faq-mascota{ width:min(170px,44%); align-self:flex-start }
  .faq-title{ max-width:none }
}
@media (max-width:600px){
  .faq-card.m-faq{ padding:32px 18px 34px }
  .faq-accordion summary{ font-size:14px; padding:15px 16px }
  /* El -22px de arriba (pensado para el margen de 24px+ de tablet/escritorio)
     se sale de la pantalla en móvil: aquí el margen lateral real de la
     tarjeta es de sólo 18px, así que el trazo empujaba el body 4px más ancho
     que el viewport (confirmado con body.scrollWidth 379 contra
     innerWidth 375) y el borde punteado quedaba cortado/mal ubicado en la
     esquina superior derecha, detrás del menú. Se reduce sólo aquí a 16px,
     con 2px de margen de sobra sobre el límite medido. */
  .faq-card.m-faq::after{
    inset:16px -16px -16px 16px;
  }
}