/* ============================================================================
   PANEL DE OPERACIONES
   ----------------------------------------------------------------------------
   Rework de la pagina, que hasta ahora era un puerto del legacy: TODO el estilo
   vivia en un <style> dentro del Blade, con estilos en linea repetidos por
   encima y con el titular en degradado morado (#60a5fa -> #a78bfa recortado
   sobre el texto), que viene de la maqueta vieja y no se usa en ninguna otra
   pagina seria del sitio.

   Ahora comparte lenguaje con PILOTO (profile.css), MISION (mission.css) y el
   SOP (sop.css), que son las que marcan el tono:
     · fondo #0f172e y paneles en degradado 150deg sobre azul noche
     · acento AZUL #60a5fa, el del sitio
     · cejas en versalitas muy espaciadas (letter-spacing .24em)
     · filete degradado que remata los titulos de seccion (.ops-rule)
     · rejilla tecnica enmascarada
     · cifras con font-variant-numeric: tabular-nums

   Autonoma: no depende de operations.css (que es de la PORTADA, otra pagina) ni
   de index.css.
   ============================================================================ */

/* Los colores de la TARJETA de operación los necesita también la portada, que
   pinta esa misma tarjeta (<x-ops-card>) para enseñar lo próximo que se vuela.
   Por eso las variables van en un bloque compartido y el fondo de esta página
   en otro: si estuvieran juntas, en la portada la tarjeta saldría sin acento,
   sin panel y sin los colores de tipo. */
body.page-ops,
body.page-home {
	--ops-accent: #60a5fa;
	--ops-accent-soft: rgba(96, 165, 250, 0.13);
	--ops-accent-line: rgba(96, 165, 250, 0.30);
	/* Colores de estado. Los mismos que el resto del sitio: rojo = operación de
	   combate, violeta = instrucción, verde = en curso / práctica, ámbar = lo
	   que todavía no ha llegado. */
	--ops-combat: #f87171;
	--ops-training: #a78bfa;
	--ops-live: #4ade80;
	--ops-soon: #fbbf24;
	--ops-ink: #fff;
	--ops-body: #cbd5e1;
	--ops-muted: #8296b8;
	--ops-dim: #64748b;
	--ops-line: rgba(255, 255, 255, 0.08);
	--ops-panel: linear-gradient(150deg, rgba(30, 41, 59, 0.93), rgba(15, 23, 46, 0.96));
	--ops-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9);
}

body.page-ops {
	/* Fotografía fija con un velo azul noche encima, el mismo tratamiento que
	   el SOP. La imagen es una formación de Hornets vista desde la rampa del
	   C-130: una operación en curso, que es de lo que va la página.
	   El velo va en el propio `background` y no en una capa aparte para que
	   `cover` y `fixed` se apliquen a la foto y no a un pseudo-elemento. */
	background: linear-gradient(rgba(15, 23, 46, 0.88), rgba(15, 23, 46, 0.96)), url('../images/bg/badgers-c130.webp');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: var(--ops-body);
	font-family: 'Oswald', sans-serif;
}

.ops {
	padding-bottom: 90px;
}

/* ───────────────────────────────────────────────────────────────── CABECERA ─
   No es un héroe de landing: es la cabecera de un panel. Fondo propio (velo de
   acento + rejilla técnica), como la portada del SOP. */

.ops-cover {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--ops-line);
}

.ops-cover-scrim {
	position: absolute;
	inset: 0;
	/* Solo el halo de acento. El velo opaco que había aquí tapaba la foto de
	   fondo justo en la cabecera, que es donde más se ve: el oscurecido ya lo
	   pone el velo del <body>. */
	background: radial-gradient(ellipse 70% 80% at 14% 118%, rgba(96, 165, 250, 0.24), transparent 70%);
}

.ops-cover-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.85) 45%, transparent 96%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.85) 45%, transparent 96%);
	pointer-events: none;
}

.ops-cover-inner {
	position: relative;
	z-index: 2;
	padding: 142px 0 38px;
}

.ops-cover h1 {
	margin: 0;
	font-family: 'Horizon', sans-serif;
	font-size: clamp(1.7rem, 5.2vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--ops-ink);
	text-shadow: 0 6px 30px rgba(0, 0, 0, 0.75);
}

/* Recuento real del panel. Cifras en tabular-nums para que no bailen. */
.ops-tally {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.ops-tally-item {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--ops-line);
	background: rgba(15, 23, 46, 0.6);
}

.ops-tally-n {
	font-family: 'Horizon', sans-serif;
	font-size: 1rem;
	color: var(--ops-accent);
	font-variant-numeric: tabular-nums;
}

.ops-tally-item span:last-child {
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ops-muted);
}

/* ────────────────────────────────────────────────────────────────── MAQUETA ─ */

.ops-body {
	padding-top: 38px;
}

.ops-section {
	margin-top: 52px;
}

.ops-section:first-child {
	margin-top: 0;
}

.ops-section-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 22px;
}

.ops-section-head h2 {
	margin: 0;
	font-family: 'Horizon', sans-serif;
	font-size: clamp(1.05rem, 2.6vw, 1.4rem);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ops-ink);
	white-space: nowrap;
}

.ops-section-head h2 i {
	color: var(--ops-accent);
	font-size: 0.82em;
	margin-right: 11px;
}

/* El filete que remata el título, igual que .msn-rule y .sop-rule. */
.ops-rule {
	flex: 1;
	height: 1px;
	min-width: 20px;
	background: linear-gradient(90deg, rgba(96, 165, 250, 0.45), rgba(255, 255, 255, 0.05));
}

.ops-section-count {
	flex: none;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ops-line);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ops-muted);
	font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────────── CAMPAÑAS ─
   Dos paneles: la que está corriendo y la siguiente. `--ops-c` lo pone el
   modificador y de ahí salen el filete superior, el borde y el rótulo. */

.ops-campaigns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 16px;
}

.ops-campaign {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	overflow: hidden;
	padding: 18px 22px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--ops-c) 34%, transparent);
	background: linear-gradient(150deg,
		color-mix(in srgb, var(--ops-c) 13%, rgba(30, 41, 59, 0.93)),
		rgba(15, 23, 46, 0.96));
	box-shadow: var(--ops-shadow);
}

.ops-campaign.is-live {
	--ops-c: var(--ops-live);
}

.ops-campaign.is-next {
	--ops-c: var(--ops-soon);
}

.ops-campaign.is-empty {
	--ops-c: #475569;
}

/* Filete de estado en el borde superior. */
.ops-campaign::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ops-c);
}

.ops-campaign-logo {
	flex: none;
	width: 68px;
	height: 68px;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

.ops-campaign-logo.is-placeholder {
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid var(--ops-line);
	color: rgba(255, 255, 255, 0.22);
	font-size: 1.5rem;
}

.ops-campaign-txt {
	flex: 1 1 auto;
	min-width: 0;
}

.ops-campaign-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ops-c);
	margin-bottom: 6px;
}

.ops-campaign-txt h3 {
	margin: 0;
	font-family: 'Horizon', sans-serif;
	font-size: clamp(0.95rem, 2.2vw, 1.2rem);
	letter-spacing: 0.06em;
	line-height: 1.25;
	color: var(--ops-ink);
	overflow-wrap: anywhere;
}

.ops-campaign-map {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 7px;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ops-muted);
}

.ops-campaign-map i {
	color: var(--ops-dim);
}

.ops-campaign-mapicon {
	flex: none;
	height: 44px;
	width: auto;
	opacity: 0.9;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

/* ────────────────────────────────────────────────────── TARJETA DE OPERACIÓN ─
   Imagen arriba con velo y rejilla, y una barra de datos sólida abajo. El
   legacy metía los datos ENCIMA de la foto: con según qué imagen, la base y la
   hora quedaban ilegibles. */

.ops-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}

/* ── Programadas, en grande ─────────────────────────────────────────────────
   Las operaciones convocadas son pocas a la vez (normalmente una o dos), así
   que con la malla normal quedaba una tarjeta pequeña flotando en una fila
   medio vacía. Aquí las columnas son mucho más anchas: con una sola operación
   ocupa el ancho entero y se lee como lo que es, lo próximo que se vuela.

   `auto-fit` y no `auto-fill`: con `auto-fill` las pistas vacías siguen
   ocupando sitio y una tarjeta sola se quedaría a media anchura con un hueco
   al lado. El `min()` evita que el mínimo de 430px desborde en móvil. */
.ops-grid.is-lead {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
	gap: 22px;
}

.ops-grid.is-lead .ops-card-media {
	height: clamp(210px, 24vw, 310px);
}

.ops-grid.is-lead .ops-card-chips {
	padding: 17px 18px;
}

.ops-grid.is-lead .ops-chip-map,
.ops-grid.is-lead .ops-chip-type {
	font-size: 0.72rem;
	padding: 7px 15px;
}

.ops-grid.is-lead .ops-chip-map img {
	height: 18px;
	width: 18px;
}

.ops-grid.is-lead .ops-card-title {
	padding: 70px 26px 26px;
}

.ops-grid.is-lead .ops-card-title h3 {
	font-size: clamp(1.2rem, 2.6vw, 1.75rem);
}

.ops-grid.is-lead .ops-card-campaign {
	margin-top: 12px;
	font-size: 0.74rem;
}

.ops-grid.is-lead .ops-card-campaign img {
	height: 26px;
}

.ops-grid.is-lead .ops-card-facts {
	gap: 20px;
	padding: 18px 24px 20px;
}

.ops-grid.is-lead .ops-fact-label {
	font-size: 0.64rem;
}

.ops-grid.is-lead .ops-fact-value {
	font-size: 1rem;
}

/* Con una sola operación la tarjeta ocupa toda la fila: los datos se reparten
   en vez de amontonarse a la izquierda con un vacío enorme a la derecha. */
.ops-grid.is-lead .ops-card:only-child .ops-card-facts {
	gap: 28px;
}

.ops-grid.is-lead .ops-card:only-child .ops-fact {
	flex: 1 1 0;
}

.ops-grid.is-lead .ops-card:only-child .ops-fact:last-child {
	flex: 0 0 auto;
}

.ops-card {
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--ops-line);
	background: var(--ops-panel);
	box-shadow: var(--ops-shadow);
	text-decoration: none !important;
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ops-card:hover {
	transform: translateY(-4px);
	border-color: var(--ops-accent-line);
	box-shadow: 0 34px 64px -26px rgba(0, 0, 0, 0.95);
}

.ops-card-media {
	position: relative;
	height: 192px;
	overflow: hidden;
	isolation: isolate;
	background: #111c33;
}

.ops-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 3.5s ease;
}

.ops-card:hover .ops-card-img {
	transform: scale(1.06);
}

.ops-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
		rgba(15, 23, 46, 0.78) 0%,
		rgba(15, 23, 46, 0.34) 38%,
		rgba(15, 23, 46, 0.80) 82%,
		rgba(15, 23, 46, 0.95) 100%);
}

.ops-card-mesh {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 85%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 85%);
	pointer-events: none;
}

/* Los distintivos flotan sobre la foto en su esquina; el título va aparte y
   centrado en TODA la caja (ver .ops-card-title). Antes los dos iban en el
   mismo flujo y el título quedaba pegado al borde inferior. */
.ops-card-chips {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 14px;
}

/* Distintivo de mapa. */
.ops-chip-map {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ops-body);
	white-space: nowrap;
}

.ops-chip-map img {
	height: 16px;
	width: 16px;
	object-fit: contain;
}

/* Distintivo de tipo. El color lo pone el modificador. */
.ops-chip-type {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	border-radius: 999px;
	font-family: 'Horizon', sans-serif;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: var(--ops-c);
	background: color-mix(in srgb, var(--ops-c) 17%, rgba(15, 23, 42, 0.8));
	border: 1px solid color-mix(in srgb, var(--ops-c) 48%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ops-chip-type.is-combat {
	--ops-c: var(--ops-combat);
}

.ops-chip-type.is-training {
	--ops-c: var(--ops-training);
}

.ops-chip-type.is-practice {
	--ops-c: var(--ops-live);
}

.ops-chip-type.is-soon {
	--ops-c: var(--ops-soon);
}

.ops-chip-type.is-draft {
	--ops-c: #94a3b8;
}

/* Centrado en los dos ejes dentro de la foto. `inset: 0` y no `margin: auto` en
   el flujo: los distintivos de arriba ocupan alto, así que centrando en el flujo
   el título quedaría descentrado hacia abajo. El relleno superior reserva el
   sitio de los distintivos para que un título largo no se les monte. */
.ops-card-title {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 58px 20px 22px;
	text-align: center;
}

.ops-card-title h3 {
	margin: 0;
	font-family: 'Horizon', sans-serif;
	font-size: 1.12rem;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 3px 14px rgba(0, 0, 0, 0.85);
	overflow-wrap: anywhere;
}

.ops-card-campaign {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 9px;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ops-muted);
}

.ops-card-campaign img {
	height: 20px;
	width: auto;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

/* Barra de datos: fuera de la foto, sobre panel sólido. */
.ops-card-facts {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	padding: 14px 18px 16px;
	border-top: 1px solid var(--ops-line);
	background: rgba(15, 23, 46, 0.55);
}

.ops-fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ops-fact:last-child {
	margin-left: auto;
	text-align: right;
	align-items: flex-end;
}

.ops-fact-label {
	font-size: 0.6rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ops-dim);
	white-space: nowrap;
}

.ops-fact-value {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: 'Horizon', sans-serif;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	color: var(--ops-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.ops-fact-value i {
	color: var(--ops-accent);
	font-size: 0.85em;
}

.ops-fact.is-pilots .ops-fact-value {
	color: var(--ops-accent);
}

/* Un borrador no es navegable: se marca apagado y sin reacción al ratón. */
.ops-card.is-draft {
	cursor: default;
}

.ops-card.is-draft .ops-card-img {
	filter: grayscale(85%) brightness(0.55);
}

.ops-card.is-draft:hover {
	transform: none;
	border-color: var(--ops-line);
	box-shadow: var(--ops-shadow);
}

.ops-card.is-draft:hover .ops-card-img {
	transform: none;
}

/* ──────────────────────────────────────────────────────────────────── VACÍO ─ */

.ops-empty {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 62px 24px;
	border-radius: 18px;
	border: 1px dashed rgba(255, 255, 255, 0.1);
	background: rgba(30, 41, 59, 0.34);
	text-align: center;
}

.ops-empty i {
	font-size: 2.1rem;
	color: #334155;
}

.ops-empty strong {
	font-family: 'Horizon', sans-serif;
	font-size: 0.86rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ops-muted);
}

.ops-empty span {
	font-size: 0.88rem;
	color: var(--ops-dim);
}

/* ──────────────────────────────────────────────────────────────── HISTORIAL ─ */

.ops-history-group {
	margin-bottom: 28px;
}

.ops-history-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 11px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--ops-line);
}

.ops-history-logo {
	flex: none;
	height: 34px;
	width: auto;
	object-fit: contain;
}

.ops-history-head i {
	color: var(--ops-accent);
	font-size: 0.95rem;
}

.ops-history-name {
	font-family: 'Horizon', sans-serif;
	font-size: 0.86rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ops-ink);
	overflow-wrap: anywhere;
}

.ops-history-count {
	margin-left: auto;
	flex: none;
	padding: 3px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ops-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ops-history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
	gap: 12px;
}

.ops-history-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px 17px;
	border-radius: 12px;
	border: 1px solid var(--ops-line);
	background: rgba(30, 41, 59, 0.5);
	text-decoration: none !important;
	transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ops-history-item:hover {
	transform: translateY(-2px);
	border-color: var(--ops-accent-line);
	background: rgba(30, 41, 59, 0.82);
}

.ops-history-top {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 9px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ops-history-date {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ops-muted);
	font-variant-numeric: tabular-nums;
}

.ops-history-date i {
	color: var(--ops-dim);
}

.ops-history-tag {
	margin-left: auto;
	flex: none;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ops-c);
	background: color-mix(in srgb, var(--ops-c) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--ops-c) 38%, transparent);
}

.ops-history-tag.is-combat {
	--ops-c: var(--ops-combat);
}

.ops-history-tag.is-training {
	--ops-c: var(--ops-training);
}

.ops-history-title {
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: #f1f5f9;
	overflow-wrap: anywhere;
}

/* ───────────────────────────────────────────────────────────────── RESPONSIVE ─ */

@media (max-width: 900px) {
	.ops-cover-inner {
		padding: 128px 0 34px;
	}

	.ops-cover h1 {
		letter-spacing: 3px;
	}

	.ops-campaign-mapicon {
		display: none;
	}
}

@media (max-width: 560px) {
	.ops {
		padding-bottom: 62px;
	}

	.ops-section {
		margin-top: 40px;
	}

	.ops-section-head {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ops-section-head h2 {
		white-space: normal;
	}

	.ops-campaign {
		gap: 15px;
		padding: 17px 16px;
	}

	.ops-campaign-logo {
		width: 54px;
		height: 54px;
	}

	.ops-card-media {
		height: 168px;
	}

	.ops-card-title h3 {
		font-size: 1rem;
	}

	/* En móvil todo el ancho es el mismo, así que las programadas dejan de ir
	   en grande: solo cambia lo que de verdad se nota, el alto de la foto. */
	.ops-grid.is-lead .ops-card-media {
		height: 186px;
	}

	.ops-grid.is-lead .ops-card-title {
		padding: 60px 18px 20px;
	}

	.ops-grid.is-lead .ops-card-facts {
		padding-left: 18px;
		padding-right: 18px;
	}

	.ops-grid.is-lead .ops-card-title h3 {
		font-size: 1.12rem;
	}

	.ops-grid.is-lead .ops-card:only-child .ops-fact {
		flex: 0 0 auto;
	}

	/* Tres columnas de datos no caben: se apilan en dos filas y "inicio" deja de
	   empujarse a la derecha, que apilado quedaría descolgado. */
	.ops-card-facts {
		flex-wrap: wrap;
		gap: 12px 18px;
	}

	.ops-fact:last-child {
		margin-left: 0;
		text-align: left;
		align-items: flex-start;
	}

	.ops-history-item {
		padding: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ops-card,
	.ops-card-img,
	.ops-history-item {
		transition: none;
	}

	.ops-card:hover,
	.ops-history-item:hover {
		transform: none;
	}

	.ops-card:hover .ops-card-img {
		transform: none;
	}
}
