/* =========================================
   ÍNDICE DE CONTENIDOS
   1. Variables y Reset (ADAPTADO AL PDF)
   2. Tipografía y Utilidades Globales
   3. Componentes (Botones Cuadrados)
   4. Header y Navegación
   5. Hero Section
   6. Sección Proyectos (Cards Rectangulares)
   7. Sección Inspiración (Ideas)
   8. Sección Agenda (Talleres)
   9. Sección FAQ
   10. Sección Contacto
   11. Footer
   12. Páginas Secundarias
   13. Componentes Extra
   14. Responsive Global
   ========================================= */

/* Roboto desde Google Fonts CDN */
/* Pesos: 300 (Light), 400 (Regular), 700 (Bold) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300&display=swap');

/* === 1. VARIABLES Y RESET === */
:root {
	/* Paleta de colores - SEGÚN PDF UVIGO */
	--color-uvigo-black: #000000;        /* Negro Institucional */
	--color-uvigo-darkblue: #073349;     /* Azul Institucional */
	--color-uvigo-lightblue: #285D84;    /* Azul Claro Institucional */
	--color-uvigo-gray: #595959;          /* Gris Institucional */
	--color-uvigo-lightgray: #F3F3F3;     /* Gris Claro Institucional */
	
	--color-text-muted: #989898;     /* Gris Secundario (Actualizado del PDF) */
	
	--color-bg-light: #F3F3F3;       /* Gris Fondo (Actualizado del PDF) */
	--color-white: #ffffff;

	/* Tipografía */
	--font-main: 'Roboto', sans-serif; /* Cambio de Inter a Roboto */

	/* Layout */
	--top-bar-height: 60px;

	--header-height: 90px;
	--container-width: 1200px;
	
	/* ESTILO INSTITUCIONAL: Ángulos rectos */
	--border-radius: 0px; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { 
	scroll-behavior: smooth; 
	scroll-padding-top: calc(var(--top-bar-height) + var(--header-height)); 
}

body {
	font-family: var(--font-main);
	color: var(--color-uvigo-black);
	line-height: 1.6;
	background-color: var(--color-white);
	padding-top: var(--top-bar-height);
	/* Roboto renderiza mejor un poco más ligera */
	font-weight: 300; 
}

a { color: var(--color-uvigo-lightblue); text-decoration: none; }

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--border-radius); /* 0px */
}

/* === 2. TIPOGRAFÍA Y UTILIDADES === */
.container { width: 90%; max-width: var(--container-width); margin: 0 auto; }
.max-w-800 { max-width: 800px; }
.text-center { text-align: center; }
.section-padding { padding: 5rem 0; }
.bg-light { background-color: var(--color-bg-light); }
.text-white { color: white !important; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3.5rem; }

h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; color: var(--color-uvigo-darkblue); text-transform: uppercase;}
h1 { font-size: 3rem; line-height: 1.1; margin-bottom: 1.5rem; }
h2 { font-size: 2rem;  }
h3 { font-size: 1.35rem;  }
p.lead { font-size: 1.25rem; color: var(--color-uvigo-gray); margin-bottom: 2rem; font-weight: 300; }

.section-tag {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-uvigo-lightblue);
	margin-bottom: 1rem;
}

/* === 3. COMPONENTES (ESTILO RECTANGULAR) === */

/* Botón Base */
.btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.7rem 2.2rem; /* Un poco más de aire */
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--border-radius); /* 0px */
	transition: all 0.2s ease;
	border: 2px solid transparent;
	cursor: pointer;
	font-family: var(--font-main);
	letter-spacing: 0.5px;
}

.btn-small { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
.full-width { width: 100%; display: flex; justify-content: center; }
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* Variantes de Botón */
.btn-primary {
	background-color: var(--color-uvigo-lightblue);
	color: #ffffff !important;
	border: none;
}
.btn-primary:hover {
	background-color: var(--color-uvigo-darkblue);
}

.btn-white {
	background-color: white;
	color: var(--color-uvigo-darkblue);
	border: 2px solid #e0e0e0;
}

.btn-accent { background-color: var(--color-uvigo-darkblue); color: white; }
.btn-accent:hover { background-color: #e67200; }

.btn-dark { background-color: var(--color-uvigo-darkblue); color: white; border: none; }
.btn-dark:hover { background-color: #0a4a6b; }

.btn-disabled {
	background-color: #e2e8f0;
	color: #94a3b8;
	border: none;
	cursor: not-allowed;
	border-radius: var(--border-radius);
}

/* Etiquetas (Pills -> Rectángulos) */
.meta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-bottom: 0.8rem;
}

.tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.3rem 0.6rem;
	border-radius: 2px; /* Mínimo redondeo para no cortar */
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	background: #e9ecef;
	color: var(--color-uvigo-darkblue);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tag-pill .material-icons-round { font-size: 1rem; margin: 0; }
.tag-pill.location { background: #e3f2fd; color: var(--color-uvigo-lightblue); }

.badge-tag {
	display: inline-block;
	background-color: var(--color-uvigo-darkblue);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: var(--border-radius); /* 0px */
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1rem;
}

/* === 4. BARRA SUPERIOR (NAV PRINCIPAL AZUL) === */
.top-bar {
	position: fixed;
	top: 0; left: 0; width: 100%;
	height: var(--top-bar-height);
	background: var(--color-uvigo-darkblue);
	z-index: 1001;
	display: flex; align-items: center;
}
.top-bar-content {
	display: flex; justify-content: space-between; align-items: center;
	position: relative; /* Para permitir el centrado absoluto del nav */
}

/* Navegación Principal Centrada en top-bar */
.main-nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
}

.top-bar-links {
	display: flex; list-style: none; gap: 1.5rem; margin: 0; padding: 0;
}
.top-bar-links a {
	color: rgba(255,255,255,0.85); text-decoration: none;
	font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.5px;
	transition: color 0.3s;
}
.top-bar-links a:hover { color: #ffffff; }
.top-bar-links img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }

/* === HEADER Y NAVEGACIÓN (FILA INFERIOR CLARA) === */
.site-header {
	position: fixed;
	top: var(--top-bar-height); left: 0; width: 100%;
	height: var(--header-height);
	background: #ffffff;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	z-index: 1000;
	display: flex; align-items: center;
}

.header-content { display: flex; justify-content: space-between; align-items: center; }

.hub-title {
	font-weight: 400;
	font-size: 1.4rem;
	color: var(--color-uvigo-darkblue);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.nav-list { display: flex; list-style: none; gap: 2rem; align-items: center; margin: 0; padding: 0; }
.nav-link { text-decoration: none; color: white; font-weight: 400; transition: all 0.3s; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.5px; opacity: 0.85; }
.nav-link:hover, .nav-link.active { color: white; opacity: 1; border-bottom: 2px solid white; padding-bottom: 3px; }

/* Selector de Idioma y Botón en fila inferior */
.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.lang-switch-inline { display: flex; align-items: center; gap: 8px; }
.lang-switch-inline .lang-btn {
	background: none; border: none; font-weight: 700; cursor: pointer;
	color: var(--color-uvigo-gray); font-size: 0.72rem;
	padding: 0; font-family: var(--font-main);
}
.lang-switch-inline .lang-btn.active { color: var(--color-uvigo-lightblue); }
.lang-switch-inline .lang-btn:hover { color: var(--color-uvigo-lightblue); }
.lang-switch-inline .divider { color: #ccc; font-size: 0.7rem; }

.btn-contact {
	background-color: var(--color-uvigo-lightblue);
	color: white !important;
	padding: 0.4rem 1.2rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 0;
	transition: background-color 0.3s;
}
.btn-contact:hover {
	background-color: var(--color-uvigo-darkblue);
}

/* === 5. HERO SECTION === */
.hero-section {
	position: relative;
	width: 90%; max-width: var(--container-width);
	margin: 0 auto;
	overflow: hidden;
	color: #ffffff;
}

.hero-video {
	display: block;
	width: 100%;
	z-index: 0;
}

.hero-overlay {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background: linear-gradient(135deg, rgba(7, 51, 73, 0.8), rgba(40, 93, 132, 0.6));
	z-index: 1;
}

.hero-content {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	z-index: 2; text-align: center; padding: 0 20px;
}

.hero-content h1 {
	color: #ffffff !important;
	font-size: 4rem; font-weight: 700; margin-bottom: 1.5rem;
	text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.hero-content p.lead {
	color: rgba(255, 255, 255, 0.95) !important;
	font-size: 1.35rem; max-width: 800px; margin: 0 auto 2.5rem auto;
	font-weight: 300;
}

.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.scroll-down {
	position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
	color: white !important; z-index: 2; animation: bounce 2s infinite; text-decoration: none;
}
.scroll-down span { font-size: 2.5rem; }
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
	40% {transform: translateY(-10px) translateX(-50%);}
	60% {transform: translateY(-5px) translateX(-50%);}
}

/* === 6. SECCIÓN PROYECTOS (ESTILO CUADRADO) === */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
	gap: 2rem; padding-bottom: 2rem;
}

.project-card {
	position: relative;
	background: #ffffff; /* Fondo blanco sólido */
	border: 1px solid #e0e0e0; /* Borde sutil */
	border-radius: var(--border-radius); /* 0px */
	overflow: hidden; 
	box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra más dura */
	transition: all 0.3s ease;
	display: flex; flex-direction: column;
}

.project-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px rgba(0,0,0,0.1);
	border-color: var(--color-uvigo-lightblue);
}

.card-link::after {
	content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	z-index: 10; cursor: pointer;
}

.card-image { height: 220px; width: 100%; overflow: hidden; background-color: #eee; }
.card-image img {
	width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;
	border-radius: 0; /* Asegurar esquinas rectas */
}
.project-card:hover .card-image img { transform: scale(1.05); }

.card-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; border-top: 1px solid #f0f0f0; }

.card-badge {
	display: inline-block; font-size: 0.75rem; font-weight: 400;
	text-transform: uppercase; margin-bottom: 0.5rem;
}

.project-card h3 { font-size: 1.1rem; margin-bottom: 0.8rem; color: var(--color-uvigo-darkblue); font-weight: 400; }
.project-card p { font-size: 1rem; color: var(--color-uvigo-darkblue); margin-bottom: 1.5rem; line-height: 1.6; }

.card-link {
	margin-top: auto;
	font-weight: 300;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	font-size: 0.9rem;
	text-transform: uppercase;
	color: inherit;
}

.card-link:visited,
.card-link:hover,
.card-link:active {
	color: inherit;
	text-decoration: none;
}

/* === 7. SECCIÓN INSPIRACIÓN (IDEAS) === */
.inspiration-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;
}

.concept-card {
	background: white; padding: 2.5rem 2rem; 
	border-radius: var(--border-radius); /* 0px */
	border: 1px solid #eee; 
	box-shadow: 0 4px 10px rgba(0,0,0,0.03);
	transition: all 0.3s ease; height: 100%;
}
.concept-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
	border-bottom: 4px solid var(--color-uvigo-lightblue);
}

/* Iconos ahora son cuadrados para seguir el estilo geométrico */
.icon-circle {
	width: 80px; height: 80px; 
	border-radius: 0px; /* Cuadrado */
	margin: 0 auto 1.5rem auto;
}
.icon-circle img { width: 100%; height: 100%; object-fit: contain; }

.concept-tag {
	display: inline-block; font-size: 0.75rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); margin-bottom: 0.5rem;
}
.concept-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--color-uvigo-darkblue); }
.concept-card p { color: var(--color-uvigo-gray); }

.cta-box {
	background: white; border-radius: 0px; padding: 3rem; margin-top: 4rem;
	border: 1px solid #cbd5e1; position: relative; overflow: hidden;
}


.agenda-grid {
	display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}

.agenda-card {
	background: #ffffff; 
	border-radius: var(--border-radius); /* 0px */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	border: 1px solid #e0e0e0;
	padding: 2rem; gap: 2rem; display: flex;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.agenda-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.date-box {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--color-uvigo-gray); /* Gris institucional */
	color: white;
	min-width: 90px; height: 90px; 
	border-radius: 0px; /* Cuadrado */
	padding: 10px; 
}
.date-box .day { font-size: 2rem; font-weight: 700; line-height: 1; }
.date-box .month { font-size: 0.8rem; text-transform: uppercase; margin-top: 5px; letter-spacing: 1px; }

.agenda-footer {
	display: flex; align-items: center; gap: 1.5rem; margin-top: 1.5rem;
}
.slots-left { font-size: 0.9rem; font-weight: 400; color: var(--color-uvigo-darkblue); }

.agenda-footer .btn { text-transform: uppercase; background-color: var(--color-uvigo-darkblue); color: white; }
.agenda-footer .btn:hover { background-color: #0a4a6b; }
.agenda-footer .btn-disabled { background-color: var(--color-uvigo-darkblue); color: white; opacity: 0.6; }

/* Acordeón Agenda */
.toggle-details-btn {
	background: none; border: none; color: var(--color-uvigo-darkblue);
	font-weight: 400; font-size: 0.9rem; padding: 0; margin: 1rem 0 0.5rem 0;
	cursor: pointer; display: flex; align-items: center; gap: 5px; outline: none; 
}
.toggle-details-btn:hover { color: var(--color-uvigo-darkblue); text-decoration: underline; }

.arrow-icon { transition: transform 0.3s ease; }
.toggle-details-btn.active .arrow-icon { transform: rotate(180deg); }

.agenda-details-content {
	max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
	font-size: 0.95rem; color: var(--color-uvigo-gray);
	border-left: 2px solid var(--color-uvigo-lightblue); padding-left: 1.2rem; margin-left: 2px; margin-bottom: 1rem;
}

.syllabus-list { margin: 0.8rem 0 1rem 0; padding-left: 1rem; }
.syllabus-list li { margin-bottom: 0.5rem; line-height: 1.5; }

/* === 9. SECCIÓN FAQ === */
.faq-container { border-top: 1px solid #e5e7eb; }
.faq-item { border-bottom: 1px solid #e5e7eb; }

.faq-question {
	width: 100%; text-align: left; background: none; border: none; padding: 1.5rem 0;
	font-size: 1.1rem; font-weight: 400; color: var(--color-uvigo-darkblue); cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; transition: color 0.3s;
}
.faq-question .icon { color: var(--color-text-muted); font-size: 1.5rem; }
.faq-item.active .faq-question .icon { transform: rotate(45deg); }

.faq-answer {
	max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease;
	line-height: 1.7; font-weight: 300;
}
.faq-item.active .faq-answer { padding-bottom: 1.5rem; max-height: 1000px; opacity: 1; }

/* === 10. SECCIÓN CONTACTO === */
.section-dark { background-color: var(--color-uvigo-darkblue); color: white; }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.contact-section h2 { color: white; }
.contact-list { list-style: none; margin-top: 2rem; font-size: 1.1rem; }
.contact-list li { margin-bottom: 0.8rem; color: rgba(255,255,255,0.9); display: flex; gap: 10px; }

.contact-form-box {
	background: white; padding: 2.5rem; 
	border-radius: 0px; /* Rectangular */
	box-shadow: 0 10px 30px rgba(0,0,0,0.2); color: var(--color-uvigo-black);
}
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 700; font-size: 0.9rem; color: var(--color-uvigo-darkblue); }
.form-group input, .form-group select, .form-group textarea {
	width: 100%; padding: 0.8rem 1rem; border: 1px solid #ccc; 
	border-radius: 0px; /* Campos rectangulares */
	font-size: 1rem; background-color: #fcfcfc; transition: border-color 0.3s;
	font-family: var(--font-main);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { 
	outline: none; border-color: var(--color-uvigo-lightblue); background-color: white; 
}

/* === SECCIÓN CONTADORES (ESTILO INSTITUCIONAL) === */
.stats-section .grid-4 {
	display: grid;
	/* Crea columnas automáticas que se adaptan al espacio, mínimo 200px */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
}

.stat-item h3 {
	font-size: 3.5rem;
	color: var(--color-uvigo-lightblue);
	margin-bottom: 0.5rem;
	font-weight: 700;
	line-height: 1;
}

.stat-item p {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase; /* Institucional */
	color: var(--color-text-muted); /* Gris oficial */
	letter-spacing: 1px;
	margin: 0;
}

/* === 11. FOOTER (estilo uvigo.gal) === */
.site-footer {
	background-color: var(--color-white);
	color: var(--color-uvigo-darkblue);
	font-size: 0.9rem;
	border-top: 1px solid #e0e0e0;
}

.site-footer .container:first-of-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
}
.footer-brand { max-width: 480px; }
.footer-logo { display: inline-block; margin-bottom: 1rem; }
.footer-logo img { height: 60px; width: auto; filter: none; }
.footer-brand p { color: var(--color-uvigo-gray); line-height: 1.6; }

.footer-social { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.footer-social a {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px;
	text-decoration: none; transition: all 0.3s;
	filter: brightness(0.2); /* Oscurecer los iconos blancos para que se vean sobre fondo claro */
}
.footer-social a:hover { filter: brightness(0.4); }
.footer-social a[aria-label="Facebook"] { background-image: url('../assets/icons/ico-rrss-facebook-branco.svg'); }
.footer-social a[aria-label="Twitter"] { background-image: url('../assets/icons/ico-rrss-twitter-branco.svg'); }
.footer-social a[aria-label="YouTube"] { background-image: url('../assets/icons/ico-rrss-youtube-branco.svg'); }
.footer-social a[aria-label="Instagram"] { background-image: url('../assets/icons/ico-rrss-instagram-branco.svg'); }
.footer-social a[aria-label="LinkedIn"] { background-image: url('../assets/icons/ico-rrss-linkedin-branco.svg'); }
.footer-social a[aria-label="TikTok"] { background-image: url('../assets/icons/ico-rrss-tiktok-branco.svg'); }

.footer-bottom {
	background-color: #003da6;
	width: 100%;
	padding: 0.5rem 0;
}
.footer-bottom p { margin: 0; color: rgba(255,255,255,0.8); font-size: 0.85rem; }
.footer-legal {
	display: flex; list-style: none; gap: 1.5rem; margin: 0; padding: 0;
}
.footer-legal a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.85rem; }
.footer-legal a:hover { color: white; }

/* Ajuste específico para que el container del footer-bottom no rompa el fondo */
.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}
.footer-bottom p, .footer-bottom .footer-legal { padding: 0; }

/* === 12. PÁGINAS SECUNDARIAS (RECUPERADO Y ADAPTADO) === */

/* Hero de Proyecto */
.project-hero {
	position: relative; /* ¡Esto evita que el azul se salga! */
	width: 90%;
	max-width: var(--container-width);
	margin: 0 auto;
	height: 60vh; 
	min-height: 400px;
	background-size: cover; 
	background-position: center;
	display: flex; 
	align-items: flex-end; 
	padding-bottom: 4rem; 
}

.project-hero-content { 
	position: relative !important; 
	z-index: 2; 
	color: white; 
	width: 100% !important;
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}

/* Excepción: Forzar el título a blanco dentro de la cabecera del proyecto */
.project-hero-content h1 {
	color: #ffffff !important; /* El !important manda sobre el azul institucional */
	text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Añadimos sombra para que destaque más sobre la foto */
	margin-bottom: 1rem;
}

/* Layout de Proyecto (Grid de 2 columnas) */
.project-layout { 
	display: grid; 
	grid-template-columns: 3fr 1fr; 
	gap: 4rem; 
	align-items: start; 
}

/* Textos del Proyecto */
.project-main h2 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--color-uvigo-darkblue); font-weight: 700;}
.project-main h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-uvigo-darkblue); font-weight: 700;}
.project-main p { margin-bottom: 1.5rem; font-size: 1.05rem; color: var(--color-uvigo-gray); font-weight: 300;}
.project-main ul { margin-bottom: 1.5rem; color: var(--color-uvigo-gray); font-weight: 300; }

/* Barra Lateral (Sidebar) */
.info-box { 
	background: var(--color-bg-light); 
	padding: 2rem; 
	border-radius: 0px; /* Estilo institucional cuadrado */
	border: 1px solid #e2e8f0; 
	margin-bottom: 1.5rem; 
}
.tech-list { list-style: none; padding: 0;}
.tech-list li { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center; color: var(--color-uvigo-black);}
.tech-list .icon { color: var(--color-uvigo-lightblue); }

.status-box {
	display: flex; gap: 1rem; align-items: center; 
	background: var(--color-bg-light); 
	border: 1px solid #e2e8f0;
	border-left: 4px solid var(--color-uvigo-lightblue); /* Detalle corporativo */
	color: var(--color-uvigo-darkblue);
}

/* Multimedia */
.video-container {
	position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
	border-radius: 0px; /* Sin bordes redondos */
	box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 2rem;
}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Galería */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.gallery-grid img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 0px; /* Sin bordes redondeados según guía */
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.gallery-grid img:hover {
	transform: scale(1.03);
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	z-index: 2;
}

/* Lightbox Modal */
#imageModal {
	display: none;
	position: fixed;
	z-index: 11000; /* Por encima de preloader y cookies */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.95);
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#lightboxImg {
	max-width: 90%;
	max-height: 80vh;
	margin-bottom: 20px;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
	transition: transform 0.3s ease;
	object-fit: contain;
}

#caption {
	color: #ccc;
	font-size: 1rem;
	text-align: center;
	padding: 10px 20px;
}

.close-btn {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	cursor: pointer;
	z-index: 11001;
}

.close-btn:hover,
.close-btn:focus {
	color: #bbb;
}

/* === 13. COMPONENTES EXTRA === */
/* Preloader */
#preloader {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: #fff; z-index: 9999;
	display: flex; justify-content: center; align-items: center;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
.spinner {
	width: 50px; height: 50px; border: 4px solid rgba(7, 51, 73, 0.1);
	border-left-color: var(--color-uvigo-lightblue); 
	border-radius: 50%; /* Spinner puede ser redondo, es un estándar */
	margin: 0 auto 15px; animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Aviso Cookies (Cuadrado) */
.cookie-banner {
	position: fixed; bottom: -100%; left: 0; width: 100%; background: white;
	padding: 1rem 2rem; box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
	display: flex; justify-content: center; align-items: center; gap: 2rem;
	z-index: 10000; transition: bottom 0.5s ease; border-top: 4px solid var(--color-uvigo-lightblue);
}
.cookie-banner.show { bottom: 0; }
.cookie-banner .btn { border-radius: 0; }

/* === 14. RESPONSIVE GLOBAL === */
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--color-uvigo-darkblue); }
.mobile-toggle span { font-size: 2rem; }

@media (max-width: 900px) {
	.project-layout { grid-template-columns: 1fr; gap: 3rem; }
	.top-bar-links { gap: 0.8rem; }
	.top-bar-links a { font-size: 0.65rem; }
}

@media (max-width: 768px) {
	.top-bar { display: none; }
	.site-header { top: 0; height: var(--header-height); }
	body { padding-top: var(--header-height); }
	html { scroll-padding-top: var(--header-height); }

	.mobile-toggle { display: block; z-index: 1002; }
	
	.main-nav {
		position: fixed; top: 0; right: -100%; width: 85%; height: 100vh;
		background: white; box-shadow: -5px 0 15px rgba(0,0,0,0.1);
		padding-top: 5rem; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1001;
	}
	.main-nav.active { right: 0; }
	.nav-list { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-left: 2rem; }
	.nav-link { font-size: 1.1rem; border-bottom: none; }
	.nav-link:hover { padding-left: 10px; border-bottom: none; }

	.hero-section, .project-hero { width: 100%; padding-top: 0; }
	.hero-content h1 { font-size: 2.8rem; margin-top: 1rem; }
	.hero-buttons { flex-direction: column; gap: 1rem; }
	.btn { width: 100%; }

	.inspiration-grid, .contact-wrapper { grid-template-columns: 1fr; }
	.agenda-card { flex-direction: column; text-align: left; }
	.date-box { width: 100%; height: auto; flex-direction: row; gap: 15px; padding: 0.8rem; justify-content: flex-start; }
	.date-box .day { font-size: 1.5rem; }
	.agenda-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
	
	.cookie-banner {
		flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem;
		padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
	}
}