/* =========================================================
   MUJERES LÍDERES — Rediseño
   Hoja única para las plantillas "Home Rediseño" y "Eventos ML".

   Sólo se carga cuando ml_rediseno_es_plantilla() devuelve true,
   y en ese caso el body lleva la clase .ml-rediseno.

   Todos los selectores van prefijados con .ml-rediseno. No es
   decorativo: el reset de abajo declara `.ml-rediseno a { color: inherit }`
   con especificidad (0,2,0), así que cualquier regla que pinte un
   enlace necesita al menos esa misma especificidad para ganarle.
   Como media docena de componentes (.ml-kicker, .ml-button,
   .ml-leader, .ml-event-cta…) son enlaces, el prefijo es obligatorio.

   Índice
     1.  Variables
     2.  Base y reset acotado
     3.  Utilidades compartidas
     4.  Cabecera (barra de servicio, logo, buscador, navegación)
     5.  Home
         5.1  Cinta AHORA
         5.2  Portada + columna lateral
         5.3  Tres notas horizontales
         5.4  Agenda 10 by ML
         5.5  Impulsoras del Cambio (carrusel)
         5.6  Banda publicitaria
         5.7  Más leídas
         5.8  Eventos (bloque de la home)
         5.9  Edición vigente
         5.10 Newsletter
     6.  Página de Eventos
     7.  Pie
     8.  Responsive
     9.  Movimiento reducido
   ========================================================= */


/* =========================================================
   1. VARIABLES
   Paleta, tipografías y ancho máximo. Tocar sólo acá.
   ========================================================= */

:root {
	/* Paleta */
	--ml-petrol:      #032f39;  /* fondo oscuro y color de texto base */
	--ml-petrol-soft: #0a4351;  /* variante clara del petróleo (reservada) */
	--ml-cream:       #f8f7f2;  /* texto sobre oscuro y fondos suaves */
	--ml-crimson:     #7a1d32;  /* acento principal: botones, hover, AHORA */
	--ml-crimson-dk:  #5a1425;  /* hover del acento */
	--ml-copper:      #de9d3d;  /* categorías, números, foco */
	--ml-white:       #ffffff;
	--ml-muted:       #5b6d72;  /* texto secundario: extractos, roles */

	/* Líneas */
	--ml-line:        rgba(3, 47, 57, .16);    /* hairline sobre claro */
	--ml-line-strong: var(--ml-petrol);        /* separador de sección */
	--ml-line-dark:   rgba(248, 247, 242, .22); /* hairline sobre oscuro */

	/* Medidas y tipografías */
	--ml-max:   1240px;
	--ml-serif: Georgia, "Times New Roman", serif;  /* titulares */
	--ml-sans:  Lato, "Helvetica Neue", Arial, sans-serif; /* texto y etiquetas */
}


/* =========================================================
   2. BASE Y RESET ACOTADO
   Neutraliza lo que aporta Flatsome sin salirse del rediseño.
   ========================================================= */

body.ml-rediseno {
	margin: 0;
	background: var(--ml-white);
	color: var(--ml-petrol);
	font-family: var(--ml-sans);
	line-height: 1.45;
}

.ml-rediseno *,
.ml-rediseno *::before,
.ml-rediseno *::after { box-sizing: border-box; }

.ml-rediseno img { max-width: 100%; height: auto; display: block; }

.ml-rediseno a { color: inherit; text-decoration: none; }

/* Foco visible en cobre: se ve tanto sobre claro como sobre petróleo. */
.ml-rediseno a:focus-visible,
.ml-rediseno button:focus-visible,
.ml-rediseno input:focus-visible {
	outline: 2px solid var(--ml-copper);
	outline-offset: 3px;
}

/* Titulares siempre en serif. Flatsome los pone en versalitas: se anula. */
.ml-rediseno h1,
.ml-rediseno h2,
.ml-rediseno h3,
.ml-rediseno h4 {
	font-family: var(--ml-serif);
	margin: 0;
	line-height: 1.05;
	color: inherit;
	text-transform: none;
	font-weight: 700;
}

/* Los extractos y bajadas van en Lato, nunca en serif ni en mayúsculas. */
.ml-rediseno p {
	margin: 10px 0 0;
	font-family: var(--ml-sans);
	text-transform: none;
}


/* =========================================================
   3. UTILIDADES COMPARTIDAS
   Piezas que se repiten en toda la home y en Eventos.
   ========================================================= */

/* Caja central. Todo el contenido pasa por acá. */
.ml-rediseno .ml-container {
	width: min(calc(100% - 40px), var(--ml-max));
	margin-inline: auto;
}

/* Etiqueta de categoría / antetítulo. Sin fondo, siempre en cobre,
   tanto sobre claro como sobre oscuro. */
.ml-rediseno .ml-kicker {
	display: inline-block;
	margin-bottom: 11px;
	font-family: var(--ml-sans);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ml-copper);
	background: none;
	padding: 0;
}

/* Botón sólido. El secundario es el mismo en petróleo. */
.ml-rediseno .ml-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	background: var(--ml-crimson);
	color: var(--ml-white);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .09em;
	text-transform: uppercase;
	transition: background-color .18s ease;
}
.ml-rediseno .ml-button:hover {
	background: var(--ml-crimson-dk);
	color: var(--ml-white);
}

.ml-rediseno .ml-button.ml-secondary,
.ml-rediseno .ml-button.ml-secondary:hover {
	background: var(--ml-petrol);
	border-color: var(--ml-petrol);
	color: var(--ml-white);
}

/* Fila de botones. */
.ml-rediseno .ml-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* Contenedor de sección con aire arriba y abajo. */
.ml-rediseno .ml-section { padding: 54px 0 28px; }

/* Encabezado de sección: filete grueso + título, con intro opcional
   o controles (las flechas de IdC) alineados a la derecha. */
.ml-rediseno .ml-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	border-top: 5px solid var(--ml-line-strong);
	padding-top: 18px;
	margin-bottom: 26px;
}

.ml-rediseno .ml-section-title {
	font-size: clamp(25px, 3.5vw, 40px);
	letter-spacing: -.04em;
}

.ml-rediseno .ml-section-intro {
	max-width: none;
	margin: 0;
	font-size: 15px;
	font-family: var(--ml-sans);
	color: var(--ml-muted);
}

/* Rótulo con filete que se estira (columna lateral de la portada). */
.ml-rediseno .ml-section-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ml-rediseno .ml-section-label::after {
	content: "";
	height: 1px;
	flex: 1;
	background: var(--ml-line-strong);
}


/* =========================================================
   4. CABECERA
   Compartida por la home y por la página de Eventos.
   ========================================================= */

/* ---- 4.1 Barra de servicio (enlaces rápidos + newsletter) ---- */

.ml-rediseno .ml-util {
	border-bottom: 1px solid var(--ml-line);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ml-rediseno .ml-util-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 40px;
}

.ml-rediseno .ml-util-links,
/* Redes sociales en la barra de servicio */
.ml-rediseno .ml-util-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ml-rediseno .ml-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: inherit;
	transition: opacity .2s ease;
}
.ml-rediseno .ml-social svg {
	display: block;
	width: 16px;
	height: 16px;
}
.ml-rediseno .ml-social:hover,
.ml-rediseno .ml-social:focus-visible { opacity: .65; }

.ml-rediseno .ml-util a { transition: color .18s ease; }
.ml-rediseno .ml-util a:hover { color: var(--ml-crimson); }

/* "IdC" es una sigla: no se pasa a mayúsculas como el resto. */
.ml-rediseno .ml-util-links a[href*="#idc"] { text-transform: none; }

.ml-rediseno .ml-btn-mini {
	background: var(--ml-crimson);
	color: var(--ml-cream);
	padding: 8px 14px;
	font-weight: 700;
	letter-spacing: .1em;
}
.ml-rediseno .ml-btn-mini:hover {
	background: var(--ml-crimson-dk);
	color: var(--ml-cream);
}

/* ---- 4.2 Cabecera principal (logo centrado) ---- */

.ml-rediseno .ml-masthead {
	padding: 14px 0 12px;
	border-bottom: 5px solid var(--ml-line-strong);
}

/* Tres columnas para que el logo quede centrado ópticamente:
   lugar · marca · buscador. */
.ml-rediseno .ml-masthead-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}

.ml-rediseno .ml-place {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-rediseno .ml-brand { text-align: center; }

.ml-rediseno .ml-brand-logo {
	display: block;
	width: clamp(230px, 28vw, 320px);
	margin: 0 auto;
}

.ml-rediseno .ml-brand-tagline {
	margin-top: 6px;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ml-muted);
}

.ml-rediseno .ml-head-right {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 14px;
}

/* ---- 4.3 Buscador desplegable ---- */

.ml-rediseno .ml-search-toggle {
	background: none;
	border: 1px solid var(--ml-line);
	color: inherit;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	padding: 7px 10px;
	font-family: var(--ml-sans);
}
.ml-rediseno .ml-search-toggle:hover {
	border-color: var(--ml-crimson);
	color: var(--ml-crimson);
}

/* El panel se abre con la clase .is-open desde el JS del header. */
.ml-rediseno .ml-search-panel {
	display: none;
	border-top: 1px solid var(--ml-line);
	background: var(--ml-cream);
	padding: 16px 0;
}
.ml-rediseno .ml-search-panel.is-open { display: block; }

.ml-rediseno .ml-search-form { display: flex; gap: 10px; }

.ml-rediseno .ml-search-form input[type="search"] {
	flex: 1;
	min-height: 46px;
	border: 1px solid var(--ml-line);
	background: var(--ml-white);
	padding: 0 14px;
	font-size: 15px;
	font-family: var(--ml-sans);
	color: var(--ml-petrol);
}

.ml-rediseno .ml-search-form button {
	border: 0;
	background: var(--ml-crimson);
	color: var(--ml-cream);
	padding: 0 22px;
	font-family: var(--ml-sans);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}
.ml-rediseno .ml-search-form button:hover { background: var(--ml-crimson-dk); }

/* ---- 4.4 Navegación de categorías (pegajosa) ---- */

.ml-rediseno .ml-nav-wrap {
	border-bottom: 1px solid var(--ml-line);
	background: rgba(255, 255, 255, .97);
	position: sticky;
	top: 0;
	z-index: 30;
}

.ml-rediseno .ml-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	min-height: 52px;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .05em;
	/* En móvil se desplaza en horizontal sin barra visible. */
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.ml-rediseno .ml-nav::-webkit-scrollbar { display: none; }

.ml-rediseno .ml-nav a {
	position: relative;
	padding: 4px 0;
	color: var(--ml-crimson);
}
.ml-rediseno .ml-nav a:hover { color: var(--ml-crimson-dk); }

/* Subrayado que crece al pasar el cursor. */
.ml-rediseno .ml-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 2px;
	width: 0;
	background: var(--ml-crimson);
	transition: width .2s ease;
}
.ml-rediseno .ml-nav a:hover::after,
.ml-rediseno .ml-nav a:focus-visible::after { width: 100%; }


/* =========================================================
   5. HOME
   ========================================================= */

.ml-rediseno .ml-main { padding-bottom: 0; }

/* ---- 5.1 Cinta AHORA (entrada con el tag ULTIMA-NOTICIA) ---- */

.ml-rediseno .ml-breaking {
	border-bottom: 1px solid var(--ml-line);
	background: var(--ml-cream);
}

.ml-rediseno .ml-breaking-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 46px;
	padding: 8px 0;
	font-family: var(--ml-serif);
	font-size: 16px;
}

.ml-rediseno .ml-breaking-label {
	flex: none;
	background: var(--ml-crimson);
	color: var(--ml-cream);
	padding: 6px 10px;
	font: 900 10px/1 var(--ml-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.ml-rediseno .ml-breaking-text:hover { color: var(--ml-crimson); }

/* ---- 5.2 Portada + columna lateral ---- */

.ml-rediseno .ml-hero {
	display: grid;
	grid-template-columns: 1.5fr .78fr;
	gap: 28px;
	padding: 34px 0 28px;
	border-bottom: 1px solid var(--ml-line-strong);
}

.ml-rediseno .ml-hero-main { min-width: 0; }

/* La imagen destacada va como background para poder superponerle
   el degradado y el texto sin recortes raros. */
.ml-rediseno .ml-hero-art {
	position: relative;
	min-height: 500px;
	height: 100%;
	overflow: hidden;
	background-color: var(--ml-petrol);
	background-size: cover;
	background-position: center;
}

/* Velo general, para que la foto no compita con el titular. */
.ml-rediseno .ml-hero-art::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(3, 47, 57, .30), rgba(3, 47, 57, .05) 55%);
}

/* Degradado inferior: asegura contraste del texto sobre cualquier foto. */
.ml-rediseno .ml-hero-overlay {
	position: absolute;
	inset: auto 0 0;
	padding: 120px 36px 34px;
	color: var(--ml-cream);
	background: linear-gradient(transparent, rgba(3, 47, 57, .93) 62%);
}

.ml-rediseno .ml-hero-overlay h1 {
	font-size: clamp(34px, 4.4vw, 60px);
	letter-spacing: -.035em;
	max-width: 840px;
}

.ml-rediseno .ml-hero-deck {
	margin: 16px 0 0;
	max-width: 720px;
	font-size: 18px;
	color: rgba(248, 247, 242, .88);
}

.ml-rediseno .ml-byline {
	margin-top: 18px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ml-copper);
}

.ml-rediseno .ml-hero-side {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--ml-line);
	padding-left: 28px;
}

.ml-rediseno .ml-side-story {
	padding: 18px 0;
	border-top: 1px solid var(--ml-line);
}
.ml-rediseno .ml-side-story:first-of-type { border-top: 0; padding-top: 0; }
.ml-rediseno .ml-side-story h3 { font-size: 23px; letter-spacing: -.02em; }
.ml-rediseno .ml-side-story h3 a:hover { color: var(--ml-crimson); }
.ml-rediseno .ml-side-story p { color: var(--ml-muted); font-size: 14px; }

/* ---- 5.3 Tres notas horizontales ---- */

.ml-rediseno .ml-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	padding: 30px 0;
	border-bottom: 1px solid var(--ml-line);
}

.ml-rediseno .ml-newscard {
	display: grid;
	grid-template-columns: 118px 1fr;
	gap: 16px;
	align-items: start;
}

.ml-rediseno .ml-thumb {
	aspect-ratio: 1 / 1;
	background-color: var(--ml-petrol);
	background-size: cover;
	background-position: center;
}

.ml-rediseno .ml-newscard h3 { font-size: 20px; letter-spacing: -.015em; }
.ml-rediseno .ml-newscard h3 a:hover { color: var(--ml-crimson); }
.ml-rediseno .ml-newscard p { color: var(--ml-muted); font-size: 13.5px; }

/* ---- 5.4 Agenda 10 by ML ---- */

.ml-rediseno .ml-agenda {
	background: var(--ml-petrol);
	color: var(--ml-cream);
	padding: 62px 0;
	margin-top: 46px;
}

.ml-rediseno .ml-agenda .ml-section-head { border-top-color: var(--ml-copper); }
.ml-rediseno .ml-agenda .ml-section-title span { color: var(--ml-copper); }
.ml-rediseno .ml-agenda .ml-section-intro { color: rgba(248, 247, 242, .72); }

/* "by ML" en sans, como firma del título. */
.ml-rediseno .ml-agenda-sub {
	font-family: var(--ml-sans);
	font-size: .26em;
	letter-spacing: .14em;
	text-transform: uppercase;
	vertical-align: middle;
	color: var(--ml-copper);
}

/* Cuadrícula 5×2 con bordes compartidos: se dibujan arriba e izquierda
   en el contenedor y derecha y abajo en cada celda. */
.ml-rediseno .ml-agenda-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--ml-line-dark);
	border-left: 1px solid var(--ml-line-dark);
}

.ml-rediseno .ml-leader {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 250px;
	padding: 22px;
	border-right: 1px solid var(--ml-line-dark);
	border-bottom: 1px solid var(--ml-line-dark);
	transition: background-color .2s ease;
}
.ml-rediseno .ml-leader:hover { background: var(--ml-crimson); }

/* Ficha sin enlace cargado: ocupa su lugar pero no se comporta como botón.
   Celda vacía: completa la cuadrícula cuando hay menos de 10 fichas. */
.ml-rediseno .ml-leader--off,
.ml-rediseno .ml-leader--empty { cursor: default; }

.ml-rediseno .ml-leader--off:hover,
.ml-rediseno .ml-leader--empty:hover { background: none; }

.ml-rediseno .ml-leader--off:hover .ml-leader-number { color: var(--ml-copper); }
.ml-rediseno .ml-leader--off:hover .ml-leader-role { color: rgba(248, 247, 242, .62); }

.ml-rediseno .ml-leader-number {
	font: 700 54px/1 var(--ml-serif);
	color: var(--ml-copper);
	transition: color .2s ease;
}
.ml-rediseno .ml-leader:hover .ml-leader-number { color: rgba(248, 247, 242, .5); }

.ml-rediseno .ml-leader h3 { font-size: 24px; letter-spacing: -.02em; }

.ml-rediseno .ml-leader-role {
	margin-top: 7px;
	font-size: 12px;
	letter-spacing: .02em;
	color: rgba(248, 247, 242, .62);
}
.ml-rediseno .ml-leader:hover .ml-leader-role { color: rgba(248, 247, 242, .85); }

/* ---- 5.5 Impulsoras del Cambio (carrusel) ----
   El track se mueve con transform desde el JS de la plantilla:
   acá sólo se define el viewport, el ancho de slide y los controles. */

.ml-rediseno .ml-idc {
	background: var(--ml-cream);
	padding: 54px 0;
}
.ml-rediseno .ml-idc .ml-section-head {
	border-top-color: var(--ml-petrol);
	align-items: center;
}

.ml-rediseno .ml-idc-nav { display: flex; gap: 8px; flex: none; }

.ml-rediseno .ml-idc-btn {
	width: 42px;
	height: 42px;
	cursor: pointer;
	border: 1px solid var(--ml-petrol);
	background: none;
	color: var(--ml-petrol);
	font-size: 16px;
	line-height: 1;
}
.ml-rediseno .ml-idc-btn:hover { background: var(--ml-petrol); color: var(--ml-cream); }

.ml-rediseno .ml-idc-viewport { overflow: hidden; }
.ml-rediseno .ml-idc-track { display: flex; gap: 24px; will-change: transform; }

/* Dos slides a la vista. El cálculo debe coincidir con el gap de arriba. */
.ml-rediseno .ml-idc-slide {
	flex: 0 0 calc((100% - 24px) / 2);
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 18px;
	background: var(--ml-white);
	border: 1px solid var(--ml-line);
	padding: 18px;
}

.ml-rediseno .ml-idc-thumb {
	aspect-ratio: 1 / 1;
	background-color: var(--ml-petrol);
	background-size: cover;
	background-position: center;
}

.ml-rediseno .ml-idc-body h3 { font-size: 21px; letter-spacing: -.02em; }
.ml-rediseno .ml-idc-body h3 a:hover { color: var(--ml-crimson); }
.ml-rediseno .ml-idc-body p { color: var(--ml-muted); font-size: 14px; }

.ml-rediseno .ml-idc-cta {
	min-height: 38px;
	padding: 0 16px;
	margin-top: 14px;
	font-size: 11px;
}

/* ---- 5.6 Banda publicitaria horizontal ---- */

.ml-rediseno .ml-adband {
	margin: 48px 0 0;
	background: var(--ml-cream);
	border: 1px solid var(--ml-line);
	padding: 18px;
	text-align: center;
}
.ml-rediseno .ml-adband img { margin-inline: auto; }

/* ---- 5.7 Más leídas (lista + banner vertical) ---- */

.ml-rediseno .ml-split {
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	gap: 44px;
	align-items: start;
}

.ml-rediseno .ml-stack-story {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 22px;
	padding: 22px 0;
	border-top: 1px solid var(--ml-line);
	align-items: start;
}
.ml-rediseno .ml-stack-story:first-child { padding-top: 0; border-top: 0; }

.ml-rediseno .ml-stack-image {
	aspect-ratio: 16 / 10;
	background-color: var(--ml-petrol);
	background-size: cover;
	background-position: center;
}

.ml-rediseno .ml-stack-story h3 { font-size: 27px; letter-spacing: -.025em; }
.ml-rediseno .ml-stack-story h3 a:hover { color: var(--ml-crimson); }
.ml-rediseno .ml-stack-story p { color: var(--ml-muted); }

/* El banner acompaña el scroll de la lista. */
.ml-rediseno .ml-aside-ad {
	border-left: 1px solid var(--ml-line);
	padding-left: 30px;
	position: sticky;
	top: 80px;
}

/* ---- 5.8 Eventos (bloque de la home) ----
   Muestra los primeros tres de ml_eventos_lista(). Los que todavía
   no tienen página propia se atenúan y no llevan enlace. */

.ml-rediseno .ml-events {
	background: var(--ml-cream);
	margin-top: 45px;
	padding: 58px 0;
}

.ml-rediseno .ml-event-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.ml-rediseno .ml-event-card {
	display: flex;
	flex-direction: column;
	background: var(--ml-white);
	border: 1px solid var(--ml-line);
	border-top: 4px solid var(--ml-crimson);
	padding: 26px;
	min-height: 280px;
}

/* Evento anunciado pero sin página: mismo lugar, menos peso visual. */
.ml-rediseno .ml-event-card--soon {
	border-top-color: var(--ml-line);
	background: transparent;
}

.ml-rediseno .ml-event-date {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ml-crimson);
}
.ml-rediseno .ml-event-card--soon .ml-event-date { color: var(--ml-muted); }

.ml-rediseno .ml-event-card h3 {
	margin-top: 16px;
	font-size: 32px;
	letter-spacing: -.03em;
}
.ml-rediseno .ml-event-card h3 a:hover { color: var(--ml-crimson); }
.ml-rediseno .ml-event-card p { color: var(--ml-muted); }

/* margin-top:auto ancla el enlace abajo aunque los textos midan distinto. */
.ml-rediseno .ml-event-cta {
	margin-top: auto;
	padding-top: 20px;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--ml-crimson);
}
.ml-rediseno .ml-event-cta:hover { color: var(--ml-crimson-dk); }
.ml-rediseno .ml-event-cta--off { color: var(--ml-muted); }

.ml-rediseno .ml-events-foot { margin-top: 30px; text-align: center; }

/* ---- 5.9 Edición vigente ----
   Dos columnas: a la izquierda la tapa dibujada (.ml-cover, la pieza
   carmesí con el óvalo), a la derecha los datos de la revista.
   En la columna derecha, donde antes iba el extracto, va ahora la
   imagen destacada de la página de revista. */

.ml-rediseno .ml-edition {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 56px;
	align-items: center;
}

/* Tapa dibujada. No es la imagen destacada: es una pieza gráfica fija. */
.ml-rediseno .ml-cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--ml-crimson);
	color: var(--ml-cream);
	padding: 26px;
	box-shadow: 0 24px 45px rgba(3, 47, 57, .22);
}

/* Óvalo decorativo que asoma por el ángulo inferior derecho. */
.ml-rediseno .ml-cover::before {
	content: "";
	position: absolute;
	right: -10px;
	bottom: -38px;
	width: 220px;
	height: 300px;
	border-radius: 50% 50% 42% 42%;
	border: 2px solid rgba(248, 247, 242, .7);
	transform: rotate(-9deg);
}

.ml-rediseno .ml-cover-brand {
	font: 700 34px/1 var(--ml-serif);
	letter-spacing: -.04em;
}

.ml-rediseno .ml-cover-title {
	position: absolute;
	left: 26px;
	bottom: 34px;
	width: 70%;
	font: 700 40px/1 var(--ml-serif);
}

.ml-rediseno .ml-edition-copy h2 {
	font-size: clamp(28px, 4.0vw, 50px);
	letter-spacing: -.04em;
}

/* Imagen destacada de la edición: vertical y contenida, para que no
   compite con la tapa dibujada de al lado. */
.ml-rediseno .ml-edition-cover {
	display: block;
	width: 200px;
	max-width: 100%;
	margin-top: 22px;
	box-shadow: 0 18px 34px rgba(3, 47, 57, .22);
}
.ml-rediseno .ml-edition-cover img { width: 100%; }

/* ---- 5.10 Newsletter ---- */

.ml-rediseno .ml-newsletter {
	margin-top: 60px;
	background: var(--ml-petrol);
	color: var(--ml-cream);
	padding: 54px 0;
}

.ml-rediseno .ml-newsletter-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 50px;
}

.ml-rediseno .ml-newsletter h2 {
	font-size: clamp(32px, 3.4vw, 44px);
	letter-spacing: -.03em;
}
.ml-rediseno .ml-newsletter p { color: rgba(248, 247, 242, .78); }

/* Hueco reservado para el embed del formulario. */
.ml-rediseno .ml-form-slot { min-height: 60px; }


/* =========================================================
   6. PÁGINA DE EVENTOS
   Plantilla "Eventos ML". Usa la misma cabecera y el mismo pie.
   ========================================================= */

/* ---- 6.1 Hero ----
   Hoy queda como banda sólida: el vídeo y el texto todavía no se
   cargan. .ml-ev-hero-veil y .ml-ev-hero-inner quedan preparados
   para cuando el hero lleve titular encima del vídeo. */

.ml-rediseno .ml-ev-hero {
	position: relative;
	display: block;
	min-height: 62vh;
	overflow: hidden;
	background: var(--ml-petrol);
	color: var(--ml-cream);
}

.ml-rediseno .ml-ev-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
}

.ml-rediseno .ml-ev-hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(3, 47, 57, .92) 8%, rgba(3, 47, 57, .45) 60%, rgba(3, 47, 57, .30));
}

.ml-rediseno .ml-ev-hero-inner {
	position: relative;
	padding: 70px 0 54px;
}
.ml-rediseno .ml-ev-hero-inner h1 {
	font-size: clamp(40px, 6vw, 82px);
	letter-spacing: -.04em;
	max-width: 900px;
}
.ml-rediseno .ml-ev-hero-inner p {
	max-width: 560px;
	font-size: 17px;
	color: rgba(248, 247, 242, .82);
}

/* ---- 6.2 Frase de apertura ---- */

.ml-rediseno .ml-ev-quote {
	background: var(--ml-cream);
	border-bottom: 1px solid var(--ml-line);
	padding: 46px 0;
}

.ml-rediseno .ml-ev-quote blockquote {
	margin: 0;
	border-left: 4px solid var(--ml-crimson);
	padding-left: 26px;
	max-width: 900px;
	font-family: var(--ml-serif);
	font-size: clamp(21px, 2.5vw, 30px);
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--ml-petrol);
}

/* ---- 6.3 Cuadrícula de eventos ----
   Sin imágenes: las tarjetas se distinguen por el bloque de color
   que aparece al pasar el cursor. Bordes compartidos, como Agenda 10. */

.ml-rediseno .ml-ev-section { padding: 56px 0 20px; }

.ml-rediseno .ml-ev-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--ml-line);
	border-left: 1px solid var(--ml-line);
}

.ml-rediseno .ml-ev-card {
	display: flex;
	flex-direction: column;
	min-height: 300px;
	background: var(--ml-cream);
	border: 0;
	border-right: 1px solid var(--ml-line);
	border-bottom: 1px solid var(--ml-line);
	transition: background-color .2s ease;
}

/* Al pasar el cursor la tarjeta se invierte a petróleo. */
.ml-rediseno .ml-ev-card:hover { background: var(--ml-petrol); }
.ml-rediseno .ml-ev-card:hover .ml-ev-card-body h3,
.ml-rediseno .ml-ev-card:hover .ml-ev-card-body h3 a { color: var(--ml-cream); }
.ml-rediseno .ml-ev-card:hover .ml-ev-card-body p { color: rgba(248, 247, 242, .78); }
.ml-rediseno .ml-ev-card:hover .ml-ev-cta { color: var(--ml-copper); }
.ml-rediseno .ml-ev-card:hover .ml-ev-month { color: var(--ml-copper); }

/* Evento sin página propia. */
.ml-rediseno .ml-ev-card--soon { opacity: .74; }

/* El mes actúa de antetítulo dentro de la tarjeta. */
.ml-rediseno .ml-ev-month {
	display: inline-block;
	align-self: flex-start;
	margin: 22px 22px 0;
	font-family: var(--ml-sans);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ml-crimson);
}

.ml-rediseno .ml-ev-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 22px 22px;
}

.ml-rediseno .ml-ev-card-body h3 { font-size: 26px; letter-spacing: -.03em; }
.ml-rediseno .ml-ev-card-body h3 a:hover { color: var(--ml-crimson); }
.ml-rediseno .ml-ev-card-body p { color: var(--ml-muted); font-size: 14.5px; }

/* Subtítulo dentro del nombre del evento (FUTURABLE · La Ruta Sostenible). */
.ml-rediseno .ml-ev-sub { white-space: nowrap; }

.ml-rediseno .ml-ev-cta {
	margin-top: auto;
	padding-top: 20px;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--ml-crimson);
}
.ml-rediseno .ml-ev-cta--off { color: var(--ml-muted); }


/* =========================================================
   7. PIE
   ========================================================= */

.ml-rediseno .ml-footer {
	background: var(--ml-petrol);
	color: var(--ml-cream);
	padding: 54px 0 28px;
}

.ml-rediseno .ml-footer-grid {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 40px;
}

/* El logo es a color: se pasa a blanco para que funcione sobre petróleo. */
.ml-rediseno .ml-footer-logo {
	width: 190px;
	max-width: 100%;
	filter: brightness(0) invert(1);
	opacity: .95;
}

.ml-rediseno .ml-footer-copy {
	max-width: 330px;
	font-size: 14px;
	color: rgba(248, 247, 242, .68);
}

.ml-rediseno .ml-footer h4 {
	margin: 0 0 16px;
	font-family: var(--ml-sans);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--ml-copper);
}

.ml-rediseno .ml-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
}
.ml-rediseno .ml-footer li { margin: 9px 0; }
.ml-rediseno .ml-footer li a { color: rgba(248, 247, 242, .82); }
.ml-rediseno .ml-footer li a:hover { color: var(--ml-copper); }

.ml-rediseno .ml-copyright {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--ml-line-dark);
	margin-top: 40px;
	padding-top: 22px;
	font-size: 12px;
	color: rgba(248, 247, 242, .55);
}


/* =========================================================
   8. RESPONSIVE
   Dos cortes: tablet (1000px) y móvil (720px).
   ========================================================= */

@media (max-width: 1000px) {
	/* La portada pasa a una columna y el lateral se reparte en tres. */
	.ml-rediseno .ml-hero { grid-template-columns: 1fr; }
	.ml-rediseno .ml-hero-side {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		border-left: 0;
		padding-left: 0;
	}

	.ml-rediseno .ml-grid3 { grid-template-columns: 1fr; }
	.ml-rediseno .ml-agenda-list { grid-template-columns: repeat(2, 1fr); }

	/* El banner vertical baja debajo de la lista y deja de ser pegajoso. */
	.ml-rediseno .ml-split { grid-template-columns: 1fr; }
	.ml-rediseno .ml-aside-ad { border-left: 0; padding-left: 0; position: static; }

	.ml-rediseno .ml-edition { grid-template-columns: 1fr 1.2fr; gap: 34px; }

	.ml-rediseno .ml-event-grid { grid-template-columns: repeat(2, 1fr); }
	.ml-rediseno .ml-ev-grid { grid-template-columns: repeat(2, 1fr); }
	.ml-rediseno .ml-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	.ml-rediseno .ml-container { width: min(calc(100% - 26px), var(--ml-max)); }

	/* Cabecera: el logo se centra solo y se ocultan los accesorios. */
	.ml-rediseno .ml-util-links { display: none; }
	.ml-rediseno .ml-masthead { padding: 22px 0 16px; }
	.ml-rediseno .ml-masthead-inner { grid-template-columns: 1fr; text-align: center; }
	.ml-rediseno .ml-place { display: none; }
	.ml-rediseno .ml-head-right { justify-self: center; }
	.ml-rediseno .ml-nav { justify-content: flex-start; gap: 22px; }

	.ml-rediseno .ml-hero-art { min-height: 460px; }
	.ml-rediseno .ml-hero-overlay { padding: 100px 22px 24px; }
	.ml-rediseno .ml-hero-deck { font-size: 16px; }
	.ml-rediseno .ml-hero-side { grid-template-columns: 1fr; }

	/* Las tres notas pasan a lista separada por filetes. */
	.ml-rediseno .ml-grid3 { gap: 0; }
	.ml-rediseno .ml-newscard { padding: 18px 0; border-top: 1px solid var(--ml-line); }
	.ml-rediseno .ml-grid3 .ml-newscard:first-child { border-top: 0; padding-top: 0; }

	.ml-rediseno .ml-section-head { flex-direction: column; align-items: flex-start; }
	.ml-rediseno .ml-idc .ml-section-head { align-items: flex-start; }
	.ml-rediseno .ml-idc-slide { flex: 0 0 100%; grid-template-columns: 96px 1fr; }

	.ml-rediseno .ml-agenda-list { grid-template-columns: 1fr; }
	.ml-rediseno .ml-leader { min-height: 180px; }

	.ml-rediseno .ml-stack-story { grid-template-columns: 1fr; }

	.ml-rediseno .ml-event-grid { grid-template-columns: 1fr; }
	.ml-rediseno .ml-ev-grid { grid-template-columns: 1fr; }
	.ml-rediseno .ml-ev-hero { min-height: 58vh; }
	.ml-rediseno .ml-ev-hero-inner { padding: 50px 0 36px; }
	.ml-rediseno .ml-ev-quote blockquote { padding-left: 18px; }

	/* La tapa se apila arriba y deja de estirarse a lo ancho. */
	.ml-rediseno .ml-edition { grid-template-columns: 1fr; }
	.ml-rediseno .ml-cover { max-width: 320px; }

	.ml-rediseno .ml-newsletter-inner { grid-template-columns: 1fr; gap: 26px; }
	.ml-rediseno .ml-footer-grid { grid-template-columns: 1fr; }
	.ml-rediseno .ml-copyright { flex-direction: column; }
}


/* =========================================================
   9. MOVIMIENTO REDUCIDO
   El autoplay del carrusel también se desactiva desde el JS.
   ========================================================= */

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

.ml-rediseno .ml-ev-card-body:first-child { padding-top: 22px; }