body.ern-app {
  --rn-green: #6abd4f;
  --rn-green-dark: #549a3d;
  --rn-blue: #007bd6;
  --rn-blue-light: #22abff;
  --rn-blue-deep: #005fa6;
  --rn-salmon: #fc6363;
  --rn-bg: #ffffff;
  --rn-bg-alt: #f4f5f4;
  --rn-ink: #222;
  --rn-border: #dcdedc;
}

body.ern-app {
  font-family: 'Figtree', system-ui, sans-serif;
  background: var(--rn-bg);
  color: var(--rn-ink);
}

h2.nexa-heavy.texto-verde-1 {
  display: none;
}

.ern-app h1,
.ern-app h2,
.ern-app h3,
.ern-app h4,
.ern-app h5,
.ern-app .ern-display-font {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
}

/* títulos de sección estilo ministerio: subrayado verde corto */
.ern-app .ern-sec-title {
  position: relative;
  padding-bottom: .6rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  line-height: 1.15;
}

/* párrafo introductorio debajo de cada título de sección */
.ern-app #mapa .ern-sec-title+p,
.ern-app #mapa .text-secondary,
.ern-app #explorar .ern-sec-title+p {
  line-height: 1.2;
}



/* HERO estilo tapa de la guía */
.ern-app .ern-hero {
  background: #fff;
  padding: 0;
}

.ern-app .ern-deco {
  display: flex;
  width: 100%;
  overflow: hidden;
}

/* cada forma conserva su proporción real (2000:212.86), la altura sale sola
   del ancho: nunca se deforma, la franja solo se hace más baja al comprimirse */
.ern-app .ern-forma {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  aspect-ratio: 2000 / 212.86;
  display: block;
  fill: currentColor;
}

/* en mobile, para que no queden demasiado bajas, cada forma toma 55% del
   ancho y se superponen un 10% en el centro */
@media (max-width: 767px) {
  .ern-app .ern-forma {
    flex: 0 0 55%;
  }

  .ern-app .ern-forma+.ern-forma {
    margin-left: -10%;
  }
}

/* la superior es la misma forma volteada 180° */
.ern-app .ern-deco-top .ern-forma {
  transform: rotate(180deg);
}

.ern-app .ern-logo {
  width: clamp(160px, 20vw, 240px);
  height: auto;
  display: block;
  margin-left: 3rem;
}

/* escritorio: el bloque "Guía | Institutos…" corrido a la derecha */
@media (min-width: 768px) {
  .ern-app .ern-hero .justify-content-md-start {
    padding-left: 3rem;
    flex-wrap: nowrap !important;
  }
}

.ern-app .ern-estu {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-weight: 600;
  line-height: .50;
  letter-spacing: -.02em;
}

.ern-app .ern-tilde {
  font-family: 'Figtree', sans-serif;
  color: #6abd4f;
  font-size: .52em;
  font-weight: 700;
  display: inline-block;
  line-height: 1;
  margin-top: -.15em;
}

.ern-app .ern-guia {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 700;
}

.ern-app .ern-guia-icon {
  width: clamp(28px, 2.6vw, 38px);
  height: auto;
}

.ern-app .ern-filtro-icon {
  width: clamp(20px, 3.4vw, 30px);
  height: auto;
}

.ern-app .ern-guia-sep {
  width: 3px;
  align-self: stretch;
  background: #111;
}

.ern-app .ern-guia-desc {
  font-size: clamp(.85rem, 1.1vw, 1rem);
}

.ern-app .ern-stat-chip {
  background: #d7d7d7;
  border: none;
  padding: .55rem 1.4rem;
  font-weight: 700;
  font-size: 1rem;
  flex: 1 1 auto;
  text-align: center;
}

.ern-app .ern-stat-chip b {
  color: #111;
  font-weight: 700;
}

.ern-app .ern-chips-bar {
  margin-top: 10px;
}

.ern-app .ern-btn-guia {
  background: #6abd4f;
  color: #111;
  font-weight: 900;
  font-size: 1.05rem;
  padding: .55rem 1.4rem;
  text-decoration: none;
  transition: background .15s;
}

.ern-app .ern-btn-guia:hover {
  background: #549a3d;
  color: #111;
}

.ern-app .ern-btn-guia-label {
  font-weight: 600;
  margin-right: -4px;
}

/* MAPA */
.ern-app #mapa-svg {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ern-app .ern-map-card {
  background: #ebebeb;
  border: 1px solid var(--rn-border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.ern-app .ern-map-wrap {
  position: relative;
  touch-action: none;
}

.ern-app .ern-map-wrap.ern-panning {
  cursor: grabbing;
}

.ern-app .ern-zoom-ctrls {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  z-index: 5;
}

.ern-app .ern-zoom-ctrls button {
  width: 35px;
  height: 35px;
  border: 1px solid var(--rn-border);
  border-radius: 0px;
  background: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.ern-app .ern-zoom-ctrls button:active {
  background: var(--rn-green);
  border-color: var(--rn-green);
}

.ern-app .ern-region-path {
  stroke: #fff;
  stroke-width: 2;
  stroke-opacity: 50%;
  transition: filter .2s, opacity .2s;
  cursor: pointer;
}

.ern-app .ern-region-path.ern-dim {
  opacity: .3;
}

.ern-app .ern-city-dot {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.ern-app .ern-city-dot:focus-visible circle.ern-core {
  stroke: var(--rn-blue-deep);
  stroke-width: 2;
}

.ern-app .ern-city-dot circle.ern-core {
  fill: #fff;
  stroke: #333;
  stroke-width: 2;
  transition: r .15s;
}

.ern-app .ern-city-dot:hover circle.ern-core,
.ern-app .ern-city-dot:focus circle.ern-core {
  r: 16;
  stroke: var(--rn-green-dark);
}

.ern-app .ern-city-dot text {
  font-size: 30px;
  font-weight: 700;
  fill: #222;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 9;
  stroke-linejoin: round;
  pointer-events: none;
}

.ern-app .ern-city-dot.ern-pulse circle.ern-core {
  animation: ern-pulse 1s ease-out 3;
}

@keyframes ern-pulse {
  0% {
    stroke-width: 5
  }

  50% {
    stroke-width: 16;
    stroke: var(--rn-green)
  }

  100% {
    stroke-width: 5
  }
}

.ern-app .ern-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 0px;
  display: inline-block;
}



.ern-app #buscador {
  border-radius: 0;
}

.ern-app .ern-filter-pill {
  border: 1px solid var(--rn-border);
  border-radius: 0px;
  background: #fff;
  font-weight: 700;
  font-size: .82rem;
  padding: .35rem .9rem;
  transition: all .15s;
}

.ern-app .ern-filter-pill:hover {
  border-color: var(--rn-green-dark);
}

.ern-app .ern-filter-pill.active {
  background: var(--rn-green-dark);
  color: #fff;
  border-color: var(--rn-green-dark);
}

.ern-app .ern-filter-pill.ern-area-pill.active {
  background: var(--rn-blue);
  border-color: var(--rn-blue);
  color: #fff;
}

.ern-app .ern-card-carrera {
  border: 1px solid var(--rn-border);
  border-radius: 0px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  transition: box-shadow .15s;
}

.ern-app .ern-card-carrera:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

.ern-app .ern-badge-tipo {
  border-radius: 0px;
  font-weight: 700;
}

.ern-app .ern-badge-ciudad {
  background: #fff;
  color: var(--rn-blue-deep);
  border: 1px solid var(--rn-blue-light);
  border-radius: 0px;
  cursor: pointer;
  font-weight: 700;
}

.ern-app .ern-badge-ciudad:hover {
  background: var(--rn-blue);
  border-color: var(--rn-blue);
  color: #fff;
}

/* REGIONES */
.ern-app .ern-region-card {
  border: 1px solid var(--rn-border);
  border-radius: 0px;
  background: #fff;
  border-top: 5px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* OFFCANVAS */
.ern-app .offcanvas {
  border-left: 1px solid var(--rn-border);
}

.ern-app .ern-oc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.5rem;
}

/* "Zona X": texto oscuro, la región en negrita (via <strong>) */
.ern-app .ern-oc-zona {
  color: #111;
  font-size: .95rem;
  line-height: 1.2;
}

/* nombre de ciudad grande y blanco */
.ern-app .ern-oc-titulo {
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  margin: 0;
}

/* X de cerrar, negra, sin fondo */
.ern-app #ocBody {
  padding: 0;
}

.ern-app .ern-oc-close {
  background: transparent;
  border: none;
  color: #111;
  padding: .1rem;
  line-height: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.ern-app .ern-inst-header {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  color: #111;
}

.ern-app .accordion-button {
  font-weight: 700;
}

.ern-app .accordion-button {
  background: #ebebeb;
}

.ern-app .accordion-button:not(.collapsed) {
  background: #ebebeb;
  color: var(--rn-ink);
  box-shadow: none;
}

.ern-app .accordion-item {
  border: none !important;
}

.ern-app .accordion-button {
  padding: 1rem 1.25rem;
}

.ern-app .accordion-body {
  padding: 1.25rem;
}

.ern-app .accordion {
  --bs-accordion-bg: #fff;
  --bs-accordion-active-bg: #ebebeb;
  --bs-accordion-btn-bg: #ebebeb;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
}

.ern-app .accordion-item,
.ern-app .accordion-button,
.ern-app .accordion-item:first-of-type,
.ern-app .accordion-item:last-of-type,
.ern-app .accordion-item:first-of-type .accordion-button,
.ern-app .accordion-item:last-of-type .accordion-button {
  border-radius: 0;
}

.ern-app #ocBody .accordion,
.ern-app #ocBody .accordion-item,
.ern-app #ocBody .accordion-collapse,
.ern-app #ocBody .ern-oc-body,
.ern-app #ocBody .accordion-body {
  background-color: #fff !important;
}

.ern-app .ern-list-carrera {
  border-left: 2px solid #333;
  padding-left: .85rem;
  margin-bottom: 1.1rem;
}

.ern-app footer {
  background: #111;
  color: #ccc;
  border-top: 4px solid var(--rn-green);
}

.ern-app footer a {
  color: var(--rn-green);
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ===== Explorá por interés (rediseño según captura) ===== */
.ern-app .ern-counter {
  font-size: .92rem;
  line-height: 1.2;
}

.ern-app .ern-counter b {
  font-weight: 700;
}

.ern-app .ern-counter-sep {
  width: 2px;
  align-self: stretch;
  background: #111;
}

.ern-app .ern-search-wrap {
  position: relative;
}

.ern-app .ern-search-wrap input {
  width: 100%;
  background: #d7d7d7;
  border: none;
  border-radius: 0;
  padding: .8rem 3.4rem .8rem 1rem;
  font-size: 1rem;
  font-family: inherit;
}

.ern-app .ern-search-wrap input::placeholder {
  color: #8a8a8a;
}

.ern-app .ern-search-wrap input:focus {
  outline: 2px solid var(--rn-green);
}

.ern-app .ern-search-icon {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c3c3c3;
  border-radius: 0;
  color: #333;
}

.ern-app .ern-filter-pill {
  border: none;
  border-radius: 0px;
  background: #d7d7d7;
  color: #111;
  font-weight: 700;
  font-size: .9rem;
  padding: .5rem 1.3rem;
  transition: all .15s;
}

.ern-app .ern-filter-pill:hover {
  background: #c3c3c3;
  border-color: transparent;
}

.ern-app .ern-filter-pill.active {
  background: #333;
  color: #fff;
  border-color: transparent;
}

.ern-app .ern-tipo-pill {
  background: var(--rn-green);
  color: #111;
}

.ern-app .ern-tipo-pill:hover {
  background: var(--rn-green-dark);
  color: #fff;
}

.ern-app .ern-tipo-pill.active {
  background: var(--rn-green-dark);
  color: #fff;
}

.ern-app .ern-card-carrera {
  border: 1px solid #c9c9c9;
  border-radius: 0;
  box-shadow: none;
}

.ern-app .ern-card-carrera:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}

.ern-app .ern-badge-tipo {
  background: var(--rn-green);
  color: #111;
  border-radius: 0px;
  font-weight: 700;
}

.ern-app .ern-badge-anios {
  background: #d7d7d7;
  color: #111;
  border-radius: 0px;
  font-weight: 700;
}

.ern-app .ern-se-dicta {
  color: #8a8a8a;
  font-size: .85rem;
  margin-bottom: .25rem;
}

.ern-app .ern-badge-ciudad {
  background: transparent;
  border: none;
  color: var(--rn-green);
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  font-size: .9rem;
}

.ern-app .ern-badge-ciudad:hover {
  background: transparent;
  color: var(--rn-green-dark);
  text-decoration: underline;
}

.ern-app .ern-vermas {
  background: transparent;
  border: none;
  color: #111;
  padding: .25rem .75rem;
  transition: transform .2s;
}

.ern-app .ern-vermas.abierto {
  transform: rotate(180deg);
}

/* ===== HERO en mobile (≤767px) ===== */
@media (max-width: 767px) {

  /* título a la izquierda, sin centrar */
  .ern-app .ern-hero .text-center.text-md-start {
    text-align: left !important;
  }

  .ern-app .ern-logo {
    width: clamp(180px, 55vw, 240px);
    margin-left: .25rem;
  }

  .ern-app .ern-tilde {
    font-size: .5em;
  }

  /* bloque "Guía | Institutos…" en una sola línea (como escritorio), pero
     debajo del título: Guía + separador vertical + descripción, lado a lado */
  .ern-app .ern-hero .justify-content-center.justify-content-md-start {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  .ern-app .ern-guia {
    font-size: 1.4rem;
    white-space: nowrap;
  }

  .ern-app .ern-guia-icon {
    width: 28px;
  }

  .ern-app .ern-guia-sep {
    display: block;
    width: 3px;
    height: auto;
    align-self: stretch;
    display: none;
  }

  .ern-app .ern-guia-desc {
    font-size: .8rem;
    padding-left: 20px;
  }

  /* chips: 5 en dos filas (3 + 2), el botón va en una tercera fila aparte */
  .ern-app #statChips {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr);
    gap: .5rem;
  }

  .ern-app .ern-stat-chip {
    flex: initial;
    width: 100%;
  }

  .ern-app #statChips .ern-stat-chip:nth-child(1),
  .ern-app #statChips .ern-stat-chip:nth-child(2),
  .ern-app #statChips .ern-stat-chip:nth-child(3) {
    grid-column: span 2;
  }

  /* fila 1: 3 chips */
  .ern-app #statChips .ern-stat-chip:nth-child(4),
  .ern-app #statChips .ern-stat-chip:nth-child(5) {
    grid-column: span 3;
  }

  /* fila 2: 2 chips */

  /* botón de descarga a ancho completo, más alto */
  .ern-app .ern-btn-guia {
    padding: .8rem 1.4rem;
  }
}