/*
 * Hero direction 04 — vivid editorial MAPS.
 * Keep the supplied course photograph untouched. Its CSS-only reflection moves
 * the subject right; this layer restores the official pink, adds the forest
 * sculptural panel and reuses the glossy learning-orbit asset from English V.
 * Only the hero is styled here: course pages and interactions remain intact.
 */
.hero.hero-course {
  isolation:isolate;
  min-height:clamp(790px,96svh,970px);
  background:#e51b99;
}
.hero.hero-course .hero-photo {
  inset:0;
  width:100%;
  height:100%;
  background-image:url("../assets/hero-programacion-oficial.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:55% 40%;
  transform:scaleX(-1);
  transform-origin:center center;
  /* No full-photo green veil: let the pink, jacket, and laptop stay saturated. */
  filter:saturate(1.4) contrast(1.05) brightness(1.07);
  z-index:-1;
}
.hero.hero-course::before {
  inset:0;
  background:linear-gradient(180deg,rgba(0,30,25,.19) 0%,transparent 29%,transparent 76%,rgba(0,23,17,.23) 100%);
  z-index:0;
}
.hero-vivid-panel {
  pointer-events:none;
  position:absolute;
  z-index:0;
  top:-7%;
  bottom:-7%;
  left:-4%;
  width:65%;
  background:
    radial-gradient(ellipse at 70% 51%,rgba(9,107,73,.48),transparent 65%),
    linear-gradient(110deg,#00372e 6%,#004b3b 50%,#006343 100%);
  clip-path:ellipse(80% 94% at 12% 50%);
}
.hero-vivid-arc {
  pointer-events:none;
  position:absolute;
  z-index:1;
  left:45%;
  top:-9%;
  width:30%;
  height:122%;
  border:1px solid rgba(212,255,151,.41);
  border-radius:50%;
  transform:rotate(8deg);
  opacity:.85;
}
.hero-vivid-orbit {
  pointer-events:none;
  position:absolute;
  z-index:2;
  width:clamp(185px,21vw,305px);
  height:auto;
  top:3%;
  right:1.4%;
  filter:drop-shadow(0 20px 22px rgba(32,35,36,.23));
  transform:rotate(-13deg);
  animation:hero-orbit-float 7s ease-in-out infinite;
}
.hero-vivid-spark {
  pointer-events:none;
  position:absolute;
  z-index:2;
  color:#d1ff6f;
  width:clamp(58px,6.2vw,96px);
  height:auto;
  top:15%;
  left:48%;
  transform:rotate(-12deg);
  filter:drop-shadow(0 6px 13px rgba(0,55,30,.22));
}
.hero-vivid-glyph {
  pointer-events:none;
  position:absolute;
  z-index:2;
  left:43%;
  top:49%;
  white-space:nowrap;
  font-family:'Outfit',sans-serif;
  font-size:clamp(138px,13.9vw,230px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.19em;
  color:#cdff78;
  -webkit-text-stroke:1px rgba(240,255,183,.8);
  text-shadow:1px 2px 0 #a9e651,4px 5px 0 #76bd40,7px 9px 0 #3e9842,10px 13px 0 #127343,17px 24px 23px rgba(0,35,25,.33);
  transform:rotate(-12deg);
}
.hero-vivid-dot {
  pointer-events:none;
  position:absolute;
  z-index:2;
  left:62%;
  bottom:17%;
  width:22px;
  height:22px;
  background:#dbff7b;
  border-radius:50%;
  box-shadow:0 0 0 9px rgba(217,255,122,.12);
}
.hero.hero-course .hero-inner {
  min-height:clamp(790px,96svh,970px);
}
.hero.hero-course .hero-header {
  position:relative;
  z-index:5;
}
.hero.hero-course .hero-copy {
  width:min(100%,750px);
  max-width:750px;
  z-index:3;
  padding:34px 0 40px;
}
.hero.hero-course .hero-kicker {
  background:rgba(3,66,48,.8);
  border:1px solid rgba(187,247,137,.68);
  color:#e6ffd4;
  letter-spacing:.155em;
}
.hero.hero-course h1 {
  font-size:clamp(54px,5.65vw,91px);
  line-height:.98;
  letter-spacing:-.074em;
  text-wrap:balance;
  margin:22px 0 0;
  text-shadow:0 9px 28px rgba(0,39,27,.17);
}
.hero.hero-course .hero-divider {
  background:#bdff78;
  width:84px;
  height:5px;
  margin:23px 0 20px;
  border-radius:99px;
}
.hero-vivid-tagline {
  margin:0 0 15px;
  font-size:clamp(27px,2.85vw,41px);
  font-weight:800;
  letter-spacing:-.055em;
  line-height:1.08;
  color:#fff;
}
.hero-vivid-tagline strong {
  display:inline-block;
  margin-top:2px;
  color:#c2ff82;
  font-weight:800;
}
.hero.hero-course .hero-competence {
  max-width:610px;
  font-size:clamp(14px,1.21vw,18px);
  line-height:1.52;
  color:#e6f6e7;
  text-shadow:none;
}
.hero.hero-course .hero-explore {
  margin-top:25px;
  background:#c4ff80;
  color:#003f31;
  border-color:#dcffa7;
}
.hero.hero-course .hero-explore:hover {background:#d8ffac;}
.hero.hero-course .hero-foot {
  position:relative;
  z-index:3;
  border-top-color:rgba(213,255,173,.3);
  /* Two equal side tracks keep MAPS at the exact center of the hero,
     independently of the length of the course label on the left. */
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  justify-content:initial;
  column-gap:0;
  box-sizing:border-box;
  left:auto;
  right:auto;
  min-width:0;
}
.hero.hero-course .hero-foot > span:first-child {
  grid-column:1;
  justify-self:start;
  text-align:left;
}
.hero.hero-course .hero-foot > span:last-child {
  grid-column:2;
  justify-self:center;
  text-align:center;
  display:block;
  margin:0;
}
@media (max-width:480px) {
  .hero.hero-course .hero-foot {grid-template-columns:minmax(0,1fr);row-gap:9px;}
  .hero.hero-course .hero-foot > span:first-child {grid-column:1;}
  .hero.hero-course .hero-foot > span:last-child {grid-column:1;justify-self:center;display:block;}
}
@keyframes hero-orbit-float {
  0%,100%{transform:rotate(-13deg) translateY(0);}
  50%{transform:rotate(-9deg) translateY(-9px);}
}
@media (min-width:1500px) {
  .hero.hero-course .hero-photo{background-position:center 40%;}
  .hero-vivid-panel{width:62%;}
  .hero-vivid-glyph{left:44%;top:51%;}
}
@media (min-width:768px) and (max-width:1199px) {
  .hero-vivid-panel{width:73%;left:-5%;clip-path:ellipse(81% 93% at 10% 50%);}
  .hero-vivid-glyph{left:48%;top:51%;font-size:clamp(110px,14vw,175px);}
  .hero-vivid-spark{left:53%;top:16%;}
  .hero-vivid-orbit{width:clamp(145px,18vw,220px);right:0;top:5%;}
  .hero.hero-course .hero-copy{width:min(72%,680px);}
  .hero.hero-course h1{font-size:clamp(53px,6.3vw,76px);}
  .hero-vivid-tagline{font-size:clamp(27px,3.2vw,35px);}
}
@media (max-width:767px) {
  .hero.hero-course{min-height:clamp(760px,100svh,950px);}
  .hero.hero-course .hero-photo {
    inset:0;
    width:100%;
    height:100%;
    /* Crop the source's left side before mirroring; its subject then lands right. */
    background-position:10% 18%;
    filter:saturate(1.28) contrast(1.04) brightness(1.05);
  }
  .hero.hero-course::before {
    background:linear-gradient(180deg,rgba(0,35,28,.43),transparent 20%,transparent 43%,rgba(0,31,24,.19) 60%,rgba(0,29,22,.32) 100%);
  }
  .hero-vivid-panel {
    left:0;top:auto;bottom:0;width:100%;height:66%;
    clip-path:none;border-radius:0;
    background:linear-gradient(180deg,transparent 0%,rgba(0,59,43,.6) 16%,rgba(0,65,46,.96) 40%,#003b2d 100%);
  }
  .hero-vivid-arc{display:none;}
  .hero-vivid-orbit{top:9%;right:-8%;width:clamp(120px,31vw,178px);opacity:.92;}
  .hero-vivid-spark{top:19%;left:8%;width:50px;}
  .hero-vivid-glyph{display:none;} /* Leave the narrow crop to the real student. */
  .hero-vivid-dot{left:17%;bottom:44%;width:12px;height:12px;}
  .hero.hero-course .hero-inner{min-height:clamp(760px,100svh,950px);}
  .hero.hero-course .hero-copy{width:100%;max-width:610px;padding:190px 0 25px;margin:auto 0 0;}
  .hero.hero-course h1{font-size:clamp(37px,8vw,60px);line-height:1.01;margin-top:17px;}
  .hero.hero-course .hero-divider{margin:16px 0 13px;width:63px;height:4px;}
  .hero-vivid-tagline{font-size:clamp(23px,5.2vw,34px);margin-bottom:12px;}
  .hero.hero-course .hero-competence{font-size:clamp(13px,3.05vw,16px);line-height:1.44;}
  .hero.hero-course .hero-explore{margin-top:18px;}
}
@media (max-width:420px) {
  .hero.hero-course .hero-copy{padding-top:200px;}
  .hero.hero-course h1{font-size:clamp(34px,8.65vw,42px);}
  .hero-vivid-tagline{font-size:clamp(22px,5.3vw,26px);}
  .hero.hero-course .hero-competence{font-size:13px;}
  .hero-vivid-orbit{right:-13%;width:140px;}
}
@media (prefers-reduced-motion:reduce){
  .hero-vivid-orbit{animation:none;}
}