/* ==========================================================================
   Preguntas frecuentes — Invertí en YPF
   --------------------------------------------------------------------------
   Maquetado fiel a Figma:
   archivo QCbSalrbtvI7OAEnjWHX74 · nodo "Contenido" 3258:1400 (1440 x 6191)

   Convenciones para no romper nada de lo existente:
   - Todo va prefijado con .faqi- (prefijo verificado como libre) y no se usa
     ninguna clase compartida del proyecto, así que este archivo no puede
     afectar a ninguna otra página.
   - Se carga después de css/styles.css para poder pisar sus reglas globales
     (h1, h2, h3, p, a) sin usar !important.

   El acordeón NO reutiliza el de js/global.js: ese es single-open por diseño
   y el requisito 2 pide multi-open. Ver el bloque "Acordeón" más abajo.
   ========================================================================== */

/* Fondo del nodo raíz del Figma (3258:1400). styles.css define un #f0f5fa
   global para todas las páginas, así que se pisa scopeado. */
body.page-faqi {
  background-color: #f5f5f5;
}

/* --------------------------------------------------------------------------
   Hero — Figma 3258:1103 · 1440 x 270 · padding 80px 120px
   -------------------------------------------------------------------------- */
.faqi-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 120px;
}

/* Figma 3258:1104 · 588px · gap 20px */
.faqi-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 588px;
  max-width: 100%;
}

/* Figma 3258:1105 · Montserrat Bold 40/46 · #3965b9
   line-height explícito: styles.css tiene
   `@media (min-width: 992px) { h1 { line-height: 1.05 } }` que lo alteraría. */
.faqi-hero__title {
  margin: 0;
  width: 100%;
  font-size: 40px;
  line-height: 46px;
}

/* Figma 3258:1106 · Montserrat Regular 18 · #646e86 · alto 44 (2 líneas) */
.faqi-hero__subtitle {
  margin: 0;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  color: #646e86;
}

/* --------------------------------------------------------------------------
   Barra de categorías (sticky) — Figma 3258:1107 · 1440 x 62
   padding 14px 120px · gap 8px
   El fondo NO está declarado en el Figma (el frame es transparente sobre el
   #f5f5f5 de la página). Se declara explícito porque al ser sticky, sin fondo
   el contenido se vería pasar por debajo.
   El top de 55px es la altura del .headerYPF fixed (css/header.css).
   -------------------------------------------------------------------------- */
.faqi-cats {
  position: sticky;
  top: 55px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 120px;
  background-color: #f5f5f5;
  /* Las 8 pills suman ~1080px: entran a 1440 pero no en anchos intermedios,
     así que la barra scrollea en horizontal en cuanto no alcanzan. Donde
     entran no cambia nada. La barra se oculta; el JS mantiene la pill activa
     a la vista. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.faqi-cats::-webkit-scrollbar {
  height: 0;
  display: none;
}

/* Pill inactiva — Figma 3258:1110 · bg blanco · borde #e3e7ef · radio 20
   padding 9px 16px · DIN Pro Bold 13 · #646e86 */
.faqi-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 9px 16px;
  /* El borde va como inset shadow y no como border: en Figma el stroke es
     interno y no suma al alto del frame (34px = 9 + 16 + 9). Con border el
     pill medía 36 y la barra 64 en vez de 62. */
  box-shadow: inset 0 0 0 1px #e3e7ef;
  border-radius: 20px;
  background-color: #ffffff;
  font-family: "din-bold", sans-serif;
  font-size: 13px;
  line-height: normal;
  color: #646e86;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease,
    box-shadow 150ms ease;
}

/* Pill activa — Figma 3258:1108 · bg #0451dd · texto blanco · sin stroke */
.faqi-pill.is-active {
  box-shadow: none;
  background-color: #0451dd;
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .faqi-pill:not(.is-active):hover {
    box-shadow: inset 0 0 0 1px #0451dd;
    color: #0451dd;
  }
}

/* --------------------------------------------------------------------------
   Grupo de categoría — Figma 3258:1124 y ss.
   padding 44px 120px 8px · dos columnas: 384 | gap 24 | resto
   Los grupos son adyacentes (sin gap entre ellos).
   scroll-margin-top = 55 del header fijo + 62 de la barra de categorías.
   -------------------------------------------------------------------------- */
.faqi-group {
  display: grid;
  grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
  /* Las filas se empaquetan arriba y el espacio sobrante queda al final.
     Importa por el min-height de la última categoría: en mobile el grupo es de
     una sola columna, o sea dos filas (título y lista), y con el `stretch` que
     grid usa por defecto ese sobrante se repartía entre las filas, dejando un
     hueco grande entre el título "Ayuda" y su tarjeta. */
  align-content: start;
  padding: 44px 120px 8px;
  scroll-margin-top: 117px;
}

/* Figma 3258:1340 · Montserrat Bold 24 · #3965b9 · alto de nodo 29
   line-height explícito: con `normal` Montserrat rendea 28px y además
   styles.css define reglas globales para h2 que conviene no heredar. */
.faqi-group__title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #3965b9;
}

/* Figma 3258:1341 · columna de acordeones · gap 12px */
.faqi-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ==========================================================================
   Acordeón
   --------------------------------------------------------------------------
   Usa clases propias y NO las compartidas del proyecto (.accordion-item,
   .accordion-tab-container, .display). Motivo: el acordeón de js/global.js es
   single-open por diseño (al abrir uno cierra los demás) y el requisito 2 pide
   multi-open, así que no se podía reutilizar su comportamiento. Con clases
   propias además desaparece todo riesgo sobre las 6 páginas que usan las
   compartidas, y el toggle vive en js/faq-invertir.js.

   Estructura: <h3><button> como encabezado y un panel con role="region",
   que es el patrón accesible de acordeón (teclado y lectores de pantalla
   funcionan sin JS extra).
   ========================================================================== */

/* Tarjeta — Figma 3258:1348 (cerrada) / 3258:1342 (abierta)
   bg blanco · radio 8 · sombra 0 2px 8px rgba(26,38,77,.08)
   scroll-margin-top para el deep-link #faq-n (header fijo + barra sticky). */
.faqi-card {
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px 0 rgba(26, 38, 77, 0.08);
  overflow: hidden;
  scroll-margin-top: 117px;
}

/* El h3 solo aporta semántica: los estilos globales de styles.css se anulan. */
.faqi-card__heading {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Encabezado — Figma 3258:1343 · padding 18px 24px · gap 12
   Es un <button>, así que hay que resetear su apariencia por defecto. */
.faqi-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 18px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Abierto: el Figma usa padding-top 22 y gap 12 hacia la respuesta (22+24+12
   = 58px antes del texto). Acá se mantiene el padding-top en 18 y se compensa
   con 16 abajo: el total sigue siendo 58, la respuesta arranca en la misma
   coordenada y la tarjeta mide lo mismo, pero el título NO salta al abrir y
   cerrar. Con los valores literales del Figma saltaba 4px en cada click. */
.faqi-card.is-open .faqi-card__head {
  padding: 18px 24px 16px;
}

/* Pregunta — Figma 3258:1344 · Montserrat Regular 16/24 · #3965b9 */
.faqi-q {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #3965b9;
}

/* Ícono — Figma icon_plus (#3965B9, cerrado) / icon_minus (#0451DD, abierto).
   Es el mismo glifo: la barra vertical se oculta al abrir y queda el menos. */
.faqi-icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.faqi-icon rect {
  fill: #3965b9;
  transition: fill 150ms ease;
}

.faqi-card.is-open .faqi-icon rect {
  fill: #0451dd;
}

.faqi-card.is-open .faqi-icon__v {
  display: none;
}

/* Panel de la respuesta. Requisito 2: colapsado por defecto.
   La animación es por max-height, que el JS fija al alto real del contenido
   para que sea proporcional en los dos sentidos (con un valor fijo grande, al
   cerrar la mayor parte de la animación es invisible y el bloque colapsa de
   golpe al final). */
.faqi-card__body {
  padding: 0 24px;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}

.faqi-card.is-open .faqi-card__body {
  /* Respaldo por si el JS no corre: el JS lo pisa con el alto exacto. */
  max-height: 1600px;
}

/* Los 22px de aire bajo la respuesta (Figma 3258:1342) van como padding del
   último hijo y no del panel: así quedan incluidos en el scrollHeight que mide
   el JS —por lo que el max-height no los recorta— y se colapsan con la tarjeta
   cerrada, porque el hijo cae dentro del overflow:hidden. */
.faqi-card__body > *:last-child {
  padding-bottom: 22px;
}

/* Respuesta — Figma 3258:1346 · Montserrat Regular 14 · line-height 1.55 · #3d3d3d */
.faqi-answer {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: #3d3d3d;
}

.faqi-answer + .faqi-answer,
.faqi-answer + .faqi-steps,
.faqi-steps + .faqi-answer,
.faqi-related {
  margin-top: 12px;
}

/* Pasos numerados — Figma 3258:1219 · gap 10px
   Requisito 4: las respuestas de comprar/vender van en lista numerada. */
.faqi-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma 3258:1220 · fila · gap 10 · items-start */
.faqi-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Figma 3258:1221 · 24x24 · bg #edf2fa · círculo · DIN Pro Bold 11 · #0451dd */
.faqi-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #edf2fa;
  font-family: "din-bold", sans-serif;
  font-size: 11px;
  line-height: normal;
  color: #0451dd;
}

/* Figma 3258:1223 · Montserrat Regular 14 · #3d3d3d */
.faqi-step__text {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: #3d3d3d;
}

/* "Relacionado: ..." — Figma 3258:1347 · requisito 5 (cross-link al TyC)
   etiqueta DIN Pro Regular 13 #333 + link DIN Pro Bold 13 #0451dd subrayado
   El margin va explícito porque styles.css pone margin-bottom:20px a todo p. */
.faqi-related {
  margin: 12px 0 0;
  font-family: "din-regular", sans-serif;
  font-size: 13px;
  line-height: 16px;
  color: #333333;
}

.faqi-related a {
  font-family: "din-bold", sans-serif;
  font-size: 13px;
  color: #0451dd;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   PENDIENTE: adaptación mobile / tablet
   El Figma provisto es solo desktop (1440). Lo de abajo NO sale del Figma: es
   lo mínimo para que nada se desborde y las 8 pills sigan siendo alcanzables
   en pantallas donde no entran en una línea.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1279px) {
  .faqi-group {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    padding: 44px 40px 8px;
  }

  .faqi-cats {
    padding: 14px 40px;
  }

  .faqi-hero {
    padding: 56px 40px;
  }
}

@media only screen and (max-width: 833px) {
  .faqi-hero {
    padding: 48px 24px;
  }

  .faqi-group {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding: 32px 24px 8px;
  }

  /* Requisito 6: carrusel horizontal sticky bajo el header.
     Solo en mobile la barra lleva sombra, para separarse del contenido que pasa
     por debajo al scrollear. El valor no sale de un nodo de Figma (no hay frame
     mobile): se usa la misma sombra que las tarjetas del diseño. */
  .faqi-cats {
    padding: 14px 24px;
    box-shadow: 0 2px 8px 0 rgba(26, 38, 77, 0.08);
  }
}

/* --------------------------------------------------------------------------
   Espacio al final del documento.
   Sin esto las dos últimas categorías no pueden subir al tope del viewport al
   usar las pills: con los acordeones colapsados el documento es más corto que
   lo necesario, el navegador scrollea hasta el final y la sección queda a mitad
   de pantalla. Dando a la última el alto de un viewport (menos header y barra
   de categorías) alcanza para las dos, porque debajo de la penúltima quedan la
   última completa más el footer.
   No sale del Figma: ahí el documento mide 6191px porque están todas las
   respuestas abiertas y el problema no se manifiesta.
   -------------------------------------------------------------------------- */
.faqi-group--last {
  /* border-box para que el min-height incluya el padding del grupo. */
  box-sizing: border-box;
  /* Valor de respaldo por si el JS no corre. El JS lo ajusta descontando
     también el footer: sin eso sobran ~160px de scroll y la última tarjeta
     termina pasando por detrás de la barra sticky de categorías, dejando la
     pantalla en blanco. */
  min-height: calc(100vh - 117px);
  min-height: calc(100dvh - 117px);
}