/* =================================================
   TEMA OSCURO (por defecto)
   ================================================= */

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-main);
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* tarjetas y contenedores */

.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    padding: var(--space-6);
    transition: background var(--transition-base), border var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast);
}

    .card:hover {
        border-color: var(--border-strong);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

/* textos secundarios */

.muted {
    color: var(--text-muted);
}

/* badges */

.badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* botones */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all var(--transition-base);
}

/* botón principal */

.btn-primary {
    background: var(--accent);
    color: #111;
}

    .btn-primary:hover {
        background: var(--accent-hover);
    }

/* botón secundario */

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-soft);
}

    .btn-secondary:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

/* =================================================
   MODO CLARO
   ================================================= */

body.light-mode {
    --bg-main: #f8f6f2;
    --bg-elevated: #ffffff;
    --bg-soft: #f3eee8;
    --bg-card: #ffffff;
    --bg-card-2: #faf8f5;
    --text-main: #1b1b1b;
    --text-soft: #4b4b4b;
    --text-muted: #7a7a7a;
    --border-soft: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.14);
}

/* =================================================
   HEADER
   ================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    backdrop-filter: blur(12px);
    background: rgba(20, 20, 20, 0.75);
    border-bottom: 1px solid var(--border-soft);
}

body.light-mode .site-header {
    background: rgba(255, 255, 255, 0.8);
}

/* =================================================
   FOOTER
   ================================================= */

.site-footer {
    border-top: 1px solid var(--border-soft);
    padding: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* =================================================
   LINKS
   ================================================= */

a {
    transition: color var(--transition-fast);
}

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

/* =================================================
   SECCIONES
   ================================================= */

.section {
    padding: var(--space-11) 0;
}

.section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.section-text {
    color: var(--text-soft);
    max-width: 600px;
}

/* =================================================
   HERO
   ================================================= */

.hero {
    padding: var(--space-12) 0;
}

    .hero h1 {
        font-size: var(--text-3xl);
        line-height: var(--line-tight);
        margin-bottom: var(--space-4);
    }

    .hero p {
        color: var(--text-soft);
        margin-bottom: var(--space-6);
    }

/* =================================================
   IMÁGENES DE ESPACIO
   ================================================= */

.photo-card img {
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

/* =================================================
   MENSAJES
   ================================================= */

.notice {
    font-size: var(--text-sm);
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    color: var(--text-soft);
}