/* ==========================================================================
   VARIABLES Y CONFIGURACIÓN BASE (Inter & Bootstrap 5.3)
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

   :root {
       --primary: #0052cc;          /* Azul Principal */
       --primary-light: #e6efff;
       --secondary: #071e3d;        /* Azul Oscuro */
       --accent: #00d1ff;           /* Celeste Unlimitek */
       --success: #22c55e;
       --white: #ffffff;
       --bg-light: #f4f7fa;
       --text-dark: #1e293b;
       --text-muted: #64748b;
       --header-height: 80px;
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   * { margin: 0; padding: 0; box-sizing: border-box; }
   
   body {
       font-family: 'Inter', sans-serif;
       background-color: var(--bg-light);
       color: var(--text-dark);
       padding-top: var(--header-height);
       line-height: 1.6;
   }
   
   /* ==========================================================================
      HEADER Y MARCADO DE PÁGINA ACTUAL (LA CINTA)
      ========================================================================== */
   header {
       background: rgba(255, 255, 255, 0.98);
       backdrop-filter: blur(12px);
       height: var(--header-height);
       position: fixed;
       width: 100%;
       top: 0;
       z-index: 3000;
       box-shadow: 0 2px 15px rgba(0,0,0,0.05);
       display: flex;
       align-items: center;
   }
   
   /* Control de Logo para evitar deformación */
   .logo-container img {
       height: 48px; /* Altura corporativa fija */
       width: auto;
       object-fit: contain;
       cursor: pointer;
       transition: var(--transition);
   }
   
   .nav-item-custom {
       text-decoration: none !important;
       color: var(--secondary);
       font-weight: 600;
       font-size: 0.95rem;
       padding: 10px 18px;
       border-radius: 12px;
       transition: var(--transition);
       position: relative;
       cursor: pointer;
   }
   
   .nav-item-custom:hover {
       color: var(--primary);
       background: var(--primary-light);
   }
   
   /* ESTILO DE LA CINTA AZUL (PÁGINA ACTIVA) */
   .nav-item-custom.active {
       color: var(--primary) !important;
       background: var(--primary-light);
   }
   
   .nav-item-custom.active::after {
       content: '';
       position: absolute;
       bottom: -5px; /* Ajustado para quedar debajo del texto */
       left: 20%;
       width: 60%;
       height: 4px;
       background: var(--primary);
       border-radius: 10px;
   }
   
   /* ==========================================================================
      INTERFACES: BOTONES Y TABS
      ========================================================================== */
   /* Botón Principal estilo ISP */
   .btn-primary-custom {
       background: var(--primary);
       border: none;
       padding: 12px 30px;
       border-radius: 50px;
       font-weight: 700;
       color: var(--white) !important;
       box-shadow: 0 4px 14px rgba(0, 82, 204, 0.3);
       transition: var(--transition);
       display: inline-flex;
       align-items: center;
       gap: 8px;
   }
   
   .btn-primary-custom:hover {
       background: var(--secondary);
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(0, 82, 204, 0.4);
   }
   
   /* Selector de Tabs (Planes) */
   .tabs-header-pro {
       display: flex;
       justify-content: center;
       gap: 12px;
       background: #e2e8f0;
       padding: 8px;
       border-radius: 50px;
       width: fit-content;
       margin: 0 auto 50px;
   }
   
   .tab-btn {
       border: none;
       background: transparent;
       padding: 12px 25px;
       border-radius: 40px;
       font-weight: 700;
       color: var(--text-muted);
       transition: var(--transition);
   }
   
   .tab-btn.active {
       background: var(--white);
       color: var(--primary);
       box-shadow: 0 4px 12px rgba(0,0,0,0.1);
   }
   
   /* ==========================================================================
      INTERFACES: CARDS DE PLANES (ISP STYLE)
      ========================================================================== */
   .price-card {
       background: var(--white);
       border-radius: 30px;
       padding: 40px;
       border: 2px solid transparent;
       transition: var(--transition);
       height: 100%;
       position: relative;
       text-align: center;
   }
   
   .price-card:hover {
       transform: translateY(-15px);
       box-shadow: 0 25px 50px rgba(0, 82, 204, 0.12);
   }
   
   .price-card.featured {
       border-color: var(--primary);
       background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
   }
   
   .price-card .price {
       font-size: 3.5rem;
       font-weight: 800;
       color: var(--primary);
       margin: 20px 0;
   }
   
   .price-card .price span {
       font-size: 1rem;
       color: var(--text-muted);
       font-weight: 400;
   }
   
   .feature-list {
       list-style: none;
       padding: 0;
       margin-bottom: 30px;
       text-align: left;
   }
   
   .feature-list li {
       margin-bottom: 12px;
       display: flex;
       align-items: center;
       gap: 10px;
       font-weight: 500;
   }
   
   .feature-list i {
       color: var(--success);
   }
   
   /* Ribbon "Más Vendido" */
   .ribbon {
       position: absolute;
       top: 20px;
       right: -10px;
       background: #ff3e3e;
       color: white;
       padding: 5px 20px;
       border-radius: 5px;
       font-size: 0.75rem;
       font-weight: 800;
       transform: rotate(5deg);
       box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   }
   
   /* ==========================================================================
      FOOTER
      ========================================================================== */
   footer {
       background: var(--secondary);
       color: var(--white);
       padding: 80px 0 40px;
   }
   
   .footer-col h4 {
       color: var(--accent);
       margin-bottom: 25px;
       font-weight: 700;
       text-transform: uppercase;
       font-size: 1rem;
   }
   
   .footer-links li {
       list-style: none;
       margin-bottom: 15px;
   }
   
   .footer-links a {
       color: #cbd5e1;
       text-decoration: none;
       transition: var(--transition);
   }
   
   .footer-links a:hover {
       color: var(--accent);
       padding-left: 8px;
   }
   
   /* ==========================================================================
      RESPONSIVE
      ========================================================================== */
   @media (max-width: 991px) {
       .nav-links { display: none; } /* Implementar menú hamburguesa en el index */
       .hero-text h1 { font-size: 2.8rem; }
       .tabs-header-pro { width: 100%; flex-direction: column; border-radius: 20px; }
   }