/* Importación de fuentes desde Google Fonts */
@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");

/* Definición de variables CSS para colores y fuentes */
:root {
  --blanco: #ffff; /* Color blanco */
  --cafeclaro: #dabd7b; /* Color café claro */
  --cafe-principal: #42302e; /* Color café principal */
  --primary-dark: #1a1a1a; /* Color oscuro primario */
  --secondary-dark: #333333; /* Color oscuro secundario */
  --accent-gold: #c8a97e; /* Color dorado de acento */
  --text-dark: #242424; /* Color de texto oscuro */
  --text-light: #ffffff; /* Color de texto claro */
  --bg-light: #f8f8f8; /* Color de fondo claro */
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
  --color-text: #292828; /* Color de texto */
  --color-bg: #ddd; /* Color de fondo */
  --color-link: #000; /* Color de enlace */
  --color-link-hover: #000; /* Color de enlace al pasar el ratón */
  --page-padding: 1rem; /* Relleno de la página */
  --angle: -15deg; /* Ángulo para transformaciones */
  --trans-content: -30vh; /* Transformación de contenido */
  --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 */
}

/* Definición de la fuente Sweet Sans Pro */
@font-face {
  font-family: "Sweet Sans Pro"; /* Nombre de la fuente */
  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 */
}

/* Estilos generales para el cuerpo y el HTML */
body,
html {
  margin: 0; /* Sin margen */
  padding: 0; /* Sin relleno */
  height: 100%; /* Altura completa */
  font-family: "Poppins", sans-serif; /* Fuente principal */
}

/* Estilos para la tarjeta de contacto */
.contact-card {
  background-color: #fff; /* Fondo blanco */
  padding: 20px; /* Relleno interno */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Sombra */
  border: 1px solid #c4a484; /* Borde de color café */
}

/* Estilos para el título dentro de la tarjeta de contacto */
.contact-card h3 {
  font-family: var(--font-titles); /* Fuente de títulos */
}

/* Estilos para el separador */
.separator {
  border: none; /* Sin borde */
  height: 1px; /* Altura de la línea */
  background-color: #f0e6dd; /* Color de la línea */
  margin: 10px 0; /* Margen superior e inferior */
}

/* Estilos para la sección de contacto */
.contact-section {
  max-width: 1200px; /* Ancho máximo */
  margin: 50px auto; /* Margen automático */
  padding: 20px; /* Relleno interno */
  display: flex; /* Flexbox */
  gap: 50px; /* Espacio entre columnas */
}

/* Estilos para la columna de información de contacto */
.contact-info-column {
  flex: 1; /* Flexibilidad */
  padding-right: 30px; /* Relleno derecho */
  font-family: var(--font-paragraphs); /* Fuente de párrafos */
}

/* Estilos para la columna del formulario de contacto */
.contact-form-column {
  flex: 1; /* Flexibilidad */
}

/* Estilos para el título de contacto */
.contact-title {
  font-size: 2.5em; /* Tamaño de fuente */
  color: #333; /* Color del texto */
  margin-bottom: 10px; /* Margen inferior */
  font-family: var(--font-titles); /* Fuente de títulos */
}

/* Estilos para el subtítulo de contacto */
.contact-subtitle {
  color: #666; /* Color del texto */
  margin-bottom: 40px; /* Margen inferior */
  font-family: var(--font-subtitles); /* Fuente de subtítulos */
}

/* Estilos para la información de contacto */
.contact-info {
  display: flex; /* Flexbox */
  flex-direction: column; /* Dirección de la columna */
  gap: 30px; /* Espacio entre elementos */
  margin-bottom: 30px; /* Margen inferior */
}

/* Estilos para los elementos de información */
.info-item {
  display: flex; /* Flexbox */
  align-items: center; /* Alineación vertical */
  gap: 15px; /* Espacio entre elementos */
  color: #333; /* Color del texto */
}

/* Estilos para los iconos dentro de los elementos de información */
.info-item i {
  font-size: 1.8em; /* Tamaño del icono */
  color: #c4a484; /* Color del icono */
}

/* Estilos para el formulario de contacto */
.contact-form {
  margin-top: 20px; /* Margen superior */
  max-width: 600px; /* Ancho máximo */
  margin: 0 auto; /* Margen automático */
}

/* Estilos para los grupos de formularios */
.form-group {
  margin-bottom: 20px; /* Margen inferior */
}

/* Estilos para el último elemento del horario */
.horario-item span:last-child {
  margin-left: auto; /* Margen izquierdo automático */
  width: auto; /* Ancho automático */
}

/* Estilos para las etiquetas de los grupos de formularios */
.form-group label {
  display: block; /* Mostrar como bloque */
  margin-bottom: 8px; /* Margen inferior */
  color: #333; /* Color del texto */
  font-weight: 500; /* Peso de la fuente */
  font-family: var(--font-subtitles); /* Fuente de subtítulos */
}

/* Estilos para los campos de texto y áreas de texto */
.form-group input[type="text"],
.form-group textarea {
  width: 100%; /* Ancho completo */
  padding: 12px; /* Relleno interno */
  border: 1px solid #ddd; /* Borde */
  border-radius: 4px; /* Bordes redondeados */
  font-size: 1em; /* Tamaño de fuente */
}

/* Estilos para el botón de envío */
.submit-btn {
  display: block; /* Mostrar como bloque */
  width: 100%; /* Ancho completo */
  padding: 12px; /* Relleno interno */
  background-color: #8b7355; /* Color de fondo */
  color: #fff; /* Color del texto */
  border: none; /* Sin borde */
  border-radius: 4px; /* Bordes redondeados */
  cursor: pointer; /* Cursor de puntero */
  font-size: 1em; /* Tamaño de fuente */
  transition: background-color 0.3s ease; /* Transición de color */
  font-family: var(--font-subtitles); /* Fuente de subtítulos */
}

/* Estilos para el botón de envío al pasar el ratón */
.submit-btn:hover {
  background-color: #c4a484; /* Color de fondo al pasar el ratón */
}

/* Estilos para la caja de horario */
.horario-box {
  background-color: #fff; /* Fondo blanco */
  padding: 25px; /* Relleno interno */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Sombra */
  border: 1px solid #c4a484; /* Borde de color café */
  width: 100%; /* Ancho completo */
  max-width: 450px; /* Ancho máximo */
}

/* Estilos para el título dentro de la caja de horario */
.horario-box h3 {
  color: #8b7355; /* Color del texto */
  margin: 0 0 15px 0; /* Margen */
  display: flex; /* Flexbox */
  align-items: center; /* Alineación vertical */
  gap: 10px; /* Espacio entre elementos */
  font-size: 1.1em; /* Tamaño de fuente */
  justify-content: flex-start; /* Alineación horizontal */
  font-family: var(--font-titles); /* Fuente de títulos */
}

/* Estilos para los iconos dentro de la caja de horario */
.horario-box h3 i {
  color: #c4a484; /* Color del icono */
}

/* Estilos para los elementos de horario */
.horario-item {
  display: flex; /* Flexbox */
  justify-content: flex-start; /* Alineación horizontal */
  align-items: center; /* Alineación vertical */
  padding: 8px 0; /* Relleno vertical */
  border-bottom: 1px solid #f0e6dd; /* Borde inferior */
  font-size: 0.9em; /* Tamaño de fuente */
  gap: 10px; /* Espacio entre elementos */
  font-family: var(--font-paragraphs); /* Fuente de párrafos */
}

/* Estilos para el texto dentro de los elementos de horario */
.horario-item span {
  white-space: nowrap; /* Sin salto de línea */
}

/* Estilos para el último elemento de horario */
.horario-item:last-child {
  border-bottom: none; /* Sin borde inferior */
  font-family: var(--font-paragraphs); /* Fuente de párrafos */
}

/* Estilos para el primer elemento de horario */
.horario-item span:first-child {
  width: auto; /* Ancho automático */
  flex: none; /* Sin flexibilidad */
}

/* Estilos para el último elemento de horario */
.horario-item span:last-child {
  margin-left: auto; /* Margen izquierdo automático */
}

/* Estilos para el contenedor de botones de radio */
.radio-button-container {
  display: flex; /* Flexbox */
  align-items: center; /* Alineación vertical */
  gap: 24px; /* Espacio entre elementos */
}

/* Estilos para los botones de radio */
.radio-button {
  display: inline-block; /* Mostrar como bloque en línea */
  position: relative; /* Posición relativa */
  cursor: pointer; /* Cursor de puntero */
}

/* Estilos para la entrada del botón de radio */
.radio-button__input {
  position: absolute; /* Posición absoluta */
  opacity: 0; /* Ocultar */
  width: 0; /* Ancho cero */
  height: 0; /* Altura cero */
}

/* Estilos para la etiqueta del botón de radio */
.radio-button__label {
  display: inline-block; /* Mostrar como bloque en línea */
  padding-left: 30px; /* Relleno izquierdo */
  margin-bottom: 10px; /* Margen inferior */
  position: relative; /* Posición relativa */
  font-size: 15px; /* Tamaño de fuente */
  color: #333; /* Color del texto */
  font-weight: 600; /* Peso de la fuente */
  cursor: pointer; /* Cursor de puntero */
  text-transform: uppercase; /* Texto en mayúsculas */
  transition: all 0.3s ease; /* Transición suave */
}

/* Estilos elegantes para scrollbar */
::-webkit-scrollbar {
  width: 10px; /* Ancho del scrollbar */
  height: 10px; /* Altura del scrollbar */
}

::-webkit-scrollbar-track {
  background: rgba(218, 189, 123, 0.1); /* Fondo del track */
  border-radius: 10px; /* Bordes redondeados */
}

::-webkit-scrollbar-thumb {
  background: var(--accent-gold); /* Color del thumb */
  border-radius: 10px; /* Bordes redondeados */
  border: 2px solid var(--bg-light); /* Borde del thumb */
  transition: var(--transition); /* Transición suave */
}

::-webkit-scrollbar-thumb:hover {
  background: #b69660; /* Color del thumb al pasar el ratón */
}

/* Para Firefox */
::-webkit-scrollbar {
  scrollbar-width: thin; /* Ancho del scrollbar */
  scrollbar-color: var(--accent-gold) rgba(218, 189, 123, 0.1); /* Color del thumb y track */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 354px) {
  .radio-button__label {
    font-size: 12px; /* Tamaño de fuente reducido */
  }
}

/* Estilos para el botón de radio personalizado */
.radio-button__custom {
  position: absolute; /* Posición absoluta */
  top: 0; /* Parte superior */
  left: 0; /* Parte izquierda */
  width: 20px; /* Ancho */
  height: 20px; /* Altura */
  border-radius: 50%; /* Bordes redondeados */
  border: 2px solid #8b7355; /* Borde de color café */
  transition: all 0.3s ease; /* Transición suave */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 415px) {
  .radio-button__custom.email {
    top: 10px; /* Ajuste de posición */
  }
}

/* Estilos para el botón de radio seleccionado */
.radio-button__input:checked + .radio-button__label .radio-button__custom {
  background-color: #c4a484; /* Color de fondo al seleccionar */
  border-color: transparent; /* Sin borde */
  transform: scale(0.8); /* Escala */
  box-shadow: 0 0 20px #4c8bf580; /* Sombra */
}

/* Estilos para la etiqueta del botón de radio seleccionado */
.radio-button__input:checked + .radio-button__label {
  color: #8b7355; /* Color del texto al seleccionar */
}

/* Estilos para el botón de radio al pasar el ratón */
.radio-button__label:hover .radio-button__custom {
  transform: scale(1.2); /* Escala al pasar el ratón */
  border-color: #c4a484; /* Color del borde al pasar el ratón */
  box-shadow: 0 0 20px #c4a48480; /* Sombra al pasar el ratón */
}

/* Estilos para pantallas medianas */
@media (max-width: 1024px) {
  .contact-title,
  .contact-subtitle {
    text-align: center; /* Alineación centrada */
  }

  .contact-info {
    align-items: center; /* Alineación vertical centrada */
  }

  .info-item {
    justify-content: center; /* Alineación horizontal centrada */
  }

  .horario-box {
    text-align: center; /* Alineación centrada */
    margin: 0 auto; /* Margen automático */
  }

  .horario-box h3 {
    justify-content: center; /* Alineación horizontal centrada */
  }

  .form-group label {
    text-align: center; /* Alineación centrada */
    display: block; /* Mostrar como bloque */
    width: 100%; /* Ancho completo */
  }

  .form-group {
    max-width: 600px; /* Ancho máximo */
    margin-left: auto; /* Margen automático izquierdo */
    margin-right: auto; /* Margen automático derecho */
    margin-bottom: 25px; /* Margen inferior */
  }

  .form-group input[type="text"],
  .form-group textarea {
    width: 90%; /* Ancho reducido */
    margin: 0 auto; /* Margen automático */
    display: block; /* Mostrar como bloque */
    font-size: 1em; /* Tamaño de fuente */
    padding: 12px; /* Relleno interno */
  }

  .submit-btn {
    width: 90%; /* Ancho reducido */
    margin: 0 auto; /* Margen automático */
    display: block; /* Mostrar como bloque */
  }
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
  .contact-section {
    flex-direction: column; /* Dirección de la columna */
    gap: 30px; /* Espacio entre elementos */
  }

  .contact-info-column {
    padding-right: 0; /* Sin relleno derecho */
  }

  .horario-item {
    flex-direction: row; /* Dirección de la fila */
    align-items: center; /* Alineación vertical */
    gap: 15px; /* Espacio entre elementos */
    justify-content: space-between; /* Espacio entre elementos */
  }
}

/* Estilos para pantallas muy pequeñas */
@media (max-width: 391px) {
  .horario-box {
    text-align: center; /* Alineación centrada */
    margin: 0 auto; /* Margen automático */
    font-size: 12px; /* Tamaño de fuente reducido */
  }
}