{
  "name": "faq",
  "title": {
    "es": "Preguntas frecuentes",
    "en": "FAQ"
  },
  "summary": {
    "es": "Preguntas a dos columnas sobre el acordeón nativo.",
    "en": "Two-column questions on the native accordion."
  },
  "category": "sections",
  "status": "stable",
  "nivel": "componentes",
  "updated": "2026-09-30",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/faq/",
  "requires": [
    "accordion"
  ],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/faq/faq.html",
      "content": "<section class=\"s-faq\" aria-labelledby=\"faq-title\">\n  <div class=\"s-faq__inner\">\n    <div class=\"s-faq__grid\">\n      <div class=\"s-faq__intro\">\n        <h2 class=\"s-faq__title\" id=\"faq-title\">Preguntas frecuentes</h2>\n        <p class=\"s-faq__lead\">Lo que más nos preguntan.</p>\n        <p class=\"s-faq__contact\">¿No encuentras tu respuesta? Escríbele a <a class=\"s-faq__link\" href=\"#contacto\">nuestro equipo</a>.</p>\n      </div>\n      <div class=\"s-faq__list\">\n        <div class=\"c-accordion\">\n          <details class=\"c-accordion__item\" name=\"s-faq\"><summary class=\"c-accordion__trigger\">¿Cuánto tarda el envío?<svg class=\"c-accordion__indicator\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></summary><div class=\"c-accordion__panel\"><div class=\"c-accordion__content\">Entre 3 y 5 días hábiles según tu ciudad. El envío express llega en 24 horas.</div></div></details>\n          <details class=\"c-accordion__item\" name=\"s-faq\"><summary class=\"c-accordion__trigger\">¿Qué medios de pago aceptan?<svg class=\"c-accordion__indicator\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></summary><div class=\"c-accordion__panel\"><div class=\"c-accordion__content\">Tarjetas de crédito y débito, transferencia y Yape. Para empresas, también factura.</div></div></details>\n          <details class=\"c-accordion__item\" name=\"s-faq\"><summary class=\"c-accordion__trigger\">¿Puedo cambiar o cancelar mi pedido?<svg class=\"c-accordion__indicator\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></summary><div class=\"c-accordion__panel\"><div class=\"c-accordion__content\">Sí, dentro de la primera hora. Después, escríbenos y lo resolvemos.</div></div></details>\n          <details class=\"c-accordion__item\" name=\"s-faq\"><summary class=\"c-accordion__trigger\">¿Hacen envíos internacionales?<svg class=\"c-accordion__indicator\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></summary><div class=\"c-accordion__panel\"><div class=\"c-accordion__content\">Enviamos a más de 50 países. Tarda entre 7 y 14 días hábiles.</div></div></details>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/faq/faq.css",
      "content": "/* faq · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).\n   Generado por tools/build_css.py desde faq.tw.json. No editar a mano. Necesita tokens.css. */\n.s-faq__inner{margin-inline:auto}\n.s-faq__lead{margin-top:calc(var(--spacing)*4)}\n.s-faq__contact{margin-top:calc(var(--spacing)*6)}\n.s-faq__grid{display:grid}\n.s-faq__inner{max-width:var(--container-5xl)}\n.s-faq__grid{gap:calc(var(--spacing)*8)}\n.s-faq__inner{padding-inline:calc(var(--spacing)*6)}\n.s-faq{padding-block:calc(var(--spacing)*16)}\n.s-faq__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}\n.s-faq__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}\n.s-faq__link{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}\n.s-faq__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}\n.s-faq__lead{text-wrap:balance}\n.s-faq__title{color:var(--color-foreground)}\n.s-faq__lead{color:var(--color-muted-foreground)}\n.s-faq__contact{color:var(--color-muted-foreground)}\n.s-faq__link{color:var(--color-primary)}\n@media (hover:hover){\n.s-faq__link:hover{text-decoration-line:underline}\n}\n@media (min-width:48rem){\n.s-faq__intro{grid-column:span 2/span 2}\n.s-faq__list{grid-column:span 3/span 3}\n.s-faq__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--spacing)*12)}\n.s-faq{padding-block:calc(var(--spacing)*24)}\n}\n/* propio */\n.s-faq .c-accordion{max-width:none}\n.s-faq .c-accordion__trigger{font-size:1rem}\n.s-faq .c-accordion__content{font-size:1rem}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/faq.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "landing",
  "densidad": "media",
  "tono": "editorial",
  "states": [
    "rest"
  ],
  "use": {
    "es": [
      "Para resolver dudas antes de comprar o escribir."
    ],
    "en": [
      "To answer questions before buying or writing in."
    ]
  },
  "avoid": {
    "es": [
      "Para contenido que todos deben leer."
    ],
    "en": [
      "For content everyone must read."
    ]
  },
  "a11y": {
    "roles": [
      "region"
    ],
    "keyboard": [],
    "notes": {
      "es": [
        "Usa <details>: funciona sin JavaScript y abre una a la vez."
      ],
      "en": [
        "Uses <details>: works without JavaScript and opens one at a time."
      ]
    },
    "test": {
      "es": [
        "Abre una pregunta con Enter: la anterior se cierra."
      ],
      "en": [
        "Open a question with Enter: the previous one closes."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "Tailark mist (MIT) · faqs/two",
      "url": "https://github.com/tailark/blocks"
    }
  ],
  "changes": [
    {
      "date": "2026-09-30",
      "es": "Diseño de Tailark mist en HTML y CSS sin dependencias",
      "en": "Tailark mist design in dependency-free HTML and CSS"
    }
  ],
  "partes": [],
  "pieza": "https://componentes-lovat.vercel.app/r/faq.html"
}