/* =====================================================================
   Centro Educativo Marie Curie — Hero + marquesina
   Diseño original. NO editar colores aquí: usa las variables en 01-tokens.css
   ===================================================================== */

/* ==================== HERO ==================== */
  .hero{position:relative; padding:36px 0 80px; overflow:hidden}
  .hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:48px; align-items:end}
  .hero-eyebrow{display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--navy); margin-bottom:24px}
  .hero-eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px rgba(168,209,57,.25); animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(168,209,57,.25)} 50%{box-shadow:0 0 0 8px rgba(168,209,57,.08)}}

  .hero h1{
    font-family:var(--f-display);
    font-size: clamp(54px, 8.4vw, 132px);
    line-height: .92;
    letter-spacing: -.035em;
    font-weight: 700;
    color: var(--navy);
  }
  .hero h1 .word{display:inline-block; position:relative}
  .hero h1 .vive{color:var(--navy)}
  .hero h1 .aprende{font-style:italic; font-weight:500; color:var(--navy-2)}
  .hero h1 .emprende{position:relative; z-index:1}
  .hero h1 .emprende::before{content:""; position:absolute; left:-4px; right:-4px; bottom:8%; height:38%; background:var(--lime); z-index:-1; border-radius:6px; transform:skewX(-4deg)}

  .hero-sub{font-size:18px; line-height:1.55; color:var(--ink-soft); max-width:46ch; margin:30px 0 32px}
  .hero-sub b{color:var(--navy); font-weight:600}

  .hero-actions{display:flex; gap:12px; flex-wrap:wrap}

  .hero-meta{display:flex; gap:32px; margin-top:42px; padding-top:28px; border-top:1px solid var(--line)}
  .meta{display:flex; flex-direction:column; gap:2px}
  .meta .k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
  .meta .v{font-family:var(--f-display); font-size:22px; font-weight:600; color:var(--navy); letter-spacing:-.01em}

  /* hero card / inscripciones */
  .hero-card{position:relative}
  .insc-card{
    background: var(--navy);
    color: var(--cream);
    border-radius: var(--r-lg);
    padding: 28px 28px 24px;
    position:relative;
    overflow:hidden;
    box-shadow: 0 24px 60px -20px rgba(15,42,77,.45);
  }
  .insc-card::before{
    content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%;
    background: radial-gradient(circle at 30% 30%, var(--lime) 0%, transparent 70%); opacity:.35;
  }
  .insc-stamp{display:inline-block; padding:6px 12px; background:var(--lime); color:var(--navy-deep); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-radius:var(--r-pill)}
  .insc-card h2{font-family:var(--f-display); font-size:42px; font-weight:700; letter-spacing:-.02em; line-height:1; margin:18px 0 6px; color:var(--cream-2)}
  .insc-card h2 em{font-style:italic; color:var(--lime-2); font-weight:500}
  .insc-card .cycle{font-family:var(--f-mono); font-size:13px; color:rgba(244,239,227,.65); letter-spacing:.04em}

  .insc-levels{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:24px 0 22px; position:relative; z-index:1}
  .insc-level{padding:11px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; display:flex; align-items:center; gap:8px}
  .insc-level .age{font-family:var(--f-mono); font-size:10px; color:var(--lime-2); letter-spacing:.04em}
  .insc-level .name{font-size:13px; font-weight:600; color:var(--cream-2); margin-top:1px}
  .insc-level .col{display:flex; flex-direction:column; line-height:1.2}
  .insc-level .ico{width:22px; height:22px; flex-shrink:0; opacity:.85}

  .insc-cta{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:18px; border-top:1px dashed rgba(255,255,255,.18)}
  .insc-cta .copy{font-size:12.5px; color:rgba(244,239,227,.7); line-height:1.4}
  .insc-cta .btn-lime{padding:10px 14px; font-size:13px}

  /* corner badge */
  .corner-badge{
    position:absolute; top:-14px; right:-14px; width:96px; height:96px; border-radius:50%;
    background:var(--lime); color:var(--navy-deep);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-display); font-weight:700; font-size:13px; line-height:1.05; text-align:center;
    letter-spacing:-.005em;
    transform:rotate(8deg);
    box-shadow:0 14px 30px -10px rgba(168,209,57,.6);
    z-index:2;
  }
  .corner-badge span{padding:0 12px}

  @media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr; gap:36px}
    .hero{padding-bottom:60px}
  }

  /* ==================== MARQUEE ==================== */
  .marquee{background:var(--navy); color:var(--cream); padding:18px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
  .marquee-track{display:flex; gap:40px; animation:scroll 38s linear infinite; white-space:nowrap; align-items:center}
  .marquee span{font-family:var(--f-display); font-size:22px; font-weight:500; letter-spacing:-.01em}
  .marquee em{font-style:italic; font-weight:400; color:var(--lime-2)}
  .marquee .dot{width:6px; height:6px; border-radius:50%; background:var(--lime); flex-shrink:0}
  @keyframes scroll{ to{ transform:translateX(-50%)}}

/* Variante de acento (tweak) en "Emprende" */
.hero h1 .emprende.underline-style::before{ height:8px; bottom:-2px; transform:none; border-radius:2px; }