/**
 * Morphy — header y pie de marca en TODO el sitio (Drunel, 2026-10-23).
 *
 * Lo carga el snippet "Header y pie de marca (Drunel)" (espejo: snippets/header-pie-marca.php) en todas las páginas,
 * con inc/header-marca.php e inc/footer-marca.php. Oculta el header y el pie del Theme Builder de Divi (no se
 * borran: apagar el snippet los devuelve). Antes vivía en casa-marca.css, solo en Morphy en Casa.
 *
 * Header en Azul Uva (decisión del director, 23-oct: Morphy prefiere lo morado) con logo blanco, menú blanco y la
 * página activa subrayada en turquesa. El panel del celular sigue blanco. La cinta de la promoción (snippet 9)
 * conserva su morado oscuro #2E0C80 para separarse del header.
 */
@font-face { font-family: "Aeonik Bold"; font-display: swap; src: url("/wp-content/uploads/et-fonts/Aeonik-Bold-1.otf") format("opentype"); }
@font-face { font-family: "Aeonik Medium"; font-display: swap; src: url("/wp-content/uploads/et-fonts/Aeonik-Medium-1.otf") format("opentype"); }
@font-face { font-family: "Aeonik Regular"; font-display: swap; src: url("/wp-content/uploads/et-fonts/Aeonik-Regular-1.otf") format("opentype"); }
/* ================= Header de marca (inc/header-marca.php) — 17-oct; en Uva desde el 23-oct (al final) ================= */
/* Reemplaza al header del Theme Builder de Divi, que se oculta. */
.et-l--header { display: none !important; }

.hx, .hx-panel { font-family: "Aeonik Regular", "Helvetica Neue", Arial, sans-serif; }
.hx { position: relative; z-index: 50; background: #fff; box-shadow: 0 1px 0 #EAE3F8; }
.hx__envoltura { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hx__logo { display: block; flex: 0 0 auto; }
.hx .hx__logo-img, .hx-panel .hx__logo-img { display: block; height: 44px; width: auto; }
.hx__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); }
.hx__menu > li { position: relative; margin: 0; padding: 0; }
.hx__menu a, .hx__grupo > button {
	position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0;
	font: 16px "Aeonik Medium", sans-serif; color: #5B1EC6; text-decoration: none; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.hx__grupo > button svg { width: 16px; height: 16px; transition: transform .18s ease; }
.hx__grupo.abierto > button svg { transform: rotate(180deg); }
/* Página activa: subrayado turquesa de 3 px bajo el texto (maqueta del manual), nunca un bloque de fondo */
.hx__menu a[aria-current="page"] { font-family: "Aeonik Bold", sans-serif; }
.hx__menu > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: #28FFE5; transform: scaleX(0); transition: transform .18s ease; }
.hx__menu > li > a[aria-current="page"]::after, .hx__menu > li > a:hover::after { transform: scaleX(1); }
.hx__menu a:focus-visible, .hx__grupo > button:focus-visible, .hx__hamburguesa:focus-visible { outline: 3px solid #1484FB; outline-offset: 4px; border-radius: 4px; }
.hx .hx__idioma { padding: 6px 10px; border-radius: 8px; font-family: "Aeonik Bold", sans-serif; font-size: 14px; background: #F1ECFB; }
.hx .hx__idioma::after { display: none; }
.hx__nav .hx__sub { display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 170px; list-style: none; margin: 0; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(27, 13, 58, .14); }
.hx__nav .hx__grupo.abierto .hx__sub { display: block; }
.hx__nav .hx__sub a { display: block; padding: 10px 12px; border-radius: 8px; }
.hx__nav .hx__sub a:hover { background: #F1ECFB; }
.hx__hamburguesa { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; padding: 11px 9px; }
.hx__hamburguesa span { display: block; height: 3px; margin: 4px 0; border-radius: 2px; background: #5B1EC6; }

@media (max-width: 1080px) {
	.hx__nav { display: none; }
	.hx__hamburguesa { display: block; }
	.hx__envoltura { height: 70px; padding: 0 16px; }
	.hx .hx__logo-img { height: 36px; }
}

/* ---------- Panel del celular: entra desde la derecha ---------- */
.hx-velo { position: fixed; inset: 0; z-index: 100000; background: rgba(27, 13, 58, .55); opacity: 0; transition: opacity .25s ease; }
.hx-panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 100001; width: min(88vw, 380px);
	display: flex; flex-direction: column; overflow-y: auto; background: #fff;
	transform: translateX(100%); transition: transform .25s ease;
}
html.hx-abierto .hx-velo { opacity: 1; }
html.hx-abierto .hx-panel { transform: none; }
html.hx-abierto { overflow: hidden; }
.hx-panel__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 20px; border-bottom: 1px solid #EAE3F8; }
.hx-panel .hx__logo-img { height: 34px; }
.hx-panel__cerrar { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: #F1ECFB; color: #5B1EC6; cursor: pointer; }
.hx-panel__cerrar svg { width: 22px; height: 22px; }
.hx-panel__menu { list-style: none; margin: 0; padding: 12px 12px 0; }
.hx-panel__menu li { margin: 0; }
.hx-panel__menu > li > a, .hx-panel__menu .hx__grupo > button {
	display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 12px; border: 0; border-radius: 12px;
	font: 19px "Aeonik Bold", sans-serif; color: #5B1EC6; text-decoration: none; background: none; text-align: left; cursor: pointer;
}
.hx-panel__menu > li > a:hover, .hx-panel__menu .hx__grupo > button:hover { background: #F1ECFB; }
.hx-panel__menu > li > a[aria-current="page"] { background: #F1ECFB; box-shadow: inset 4px 0 0 #28FFE5; }
.hx-panel__menu .hx__grupo > button svg { width: 20px; height: 20px; transition: transform .18s ease; }
.hx-panel__menu .hx__grupo.abierto > button svg { transform: rotate(180deg); }
/* Ingresar: las dos puertas, como botones */
.hx-panel__menu .hx__sub { display: none; list-style: none; margin: 4px 0 8px; padding: 0 12px; gap: 8px; grid-template-columns: 1fr 1fr; }
.hx-panel__menu .hx__grupo.abierto .hx__sub { display: grid; }
.hx-panel__menu .hx__sub a { display: block; padding: 12px; border-radius: 12px; text-align: center; font: 16px "Aeonik Bold", sans-serif; color: #5B1EC6; text-decoration: none; box-shadow: inset 0 0 0 2px #5B1EC6; }
.hx-panel__menu .hx__idioma { justify-content: flex-start !important; font-size: 16px !important; color: #4F4866 !important; }
.hx-panel__pie { position: relative; margin-top: auto; padding: 24px 20px 28px; background: #F1ECFB; overflow: hidden; }
.hx-panel__pie .mb-boton { display: flex !important; justify-content: center; position: relative; z-index: 1; }
.hx-panel__franjas { position: absolute; right: -14px; bottom: -18px; width: 86px; height: 86px; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .hx-panel, .hx-velo, .hx__menu > li > a::after { transition: none; } }
@media (min-width: 1081px) { .hx-panel, .hx-velo { display: none !important; } }
.hx-panel[hidden] { display: none; }

/* Con el panel abierto, LuzIA (iframe fijo con z-index máximo) se oculta para no tapar el menú */
html.hx-abierto iframe[src*="luzia"] { visibility: hidden !important; }
.hx-panel.mp { background: #fff; }

/* Panel del celular (17-oct): "Ingresar" sin desplegable y sin botón de prueba gratis (el menú es de todo el sitio) */
.hx-panel__menu .hx__grupo--fijo { margin-top: 8px; padding: 8px 12px 4px; }
.hx-panel__titulo { margin: 0 0 8px; font: 13px "Aeonik Bold", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #4F4866; }
.hx-panel__menu .hx__grupo--fijo .hx__sub { display: grid; margin: 0 0 8px; padding: 0; }
.hx-panel__menu { padding-bottom: 24px; }

/* Menú en Tinta y no en Uva (17-oct): el Uva queda para la página activa y los botones, que así sí resaltan */
.hx__menu a, .hx__grupo > button { color: #1B0D3A; }
.hx__menu > li > a:hover, .hx__grupo > button:hover, .hx__grupo.abierto > button { color: #5B1EC6; }
.hx__menu a[aria-current="page"] { color: #5B1EC6; }
.hx .hx__idioma { color: #1B0D3A; }
.hx__nav .hx__sub a { color: #1B0D3A; }
.hx__nav .hx__sub a:hover { color: #5B1EC6; }
.hx-panel__menu > li > a, .hx-panel__menu .hx__grupo > button { color: #1B0D3A; }
.hx-panel__menu > li > a:hover { color: #5B1EC6; }
.hx-panel__menu > li > a[aria-current="page"] { color: #5B1EC6; }
/* Estudiante (el más usado) relleno; Maestro con borde */
.hx-panel__menu .hx__sub li:first-child a { color: #fff; background: #5B1EC6; box-shadow: none; }
.hx-panel__menu .hx__sub li:first-child a:hover { background: #4A16A8; }
.hx-panel__menu .hx__sub li + li a:hover { background: #F1ECFB; }
.hx-panel__menu .hx__idioma { color: #1B0D3A !important; }

/* Panel del celular, versión con íconos (17-oct): ícono de línea Uva + texto Tinta + chevrón; activa con punto turquesa */
.hx-panel__menu > li > a { justify-content: flex-start !important; gap: 14px; font-size: 18px !important; padding: 13px 12px !important; }
.hx-panel__ico { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; color: #5B1EC6; }
.hx-panel__ico svg { width: 24px; height: 24px; }
.hx-panel__txt { flex: 1; }
.hx-panel__chev { width: 18px; height: 18px; flex: 0 0 18px; color: #9A93AE; }
.hx-panel__menu > li > a[aria-current="page"] { box-shadow: none !important; position: relative; padding-left: 26px !important; }
.hx-panel__menu > li > a[aria-current="page"]::before { content: ""; position: absolute; left: 9px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #28FFE5; }
.hx-panel__menu > li > a[aria-current="page"] .hx-panel__chev { color: #5B1EC6; }
.hx-panel__menu .hx__grupo--fijo { margin-top: 10px; padding-top: 18px; border-top: 1px solid #EAE3F8; }
.hx-panel__menu .hx__grupo--fijo .hx__sub a { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hx-panel__menu .hx__grupo--fijo .hx__sub .hx-panel__ico { width: 20px; height: 20px; flex-basis: 20px; color: inherit; }
.hx-panel__menu .hx__grupo--fijo .hx__sub .hx-panel__ico svg { width: 20px; height: 20px; }
.hx-panel__menu .hx__idioma-li { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EAE3F8; }
.hx-panel__menu .hx__idioma { display: flex !important; align-items: center; gap: 14px; padding: 13px 12px !important; background: none !important; font: 16px "Aeonik Bold", sans-serif !important; }
.hx-panel__mariposa { display: block; width: 92px; height: auto; margin: auto 20px 24px auto; animation: mb-flotar 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hx-panel__mariposa { animation: none; } }

/* Desplegable de escritorio: Estudiante y Maestro con su ícono, como en el celular */
.hx__nav .hx__sub a { display: flex; align-items: center; gap: 10px; }
.hx__nav .hx__sub .hx-panel__ico { width: 20px; height: 20px; flex: 0 0 20px; color: #5B1EC6; }
.hx__nav .hx__sub .hx-panel__ico svg { width: 20px; height: 20px; }

/* ================= Pie de página de marca (inc/footer-marca.php) — 17-oct ================= */
/* Reemplaza al pie del Theme Builder de Divi. Azul Uva: el último bloque de cada página nunca es Uva. */
.et-l--footer { display: none !important; }
.px { background: #5B1EC6; color: #fff; font-family: "Aeonik Regular", "Helvetica Neue", Arial, sans-serif; }
.px__envoltura { max-width: 1240px; margin: 0 auto; padding: 64px 32px 48px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.px .px__logo-img { display: block; height: 42px; width: auto; }
.px__marca p { margin: 18px 0 0; max-width: 32ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .88); }
.px .px__titulo { margin: 0 0 14px; font: 13px "Aeonik Bold", sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #28FFE5; }
.px__marca .px__titulo { margin-top: 26px; }
.px__col ul, .px__redes, .px__idiomas { list-style: none; margin: 0; padding: 0; }
.px__col li { margin: 0 0 10px; }
.px__col a, .px__privacidad { font: 15px "Aeonik Regular", sans-serif; color: rgba(255, 255, 255, .9); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; line-height: 1.45; }
.px__col a:hover, .px__privacidad:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #28FFE5; }
.px a:focus-visible, .px button:focus-visible { outline: 3px solid #28FFE5; outline-offset: 3px; border-radius: 4px; }
.px__redes { display: flex; gap: 10px; }
.px__redes a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .12); }
.px__redes a:hover { color: #5B1EC6; background: #28FFE5; }
.px__redes svg { width: 22px; height: 22px; }
.px__franja { border-top: 1px solid rgba(255, 255, 255, .16); }
.px__envoltura--franja { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 20px; padding-bottom: 22px; }
.px__franja p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .8); }
.px__franja a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(40, 255, 229, .6); }
.px__idiomas { display: flex; gap: 6px; }
.px__idiomas a { display: inline-block; padding: 6px 10px; border-radius: 8px; font: 13px "Aeonik Bold", sans-serif; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .12); }
.px__idiomas a[aria-current="true"] { color: #5B1EC6; background: #28FFE5; }
@media (max-width: 900px) { .px__envoltura { grid-template-columns: repeat(3, minmax(0, 1fr)); } .px__marca { grid-column: 1 / -1; } }
@media (max-width: 600px) {
	.px__envoltura { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 48px 16px 36px; }
	.px__col:last-child { grid-column: 1 / -1; }
	.px__envoltura--franja { flex-direction: column; align-items: flex-start; padding-top: 18px; }
}

/* Pie: títulos en Turquesa al 30 % (tono del manual, como el cierre): no vibra sobre el Uva (17-oct) */
.px .px__titulo { color: #BEFFF7; }

.px__idiomas a[aria-current="true"] { background: #BEFFF7; }

.hx-panel__menu .hx__grupo--fijo .hx__sub:has(> li:nth-child(3)) { grid-template-columns: 1fr; }

/* ================= Header en Azul Uva (23-oct) ================= */
.hx { background: #5B1EC6; box-shadow: none; }
.hx .hx__menu > li > a, .hx .hx__grupo > button, .hx .hx__menu a[aria-current="page"] { color: #fff; }
.hx .hx__menu > li > a:hover, .hx .hx__grupo > button:hover, .hx .hx__grupo.abierto > button { color: #fff; }
.hx .hx__menu > li > a::after { background: #28FFE5; }
.hx .hx__idioma { color: #fff; background: rgba(255, 255, 255, .16); }
.hx .hx__idioma:hover { background: rgba(255, 255, 255, .26); }
.hx .hx__hamburguesa span { background: #fff; }
.hx .hx__menu a:focus-visible, .hx .hx__grupo > button:focus-visible, .hx .hx__hamburguesa:focus-visible { outline-color: #28FFE5; }
/* El desplegable de Ingresar sigue blanco, con texto Tinta */
.hx .hx__nav .hx__sub a { color: #1B0D3A; }
.hx .hx__nav .hx__sub a:hover { color: #5B1EC6; }