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

    :root {
      --navy:      #07263F;
      --navy2:     #051d30;
      --navy3:     #0b3355;
      --gold:      #E8A800;
      --gold2:     #FFD166;
      --gold-pale: #FFF8E1;
      --white:     #F6FAFF;
      --gray:      #5E7A96;
      --light:     #EAF2FB;
      --accent:    #1A6FAB;
      --font-display: 'Cormorant Garamond', serif;
      --font-body:    'DM Sans', sans-serif;
      --ease-expo: cubic-bezier(0.19,1,0.22,1);
      --ease-back: cubic-bezier(0.34,1.56,0.64,1);
    }

    html { scroll-behavior: smooth; }
    body {
      background: var(--white);
      color: var(--navy);
      font-family: var(--font-body);
      font-weight: 300;
      overflow-x: hidden;
    }

    /* Custom cursor */
    *, a, button { cursor: none !important; }
    #cursor {
      width: 10px; height: 10px;
      background: var(--gold);
      border-radius: 50%;
      position: fixed; z-index: 99999;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: transform 0.1s, width 0.3s var(--ease-back), height 0.3s var(--ease-back), background 0.3s;
      mix-blend-mode: exclusion;
    }
    #cursor-ring {
      width: 38px; height: 38px;
      border: 1.5px solid rgba(232,168,0,0.5);
      border-radius: 50%;
      position: fixed; z-index: 99998;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: left 0.15s var(--ease-expo), top 0.15s var(--ease-expo), width 0.4s var(--ease-back), height 0.4s var(--ease-back), border-color 0.3s;
    }
    body.cursor-hover #cursor { width: 20px; height: 20px; }
    body.cursor-hover #cursor-ring { width: 60px; height: 60px; border-color: rgba(232,168,0,0.8); }

    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--navy2); }
    ::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold), var(--gold2)); border-radius: 3px; }

    /* ═══════════════════════════════════════════
       PROGRESS BAR
    ═══════════════════════════════════════════ */
    #progress-bar {
      position: fixed; top: 0; left: 0; z-index: 9999;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      width: 0%;
      transition: width 0.1s linear;
      box-shadow: 0 0 12px rgba(232,168,0,0.6);
    }

    /* ═══════════════════════════════════════════
       NAV
    ═══════════════════════════════════════════ */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      background: rgba(7,38,63,0.0);
      backdrop-filter: blur(0px);
      padding: 0 3.5rem;
      display: flex; align-items: center; justify-content: space-between;
      height: 88px;
      transition: background 0.5s var(--ease-expo), backdrop-filter 0.5s, height 0.5s var(--ease-expo), border-color 0.5s;
      border-bottom: 1px solid transparent;
    }
    .nav.scrolled {
      background: rgba(7,38,63,0.97);
      backdrop-filter: blur(20px);
      height: 72px;
      border-color: rgba(232,168,0,0.2);
    }
    .nav-logo { display: flex; align-items: center; text-decoration: none; }
    .nav-logo-img {
      height: 220px; width: auto; max-width: 220px; object-fit: contain;
      filter: brightness(1.15) drop-shadow(0 2px 12px rgba(232,168,0,0.3));
      transition: transform 0.4s var(--ease-back), filter 0.4s;
    }
    .nav-logo-img:hover { transform: scale(1.05); filter: brightness(1.3) drop-shadow(0 3px 22px rgba(232,168,0,0.7)); }
    .nav-links { display: flex; align-items: center; gap: 0.1rem; list-style: none; }
    .nav-links a {
      color: rgba(246,250,255,0.7);
      text-decoration: none;
      font-size: 0.8rem; font-weight: 400;
      letter-spacing: 0.09em; text-transform: uppercase;
      padding: 0.5rem 1.1rem;
      border-radius: 4px;
      border: 1px solid transparent;
      position: relative;
      transition: color .3s, background .3s, border-color .3s;
    }
    .nav-links a::after {
      content: '';
      position: absolute; bottom: 4px; left: 50%; right: 50%;
      height: 1px; background: var(--gold);
      transition: left 0.3s var(--ease-expo), right 0.3s var(--ease-expo);
    }
    .nav-links a:not(.nav-cta):hover { color: var(--white); }
    .nav-links a:not(.nav-cta):hover::after { left: 1.1rem; right: 1.1rem; }
    .nav-links .dropdown { position: relative; }
    .nav-links .dropdown-menu {
      position: absolute; top: calc(100% + 14px); left: 50%;
      transform: translateX(-50%) translateY(-6px) scale(0.97);
      background: rgba(5,29,48,0.98);
      border: 1px solid rgba(232,168,0,0.2);
      border-radius: 10px; min-width: 210px;
      padding: 0.6rem;
      opacity: 0; pointer-events: none;
      transition: opacity .25s, transform .25s var(--ease-expo);
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    .nav-links .dropdown:hover .dropdown-menu { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0) scale(1); }
    .dropdown-menu a { display: block; padding: 0.65rem 1rem; color: rgba(246,250,255,0.65); font-size: 0.8rem; border-radius: 6px; }
    .dropdown-menu a::after { display: none; }
    .dropdown-menu a:hover { background: rgba(232,168,0,0.12); color: var(--gold); }
    .nav-cta {
      background: var(--gold) !important; color: var(--navy) !important;
      font-weight: 600 !important; padding: 0.55rem 1.5rem !important;
      border-radius: 4px; opacity: 1 !important;
      letter-spacing: 0.06em;
      box-shadow: 0 4px 20px rgba(232,168,0,0.3);
      transition: background .3s, box-shadow .3s, transform .3s var(--ease-back) !important;
    }
    .nav-cta::after { display: none !important; }
    .nav-cta:hover { background: var(--gold2) !important; box-shadow: 0 6px 30px rgba(232,168,0,0.5) !important; transform: translateY(-2px) !important; }
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: none !important; }
    .hamburger span { width: 26px; height: 1.5px; background: var(--white); border-radius: 2px; transition: .4s var(--ease-expo); }

    /* ═══════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════ */
    .hero {
      min-height: 100vh;
      background: var(--navy);
      position: relative; overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      align-items: center;
      gap: 2.5rem;
      padding: 9rem 4.5rem 5rem;
    }

    /* Grain overlay */
    .hero::before {
      content: '';
      position: absolute; inset: 0; z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.025;
      pointer-events: none;
    }

    .hero-bg-orbs {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden;
    }
    .orb {
      position: absolute; border-radius: 50%;
      filter: blur(80px);
      animation: orbFloat 12s ease-in-out infinite;
    }
    .orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(26,111,171,0.15) 0%, transparent 70%); right: -100px; top: -100px; animation-delay: 0s; }
    .orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(232,168,0,0.08) 0%, transparent 70%); right: 200px; bottom: 0; animation-delay: -4s; }
    .orb-3 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(26,111,171,0.1) 0%, transparent 70%); left: -50px; top: 40%; animation-delay: -8s; }
    @keyframes orbFloat {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(30px,-20px) scale(1.05); }
      66%      { transform: translate(-20px,30px) scale(0.95); }
    }

    .hero-lines {
      position: absolute; right: 0; top: 0; bottom: 0; width: 55%;
      background: repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(26,111,171,0.05) 60px, rgba(26,111,171,0.05) 61px);
    }

    /* Hero content */
    .hero-content { position: relative; z-index: 1; max-width: 680px; }
    .hero-logo-wrap { margin-bottom: 2.2rem; }
    .hero-logo-img {
      height: 155px; width: auto; max-width: 400px; object-fit: contain;
      filter: drop-shadow(0 8px 32px rgba(232,168,0,0.4)) brightness(1.1);
      animation: logoGlow 4s ease-in-out infinite;
    }
    @keyframes logoGlow {
      0%,100% { filter: drop-shadow(0 6px 28px rgba(232,168,0,0.4)) brightness(1.1); }
      50%      { filter: drop-shadow(0 8px 45px rgba(232,168,0,0.65)) brightness(1.2); }
    }
    .hero-label {
      display: inline-flex; align-items: center; gap: 0.7rem;
      border: 1px solid rgba(232,168,0,0.4); color: var(--gold);
      font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
      padding: 0.45rem 1.2rem; border-radius: 2px; margin-bottom: 2rem;
      background: rgba(232,168,0,0.05);
      position: relative; overflow: hidden;
    }
    .hero-label::before { content: '◆'; font-size: 0.45rem; }
    .hero-label::after {
      content: '';
      position: absolute; top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(232,168,0,0.15), transparent);
      animation: shimmer 3s ease-in-out infinite 1s;
    }
    @keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } }

    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(3.2rem, 5.8vw, 5.8rem);
      font-weight: 600; line-height: 1.0;
      letter-spacing: -1px; color: var(--white); margin-bottom: 1.6rem;
    }
    .hero h1 em { font-style: italic; color: var(--gold); font-weight: 300; }
    .hero-desc { color: rgba(246,250,255,0.55); font-size: 0.98rem; line-height: 1.85; max-width: 490px; margin-bottom: 2.8rem; }
    .hero-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }
    .btn-gold {
      background: var(--gold); color: var(--navy);
      padding: 0.95rem 2.3rem; border-radius: 3px;
      font-weight: 600; font-size: 0.88rem; text-decoration: none;
      letter-spacing: 0.07em;
      display: inline-flex; align-items: center; gap: 0.5rem;
      position: relative; overflow: hidden;
      box-shadow: 0 4px 24px rgba(232,168,0,0.3);
      transition: box-shadow 0.4s, transform 0.4s var(--ease-back);
    }
    .btn-gold::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.5s var(--ease-expo);
    }
    .btn-gold:hover::before { transform: translateX(100%); }
    .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 8px 36px rgba(232,168,0,0.5); }
    .btn-ghost {
      border: 1px solid rgba(246,250,255,0.2); color: rgba(246,250,255,0.75);
      padding: 0.95rem 2.3rem; border-radius: 3px;
      font-size: 0.88rem; text-decoration: none;
      display: inline-flex; align-items: center; gap: 0.5rem;
      letter-spacing: 0.04em;
      transition: border-color .4s, color .4s, transform .4s var(--ease-back);
    }
    .btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }

    .hero-stats {
      display: flex; gap: 3rem;
      margin-top: 3.5rem; padding-top: 2.5rem;
      border-top: 1px solid rgba(232,168,0,0.15);
    }
    .hero-stat-num {
      font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
      color: var(--gold); line-height: 1;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .hero-stat-label { font-size: 0.76rem; color: rgba(246,250,255,0.4); letter-spacing: 0.05em; margin-top: 0.35rem; }

    /* ═══════════════════════════════════════════
       HERO RIGHT — carrusel
    ═══════════════════════════════════════════ */
    .hero-right {
      position: relative; z-index: 1;
      display: flex; flex-direction: column;
      gap: 1rem;
      align-self: center;
    }

    .carousel-box {
      position: relative;
      width: 100%;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,168,0,0.25);
      background: var(--navy2);
      aspect-ratio: 4 / 3;
    }
    .carousel-box::after {
      content: '';
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(to top, rgba(7,38,63,0.5) 0%, transparent 50%);
      pointer-events: none;
    }

    .c-slide {
      position: absolute; inset: 0;
      opacity: 0; transition: opacity 0.8s var(--ease-expo);
      pointer-events: none;
    }
    .c-slide.is-active { opacity: 1; pointer-events: auto; }
    .c-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

    .c-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(7,38,63,0.8);
      border: 1px solid rgba(232,168,0,0.4);
      color: var(--gold); font-size: 1.5rem;
      z-index: 10;
      display: flex; align-items: center; justify-content: center;
      transition: background .3s, border-color .3s, transform .3s var(--ease-back);
      backdrop-filter: blur(8px);
    }
    .c-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: translateY(-50%) scale(1.12); }
    .c-prev { left: 14px; }
    .c-next { right: 14px; }

    .c-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
    .c-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,0.3);
      border: 1px solid rgba(232,168,0,0.3);
      transition: background .3s, transform .3s var(--ease-back), width .3s var(--ease-back);
    }
    .c-dot.is-active { background: var(--gold); transform: scale(1.4); width: 18px; border-radius: 4px; border-color: var(--gold); }

    .scores-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
    .score-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(232,168,0,0.15);
      border-radius: 12px; padding: 0.9rem 0.5rem;
      text-align: center; backdrop-filter: blur(10px);
      transition: border-color .4s, background .4s, transform .4s var(--ease-back);
      position: relative; overflow: hidden;
    }
    .score-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(232,168,0,0.08), transparent);
      opacity: 0; transition: opacity .4s;
    }
    .score-card:hover { border-color: rgba(232,168,0,0.5); transform: translateY(-4px); }
    .score-card:hover::before { opacity: 1; }
    .score-trophy { font-size: 1.1rem; margin-bottom: 0.25rem; }
    .score-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--gold); line-height: 1; }
    .score-name { font-size: 0.72rem; color: rgba(246,250,255,0.85); font-weight: 500; margin: 0.2rem 0 0.1rem; }
    .score-tag { font-size: 0.6rem; color: rgba(246,250,255,0.35); letter-spacing: 0.06em; text-transform: uppercase; }

    /* ═══════════════════════════════════════════
       REVEAL ANIMATIONS (Intersection Observer)
    ═══════════════════════════════════════════ */
    .reveal {
      opacity: 0; transform: translateY(40px);
      transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo);
    }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); }
    .reveal-left.revealed { opacity: 1; transform: translateX(0); }
    .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); }
    .reveal-right.revealed { opacity: 1; transform: translateX(0); }
    .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-back); }
    .reveal-scale.revealed { opacity: 1; transform: scale(1); }
    .delay-1 { transition-delay: 0.1s; }
    .delay-2 { transition-delay: 0.2s; }
    .delay-3 { transition-delay: 0.3s; }
    .delay-4 { transition-delay: 0.4s; }
    .delay-5 { transition-delay: 0.5s; }
    .delay-6 { transition-delay: 0.6s; }

    /* ═══════════════════════════════════════════
       SECCIÓN COMÚN
    ═══════════════════════════════════════════ */
    section { padding: 7rem 4.5rem; }
    .section-eyebrow {
      display: inline-flex; align-items: center; gap: 0.6rem;
      color: var(--gold); font-size: 0.7rem;
      letter-spacing: 0.22em; text-transform: uppercase;
      font-weight: 500; margin-bottom: 1.1rem;
    }
    .section-eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 3.5vw, 3.2rem);
      font-weight: 600; letter-spacing: -0.5px; line-height: 1.1;
    }
    .section-sub { color: var(--gray); font-size: 0.95rem; line-height: 1.8; max-width: 540px; margin-top: 1.1rem; }

    /* ═══════════════════════════════════════════
       MARQUEE STRIP
    ═══════════════════════════════════════════ */
    .marquee-strip {
      background: var(--gold);
      padding: 0.85rem 0;
      overflow: hidden;
      display: flex;
    }
    .marquee-track {
      display: flex; gap: 0; white-space: nowrap;
      animation: marqueeScroll 20s linear infinite;
    }
    .marquee-item {
      color: var(--navy); font-size: 0.72rem;
      font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 0 2.5rem;
      display: flex; align-items: center; gap: 2.5rem;
    }
    .marquee-item::after { content: '◆'; font-size: 0.5rem; }
    @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

    /* ═══════════════════════════════════════════
       HISTORIA
    ═══════════════════════════════════════════ */
    .historia { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
    .historia::before {
      content: 'ELITE';
      position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
      font-family: var(--font-display); font-size: 22rem; font-weight: 700;
      color: rgba(255,255,255,0.015); line-height: 1; pointer-events: none;
      letter-spacing: -8px;
    }
    .historia-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; position: relative; z-index: 1; }
    .historia-text .section-title { color: var(--white); }
    .historia-text .section-sub { color: rgba(246,250,255,0.5); }
    .historia-text p { color: rgba(246,250,255,0.55); font-size: 0.94rem; line-height: 1.85; margin-top: 1.5rem; }
    .historia-milestones { display: flex; flex-direction: column; gap: 0; }
    .milestone {
      display: grid; grid-template-columns: 75px 1fr; gap: 1.6rem;
      padding: 1.8rem 0; border-bottom: 1px solid rgba(232,168,0,0.08);
      transition: background .3s;
      position: relative;
    }
    .milestone::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 0;
      background: rgba(232,168,0,0.04);
      transition: width .4s var(--ease-expo);
      border-radius: 0 4px 4px 0;
    }
    .milestone:hover::before { width: 100%; }
    .milestone:last-child { border-bottom: none; }
    .milestone-year { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--gold); line-height: 1; }
    .milestone-text h4 { font-weight: 500; color: var(--white); margin-bottom: 0.3rem; font-size: 0.94rem; }
    .milestone-text p { font-size: 0.82rem; color: rgba(246,250,255,0.4); line-height: 1.65; margin: 0; }

    /* ═══════════════════════════════════════════
       CURSOS
    ═══════════════════════════════════════════ */
    .cursos { background: var(--light); }
    .cursos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
    .curso-card {
      background: var(--white); border-radius: 12px; overflow: hidden;
      border: 1px solid rgba(13,59,102,0.08);
      transition: transform .5s var(--ease-expo), box-shadow .5s var(--ease-expo), border-color .3s;
      position: relative;
    }
    .curso-card::before {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      transform: scaleX(0);
      transition: transform .5s var(--ease-expo);
      transform-origin: left;
    }
    .curso-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(7,38,63,0.14); border-color: rgba(232,168,0,0.2); }
    .curso-card:hover::before { transform: scaleX(1); }
    .curso-badge {
      position: absolute; top: 1.1rem; right: 1.1rem;
      background: var(--gold); color: var(--navy);
      font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 0.28rem 0.75rem; border-radius: 2px;
    }
    .curso-header { padding: 2.2rem 2rem 1.5rem; border-bottom: 1px solid rgba(7,38,63,0.05); }
    .curso-icon { font-size: 2.2rem; margin-bottom: 1rem; display: block; transition: transform .4s var(--ease-back); }
    .curso-card:hover .curso-icon { transform: scale(1.15); }
    .curso-area { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 0.4rem; }
    .curso-header h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; }
    .curso-body { padding: 1.5rem 2rem 2rem; }
    .curso-body p { font-size: 0.85rem; color: var(--gray); line-height: 1.7; margin-bottom: 1.3rem; }
    .curso-info { display: flex; gap: 1.2rem; font-size: 0.76rem; color: var(--gray); margin-bottom: 1.5rem; }
    .curso-info span { display: flex; align-items: center; gap: 0.3rem; }
    .btn-curso {
      display: block; text-align: center;
      background: var(--navy); color: var(--white);
      padding: 0.75rem; border-radius: 4px;
      text-decoration: none; font-size: 0.82rem; font-weight: 500;
      letter-spacing: 0.06em;
      position: relative; overflow: hidden;
      transition: color .3s;
    }
    .btn-curso::before {
      content: '';
      position: absolute; inset: 0;
      background: var(--gold);
      transform: translateY(100%);
      transition: transform .4s var(--ease-expo);
    }
    .btn-curso span { position: relative; z-index: 1; }
    .btn-curso:hover { color: var(--navy); }
    .btn-curso:hover::before { transform: translateY(0); }

    /* ═══════════════════════════════════════════
       METODOLOGÍA
    ═══════════════════════════════════════════ */
    .metodologia { background: var(--white); }
    .metodo-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4.5rem; }
    .metodo-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
    .step-card {
      background: var(--light); border-radius: 10px; padding: 2.2rem;
      position: relative; border-left: 2px solid var(--gold);
      transition: transform .4s var(--ease-expo), box-shadow .4s;
      overflow: hidden;
    }
    .step-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(232,168,0,0.04), transparent);
      opacity: 0; transition: opacity .4s;
    }
    .step-card:hover { transform: translateX(6px); box-shadow: -4px 0 0 0 var(--gold), 0 12px 40px rgba(7,38,63,0.07); }
    .step-card:hover::after { opacity: 1; }
    .step-num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: rgba(232,168,0,0.1); line-height: 1; position: absolute; top: 1rem; right: 1.5rem; transition: color .4s; }
    .step-card:hover .step-num { color: rgba(232,168,0,0.18); }
    .step-icon { font-size: 1.7rem; margin-bottom: 0.9rem; display: block; transition: transform .4s var(--ease-back); }
    .step-card:hover .step-icon { transform: scale(1.2); }
    .step-card h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
    .step-card p { font-size: 0.84rem; color: var(--gray); line-height: 1.65; }

    /* ═══════════════════════════════════════════
       EQUIPO
    ═══════════════════════════════════════════ */
    .equipo { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
    .equipo::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(26,111,171,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .equipo .section-title { color: var(--white); }
    .equipo .section-sub { color: rgba(246,250,255,0.45); }
    .equipo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
    .miembro-card {
      background: rgba(255,255,255,0.03); border: 1px solid rgba(232,168,0,0.1);
      border-radius: 12px; padding: 2.2rem 1.5rem; text-align: center;
      transition: border-color .4s, background .4s, transform .5s var(--ease-expo);
      position: relative; overflow: hidden;
    }
    .miembro-card::before {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 0;
      background: linear-gradient(to top, rgba(232,168,0,0.08), transparent);
      transition: height .4s var(--ease-expo);
    }
    .miembro-card:hover { border-color: rgba(232,168,0,0.35); background: rgba(255,255,255,0.06); transform: translateY(-5px); }
    .miembro-card:hover::before { height: 60%; }
    .miembro-avatar {
      width: 78px; height: 78px; border-radius: 50%;
      background: var(--accent);
      border: 1.5px solid rgba(232,168,0,0.4);
      margin: 0 auto 1.3rem;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--gold);
      transition: border-color .4s, transform .4s var(--ease-back), box-shadow .4s;
    }
    .miembro-card:hover .miembro-avatar { border-color: var(--gold); transform: scale(1.08); box-shadow: 0 0 0 4px rgba(232,168,0,0.15); }
    .miembro-card h4 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--white); margin-bottom: 0.3rem; }
    .miembro-card .rol { font-size: 0.68rem; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.9rem; }
    .miembro-card .bio { font-size: 0.8rem; color: rgba(246,250,255,0.4); line-height: 1.65; }

    /* ═══════════════════════════════════════════
       RESULTADOS (contador animado)
    ═══════════════════════════════════════════ */
    .resultados { background: var(--gold-pale); padding: 6rem 4.5rem; }
    .resultados-header { text-align: center; margin-bottom: 4rem; }
    .resultados-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
    .resultado-card {
      background: var(--white); border-radius: 10px; padding: 2.2rem; text-align: center;
      border-bottom: 2px solid var(--gold);
      transition: transform .5s var(--ease-expo), box-shadow .5s;
      position: relative; overflow: hidden;
    }
    .resultado-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(232,168,0,0.04), transparent);
      opacity: 0; transition: opacity .4s;
    }
    .resultado-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(7,38,63,0.12); }
    .resultado-card:hover::before { opacity: 1; }
    .resultado-puntaje { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--navy); line-height: 1; }
    .resultado-area { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0.5rem 0 0.3rem; }
    .resultado-nombre { font-size: 0.82rem; color: var(--gray); }
    .resultado-promedio {
      background: var(--navy); border-radius: 10px; padding: 2.5rem 3rem;
      display: flex; align-items: center; justify-content: space-between; color: var(--white);
      position: relative; overflow: hidden;
    }
    .resultado-promedio::before {
      content: '';
      position: absolute; top: -40px; right: -40px; width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(232,168,0,0.12), transparent 70%);
      pointer-events: none;
    }
    .resultado-promedio h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
    .resultado-promedio p { font-size: 0.85rem; color: rgba(246,250,255,0.5); margin-top: 0.3rem; }
    .promedio-num {
      font-family: var(--font-display); font-size: 4.5rem; font-weight: 700;
      background: linear-gradient(135deg, var(--gold), var(--gold2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* Animación contador */
    .count-up { display: inline-block; }

    /* ═══════════════════════════════════════════
       FAQ
    ═══════════════════════════════════════════ */
    .faq { background: var(--white); }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; }
    .faq-item {
      border: 1px solid rgba(7,38,63,0.08); border-radius: 10px; overflow: hidden;
      transition: border-color .3s, box-shadow .3s;
    }
    .faq-item:hover { border-color: rgba(232,168,0,0.3); box-shadow: 0 4px 20px rgba(7,38,63,0.06); }
    .faq-question {
      padding: 1.5rem 1.8rem; font-weight: 500; font-size: 0.9rem;
      display: flex; justify-content: space-between; align-items: center;
      gap: 1rem; user-select: none; transition: background .3s;
    }
    .faq-question:hover { background: var(--light); }
    .faq-arrow {
      width: 30px; height: 30px; border-radius: 50%;
      background: var(--navy); color: var(--white);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; flex-shrink: 0;
      transition: transform .4s var(--ease-back), background .3s;
    }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-expo); background: var(--light); }
    .faq-answer-inner { padding: 1.4rem 1.8rem; font-size: 0.88rem; color: var(--gray); line-height: 1.75; }
    .faq-item.open .faq-answer { max-height: 300px; }
    .faq-item.open .faq-arrow { transform: rotate(45deg); background: var(--gold); color: var(--navy); }
    .faq-item.open { border-color: rgba(232,168,0,0.3); }

    /* ═══════════════════════════════════════════
       CONTACTO
    ═══════════════════════════════════════════ */
    .contacto { background: var(--light); }
    .contacto-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
    .contacto-info h2 { font-family: var(--font-display); font-size: 2.7rem; font-weight: 600; letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 1.5rem; }
    .contacto-info p { font-size: 0.9rem; color: var(--gray); line-height: 1.8; margin-bottom: 2rem; }
    .contacto-datos { display: flex; flex-direction: column; gap: 0.9rem; }
    .dato {
      display: flex; align-items: flex-start; gap: 1rem;
      padding: 1.2rem 1.3rem; background: var(--white); border-radius: 8px;
      border-left: 2px solid var(--gold);
      transition: transform .4s var(--ease-expo), box-shadow .4s;
    }
    .dato:hover { transform: translateX(5px); box-shadow: -2px 0 0 0 var(--gold2), 0 8px 24px rgba(7,38,63,0.07); }
    .dato-icon { font-size: 1.2rem; flex-shrink: 0; }
    .dato-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.25rem; }
    .dato-value { font-size: 0.88rem; color: var(--navy); line-height: 1.5; }

    .contact-form {
      background: var(--white); border-radius: 14px; padding: 2.8rem;
      box-shadow: 0 8px 40px rgba(7,38,63,0.09);
      border: 1px solid rgba(7,38,63,0.06);
    }
    .contact-form h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; }
    .form-group { margin-bottom: 1.2rem; }
    .form-group label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.5rem; }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%; padding: 0.9rem 1.1rem;
      border: 1.5px solid rgba(7,38,63,0.1); border-radius: 6px;
      font-family: var(--font-body); font-size: 0.88rem; color: var(--navy);
      background: var(--white); outline: none;
      transition: border-color .3s, box-shadow .3s;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(232,168,0,0.12);
    }
    .form-group textarea { height: 115px; resize: vertical; }
    .btn-form {
      width: 100%; background: var(--navy); color: var(--white);
      border: none; padding: 1.1rem; border-radius: 6px;
      font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
      letter-spacing: 0.08em;
      position: relative; overflow: hidden;
      transition: color .3s;
    }
    .btn-form::before {
      content: '';
      position: absolute; inset: 0;
      background: var(--gold);
      transform: translateY(100%);
      transition: transform .4s var(--ease-expo);
    }
    .btn-form span { position: relative; z-index: 1; }
    .btn-form:hover { color: var(--navy); }
    .btn-form:hover::before { transform: translateY(0); }

    /* ═══════════════════════════════════════════
       REDES
    ═══════════════════════════════════════════ */
    .redes { background: var(--navy2); padding: 5rem 4.5rem; text-align: center; position: relative; overflow: hidden; }
    .redes::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(26,111,171,0.12), transparent);
      pointer-events: none;
    }
    .redes h2 { font-family: var(--font-display); font-size: 2.3rem; font-weight: 600; color: var(--white); margin-bottom: 0.7rem; position: relative; }
    .redes p { color: rgba(246,250,255,0.45); font-size: 0.9rem; margin-bottom: 2.8rem; position: relative; }
    .redes-links { display: flex; justify-content: center; align-items: center; gap: 1.2rem; flex-wrap: wrap; position: relative; }
    .red-btn {
      display: flex; align-items: center; gap: 0.7rem;
      padding: 0.9rem 2.2rem; border-radius: 6px;
      text-decoration: none; font-size: 0.88rem; font-weight: 500;
      transition: transform .4s var(--ease-back), box-shadow .4s;
      position: relative; overflow: hidden;
    }
    .red-btn::before {
      content: '';
      position: absolute; inset: 0;
      background: rgba(255,255,255,0.15);
      opacity: 0; transition: opacity .3s;
    }
    .red-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
    .red-btn:hover::before { opacity: 1; }
    .red-instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); color: white; }
    .red-facebook { background: #1877F2; color: white; }
    .red-tiktok { background: #111; color: white; border: 1px solid rgba(255,255,255,0.08); }
    .red-whatsapp { background: #25D366; color: white; }
    .red-btn svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

    /* ═══════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════ */
    footer { background: var(--navy); color: var(--white); padding: 5rem 4.5rem 2.5rem; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(232,168,0,0.1); margin-bottom: 2rem; }
    .footer-brand p { font-size: 0.82rem; color: rgba(246,250,255,0.4); line-height: 1.75; margin-top: 1.2rem; }
    .footer-redes { display: flex; gap: 0.8rem; margin-top: 1.8rem; }
    .social-icon {
      width: 38px; height: 38px; border-radius: 8px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(232,168,0,0.12);
      display: flex; align-items: center; justify-content: center;
      text-decoration: none; color: rgba(246,250,255,0.5); font-size: 0.9rem;
      transition: background .3s, color .3s, transform .4s var(--ease-back), border-color .3s;
    }
    .social-icon:hover { background: var(--gold); color: var(--navy); transform: translateY(-3px); border-color: var(--gold); }
    .footer-col h5 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.3rem; }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 0.75rem; }
    .footer-col ul li a {
      color: rgba(246,250,255,0.4); text-decoration: none; font-size: 0.84rem;
      transition: color .3s, padding-left .3s;
      display: inline-block;
    }
    .footer-col ul li a:hover { color: var(--gold); padding-left: 6px; }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; color: rgba(246,250,255,0.25); }

    /* ═══════════════════════════════════════════
       WHATSAPP FLOTANTE
    ═══════════════════════════════════════════ */
    .wa-float {
      position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
      width: 60px; height: 60px; background: #25D366; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 30px rgba(37,211,102,0.55);
      text-decoration: none;
      transition: transform .4s var(--ease-back);
    }
    .wa-float::before {
      content: '';
      position: absolute; inset: 0; border-radius: 50%;
      background: #25D366;
      animation: waPing 2.5s ease-out infinite;
      z-index: -1;
    }
    .wa-float:hover { transform: scale(1.12); }
    .wa-float svg { width: 30px; height: 30px; fill: white; }
    @keyframes waPing {
      0%   { transform: scale(1); opacity: 0.7; }
      100% { transform: scale(1.8); opacity: 0; }
    }

    /* ═══════════════════════════════════════════
       COUNTER ANIMATION
    ═══════════════════════════════════════════ */
    @keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* ═══════════════════════════════════════════
       LOADING ANIMATION (page intro)
    ═══════════════════════════════════════════ */
    #page-loader {
      position: fixed; inset: 0; z-index: 10000;
      background: var(--navy2);
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 1.5rem;
      transition: opacity 0.8s var(--ease-expo), visibility 0.8s;
    }
    #page-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
    .loader-logo {
      height: 90px; width: auto; max-width: 280px; object-fit: contain;
      filter: brightness(1.2) drop-shadow(0 4px 20px rgba(232,168,0,0.5));
      animation: loaderPulse 1.2s ease-in-out infinite;
    }
    @keyframes loaderPulse {
      0%,100% { transform: scale(1); opacity: 0.9; }
      50%      { transform: scale(1.05); opacity: 1; }
    }
    .loader-bar-wrap { width: 220px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
    .loader-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--gold), var(--gold2));
      border-radius: 2px;
      animation: loaderFill 1.4s var(--ease-expo) forwards;
    }
    @keyframes loaderFill { from { width: 0; } to { width: 100%; } }

    /* ═══════════════════════════════════════════
       HERO ENTRY ANIMATIONS
    ═══════════════════════════════════════════ */
    .hero-content > * {
      opacity: 0; transform: translateY(22px);
      animation: heroItemIn 0.8s var(--ease-expo) forwards;
    }
    .hero-content > *:nth-child(1) { animation-delay: 1.6s; }
    .hero-content > *:nth-child(2) { animation-delay: 1.75s; }
    .hero-content > *:nth-child(3) { animation-delay: 1.9s; }
    .hero-content > *:nth-child(4) { animation-delay: 2.0s; }
    .hero-content > *:nth-child(5) { animation-delay: 2.1s; }
    .hero-content > *:nth-child(6) { animation-delay: 2.25s; }
    @keyframes heroItemIn { to { opacity: 1; transform: translateY(0); } }

    .hero-right {
      opacity: 0; transform: translateX(30px);
      animation: heroRightIn 1s var(--ease-expo) 2.1s forwards;
    }
    @keyframes heroRightIn { to { opacity: 1; transform: translateX(0); } }

    /* ═══════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .equipo-grid { grid-template-columns: repeat(2, 1fr); }
      .metodo-header { grid-template-columns: 1fr; }
      .resultados-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      section { padding: 4.5rem 1.8rem; }
      .resultados { padding: 4.5rem 1.8rem; }
      .redes { padding: 4.5rem 1.8rem; }
      footer { padding: 4rem 1.8rem 2rem; }
      .nav { padding: 0 1.5rem; }
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .hero { padding: 7rem 1.8rem 4rem; grid-template-columns: 1fr; }
      .hero-right { display: none; }
      .hero h1 { font-size: 3.2rem; }
      .historia-inner, .cursos-grid, .metodo-steps,
      .equipo-grid, .contacto-inner, .footer-grid { grid-template-columns: 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .resultados-grid { grid-template-columns: repeat(2, 1fr); }
      .hero-stats { gap: 1.5rem; }
      .resultado-promedio { flex-direction: column; gap: 1.5rem; text-align: center; }
      .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
      #cursor, #cursor-ring { display: none; }
    }

/* ═══════════════════════════════════════════════════════════════
   NOSOTROS.CSS — Animaciones exclusivas · Grupo Educativo Élite
   Agregar al final de css/style.css
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   VARIABLES PROPIAS
───────────────────────────────────────── */
:root {
  --n-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --n-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --n-gold:      #E8A800;
  --n-navy:      #07263F;
  --n-navy2:     #051e33;
  --n-light:     #EAF2FB;
  --n-gray:      #5a6a7a;
}

/* ─────────────────────────────────────────
   1. INTRO LOADER CINEMATICO
───────────────────────────────────────── */
#nos-intro {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--n-navy2);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.8rem;
  transition: opacity 1s var(--n-ease), visibility 1s;
}
#nos-intro.out { opacity: 0; visibility: hidden; pointer-events: none; }

.nsi-logo {
  height: 96px; width: auto; object-fit: contain;
  filter: brightness(1.2) drop-shadow(0 4px 22px rgba(232,168,0,.5));
  animation: nsi-pulse 1.4s ease-in-out infinite;
}
@keyframes nsi-pulse {
  0%,100% { transform: scale(1);    filter: brightness(1.1) drop-shadow(0 4px 18px rgba(232,168,0,.4)); }
  50%      { transform: scale(1.05); filter: brightness(1.3) drop-shadow(0 6px 34px rgba(232,168,0,.7)); }
}
.nsi-word {
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem; font-weight: 300; letter-spacing: .45em;
  text-transform: uppercase; color: rgba(246,250,255,.3);
  animation: nsi-blink 1.6s ease-in-out infinite alternate;
}
@keyframes nsi-blink { from { opacity:.2; } to { opacity:.9; } }
.nsi-bar-wrap { width: 220px; height: 1px; background: rgba(255,255,255,.07); overflow: hidden; }
.nsi-bar { height: 100%; background: linear-gradient(90deg, var(--n-gold), #FFD166); animation: nsi-fill 1.6s var(--n-ease) forwards; }
@keyframes nsi-fill { from { width: 0; } to { width: 100%; } }

/* ─────────────────────────────────────────
   2. HERO SPLIT — izq: imagen, der: texto
───────────────────────────────────────── */
.nos-hero {
  position: relative; z-index: 1; min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden; background: var(--n-navy);
}

/* Cortina de revelado */
.nos-hero-curtain {
  position: absolute; inset: 0; z-index: 20;
  background: var(--n-navy2);
  transform-origin: top;
  animation: nos-curtainDrop 1.1s var(--n-ease) 1.5s forwards;
}
@keyframes nos-curtainDrop { to { transform: scaleY(0); transform-origin: bottom; } }

/* Columna imagen izquierda */
.nos-hero-img-col {
  position: relative; overflow: hidden; min-height: 100vh;
}
.nos-hero-img-col img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: 0; transform: scale(1.1);
  animation: nos-imgReveal 1.6s var(--n-ease) 2.6s forwards;
}
@keyframes nos-imgReveal { to { opacity: 1; transform: scale(1.02); } }

/* Gradiente de fusión hacia la derecha */
.nos-hero-img-col::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to right, transparent 55%, var(--n-navy) 100%),
    linear-gradient(to bottom, rgba(7,38,63,.5) 0%, transparent 35%, rgba(7,38,63,.6) 100%);
}

/* Columna contenido derecha */
.nos-hero-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  padding: 9rem 5rem 6rem 3.5rem;
  background: var(--n-navy);
}
.nos-hero-content::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 0% 50%, rgba(26,111,171,.1), transparent);
  pointer-events: none;
}
/* Línea lateral dorada */
.nos-hero-content::after {
  content: '';
  position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(232,168,0,.45), transparent);
}

/* Badge de años */
.nos-years-badge {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 2.2rem;
  opacity: 0; animation: nos-slideR .8s var(--n-ease) 2.7s forwards;
}
.nos-years-num {
  font-family: "Cormorant Garamond", serif;
  font-size: 5.5rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--n-gold), #FFD166);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nos-years-info { display: flex; flex-direction: column; gap: .15rem; }
.nos-years-info span:first-child { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(246,250,255,.4); }
.nos-years-info span:last-child  { font-size: .78rem; font-weight: 500; color: rgba(246,250,255,.65); }

.nos-hero-h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.6rem, 4.2vw, 4.8rem);
  font-weight: 600; line-height: .98; letter-spacing: -1.5px;
  color: #f6faff; margin-bottom: 2rem;
  opacity: 0; animation: nos-slideR .9s var(--n-ease) 2.85s forwards;
}
.nos-hero-h1 em { font-style: italic; color: var(--n-gold); font-weight: 300; }

.nos-hero-lede {
  font-size: .95rem; color: rgba(246,250,255,.48); line-height: 1.9;
  max-width: 440px; margin-bottom: 3rem;
  opacity: 0; animation: nos-slideR .9s var(--n-ease) 3s forwards;
}

.nos-hero-pills {
  display: flex; flex-direction: column; gap: .55rem;
  opacity: 0; animation: nos-slideR .9s var(--n-ease) 3.15s forwards;
}
.nos-pill {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.1rem; border-radius: 6px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(232,168,0,.1);
  font-size: .83rem; color: rgba(246,250,255,.6);
  transition: background .35s, border-color .35s, transform .4s var(--n-ease);
}
.nos-pill:hover { background: rgba(232,168,0,.07); border-color: rgba(232,168,0,.35); transform: translateX(6px); }
.nos-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--n-gold); flex-shrink: 0; }

.nos-scroll-cue {
  position: absolute; bottom: 2.5rem; right: 5rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  opacity: 0; animation: nos-fadeUp .8s var(--n-ease) 3.6s forwards; z-index: 3;
}
.nos-scroll-cue span { font-size: .58rem; letter-spacing: .22em; color: rgba(246,250,255,.25); text-transform: uppercase; }
.nos-scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(232,168,0,.6), transparent); animation: nos-lineAnim 2s ease-in-out infinite; }
@keyframes nos-lineAnim { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(.4);opacity:.3} }

/* Keyframes base */
@keyframes nos-slideR { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }
@keyframes nos-fadeUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes nos-fadeIn  { from{opacity:0} to{opacity:1} }

/* ─────────────────────────────────────────
   3. MARQUEE DORADO
───────────────────────────────────────── */
.nos-marquee-strip {
  position: relative; z-index: 1;
  background: var(--n-gold); padding: .88rem 0; overflow: hidden; display: flex;
}
.nos-marquee-track { display: flex; white-space: nowrap; animation: nos-marquee 22s linear infinite; }
.nos-marquee-item {
  color: var(--n-navy); font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; padding: 0 2.5rem;
  display: inline-flex; align-items: center; gap: 2rem;
}
.nos-marquee-item::after { content: "◆"; font-size: .45rem; }
@keyframes nos-marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─────────────────────────────────────────
   4. FOTO GRANDE img10 — escena de impacto
───────────────────────────────────────── */
.nos-fullphoto {
  position: relative; z-index: 1; min-height: 88vh;
  display: flex; align-items: center; overflow: hidden;
  background: var(--n-navy2);
}
.nos-fullphoto-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.08);
  transition: transform 0.1s linear;
  will-change: transform;
}
.nos-fullphoto::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(7,38,63,.94) 0%, rgba(7,38,63,.6) 55%, rgba(7,38,63,.15) 100%),
    linear-gradient(to bottom, rgba(7,38,63,.4) 0%, transparent 25%, rgba(7,38,63,.65) 100%);
}
/* Grain effect */
.nos-fullphoto::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .03;
}
.nos-fp-content {
  position: relative; z-index: 3; padding: 6rem 5rem; max-width: 740px;
}
.nos-fp-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--n-gold); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500;
  border: 1px solid rgba(232,168,0,.3); padding: .42rem 1.4rem; border-radius: 2px;
  background: rgba(232,168,0,.06); margin-bottom: 2rem; position: relative; overflow: hidden;
}
.nos-fp-eyebrow::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(232,168,0,.2), transparent);
  animation: nos-shimmer 3.5s ease-in-out 1s infinite;
}
@keyframes nos-shimmer { 0%{left:-100%} 100%{left:220%} }

.nos-fp-quote {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4.5vw, 4.2rem);
  font-weight: 600; line-height: 1.06; letter-spacing: -.5px;
  color: #f6faff; margin-bottom: 2.5rem;
}
.nos-fp-quote em { font-style: italic; color: var(--n-gold); font-weight: 300; }

.nos-fp-stats {
  display: flex; gap: 3rem; padding-top: 2.2rem;
  border-top: 1px solid rgba(232,168,0,.15);
}
.nos-fp-stat .fp-n {
  font-family: "Cormorant Garamond", serif; font-size: 3.2rem; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--n-gold), #FFD166);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nos-fp-stat .fp-l { font-size: .68rem; color: rgba(246,250,255,.38); letter-spacing: .06em; margin-top: .3rem; }

/* ─────────────────────────────────────────
   5. HISTORIA NARRATIVA — editorial layout
───────────────────────────────────────── */
.nos-historia {
  position: relative; z-index: 1;
  background: #ffffff; padding: 9rem 5rem; overflow: hidden;
}
/* Watermark de fondo */
.nos-historia::before {
  content: "ÉLITE";
  position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
  font-family: "Cormorant Garamond", serif; font-size: 22rem; font-weight: 700;
  color: rgba(7,38,63,.022); line-height: 1; pointer-events: none; user-select: none; letter-spacing: -8px;
}
.nos-historia-grid {
  display: grid; grid-template-columns: 340px 1fr; gap: 7rem;
  max-width: 1260px; margin: 0 auto; align-items: start;
}

/* Columna lateral sticky */
.nos-historia-aside { position: sticky; top: 7.5rem; }
.nos-aside-eyebrow {
  font-size: .64rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--n-gold); font-weight: 600; margin-bottom: 1.2rem;
}
.nos-aside-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 3.5vw, 3.8rem); font-weight: 600;
  line-height: .95; letter-spacing: -1px; color: var(--n-navy); margin-bottom: 2rem;
}
.nos-aside-title em { font-style: italic; color: var(--n-gold); }
.nos-aside-rule { width: 36px; height: 2px; background: linear-gradient(90deg, var(--n-gold), transparent); margin-bottom: 1.8rem; }
.nos-aside-desc { font-size: .86rem; color: var(--n-gray); line-height: 1.85; margin-bottom: 2.5rem; }

/* Mini-foto lateral */
.nos-aside-photo {
  border-radius: 14px; overflow: hidden; position: relative;
  box-shadow: 0 20px 55px rgba(7,38,63,.15);
}
.nos-aside-photo img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .6s var(--n-ease); }
.nos-aside-photo:hover img { transform: scale(1.05); }
.nos-aside-photo::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(to top, rgba(7,38,63,.6), transparent);
}

/* Párrafos narrativos */
.nos-paragraphs { display: flex; flex-direction: column; gap: 0; }
.nos-p-block {
  padding: 2.8rem 0 2.8rem 2.5rem;
  border-left: 1px solid rgba(7,38,63,.08);
  position: relative;
  transition: border-color .4s;
}
.nos-p-block:hover { border-color: rgba(232,168,0,.4); }
/* Número decorativo */
.nos-p-block::before {
  content: attr(data-n);
  position: absolute; left: -2.2rem; top: 2rem;
  font-family: "Cormorant Garamond", serif; font-size: 4rem; font-weight: 700;
  color: rgba(7,38,63,.045); line-height: 1; pointer-events: none;
  transition: color .4s;
}
.nos-p-block:hover::before { color: rgba(232,168,0,.18); }
/* Punto dorado en la línea */
.nos-p-block::after {
  content: '';
  position: absolute; left: -5px; top: 3.5rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(7,38,63,.12); border: 1.5px solid rgba(232,168,0,.25);
  transition: background .4s, border-color .4s, transform .4s var(--n-ease-back);
}
.nos-p-block:hover::after { background: var(--n-gold); border-color: var(--n-gold); transform: scale(1.4); }

.nos-p-block p { font-size: .97rem; color: #4a5c6a; line-height: 1.95; }
.nos-p-block p strong { color: var(--n-navy); font-weight: 600; }

/* Frase final — bloque de impacto */
.nos-finale-block {
  margin-top: 4rem; padding: 3.5rem 4rem;
  background: var(--n-navy); border-radius: 18px;
  position: relative; overflow: hidden;
}
.nos-finale-block::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 100% 0%, rgba(232,168,0,.1), transparent);
}
/* Línea decorativa animada */
.nos-finale-block::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--n-gold), transparent);
  animation: nos-lineSlide 3s ease-in-out infinite;
}
@keyframes nos-lineSlide {
  0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}
}
.nos-finale-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 600; line-height: 1.3;
  color: #f6faff; position: relative; z-index: 1;
}
.nos-finale-text em { font-style: italic; color: var(--n-gold); }
.nos-finale-rule { width: 28px; height: 1px; background: rgba(232,168,0,.4); margin: 1.4rem 0; position: relative; z-index: 1; }
.nos-finale-sub { font-size: .78rem; color: rgba(246,250,255,.38); letter-spacing: .1em; position: relative; z-index: 1; }

/* ─────────────────────────────────────────
   6. GALERÍA HORIZONTAL — carrusel drag
───────────────────────────────────────── */
.nos-gallery-section {
  position: relative; z-index: 1;
  background: var(--n-navy2); padding: 8rem 0; overflow: hidden;
}
.nos-gallery-hdr { text-align: center; margin-bottom: 4rem; padding: 0 5rem; }
.nos-gallery-hdr .section-title { color: #f6faff; }
.nos-gallery-hdr .section-sub { color: rgba(246,250,255,.42); margin: .8rem auto 0; }

.nos-gallery-scroll {
  overflow-x: auto; cursor: grab; padding: .5rem 5rem 2rem;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  user-select: none;
}
.nos-gallery-scroll:active { cursor: grabbing; }
.nos-gallery-scroll::-webkit-scrollbar { height: 3px; }
.nos-gallery-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
.nos-gallery-scroll::-webkit-scrollbar-thumb { background: var(--n-gold); border-radius: 2px; }

.nos-gallery-row { display: flex; gap: 1.2rem; width: max-content; }
.nos-gallery-item {
  flex-shrink: 0; width: 360px; height: 440px;
  border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: 0 14px 50px rgba(0,0,0,.45);
  transition: transform .5s var(--n-ease), box-shadow .5s;
  background: linear-gradient(135deg, var(--n-navy), #1a4a6a);
}
.nos-gallery-item:hover { transform: scale(1.03) translateY(-8px); box-shadow: 0 28px 70px rgba(0,0,0,.6); }
.nos-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--n-ease); opacity: 0; }
.nos-gallery-item img.n-loaded { opacity: 1; transition: transform .8s var(--n-ease), opacity .6s; }
.nos-gallery-item:hover img { transform: scale(1.08); }
.nos-gallery-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(7,38,63,.85) 100%);
  opacity: 0; transition: opacity .4s;
}
.nos-gallery-item:hover::after { opacity: 1; }
.nos-gallery-cap {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 1.4rem 1.6rem; color: #fff;
  transform: translateY(10px); opacity: 0; transition: all .4s;
}
.nos-gallery-item:hover .nos-gallery-cap { transform: translateY(0); opacity: 1; }
.nos-gallery-cap h4 { font-family: "Cormorant Garamond", serif; font-size: 1.1rem; font-weight: 600; }
.nos-gallery-cap p { font-size: .72rem; color: rgba(255,255,255,.6); margin-top: .15rem; }

/* ─────────────────────────────────────────
   7. VALORES — 3 cards con tilt y top-bar
───────────────────────────────────────── */
.nos-valores {
  position: relative; z-index: 1;
  background: var(--n-light); padding: 8rem 5rem; overflow: hidden;
}
.nos-valores-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; max-width: 1100px; margin: 3.5rem auto 0; }
.nos-val-card {
  background: #fff; border-radius: 16px; padding: 2.8rem 2.2rem;
  border: 1px solid rgba(7,38,63,.06); position: relative; overflow: hidden;
  transition: transform .5s var(--n-ease), box-shadow .5s, border-color .4s;
}
.nos-val-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--n-gold), transparent);
  transform: scaleX(0); transition: transform .5s var(--n-ease);
}
.nos-val-card:hover { transform: translateY(-10px); box-shadow: 0 24px 60px rgba(7,38,63,.12); border-color: rgba(232,168,0,.2); }
.nos-val-card:hover::before { transform: scaleX(1); }
.nos-val-ico {
  width: 58px; height: 58px; border-radius: 14px;
  background: linear-gradient(135deg, var(--n-navy), #1a6fab);
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  margin-bottom: 1.6rem; box-shadow: 0 6px 22px rgba(7,38,63,.15);
  transition: transform .4s var(--n-ease-back), box-shadow .4s;
}
.nos-val-card:hover .nos-val-ico { transform: scale(1.12) rotate(-5deg); box-shadow: 0 10px 32px rgba(7,38,63,.2); }
.nos-val-card h4 { font-family: "Cormorant Garamond", serif; font-size: 1.3rem; font-weight: 600; color: var(--n-navy); margin-bottom: .7rem; }
.nos-val-card p { font-size: .85rem; color: var(--n-gray); line-height: 1.8; }

/* ─────────────────────────────────────────
   8. SCROLL REVEAL — clases de esta página
───────────────────────────────────────── */
.nv-reveal       { opacity:0; transform:translateY(36px);  transition:opacity .9s var(--n-ease), transform .9s var(--n-ease); }
.nv-reveal-left  { opacity:0; transform:translateX(-42px); transition:opacity .9s var(--n-ease), transform .9s var(--n-ease); }
.nv-reveal-right { opacity:0; transform:translateX(42px);  transition:opacity .9s var(--n-ease), transform .9s var(--n-ease); }
.nv-reveal-scale { opacity:0; transform:scale(.91);        transition:opacity .85s var(--n-ease), transform .85s var(--n-ease-back); }
.nv-visible { opacity:1!important; transform:none!important; }
.nv-d1{transition-delay:.07s} .nv-d2{transition-delay:.14s} .nv-d3{transition-delay:.21s}
.nv-d4{transition-delay:.28s} .nv-d5{transition-delay:.35s} .nv-d6{transition-delay:.42s}

/* ─────────────────────────────────────────
   9. GLITCH — efecto único en título hero
───────────────────────────────────────── */
.nos-glitch { position: relative; display: inline-block; }
.nos-glitch::before, .nos-glitch::after {
  content: attr(data-text); position: absolute; left:0; top:0; pointer-events:none;
  -webkit-background-clip: text; background-clip: text;
}
.nos-glitch::before {
  color: rgba(232,168,0,.28); animation: nsg1 6s infinite;
  clip-path: polygon(0 0,100% 0,100% 38%,0 38%);
}
.nos-glitch::after {
  color: rgba(26,111,171,.25); animation: nsg2 6s infinite;
  clip-path: polygon(0 62%,100% 62%,100% 100%,0 100%);
}
@keyframes nsg1 { 0%,93%,97%,100%{transform:none;opacity:0} 94%{transform:translate(-3px,1px);opacity:1} 96%{transform:translate(2px,-1px);opacity:.5} }
@keyframes nsg2 { 0%,91%,96%,100%{transform:none;opacity:0} 92%{transform:translate(3px,-2px);opacity:1} 95%{transform:translate(-2px,1px);opacity:.4} }

/* ─────────────────────────────────────────
   10. RESPONSIVE
───────────────────────────────────────── */
@media(max-width:1100px) {
  .nos-hero { grid-template-columns: 1fr; }
  .nos-hero-img-col { min-height: 52vh; }
  .nos-hero-img-col::after { background: linear-gradient(to bottom, transparent 50%, var(--n-navy) 100%); }
  .nos-hero-content { padding: 3.5rem 2rem 3rem; }
  .nos-hero-content::after { display: none; }
  .nos-historia-grid { grid-template-columns: 1fr; gap: 3rem; }
  .nos-historia-aside { position: static; }
  .nos-valores-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px) {
  .nos-historia, .nos-valores { padding: 5rem 1.8rem; }
  .nos-fullphoto .nos-fp-content { padding: 5rem 1.8rem; }
  .nos-gallery-section { padding: 5rem 0; }
  .nos-gallery-scroll { padding: .5rem 1.5rem 1.5rem; }
  .nos-gallery-item { width: 290px; height: 360px; }
  .nos-valores-grid { grid-template-columns: 1fr; }
  .nos-hero-content { padding: 4rem 1.8rem 3rem; }
  .nos-fp-stats { flex-wrap: wrap; gap: 1.5rem; }
  .nos-finale-block { padding: 2.5rem 2rem; }
  .nos-p-block { padding: 2rem 0 2rem 1.8rem; }
  .nos-scroll-cue { right: 1.8rem; }
  .nos-years-num { font-size: 4rem; }
  .nos-gallery-hdr { padding: 0 1.8rem; }
}