:root{
    --jungle:#1b2b22;
    --jungle-deep:#10190f;
    --terracotta:#c1693c;
    --terracotta-dark:#a3522c;
    --sand:#e8dcc8;
    --bone:#f6f2ea;
    --gold:#b9975b;
    --ink:#1c1a16;
    --serif: 'Cormorant Garamond', serif;
    --sans: 'Jost', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    background:var(--bone);
    color:var(--ink);
    overflow-x:hidden;
    font-weight:300;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font-family:var(--sans);cursor:pointer;border:none;background:none;}
  ::selection{background:var(--terracotta);color:var(--bone);}

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;top:0;left:0;width:100%;z-index:500;
    display:flex;align-items:center;justify-content:space-between;
    padding:28px 5%;
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  .nav.scrolled{
    background:rgba(27,43,34,0.96);
    padding:16px 5%;
    box-shadow:0 4px 24px rgba(0,0,0,0.2);
  }
  .nav-logo{
    font-family:var(--serif);font-size:1.6rem;letter-spacing:0.18em;
    color:var(--bone);font-weight:500;
  }
  .nav-links{display:flex;gap:34px;align-items:center;}
  .nav-links a{
    color:var(--bone);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
    position:relative;padding-bottom:4px;
  }
  .nav-links a::after{
    content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
    transition:width .3s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .lang-toggle{
    border:1px solid rgba(246,242,234,0.4);color:var(--bone);
    padding:6px 14px;font-size:0.72rem;letter-spacing:0.12em;border-radius:30px;
    transition:all .3s ease;
  }
  .lang-toggle:hover{border-color:var(--gold);color:var(--gold);}
  .nav-burger{display:none;color:var(--bone);font-size:1.6rem;}
  @media(max-width:860px){
    .nav-links{display:none;}
    .nav-burger{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;height:100vh;min-height:640px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .hero img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:brightness(0.55) saturate(1.05);
  }
  .hero-content{
    position:relative;z-index:5;text-align:center;color:var(--bone);
    padding:0 20px;
  }
  .hero-tag{
    font-size:0.78rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--gold);
    margin-bottom:22px;display:block;
  }
  .hero h1{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(2.8rem,8vw,6.2rem);line-height:1.05;letter-spacing:0.01em;
  }
  .hero h1 em{font-style:italic;color:var(--gold);font-weight:300;}
  .hero p{
    margin-top:24px;font-size:clamp(0.95rem,1.4vw,1.15rem);
    max-width:560px;margin-left:auto;margin-right:auto;
    color:rgba(246,242,234,0.85);font-weight:300;line-height:1.6;
  }
  .hero-scroll{
    position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
    color:var(--bone);font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;
    display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5;
  }
  .hero-scroll .line{width:1px;height:34px;background:rgba(246,242,234,0.5);overflow:hidden;}
  .hero-scroll .line::after{
    content:'';display:block;width:100%;height:50%;background:var(--gold);
    animation:scrollLine 1.8s infinite ease-in-out;
  }
  @keyframes scrollLine{0%{transform:translateY(-100%);}100%{transform:translateY(200%);}}

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease, transform .9s ease;}
  .reveal.visible{opacity:1;transform:translateY(0);}

  /* ---------- SECTION SHELLS ---------- */
  section{padding:120px 5%;}
  .section-head{text-align:center;max-width:680px;margin:0 auto 70px;}
  .section-tag{
    font-size:0.74rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--terracotta);
    margin-bottom:16px;display:block;
  }
  .section-head h2{
    font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.4vw,3.2rem);
    color:var(--jungle);line-height:1.15;
  }
  .section-head p{margin-top:18px;color:#5b5648;line-height:1.7;font-size:0.98rem;}

  /* ---------- FILOSOFIA ---------- */
  .philosophy{
    display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
    background:var(--jungle);color:var(--bone);
  }
  .philosophy img{border-radius:2px;height:560px;object-fit:cover;}
  .philosophy-text .section-tag{color:var(--gold);}
  .philosophy-text h2{
    font-family:var(--serif);font-weight:400;font-style:italic;
    font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.3;color:var(--bone);margin-bottom:24px;
  }
  .philosophy-text p{color:rgba(246,242,234,0.78);line-height:1.85;font-size:1rem;margin-bottom:18px;}
  .stat-row{display:flex;gap:40px;margin-top:40px;flex-wrap:wrap;}
  .stat-row div{min-width:110px;}
  .stat-row .num{font-family:var(--serif);font-size:2.2rem;color:var(--gold);}
  .stat-row .lbl{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(246,242,234,0.6);margin-top:4px;}
  @media(max-width:860px){
    .philosophy{grid-template-columns:1fr;}
    .philosophy img{height:340px;order:-1;}
  }

  /* ---------- VILLAS GRID ---------- */
  .villas{background:var(--bone);}
  .villas-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
    max-width:1320px;margin:0 auto;
  }
  .villa-card{
    position:relative;background:#fff;overflow:hidden;border-radius:2px;
    box-shadow:0 14px 40px rgba(20,20,10,0.07);
    transition:transform .45s ease, box-shadow .45s ease;
  }
  .villa-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(20,20,10,0.15);}
  .villa-img-wrap{position:relative;height:300px;overflow:hidden;}
  .villa-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
  .villa-card:hover .villa-img-wrap img{transform:scale(1.08);}
  .villa-price-tag{
    position:absolute;top:16px;left:16px;background:rgba(27,43,34,0.88);color:var(--gold);
    font-family:var(--serif);font-size:0.95rem;padding:6px 16px;border-radius:30px;letter-spacing:0.02em;
  }
  .villa-compare-check{
    position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:6px;
    background:rgba(246,242,234,0.92);padding:6px 12px;border-radius:30px;
    font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--jungle);
  }
  .villa-body{padding:28px 26px 30px;}
  .villa-loc{
    font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--terracotta);
    margin-bottom:10px;display:block;
  }
  .villa-body h3{font-family:var(--serif);font-size:1.6rem;color:var(--jungle);font-weight:500;}
  .villa-meta{
    display:flex;gap:18px;margin:16px 0 18px;color:#6b6657;font-size:0.82rem;
    border-top:1px solid #eee5d6;border-bottom:1px solid #eee5d6;padding:14px 0;
  }
  .villa-desc{font-size:0.88rem;line-height:1.65;color:#5b5648;margin-bottom:22px;min-height:62px;}
  .villa-btn{
    display:inline-flex;align-items:center;gap:10px;font-size:0.76rem;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--jungle);border-bottom:1px solid var(--terracotta);padding-bottom:6px;
    transition:color .3s ease, gap .3s ease;
  }
  .villa-btn:hover{color:var(--terracotta);gap:16px;}
  @media(max-width:1080px){.villas-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:680px){.villas-grid{grid-template-columns:1fr;}}

  /* ---------- COMPARATOR BAR ---------- */
  .compare-bar{
    position:fixed;bottom:0;left:0;width:100%;z-index:600;
    background:var(--jungle-deep);color:var(--bone);
    padding:18px 5%;display:flex;align-items:center;justify-content:space-between;
    transform:translateY(110%);transition:transform .4s ease;
    box-shadow:0 -10px 30px rgba(0,0,0,0.3);
  }
  .compare-bar.active{transform:translateY(0);}
  .compare-bar-names{font-size:0.85rem;letter-spacing:0.04em;color:rgba(246,242,234,0.85);}
  .compare-bar-names strong{color:var(--gold);}
  .compare-actions{display:flex;gap:14px;}
  .btn-solid{
    background:var(--terracotta);color:var(--bone);padding:11px 26px;font-size:0.74rem;
    letter-spacing:0.12em;text-transform:uppercase;border-radius:30px;transition:background .3s ease;
  }
  .btn-solid:hover{background:var(--terracotta-dark);}
  .btn-ghost{
    border:1px solid rgba(246,242,234,0.4);color:var(--bone);padding:11px 22px;font-size:0.74rem;
    letter-spacing:0.12em;text-transform:uppercase;border-radius:30px;
  }

  /* ---------- MAP ---------- */
  .map-section{background:var(--bone);}
  #map{height:520px;width:100%;border-radius:2px;filter:saturate(0.9);}
  .leaflet-popup-content{font-family:var(--sans);}
  .leaflet-popup-content strong{font-family:var(--serif);font-size:1.05rem;}

  /* ---------- CONTACT ---------- */
  .contact{background:var(--jungle);color:var(--bone);}
  .contact-wrap{
    display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;max-width:1200px;margin:0 auto;
  }
  .contact-info h2{
    font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);font-weight:400;margin-bottom:22px;
  }
  .contact-info p{color:rgba(246,242,234,0.75);line-height:1.8;margin-bottom:28px;}
  .contact-detail{margin-bottom:16px;font-size:0.92rem;color:rgba(246,242,234,0.85);}
  .contact-detail span{color:var(--gold);display:block;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:4px;}
  form{display:flex;flex-direction:column;gap:18px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  input,select,textarea{
    background:rgba(246,242,234,0.06);border:1px solid rgba(246,242,234,0.25);
    color:var(--bone);padding:14px 16px;font-family:var(--sans);font-size:0.92rem;border-radius:2px;
    outline:none;transition:border-color .3s ease;
  }
  input::placeholder,textarea::placeholder{color:rgba(246,242,234,0.45);}
  input:focus,select:focus,textarea:focus{border-color:var(--gold);}
  textarea{resize:vertical;min-height:110px;}
  select option{color:#000;}
  .form-submit{
    background:var(--terracotta);color:var(--bone);padding:16px;font-size:0.8rem;
    letter-spacing:0.14em;text-transform:uppercase;border-radius:2px;transition:background .3s ease;
  }
  .form-submit:hover{background:var(--terracotta-dark);}
  .form-success{
    color:var(--gold);font-size:0.85rem;margin-top:6px;display:none;
  }
  @media(max-width:860px){.contact-wrap{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--jungle-deep);color:rgba(246,242,234,0.6);
    padding:50px 5% 30px;text-align:center;font-size:0.8rem;
  }
  footer .foot-logo{
    font-family:var(--serif);font-size:1.5rem;color:var(--bone);letter-spacing:0.18em;margin-bottom:14px;
  }
  footer .foot-links{display:flex;justify-content:center;gap:26px;margin:20px 0;flex-wrap:wrap;}
  footer .foot-links a{font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(246,242,234,0.6);}
  footer .foot-links a:hover{color:var(--gold);}
  footer .copy{margin-top:24px;font-size:0.72rem;color:rgba(246,242,234,0.35);}

  /* ---------- MODAL ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(16,25,15,0.92);z-index:1000;
    display:flex;align-items:center;justify-content:center;padding:30px;
    opacity:0;visibility:hidden;transition:opacity .35s ease;
  }
  .modal-overlay.active{opacity:1;visibility:visible;}
  .modal{
    background:var(--bone);max-width:980px;width:100%;max-height:88vh;overflow-y:auto;
    border-radius:2px;position:relative;
  }
  .modal-close{
    position:absolute;top:18px;right:18px;z-index:10;
    background:rgba(27,43,34,0.85);color:var(--bone);width:40px;height:40px;border-radius:50%;
    font-size:1.3rem;display:flex;align-items:center;justify-content:center;
  }
  .modal-gallery{position:relative;height:420px;overflow:hidden;background:#000;}
  .modal-gallery img{width:100%;height:100%;object-fit:cover;}
  .modal-gallery-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:100%;
    display:flex;justify-content:space-between;padding:0 16px;
  }
  .gallery-arrow{
    background:rgba(246,242,234,0.85);color:var(--jungle);width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  }
  .modal-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
  .modal-dots span{width:7px;height:7px;border-radius:50%;background:rgba(246,242,234,0.5);}
  .modal-dots span.active{background:var(--gold);}
  .modal-content{padding:40px;}
  .modal-content .villa-loc{margin-bottom:8px;}
  .modal-content h2{font-family:var(--serif);font-size:2.2rem;color:var(--jungle);margin-bottom:10px;}
  .modal-price{font-family:var(--serif);font-size:1.4rem;color:var(--terracotta);margin-bottom:24px;}
  .modal-meta{display:flex;gap:30px;margin-bottom:26px;flex-wrap:wrap;}
  .modal-meta div{text-align:left;}
  .modal-meta .num{font-family:var(--serif);font-size:1.5rem;color:var(--jungle);}
  .modal-meta .lbl{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:#8a8470;}
  .modal-content p.desc{line-height:1.85;color:#5b5648;margin-bottom:28px;}
  .amenities{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:30px;}
  .amenities div{
    font-size:0.86rem;color:#4a4638;padding:10px 0;border-bottom:1px solid #e8dcc8;
    display:flex;align-items:center;gap:10px;
  }
  .amenities div::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--terracotta);flex-shrink:0;}
  @media(max-width:680px){.amenities{grid-template-columns:1fr;}.modal-gallery{height:260px;}.modal-content{padding:26px;}}

  /* ---------- COMPARE TABLE MODAL ---------- */
  .compare-table{width:100%;border-collapse:collapse;margin-top:10px;}
  .compare-table th,.compare-table td{
    padding:16px 14px;text-align:left;border-bottom:1px solid #e8dcc8;font-size:0.88rem;vertical-align:top;
  }
  .compare-table th{
    font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:#8a8470;font-weight:400;
  }
  .compare-table td.villa-col-name{font-family:var(--serif);font-size:1.15rem;color:var(--jungle);}
  .compare-table img{width:100%;height:120px;object-fit:cover;border-radius:2px;margin-bottom:10px;}

  /* ---------- TOAST ---------- */
  .toast{
    position:fixed;bottom:30px;right:30px;background:var(--jungle);color:var(--bone);
    padding:16px 26px;border-radius:2px;font-size:0.86rem;z-index:1200;
    transform:translateY(140%);opacity:0;transition:transform .4s ease, opacity .4s ease;
    border-left:3px solid var(--gold);max-width:320px;
  }
  .toast.show{transform:translateY(0);opacity:1;}