Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luigitemu/pikante-landing/llms.txt

Use this file to discover all available pages before exploring further.

Faq.astro renders the Preguntas Frecuentes section — an accordion list of five questions anchored at id="faq". A small inline <script> enforces single-open behavior: clicking a question closes any currently open item before expanding the selected one.

​
Questions & answers

All five FAQ items as defined in the component source:
PIKANTÉ está diseñada para que la disfrutes con tu cerveza favorita. Si la cerveza está fría, la michelada está lista.
La versión Suave no pica mucho (1/5); la versión Picante pica rico (3/5). Todas están calibradas para que las disfrutes, no para que sufras.
No. PIKANTÉ es el mix — tú le pones la cerveza. La botella sola es 0% alcohol. Así que también funciona para que disfrutes tus chamoyadas o cualquier cóctel de tu preferencia.
Refrigerada hasta 4 meses. Abierta 30 días bajo refrigeración.
A los 18 departamentos de Honduras. Entregas a domicilio en 24-48 horas posteriores a tu pedido.

​
JavaScript accordion behavior

The component ships an inline <script> that implements single-open accordion logic. When a user clicks a .faq-q button:
  1. The script finds the parent .faq-item.
  2. It records whether that item is currently open (data-open="true").
  3. It removes data-open from every .faq-item and resets all aria-expanded attributes to "false".
  4. If the clicked item was not already open, it sets data-open="true" and aria-expanded="true" on it — opening it.
  5. If the clicked item was already open, step 3 already closed it, so nothing more is done (toggle-close behavior).
document.querySelectorAll('.faq-q').forEach(btn => {
  btn.addEventListener('click', () => {
    const item = btn.closest('.faq-item');
    const isOpen = item?.getAttribute('data-open') === 'true';

    document.querySelectorAll('.faq-item').forEach(i => {
      i.removeAttribute('data-open');
      i.querySelector('.faq-q')?.setAttribute('aria-expanded', 'false');
    });

    if (!isOpen) {
      item?.setAttribute('data-open', 'true');
      btn.setAttribute('aria-expanded', 'true');
    }
  });
});
The first .faq-item in the markup ships with data-open="true" pre-set so the first question is open on page load without any JavaScript.

​
CSS animation

Answer panels use a max-height transition rather than height: auto (which cannot be transitioned): 
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.2, .7, .2, 1);
}

.faq-item[data-open="true"] .faq-a {
  max-height: 240px;
}
The + icon on each button rotates its vertical bar via a CSS transform. By default the ::after bar is rotated 90° (forming the cross / +). When the item opens, it rotates back to 0° (collapsing to a −): 
/* default (closed): ::after is perpendicular → forms + shape */
.faq-q .plus::after {
  transform: rotate(90deg);
  transition: transform var(--t);
}

/* open: ::after returns to 0° → forms − shape */
.faq-item[data-open="true"] .faq-q .plus::after {
  transform: rotate(0deg);
}

​
Markup structure

Each FAQ entry follows this pattern: 
<div class="faq-item">
  <button class="faq-q" aria-expanded="false">
    <span>Question text here</span>
    <span class="plus"></span>
  </button>
  <div class="faq-a">
    <div class="faq-a-inner">Answer text here.</div>
  </div>
</div>
The first item differs only by having data-open="true" on .faq-item and aria-expanded="true" on the button.

​
How to add a new FAQ item

1

Copy an existing item

Duplicate any .faq-item block inside .faq-list in Faq.astro.
2

Update the question

Replace the text inside the first <span> of .faq-q with the new question.
3

Update the answer

Replace the content inside .faq-a-inner with the new answer. Plain text or simple inline HTML (<b>, <em>, &mdash;) work fine.
4

Check max-height

If your answer is longer than roughly four lines, increase the max-height value in .faq-item[data-open="true"] .faq-a in global.css to prevent the text from being clipped.

​
Full component source

<section class="faq" id="faq">
  <div class="container">
    <div class="section-head reveal">
      <div>
        <span class="eyebrow">05 / Dudas frecuentes</span>
        <h2>Preguntas<br/><em>Frecuentes.</em></h2>
      </div>
      <p>Lo que nos pregunta antes, durante y después de la primera botella.</p>
    </div>
    <div class="faq-list reveal">

      <div class="faq-item" data-open="true">
        <button class="faq-q" aria-expanded="true">
          <span>¿Con qué cerveza se sirve?</span>
          <span class="plus"></span>
        </button>
        <div class="faq-a">
          <div class="faq-a-inner">
            PIKANTÉ está diseñada para que la disfrutes con tu cerveza favorita.
            Si la cerveza está fría, la michelada está lista.
          </div>
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-q">
          <span>¿Qué tan picante es?</span>
          <span class="plus"></span>
        </button>
        <div class="faq-a">
          <div class="faq-a-inner">
            La versión Suave no pica mucho (1/5); la versión Picante pica rico (3/5).
            Todas están calibradas para que las disfrutes, no para que sufras.
          </div>
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-q">
          <span>¿Tiene alcohol?</span>
          <span class="plus"></span>
        </button>
        <div class="faq-a">
          <div class="faq-a-inner">
            No. PIKANTÉ es el mix &mdash; tú le pones la cerveza.
            La botella sola es 0% alcohol. Así que también funciona para
            que disfrutes tus chamoyadas o cualquier cóctel de tu preferencia.
          </div>
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-q">
          <span>¿Cuánto dura?</span>
          <span class="plus"></span>
        </button>
        <div class="faq-a">
          <div class="faq-a-inner">
            Refrigerada hasta 4 meses. Abierta 30 días bajo refrigeración.
          </div>
        </div>
      </div>

      <div class="faq-item">
        <button class="faq-q">
          <span>¿Hacen envíos?</span>
          <span class="plus"></span>
        </button>
        <div class="faq-a">
          <div class="faq-a-inner">
            A los 18 departamentos de Honduras.
            Entregas a domicilio en 24-48 horas posteriores a tu pedido.
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<script>
  document.querySelectorAll('.faq-q').forEach(btn => {
    btn.addEventListener('click', () => {
      const item = btn.closest('.faq-item');
      const isOpen = item?.getAttribute('data-open') === 'true';
      document.querySelectorAll('.faq-item').forEach(i => {
        i.removeAttribute('data-open');
        i.querySelector('.faq-q')?.setAttribute('aria-expanded', 'false');
      });
      if (!isOpen) {
        item?.setAttribute('data-open', 'true');
        btn.setAttribute('aria-expanded', 'true');
      }
    });
  });
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us