/* fds-foundation.css — GENERADO por el plugin FDS. No editar.
 * Las capas del sistema que funcionan sin compilar Tailwind:
 * sirven en el sitio, en wp-admin y sin WindPress.
 */

/* ── base/base.css ───────────────────────────────── */
/* file: base.css */

@layer base {

    html {
        overflow-x: hidden;
        font-size: 100%;
    }

    body {
        font-family: var(--font-body);
        font-size: var(--text-base);
        background-color: var(--ft-color-background);
        color: var(--ft-color-text);
        scroll-behavior: smooth;
        min-height: 100vh; /* Asegura altura mínima */
    }

    * {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: var(--color-neutral-300); /* Más neutro para mayor flexibilidad */
    }

    *::before, *::after {
        box-sizing: border-box;
        border-width: 0;
        border-style: solid;
        border-color: var(--color-neutral-300);
    }

    /* Mejora responsive para imágenes y multimedia */
    img, svg, video {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .skip-link {
        background: #000;
        border-bottom-right-radius: 8px;
        color: #fff;
        font-weight: 700;
        left: 0;
        padding: 5px 10px;
        position: fixed;
        top: 0;
        transform: translateY(-102%);
        transition: transform .3s;
        z-index: 9999
    }

    .skip-link:focus {
        transform: translateY(0)
    }

    figure > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    abbr[title] {
        cursor: help;
    }

    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    legend {
        padding: 0;
    }
}

/* ── base/typography.css ───────────────────────────────── */
/* file: base/typography.css
 *
 * Tipografía de los elementos: cómo se ven h1-h6, enlaces y el contenido
 * largo sin poner una sola clase. Es lo que hace que un texto pegado desde
 * el editor ya salga bien.
 *
 * `.prose` es el bloque de contenido largo — artículos, fichas, cualquier
 * cosa escrita — donde los márgenes entre elementos importan tanto como los
 * tamaños. Un título seguido de otro no lleva margen entre medias, porque
 * son la misma idea partida en dos.
 *
 * Convertido de `@apply` a CSS plano sin cambiar lo que se ve: tiene que
 * servir también en el panel del plugin y en sitios sin WindPress.
 */

/* Gutenberg subraya los enlaces con una regla fuera de capas; para ganarle
   hay que estar fuera también. No moverlo dentro de `@layer`. */
a:where(:not(.wp-element-button)) {
    text-decoration: none;
}

@layer base {

    h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        font-family: var(--font-display);
        font-weight: 700;
        text-wrap: balance;
        letter-spacing: -0.025em;
    }

    h1 { font-size: var(--ft-text-5xl); line-height: var(--leading-none); letter-spacing: 0.05em; }
    h2 { font-size: var(--ft-text-4xl); line-height: var(--leading-none); }
    h3 { font-size: var(--ft-text-3xl); line-height: var(--leading-none); }
    h4 { font-size: var(--ft-text-2xl); line-height: var(--leading-tight); }
    h5 { font-size: var(--ft-text-xl);  line-height: var(--leading-tight); }
    h6 { font-size: var(--ft-text-lg);  line-height: var(--leading-tight); }

    a {
        text-decoration: none;
    }

    /* ─── Contenido largo ───────────────────────────────────────────── */
    .prose h1 { font-size: var(--ft-text-4xl); line-height: var(--leading-none); margin-block: 1rem 0.5rem; }
    .prose h2 { font-size: var(--ft-text-3xl); line-height: var(--leading-none); margin-block: 1rem 0.5rem; }
    .prose h3 { font-size: var(--ft-text-2xl); line-height: var(--leading-none); margin-block: 0.5rem; }
    .prose h4 { font-size: var(--ft-text-xl);  line-height: var(--leading-tight); margin-block: 0.5rem; }
    .prose h5 { font-size: var(--ft-text-lg);  line-height: var(--leading-tight); margin-block: 0.5rem; }
    .prose h6 { font-size: var(--ft-text-base); line-height: var(--leading-tight); margin-block: 0.5rem; }

    .prose a {
        color: var(--color-primary-500);
        text-decoration: none;
    }

    .prose p > a:hover {
        text-decoration: underline;
    }

    .prose p { margin-block: 1rem; }
    .prose p + p { margin-block: 0.5rem; }

    /* Dos títulos seguidos son la misma idea: no se separan. */
    .prose h1 + h2, .prose h1 + h3, .prose h1 + h4, .prose h1 + h5, .prose h1 + h6,
    .prose h2 + h3, .prose h2 + h4, .prose h2 + h5, .prose h2 + h6,
    .prose h3 + h4, .prose h3 + h5, .prose h3 + h6,
    .prose h4 + h5, .prose h4 + h6,
    .prose h5 + h6 {
        margin-block-start: 0;
    }

    .prose p + img {
        max-inline-size: 100%;
        block-size: auto;
    }

    .prose ul,
    .prose ol {
        margin-block: 1rem;
        padding-inline-start: 1.25rem;
    }

    .prose ul ul, .prose ul ol,
    .prose ol ul, .prose ol ol {
        margin-block: 0;
    }

    .prose li {
        list-style-type: disc;
        margin-block: 0.5rem;
    }

    .prose blockquote {
        border-inline-start: 4px solid var(--color-secondary-500);
        padding-inline-start: 1rem;
        font-style: italic;
        color: var(--color-secondary-700);
        margin-block: 1rem;
    }

    .prose table {
        font-size: var(--ft-text-base);
        line-height: var(--leading-tight);
        margin-block: 1rem;
    }

    .prose table thead th {
        padding: 0 1rem 0.5rem;
        text-align: start;
        border-block-end: 3px solid var(--color-secondary-100);
    }

    .prose table tbody td,
    .prose table tfoot td {
        padding: 0.5rem 1rem;
        border-block-end: 1px solid var(--color-secondary-100);
    }

    /* Las columnas de los extremos se alinean con el texto, sin sangría. */
    .prose table thead th:first-child,
    .prose table tbody td:first-child,
    .prose table tfoot td:first-child {
        padding-inline-start: 0;
    }

    .prose table thead th:last-child,
    .prose table tbody td:last-child,
    .prose table tfoot td:last-child {
        padding-inline-end: 0;
    }

    /* El bloque no añade aire por fuera: de eso se encarga quien lo coloca. */
    .prose > :first-child { margin-block-start: 0; }
    .prose > :last-child  { margin-block-end: 0; }

}

/* ── layouts/primitives.css ───────────────────────────────── */
/* file: layouts/primitives.css
 *
 * Las primitivas de layout: seis formas que resuelven casi cualquier
 * composición sin escribir una media query.
 *
 * Cada una trae su espaciado semántico por defecto y se ajusta con un
 * modificador, así que el caso normal no necesita añadir nada. Cuando hace
 * falta salirse, están las utilidades de `utility/spacing.css`.
 *
 *   stack     flujo vertical con ritmo constante
 *   cluster   elementos en fila que envuelven solos
 *   grid      columnas que se calculan solas, sin breakpoints
 *   sidebar   contenido principal + lateral, que apila cuando no cabe
 *   center    contenido con ancho máximo y centrado
 *   box       caja con fondo, borde y su propio padding
 *
 * Nombres de Every Layout, que es de donde vienen. CSS plano y solo tokens:
 * sirve igual en el sitio, en el panel del plugin y sin WindPress.
 */

@layer layouts {

  /* ─── stack: lo de arriba y lo de abajo, con el mismo aire ────────── */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--ft-spacing-stack);
  }
  .stack-content { gap: var(--ft-spacing-content); }
  .stack-block   { gap: var(--ft-spacing-block); }
  .stack-section { gap: var(--ft-spacing-section); }

  /* ─── cluster: en fila, y si no caben, envuelven ──────────────────── */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ft-spacing-content);
  }
  .cluster-inner { gap: var(--ft-spacing-inner); }
  .cluster-stack { gap: var(--ft-spacing-stack); }
  .cluster-between { justify-content: space-between; }
  .cluster-center  { justify-content: center; }
  .cluster-end     { justify-content: flex-end; }
  .cluster-top     { align-items: flex-start; }
  .cluster-bottom  { align-items: flex-end; }

  /* ─── grid: columnas intrínsecas ──────────────────────────────────── */
  /* `auto-fit` reparte el espacio sobrante; el mínimo decide cuántas caben.
     Sin media queries: el propio contenido dice cuándo cambiar. */
  .grid {
    display: grid;
    gap: var(--ft-spacing-columns);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--ft-card-md), 100%), 1fr));
  }
  .grid-xs { grid-template-columns: repeat(auto-fit, minmax(min(var(--ft-card-xs), 100%), 1fr)); }
  .grid-sm { grid-template-columns: repeat(auto-fit, minmax(min(var(--ft-card-sm), 100%), 1fr)); }
  .grid-lg { grid-template-columns: repeat(auto-fit, minmax(min(var(--ft-card-lg), 100%), 1fr)); }
  .grid-xl { grid-template-columns: repeat(auto-fit, minmax(min(var(--ft-card-xl), 100%), 1fr)); }

  /* Cuando el número de columnas SÍ es una decisión y no una consecuencia.
     `auto-fill` mantiene los huecos aunque falten elementos. */
  .grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - var(--ft-spacing-columns)), 100%), 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(calc(33.333% - var(--ft-spacing-columns)), 100%), 1fr)); }
  .grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(calc(25% - var(--ft-spacing-columns)), 100%), 1fr)); }

  /* ─── sidebar: principal + lateral, que apila cuando no cabe ──────── */
  .sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-spacing-columns);
  }
  .sidebar > :first-child {
    flex-basis: var(--ft-card-md);
    flex-grow: 1;
  }
  /* El principal se lleva el resto y no baja de la mitad: por debajo, apila. */
  .sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
  }
  /* Lateral a la derecha: se invierte quién manda. */
  .sidebar-end > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
  }
  .sidebar-end > :last-child {
    flex-basis: var(--ft-card-md);
    flex-grow: 1;
  }

  /* ─── center: ancho máximo y centrado ─────────────────────────────── */
  .center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--ft-container);
    padding-inline: var(--ft-padding-content-x);
  }
  .center-narrow { max-inline-size: 45rem; }
  .center-wide   { max-inline-size: 100%; }
  /* Centrar también lo de dentro, no solo la caja. */
  .center-text {
    text-align: center;
    align-items: center;
  }

  /* ─── box: la caja con fondo propio ───────────────────────────────── */
  .box {
    padding: var(--ft-spacing-block);
    border-radius: var(--radius-card);
    background: var(--ft-color-background);
    color: var(--ft-color-text);
  }
  .box-outline {
    border: 1px solid var(--color-neutral-300);
    background: transparent;
  }
  .box-tight { padding: var(--ft-spacing-content); }
  .box-loose { padding: var(--ft-spacing-columns); }

}

/* ── layouts/section.css ───────────────────────────────── */
/* file: layouts/section.css
 *
 * El ritmo vertical de la página: cuánto respira cada sección y cómo se
 * comporta cuando la de al lado tiene fondo.
 *
 * Funciona sobre el elemento `<section>` porque en un constructor eso es lo
 * que se emite, y así el usuario no tiene que acordarse de poner una clase.
 * `.section` y `.container` existen para cuando el marcado no lo permite —
 * hacen exactamente lo mismo, así que poner las dos no duplica nada.
 *
 * Convertido a CSS plano: sirve igual dentro del panel del plugin y en un
 * sitio sin WindPress, donde no hay nada que compile `@apply`.
 */

@layer layouts {

  section,
  .section {
    container-type: inline-size;
    inline-size: 100%;
    padding-inline: var(--ft-padding-content-x);
    padding-block: var(--ft-padding-content-y-half);
  }

  /* El contenedor interior: ancho máximo, centrado y ritmo entre bloques. */
  section > div,
  .section > div,
  .container {
    margin-inline: auto;
    inline-size: 100%;
    max-inline-size: var(--ft-container);
    display: flex;
    flex-direction: column;
    gap: var(--ft-gap-content);
  }

  section > div > div,
  .section > div > div {
    inline-size: 100%;
  }

  /* ─── Ritmo entre secciones ─────────────────────────────────────────
     La primera y la última respiran entero contra el borde de la página;
     entre ellas, media ración arriba y abajo suma una entera. Una sección
     con fondo siempre lleva la entera: su color necesita el aire. */

  main > section:first-child:not(.has-background),
  section:first-of-type:not(.has-background),
  header + section:not(.has-background):not(.half-top) {
    padding-block-start: var(--ft-padding-content-y);
  }

  main > section:last-child:not(.has-background),
  section:last-of-type:not(.has-background) {
    padding-block-end: var(--ft-padding-content-y);
  }

  section.has-background,
  .section.has-background {
    padding-block: var(--ft-padding-content-y);
  }

  section.has-background + section:not(.half-top) {
    padding-block-start: var(--ft-padding-content-y);
  }

  /* Si no hay soporte de :has(), la regla se ignora y no rompe nada. */
  section:not(.half-bottom):has(+ section.has-background) {
    padding-block-end: var(--ft-padding-content-y);
  }

  /* Media ración explícita, para pegar dos secciones que van juntas. */
  section.half-top,
  .section.half-top,
  section.half-top:first-of-type:not(.has-background) {
    padding-block-start: var(--ft-padding-content-y-half);
  }

  section.half-bottom,
  .section.half-bottom,
  section.half-bottom:last-of-type:not(.has-background) {
    padding-block-end: var(--ft-padding-content-y-half);
  }

  /* ─── Escapes ───────────────────────────────────────────────────────── */

  /* Romper el contenedor y ocupar el ancho de la ventana. */
  .block-bleed {
    inline-size: 100vw;
    max-inline-size: none;
    position: relative;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    flex: none;
  }

  /* Bricks envuelve el contenido en este id. */
  #brx-content {
    inline-size: 100%;
    display: flex;
    flex-direction: column;
  }

  .single-product .product {
    flex-wrap: nowrap;
  }

}

/* ── layouts/content-flex.css ───────────────────────────────── */
/* file: layouts/content-flex.css
 *
 * Colocar el contenido dentro de su caja: nueve posiciones, la rejilla de
 * siempre. Se usa cuando el bloque es más alto que su contenido y hay que
 * decidir dónde se apoya.
 *
 * La alineación del texto acompaña a la posición, porque casi nunca se quiere
 * un texto centrado dentro de un bloque alineado a la izquierda.
 *
 * CSS plano, sin `@apply`.
 */

@layer layouts {

  .content-flex {
    display: flex;
    flex-direction: column;
    gap: var(--ft-gap-content);
    justify-content: center;
    align-items: center;
  }

  /* ─── Eje horizontal: alineación, texto y a qué lado se pega ──────── */
  .content-flex.top-left,
  .content-flex.left,
  .content-flex.bottom-left {
    align-items: flex-start;
    text-align: start;
    margin-inline-end: auto;
  }

  .content-flex.top,
  .content-flex.center,
  .content-flex.bottom {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .content-flex.top-right,
  .content-flex.right,
  .content-flex.bottom-right {
    align-items: flex-end;
    text-align: end;
    margin-inline-start: auto;
  }

  /* ─── Eje vertical ────────────────────────────────────────────────── */
  .content-flex.top-left,
  .content-flex.top,
  .content-flex.top-right {
    justify-content: flex-start;
  }

  .content-flex.left,
  .content-flex.center,
  .content-flex.right {
    justify-content: center;
  }

  .content-flex.bottom-left,
  .content-flex.bottom,
  .content-flex.bottom-right {
    justify-content: flex-end;
  }

}

/* ── components/typography.css ───────────────────────────────── */
/* file: components/typography.css
 *
 * La escala tipográfica como clases. Tres familias y un tamaño por defecto en
 * cada una, para que el caso normal sea escribir una sola palabra:
 *
 *   display      lo que manda en la página
 *   heading      la estructura del contenido
 *   subheading   el puente entre título y cuerpo
 *   text-*       el cuerpo
 *
 * Los tamaños salen de `--ft-text-*`, que se recalculan solos desde los knobs:
 * cambiar la razón de la escala mueve toda la jerarquía a la vez y las
 * proporciones aguantan.
 *
 * Convertido de `@apply` a CSS plano sin cambiar lo que se ve. Hacía falta
 * porque la tipografía es cimiento: tiene que funcionar también dentro del
 * panel del plugin y en sitios sin WindPress, donde no hay Tailwind.
 */

@layer components {

  /* ─── Display: impacto ──────────────────────────────── */
  .display,
  .display-lg {
    font-size: var(--display-lg);
    font-family: var(--display-font);
    font-weight: var(--display-weight);
    line-height: var(--display-lg-leading);
    letter-spacing: var(--display-lg-tracking);
    text-wrap: var(--display-wrap);
  }

  .display-md {
    font-size: var(--display-md);
    font-family: var(--display-font);
    font-weight: var(--display-weight);
    line-height: var(--display-md-leading);
    letter-spacing: var(--display-md-tracking);
    text-wrap: var(--display-wrap);
  }

  .display-single,
  .display-sm {
    font-size: var(--display-sm);
    font-family: var(--display-font);
    font-weight: var(--display-weight);
    line-height: var(--display-sm-leading);
    letter-spacing: var(--display-sm-tracking);
    text-wrap: var(--display-wrap);
  }

  /* ─── Heading: estructura ───────────────────────────── */
  .heading-lg {
    font-size: var(--heading-lg);
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    line-height: var(--heading-lg-leading);
    letter-spacing: var(--heading-lg-tracking);
    text-wrap: var(--heading-wrap);
  }

  .heading,
  .heading-md {
    font-size: var(--heading-md);
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    line-height: var(--heading-md-leading);
    letter-spacing: var(--heading-md-tracking);
    text-wrap: var(--heading-wrap);
  }

  .heading-sm {
    font-size: var(--heading-sm);
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    line-height: var(--heading-sm-leading);
    letter-spacing: var(--heading-sm-tracking);
    text-wrap: var(--heading-wrap);
  }

  /* ─── Subheading: el puente ─────────────────────────── */
  .subheading-lg {
    font-size: var(--subheading-lg);
    font-family: var(--subheading-font);
    font-weight: var(--subheading-weight);
    line-height: var(--subheading-lg-leading);
    letter-spacing: var(--subheading-lg-tracking);
    text-wrap: var(--subheading-wrap);
  }

  .subheading,
  .subheading-md {
    font-size: var(--subheading-md);
    font-family: var(--subheading-font);
    font-weight: var(--subheading-weight);
    line-height: var(--subheading-md-leading);
    letter-spacing: var(--subheading-md-tracking);
    text-wrap: var(--subheading-wrap);
  }

  .subheading-sm {
    font-size: var(--subheading-sm);
    font-family: var(--subheading-font);
    font-weight: var(--subheading-weight);
    line-height: var(--subheading-sm-leading);
    letter-spacing: var(--subheading-sm-tracking);
    text-wrap: var(--subheading-wrap);
  }

  /* ─── Cuerpo ────────────────────────────────────────── */
  .text-large {
    font-size: var(--text-large);
    font-family: var(--text-font);
    line-height: var(--text-large-leading);
    letter-spacing: var(--text-large-tracking);
    text-wrap: var(--text-wrap);
  }

  .text-medium {
    font-size: var(--text-medium);
    font-family: var(--text-font);
    line-height: var(--text-medium-leading);
    letter-spacing: var(--text-medium-tracking);
    text-wrap: var(--text-wrap);
  }

  .text-small {
    font-size: var(--text-small);
    font-family: var(--text-font);
    line-height: var(--text-small-leading);
    letter-spacing: var(--text-small-tracking);
    text-wrap: var(--text-wrap);
  }

}

/* ── components/buttons.css ───────────────────────────────── */
/* file: components/buttons.css
 *
 * Botones: una base y variantes de color, forma y tamaño que se combinan.
 *
 *   <a class="btn btn-primary btn-lg">Enviar</a>
 *
 * Convertido de `@apply` a CSS plano sin cambiar lo que se ve: mismos tokens,
 * mismos valores. El motivo es que ahora tienen que funcionar también dentro
 * del panel del plugin y en sitios sin WindPress, donde no hay nada que
 * compile Tailwind.
 */

@layer components {

  /* ─── Base ─────────────────────────────────────────── */
  .btn {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: var(--ft-spacing-inner, 0.5rem);
    min-inline-size: fit-content;
    padding-block: var(--btn-py);
    padding-inline: var(--btn-px);
    font-weight: 600;
    border-radius: var(--radius-button);
    transition: all 300ms;
    cursor: pointer;
  }

  .btn:focus {
    outline: none;
  }

  /* El foco de teclado sí se ve: quitarlo del todo deja el botón inservible
     para quien no usa ratón. */
  .btn:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  .btn:hover {
    transform: scale(1.05);
  }

  /* Quien haya pedido menos movimiento, no lo tiene. */
  @media (prefers-reduced-motion: reduce) {
    .btn {
      transition: none;
    }
    .btn:hover {
      transform: none;
    }
  }

  /* ─── Variantes de color ────────────────────────────── */
  .btn-light {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
    border: 1px solid var(--color-neutral-100);
  }

  .btn-dark {
    background-color: var(--color-neutral-700);
    color: var(--color-neutral-100);
    border: 1px solid var(--color-neutral-700);
  }

  .btn-primary {
    background-color: var(--color-primary-500);
    border: 1px solid var(--color-primary-500);
    color: var(--btn-primary-color);
  }

  .btn-secondary {
    background-color: var(--color-secondary-500);
    border: 1px solid var(--color-secondary-500);
    color: var(--btn-secondary-color);
  }

  .btn-outline {
    background-color: var(--btn-outline-bg);
    border: 1px solid var(--btn-outline-border);
    color: var(--btn-outline-color);
  }

  .btn-outline:hover {
    transition-duration: 500ms;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
  }

  .btn-link {
    background-color: transparent;
    color: var(--color-neutral-800);
    border: 0;
    padding-inline-start: 0;
  }

  /* ─── Variantes de forma ────────────────────────────── */
  .btn-rounded {
    border-radius: 9999px;
  }

  .btn-circle {
    border-radius: 9999px;
    aspect-ratio: 1;
    padding: var(--btn-py);
  }

  /* ─── Variantes de tamaño ───────────────────────────── */
  .btn-xs { font-size: var(--ft-text-xs); }
  .btn-sm { font-size: var(--ft-text-sm); }
  .btn-lg { font-size: var(--ft-text-lg); }
  .btn-xl { font-size: var(--ft-text-xl); }

  /* ─── Otras variaciones ─────────────────────────────── */
  .btn-wide {
    padding-inline: calc(var(--btn-px) * 1.5);
  }

  .btn-block {
    inline-size: 100%;
  }

  /* ─── Botones de formulario ─────────────────────────── */
  /* Un submit sin clase se ve como un botón del sistema, no como el botón
     por defecto del navegador. */
  button[type="submit"] {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: var(--ft-spacing-inner, 0.5rem);
    min-inline-size: fit-content;
    padding-block: var(--btn-py);
    padding-inline: var(--btn-px);
    font-weight: 400;
    border-radius: var(--radius-button);
    transition: all 300ms;
    background-color: var(--color-primary-500);
    border: 1px solid var(--color-primary-500);
    color: var(--btn-primary-color);
    cursor: pointer;
  }

}

/* ── components/cards.css ───────────────────────────────── */
/* file: components/cards.css */

@layer components {

  /* ─── Base ─────────────────────────────────────────── */
  .card {
    padding: var(--spacing-block);
    border-radius: var(--radius-card);
    background-color: var(--ft-color-background);
    width: 100%;
  }

  /* ─── Variantes de tamaño ───────────────────────────── */
  .card-xs { max-width: var(--ft-card-xs); }
  .card-sm { max-width: var(--ft-card-sm); }
  .card-md { max-width: var(--ft-card-md); }
  .card-lg { max-width: var(--ft-card-lg); }
  .card-xl { max-width: var(--ft-card-xl); }

  /* ─── Variantes de estilo ───────────────────────────── */
  .card-outline {
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-neutral-300);
    background-color: transparent;
  }

  .card-elevated {
    box-shadow:
      0 4px 6px -1px oklch(0 0 0 / 0.1),
      0 2px 4px -2px oklch(0 0 0 / 0.1);
  }

}

/* ── utility/spacing.css ───────────────────────────────── */
/* file: utility/spacing.css
 *
 * Espaciado semántico como clases.
 *
 * Los tokens ya existían (`--ft-spacing-inner` … `--ft-spacing-hero`), pero no
 * había forma de usarlos sin escribir CSS a mano. Esta capa los expone.
 *
 * La escala no es de tamaños sino de RELACIONES: `inner` es lo que separa las
 * partes de un mismo elemento y `hero` lo que separa un bloque del resto de la
 * página. Elegir por relación —y no por «cuántos píxeles»— es lo que hace que
 * el ritmo aguante cuando se cambia un knob, porque todos se recalculan juntos.
 *
 *   inner    dentro de un elemento (icono y su texto)
 *   content  entre líneas de contenido relacionado
 *   stack    entre elementos de una misma pila
 *   block    entre bloques distintos
 *   columns  entre columnas
 *   section  entre secciones
 *   hero     respiración de una pieza que manda en la página
 *
 * CSS plano a propósito: sin `@apply` funciona igual en el sitio, dentro del
 * panel del plugin y en una instalación sin WindPress, sin compilar nada.
 */

@layer utilities {

  /* ─── gap ───────────────────────────────────────────── */
  .gap-inner    { gap: var(--ft-spacing-inner); }
  .gap-content  { gap: var(--ft-spacing-content); }
  .gap-stack    { gap: var(--ft-spacing-stack); }
  .gap-block    { gap: var(--ft-spacing-block); }
  .gap-columns  { gap: var(--ft-spacing-columns); }
  .gap-section  { gap: var(--ft-spacing-section); }
  .gap-hero     { gap: var(--ft-spacing-hero); }
  .gap-none     { gap: 0; }

  /* ─── padding ───────────────────────────────────────── */
  .p-inner      { padding: var(--ft-spacing-inner); }
  .p-content    { padding: var(--ft-spacing-content); }
  .p-stack      { padding: var(--ft-spacing-stack); }
  .p-block      { padding: var(--ft-spacing-block); }
  .p-columns    { padding: var(--ft-spacing-columns); }
  .p-section    { padding: var(--ft-spacing-section); }
  .p-none       { padding: 0; }

  .py-inner     { padding-block: var(--ft-spacing-inner); }
  .py-content   { padding-block: var(--ft-spacing-content); }
  .py-stack     { padding-block: var(--ft-spacing-stack); }
  .py-block     { padding-block: var(--ft-spacing-block); }
  .py-columns   { padding-block: var(--ft-spacing-columns); }
  .py-section   { padding-block: var(--ft-spacing-section); }
  .py-hero      { padding-block: var(--ft-spacing-hero); }
  .py-none      { padding-block: 0; }

  .px-inner     { padding-inline: var(--ft-spacing-inner); }
  .px-content   { padding-inline: var(--ft-spacing-content); }
  .px-stack     { padding-inline: var(--ft-spacing-stack); }
  .px-block     { padding-inline: var(--ft-spacing-block); }
  .px-columns   { padding-inline: var(--ft-spacing-columns); }
  .px-section   { padding-inline: var(--ft-spacing-section); }
  .px-none      { padding-inline: 0; }

  /* ─── margin ────────────────────────────────────────── */
  /* Solo bloque: el margen horizontal en un sistema con contenedor es casi
     siempre `auto`, y para eso está `.center`. */
  .mt-content   { margin-block-start: var(--ft-spacing-content); }
  .mt-stack     { margin-block-start: var(--ft-spacing-stack); }
  .mt-block     { margin-block-start: var(--ft-spacing-block); }
  .mt-section   { margin-block-start: var(--ft-spacing-section); }
  .mt-hero      { margin-block-start: var(--ft-spacing-hero); }
  .mt-none      { margin-block-start: 0; }

  .mb-content   { margin-block-end: var(--ft-spacing-content); }
  .mb-stack     { margin-block-end: var(--ft-spacing-stack); }
  .mb-block     { margin-block-end: var(--ft-spacing-block); }
  .mb-section   { margin-block-end: var(--ft-spacing-section); }
  .mb-hero      { margin-block-end: var(--ft-spacing-hero); }
  .mb-none      { margin-block-end: 0; }

}

/* ── wizard.css ───────────────────────────────── */
/* Flowtitude Design System - Custom Properties */