/* =========================
   VARIABLES GLOBALES
========================= */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

:root {
    /* ── Paleta unificada ── */

    /* Verdes — escala armónica de marca */
    --flor-green:       #2D5A43;   /* verde profundo (texto principal) */
    --flor-green-mid:   #6B9671;   /* verde medio (headings, acentos) */
    --flor-sage:        #A9B79F;   /* salvia pastel (bordes, acentos suaves) */
    /* Neutros cálidos */
    --flor-cream:       #FFF9F5;   /* fondo principal crema */
    --flor-warmcream:   #E6D9CF;   /* crema cálido */

    /* Neutros fríos */
    --flor-gray:        #E5E7EB;   /* gris claro (bordes, divisores) */
    --flor-muted:       #9CA3AF;   /* gris medio (texto secundario) */

    /* UI — estados */
    --flor-success:     #6B9671;
    --flor-info:        #557096;
    --flor-error:       #E78B8B;

    /* Base */
    --color-black:      #000000;
    --color-white:      #FFFFFF;
    --color-separator:  #f0f0f0;

    /* ── Aliases (compatibilidad con styles/) ── */
    --color-bg:               var(--flor-cream);
    --color-bg2:              var(--color-white);
    --color-accent:           var(--flor-sage);
    --color-muted:            var(--flor-muted);
    --color-heading:          var(--flor-green-mid);
    --color-hover-green:      var(--flor-green-mid);
    --flor-contrast-darkest:  var(--flor-green);
    --flor-contrast-dark:     #4A7A5E;
    --flor-contrast-medium:   var(--flor-green-mid);
    --flor-base-cream:        var(--flor-warmcream);
    --flor-base-light:        var(--flor-gray);
    --flor-base-lightest:     #F9F9F9;

    /* ── Layout ── */
    --max-width: 1200px;
    --section-padding-x: clamp(1.5rem, 5vw, 10rem);
    --section-padding-y: clamp(3rem, 6vw, 6rem);

    /* Espaciado */
    --space-xs: 0.5rem;
    --space-sm: 0.875rem;
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: 2.5rem;

    /* Border radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;

    /* Transiciones */
    --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease-out;
}

/* =============================================================
   SPA REACT · Anular hover verde global de Kadence
   Kadence (global.min.css) aplica a TODOS los <button>:
     button:hover { background: var(--global-palette-btn-bg-hover) }
   Sobreescribimos la variable dentro del root SPA a transparent
   para que los hovers reales los gestione Tailwind con su propia
   especificidad. Se pone aquí (main.css) porque woocommerce.css
   solo se carga en páginas WooCommerce nativas, no en la SPA.
============================================================= */

#react-spa-root {
    --global-palette-btn-bg-hover:     transparent;
    --global-palette-btn-hover:        inherit;
    --global-palette-btn-sec-bg-hover: transparent;
    --global-palette-btn-sec-hover:    inherit;
}

#react-spa-root button:hover,
#react-spa-root button:focus,
#react-spa-root button:active {
    box-shadow: none;
}

/* Accesibilidad: oculto visual, visible para lectores de pantalla */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
}

/* Reset básico */
body {
    margin: 0;
    background: var(--color-bg);
    color: #333;
}

section {
    width: 100%;
}

/* Footer */
.site-footer-wrap {
    background: #fff;
    box-shadow: 0 -6px 100px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index: 5;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
    .story-inner,
    .contact-inner {
        grid-template-columns: 1fr;
    }

    .products-header {
        flex-direction: column;
        align-items: flex-start;
    }
}