/* CLICPERÚ — estilos base compartidos (navbar, tipografía, utilidades) */

    /* =============================================
       VARIABLES GLOBALES — Design Tokens
    ============================================= */
    :root {
      --color-primary:    #2563EB;
      --color-violet:     #7C3AED;
      --color-red:        #EF4444;
      --color-dark:       #111827;
      --color-gray:       #6B7280;
      --color-light-gray: #F3F4F6;
      --color-bg:         #F8F9FB;
      --color-white:      #FFFFFF;
      --color-border:     #E5E7EB;

      --gradient-hero: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #EF4444 100%);

      --font-main: 'Google Sans', 'Google Sans Flex', sans-serif;

      --radius-sm:  8px;
      --radius-md:  12px;
      --radius-lg:  16px;
      --radius-xl:  24px;
      --radius-pill: 999px;

      --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
      --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

      --transition: 0.2s ease;
      --navbar-height: 68px;
    }

    /* =============================================
       RESET GLOBAL
    ============================================= */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-family: var(--font-main);
    }

    body {
      font-family: var(--font-main);
      background-color: var(--color-bg);
      color: var(--color-dark);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      max-width: 100%;
      display: block;
    }

    ul {
      list-style: none;
    }

    button,
    input,
    textarea,
    select {
      font-family: var(--font-main);
    }

    button {
      cursor: pointer;
      border: none;
      background: none;
    }

    /* =============================================
       NAVBAR
    ============================================= */
    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;
      height: var(--navbar-height);
      background: var(--color-white);
      border-bottom: 1px solid var(--color-border);
      box-shadow: var(--shadow-sm);
      display: flex;
      align-items: center;
    }

    .navbar__inner {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
    }

    /* ---- Logo ---- */
    .navbar__logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .navbar__logo-img {
      height: 36px;
      width: auto;
      display: block;
    }

    .navbar__logo-text {
      font-size: 26px;
      font-weight: 900;
      color: var(--color-dark);
      letter-spacing: -1px;
    }

    .navbar__logo-text sup {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0;
      vertical-align: super;
      color: var(--color-gray);
    }

    .navbar__logo-dot {
      color: var(--color-primary);
    }

    /* ---- Nav Menu ---- */
    .navbar__menu {
      display: flex;
      align-items: center;
      gap: 4px;
      justify-self: center;
    }

    .navbar__item {
      position: relative;
    }

    .navbar__link {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 500;
      color: var(--color-dark);
      border-radius: var(--radius-sm);
      transition: background var(--transition), color var(--transition);
      white-space: nowrap;
    }

    .navbar__link:hover {
      background: var(--color-light-gray);
      color: var(--color-primary);
    }

    /* Badge "NEW" */
    .badge-new {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--color-white);
      background: var(--color-primary);
      border-radius: var(--radius-pill);
      padding: 2px 6px;
      margin-left: 4px;
    }

    /* Chevron icon */
    .navbar__link .chevron {
      width: 14px;
      height: 14px;
      transition: transform var(--transition);
    }

    .navbar__item:hover .chevron {
      transform: rotate(180deg);
    }

    /* ---- Dropdown ---- */
    .navbar__dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      min-width: 220px;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
    }

    .navbar__item:hover .navbar__dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .navbar__dropdown a {
      display: block;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 500;
      color: var(--color-dark);
      border-radius: var(--radius-sm);
      transition: background var(--transition), color var(--transition);
    }

    .navbar__dropdown a:hover {
      background: var(--color-light-gray);
      color: var(--color-primary);
    }

    /* ---- Right Actions ---- */
    .navbar__actions {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-self: end;
      flex-shrink: 0;
    }

    .navbar__icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      color: var(--color-dark);
      transition: background var(--transition), color var(--transition);
    }

    .navbar__icon-btn:hover {
      background: var(--color-light-gray);
      color: var(--color-primary);
    }

    .navbar__icon-btn svg {
      width: 20px;
      height: 20px;
    }

    /* ---- CTA Button ---- */
    .btn-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      font-size: 15px;
      font-weight: 600;
      color: var(--color-white);
      background: var(--color-primary);
      border-radius: var(--radius-pill);
      transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
      white-space: nowrap;
    }

    .btn-cta:hover {
      background: #1d4ed8;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    }

    .btn-cta svg {
      width: 16px;
      height: 16px;
    }

    /* ---- Hamburger (mobile) ---- */
    .navbar__hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 38px;
      height: 38px;
      justify-self: end;
      padding: 6px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background var(--transition);
    }

    .navbar__hamburger:hover {
      background: var(--color-light-gray);
    }

    .navbar__hamburger span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--color-dark);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Hamburger → X */
    .navbar__hamburger.is-open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .navbar__hamburger.is-open span:nth-child(2) {
      opacity: 0;
    }
    .navbar__hamburger.is-open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* ---- Mobile Menu ---- */
    .navbar__mobile-menu {
      display: none;
      position: fixed;
      top: var(--navbar-height);
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--color-white);
      padding: 24px 24px 40px;
      overflow-y: auto;
      z-index: 999;
      flex-direction: column;
      gap: 4px;
    }

    .navbar__mobile-menu.is-open {
      display: flex;
    }

    .navbar__mobile-menu a {
      display: block;
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--color-dark);
      border-radius: var(--radius-md);
      border-bottom: 1px solid var(--color-border);
      transition: background var(--transition);
    }

    .navbar__mobile-menu a:hover {
      background: var(--color-light-gray);
    }

    .navbar__mobile-menu .btn-cta {
      margin-top: 20px;
      justify-content: center;
      padding: 14px 22px;
      font-size: 16px;
    }

    /* =============================================
       RESPONSIVE — Navbar
    ============================================= */
    @media (max-width: 1024px) {
      .navbar__menu,
      .navbar__icon-btn {
        display: none;
      }

      .navbar__hamburger {
        display: flex;
      }
    }

    @media (max-width: 640px) {
      .navbar__inner {
        padding: 0 20px;
      }
    }

    /* =============================================
       MAIN CONTENT PLACEHOLDER
       (las siguientes secciones se añadirán aquí)
    ============================================= */
    main {
      width: 100%;
    }