/*Estilos de página*/

body {font-family: Jost, sans-serif;
text-align: center;
font-weight: 300}

#menu {
height: 50px;
}

#menu ul li {list-style: none;
display: inline-block;}

#menu ul li a {
color: #629BCC;
text-align: center;
text-decoration: none;
width: 100px;
height: 35px;
display: block;
padding-top: 15px;
font-weight: 500}

/*CONTENIDOS*/

#contenidos h1{
margin: 20px 0;
color: #fba375;
font-size: 60px;
font-weight: 400;
text-align: center;}

#contenidos p{
margin: 100px 0;
font-size: 16px;
}

.simbolo {
  margin: 100px 0px 0px 0px;
  width: 60px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*COLECCIONES*/

#colecciones h1{
margin: 30px 30px 0px 0px;
color: #629BCC;
font-size: 60px;
font-weight: 400;
text-align: center;}

#colecciones p{
margin: 100px 0;
font-size: 16px;
}

.foto img {
display: block;
margin: 50px auto 0 auto;
cursor: pointer;
transition: transform 0.6s ease;
border-radius: 50%;
box-shadow: 0 8px 20px rgb(250,224,217);
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover; /* Rellena el círculo sin dejar espacios blancos */
box-sizing: border-box;
}

.foto img:hover{
  transform: scale(1.1); /* Escala el botón un 10% */
}

.foto h3 {
  font-size: 37px;
  color: #2bb9cc;
  font-weight: 400;
  font-style: italic;
  margin: 20px auto 0 auto;
}

.foto h4 {
  font-size: 20px;
  color: #ff7071;
  opacity: 70%;
  font-style: italic;
  font-weight: 400;
  margin: 0 2rem 1rem 1rem;
  line-height: 1.5;
}

/* LOS ESPÍRITUS */

.contenedor-espiritus {
  align-items: center;
  margin: 20px 40px auto auto;
}

.foto-espiritus img {
  width: 100%;
  max-width: 400px;
  border-radius: 50%; /* círculo */
  box-shadow: 0 8px 20px rgb(250,224,217);
  display: block;
  margin: 20px 40px auto auto;
  transition: transform 0.6s ease;
}

.foto-espiritus img:hover {
  transform: scale(1.1);
}

.texto-espiritus {
  background-color: #f7c8c9;
  opacity: 70%;
  padding: 2rem;
  border-radius: 25px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: left;
  margin: 20px 40px auto auto;
}

.texto-espiritus h2 {
  font-size: 48px;
  color: #265c86;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 1rem;
}

.texto-espiritus p {
  color: #265c86;
  font-size: 18px;
  line-height: 1.5;
}


/*CONTACTO*/

.contacto {
  margin-top: 1rem
}

.contacto h1{
 border-top: 3px solid #e4a7c3; /* línea */
  margin-top: 1rem; /* espacio desde la sección anterior */
  padding-top: 1rem; /* espacio dentro de la sección */
  display: block; 
margin: 30px 30px 0px 0px;
color: #e4a7c3;
font-size: 60px;
font-weight: 400;
text-align: center;}

.contacto p{
margin: 15px 0;
font-size: 20px;
}

/* Centrar título y símbolos */
.titulo-contacto {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 2rem;
}

/* Alinear formulario */
.contenido-contacto {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 3rem;
}

.formulario-contacto form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

/* Campos del formulario */
.formulario-contacto input[type="text"],
.formulario-contacto input[type="email"],
.formulario-contacto textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.8rem;
  border: 1px solid #599acc;
  border-radius: 0.5rem;
  font-family: Jost, sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Textarea un poco más grande */
.formulario-contacto textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Botón */
.bton {
  background-color: #e4a7c3;
  color: white;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 0.5rem;
  font-family: Jost, sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
  transition: transform 0.6s ease;
}

.bton:hover {
  background-color: #599acc;
  transform: scale(1.1);
}


/* COLECCIONES — ESTRUCTURA */
.texto-principal {
  color: #265c86;
  text-align: left;
  padding: 2rem;
}

.texto-principal h1 {
  color: #f7c4c4;
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.texto-principal h3 {
  font-style: italic;
  color: #fbc2ab;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.texto-principal p {
  margin-bottom: 1rem;
  line-height: 1.5;
  color: #5f99c5;
}

.foto-principal img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 8px 20px #f7c4c4;
  transition: transform 0.6s ease;
  margin-bottom: 6rem;
}

.foto-principal img:hover {
  transform: scale(1.05);
}

/* GALERÍA */
.fila-obras {
  margin-bottom: 6rem;
}

.obra {
  text-align: center;
  color: #265c86;
   margin-bottom: 3.5rem;
}

.obra img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 4px 10px #f7c4c4;
  transition: transform 0.5s ease;
}

.obra img:hover {
  transform: scale(1.05);
}

.obra h4 {
  margin-top: 1rem;
  font-weight: 400;
  color: #f7a2a2;
  font-size: 20px;
}

.obra p {
  margin: 0.5rem 0;
  color: #5f99c5;
}

.obra form input[type="number"] {
  width: 60px;
  padding: 0.2rem;
  border: 1px solid #f7c4c4;
  border-radius: 5px;
  text-align: center;
  color: #f7a2a2;
}

.cantidad-form form input[type="number"] {
  width: 60px;
  padding: 0.2rem;
  border: 1px solid #f7c4c4;
  border-radius: 5px;
  text-align: center;
  color: #f7a2a2;}

/* AZUL */
.texto-principalA {
  color: #265c86;
  text-align: left;
  padding: 2rem;
}

.texto-principalA h1 {
  color: #3474ad;
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.texto-principalA h3 {
  font-style: italic;
  color: #7495cd;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.texto-principalA p {
  margin-bottom: 1rem;
  line-height: 1.5;
  color: #8da8d6;
}

.foto-principalA img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 8px 20px #a0aff0;
  transition: transform 0.6s ease;
  margin-bottom: 6rem;
}

.foto-principalA img:hover {
  transform: scale(1.05);
}

/* GALERÍA */
.fila-obrasA {
  margin-bottom: 6rem;
}

.obraA {
  text-align: center;
  color: #265c86;
   margin-bottom: 3.5rem;
}

.obraA img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 4px 10px #a0aff0;
  transition: transform 0.5s ease;
}

.obraA img:hover {
  transform: scale(1.05);
}

.obraA h4 {
  margin-top: 1rem;
  font-weight: 400;
  color: #8da8d6;
  font-size: 20px;
}

.obraA p {
  margin: 0.5rem 0;
  color: #5f99c5;
}

.obraA form input[type="number"] {
  width: 60px;
  padding: 0.2rem;
  border: 1px solid #f7c4c4;
  border-radius: 5px;
  text-align: center;
  color: #f7a2a2;
}

.cantidad-formA form input[type="number"] {
  width: 60px;
  padding: 0.2rem;
  border: 1px solid #f7c4c4;
  border-radius: 5px;
  text-align: center;
  color: #f7a2a2;}

/* ESPÍRITUS */

.texto-principalS {
  color: #265c86;
  text-align: left;
  padding: 2rem;
}

.texto-principalS h1 {
  color: #ded0de;
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.texto-principalS h3 {
  font-style: italic;
  color: #c4c4e3;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.texto-principalS p {
  margin-bottom: 1rem;
  line-height: 1.5;
  color: #7c76b9;
}

.foto-principalS img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 8px 20px #b593d8;
  transition: transform 0.6s ease;
  margin-bottom: 6rem;
}

.foto-principalS img:hover {
  transform: scale(1.05);
}

/* GALERÍA */
.fila-obrasS {
  margin-bottom: 6rem;
}

.obraS {
  text-align: center;
  color: #265c86;
   margin-bottom: 3.5rem;
}

.obraS img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 4px 10px #b593d8;
  transition: transform 0.5s ease;
}

.obraS img:hover {
  transform: scale(1.05);
}

.obraS h4 {
  margin-top: 1rem;
  font-weight: 400;
  color: #ba96c6;
  font-size: 20px;
}

.obraS p {
  margin: 0.5rem 0;
  color: #8c5c9f;
}

.obraS form input[type="number"] {
  width: 60px;
  padding: 0.2rem;
  border: 1px solid #f7c4c4;
  border-radius: 5px;
  text-align: center;
  color: #f7a2a2;
}