/* =========================================
   1. VARIABLES Y RESET (Páginas Interiores)
   ========================================= */
:root {
    --bg-color: #EEF3EA;      
    --alveo-green: #4f8257;   
    --charcoal: #4a4d4b;      
    --white: #ffffff;
    --earth-brown: #4A3525;   
    --earth-text: #EFEBE9;    
    
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Hanken Grotesk', sans-serif;
}

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

body {
    /* Mantenemos el viaje de color hacia la tierra */
    background: linear-gradient(to bottom, #EEF3EA 0%, #C8D6C3 40%, #7D8A68 75%, var(--earth-brown) 100%);
    color: var(--charcoal);
    font-family: var(--font-sans);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* =========================================
   2. TEXTURA, CURSOR Y ANIMACIONES
   ========================================= */
.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 0; opacity: 0.15; 
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    mix-blend-mode: multiply;
}

.custom-cursor {
    width: 15px; height: 15px; background-color: var(--alveo-green); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out, background-color 0.3s ease; mix-blend-mode: difference;
}

.fade-up { opacity: 0; transform: translateY(40px); transition: 1s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-in { opacity: 0; transition: 1s ease-out; }
.fade-in.visible { opacity: 1; }
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* =========================================
   3. NAVBAR GLOBALES Y BOTONES
   ========================================= */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem 5%; position: fixed; width: 100%; z-index: 100; top: 0;
    background: rgba(238, 243, 234, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(79, 130, 87, 0.1);
}
.brand-logo { height: 70px; object-fit: contain; }
.nav-links { display: flex; gap: 2.5rem; align-items: center; list-style: none; }
.nav-links a { text-decoration: none; color: var(--charcoal); font-weight: 600; font-size: 0.95rem; transition: color 0.3s; }
.nav-links a:hover { color: var(--alveo-green); }

.btn-solid { display: inline-block; background: var(--alveo-green); color: var(--white); padding: 0.8rem 2rem; text-decoration: none; border-radius: 50px; font-weight: 600; transition: 0.3s; border: none; }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(79, 130, 87, 0.2); }
.btn-outline { border: 1px solid var(--charcoal); padding: 0.5rem 1.5rem; border-radius: 50px; }

/* =========================================
   4. ESTRUCTURA DE LA PÁGINA INTERIOR
   ========================================= */
.service-detail-section { 
    padding: 12rem 8% 6rem;
    position: relative;
    z-index: 1;
}

.service-intro { text-align: center; max-width: 800px; margin: 0 auto 5rem; }
.badge { 
    background: rgba(255, 255, 255, 0.5); 
    color: var(--alveo-green); 
    padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; 
    text-transform: uppercase; letter-spacing: 1px; display: inline-block; margin-bottom: 1.5rem; 
    border: 1px solid rgba(79, 130, 87, 0.2);
}
.service-intro h2 { font-family: var(--font-serif); font-size: 3.5rem; color: var(--alveo-green); margin-bottom: 1.5rem; }
.service-intro p { font-size: 1.15rem; line-height: 1.7; color: var(--charcoal); opacity: 0.9; }

/* =========================================
   5. TIMELINE 
   ========================================= */
.timeline-container { 
    max-width: 900px; margin: 0 auto 6rem; position: relative; 
    padding-left: 3rem; border-left: 2px dashed rgba(79, 130, 87, 0.3); 
}
.timeline-item { position: relative; margin-bottom: 3.5rem; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot { 
    position: absolute; left: -3.8rem; top: 20px; 
    width: 24px; height: 24px; background: var(--bg-color); 
    border: 4px solid var(--alveo-green); border-radius: 50%; 
    box-shadow: 0 0 0 6px rgba(255,255,255,0.4); 
}

/* Tarjeta Arcilla del Timeline */
.timeline-content { 
    background-color: rgba(238, 243, 234, 0.85);
    backdrop-filter: blur(5px);
    border-radius: 25px; padding: 2.5rem;
    box-shadow: 10px 10px 20px rgba(74, 77, 75, 0.04), -10px -10px 20px rgba(255, 255, 255, 0.6), inset 4px 4px 10px rgba(255, 255, 255, 0.5), inset -4px -4px 10px rgba(74, 77, 75, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 15px 15px 30px rgba(74, 77, 75, 0.08), -15px -15px 30px rgba(255, 255, 255, 0.8), inset 4px 4px 10px rgba(255, 255, 255, 0.5), inset -4px -4px 10px rgba(74, 77, 75, 0.02);
}
.timeline-content h3 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--alveo-green); margin-bottom: 1rem; }
.timeline-content p { color: var(--charcoal); line-height: 1.6; font-size: 1.05rem; opacity: 0.9;}

/* =========================================
   6. GALERÍA MASONRY
   ========================================= */
.gallery-section h3 { font-family: var(--font-serif); font-size: 3rem; color: var(--alveo-green); text-align: center; margin-bottom: 4rem; }
.masonry-grid { column-count: 2; column-gap: 30px; max-width: 1000px; margin: 0 auto; }
.masonry-img { 
    width: 100%; border-radius: 25px; margin-bottom: 30px; display: block; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 
}
.masonry-img:hover { transform: scale(1.03); z-index: 10; position: relative; }

/* =========================================
   7. FOOTER TIERRA 
   ========================================= */
footer { padding: 6rem 8% 3rem; background-color: transparent; color: var(--earth-text); position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: start; margin-bottom: 5rem; }
.map-container { width: 100%; height: 100%; min-height: 450px; border-radius: 25px; overflow: hidden; box-shadow: inset 5px 5px 15px rgba(0,0,0,0.3), 5px 5px 15px rgba(255,255,255,0.02); border: 2px solid rgba(255,255,255,0.05); }
.map-container iframe { width: 100%; height: 100%; border: none; filter: sepia(30%) grayscale(20%) contrast(90%); }
.footer-contact h2 { font-family: var(--font-serif); font-size: 3.2rem; color: var(--earth-text); margin-bottom: 1rem; }
.footer-contact p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 3rem; line-height: 1.6;}
.minimal-form { display: flex; flex-direction: column; gap: 2rem; }
.input-group input, .minimal-form textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(239, 235, 233, 0.3); color: var(--earth-text); padding: 12px 0; font-family: var(--font-sans); font-size: 1.05rem; transition: 0.3s; }
.input-group input:focus, .minimal-form textarea:focus { outline: none; border-bottom-color: var(--white); }
.input-group input::placeholder, .minimal-form textarea::placeholder { color: rgba(239, 235, 233, 0.5); }
.minimal-form .btn-solid { background: var(--bg-color); color: var(--earth-brown); align-self: flex-start; margin-top: 1rem; }
.minimal-form .btn-solid:hover { background: var(--white); transform: translateY(-3px); }
.footer-bottom { text-align: center; border-top: 1px solid rgba(239, 235, 233, 0.1); padding-top: 2rem; font-size: 0.85rem; opacity: 0.5; }

/* =========================================
   8. RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    .service-detail-section { padding: 9rem 5% 4rem; }
    .nav-links { display: none; }
    .masonry-grid { column-count: 1; }
    .service-intro h2 { font-size: 2.8rem; }
    .timeline-container { padding-left: 1.5rem; margin-left: 1rem; border-left: 2px dashed rgba(79, 130, 87, 0.2); }
    .timeline-dot { left: -2.3rem; width: 20px; height: 20px; top: 30px;}
    .timeline-content { padding: 1.8rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 3rem; }
    .custom-cursor { display: none; }
    * { cursor: auto; }
}

/* =========================================
   9. BOTÓN WHATSAPP FLOTANTE
   ========================================= */
.whatsapp-float {
    position: fixed; 
    bottom: 30px; right: 30px; 
    width: 60px; height: 60px;
    background-color: #25D366; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2); 
    z-index: 9990; /* Por encima de todo, pero debajo del preloader */
    transition: 0.3s ease;
}

.whatsapp-float:hover { 
    transform: scale(1.1) translateY(-5px); 
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); 
}

.whatsapp-float svg { width: 34px; height: 34px; }

/* WhatsApp Responsive */
@media (max-width: 768px) {
    .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; }
    .whatsapp-float svg { width: 28px; height: 28px; }
}