/*
Theme Name: Shaddai
Theme URI: https://shaddai.tienda
Author: Ángel Grimaldo
Author URI: https://angelgrimaldo.com
Description: Tema de alto rendimiento y conversión para Shaddai Tienda WooCommerce. 100% Responsivo, Mobile-First, SEO On-Page/GEO/AEO optimizado.
Version: 1.0.6
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 8.0
License: Proprietary
Text Domain: shaddai
*/

/* ==========================================================================
   1. FUENTES LOCALES OPTIMIZADAS (@font-face WOFF2)
   ========================================================================== */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('assets/fonts/Oswald-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2');
}

/* ==========================================================================
   2. VARIABLES CSS GLOBALES (PALETA CORPORATIVA SHADDAI)
   ========================================================================== */
:root {
    /* Colores Primarios */
    --color-primary: #B4162C;
    --color-primary-dark: #751830;
    --color-primary-light: #d4223b;
    --color-primary-rgb: 180, 22, 44;
    --color-bg-light: #F4F4F4;
    --color-text-dark: #212121;

    /* Colores Secundarios */
    --color-white: #FFFFFF;
    --color-wine: #751830;
    --color-gold: #E19A00;
    --color-gold-hover: #c48600;
    --color-gold-light: #fff8eb;
    --color-gold-rgb: 225, 154, 0;

    /* Neutros y Grises */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;

    /* Compatibilidad con variables Shaddai / Teoma */
    --color-verde-primario: var(--color-primary);
    --color-verde-oscuro: var(--color-primary-dark);
    --color-dorado-acento: var(--color-gold);
    --color-dorado-hover: var(--color-gold-hover);
    --color-blanco: var(--color-white);
    --color-gris-fondo: var(--color-bg-light);
    --color-gris-oscuro: var(--color-text-dark);
    --color-gris-texto: var(--color-gray-600);

    /* Tipografía */
    --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Dimensiones de Contenedores */
    --container-width: 1200px;
    --container-narrow: 860px;
    --header-height: 74px;
    --topbar-height: 38px;

    /* Radios */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    --radius-pill: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 35px rgba(0, 0, 0, 0.12);

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   3. RESET Y BASE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Títulos con Oswald */
h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text-dark);
    margin-top: 0;
    letter-spacing: 0.01em;
}

h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.75rem; font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

img, svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ==========================================================================
   4. CONTENEDORES Y REGLAS RESPONSIVAS COMPACTAS (MOBILE-FIRST)
   ========================================================================== */
.container,
.nb-container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container--narrow,
.nb-container-narrow {
    max-width: var(--container-narrow);
}

/* Secciones con espaciado vertical compacto */
.section,
.shaddai-section {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

@media (min-width: 640px) {
    .section,
    .shaddai-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .section,
    .shaddai-section {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

@media (min-width: 640px) {
    .section-header {
        margin-bottom: 2.5rem;
    }
}

.section-title {
    font-size: 1.85rem;
    color: var(--color-text-dark);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .section-title {
        font-size: 2.35rem;
    }
}

.section-subtitle {
    font-size: 0.95rem;
    color: var(--color-gray-600);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

/* ==========================================================================
   5. BOTONES DE ALTO IMPACTO CRO
   ========================================================================== */
.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    box-sizing: border-box;
    transition: all var(--transition-base);
    text-align: center;
}

.btn--primary,
.button.btn--primary,
.button.alt {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 14px rgba(180, 22, 44, 0.25);
}

.btn--primary:hover,
.button.btn--primary:hover,
.button.alt:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(180, 22, 44, 0.35);
}

.btn--gold {
    background-color: var(--color-gold) !important;
    color: var(--color-white) !important;
    border-color: var(--color-gold) !important;
    box-shadow: 0 4px 14px rgba(225, 154, 0, 0.25);
}

.btn--gold:hover {
    background-color: var(--color-gold-hover) !important;
    border-color: var(--color-gold-hover) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
}

.btn--outline {
    background-color: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn--outline:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   6. BLINDAJE MÓVIL (MEDIA QUERY MAX-WIDTH: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    .py-space-4xl, .py-24, .py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .mb-space-2xl, .mb-12 {
        margin-bottom: 1.5rem !important;
    }
}