/* ========================================
   LTS - La Tienda Sexy GT
   Variables de Diseño - Paleta Elegante
   ======================================== */

:root {
    /* Colores de Marca LTS - Paleta Elegante */
    --color-negro: #2B2B2B;
    --color-negro-dark: #1A1A1A;
    --color-crema: #F5E6E0;
    --color-crema-dark: #E8D5CC;
    --color-rosa: #E8A1B2;
    --color-rosa-dark: #D48A9A;
    --color-rosa-light: #F5D5DD;

    /* Colores Base - Dominio Negro y Crema */
    --primary-color: #2B2B2B;
    --secondary-color: #F5E6E0;
    --text-primary: #1A1A1A;
    --text-secondary: #333333;
    --text-light: #666666;
    --white: #ffffff;
    --off-white: #FDFBF9;
    --gray-light: #F5E6E0;
    --gray-border: #E8E0DC;

    /* Gradientes - Elegantes con mínimo rosa */
    --gradient-primary: linear-gradient(135deg, #2B2B2B 0%, #1A1A1A 100%);
    --gradient-pastel: linear-gradient(135deg, #F5E6E0 0%, #E8D5CC 100%);
    --gradient-dark: linear-gradient(135deg, #2B2B2B 0%, #1A1A1A 100%);
    --gradient-rosa-subtle: linear-gradient(135deg, #E8A1B2 0%, #D48A9A 100%);

    /* Sombras - Elegantes */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(43, 43, 43, 0.1);
    --shadow-lg: 0 8px 30px rgba(43, 43, 43, 0.15);
    --shadow-rosa: 0 4px 15px rgba(232, 161, 178, 0.08);

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Tipografía */
    --font-titles: 'Anton', sans-serif;
    --font-body: 'Garet', sans-serif;

    /* Espaciados */
    --section-padding: 80px;
    --container-max: 1200px;
    --border-radius: 8px;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--off-white);
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: 114px;
    transition: padding-top var(--transition-normal);
}

body.header-scrolled {
    padding-top: 70px;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titles), sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }

p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

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

a:hover {
    color: var(--color-crema);
}

.highlight {
    color: var(--color-rosa);
}

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* Botones Base - Estilo Elegante */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--transition-normal);
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(43, 43, 43, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--color-negro);
}

.btn-secondary:hover {
    background: var(--color-negro);
    color: var(--white);
}

.btn-large {
    padding: 16px 40px;
    font-size: 15px;
}