/*-----------------------------------------------------------------------------------*/
/* IMPORTACIÓN DE FUENTES */
/*-----------------------------------------------------------------------------------*/
/* Importa diferentes fuentes de Google Fonts para su uso en el diseño. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Cardo:ital,wght@0,400;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Josefin+Slab:wght@100&family=Poiret+One&display=swap");

/*-----------------------------------------------------------------------------------*/
/* RESETEO DE ESTILOS GLOBALES */
/*-----------------------------------------------------------------------------------*/
/* Define variables de fuentes para su uso en el resto del CSS. */
:root {
  --font-titles: "Poiret One", serif; /* Fuente para títulos */
  --font-subtitles: "Sweet Sans Pro"; /* Fuente para subtítulos */
  --font-paragraphs: "Cardo", serif; /* Fuente para párrafos */
}

/* Define la fuente "Sweet Sans Pro" con diferentes formatos. */
@font-face {
  font-family: "Sweet Sans Pro";
  src: local("Sweet Sans Pro Medium"), local("Sweet-Sans-Pro-Medium"), url("View/Layout/fonts/SweetSansPro-Medium.woff2") format("woff2"),
    url("View/Layout/fonts/SweetSansPro-Medium.woff") format("woff"), url("View/Layout/fonts/SweetSansPro-Medium.ttf") format("truetype");
  font-weight: 500; /* Peso de la fuente */
  font-style: normal; /* Estilo de la fuente */
}

/* Reseteo de márgenes y padding para todos los elementos. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Incluye padding y border en el tamaño total del elemento */
}

/* Estilos generales para el cuerpo del documento. */
body {
  font-family: "Poppins", sans-serif; /* Fuente principal del cuerpo */
  line-height: 1.6; /* Altura de línea para mejorar la legibilidad */
  background-color: #f4f4f9; /* Color de fondo */
}

/*-----------------------------------------------------------------------------------*/
/* ESTILOS DEL FOOTER */
/*-----------------------------------------------------------------------------------*/
footer {
  background-color: #42302e; /* Color de fondo del footer */
  color: white; /* Color del texto */
  padding-top: 50px; /* Espaciado superior */
  position: relative; /* Posicionamiento relativo para elementos hijos */
}

.footer-container {
  display: grid; /* Usar grid para el layout */
  grid-template-columns: repeat(4, 1fr); /* Cuatro columnas de igual tamaño */
  gap: 20px; /* Espacio entre columnas */
  width: 100%; /* Ancho completo */
  margin: 0 auto; /* Centrar el contenedor */
  padding: 0 20px; /* Espaciado horizontal */
}

/*-----------------------------------------------------------------------------------*/
/* SECCIONES INDIVIDUALES DEL FOOTER */
/*-----------------------------------------------------------------------------------*/
.footer-left,
.footer-middle,
.footer-right {
  display: flex; /* Usar flexbox para el layout */
  flex-direction: column; /* Dirección de los elementos en columna */
  justify-content: flex-start; /* Alinear elementos al inicio */
}

.footer-left h3,
.footer-middle h4,
.footer-right h4 {
  font-family: var(--font-titles); /* Usar la fuente de títulos */
  font-size: 24px; /* Tamaño de fuente */
  margin-bottom: 15px; /* Espaciado inferior */
  color: #ecf0f1; /* Color del texto */
}

.footer-left p {
  font-family: var(--font-paragraphs); /* Usar la fuente de párrafos */
  font-size: 16px; /* Tamaño de fuente */
  color: #bdc3c7; /* Color del texto */
  line-height: 1.6; /* Altura de línea */
}

.footer-middle h5 {
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
  color: #ecf0f1; /* Color del texto */
  text-decoration: none; /* Sin subrayado */
  font-size: 16px; /* Tamaño de fuente */
  font-weight: bold; /* Negrita */
}

.footer-middle p {
  font-family: var(--font-paragraphs); /* Usar la fuente de párrafos */
  color: #ecf0f1; /* Color del texto */
  text-decoration: none; /* Sin subrayado */
  font-size: 16px; /* Tamaño de fuente */
}

.footer-left img {
  max-width: 80%; /* Ancho máximo de la imagen */
  height: auto; /* Altura automática para mantener la proporción */
}

.footer-left {
  height: 180px; /* Altura del contenedor */
  display: flex; /* Usar flexbox */
  align-items: center; /* Centrar verticalmente */
  justify-content: space-around; /* Espaciado entre elementos */
}

/*-----------------------------------------------------------------------------------*/
/* ESTILOS DE LAS LISTAS */
/*-----------------------------------------------------------------------------------*/
.footer-middle ul,
.footer-right ul {
  list-style: none; /* Sin estilo de lista */
}

.footer-middle ul li,
.footer-right ul li {
  margin: 10px 0; /* Espaciado vertical entre elementos de lista */
}

.footer-middle ul li a,
.footer-right ul li a {
  color: #ecf0f1; /* Color del enlace */
  text-decoration: none; /* Sin subrayado */
  font-size: 16px; /* Tamaño de fuente */
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
}

.footer-middle ul li a:hover,
.footer-right ul li a:hover {
  color: #d4bd7b; /* Color del enlace al pasar el mouse */
}

/*-----------------------------------------------------------------------------------*/
/* ESTILOS DEL PIE DE PÁGINA INFERIOR */
/*-----------------------------------------------------------------------------------*/
.footer-bottom {
  text-align: center; /* Centrar texto */
  background-color: #d4bd7b; /* Color de fondo */
  padding: 15px 0; /* Espaciado vertical */
  margin-top: 30px; /* Espaciado superior */
}

.footer-bottom p {
  font-size: 14px; /* Tamaño de fuente */
  color: black; /* Color del texto */
}

/* Media Query para pantallas pequeñas (ej. dispositivos móviles) */
@media screen and (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr !important; /* Una columna en pantallas pequeñas */
    padding-left: 20px; /* Espaciado izquierdo */
    text-align: center; /* Centrar texto */
  }

  .footer-left,
  .footer-middle,
  .footer-right {
    width: 100%; /* Ancho completo */
    margin-bottom: 20px; /* Espaciado inferior */
  }

  .footer-left img {
    width: 100%; /* Ancho completo de la imagen */
    height: auto; /* Altura automática */
  }

  .example-2 {
    justify-content: center !important; /* Centrar contenido */
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .footer-container {
    grid-template-columns: 1fr 1fr 1fr !important; /* Tres columnas en pantallas medianas */
    padding-left: 20px; /* Espaciado izquierdo */
    text-align: center; /* Centrar texto */
  }

  .footer-left {
    text-align: center; /* Centrar texto */
    grid-column: 1 / -1 !important; /* Ocupa toda la fila */
  }

  .example-2 {
    justify-content: center !important; /* Centrar contenido */
  }
}

/* Iconos
/* From Uiverse.io by wilsondesouza */
ul {
  list-style: none; /* Sin estilo de lista */
}

/*-----------------------------------------------------------------------------------*/
/* ESTILOS DE LOS ICONOS */
/*-----------------------------------------------------------------------------------*/
.example-2 {
  display: flex; /* Usar flexbox */
  justify-content: flex-start; /* Alinear al inicio */
  align-items: center; /* Centrar verticalmente */
  flex-wrap: wrap; /* Permitir que los elementos se envuelvan */
  gap: 20px; /* Espacio entre iconos */
  margin-top: 10px; /* Espaciado superior */
}

.example-2 .icon-content {
  margin: 0px; /* Sin margen */
  position: relative; /* Posicionamiento relativo para elementos hijos */
  display: flex; /* Usar flexbox */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
}

/*-----------------------------------------------------------------------------------*/
/* TOOLTIP INTERACTIVO */
/*-----------------------------------------------------------------------------------*/
.example-2 .icon-content .tooltip {
  position: absolute; /* Posicionamiento absoluto */
  top: -30px; /* Posición superior */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Ajustar para centrar */
  color: #fff; /* Color del texto */
  padding: 6px 10px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  opacity: 0; /* Inicialmente invisible */
  visibility: hidden; /* Inicialmente oculto */
  font-size: 14px; /* Tamaño de fuente */
  transition: all 0.3s ease; /* Transición suave */
}

.example-2 .icon-content:hover .tooltip {
  opacity: 1; /* Hacer visible al pasar el mouse */
  visibility: visible; /* Hacer visible al pasar el mouse */
  top: -50px; /* Ajustar posición al pasar el mouse */
}

.example-2 .icon-content a {
  position: relative; /* Posicionamiento relativo */
  overflow: hidden; /* Ocultar desbordamiento */
  display: flex; /* Usar flexbox */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  width: 50px; /* Ancho del enlace */
  height: 50px; /* Altura del enlace */
  border-radius: 12px; /* Bordes redondeados */
  color: #4d4d4d; /* Color del texto */
  background-color: #fff; /* Color de fondo */
  transition: all 0.3s ease-in-out; /* Transición suave */
}

.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%); /* Sombra al pasar el mouse */
}

.example-2 .icon-content a svg {
  position: relative; /* Posicionamiento relativo */
  width: 30px; /* Ancho del SVG */
  height: 30px; /* Altura del SVG */
}

.example-2 .icon-content a:hover {
  color: white; /* Cambiar color al pasar el mouse */
}

.example-2 .icon-content a .filled {
  position: absolute; /* Posicionamiento absoluto */
  top: auto; /* Sin posición superior */
  bottom: 0; /* Posición inferior */
  left: 0; /* Posición izquierda */
  width: 100%; /* Ancho completo */
  height: 0; /* Altura inicial */
  background-color: #000; /* Color de fondo */
  transition: all 0.3s ease-in-out; /* Transición suave */
}

.example-2 .icon-content a:hover .filled {
  height: 100%; /* Expandir al pasar el mouse */
}

.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
  background-color: #d4bd7b; /* Color de fondo para WhatsApp */
}

.example-2 .icon-content a[data-social="github"] .filled,
.example-2 .icon-content a[data-social="github"] ~ .tooltip {
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
  background-color: #d4bd7b; /* Color de fondo para GitHub */
}

.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
  background-color: #d4bd7b; /* Color de fondo para Instagram */
}

.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
  background-color: #d4bd7b; /* Color de fondo para YouTube */
}

/*-----------------------------------------------------------------------------------*/
/* Media Queries para hacerlo responsive */
/*-----------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .example-2 {
    gap: 10px; /* Espacio entre iconos en pantallas pequeñas */
  }

  .example-2 .icon-content a {
    width: 40px; /* Ancho del enlace en pantallas pequeñas */
    height: 40px; /* Altura del enlace en pantallas pequeñas */
  }

  .example-2 .icon-content a svg {
    width: 20px; /* Ancho del SVG en pantallas pequeñas */
    height: 20px; /* Altura del SVG en pantallas pequeñas */
  }

  .example-2 .icon-content {
    margin: 10px; /* Margen entre iconos en pantallas pequeñas */
  }
}

.footer-bottom p {
  font-family: var(--font-paragraphs); /* Usar la fuente de párrafos */
  font-weight: normal; /* Peso normal */
  /* Elimina el bold en todo el párrafo */
}

.bold {
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
  font-weight: bold; /* Aplica bold solo al 2024 */
}

.terms-link {
  font-family: var(--font-subtitles); /* Usar la fuente de subtítulos */
  color: black; /* Enlace en negro por defecto */
  text-decoration: none; /* Elimina el subrayado */
}

.terms-link:hover {
  color: #555; /* Enlace en negro más claro cuando se pasa el mouse */
}

/* Icono localización */
.loader {
  width: 16px; /* Ancho del icono */
  height: 44.8px; /* Altura del icono */
  position: relative; /* Posicionamiento relativo */
  transform: rotate(45deg); /* Rotar el icono */
}

.loader:before,
.loader:after {
  content: ""; /* Contenido vacío */
  position: absolute; /* Posicionamiento absoluto */
  inset: 0; /* Ajustar a todos los lados */
  border-radius: 50% 50% 0 50%; /* Bordes redondeados */
  background: #0000; /* Fondo transparente */
  background-image: radial-gradient(circle 11.2px at 50% 50%, #0000 94%, #ff4747); /* Gradiente radial */
}

.loader:after {
  animation: pulse-ytk0dhmd 1s infinite; /* Animación de pulso */
  transform: perspective(336px) translateZ(0px); /* Transformación 3D */
}

@keyframes pulse-ytk0dhmd {
  to {
    transform: perspective(336px) translateZ(168px); /* Efecto de pulso */
    opacity: 0; /* Desvanecer */
  }
}