:root {

  --black: #000000;
  --white: #ffffff;
  --Aqua: #468585;
  --melon: #EDA49Fff;
  --blue: #468585;
  --gray: rgb(225, 229, 235);
  --magenta: #CF4C7Aff;
  --blueOne: #468585;
  --blueTwo: #001C3Cff;
  --blueTree: #468585;
  --silver: #BDBDBDff;
  --platinum: #DDDDDDff;
  --silver-2: #C1C1C1ff;
  --silver-3: #BCBCBCff;
  --timberwolf: #D3D3D3ff;
  --grayBlack: #5b5b5b;
  --cream: #f9f1e8;
}

* {
  /* ejemplo para agregar espacio */
   
  scroll-margin-top: 80px;

}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-animado {
  animation: fadeIn 1.2s ease-in-out forwards;
}

h1, h2, p, a.btnverproyecto {
  opacity: 0; /* Para que aparezcan con la animación */
  animation: fadeIn 1.2s ease-in-out forwards;
  animation-delay: 0.3s; /* Ajusta según el orden que quieras */
}






.btnverproyecto {
  background-color: #468585;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease;
}

.btnverproyecto:hover {
  background-color: #346262;
}


.servicios-card{
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
  font-weight: bold;
  color: #468585;

}


.carousel {
  box-shadow: none !important;
  /* Elimina la sombra */
  border: none !important;
  /* Elimina el borde */
}

.carousel-item img {
  border: none !important;
  /* Elimina el borde de las imágenes dentro del carousel */
}

/* Estilo para el menú lateral */
.menuLateral {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* Espacio entre los enlaces */
}

.menuLateral a {
  text-decoration: none;
  padding: 10px 20px;
  font-family: 'Open Sans', sans-serif;
  font-family: "Playfair Display", serif;
  /* color: #468585!important; */
  font-size: 3vh;

  color: #333;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.menuLateral a:hover {
  background-color: #f9f1e8;
}

/* Para móviles: Cambiar el menú a vertical */
.menuLateral.d-md-flex {
  flex-direction: column;
}

/* Ajuste de la galería */
.gallery-grid {
  display: flex;
  flex-direction: column;
}

.gallery-grid img {
  width: 100%;
  height: auto;

}

.carousel {
  box-shadow: none !important;
  /* Eliminar sombra */
  border: none !important;
  /* Eliminar borde */
}

.carousel-item {
  border: none !important;
  /* Eliminar borde de cada item */
  box-shadow: none !important;
  /* Eliminar sombra de cada item */
}





  /* Estilo del título */
  .title {
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
  }

.branding-intro-section {
  background-color: #f9f1e8;
  /* padding: 80px 20px; */
  text-align: center;
}

.branding-intro-title {
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
  font-weight: bold;
  color: #468585;
  margin-bottom: 60px; /* Reduce espacio */
}

/* Ajustes para móviles */
@media (max-width: 768px) {
  .branding-intro-title {
    font-size: 2.5rem; /* Reduce tamaño del título */
    margin-bottom: 40px; /* Reduce espacio */
  }

  .branding-intro-section {
    padding: 60px 15px; /* Menos padding en móviles */
  }
}

.branding-intro-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

/* Franja de Servicios */
.franja-servicios {
  background-color: #e6e6e6;
  border-top: 3px solid #468585;
  border-bottom: 3px solid #468585;
  margin-top: -20px;
}

.lista-servicios .list-inline-item {
  font-family: 'Open Sans', sans-serif;
  padding: 8px 15px;
  margin: 5px;
  background-color: white;
  border: 1px solid #468585;
  color: #468585;
  border-radius: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 0.9rem;
}

.lista-servicios .list-inline-item:hover {
  background-color: #468585;
  color: white;
}


.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #468585;
  border-radius: 50%;
  padding: 10px;
}

/* Mejoras generales */
body {
  font-family: 'Open Sans', sans-serif;
}

.subtitle {
  font-size: 2.5rem;
  /* Tamaño grande y llamativo */
  font-weight: 400;
  /* No tan grueso */
  letter-spacing: 1px;

  color: #333;
  /* Un gris oscuro elegante */
  text-align: center;
}

/* Espaciado entre líneas */
.subtitle br {
  display: block;
  margin-top: 10px;
}

#trabajos {
  background-color: #f9f1e8;
}

.subtitle {
  font-family: 'Playfair Display', serif;
  color: #468585;
  font-size: 2rem;

}

.elegant-card {
  position: relative;
  overflow: hidden;
  border: none;
}

.elegant-card img {
  transition: transform 0.5s ease;
}

.elegant-card:hover img {
  transform: scale(1.05);
}

.project-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background: #F9F1E8; */
  color: white;
  padding: 15px;
  font-family: 'Open Sans', sans-serif;
  transition: opacity 0.4s ease;
}

.project-overlay h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: bold;
}

.project-overlay p {
  margin: 0;
  font-size: 1rem;
}

.project-link {
  text-decoration: none;
}

@media (max-width: 768px) {
  .subtitle {
    font-size: 1.5rem;
  }
}

.project-info {
  border: none;
  padding-top: 0.5rem;

}

brand-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: #468585;
  line-height: 1.2;
  font-weight: 600;
}

.brand-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: #666;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 2px;
}


.tagline {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: #666;
  margin-top: 15px;
}

/* --- Animación de entrada (fade + scale) --- */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
  }

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


/* --- Parallax suave --- */
.logo-animado.parallax {
  transform: translateY(0);
  transition: transform 0.1s ease-out;
}

/* --- Fondo degradado opcional --- */

/* Responsive: ajusta padding en pantallas pequeñas */
@media (max-width: 768px) {
  #hero {
    padding-top: 3vh;
    padding-bottom: 30px;
  }
}

.barra-card {
  background-color: #f9f1e8;
}

.barra-botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0;
  background-color: #f9f1e8;
  border-top: 2px solid #468585;
  border-bottom: 2px solid #e6e6e6;
}

.barra-botones-info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 30px 0;
  background-color: #f9f1e8;
  border-top: 2px solid #468585;
  border-bottom: 2px solid #e6e6e6;
}

.servicio {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 15px;
  max-width: 220px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.servicio h4 {
  font-size: 1rem;
  color: #468585;
  margin: 0 0 8px;
  font-family: 'Open Sans', sans-serif;
}

.servicio p {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
}

.servicio:hover {
  transform: translateY(-5px);
}
.btnverproyectocontrario {
  background-color: #fff;
  /* Color base */
  color: #468585;
  /* Texto blanco */
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 50px;
  /* Bordes redondeados para look moderno */
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  /* Evita subrayado de enlaces */
  display: inline-block;
  /* Para que sea un botón real */
  font-weight: 600;
}
.btnverproyectocontrario:hover {
  background-color: #468585;
  /* Color suave al hover */
  color: #f9f1e8;
  /* Texto cambia */
  border: 1px solid #f9f1e8;
  /* Añade borde */
}




.btnverproyecto {
  background-color: #468585;
  /* Color base */
  color: #fff;
  /* Texto blanco */
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 50px;
  /* Bordes redondeados para look moderno */
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  /* Evita subrayado de enlaces */
  display: inline-block;
  /* Para que sea un botón real */
  font-weight: 600;
}

.btnverproyecto:hover {
  background-color: #f9f1e8;
  /* Color suave al hover */
  color: #468585;
  /* Texto cambia */
  border: 1px solid #468585;
  /* Añade borde */
}

.card {

  background-color: var(--Aqua);
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.carousel-item {
  padding: 20px 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}





/* Efecto de box-shadow para el destello */
@keyframes destelloEfecto {
  0% {
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.6);
  }

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





/* Adjust images */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  #hero {
    height: auto;
    /* Deja que el contenido determine la altura en móviles */
    padding: 20px 0;
  }



  .card {
    padding: 2rem;
    /* Espaciado menor en tarjetas */
  }
}

.header {
  background-color: #f8f8f8 !important;
}

.nombreTitulo {
  font-family: "Open Sans", sans-serif;
  color: #121256 !important;
  letter-spacing: 2px;
}



.nombreTitulo:hover {
  text-decoration: none;
  color: var(--magenta) !important;
}



.caja {
  background-color: rgba(255, 255, 255, 0) !important;
  border: none !important;
}

.cardsHover img:hover {
  transform: scale(1.1);
  transition: transform 0.5s ease-in-out;
  -webkit-box-shadow: 0px 0px 15px 1px rgb(241, 241, 241);
  -moz-box-shadow: 0px 0px 15px 1px rgb(224, 224, 224);
  box-shadow: 0px 0px 15px 1px rgb(203, 212, 255);
  cursor: pointer;
  text-decoration: none;
}

.square a {

  text-decoration: none;
}

.navbar {
  /* background-color: black; */
  background-color: black;
}


.titulo {
  letter-spacing: -4px !important;
  font-family: "Julius Sans One", sans-serif;
  font-weight: 400;
  color: var(--blueTree);
  /* color:#f95738; */
  cursor: pointer;
  font-weight: 600;
  padding-top: 2px;
  font-size: 45px !important;
  line-height: 4rem;

}

.parrafo {
  text-align: left;
}

@media (max-width: 768x) {
  .titulo {
    font-size: 20px !important;
    ;
  }
}


.titulo:hover {
  color: var(--blue)
}



#botonPrimario:hover {
  color: #bcbcbc;

}

.card-equal-height {
  display: flex;
  flex-direction: column;
}

.card-equal-height .card-body {
  flex-grow: 1;
}

.sinLink {
  color: black;
  /* Cambia el color del texto del enlace */
  text-decoration: none;
  /* Quita el subrayado */

}

.padding {
  padding: 40px 40px 20px 40px !important;
}

.pb {
  padding-bottom: 30px;
}

.text-small {
  font-size: small;
}

svg {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
}

.links {
  position: relative;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: black;
  margin-left: 0;
}

a:hover {
  text-decoration: underline;
}

a img.icon {
  display: inline-block;
  height: 20px;

}









h3 {
  color: rgb(16, 0, 0);
  font-family: 'GlacialIndiference-Bold', sans-serif;
}

h2 {
  font-family: 'GlacialIndiference-Bold', sans-serif;
  color: #5b5b5b !important;
  font-weight: 500 !important;
}

#trabajos {
  background-color: white;

}

.arriba {
  background-color: var(--magenta) !important;
  width: 50px !important;
  height: 50px !important;
}

.sticky {
  position: sticky;
  top: 75px;

}

.sticky ol {
  text-decoration: none;
  list-style: none;
}

.menuLateral a {
  text-decoration: none;
  color: #5b5b5b;
}

.listagaleria {
  font-weight: 100;

  color: #121256;
  text-decoration: none;
  list-style: none;
  inline-size: auto;
  justify-content: center;
  font-size: large;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 2vh;
  font-family: Arial, sans-serif;





}

.listagaleria ul {


  justify-content: center;



}

.listagaleria li {
  justify-content: center;
  /* display: inline-block; Muestra los elementos de la lista en línea */
  margin-right: 10px;
  /* Espacio entre los elementos */
  padding: 5px 10px;
  /* Espacio interno alrededor del texto */
}



.menuLateral a {
  transition: all 0.15s;
}

.menuLateral li :hover {
  text-decoration: none;
  color: rgb(168, 166, 166);
  font-size: 1.5rem;
}

#sobreMi {
  /* background-color: #f1f2f6; */
  background-color: white;


}

.botonsecundario {
  /* background-color: #5b5b5b!important; */
  background-color: #121256 !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 31px !important;
  /* border: 2px solid #bcbcbc!important; */
}

.botonsecundario :hover {
  /* background-color: #bcbcbc!important; */
  background-color: #ffb1d0 !important;

  font-weight: 400 !important;
  text-decoration: none !important;



}

#galeria img {
  /* width: 100%; */
  /* flex-grow: 100%;
  object-fit: cover; */
  opacity: 100%;
  transition: 5ms;
  filter: contrast(100%);



}

#galeria img:hover {

  cursor: crosshair;
  transform: scale(1.5);
  /* width: 600px; */
  opacity: 1;
  /* Reducir la opacidad para dar un efecto de transparencia */
  filter: contrast(110%);
  transition: width 0.3s ease, opacity 0.3s ease;
  /* Agregar transiciones suaves */
}

#contacto {
  background-color: var(--white);
}

.franja {
  font-size1vw;
  /* Tamaño principal, puede ajustarse */
  font-weight: bold;
  line-height: 1.1;
  color: #121256 !important;


  letter-spacing: 0.04em;
  /* Espaciado entre letras para un look más elegante */
  /* max-width: 80%; */
  padding: 5px;
  /* box-sizing: border-box; */

}

.listagaleria li:hover {

  color: var(--blueMarine) !important;
}


.letra {
  font-size: 55px;
}

#animatedText {
  line-height: 1.1; /* Reduce la separación entre líneas */
}
#animatedText {
  font-size: 6vw; /* Se adapta al ancho de la pantalla */
}

@media (max-width: 768px) { 
  #animatedText {
      font-size: 8vw; /* Más grande en pantallas pequeñas */
  }
}

@media (max-width: 480px) { 
  #animatedText {
      font-size: 10vw; /* Aún más grande en móviles */
  }
}



.part-1, .part-2 {
  display: block; /* Asegura que cada parte esté en su propia línea */
  margin: 0; /* Elimina cualquier margen que pueda aumentar el espacio */
  padding: 0;
}




.part-1, .part-2 {
  display: block;
}

.part-1 {
  margin-bottom: 10px; /* Ajusta el espacio entre las partes */
}

.part-2 {
  margin-top: 10px;
}



.logo {
  max-width: 150px;  /* Ajusta el tamaño máximo para pantallas grandes */
  height: auto;      /* Mantén la relación de aspecto del logo */
  margin: 0 auto;    /* Centra la imagen dentro del contenedor */
}

/* Media query para pantallas pequeñas */
@media (max-width: 767px) {
  .logo {
    max-width: 120px;  /* Ajuste para pantallas móviles */
  }
}


.title-text{
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 3vw;
  /* Tamaño principal, puede ajustarse */
  font-weight: bold;
  line-height: 1.1;
  color: #f4eade;
  text-align: left;
  /* text-transform: uppercase; */
  letter-spacing: 0.04em;
  /* Espaciado entre letras para un look más elegante */
  /* max-width: 80%; */
  padding: 5px;
  /* box-sizing: border-box; */




}

.magazine-text {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 5vw;
  /* Tamaño principal, puede ajustarse */
  font-weight: bold;
  line-height: 1.1;
  color: #468585;
  /* color: #F9F1E8; */
  text-align: center;
  /* text-transform: uppercase; */
  letter-spacing: 0.04em;
  /* Espaciado entre letras para un look más elegante */
  /* max-width: 80%; */
  padding: 5px;
  /* box-sizing: border-box; */

}

@media (max-width: 768px) {
  .magazine-text {
    font-size: 10vw;
  }
}

@media (max-width: 480px) {
  .magazine-text {
    font-size: 12vw;
  }
}

.magazine-text-center {
  font-size: 6vw;
  /* Tamaño principal, puede ajustarse */
  font-weight: bold;
  line-height: 1.1;
  color: var(--blue);
  text-align: right;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  max-width: 80%;
  padding: 10px;
  box-sizing: border-box;

}

@media (max-width: 768px) {
  .magazine-text-center {
    font-size: 10vw;
  }
}

@media (max-width: 480px) {
  .magazine-text-center {
    font-size: 12vw;
  }
}

.subtitulo {
  color: var(--white) !important;
  /* Texto en blanco */
  font-size: 4.5vw;
  /* Tamaño de fuente grande */
  font-weight: 1000;
  /* Fuente más gruesa */
  margin-bottom: 1rem;
  /* Espacio debajo del título */
}

@media (max-width: 768px) {
  .subtitulo {
    font-size: 4vw;
  }
}

@media (max-width: 480px) {
  .subtitulo {
    font-size: 12vw;
  }
}

@media (max-width: 375px) {
  .subtitulo {
    font-size: 12vw;

  }
}


.tituloCabecera {
  color: #121256 !important;
  letter-spacing: -2px;
}

.nombreproyecto h2 {
  color: var(--melon);
}

/* Estilo para el texto de Diseño & Experiencia de usuario */
.encabezado2 {
  text-align: center;
  font-size: 3vw;
  /* Menor tamaño que el texto principal */
  font-weight: normal;
  /* Menos énfasis que "bold" */
  line-height: 1.3;
  color: #121256;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Espaciado suave entre letras */
  padding: 5px;
  text-align: center;
}



/* Clase para el ícono apuntando hacia arriba */
.bi-chevron-compact-up {
  transform: rotate(0deg);
  /* Apunta hacia arriba */
  color: var(magenta)important;
}

/* Clase para el ícono apuntando hacia abajo */
.bi-chevron-compact-down {
  transform: rotate(180deg);
  /* Apunta hacia abajo */
  color: var(--blue) !important;
}

#scroll-icon {
  width: 5em;
  /* Cambia el tamaño del ícono proporcionalmente al tamaño de la fuente del contenedor */
  height: 5em;
  /* Cambia el tamaño del ícono proporcionalmente al tamaño de la fuente del contenedor */

}






.section-content {
  color: #ffffff !important;
  padding: 20px 20px;
  text-align: center;
  /* background-color: #f9f9f9;  */
  border-radius: 10px;
  background-color: #121256;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
footer{
  background-color: #fffcf9!important;
}



/* Encabezado de cada sección del footer */
.footer-heading {
  color: rgba(0, 0, 0, 0.5);
  /* Color de texto profesional */
  font-size: 1.25rem;
  /* Tamaño de fuente más grande para los encabezados */
  margin-bottom: 0.5rem;
  /* Espacio debajo del encabezado */
  font-weight: 600;
  /* Fuente en negrita */
}

/* Enlaces de los iconos en el footer */
.footer-link {
  color: rgba(0, 0, 0, 0.5);
  /* Color de iconos en el footer */
  text-decoration: none;
  /* Elimina el subrayado */
  display: inline-block;
  /* Alineación de iconos */
  margin-bottom: 0;
  /* Espacio debajo de los iconos */
}

/* Color de iconos en el hover */
.footer-link:hover {
  color: #468585;
  /* Color de texto en hover para resaltar */
}

/* Texto de la información personal en el footer */
.footer-subtitle {
  color: #6c757d;
  /* Color de texto para el subtítulo */
  font-size: 1rem;
  /* Tamaño de fuente para el subtítulo */
  margin-bottom: 1rem;
  /* Espacio debajo del subtítulo */
}

/* Logo en el footer */
.footer-logo {
  width: 50px;
  /* Ancho del logo */
  height: 50px;
  /* Alto del logo */
  margin-top: 0.5rem;
  /* Espacio superior */
}

/* Texto de copyright */
.footer-copy {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 1rem;
}

.calltoaction {
  font-size: 1vhpx;
  font-weight: bold;
  color: #121256;
  background-color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;

  cursor: pointer;
}








/* Iconos */
.ticker-item i {
  margin-right: 0.5rem;
  color: rgb(228, 219, 228);
  font-size: 1.5rem;
}

/* Responsiveness */
@media (max-width: 768px) {
  .ticker-inner {
    flex-direction: column;
    /* Los elementos se colocan uno debajo del otro */
    gap: 0.5rem;
    /* Reduce el espacio entre elementos */
  }

  .ticker-item {
    font-size: 1rem;
    justify-content: center;
    /* Asegura que el contenido quede centrado horizontalmente */
  }

  .ticker-item i {
    font-size: 1.2rem;
  }
}

@media (max-width: 576px) {
  .ticker-inner {
    gap: 0.5rem;
    /* Espacio reducido para móviles pequeños */
  }

  .ticker-item {
    font-size: 0.9rem;
  }

  .ticker-item i {
    font-size: 1rem;
  }
}