/* L: SETTINGS - Variables Globales (Custom Properties) */
:root {
	/* Colors */
	--color-text-dark: #242529;
	--color-primary-blue: #1340c1;
	--color-bg-light: #ffffff;
	--color-gray-text: rgb(0, 0, 0, 0.38);
	--color-bg-zoom: rgb(242, 220, 193, 0.4);

	/* Fonts */
	--font-primary: "TT Hoves", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Spacing - Revisa los nombres para mayor generalidad */
	--spacing-xs: 1.2rem;
	--spacing-sm: 1.5rem;
	--spacing-md: 2rem;
	--spacing-lg: 2.8rem;
	--spacing-xl: 5rem;
	--spacing-xxl: 9.5rem;
	--spacing-xxxl: 20.7rem;
	--spacing-xxxxl: 23.5rem;
	--spacing-xxxxxl: 28rem;
}

/* L: CSS RESET / NORMALIZATION */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	border: none;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

/* L: HTML BASE STYLES */
body {
	background-color: var(--color-bg-light);
	width: 100%;
	color: var(--color-text-dark);
	font-weight: 400;
	font-size: clamp(1.4rem, calc(1rem + 0.5vw), 1.6rem);
	font-family: var(--font-primary);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a {
	display: block;
	transition: color 0.3s ease;
	color: inherit;
	text-decoration: none; /* Consolidado aquí */
}

a:hover,
a:focus {
	color: var(--color-primary-blue);
	text-decoration: none;
}

a:focus-visible {
	outline: 2px dashed var(--color-primary-blue);
	outline-offset: 2px;
	text-decoration: none;
}

p,
address {
	display: inline-block;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
strong {
	margin: 0;
	padding: 0;
	font-weight: 400;
	font-size: clamp(1.4rem, calc(1rem + 0.5vw), 1.6rem);
	line-height: 1.375;
}

h2,
h3 {
	color: var(--color-gray-text);
}

img {
	display: block;
	border-radius: 0.05rem;
	aspect-ratio: 3/2; /* Default aspect ratio */
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

picture {
	display: block;
	overflow: hidden;
}

/* L: TYPOGRAPHY - Custom Web Fonts */
@font-face {
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/TTHoves-Regular.woff2") format("woff2");
	font-family: "TT Hoves";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 500;
	src: url("../fonts/TTHoves-Medium.woff2") format("woff2");
	font-family: "TT Hoves";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/TTHoves-Bold.woff2") format("woff2");
	font-family: "TT Hoves";
	font-display: swap;
}

@font-face {
	font-style: normal;
	font-weight: 900;
	src: url("../fonts/TTHoves-Black.woff2") format("woff2");
	font-family: "TT Hoves";
	font-display: swap;
}

@font-face {
	font-style: italic;
	font-weight: 400;
	src: url("../fonts/TTHoves-Italic.woff2") format("woff2");
	font-family: "TT Hoves";
	font-display: swap;
}

/* L: COMPONENTES / BLOQUES Reutilizables */

.zoom-in {
	transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
	cursor: pointer;
	background-color: var(--color-bg-zoom);
	overflow: hidden;
}
.zoom-in:hover {
	transform: scale(1.05);
}

/* L: UTILITIES - Visibility, Accessibility */
.visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	white-space: nowrap;
}

/* L2: LAYOUT STRUCTURE - Global Containers*/
.layout {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	padding: 0 7.292%;
	width: 100%;
}

/* ================================================== */

/* L3: HEADER - Branding and Navigation */
.header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-lg);
}
.header__social {
	align-self: flex-end;
}

.social__list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--spacing-md);
	font-size: 1.4rem;
}

.logo__img {
	aspect-ratio: initial; /* Considera si un aspect-ratio fijo aquí sería más robusto */
	width: 66.7vw;
	height: auto;
	object-fit: contain;
}
/* !L3: HEADER - Branding and Navigation */

/* ================================================== */

/* L3: MAIN - 3 Column Layout */
.main {
	display: flex;
	align-content: flex-start;
	align-items: flex-start;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-xxxl);
	width: 100%;
}

/* L: left: Card pública */
.main__info {
	flex: 1;
	min-width: 31.2rem;
}

.info__pic {
	margin-bottom: var(--spacing-xs);
	aspect-ratio: 312 / 300;
}
.info__art {
	width: 91%;
	max-width: 29.1rem;
}

.art__title {
	margin-bottom: var(--spacing-sm);
	color: var(--color-text-dark);
}

/* L: center: Contacto general */
.main__contact {
	flex: 2.596;
}

.contact__pic {
	margin-bottom: var(--spacing-xs);
	aspect-ratio: 810 / 760;
}

/* L: right: Contacto por áreas */
.main__areas {
	flex: 1.532;
}

.areas__pic {
	margin-top: var(--spacing-xxl);
	margin-bottom: var(--spacing-xs);
	aspect-ratio: 478 / 485;
}
.areas__art2 {
	margin-top: 2.9rem;
}
/* !L3: MAIN - 3 Column Layout */

/* ================================================== */

/* L3: GALLERY #1 */
.gal-1 {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-xxxxxl);
}

.gal-1__pic-1,
.gal-1__pic-2,
.gal-1__pic-3,
.gal-1__pic-4 {
	flex: 1;
}

.gal-1__pic-2 {
	flex: 2.064;
	aspect-ratio: 1/0.51;
}
/* !L3: GALLERY #1 */

/* ================================================== */

/* L3: GALLERY #2 - 5 Columns */
.gal-2 {
	display: flex;
	gap: var(--spacing-md);
	margin-bottom: var(--spacing-xxxxl);
}

.gal-2__col {
	display: flex;
	flex: 2;
	flex-direction: column;
	gap: var(--spacing-md);
}

/* L4: col 1 */
.gal-2-__col-1 {
	margin-top: 18rem;
}
.gal-2__pic-1 {
	aspect-ratio: 312/402;
}
.gal-2__pic-2 {
	aspect-ratio: 312/468;
}
.gal-2__pic-3 {
	aspect-ratio: 312/470;
}
/* !L4: col 1 */

/* L4: col 2 */
.gal-2__pic-4 {
	aspect-ratio: 312/470;
}
.gal-2__pic-5 {
	aspect-ratio: 312/468;
}
.gal-2__pic-6 {
	aspect-ratio: 312/470;
}
/* !L4: col 2 */

/* L4: col 3 */
.gal-2-__col-3 {
	margin-top: 7.7rem;
}
.gal-2__pic-7 {
	aspect-ratio: 312/470;
}
.gal-2__pic-8 {
	aspect-ratio: 312/470;
}
.gal-2__pic-9 {
	aspect-ratio: 312/470;
}
/* !L4: col 3 */

/* L4: col 4 */
.gal-2-__col-4 {
	margin-top: 17.2rem;
}
.gal-2__pic-10 {
	aspect-ratio: 312/468;
}
.gal-2__pic-11 {
	aspect-ratio: 312/468;
}
.gal-2__pic-12 {
	aspect-ratio: 312/468;
}
/* !L4: col 4 */

/* L4: col 5 */
.gal-2-__col-5 {
	margin-top: 5.6rem;
}
.gal-2__pic-13 {
	aspect-ratio: 312/470;
}
.gal-2__pic-14 {
	aspect-ratio: 312/468;
}
.gal-2__pic-15 {
	aspect-ratio: 312/468;
}
/* !L4: col 5 */

/* !L3: GALLERY #2 - 5 Columns */

/* ================================================== */

/* L3: FOOTER */
.footer {
	display: flex;
	justify-content: space-between;
	font-size: 1.4rem;
}
.footer__copy strong {
	font-size: 1.4rem;
}

/* !L3: FOOTER */

/* !L2: LAYOUT STRUCTURE*/

/* ================================================== */

/* L: Responsive adjustments for viewports < 1640px */
@media (max-width: 1640px) {
	.layout {
		padding: 0 5%;
	}

	.header {
		gap: 1.5vw;
	}
}

/* L: Responsive adjustments for viewports < 1550px */
@media (max-width: 1550px) {
	.main {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 12vw;
	}
	.main__contact {
		flex: 50%;
	}

	.areas__art2 {
		margin-top: 1.5rem;
	}

	.areas__pic {
		align-self: baseline;
		width: 50rem;
		height: auto;
	}

	.gal-1 {
		margin-bottom: 15vw;
	}
	.gal-2 {
		margin-bottom: 15vw;
	}
}

/* L: Responsive adjustments for viewports < 1024px */
@media (max-width: 1025px) {
	.main {
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 7rem;
	}
	.info__art {
		min-width: 80%;
	}

	.areas__pic {
		align-self: auto;
		margin-top: 0;
		width: auto;
	}
	.gal-1__pic-4,
	.gal-2-__col-5 {
		display: none;
	}
}

/* L: Responsive adjustments for viewports < 910px */
@media (max-width: 905px) {
	.info__art {
		min-width: 100%;
	}
}

/* L: Responsive adjustments for viewports < 800px */
@media (max-width: 800px) {
	.header {
		gap: 5vw;
	}
	.info__art {
		min-width: 100%;
	}
	.gal-1,
	.gal-2-__col-4 {
		display: none;
	}
	.footer {
		justify-content: space-between;
	}
	.footer__copy--p2 {
		display: none;
	}
}

/* L: Responsive adjustments for viewports < 600px */
@media (max-width: 600px) {
	.gal-2 {
		margin-bottom: 0;
	}
	.footer {
		flex-direction: column;
		align-items: center;
	}

	.footer__social {
		margin: 12vw auto;
	}
}

/* L: Responsive adjustments for viewports < 521px */
@media (max-width: 521px) {
	.header {
		gap: 0;
		margin-bottom: 5rem;
	}
	.header__social {
		align-self: center;
		margin-bottom: 2rem;
	}
	.header .social__list {
		display: none;
	}
	.logo__img {
		margin: 0 auto;
		width: auto;
		height: 4rem;
	}
	.main {
		margin-bottom: 8rem;
	}
	.main__info {
		min-width: 100%;
	}
	.areas__pic {
		margin-top: 2rem;
	}
	.gal-2-__col-1 {
		margin-top: 10rem;
	}
	.gal-2-__col-3 {
		display: none;
	}
	.footer__social {
		margin: 15vw auto;
	}
	.footer__social .social__list {
		row-gap: 2rem;
		row-gap: 2rem;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: center;
		align-items: center;
		min-width: unset;
	}
}

/* L: Responsive adjustments for viewports < 319px */
@media (max-width: 319px) {
	body,
	h1,
	h2,
	h3,
	strong,
	p,
	li,
	ul,
	.social__list,
	a,
	.footer__copy strong {
		font-size: 5vw;
	}

	.header {
		display: block;
		margin-bottom: 10vw;
	}
	.header__social {
		display: none;
	}

	.main {
		gap: 15vw;
		margin-bottom: 20vw;
	}
	.areas__pic,
	.gal-2__col,
	.gal-2-__col-1 {
		margin: 0;
	}

	.gal-2 {
		margin-bottom: 0;
	}
	.gal-2-__col-2 {
		display: none;
	}

	.footer__social .social__list {
		flex-direction: column;
		gap: 1.5rem;
	}
}