/* ─── RESET & BASE ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
      --teal:       #0B9C85;
      --teal-dark:  #077A68;
      --teal-light: #F2FAF7;
      --teal-mid:   #CCE9DA;
      --nav-h:      78px;
      --bg:        #FFFFFF;
      --bg2:       #F2FAF7;
      --bg3:       #E2F4EC;
      --bg4:       #CCE9DA;
      --white:     #FFFFFF;
      --white80:   rgba(26,46,40,0.90);
      --white50:   rgba(26,46,40,0.70);
      --white20:   rgba(26,46,40,0.12);
      --gold:      #0B9C85;
      --gold-dim:  #077A68;
      --gold-glow: rgba(11,156,133,0.15);
      --gold-line: rgba(11,156,133,0.30);
      --navy:      #2B4698;
      --text:      #1A2E28;
      --radius:    6px;
      --radius-lg: 12px;
      --transition: 0.3s ease;
      --font-head:  'Barlow Condensed', 'Arial Narrow', sans-serif;
      --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --max-w:     1120px;
      --nav-h:     78px;
    }

    html { scroll-behavior: smooth; font-size: 17px; }

    body {
      background: var(--bg);
      color: var(--white80);
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    ::selection { background: var(--gold); color: var(--bg); }

    /* ─── TYPOGRAPHY ─────────────────────────────────────────── */
    h1,h2,h3,h4,h5 {
      font-family: var(--font-head);
      color: var(--text);
      line-height: 1.1;
      letter-spacing: 0.02em;
    }
    h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 800; }
    h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; }
    h3 { font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 600; }
    h4 { font-size: 1.0rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

    p { max-width: 66ch; }
    a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
    a:hover { color: var(--text); }

    /* ─── LAYOUT HELPERS ─────────────────────────────────────── */
    .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
    .section   { padding: 6rem 0; }
    .section-alt { background: var(--bg2); }
    .section-dark { background: var(--bg3); }

    .gold { color: var(--gold); }
    .label {
      display: inline-block;
      font-family: var(--font-head);
      font-size: 0.88rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      border: 1px solid var(--gold-line);
      border-radius: 2px;
      padding: 0.25rem 0.75rem;
      margin-bottom: 1.2rem;
    }

    .section-title {
      margin-bottom: 0.6rem;
    }
    .section-sub {
      font-size: 1.05rem;
      color: var(--white50);
      margin-bottom: 3.5rem;
      max-width: 55ch;
    }

    .divider {
      width: 48px;
      height: 3px;
      background: var(--gold);
      margin: 1.2rem 0 1.8rem;
      border-radius: 2px;
    }

    /* ─── SCROLLBAR ──────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }


    /* ── ACCORDION DIPLOMADOS ─────────────────────────── */
    #diplomados-grid .diplomado-card {
      display: none;
      animation: cardReveal 0.3s ease;
    }
    #diplomados-grid .diplomado-card.active {
      display: flex;
    }
    @keyframes cardReveal {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .seq-btn-active {
      background: var(--gold) !important;
      color: var(--bg) !important;
      box-shadow: 0 0 0 3px rgba(11,156,133,0.25);
      transform: scale(1.08);
    }

    /* ─── NAV ────────────────────────────────────────────────── */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-h);
      z-index: 1000;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(14px);
      border-bottom: 2px solid rgba(11,156,133,0.20);
      box-shadow: 0 2px 14px rgba(11,156,133,0.08);
      transition: background var(--transition), box-shadow var(--transition);
    }
    #navbar.scrolled {
      background: rgba(255,255,255,0.99);
      backdrop-filter: blur(16px);
      box-shadow: 0 3px 18px rgba(11,156,133,0.14);
    }
    .nav-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      text-decoration: none;
    }
    .nav-logo-text {
      font-family: var(--font-head);
      font-weight: 800;
      font-size: 1.75rem;
      letter-spacing: 0.06em;
      color: var(--text);
      line-height: 1;
    }
    .nav-logo-text span { color: var(--gold); }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.2rem;
      list-style: none;
    }
    .nav-links a {
      font-family: var(--font-head);
      font-weight: 500;
      font-size: 1.11rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: rgba(26,46,40,0.65);
      padding: 0.4rem 0.5rem;
      border-radius: var(--radius);
      transition: color var(--transition), background var(--transition);
    }
    .nav-links a:hover { color: var(--text); background: var(--white20); }

    .nav-cta {
      font-family: var(--font-head) !important;
      font-weight: 700 !important;
      font-size: 0.85rem !important;
      letter-spacing: 0.1em !important;
      text-transform: uppercase !important;
      color: #FFFFFF !important;
      background: var(--gold) !important;
      padding: 0.45rem 1.1rem !important;
      border-radius: var(--radius) !important;
      transition: opacity var(--transition) !important;
    }
    .nav-cta:hover { opacity: 0.88 !important; background: var(--gold) !important; }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
      z-index: 1010;
    }
    .hamburger span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: transform var(--transition), opacity var(--transition);
      transform-origin: center;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav */
    @media (max-width: 768px) {
      .hamburger { display: flex; }
      .nav-links {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(244,248,246,0.99);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        z-index: 1005;
      }
      .nav-links.open { display: flex; }
      .nav-links a { font-size: 1.5rem !important; padding: 0.7rem 1.5rem !important; }
      .nav-cta { font-size: 1.3rem !important; margin-top: 1rem !important; }
    }

    /* ─── HERO ───────────────────────────────────────────────── */
    #hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      text-align: center;
      padding: calc(var(--nav-h) + 3rem) 1.5rem 4rem;
    }

    /* Subtle grid background */
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(46,125,110,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46,125,110,0.06) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    /* Radial glow */
    #hero::after {
      content: '';
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(46,125,110,0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }

    .hero-logo-wrap {
      margin-bottom: 0.5rem;
    }

    .hero-title {
      text-align: center;
    }
    .hero-institute {
      display: block;
      font-size: clamp(1.1rem, 2.8vw, 1.55rem);
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.5rem;
    }
    .hero-name {
      display: block;
      font-size: clamp(1.6rem, 3.8vw, 3.0rem);
      font-weight: 700;
      line-height: 1.0;
      color: var(--text);
      letter-spacing: 0.03em;
      opacity: 0.72;
    }

    .hero-tagline {
      font-family: var(--font-head);
      font-size: clamp(1.1rem, 2.5vw, 1.5rem);
      font-weight: 300;
      color: var(--white50);
      letter-spacing: 0.06em;
      font-style: italic;
      max-width: 52ch;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.75rem;
      margin-top: 0.5rem;
    }
    .badge {
      font-family: var(--font-head);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--white50);
      border: 1px solid var(--white20);
      border-radius: 100px;
      padding: 0.3rem 0.9rem;
    }

    .hero-cta-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      margin-top: 0.5rem;
    }
    .btn-primary {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--bg);
      background: var(--gold);
      border: none;
      border-radius: var(--radius);
      padding: 0.8rem 2rem;
      cursor: pointer;
      transition: opacity var(--transition), transform var(--transition);
      text-decoration: none;
      display: inline-block;
    }
    .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); color: var(--bg); }

    .btn-outline {
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text);
      background: transparent;
      border: 1px solid var(--white20);
      border-radius: var(--radius);
      padding: 0.8rem 2rem;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition);
      text-decoration: none;
      display: inline-block;
    }
    .btn-outline:hover { border-color: var(--gold); background: var(--gold-glow); color: var(--white); }

    .hero-scroll {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      color: rgba(26,46,40,0.45);
      font-family: var(--font-head);
      font-size: 0.72rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    .scroll-line {
      width: 1px;
      height: 40px;
      background: linear-gradient(rgba(46,125,110,0.5), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%,100% { opacity: 0.4; transform: scaleY(1); }
      50%      { opacity: 1;   transform: scaleY(1.1); }
    }

    /* ─── ECOSYSTEM CARDS ────────────────────────────────────── */
    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      margin-top: 1rem;
    }

    .pillar-card {
      background: var(--bg3);
      border: 1px solid var(--white20);
      border-radius: var(--radius-lg);
      padding: 2.2rem;
      transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
      position: relative;
      overflow: hidden;
    }
    .pillar-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    .pillar-card:hover { border-color: var(--gold-line); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
    .pillar-card:hover::before { transform: scaleX(1); }

    .pillar-icon {
      margin-bottom: 1.4rem;
    }
    .pillar-card h3 { margin-bottom: 0.7rem; }
    .pillar-card p { font-size: 0.95rem; color: var(--white50); margin: 0; }

    .pillar-tag {
      display: inline-block;
      font-family: var(--font-head);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.5rem;
    }

    /* ─── ETAPAS CRISOL ──────────────────────────────────────── */
    .etapas-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 2rem;
    }
    .etapa-item {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
      padding: 1.4rem 1.6rem;
      background: var(--bg4);
      border: 1px solid var(--white20);
      border-radius: var(--radius);
      transition: border-color var(--transition), background var(--transition);
    }
    .etapa-item:hover { border-color: var(--gold-line); background: var(--bg3); }
    .etapa-num {
      font-family: var(--font-head);
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--gold);
      line-height: 1;
      min-width: 2.2rem;
      text-align: center;
    }
    .etapa-body h4 {
      font-family: var(--font-head);
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--text);
      text-transform: none;
      margin-bottom: 0.35rem;
    }
    .etapa-body p { font-size: 0.95rem; color: var(--white50); margin: 0; }

    .crisol-meta {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .crisol-meta-item {
      padding: 1.6rem;
      background: var(--bg4);
      border-radius: var(--radius);
      border: 1px solid var(--white20);
      text-align: center;
    }
    .crisol-meta-item .big { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--gold); line-height: 1; }
    .crisol-meta-item .sm  { font-size: 0.85rem; color: var(--white50); margin-top: 0.4rem; }

    /* ─── DIPLOMADOS ─────────────────────────────────────────── */
    .diplomados-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }
    .diplomado-card {
      background: var(--bg3);
      border: 1px solid var(--white20);
      border-radius: var(--radius-lg);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
      cursor: pointer;
      position: relative;
    }
    .diplomado-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(11,156,133,0.12); }
    .diplomado-card:active { transform: translateY(-1px) scale(0.99); border-color: var(--gold); box-shadow: 0 2px 8px rgba(11,156,133,0.18); }
    .diplomado-card.loading { pointer-events: none; opacity: 0.85; }
    .diplomado-card.loading::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      animation: cardLoading 0.8s ease-in-out infinite;
    }
    @keyframes cardLoading {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    .diplomado-num {
      font-family: var(--font-head);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .diplomado-card h3 { font-size: 1.25rem; margin: 0; }
    .diplomado-card p  { font-size: 0.95rem; color: var(--white50); margin: 0; flex: 1; }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-family: var(--font-head);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--white50);
      background: var(--bg4);
      border-radius: 100px;
      padding: 0.25rem 0.75rem;
    }

    .req-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      margin-top: 1.5rem;
    }
    .req-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      font-size: 0.95rem;
      color: var(--white80);
    }
    .req-list li::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold);
      margin-top: 0.55em;
      flex-shrink: 0;
    }

    /* ─── COPILOTO ───────────────────────────────────────────── */
    .copiloto-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    @media (max-width: 768px) {
      .copiloto-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    }
    .copiloto-visual {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .copiloto-screen {
      background: var(--bg3);
      border: 1px solid var(--white20);
      border-radius: var(--radius-lg);
      padding: 2rem;
      width: 100%;
      max-width: 380px;
    }
    .copiloto-screen-bar {
      display: flex;
      gap: 0.4rem;
      margin-bottom: 1.2rem;
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .dot-r { background: #ff5f57; }
    .dot-y { background: #2E7D6E; }
    .dot-g { background: #28c840; }
    .copiloto-screen-line {
      height: 10px;
      border-radius: 4px;
      background: var(--bg4);
      margin-bottom: 0.6rem;
    }
    .copiloto-screen-line.w80 { width: 80%; }
    .copiloto-screen-line.w60 { width: 60%; }
    .copiloto-screen-line.w90 { width: 90%; background: rgba(46,125,110,0.25); }
    .copiloto-screen-line.w45 { width: 45%; }
    .copiloto-screen-line.w70 { width: 70%; }
    .copiloto-screen-divider {
      height: 1px;
      background: var(--white20);
      margin: 1rem 0;
    }

    .restricted-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-head);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #ff5f57;
      border: 1px solid rgba(255,95,87,0.3);
      border-radius: 2px;
      padding: 0.3rem 0.8rem;
      margin-bottom: 1.2rem;
    }

    /* ─── INSTITUTO ──────────────────────────────────────────── */
    .instituto-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
    }
    @media (max-width: 768px) {
      .instituto-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    }
    .valores-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 480px) {
      .valores-grid { grid-template-columns: 1fr; }
    }
    .valor-item {
      padding: 1.2rem;
      background: var(--bg4);
      border-radius: var(--radius);
      border: 1px solid var(--white20);
    }
    .valor-item h4 {
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.4rem;
    }
    .valor-item p { font-size: 0.93rem; color: var(--white50); margin: 0; max-width: none; }

    /* ─── CONTACTO ───────────────────────────────────────────── */
    .contacto-wrap {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 4rem;
      align-items: start;
    }
    @media (max-width: 768px) {
      .contacto-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
    }
    .contact-info p { color: var(--white50); margin-bottom: 1.2rem; }
    .contact-info .info-row {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1rem;
      font-size: 0.92rem;
      color: var(--white80);
    }
    .contact-info .info-icon {
      width: 20px;
      flex-shrink: 0;
      color: var(--gold);
    }

    .form-wrap {
      background: var(--bg3);
      border: 1px solid var(--white20);
      border-radius: var(--radius-lg);
      padding: 2.4rem;
    }
    .form-group {
      margin-bottom: 1.2rem;
    }
    .form-group label {
      display: block;
      font-family: var(--font-head);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--white50);
      margin-bottom: 0.45rem;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
      width: 100%;
      background: var(--bg4);
      border: 1px solid var(--white20);
      border-radius: var(--radius);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 0.95rem;
      padding: 0.7rem 1rem;
      outline: none;
      transition: border-color var(--transition);
      -webkit-appearance: none;
    }
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
      border-color: var(--gold);
    }
    .form-group textarea { resize: vertical; min-height: 90px; }
    .form-group select option { background: var(--bg4); }

    .impi-note {
      font-size: 0.78rem;
      color: var(--white50);
      margin-top: 1.2rem;
      line-height: 1.5;
    }

    /* ─── FOOTER ─────────────────────────────────────────────── */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--white20);
      padding: 3rem 0 2rem;
    }
    .footer-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2rem;
      align-items: start;
      margin-bottom: 2rem;
    }
    @media (max-width: 580px) {
      .footer-inner { grid-template-columns: 1fr; }
    }
    .footer-brand .nav-logo-text { font-size: 1.1rem; margin-bottom: 0.5rem; display: block; }
    .footer-brand p { font-size: 0.82rem; color: var(--white50); max-width: 38ch; }
    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      text-align: right;
    }
    @media (max-width: 580px) {
      .footer-links { text-align: left; }
    }
    .footer-links a {
      font-family: var(--font-head);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--white50);
    }
    .footer-links a:hover { color: var(--gold); }

    .footer-bottom {
      border-top: 1px solid var(--white20);
      padding-top: 1.5rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.8rem;
      font-size: 0.78rem;
      color: var(--white50);
    }

    /* ─── MODAL ──────────────────────────────────────────────── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      backdrop-filter: blur(6px);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }
    .modal-overlay.active { display: flex; }
    .modal-box {
      background: var(--bg2);
      border: 1px solid var(--gold-line);
      border-radius: var(--radius-lg);
      padding: 2.5rem;
      width: 100%;
      max-width: 500px;
      position: relative;
      animation: modalIn 0.25s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: scale(0.95) translateY(12px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    .modal-close {
      position: absolute;
      top: 1rem; right: 1rem;
      background: none;
      border: none;
      color: var(--white50);
      cursor: pointer;
      font-size: 1.4rem;
      line-height: 1;
      padding: 0.2rem 0.4rem;
      transition: color var(--transition);
    }
    .modal-close:hover { color: var(--text); }
    .modal-box h3 { margin-bottom: 0.4rem; }
    .modal-box .sub { font-size: 0.9rem; color: var(--white50); margin-bottom: 1.8rem; }
    .modal-success {
      display: none;
      text-align: center;
      padding: 1rem 0;
    }
    .modal-success .big-check {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    .modal-success h3 { margin-bottom: 0.5rem; }
    .modal-success p { color: var(--white50); margin: 0; }

    /* ─── ANIMATIONS ─────────────────────────────────────────── */
    .fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-in-delay-1 { transition-delay: 0.1s; }
    .fade-in-delay-2 { transition-delay: 0.2s; }
    .fade-in-delay-3 { transition-delay: 0.3s; }
    .fade-in-delay-4 { transition-delay: 0.4s; }

    /* ─── NOTICE BANNER ──────────────────────────────────────── */
    .notice-banner {
      background: linear-gradient(90deg, var(--gold-glow), rgba(46,125,110,0.06));
      border: 1px solid var(--gold-line);
      border-radius: var(--radius);
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-top: 2rem;
    }
    .notice-banner .icon { font-size: 1.2rem; flex-shrink: 0; }
    .notice-banner p { font-size: 0.95rem; color: var(--white80); margin: 0; }

    /* ─── RESPONSIVE EXTRAS ──────────────────────────────────── */
    @media (max-width: 480px) {
      .section { padding: 4rem 0; }
      .form-wrap { padding: 1.6rem; }
      .modal-box { padding: 1.8rem; }
    }
  
  /* ═══ INTERACTIVIDAD ═══════════════════════════════════════════════════ */
  @keyframes panelIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

  /* Acordeón Formación */
  .acc-panel{display:none;margin-top:0.2rem;}
  .acc-panel.open{display:block;animation:panelIn .3s ease;}
  .seq-btn{cursor:pointer;transition:transform .15s,box-shadow .15s;}
  .seq-btn:hover{transform:scale(1.1);}
  .seq-btn-active{box-shadow:0 0 0 4px rgba(11,156,133,.55)!important;}

  /* Pilares ecosistema */
  .pillar-card{cursor:pointer;transition:transform .2s,box-shadow .2s;}
  .pillar-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.32);}
  .pillar-card:active{transform:translateY(-1px);}

  /* Etapas crisol expandibles */
  .etapa-item{cursor:pointer;padding:0.5rem 0.6rem;border-radius:8px;transition:background .15s;}
  .etapa-item:hover{background:rgba(46,125,110,.07);}
  .etapa-extra{display:none;margin:0.3rem 0 0.4rem 3.2rem;font-size:0.84rem;
    color:var(--white50);line-height:1.65;border-left:2px solid rgba(11,156,133,.3);
    padding-left:0.8rem;}
  .etapa-item.eta-open .etapa-extra{display:block;animation:panelIn .22s ease;}
  .etapa-chevron{display:inline-block;margin-left:.45rem;font-size:.6rem;
    color:var(--white50);transition:transform .2s;vertical-align:middle;}
  .etapa-item.eta-open .etapa-chevron{transform:rotate(90deg);color:var(--gold);}
  .etapa-item.eta-open h4{color:var(--gold);}
  /* ════════════════════════════════════════════════════════════════════════ */

  /* ═══ FIXES AUDIT ══════════════════════════════════════════════════════ */
  /* Acordeón D1-D4 */
  .acc-panel{display:none;}
  .acc-panel.open{display:flex;flex-direction:column;gap:1rem;animation:panelIn .3s ease;}
  .seq-btn{cursor:pointer;transition:transform .15s,box-shadow .15s;}
  .seq-btn:hover{transform:scale(1.1);}
  /* Etapas crisol */
  .etapa-item{cursor:pointer;}
  .etapa-extra{display:none;padding:.5rem 0 .2rem 3.2rem;font-size:.84rem;
    color:var(--white50);line-height:1.65;border-left:2px solid rgba(11,156,133,.3);
    padding-left:.8rem;}
  .etapa-item.eta-open .etapa-extra{display:block;animation:panelIn .22s ease;}
  .etapa-chevron{display:inline-block;margin-left:.45rem;font-size:.6rem;
    color:var(--white50);transition:transform .2s;vertical-align:middle;}
  .etapa-item.eta-open .etapa-chevron{transform:rotate(90deg);color:var(--gold);}
  .etapa-item.eta-open h4{color:var(--gold);}

  
/* ═══ SUBSITIO NAV ═══════════════════════════════════════════════════ */
.btn-back {
  background:transparent;color:var(--text);border:1.5px solid var(--gold-line);
  font-size:.82rem;padding:.4rem 1rem;text-decoration:none;border-radius:var(--radius);
  font-family:var(--font-head);font-weight:600;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background var(--transition),color var(--transition);
}
.btn-back:hover { background:var(--bg2); color:var(--gold); }