/* ==========================================================================
   irg arquitectos — hoja de estilos
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIPOGRAFÍA
   Títulos: EB Garamond. Textos: Inter. Menú: Inter ExtraLight, como la
   palabra "arquitectos" del logotipo.
   Las dos se sirven desde /assets/fonts, recortadas a los caracteres latinos
   (español, inglés y francés) y en versión variable: un solo archivo cubre
   todos los gruesos. Los originales completos venían de Google Fonts.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "EB Garamond";
	src: url("/assets/fonts/eb-garamond/EBGaramond-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter/Inter-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter/Inter-Italic-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--tipo-titulos: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
	--tipo-texto: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--gris-claro: #f2f2f0;
	--gris-texto: #767676;
}

body { color: #1a1a1a; font-family: var(--tipo-texto); font-weight: 300; }
body a { color: #1a1a1a; }
/* Bootstrap pone "bolder", que desde el 300 solo sube a 400 y apenas se nota */
b, strong { font-weight: 600; }

h1, h2, h3, h4, h5, h6,
.cuadro-texto .titulo,
.cuadro-proyecto .info .nombre,
.persona .nombre,
.publicacion .titulo,
.oficina .nombre { font-family: var(--tipo-titulos); }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); }

/* El menú y los idiomas, en Inter ExtraLight al tamaño óptico de 18 pt,
   igual que "arquitectos" en el logotipo */
.navbar,
.navbar .nav-link,
.nav-iconos,
.offcanvas .navbar-nav,
.offcanvas-body {
	font-family: var(--tipo-texto);
	font-weight: 200;
	font-variation-settings: "opsz" 18;
	letter-spacing: 0.045em;
}
/* Proyectos, la sección principal, un poco más gruesa que el resto del menú */
.navbar .nav-link.nav-destacado,
.offcanvas .nav-link.nav-destacado { font-weight: 500; }

/* Logotipo en texto: "irg" en EB Garamond negrita y "arquitectos" en Inter
   ExtraLight, a --arq veces el tamaño de "irg", centrados en vertical.
   Se escala con --logo, que es el tamaño de "irg".
   Centrar las cajas no basta: cada letra deja márgenes distintos por arriba y
   por abajo y "irg" quedaba más baja. Así que se alinean por la línea base y
   "arquitectos" se sube hasta que el centro de sus minúsculas coincide con el
   de "irg". Altura de las minúsculas: 0,42 em en Garamond y 0,539 em en Inter */
.logo-texto {
	--logo: 2.4rem;
	--arq: 0.58;
	display: inline-flex;
	align-items: baseline;
	gap: 0.25em;
	font-size: var(--logo);
	line-height: 1;
	white-space: nowrap;
	color: inherit;
}
.logo-irg { font-family: var(--tipo-titulos); font-weight: 700; letter-spacing: 0; }
.logo-arq {
	position: relative;
	top: calc((0.539 * var(--arq) - 0.42) / 2 / var(--arq) * 1em);
	font-family: var(--tipo-texto);
	font-weight: 200;
	font-variation-settings: "opsz" 18;
	font-size: calc(var(--arq) * 1em);
	letter-spacing: 0.02em;
}
.navbar-brand { color: inherit; padding: 0; }
.navbar-brand:hover, .navbar-brand:focus { color: inherit; }

/* --------------------------------------------------------------------------
   CABECERA
   Empieza bajo la barra de navegación y ocupa todo el ancho, con la proporción
   3:2 en las fotos apaisadas (ordenador y tablet) y 2:3 en las verticales (móvil
   en vertical), sin pasar del alto de la ventana. Las fotos cubren todo el
   hueco y se recortan lo que haga falta, para que no queden franjas blancas a
   los lados. Sin desplazamientos ni zooms: solo un fundido.
   -------------------------------------------------------------------------- */
#slider {
	--proporcion: 3 / 2;
	position: relative;
	padding-top: 70px;
	background-color: #FFF;
	overflow: hidden;
}
#slider .carousel-inner { aspect-ratio: var(--proporcion); max-height: calc(100vh - 70px); max-height: calc(100svh - 70px); }
#slider .carousel-item { height: 100%; }

/* Pase vertical solo en el móvil en vertical (mismo criterio que $mediamovil en index.php) */
.slider-movil { display: none; }
@media (max-width: 767.98px) and (orientation: portrait) {
	#slider.con-movil { --proporcion: 2 / 3; }
	#slider.con-movil .slider-pc { display: none; }
	#slider.con-movil .slider-movil { display: block; }
}

/* Fundido limpio. Se fuerza la transición porque Bootstrap la anula cuando el
   sistema tiene activado "reducir animaciones" y la foto cambiaría de golpe */
#slider .carousel-fade .carousel-item { transition: opacity 0.6s ease-in-out !important; transform: none !important; }

.slideimg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }

/* Frase al pie de la foto, a la derecha: con el mismo margen lateral que la
   barra (px-3 px-lg-4), para que quede alineada en vertical con el logo */
.slider-titulo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 1.5rem 1rem 2.5rem; text-align: right; pointer-events: none; }
.slider-titulo h1 { margin: 0; font-weight: 400; font-size: clamp(1rem, 2.1vw, 1.8rem); }

@media (min-width: 992px) {
	.slider-titulo { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* --------------------------------------------------------------------------
   REJILLA DE CUADRADOS (portada y listado de proyectos)
   Tres por fila en pantallas grandes. Los proyectos se ven en blanco y negro y
   al pasar el ratón la foto se desvanece y aparece el nombre y el lugar.
   Algunos cuadrados no son fotos, sino textos.
   -------------------------------------------------------------------------- */
.cuadro {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #FFF;
}

.cuadro-proyecto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: opacity 0.45s ease;
}

.cuadro-proyecto .info {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1.5rem;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.cuadro-proyecto .info .nombre {
	font-size: clamp(1.2rem, 1.9vw, 1.8rem);
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 0.4rem;
}

.cuadro-proyecto .info .lugar {
	font-size: clamp(0.8rem, 1vw, 0.95rem);
	font-weight: 400;
	color: var(--gris-texto);
}

.cuadro-proyecto:hover img,
.cuadro-proyecto:focus-within img { opacity: 0.10; }

.cuadro-proyecto:hover .info,
.cuadro-proyecto:focus-within .info { opacity: 1; }

/* El enlace cubre todo el cuadrado */
.cuadro-proyecto .enlace { position: absolute; inset: 0; z-index: 2; }

/* En pantallas táctiles no existe "pasar el ratón": el nombre se ve siempre,
   sobre un degradado blanco en la parte inferior de la foto */
@media (hover: none) {
	.cuadro-proyecto .info {
		opacity: 1;
		justify-content: flex-end;
		background: linear-gradient(to top, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0) 65%);
	}
	.cuadro-proyecto:hover img { opacity: 1; }
}

/* Cuadrados de texto */
.cuadro-texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--gris-claro);
	padding: clamp(1.25rem, 2.4vw, 2.5rem);
	font-size: clamp(0.85rem, 1vw, 0.98rem);
	line-height: 1.65;
}

.cuadro-texto .titulo {
	font-size: clamp(1.4rem, 2.4vw, 2.2rem);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 0.75rem;
}

.cuadro-texto .titulo b { font-weight: 700; }
.cuadro-texto p:last-child { margin-bottom: 0; }
.cuadro-texto .btn { align-self: flex-start; }

/* Los cuadrados de texto son cuadrados en todos los tamaños, con el texto
   centrado en vertical. Si algún texto no cupiera, el cuadrado crece en lugar
   de cortarlo (por eso no hereda el overflow oculto del resto) */
.cuadro-texto { overflow: visible; }

/* --------------------------------------------------------------------------
   TEXTOS LARGOS
   A todo el ancho del contenedor las líneas pasaban de 150 caracteres y se
   leían fatal. Se limitan a una medida cómoda, en torno a 80.
   -------------------------------------------------------------------------- */
.container-texto { max-width: 780px; }
.texto-largo { max-width: 780px; }

@media (min-width: 992px) {
	.border-start-lg { border-left: 1px solid #e2e2e2; }
}

/* --------------------------------------------------------------------------
   FICHA DE PROYECTO
   Las fotos verticales nunca superan el alto de la ventana y las horizontales
   se limitan al ancho del contenido, para que ninguna resulte desmedida.
   -------------------------------------------------------------------------- */
.foto-proyecto {
	display: block;
	margin: 0 auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 82vh;
	max-height: 82svh;
}

/* Foto de cabecera a todo el ancho. Deja libre lo justo bajo la barra para que
   en la primera pantalla ya asome el nombre del proyecto; en el móvil no pasa
   de 4:3 en vertical para no recortar de más las fotos apaisadas */
.cabecera-proyecto { height: calc(100vh - 70px - 10rem); height: calc(100svh - 70px - 10rem); min-height: 320px; max-height: 133vw; background-color: var(--gris-claro); }
.cabecera-proyecto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.cabecera-proyecto + .cab { border-top: 0; }

/* Datos del proyecto: autoría, cliente, fotografía... */
.ficha-tecnica { border-top: 1px solid #e2e2e2; padding-top: 2rem; }
.ficha-tecnica .dato { margin-bottom: 1.4rem; }
.ficha-tecnica .etiqueta {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gris-texto);
	margin-bottom: 0.15rem;
}
.ficha-tecnica .valor { font-size: 0.95rem; }

/* Vuelta al listado, sobre el título de la ficha */
.volver {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gris-texto);
	text-decoration: none;
}
.volver:hover { color: #1a1a1a; }

/* --------------------------------------------------------------------------
   EQUIPO
   -------------------------------------------------------------------------- */
.persona img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: grayscale(1);
}
.persona .nombre { font-size: 1.3rem; font-weight: 600; margin-top: 1rem; }
.persona .cargo { color: var(--gris-texto); font-size: 0.9rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   INFORMACIÓN DE INTERÉS
   Sin tarjetas ni sombras: foto, título y poco más, como el resto del sitio.
   -------------------------------------------------------------------------- */
.publicacion { display: block; text-decoration: none; }
.publicacion .foto { aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--gris-claro); }
.publicacion .foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; }
.publicacion .titulo { font-size: 1.3rem; font-weight: 400; line-height: 1.4; margin-top: 1rem; }
.publicacion .mas { color: var(--gris-texto); font-size: 0.85rem; margin-top: 0.35rem; }
.publicacion:hover .foto img { opacity: 0.75; }
.publicacion:hover .titulo { text-decoration: underline; }

/* Listado lateral dentro de una publicación */
.otras .publicacion { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.otras .publicacion .foto { flex: 0 0 84px; aspect-ratio: 1 / 1; }
.otras .publicacion .titulo { margin-top: 0; font-size: 1.1rem; }

/* Cuerpo de la publicación */
.publicacion-cuerpo h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.publicacion-cuerpo img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   RESTO DE ELEMENTOS
   -------------------------------------------------------------------------- */
.bgimagen {
	background-size: cover;
	background-position: center center;
}

.cab { border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; padding-left: 1rem; padding-right: 1rem; }
.cab h1 { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Formularios y botones sin esquinas redondeadas, en la línea del resto */
.form-control, .form-select, .btn, .form-check-input { border-radius: 0; }
.form-control:focus, .form-select:focus { border-color: #1a1a1a; box-shadow: none; }
.form-check-input:focus { border-color: #1a1a1a; box-shadow: none; }
.form-check-input:checked { background-color: #1a1a1a; border-color: #1a1a1a; }
.btn { letter-spacing: 0.05em; padding-left: 1.5rem; padding-right: 1.5rem; }

.float {
	display: none;
	position: fixed;
	bottom: 60px;
	right: 10px;
	z-index: 10;
}

.float .icon {
	border-radius: 5px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 25px;
	margin-bottom: 10px;
}

.float .icon.phone {
	background-color: rgba(51, 102, 137, 0.8);
}

.float .icon.whatsapp {
	background-color: rgba(73, 195, 88, 0.8);
}

.float .icon.mail {
	background-color: rgba(50, 50, 50, 0.8);
}

@media (min-width:1200px) {
	.container-1100 {
		max-width: 1100px;
	}
}

@media (min-width:992px) {
	.container-900 {
		max-width: 900px;
	}
}

/* Oficinas (página de contacto y pie) */
.oficina .nombre { font-size: 1.5rem; font-weight: 400; margin-bottom: 0.75rem; }
.oficina div { line-height: 1.7; }
.oficina a { text-decoration: none; }
.oficina a:hover { text-decoration: underline; }

.footer>div {
	background-color: rgba(20, 20, 20, 0.95);
}

.footer a { color: #FFF !important; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.35rem; }
.footer .logo-texto { --logo: 2.7rem; }
.footer .logo a:hover { text-decoration: none; }

.form {
	padding: 15px;
}

.form a {
	text-decoration: underline;
}

.footer2 {
	font-size: 13px;
	background-color: #282828;
}

.footer2, .footer2 a {
	color: #FFF;
}

.idiomas {
	padding-bottom: 2px;
}

.idiomas a {
	font-size: 0.9em;
	margin-right: 5px;
	text-decoration: underline;
}

/* La barra se queda fija arriba al bajar y, en cuanto hay desplazamiento,
   toma fondo blanco para que el contenido no se vea por debajo */
.navbar { height: 70px; position: sticky; top: 0; z-index: 1030; transition: background-color 0.3s ease, box-shadow 0.3s ease; --bs-navbar-color: #222; --bs-navbar-hover-color: #000; --bs-navbar-active-color: #000; }
.navbar.navbar-fondo { background-color: #FFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }

/* Idiomas a la izquierda, logo a la derecha (de lado a lado) y menú centrado
   en la barra: se posiciona en absoluto para que el centrado no dependa del
   ancho de los idiomas ni del logo */
.navbar > .navbar-interior { position: relative; }
.navbar .nav-centro { position: absolute; left: 50%; transform: translateX(-50%); }

/* En pantallas pequeñas el logotipo se reduce para que quepa junto al botón del menú */
@media (max-width: 767.98px) { .nav-logo .logo-texto { --logo: 2.05rem; } }
@media (max-width: 575.98px) { .nav-logo .logo-texto { --logo: 1.8rem; } }

/* En la página de inicio la barra no tiene fondo y queda fija encima de la cabecera,
   sobre la franja blanca que la cabecera deja libre arriba */
.navbar-transparente { position: fixed; top: 0; left: 0; right: 0; background-color: transparent; }

.p-6 { padding: 4rem !important; }
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }

.my-6 { margin-top: 4rem !important; margin-bottom: 4rem !important; }

/* Botón de volver arriba: no se ve hasta que se ha bajado un poco */
.scrollup {
	width: 42px;
	height: 42px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	z-index: 200;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid #d5d5d5;
	color: #1a1a1a;
	transition: background-color 0.25s ease;
}

.scrollup.visible { display: flex; }
.scrollup:hover { background-color: #FFF; border-color: #1a1a1a; }

@media screen and (max-width: 767px) {
	.float {
		display: inline-block;
	}
}

@media screen and (min-width: 767px) {
	.w-md-50 {
		width: 50% !important;
	}
}

.accordion-button:focus {
	box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, .25);
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
	#slider .carousel-fade .carousel-item { transition: none !important; }
	.cuadro-proyecto img, .cuadro-proyecto .info { transition: none !important; }
}