*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:   #1B2C4E;
      --rose:   #C8385A;
      --teal:   #2A9D8F;
      --gold:   #D4A940;
      --cream:  #FDF8F3;
      --white:  #FFFFFF;
      --text:   #2D2D2D;
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body:    'Lato', Arial, sans-serif;
      --nav-h:  72px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--cream);
      color: var(--text);
    }

    /* ══════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════ */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: var(--white);
      border-bottom: 3px solid var(--rose);
      box-shadow: 0 2px 12px rgba(27,44,78,.10);
    }

    .navbar__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    /* LOGO */
    .navbar__brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      flex-shrink: 0;
    }
    .navbar__logo-box {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 2px solid var(--gold);
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .navbar__logo-box img { width: 100%; height: 100%; object-fit: contain; }
    .navbar__logo-placeholder {
      display: flex; flex-direction: column; align-items: center; line-height: 1;
    }
    .navbar__logo-placeholder span:first-child {
      font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--rose);
    }
    .navbar__logo-placeholder span:last-child {
      font-family: var(--font-body); font-size: 7px; font-weight: 600;
      letter-spacing: .08em; color: var(--navy); text-transform: uppercase;
    }
    .navbar__brand-text { display: flex; flex-direction: column; }
    .navbar__brand-name {
      font-family: var(--font-display); font-size: 22px; font-weight: 700;
      color: var(--rose); line-height: 1.1;
    }
    .navbar__brand-tagline {
      font-size: 10px; font-weight: 600; letter-spacing: .12em;
      color: var(--navy); text-transform: uppercase;
    }

    /* LINKS */
    .navbar__links {
      display: flex; align-items: center; gap: 4px; list-style: none;
    }
    .navbar__links a {
      font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
      color: var(--navy); text-decoration: none; padding: 6px 10px;
      border-radius: 6px; white-space: nowrap; position: relative;
      transition: color .2s, background .2s;
    }
    .navbar__links a::after {
      content: ''; position: absolute; bottom: 2px; left: 10px; right: 10px;
      height: 2px; border-radius: 2px; background: var(--rose);
      transform: scaleX(0); transition: transform .22s ease;
    }
    .navbar__links a:hover { color: var(--rose); }
    .navbar__links a:hover::after { transform: scaleX(1); }
    .navbar__links .nav-cta a {
      background: var(--rose); color: var(--white);
      padding: 8px 16px; border-radius: 24px;
    }
    .navbar__links .nav-cta a::after { display: none; }
    .navbar__links .nav-cta a:hover { background: var(--navy); color: var(--white); }

    /* HAMBURGER */
    .navbar__toggle {
      display: none; flex-direction: column; justify-content: center;
      align-items: center; width: 44px; height: 44px; gap: 5px;
      background: none; border: 2px solid var(--navy); border-radius: 8px;
      cursor: pointer; padding: 0; flex-shrink: 0; transition: border-color .2s;
    }
    .navbar__toggle:hover { border-color: var(--rose); }
    .bar {
      display: block; width: 22px; height: 2px; background: var(--navy);
      border-radius: 2px; transition: transform .3s, opacity .3s, background .2s;
      transform-origin: center;
    }
    .navbar__toggle:hover .bar { background: var(--rose); }
    .navbar--open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .navbar--open .bar:nth-child(2) { opacity: 0; }
    .navbar--open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* MOBILE DRAWER */
    .navbar__drawer {
      display: none; flex-direction: column;
      background: var(--white); border-top: 1px solid #eee;
      max-height: 0; overflow: hidden;
      transition: max-height .35s ease, padding .35s ease;
    }
    .navbar__drawer.open { max-height: 600px; padding: 12px 0 20px; }
    .navbar__drawer::before {
      content: '❀  ✦  ❀'; display: block; text-align: center;
      color: var(--gold); font-size: 13px; letter-spacing: .3em;
      margin-bottom: 8px; opacity: .7;
    }
    .navbar__drawer a {
      font-family: var(--font-body); font-size: 15px; font-weight: 600;
      color: var(--navy); text-decoration: none; padding: 13px 28px;
      display: block; border-left: 3px solid transparent;
      transition: color .2s, border-color .2s, background .2s;
    }
    .navbar__drawer a:hover {
      color: var(--rose); border-left-color: var(--rose);
      background: rgba(200,56,90,.05);
    }
    .navbar__drawer .drawer-cta { margin: 12px 28px 0; }
    .navbar__drawer .drawer-cta a {
      display: block; text-align: center; background: var(--rose);
      color: var(--white); border-radius: 24px; padding: 12px 24px; border-left: none;
    }
    .navbar__drawer .drawer-cta a:hover { background: var(--navy); }
    

    /* Link activo — página actual */
.navbar__links a.active {
    color: var(--rose);
    background: rgba(200, 56, 90, 0.08);
    border-radius: 6px;
}

.navbar__links a.active::after {
    transform: scaleX(1);
}

/* Drawer móvil — link activo */
.navbar__drawer a.active {
    color: var(--rose);
    border-left-color: var(--rose);
    background: rgba(200, 56, 90, 0.06);
}


    /* ══════════════════════════════════════════
    RESPONSIVE
══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 960px) {
    .navbar__links { gap: 2px; }
    .navbar__links a { font-size: 12.5px; padding: 6px 7px; }
    .navbar__links .nav-cta a { padding: 7px 13px; }
    .navbar__brand-name { font-size: 19px; }

    .banner__stage {
    grid-template-columns: 1fr;
    padding: 48px 36px 60px;
    text-align: center;
    }
    .banner__content { display: flex; flex-direction: column; align-items: center; }
    .banner__desc { max-width: 560px; text-align: center; }
    .banner__visual {
    height: 300px;
    justify-content: center;
    }
    .banner__photo-frame { width: 320px; height: 280px; }
    .deco--colibri { width: 110px; top: -20px; left: -30px; }
    .deco--flores-tr { width: 140px; top: -5px; right: -10px; }
    .deco--flores-bl { width: 120px; }
    .deco--flores-left { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
    .navbar__links { display: none; }
    .navbar__toggle { display: flex; }
    .navbar__drawer { display: flex; }

    .banner { min-height: auto; }
    .banner__stage {
    padding: 36px 20px 48px;
    gap: 28px;
    }
    .banner__title { font-size: clamp(26px, 7vw, 36px); }
    .banner__visual { height: 240px; }
    .banner__photo-frame { width: 280px; height: 220px; border-radius: 14px; }
    .deco--colibri { width: 90px; top: -15px; left: -20px; }
    .deco--flores-tr { width: 110px; top: 0; right: -8px; }
    .deco--flores-bl { width: 100px; bottom: -10px; left: -15px; }

    /* On mobile: show click-to-call CTA prominently */
    .btn--primary {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 15px 24px;
    }
    .banner__actions { flex-direction: column; align-items: stretch; }
    .btn--secondary { justify-content: center; }
}

@media (max-width: 400px) {
    .navbar__inner { padding: 0 16px; }
    .navbar__brand-tagline { display: none; }
    .banner__stage { padding: 28px 16px 40px; }
    .banner__photo-frame { width: 240px; height: 190px; }
}