/* =====================================================================
   Centro Educativo Marie Curie — Secciones de contenido (niveles, pilares, vanguardia, emprender, inscripción, ubicación, CTA)
   Diseño original. NO editar colores aquí: usa las variables en 01-tokens.css
   ===================================================================== */

/* ==================== SECTIONS ==================== */
  section.block{padding:120px 0; position:relative}
  .section-head{display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:start; margin-bottom:56px}
  .section-tag{font-family:var(--f-mono); font-size:12px; color:var(--muted); letter-spacing:.06em; display:flex; align-items:center; gap:10px}
  .section-tag::before{content:""; width:24px; height:1px; background:var(--navy)}
  .section-h{font-family:var(--f-display); font-size:clamp(36px, 5vw, 60px); line-height:1; letter-spacing:-.025em; color:var(--navy); font-weight:600; margin-top:14px}
  .section-h em{font-style:italic; font-weight:500; color:var(--navy-2)}
  .section-sub{font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:54ch; padding-top:10px}

  @media (max-width: 860px){
    section.block{padding:80px 0}
    .section-head{grid-template-columns:1fr; gap:18px; margin-bottom:36px}
  }

  /* ==================== NIVELES ==================== */
  .niveles{background:var(--cream); position:relative}
  .niveles-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
  .nivel{
    background:var(--paper); border-radius:var(--r-md); padding:26px 24px 28px;
    border:1px solid var(--line); display:flex; flex-direction:column; min-height:380px;
    transition:all .25s ease; position:relative; overflow:hidden;
  }
  .nivel:hover{transform:translateY(-4px); box-shadow:0 24px 50px -22px rgba(15,42,77,.25); border-color:var(--line-strong)}
  .nivel-idx{font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.08em}
  .nivel-ico{width:60px; height:60px; margin:16px 0 22px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--cream-2)}
  .nivel-ico svg{width:34px; height:34px}
  .nivel h3{font-family:var(--f-display); font-size:28px; line-height:1; letter-spacing:-.02em; color:var(--navy); font-weight:700}
  .nivel-age{font-family:var(--f-mono); font-size:11px; color:var(--lime); background:rgba(168,209,57,.12); padding:3px 8px; border-radius:6px; display:inline-block; margin-top:10px; align-self:flex-start; font-weight:500; letter-spacing:.04em}
  .nivel p{font-size:14px; line-height:1.55; color:var(--ink-soft); margin-top:14px}
  .nivel-feats{margin-top:auto; padding-top:20px; display:flex; flex-direction:column; gap:8px}
  .nivel-feat{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft)}
  .nivel-feat .check{width:14px; height:14px; flex-shrink:0; color:var(--lime)}

  /* highlight one card */
  .nivel.hl{background:var(--navy); color:var(--cream); border-color:var(--navy)}
  .nivel.hl h3{color:var(--cream-2)}
  .nivel.hl .nivel-idx{color:rgba(244,239,227,.5)}
  .nivel.hl p, .nivel.hl .nivel-feat{color:rgba(244,239,227,.78)}
  .nivel.hl .nivel-ico{background:rgba(255,255,255,.08)}
  .nivel.hl .nivel-ico svg{color:var(--lime-2)}

  @media (max-width: 980px){ .niveles-grid{grid-template-columns:repeat(2, 1fr)} }
  @media (max-width: 540px){ .niveles-grid{grid-template-columns:1fr} }

  /* ==================== PILARES ==================== */
  .pilares{background:transparent; position:relative}
  .pilares-list{display:flex; flex-direction:column; border-top:1px solid var(--line)}
  .pilar{
    display:grid; grid-template-columns: 80px 220px 1fr auto; gap:32px;
    padding:38px 0; border-bottom:1px solid var(--line);
    align-items:center;
    transition:all .25s ease;
  }
  .pilar:hover{padding-left:12px}
  .pilar-num{font-family:var(--f-mono); font-size:13px; color:var(--muted); letter-spacing:.08em}
  .pilar-name{font-family:var(--f-display); font-size:48px; line-height:1; letter-spacing:-.03em; color:var(--navy); font-weight:700}
  .pilar:nth-child(2) .pilar-name em{font-style:italic; font-weight:500; color:var(--navy-2)}
  .pilar-desc{font-size:16px; line-height:1.6; color:var(--ink-soft); max-width:54ch}
  .pilar-arrow{width:48px; height:48px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--navy); transition:all .2s ease}
  .pilar:hover .pilar-arrow{background:var(--lime); border-color:var(--lime); transform:rotate(-45deg)}

  @media (max-width: 880px){
    .pilar{grid-template-columns: 1fr; gap:8px; padding:28px 0}
    .pilar-arrow{display:none}
    .pilar-name{font-size:36px}
  }

  /* ==================== VANGUARDIA / WHY ==================== */
  .why{background:var(--navy); color:var(--cream); position:relative; overflow:hidden}
  .why::before{
    content:""; position:absolute; left:-160px; bottom:-200px; width:540px; height:540px; border-radius:50%;
    background: radial-gradient(circle, rgba(168,209,57,.18) 0%, transparent 60%);
  }
  .why .section-tag{color:rgba(244,239,227,.55)}
  .why .section-tag::before{background:var(--lime)}
  .why .section-h{color:var(--cream-2)}
  .why .section-h em{color:var(--lime-2)}
  .why .section-sub{color:rgba(244,239,227,.7)}

  .why-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; position:relative; z-index:1}
  .why-card{
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-md); padding:30px 26px;
    display:flex; flex-direction:column; gap:18px; min-height:300px;
    transition:all .25s ease;
  }
  .why-card:hover{background:rgba(255,255,255,.07); border-color:rgba(168,209,57,.3)}
  .why-icon{width:54px; height:54px; border-radius:14px; background:var(--lime); color:var(--navy-deep); display:flex; align-items:center; justify-content:center}
  .why-icon svg{width:28px; height:28px}
  .why-card h4{font-family:var(--f-display); font-size:26px; line-height:1.05; letter-spacing:-.02em; color:var(--cream-2); font-weight:600}
  .why-card p{font-size:14.5px; line-height:1.6; color:rgba(244,239,227,.7)}

  .why-stats{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:80px; padding-top:48px; border-top:1px solid rgba(255,255,255,.1); position:relative; z-index:1}
  .stat .num{font-family:var(--f-display); font-size:64px; line-height:1; letter-spacing:-.04em; color:var(--lime-2); font-weight:600}
  .stat .lbl{font-size:13px; color:rgba(244,239,227,.7); margin-top:8px; line-height:1.45; max-width:18ch}

  @media (max-width: 880px){
    .why-grid{grid-template-columns:1fr}
    .why-stats{grid-template-columns:repeat(2,1fr); margin-top:48px}
    .stat .num{font-size:48px}
  }

  /* ==================== EMPRENDEDOR FEATURE ==================== */
  .feature{background:var(--cream); position:relative; border-top:1px solid rgba(15,42,77,.06); border-bottom:1px solid rgba(15,42,77,.06)}
  .feat-grid{display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center}
  .feat-img{
    aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, #E8DFC9 0 12px, #DDD2B7 12px 24px);
    border-radius: var(--r-lg);
    position:relative; overflow:hidden;
    display:flex; align-items:flex-end; padding:24px;
  }
  .feat-img .ph-note{font-family:var(--f-mono); font-size:11px; color:rgba(15,42,77,.6); background:rgba(255,255,255,.7); padding:6px 10px; border-radius:6px; max-width:80%}
  .feat-img .ph-corner{position:absolute; top:24px; left:24px; font-family:var(--f-mono); font-size:11px; color:rgba(15,42,77,.4); letter-spacing:.06em}

  .feat-text .section-tag{margin-bottom:8px}
  .feat-text h2{font-family:var(--f-display); font-size:clamp(36px, 4.4vw, 56px); line-height:1; letter-spacing:-.025em; color:var(--navy); font-weight:600; margin:14px 0 22px}
  .feat-text h2 em{font-style:italic; font-weight:500}
  .feat-text h2 mark{background:var(--lime); color:var(--navy-deep); padding:0 .12em; font-weight:600; font-style:normal}
  .feat-text p{font-size:16px; line-height:1.65; color:var(--ink-soft); margin-bottom:18px}
  .feat-list{margin-top:24px; display:flex; flex-direction:column; gap:14px}
  .feat-li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line)}
  .feat-li:first-child{border-top:none}
  .feat-li .n{font-family:var(--f-mono); font-size:11px; color:var(--lime); letter-spacing:.08em; min-width:28px; padding-top:4px; font-weight:600}
  .feat-li .body strong{display:block; font-family:var(--f-display); font-size:18px; color:var(--navy); margin-bottom:4px; letter-spacing:-.01em}
  .feat-li .body span{font-size:14.5px; color:var(--ink-soft); line-height:1.55}

  @media (max-width: 880px){ .feat-grid{grid-template-columns:1fr; gap:36px} }

  /* ==================== INSCRIPCIÓN ==================== */
  .inscripcion{background:transparent}
  .insc-grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
  .insc-block{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:36px 32px; display:flex; flex-direction:column;
  }
  .insc-block .hd{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px}
  .insc-block .hd .tag{font-family:var(--f-mono); font-size:11px; color:var(--lime); background:rgba(168,209,57,.14); padding:4px 10px; border-radius:var(--r-pill); letter-spacing:.06em; font-weight:600}
  .insc-block .hd .lvl-count{font-family:var(--f-mono); font-size:11px; color:var(--muted)}
  .insc-block h3{font-family:var(--f-display); font-size:30px; letter-spacing:-.02em; line-height:1.05; color:var(--navy); font-weight:600; margin-bottom:10px}
  .insc-block p.sub{font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:24px}
  .insc-rows{display:flex; flex-direction:column; gap:10px; margin-top:auto}
  .insc-row{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--cream-2); border-radius:12px; border:1px solid var(--line)}
  .insc-row .lab{display:flex; flex-direction:column; gap:2px}
  .insc-row .lab .k{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600}
  .insc-row .lab .v{font-family:var(--f-display); font-size:18px; color:var(--navy); font-weight:600; letter-spacing:-.01em}
  .insc-row .ico{width:36px; height:36px; border-radius:10px; background:var(--lime); color:var(--navy-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0}
  .insc-row .ico svg{width:18px; height:18px}

  .steps{margin-top:64px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:42px 40px}
  .steps-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:32px}
  .steps-head h3{font-family:var(--f-display); font-size:30px; letter-spacing:-.02em; color:var(--navy); font-weight:600}
  .steps-head .meta{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
  .steps-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:0}
  .step{position:relative; padding:0 22px 0 0}
  .step:not(:last-child)::after{content:""; position:absolute; right:8px; top:14px; width:18px; height:1px; background:var(--line-strong)}
  .step .n{font-family:var(--f-mono); font-size:11px; color:var(--lime); font-weight:600; letter-spacing:.08em; margin-bottom:10px; display:inline-flex; align-items:center; gap:6px}
  .step .n::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--lime); display:inline-block}
  .step h4{font-family:var(--f-display); font-size:18px; letter-spacing:-.01em; color:var(--navy); font-weight:600; margin-bottom:8px; line-height:1.15}
  .step p{font-size:13.5px; line-height:1.5; color:var(--ink-soft)}

  @media (max-width:880px){
    .insc-grid{grid-template-columns:1fr}
    .steps-grid{grid-template-columns:1fr 1fr; gap:24px 0}
    .step:not(:last-child)::after{display:none}
    .steps{padding:28px 22px}
  }

  /* ==================== UBICACIÓN ==================== */
  .ubicacion{background:var(--navy); color:var(--cream); padding:80px 0}
  .ubi-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:48px; align-items:center}
  .ubi-text .section-tag{color:rgba(244,239,227,.55)}
  .ubi-text .section-tag::before{background:var(--lime)}
  .ubi-text h2{font-family:var(--f-display); font-size:clamp(36px, 4.6vw, 56px); line-height:1; letter-spacing:-.025em; color:var(--cream-2); font-weight:600; margin:14px 0 22px}
  .ubi-text h2 em{font-style:italic; color:var(--lime-2)}
  .ubi-text p{font-size:16px; line-height:1.6; color:rgba(244,239,227,.78); max-width:50ch; margin-bottom:28px}
  .ubi-meta{display:flex; flex-direction:column; gap:14px; margin-top:22px}
  .ubi-row{display:flex; gap:14px; align-items:center; padding:14px 18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:14px}
  .ubi-row .ico{width:36px; height:36px; border-radius:10px; background:var(--lime); color:var(--navy-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0}
  .ubi-row .ico svg{width:18px; height:18px}
  .ubi-row .col{display:flex; flex-direction:column}
  .ubi-row .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,239,227,.55); font-weight:600}
  .ubi-row .v{font-size:15px; color:var(--cream-2); font-weight:500; margin-top:1px}

  .map{
    aspect-ratio: 1/1;
    border-radius: var(--r-lg);
    background:
      radial-gradient(circle at 60% 40%, rgba(168,209,57,.25) 0%, transparent 30%),
      linear-gradient(135deg, #18365C 0%, #0F2A4D 100%);
    border:1px solid rgba(255,255,255,.08);
    position:relative; overflow:hidden;
  }
  .map svg{position:absolute; inset:0; width:100%; height:100%}
  .map .pin{position:absolute; left:60%; top:40%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:6px}
  .map .pin-dot{width:16px; height:16px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 6px rgba(168,209,57,.22); animation:pulse 2s ease-in-out infinite}
  .map .pin-label{font-family:var(--f-mono); font-size:11px; padding:5px 10px; background:var(--cream-2); color:var(--navy-deep); border-radius:var(--r-pill); white-space:nowrap; font-weight:600; letter-spacing:.04em}
  .map .coords{position:absolute; bottom:18px; left:20px; font-family:var(--f-mono); font-size:10px; color:rgba(244,239,227,.5); letter-spacing:.1em}
  .map .compass{position:absolute; top:18px; right:20px; font-family:var(--f-mono); font-size:10px; color:rgba(244,239,227,.4); letter-spacing:.1em}

  @media (max-width:880px){ .ubi-grid{grid-template-columns:1fr; gap:36px} }

  /* ==================== CTA FINAL ==================== */
  .final-cta{background:var(--cream); padding:120px 0; text-align:center; position:relative}
  .final-cta h2{font-family:var(--f-display); font-size:clamp(48px, 7vw, 96px); line-height:.95; letter-spacing:-.035em; color:var(--navy); font-weight:700; max-width:14ch; margin:0 auto 24px}
  .final-cta h2 em{font-style:italic; font-weight:500; color:var(--navy-2)}
  .final-cta p{font-size:18px; color:var(--ink-soft); max-width:48ch; margin:0 auto 36px; line-height:1.55}
  .final-cta .btn{padding:16px 24px; font-size:16px}