/*
 * Finishing direction — MAPS x Fundamentos de Programación.
 * Preserve the official course photograph and structure; use gradients, real
 * course insignias and the MAPS pill/arrow vocabulary instead of grid textures.
 */
.hero.hero-course {
  margin: 0 !important;
  width: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: min(870px, 100svh);
  background: #341826; /* image loading fallback: no white corners */
}
.hero.hero-course .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #d82791;
  background-image: url("../assets/hero-programacion-oficial.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 57% 42%;
  /* Mirror only the photographic layer: subject moves right, text stays readable left. */
  transform: scaleX(-1);
  transform-origin: center center;
  filter: none;
  z-index: -1;
}
.hero.hero-course::before {
  inset: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg,
      rgba(0,42,32,.91) 0%,
      rgba(0,52,35,.85) 21%,
      rgba(0,53,37,.69) 39%,
      rgba(0,51,39,.22) 60%,
      rgba(0,35,31,.02) 100%),
    linear-gradient(180deg,
      rgba(0,32,27,.34) 0%,
      rgba(0,25,22,.02) 46%,
      rgba(0,30,24,.42) 100%);
  z-index: 0;
}
.hero.hero-course .hero-inner {
  min-height: clamp(740px, 91svh, 920px);
  padding-top: clamp(28px, 4vw, 53px);
  padding-bottom: 30px;
}
.hero.hero-course .hero-header {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.hero.hero-course .brand {
  margin: 0;
  justify-content: flex-start;
}
.hero.hero-course .brand img { width: clamp(170px, 16vw, 222px); }
.hero.hero-course .maps-pill {
  position: static;
  flex: none;
}
.hero.hero-course .hero-copy {
  width: min(100%, 715px);
  max-width: 715px;
  margin: auto 0;
  padding: 75px 0 60px;
  text-align: left;
  align-items: flex-start;
}
.hero.hero-course .hero-kicker {
  justify-content: flex-start;
  font-size: 10px;
}
.hero.hero-course h1 {
  max-width: 770px;
  margin: 25px 0 0;
  font-size: clamp(55px, 5.45vw, 83px);
  line-height: 1.025;
  letter-spacing: -.067em;
  text-wrap: balance;
}
.hero.hero-course .hero-divider { margin: 29px 0 24px; }
.hero.hero-course .hero-competence {
  max-width: 630px;
  margin: 0;
  font-size: clamp(16px, 1.48vw, 20px);
  line-height: 1.48;
  font-weight: 500;
  text-align: left;
  text-wrap: pretty;
}
.hero.hero-course .hero-explore { margin-top: 27px; }
.hero.hero-course .hero-foot {
  position: static;
  width: 100%;
  padding: 16px 0 0;
  border-top: 1px solid rgba(226,255,209,.3);
  z-index: 3;
}

/* Remove the superimposed grids, outlines and concentric circles. */
.hero-lines,
.hero.hero-course .hero-lines,
.hub-start::before,
.hub-tile::before,
.topic-card::after,
.credential-card::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
  box-shadow: none !important;
}
.hero.hero-course::after { background-image: none !important; }

/* Cards keep their original bento geometry; smooth gradients replace texture. */
.hub-start {
  background: linear-gradient(145deg, #00382f 0%, #005b43 51%, #0f8e5d 100%);
  border: 1px solid rgba(193,255,157,.2);
}
.hub-start .hub-play {
  background: linear-gradient(145deg,#d6ffab 0%,#a5ef69 100%) !important;
  color: #003e31 !important;
}
.hub-tecmilenio {
  position: absolute;
  right: 25px;
  bottom: 76px;
  width: min(36%, 145px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .62;
}
.hub-tile:nth-child(2) {
  background: linear-gradient(122deg,#c9ff85 0%,#a7ee81 49%,#75d995 100%);
}
.hub-tile:nth-child(3) {
  background: linear-gradient(133deg,#f0ffe2 0%,#c7f7c1 51%,#9ee5b6 100%);
}
.hub-tile:nth-child(4) {
  background: linear-gradient(138deg,#d9ffd0 0%,#a3eab7 60%,#75d5b5 100%);
}
.hub-tile:nth-child(5) {
  background: linear-gradient(125deg,#9bea8c 0%,#7fdc9c 48%,#48c79a 100%);
}
.hub-tile:nth-child(6) {
  background: linear-gradient(135deg,#edffe5 0%,#c2f1ca 49%,#95e1b7 100%);
}
.hub-tile {
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 30px rgba(0,67,42,.11);
}
.hub-tile:hover {
  box-shadow: 0 20px 42px rgba(0,74,41,.19);
}
.hub-icon {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.92);
  background: rgba(255,255,255,.82);
  color: var(--forest);
  box-shadow: 0 8px 19px rgba(4,88,51,.07);
}
.hub-icon .icon { width: 29px; height: 29px; stroke-width: 1.65; }
.hub-tile:nth-child(2) .hub-card-number { margin-top: 10px; }
.hub-card-number {
  box-shadow: 0 4px 14px rgba(0,53,33,.08);
}
.hub-card-arrow {
  background: rgba(255,255,255,.13);
}
.hub-tile:hover .hub-card-arrow {
  transform: translate(2px,-2px);
}

/* The actual Cisco badges from the supplied course screenshot. */
.intro-bottom {
  justify-content: space-between;
  align-items: center;
  column-gap: 25px;
}
.intro-official-badges {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex: 1 1 420px;
  max-width: 520px;
  margin: 0;
  padding: 7px 10px 2px;
  background: #fff;
  border: 1px solid #e3eedc;
  border-radius: 22px;
}
.intro-official-badges img {
  display: block;
  width: min(100%, 475px);
  height: auto;
  object-fit: contain;
}
.intro-official-badges figcaption {
  margin-top: 5px;
  padding: 4px 0 9px;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .095em;
  color: #63806a;
}
.credential-emblem {
  gap: 17px;
  align-items: center;
  flex-wrap: wrap;
}
.credential-badges {
  width: clamp(155px, 18vw, 210px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 4px;
  flex: none;
}
.credential-emblem > div { flex: 1 1 160px; }
.credential-emblem > b { margin-left: auto; }

/* Gradients on learning cards; no faux grid paper or diagram circles. */
.topic-card.topic-1 { background: linear-gradient(140deg,#d7ffa8 0%,#9be87d 66%,#70d998 100%); }
.topic-card.topic-2 { background: linear-gradient(140deg,#efffe2 0%,#ccf6c1 57%,#a7e3b8 100%); }
.topic-card.topic-3 { background: linear-gradient(140deg,#e0ffc5 0%,#b8eea3 57%,#86d9a3 100%); }
.topic-card.topic-4 { background: linear-gradient(140deg,#c9ffa6 0%,#99e69c 56%,#5dcc91 100%); }
.topic-card.topic-5 { background: linear-gradient(140deg,#f7ffec 0%,#d7f3ca 56%,#b1eac3 100%); }
.topic-symbol,
.topic-card.topic-2 .topic-symbol {
  background: rgba(255,255,255,.85);
  box-shadow: 0 9px 17px rgba(0,65,37,.07);
}
.workspace-lead {
  background: linear-gradient(128deg,#edffe1 0%,#d8f7c7 54%,#b9ecb0 100%);
}
.credential-card {
  background: linear-gradient(127deg,#003c2d 0%,#00573e 50%,#0d8952 100%);
}
.feature-tile { background: linear-gradient(130deg,#e7ffd2,#b5ee9f); }
.feature-lime { background: linear-gradient(133deg,#f6ffed,#d4f4b7); }

@media (min-width: 1500px) {
  .hero.hero-course .hero-photo { background-position: center 41%; }
  .hero.hero-course .hero-copy { width: min(100%, 760px); max-width: 760px; }
}
@media (max-width: 1000px) {
  .hero.hero-course .hero-copy { width: min(100%, 610px); max-width: 610px; }
  .hero.hero-course::before {
    background: linear-gradient(90deg,rgba(0,43,32,.91),rgba(0,45,32,.74) 42%,rgba(0,39,30,.2) 100%),
                linear-gradient(180deg,rgba(0,30,25,.15),rgba(0,30,25,.5));
  }
}
@media (max-width: 767px) {
  .hero.hero-course { margin: 0 !important; min-height: 760px; }
  .hero.hero-course .hero-inner {
    min-height: min(850px, 100svh);
    min-height: clamp(720px,100svh,850px);
    padding-top: 25px;
    padding-bottom: 23px;
  }
  .hero.hero-course .hero-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/hero-programacion-oficial.webp");
    background-size: cover;
    background-position: 57% 20%;
    filter: none;
  }
  .hero.hero-course::before {
    background:
      linear-gradient(180deg,rgba(0,48,38,.55) 0%,rgba(0,45,33,.07) 26%,rgba(0,43,33,.36) 43%,rgba(0,37,27,.94) 77%,rgba(0,37,27,.96) 100%);
  }
  .hero.hero-course .brand { margin: 0; }
  .hero.hero-course .brand img { width: 165px; }
  .hero.hero-course .maps-pill { position: static; font-size: 8px; padding: 4px; gap: 5px; }
  .hero.hero-course .maps-pill .maps-spark { width: 25px; height: 25px; font-size: 15px; }
  .hero.hero-course .maps-pill>span:last-child { width: 23px; height: 23px; font-size: 14px; }
  .hero.hero-course .hero-copy {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding: 230px 0 30px;
    text-align: left;
    align-items: flex-start;
  }
  .hero.hero-course h1 {
    font-size: clamp(37px,8vw,61px);
    line-height: 1.035;
    max-width: 590px;
  }
  .hero.hero-course .hero-competence { font-size: clamp(14px,3.1vw,17px); line-height: 1.45; }
  .hero.hero-course .hero-explore { margin-top: 24px; }
  .intro-bottom { flex-direction: column; }
  .intro-official-badges { width: 100%; max-width: 520px; flex-basis: auto; }
  .intro-action { width: 100%; }
  .hub-start .hub-tecmilenio { width: min(35%,118px); right: 23px; bottom: 78px; }
  .hub-icon { height: 47px; width: 47px; }
  .hub-icon .icon { width: 24px; height: 24px; }
  .credential-badges { width: min(100%, 220px); }
}
@media (max-width: 430px) {
  .hero.hero-course .hero-inner { min-height: 780px; }
  .hero.hero-course .hero-copy { padding-top: 270px; }
  .hero.hero-course h1 { font-size: clamp(34px,8.8vw,40px); }
  .hero.hero-course .hero-foot span:last-child { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .hub-tile:hover .hub-card-arrow { transform: none; }
}


/* Accreditation — icon-led entry card, editorial achievement showcase.
   Original Cisco imagery belongs in the section, not inside a cramped hub tile. */
.hub-tile:nth-child(2) .hub-icon {
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.92);
}
.hub-tile:nth-child(2) .hub-icon .icon { width: 29px; height: 29px; }

.accreditation.accreditation-section {
  padding: clamp(74px,8vw,120px) 0 clamp(72px,7vw,106px);
  background: linear-gradient(180deg,#f9fff5 0%,#eef8e9 100%);
  color: #063f33;
}
.accred-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 36px;
}
.accred-heading-copy { max-width: 850px; }
.accred-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #23794f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.accred-kicker-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #e8ffc9;
  background: #07543d;
  border-radius: 50%;
}
.accred-kicker-icon .icon { width: 17px; height: 17px; }
.accred-heading h2 {
  margin: 19px 0 17px;
  font-size: clamp(41px,4.5vw,66px);
  font-weight: 800;
  letter-spacing: -.068em;
  line-height: 1.025;
  text-wrap: balance;
  color: #064b38;
}
.accred-heading h2 em {
  font-style: normal;
  color: #138a58;
}
.accred-heading p {
  max-width: 620px;
  color: #56735d;
  line-height: 1.65;
  font-size: 14px;
  margin: 0;
}
.accred-heading-index {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #cee5bc;
  border-radius: 999px;
  padding: 7px 7px 7px 17px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .095em;
  white-space: nowrap;
  background: #e8f8db;
  color: #175a3a;
}
.accred-heading-index>span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: #064c39;
  border-radius: 50%;
  color: #c6f79c;
  font-size: 18px;
}
.accred-grid {
  display: grid;
  grid-template-columns: minmax(0,1.07fr) minmax(0,.93fr);
  gap: 20px;
  align-items: stretch;
}
.accred-feature,.accred-showcase {
  min-width: 0;
  min-height: 495px;
  border-radius: 32px;
  overflow: hidden;
  margin: 0;
}
.accred-feature {
  display: flex;
  flex-direction: column;
  padding: clamp(26px,3vw,39px);
  color: #f8fff4;
  background: linear-gradient(135deg,#00382d 0%,#005840 55%,#148e58 100%);
  border: 1px solid #307950;
  box-shadow: 0 20px 45px rgba(0,57,33,.15);
}
.accred-feature-top,.accred-feature-bottom,
.accred-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}
.accred-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #c0f58f;
  color: #064b36;
  border: 1px solid #d3ffae;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
}
.accred-pill>span { font-size: 14px; line-height: 1; }
.accred-serial {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: #c8ebc7;
}
.accred-feature-body { margin: auto 0; padding: 40px 0 29px; }
.accred-symbol {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: linear-gradient(140deg,#dbffb7,#b0ee72);
  color: #064936;
  box-shadow: 0 10px 31px rgba(0,30,16,.19);
}
.accred-symbol .icon { width: 35px; height: 35px; stroke-width: 1.65; }
.accred-overline {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #b9e8ab;
}
.accred-feature h3 {
  margin: 12px 0 15px;
  font-size: clamp(48px,5.15vw,76px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.072em;
  color: #f7fff1;
}
.accred-feature h3 span { color: #b9f478; }
.accred-feature-body p {
  max-width: 450px;
  margin: 0;
  line-height: 1.65;
  font-size: 13px;
  color: #d3f0d0;
}
.accred-feature-bottom {
  padding-top: 16px;
  border-top: 1px solid rgba(218,255,189,.29);
  font-size: 10px;
  font-weight: 900;
  color: #d5f8c5;
  letter-spacing: .075em;
}
.accred-feature-arrow {
  display: grid;
  place-items: center;
  border: 1px solid #d6f5be;
  color: #d6f5be;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 20px;
}
.accred-showcase {
  display: flex;
  flex-direction: column;
  padding: clamp(25px,2.8vw,35px);
  background: linear-gradient(145deg,#ffffff 0%,#f6fff0 62%,#e0f5d2 100%);
  border: 1px solid #d8ebca;
  box-shadow: 0 16px 37px rgba(23,83,44,.08);
}
.accred-showcase-head {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #3f7953;
}
.accred-showcase-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #07543b;
  white-space: nowrap;
}
.accred-showcase-num>span {
  border: 1px solid #b4d6a0;
  background: #e7f7da;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 17px;
}
.accred-showcase-art {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 215px;
  padding: 27px 15px;
}
.accred-showcase-art img {
  display: block;
  width: min(100%,430px);
  height: auto;
  max-height: 238px;
  object-fit: contain;
  filter: drop-shadow(0 13px 17px rgba(7,51,60,.1));
}
.accred-showcase figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #d5e8c9;
  padding-top: 21px;
}
.accred-showcase-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #328050;
}
.accred-showcase figcaption strong {
  font-size: clamp(23px,2.5vw,31px);
  letter-spacing: -.05em;
  line-height: 1.15;
  color: #084c38;
}
.accred-showcase figcaption>span:last-child {
  max-width: 395px;
  font-size: 11px;
  line-height: 1.5;
  color: #5b7d63;
}
.accred-roadmap {
  margin-top: 20px;
  padding: 27px clamp(21px,3vw,35px);
  border-radius: 27px;
  border: 1px solid #d5e8c7;
  background: #fff;
}
.accred-roadmap-head {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 900;
  color: #1d6143;
  margin-bottom: 22px;
}
.accred-roadmap-head>span:last-child { color: #729376; }
.accred-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.accred-steps li {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 14px 0 0;
}
.accred-steps li+li { border-left: 1px solid #dbe9d2; padding-left: 19px; }
.accred-step-number {
  padding-top: 5px;
  font: 900 11px monospace;
  color: #4a8b61;
}
.accred-step-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: none;
  border-radius: 14px;
  background: #e1f6d5;
  color: #086545;
}
.accred-step-icon .icon { width: 21px; height: 21px; }
.accred-steps li>div { flex: 1; min-width: 0; }
.accred-steps strong {
  display: block;
  color: #174e39;
  line-height: 1.3;
  font-size: 13px;
  font-weight: 800;
}
.accred-steps p {
  margin: 6px 0 0;
  color: #6b816d;
  line-height: 1.5;
  font-size: 11px;
}
.accred-disclaimer {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 17px 0 0;
  max-width: 960px;
  font-size: 11px;
  color: #608168;
  line-height: 1.5;
}
.accred-disclaimer>span { color: #168f59; font-size: 15px; line-height: 1.2; }
@media(max-width:1060px) {
  .accred-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .accred-feature,.accred-showcase { min-height: 450px; }
  .accred-feature h3 { font-size: clamp(47px,5vw,67px); }
  .accred-steps { gap: 9px; }
  .accred-steps li { gap: 9px; }
  .accred-steps li+li { padding-left: 12px; }
}
@media(max-width:767px) {
  .accreditation.accreditation-section { padding: 68px 0; }
  .accred-heading { align-items: flex-start; flex-direction: column; margin-bottom: 25px; }
  .accred-heading h2 { font-size: clamp(37px,7.3vw,50px); }
  .accred-heading-index { font-size: 9px; }
  .accred-grid { grid-template-columns: 1fr; gap: 14px; }
  .accred-feature,.accred-showcase { min-height: 425px; border-radius: 26px; }
  .accred-feature-body { padding: 35px 0 27px; }
  .accred-feature h3 { font-size: clamp(48px,9vw,66px); }
  .accred-showcase-art { min-height: 210px; }
  .accred-roadmap { padding: 25px; }
  .accred-roadmap-head { flex-wrap: wrap; }
  .accred-steps { grid-template-columns: 1fr; gap: 0; }
  .accred-steps li { padding: 14px 0; }
  .accred-steps li+li { border-left: 0; border-top: 1px solid #dbe9d2; padding-left: 0; }
}
@media(max-width:440px){
  .accred-heading h2 { font-size: clamp(34px,9vw,40px); }
  .accred-feature,.accred-showcase { padding: 23px; }
  .accred-feature h3 { font-size: clamp(44px,12vw,56px); }
  .accred-serial { font-size: 9px; }
  .accred-pill { font-size: 9px; }
  .accred-showcase-head { font-size: 9px; }
}