/* ===========================================================================
   PREGUNTAS FRECUENTES
   ===========================================================================
   Estas reglas vivian en un <style> dentro de
   app/modules/client/views/faq/index.php: 12086 bytes incrustados
   en cada carga de esa pagina, sin cachear y ganando los empates a todas las
   hojas por ir en el cuerpo del documento.

   Movidas TAL CUAL, sin tocar una linea, y cargadas desde la propia vista
   con `?v=filemtime`, que es el mismo patron que ya usa la documentacion de
   la API. Solo se descarga en esta pagina, no en todo el panel.
   =========================================================================== */

@keyframes clixyFaqIntro {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes clixyFaqCardIntro {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .clixy-faq-public {
    color: var(--ck-ink);
    /* Mismo lienzo que la landing y el registro. Era el rosa polvoriento
       heredado, con lo que la FAQ desentonaba con la portada. */
    background:
      radial-gradient(ellipse 54rem 30rem at 90% -8%, rgba(var(--ck-action-rgb), .13), transparent 60%),
      radial-gradient(ellipse 48rem 30rem at 4% 6%, rgba(var(--ck-accent-2-rgb), .11), transparent 62%),
      radial-gradient(ellipse 40rem 26rem at 10% 88%, rgba(var(--ck-action-rgb), .05), transparent 62%),
      radial-gradient(ellipse 52rem 32rem at 96% 80%, rgba(var(--ck-accent-2-rgb), .09), transparent 64%),
      linear-gradient(172deg, var(--ck-surface) 0%, var(--ck-ground) 46%, var(--ck-ground) 100%);
    font-family: "Karla", sans-serif;
  }

  .clixy-faq-page {
    position: relative;
    padding: 42px 0 72px;
  }

  .clixy-faq-hero {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
    animation: clixyFaqIntro .68s cubic-bezier(.22, 1, .36, 1) both;
  }

  .clixy-faq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 8px 14px;
    color: var(--ck-ink-body);
    border: 1px solid rgba(var(--ck-accent-rgb), 0.18);
    border-radius: 999px;
    background: rgba(var(--ck-surface-rgb), 0.82);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .clixy-faq-hero h1 {
    margin: 0 0 11px;
    color: var(--ck-ink);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -.045em;
    font-family: "Sora", sans-serif;
  }

  .clixy-faq-hero p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--ck-ink-body);
    font-size: 17px;
    line-height: 1.55;
  }

  .clixy-faq-list {
    display: grid;
    max-width: 920px;
    margin: 0 auto;
    gap: 12px;
  }

  .clixy-faq-item {
    overflow: hidden;
    border: 1px solid rgba(var(--ck-accent-rgb), 0.2);
    border-radius: 18px;
    background: rgba(var(--ck-surface-rgb), 0.91);
    box-shadow: 0 12px 28px rgba(var(--ck-ink-rgb), 0.08);
    animation: clixyFaqCardIntro .56s cubic-bezier(.22, 1, .36, 1) both;
  }

  .clixy-faq-item:nth-child(1) { animation-delay: .10s; }
  .clixy-faq-item:nth-child(2) { animation-delay: .16s; }
  .clixy-faq-item:nth-child(3) { animation-delay: .22s; }
  .clixy-faq-item:nth-child(4) { animation-delay: .28s; }
  .clixy-faq-item:nth-child(5) { animation-delay: .34s; }
  .clixy-faq-item:nth-child(6) { animation-delay: .40s; }
  .clixy-faq-item:nth-child(7) { animation-delay: .46s; }
  .clixy-faq-item:nth-child(8) { animation-delay: .52s; }

  .clixy-faq-item[open] {
    border-color: rgba(var(--ck-accent-rgb), 0.32);
    background: linear-gradient(145deg, var(--ck-surface), var(--ck-surface));
    box-shadow: 0 16px 34px rgba(var(--ck-ink-rgb), 0.12);
  }

  .clixy-faq-item summary {
    display: flex;
    min-height: 66px;
    padding: 15px 18px;
    align-items: center;
    gap: 13px;
    color: var(--ck-ink);
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    font-weight: 800;
    font-family: "Sora", sans-serif;
  }

  .clixy-faq-item summary::-webkit-details-marker {
    display: none;
  }

  .clixy-faq-number {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    color: var(--ck-link);
    border-radius: 11px;
    background: var(--ck-surface);
    font-size: 12px;
    font-weight: 800;
  }

  .clixy-faq-question {
    flex: 1;
  }

  .clixy-faq-chevron {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: rgba(var(--ck-accent-rgb), 0.08);
  }

  .clixy-faq-chevron::before,
  .clixy-faq-chevron::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 8px;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--ck-accent);
    transition: transform .2s ease;
  }

  .clixy-faq-chevron::after {
    transform: rotate(90deg);
  }

  .clixy-faq-item[open] .clixy-faq-chevron::after {
    transform: rotate(0deg);
  }

  .clixy-faq-answer {
    padding: 0 62px 18px 67px;
    color: var(--ck-ink-body);
    font-size: 15px;
    line-height: 1.65;
  }

  .clixy-faq-answer p:last-child {
    margin-bottom: 0;
  }

  .clixy-faq-help {
    display: flex;
    max-width: 920px;
    margin: 24px auto 0;
    padding: 22px 24px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(var(--ck-accent-rgb), 0.18);
    border-radius: 20px;
    background: linear-gradient(120deg, rgba(var(--ck-surface-rgb), 0.94), rgba(var(--ck-surface-rgb), 0.92));
    box-shadow: 0 14px 34px rgba(var(--ck-ink-rgb), 0.09);
    animation: clixyFaqCardIntro .58s .58s cubic-bezier(.22, 1, .36, 1) both;
  }

  .clixy-faq-help h2 {
    margin: 0 0 4px;
    color: var(--ck-ink);
    font-size: 20px;
    font-weight: 800;
  }

  .clixy-faq-help p {
    margin: 0;
    color: var(--ck-ink-body);
  }

  .clixy-faq-help a {
    display: inline-flex;
    min-height: 44px;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    color: var(--ck-on-dark) !important;
    border-radius: 13px;
    background: linear-gradient(105deg, var(--ck-accent-soft), var(--ck-accent));
    box-shadow: 0 10px 22px rgba(var(--ck-action-rgb), 0.2);
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    .clixy-faq-hero,
    .clixy-faq-item,
    .clixy-faq-help {
      animation: none !important;
    }
  }

  @media (max-width: 767.98px) {
    .clixy-faq-public #headerNav .site-logo {
      width: 112px;
      max-height: 44px;
      transform: scale(1.30);
    }

    .clixy-faq-page {
      padding: 27px 0 52px;
    }

    .clixy-faq-hero {
      margin-bottom: 22px;
    }

    .clixy-faq-hero p {
      font-size: 15px;
    }

    .clixy-faq-item summary {
      min-height: 60px;
      padding: 13px 14px;
      gap: 10px;
      font-size: 15px;
    }

    .clixy-faq-answer {
      padding: 0 15px 16px 60px;
      font-size: 14px;
    }

    .clixy-faq-help {
      padding: 19px;
      align-items: stretch;
      flex-direction: column;
      text-align: center;
    }
  }

  /* Identidad ciruela vibrante compartida con Inicio. */
  .clixy-faq-public {
    /* Estas tres variables eran una cuarta definicion de "el ciruela de
       Clixy", distinta de las del panel y de las de la landing. */
    --faq-plum: var(--ck-ink);
    --faq-plum-soft: var(--ck-action);
    --faq-plum-muted: var(--ck-ink-body);
    /* Este bloque llegaba DESPUES del anterior y por eso mandaba: la
       primera regla ya se habia migrado y la pagina seguia rosa. */
    background:
      radial-gradient(ellipse 54rem 30rem at 90% -8%, rgba(var(--ck-action-rgb), .13), transparent 60%),
      radial-gradient(ellipse 48rem 30rem at 4% 6%, rgba(var(--ck-accent-2-rgb), .11), transparent 62%),
      radial-gradient(ellipse 40rem 26rem at 10% 88%, rgba(var(--ck-action-rgb), .05), transparent 62%),
      radial-gradient(ellipse 52rem 32rem at 96% 80%, rgba(var(--ck-accent-2-rgb), .09), transparent 64%),
      linear-gradient(172deg, var(--ck-surface) 0%, var(--ck-ground) 46%, var(--ck-ground) 100%);
  }

  .clixy-faq-kicker {
    color: var(--ck-on-dark);
    border-color: rgba(var(--ck-surface-rgb), 0.13);
    background: var(--ck-grad-action);
    box-shadow: 0 10px 23px rgba(var(--ck-ink-rgb), 0.17), inset 0 1px 0 rgba(var(--ck-surface-rgb), 0.14);
  }

  .clixy-faq-kicker i {
    color: var(--ck-accent-soft);
  }

  .clixy-faq-hero h1 {
    color: var(--faq-plum);
  }

  .clixy-faq-hero p,
  .clixy-faq-answer,
  .clixy-faq-help p {
    color: var(--faq-plum-muted);
  }

  .clixy-faq-item {
    border-color: rgba(var(--ck-action-rgb), 0.16);
    background: rgba(var(--ck-surface-rgb), 0.92);
    box-shadow: 0 12px 29px rgba(var(--ck-ink-rgb), 0.09), inset 0 1px 0 rgba(var(--ck-surface-rgb), 0.92);
  }

  .clixy-faq-item[open] {
    border-color: rgba(var(--ck-accent-rgb), 0.38);
    background:
      radial-gradient(circle at 97% 0%, rgba(var(--ck-accent-rgb), 0.08), transparent 13rem),
      linear-gradient(145deg, var(--ck-surface), var(--ck-surface));
    box-shadow: 0 17px 37px rgba(var(--ck-ink-rgb), 0.14), inset 4px 0 0 rgba(var(--ck-action-rgb), .14);
  }

  .clixy-faq-item summary,
  .clixy-faq-help h2 {
    color: var(--faq-plum);
  }

  .clixy-faq-number {
    /* El numero de la pregunta abierta iba crema sobre malva->rosa suave:
       2,38:1. El degradado de accion de la casa mantiene el "encendido"
       y aguanta 4,8. */
    color: var(--ck-on-dark);
    background: var(--ck-grad-action);
    box-shadow: 0 7px 15px rgba(var(--ck-ink-rgb), 0.15);
  }

  .clixy-faq-item:not([open]) .clixy-faq-number {
    /* Cerrado: el rosa fuerte, que no baja de 4,5 sobre su burbuja. */
    color: var(--ck-link-strong, var(--ck-link));
    background: rgba(var(--ck-accent-rgb), 0.1);
    box-shadow: none;
  }

  .clixy-faq-chevron {
    background: rgba(var(--ck-accent-rgb), 0.1);
  }

  .clixy-faq-chevron::before,
  .clixy-faq-chevron::after {
    background: var(--ck-accent-soft);
  }

  .clixy-faq-help {
    border-color: rgba(var(--ck-action-rgb), 0.18);
    background:
      radial-gradient(circle at 96% 0%, rgba(var(--ck-accent-rgb), 0.1), transparent 14rem),
      linear-gradient(120deg, rgba(var(--ck-surface-rgb), 0.96), rgba(var(--ck-surface-rgb), 0.94));
    box-shadow: 0 15px 35px rgba(var(--ck-ink-rgb), 0.13), inset 0 1px 0 rgba(var(--ck-surface-rgb), 0.94);
  }

  .clixy-faq-help a,
  .clixy-faq-help a:hover,
  .clixy-faq-help a:focus {
    /* La parada accent-soft dejaba el texto crema a 2,38: mismo mal y misma
       cura que el boton de copiar del API. */
    background: var(--ck-grad-action);
    box-shadow: 0 12px 25px rgba(var(--ck-ink-rgb), 0.22);
  }

  /* FAQ microinteractions. */
  .clixy-faq-item,
  .clixy-faq-item summary,
  .clixy-faq-number,
  .clixy-faq-chevron,
  .clixy-faq-help,
  .clixy-faq-help a {
    transition: transform .22s cubic-bezier(.2, .75, .3, 1), box-shadow .22s ease,
      border-color .22s ease, filter .22s ease, background-position .42s ease;
  }

  .clixy-faq-help a {
    background-size: 190% 100%;
    background-position: 0 50%;
  }

  @media (hover: hover) and (pointer: fine) {
    .clixy-faq-item:hover {
      transform: translateY(-2px);
      border-color: rgba(var(--ck-accent-rgb), 0.3);
      filter: saturate(1.05);
      box-shadow: 0 17px 38px rgba(var(--ck-ink-rgb), 0.14), inset 0 1px 0 rgba(var(--ck-surface-rgb), 0.94);
    }

    .clixy-faq-item summary:hover .clixy-faq-number {
      transform: scale(1.08) rotate(-4deg);
      filter: saturate(1.12) brightness(1.06);
    }

    .clixy-faq-item summary:hover .clixy-faq-chevron {
      transform: scale(1.08);
      box-shadow: 0 7px 16px rgba(var(--ck-ink-rgb), 0.13);
    }

    .clixy-faq-help:hover {
      transform: translateY(-3px);
      filter: saturate(1.06);
      box-shadow: 0 21px 44px rgba(var(--ck-ink-rgb), 0.17), inset 0 1px 0 rgba(var(--ck-surface-rgb), 0.95);
    }

    .clixy-faq-help a:hover {
      background-position: 100% 50%;
      transform: translateY(-2px);
      filter: saturate(1.13) brightness(1.08);
      box-shadow: 0 17px 34px rgba(var(--ck-ink-rgb), 0.27);
    }
  }

  .clixy-faq-item summary:active,
  .clixy-faq-help a:active {
    transform: scale(.985);
  }

  @media (prefers-reduced-motion: reduce) {
    .clixy-faq-item,
    .clixy-faq-item summary,
    .clixy-faq-number,
    .clixy-faq-chevron,
    .clixy-faq-help,
    .clixy-faq-help a {
      animation: none !important;
      transition: none !important;
      transform: none !important;
    }
  }