/* navbar.css */

/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
:root{
  --nav-height: 74px;
}
@media (max-width:900px){
  :root{ --nav-height: 72px; }
}

/* ================= BODY ================= */
/* ✅ NO dejamos padding-top porque el navbar NO será sticky */
body{
  font-family:'Poppins',sans-serif;
  background: transparent;
  overflow-x:hidden;
  padding-top: 0 !important;
}

/* ================= NAVBAR STACKING FIX ================= */
#navbar{
  position:relative;
  z-index:30000;
}

/* ================= TOP BAR ================= */
/* ✅ Ya NO es sticky (no fixed). Se queda arriba solo al inicio */
.topbar{
  width:100%;
  height:74px;                 /* base compacto */
  display:flex;
  align-items:center;
  justify-content:space-between;

  position:absolute;           /* ✅ NO STICKY */
  top:0;
  left:0;

  padding:10px 18px;           /* base compacto */
  background:#f9b9c8;          /* mobile look */
  z-index:30001;

  transition:
    height .25s ease,
    padding .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    backdrop-filter .25s ease;
}

/* ================= LOGO ================= */
.logo{
  flex-shrink:0;
  position:relative;
  z-index:11000;
  display:flex;
  align-items:center;
  height:100%;
}
.logo img{
  width:140px;                 /* base */
  height:auto;
  display:block;
  transition: width .25s ease;
}

/* ================= NAVBAR WRAPPER ================= */
.navbar-container{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}

/* ================= NAVBAR ================= */
.navbar{
  background:#ffffff;
  padding:14px 22px;           /* base */
  border-radius:999px;
  display:flex;
  align-items:center;
  box-shadow:0px 15px 30px rgba(0,0,0,0.15);
  transition: padding .25s ease, box-shadow .25s ease;
  z-index:1000;

  /* ✅ evita que el pill “se salga” en pantallas medianas */
  max-width: min(1100px, calc(100vw - 240px)); /* deja espacio al logo */
  overflow: hidden;
}

/* ================= NAV LINKS ================= */
.modern-nav-list{
  list-style:none;
  display:flex;
  gap:30px;
  align-items:center;
  flex-wrap: nowrap;
}

.modern-nav-list li a{
  text-decoration:none;
  padding:14px 22px;
  color:#666;
  border-radius:30px;
  transition:.3s ease;
  display:block;
  white-space: nowrap;
}

.modern-nav-list li a:hover{
  background:#ffe2ea;
}

.modern-nav-list li a.active{
  background:#ff4773;
  color:#fff;
  font-weight:600;
}

/* ================= HAMBURGER ================= */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  z-index:11000;
  position:relative;
}
.hamburger span{
  width:28px;
  height:3px;
  background:#333;
  border-radius:3px;
  transition:.3s ease;
}

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

  /* ✅ NO padding-top porque navbar no tapa al hacer scroll
     pero OJO: como el navbar está arriba, tu HERO ya se empuja con --nav-height
     (y en tu index ya usas var(--nav-height)).
  */

  .topbar{
    height:72px;
    padding:10px 16px;
    background:#f9b9c8;
    position:absolute; /* ✅ sigue NO sticky */
  }

  .logo img{ width:120px; }

  .hamburger{ display:flex; }

  .navbar-container{
    position:absolute;
    top:72px;
    right:16px;
    width:260px;
    z-index:10500;
    justify-content:flex-end;
    pointer-events:none;
  }

  .navbar{
    position:relative;
    width:100%;
    max-width: 100%;
    overflow: visible;

    background:#fff;
    flex-direction:column;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    pointer-events:none;
    transition:all .3s ease;
    border-radius:20px;
    padding:15px 10px;
    box-shadow:0px 15px 40px rgba(0,0,0,0.2);
  }

  .navbar.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }

  .modern-nav-list{
    flex-direction:column;
    gap:10px;
    width:100%;
    align-items:stretch;
  }

  .modern-nav-list li a{
    width:100%;
    text-align:left;
    padding:12px 16px;
    font-size:16px;
  }

  /* Tap fixes */
  .hamburger{ pointer-events:auto; }
  .navbar{ pointer-events:none; }
  .navbar.show{ pointer-events:auto; }
}

/* =========================================================
   DESKTOP (>=901px)
   - Navbar centrado real (NO corrido)
   - Sin sticky
   ========================================================= */

   /*.hamburger{ display:none; }*/
@media (min-width:901px){

  /* ✅ NO sticky (por si algo lo pisa) */
  .topbar{
    position: absolute !important;
  }

  /* ✅ El cliente quiere que TODO quede “dentro” del header:
     aumentamos el alto del header y centramos vertical */
  .topbar{
    height: 96px;                 /* ⬅️ antes 74px (esto evita que “se salga”) */
    padding: 14px 22px;           /* más aire */
    align-items: center;

    background-color: rgba(255,255,255,0.35) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(255, 107, 147, 0.12);
  }

  /* ✅ Logo un poco más grande */
  .logo img{
    width: 175px;
  }

  .hamburger{ display:none; }

  /* ✅ Centrado REAL respecto a la pantalla */
  .navbar-container{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:auto;
    display:flex;
    justify-content:center;
    align-items:center;
  }

  /* ✅ Pastilla más “baja” para que quepa dentro del header */
  .navbar{
    padding: 10px 16px;           /* ⬅️ reduce altura */
    border-radius: 999px;
    max-width: min(1100px, calc(100vw - 260px));
    overflow: hidden;
  }

  .modern-nav-list{
    gap: 22px;                    /* ⬅️ un poco menor */
  }

  .modern-nav-list li a{
    padding: 10px 16px;           /* ⬅️ reduce altura de cada item */
  }

  /* Si la pantalla es más angosta, compacta más */
  @media (max-width:1100px){
    .modern-nav-list{ gap: 16px; }
    .modern-nav-list li a{ padding: 9px 14px; }
  }

  /* ✅ SCROLL: como NO es sticky, esto casi no aplica,
     pero lo dejamos sin achicar demasiado para que no “salte” raro */
  .topbar.is-scrolled{
    height: 88px;
    padding: 12px 20px;
    box-shadow: none;
    background-color: rgba(255,255,255,0.55) !important;
  }

  .topbar.is-scrolled .logo img{
    width: 165px;
  }

  .topbar.is-scrolled .navbar{
    padding: 9px 14px;
  }

  .topbar.is-scrolled .modern-nav-list li a{
    padding: 9px 14px;
  }
}

/* ================= FOOTER VISUAL CLEANUP (MOBILE) ================= */
@media (max-width:768px){
  .footer-container{ gap:1.25rem; }
  .footer-column{ margin:0; }
  .footer-column ul{ padding:0; margin:0; }
  .footer-column li{ margin-bottom:.5rem; }
  .footer-column .social-links li a{ font-size:24px; }
}