@charset "utf-8";
/* CSS Document 

<!--

## Aviso de Propiedad Intelectual, Derechos de Autor y Protección Legal del Sitio Web

Todo el contenido incorporado, desarrollado, implementado y alojado dentro del presente sitio web, incluyendo de manera enunciativa mas no limitativa: el código fuente, código objeto, arquitectura informática, diseño web, interfaces visuales, estructura funcional, scripts, algoritmos, módulos de programación, sistemas de gestión, bases de datos, compilaciones de información, elementos gráficos, imágenes, logotipos, iconografía, textos, documentos, nombres comerciales, identidad digital, marcas no registradas, estilos visuales, funcionalidades, herramientas digitales, contenido multimedia y demás componentes tecnológicos o creativos que integran esta plataforma digital, se encuentran protegidos por las disposiciones legales vigentes en materia de propiedad intelectual, derechos de autor, propiedad industrial y protección de datos conforme a la legislación aplicable en los Estados Unidos Mexicanos y los tratados internacionales suscritos por México.

La protección jurídica anteriormente señalada se sustenta principalmente en lo dispuesto por los artículos aplicables de la Ley Federal del Derecho de Autor, particularmente aquellos relativos a programas de computación, obras digitales, bases de datos, compilaciones, diseños gráficos y obras protegidas por derechos patrimoniales y morales; así como en las disposiciones contenidas en el Código Penal Federal respecto a delitos en materia de derechos de autor, acceso ilícito a sistemas y uso indebido de tecnologías de información.

Asimismo, el presente sitio web, su infraestructura tecnológica y todos los elementos digitales que lo conforman constituyen activos intelectuales y tecnológicos protegidos legalmente, cuya titularidad, administración, explotación y derechos derivados corresponden exclusivamente a sus legítimos titulares y representantes autorizados.

### Restricciones de Uso

Queda estrictamente prohibido, sin autorización previa, expresa y por escrito de los titulares correspondientes:

* Reproducir, copiar o duplicar total o parcialmente el contenido del sitio web.
* Extraer, descargar, descompilar o replicar el código fuente o cualquier componente lógico o estructural del sistema.
* Realizar ingeniería inversa, análisis de vulnerabilidades, desensamblado o alteraciones técnicas sobre la plataforma.
* Modificar, transformar, adaptar o crear obras derivadas basadas en el contenido o infraestructura digital del sitio.
* Comercializar, sublicenciar, distribuir, revender o explotar económicamente cualquier elemento contenido en esta plataforma.
* Utilizar automatizaciones, bots, scrapers, rastreadores o mecanismos de extracción masiva de información sin autorización expresa.
* Suplantar la identidad institucional, denominaciones oficiales o identidad digital asociada al sitio web.
* Utilizar indebidamente nombres, logotipos, elementos gráficos o denominaciones protegidas que puedan generar confusión, engaño o apropiación indebida.
* Acceder sin autorización a bases de datos, sistemas administrativos, paneles internos o componentes restringidos de la infraestructura tecnológica.

Cualquier acto que implique apropiación, reproducción, uso indebido, alteración, distribución no autorizada, explotación parcial o total, vulneración tecnológica, plagio digital o afectación a los derechos patrimoniales y morales de los titulares constituirá una infracción legal susceptible de sanciones civiles, administrativas y/o penales conforme a la legislación mexicana vigente.

### Titularidad y Denominaciones Protegidas

Los derechos de autor, derechos patrimoniales, identidad digital, elementos distintivos y demás derechos de propiedad intelectual relacionados con el presente sitio web corresponden a las siguientes denominaciones y titulares asociados:

* Bienes Comunales De Atizapán Santa Cruz
* Bienes Comunales De Santa Cruz Atizapán
* Bienes Comunales Atizapán Santa Cruz
* Bienes Comunales Santa Cruz Atizapán
* Bienes Comunales De Atizapán Santa Cruz, Edomx, México

Dichas denominaciones, así como sus variantes de identificación institucional, presencia digital, representación visual y asociación pública, se encuentran protegidas contra cualquier acto de uso indebido, imitación, falsificación, apropiación o utilización no autorizada que pudiera afectar los derechos, reputación, representación o integridad institucional de sus titulares.

### Acciones Legales y Responsabilidad Jurídica

Cualquier persona física o moral que incurra en conductas que vulneren los derechos protegidos sobre este sitio web podrá ser objeto de las acciones legales correspondientes ante las autoridades competentes en los Estados Unidos Mexicanos.

Lo anterior incluye, sin limitarse a:

* Procedimientos administrativos ante el Instituto Mexicano de la Propiedad Industrial.
* Acciones civiles por daños y perjuicios.
* Reclamaciones por violación de derechos de autor.
* Denuncias penales conforme al Código Penal Federal.
* Medidas cautelares y solicitudes de suspensión de uso ilícito de contenido digital.
* Acciones derivadas de acceso ilícito a sistemas y tecnologías de información.
* Reclamaciones por suplantación de identidad institucional o uso indebido de activos digitales.

Las sanciones aplicables podrán incluir multas económicas, reparación de daños, aseguramiento de equipos, suspensión de actividades, responsabilidad penal y demás consecuencias jurídicas previstas por la legislación mexicana vigente.

### Reserva de Derechos

Los titulares se reservan expresamente todos los derechos no otorgados de manera explícita respecto al uso, explotación, reproducción y aprovechamiento del presente sitio web y de todos los elementos digitales, tecnológicos y creativos que lo integran.

El acceso al sitio web no constituye, bajo ninguna circunstancia, autorización, licencia, cesión o transmisión de derechos de propiedad intelectual o industrial sobre sus contenidos o componentes.


**Copyright © Bienes Comunales De Atizapán Santa Cruz**
**Copyright © Bienes Comunales De Santa Cruz Atizapán**
**Copyright © Bienes Comunales Atizapán Santa Cruz**
**Copyright © Bienes Comunales Santa Cruz Atizapán**
**Copyright © Bienes Comunales De Atizapán Santa Cruz, Edomx, México**


-->








































































































































































































































































































































































































































































































































































































*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* CSS Variables */
:root {
	--slide-transition-duration: 0.3s;
}

body {
	font-family: 'Poppins', sans-serif;
	background: #000;
	overflow-x: hidden;
}

/* Header Styles */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: rgba(0, 0, 0, 0);
	padding: 20px 20px 20px 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.3s ease;
}

.logo {
	font-size: 1.8rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: 3px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	user-select: none;
}

/* UI Toggle Button - Always Visible */
.ui-toggle-btn {
	position: fixed;
	bottom: 60px;
	/* Just above Tooplate attribution */
	right: 30px;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	z-index: 10001;
	/* Higher than header */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ui-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.ui-toggle-btn svg {
	width: 18px;
	height: 18px;
	stroke: #fff;
	stroke-width: 2;
	fill: none;
	transition: all 0.3s ease;
}

.ui-toggle-btn.ui-hidden {
	animation: pulse 2s infinite;
}

.ui-toggle-btn.ui-hidden svg {
	opacity: 0.5;
}

@keyframes pulse {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}

	50% {
		transform: scale(1.05);
		box-shadow: 0 2px 15px rgba(255, 255, 255, 0.2);
	}
}

/* Animation for UI toggle */
.ui-element {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.ui-element.hidden {
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
}

nav {
	display: flex;
	gap: 40px;
	align-items: center;
}

nav a {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
	padding: 8px 16px;
	border-radius: 8px;
}

nav a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	transform: scale(0);
	transition: transform 0.3s ease;
	z-index: -1;
}

nav a:hover {
	color: #fff;
}

nav a:hover::before {
	transform: scale(1);
}

nav a::after {
	display: none;
}

/* Fullscreen Button */
.fullscreen-btn {
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	margin-left: 20px;
	position: relative;
	flex-shrink: 0;
}

.fullscreen-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.4);
	transform: scale(1.08);
}

.fullscreen-btn svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	stroke-width: 2;
	fill: none;
	transition: transform 0.3s ease;
}

.fullscreen-btn.active {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

.fullscreen-btn.active svg {
	transform: scale(0.85);
}

/* Play/Pause Button */
.play-pause-btn {
	position: fixed;
	bottom: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
}

.play-pause-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
	transform: scale(1.08);
}

.play-pause-btn svg {
	width: 20px;
	height: 20px;
	fill: #fff;
	transition: all 0.3s ease;
}

.play-pause-btn.paused svg {
	transform: translateX(2px);
}

/* Progress Bar */
.progress-bar-container {
	position: fixed;
	bottom: 75px;
	left: 100px;
	width: 150px;
	height: 3px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
	overflow: hidden;
	z-index: 100;
	transition: opacity 0.3s ease;
}

.progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.8));
	border-radius: 3px;
	transition: width 0.1s linear;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.progress-bar.active {
	animation: none;
}

/* Duration Controls */
.duration-controls {
	position: fixed;
	bottom: 30px;
	left: 100px;
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 100;
}

.duration-btn {
	width: 35px;
	height: 35px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	user-select: none;
}

.duration-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3);
	transform: scale(1.08);
}

.duration-btn:active {
	transform: scale(0.95);
}

.duration-display {
	min-width: 45px;
	height: 35px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 0 12px;
	font-family: 'Poppins', sans-serif;
	user-select: none;
}

.duration-display span {
	font-size: 14px;
	opacity: 0.7;
	margin-left: 2px;
}

/* UI Elements Fade */
.ui-element {
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.ui-element.hidden {
	opacity: 0 !important;
	visibility: hidden;
}

/* Override animation when hidden */
.image-info.ui-element.hidden {
	animation: none !important;
}

/* Mobile Menu Toggle */
.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
}

.menu-toggle span {
	width: 30px;
	height: 3px;
	background: #fff;
	transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(8px, -8px);
}

/* Slider Wrapper */
.slider-wrapper {
	position: relative;
	width: 100vw;
	height: 100vh;
	perspective: 1000px;
}

.slider-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity var(--slide-transition-duration) ease-in-out;
	transform-style: preserve-3d;
}

.slide.active {
	opacity: 1;
	z-index: 2;
}

.slide.prev {
	opacity: 0.5;
	z-index: 1;
}

/* Parallax Layers */
.parallax-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.background-layer {
	z-index: 1;
}

.background-layer img {
	width: 110%;
	height: 110%;
	object-fit: cover;
	position: absolute;
	top: -5%;
	left: -5%;
	filter: brightness(0.7);
}

/* Image Info at Bottom */
.image-info {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	text-align: center;
	color: white;
	width: 90%;
	max-width: 800px;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
	padding: 25px 40px;
	border-radius: 15px;
	opacity: 0;
	animation: fadeInUp 1s ease-out 0.3s forwards;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.slide.active .image-info {
	animation: fadeInUp 1s ease-out 0.3s forwards;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate(-50%, 20px);
	}

	100% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.image-info h2 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 10px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	letter-spacing: 1px;
}

.image-info p {
	font-size: 1.1rem;
	font-weight: 400;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	opacity: 0.9;
}

/* Decorative Shapes */
.parallax-shape {
	position: fixed;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(4px);
	border-radius: 50%;
	transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	z-index: 500;
	pointer-events: auto;
}

.parallax-shape:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: scale(1.1) !important;
}

.shape-1 {
	width: 200px;
	height: 200px;
	top: 15%;
	left: 10%;
}

.shape-2 {
	width: 150px;
	height: 150px;
	bottom: 25%;
	right: 15%;
	top: auto;
	left: auto;
}

/* Navigation Arrows */
.nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.2);
	color: white;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 100;
	transition: all 0.3s ease;
	font-size: 1.5rem;
}

.nav-arrow:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-50%) scale(1.1);
}

.nav-arrow.prev {
	left: 30px;
}

.nav-arrow.next {
	right: 30px;
}

/* Dots Navigation */
.dots-container {
	position: fixed;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	z-index: 100;
}

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: white;
	opacity: 0;
	transition: all 0.3s ease;
}

.dot.active {
	background: rgba(255, 255, 255, 0.9);
	transform: scale(1.4);
}

.dot.active::after {
	opacity: 1;
}

.dot:hover {
	background: rgba(255, 255, 255, 0.7);
}

/* Gradient Overlay */
.slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.4) 0%,
			transparent 30%,
			transparent 60%,
			rgba(0, 0, 0, 0.6) 100%);
	z-index: 3;
	pointer-events: none;
}

/* Pop-up Overlay Sections */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	backdrop-filter: blur(15px);
	z-index: 2000;
	display: none;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.overlay.active {
	display: flex;
	animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

.overlay-content {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(30px);
	padding: 60px;
	border-radius: 25px;
	max-width: 780px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
	transform: scale(0.9);
	animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.overlay-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 150px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
	border-radius: 25px 25px 0 0;
	pointer-events: none;
}

.overlay-content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
	border-radius: 0 0 25px 25px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.overlay-content.has-scroll::after {
	opacity: 1;
}

@keyframes scaleIn {
	to {
		transform: scale(1);
	}
}

.overlay-content h2 {
	color: #fff;
	font-size: 2.8rem;
	margin-bottom: 35px;
	font-weight: 400;
	position: relative;
	padding-bottom: 20px;
	letter-spacing: -0.5px;
}

.overlay-content h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, transparent 100%);
	border-radius: 2px;
}

.overlay-content p,
.overlay-content label {
	color: #e8e8e8;
	font-size: 1.1rem;
	line-height: 1.9;
	margin-bottom: 22px;
	font-weight: 400;
}

.overlay-content p {
	position: relative;
	padding-left: 20px;
}

.overlay-content p::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 4px;
	height: 4px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.overlay-content strong {
	color: #fff;
	font-weight: 700;
}

.overlay-content a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 3px;
	transition: all 0.3s ease;
}

.overlay-content a:hover {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Custom Scrollbar */
.overlay-content::-webkit-scrollbar {
	width: 10px;
}

.overlay-content::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.02);
	border-radius: 10px;
	margin: 10px 0;
}

.overlay-content::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: all 0.3s ease;
}

.overlay-content::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%);
	background-clip: padding-box;
}

/* Firefox Custom Scrollbar */
.overlay-content {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.02);
}

.close-btn {
	position: absolute;
	top: 25px;
	right: 25px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	transition: all 0.3s ease;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.close-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: rotate(90deg) scale(1.1);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Testimonial Cards */
.testimonial-card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
	padding: 35px;
	border-radius: 18px;
	margin-bottom: 30px;
	border-left: 4px solid rgba(255, 255, 255, 0.6);
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.testimonial-card::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 20px;
	font-size: 120px;
	color: rgba(255, 255, 255, 0.05);
	font-family: Georgia, serif;
	line-height: 1;
	pointer-events: none;
}

.testimonial-card:hover {
	transform: translateY(-5px);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.1) 100%);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
	border-left-color: #fff;
}

.testimonial-card p {
	font-style: italic;
	margin-bottom: 18px;
	color: #f0f0f0;
	position: relative;
	z-index: 1;
	font-size: 1.05rem;
	font-weight: 400;
}

.testimonial-card p::before {
	display: none;
}

.testimonial-card .author {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
	font-style: normal;
	margin: 0;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.testimonial-card .author::before {
	content: '— ';

	color: rgba(255, 255, 255, 0.6);
}

/* Contact Form */
.contact-form {
	margin-top: 30px;
}

.contact-form label {
	display: block;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.contact-form label::before {
	display: none;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 16px 20px;
	margin-bottom: 25px;
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	color: #fff;
	font-size: 1rem;
	font-family: 'Poppins', sans-serif;
	transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.contact-form textarea {
	min-height: 160px;
	resize: vertical;
}

.submit-btn {
	background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
	color: #000;
	border: none;
	padding: 16px 45px;
	border-radius: 12px;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.submit-btn:hover {
	background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(255, 255, 255, 0.25);
}

.submit-btn:active {
	transform: translateY(-1px);
}

/* Scroll Indicator */
.scroll-indicator {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.scroll-indicator.show {
	opacity: 1;
}

.scroll-indicator::after {
	content: '↓';
	animation: scrollBounce 2s ease-in-out infinite;
}

/* Overlay Images */
.overlay-image {
	width: 100%;
	max-width: 800px;
	height: auto;
	border-radius: 12px;
	margin: 30px auto 20px;
	display: block;
	opacity: 0.9;
	transition: opacity 0.3s ease;
}

.overlay-image:hover {
	opacity: 1;
}

.map-image {
	margin-top: 20px;
}

/* Contact Address */
.contact-address {
	margin-top: 40px;
	padding: 25px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-address h3 {
	color: #fff;
	font-size: 1.4rem;
	font-weight: 500;
	margin-bottom: 15px;
	letter-spacing: 0.5px;
}

.contact-address p {
	color: #e8e8e8;
	line-height: 1.8;
}

.contact-address a {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.contact-address a:hover {
	opacity: 0.7;
}

/* Map Container */
.map-container {
	width: 100%;
	max-width: 800px;
	margin: 30px auto 20px;
}

.overlay-map {
	transition: opacity 0.3s ease;
}

.overlay-map:hover {
	opacity: 1 !important;
}
}

@keyframes scrollBounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(5px);
	}
}

/* Footer */
footer {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 15px 30px;
	z-index: 50;
	text-align: right;
}

footer p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
}

footer a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.3s ease;
	margin: 0 3px;
}

footer a:hover {
	color: #fff;
}

/* Responsive Design */
@media (max-width: 968px) {
	header {
		padding: 20px 30px;
	}

	.logo {
		font-size: 1.5rem;
	}

	nav {
		gap: 25px;
	}

	nav a {
		font-size: 0.95rem;
	}

	.image-info h2 {
		font-size: 1.6rem;
	}

	.image-info p {
		font-size: 1rem;
	}

	.overlay-content {
		padding: 40px 30px;
	}

	.overlay-content h2 {
		font-size: 2.2rem;
	}

	.testimonial-card {
		padding: 28px;
	}

	.contact-form input,
	.contact-form textarea {
		padding: 14px 18px;
	}
}

@media (max-width: 768px) {
	header {
		padding: 15px 20px;
	}

	.logo {
		font-size: 1.3rem;
	}

	nav {
		position: fixed;
		top: 70px;
		left: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		flex-direction: column;
		gap: 0;
		padding: 20px 0;
		transform: translateY(-100%);
		opacity: 0;
		transition: all 0.3s ease;
		pointer-events: none;
	}

	nav.active {
		transform: translateY(0);
		opacity: 1;
		pointer-events: all;
	}

	nav a {
		padding: 18px 30px;
		width: 100%;
		text-align: center;
		font-size: 1.1rem;
		border-radius: 0;
		transition: all 0.3s ease;
	}

	nav a:hover,
	nav a:active {
		background: rgba(255, 255, 255, 0.08);
	}

	nav a::before {
		border-radius: 0;
	}

	.fullscreen-btn {
		width: 42px;
		height: 42px;
		margin: 15px auto 10px;
		border-radius: 10px;
	}

	.fullscreen-btn::before {
		display: none;
	}

	.fullscreen-btn svg {
		width: 20px;
		height: 20px;
	}

	.menu-toggle {
		display: flex;
	}

	.image-info {
		bottom: 70px;
		padding: 20px 25px;
	}

	.image-info h2 {
		font-size: 1.4rem;
		margin-bottom: 8px;
	}

	.image-info p {
		font-size: 0.95rem;
	}

	.nav-arrow {
		width: 50px;
		height: 50px;
		font-size: 1.2rem;
	}

	.nav-arrow.prev {
		left: 15px;
	}

	.nav-arrow.next {
		right: 15px;
	}

	.parallax-shape {
		width: 120px;
		height: 120px;
	}

	.shape-2 {
		width: 90px;
		height: 90px;
	}

	.ui-toggle-btn {
		bottom: 55px;
		right: 20px;
		width: 32px;
		height: 32px;
	}

	.ui-toggle-btn svg {
		width: 16px;
		height: 16px;
	}

	.play-pause-btn {
		bottom: 20px;
		left: 20px;
		width: 45px;
		height: 45px;
	}

	.play-pause-btn svg {
		width: 18px;
		height: 18px;
	}

	.progress-ring {
		width: 51px;
		height: 51px;
	}

	.duration-controls {
		bottom: 20px;
		left: 80px;
		gap: 8px;
	}

	.duration-btn {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}

	.duration-display {
		min-width: 40px;
		height: 32px;
		font-size: 14px;
		padding: 0 10px;
	}

	.overlay-content {
		padding: 40px 25px;
		width: 95%;
		border-radius: 20px;
	}

	.overlay-content h2 {
		font-size: 2rem;
		margin-bottom: 25px;
	}

	.overlay-content p {
		font-size: 1rem;
	}

	.testimonial-card {
		padding: 25px;
		margin-bottom: 25px;
	}

	.testimonial-card::before {
		font-size: 80px;
	}

	.contact-form input,
	.contact-form textarea {
		padding: 14px 16px;
		margin-bottom: 20px;
	}

	.submit-btn {
		padding: 14px 35px;
		font-size: 1rem;
	}

	footer {
		padding: 10px 15px;
	}

	footer p {
		font-size: 0.75rem;
		line-height: 1.5;
	}
}

@media (max-width: 480px) {
	.logo {
		font-size: 1.1rem;
		letter-spacing: 1px;
	}

	.image-info {
		bottom: 60px;
		padding: 15px 20px;
	}

	.image-info h2 {
		font-size: 1.2rem;
	}

	.image-info p {
		font-size: 0.85rem;
	}

	.dots-container {
		bottom: 40px;
		gap: 12px;
	}

	.overlay-image {
		margin: 20px auto 15px;
		border-radius: 8px;
	}

	.contact-address {
		margin-top: 30px;
		padding: 20px;
	}

	.contact-address h3 {
		font-size: 1.2rem;
	}

	.map-container {
		margin: 20px auto 15px;
	}

	.overlay-map {
		height: 250px;
	}

	.dot {
		width: 10px;
		height: 10px;
	}

	.overlay-content {
		padding: 30px 20px;
	}

	.overlay-content h2 {
		font-size: 1.6rem;
		margin-bottom: 20px;
	}

	.overlay-content p {
		font-size: 0.95rem;
		padding-left: 15px;
	}

	.testimonial-card {
		padding: 20px;
		margin-bottom: 20px;
	}

	.testimonial-card::before {
		font-size: 60px;
		left: 10px;
	}

	.contact-form label {
		font-size: 0.8rem;
	}

	.contact-form input,
	.contact-form textarea {
		padding: 12px 15px;
		font-size: 0.95rem;
	}

	.submit-btn {
		padding: 13px 30px;
		font-size: 0.95rem;
	}
}












----------------------------------------------------------------------------------------------------------------------------------------------

/* =========================================
   BLOQUEAR ARRASTRE Y SELECCION DE IMAGENES
========================================= */

img,
.slide img,
.background-layer img{

    -webkit-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    pointer-events: none;
}

/* EVITAR SELECCIONAR EN MOVIL */

body{

    -webkit-tap-highlight-color: transparent;
}

-----------------

/* =========================================
   CONTROL DE TAMAÑO DE LETRAS
========================================= */

:root{

    /* TITULO PRINCIPAL DEL SLIDER */

    --titulo-pc: 2rem;
    --titulo-tablet: 1.5rem;
    --titulo-movil: 1.1rem;

    /* DESCRIPCION DEL SLIDER */

    --texto-pc: 1.1rem;
    --texto-tablet: 0.95rem;
    --texto-movil: 0.82rem;

}

/* =========================================
   TITULOS
========================================= */

.image-info h2{

    font-size: var(--titulo-pc);
    line-height: 1.3;
}

/* =========================================
   DESCRIPCIONES
========================================= */

.image-info p{

    font-size: var(--texto-pc);
    line-height: 1.5;
}

/* =========================================
   TABLET
========================================= */

@media (max-width:768px){

    .image-info h2{

        font-size: var(--titulo-tablet);
    }

    .image-info p{

        font-size: var(--texto-tablet);
    }

}

/* =========================================
   MOVIL
========================================= */

@media (max-width:480px){

    .image-info h2{

        font-size: var(--titulo-movil);
    }

    .image-info p{

        font-size: var(--texto-movil);
    }

}


----

--------------------------------------------------------------------------------------------------------------------------------

/* =========================================
   QUITAR SCROLL SIN ROMPER IMAGENES
========================================= */

html,
body{

    margin: 0;
    padding: 0;

    overflow-x: hidden;
}

/* EVITAR RAYA NEGRA */

.slider-wrapper,
.slider-container{

    overflow: hidden;
}

/* ASEGURAR IMAGENES */

.background-layer img{

    display: block;
}


-------------------------






--------------------------------------------------------------------------------------------------------------------------------


/* =========================================
   BOTON REDES
========================================= */

.social-container{

    position: fixed;

    top: 18px;
    right: 90px;

    z-index: 99999;
}

/* BOTON */

.social-btn-menu{

    position: relative;

    width: 52px;
    height: 52px;

    border: none;
    outline: none;

    border-radius: 50%;

    cursor: pointer;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 18px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0.05)
    );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(255,255,255,0.15);

    box-shadow:
    0 10px 35px rgba(0,0,0,0.35);

    transition: all 0.4s ease;
}

/* ANILLO */

.social-ring{

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    border: 2px solid rgba(255,255,255,0.15);

    animation: socialPulse 2s infinite;
}

/* ICONO */

.social-btn-menu i{

    position: relative;

    z-index: 2;

    transition: transform 0.4s ease;
}

/* HOVER */

.social-btn-menu:hover{

    transform:
    translateY(-3px)
    scale(1.05);

    box-shadow:
    0 15px 45px rgba(0,0,0,0.45);
}

.social-btn-menu:hover i{

    transform: rotate(180deg);
}

/* CLICK */

.social-btn-menu:active{

    transform: scale(0.92);
}

/* MENU */

.social-popup{

    position: absolute;

    top: 72px;
    right: 4px;

    display: flex;
    flex-direction: column;

    gap: 12px;

    opacity: 0;
    visibility: hidden;

    transform:
    translateY(-10px)
    scale(0.9);

    transition: all 0.35s ease;
}

/* MOSTRAR */

.social-popup.show{

    opacity: 1;

    visibility: visible;

    transform:
    translateY(0)
    scale(1);
}

/* ICONOS */

.social-popup a{

    width: 46px;
    height: 46px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    color: white;

    font-size: 16px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.15),
        rgba(255,255,255,0.04)
    );

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.1);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.25);

    transition: all 0.3s ease;
}

/* HOVER ICONOS */

.social-popup a:hover{

    transform:
    translateX(-6px)
    scale(1.12);
}

/* COLORES */

.youtube:hover{
    background: #ff0000;
}

.facebook:hover{
    background: #1877f2;
}

.tiktok:hover{
    background: #000000;
}

.instagram:hover{
    background: #e1306c;
}

.twitter:hover{
    background: #111111;
}

/* ANIMACION */

@keyframes socialPulse{

    0%{

        transform: scale(1);

        opacity: 1;
    }

    70%{

        transform: scale(1.25);

        opacity: 0;
    }

    100%{

        transform: scale(1.25);

        opacity: 0;
    }

}

/* =========================================
   MOVIL
========================================= */

@media (max-width:768px){

    .social-container{

        top: 14px;
        right: 70px;
    }

    .social-btn-menu{

        width: 46px;
        height: 46px;
    }

    .social-popup{

        top: 64px;
    }

}


----------------------------------------------------------------------------------------------------------------------------------

/* LOGO HEADER */

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 70px;      /* tamaño del logo */
    height: auto;
    object-fit: contain;
    display: block;
}




-----------------------------------------------------------------------------------------------------------------------------


/* =========================================
   BLOQUEAR ARRASTRE IMAGENES
========================================= */

img{
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}




---------------------------------------------------------------------------------------------------------------------------



/* =========================================
   BLOQUEAR ARRASTRE IMAGENES
========================================= */

img{
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}




--------------------------------------------------------------------------------------------------------------------------------


/* =========================================
   BLOQUEAR SELECCION DE TEXTO
========================================= */

html, body,
p, h1, h2, h3, h4, h5, h6,
span, a, div, button, img {

    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

    -webkit-touch-callout:none;
}


--------------------------------------------------------------------------------------------------------------------------------


/* =========================================
   PROTEGER LOGO
========================================= */

.logo{
    position: relative;
    display: inline-block;
}

.logo::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:10;

    pointer-events:none; /* IMPORTANTE */
}

.logo img{

    -webkit-user-drag:none;

    -webkit-touch-callout:none;

    user-select:none;

    -webkit-user-select:none;

    -moz-user-select:none;

    -ms-user-select:none;

    pointer-events:none;

}


---------------------------------------------------------------------------------------------------------------------------

.comunicados-btn{
    position: relative;
}

/* PC  */
.nuevo-badge{

    position:absolute;

    top:-10px;
    right:-12px;

    display:inline-block;

    background:red;
    color:white;

    font-size:8px;
    font-weight:bold;

    padding:3px 6px;

    border-radius:20px;

    pointer-events:none;

    animation:pulseBadge 1.5s infinite;
}

@keyframes pulseBadge{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}


/* TELEFONO */
@media (max-width:768px){

    .nuevo-badge{

        top:0px;

        right:50%;

        transform:translateX(22px);

        font-size:7px;

        padding:2px 5px;

        animation:pulseMobile 1.5s infinite;
    }

}


/* Animación móvil */
@keyframes pulseMobile{

    0%{
        transform:translateX(22px) scale(1);
    }

    50%{
        transform:translateX(22px) scale(1.12);
    }

    100%{
        transform:translateX(22px) scale(1);
    }

}
----------------

@media (max-width:768px){

    .comunicados-btn{

        display:inline-flex !important;
        width:auto !important;

    }

    .nuevo-badge{

        top:-8px;
        right:-10px;

        font-size:7px;
        padding:2px 5px;

    }

}




--------------------------------------------------------------------------------------------------------------------------------

/* Seccion Avisos */


/* La tarjeta será la referencia */
.testimonial-card{
    position:relative;
}


/* Etiqueta aviso */
.aviso-importante{

    position:absolute;

    top:10px;
    right:10px;

    background:#ff0000;

    color:white;

    font-size:10px;

    font-weight:bold;

    padding:6px 10px;

    border-radius:20px;

    z-index:10;

    animation:pulseAviso 1.5s infinite;
}


/* Animación */
@keyframes pulseAviso{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.10);
    }

    100%{
        transform:scale(1);
    }

}


@media (max-width:768px){

    .aviso-importante{

        top:8px;

        right:8px;

        font-size:8px;

        padding:4px 8px;

    }

}


--------------------------------------------------------------------------------------------------------------------------------

/* ==========================================================
   REDUCIR TAMAÑO DE LAS DOS FLECHAS, PLAY/PAUSE Y FULLSCREEN
   ========================================================== */

/* Ambas flechas del slider (‹ y ›) */
.nav-arrow {
    /* Tamaño moderadamente más pequeño */
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;

    /* Tamaño del símbolo */
    font-size: 38px !important;
    line-height: 1 !important;
    font-weight: 400 !important;

    /* Centrado */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Sin espacios extra */
    padding: 0 !important;
    margin: 0 !important;

    /* Reducción visual ligera */
    transform: scale(0.85) !important;
    transform-origin: center center !important;
}

/* Botón Play/Pause */
.play-pause-btn {
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    transform: scale(0.85) !important;
    transform-origin: center center !important;
}

/* Ícono Play/Pause */
.play-pause-btn svg {
    width: 22px !important;
    height: 22px !important;
}

/* Botón Fullscreen */
.fullscreen-btn {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    transform: scale(0.85) !important;
    transform-origin: center center !important;
}

/* Ícono Fullscreen */
.fullscreen-btn svg {
    width: 20px !important;
    height: 20px !important;
}



--------------------------------------------------------------

.history-item {
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.history-btn {
    width: 100%;
    padding: 18px;
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;

    transition: 0.3s;
}

.history-btn:hover {
    background: rgba(255,255,255,0.08);
}

.history-btn span {
    font-size: 24px;
    transition: 0.3s ease;
}

.history-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    opacity: 0;
    padding: 0 18px;
}

.history-content p {
    margin: 15px 0;
    line-height: 1.7;
    color: #ddd;
}

.history-item.active .history-content {
    max-height: 500000px;
    opacity: 1;
    padding-bottom: 18px;
}

.history-item.active .history-btn span {
    transform: rotate(45deg);
}


---------------------------------------------------------------------------------------------------------------------------

/* =========================================================
   BARRA INFORMATIVA PREMIUM
========================================================= */

html,
body{

    overflow-x: hidden;
}

/* BARRA */

.floating-news{

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 42px;

    overflow: hidden;

    z-index: 1;

    pointer-events: none;

    box-shadow:
    0 2px 12px rgba(0,0,0,.25);
}

/* TEXTO */

.floating-news-text{

    position: absolute;

    top: 0;

    line-height: 32px;

    white-space: nowrap;

    color: white;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .5px;

    padding-left: 100%;

    animation:
    tickerMove 16s linear infinite;
}

/* ANIMACION */

@keyframes tickerMove{

    0%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(-200%);
    }
}

/* EFECTO BRILLO */

.floating-news::before{

    content: '';

    position: absolute;

    top: 0;
    left: -100%;

    width: 50%;
    height: 100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    animation:
    shineMove 4s linear infinite;
}

@keyframes shineMove{

    100%{
        left: 150%;
    }
}

/* =========================================================
   TEMAS DE COLOR
========================================================= */

/* ROJO */

.red-theme{

    background:
    linear-gradient(
        90deg,
        #5c0000,
        #8b0000,
        #c40000,
        #8b0000,
        #5c0000
    );
}

/* AZUL */

.blue-theme{

    background:
    linear-gradient(
        90deg,
        #001f4d,
        #003b8f,
        #005eff,
        #003b8f,
        #001f4d
    );
}

/* VERDE */

.green-theme{

    background:
    linear-gradient(
        90deg,
        #003b12,
        #007d25,
        #00b83a,
        #007d25,
        #003b12
    );
}

/* DORADO */

.gold-theme{

    background:
    linear-gradient(
        90deg,
        #5c4300,
        #a67800,
        #ffbf00,
        #a67800,
        #5c4300
    );
}

/* NEGRO PREMIUM */

.dark-theme{

    background:
    linear-gradient(
        90deg,
        #111,
        #222,
        #444,
        #222,
        #111
    );
}

/* MOVIL */

@media(max-width:768px){

    .floating-news{

        height: 38px;
    }

    .floating-news-text{

        font-size: 11px;

        line-height: 38px;
    }

}

html,
body{

    overflow-x: hidden;
}



-------------------------------------------------------------------------------------

/* =========================================================
   BOTON PREMIUM
========================================================= */

.visual-media-btn{

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 16px 30px;

    border: none;

    border-radius: 18px;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
    );

    color: white;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    overflow: hidden;

    backdrop-filter: blur(14px);

    transition: 0.35s ease;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.35);

}

/* Hover */

.visual-media-btn:hover{

    transform:
    translateY(-5px)
    scale(1.03);

    box-shadow:
    0 18px 50px rgba(0,0,0,0.45);

}

/* Icono */

.visual-media-btn i{

    font-size: 18px;

}

/* =========================================================
   MODAL
========================================================= */

.visual-media-modal{

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.94);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 999999;

    padding: 20px;

}

/* Mostrar */

.visual-media-modal.active{

    display: flex;

}

/* Contenedor */

.visual-media-container{

    width: 100%;

    max-width: 1200px;

    display: flex;

    justify-content: center;

    align-items: center;

}

/* Imagen y video */

.visual-media-container img,
.visual-media-container video{

    max-width: 100%;

    max-height: 90vh;

    border-radius: 20px;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.45);

}

/* Zoom imagen */

.visual-media-container img{

    cursor: zoom-in;

    transition: transform 0.35s ease;

}

.visual-media-container img.zoomed{

    transform: scale(1.8);

    cursor: zoom-out;

}

/* Cerrar */

.close-visual-media{

    position: absolute;

    top: 18px;

    right: 28px;

    font-size: 50px;

    color: white;

    cursor: pointer;

}



-----------------------------------------------------------

/* =========================================================
   TEXTO MAS PEQUEÑO SOLO EN TELEFONO
========================================================= */

@media screen and (max-width: 768px){

    .image-info h2{

        font-size: 9px !important;

        line-height: 1.3;

    }

    .image-info p{

        font-size: 13px !important;

        line-height: 1.5;

    }

}




---------------------------------------------------------------------------------------------------
html,
body {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}



----------------------------------------------------------------------------------------------------


/* =========================================================
   LOGO PREMIUM EFFECT
========================================================= */

.logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Imagen */
.logo img {

    height: auto;
    object-fit: contain;

    transition:
    transform 0.5s ease,
    filter 0.5s ease;

    filter:
    drop-shadow(0 0 8px rgba(255,255,255,0.15))
    drop-shadow(0 0 18px rgba(255,255,255,0.08));

    animation: logoFloat 4s ease-in-out infinite;
}

/* Hover */
.logo:hover img {

    transform:
    scale(1.08)
    rotate(-2deg);

    filter:
    drop-shadow(0 0 12px rgba(255,255,255,0.35))
    drop-shadow(0 0 30px rgba(255,255,255,0.20));
}


/* Glow Exterior */
.logo::after {

    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.12),
        transparent 70%
    );

    z-index: -1;

    animation: pulseGlow 3s ease-in-out infinite;
}

/* Flotación */
@keyframes logoFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Brillo */
@keyframes shineMove {

    0% {
        left: -120%;
    }

    100% {
        left: 220%;
    }
}

/* Glow */
@keyframes pulseGlow {

    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.12);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

-----------------------------------------------------