@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Jost:wght@300;400;500&family=Kaushan+Script&family=Caveat:wght@400;500&display=swap');

/* ============================================================
   FOMCI — SKIN "REFERENCIA" (crema + sage + serif + script)
   Capa aditiva sobre fomci-hero.css. Marcador: FOMCI-SKIN-START
   Paleta base: cream #F5F0E8 · sage #7B8B69 · tx #3E3229
   ============================================================ */

:root {
  --fomci-cream:   #F4EFE7;
  --fomci-cream-2: #F2ECE3;
  --fomci-cream-3: #F3EDE2;
  --fomci-white:   #FFFFFF;
  --fomci-sage:    #7A8B6F;
  --fomci-sage-d:  #66765A;
  --fomci-tx:      #2E2A26;
  --fomci-tx-2:    #5A5248;
  --fomci-muted:   #9A9086;
  --fomci-border:  #E8E0D4;
  --fomci-script:  #6B635A;
  --fomci-icon:    #3A3A34;
  --fomci-div:     #E3DBCE;

  --fomci-serif: 'Playfair Display', 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --fomci-sans:  'Jost', 'Nunito', -apple-system, 'Segoe UI', sans-serif;
  --fomci-scriptfont: 'Kaushan Script', 'Caveat', 'Brush Script MT', cursive;

  --fomci-green:  #7A8B6F;
  --fomci-magenta:#4A5A4E;
  --fomci-purple: #4A5A4E;
  --fomci-navy:   #2E2A26;
}

/* ---------- fondo general ---------- */
body,
#page,
.wrapper,
.ccn-footer,
.footer_one {
  background-color: var(--fomci-cream) !important;
}

/* ---------- tipografía global ---------- */
body,
.ccn-header .nav_menu .list-menu li a,
.ccn-footer,
.footer_one,
button,
input,
select {
  font-family: var(--fomci-sans) !important;
}

h1, h2, h3, h4, h5, h6,
.ccn-footer h3, .footer_one h3,
.fomci-hero-title, .fomci-prog-heading, .fomci-prog-heading h2,
.prog-card h3, .fomci-course-card__title,
.fomci-features h3, .fomci-tagline h2 {
  font-family: var(--fomci-serif) !important;
  color: var(--fomci-tx) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}

/* ============================================================
   HERO
   ============================================================ */
.fomci-hero {
  background: var(--fomci-cream) !important;
  padding: 54px 0 64px !important;
  min-height: 0 !important;
}

/* foto de fondo solo a la derecha */
.fomci-hero-bg {
  background-size: cover !important;
  background-position: center right !important;
  opacity: 1 !important;
}

/* overlay gradiente crema izq -> transparente der */
.fomci-hero-ov {
  background: linear-gradient(90deg,
              rgba(245,240,232,1) 0%,
              rgba(245,240,232,0.98) 38%,
              rgba(245,240,232,0.72) 55%,
              rgba(245,240,232,0.10) 72%,
              rgba(245,240,232,0) 100%) !important;
  opacity: 1 !important;
}

.fomci-hero-glow { display: none !important; }

.fomci-hero-inner {
  position: relative;
  z-index: 3;
}

.fomci-hero-title {
  font-family: var(--fomci-serif) !important;
  font-size: clamp(38px, 5.2vw, 62px) !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  color: var(--fomci-tx) !important;
  max-width: 640px;
}

/* la parte "a tu espacio de formación" va en script */
.fomci-hero-title em,
.fomci-hero-title em * {
  font-family: var(--fomci-scriptfont) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.06em !important;
  line-height: 1 !important;
  color: var(--fomci-script) !important;
  display: inline-block;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* cita script + colibrí a la derecha */
.fomci-hero-quote { opacity: 1 !important; transform: none !important; }
.fomci-hero-quote p {
  font-family: var(--fomci-scriptfont) !important;
  font-size: 26px !important;
  line-height: 1.3 !important;
  color: var(--fomci-script) !important;
  text-align: right !important;
  margin: 0 0 6px !important;
}

.fomci-hero-quote .fomci-colibri,
.fomci-hero-quote svg {
  width: 118px !important;
  height: auto !important;
  opacity: .85 !important;
}

/* subtítulo si existe */
.fomci-hero-sub {
  font-family: var(--fomci-sans) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--fomci-tx-2) !important;
  max-width: 520px;
  margin-top: 14px !important;
}

/* botón primario sage */
.fomci-hero-cta,
.fomci-hero-actions a,
.btn-primary,
.ccn-footer .btn {
  font-family: var(--fomci-sans) !important;
  background: var(--fomci-sage) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 28px !important;
  box-shadow: none !important;
  transition: background .2s ease !important;
}
.fomci-hero-cta:hover,
.fomci-hero-actions a:hover { background: var(--fomci-sage-d) !important; }

/* ============================================================
   PROGRAMAS
   ============================================================ */
.fomci-programas,
.fomci-programas-placeholder {
  background: var(--fomci-cream) !important;
  padding: 56px 0 64px !important;
}

.fomci-prog-head { margin-bottom: 30px !important; }

.fomci-prog-eyebrow {
  font-family: var(--fomci-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--fomci-sage) !important;
}

.fomci-prog-heading h2,
.fomci-prog-heading {
  font-size: clamp(26px, 2.6vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  color: var(--fomci-tx) !important;
}

/* buscador + filtro */
.prog-search,
.prog-select {
  background: var(--fomci-white) !important;
  border: 1px solid var(--fomci-border) !important;
  border-radius: 8px !important;
  color: var(--fomci-tx-2) !important;
  font-family: var(--fomci-sans) !important;
  font-size: 14px !important;
  height: 42px !important;
}
.prog-search:focus,
.prog-select:focus {
  border-color: var(--fomci-sage) !important;
  box-shadow: 0 0 0 3px rgba(123,139,105,.15) !important;
  outline: none !important;
}

/* grid 5 columnas */
.fomci-prog-grid,
.prog-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1199px) { .fomci-prog-grid, .prog-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 767px)  { .fomci-prog-grid, .prog-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 480px)  { .fomci-prog-grid, .prog-grid { grid-template-template-columns: 1fr !important; } }

/* card */
.prog-card {
  background: var(--fomci-white) !important;
  border: 1px solid var(--fomci-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(62,50,41,.05) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.prog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(62,50,41,.10) !important;
}

.prog-card-media { height: 150px !important; border-radius: 0 !important; }
.prog-card-media img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}

.prog-card-body {
  padding: 14px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.prog-card h3 {
  font-family: var(--fomci-serif) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--fomci-tx) !important;
  margin: 0 !important;
  padding-right: 18px !important;
}

.prog-meta {
  font-family: var(--fomci-sans) !important;
  font-size: 12px !important;
  color: var(--fomci-muted) !important;
  line-height: 1.4 !important;
}

/* flecha */
.prog-card-body::after {
  content: '\2192';
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-size: 15px;
  color: var(--fomci-sage) !important;
  line-height: 1;
}

/* badge sobrepuesto en la unión imagen/cuerpo */
.prog-badge,
.fomci-prog-badge {
  position: absolute !important;
  top: -18px !important;
  left: 14px !important;
  background: var(--fomci-sage) !important;
  color: #fff !important;
  font-family: var(--fomci-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(62,50,41,.12) !important;
  z-index: 2 !important;
  margin: 0 !important;
}
.prog-card { position: relative !important; }
.prog-card .prog-card-body { padding-top: 22px !important; }

/* colores de badge por area */
.prog-card[data-area="infantil"] .prog-badge { background:#E8D5D3 !important; color:#5A3B38 !important; }
.prog-card[data-area="escolar"]  .prog-badge { background:#D9CFC3 !important; color:#4A3C2C !important; }
.prog-card[data-area="neuro"]    .prog-badge { background:#8B9C7D !important; color:#fff !important; }
.prog-card[data-area="talleres"] .prog-badge { background:#3E5C50 !important; color:#fff !important; }
.prog-card[data-area="idiomas"]  .prog-badge { background:#4A6E96 !important; color:#fff !important; }

.prog-foot { margin-top: 26px !important; text-align: center !important; }
.prog-foot a,
.fomci-prog-all {
  font-family: var(--fomci-sans) !important;
  color: var(--fomci-sage) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ============================================================
   9 ÁREAS
   ============================================================ */
.fomci-catnav {
  background: var(--fomci-white) !important;
  padding: 46px 0 !important;
  border-top: 1px solid var(--fomci-border) !important;
  border-bottom: 1px solid var(--fomci-border) !important;
}

.catnav-row {
  display: grid !important;
  grid-template-columns: repeat(9, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 1199px) { .catnav-row { grid-template-columns: repeat(5,1fr) !important; } }
@media (max-width: 767px)  { .catnav-row { grid-template-columns: repeat(3,1fr) !important; } }

.catnav-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
}

.catnav-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: var(--fomci-cream-3) !important;
  border: 0 !important;
  margin: 0 auto 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.catnav-icon i,
.catnav-icon .fa-solid,
.catnav-icon svg { color: var(--fomci-icon) !important; font-size: 26px !important; }

.catnav-label {
  font-family: var(--fomci-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--fomci-tx-2) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* ============================================================
   TAGLINE / FEATURES
   ============================================================ */
.fomci-tagline {
  background: var(--fomci-white) !important;
  padding: 40px 0 !important;
}

.fomci-features {
  background: var(--fomci-white) !important;
  padding: 10px 0 70px !important;
}

.fomci-features .feat-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}
@media (max-width: 767px) { .fomci-features .feat-grid { grid-template-columns: 1fr !important; } }

.fomci-features .feat-card {
  background: var(--fomci-cream-2) !important;
  border: 1px solid var(--fomci-border) !important;
  border-radius: 12px !important;
  padding: 26px !important;
  text-align: left !important;
  box-shadow: 0 2px 10px rgba(62,50,41,.05) !important;
  overflow: hidden !important;
}

.fomci-features .feat-media {
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}
.fomci-features .feat-media img {
  width: 100% !important;
  height: 190px !important;
  object-fit: cover !important;
  display: block !important;
}

.fomci-features .feat-body h3,
.fomci-features .feat-body h2 {
  font-family: var(--fomci-serif) !important;
  font-size: 21px !important;
  color: var(--fomci-tx) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
}
.fomci-features .feat-body p {
  font-family: var(--fomci-sans) !important;
  font-size: 14px !important;
  color: var(--fomci-tx-2) !important;
  line-height: 1.6 !important;
  margin: 0 0 16px !important;
}

.fomci-features .feat-btn,
.fomci-features a.feat-btn {
  font-family: var(--fomci-sans) !important;
  background: var(--fomci-sage) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 11px 24px !important;
  display: inline-block !important;
  transition: background .2s ease !important;
}
.fomci-features .feat-btn:hover { background: var(--fomci-sage-d) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.ccn-footer,
.footer_one,
.fomci-wp-footer {
  background: var(--fomci-cream) !important;
  color: var(--fomci-tx-2) !important;
}
.footer_one h3,
.ccn-footer h3,
.footer_one h4 {
  font-family: var(--fomci-serif) !important;
  color: var(--fomci-tx) !important;
  font-weight: 600 !important;
}
.footer_one p,
.footer_one li,
.ccn-footer p,
.ccn-footer li,
.footer_one a,
.ccn-footer a {
  font-family: var(--fomci-sans) !important;
  color: var(--fomci-tx-2) !important;
  font-size: 14px !important;
}
.footer_one a:hover,
.ccn-footer a:hover { color: var(--fomci-sage) !important; }

.footer_one hr,
.ccn-footer hr { border-color: var(--fomci-div) !important; }

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .prog-card,
  .fomci-hero-cta,
  .fomci-hero-actions a { transition: none !important; }
  .prog-card:hover { transform: none !important; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* ============================================================
   FOMCI-CHROME: header nav 5 items + footer 3 bloques
   ============================================================ */

/* --- header una sola fila --- */
.ccnHeader4,
.ccn-header {
  background: var(--fomci-white) !important;
  min-height: 0 !important;
  padding: 10px 0 !important;
}
.ccnHeader4 .container,
.ccn-header .container { max-width: 1200px !important; }

.fomci-nav5 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 34px !important;
  padding: 0 0 6px !important;
}

.fomci-nav5-it {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  position: relative;
  padding-bottom: 8px;
}

.fomci-nav5-ic {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.fomci-nav5-ic i { font-size: 17px !important; color: var(--fomci-icon) !important; }

.fomci-nav5-lb {
  font-family: var(--fomci-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--fomci-tx-2) !important;
  white-space: nowrap;
}

/* item activo */
.fomci-nav5-it.is-active .fomci-nav5-ic {
  border-color: #6B7A5E !important;
  background: rgba(107,122,94,.06) !important;
}
.fomci-nav5-it.is-active .fomci-nav5-ic i { color: #4A5A3C !important; }
.fomci-nav5-it.is-active .fomci-nav5-lb { color: #4A5A3C !important; font-weight: 500 !important; }
.fomci-nav5-it.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 2px;
  background: #6B7A5E;
  border-radius: 2px;
}

.fomci-nav5-it.is-pending { cursor: default; opacity: .62; }

@media (max-width: 991px) {
  .fomci-nav5 { gap: 16px !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
  .fomci-nav5-lb { font-size: 11px !important; }
  .fomci-nav5-ic { width: 34px !important; height: 34px !important; }
  .fomci-nav5-ic i { font-size: 15px !important; }
}

/* --- FOOTER 3 bloques --- */
.footer_one {
  background: var(--fomci-cream) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer_one .vs-footer,
.footer_one .vs-footer__top { display: none !important; }

.fomci-foot3 {
  background: #F4EFE9 !important;
  border-top: 1px solid var(--fomci-div) !important;
  padding: 26px 0 !important;
}
.fomci-foot3-in {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
}

.fomci-foot3-bk {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 78px !important;
  padding: 0 10px !important;
}
.fomci-foot3-bk-mid {
  border-left: 1px solid var(--fomci-div) !important;
  border-right: 1px solid var(--fomci-div) !important;
  flex-direction: column !important;
  gap: 8px !important;
  text-align: center !important;
}

.fomci-foot3-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
}
.fomci-foot3-logo { max-height: 46px !important; width: auto !important; display: block !important; }
.fomci-foot3-word {
  font-family: var(--fomci-serif) !important;
  font-size: 26px !important;
  letter-spacing: .12em !important;
  color: #3F4A38 !important;
  font-weight: 600 !important;
}
.fomci-foot3-sub {
  font-family: var(--fomci-sans) !important;
  font-size: 8px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--fomci-muted) !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

.fomci-foot3-quote {
  font-family: var(--fomci-serif) !important;
  font-style: italic !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  color: var(--fomci-tx) !important;
  margin: 0 !important;
  max-width: 420px !important;
}
.fomci-foot3-attr {
  font-family: var(--fomci-sans) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--fomci-muted) !important;
}

.fomci-foot3-bk-end { flex-direction: column !important; gap: 6px !important; }
.fomci-colibri-sage { width: 54px !important; height: auto !important; display: block !important; }
.fomci-foot3-motto {
  font-family: var(--fomci-sans) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--fomci-tx-2) !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  .fomci-foot3-in { flex-direction: column !important; gap: 20px !important; }
  .fomci-foot3-bk { min-height: 0 !important; }
  .fomci-foot3-bk-mid { border-left: 0 !important; border-right: 0 !important;
    border-top: 1px solid var(--fomci-div) !important;
    border-bottom: 1px solid var(--fomci-div) !important;
    padding: 18px 10px !important; width: 100% !important; }
}

/* --- header: nav en la misma fila (fix alto 233px -> ~80px) --- */
.ccnHeader4,
.ccn-header {
  position: relative !important;
  padding: 10px 0 !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
}
.ccnHeader4 > .container,
.ccn-header > .container { width: 100% !important; }

.fomci-nav5 {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  padding: 0 !important;
  gap: 30px !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .ccnHeader4, .ccn-header { position: static !important; padding: 12px 0 !important; }
  .fomci-nav5 {
    position: static !important;
    transform: none !important;
    margin-top: 12px !important;
    justify-content: center !important;
  }
}

/* --- topbar CON login (restaurada a pedido) --- */
.ccnHeader4, .ccn-header { flex-wrap: wrap !important; min-height: 76px !important; padding: 8px 0 !important; border-bottom: 2px solid rgba(74,86,60,.45) !important; }
.ccnHeader4 .fomci-wp-topbar,
.ccn-header .fomci-wp-topbar,
.fomci-wp-topbar {
  display: block !important;
  order: -1 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  margin-bottom: 14px !important;
}
.ccnHeader4 > .container, .ccn-header > .container { width: 100% !important; }
.ccnHeader4 > .container, .ccn-header > .container { min-height: 60px !important; display: flex !important; align-items: center !important; }
.ccnHeader4 > .container, .ccn-header > .container { position: relative !important; }
.ccn_nav_group { position: relative !important; }
.navbar_brand { margin-top: 0 !important; align-self: center !important; }
.fomci-brand { margin-top: 0 !important; }
.fomci-nav5 { top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; }
.fomci-nav5-av { top: 50% !important; right: 0 !important; transform: translateY(-50%) !important; }

/* --- mobile: nav en fila scrolleable (header 278px -> compacto) --- */
@media (max-width: 991px) {
  .fomci-nav5 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 6px 0 2px !important;
    margin-top: 8px !important;
  }
  .fomci-nav5::-webkit-scrollbar { display: none; }
  .fomci-nav5-it { flex: 0 0 auto !important; }
  .ccnHeader4, .ccn-header { padding: 8px 0 6px !important; }
}

/* --- quitar link "Ver todos los cursos" (no está en la referencia) --- */
.prog-foot,
.fomci-prog-all { display: none !important; }

/* --- wordmark del footer (sin logo rosa) --- */
.fomci-foot3-word {
  font-family: var(--fomci-serif) !important;
  font-size: 34px !important;
  letter-spacing: .14em !important;
  color: #3F4A38 !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.fomci-foot3-sub { font-size: 8px !important; letter-spacing: .16em !important; color: var(--fomci-muted) !important; }
.fomci-foot3-logo { display: none !important; }

/* ============================================================
   FOMCI-SKIN-V3 — correcciones contra la referencia (20261004-185429)
   ============================================================ */

/* fondo de secciones uniforme #EFE9E0 */
.fomci-programas,
.fomci-catnav,
.fomci-features,
.fomci-tagline,
.prog-empty { background: #EFE9E0 !important; }
.fomci-catnav { border-top: 0 !important; border-bottom: 0 !important; }

/* ---- HERO: H1 56, script 40, parrafo 17, boton sage r8 h42 ---- */
.fomci-hero { padding: 44px 0 52px !important; }
.fomci-hero-title { font-size: 56px !important; line-height: 1.05 !important; max-width: 520px !important; }
.fomci-hero-title em,
.fomci-hero-title em * { font-size: 40px !important; color: #6B635A !important; }
.fomci-hero-sub {
  font-size: 17px !important; line-height: 1.55 !important;
  color: #5A5248 !important; max-width: 300px !important; margin-top: 16px !important;
}
body .fomci-hero .fomci-hero-cta,
body .fomci-hero-cta {
  background: #7A8B6F !important; background-color: #7A8B6F !important;
  border-radius: 8px !important;
  height: 42px !important; min-height: 42px !important;
  padding: 0 22px !important; line-height: 1 !important;
  font-size: 14px !important; font-weight: 500 !important;
  display: inline-flex !important; align-items: center !important; gap: 12px !important;
  margin-top: 18px !important;
}
body .fomci-hero .fomci-hero-cta:hover,
body .fomci-hero-cta:hover { background: #6F8467 !important; background-color: #6F8467 !important; }
.fomci-hero-ov {
  background: linear-gradient(90deg, rgba(244,239,231,.96) 0%, rgba(244,239,231,.80) 42%,
              rgba(244,239,231,.45) 62%, rgba(244,239,231,.10) 80%, rgba(244,239,231,0) 100%) !important;
}
.fomci-hero-quote p {
  font-family: 'Caveat', cursive !important; font-size: 22px !important; line-height: 1.35 !important;
  color: #6B635A !important;
}
.fomci-hero-quote .fomci-colibri { width: 74px !important; }

/* ---- BADGES circulares 62px invaden la foto ---- */
.prog-card { border-radius: 12px !important; box-shadow: 0 1px 2px rgba(0,0,0,.03) !important; }
.prog-card-media { height: 165px !important; }
.prog-badge,
.fomci-prog-badge {
  position: absolute !important;
  z-index: 3 !important;
  top: -31px !important;
  bottom: auto !important;
  left: 12px !important;
  width: 62px !important; height: 62px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-align: center !important;
  font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important;
  padding: 4px !important; color: #fff !important;
  box-shadow: none !important; border: 3px solid #fff !important;
}
.prog-card { position: relative !important; }
.prog-card .prog-card-body { position: relative !important; padding: 20px 14px 16px !important; }
.prog-card h3 { font-size: 17px !important; font-weight: 400 !important; padding-right: 0 !important; }
.prog-meta { font-size: 12px !important; color: #9A9086 !important; padding-right: 22px !important; }
.prog-card-body::after { right: 14px !important; bottom: 16px !important; color: #6B635A !important; font-size: 18px !important; }

/* colores de badge por card (referencia) */
.prog-card[data-area="infantil"] .prog-badge { background:#E0B096 !important; color:#4A3226 !important; }
.prog-card[data-area="escolar"]  .prog-badge { background:#C4A3A3 !important; color:#3F2A2A !important; }
.prog-card[data-area="neuro"]    .prog-badge { background:#8FA87F !important; color:#fff !important; }
.prog-card[data-area="talleres"] .prog-badge { background:#6D8B8A !important; color:#fff !important; }
.prog-card[data-area="idiomas"]  .prog-badge { background:#4E6E97 !important; color:#fff !important; }

/* ---- CATEGORIAS: circulo 80px, label 11px ---- */
.catnav-row { gap: 28px !important; justify-content: center !important; }
.catnav-icon {
  width: 80px !important; height: 80px !important;
  background: #F3EDE2 !important; border-radius: 50% !important;
}
body .catnav-icon i,
body .catnav-icon svg,
body .catnav-icon { color: #3A3A34 !important; fill: #3A3A34 !important; }
body .catnav-icon i, body .catnav-icon svg { font-size: 28px !important; }
.catnav-label { font-size: 11px !important; color: #5A5248 !important; margin-top: 10px !important; }

/* ---- BLOQUES INFERIORES ---- */
.fomci-features .feat-grid { grid-template-columns: 1.25fr 1fr !important; gap: 16px !important; }
.fomci-features .feat-card {
  background: #F2ECE3 !important; border-radius: 12px !important; padding: 22px !important;
  box-shadow: none !important; border: 0 !important;
}
.fomci-features .feat-media { display: none !important; }
.fomci-features .feat-body h3,
.fomci-features .feat-body h2 { font-size: 21px !important; font-weight: 400 !important; }
.fomci-features .feat-body p { font-size: 13px !important; color: #5A5248 !important; }
.fomci-features .feat-btn {
  background: #6F8467 !important; border-radius: 8px !important; height: 36px !important;
  font-size: 13px !important; padding: 0 18px !important;
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
}
.fomci-features .feat-col { display: grid !important; gap: 16px !important; align-content: stretch !important; }
.fomci-features .feat-card--icon {
  display: grid !important; grid-template-columns: 56px 1fr !important; gap: 16px !important;
  align-items: start !important; padding: 24px !important; background: #FFFFFF !important;
  border: 1px solid #E8E0D4 !important;
}
.fomci-features .feat-ic {
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  background: #EDE5D7 !important; color: #3A3A34 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 22px !important;
}
.fomci-features .feat-card--icon .feat-body { padding: 0 !important; }
.fomci-features .feat-card--icon .feat-body::before { display: none !important; }
.fomci-features .feat-card--icon .feat-body h3 { font-size: 21px !important; }
/* card blanca grande de la izquierda */
.fomci-features .feat-card.is-lead {
  background: #FFFFFF !important; border: 1px solid #E8E0D4 !important;
  display: grid !important; grid-template-columns: 55% 1fr !important; gap: 0 !important;
  padding: 0 !important; align-items: stretch !important;
}
.fomci-features .feat-card.is-lead .feat-media {
  display: block !important; margin: 0 !important; border-radius: 12px 0 0 12px !important;
}
.fomci-features .feat-card.is-lead .feat-media img { height: 100% !important; min-height: 300px !important; }
.fomci-features .feat-card.is-lead .feat-body { padding: 28px !important; align-self: center !important; }
.fomci-features .feat-card.is-lead .feat-body h3 { font-size: 28px !important; line-height: 1.45 !important; }
.fomci-features .feat-card.is-lead .feat-body p { font-size: 14px !important; font-style: italic !important; color: #6B635A !important; }
.fomci-features .feat-card.is-lead .feat-body::before {
  content: ''; display: block; width: 40px; height: 1px; background: #D8CFC0; margin: 16px 0;
}

/* whatsapp flotante: no existe en la referencia */
.fomci-whatsapp, a.fomci-whatsapp { display: none !important; }

/* ---- FOOTER-LITE ---- */
.fomci-foot3 { background: #F3EEE5 !important; padding: 22px 0 !important; }
.fomci-foot3-quote { font-size: 15px !important; }
.fomci-foot3-attr { font-size: 10px !important; letter-spacing: .3em !important; }
.fomci-foot3-motto { font-size: 9px !important; letter-spacing: .18em !important; }
.fomci-foot3-word { font-size: 30px !important; letter-spacing: .16em !important; color: #4A5A4E !important; }
.fomci-foot3-sub { font-size: 8px !important; letter-spacing: .12em !important; }
.fomci-colibri-sage { width: 46px !important; }

/* ---- HEADER: crema, nav inline, avatar AD ---- */
@media (min-width: 1024px) {
  header .ace-responsive-menu, header .mainmenu, header .nav-menu { display: none !important; }
}
body.ccn_context_frontend header.ccnHeader4.header-nav,
body.ccn_context_frontend header.header-nav.ccnHeader4,
body.ccn_context_frontend .ccn-header {
  background: #F4EFE7 !important; background-color: #F4EFE7 !important;
  padding: 0 !important; min-height: 88px !important;
  box-shadow: none !important;
}
body.ccn_context_frontend header.ccnHeader4.header-nav.stricky,
body.ccn_context_frontend header.ccnHeader4.header-nav.stricky.stricky-fixed {
  background: #F4EFE7 !important; background-color: #F4EFE7 !important;
}
.fomci-nav5-it { flex-direction: row !important; gap: 8px !important; padding-bottom: 0 !important; }
.fomci-nav5-ic {
  width: auto !important; height: auto !important; border-radius: 0 !important;
  background: transparent !important; margin: 0 !important;
}
.fomci-nav5-ic i { font-size: 20px !important; }
.fomci-nav5-lb { font-size: 14px !important; font-weight: 500 !important; color: #5A5248 !important; }
.fomci-nav5-it.is-active .fomci-nav5-lb { color: #4A5A4E !important; }
.fomci-nav5-it.is-active::after { width: 96px !important; height: 2px !important; bottom: -10px !important; background: #4A5A4E !important; }
.fomci-nav5-it.is-active .fomci-nav5-ic { border: 0 !important; background: transparent !important; }
.fomci-nav5-it.is-pending { opacity: 1 !important; }
.fomci-nav5-it.is-pending .fomci-nav5-lb { color: #9A9086 !important; }

/* avatar AD a la derecha */
.fomci-nav5-av {
  position: absolute !important; right: 40px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background: #4A5A4E !important; color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: 'Jost', sans-serif !important; font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: .04em; cursor: pointer;
}
.fomci-nav5-av::after {
  content: '\2304'; margin-left: 3px; font-size: 13px; opacity: .85;
}
@media (max-width: 991px) {
  .fomci-nav5-av { position: static !important; transform: none !important; margin-left: 12px !important; }
  .fomci-nav5 { gap: 14px !important; }
  .fomci-nav5-it { flex-direction: column !important; gap: 4px !important; }
  .fomci-nav5-lb { font-size: 11px !important; }
  .fomci-nav5-it.is-active::after { width: 40px !important; bottom: 0 !important; }
}

/* ---- móvil: topbar compacta (tel + login) + hero legible ---- */
@media (max-width: 767px) {
  .fomci-wp-topbar-left .fomci-wp-tb:not(:first-child),
  .fomci-wp-tb-label,
  .fomci-wp-social,
  .fomci-wp-platform { display: none !important; }
  .fomci-wp-topbar-inner { padding: 6px 16px !important; flex-wrap: nowrap !important; gap: 12px !important; }
  .fomci-wp-login { padding: 7px 14px !important; font-size: 12px !important; }
  .fomci-hero { padding: 30px 0 36px !important; }
  .fomci-hero-title { font-size: 34px !important; padding: 0 24px !important; max-width: 100% !important; }
  .fomci-hero-title em,
  .fomci-hero-title em * { font-size: 26px !important; }
  .fomci-hero-sub { max-width: 100% !important; }
}

/* =========================================================
   V3b — cierres responsive
   ========================================================= */
/* tablet/mobile: colapsar la nav custom, usar burger nativo */
@media (max-width: 1023px) {
  .fomci-nav5, .fomci-nav5-av { display: none !important; }
  body.ccn_context_frontend header.ccnHeader4.header-nav { min-height: 76px !important; }
}
/* movil: secciones a una columna */
@media (max-width: 767px) {
  .fomci-features .feat-grid { grid-template-columns: 1fr !important; }
  .fomci-features .feat-card.is-lead { grid-template-columns: 1fr !important; }
  .fomci-features .feat-card.is-lead .feat-media img { min-height: 200px !important; height: 200px !important; }
  .fomci-features .feat-card--icon { grid-template-columns: 48px 1fr !important; gap: 14px !important; padding: 18px !important; }
  .fomci-features .feat-ic { width: 48px !important; height: 48px !important; font-size: 19px !important; }
  .catnav-row { gap: 16px !important; }
  .catnav-icon { width: 64px !important; height: 64px !important; }
  .catnav-icon i, .catnav-icon svg { font-size: 24px !important; }
  .prog-card .prog-card-body { padding: 40px 12px 14px !important; }
  .prog-badge { width: 54px !important; height: 54px !important; top: -27px !important; left: 10px !important; font-size: 10px !important; }
}

/* ---- WORDMARK header (reemplaza el logo badge) ---- */
body .navbar_brand img { display: none !important; }
body .navbar_brand .fomci-brand {
  display: inline-flex !important; flex-direction: column !important;
  align-items: flex-start !important; gap: 2px !important; line-height: 1 !important;
}
body .navbar_brand .fomci-brand-word {
  font-family: var(--fomci-serif) !important; font-size: 27px !important;
  font-weight: 500 !important; letter-spacing: .14em !important;
  color: #2E2A26 !important;
}
body .navbar_brand .fomci-brand-sub {
  font-family: var(--fomci-sans) !important; font-size: 8px !important;
  font-weight: 400 !important; letter-spacing: .2em !important;
  text-transform: uppercase !important; color: #9A9086 !important;
}
@media (max-width: 767px) {
  body .navbar_brand .fomci-brand-word { font-size: 22px !important; }
}

/* ---- FOTO DEL HERO (banner aula Montessori, original del usuario) ---- */
body .fomci-hero-bg,
.fomci-hero-bg {
  background-image: url('https://montessorifomci.com/plataformaeducativa/theme/edumy/custom/img/fomci_hero_banner.jpg') !important;
  background-size: cover !important;
  background-position: center 62% !important;
  background-repeat: no-repeat !important;
  filter: saturate(.9) brightness(1.02) !important;
}

/* ---- unificar temperatura de las fotos de programas ---- */
body .prog-card-media img {
  filter: saturate(.85) contrast(1.02) sepia(.10) brightness(1.02) !important;
}
body .fomci-features .feat-card.is-lead .feat-media img {
  filter: saturate(.9) sepia(.06) brightness(1.03) !important;
}

/* ---- logo del menu movil (imagen gigante) fuera de flujo sin romper el JS de Moodle ---- */
body .nav_logo_img, body .menu-toggle .nav_logo_img {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
@media (max-width: 1023px) {
  body.ccn_context_frontend header.ccnHeader4.header-nav .ccn_nav_group,
  body.ccn_context_frontend header.ccnHeader4.header-nav .menu-toggle {
    min-height: 0 !important; height: auto !important;
    display: flex !important; align-items: center !important;
    justify-content: flex-end !important; padding: 10px 0 !important;
  }
  body.ccn_context_frontend header.ccnHeader4.header-nav .container { padding: 0 15px !important; }
}

/* =========================================================
   V4 — correcciones de comparación (footer mobile, badges,
   categorias 88, legibilidad hero, header, burger, botones)
   ========================================================= */

/* 1) footer mobile: los bloques deben tener alto propio */
@media (max-width: 767px) {
  body .fomci-foot3-in { flex-direction: column !important; gap: 18px !important; }
  body .fomci-foot3-bk,
  body .fomci-foot3-bk-mid,
  body .fomci-foot3-bk-end {
    flex: 0 0 auto !important; width: 100 !important; width: 100% !important;
    min-height: 0 !important; height: auto !important; border-left: 0 !important;
    border-right: 0 !important; padding: 4px 0 !important;
  }
  body .fomci-foot3-bk-mid {
    border-top: 1px solid var(--fomci-div, #E3DBCE) !important;
    border-bottom: 1px solid var(--fomci-div, #E3DBCE) !important;
    padding: 16px 8px !important;
  }
}

/* 2) categorias: circulo 88px (referencia) */
@media (min-width: 768px) {
  body .catnav-icon { width: 88px !important; height: 88px !important; }
  body .catnav-icon i, body .catnav-icon svg { font-size: 30px !important; }
}

/* 3) legibilidad del hero en tablet/mobile: velo crema encima de la foto */
@media (max-width: 991px) {
  body .fomci-hero-ov, .fomci-hero-ov {
    background: linear-gradient(180deg, rgba(244,239,231,.93) 0%, rgba(244,239,231,.86) 55%, rgba(244,239,231,.78) 100%) !important;
  }
  body .fomci-hero-title, .fomci-hero-title { color: #2E2A26 !important; max-width: 100% !important; }
  body .fomci-hero-title em, .fomci-hero-title em * { color: #6B635A !important; }
  body .fomci-hero-sub { color: #5A5248 !important; max-width: 100% !important; }
  body .fomci-hero-quote { display: none !important; }
}

/* 4) wordmark visible en mobile (el tema lo oculta con .dn-smd) */
body .navbar_brand.dn-smd,
body .navbar_brand { display: inline-flex !important; }
body .navbar_brand .fomci-brand-sub { white-space: nowrap !important; font-size: 7.5px !important; letter-spacing: .16em !important; }

/* 5) burger / menu movil sin verde lima */
body .mobile-menu, body .menu-toggle, body .navbar-toggle,
body .mean-nav, body .openmob-menu {
  background: transparent !important; color: #4A5A4E !important;
}
body .mobile-menu i, body .menu-toggle i, body .navbar-toggle i,
body .mobile-menu span, body .menu-toggle span {
  background: #4A5A4E !important; color: #4A5A4E !important;
}
body .mobile-menu, body .menu-toggle { border: 0 !important; box-shadow: none !important; }

/* 6) cita del hero: margen derecho (referencia ~130px) */
@media (min-width: 992px) {
  body .fomci-hero-quote, .fomci-hero-quote { right: 96px !important; left: auto !important; max-width: 250px !important; }
}

/* 7) botones de las tarjetas: ancho del contenido */
body .fomci-features .feat-btn { width: auto !important; align-self: flex-start !important; justify-self: start !important; }

/* 8) wordmark de 1 linea en desktop */
@media (min-width: 768px) {
  body .navbar_brand .fomci-brand-sub { font-size: 7px !important; letter-spacing: .14em !important; }
}

/* wordmark con ave line-art a la izquierda */
body .navbar_brand .fomci-brand-row {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
}
body .navbar_brand .fomci-brand-row svg { width: 34px !important; height: 26px !important; }
@media (max-width: 767px) {
  body .navbar_brand .fomci-brand-row svg { width: 28px !important; height: 22px !important; }
}

/* =========================================================
   V5 — fidelidad: legibilidad hero, tarjetas, iconos
   ========================================================= */

/* hero desktop: velo crema mas denso tras el texto (evita la "banda" de bajo contraste) */
@media (min-width: 992px) {
  body .fomci-hero-ov, .fomci-hero-ov {
    background: linear-gradient(90deg,
      rgba(244,239,231,.97) 0%,
      rgba(244,239,231,.94) 34%,
      rgba(244,239,231,.62) 54%,
      rgba(244,239,231,0) 74%) !important;
  }
}
body .fomci-hero-title { color: #201C18 !important; }
body .fomci-hero-title em, body .fomci-hero-title em * { color: #4F4842 !important; }
body .fomci-hero-sub { color: #4A443D !important; }
body .fomci-hero-cta, .fomci-hero-cta {
  background-color: #7A8B6F !important; color: #FFFFFF !important;
  opacity: 1 !important; transform: none !important;
  box-shadow: 0 8px 18px rgba(74,90,78,.22) !important;
}
body .fomci-hero-cta:hover { background-color: #6C7D61 !important; }

/* tarjetas: foto mas cuadrada (ref ~1:1) y badge 70px */
body .prog-card-media { height: 195px !important; }
body .prog-card { overflow: visible !important; }
body .prog-card-media { overflow: hidden !important; border-radius: 10px 10px 0 0 !important; }
body .prog-badge {
  width: 70px !important; height: 70px !important; font-size: 13px !important;
  padding: 4px !important; letter-spacing: 0 !important; line-height: 1.15 !important;
}
body .prog-card-body { border-radius: 0 0 10px 10px !important; }

/* iconos de categorias: line-art */
body .catnav-icon i.la { font-size: 30px !important; line-height: 1 !important; color: #3A3A34 !important; }

/* burger: barras del menu en verde oscuro (el tema las pinta lima) */
body .menu-toggle > span, body .navbar-toggle > span,
body .mobile-menu-toggle > span, body .mean-container .navbar-toggle > span {
  background: #4A5A4E !important;
}

/* =========================================================
   V6 — grilla de programas, hero, categorias, tagline
   ========================================================= */

/* grilla 5 columnas sin overflow horizontal */
body .prog-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 22px !important;
  overflow: visible !important;
  width: 100% !important;
}
@media (max-width: 1199px) {
  body .prog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 991px) {
  body .prog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  body .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
}
body .prog-card { display: flex !important; flex-direction: column !important; margin: 0 !important; }

/* segunda linea del H1: italic fina (la ref usa script fino, no pincel) */
body .fomci-hero-title em,
body .fomci-hero-title em * {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
}
@media (max-width: 991px) {
  body .fomci-hero-title { text-align: left !important; padding-left: 40px !important; padding-right: 40px !important; }
  body .fomci-hero-in, body .fomci-hero .container, body .fomci-hero-content { text-align: left !important; }
}

/* CTA del hero: tono oliva de la referencia, sin sombra, mas ancho */
body .fomci-hero-cta, .fomci-hero-cta {
  background: #6B7A57 !important;
  box-shadow: none !important;
  padding: 14px 46px !important;
  min-width: 248px !important;
  border: 0 !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
}
body .fomci-hero-cta:hover { background: #5E6C4C !important; }

/* categorias: circulos con contraste */
@media (min-width: 768px) {
  body .catnav-icon { width: 104px !important; height: 104px !important; background: #EFE9DE !important; }
}
body .catnav-icon i.la { color: #2E2A26 !important; font-size: 34px !important; }

/* tagline: card de 2 columnas sobre fondo greige */
body .fomci-tagline {
  background: #A9A093 !important;
  padding: 46px 0 !important;
}
body .fomci-tagline-card {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
}
body .fomci-tagline-media {
  flex: 0 0 53% !important;
  max-height: 340px !important;
  overflow: hidden !important;
}
body .fomci-tagline-media img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
  filter: saturate(.9) sepia(.06) !important;
}
body .fomci-tagline-panel {
  flex: 1 1 47% !important;
  background: #F3EEE5 !important;
  padding: 40px 44px !important;
  display: flex !important; flex-direction: column !important;
  justify-content: center !important;
  gap: 14px !important;
}
body .fomci-tagline-h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 34px !important; line-height: 1.25 !important;
  font-weight: 500 !important; color: #2E2A26 !important;
  text-align: left !important; margin: 0 !important;
}
body .fomci-tagline-rule { display: block !important; width: 54px !important; height: 1px !important; background: #A9A093 !important; }
body .fomci-tagline-brand {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 15px !important; letter-spacing: .42em !important;
  color: #6E655B !important;
}
body .fomci-tagline-ital {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important; font-size: 17px !important;
  color: #7A6B5C !important;
}
@media (max-width: 991px) {
  body .fomci-tagline-card { flex-direction: column !important; }
  body .fomci-tagline-media { flex: 0 0 auto !important; max-height: 230px !important; }
  body .fomci-tagline-panel { padding: 28px 24px !important; }
  body .fomci-tagline-h2 { font-size: 26px !important; }
}

/* franja navy del contenedor del footer (la referencia no la tiene) */
body .footer_one, body .footer_one.home8, body .footer_home8 {
  background: #F3EEE5 !important;
}
body .footer_one .fomci-foot3 { background: #F3EEE5 !important; }

/* =========================================================
   V7 — CTA, categorias, tagline clara, burger, badges
   ========================================================= */

/* CTA del hero (alta especificidad: gana al tema) */
body.ccn_context_frontend .fomci-hero .fomci-hero-cta,
body .fomci-hero .fomci-hero-cta {
  background-color: #6B7A57 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* fin de animacion del H1: texto siempre completo */
body .fomci-done .char,
body .fomci-done .split-line,
body .fomci-done .split-word {
  opacity: 1 !important; transform: none !important; visibility: visible !important;
}

/* seccion de categorias: fondo claro + circulos visibles */
body .catnav, body .catnav-wrap, body .catnav-section { background: #FAF6F3 !important; }
body .catnav-icon { background: #EDE6DE !important; box-shadow: 0 3px 10px rgba(70,60,50,.07) !important; }
body .catnav-label { color: #4A443C !important; }

/* tagline: banda casi blanca (como la referencia) */
body .fomci-tagline { background: #FBF7F4 !important; padding: 54px 0 !important; }
body .fomci-tagline-panel { background: #F5F0E9 !important; }
body .fomci-tagline-h2 { text-align: left !important; }
body .fomci-tagline-brand { text-align: left !important; }
body .fomci-tagline-ital { text-align: left !important; }

/* burger: boton lima del tema -> transparente, barras verde oscuro */
body .menu-toggle > button,
body .mean-container .navbar-toggle,
body .mobile-menu-toggle > button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .menu-toggle .icon-bar,
body .mean-container .icon-bar,
body .mobile-menu-toggle .icon-bar {
  background: #4A5A4E !important;
}

/* badges de edad con tonos (rosa, terracota, sage, azul) como la referencia */
body .prog-badge[data-tone='a'] { background: #E8C9C2 !important; color: #6B4A42 !important; }
body .prog-badge[data-tone='b'] { background: #D9B49C !important; color: #6A4A38 !important; }
body .prog-badge[data-tone='c'] { background: #C7D0BC !important; color: #4C5A44 !important; }
body .prog-badge[data-tone='d'] { background: #C6D2DE !important; color: #41505E !important; }
body .prog-badge[data-tone='e'] { background: #E4D3C0 !important; color: #6A5646 !important; }

/* lupa en el buscador y chevron en el select */
body .prog-search input[type='search']::placeholder,
body .prog-search input::placeholder { color: #8A8175 !important; }
body .prog-tools, body .prog-search { position: relative !important; }
body .prog-search::after {
  content: '
F50D'; position: absolute !important; right: 14px !important; top: 50%;
  transform: translateY(-50%) !important; opacity: .55 !important; pointer-events: none !important;
  font-size: 15px !important;
}

/* aire post-grilla */
body .programs-grid-end, body .prog-grid + * { margin-top: 6px !important; }

/* hero en tablet: mas alto para no cortar el boton */
@media (max-width: 991px) and (min-width: 768px) {
  body .fomci-hero, .fomci-hero { min-height: 430px !important; height: auto !important; }
  body .fomci-hero-cta { margin-top: 26px !important; }
}

/* =========================================================
   V8 - fondo de categorias, filtros, burger
   ========================================================= */
body .fomci-catnav { background: #FAF6F3 !important; }
body .fomci-programas { background: #EFE9E0 !important; }

body .prog-filters { position: relative !important; }
body .prog-filters::after {
  content: 'BE';
  position: absolute !important;
  right: 16px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  color: #7A7268 !important; font-size: 14px !important;
  pointer-events: none !important;
}
body input.prog-search { padding-right: 34px !important; }

/* =========================================================
   V9 - fondos, chevron, tagline left, features, header
   ========================================================= */

/* programas: casi blanco como la referencia */
body .fomci-programas { background: #FDF9F6 !important; }

/* chevron del select: glifo de sistema (el \25BE no renderiza) */
body .prog-filters::after { content: '\25BC' !important; font-size: 10px !important; }

/* tagline: texto a la izquierda (alta especificidad) */
body .fomci-tagline .fomci-tagline-h2,
body .fomci-tagline .fomci-tagline-brand,
body .fomci-tagline .fomci-tagline-ital,
body .fomci-tagline .fomci-tagline-rule { text-align: left !important; }
body .fomci-tagline .fomci-tagline-panel { align-items: flex-start !important; }

/* features: bloque de texto a la izquierda + 2 cards */
body .fomci-features .feat-grid { grid-template-columns: 1.05fr 1fr !important; align-items: stretch !important; }
body .fomci-features .feat-card.is-lead { background: #F3EEE5 !important; }
body .fomci-features .feat-card.is-lead .feat-body { padding: 44px 40px !important; }
body .fomci-features .feat-kicker {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 13px !important; letter-spacing: .44em !important;
  color: #8A7F70 !important; margin-bottom: 14px !important;
}
body .fomci-features .feat-card.is-lead h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 40px !important; line-height: 1.18 !important;
  font-weight: 500 !important; color: #2E2A26 !important; margin-bottom: 8px !important;
}
body .fomci-features .feat-card.is-lead p {
  font-size: 21px !important; color: #4A443D !important; margin-bottom: 14px !important;
}
body .fomci-features .feat-card.is-lead em {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important; font-size: 19px !important; color: #7A6B5C !important;
}
@media (max-width: 991px) {
  body .fomci-features .feat-grid { grid-template-columns: 1fr !important; }
  body .fomci-features .feat-card.is-lead .feat-body { padding: 30px 24px !important; }
  body .fomci-features .feat-card.is-lead h3 { font-size: 30px !important; }
}

/* header: sin subrayado verde en Inicio, avatar relleno */
body .fomci-nav5 > li > a::after, body .fomci-nav5 > li > a::before { display: none !important; }
body .fomci-nav5 > li.active > a,
body .fomci-nav5 > li.current > a { box-shadow: none !important; }
body .fomci-nav5-av { background: #6B755A !important; color: #FFFFFF !important; border: 0 !important; }

/* badges extra por tono */
body .prog-badge[data-tone='c'] { background: #CFE0C8 !important; color: #46563E !important; }
body .prog-badge[data-tone='d'] { background: #A8B793 !important; color: #3F4A36 !important; }
body .prog-badge[data-tone='g'] { background: #A8C4D8 !important; color: #3E5060 !important; }

/* =========================================================
   V10 - aspect ratio, nav gris, hero bird, cita
   ========================================================= */

/* tarjetas: proporcion 1.25:1 */
body .prog-card-media { aspect-ratio: 1.25 / 1 !important; height: auto !important; }

/* nav: subrayado e icono en gris oscuro (sin verde) */
body.ccn_context_frontend .fomci-nav5 > li > a::after,
body.ccn_context_frontend .fomci-nav5 > li > a::before { display: none !important; }
body.ccn_context_frontend .fomci-nav5 > li > a i,
body.ccn_context_frontend .fomci-nav5 > li > a svg { color: #4A443C !important; }
body.ccn_context_frontend .fomci-nav5 > li.active > a,
body.ccn_context_frontend .fomci-nav5 > li.current > a {
  box-shadow: inset 0 -1px 0 #4A443C !important;
}

/* hero: velo suave detras de la cita + colibrí line-art */
body .fomci-hero-quote {
  background: linear-gradient(180deg, rgba(244,239,231,.86), rgba(244,239,231,.70)) !important;
  padding: 18px 20px !important;
  border-radius: 10px !important;
  color: #4A443C !important;
}
body .fomci-hero-bird {
  position: absolute !important;
  right: 54px !important; top: 44% !important;
  width: 120px !important; height: 96px !important;
  opacity: .5 !important; pointer-events: none !important;
  z-index: 2 !important;
}

/* =========================================================
   V11 - cita, gutter, tagline + help a la par
   ========================================================= */

/* cita del hero: oculta en tablet/mobile (evita recorte) y rotada en desktop */
@media (max-width: 991px) {
  body.ccn_context_frontend .fomci-hero .fomci-hero-quote,
  body .fomci-hero .fomci-hero-quote { display: none !important; }
}
@media (min-width: 992px) {
  body .fomci-hero .fomci-hero-quote {
    width: 158px !important; max-width: 158px !important;
    right: 74px !important; left: auto !important;
    transform: rotate(-3deg) !important;
    padding: 16px 16px !important;
    font-size: 15px !important; line-height: 1.5 !important;
  }
}

/* gutter de programas ~33px */
body .fomci-programas .container, body .fomci-programas .container-fluid {
  max-width: 1199px !important; padding-left: 0 !important; padding-right: 0 !important;
}
body .fomci-programas { padding-left: 33px !important; padding-right: 33px !important; }
@media (max-width: 767px) {
  body .fomci-programas { padding-left: 18px !important; padding-right: 18px !important; }
}

/* =========================================================
   V12 - replica exacta de la seccion de la referencia
   categorias + tarjeta foto/panel + cards de ayuda + footer
   ========================================================= */

body .fomci-tagline { background: #FBFAF6 !important; padding: 0 !important; }
body .fomci-programas { background: #FBFAF6 !important; }
body .fomci-catnav { background: #FBFAF6 !important; }

/* --- fila de categorias: circulos 144px, label 17px --- */
@media (min-width: 768px) {
  body .catnav-row { gap: 20px !important; }
  body .catnav-icon {
    width: clamp(84px, 11.3vw, 144px) !important;
    height: clamp(84px, 11.3vw, 144px) !important;
    background: #EDE6DE !important; box-shadow: none !important;
  }
  body .catnav-icon i.la { font-size: clamp(32px, 4.5vw, 58px) !important; color: #3C3E33 !important; }
  body .catnav-label {
    font-size: clamp(12px, 1.35vw, 17px) !important;
    font-weight: 500 !important; color: #0A0A18 !important; margin-top: 12px !important;
  }
}

/* --- card principal: foto con fade + panel crema --- */
body .fomci-tagline-card.has-help,
body .fomci-tagline-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
  gap: 22px !important;
  max-width: 1472px !important;
  padding: 0 !important;
  align-items: stretch !important;
}
body .fomci-tagline-left {
  position: relative !important;
  display: block !important;
  background: #E6DCD0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: 468px !important;
}
body .fomci-tagline-left .fomci-tagline-media {
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 66% !important; max-height: none !important; height: auto !important;
  flex: none !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 70%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, rgba(0,0,0,0) 70%);
}
body .fomci-tagline-left .fomci-tagline-media img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  filter: saturate(.9) sepia(.06) !important;
}
body .fomci-tagline-card.has-help .fomci-tagline-left .fomci-tagline-panel,
body .fomci-tagline-left .fomci-tagline-panel {
  position: relative !important;
  background: transparent !important;
  min-height: 468px !important;
  padding: 40px 40px 40px 50% !important;
  height: 100% !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
body .fomci-tagline-h2 {
  font-size: clamp(30px, 3.4vw, 44px) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.18 !important; font-weight: 500 !important;
  color: #201B11 !important; text-align: left !important; margin: 0 !important;
}
body .fomci-tagline-rule { width: 75px !important; height: 1px !important; background: #CFC3AD !important; }
body .fomci-tagline-brand {
  font-size: 22px !important; letter-spacing: .34em !important; color: #211A10 !important; text-align: left !important;
}
body .fomci-tagline-ital { font-size: 19px !important; color: #251B11 !important; text-align: left !important; }

/* --- 2 cards de ayuda a la derecha --- */
body .fomci-tagline-card .feat-grid--aside,
body .fomci-tagline-card .feat-grid {
  display: flex !important; flex-direction: column !important;
  gap: 19px !important; align-self: stretch !important;
}
body .fomci-tagline-card .feat-grid .feat-col {
  display: flex !important; flex-direction: column !important; gap: 19px !important; flex: 1 1 auto !important;
}
body .fomci-tagline-card .feat-card.is-lead { display: none !important; }
body .fomci-tagline-card.has-help .feat-card--icon,
body .fomci-tagline-card .feat-card--icon {
  background: #F0EFEA !important; border: 0 !important; border-radius: 16px !important;
  box-shadow: none !important; padding: 22px 28px !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; text-align: left !important;
  flex: 1 1 auto !important; margin: 0 !important;
}
body .fomci-tagline-card.has-help .feat-card--icon .feat-ic,
body .fomci-tagline-card .feat-card--icon .feat-ic {
  width: 64px !important; height: 64px !important; border-radius: 50% !important;
  background: #99A28D !important; color: #FDFDFB !important;
  font-size: 26px !important; margin-bottom: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body .fomci-tagline-card .feat-col .feat-card--icon:nth-child(2) .feat-ic { background: #CBC3B8 !important; }
body .fomci-tagline-card.has-help .feat-card--icon h3,
body .fomci-tagline-card .feat-card--icon h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 32px !important; line-height: 1.2 !important; font-weight: 500 !important;
  color: #0B0B22 !important; margin: 0 0 4px 0 !important;
}
body .fomci-tagline-card.has-help .feat-card--icon p,
body .fomci-tagline-card .feat-card--icon p {
  font-size: 20px !important; line-height: 1.5 !important; color: #2C2F30 !important; margin: 0 0 10px 0 !important;
}
body .fomci-tagline-card.has-help .feat-card--icon .feat-btn,
body .fomci-tagline-card .feat-card--icon .feat-btn {
  display: inline-flex !important; align-items: center !important; gap: 16px !important;
  min-width: 275px !important; height: 58px !important;
  padding: 0 28px !important; border-radius: 12px !important;
  background: #6D775F !important; color: #FFFFFF !important;
  font-size: 19px !important; font-weight: 500 !important; box-shadow: none !important;
}
body .fomci-tagline-card .feat-card--icon .feat-btn:hover { background: #5E684F !important; }

@media (max-width: 1099px) {
  body .fomci-tagline-card,
  body .fomci-tagline-card.has-help { grid-template-columns: minmax(0, 1fr) !important; }
  body .fomci-tagline-left .fomci-tagline-media { width: 70% !important; }
  body .fomci-tagline-card.has-help .fomci-tagline-left .fomci-tagline-panel,
body .fomci-tagline-left .fomci-tagline-panel { padding: 34px 30px !important; }
  body .fomci-tagline-card.has-help .feat-card--icon,
body .fomci-tagline-card .feat-card--icon { flex: 0 0 auto !important; }
}
@media (max-width: 767px) {
  body .fomci-tagline-left, body .fomci-tagline-card.has-help .fomci-tagline-left .fomci-tagline-panel,
body .fomci-tagline-left .fomci-tagline-panel { min-height: 340px !important; }
  body .fomci-tagline-left .fomci-tagline-media { width: 100% !important; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.35)); mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.35)); }
  body .fomci-tagline-card.has-help .feat-card--icon .feat-btn,
body .fomci-tagline-card .feat-card--icon .feat-btn { min-width: 0 !important; width: 100% !important; justify-content: center !important; }
}

/* --- footer: casi blanca --- */
body .fomci-foot3, body .footer_one, body .footer_one.home8 { background: #FDFCFA !important; }
body .fomci-foot3-quote { font-size: clamp(19px, 2vw, 26px) !important; line-height: 1.35 !important; }

/* =========================================================
   V12.2 - ajustes de celdas de categorias y boton de ayuda
   ========================================================= */
@media (min-width: 1200px) {
  body .fomci-catnav .container { max-width: 1472px !important; }
}
@media (min-width: 1200px) {
  body .fomci-catnav .catnav-row {
    grid-template-columns: repeat(9, minmax(0, 144px)) !important;
    justify-content: center !important;
  }
  body .fomci-catnav .catnav-item { width: 100% !important; }
  body .fomci-catnav .catnav-icon {
    width: 100% !important; height: auto !important; aspect-ratio: 1 !important;
    font-size: min(58px, 3.7vw) !important;
  }
}
@media (min-width: 768px) {
  body .fomci-catnav .catnav-icon { margin: 0 0 12px !important; }
  body .fomci-catnav .catnav-label { white-space: nowrap !important; }
}
body .fomci-tagline-card .feat-card--icon .feat-body {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; width: 100% !important;
}
body .fomci-tagline-card.has-help .feat-card--icon .feat-btn,
body .fomci-tagline-card .feat-card--icon .feat-btn { width: 275px !important; }
@media (max-width: 767px) {
  body .fomci-tagline-card.has-help .feat-card--icon .feat-btn,
  body .fomci-tagline-card .feat-card--icon .feat-btn { width: 100% !important; }
}

/* =========================================================
   V12.5 - reparto foto/panel y alturas de tarjetas
   ========================================================= */
body .fomci-tagline-left { min-height: 0 !important; }
body .fomci-tagline-left .fomci-tagline-panel { min-height: 0 !important; }
body .fomci-tagline-card .feat-grid,
body .fomci-tagline-card .feat-grid .feat-col { gap: 19px !important; }

/* =========================================================
   V12.6 - 4 lineas de titulo + sin doble padding interno
   ========================================================= */
body .fomci-tagline-card .feat-card--icon .feat-body { padding: 0 !important; gap: 0 !important; }
body .fomci-tagline-card .feat-card--icon .feat-body .feat-btn { margin-top: 8px !important; }

/* =========================================================
   LOGO ORIGINAL fomci_logo.png - header y footer
   ========================================================= */
body .navbar_brand .fomci-brand { display: block !important; }
body .navbar_brand img.fomci-brand-img { display: block !important; height: 46px !important; width: auto !important; }
@media (max-width: 1199px) { body .navbar_brand img.fomci-brand-img { height: 40px !important; } }
@media (max-width: 767px)  { body .navbar_brand img.fomci-brand-img { height: 34px !important; } }

body .fomci-foot3-brand { display: block !important; }
body .fomci-foot3-brand .fomci-foot3-img { display: block !important; height: 72px !important; width: auto !important; }
@media (max-width: 1099px) { body .fomci-foot3-brand .fomci-foot3-img { height: 58px !important; } }
@media (max-width: 767px)  { body .fomci-foot3-brand .fomci-foot3-img { height: 52px !important; } }

/* =========================================================
   DESIGN FX — paquete profesional (05-oct-2026)
   ========================================================= */
/* reveal on scroll (clase la agrega fomci-chrome.js) */
.fomci-reveal {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.24,1) !important;
}
.fomci-reveal.is-in { opacity: 1 !important; transform: none !important; }

/* cards: lift + sombra al hover */
.prog-card,
.fomci-features .feat-card,
.catnav-item,
.catnav-row > * {
  transition: transform .4s cubic-bezier(.22,.7,.24,1), box-shadow .4s ease !important;
}
.prog-card:hover,
.fomci-features .feat-card:hover,
.catnav-item:hover,
.catnav-row > *:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 18px 40px rgba(45,40,30,.15) !important;
}

/* botones y topbar */
.fomci-hero-cta, .fomci-wp-login, .fomci-wp-social, .fomci-wp-tb {
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, opacity .3s ease !important;
}
.fomci-hero-cta:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 30px rgba(45,40,30,.22) !important; }
.fomci-wp-login:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; }
.fomci-wp-social:hover { opacity: .75 !important; transform: translateY(-2px) !important; }

/* menú: hover suave */
.fomci-nav5-it { transition: color .25s ease, opacity .25s ease !important; }
.fomci-nav5-ic i { display: inline-block; transition: transform .25s ease !important; }
.fomci-nav5-it:hover .fomci-nav5-lb { color: #3E4A34 !important; }
.fomci-nav5-it:hover .fomci-nav5-ic i { transform: translateY(-2px) !important; }

/* sticky con sombra */
body.ccn_context_frontend header.ccnHeader4.header-nav.stricky,
body.ccn_context_frontend header.ccnHeader4.header-nav.stricky.stricky-fixed {
  box-shadow: 0 10px 30px rgba(45,40,30,.12) !important;
}

/* hero: ken-burns lentísimo */
.fomci-hero-bg {
  will-change: transform !important;
  animation: fomciKB 26s ease-in-out infinite alternate !important;
}
@keyframes fomciKB {
  from { transform: scale(1); }
  to { transform: scale(1.055); }
}

/* foco accesible */
a:focus-visible, button:focus-visible {
  outline: 2px solid #4A5A4E !important;
  outline-offset: 3px !important;
}

/* accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .fomci-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fomci-hero-bg { animation: none !important; }
  .prog-card, .feat-card, .catnav-item, .fomci-hero-cta { transition: none !important; }
}

/* ============ FOMCI · MENÚ MÓVIL (mmenu #menu) ============ */
@media (max-width: 1199.98px) {
  #page.stylehome1.h0 > .mobile-menu { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ccnHeader4 .menu-toggle { display: flex !important; }
}
#menu.stylehome1.mm-menu {
  background: #FFFFFF !important;
  --mm-color-background: #FFFFFF;
}
#menu .mm-navbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
#menu .mm-navbar__title {
  color: #4A5A4E !important;
  font-family: 'Jost', 'Nunito', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px !important;
  font-weight: 600;
}
#menu li.mm-listitem { border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
#menu li.mm-listitem a.mm-listitem__text {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 22px !important;
  color: #4A5A4E !important;
  font-family: 'Jost', 'Nunito', sans-serif;
  font-size: 15.5px;
  font-weight: 500;
}
#menu li.mm-listitem a.mm-listitem__text i {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  color: #6B7A5E;
  font-size: 15px;
}
#menu li.fomci-mi-ext a.mm-listitem__text {
  font-size: 14.5px;
  font-weight: 400;
  color: #6B6257 !important;
}
#menu li.fomci-mi-ext a.mm-listitem__text i { color: #8B9C7D; }
#menu li.mm-listitem a.mm-listitem__text:hover,
#menu li.mm-listitem a.mm-listitem__text:active {
  background: #F2F1EC !important;
}
#menu li.mm-listitem a.mm-listitem__text:focus-visible {
  outline: 2px solid #6B7A5E;
  outline-offset: -2px;
  background: #F2F1EC !important;
}
.menu-toggle:focus-visible { outline: 2px solid #6B7A5E; outline-offset: 2px; }

/* =========================================================
   LOGUEADO — controles de Moodle (notif / mensajes / ajustes / perfil)
   A la derecha del header, sin pisar la nav5 y con estilo propio.
   ========================================================= */
@media (min-width: 1024px) {
  body:not(.notloggedin) .ccnHeader4 > .container > .ccn_nav_group {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 87px !important;
  }
  body:not(.notloggedin) .ccnHeader4 .ccn_nav_group > .menu-toggle,
  body:not(.notloggedin) .ccnHeader4 .ccn_nav_group > nav.navbar {
    display: none !important;
  }
  body:not(.notloggedin) .ccnHeader4 .ccn_nav_group > ul.ml-0 {
    float: none !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  body:not(.notloggedin) .ccnHeader4 .header_user_notif {
    position: static !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  body:not(.notloggedin) .ccnHeader4 .header_user_notif > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
  }
  body:not(.notloggedin) .ccnHeader4 .header_user_notif > li.ccn-lang-menu,
  body:not(.notloggedin) .ccnHeader4 .header_user_notif > li.ccn-settings-nav-dark {
    display: none !important;
  }
  body:not(.notloggedin) .ccnHeader4 .notification_icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    color: #4A5A4E !important;
    border: 1px solid rgba(74, 90, 78, .18) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    transition: background .2s ease, color .2s ease, border-color .2s ease !important;
  }
  body:not(.notloggedin) .ccnHeader4 .notification_icon i,
  body:not(.notloggedin) .ccnHeader4 .notification_icon span { color: #4A5A4E !important; }
  body:not(.notloggedin) .ccnHeader4 .notification_icon:hover,
  body:not(.notloggedin) .ccnHeader4 .notification_icon:focus {
    background: #4A5A4E !important;
    border-color: #4A5A4E !important;
    color: #FFFFFF !important;
  }
  body:not(.notloggedin) .ccnHeader4 .notification_icon:hover i,
  body:not(.notloggedin) .ccnHeader4 .notification_icon:hover span { color: #FFFFFF !important; }
  body:not(.notloggedin) .ccnHeader4 .ccn-profile-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 1px !important;
    margin: 0 !important;
    border: 1px solid rgba(74, 90, 78, .18) !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: background .2s ease, border-color .2s ease !important;
  }
  body:not(.notloggedin) .ccnHeader4 .ccn-profile-menu:hover {
    background: #4A5A4E !important;
    border-color: #4A5A4E !important;
  }
  body:not(.notloggedin) .ccnHeader4 .ccn-profile-menu img.rounded-circle {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  /* badges de Moodle dentro de los controles: mismo lenguaje visual */
  body:not(.notloggedin) .ccnHeader4 .header_user_notif .notification_icon .count,
  body:not(.notloggedin) .ccnHeader4 .header_user_notif .notification_icon .badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    padding: 0 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    background: #A85A32 !important;
    color: #FFFFFF !important;
    border: 2px solid #F4EFE7 !important;
    box-shadow: none !important;
  }
  body:not(.notloggedin) .ccnHeader4 .header_user_notif .notification_icon { position: relative !important; }
  /* el avatar decorativo "AD" no compite con el perfil real */
  body:not(.notloggedin) .fomci-nav5-av { display: none !important; }
}

/* logueado + tablet/desktop angosto: la nav5 se centra en el hueco libre
   entre el logo y los controles de usuario (evita el choque a 1024-1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  body:not(.notloggedin) .fomci-nav5 {
    left: calc(50% - 36px) !important;
    gap: 24px !important;
  }
}

/* =========================================================
   PÁGINA DE CATEGORÍA (logueado) — barra de tabs de Moodle
   ul.more-nav.nav-tabs venía con fondo azul #2441E7 (incongruente).
   Se integra al banner crema #F6EEE3 para que sea una sola pieza.
   ========================================================= */
nav.moremenu,
nav.moremenu .more-nav.nav-tabs {
  background: #F6EEE3 !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
nav.moremenu .more-nav.nav-tabs {
  display: flex !important;
  align-items: flex-end !important;
  gap: 4px !important;
  min-height: 54px !important;
  padding: 6px 4px 0 !important;
}
nav.moremenu .more-nav.nav-tabs .nav-item { margin: 0 !important; }
nav.moremenu .more-nav.nav-tabs .nav-link,
nav.moremenu .more-nav.nav-tabs .nav-link.active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  color: #6B5C52 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color .2s ease, background .2s ease !important;
}
nav.moremenu .more-nav.nav-tabs .nav-link:hover {
  color: #4A5A4E !important;
  background: rgba(255, 255, 255, .55) !important;
}
nav.moremenu .more-nav.nav-tabs .nav-link.active,
nav.moremenu .more-nav.nav-tabs .nav-link.active_tree_node,
nav.moremenu .more-nav.nav-tabs .nav-link.active:hover {
  color: #4A5A4E !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 -3px 0 #4A5A4E !important;
}
nav.moremenu .more-nav.nav-tabs .nav-link .caret,
nav.moremenu .more-nav.nav-tabs .nav-link::after {
  border-top-color: #6B5C52 !important;
  color: #6B5C52 !important;
}
nav.moremenu .more-nav.nav-tabs .dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid rgba(74, 90, 78, .14) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(74, 56, 47, .14) !important;
  padding: 6px !important;
  margin-top: 6px !important;
}
nav.moremenu .more-nav.nav-tabs .dropdown-menu .dropdown-item {
  color: #6B5C52 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}
nav.moremenu .more-nav.nav-tabs .dropdown-menu .dropdown-item:hover,
nav.moremenu .more-nav.nav-tabs .dropdown-menu .dropdown-item:focus {
  background: #F6EEE3 !important;
  color: #4A5A4E !important;
}

/* =========================================================
   PÁGINA DE CATEGORÍA — ajustes finos del banner
   1) el hueco entre la barra de tabs y el banner mostraba el gris
      de #page-content: se cierra con padding-bottom crema.
   2) .cat-banner-sub venía morado (#8B6DA8, del tema) → paleta.
   ========================================================= */
nav.moremenu { padding-bottom: 40px !important; }
.cat-banner-sub { color: #A85A32 !important; }
.cat-banner-title { letter-spacing: -.01em; }
.cat-banner-photo { box-shadow: 0 18px 40px rgba(74, 56, 47, .16); }

/* =========================================================
   FOMCI — BREADCRUMB BANNER INTERNO EDITORIAL Y PROFESIONAL
   Reemplaza el morado plano por fotografía Montessori con overlay cálido
   ========================================================= */
.inner_page_breadcrumb {
  position: relative !important;
  background-image: url('https://montessorifomci.com/wp-content/themes/montessorifomci-theme/recursos/montessori-hd-11.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: 55px 0 45px !important;
  margin-bottom: 25px !important;
  border-radius: 0 0 20px 20px !important;
  overflow: hidden !important;
}

.inner_page_breadcrumb:before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(105deg, rgba(74, 56, 47, 0.92) 0%, rgba(74, 56, 47, 0.78) 50%, rgba(74, 56, 47, 0.50) 100%) !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

.inner_page_breadcrumb .container,
.inner_page_breadcrumb .breadcrumb_content {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.inner_page_breadcrumb .breadcrumb_title {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.inner_page_breadcrumb .breadcrumb {
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  background-color: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  margin: 0 auto !important;
}

.inner_page_breadcrumb .breadcrumb-item,
.inner_page_breadcrumb .breadcrumb-item a {
  color: #F3E0DA !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.inner_page_breadcrumb .breadcrumb-item a:hover {
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

.inner_page_breadcrumb .breadcrumb-item.active {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.inner_page_breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #D3C6CC !important;
  content: "·" !important;
  padding: 0 6px !important;
  font-size: 1.1rem !important;
}

/* Fondos específicos por sección o curso */
body.course-41 .inner_page_breadcrumb {
  background-image: url('https://montessorifomci.com/wp-content/themes/montessorifomci-theme/recursos/montessori-hd-05.jpg') !important;
}
body.course-40 .inner_page_breadcrumb {
  background-image: url('https://montessorifomci.com/wp-content/themes/montessorifomci-theme/recursos/montessori-hd-27.jpg') !important;
}
body.course-39 .inner_page_breadcrumb {
  background-image: url('https://montessorifomci.com/wp-content/themes/montessorifomci-theme/recursos/montessori-hd-22.jpg') !important;
}

/* =========================================================
   FOMCI — TEXTO BLANCO EN TODOS LOS BANNERS Y HEROES OSCUROS
   Garantiza máxima especificidad contra sobrescrituras de tema
   ========================================================= */
body .fomci-mod-hero-in h1,
body .fomci-mod-hero-in h2,
body .fomci-mod-hero-in h3,
body .fomci-mod-hero-in .fomci-mod-title,
body .campus-hero h1,
body .campus-hero h2,
body .inner_page_breadcrumb .breadcrumb_title,
body .inner_page_breadcrumb h1,
body .inner_page_breadcrumb h2,
body .inner_page_breadcrumb h3,
body .inner_page_breadcrumb h4,
body #page-content .fomci-mod-hero-in h2,
body #page-content .fomci-mod-hero-in h1,
body .box .fomci-mod-hero-in h2,
body .box .fomci-mod-hero-in h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

body .fomci-mod-hero-in p,
body .fomci-mod-hero-in .fomci-mod-hero-sub,
body .campus-hero .campus-hero-sub,
body .inner_page_breadcrumb .breadcrumb-item,
body .inner_page_breadcrumb .breadcrumb-item a {
  color: #F3E0DA !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4) !important;
}

body .fomci-mod-hero-in .fomci-mod-quote,
body .campus-hero .campus-hero-quote {
  color: #EDE7E3 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================================================
   FOMCI — HEADER USER ICONS & NAVIGATION PERFECT ALIGNMENT (V5)
   - Mantiene todos los 5 iconos visibles (Ojo, Campana, Mensajes, Engranaje, Avatar)
   - Alineación perfecta: misma altura (38px), forma circular, flex centrado vertical
   - Barra de navegación central (.fomci-nav5) centrada armónicamente
   ========================================================================== */

/* 1. Ocultar únicamente el avatar estático "AD" y el menú de idioma vacío */
.fomci-nav5-av,
.header_user_notif li.ccn-lang-menu {
  display: none !important;
}

/* 2. Todos los 5 iconos de usuario VISIBLES y alineados en una sola fila */
body .ccnHeader4 .header_user_notif,
body header.ccnHeader4 .header_user_notif {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
  height: 42px !important;
}

/* Cada <li> de la lista de iconos */
body .ccnHeader4 .header_user_notif > li,
body .ccnHeader4 .header_user_notif > li.user_setting,
body .ccnHeader4 .header_user_notif > li.user_notif,
body .ccnHeader4 .header_user_notif > li.ccn-settings-nav-darkMode,
body .ccnHeader4 .header_user_notif > li.ccn-settings-nav,
body .ccnHeader4 .header_user_notif > li.ccn-settings-nav-notif,
body .ccnHeader4 .header_user_notif > li.ccn-settings-nav-msg {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: 40px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  float: none !important;
}

/* Envoltorios internos (.dropdown, .popover-region) */
body .ccnHeader4 .header_user_notif > li .dropdown,
body .ccnHeader4 .header_user_notif > li .popover-region {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 38px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  float: none !important;
}

/* Los botones circulares: Ojo, Campana, Mensajes, Engranaje */
body .ccnHeader4 .header_user_notif .notification_icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  color: #4A5A4E !important;
  border: 1px solid rgba(74, 90, 78, 0.20) !important;
  box-shadow: 0 2px 6px rgba(45, 40, 30, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 38px !important;
}

/* Iconos vectoriales / glifos dentro de los botones */
body .ccnHeader4 .header_user_notif .notification_icon i,
body .ccnHeader4 .header_user_notif .notification_icon span,
body .ccnHeader4 .header_user_notif .notification_icon [class*="flaticon-"] {
  color: #4A5A4E !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.22s ease !important;
}

/* Hover en los botones */
body .ccnHeader4 .header_user_notif .notification_icon:hover,
body .ccnHeader4 .header_user_notif .notification_icon:focus {
  background: #4A5A4E !important;
  border-color: #4A5A4E !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(74, 90, 78, 0.22) !important;
}
body .ccnHeader4 .header_user_notif .notification_icon:hover i,
body .ccnHeader4 .header_user_notif .notification_icon:hover span,
body .ccnHeader4 .header_user_notif .notification_icon:hover [class*="flaticon-"] {
  color: #FFFFFF !important;
}

/* 5º Icono: Avatar de Perfil de Usuario */
body .ccnHeader4 .header_user_notif .ccn-profile-menu {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(74, 90, 78, 0.24) !important;
  padding: 1px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(45, 40, 30, 0.05) !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transition: all 0.22s ease !important;
}
body .ccnHeader4 .header_user_notif .ccn-profile-menu::after {
  display: none !important; /* Elimina la flecha de Bootstrap para que sea un círculo limpio idéntico a los demás */
}
body .ccnHeader4 .header_user_notif .ccn-profile-menu img.rounded-circle {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
body .ccnHeader4 .header_user_notif .ccn-profile-menu:hover {
  border-color: #4A5A4E !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(74, 90, 78, 0.22) !important;
}

/* Badge de contador de notificaciones / mensajes */
body .ccnHeader4 .header_user_notif .notification_icon .count,
body .ccnHeader4 .header_user_notif .notification_icon .badge {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  min-width: 17px !important;
  height: 17px !important;
  line-height: 15px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  background: #B77D5F !important;
  color: #FFFFFF !important;
  border: 1.5px solid #F4EFE7 !important;
  text-align: center !important;
}

/* 3. Menú Principal Centrado (.fomci-nav5) */
.ccnHeader4,
.ccn-header {
  position: relative !important;
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
}
.ccnHeader4 > .container,
.ccn-header > .container {
  max-width: 1300px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 60px !important;
}

.fomci-nav5 {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 10 !important;
}
.fomci-nav5-it {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  position: relative !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  background: transparent !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}
.fomci-nav5-ic {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fomci-nav5-ic i {
  font-size: 16px !important;
  color: #5A5248 !important;
  line-height: 1 !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}
.fomci-nav5-lb {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #5A5248 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

/* Hover en items */
.fomci-nav5-it:hover .fomci-nav5-ic i {
  color: #4A5A4E !important;
  transform: translateY(-1px) !important;
}
.fomci-nav5-it:hover .fomci-nav5-lb {
  color: #4A5A4E !important;
}

/* Item Activo */
.fomci-nav5-it.is-active {
  background: transparent !important;
}
.fomci-nav5-it.is-active .fomci-nav5-ic {
  border: 0 !important;
  background: transparent !important;
}
.fomci-nav5-it.is-active .fomci-nav5-ic i {
  color: #4A5A4E !important;
}
.fomci-nav5-it.is-active .fomci-nav5-lb {
  color: #4A5A4E !important;
  font-weight: 600 !important;
}
.fomci-nav5-it.is-active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 6px !important;
  right: 6px !important;
  width: auto !important;
  height: 2.5px !important;
  background: #4A5A4E !important;
  border-radius: 2px !important;
  display: block !important;
}

/* 4. Responsive para pantallas medianas (laptops) */
@media (min-width: 992px) and (max-width: 1220px) {
  .fomci-nav5 {
    gap: 14px !important;
  }
  .fomci-nav5-lb {
    font-size: 13px !important;
  }
  body .ccnHeader4 .header_user_notif {
    gap: 6px !important;
  }
  body .ccnHeader4 .header_user_notif .notification_icon,
  body .ccnHeader4 .header_user_notif .ccn-profile-menu {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
  }
  body .ccnHeader4 .header_user_notif .notification_icon i,
  body .ccnHeader4 .header_user_notif .notification_icon span {
    font-size: 14px !important;
  }
}

/* =========================================================
   MOBILE FIX 2026 — header sin solape + drawer sin duplicados
   ========================================================= */
@media (max-width: 1199px) {
  header.ccnHeader4 .fomci-nav5,
  header.ccnHeader4 .fomci-nav5-av { display: none !important; }

  header.ccnHeader4 .ccn_nav_group,
  body.ccn_context_frontend header.ccnHeader4.header-nav .ccn_nav_group { padding: 8px 0 !important; }

  header.ccnHeader4 .menu-toggle,
  body.ccn_context_frontend header.ccnHeader4.header-nav .menu-toggle {
    height: auto !important; min-height: 0 !important;
    padding: 0 !important; align-items: center !important;
  }
  header.ccnHeader4 .navbar_brand { margin-right: 0 !important; }
}
/* drawer: ocultar los items nativos duplicados por el menu custom */
#menu .fomci-mi-dup { display: none !important; }
/* MOBILE FIX 2026b — 992..1199: burger + logo en una sola fila */
@media (max-width: 1199px) {
  header.ccnHeader4 .menu-toggle,
  body.ccn_context_frontend header.ccnHeader4.header-nav .menu-toggle {
    width: auto !important; flex: 0 0 auto !important; height: auto !important;
    min-height: 0 !important; padding: 0 !important; align-items: center !important;
  }
  header.ccnHeader4 .ccn_nav_group,
  body.ccn_context_frontend header.ccnHeader4.header-nav .ccn_nav_group {
    flex-wrap: nowrap !important; justify-content: flex-start !important;
    width: 100% !important; padding: 8px 0 !important;
  }
  header.ccnHeader4 .navbar_brand,
  body.ccn_context_frontend header.ccnHeader4.header-nav .navbar_brand {
    margin: 0 0 0 12px !important; flex: 0 0 auto !important;
  }
}