Preguntas frecuentesFAQ

Preguntas a dos columnas sobre el acordeón nativo.Two-column questions on the native accordion.

DiseñoDesign: Tailark mist (MIT) · faqs/twoMITlanding · densidaddensity media · editorialMarkdown JSON

CódigoCode

<section class="s-faq" aria-labelledby="faq-title">
  <div class="s-faq__inner">
    <div class="s-faq__grid">
      <div class="s-faq__intro">
        <h2 class="s-faq__title" id="faq-title">Preguntas frecuentes</h2>
        <p class="s-faq__lead">Lo que más nos preguntan.</p>
        <p class="s-faq__contact">¿No encuentras tu respuesta? Escríbele a <a class="s-faq__link" href="#contacto">nuestro equipo</a>.</p>
      </div>
      <div class="s-faq__list">
        <div class="c-accordion">
          <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>
          <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>
          <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>
          <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>
        </div>
      </div>
    </div>
  </div>
</section>

/* faq · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde faq.tw.json. No editar a mano. Necesita tokens.css. */
.s-faq__inner{margin-inline:auto}
.s-faq__lead{margin-top:calc(var(--spacing)*4)}
.s-faq__contact{margin-top:calc(var(--spacing)*6)}
.s-faq__grid{display:grid}
.s-faq__inner{max-width:var(--container-5xl)}
.s-faq__grid{gap:calc(var(--spacing)*8)}
.s-faq__inner{padding-inline:calc(var(--spacing)*6)}
.s-faq{padding-block:calc(var(--spacing)*16)}
.s-faq__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
.s-faq__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}
.s-faq__link{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.s-faq__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.s-faq__lead{text-wrap:balance}
.s-faq__title{color:var(--color-foreground)}
.s-faq__lead{color:var(--color-muted-foreground)}
.s-faq__contact{color:var(--color-muted-foreground)}
.s-faq__link{color:var(--color-primary)}
@media (hover:hover){
.s-faq__link:hover{text-decoration-line:underline}
}
@media (min-width:48rem){
.s-faq__intro{grid-column:span 2/span 2}
.s-faq__list{grid-column:span 3/span 3}
.s-faq__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--spacing)*12)}
.s-faq{padding-block:calc(var(--spacing)*24)}
}
/* propio */
.s-faq .c-accordion{max-width:none}
.s-faq .c-accordion__trigger{font-size:1rem}
.s-faq .c-accordion__content{font-size:1rem}

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preguntas frecuentes · Componentes</title>
<!-- Preguntas frecuentes · Componentes (MIRÓ Labs) · MIT · https://componentes-lovat.vercel.app/c/faq/
     Diseño: Tailark mist (MIT) · faqs/two -->
<script>(function(){var d=document.documentElement,p=new URLSearchParams(location.search),q=p.get('theme');d.classList.toggle('dark',q?q==='dark':matchMedia('(prefers-color-scheme: dark)').matches);if(self!==top)d.classList.add('embed');addEventListener('message',function(e){if(e.data&&e.data.type==='componentes:theme')d.classList.toggle('dark',!!e.data.dark)});})();</script>
<style>
/* Componentes (MIRÓ Labs) · tokens. Tema de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py. Tema oscuro: clase .dark en <html> (los componentes usan esa clase).
   Letra: la del sistema; cambia --font-sans para usar otra. */
:root{--animate-spin:spin 1s linear infinite;--aspect-video:16/9;--color-amber-400:lab(80.1641% 16.6016 99.2089);--color-amber-500:lab(72.7183% 31.8672 97.9407);--color-amber-700:lab(47.2709% 42.9082 69.2966);--color-background:var(--background);--color-black:#000;--color-blue-400:lab(65.0361% -1.42065 -56.9802);--color-blue-500:lab(54.1736% 13.3369 -74.6839);--color-blue-700:lab(36.9089% 35.0961 -85.6872);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-cyan-900:lab(30.372% -13.1853 -18.7887);--color-emerald-400:lab(75.0771% -60.7313 19.4147);--color-emerald-500:lab(66.9756% -58.27 19.5419);--color-emerald-700:lab(44.4871% -41.0396 11.0361);--color-foreground:var(--foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-neutral-100:lab(96.52% -.0000298023 .0000119209);--color-neutral-400:lab(66.128% -.0000298023 .0000119209);--color-neutral-50:lab(98.26% 0 0);--color-neutral-500:lab(48.496% 0 0);--color-neutral-800:lab(15.204% 0 -.00000596046);--color-neutral-950:lab(2.75381% 0 0);--color-orange-600:lab(57.1026% 64.2584 89.8886);--color-primary:var(--primary);--color-purple-500:lab(52.0183% 66.11 -78.2316);--color-red-400:lab(63.7053% 60.745 31.3109);--color-red-500:lab(55.4814% 75.0732 48.8528);--color-red-700:lab(40.4273% 67.2623 53.7441);--color-rose-500:lab(56.101% 79.4328 31.4532);--color-teal-600:lab(55.0223% -41.0774 -3.90277);--color-white:#fff;--container-2xl:42rem;--container-3xl:48rem;--container-5xl:64rem;--container-lg:32rem;--container-md:28rem;--container-sm:24rem;--container-xl:36rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--font-weight-bold:700;--font-weight-medium:500;--font-weight-normal:400;--font-weight-semibold:600;--radius-2xl:1rem;--radius-lg:var(--radius);--radius-md:calc(var(--radius) - 2px);--radius-xl:calc(var(--radius) + 4px);--spacing:.25rem;--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--tracking-tight:-.025em;--tracking-widest:.1em;--tw-shadow-color:#000}
:root{--font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root{--radius:.625rem;--background:var(--color-white);--foreground:var(--color-neutral-800);--card:var(--color-white);--card-foreground:var(--color-neutral-800);--popover:var(--color-white);--popover-foreground:var(--color-neutral-800);--primary:var(--color-neutral-800);--primary-foreground:var(--color-neutral-50);--secondary:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--secondary:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--secondary-foreground:var(--color-neutral-800);--muted:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--muted:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--muted-foreground:#686868}
@supports (color:color-mix(in lab, red, red)){:root{--muted-foreground:color-mix(in srgb,var(--color-neutral-500)90%,var(--color-black))}}
:root{--accent:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--accent:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--accent-foreground:var(--color-neutral-800);--destructive:var(--color-red-500);--destructive-foreground:var(--color-red-700);--info:var(--color-blue-500);--info-foreground:var(--color-blue-700);--success:var(--color-emerald-500);--success-foreground:var(--color-emerald-700);--warning:var(--color-amber-500);--warning-foreground:var(--color-amber-700);--border:#00000014}
@supports (color:color-mix(in lab, red, red)){:root{--border:color-mix(in oklab,var(--color-black)8%,transparent)}}
:root{--input:#0000001a}
@supports (color:color-mix(in lab, red, red)){:root{--input:color-mix(in oklab,var(--color-black)10%,transparent)}}
:root{--ring:var(--color-neutral-400);--chart-1:var(--color-orange-600);--chart-2:var(--color-teal-600);--chart-3:var(--color-cyan-900);--chart-4:var(--color-amber-400);--chart-5:var(--color-amber-500);--sidebar:var(--color-neutral-50);--sidebar-foreground:#262626}
@supports (color:lab(0% 0 0)){:root{--sidebar-foreground:lab(15.204% 0 -.00000596046)}}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-foreground:color-mix(in srgb,var(--color-neutral-800)64%,var(--sidebar))}}
:root{--sidebar-primary:var(--color-neutral-800);--sidebar-primary-foreground:var(--color-neutral-50);--sidebar-accent:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-accent:color-mix(in oklab,var(--color-black)4%,transparent)}}
:root{--sidebar-accent-foreground:var(--color-neutral-800);--sidebar-border:#0000000f}
@supports (color:color-mix(in lab, red, red)){:root{--sidebar-border:color-mix(in oklab,var(--color-black)6%,transparent)}}
:root{--sidebar-ring:var(--color-neutral-400);--code:var(--color-white);--code-foreground:var(--foreground);--code-highlight:#0000000a}
@supports (color:color-mix(in lab, red, red)){:root{--code-highlight:color-mix(in oklab,var(--color-black)4%,transparent)}}
.dark{--background:#141414}
@supports (color:color-mix(in lab, red, red)){.dark{--background:color-mix(in srgb,var(--color-neutral-950)96%,var(--color-white))}}
.dark{--foreground:var(--color-neutral-100);--card:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--card:color-mix(in srgb,var(--background)98%,var(--color-white))}}
.dark{--card-foreground:var(--color-neutral-100);--popover:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--popover:color-mix(in srgb,var(--background)96%,var(--color-white))}}
.dark{--popover-foreground:var(--color-neutral-100);--primary:var(--color-neutral-100);--primary-foreground:var(--color-neutral-800);--secondary:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--secondary:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--secondary-foreground:var(--color-neutral-100);--muted:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--muted:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--muted-foreground:#818181}
@supports (color:color-mix(in lab, red, red)){.dark{--muted-foreground:color-mix(in srgb,var(--color-neutral-500)90%,var(--color-white))}}
.dark{--accent:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--accent:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--accent-foreground:var(--color-neutral-100);--destructive:#fb414a}
@supports (color:color-mix(in lab, red, red)){.dark{--destructive:color-mix(in srgb,var(--color-red-500)90%,var(--color-white))}}
.dark{--destructive-foreground:var(--color-red-400);--info:var(--color-blue-500);--info-foreground:var(--color-blue-400);--success:var(--color-emerald-500);--success-foreground:var(--color-emerald-400);--warning:var(--color-amber-500);--warning-foreground:var(--color-amber-400);--border:#ffffff0f}
@supports (color:color-mix(in lab, red, red)){.dark{--border:color-mix(in oklab,var(--color-white)6%,transparent)}}
.dark{--input:#ffffff14}
@supports (color:color-mix(in lab, red, red)){.dark{--input:color-mix(in oklab,var(--color-white)8%,transparent)}}
.dark{--ring:var(--color-neutral-500);--chart-1:var(--color-blue-700);--chart-2:var(--color-emerald-500);--chart-3:var(--color-amber-500);--chart-4:var(--color-purple-500);--chart-5:var(--color-rose-500);--sidebar:#111}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar:color-mix(in srgb,var(--color-neutral-950)97%,var(--color-white))}}
.dark{--sidebar-foreground:#f5f5f5}
@supports (color:lab(0% 0 0)){.dark{--sidebar-foreground:lab(96.52% -.0000298023 .0000119209)}}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-foreground:color-mix(in srgb,var(--color-neutral-100)64%,var(--sidebar))}}
.dark{--sidebar-primary:var(--color-neutral-100);--sidebar-primary-foreground:var(--color-neutral-800);--sidebar-accent:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-accent:color-mix(in oklab,var(--color-white)4%,transparent)}}
.dark{--sidebar-accent-foreground:var(--color-neutral-100);--sidebar-border:#ffffff0d}
@supports (color:color-mix(in lab, red, red)){.dark{--sidebar-border:color-mix(in oklab,var(--color-white)5%,transparent)}}
.dark{--sidebar-ring:var(--color-neutral-400);--code:var(--background)}
@supports (color:color-mix(in lab, red, red)){.dark{--code:color-mix(in srgb,var(--background)98%,var(--color-white))}}
.dark{--code-foreground:var(--foreground);--code-highlight:#ffffff0a}
@supports (color:color-mix(in lab, red, red)){.dark{--code-highlight:color-mix(in oklab,var(--color-white)4%,transparent)}}
:where([class*="c-"], [class*="c-"] *, [class*="c-"]::before, [class*="c-"]::after, [class*="c-"] *::before, [class*="c-"] *::after){box-sizing:border-box;border:0 solid;margin:0;padding:0}
:where([class*="c-"]) :where(button,input,select,textarea,optgroup){font:inherit;font-feature-settings:inherit;letter-spacing:inherit;color:inherit;background-color:transparent;border-radius:0}
:where([class*="c-"]) :where(button,[type=button],[type=reset],[type=submit]){appearance:button}
:where([class*="c-"]) :where(img,svg,video,canvas){display:block;vertical-align:middle}
:where([class*="c-"]) :where(a){color:inherit;text-decoration:inherit}
:where([class*="c-"]) :where(ol,ul,menu){list-style:none}
:where([class*="c-"]) :where(table){text-indent:0;border-color:inherit;border-collapse:collapse}
:where([class*="c-"]) :where([hidden]:not([hidden=until-found])){display:none!important}
:where([class*="c-"]){border-color:var(--border);outline-color:var(--ring)}
:where([class*="c-"], [class*="c-"] *, [class*="c-"]::before, [class*="c-"]::after, [class*="c-"] *::before, [class*="c-"] *::after){--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-mask-linear:linear-gradient(#fff,#fff);--tw-mask-radial:linear-gradient(#fff,#fff);--tw-mask-conic:linear-gradient(#fff,#fff);--tw-mask-left:linear-gradient(#fff,#fff);--tw-mask-right:linear-gradient(#fff,#fff);--tw-mask-bottom:linear-gradient(#fff,#fff);--tw-mask-top:linear-gradient(#fff,#fff);--tw-mask-top-from-position:0%;--tw-mask-top-to-position:100%;--tw-mask-top-from-color:black;--tw-mask-top-to-color:transparent;--tw-mask-right-from-position:0%;--tw-mask-right-to-position:100%;--tw-mask-right-from-color:black;--tw-mask-right-to-color:transparent;--tw-mask-bottom-from-position:0%;--tw-mask-bottom-to-position:100%;--tw-mask-bottom-from-color:black;--tw-mask-bottom-to-color:transparent;--tw-mask-left-from-position:0%;--tw-mask-left-to-position:100%;--tw-mask-left-from-color:black;--tw-mask-left-to-color:transparent;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-border-spacing-x:0;--tw-border-spacing-y:0}
@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
@property --tw-content{syntax:"*";inherits:false;initial-value:""}
@property --tw-duration{syntax:"*";inherits:false}
@property --tw-ease{syntax:"*";inherits:false}
@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-inset-shadow-color{syntax:"*";inherits:false}
@property --tw-leading{syntax:"*";inherits:false}
@property --tw-ring-color{syntax:"*";inherits:false}
@property --tw-ring-inset{syntax:"*";inherits:false}
@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}
@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}
@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}
@property --tw-shadow-color{syntax:"*";inherits:false}
@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}
@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}
@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){:where([class*="c-"], [class*="c-"] *){animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}

/* accordion · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde accordion.tw.json. No editar a mano. Necesita tokens.css. */
.c-accordion__indicator{pointer-events:none}
.c-accordion__trigger{display:flex}
.c-accordion__indicator{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}
.c-accordion{width:100%;max-width:var(--container-md)}
.c-accordion__trigger{flex:1}
.c-accordion__indicator{flex-shrink:0;--tw-translate-y:calc(var(--spacing)*.5);translate:var(--tw-translate-x)var(--tw-translate-y)}
.c-accordion__trigger{cursor:pointer;align-items:flex-start;justify-content:space-between;gap:calc(var(--spacing)*4)}
.c-accordion__panel{overflow:hidden}
.c-accordion__trigger{border-radius:calc(var(--radius) - 2px)}
.c-accordion__item{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}
.c-accordion__trigger{padding-block:calc(var(--spacing)*4)}
.c-accordion__content{padding-top:calc(var(--spacing)*0);padding-bottom:calc(var(--spacing)*4)}
.c-accordion__trigger{text-align:left;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-accordion__panel{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-accordion__trigger{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.c-accordion__panel{color:var(--muted-foreground)}
.c-accordion__indicator{opacity:.8}
.c-accordion__trigger{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.c-accordion__indicator{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s;--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}
.c-accordion__trigger{--tw-outline-style:none;outline-style:none}
.c-accordion__item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}
.c-accordion__trigger:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--ring)}
/* propio */
.c-accordion__trigger{list-style:none}
.c-accordion__trigger::-webkit-details-marker{display:none}
.c-accordion__item[open]>.c-accordion__trigger .c-accordion__indicator{rotate:180deg}
/* Altura animada donde el navegador lo permite (Chrome 131+); en los demás abre sin animar. */
@supports (interpolate-size: allow-keywords){
 .c-accordion{interpolate-size:allow-keywords}
 .c-accordion__item::details-content{height:0;overflow:hidden;transition:height .2s ease-in-out,content-visibility .2s allow-discrete}
 .c-accordion__item[open]::details-content{height:auto}
}

/* faq · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde faq.tw.json. No editar a mano. Necesita tokens.css. */
.s-faq__inner{margin-inline:auto}
.s-faq__lead{margin-top:calc(var(--spacing)*4)}
.s-faq__contact{margin-top:calc(var(--spacing)*6)}
.s-faq__grid{display:grid}
.s-faq__inner{max-width:var(--container-5xl)}
.s-faq__grid{gap:calc(var(--spacing)*8)}
.s-faq__inner{padding-inline:calc(var(--spacing)*6)}
.s-faq{padding-block:calc(var(--spacing)*16)}
.s-faq__title{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}
.s-faq__lead{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}
.s-faq__link{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.s-faq__title{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.s-faq__lead{text-wrap:balance}
.s-faq__title{color:var(--color-foreground)}
.s-faq__lead{color:var(--color-muted-foreground)}
.s-faq__contact{color:var(--color-muted-foreground)}
.s-faq__link{color:var(--color-primary)}
@media (hover:hover){
.s-faq__link:hover{text-decoration-line:underline}
}
@media (min-width:48rem){
.s-faq__intro{grid-column:span 2/span 2}
.s-faq__list{grid-column:span 3/span 3}
.s-faq__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--spacing)*12)}
.s-faq{padding-block:calc(var(--spacing)*24)}
}
/* propio */
.s-faq .c-accordion{max-width:none}
.s-faq .c-accordion__trigger{font-size:1rem}
.s-faq .c-accordion__content{font-size:1rem}

/* página de prueba */
body{margin:0;min-height:100vh;display:grid;place-items:start center;padding:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:14px;line-height:1.5}
.c-demo{display:grid;gap:1rem;justify-items:stretch;width:100%;max-width:100%;min-width:0;justify-self:stretch;grid-template-columns:minmax(0,1fr)}
body{grid-template-columns:minmax(0,1fr)}
.embed body{background:transparent}
</style>
</head>
<body>
<div class="c-demo">
<section class="s-faq" aria-labelledby="faq-title">
  <div class="s-faq__inner">
    <div class="s-faq__grid">
      <div class="s-faq__intro">
        <h2 class="s-faq__title" id="faq-title">Preguntas frecuentes</h2>
        <p class="s-faq__lead">Lo que más nos preguntan.</p>
        <p class="s-faq__contact">¿No encuentras tu respuesta? Escríbele a <a class="s-faq__link" href="#contacto">nuestro equipo</a>.</p>
      </div>
      <div class="s-faq__list">
        <div class="c-accordion">
          <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>
          <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>
          <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>
          <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>
        </div>
      </div>
    </div>
  </div>
</section>
</div>

</body>
</html>

«Todo» trae tokens, dependencias y componente en un solo archivo, listo para abrir o dárselo a un agente.“All” bundles tokens, dependencies and the component in one file, ready to open or hand to an agent.

InstalaciónInstallation

Agrega una vezAdd once tokens.css (colores, radios, tema oscuro).(colors, radii, dark theme).
Agrega también:Also add: AcordeónAccordion.
Copia los archivos:Copy the files: faq.html, faq.css.
Para el tema oscuro, pon la claseFor the dark theme, add the class dark ento <html>.

Cuándo usarloWhen to use it

ÚsaloUse it

Para resolver dudas antes de comprar o escribir.

To answer questions before buying or writing in.

Mejor noAvoid

Para contenido que todos deben leer.

For content everyone must read.

region

Usa <details>: funciona sin JavaScript y abre una a la vez.

Uses <details>: works without JavaScript and opens one at a time.

Cómo probarloHow to test it

Abre una pregunta con Enter: la anterior se cierra.

Open a question with Enter: the previous one closes.

CréditosCredits

Tailark mist (MIT) · faqs/two