/*
Theme Name: Casa La Peña - Neve Child
Theme URI: https://vthuelva.andaluciavibes.com/
Author: Tu nombre
Author URI: https://tu-web.com/
Description: Child theme de Neve para Casa La Peña - Casa vacacional en La Redondela, Huelva
Template: neve
Version: 1.0.0
License: GPL v2 or later
Text Domain: neve-child
*/

/* ==========================================================================
   Variables CSS personalizadas
   ========================================================================== */
:root {
    /* Colores principales - Inspirados en la costa de Huelva */
    --clp-primary: #1a5f7a;        /* Azul profundo del mar */
    --clp-primary-dark: #0d3d52;   /* Azul más oscuro */
    --clp-secondary: #57c4e5;      /* Azul claro del cielo */
    --clp-accent: #22c55e;         /* Verde para CTAs */
    --clp-accent-hover: #16a34a;   /* Verde hover */
    
    /* Colores neutros */
    --clp-dark: #2d3436;
    --clp-gray: #636e72;
    --clp-light-gray: #b2bec3;
    --clp-bg-light: #f8f9fa;
    --clp-white: #ffffff;
    
    /* Sombras */
    --clp-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --clp-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --clp-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --clp-shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
    
    /* Espaciados */
    --clp-spacing-xs: 0.5rem;
    --clp-spacing-sm: 1rem;
    --clp-spacing-md: 2rem;
    --clp-spacing-lg: 3rem;
    --clp-spacing-xl: 4rem;
    
    /* Bordes redondeados */
    --clp-radius-sm: 4px;
    --clp-radius-md: 8px;
    --clp-radius-lg: 16px;
    --clp-radius-full: 9999px;
    
    /* Transiciones */
    --clp-transition: all 0.3s ease;
}

/* ==========================================================================
   Estilos globales
   ========================================================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Contenedor máximo para el contenido */
.clp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--clp-spacing-md);
}

/* ==========================================================================
   Sobrescribir estilos de Neve
   ========================================================================== */

/* Personalizar el header de Neve */
.header-main {
    box-shadow: var(--clp-shadow-sm);
}

/* Personalizar botones de Neve */
.button, .wp-block-button__link {
    transition: var(--clp-transition);
    font-weight: 600;
}

.button:hover, .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--clp-shadow-md);
}

/* ==========================================================================
   Componentes reutilizables
   ========================================================================== */

/* Títulos de sección */
.clp-section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--clp-dark);
    margin-bottom: var(--clp-spacing-sm);
    line-height: 1.2;
}

.clp-section-subtitle {
    font-size: 1.125rem;
    color: var(--clp-gray);
    margin-bottom: var(--clp-spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Botones personalizados */
.clp-btn {
    display: inline-block;
    padding: 12px 32px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--clp-radius-full);
    transition: var(--clp-transition);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.clp-btn-primary {
    background-color: var(--clp-accent);
    color: var(--clp-white);
}

.clp-btn-primary:hover {
    background-color: var(--clp-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--clp-shadow-lg);
    color: var(--clp-white);
}

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

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

/* Cards */
.clp-card {
    background: var(--clp-white);
    border-radius: var(--clp-radius-lg);
    padding: var(--clp-spacing-md);
    box-shadow: var(--clp-shadow-md);
    transition: var(--clp-transition);
}

.clp-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--clp-shadow-xl);
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

/* Texto */
.clp-text-center { text-align: center; }
.clp-text-primary { color: var(--clp-primary); }
.clp-text-secondary { color: var(--clp-secondary); }
.clp-text-accent { color: var(--clp-accent); }

/* Espaciados */
.clp-mt-1 { margin-top: var(--clp-spacing-xs); }
.clp-mt-2 { margin-top: var(--clp-spacing-sm); }
.clp-mt-3 { margin-top: var(--clp-spacing-md); }
.clp-mt-4 { margin-top: var(--clp-spacing-lg); }
.clp-mt-5 { margin-top: var(--clp-spacing-xl); }

.clp-mb-1 { margin-bottom: var(--clp-spacing-xs); }
.clp-mb-2 { margin-bottom: var(--clp-spacing-sm); }
.clp-mb-3 { margin-bottom: var(--clp-spacing-md); }
.clp-mb-4 { margin-bottom: var(--clp-spacing-lg); }
.clp-mb-5 { margin-bottom: var(--clp-spacing-xl); }

.clp-py-1 { padding-top: var(--clp-spacing-xs); padding-bottom: var(--clp-spacing-xs); }
.clp-py-2 { padding-top: var(--clp-spacing-sm); padding-bottom: var(--clp-spacing-sm); }
.clp-py-3 { padding-top: var(--clp-spacing-md); padding-bottom: var(--clp-spacing-md); }
.clp-py-4 { padding-top: var(--clp-spacing-lg); padding-bottom: var(--clp-spacing-lg); }
.clp-py-5 { padding-top: var(--clp-spacing-xl); padding-bottom: var(--clp-spacing-xl); }

/* Fondos */
.clp-bg-light { background-color: var(--clp-bg-light); }
.clp-bg-primary { background-color: var(--clp-primary); }
.clp-bg-white { background-color: var(--clp-white); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --clp-spacing-xs: 0.25rem;
        --clp-spacing-sm: 0.75rem;
        --clp-spacing-md: 1.5rem;
        --clp-spacing-lg: 2rem;
        --clp-spacing-xl: 3rem;
    }
    
    .clp-container {
        padding: 0 var(--clp-spacing-sm);
    }
}