/* --- ARIES MATERIALS - TEMA PROFESIONAL REFINADO (v2) --- */

/* --- PALETA DE COLORES --- */
/*
  --color-primario: #252525; (Gris Carbón Oscuro)
  --color-acento: #C5B49C; (Beige Arena)
  --color-texto: #3A3A3A; (Gris Texto)
  --color-fondo: #FFFFFF; (Blanco)
  --color-fondo-alternativo: #F9F9F9; (Gris Claro Suave)
  --color-blanco: #FFFFFF;
*/

/* --- ESTILOS GLOBALES Y TIPOGRAFÍA --- */
html{
  -webkit-font-smoothing: antialiased;
}


body {
  width: 100%;
  *zoom: 1;
  font-family: 'Source Sans Pro', sans-serif;
  background: #FFFFFF;
  color: #3A3A3A;
}
body:before, body:after { content: ""; display: table; }
body:after { clear: both; }
.hidden { display: none !important; }

.wrapper { width: 100%; max-width: 1002px; margin: 0 auto; }
.first { margin-left: 0; }
.clear { clear: both; }

a, a:visited, a:active {
  color:#C5B49C;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover { color:#252525;}


/* --- HEADER Y NAVEGACIÓN --- */
#top {
  background: #fff;
  border-bottom: 1px solid #EDEDED;
  position: fixed;
  width: 100%;
  z-index: 100;
  left: 0;
  right: 0;
  padding: 15px 0; 
  *zoom: 1;
}

#top:before, #top:after { content: ""; display: table; }
#top:after { clear: both; }

.menu-dropdown{ width: 40%; display: block; float: right; margin:15px; }
.menu-dropdown select{ width:100%; height:24px; }

nav {
  width: 100%;
  max-width: 1002px;
  margin: 0 auto;
  padding: 0 20px; 
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav ul {
  width: auto;
  display: block;
  float: right; 
  margin: 0;
}nav ul li { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; float: left; }
nav ul li a {
  color: #3A3A3A;
  text-decoration: none;
  padding: 10px 15px;
  text-align: center;
  display: block;
  text-transform: uppercase;
  font-weight: 700; 
  font-size: 17px;
  letter-spacing: 0.5px;
  transition: all 0.2s ease-in-out;
}
nav ul li a:hover {
  color: #252525; 
}
#top nav .menu-btn { display:none; }

#top nav > div:first-child {
  float: left; 
  width: 200px; 
  min-width: 150px; 
}
#top nav > div:first-child img {
  width: auto;
  height: 65px;
  display: block;
}


/* --- HEADER --- */
header {
  text-align: center;
  margin: 101px auto -50px auto;
  background: #252525 url(/imagenes/banner_aries.png) center center no-repeat;
  background-size: cover;
  position: relative;
}

header:before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

header .content { width: 100%; padding: 107px 0; position: relative; z-index: 2; }
header h1 {
  font-size: 60px;
  color: #ffffff;
  font-family: 'Source Sans Pro', sans-serif;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  font-weight:700;
  letter-spacing: 1px;
}
header h2 {
  font-size: 32px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  color: #ffffff;
  margin: 20px auto;
  line-height: 1.4;
}


/* --- ESTILOS DE SECCIONES --- */
section{
  width: 100%;
  max-width: 1002px;
  margin: 50px auto -50px auto;
  text-align: center;
  overflow: hidden;
  padding-top: 110px;
  padding-bottom:110px;
}
section p { text-align: left; font-size: 16px; line-height: 26px; color: #666; padding-bottom: 10px }
section ul { text-align: left; line-height: 24px; padding:0; margin:0 0 20px 50px; color:#666; }

/* Colores de fondo de sección */
.sectiongrey { background: #F9F9F9; }
.sectionblue { background: #252525; }
.sectionorange { background: #C5B49C; } 
.sectionteal { background: #ffffff; }

/* Estilos para texto en secciones oscuras */
.sectionblue h2, .sectionblue p, .sectionblue h3 {
  color: #FFFFFF;
}

/* Títulos de sección y separador */
section .separator {
  width: 100%;
  margin-bottom: 50px;
}
section h2 {
  width: auto;
  float: none;
  line-height: 1.2;
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
  font-family: 'Source Sans Pro', sans-serif;
  color: #252525;
  display: inline-block;
}
section .separator .line {
  width: 80px;
  height: 3px;
  background-color: #C5B49C;
  margin: 10px auto;
  float: none;
}
section .separator h2 + .line {
  display: none;
}

.derecha {width:90%;margin:auto 5% auto 5%;}
.derecha p { text-align: left; }
.grande { font-size:40px; margin-top:40px; margin-bottom:20px;font-weight:200;color:#3A3A3A;}


.sectionteal p {
    text-align: center;
}


/*/////////////////////////////*/
/*   CARRUSEL DE IMAGENES	   */
/*/////////////////////////////*/	


.sectiongrey section{ padding-bottom:0px !important;}


.carrusel-marco {
	max-width: 600px;
	height: 450px; 
	margin: 40px auto;
	position: relative;
	background-color: #FFFFFF;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.carrusel-imagenes {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.imagen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0; 
	transition: opacity 0.5s ease-in-out; 
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.imagen.activa {
	opacity: 1;
	z-index: 2;
}

.imagen img {
	max-width: 90%;
	max-height: 400px;
	width: auto;
	height: auto;
	display: block;
	box-shadow: none;
}

.btn-carrusel {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: #333;
	color: white;
	border: none;
	width: 40px;
	height: 60px;
	font-size: 24px;
	cursor: pointer;
	z-index: 10;
	opacity: 0.7;
	transition: 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.btn-carrusel:hover {
	background-color: #C5B49C; /* Color corporativo */
	opacity: 1;
}

.ant { left: 0; border-radius: 0 5px 5px 0; }
.sig { right: 0; border-radius: 5px 0 0 5px; }




/* --- FORMULARIO DE CONTACTO --- */
.contact-form {
  width: 86.8%;
  background: #ffffff;
  margin: 0 auto;
  padding: 40px 0 ;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  display: flow-root;
}

.contact-form fieldset { width: 42%; float: left; margin-left: 5%; display:block; border: none; }
.contact-form fieldset label { font-family: 'Source Sans Pro', sans-serif; font-size: 16px; color: #3A3A3A; margin-top: 10px; margin-bottom: 5px; display: block; width: 97%; text-align: left; }
.contact-form fieldset span { font-family: 'Source Sans Pro', sans-serif; font-size: 14px; color: #3A3A3A; margin: 10px 0; display: block; width: 97%; text-align: left; }
.contact-form fieldset input, .contact-form fieldset textarea {
  font-size: 16px;
  color: #3A3A3A;
  border: 1px solid #DDE2E8;
  background: #F9F9F9;
  width: 95%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 5px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-form fieldset input:focus, .contact-form fieldset textarea:focus {
  outline: none;
  border-color: #C5B49C;
}
.contact-form fieldset textarea { height: 195px; }

/* RGPD y Botón Enviar */
.contact-form fieldset input.validaRPGD {float:left;width:auto;height:auto; margin: 10px 10px;}
.btn-submit {
  border: none;
  background: #C5B49C;
  color: #FFFFFF;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 600;
  text-shadow: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top:10px;
}
.btn-submit:hover {
  background: #252525;
  color: #FFFFFF;
}


/* --- ESTILOS PARA MENSAJE DE FORMULARIO ENVIADO --- */


#form:has(h1) {
  display: none;
}

#thanks {
  text-align: center;
  padding: 50px 40px;
  
  height: auto !important; 
  min-height: 316px; 
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* IMPORTANTE AGREGAMOS LA EXCLAMACION DEL GRACIAS AQUI*/
#thanks h3.grande::before {
  content: '¡';
}

#thanks h3.grande {
  font-weight: 700; 
  margin-top: 0;
  margin-bottom: 15px;
  color: #3A3A3A;
}


#thanks #client_name {
  color: #C5B49C;
}


.thanks-txt p {
  font-size: 18px;
  line-height: 1.6em;
  color: #666;
  text-align: center; 
  padding-bottom: 5px;
}


.thanks-txt::before {
  font-family: 'FontAwesome';
  content: '\f058'; /* check que aparece en pantalla */
  font-size: 50px;
  color: #C5B49C; 
  margin-bottom: 20px;
  display: block;
}



/* --- FOOTER --- */
footer {
  padding-top: 25px;
  *zoom: 1;
}
footer:before, footer:after { content: ""; display: table; }
footer:after { clear: both; }

footer .left-content { width: 100%; margin: 10px 0 30px 0px;}
footer .right-content { margin-right: 66px; float: right; }

/* AJUSTE: Ocultar menú de móvil en escritorio */
footer .left-content .menu-footer {
  display: none;
}

footer a, footer a:visited, footer a:active { color: #aaa; }
footer a:hover { color: #C5B49C; }

/* RGPD Footer */
.cuadro_rgpd {display: flex;justify-content: center;align-items: center;}
.cuadro_rgpd div {color:#ccc;font-size:12px;padding:5px 10px;}
.cuadro_rgpd div.enlace {cursor:pointer}
.cuadro_rgpd div.enlace:hover {color:#C5B49C;}

/* Redes Sociales Footer */
footer .right-content ul { margin-top: 10px; margin-left: 0; }
footer .right-content ul li { float: left; display: block; line-height: 27px; height: 22px; width: 22px; color: #ffffff; margin: 0 10px; }
footer .right-content ul li a { text-decoration: none; color: #ffffff; display: block; font-size: 24px; }
footer .right-content ul li a:hover { color:#C5B49C;}

/* Ocultar elementos viejos */
.bottom-shadow { display:none; }

/* --- RESPONSIVE (Mantenido de la hoja original) --- */
@media screen and (max-width: 1280px) {
  header{ background-size: cover; }
}
@media screen and (max-width: 800px) {
  nav ul li a { width: 100px; }
  section .separator .line { width: 38%; }
}
@media screen and (max-width: 600px) {
  #top ul { display: none; }
  #top { padding-top: 14px; }
  #top nav .menu-btn { float: right; display: block; width: 32px; height: 32px; margin-right: 22px; background-image: url(../img/menu-btn.svg); background-size:64px 32px; background-position:left center; }
  #top nav .menu-btn:active { background-position:right center; }
  header { margin-top: 60px; }
  header .content { padding: 70px 0 35px 0; }
  header h1 { font-size: 30px; }
  header h2 { font-size: 24px; line-height: 30px; }
  section .separator .line { width: 19%; margin: 20px 0.7% 0; }
  section .separator h2 { width: 57%; }
  .contact-form fieldset { width: 97.02380952380952%; margin: 0 1.488095238095238%; }
  
  /* Mostrar menú de footer en móvil */
  footer .left-content .menu-footer { display: block; }
  
  footer .left-content { width: 97%; margin: 30px 0 10px; }
  footer .right-content { width: 100%; margin: 20px 0; }
  footer .right-content ul { width:180px; margin: 0 auto; }
}