* { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height:1.5; background:#f5f0e1; color:#111; overflow-x:hidden; }
    a { text-decoration:none; color:inherit; }
    ul { list-style:none; }
    .container { max-width:1200px; margin:auto; padding:0 20px; }

    /* ================= HEADER ================= */
    header {
      position: fixed;
      width:100%;
      top:0;
      left:0;
      z-index:100;
      background:rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);
      padding:15px 0;
    }
    .logo img { height:100px; }
    nav.desktop ul { display:flex; gap:25px; align-items:center; }
    nav.desktop a { color:#3d3c3c; font-weight:500; padding:5px 10px; transition:all 0.3s; }
    nav.desktop a:hover { color:#f5a623; }

    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
    .hamburger span { width:28px; height:3px; background:#111; border-radius:2px; transition:all 0.4s; }
    .hamburger.active span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
    .hamburger.active span:nth-child(2){ opacity:0; }
    .hamburger.active span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

    nav.mobile { display:none; position:absolute; top:120px; left:100; width:100%; background:rgba(255,255,255,0.95); flex-direction:column; align-items:center; padding:20px 0; overflow:hidden; }
    nav.mobile.open{ display:flex; }
    nav.mobile a { color:#3d3c3c; padding:10px 0; font-size:18px; transition:color 0.3s; }
    nav.mobile a:hover{ color:#f5a623; }

    /* ================= HERO ================= */
   
.hero {
  height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background: url("https://cdn.pixabay.com/photo/2016/03/24/12/31/relax-1276639_1280.jpg") center/cover no-repeat; /* elimina fixed */
  background-size: cover;
  color:#ffffff;
  padding:0 20px;
  transition: background-position 0.2s;
  position: relative; 
}

.hero::before {
      content:"";
      position:absolute;
      top:0; left:0; width:100%; height:100%;
      background:rgba(96, 70, 21, 0.6);
      
    }


    .hero h1 { font-size:2.5rem; margin-bottom:0px; opacity:0; transform:translateY(30px); transition:all 0.8s ease-out; }
    .hero p { font-size:1.2rem; margin-bottom:30px; opacity:0; transform:translateY(30px); transition:all 0.8s ease-out 0.2s; }
    .hero.show h1, .hero.show p { opacity:1; transform:translateY(0); }
    .btn { padding:12px 30px; background:#f5a623; color:#fffefe; font-weight:bold; border-radius:30px; transition:all 0.3s; opacity:0; transform:translateY(30px); }
    .hero.show .btn { opacity:1; transform:translateY(0); transition-delay:0.4s; }
    .btn:hover { background:#ffffff; color:#614922; transform:scale(1.05); }

    /* ================= SECCIONES ================= */
    section { padding:50px 20px; }
    section h2 { font-size:1.4rem; margin-bottom:40px; color:style="color:#fffff"; text-align:center; }

    .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; }
    .card { background:#bb893a; padding:25px; border-radius:12px; text-align:center; transition: transform 0.3s, background 0.3s; opacity:0; transform:translateY(30px); }
    .card.show { opacity:1; transform:translateY(0); }
    .card:hover { transform:translateY(-10px); background:#f3a931; }

    /* ================= CONTACTO ================= */
    .contact-info { max-width:600px; margin:auto; display:flex; flex-direction:column; gap:25px; align-items:center; opacity:0; transform:translateY(30px); transition:all 0.8s ease-out; }
    .contact-info.show { opacity:1; transform:translateY(0); }
    .contact-item { display:flex; align-items:center; gap:15px; font-size:1.2rem; transition:color 0.3s; }
    .contact-item a { color:#111; }
    .contact-item a:hover { color:#593d10; }
    .contact-item i { font-size:1.5rem; color:#bb893a; }
    

    footer { background:#bb893a; padding:25px 20px; text-align:center; color:#111; font-size:0.9rem; }

    /* ================= WHATSAPP ================= */
    .whatsapp-container { position:fixed; bottom:20px; right:20px; z-index:200; display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity 0.5s; animation:bounce 2s infinite; }
    .whatsapp-container.show { opacity:1; pointer-events:auto; }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform:translateY(0); }
      40% { transform:translateY(-6px); }
      60% { transform:translateY(-3px); }
    }

    .whatsapp-btn { display:flex; align-items:center; gap:10px; background:#25d366; color:#fff; border-radius:50px; padding:15px 20px; box-shadow:0 5px 15px rgba(0,0,0,0.3); cursor:pointer; font-weight:bold; transition:transform 0.3s; position:relative; }
    .whatsapp-btn:hover { transform:scale(1.05); }
    .whatsapp-btn i { font-size:24px; }
    .whatsapp-text { position:absolute; right:120%; top:50%; transform:translateY(-50%) translateX(10px); background:#25d366; color:#fff; border-radius:20px; padding:10px 15px; font-size:0.9rem; white-space:nowrap; opacity:0; transition:all 0.3s; }
    .whatsapp-container:hover .whatsapp-text { opacity:1; transform:translateY(-50%) translateX(0); }

    @media(max-width:768px){
      nav.desktop{ display:none; }
      .hamburger{ display:flex; }
      .contact-info{ gap:15px; }
      .contact-item{ font-size:1rem; }
      .whatsapp-text{ display:none; }
    }