/* base.css — Variables globales, reset y utilidades compartidas en todas las páginas */

:root {
    /* Colores Principales */
    --color-rose: #FFB6C1;
    --color-rose-dark: #FF85A1;
    --color-rose-deep: #D4538A;
    --color-rose-light: #FFE4EC;
    --color-blush: #FFCCD5;
    --color-petal: #FFF0F3;

    /* Colores Secundarios */
    --color-lavender: #E8D5F5;
    --color-lavender-dark: #C9A7E8;
    --color-lavender-deep: #9B59C4;
    --color-mint: #D4F5EC;
    --color-peach: #FFD9C0;
    --color-sky: #D0E8FF;
    --color-lemon: #FFF3C4;
    --color-lilac: #EDD9FF;

    /* Colores de Texto */
    --color-text-primary: #6B2D4E;
    --color-text-secondary: #A0527A;
    --color-text-muted: #C88AAE;
    --color-text-link: #D4538A;
    --color-text-on-dark: #FFF0F3;

    /* Colores de Bordes */
    --color-border-light: #FFD6E4;
    --color-border-medium: #FFAAC8;
    --color-border-strong: #FF85A1;

    /* Tipografía */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Nunito', 'Lato', sans-serif;
    --font-accent: 'Dancing Script', cursive;

    /* Radios de Botones */
    --btn-radius-pill: 50px;
    --btn-radius-rounded: 16px;
    --btn-radius-soft: 10px;

    /* Efectos */
    --gradient-hero: linear-gradient(135deg, #FFF0F3 0%, #F3EAFF 50%, #FFF5E4 100%);
    --gradient-blush: linear-gradient(180deg, #FFF0F3, #FFE4EC);
    --gradient-pastel: linear-gradient(135deg, #FFB6C1, #E8D5F5, #D4F5EC);
    --gradient-dreamy: linear-gradient(120deg, #FFEEF5, #F3EAFF, #EAF5FF);

    --shadow-sm: 0 2px 8px rgba(255, 133, 161, 0.12);
    --shadow-md: 0 4px 16px rgba(255, 133, 161, 0.18);
    --shadow-lg: 0 8px 32px rgba(255, 133, 161, 0.22);
    --shadow-glow: 0 0 24px rgba(255, 182, 193, 0.5);

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --duration-slow: 400ms;
    --duration-base: 250ms;
    --duration-fast: 150ms;

    --header-height: 80px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 15px;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background-color: var(--color-petal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 640px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 40px; } }

/* Header y Footer expandidos en escritorio */
@media (min-width: 1200px) {
    .header .container,
    .footer .container {
        max-width: 1400px;
    }
}

/* Tap feedback global */
button, a, [role="button"] {
    -webkit-tap-highlight-color: rgba(255, 133, 161, 0.2);
}
button:active, a:active { transform: scale(0.97); }

/* Animación genérica de entrada */
.animate-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.js-enabled .animate-in {
    opacity: 0;
    transform: translateY(24px);
}
.js-enabled .animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}