/* ============================================================
   GERALDINE CARDONA · Bar de Cejas en Bogotá
   global.css — Design tokens, tipografías y utilidades base
   ============================================================ */

/* ---------- Fuentes ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&family=Sacramento&display=swap');

/* ---------- Tokens de marca ---------- */
:root{
  /* Paleta rosada · extraída del branding */
  --rosa-principal:#C98B8B;   /* CTA, acentos */
  --rosa-medio:#D9A6A2;
  --rosa-claro:#E8C5C0;       /* fondos suaves, tarjetas */
  --rosa-palido:#F3DEDA;
  --crema:#F7EEE8;            /* fondo base */
  --marfil:#FCF8F5;          /* tarjetas, contraste */
  --dorado:#C9A66B;          /* detalles finos, íconos */
  --dorado-claro:#E4CFA6;
  --marron:#7A4E4A;          /* texto fuerte, títulos */
  --marron-oscuro:#5A3835;
  --carbon:#1A1A1A;          /* logo, títulos editoriales */
  --texto:#4A3F3D;           /* cuerpo */
  --texto-suave:#8A7A77;
  --blanco:#FFFFFF;

  /* Tipografías */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Montserrat', -apple-system, sans-serif;
  --script:'Sacramento', cursive;

  /* Medidas */
  --max:1240px;
  --radio:14px;
  --radio-lg:26px;
  --sombra:0 18px 50px -20px rgba(122,78,74,.28);
  --sombra-suave:0 8px 30px -12px rgba(122,78,74,.18);
  --trans:.45s cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--texto);
  background:var(--crema);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--marron);line-height:1.15;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.8rem)}
p{margin-bottom:1.1rem}
.script{font-family:var(--script);color:var(--rosa-principal);font-weight:400}

/* etiqueta superior tipo eyebrow */
.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--dorado);
  font-weight:600;
  margin-bottom:1rem;
  display:inline-block;
}

/* ---------- Layout ---------- */
.container{width:92%;max-width:var(--max);margin-inline:auto}
.section{padding:clamp(3.5rem,8vw,7rem) 0}
.section--crema{background:var(--crema)}
.section--marfil{background:var(--marfil)}
.section--rosa{background:linear-gradient(135deg,var(--rosa-palido),var(--crema))}
.text-center{text-align:center}
.divider{
  width:64px;height:2px;margin:1.2rem auto;
  background:linear-gradient(90deg,transparent,var(--dorado),transparent);
}
.divider--left{margin-left:0}

/* corazón decorativo */
.heart{color:var(--rosa-principal);display:inline-block}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:600;font-size:.92rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:1rem 2.2rem;border-radius:50px;cursor:pointer;
  border:none;transition:var(--trans);
}
.btn--primary{
  background:var(--rosa-principal);color:#fff;
  box-shadow:0 12px 30px -10px rgba(201,139,139,.7);
}
.btn--primary:hover{background:var(--marron);transform:translateY(-3px);box-shadow:0 18px 38px -10px rgba(122,78,74,.55)}
.btn--ghost{
  background:transparent;color:var(--marron);
  border:1.5px solid var(--dorado);
}
.btn--ghost:hover{background:var(--dorado);color:#fff;border-color:var(--dorado)}
.btn--wa{background:#25D366;color:#fff;box-shadow:0 12px 30px -10px rgba(37,211,102,.6)}
.btn--wa:hover{background:#1da851;transform:translateY(-3px)}

/* ---------- Animaciones de entrada ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}
.reveal[data-d="4"]{transition-delay:.48s}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  padding:1.1rem 0;transition:var(--trans);
  background:rgba(247,238,232,.0);
}
.nav.scrolled{
  background:rgba(252,248,245,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 6px 30px -18px rgba(122,78,74,.4);
  padding:.7rem 0;
}
.nav__inner{display:flex;align-items:center;justify-content:space-between}
.nav__logo{display:flex;align-items:center;gap:.7rem}
.nav__logo img{height:46px;width:auto;transition:var(--trans)}
.nav.scrolled .nav__logo img{height:40px}
.nav__logo-txt{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.16em;color:var(--carbon);line-height:1}
.nav__logo-txt small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.3em;color:var(--dorado);font-weight:600;margin-top:3px}
.nav__menu{display:flex;align-items:center;gap:2rem}
.nav__link{
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--marron);position:relative;padding:.3rem 0;
}
.nav__link::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--dorado);transition:var(--trans)}
.nav__link:hover::after,.nav__link.active::after{width:100%}

/* dropdown */
.nav__item{position:relative}
.nav__item.has-sub>.nav__link::before{content:'';position:absolute;right:-13px;top:50%;width:5px;height:5px;border-right:1.5px solid var(--marron);border-bottom:1.5px solid var(--marron);transform:translateY(-65%) rotate(45deg)}
.nav__sub{
  position:absolute;top:160%;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--marfil);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:.6rem;min-width:250px;opacity:0;visibility:hidden;transition:var(--trans);
  border:1px solid var(--rosa-palido);
}
.nav__item.has-sub:hover .nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__sub a{display:block;padding:.7rem .9rem;border-radius:9px;font-size:.8rem;letter-spacing:.04em;color:var(--texto);text-transform:none;transition:var(--trans)}
.nav__sub a:hover{background:var(--rosa-palido);color:var(--marron);padding-left:1.2rem}
.nav__sub strong{display:block;font-family:var(--serif);font-size:.95rem;color:var(--marron);padding:.5rem .9rem .2rem;text-transform:none}

.nav__cta{display:flex;align-items:center;gap:1rem}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:2px;background:var(--marron);transition:var(--trans);border-radius:2px}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:980px){
  .nav__menu{
    position:fixed;top:0;right:-100%;width:min(82%,360px);height:100vh;
    flex-direction:column;justify-content:flex-start;gap:.3rem;
    background:var(--marfil);padding:6rem 1.6rem 2rem;
    box-shadow:-20px 0 60px -20px rgba(122,78,74,.4);transition:right .5s ease;align-items:stretch;
    overflow-y:auto;
  }
  .nav__menu.open{right:0}
  .nav__link{padding:.9rem .4rem;border-bottom:1px solid var(--rosa-palido)}
  .nav__item.has-sub>.nav__link::before{right:8px}
  .nav__sub{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:var(--crema);margin:.3rem 0 .6rem;display:none;border:none}
  .nav__item.has-sub.open-sub .nav__sub{display:block}
  .nav__burger{display:flex}
  .nav__cta .btn--ghost{display:none}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--marron-oscuro);color:#EADCD8;padding:4rem 0 0;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--dorado),var(--rosa-principal),var(--dorado))}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:3rem}
.footer__brand-logo{font-family:var(--serif);font-size:1.6rem;font-weight:700;letter-spacing:.14em;color:#fff;margin-bottom:.2rem}
.footer__brand-logo small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;color:var(--dorado-claro);font-weight:600;margin-top:4px}
.footer p{font-size:.9rem;color:#D9C5C0;line-height:1.8}
.footer h4{color:#fff;font-size:1.15rem;margin-bottom:1.1rem}
.footer__links a{display:block;font-size:.88rem;color:#D9C5C0;padding:.34rem 0;transition:var(--trans)}
.footer__links a:hover{color:var(--dorado-claro);padding-left:.5rem}
.footer__contact li{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:#D9C5C0;margin-bottom:.8rem}
.footer__contact svg{flex-shrink:0;margin-top:3px;fill:var(--dorado-claro)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:1.4rem 0;text-align:center;font-size:.8rem;color:#C4ABA6}
.footer__bottom a{color:var(--dorado-claro)}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr;text-align:center}.footer__contact li{justify-content:center}}

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:999;
  display:flex;align-items:center;gap:0;
  background:#25D366;color:#fff;border-radius:50px;
  padding:0;height:62px;width:62px;overflow:hidden;
  box-shadow:0 14px 40px -8px rgba(37,211,102,.6);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
  animation:floatY 3.4s ease-in-out infinite;
}
.wa-float svg{width:34px;height:34px;flex-shrink:0;margin:14px;fill:#fff}
.wa-float span{white-space:nowrap;font-weight:600;font-size:.9rem;padding-right:22px;opacity:0;transition:opacity .4s}
.wa-float:hover{width:215px;animation-play-state:paused}
.wa-float:hover span{opacity:1}
@media(max-width:600px){.wa-float{bottom:18px;right:18px}}

/* pulso decorativo */
.wa-float::after{content:'';position:absolute;inset:0;border-radius:50px;border:2px solid #25D366;animation:waPulse 2.4s ease-out infinite;z-index:-1}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}