/* ==========================================================================
   ESCOLARES MX · CAPA DE DISEÑO "MIZZLE"  (mizzle.css)
   --------------------------------------------------------------------------
   Recrea localmente el lenguaje visual del tema Mizzle/Webestica
   (tipografía Instrument Sans, tarjetas con ícono flotante, "eyebrow" en
   píldora, enlaces con flecha, secciones oscuras decoradas, footer oscuro)
   PERO conservando la marca verde de Escolares MX (#73AC43) y SIN depender
   de servidores externos.

   Se carga DESPUÉS de bootstrap.litera + style.css en index.html, así que el
   orden de origen gana ante reglas de igual especificidad.
   ========================================================================== */

:root
{
	--emx-green:        #73AC43;
	--emx-green-d:      #5f9636;
	--emx-green-dd:     #4a7a2a;
	--emx-green-rgb:    115, 172, 67;
	--emx-heading:      #16201a;   /* casi negro, ligeramente cálido */
	--emx-dark:         #16191c;   /* superficies oscuras (footer, secciones) */
	--emx-body:         #5b6770;   /* texto secundario tipo Mizzle */
	--emx-light:        #f4f6f2;   /* gris muy claro de fondos */
	--emx-border:       #e9ece6;

	/* Bootstrap usa estas variables en varios componentes */
	--bs-primary:       #73AC43;
	--bs-primary-rgb:   115, 172, 67;
	--bs-link-color:    #5f9636;
	--bs-link-color-rgb:95, 150, 54;
	--bs-link-hover-color: #4a7a2a;
	--bs-border-radius: .55rem;
	--bs-border-radius-lg: .85rem;
	--bs-border-radius-xl: 1.1rem;
}

/* ──────────────────────────────────────────────────────────────
   TIPOGRAFÍA · Instrument Sans en títulos, Inter en cuerpo.
   El prefijo `html` + los :not(...) elevan la especificidad por
   encima de la regla universal !important de style.css.
   ────────────────────────────────────────────────────────────── */
html h1, html h2, html h3, html h4, html h5, html h6,
html .h1, html .h2, html .h3, html .h4, html .h5, html .h6,
html .display-1, html .display-2, html .display-3,
html .display-4, html .display-5, html .display-6,
html .navbar-brand, html .btn, html .lead
{
	font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Color/peso de títulos con ESPECIFICIDAD BAJA a propósito: cualquier
   utilidad de color (.text-white, .text-light, .text-primary…) la sobre-
   escribe sin esfuerzo, así no rompemos títulos sobre fondos oscuros en
   vistas interiores. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6
{
	color: var(--emx-heading);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.2;
}

.display-1, .display-2, .display-3,
.display-4, .display-5
{
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.1;
}

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3, [data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6
{
	color: #f1f5f2;
}

.heading-color { color: var(--emx-heading) !important; }
[data-bs-theme="dark"] .heading-color { color: #f1f5f2 !important; }

/* ──────────────────────────────────────────────────────────────
   COLOR PRIMARIO → verde de marca (recolorea botones/badges/bg)
   ────────────────────────────────────────────────────────────── */
.btn-primary
{
	--bs-btn-bg: var(--emx-green);
	--bs-btn-border-color: var(--emx-green);
	--bs-btn-hover-bg: var(--emx-green-d);
	--bs-btn-hover-border-color: var(--emx-green-d);
	--bs-btn-active-bg: var(--emx-green-dd);
	--bs-btn-active-border-color: var(--emx-green-dd);
	--bs-btn-disabled-bg: var(--emx-green);
	--bs-btn-disabled-border-color: var(--emx-green);
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
}
.btn-outline-primary
{
	--bs-btn-color: var(--emx-green-d);
	--bs-btn-border-color: var(--emx-green);
	--bs-btn-hover-bg: var(--emx-green);
	--bs-btn-hover-border-color: var(--emx-green);
	--bs-btn-active-bg: var(--emx-green-d);
	--bs-btn-active-border-color: var(--emx-green-d);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
}
.bg-primary       { background-color: var(--emx-green) !important; }
.text-primary     { color: var(--emx-green) !important; }
.border-primary   { border-color: var(--emx-green) !important; }
.link-primary     { color: var(--emx-green-d) !important; }
.fill-primary     { fill: var(--emx-green); }
.fill-dark        { fill: var(--emx-dark); }
.fill-white       { fill: #fff; }
.fill-mode        { fill: currentColor; }

.text-primary-hover { transition: color .2s ease; }
.text-primary-hover:hover { color: var(--emx-green) !important; }
.bg-light-hover:hover { background-color: var(--emx-light) !important; }

/* Botones extra del set Mizzle */
.btn-white
{
	--bs-btn-bg: #fff;            --bs-btn-border-color: #fff;
	--bs-btn-color: var(--emx-heading);
	--bs-btn-hover-bg: #f1f3ef;   --bs-btn-hover-border-color: #f1f3ef;
	--bs-btn-hover-color: var(--emx-green-d);
	--bs-btn-active-bg: #e9ece6;  --bs-btn-active-border-color: #e9ece6;
}
.btn { --bs-btn-border-radius: .55rem; font-weight: 600; }
.btn-lg { --bs-btn-border-radius: .7rem; }

/* ──────────────────────────────────────────────────────────────
   ÍCONOS EN CONTENEDOR (icon-sm/md/lg/xl)
   ────────────────────────────────────────────────────────────── */
.icon-sm, .icon-md, .icon-lg, .icon-xl
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	text-align: center;
}
.icon-sm { height: 2rem;    width: 2rem;    font-size: .8rem;  }
.icon-md { height: 2.6rem;  width: 2.6rem;  font-size: 1rem;   }
.icon-lg { height: 3.5rem;  width: 3.5rem;  font-size: 1.35rem;}
.icon-xl { height: 5rem;    width: 5rem;    font-size: 1.8rem; }

/* ──────────────────────────────────────────────────────────────
   ENLACE CON FLECHA (icon-link / icon-link-hover) — estilo BS 5.3
   ────────────────────────────────────────────────────────────── */
.icon-link
{
	display: inline-flex;
	gap: .4rem;
	align-items: center;
	text-decoration: none;
	font-weight: 600;
}
.icon-link > i, .icon-link > .bi { transition: transform .2s ease; }
.icon-link-hover:hover > i, .icon-link-hover:hover > .bi,
.icon-link-hover:focus-visible > i { transform: translateX(.35rem); }

/* ──────────────────────────────────────────────────────────────
   LISTAS SIN BORDE (list-group-borderless)
   ────────────────────────────────────────────────────────────── */
.list-group-borderless .list-group-item
{
	border: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: transparent;
}

/* ──────────────────────────────────────────────────────────────
   CONTENEDORES INTERNOS (inner-container)
   ────────────────────────────────────────────────────────────── */
.inner-container        { max-width: 640px; margin-left: auto; margin-right: auto; }
.inner-container-small  { max-width: 510px; margin-left: auto; margin-right: auto; }

/* ──────────────────────────────────────────────────────────────
   TARJETAS estilo Mizzle
   ────────────────────────────────────────────────────────────── */
.card
{
	--bs-card-border-color: var(--emx-border);
	--bs-card-border-radius: .85rem;
	--bs-card-inner-border-radius: .85rem;
}
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 1.5rem !important; }

/* Tarjeta de servicio / rol. La especificidad .card.emx-service-card:hover
   (0,3,0) supera a la regla global a.card:hover (0,2,1) de style.css, así el
   "lift" Mizzle gana también en las tarjetas que son <a>. */
.emx-service-card { transition: transform .25s ease, box-shadow .25s ease; }
.card.emx-service-card:hover { transform: translateY(-6px); box-shadow: 0 1.5rem 3rem -1.25rem rgba(0,0,0,.28) !important; }

/* ──────────────────────────────────────────────────────────────
   UTILIDADES DE ESPACIADO EXTRA (Bootstrap llega a 5)
   ────────────────────────────────────────────────────────────── */
.py-6 { padding-top: 5rem;  padding-bottom: 5rem;  }
.py-7 { padding-top: 7rem;  padding-bottom: 7rem;  }
.py-8 { padding-top: 9rem;  padding-bottom: 9rem;  }
.pt-6 { padding-top: 5rem;  } .pb-6 { padding-bottom: 5rem; }
.pt-7 { padding-top: 7rem;  } .pb-7 { padding-bottom: 7rem; }
.pt-8 { padding-top: 9rem;  } .pb-8 { padding-bottom: 9rem; }
.pt-9 { padding-top: 11rem; }
.mt-n3 { margin-top: -1rem; }
.mt-n5 { margin-top: -3rem; }
.mt-n7 { margin-top: -5rem; }
.mt-n8 { margin-top: -7rem; }
.mb-n7 { margin-bottom: -5rem; }
.mb-7 { margin-bottom: 7rem; }
.mb-8 { margin-bottom: 9rem; }
.gy-7 { --bs-gutter-y: 6rem; }

@media (min-width: 768px)
{
	.gy-md-7 { --bs-gutter-y: 6rem; }
	.mb-md-7 { margin-bottom: 7rem; }
	.mb-sm-6 { margin-bottom: 5rem; }
	.gy-md-7 > * { padding-top: var(--bs-gutter-y); }
}
@media (min-width: 1200px)
{
	.pt-xl-9 { padding-top: 11rem; }
	.py-xl-8 { padding-top: 9rem; padding-bottom: 9rem; }
}

/* Alturas/anchos fijos puntuales */
.h-40px  { height: 40px; }
.h-100px { height: 100px; }
.h-200px { height: 200px !important; }
.z-index-2 { z-index: 2; }

/* ──────────────────────────────────────────────────────────────
   NAVBAR estilo Mizzle (translúcida con blur, acentos verdes)
   ────────────────────────────────────────────────────────────── */
.navbar.fixed-top
{
	background-color: rgba(255,255,255,.88) !important;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 rgba(20,30,20,.06), 0 8px 24px -18px rgba(0,0,0,.35);
}
.navbar .nav-link
{
	font-weight: 600;
	color: var(--emx-heading);
	transition: color .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active { color: var(--emx-green) !important; }
.navbar .nav-link.text-green { color: var(--emx-green) !important; }
.navbar .btn { font-weight: 700; }

[data-bs-theme="dark"] .navbar.fixed-top
{
	background-color: rgba(17,24,39,.85) !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.05);
}

/* ──────────────────────────────────────────────────────────────
   SECCIÓN OSCURA decorada (bg-dark con SVG de líneas)
   ────────────────────────────────────────────────────────────── */
.emx-section-dark
{
	background-color: var(--emx-dark) !important;
	color: #c7cdc9;
}
.emx-section-dark h1, .emx-section-dark h2, .emx-section-dark h3,
.emx-section-dark h4, .emx-section-dark h5, .emx-section-dark h6
{ color: #fff; }

/* ──────────────────────────────────────────────────────────────
   FOOTER oscuro estilo Mizzle
   ────────────────────────────────────────────────────────────── */
footer.bg-dark
{
	background-color: var(--emx-dark) !important;
	color: #aeb6b1;
}
footer.bg-dark h5, footer.bg-dark h6 { color: #fff; }
footer.bg-dark .nav-link
{
	color: #aeb6b1;
	padding: .3rem 0;
	transition: color .2s ease;
}
footer.bg-dark .nav-link:hover { color: #fff; }
footer.bg-dark .nav-link .text-danger,
footer.bg-dark a .text-danger { color: #ff8a8a !important; }
footer.bg-dark hr { border-color: rgba(255,255,255,.12); opacity: 1; }
footer.bg-dark .text-body { color: #8b938e !important; }
footer.bg-dark .btn-icon
{
	height: 2.2rem; width: 2.2rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #e7ebe8;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
footer.bg-dark .btn-icon:hover
{
	background: var(--emx-green);
	color: #fff;
	transform: translateY(-2px);
}

/* ──────────────────────────────────────────────────────────────
   BOTÓN "VOLVER ARRIBA"
   ────────────────────────────────────────────────────────────── */
.back-top
{
	position: fixed;
	right: 30px;
	bottom: 120px;
	height: 46px;
	width: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--emx-heading);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease;
	z-index: 9990;
}
.back-top:hover { background: var(--emx-green); }
.back-top.show  { opacity: 1; visibility: visible; transform: none; }

/* ──────────────────────────────────────────────────────────────
   "EYEBROW" en píldora (encima de los títulos de sección)
   ────────────────────────────────────────────────────────────── */
.emx-eyebrow
{
	display: inline-block;
	background: var(--emx-light);
	color: var(--emx-heading);
	font-weight: 600;
	font-size: .85rem;
	border-radius: .6rem;
	padding: .5rem 1rem;
}
[data-bs-theme="dark"] .emx-eyebrow { background: #1e293b; color: #e5e7eb; }

/* ──────────────────────────────────────────────────────────────
   AJUSTES GLOBALES
   ────────────────────────────────────────────────────────────── */
/* Ya no hay barra inferior fija: recuperamos el espacio. */
body { padding-bottom: 0 !important; }

@media (prefers-reduced-motion: reduce)
{
	.emx-service-card, .back-top, .icon-link > i,
	.navbar .nav-link, footer.bg-dark .btn-icon { transition: none !important; }
}