/* ========================================
   CONTACTO - PUERTA DE ALCALÁ
======================================== */

:root {
  --contact-green: #162D24;
  --contact-accent: #3DAA35;
  --contact-beige: #F2E6D6;
  --contact-cream: #F5E8D1;
}


/* ========================================
   LAYOUT
======================================== */

.contacto-section {
  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  display: grid;

  grid-template-columns:
    minmax(360px, 40%)
    minmax(0, 60%);

  font-family: 'Montserrat', sans-serif;

  background: var(--contact-beige);
}


/* ========================================
   COLUMNA IZQUIERDA
======================================== */

.contacto-left {
  position: relative;

  min-height: 100vh;
  min-height: 100dvh;

  box-sizing: border-box;

  padding:
    clamp(145px, 10vw, 190px)
    clamp(40px, 4.5vw, 85px)
    clamp(55px, 5vw, 90px);

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  color: var(--contact-cream);

  background:
    radial-gradient(
      ellipse at 20% 110%,
      rgba(61, 170, 53, 0.38) 0%,
      rgba(61, 170, 53, 0.13) 35%,
      rgba(61, 170, 53, 0) 70%
    ),
    var(--contact-green);
}


/* ========================================
   TELÉFONO
======================================== */

.contacto-phone {
  display: inline-block;

  color: var(--contact-cream);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(38px, 3.6vw, 68px);

  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.035em;

  white-space: nowrap;

  transition:
    opacity 0.3s ease;
}


.contacto-phone:hover {
  opacity: 0.65;
}


/* ========================================
   INFORMACIÓN
======================================== */

.contacto-info {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  text-align: left;
}


.contacto-info p {
  margin: 0;

  color: var(--contact-cream);

  font-size: clamp(10px, 0.75vw, 13px);

  font-weight: 400;

  line-height: 1.4;
}


.contacto-info-title {
  margin-bottom: 18px !important;

  font-weight: 500 !important;
}


/* ========================================
   VISÍTANOS
======================================== */

.contacto-btn-maps {
  margin-top: 25px;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--contact-cream);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(10px, 0.75vw, 13px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.contacto-btn-maps img {
  width: clamp(30px, 2.5vw, 43px);
  height: auto;
}


.contacto-btn-maps:hover {
  opacity: 0.65;

  transform: translateY(-2px);
}


/* ========================================
   COLUMNA DERECHA
======================================== */

.contacto-right {
  min-height: 100vh;
  min-height: 100dvh;

  box-sizing: border-box;

  padding:
    clamp(150px, 10vw, 190px)
    clamp(50px, 6vw, 115px)
    clamp(60px, 6vw, 100px);

  display: flex;
  flex-direction: column;

  justify-content: center;

  background: var(--contact-green);

  color: var(--contact-beige);
}


/* ========================================
   TÍTULO
======================================== */

.contacto-title {
  width: 100%;

  max-width: 720px;

  margin:
    0
    0
    clamp(55px, 5vw, 90px);

  color: var(--contact-beige);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(34px, 2.5vw, 62px);

  font-weight: 700;

  line-height: 1.02;

  letter-spacing: -0.03em;

  text-align: left;

  text-transform: uppercase;
}


/* ========================================
   FORMULARIO
======================================== */

.contacto-form {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: clamp(27px, 2.3vw, 40px);
}


/* ========================================
   INPUTS
======================================== */

.form-group {
  position: relative;
}


.form-group input {
  width: 100%;

  box-sizing: border-box;

  padding:
    13px
    0;

  border: 0;
  border-bottom:
    1px solid #F2E6D6;

  border-radius: 0;

  outline: 0;

  background: transparent;

  color: var(--contact-beige);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(12px, 0.9vw, 15px);

  font-weight: 400;

  text-transform: uppercase;

  transition:
    border-color 0.3s ease;
}


.form-group input:focus {
  border-bottom-color:
    var(--contact-accent);
}


/* ========================================
   LABEL FLOTANTE
======================================== */

.form-group:not(.custom-select) label {
  position: absolute;

  left: 0;
  top: 13px;

  color: var(--contact-beige);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(12px, 0.9vw, 15px);

  font-weight: 400;

  text-transform: uppercase;

  pointer-events: none;

  transition:
    top 0.3s ease,
    font-size 0.3s ease,
    opacity 0.3s ease;
}


.form-group input:focus + label,
.form-group input.filled + label {
  top: -9px;

  font-size: 9px;

  opacity: 0.6;
}


/* ========================================
   CUSTOM SELECT
======================================== */

.custom-select {
  position: relative;

  width: 100%;
}


.custom-select > label {
  position: relative;

  display: block;

  margin: 0 0 4px;

  color: #F2E6D6;

  font-family: 'Montserrat', sans-serif;

  font-size: 9px;

  font-weight: 400;

  text-transform: uppercase;
}


.select-wrapper {
  position: relative;
}


.select-btn {
  position: relative;

  width: 100%;

  padding:
    13px
    30px
    13px
    0;

  border: 0;
  border-bottom:
    1px solid #F2E6D6;

  background: transparent;

  color: var(--contact-beige);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(12px, 0.9vw, 15px);

  font-weight: 400;

  text-transform: uppercase;

  text-align: left;

  cursor: pointer;
}


.select-btn::after {
  content: "";

  position: absolute;

  right: 2px;
  top: 50%;

  width: 9px;
  height: 9px;

  border-right:
    1px solid var(--contact-beige);

  border-bottom:
    1px solid var(--contact-beige);

  transform:
    translateY(-70%)
    rotate(45deg);

  transition:
    transform 0.3s ease;
}


.select-btn.active::after {
  transform:
    translateY(-20%)
    rotate(225deg);
}


/* ========================================
   OPCIONES
======================================== */

.select-options {
  position: absolute;

  left: 0;
  right: 0;
  top: calc(100% + 1px);

  z-index: 20;

  display: none;

  margin: 0;

  padding: 5px 0;

  list-style: none;

  background: var(--contact-green);

  border: 0;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.12);
}


.select-options.show {
  display: block;
}


.select-options li {
  padding:
    12px
    15px;

  color: var(--contact-cream);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(10px, 0.8vw, 13px);

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}


.select-options li:hover {
  background:
    var(--contact-accent);

  color:
    var(--contact-green);
}


/* ========================================
   CHECKS + SEND
======================================== */

.form-bottom-row {
  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  margin-top: 10px;
}


.form-checks {
  width: min(85%, 620px);

  display: flex;
  flex-direction: column;

  gap: 10px;

  color: var(--contact-beige);

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(9px, 0.65vw, 12px);
}


.form-checks label {
  display: flex;

  align-items: flex-start;

  gap: 9px;

  line-height: 1.3;
}


.form-checks input[type="checkbox"] {
  width: 13px;
  height: 13px;

  flex: 0 0 13px;

  margin: 1px 0 0;

  accent-color:
    var(--contact-beige);
}


.form-checks a {
  color: var(--contact-beige);

  text-decoration: underline;
}


/* ========================================
   ENVIAR
======================================== */

.btn-enviar {
  flex: 0 0 auto;

  width: clamp(42px, 3.5vw, 58px);
  height: clamp(42px, 3.5vw, 58px);

  padding: 0;

  border:
    1px solid var(--contact-green);

  border-radius: 50%;

  background: transparent;

  display: flex;

  justify-content: center;
  align-items: center;

  cursor: pointer;

  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}


.btn-enviar img {
  width: 100%;
  height: 100%;

  display: block;
}


.btn-enviar:hover {
  background:
    rgba(22, 45, 36, 0.08);

  transform: scale(1.06);
}


/* ========================================
   AUTOFILL
======================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow:
    0 0 0 1000px
    var(--contact-beige)
    inset !important;

  -webkit-text-fill-color:
    var(--contact-green) !important;

  caret-color:
    var(--contact-green) !important;

  transition:
    background-color
    5000s ease-in-out 0s;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 900px) {

  .contacto-section {
    display: flex;

    flex-direction: column;

    min-height: auto;
  }


  .contacto-left {
    display: none;
  }


  .contacto-right {
    width: 100%;

    min-height: 100dvh;

    padding:
      130px
      20px
      60px;

    justify-content: flex-start;
  }


  .contacto-title {
    max-width: 100%;

    margin-bottom: 55px;

    font-size:
      clamp(34px, 10vw, 50px);
  }


  .contacto-form {
    max-width: 100%;

    gap: 32px;
  }


  .form-group input,
  .select-btn {
    font-size: 13px;
  }


  .form-bottom-row {
    align-items: flex-end;

    gap: 15px;
  }


  .form-checks {
    width: calc(100% - 60px);

    font-size: 9px;
  }


  .btn-enviar {
    width: 46px;
    height: 46px;
  }

}