/* =====================================================================
   SOY MÉRITO · Marca para el sitio público
   =====================================================================
   El sitio público corre sobre Bootstrap 4 y la hoja de la plantilla
   original, así que no puede usar css/marca.css tal cual: los nombres de
   clase y las variables no coinciden.

   Esta capa hace lo mínimo necesario para que el visitante no perciba dos
   productos distintos al pasar del sitio al área de estudiante:

     · la misma tipografía (IBM Plex)
     · el mismo azul del logo, en lugar del verde petróleo de la plantilla
     · el mismo dorado para las llamadas a la acción

   NO toca la estructura ni el diseño de las secciones. Es una capa de
   pintura, no una reforma. La reforma —migrar a Bootstrap 5 y rehacer la
   portada— es un trabajo aparte.

   Se carga DESPUÉS de css/style.css y css/responsive.css.
   Si no convence, se quita el <link> y todo vuelve atrás.

   Guardar como: css/marca-publico.css
   ===================================================================== */

:root {
  --sm-azul:       #104060;
  --sm-azul-hondo: #0a2c44;
  --sm-dorado:     #e0a810;
  --sm-tinta:      #22333d;
}

/* ---------------------------------------------------------------------
   Tipografía
   ---------------------------------------------------------------------
   La plantilla trae Poppins para todo y Dosis para los títulos. Se
   sustituyen por la misma pareja del área de estudiante, para que el
   cambio de una a otra no se note.
   --------------------------------------------------------------------- */
body,
.btn,
input, select, textarea {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif !important;
  color: var(--sm-tinta);
}

h1, h2, h3,
.custom_heading,
.heading_container h2 {
  font-family: 'IBM Plex Serif', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------
   Color
   ---------------------------------------------------------------------
   La plantilla usa #023b48 (verde petróleo) y #0dc3ff / #21d7ff (cian).
   Ninguno está en el logo. Se reemplazan por el azul y el dorado que sí
   lo están.
   --------------------------------------------------------------------- */

/* El acento de los títulos: era cian, ahora dorado */
.custom_heading span,
.heading_container span { color: var(--sm-dorado) !important; }

/* ---------------------------------------------------------------------
   Barra de navegación
   ---------------------------------------------------------------------
   La plantilla pintaba los enlaces del menú en un tono oscuro, porque su
   barra tenía fondo claro. Al cambiar el fondo a azul marino quedaron
   invisibles: azul oscuro sobre azul oscuro.
   --------------------------------------------------------------------- */
.header_section,
.footer_section,
.hero_area .header_section { background-color: var(--sm-azul) !important; }

/* Se replica la especificidad exacta de la plantilla
   (.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link) para que
   la regla gane sin depender solo de !important. */
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link,
.navbar-nav .nav-link,
.header_section .nav-link,
.custom_nav-container .nav-link {
  color: #fff !important;
  font-weight: 500;
  opacity: 1 !important;
}
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-link:hover,
.custom_nav-container.navbar-expand-lg .navbar-nav .active > .nav-link,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.header_section .nav-link:hover {
  color: var(--sm-dorado) !important;
}

/* El botón "Registrate" del extremo derecho */
.quote_btn-container a {
  color: var(--sm-azul-hondo) !important;
  background: var(--sm-dorado) !important;
  padding: .55rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
}
.quote_btn-container a:hover { background: #c8940a !important; color: #fff !important; }

/* El menú desplegado en celular: separadores para que se lean como lista */
@media (max-width: 991.98px) {
  .navbar-collapse { padding-bottom: .6rem; }
  .navbar-nav .nav-link {
    padding: .78rem .4rem !important;
    border-bottom: 1px solid rgba(255,255,255,.13);
  }
  .navbar-nav .nav-item:last-child .nav-link { border-bottom: 0; }
}

/* El icono de las tres rayas, en blanco */
.navbar-toggler {
  border-color: rgba(255,255,255,.4) !important;
  padding: .35rem .55rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2.4' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(224,168,16,.4); outline: none; }

/* El logo: la versión de letras blancas, para que se lea sobre el azul */
.navbar-brand img {
  height: 46px;
  width: auto;
}
@media (max-width: 575.98px) {
  .navbar-brand img { height: 38px; }
}

.info_section { background-color: var(--sm-azul) !important; }

/* Botones */
.btn-primary,
.quote_btn-container a,
.book_btn a,
.btn_on-hover {
  background-color: var(--sm-azul) !important;
  border-color: var(--sm-azul) !important;
  color: #fff !important;
}
.btn-primary:hover,
.quote_btn-container a:hover,
.book_btn a:hover {
  background-color: var(--sm-azul-hondo) !important;
  border-color: var(--sm-azul-hondo) !important;
}

/* La acción principal de la página: registrarse.
   Es la única que va en dorado, para que se distinga del resto. */
a[href*="registrar"].btn,
.btn-success {
  background-color: var(--sm-dorado) !important;
  border-color: var(--sm-dorado) !important;
  color: var(--sm-azul-hondo) !important;
  font-weight: 600 !important;
}
a[href*="registrar"].btn:hover,
.btn-success:hover {
  background-color: #c8940a !important;
  border-color: #c8940a !important;
  color: #fff !important;
}

/* Enlaces del cuerpo */
.container a:not(.btn):not(.nav-link) { color: var(--sm-azul); }

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.card {
  border: 1px solid #e3e9ed !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(16,64,96,.07), 0 4px 14px rgba(16,64,96,.06) !important;
  overflow: hidden;
}
.card img.card-img-top { object-fit: cover; }

/* ---------------------------------------------------------------------
   Suelo de calidad
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--sm-dorado);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* La mayoría entra desde el celular */
@media (max-width: 767.98px) {
  body { font-size: 15.5px; line-height: 1.65; }
  .custom_heading { font-size: 1.6rem !important; }
  .btn { padding: .65rem 1.2rem !important; }
}