/* ==========================================================================
   CENTRO PRIVADO 45 Y MÁS - DISEÑO NUEVA ERA (DARK GLASSMORPHISM)
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

   :root {
       /* Paleta Premium Dark */
       --bg-deep: #050810;          /* Fondo base ultra oscuro */
       --bg-surface: #0a0f1d;       /* Superficies elevadas */
       --glass-bg: rgba(15, 23, 42, 0.4); /* Efecto cristal oscuro */
       --glass-border: rgba(255, 255, 255, 0.08); /* Borde cristal sutil */
       
       /* Colores Institucionales Brillantes */
       --brand-orange: #ff7315;     /* Naranja vibrante para CTAs */
       --brand-orange-glow: rgba(255, 115, 21, 0.4);
       --brand-blue: #1A365D;       /* Azul institucional clásico */
       --brand-blue-glow: rgba(26, 54, 93, 0.6);
       --accent-neon: #38bdf8;      /* Detalles neón azul claro */
       
       /* Textos */
       --text-primary: #f8fafc;     /* Blanco brillante para títulos */
       --text-secondary: #94a3b8;   /* Gris azulado para párrafos */
       --text-muted: #475569;
       
       /* Sombras de Nueva Era */
       --shadow-glow: 0 0 30px var(--brand-orange-glow);
       --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
       
       /* Radios de borde modernos */
       --radius-sm: 8px;
       --radius-md: 16px;
       --radius-lg: 24px;
       --radius-xl: 40px;
   }
   
   /* =========================================
      RESETEO Y BASE
      ========================================= */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Montserrat', sans-serif;
   }
   
   body {
       background-color: var(--bg-deep);
       color: var(--text-primary);
       line-height: 1.6;
       overflow-x: hidden;
       /* Fondo dinámico sutil tipo aurora */
       background-image: 
           radial-gradient(circle at 15% 50%, rgba(26, 54, 93, 0.15) 0%, transparent 50%),
           radial-gradient(circle at 85% 30%, rgba(255, 115, 21, 0.08) 0%, transparent 50%);
       background-attachment: fixed;
   }
   
   /* Scrollbar personalizado */
   ::-webkit-scrollbar { width: 10px; }
   ::-webkit-scrollbar-track { background: var(--bg-deep); }
   ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 5px; }
   ::-webkit-scrollbar-thumb:hover { background: var(--brand-orange); }
   
   /* =========================================
      BARRA SUPERIOR (TOP BAR)
      ========================================= */
   .top-bar-minimal {
       background: rgba(5, 8, 16, 0.9);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       color: var(--text-secondary);
       font-size: 0.75rem;
       font-weight: 500;
       padding: 10px 40px;
       display: flex;
       justify-content: space-between;
       border-bottom: 1px solid var(--glass-border);
       position: relative;
       z-index: 1001;
   }
   
   /* =========================================
      NAVEGACIÓN (GLASS HEADER)
      ========================================= */
   .header-principal {
       background: var(--glass-bg);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       padding: 20px 50px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--glass-border);
       position: sticky;
       top: 0;
       z-index: 1000;
       box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   }
   
   .logo-min {
       font-weight: 900;
       font-size: 1.3rem;
       background: linear-gradient(90deg, #ffffff, var(--brand-orange));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       letter-spacing: 1px;
   }
   
   .nav-links {
       display: flex;
       gap: 30px;
   }
   
   .nav-links a {
       color: var(--text-secondary);
       text-decoration: none;
       font-size: 0.95rem;
       font-weight: 600;
       transition: all 0.3s ease;
       padding: 8px 12px;
       border-radius: var(--radius-sm);
   }
   
   .nav-links a:hover {
       color: var(--text-primary);
       background: rgba(255, 255, 255, 0.05);
       text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
   }
   
   /* =========================================
      HERO SECTION (PORTADA MONUMENTAL)
      ========================================= */
   .hero-centrado {
       min-height: 90vh;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       padding: 60px 20px;
       text-align: center;
       position: relative;
   }
   
   .contenedor-majestuoso {
       max-width: 900px;
       display: flex;
       flex-direction: column;
       align-items: center;
       z-index: 2;
   }
   
   /* Contenedor del Logo con resplandor */
   .logo-marco-gigante-impacto {
       background: var(--glass-bg);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       padding: 40px 60px;
       border-radius: var(--radius-xl);
       border: 1px solid var(--glass-border);
       box-shadow: var(--shadow-glass), var(--shadow-glow);
       margin-bottom: 35px;
       transition: transform 0.5s ease, box-shadow 0.5s ease;
   }
   
   .logo-marco-gigante-impacto:hover {
       transform: translateY(-5px);
       box-shadow: var(--shadow-glass), 0 0 50px var(--brand-orange-glow);
   }
   
   .logo-centro-monumental {
       height: 220px;
       object-fit: contain;
       filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
   }
   
   .etiqueta-acreditacion {
       background: rgba(255, 115, 21, 0.1);
       color: var(--brand-orange);
       border: 1px solid rgba(255, 115, 21, 0.3);
       padding: 10px 24px;
       border-radius: 30px;
       font-size: 0.9rem;
       font-weight: 800;
       letter-spacing: 2px;
       text-transform: uppercase;
       margin-bottom: 30px;
       box-shadow: inset 0 0 20px rgba(255, 115, 21, 0.05);
   }
   
   .hero-centrado h1 {
       font-size: 4rem;
       font-weight: 900;
       line-height: 1.1;
       margin-bottom: 20px;
       background: linear-gradient(to right, #ffffff, #cbd5e1);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       letter-spacing: -1px;
   }
   
   .hero-centrado p {
       font-size: 1.3rem;
       color: var(--text-secondary);
       max-width: 750px;
       margin-bottom: 45px;
       font-weight: 400;
   }
   
   .hero-centrado p strong {
       color: var(--text-primary);
       font-weight: 600;
   }
   
   /* Botón Principal (Glassmorphism + Neon) */
   .btn-cta-naranja {
       background: linear-gradient(135deg, var(--brand-orange), #d95d0b);
       color: #ffffff;
       padding: 20px 45px;
       border-radius: 50px;
       text-decoration: none;
       font-size: 1.2rem;
       font-weight: 800;
       border: 1px solid rgba(255,255,255,0.2);
       box-shadow: 0 15px 35px rgba(255, 115, 21, 0.3), inset 0 2px 5px rgba(255,255,255,0.3);
       transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   .btn-cta-naranja:hover {
       transform: translateY(-5px) scale(1.02);
       box-shadow: 0 20px 45px rgba(255, 115, 21, 0.5), inset 0 2px 5px rgba(255,255,255,0.4);
   }
   
   /* =========================================
      SECCIONES COMUNES (SERVICIOS Y CÁPSULAS)
      ========================================= */
   .seccion-base {
       width: 100%;
       max-width: 1200px;
       margin: 100px auto;
       padding: 0 20px;
       text-align: center;
   }
   
   .titulo-seccion {
       font-size: 2.8rem;
       font-weight: 800;
       color: #ffffff;
       margin-bottom: 15px;
       position: relative;
       display: inline-block;
   }
   
   .titulo-seccion::after {
       content: '';
       position: absolute;
       bottom: -10px;
       left: 50%;
       transform: translateX(-50%);
       width: 80px;
       height: 4px;
       background: var(--brand-orange);
       border-radius: 2px;
   }
   
   .subtitulo-seccion {
       font-size: 1.1rem;
       color: var(--text-secondary);
       margin-bottom: 60px;
       margin-top: 25px;
       max-width: 800px;
       margin-left: auto;
       margin-right: auto;
   }
   
   /* =========================================
      GRID DE SERVICIOS (TARJETAS GLASS)
      ========================================= */
   .grid-servicios {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
       gap: 30px;
       text-align: left;
   }
   
   .card-servicio {
       background: var(--glass-bg);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       border: 1px solid var(--glass-border);
       border-radius: var(--radius-lg);
       padding: 40px 30px;
       transition: all 0.4s ease;
       box-shadow: 0 10px 30px rgba(0,0,0,0.2);
       position: relative;
       overflow: hidden;
   }
   
   /* Brillo interno al pasar el mouse */
   .card-servicio::before {
       content: '';
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
       z-index: 0;
       opacity: 0;
       transition: opacity 0.4s ease;
   }
   
   .card-servicio:hover {
       transform: translateY(-10px);
       border-color: rgba(255, 115, 21, 0.4);
       box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(255, 115, 21, 0.1);
   }
   
   .card-servicio:hover::before { opacity: 1; }
   
   .card-servicio h3 {
       color: var(--accent-neon);
       font-size: 1.4rem;
       font-weight: 700;
       margin-bottom: 25px;
       position: relative;
       z-index: 1;
       display: flex;
       align-items: center;
       gap: 15px;
   }
   
   .card-servicio h3 i {
       font-size: 1.8rem;
       color: var(--brand-orange);
   }
   
   .card-servicio ul {
       list-style: none;
       position: relative;
       z-index: 1;
   }
   
   .card-servicio li {
       color: var(--text-secondary);
       font-size: 0.95rem;
       margin-bottom: 15px;
       padding-left: 25px;
       position: relative;
       transition: color 0.2s;
   }
   
   .card-servicio li:hover { color: var(--text-primary); }
   
   .card-servicio li::before {
       content: "\f00c"; /* Icono FontAwesome de Check */
       font-family: "Font Awesome 6 Free";
       font-weight: 900;
       color: var(--brand-orange);
       position: absolute;
       left: 0;
       top: 2px;
       font-size: 0.8rem;
   }
   
   /* =========================================
      GRID CÁPSULAS Y DIPLOMADOS
      ========================================= */
   .grid-multimedia {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 40px;
       margin-bottom: 50px;
   }
   
   .card-media {
       background: var(--bg-surface);
       border: 1px solid #1e293b;
       border-radius: var(--radius-lg);
       overflow: hidden;
       transition: all 0.3s ease;
       display: flex;
       flex-direction: column;
   }
   
   .card-media:hover {
       border-color: var(--brand-orange);
       box-shadow: 0 15px 30px rgba(0,0,0,0.4);
   }
   
   .media-placeholder {
       height: 250px;
       background: #0f172a;
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       overflow: hidden;
   }
   
   /* Efecto de carga en placeholder de video */
   .media-placeholder::after {
       content: '';
       position: absolute;
       top: 0; left: -100%; width: 50%; height: 100%;
       background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
       animation: shimmer 2s infinite;
   }
   
   @keyframes shimmer { 100% { left: 200%; } }
   
   .media-placeholder i {
       font-size: 4rem;
       color: #1e293b;
       transition: color 0.3s ease;
   }
   
   .card-media:hover .media-placeholder i { color: var(--brand-orange); }
   
   .info-media {
       padding: 30px 25px;
       text-align: left;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
   }
   
   .badge-dia {
       background: rgba(255, 115, 21, 0.15);
       color: var(--brand-orange);
       font-size: 0.75rem;
       font-weight: 800;
       padding: 6px 12px;
       border-radius: 20px;
       display: inline-block;
       margin-bottom: 15px;
       text-transform: uppercase;
       align-self: flex-start;
   }
   
   .badge-dia.especial {
       background: rgba(56, 189, 248, 0.15);
       color: var(--accent-neon);
   }
   
   .info-media h3 {
       color: var(--text-primary);
       font-size: 1.4rem;
       margin-bottom: 10px;
   }
   
   .info-media p {
       color: var(--text-secondary);
       font-size: 0.9rem;
       margin-bottom: 25px;
       flex-grow: 1;
   }
   
   .btn-red {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
       padding: 12px;
       border-radius: var(--radius-sm);
       font-weight: 700;
       font-size: 0.95rem;
       text-decoration: none;
       color: white;
       transition: background 0.2s, transform 0.2s;
   }
   
   .btn-red:hover { transform: translateY(-2px); }
   
   .btn-red.facebook { background: #1877F2; }
   .btn-red.tiktok { background: #111827; border: 1px solid #334155; }
   .btn-red.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
   
   /* =========================================
      DOCK ECOSISTEMA PRO (BOTONES HERRAMIENTAS)
      ========================================= */
   .ecosistema-dock {
       display: flex;
       gap: 20px;
       margin-top: 60px;
       flex-wrap: wrap;
       justify-content: center;
       width: 100%;
       padding: 0 20px;
   }
   
   .dock-item {
       background: var(--glass-bg);
       backdrop-filter: blur(10px);
       border: 1px solid var(--glass-border);
       padding: 20px 30px;
       border-radius: var(--radius-md);
       display: flex;
       align-items: center;
       gap: 20px;
       text-decoration: none;
       color: white;
       transition: all 0.3s ease;
       text-align: left;
       min-width: 300px;
       box-shadow: 0 10px 20px rgba(0,0,0,0.2);
   }
   
   .dock-item:hover {
       transform: translateY(-5px);
       border-color: var(--brand-orange);
       box-shadow: 0 15px 30px rgba(0,0,0,0.4), inset 0 0 15px rgba(255, 115, 21, 0.1);
   }
   
   .dock-item-icon {
       width: 50px;
       height: 50px;
       background: rgba(255, 115, 21, 0.1);
       border-radius: 12px;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 1.5rem;
       color: var(--brand-orange);
   }
   
   .dock-item-info strong {
       display: block;
       font-size: 1.1rem;
       font-weight: 700;
       margin-bottom: 3px;
   }
   
   .dock-item-info small {
       color: var(--text-muted);
       font-size: 0.8rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   /* =========================================
      FOOTER Y WHATSAPP
      ========================================= */
   footer {
       background-color: #03050a;
       color: var(--text-muted);
       text-align: center;
       padding: 30px 20px;
       font-size: 0.85rem;
       border-top: 1px solid #1e293b;
       margin-top: 80px;
   }
   
   .whatsapp-flotante {
       position: fixed;
       bottom: 40px;
       right: 40px;
       background-color: #25D366;
       color: white;
       width: 65px;
       height: 65px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
       z-index: 1000;
       transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   }
   
   .whatsapp-flotante:hover {
       transform: scale(1.15) rotate(-10deg);
       box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6);
   }
   
   .whatsapp-flotante i { font-size: 2rem; }

   /* Responsividad */
   @media (max-width: 768px) {
       .hero-centrado h1 { font-size: 2.5rem; }
       .hero-centrado p { font-size: 1.1rem; }
       .top-bar-minimal { flex-direction: column; text-align: center; gap: 5px; }
       .header-principal { flex-direction: column; gap: 15px; padding: 20px; }
       .nav-links { flex-wrap: wrap; justify-content: center; gap: 10px; }
       .logo-marco-gigante-impacto { padding: 30px; }
       .logo-centro-monumental { height: 150px; }
       .titulo-seccion { font-size: 2.2rem; }
   }