/*
 * Identidad visual de la edición 2026, según el manual de marca de la directiva (oct-2026).
 *
 * La usan las páginas que ve la gente de afuera: la de votación (público y especialistas), el
 * inicio de sesión y el área del especialista (html.jurado). El panel de administración no.
 *
 * - Tipografías del manual (láminas 3 y 4): Ibrand, la principal, en los títulos, las cifras de
 *   la cuenta atrás y el botón de votar, siempre en mayúsculas como en sus aplicaciones
 *   (--m26-fuente-titulos); Mundial, la secundaria, en todo lo demás (los archivos de
 *   assets/fonts que ya usaba el sitio).
 * - Paleta (lámina 5): azul marino #111f4c, azul #003577, noche #000c32 y blanco, tomados de las
 *   muestras (dos de sus etiquetas no coinciden con el color), más el dorado de los títulos de
 *   las aplicaciones (láminas 6 a 9), en degradé de #d7d179 a #eceac5.
 * - Geometría de identidad (lámina 2): placas con dos esquinas opuestas redondeadas (arriba a la
 *   izquierda y abajo a la derecha) y las otras rectas, con un filo de luz que se apaga hacia la
 *   izquierda.
 * - Fondo: el degradé de .fondo-2026 más assets/js/fondo-2026.js (bandas de líneas y destellos).
 */

/* ------------------------------------------------------------------ tipografía */
@font-face {
	font-family: "Mundial";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/MundialLight.otf") format("opentype");
}

@font-face {
	font-family: "Mundial";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/MundialRegular.otf") format("opentype");
}

@font-face {
	font-family: "Mundial";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/MundialBold.otf") format("opentype");
}

/* Ibrand tiene un solo estilo (400): lo que la usa va con peso 400, o el navegador inventa una
   negrita. Solo los nombres de categoría van en 700 a propósito (pedido del dueño) */
@font-face {
	font-family: "Ibrand";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Ibrand-Regular.otf") format("opentype");
}

/* ------------------------------------------------------------------ tokens */
:root {
	--m26-noche: #000c32;
	--m26-marino: #111f4c;
	--m26-azul: #003577;
	--m26-tinta: #001350;              /* texto sobre dorado */
	--m26-blanco: #ffffff;
	--m26-texto: #eef2fb;              /* texto corrido: casi blanco */
	--m26-tenue: #b7c3df;              /* texto secundario */
	--m26-dorado: #ded995;
	--m26-dorado-oscuro: #d7d179;
	--m26-dorado-claro: #eceac5;
	--m26-degrade-dorado: linear-gradient(90deg, var(--m26-dorado-oscuro), var(--m26-dorado-claro));
	--m26-placa: linear-gradient(165deg, #0b3a92 0%, #052a74 30%, #001b60 65%, #001350 100%);
	--m26-esquina: 1.125rem;
	--m26-esquina-chica: .625rem;
	--m26-sombra: 0 14px 36px rgba(0, 6, 30, .5);
	--m26-fuente: "Mundial", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--m26-fuente-titulos: "Ibrand", var(--m26-fuente);
	/* Las mayúsculas de Ibrand quedan .1em por encima del centro de su línea (sube 800, baja 300,
	   mayúsculas de 700 por em): en botones y píldoras el relleno de arriba lleva esto de más y
	   el de abajo, de menos */
	--m26-ajuste-ibrand: .1em;
}

/* ------------------------------------------------------------------ fondo
 * Hijo directo de <body>, detrás de todo (z-index -1). Mide lo que la ventana «grande» (lvh)
 * para que la barra del navegador del celular no lo achique al hacer scroll. El lienzo suma su
 * luz al degradé (plus-lighter; screen donde no exista), por eso el contenedor aísla la mezcla. */
.fondo-2026 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	overflow: hidden;
	pointer-events: none;
	isolation: isolate;
	/* Degradé medido sobre el arte horizontal: claro abajo a la izquierda, casi negro arriba a la derecha */
	background:
		linear-gradient(180deg, rgba(10, 16, 32, .55) 0%, rgba(10, 16, 32, .2) 40%, rgba(10, 16, 32, 0) 55%),
		linear-gradient(0deg, rgba(0, 44, 104, .14) 0%, rgba(0, 44, 104, 0) 45%),
		radial-gradient(70% 90% at 0% 90%, rgba(0, 78, 152, .55) 0%, rgba(0, 78, 152, 0) 70%),
		linear-gradient(90deg, #004283 0%, #002e64 25%, #021c43 50%, #0c1325 75%, #0c101c 100%);
}

@media (orientation: portrait) {
	.fondo-2026 {
		background:
			linear-gradient(180deg, rgba(8, 14, 30, .6) 0%, rgba(8, 14, 30, 0) 26%),
			radial-gradient(90% 40% at 0% 100%, rgba(52, 78, 128, .45) 0%, rgba(52, 78, 128, 0) 75%),
			linear-gradient(90deg, #004284 0%, #002e65 25%, #001f4d 50%, #01163a 75%, #05112b 100%);
	}
}

.fondo-2026 canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	transition: opacity .9s ease;
}

@supports (mix-blend-mode: plus-lighter) {
	.fondo-2026 canvas {
		mix-blend-mode: plus-lighter;
	}
}

/* Mientras se lee contenido largo, las bandas a un tercio (lo decide data-atenuar) */
.fondo-2026--tenue canvas {
	opacity: .32;
}

/* ------------------------------------------------------------------ página con la marca */
html.marca-2026 {
	color-scheme: dark;
	background: var(--m26-noche);
}

/* Bootstrap y Tailwind ya lo traen; el inicio de sesión no carga ninguno de los dos. Sin
 * especificidad (:where), como el de Bootstrap: le gana lo que declare cada componente, como
 * los íconos de SweetAlert2, que se dibujan en content-box */
:where(html.marca-2026) *,
:where(html.marca-2026) *::before,
:where(html.marca-2026) *::after {
	box-sizing: border-box;
}

html.marca-2026 body {
	margin: 0;
	background: transparent;
	color: var(--m26-texto);
	font-family: var(--m26-fuente);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[x-cloak] {
	display: none !important;
}

/* ------------------------------------------------------------------ piezas */

/* Placa: la geometría de identidad. border-radius de dos valores: el primero va arriba a la
   izquierda y abajo a la derecha; el segundo, en las otras dos esquinas. */
.m26-placa {
	position: relative;
	border-radius: var(--m26-esquina) 0;
	background: var(--m26-placa);
	box-shadow: var(--m26-sombra);
}

/* Filo de luz: un borde de 1.5 px pintado con un degradé que nace en el lado derecho y se
   apaga hacia la izquierda (máscara: solo se ve el anillo del padding) */
.m26-placa::after,
html.marca-2026 .services .icon-box::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 1.5px;
	border-radius: inherit;
	background: linear-gradient(to left, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, 0) 85%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Lo que va adentro de una placa queda sobre el filo */
.m26-placa > * {
	position: relative;
	z-index: 2;
}

.m26-dorado {
	color: var(--m26-dorado);
	background: var(--m26-degrade-dorado);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
	.m26-dorado {
		background: none;
		-webkit-text-fill-color: currentColor;
	}
}

.m26-etiqueta {
	margin: 0 0 .55rem;
	font: 300 .9rem/1.2 var(--m26-fuente);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--m26-tenue);
}

/* Botones: la misma placa, más chica */
.m26-boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.75rem;
	padding: calc(.7rem + var(--m26-ajuste-ibrand)) 1.6rem calc(.7rem - var(--m26-ajuste-ibrand));
	border: 0;
	border-radius: var(--m26-esquina-chica) 0;
	background: linear-gradient(160deg, #1c5fd0, #0a3a99 55%, #062a73);
	box-shadow: 0 8px 22px rgba(0, 10, 45, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
	color: var(--m26-blanco);
	font: 400 .95rem/1.2 var(--m26-fuente-titulos);
	letter-spacing: .06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease, background-color .2s ease;
}

.m26-boton:hover,
.m26-boton:focus {
	color: var(--m26-blanco);
	text-decoration: none;
}

.m26-boton:hover {
	filter: brightness(1.12);
}

.m26-boton:active {
	transform: translateY(1px);
}

.m26-boton:focus-visible,
.m26-enlace:focus-visible,
.m26-red:focus-visible {
	outline: 3px solid var(--m26-dorado);
	outline-offset: 3px;
}

.m26-boton[disabled],
.m26-boton[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	filter: none;
}

.m26-boton--dorado {
	background: var(--m26-degrade-dorado);
	box-shadow: 0 10px 28px rgba(0, 8, 40, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
	color: var(--m26-tinta);
}

.m26-boton--dorado:hover,
.m26-boton--dorado:focus {
	color: var(--m26-tinta);
}

.m26-boton--claro {
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.m26-boton--claro:hover {
	background: rgba(255, 255, 255, .14);
	filter: none;
}

.m26-boton--ancho {
	width: 100%;
}

/* Campos de formulario */
.m26-rotulo {
	display: block;
	margin-bottom: .35rem;
	font: 400 .92rem/1.3 var(--m26-fuente);
	color: var(--m26-tenue);
}

.m26-campo {
	display: block;
	width: 100%;
	min-height: 2.75rem;
	padding: .65rem .9rem;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: var(--m26-esquina-chica) 0;
	background: rgba(0, 10, 45, .55);
	color: var(--m26-blanco);
	font: 400 1rem/1.4 var(--m26-fuente);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.m26-campo::placeholder {
	color: rgba(238, 242, 251, .5);
}

.m26-campo:focus {
	border-color: var(--m26-dorado);
	outline: none;
	box-shadow: 0 0 0 3px rgba(222, 217, 149, .3);
}

.m26-campo[aria-invalid="true"] {
	border-color: #ff9b8a;
}

.m26-error-campo {
	display: block;
	margin-top: .35rem;
	font: 400 .85rem/1.3 var(--m26-fuente);
	color: #ffb4a8;
}

/* Avisos */
.m26-aviso {
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	border-radius: var(--m26-esquina-chica) 0;
	font: 400 .95rem/1.45 var(--m26-fuente);
}

.m26-aviso--error {
	border: 1px solid rgba(255, 130, 110, .55);
	background: rgba(190, 40, 30, .22);
	color: #ffd9d2;
}

.m26-aviso--ok {
	border: 1px solid rgba(110, 220, 170, .5);
	background: rgba(40, 160, 110, .2);
	color: #d4f5e6;
}

.m26-aviso--info {
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .07);
	color: var(--m26-texto);
}

.m26-aviso--dorado {
	border: 1px solid rgba(222, 217, 149, .55);
	background: rgba(222, 217, 149, .12);
	color: var(--m26-dorado-claro);
}

.m26-enlace {
	color: var(--m26-dorado-claro);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.m26-enlace:hover {
	color: var(--m26-blanco);
}

/* ------------------------------------------------------------------ inicio de sesión */
.m26-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 2.5rem 1rem;
}

.m26-login__logo {
	width: min(420px, 78vw);
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(0, 4, 24, .55));
}

.m26-login__tarjeta {
	width: min(26rem, 100%);
	padding: 2rem 1.75rem 1.75rem;
}

.m26-login__titulo {
	margin: 0 0 1.25rem;
	font: 400 1.5rem/1.2 var(--m26-fuente-titulos);
	text-transform: uppercase;
	color: var(--m26-blanco);
}

.m26-login__campo + .m26-login__campo {
	margin-top: 1rem;
}

.m26-login__captcha {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.m26-login__enviar {
	margin-top: 1.5rem;
}

.m26-login__volver {
	margin: 1.25rem 0 0;
	font: 400 .95rem/1.3 var(--m26-fuente);
	text-align: center;
}

/* El logo histórico (2025) es más ancho, trae aire alrededor y no es blanco puro */
.m26-login__logo--ancho {
	width: min(560px, 90vw);
	filter: brightness(15) drop-shadow(2px 4px 8px rgba(0, 0, 0, .36));
}

.m26-cargando {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.m26-girando {
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: var(--m26-blanco);
	border-radius: 50%;
	animation: m26-girar .8s linear infinite;
}

.m26-boton--dorado .m26-girando {
	border-color: rgba(0, 19, 80, .25);
	border-top-color: var(--m26-tinta);
}

@keyframes m26-girar {
	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 60rem) {
	.m26-login {
		flex-direction: row;
		gap: clamp(3rem, 7vw, 7rem);
	}

	.m26-login__logo {
		width: min(460px, 38vw);
	}

	.m26-login__logo--ancho {
		width: min(600px, 44vw);
	}
}

/* ------------------------------------------------------------------ página de votación */
html.marca-2026 a {
	color: var(--m26-dorado-claro);
}

html.marca-2026 a:hover {
	color: var(--m26-blanco);
}

.m26-logo-portada {
	display: block;
	width: min(680px, 86vw);
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 10px 28px rgba(0, 4, 24, .6));
}

/* El logo histórico (2025) es más ancho y trae aire alrededor */
.m26-logo-portada--ancho {
	width: min(1140px, 100%);
	filter: brightness(15) drop-shadow(2px 4px 8px rgba(0, 0, 0, .36));
}

.m26-portada {
	max-width: 50rem;
	margin: 2.25rem auto 0;
	text-align: center;
	color: var(--m26-texto);
	/* Para leerse donde pasa por delante de una banda */
	text-shadow: 0 1px 2px rgba(0, 8, 40, .75), 0 2px 16px rgba(0, 8, 40, .85);
}

/* El dorado es texto recortado sobre un degradé: una text-shadow quedaría por encima y lo
   apagaría, así que su sombra va como filtro */
.m26-portada .m26-dorado {
	text-shadow: none;
	filter: drop-shadow(0 2px 6px rgba(0, 8, 40, .8));
}

/* Palabras con guion del título de una categoría («SUB-23»): sin cortar en el guion */
.m26-junto {
	white-space: nowrap;
}

.m26-portada__titulo {
	margin: 0 0 1rem;
	font: 400 clamp(1.35rem, 1rem + 1.4vw, 2rem)/1.2 var(--m26-fuente-titulos);
	text-transform: uppercase;
	color: var(--m26-blanco);
	text-wrap: balance;
}

.m26-portada__texto {
	margin: 0 0 .9rem;
	font: 400 clamp(1.02rem, .95rem + .35vw, 1.2rem)/1.6 var(--m26-fuente);
	text-wrap: pretty;
}

.m26-portada__texto strong {
	font-weight: 700;
	color: var(--m26-blanco);
}

.m26-portada__subtitulo {
	margin: 2rem 0 0;
	font: 400 1rem/1.3 var(--m26-fuente-titulos);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m26-tenue);
}

/* Cuenta atrás hasta que abre la votación: las 4 placas en una fila o en 2 × 2, nunca 3 y 1.
   Columnas iguales, del ancho de la placa más ancha (por si los días llegan a 3 cifras) */
.m26-cuenta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	width: max-content;
	max-width: 100%;
	margin: 1.25rem auto 0;
}

.m26-cuenta__item {
	min-width: 8.5rem;
	padding: 1.1rem 1rem .95rem;
	text-align: center;
}

@media (min-width: 36rem) {
	.m26-cuenta {
		grid-template-columns: repeat(4, 1fr);
	}

	.m26-cuenta__item {
		min-width: 6.75rem;
	}
}

.m26-cuenta__valor {
	display: block;
	font: 400 clamp(2rem, 1.4rem + 2.4vw, 3.25rem)/1 var(--m26-fuente-titulos);
	color: var(--m26-blanco);
}

/* Cada cifra de la cuenta en una caja del mismo ancho (las de Ibrand miden distinto): las
   escribe el script de la cuenta en main_page.php */
.m26-cifra {
	display: inline-block;
	width: .6em;
	text-align: center;
}

.m26-cuenta__etiqueta {
	display: block;
	margin-top: .5rem;
	font: 400 .78rem/1 var(--m26-fuente);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--m26-tenue);
}

/* Las categorías */
html.marca-2026 .services {
	padding: 4.5rem 0 1rem;
}

html.marca-2026 .section-title.categ {
	padding-bottom: 2rem;
}

/* Con la especificidad de style.css (.section-title p y .section-title.categ h2) o más */
html.marca-2026 .section-title .m26-etiqueta {
	margin: 0 0 .55rem;
	padding: 0;
	font: 300 .9rem/1.2 var(--m26-fuente);
	letter-spacing: .32em;
	color: var(--m26-tenue);
	text-shadow: 0 1px 2px rgba(0, 8, 40, .75), 0 2px 12px rgba(0, 8, 40, .85);
}

html.marca-2026 .section-title .m26-etiqueta::after {
	content: none;
}

html.marca-2026 .section-title.categ .m26-categoria {
	max-width: 52rem;
	margin: 0 auto;
	padding: 0;
	color: var(--m26-dorado);
	background: var(--m26-degrade-dorado);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* En negrita a pedido del dueño: Ibrand no trae Bold, la arma el navegador (no cambia el
	   ancho de las letras, así que los títulos se cortan igual) */
	font: 700 clamp(1.45rem, 1rem + 2vw, 2.6rem)/1.12 var(--m26-fuente-titulos);
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;
	/* Dorado recortado: la sombra va como filtro (ver .m26-portada .m26-dorado) */
	filter: drop-shadow(0 2px 6px rgba(0, 8, 40, .8));
}

/* Tarjetas de nominado (lámina 8): placa con la foto, nombre fino, apellido grueso y club */
html.marca-2026 .elegant-border-box {
	width: 100%;
}

html.marca-2026 .elegant-border::before,
html.marca-2026 .elegant-border-box::before {
	content: none;
}

html.marca-2026 .services .icon-box {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--m26-esquina) 0;
	background: var(--m26-placa);
	box-shadow: var(--m26-sombra);
	text-align: left;
	transform: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

html.marca-2026 .services .icon-box img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: none;
}

html.marca-2026 .services .title {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	margin: 0;
	padding: 3rem .9rem .85rem;
	background: linear-gradient(to top, rgba(0, 12, 50, .95) 0%, rgba(0, 12, 50, .72) 45%, rgba(0, 12, 50, 0) 100%);
	color: var(--m26-blanco);
	font-family: var(--m26-fuente);
	line-height: 1.1;
	text-align: left;
	text-shadow: none;
}

html.marca-2026 .services .title br {
	display: none;
}

html.marca-2026 .services .icon-box .first {
	display: block;
	font-size: clamp(.78rem, .7rem + .3vw, 1rem);
	font-weight: 300;
	letter-spacing: .02em;
}

html.marca-2026 .services .icon-box .second {
	display: block;
	font-size: clamp(1rem, .85rem + .6vw, 1.4rem);
	font-weight: 700;
}

.m26-club {
	display: block;
	margin-top: .3rem;
	font: 400 clamp(.72rem, .65rem + .2vw, .85rem)/1.25 var(--m26-fuente);
	color: var(--m26-tenue);
}

@media (hover: hover) {
	html.marca-2026 .services .icon-box:hover {
		border-color: transparent;
		box-shadow: 0 18px 40px rgba(0, 6, 30, .6), 0 0 0 1px rgba(255, 255, 255, .35);
		transform: translateY(-4px);
	}
}

html.marca-2026 .categ_item {
	outline: none;
}

html.marca-2026 .categ_item:focus-visible .icon-box {
	box-shadow: 0 0 0 3px var(--m26-blanco), var(--m26-sombra);
}

/* Elegido: aro dorado y una insignia con la tilde (dibujada; la página no carga la fuente de
   íconos que usaba style.css para esto) */
html.marca-2026 .icon-box.selected,
html.marca-2026 .services .icon-box.selected:hover {
	border: 0;
	box-shadow: 0 0 0 3px var(--m26-dorado), 0 0 32px rgba(222, 217, 149, .4);
	transform: none;
}

html.marca-2026 .icon-box.selected::before {
	content: "";
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 3;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--m26-dorado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001350' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
	box-shadow: 0 4px 12px rgba(0, 8, 40, .5);
	font-size: 0;
}

/* Prueba para la directiva (vista previa, primera categoría; ver main_page.php): la ficha como
   una sola imagen ya armada (foto, marco y nombre), con su forma y su transparencia. El aro de
   elegida y el de foco siguen el contorno de la imagen (drop-shadow) en vez de la caja */
html.marca-2026 .services .icon-box.m26-ficha-imagen {
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* El filo de luz de la placa: la imagen ya trae su propio marco */
html.marca-2026 .services .icon-box.m26-ficha-imagen::after {
	content: none;
}

html.marca-2026 .services .icon-box.m26-ficha-imagen img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 14px 22px rgba(0, 6, 30, .5));
	transition: filter .25s ease;
}

@media (hover: hover) {
	html.marca-2026 .services .icon-box.m26-ficha-imagen:hover {
		box-shadow: none;
	}
}

html.marca-2026 .categ_item:focus-visible .icon-box.m26-ficha-imagen {
	box-shadow: none;
}

html.marca-2026 .categ_item:focus-visible .icon-box.m26-ficha-imagen img {
	filter: drop-shadow(0 0 1.5px var(--m26-blanco)) drop-shadow(0 0 1.5px var(--m26-blanco)) drop-shadow(0 14px 22px rgba(0, 6, 30, .5));
}

html.marca-2026 .icon-box.m26-ficha-imagen.selected,
html.marca-2026 .services .icon-box.m26-ficha-imagen.selected:hover {
	box-shadow: none;
}

html.marca-2026 .icon-box.m26-ficha-imagen.selected img {
	filter: drop-shadow(0 0 1.5px var(--m26-dorado)) drop-shadow(0 0 1.5px var(--m26-dorado)) drop-shadow(0 0 18px rgba(222, 217, 149, .45));
}

html.marca-2026 .icon-box .youtube-play-btn {
	top: .45rem;
	left: .5rem;
	z-index: 3;
	font-size: 2.3rem;
	filter: drop-shadow(0 3px 8px rgba(0, 4, 24, .55));
}

/* Lo elegido en cada categoría, el aviso de que falta elegir y el botón para quitar.
   La píldora y la × miden lo mismo (2.75rem) y quedan centradas entre sí: el relleno centra la
   línea en ese alto y la baja lo que las mayúsculas de Ibrand quedan por encima del centro de
   su línea. El tamaño de letra gana a los !important de style.css, que en los celulares
   medianos la subían a 22px y mandaban la × a otra fila. */
/* La × siempre al lado de la píldora: la fila no se parte (el style del HTML pide
   wrap-reverse) y, si el nombre es largo, se parte el texto dentro de la píldora */
html.marca-2026 .categorieSel .Selmesages > div {
	flex-wrap: nowrap !important;
	align-items: center;
	margin-bottom: 15px;
}

@media (max-width: 575px) {
	html.marca-2026 .categorieSel .Selmesages > div {
		column-gap: .75rem !important;
	}
}

/* El margen de abajo lo lleva la fila: la píldora (un <p>) tenía 15px de style.css y la ×
   (un <button>) ninguno, y desparejos se descentraban */
html.marca-2026 .categorieSel .Selmesages > div > .categ-sec-title {
	margin: 0;
}

/* «Selecciona uno» flota a la derecha: sin esto la categoría no lo contenía y el borde de
   error (style.css, .container.error) le pasaba por encima */
html.marca-2026 .categorieSel .Selmesages {
	display: flow-root;
}

html.marca-2026 .Selmesages .categ-sec-title {
	padding: calc((2.75rem - 1.3em) / 2 + var(--m26-ajuste-ibrand)) 1.1rem calc((2.75rem - 1.3em) / 2 - var(--m26-ajuste-ibrand)) !important;
	border-radius: var(--m26-esquina-chica) 0;
	background: var(--m26-placa);
	box-shadow: 0 8px 22px rgba(0, 8, 40, .45), inset 0 0 0 1px rgba(255, 255, 255, .25);
	color: var(--m26-blanco) !important;
	font: 400 .95rem/1.3 var(--m26-fuente-titulos);
	font-size: .95rem !important;
	letter-spacing: .04em;
	text-transform: uppercase;
}

@media (max-width: 400px) {
	html.marca-2026 .Selmesages .categ-sec-title {
		font-size: .875rem !important;
	}
}

html.marca-2026 .Selmesages .selName {
	color: var(--m26-dorado-claro);
}

/* El borde va por dentro (sombra) para no sumarle alto */
html.marca-2026 .Selmesages .categ-sec-title.errorMSG {
	border: 0;
	background: rgba(222, 217, 149, .14);
	box-shadow: inset 0 0 0 1px rgba(222, 217, 149, .65);
	color: var(--m26-dorado-claro) !important;
}

/* Quitar la elección: un <button> (con teclado: Tab y Enter o Espacio) */
html.marca-2026 .Selmesages .categ-sec-title.selected.delete {
	position: relative;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 !important;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
	color: transparent !important;
	cursor: pointer;
}

html.marca-2026 .Selmesages .categ-sec-title.selected.delete:hover {
	filter: brightness(1.15);
}

html.marca-2026 .Selmesages .categ-sec-title.selected.delete:focus-visible {
	outline: 3px solid var(--m26-dorado);
	outline-offset: 3px;
}

/* La × dibujada: con un carácter quedaba a merced de la fuente (style.css pide la de íconos,
   que esta página no carga) */
html.marca-2026 .Selmesages .categ-sec-title.selected.delete::after {
	content: "";
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / 1.15rem no-repeat;
}

html.marca-2026 .container.error {
	border-color: var(--m26-dorado);
}

/* Botón de votar: la placa en dorado */
html.marca-2026 .vote-btn {
	padding: calc(1.05rem + var(--m26-ajuste-ibrand)) 3.6rem calc(1.05rem - var(--m26-ajuste-ibrand));
	border-radius: var(--m26-esquina) 0;
	background: var(--m26-degrade-dorado);
	box-shadow: 0 14px 34px rgba(0, 8, 40, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
	color: var(--m26-tinta) !important;
	font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.1rem)/1 var(--m26-fuente-titulos);
	letter-spacing: .14em;
	text-transform: uppercase;
}

html.marca-2026 .vote-btn:hover {
	background: linear-gradient(90deg, #e2dc8f, #f4f2d9);
}

html.marca-2026 .vote-btn:focus-visible {
	outline: 3px solid var(--m26-blanco);
	outline-offset: 4px;
}

html.marca-2026 .vote-btn.loading::after,
html.marca-2026 .vote-btn-spinner {
	border-color: rgba(0, 19, 80, .25);
	border-top-color: var(--m26-tinta);
}

.m26-votando {
	margin: 0 0 1.25rem;
	font: 400 1.05rem/1.5 var(--m26-fuente);
	color: var(--m26-texto);
}

.m26-votando strong {
	color: var(--m26-blanco);
}

/* Avisos de la papeleta (los muestra y esconde main.js) */
.m26-aviso-papeleta {
	max-width: 40rem;
	margin: 0 auto 1.25rem;
}

/* Patrocinadores (carrusel de main.js): cada logo entero (contain) en una placa blanca del mismo
   alto, para que se vean parejos sea cual sea su proporción. El alto lo pone cada lugar con
   --m26-logo-alto: la franja de arriba es más baja que el cierre. Sin backdrop-filter: encima
   del fondo animado habría que volver a desenfocar en cada cuadro. */
html.marca-2026 .clients .owl-item {
	padding: 0 .375rem;
}

html.marca-2026 .clients .owl-item > a,
html.marca-2026 .clients .owl-item > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 16rem;
	height: var(--m26-logo-alto, 5.5rem);
	padding: .5rem .625rem;
	border-radius: var(--m26-esquina-chica) 0;
	background: var(--m26-blanco);
}

/* Por dentro de la placa: el carrusel recorta lo que sale de él */
html.marca-2026 .clients .owl-item > a:focus-visible {
	outline: 3px solid var(--m26-dorado-oscuro);
	outline-offset: -3px;
}

html.marca-2026 .clients .owl-item img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

@media (min-width: 600px) {
	html.marca-2026 .clients .owl-item {
		padding: 0 .625rem;
	}
}

@media (min-width: 992px) {
	html.marca-2026 .clients .owl-item > a,
	html.marca-2026 .clients .owl-item > span {
		padding: .75rem 1rem;
	}
}

/* Franja de arriba (solo la ve el público) */
.m26-patrocinadores-franja {
	--m26-logo-alto: 5rem;
	padding: .625rem 0;
	background: rgba(0, 10, 45, .6);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}

@media (min-width: 992px) {
	.m26-patrocinadores-franja {
		--m26-logo-alto: 6rem;
	}
}

/* Cierre de la página: los patrocinadores y el pie, un solo bloque que llega hasta el final, con
   el filo de luz arriba como las placas */
html.marca-2026 #footer.m26-cierre {
	padding: 0;
	background: linear-gradient(180deg, rgba(0, 10, 45, .72) 0%, rgba(0, 6, 30, .9) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
	color: var(--m26-tenue);
	font-family: var(--m26-fuente);
}

html.marca-2026 #footer .footer-top {
	background: transparent;
}

.m26-patrocinadores {
	--m26-logo-alto: 5.5rem;
	padding: 2rem 0 0;
	text-align: center;
}

.m26-patrocinadores .m26-etiqueta {
	margin: 0 0 1rem;
}

@media (min-width: 992px) {
	.m26-patrocinadores {
		--m26-logo-alto: 7rem;
		padding-top: 2.5rem;
	}
}

/* Entre los logos y el pie, una línea tenue */
.m26-patrocinadores + .footer-top {
	margin-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.m26-pie {
	font: 400 .9rem/1.5 var(--m26-fuente);
	text-align: center;
}

.m26-pie strong {
	color: var(--m26-texto);
	font-weight: 700;
	text-transform: uppercase;
}

.m26-redes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin-top: .9rem;
}

html.marca-2026 #footer .social-links a.m26-red {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	width: auto;
	height: auto;
	min-height: 2.5rem;
	margin: 0;
	padding: .5rem .9rem;
	border-radius: var(--m26-esquina-chica) 0;
	background: rgba(255, 255, 255, .07);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	color: var(--m26-blanco);
	font: 700 .95rem/1 var(--m26-fuente);
	text-decoration: none;
}

html.marca-2026 #footer .social-links a.m26-red:hover {
	background: rgba(255, 255, 255, .15);
}

html.marca-2026 #footer .social-links a.m26-red i {
	font-size: 1.15rem;
}

/* Video del nominado */
.m26-video {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: auto;
	background: rgba(0, 6, 30, .92);
}

.m26-video__caja {
	position: relative;
	width: 90%;
	max-width: 900px;
	margin: 5% auto;
	padding: 3rem 1.25rem 1.25rem;
}

.m26-video__cerrar {
	position: absolute;
	top: .5rem;
	right: .75rem;
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: none;
	color: var(--m26-blanco);
	font: 700 2.25rem/1 var(--m26-fuente);
	cursor: pointer;
}

.m26-video__cerrar:focus-visible {
	outline: 3px solid var(--m26-dorado);
	outline-offset: 2px;
}

.m26-video__marco {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.m26-video__marco iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Diálogos de SweetAlert2 (confirmar y agradecer el voto) */
html.marca-2026 .swal2-popup {
	border-radius: var(--m26-esquina) 0;
	background: var(--m26-placa);
	box-shadow: 0 24px 60px rgba(0, 4, 24, .65), inset 0 0 0 1px rgba(255, 255, 255, .2);
	color: var(--m26-texto);
	font-family: var(--m26-fuente);
}

html.marca-2026 .swal2-title {
	color: var(--m26-blanco);
	font-family: var(--m26-fuente-titulos);
	font-weight: 400;
	text-transform: uppercase;
}

html.marca-2026 .swal2-content,
html.marca-2026 .swal2-html-container {
	color: var(--m26-texto);
}

html.marca-2026 .swal2-styled.swal2-confirm,
html.marca-2026 .swal2-styled.swal2-cancel {
	padding-top: calc(.625em + var(--m26-ajuste-ibrand));
	padding-bottom: calc(.625em - var(--m26-ajuste-ibrand));
	font-family: var(--m26-fuente-titulos);
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
}

html.marca-2026 .swal2-styled.swal2-confirm {
	border-radius: var(--m26-esquina-chica) 0;
	background: var(--m26-degrade-dorado) !important;
	color: var(--m26-tinta);
}

html.marca-2026 .swal2-styled.swal2-cancel {
	border-radius: var(--m26-esquina-chica) 0;
	background: rgba(255, 255, 255, .1) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
	color: var(--m26-blanco);
}

/* El ícono de éxito tapa su animación con trozos del color del diálogo (blancos de fábrica) */
html.marca-2026 .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
html.marca-2026 .swal2-icon.swal2-success .swal2-success-fix {
	background-color: transparent !important;
}

/* El enlace del diálogo de voto exitoso («Suscríbete aquí»), con el botón de la marca */
.m26-swal-accion {
	margin: 1.25rem 0 .25rem;
}

.m26-swal-accion .bxl {
	font-size: 1.5em;
}

/* ------------------------------------------------------------------ área del especialista
 * Páginas del especialista dentro de la plantilla del panel (html.jurado): nominaciones,
 * elegir segmento y avisos. El panel de administración no lleva esta clase. */
html.jurado body,
.m26-capa {
	background: transparent;
}

.m26-barra {
	position: relative;
	z-index: 10;
	flex-shrink: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	background: rgba(0, 10, 45, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.m26-barra__contenido {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 72rem;
	margin: 0 auto;
	padding: .75rem 1.25rem;
}

.m26-barra__logo {
	display: block;
	width: auto;
	height: 2.75rem;
}

/* El logo histórico trae aire alrededor y no es blanco puro */
.m26-barra__logo--ancho {
	height: 3.1rem;
	filter: brightness(15);
}

.m26-area {
	max-width: 64rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.m26-titulo {
	margin: 0 0 1.5rem;
	font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.15 var(--m26-fuente-titulos);
	text-transform: uppercase;
	color: var(--m26-blanco);
	text-shadow: 0 1px 2px rgba(0, 8, 40, .75), 0 2px 16px rgba(0, 8, 40, .85);
}

.m26-texto {
	margin: 0 0 .6rem;
	font: 400 1rem/1.55 var(--m26-fuente);
	color: var(--m26-texto);
}

.m26-texto:last-child {
	margin-bottom: 0;
}

.m26-texto strong {
	color: var(--m26-blanco);
	font-weight: 700;
}

.m26-nums {
	font-variant-numeric: tabular-nums;
}

.m26-tarjeta {
	margin: 0 0 1.5rem;
	padding: 1.5rem 1.4rem;
}

.m26-tarjeta__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: .5rem;
}

/* Nombre de la categoría en las nominaciones: en negrita como en la papeleta */
.m26-tarjeta__titulo {
	margin: 0;
	font: 700 clamp(1.05rem, .95rem + .45vw, 1.3rem)/1.25 var(--m26-fuente-titulos);
	text-transform: uppercase;
}

.m26-insignia {
	display: inline-block;
	padding: calc(.25rem + var(--m26-ajuste-ibrand)) .6rem calc(.25rem - var(--m26-ajuste-ibrand));
	border-radius: .4rem 0;
	font: 400 .78rem/1.2 var(--m26-fuente-titulos);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.m26-insignia--lista {
	background: rgba(110, 220, 170, .18);
	box-shadow: inset 0 0 0 1px rgba(110, 220, 170, .55);
	color: #c9f3df;
}

.m26-insignia--pendiente {
	background: rgba(222, 217, 149, .14);
	box-shadow: inset 0 0 0 1px rgba(222, 217, 149, .6);
	color: var(--m26-dorado-claro);
}

/* Cada candidato: la leyenda arriba (flotada, así no corta la línea del borde) y los dos campos
   en una grilla aparte (una fieldset no se lleva bien con display: grid) */
.m26-candidato {
	min-width: 0;
	margin: 1.1rem 0 0;
	padding: 1.1rem 0 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.m26-candidato legend {
	float: left;
	width: 100%;
	margin: 0 0 .7rem;
	padding: 0;
	font: 700 .85rem/1.2 var(--m26-fuente);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--m26-tenue);
}

.m26-candidato__campos {
	display: grid;
	clear: both;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.m26-candidato__campos {
		grid-template-columns: 1fr 1fr;
	}
}

/* Contiene la lista de sugerencias, que es absoluta */
.m26-con-lista {
	position: relative;
}

.m26-del-catalogo {
	margin: .35rem 0 0;
	font: 400 .82rem/1.3 var(--m26-fuente);
	color: #a9ebcb;
}

.m26-opcional {
	color: rgba(183, 195, 223, .75);
}

.m26-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.25rem;
}

.m26-propuestas {
	margin: .75rem 0 0;
	padding-left: 1.4rem;
	font: 400 1rem/1.6 var(--m26-fuente);
	color: var(--m26-texto);
}

.m26-propuestas span {
	color: var(--m26-tenue);
}

/* Sugerencias del autocompletado (las arma assets/js/nominaciones.js) */
html.jurado #nominaciones [role="listbox"] {
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--m26-esquina-chica) 0;
	background: #061f5e;
	box-shadow: 0 16px 36px rgba(0, 4, 24, .6);
}

html.jurado #nominaciones [role="option"] {
	color: var(--m26-texto);
	font-family: var(--m26-fuente);
}

html.jurado #nominaciones [role="option"]:hover,
html.jurado #nominaciones [role="option"][aria-selected="true"] {
	background: rgba(222, 217, 149, .18);
	color: var(--m26-blanco);
}

html.jurado #nominaciones [role="option"] .block {
	color: var(--m26-tenue);
}

/* Elegir segmento */
.m26-segmentos {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 2rem;
}

@media (min-width: 48rem) {
	.m26-segmentos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.m26-segmentos {
		grid-template-columns: repeat(3, 1fr);
	}
}

.m26-segmento {
	display: flex;
	flex-direction: column;
	padding: 1.4rem;
}

.m26-segmento--votado {
	opacity: .75;
}

.m26-segmento__nombre {
	margin: 0 0 .5rem;
	font: 400 1.1rem/1.3 var(--m26-fuente-titulos);
	text-transform: uppercase;
	color: var(--m26-blanco);
}

.m26-segmento__pie {
	margin-top: auto;
	padding-top: 1rem;
}

/* ------------------------------------------------------------------ menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.fondo-2026 canvas,
	.m26-boton,
	html.marca-2026 .services .icon-box {
		transition: none;
	}

	.m26-girando {
		animation-duration: 2.4s;
	}

	@media (hover: hover) {
		html.marca-2026 .services .icon-box:hover {
			transform: none;
		}
	}
}