/* --- 1. IMPORTACIÓN DE TIPOGRAFÍAS DE CALIDAD --- */
@import url('https://googleapis.com');

@font-face {
	font-family: RingBearer;
	src: url(../css/RingBearer.ttf) format('truetype');
}

/* --- 2. PALETA DE COLORES OFICIAL DE CONTACTO.HTML --- */
:root {
	--color-fondo: #FFFFFF;               /* Blanco puro de fondo */
	--texto-principal: #2D3748;           /* Gris carbón para máxima legibilidad */
	--texto-secundario: #4A5568;          /* Gris medio para descripciones */
	
	/* Identidad Visual (Azul Corporativo de contacto.html) */
	--azul-primario: #3182CE;             /* Color inicial del botón principal e iconos */
	--azul-hover: #2B6CB0;                /* Color del título y estado hover principal */
	
	/* Botón Secundario (Gris Neutro de contacto.html) */
	--gris-boton-bg: #E2E8F0;             /* Fondo inicial botón secundario */
	--gris-boton-hover-bg: #CBD5E0;       /* Fondo hover botón secundario */
}

/* --- 3. RESETEO GENERAL Y PREVENCIÓN DE SCROLL HORIZONTAL --- */
* {
	margin:     0;
	padding:    0;
	box-sizing: border-box;
}

body {	
	font-family: 'Cormorant Garamond', Georgia, serif; /* Estilo antiguo e inglés unificado */
	background-color: var(--color-fondo);
	color: var(--texto-principal);
	line-height: 1.65; 
	overflow-x: hidden; /* Elimina la barra horizontal molesta */
}

a {
	text-decoration: none;
}

/* --- 4. CONTENEDORES --- */
.section, .carousel-section {
	display: flex;
	justify-content: center;
	width: 100%;
	background-color: var(--color-fondo);
}

.container, .carousel-section-cards {
	width: 100%;
	max-width: 1440px; 
	padding: 0 20px;
	margin: 0 auto;
	position: relative;
}

/* --- 5. ESTRUCTURA DE DOS COLUMNAS (Formato Base de contacto.html) --- */
.card {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr; 
	gap: 40px;
	padding: 50px 0;
	width: 100%;
	align-items: start; /* Ancla el contenido y los logos arriba */
}

/* --- LÓGICA TÉCNICA DEL CARRUSEL (Aislada exclusivamente para index.php) --- */
.carousel-track {
	display: flex; /* Mantiene las 11 tarjetas alineadas en una tira horizontal gigante */
	width: 100%;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Movimiento lateral fluido */
	align-items: start;
}

/* Forzamos a las tarjetas que estén DENTRO del carrusel a comportarse como slides transparentes laterales */
.carousel-track .card {
	flex: 0 0 100%;    /* Cada tarjeta del carrusel ocupa exactamente el 100% de la pantalla */
	width: 100%;
	opacity: 0;        /* Transparentes por defecto */
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* La tarjeta activa del carrusel se hace visible */
.carousel-track .card.show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* --- 6. ELEMENTOS DE TEXTO --- */
.card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card-title {	
	font-family: RingBearer, serif;
	font-size: 4.5rem;
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 1.5rem;
	color: var(--azul-hover); 
}

.card-text {
	margin-bottom: 25px; 
	font-size: 1.3rem; 
	color: var(--texto-secundario); 
	letter-spacing: 0.5px;
}

.card-text i {
	color: var(--azul-hover); 
	margin-right: 8px;
}

/* --- 7. BOTONES ELEGANTES (Diseño exacto de contacto.html heredado a toda la web) --- */
.card-buttons {
	display: flex;
	gap: 15px;
}

.button {
	font-size: 0.85rem; 
	padding: 12px 24px;
	font-weight: 700;
	border-radius: 5px; /* Esquinar de 5px */
	text-transform: uppercase; /* Forzamos mayúsculas para aspecto más serio y de sello */
	letter-spacing: 1px;
	display: inline-block;
	text-align: center;
	border: none;
	cursor: pointer;
}

.button-primary {
	background-color: var(--azul-primario);
	color: var(--color-fondo);
	transition: background-color 0.2s ease;
}

.button-primary:hover {
	background-color: var(--azul-hover);
}

.button-secondary {
	background-color: var(--gris-boton-bg);
	color: var(--texto-secundario);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button-secondary:hover {
	background-color: var(--gris-boton-hover-bg);
	color: var(--texto-principal);
}

/* --- 8. CONTENEDOR DE IMÁGENES Y LOGOS (Para contacto.html) --- */
.contenedor-imagenes {
	display: flex;            
	justify-content: flex-start; 
	gap: 15px;                
	align-items: center;      
	flex-wrap: nowrap;        
	width: 100%;              
	margin-top: 10px;       
	margin-bottom: 35px;    
}

.contenedor-imagenes img {
	max-width: 100px;       
	height: auto;             
	object-fit: contain;    
    border-radius: 5px; /* Opcional: añade coherencia también a los logos pequeños */        
}

.contenedor-reviews {
	margin-top: 55px;    
	margin-bottom: 10px; 
	width: 100%;         
}

/* --- 9. COLUMNA DERECHA (Fotos en index.php / Logo grande en contacto.html) --- */
.card-imgs {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 15px; 
}

.card-img {
	width: 100%;
	display: flex;
	justify-content: center;
}

.card-img img {
	width: 100%;
	max-width: 450px; 
	height: auto;
	object-fit: contain;
	border-radius: 5px; 
	/* CLAVE: Evita que el navegador emborrone la textura desgastada al achicar la foto */
	/*image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges; */
}

/* --- 10. CONTROLES DEL CARRUSEL (Flechas fijas a los lados en index.php) --- */
.carousel-control {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%); 
	display: flex;
	flex-direction: column;
	gap: 15px;
	z-index: 10; 
}

.prev, .next {
	color: var(--color-fondo);
	background-color: var(--azul-primario);
	font-size: 1.2rem;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px; 
	transition: background-color 0.2s ease;
	cursor: pointer;
}

.prev:hover, .next:hover {
	background-color: var(--azul-hover);
}

/* --- 11. 📱 MEDIA QUERIES (RESPONSIVIDAD TOTAL) --- */
@media only screen and (max-width: 1150px) {
	.card-title {
		font-size: 3.5rem;
	}
}

@media only screen and (max-width: 850px) {
	.card, .carousel-track .card.show {
		grid-template-columns: 1fr; /* Una sola columna vertical en móviles */
		gap: 40px;
		padding: 30px 0;
	}
	
	.card-title {
		font-size: 3rem;
	}

	.card-imgs {
		margin-top: 20px; 
	}
	
	.contenedor-imagenes {
		justify-content: center; 
	}

	.contenedor-reviews {
		margin-top: 45px;
		margin-bottom: 20px; 
	}

	.carousel-control {
		position: static;
		transform: none;
		flex-direction: row;
		justify-content: center;
		margin-top: 30px;
		width: 100%;
	}
	
	.legal-title {
		font-size: 2.5rem;
		text-align: center;
	}
	
	.legal-page {
		margin: 25px auto;
	}
}

@media only screen and (max-width: 510px) {
	.card-text, .card-title {
		text-align: center; 
	}
	
	.contenedor-imagenes {
		justify-content: center;
	}

	.card-buttons {
		display: flex;
		flex-direction: column; 
		width: 100%;
		gap: 12px;
	}
	
	.button {
		width: 100%; 
	}
}



.legal-page {
	max-width: 850px;       /* Ancho óptimo de lectura para textos largos (evita cansancio visual) */
	margin: 50px auto;      /* Centra el bloque legal en la pantalla con espacio arriba y abajo */
	text-align: justify;    /* Justificado profesional solicitado */
}

.legal-title {
	font-family: RingBearer, serif; /* Sello de la casa */
	font-size: 3.5rem;
	color: var(--azul-hover);
	margin-bottom: 25px;
	line-height: 1.1;
}

.legal-intro {
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--texto-principal);
	margin-bottom: 40px;
}

.legal-subtitle {
	font-size: 1.6rem;
	color: var(--azul-primario); /* Subtítulos en tu azul corporativo */
	margin-top: 35px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--gris-boton-bg); /* Línea divisoria fina muy elegante */
	padding-bottom: 8px;
}

.legal-text {
	font-size: 1.2rem;
	color: var(--texto-secundario);
	margin-bottom: 20px;
}

.legal-list {
	padding-left: 20px;
	margin-bottom: 25px;
}

.legal-list li {
	font-size: 1.2rem;
	color: var(--texto-secundario);
	margin-bottom: 12px; /* Espacio generoso entre puntos de la lista */
}

.legal-list li a {
	color: var(--azul-primario);
	transition: color 0.2s;
}

.legal-list li a:hover {
	color: var(--azul-hover);
	text-decoration: underline;
}