@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap');

:root {
  --bg: #071310;
  --panel: #0e2d1c;
  --cyan: #4bb6ae;
  --orange: #8fdcd4;
  --text: #f2fbf8;
  --muted: #93b3ac;
  --dark: #0e2d1c;
  --text-dark: #0e2d1c
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: radial-gradient(circle at 80% 0, #154439 0, transparent 35%), var(--bg);
  color: var(--text);
  font-family: Manrope, sans-serif
}

.wrap {
  width: min(1180px, calc(100% - 36px));
  margin: auto
}

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7, 19, 16, .82);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, .09)
}

.header .wrap {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 28px
}

.logo {
  font-size: 25px;
  font-weight: 800;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center
}

.logo span {
  color: var(--cyan)
}

.logo img {
  height: 38px;
  width: auto;
  display: block
}

.footer .brand {
  display: flex;
  align-items: center;
  gap: 10px
}

.footer .brand img {
  height: 26px;
  width: auto;
  opacity: .9
}

.nav {
  margin-left: auto;
  display: flex;
  gap: 24px;
  align-items: center
}

.nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0
}

.nav a:not(.cta):after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--cyan);
  border-radius: 2px;
  transition: right .25s ease
}

.nav a.active:not(.cta):after,
.nav a:not(.cta):hover:after {
  right: 0
}

.nav a.active,
.nav a:hover {
  color: white
}

.nav .cta {
  padding: 11px 18px;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: #041012;
  border-radius: 999px;
  font-weight: 800;
  transition: background .2s, color .2s
}

.nav .cta:hover {
  background: transparent;
  color: var(--cyan)
}

.menu {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid #53706d;
  color: white;
  padding: 8px 11px
}

.hero {
  min-height: 84vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 6vw;
  align-items: center;
  padding: 80px 0
}

.eyebrow {
  color: var(--cyan);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px
}

.hero h1,
.page-title h1 {
  font-size: clamp(55px, 8vw, 112px);
  line-height: .9;
  letter-spacing: -.06em;
  margin: 20px 0
}

.hero h1 span {
  color: var(--orange)
}

.hero p {
  color: var(--muted);
  font-size: 19px;
  max-width: 620px
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap
}

.btn {
  padding: 13px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid #55716e;
  color: #4bb6ae;
  background: transparent;
  cursor: pointer
}

.btn.primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #041012
}

.scene {
  position: relative;
  aspect-ratio: 1;
  border-radius: 40px;
  background: linear-gradient(145deg, rgba(75, 182, 174, .2), rgba(143, 220, 212, .13));
  border: 1px solid rgba(255, 255, 255, .13);
  overflow: hidden
}

.scene:before,
.scene:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(2px)
}

.scene:before {
  width: 70%;
  height: 70%;
  background: var(--cyan);
  opacity: .18;
  right: -10%;
  top: -10%
}

.scene:after {
  width: 55%;
  height: 55%;
  background: var(--orange);
  opacity: .2;
  left: -5%;
  bottom: -5%
}

.glass {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 19, 16, .84);
  border-radius: 30px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .4)
}

.glass strong {
  font-size: 48px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .4)
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-bottom: 70px
}

.metric {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  padding: 20px
}

.metric b {
  display: block;
  font-size: 30px;
  color: var(--cyan)
}

.section {
  padding: 80px 0
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  margin-bottom: 32px
}

.section h2 {
  font-size: clamp(35px, 5vw, 64px);
  margin: 0;
  letter-spacing: -.04em
}

.section-head p {
  color: var(--muted);
  max-width: 470px
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  padding: 28px;
  min-height: 260px;
  transition: .25s
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--cyan)
}

.card .num {
  color: var(--orange)
}

.card h3 {
  font-size: 28px;
  margin: 45px 0 12px
}

.card p {
  color: var(--muted)
}

.card a {
  color: var(--cyan)
}

.band {
  margin: 60px 0;
  background: linear-gradient(90deg, var(--cyan), #bfe9e3);
  color: #07211a;
  border-radius: 32px;
  padding: 50px
}

.band p {
  font-size: clamp(34px, 5vw, 70px);
  font-weight: 800;
  letter-spacing: -.05em;
  margin: 0
}

.page-title {
  padding: 100px 0 55px;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.page-title h1 {
  font-size: clamp(50px, 7vw, 96px);
  max-width: 1000px
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw
}

.lead {
  font-size: 22px;
  color: white
}

.muted {
  color: var(--muted)
}

.quote {
  border-left: 4px solid var(--orange);
  padding: 30px;
  background: rgba(143, 220, 212, .08);
  border-radius: 0 24px 24px 0;
  font-size: 30px;
  font-weight: 800
}

.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 24px
}

.filters button {
  background: transparent;
  border: 1px solid #4a6865;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 15px
}

.filters button.active {
  background: var(--cyan);
  color: #071417
}

.program-list article {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 25px;
  border-top: 1px solid rgba(255, 255, 255, .1)
}

.program-list article:hover {
  background: rgba(255, 255, 255, .035)
}

.program-list span {
  color: var(--orange)
}

.program-list b {
  font-size: 25px
}

.program-list p {
  color: var(--muted);
  margin: 5px 0
}

.program-list a {
  color: var(--cyan)
}

.collage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px
}

.collage>* {
  min-height: 230px;
  border-radius: 24px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045)
}

.collage .big {
  grid-row: span 2;
  min-height: 480px;
  background: linear-gradient(145deg, #16464a, #0b2528);
  display: flex;
  align-items: end;
  font-size: 45px;
  font-weight: 800
}

.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 5vw
}

form {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 28px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

label {
  font-size: 13px;
  color: var(--muted)
}

input,
select,
textarea {
  width: 100%;
  margin-top: 7px;
  background: #092023;
  border: 1px solid #355552;
  color: white;
  padding: 12px;
  border-radius: 10px
}

.full {
  grid-column: 1/-1
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.accordion-item button {
  width: 100%;
  padding: 24px 0;
  background: none;
  border: 0;
  color: white;
  font-size: 22px;
  display: flex;
  justify-content: space-between;
  text-align: left
}

.accordion-item div {
  display: none;
  color: var(--muted);
  padding-bottom: 24px
}

.accordion-item.open div {
  display: block
}

.footer {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 40px 0;
  color: var(--muted)
}

.footer .wrap {
  display: flex;
  justify-content: space-between
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--cyan);
  color: #041012;
  padding: 13px 18px;
  border-radius: 12px;
  transform: translateY(100px);
  transition: .3s
}

.toast.show {
  transform: none
}

@media(max-width:900px) {
  .menu {
    display: block
  }

  .nav {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: #08181b;
    padding: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch
  }

  .nav.open {
    display: flex
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 55px
  }

  .scene {
    max-width: 500px
  }

  .metrics {
    grid-template-columns: 1fr 1fr
  }

  .cards,
  .two,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .program-list article {
    grid-template-columns: 45px 1fr
  }

  .program-list a {
    grid-column: 2
  }

  .collage {
    display: block
  }

  .collage>* {
    margin-bottom: 15px
  }

  .collage .big {
    min-height: 330px
  }

  form {
    grid-template-columns: 1fr
  }

  .full {
    grid-column: auto
  }

  .footer .wrap {
    display: block
  }
}

/* Menú desplegable e identidad institucional */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center
}

.nav-dropdown-toggle {
  background: none;
  border: 0;
  color: var(--muted);
  font: 600 13px Manrope, sans-serif;
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  gap: 7px;
  align-items: center
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
  color: #fff
}

.nav-dropdown-toggle span {
  color: var(--cyan);
  font-size: 16px
}

.nav-submenu {
  position: absolute;
  top: 38px;
  left: -18px;
  width: 270px;
  padding: 10px;
  background: #081d18;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid var(--cyan);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 55px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .22s
}

.nav-submenu a {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 9px;
  font-size: 13px !important
}

.nav-submenu a:hover {
  background: rgba(75, 182, 174, .12)
}

.nav-dropdown:hover .nav-submenu,
.nav-dropdown.open .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: none
}

.institutional-hero {
  background: linear-gradient(120deg, rgba(7, 19, 16, .95), rgba(14, 68, 52, .88));
  padding-bottom: 70px
}

.institutional-hero h1 {
  margin-bottom: 18px
}

.institutional-hero p {
  max-width: 730px;
  color: var(--muted);
  font-size: 18px
}

.breadcrumbs {
  display: flex;
  gap: 9px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 13px
}

.breadcrumbs a {
  color: var(--cyan)
}

.institutional-section {
  background: rgba(255, 255, 255, .025);
  border-block: 1px solid rgba(255, 255, 255, .08)
}

.institutional-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 24px;
  padding: 30px
}

.institutional-card.accent {
  border-top: 4px solid var(--cyan)
}

.institutional-card h3 {
  font-size: 26px;
  margin: 8px 0 14px
}

.institutional-card p,
.director-message p,
.timeline p,
.objectives p,
.directory-grid p,
.value p {
  color: var(--muted)
}

.director-layout {
  display: grid;
  grid-template-columns: minmax(280px, 370px) 1fr;
  gap: 55px;
  align-items: center
}

.director-photo-wrap {
  position: relative
}

.director-photo-wrap img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  border-radius: 28px 28px 90px 28px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .4)
}

.director-photo-wrap:before {
  content: '';
  position: absolute;
  inset: -14px 18px 18px -14px;
  border: 2px solid var(--cyan);
  border-radius: 30px 30px 90px 30px;
  z-index: -1
}

.director-badge {
  position: absolute;
  left: 22px;
  right: -20px;
  bottom: 18px;
  background: #071310;
  border-left: 5px solid var(--cyan);
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4)
}

.director-badge strong,
.director-badge span {
  display: block
}

.director-badge span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px
}

.director-message {
  background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .11);
  border-top: 5px solid var(--cyan);
  border-radius: 26px;
  padding: 36px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .25)
}

.director-message h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  margin: 12px 0 22px
}

.director-message p {
  text-align: justify;
  line-height: 1.75
}

.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.identity-letter {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(75, 182, 174, .14);
  color: var(--cyan);
  font-weight: 800;
  font-size: 24px
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.value {
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09)
}

.value h3 {
  margin: 0 0 10px;
  color: var(--cyan)
}

.timeline,
.objectives {
  display: grid;
  gap: 14px
}

.timeline article,
.objectives article {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09)
}

.timeline b,
.objectives b {
  color: var(--cyan);
  font-size: 22px
}

.timeline h3,
.objectives h3 {
  margin: 0 0 8px;
  font-size: 23px
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.directory-grid article {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .09)
}

.directory-grid article>span {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cyan), #16464a);
  color: #071310;
  font-weight: 800
}

.directory-grid h3 {
  font-size: 17px;
  margin: 0 0 4px
}

.directory-grid p {
  margin: 0;
  font-size: 13px
}

.section-head>p {
  max-width: 430px;
  color: var(--muted)
}

@media(max-width:900px) {
  .nav-dropdown {
    display: block
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 8px 0
  }

  .nav-submenu {
    position: static;
    width: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    margin-top: 6px;
    border-radius: 12px;
    border-top: 0;
    background: rgba(255, 255, 255, .04)
  }

  .nav-dropdown.open .nav-submenu {
    display: block
  }

  .nav-dropdown:hover .nav-submenu {
    opacity: 1;
    visibility: visible
  }

  .director-layout,
  .identity-grid {
    grid-template-columns: 1fr
  }

  .director-photo-wrap {
    max-width: 430px;
    margin: auto
  }

  .values-grid {
    grid-template-columns: 1fr 1fr
  }

  .directory-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {

  .values-grid,
  .directory-grid {
    grid-template-columns: 1fr
  }

  .timeline article,
  .objectives article {
    grid-template-columns: 1fr
  }

  .director-message {
    padding: 25px
  }

  .director-badge {
    right: 8px;
    left: 12px
  }
}

/* Ajustes para contenido institucional completo */
.content-stack {
  display: grid;
  gap: 20px
}

.long-copy {
  font-size: 17px;
  line-height: 1.85
}

.closing-copy {
  margin-top: 30px
}

.subsection-title {
  font-size: 28px;
  margin: 45px 0 22px
}

.identity-intro {
  max-width: 980px;
  margin: 0 0 42px
}

.section h2 small {
  display: block;
  font-size: .42em;
  color: var(--cyan);
  letter-spacing: 0;
  margin-top: 8px
}

.values-grid {
  grid-template-columns: repeat(3, 1fr)
}

.value {
  min-height: 220px
}

.value p {
  line-height: 1.7
}

.timeline article {
  align-items: start
}

.timeline p {
  line-height: 1.65
}

.card p {
  line-height: 1.7
}

.objectives p {
  line-height: 1.7
}

@media(max-width:900px) {
  .values-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .values-grid {
    grid-template-columns: 1fr
  }

  .long-copy {
    font-size: 16px
  }

  .section h2 small {
    font-size: .5em
  }
}


/* VERSION 1 — Menú blanco con identidad institucional original */
.header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(7, 19, 16, .12);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08)
}

.header .logo img {
  height: 42px
}

.nav a,
.nav-dropdown-toggle {
  color: #45615b
}

.nav a.active,
.nav a:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
  color: #0e2d1c
}

.menu {
  color: #0e2d1c;
  border-color: #9fb8b2
}

.nav-submenu {
  background: #fff;
  border-color: rgba(7, 19, 16, .12);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .16)
}

.nav-submenu a:hover {
  background: rgba(75, 182, 174, .12)
}

@media(max-width:900px) {
  .nav {
    background: #fff;
    border-top: 1px solid rgba(7, 19, 16, .1)
  }
}



/* MEJORA 2026 — identidad oficial, accesibilidad y footer institucional */
.logo img {
  height: 42px;
  max-width: 190px;
  object-fit: contain
}

.footer {
  padding: 46px 0
}

.footer .wrap {
  align-items: center;
  gap: 28px
}

.footer .brand {
  gap: 16px
}

.footer .brand img {
  height: 46px;
  width: auto;
  max-width: 180px;
  opacity: 1
}

.footer .brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.footer .brand-text strong {
  color: var(--text-dark);
  font-size: 14px
}

.footer .brand-text small {
  font-size: 12px;
  color: var(--muted)
}

@media(max-width:600px) {
  .footer .wrap {
    display: grid;
    gap: 18px
  }

  .footer .brand img {
    height: 40px
  }

  .logo img {
    height: 36px;
    max-width: 165px
  }
}


/* VERSIÓN 1 MEJORADA — encabezado blanco + cuerpo oscuro premium */
.header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid rgba(14, 45, 28, .12);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .12)
}

.header .nav a,
.header .nav-dropdown-toggle {
  color: #46665e
}

.header .nav a:hover,
.header .nav a.active,
.header .nav-dropdown-toggle:hover,
.header .nav-dropdown-toggle.active {
  color: #0e2d1c
}

.header .menu {
  color: #0e2d1c;
  border-color: #9bb1ac
}

.header .nav-submenu {
  background: #fff;
  border-color: rgba(14, 45, 28, .12);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .16)
}

.header .nav-submenu a:hover {
  background: rgba(75, 182, 174, .12)
}

.footer {
  background: #06110e
}

@media(max-width:900px) {
  .header .nav {
    background: #fff;
    border-top: 1px solid rgba(14, 45, 28, .1)
  }
}


/* Identidad institucional: logos oficiales sin recoloración */
.header .logo img {
  object-fit: contain;
  filter: none
}

.footer .brand img {
  box-sizing: content-box;
  width: 42px;
  height: 42px;
  object-fit: contain;
  padding: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 1;
  filter: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

@media(max-width:600px) {
  .footer .brand img {
    width: 36px;
    height: 36px;
    padding: 5px
  }
}


/* AJUSTES FINALES SOLICITADOS — agosto 2026 */
:root {
  --cream: #f7faf8;
  --ink: #123129;
  --line: #dbe7e2
}

body {
  background: var(--cream);
  color: var(--ink)
}

.wrap {
  width: min(1180px, calc(100% - 48px))
}

.hero {
  min-height: auto;
  padding: 72px 0 82px;
  background: #071b16;
  color: #fff;
  border-radius: 0 0 36px 36px
}

.hero>div:first-child {
  padding-left: 8px
}

.hero h1 {
  font-size: clamp(48px, 7vw, 94px)
}

.hero p {
  color: #c7d9d3
}

.light-section,
.light-page {
  background: #fff;
  color: var(--ink)
}

.green-section {
  background: #0b3428;
  color: #fff
}

.green-section .card {
  background: #123f33
}

.green-section .card p {
  color: #c7d9d3
}

.metrics {
  grid-template-columns: repeat(5, 1fr);
  padding: 50px 0
}

.metric {
  background: #f2f7f5;
  border-color: var(--line);
  color: #49665e
}

.metric b {
  color: #087c69
}

.light-section .section h2,
.light-page h1 {
  color: #123129
}

.light-page {
  padding-top: 90px
}

.light-page p {
  color: #5b746d
}

.light-cards .card,
.light-section .program-list article {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 12px 30px rgba(14, 45, 28, .06)
}

.light-cards .card p,
.light-section .program-list p {
  color: #5b746d
}

.light-cards .card h3,
.light-section .program-list b {
  color: #123129
}

.slogan-section {
  padding: 80px 0;
  text-align: center
}

.slogan-section h2 {
  font-size: clamp(38px, 6vw, 76px);
  margin: 10px 0;
  color: #0e493a
}

.slogan-section em {
  color: #4bb6ae;
  font-style: normal
}

.footer {
  background: #fff;
  color: #49665e;
  border-top: 1px solid var(--line)
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: start !important
}

.footer a {
  color: #287c6b
}

.footer .brand img {
  width: auto !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important
}

.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 28px !important;
  padding-top: 20px;
  color: #6b817b
}

.portal-link {
  color: #087c69 !important
}

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #25D366;
  color: #07351a;
  text-decoration: none;
  padding: 13px 17px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25)
}

.whatsapp-float span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 50%
}

.filters {
  flex-wrap: wrap
}

.filter-btn {
  cursor: pointer
}

.program-list article {
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 12px
}

.program-list article[hidden] {
  display: none
}

.campus-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px
}

.campus-card {
  background: #f2f7f5;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px;
  min-height: 180px
}

.campus-card.big {
  grid-row: span 2;
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: linear-gradient(145deg, #d6f1eb, #ecf8f5)
}

.visit-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 44px;
  align-items: center
}

.map-wrap {
  border-radius: 24px;
  overflow: hidden;
  min-height: 450px
}

.map-wrap iframe {
  width: 100%;
  height: 450px;
  border: 0
}

.contact-grid form {
  background: #f2f7f5;
  border-color: var(--line)
}

input,
select,
textarea {
  background: #fff;
  border-color: #bed1cb;
  color: #123129
}

.program-hero {
  background: #0b3428;
  color: #fff;
  padding: 84px 0
}

.program-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items: center
}

.program-hero h1 {
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1;
  letter-spacing: -.05em
}

.program-visual img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 30px
}

.program-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 30px 0
}

.program-facts>div {
  padding: 18px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px
}

.program-facts small,
.program-facts strong {
  display: block
}

.program-facts small {
  color: #a9c8bf;
  margin-bottom: 6px
}

.plan-placeholder {
  padding: 36px;
  border: 2px dashed #afc9c1;
  border-radius: 24px;
  background: #f7faf8
}

.partners-ticker {
  overflow: hidden;
  padding: 24px 0;
  border-block: 1px solid var(--line)
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: ticker 28s linear infinite
}

.ticker-track span {
  padding: 16px 24px;
  border-radius: 14px;
  background: #eef6f3;
  border: 1px solid var(--line);
  font-weight: 700;
  white-space: nowrap
}

@keyframes ticker {
  to {
    transform: translateX(-50%)
  }
}

.documents-head {
  margin-top: 70px
}

.documents-table {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden
}

.doc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line)
}

.doc-row:last-child {
  border-bottom: 0
}

.doc-row a {
  color: #087c69;
  font-weight: 800
}

.value h3 {
  color: #087c69
}

.institutional-section,
.section {
  background: transparent
}

.institutional-card,
.value,
.timeline article,
.objectives article,
.directory-grid article {
  background: #fff;
  border-color: var(--line);
  color: var(--ink)
}

.institutional-card p,
.value p,
.timeline p,
.objectives p,
.directory-grid p {
  color: #5b746d
}

@media(max-width:900px) {
  .wrap {
    width: min(100% - 30px, 1180px)
  }

  .metrics {
    grid-template-columns: 1fr 1fr
  }

  .footer-grid,
  .visit-grid,
  .program-hero-grid,
  .campus-grid {
    grid-template-columns: 1fr
  }

  .program-facts {
    grid-template-columns: 1fr
  }

  .campus-card.big {
    grid-row: auto
  }

  .whatsapp-float strong {
    display: none
  }

  .whatsapp-float {
    padding: 13px
  }

  .hero {
    border-radius: 0
  }

  .nav {
    max-height: calc(100vh - 78px);
    overflow: auto
  }
}

@media(max-width:600px) {
  .metrics {
    grid-template-columns: 1fr
  }

  .doc-row {
    grid-template-columns: 1fr
  }

  .hero {
    padding-left: 15px;
    padding-right: 15px
  }
}


/* CORRECCIONES DE REVISIÓN — documento Ajustes página web (1) */
.institutional-hero {
  padding: 76px 0 64px;
  color: #fff
}

.institutional-hero h1 {
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: #f5fffc;
  opacity: 1;
  max-width: 1100px;
  text-wrap: balance
}

.institutional-hero p {
  color: #c7d9d3
}

.light-page h1 {
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -.045em;
  max-width: 1050px;
  text-wrap: balance
}

.page-title {
  padding: 76px 0 58px
}

.campus-grid {
  margin-top: 8px
}

.map-wrap {
  background: #eef6f3;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(14, 45, 28, .12)
}

.map-wrap iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0
}

.whatsapp-icon {
  display: grid !important;
  place-items: center;
  width: 27px !important;
  height: 27px !important;
  background: #fff;
  border-radius: 50%
}

.whatsapp-icon svg {
  width: 19px;
  height: 19px;
  fill: #128c4a
}

.wa-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000
}

.wa-widget .whatsapp-float {
  position: relative;
  right: auto;
  bottom: auto;
  border: 0;
  font: inherit;
  cursor: pointer
}

.wa-popup {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 290px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(7, 29, 22, .3);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.94);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s
}

.wa-popup.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1)
}

.wa-popup-header {
  background: linear-gradient(135deg, #25D366, #128c4a);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 15px
}

.wa-popup-close {
  background: rgba(255, 255, 255, .22);
  border: 0;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0
}

.wa-popup-close:hover {
  background: rgba(255, 255, 255, .35)
}

.wa-popup-body {
  background: #eafaf3;
  padding: 16px
}

.wa-bubble {
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  padding: 12px 14px;
  font-size: 14px;
  color: #123129;
  box-shadow: 0 4px 12px rgba(7, 29, 22, .08);
  margin-bottom: 14px;
  line-height: 1.55
}

.wa-popup-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px
}

.wa-popup-cta:hover {
  background: #1fbf5c
}

.wa-popup-cta svg {
  width: 16px;
  height: 16px;
  fill: #fff
}

@media(max-width:480px) {
  .wa-widget {
    right: 14px;
    bottom: 14px
  }

  .wa-popup {
    width: min(300px, calc(100vw - 28px))
  }
}

.card h3:first-child {
  margin-top: 8px
}

@media(max-width:900px) {

  .institutional-hero,
  .page-title {
    padding: 58px 0 46px
  }

  .institutional-hero h1,
  .light-page h1 {
    font-size: clamp(40px, 10vw, 64px)
  }

  .map-wrap,
  .map-wrap iframe {
    min-height: 360px;
    height: 360px
  }
}

/* REVISIÓN VISUAL FINAL — tipografía, contraste y consistencia institucional */
:root {
  --cesic-green: #0b3d2e;
  --cesic-green-2: #145b49;
  --cesic-aqua: #4bb6ae;
  --cesic-ink: #123129;
  --cesic-muted: #5b746d;
  --cesic-surface: #ffffff;
  --cesic-soft: #f3f8f6;
  --cesic-line: #dbe7e2;
}

html {
  scroll-behavior: smooth
}

body {
  font-size: 16px;
  line-height: 1.65;
  background: var(--cesic-soft);
  color: var(--cesic-ink)
}

main {
  overflow: hidden
}

.page-title {
  background: var(--cesic-surface);
  border-bottom: 1px solid var(--cesic-line);
  padding: 64px 0 50px
}

.page-title.wrap {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto
}

.page-title h1,
.light-page h1,
.institutional-hero h1 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.04em;
  max-width: 980px;
  margin: 16px 0 14px;
  color: var(--cesic-ink);
  text-wrap: balance;
}

.page-title p {
  max-width: 760px;
  color: var(--cesic-muted);
  font-size: clamp(17px, 1.6vw, 20px)
}

.institutional-hero {
  background: linear-gradient(115deg, #102c25, #245c4d);
  color: #fff
}

.institutional-hero h1 {
  color: #fff
}

.institutional-hero p {
  color: #d7e7e2
}

.section {
  padding: 68px 0
}

.section h2,
.section-head h2,
.slogan-section h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--cesic-ink);
  text-wrap: balance;
}

.section h3,
.card h3 {
  line-height: 1.2
}

.long-copy,
.section p,
.card p {
  font-size: 16px
}

.green-section .section h2,
.green-section h2 {
  color: #fff
}

/* Reglamento: tema claro accesible */
.accordion {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 54px 0 72px;
  background: transparent;
}

.accordion-item {
  background: #fff;
  border: 1px solid var(--cesic-line);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(14, 45, 28, .06);
}

.accordion-item button {
  padding: 22px 24px;
  color: var(--cesic-ink);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 750;
  align-items: center;
}

.accordion-item button:hover {
  background: #f4f9f7;
  color: #087c69
}

.accordion-item button span {
  color: #087c69;
  font-size: 28px;
  line-height: 1
}

.accordion-item div {
  padding: 0 24px 22px;
  color: var(--cesic-muted)
}

.accordion-item div p {
  margin: 0
}

.accordion>.btn.ghost {
  display: inline-flex;
  margin-top: 18px;
  color: #fff;
  background: var(--cesic-green-2);
  border-color: var(--cesic-green-2);
}

.accordion>.btn.ghost:hover {
  background: var(--cesic-green);
  border-color: var(--cesic-green)
}

/* Tablas y tarjetas en páginas claras */
.light-section {
  background: #fff;
  color: var(--cesic-ink)
}

.light-cards .card,
.documents-table,
.campus-card,
.institutional-card,
.value,
.directory-grid article {
  background: #fff;
  color: var(--cesic-ink);
}

.documents-head {
  align-items: end
}

.documents-table {
  box-shadow: 0 10px 28px rgba(14, 45, 28, .05)
}

.doc-row {
  background: #fff;
  color: var(--cesic-ink)
}

.doc-row a {
  padding: 7px 12px;
  border-radius: 999px;
  background: #e9f6f2;
  text-decoration: none
}

.campus-card b {
  font-size: 20px;
  color: var(--cesic-green)
}

/* Encabezado y pie consistentes */
.header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--cesic-line)
}

.nav a,
.nav-dropdown-toggle {
  color: #365b52
}

.nav a.active,
.nav a:hover,
.nav-dropdown-toggle:hover {
  color: #0b3d2e
}

.footer {
  background: #fff;
  color: #49665e
}

.footer strong {
  color: var(--cesic-ink)
}

.footer .brand-text {
  display: grid;
  gap: 2px
}

.footer .brand-text small {
  color: #6b817b
}

@media(max-width:900px) {

  .page-title,
  .page-title.wrap {
    padding-top: 48px;
    padding-bottom: 40px
  }

  .page-title h1,
  .light-page h1,
  .institutional-hero h1 {
    font-size: clamp(36px, 9vw, 56px)
  }

  .section {
    padding: 52px 0
  }

  .accordion {
    width: min(100% - 30px, 1180px);
    padding: 42px 0 58px
  }
}

@media(max-width:600px) {

  .page-title h1,
  .light-page h1,
  .institutional-hero h1 {
    font-size: clamp(34px, 11vw, 48px)
  }

  .section h2,
  .section-head h2,
  .slogan-section h2 {
    font-size: clamp(28px, 9vw, 42px)
  }

  .accordion-item button {
    padding: 18px;
    font-size: 17px
  }

  .accordion-item div {
    padding: 0 18px 18px
  }
}
/* AJUSTES V2-2 — indicaciones del cliente (agosto 2026) */
/* 1) El bloque verde principal ocupa todo el ancho de la ventana,
   conservando la alineación del contenido con el resto del sitio. */
body[data-page="Inicio"] .hero.wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: max(24px, calc((100vw - 1180px) / 2));
  padding-right: max(24px, calc((100vw - 1180px) / 2));
  border-radius: 0 0 36px 36px;
}

/* 2) Los textos introductorios quedan debajo de su título en Inicio. */
body[data-page="Inicio"] .section-head {
  display: block;
}

body[data-page="Inicio"] .section-head > p {
  max-width: 760px;
  margin: 10px 0 0;
}

/* 5) Corrección de textos claros sobre fondos claros en páginas institucionales. */
.section.wrap .lead,
.institutional-section .lead,
.light-section .lead,
.content-stack .lead {
  color: var(--cesic-ink, #123129);
}

.section.wrap .muted,
.institutional-section .muted,
.light-section .muted,
.content-stack .muted {
  color: var(--cesic-muted, #5b746d);
}

/* Footer solicitado: marca tipográfica sin logotipo. */
.footer .brand-text strong {
  font-size: 22px;
  letter-spacing: .02em;
}

.footer .brand-text small {
  font-size: 13px;
}

@media(max-width:600px) {
  body[data-page="Inicio"] .hero.wrap {
    padding-left: 15px;
    padding-right: 15px;
  }
}


/* CESIC Oferta Educativa - contenido oficial integrado */
.program-facts-dynamic{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.curriculum-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;}
.curriculum-card{background:#fff;border:1px solid rgba(10,67,55,.12);border-radius:18px;padding:22px;box-shadow:0 10px 28px rgba(17,54,46,.06);}
.curriculum-card-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(10,67,55,.10);}
.curriculum-card-head span{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#e9f4ef;color:#0c5a49;font-size:.78rem;font-weight:800;}
.curriculum-card h3{font-size:1rem;line-height:1.25;margin:0;color:#123d34;}
.curriculum-card ul{margin:0;padding-left:20px;display:grid;gap:8px;color:#465d57;}
.curriculum-card li{line-height:1.45;}
.plan-note{background:#fff;border:1px solid rgba(10,67,55,.12);border-left:4px solid #0c5a49;border-radius:16px;padding:24px;box-shadow:0 10px 28px rgba(17,54,46,.06);}
.plan-note h3{margin:0 0 8px;color:#123d34;}
.plan-note p{margin:0;color:#526762;}
@media(max-width:980px){.curriculum-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.curriculum-grid{grid-template-columns:1fr}.curriculum-card{padding:18px}.program-facts-dynamic{grid-template-columns:1fr 1fr;}}

/* ==========================================================
   CESIC | Oferta educativa — refinamiento del plan académico
   Alcance intencional: solo páginas dentro de /oferta.
   ========================================================== */
.program-curriculum .section {
  padding-top: 72px;
  padding-bottom: 88px;
}

.program-curriculum .section-head {
  display: block;
  margin-bottom: 34px;
}

.program-curriculum .section-head h2 {
  margin: 0 0 10px;
}

.program-curriculum .section-head > p {
  max-width: 720px;
  margin: 0;
  color: #6f918a;
  font-size: 1.02rem;
  line-height: 1.65;
}

.program-curriculum .curriculum-grid {
  align-items: stretch;
  gap: 20px;
}

.program-curriculum .curriculum-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(10,67,55,.13);
  border-radius: 20px;
  padding: 22px 22px 24px;
  background:
    linear-gradient(180deg, rgba(233,244,239,.34) 0, rgba(255,255,255,0) 82px),
    #fff;
  box-shadow: 0 12px 32px rgba(17,54,46,.07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.program-curriculum .curriculum-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0c5a49, #55bcb8);
  opacity: .9;
}

.program-curriculum .curriculum-card:hover {
  transform: translateY(-3px);
  border-color: rgba(12,90,73,.24);
  box-shadow: 0 18px 38px rgba(17,54,46,.11);
}

.program-curriculum .curriculum-card-head {
  min-height: 48px;
  gap: 12px;
  padding-bottom: 15px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(10,67,55,.11);
}

.program-curriculum .curriculum-card-head span {
  min-width: 36px;
  width: 36px;
  height: 36px;
  box-shadow: inset 0 0 0 1px rgba(12,90,73,.04);
}

.program-curriculum .curriculum-card h3 {
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.program-curriculum .curriculum-card ul {
  padding-left: 0;
  list-style: none;
  gap: 9px;
}

.program-curriculum .curriculum-card li {
  position: relative;
  padding-left: 20px;
  line-height: 1.48;
}

.program-curriculum .curriculum-card li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55bcb8;
  box-shadow: 0 0 0 3px rgba(85,188,184,.12);
}

.program-curriculum .plan-note {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f5faf8);
}

@media (max-width: 980px) {
  .program-curriculum .section-head > p {
    max-width: 680px;
  }
}

@media (max-width: 640px) {
  .program-curriculum .section {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .program-curriculum .section-head {
    margin-bottom: 26px;
  }

  .program-curriculum .section-head h2 {
    margin-bottom: 8px;
  }

  .program-curriculum .section-head > p {
    font-size: .96rem;
    line-height: 1.55;
  }

  .program-curriculum .curriculum-grid {
    gap: 16px;
  }

  .program-curriculum .curriculum-card {
    padding: 20px 18px 22px;
  }

  .program-curriculum .curriculum-card:hover {
    transform: none;
  }
}

/* ==========================================================
   CESIC V3 — Ajustes solicitados por cliente (agosto 2026)
   ========================================================== */

/* Cabeceras internas con fondo verde */
.page-title,
.page-title.light-page {
  background: linear-gradient(115deg, #0a3026 0%, #124a3a 58%, #0b3428 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
.page-title h1,
.page-title.light-page h1,
.page-title p,
.page-title.light-page p { color: #fff !important; }
.page-title p,.page-title.light-page p { opacity:.84; }
.page-title .eyebrow,.page-title.light-page .eyebrow { color:#73d8cb !important; }
.page-title.wrap {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:max(24px, calc((100% - 1180px)/2)) !important;
  padding-right:max(24px, calc((100% - 1180px)/2)) !important;
}

/* El nombre del Director gana contraste dentro de su tarjeta */
.directory-grid .director-principal {
  background: linear-gradient(135deg,#082a22,#103f33) !important;
  border-color: rgba(75,182,174,.35) !important;
  color:#fff !important;
}
.directory-grid .director-principal h3 { color:#83e0d4 !important; }
.directory-grid .director-principal p { color:#e5f4f0 !important; }

/* Campus: espacio reservado para video y fotos futuras */
.campus-video-shell { margin-bottom:20px; }
.campus-video-placeholder {
  min-height:320px;
  border-radius:28px;
  border:1px dashed #71aa9e;
  background:linear-gradient(130deg,#0a3026,#185343);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:36px;
  text-align:left;
}
.campus-video-placeholder h2 { color:#fff !important; margin:4px 0 8px; }
.campus-video-placeholder p { color:#d6ebe6; margin:0; }
.campus-video-icon { width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#4bb6ae;color:#062019;font-size:24px;flex:0 0 72px;box-shadow:0 15px 40px rgba(0,0,0,.22); }
.campus-grid-v3 { grid-template-columns:1.25fr 1fr 1fr; }
.campus-grid-v3 .campus-card.big { grid-row:auto;min-height:290px; }
.campus-space-card { min-height:290px; }
.campus-photo-placeholder { height:145px;border-radius:16px;margin:-8px -8px 18px;background:linear-gradient(135deg,#dbeae6,#eef5f3);display:grid;place-items:center;border:1px dashed #9bbab2;color:#55746b;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em; }
.campus-space-card b { display:block;font-size:20px;margin-bottom:5px; }

/* Derecho: banner de fondo como ejemplo entregado */
.program-hero-banner { position:relative; isolation:isolate; overflow:hidden; }
.program-hero-banner:before { content:'';position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat; }
.program-hero-banner:after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,17,13,.94) 0%,rgba(4,24,18,.78) 50%,rgba(4,24,18,.22) 100%); }
.program-hero-banner.derecho-banner:before { background-image:url('img/banner-derecho.png'); }
.program-hero-banner .program-hero-grid { grid-template-columns:minmax(0,760px);min-height:650px;align-items:center; }
.program-hero-banner .program-hero-grid>div:first-child { max-width:760px; }
.program-hero-banner .program-facts>div { backdrop-filter:blur(8px);background:rgba(23,72,59,.82); }

/* Pie de página + redes */
.footer-bottom { display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; }
.footer-social { display:flex;gap:9px;flex-wrap:wrap; }
.footer-social a { color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,.17);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:700;transition:.2s ease; }
.footer-social a:hover { border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px); }

/* Contención estricta de microanimaciones dentro de su elemento */
.btn,.nav .cta,.card,.curriculum-card,.institutional-card,.campus-card,.doc-row { overflow:hidden !important; isolation:isolate; }
.btn::before,.nav .cta::before,.card::before,.curriculum-card::before,.institutional-card::before,.campus-card::before,.doc-row::before { border-radius:inherit; }

@media(max-width:900px){
  .campus-grid-v3{grid-template-columns:1fr 1fr}.campus-grid-v3 .campus-card.big{grid-column:1/-1}.campus-video-placeholder{min-height:260px}
  .program-hero-banner .program-hero-grid{min-height:560px}
}
@media(max-width:640px){
  .campus-grid-v3{grid-template-columns:1fr}.campus-grid-v3 .campus-card.big{grid-column:auto}.campus-video-placeholder{flex-direction:column;text-align:center;padding:28px 20px}.footer-bottom{align-items:flex-start;flex-direction:column}
  .program-hero-banner:after{background:rgba(3,20,15,.82)}
}


/* ==========================================================
   CESIC V3.1 — Correcciones finales posteriores a revisión visual
   ========================================================== */

/* Inicio: hero tipo banner completo, similar al ejemplo solicitado */
body[data-page="Inicio"] .hero.hero-home {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 720px;
  padding-top: 92px;
  padding-bottom: 92px;
  overflow: hidden;
  background: #071b16;
  isolation: isolate;
}

body[data-page="Inicio"] .hero.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 18, 15, .92) 0%, rgba(4, 18, 15, .82) 38%, rgba(4, 18, 15, .52) 66%, rgba(4, 18, 15, .32) 100%),
    linear-gradient(180deg, rgba(3, 16, 13, .18) 0%, rgba(3, 16, 13, .44) 100%);
  pointer-events: none;
}

body[data-page="Inicio"] .hero.hero-home .scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: none;
}

body[data-page="Inicio"] .hero.hero-home .scene::before,
body[data-page="Inicio"] .hero.hero-home .scene::after,
body[data-page="Inicio"] .hero.hero-home .glass {
  display: none !important;
  content: none !important;
}

body[data-page="Inicio"] .hero.hero-home .carousel-slide,
body[data-page="Inicio"] .hero.hero-home .slide-track,
body[data-page="Inicio"] .hero.hero-home .slide-track figure,
body[data-page="Inicio"] .hero.hero-home .slide-track img {
  height: 100%;
}

body[data-page="Inicio"] .hero.hero-home .slide-track img {
  object-fit: cover;
  object-position: center;
}

body[data-page="Inicio"] .hero.hero-home .carousel-slide::before {
  background: rgba(6, 22, 18, .16);
}

body[data-page="Inicio"] .hero.hero-home .carousel-slide::after {
  background: linear-gradient(180deg, rgba(4, 18, 15, .06) 0%, rgba(4, 18, 15, .35) 100%);
}

body[data-page="Inicio"] .hero-home-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding-left: 8px;
}

body[data-page="Inicio"] .hero-home-content .eyebrow,
body[data-page="Inicio"] .hero-home-content h1,
body[data-page="Inicio"] .hero-home-content p {
  color: #fff;
}

body[data-page="Inicio"] .hero-home-content p {
  max-width: 620px;
  color: rgba(255,255,255,.86);
}

body[data-page="Inicio"] .hero-home-content .btn.ghost {
  background: rgba(6, 22, 18, .48);
  border-color: rgba(255,255,255,.34);
}

body[data-page="Inicio"] .hero.hero-home .slide-arrow,
body[data-page="Inicio"] .hero.hero-home .slide-dots {
  z-index: 3;
}

/* El cliente pidió que las cabeceras marcadas en rojo fueran verdes */
.page-title,
.page-title.light-page,
.cms-detail-hero {
  background: linear-gradient(115deg, #0a3026 0%, #124a3a 58%, #0b3428 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}

.page-title h1,
.page-title.light-page h1,
.page-title p,
.page-title.light-page p,
.cms-detail-hero h1,
.cms-detail-hero p,
.cms-detail-hero .cms-detail-meta,
.cms-detail-hero .eyebrow {
  color: #fff !important;
}

.page-title p,
.page-title.light-page p,
.cms-detail-hero p,
.cms-detail-hero .cms-detail-meta {
  opacity: .9;
}

.page-title .eyebrow,
.page-title.light-page .eyebrow,
.cms-detail-hero .eyebrow {
  color: #79dfd2 !important;
}

/* Refuerzo de contraste en el directorio / tarjeta del director */
.director-badge {
  background: rgba(4, 20, 16, .94) !important;
  border-left: 5px solid #4bb6ae !important;
}

.director-badge strong {
  color: #7ce0d3 !important;
}

.director-badge span {
  color: #eef9f6 !important;
}

/* Redes sociales más visibles */
.footer-social {
  gap: 12px;
}

.footer-social a {
  color: #0c5444 !important;
  background: #e8f6f2;
  border: 1px solid #b8d8cf;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(8, 56, 45, .08);
}

.footer-social a:hover {
  background: #0b4b3d;
  border-color: #0b4b3d;
  color: #fff !important;
}

/* Se elimina el brillo diagonal que estaba generando “brochazos” */
.btn::before,
.nav .cta::before,
.card::before,
.curriculum-card::before,
.institutional-card::before,
.campus-card::before,
.doc-row::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Evita artefactos en hover en tarjetas/botones */
.btn,
.nav .cta,
.card,
.curriculum-card,
.institutional-card,
.campus-card,
.doc-row {
  overflow: hidden !important;
  isolation: isolate;
}

@media(max-width: 900px) {
  body[data-page="Inicio"] .hero.hero-home {
    min-height: 640px;
  }

  body[data-page="Inicio"] .hero.hero-home::before {
    background:
      linear-gradient(180deg, rgba(4,18,15,.82) 0%, rgba(4,18,15,.58) 58%, rgba(4,18,15,.72) 100%);
  }

  body[data-page="Inicio"] .hero-home-content {
    max-width: 100%;
  }
}

@media(max-width: 640px) {
  body[data-page="Inicio"] .hero.hero-home {
    min-height: 560px;
    padding-top: 82px;
    padding-bottom: 72px;
  }

  .footer-social a {
    width: auto;
  }
}

/* Banners proporcionados por CESIC y fotografías de las instalaciones. */
.program-hero-banner.supplied-program-banner:before { background-image:var(--program-banner); }
.program-hero-banner.supplied-program-banner:after { background:linear-gradient(90deg,rgba(3,17,13,.60),rgba(3,17,13,.15)); }
.campus-photo-gallery { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:-8px -8px 18px; }
.campus-photo-gallery a:first-child { grid-column:1/-1; }
.campus-photo-gallery img { display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px; }
.campus-photo-gallery a:focus-visible { outline:3px solid #147c60;outline-offset:3px; }
@media(max-width:700px) { .program-hero-banner.supplied-program-banner:after { background:rgba(3,17,13,.55); } }

.partners-ticker a { color:inherit; }
.partners-ticker:hover .ticker-track, .partners-ticker:focus-within .ticker-track { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { .partners-ticker { overflow-x:auto; } .ticker-track { animation:none; } }