/* =========================
   RESET
   ========================= */
* { margin:0; padding:0; box-sizing:border-box; }

/* =========================
   BASE
   ========================= */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f7f6f2;
  color: #1a1a1a;
  line-height: 1.65;
  font-weight: 300;
}

:root { --header-height: 88px; }

/* =========================
   HEADER
   ========================= */
.site-header {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--header-height);
  background:#fff;
  border-bottom:1px solid #e5e5e5;
  z-index:1000;
}

.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 60px;
  position:relative;
}

.logo { height:24px; }

/* =========================
   MAIN NAV DESKTOP
   ========================= */
.main-nav ul {
  list-style:none;
  display:flex;
  align-items:center;
  gap:16px;
}

.main-nav a {
  text-decoration:none;
  color:#1a1a1a;
  font-size:13px;
  letter-spacing:0.4px;
}

.main-nav a:hover { opacity:0.6; }

/* Submenu Desktop */
.has-submenu { position: relative; }
.has-submenu .submenu {
  display: none;
  position: absolute;
  top:100%;
  left:0;
  background: #fff;
  margin-top:0;
  padding:8px 0;
  min-width:160px;
}
.has-submenu:hover .submenu,
.has-submenu .submenu:hover {
  display:block;
}
.has-submenu .submenu li a {
  display:block;
  padding:8px 16px;
  font-size:13px;
  color:#1a1a1a;
  white-space:nowrap;
}

/* Scroll margin para subsecciones */
#collection-dynamics { scroll-margin-top: calc(var(--header-height) + 10px); }
#collection-minimini { scroll-margin-top: calc(var(--header-height) + 30px); }
#maintenance { scroll-margin-top: calc(var(--header-height) + 10px); }

/* LANG SWITCH */
.lang-switch { font-size:12px; letter-spacing:0.5px; }
.lang-switch .active { font-weight:500; }

/* =========================
   MENU TOGGLE (HAMBURGUESA)
   ========================= */
.menu-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:30px;
  height:24px;
  flex-direction:column;
  justify-content:space-between;
  padding:0;
  position:relative;
}
.menu-toggle .bar {
  display:block;
  width:100%;
  height:3px;
  background-color:#1a1a1a;
  border-radius:2px;
  transition:all 0.3s ease;
}

/* =========================
   HERO
   ========================= */
.hero { position:relative; margin-top:88px; }
.hero img { width:100%; display:block; }
.hero-quote {
  position:absolute;
  top:20%;
  left:6%;
  max-width:460px;
  font-size:20px;
  line-height:1.7;
  font-weight:300;
  color:#f1f0ea;
  letter-spacing:0.3px;
}

/* =========================
   SECTIONS
   ========================= */
.section { padding:60px 10%; }
.section-title { font-size:32px; margin-bottom:32px; }
.subsection-title { font-size:26px; margin:24px 0 28px; }

/* ANIMALS */
.animal { margin-bottom:48px; }
.animal img { width:100%; display:block; }

/* BACKGROUND SECTIONS */
.bg {
  min-height:80vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  padding-top:60px;
  padding-bottom:60px;
}
.heritage { background-image: url("../images/backgrounds/heritage.jpg"); }
.craft { background-image: url("../images/backgrounds/craftsmanship.jpg"); }
.eco { background-image: url("../images/backgrounds/eco.jpg"); }
.maintenance { background-image: url("../images/backgrounds/maintenance.jpg"); }
.overlay {
  background: rgba(255,255,255,0.9);
  padding:72px 68px;
  max-width:640px;
  margin-left:8%;
}
.overlay p { font-size:15px; line-height:1.75; }
.overlay blockquote { margin-top:24px; font-style:italic; }

/* FULL IMAGES */
.full-image, .final-image img { width:100%; display:block; }

/* HEADINGS */
h2 { font-size:32px; font-weight:400; letter-spacing:0.6px; }
h3 { font-size:26px; font-weight:400; letter-spacing:0.4px; }

/* ANCHOR OFFSET FIX FOR FIXED HEADER */
#collection, #heritage, #craft, #eco, #contact { scroll-margin-top:var(--header-height); }

/* =========================
   PACKAGING
   ========================= */
.packaging .divider {
  width: 200px;
  height: 1px;
  background-color: #c0c0c0;
  margin: 24px auto;
}
.packaging h2 { text-align: center; margin: 16px 0 32px; }
.packaging p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  text-align: center;
  color: #1a1a1a;
  max-width: 640px;
  margin: 24px auto 48px;
  letter-spacing: 0.3px;
  font-style: italic;
}

/* =========================
   CONTACT
   ========================= */
.contact .divider {
  width: 200px;
  height: 1px;
  background-color: #c0c0c0;
  margin: 24px auto;
}
.contact h2 { text-align: center; margin: 16px 0 24px; }
.contact-text {
  font-size: 14px;
  text-align: center;
  margin-bottom: 32px;
}

/* Contact images con captions */
.contact-images {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-item img {
  width: 200px; /* tamaño de desktop */
  height: auto;
}
.contact-caption {
  margin-top: 8px;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

/* =========================
   COOKIE POPUP
   ========================= */
.cookie-popup {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,30,0.95);
  color: #fff;
  padding: 16px 24px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 2000;
  display: none; /* inicialmente oculto */
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.cookie-popup button {
  background: #fff;
  color: #1a1a1a;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
}

/* =========================
   MOBILE (<=768px)
   ========================= */
@media (max-width:768px) {

  /* Header logo */
  .header-inner { justify-content:center; padding:0 16px; }
  .logo { height:32px; display:block; margin:0 auto; }

  /* Mostrar hamburguesa */
  .menu-toggle { display:flex; position:absolute; right:16px; top:50%; transform:translateY(-50%); }

  /* Off-canvas menu */
  .main-nav {
    display:none;
    position:fixed;
    top:0;
    left:-200px;
    width:200px;
    height:100%;
    background:#fff;
    box-shadow:5px 0 30px rgba(0,0,0,0.05);
    transition:left 0.3s ease;
    flex-direction:column;
    z-index:1001;
    padding-top:80px;
  }
  .main-nav.open { left:0; display:flex; }

  .main-nav ul, .main-nav li { margin:0; padding:0; list-style:none; flex-direction:column; }
  .main-nav > ul > li { width:100%; }
  .main-nav > ul > li > a {
    display:block;
    padding:8px 16px;
    text-align:left;
    font-size:16px;
    border-bottom:1px solid #eee;
  }
  .has-submenu .submenu { display:block; padding-left:20px; margin-top:0; }
  .has-submenu .submenu li a { padding:6px 0 6px 12px; font-size:15px; border-bottom:none; }

  /* Hero quote adjustments */
  .hero-quote { position:static; color:#1a1a1a; padding:24px; max-width:none; font-size:18px; }

  /* Contact images mobile: ancho 60% */
  .contact-item img { width: 60%; }
  .contact-caption { font-size: 12px; }

  /* Ocultar lang switch */
  .lang-switch { display:none; }
}