/* Estilos específicos para la página de Contacto */

.page-content.contacto-page {
  width: 100%;
  position: relative;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 78px;
  width: 100%;
}

.logo-container,
.logo-container img {
  height: clamp(46.5px, calc(50 / 1920 * 100vw), 50px);
}

.main-nav {
  top: 0;
}

.mobile-menu-close {
  height: 78px;
}

@media (max-width: 1760px) {
  .header-container {
    height: 73.32px;
  }

  .main-nav {
    width: 1006.035px;
    height: 73.32px;
    bottom: -36.66px;
  }
  
  .nav-menu-wrapper {
    gap: 42.3px;
    height: 19.74px;
  }
  
  .nav-link-area {
    height: 19.74px;
  }
  
  .nav-link-area img {
    height: 19.74px;
  }

  .mobile-menu-close {
    height: 73.32px;
  }
}

@media (max-width: 1600px) {
  .header-container {
    height: 67.08px;
  }

  .main-nav {
    width: 920.415px;
    height: 67.08px;
    bottom: -33.54px;
  }
  
  .nav-menu-wrapper {
    gap: 38.7px;
    height: 18.06px;
  }
  
  .nav-link-area {
    height: 18.06px;
  }
  
  .nav-link-area img {
    height: 18.06px;
  }

  .mobile-menu-close {
    height: 67.08px;
  }
}

/* Sección del formulario */
.contacto-form-section {
  width: 100%;
  min-height: calc(100vh - 300px);
  background-image: url('../assets/images/Kennaline Web_contacto_background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(30px, calc(80 / 1920 * 100vw), 56.73px);
  display: flex;
  justify-content: center;
  position: relative;
}

.contacto-form {
  width: 100%;
  max-width: clamp(600px, calc(1200 / 1920 * 100vw), 850.92px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, calc(20 / 1920 * 100vw), 14.18px);
  position: relative;
  z-index: 1;
}

.contacto-form-field {
  position: relative;
  display: flex;
  flex-direction: row;
  padding: clamp(15px, calc(25 / 1920 * 100vw), 17.73px) 0;
  background-color: #FFFFFF;
}

.contacto-label {
  display: flex;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  left: calc(-1 * clamp(12px, calc(20 / 1920 * 100vw), 14.18px));
}

.contacto-label-text {
  width: clamp(150px, calc(279.02 / 1920 * 100vw), 197.88px);
  height: clamp(49.3px, calc(91.71 / 1920 * 100vw), 65px);
  background-image: url('../assets/images/Kennaline Web_contacto_banner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(24px, calc(40 / 1920 * 100vw), 28.36px);
  font-family: 'Saira Condensed', Arial, sans-serif;
  font-size: clamp(24px, calc(40 / 1920 * 100vw), 28.36px);
  font-weight: 600;
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0;
}

.contacto-input,
.contacto-textarea {
  flex: 1;
  padding-left: clamp(12px, calc(20 / 1920 * 100vw), 14.18px);
  padding-right: clamp(12px, calc(20 / 1920 * 100vw), 14.18px);
  border: none;
  background-color: #FFFFFF;
  font-family: 'Saira Condensed', Arial, sans-serif;
  font-size: clamp(18px, calc(36 / 1920 * 100vw), 22px);
  font-weight: 300;
  color: #000;
  outline: none;
}

.contacto-textarea {
  resize: none;
  height: clamp(180px, calc(360 / 1920 * 100vw), 255.28px);
}

/* Mensajes de éxito/error */
.contacto-message {
  padding: clamp(15px, calc(25 / 1920 * 100vw), 17.73px);
  margin-bottom: clamp(20px, calc(30 / 1920 * 100vw), 21.27px);
  border-radius: 4px;
  font-family: 'Saira Condensed', Arial, sans-serif;
  font-size: clamp(18px, calc(24 / 1920 * 100vw), 17.02px);
  font-weight: 400;
}

.contacto-message-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.contacto-message-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.contacto-message p {
  margin: 0;
}

.contacto-form-submit {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, calc(40 / 1920 * 100vw), 28.36px);
}

.contacto-submit-btn {
  padding: clamp(12px, calc(20 / 1920 * 100vw), 14.18px) clamp(40px, calc(80 / 1920 * 100vw), 56.73px);
  background-color: #000;
  color: #FFFFFF;
  border: none;
  font-family: 'Saira Condensed', Arial, sans-serif;
  font-size: clamp(24px, calc(40 / 1920 * 100vw), 28.36px);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contacto-submit-btn:hover {
  background-color: #333;
}

/* Sección de datos de contacto */
.contacto-datos-section {
  width: 100%;
  background-color: #000;
  padding: clamp(40px, calc(60 / 1920 * 100vw), 60px) clamp(30px, calc(116.5 / 1920 * 100vw), 116.5px);
}

.contacto-datos-container {
  width: 100%;
  max-width: clamp(600px, calc(1200 / 1920 * 100vw), 1200px);
  margin: 0 auto;
}

.contacto-datos-section .contacto-datos {
  padding-left: 0;
}

.contacto-datos-section .contacto-datos p {
  margin: 0;
  padding: clamp(8px, calc(12 / 1920 * 100vw), 12px) 0;
  font-family: 'Saira Condensed', Arial, sans-serif;
  font-size: clamp(20px, calc(36 / 1920 * 100vw), 36px);
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
}

/* Responsive para móviles - desde 1080px */
@media (max-width: 1080px) {
  .contacto-form {
    gap: clamp(12px, calc(20 / 1440 * 100vw), 20px);
  }
  
  .contacto-form-field {
    padding: clamp(12px, calc(20 / 1440 * 100vw), 20px) 0;
  }
  
  .contacto-label {
    left: calc(-1 * clamp(10px, calc(15 / 1440 * 100vw), 15px));
  }
  
  .contacto-label-text {
    width: clamp(120px, calc(279.02 / 1440 * 100vw), 279.02px);
    height: clamp(39.4px, calc(91.71 / 1440 * 100vw), 91.71px);
    font-size: clamp(20px, calc(36 / 1440 * 100vw), 36px);
    padding-left: clamp(20px, calc(35 / 1440 * 100vw), 35px);
  }
  
  .contacto-input,
  .contacto-textarea {
    width: 100%;
    font-size: clamp(18px, calc(28 / 1440 * 100vw), 28px);
    padding-left: clamp(10px, calc(15 / 1440 * 100vw), 15px);
    padding-right: clamp(10px, calc(15 / 1440 * 100vw), 15px);
  }
  
  .contacto-submit-btn {
    font-size: clamp(20px, calc(36 / 1440 * 100vw), 36px);
    padding: clamp(10px, calc(18 / 1440 * 100vw), 18px) clamp(30px, calc(60 / 1440 * 100vw), 60px);
  }
  
  .contacto-datos-section {
    padding: clamp(30px, calc(40 / 1440 * 100vw), 40px) clamp(20px, calc(30 / 1440 * 100vw), 30px);
  }
  
  .contacto-datos-section .contacto-datos p {
    font-size: clamp(18px, calc(28 / 1440 * 100vw), 28px);
  }
  
  /* Reducir tamaño del logo */
  .logo-container,
  .logo-container img {
    height: 42px;
  }
}