/* ==========================================================================
   Iura Lex – Home (se carga DESPUÉS de home.css)
   ========================================================================== */

/* Variables que el CSS original usaba sin definir (hover dorado, textos, etc.) */
:root {
	--primary-color: var(--color-gold, #f5c671);
	--primary-hover: var(--color-gold-hover, #e0b05b);
	--text-muted: #a5b1c2;
	--text-white: #fff;
	--bg-card: #fff;
	--transition: all .3s ease;
}

/* ---------- Accesibilidad ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: #fff;
	color: #04101e;
	padding: 10px 16px;
	font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(a, button, .news-tab-btn):focus-visible {
	outline: 3px solid var(--color-gold, #f5c671);
	outline-offset: 3px;
}

/* Submenús también con teclado */
.main-nav ul li.has-submenu:focus-within .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.main-nav ul li.has-submenu:focus-within .submenu.submenu-2-cols { transform: translate(-50%, 0); }

.contact-list address { font-style: normal; }
.contact-list li > a { word-break: break-word; }

/* ---------- Animaciones: el contenido es visible aunque falle el JS ---------- */
.animate-on-scroll { opacity: 1; visibility: visible; transform: none; }
.js .animate-on-scroll:not(.is-visible) { opacity: 0; visibility: hidden; }
.js .fade-up:not(.is-visible) { transform: translateY(40px); }
.js .fade-down:not(.is-visible) { transform: translateY(-30px); }

@media (prefers-reduced-motion: reduce) {
	.animate-on-scroll { transition: none; }
	.js .animate-on-scroll:not(.is-visible) { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- Rendimiento: no pintar secciones fuera de pantalla ---------- */
.media-section,
.team-module,
.news-contact-module,
.main-footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

/* ---------- Carrusel nativo (reemplaza Owl Carousel) ---------- */
.media-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 15px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 10px;
}
.media-carousel::-webkit-scrollbar { display: none; }
.media-carousel > .media-card { scroll-snap-align: start; min-width: 0; }

@media (min-width: 576px) { .media-carousel { grid-auto-columns: calc((100% - 15px) / 2); } }
@media (min-width: 992px) { .media-carousel { grid-auto-columns: calc((100% - 30px) / 3); } }

.media-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 25px;
}
.media-nav__btn {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .3s, color .3s;
}
.media-nav__btn:hover { border-color: var(--color-gold, #f5c671); color: var(--color-gold, #f5c671); }

.media-date { display: flex; }
.media-link i { font-size: .75em; }

/* ---------- Popup de video ---------- */
.video-modal {
	width: min(960px, 92vw);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.video-modal::backdrop {
	background: rgba(3, 11, 21, .88);
	backdrop-filter: blur(3px);
}
.video-modal[open] { animation: videoModalIn .25s ease-out; }
.video-modal__frame {
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #04101e;
	border: 0;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s, transform .25s;
}
.video-modal__close:hover { background: var(--color-gold, #f5c671); transform: scale(1.08); }

@keyframes videoModalIn {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .video-modal[open] { animation: none; } }

/* ---------- FAQ: encabezado h2 con el mismo aspecto anterior ---------- */
h2.info-subtitle { margin-top: 0; }

/* ---------- Footer: NAP (nombre, dirección, teléfono) visible en todo el sitio ---------- */
.footer-nap {
	font-style: normal;
	font-size: 12px;
	line-height: 1.7;
	color: var(--color-gray-400, #a5b1c2);
	text-align: center;
	padding: 20px 0 0;
}
.footer-nap a { color: inherit; text-decoration: none; }
.footer-nap a:hover { color: var(--color-gold, #f5c671); }