/*
Theme Name: Hotel Sombrero de Paja
Theme URI: http://localhost/
Author: Diseñado con pasión en la Amazonía. Dev by LC
Description: Theme boutique 100% a medida para el Hotel Sombrero de Paja. Diseño orgánico, eco-lujo.
Version: 1.0.0
*/

:root {
    /* === PALETA DE COLORES (Eco-Lujo / Orgánico con Acentos Bioluminiscentes) === */
    --color-arena: #F7F5F0;          
    --color-tierra: #8C705F;         
    --color-terracota: #B76E58;      
    --color-oliva: #6B705C;          
    --color-oro-cobrizo: #D4A373;    
    --color-madera-oscura: #3A3532;  
    --color-blanco: #FFFFFF;
    --color-glass: rgba(255, 255, 255, 0.75); 

    /* Nuevos acentos Cyber-Bioluminiscentes */
    --neon-gold: rgba(212, 163, 115, 0.45);
    --neon-terracota: rgba(183, 110, 88, 0.4);
    --neon-oliva: rgba(107, 112, 92, 0.35);
    --border-crystal: 1px solid rgba(212, 163, 115, 0.2);

    /* === TIPOGRAFÍA FLUIDA (Clamp) === */
    --font-principal: 'Inter', system-ui, -apple-system, sans-serif;
    --font-titulos: 'Playfair Display', serif; 
    
    --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
    --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --text-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
    --text-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
    --text-2xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
    --text-hero: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);

    /* === INTERFAZ (UI ELEVADA) === */
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 32px;

    /* Sombra con aura expansiva de baja intensidad (Efecto bioluminiscente de gema) */
    --shadow-glass: 0 12px 40px 0 rgba(140, 112, 95, 0.08); 
    --shadow-btn: 0 6px 20px 0 rgba(212, 163, 115, 0.35), 0 0 15px 0 var(--neon-gold);
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* === Z-INDEX CONTROLADO === */
    --z-base: 1;
    --z-content: 10;
    --z-glass: 50;
    --z-header: 100;
    --z-modal: 900;
    --z-drawer: 950;
    --z-whatsapp: 1000;
}

/* === RESETS Y REGLAS ESTRICTAS === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-principal);
    font-size: var(--text-base);
    color: var(--color-madera-oscura);
    background-color: var(--color-arena);
    line-height: 1.6;
    overflow-x: hidden; /* Evita que la web se desborde a la derecha en móviles */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titulos);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-madera-oscura);
    overflow-wrap: break-word; /* Nunca se saldrán de la pantalla */
    word-wrap: break-word;
}

p, span, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* === REGLA DE ORO: IMÁGENES PERFECTAS === */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover; /* Nunca más imágenes deformadas */
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

button, input, textarea, select {
    font: inherit;
    border: none;
    outline: none;
}

/* Contenedor Global que usaremos para no pegar el contenido a los bordes */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}