/*
Theme Name: Camping Pro Minimal
Description: Diseño elegante, sobrio y 100% Mobile Friendly.
Version: 3.0
*/

/* --- 1. CONFIGURACIÓN BASE (Sobriedad) --- */
:root {
    --color-texto: #222;          /* Negro suave */
    --color-fondo: #ffffff;       /* Blanco puro */
    --color-acento: #a67c52;      /* Marrón cuero/madera (muy elegante para camping) */
    --fuente-titulos: "Georgia", "Times New Roman", serif; /* Serif da el toque elegante */
    --ancho-maximo: 1000px;       /* Contenido más estrecho para mejor lectura */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-texto);
    background: var(--color-fondo);
    overflow-x: hidden; /* Evita scroll horizontal indeseado en móvil */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* --- 2. HEADER (SOLUCIÓN LOGO Y MENÚ) --- */
.site-header {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.site-header .inner {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Permite que el menú baje si no cabe */
    justify-content: space-between;
    align-items: center;
}

/* Control estricto del Logo */
.site-branding { line-height: 0; }
.site-branding img, 
.custom-logo-link img {
    max-height: 50px; /* Tamaño elegante en móvil y escritorio */
    width: auto;
}

/* Menú de navegación simple */
.main-navigation ul {
    display: flex;
    gap: 20px;
    list-style: none;
}
.main-navigation a {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    color: #555;
}
.main-navigation a:hover { color: var(--color-acento); border-bottom: 1px solid var(--color-acento); }

/* --- 3. CONTENIDO Y TIPOGRAFÍA --- */
.site-main { width: 100%; }

/* Títulos elegantes y pequeños */
h1, h2, h3 {
    font-family: var(--fuente-titulos);
    font-weight: normal; /* Sobrio, no negrita */
    color: #111;
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1 { font-size: 2rem; }       /* Antes era gigante, ahora sobrio */
h2 { font-size: 1.6rem; margin-top: 2.5rem; text-align: center; }
h3 { font-size: 1.2rem; }

/* Texto de lectura centrado */
.entry-content > * {
    max-width: 700px; /* Lectura muy cómoda */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Bloques Anchos (Wide) */
.entry-content > .alignwide {
    max-width: var(--ancho-maximo);
}

/* Bloques Full Width (Portada) */
.entry-content > .alignfull {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

/* --- 4. COMPONENTES SOBRIOS --- */

/* Botones minimalistas */
.wp-block-button__link {
    background: #333 !important;
    color: #fff !important;
    border-radius: 0 !important; /* Cuadrados = más serios */
    font-size: 0.8rem !important;
    padding: 12px 25px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer */
.site-footer {
    border-top: 1px solid #eee;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.8rem;
    color: #999;
    margin-top: 50px;
}

/* --- 5. REGLAS MÓVILES (CRÍTICO) --- */
@media (max-width: 768px) {
    /* Header vertical en móvil */
    .site-header .inner {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Logo centrado */
    .site-branding { margin-bottom: 5px; }

    /* Menú centrado y pequeño */
    .main-navigation ul {
        gap: 15px;
        font-size: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Ajuste de títulos en móvil */
    h1 { font-size: 1.8rem !important; } /* Título portada controlado */
    h2 { font-size: 1.4rem !important; }
    
    /* Arreglo de márgenes en el contenido */
    .entry-content > * { padding-left: 15px; padding-right: 15px; }
    
    /* Columnas apiladas (stack) */
    .wp-block-columns {
        flex-direction: column !important;
    }
    .wp-block-column {
        margin-bottom: 30px;
    }