@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Quicksand:wght@400;600;700&family=Playfair+Display:wght@700&family=Montserrat:wght@400;600&display=swap');

/* Base */
:root{ --gold:#bfa14a; --cream:#fffbe6 }
body{ font-family:'Montserrat','Quicksand','Inter',sans-serif; margin:0; color:#222; }

/* Header & Nav */
header{ background:#fff; color:var(--gold); padding:.7rem .5rem; box-shadow:0 2px 12px rgba(191,161,74,.07); position:sticky; top:0; z-index:50; border-radius:0 0 24px 24px }
header .container{ max-width:1200px; margin:0 auto; padding:0 1rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem }
.logo{ font-family:'Playfair Display',serif; font-weight:700; display:flex; align-items:center; gap:.6rem; color:var(--gold); font-size:1.5rem }
.logo-image{ width:40px; height:40px; object-fit:contain; border-radius:8px }
nav{ display:flex; align-items:center; gap:.25rem }
nav a{ color:#222; text-decoration:none; margin:0 .3rem; font-weight:400; font-size:.98rem; padding:.4rem .6rem; border-radius:8px; transition:background .2s,color .2s }
nav a:hover{ background:#f5f5f5; color:var(--gold) }

/* Idioma dropdown */
.lang-toggle{ position:relative }
.lang-btn{ background:#fff; border:2px solid var(--gold); color:var(--gold); font-weight:700; border-radius:8px; padding:.45rem .6rem; cursor:pointer }
.lang-panel{ position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--cream); border-radius:12px; box-shadow:0 10px 24px rgba(191,161,74,.12); padding:.4rem; display:none; min-width:160px }
.lang-panel a{ display:block; padding:.45rem .6rem; color:#222; text-decoration:none; border-radius:8px; font-weight:600 }
.lang-panel a:hover{ background:#f5f5f5; color:var(--gold) }

/* Hamburger */
.nav-toggle{ display:none; background:#fff; border:2px solid var(--gold); color:var(--gold); border-radius:10px; padding:.35rem .6rem; font-size:1.1rem; cursor:pointer }

/* Footer */
footer{ background:var(--cream); color:var(--gold); padding:1.2rem; margin-top:2rem; text-align:center; border-top:1px solid var(--gold) }
.footer-links{ margin-bottom:1.2rem }
.footer-links a{ color:var(--gold); text-decoration:none; margin:0 1rem; font-weight:600; font-size:1.05rem; border-radius:6px; padding:.2rem .5rem; transition:background .2s,color .2s }
.footer-links a:hover{ background:var(--gold); color:#fff }
.footer-social a{ margin:0 .5rem; color:var(--gold); font-size:1.5rem; text-decoration:none }

/* WhatsApp widget */
.wa-widget{ position:fixed; right:18px; bottom:18px; z-index:9997; font-family:'Inter','Quicksand',sans-serif }
.wa-button{ width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; background:#25D366; color:#fff; box-shadow:0 10px 25px rgba(0,0,0,.25), inset 0 -3px 6px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; transition: transform .15s ease, box-shadow .2s ease }
.wa-button:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 -3px 6px rgba(0,0,0,.18) }
.wa-button svg{ width:28px; height:28px }
.wa-panel{ position:fixed; right:18px; bottom:86px; width:300px; max-width:92vw; background:#fff; color:#222; border:1px solid var(--gold); border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.25); overflow:hidden }
.wa-header{ background:var(--cream); color:#6f5b1a; font-weight:600; padding:.75rem 1rem; border-bottom:1px solid var(--gold) }
.wa-list{ list-style:none; margin:0; padding:.25rem 0; max-height:280px; overflow:auto }
.wa-item{ display:flex; align-items:center; gap:.6rem; padding:.55rem 1rem; cursor:pointer; transition: background .15s ease }
.wa-item:hover{ background:#fff9d8 }
.wa-item .dot{ width:10px; height:10px; border-radius:50%; background:#25D366; box-shadow:0 0 0 3px rgba(37,211,102,.15) }
.wa-name{ font-weight:600; color:#1f1f1f }
.wa-note{ font-size:.82rem; color:#555 }
.wa-close{ width:100%; border:0; background:#171723; color:#fff; padding:.6rem 1rem; cursor:pointer }

/* Responsive */
@media (max-width: 900px){
  header .container{ gap:.5rem }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center }
  header nav{ position:fixed; right:12px; top:64px; background:#fff; border:1px solid var(--cream); border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.18); padding:.5rem; flex-direction:column; align-items:stretch; gap:.1rem; display:none; z-index:9999 }
  header nav.open{ display:flex }
  header nav a{ margin:0; padding:.6rem .8rem }
  .lang-toggle{ align-self:stretch; padding:.2rem .2rem }
  .footer-links a{ display:block; margin:.25rem 0 }
}