/* Contacto */

/* Excepción del sitio: este hero no ocupa la pantalla visible, va con el alto del Figma (500 px en celular, 400 en compu).
   En celular el texto va abajo, con 120 px de aire (70 + 50 del Figma); en compu, centrado. */
.hero-contacto {
  min-height: 500px;
}

.hero-contacto .hero__contenido {
  align-items: center;
  justify-content: flex-end;
  padding-block: 0 120px;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-contacto {
    min-height: 400px;
  }

  .hero-contacto .hero__contenido {
    justify-content: center;
    padding-block: 0;
  }
}

/* Ubicación */
.ubicacion {
  display: grid;
  gap: 30px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.ubicacion__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.ubicacion__titulo {
  font-weight: 700;
}

.ubicacion__direccion {
  font-style: normal;
}

.ubicacion__btn {
  width: 100%;
  max-width: 300px;
}

/* El color se ve mientras carga el mapa */
.ubicacion__mapa {
  overflow: hidden;
  height: 300px;
  border-radius: 12px;
  background: var(--gris-claro);
}

.ubicacion__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 1024px) {
  .ubicacion {
    grid-template-columns: minmax(0, 500px) minmax(0, 600px);
    justify-content: center;
    align-items: center;
    gap: 80px;
  }

  .ubicacion__texto {
    gap: 20px;
  }

  .ubicacion__mapa {
    height: 500px;
  }
}

/* Barra de contacto */
.barra-contacto {
  padding: 5px 0;
  background: var(--olive);
  color: var(--blanco);
}

ul.barra-contacto__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
}

.barra-contacto__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.barra-contacto__item:nth-child(2) .barra-contacto__icono {
  width: 35px;
  height: 35px;
}

.barra-contacto__item:nth-child(3) {
  flex-basis: 100%;
}

.barra-contacto__titulo {
  font-size: 24px;
  line-height: 42px;
  font-weight: 700;
  text-transform: uppercase;
}

/* 44 px para tocar con el dedo, 28 px de alto en el diseño */
.barra-contacto__item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -8px;
  text-decoration: none;
}

@media (hover: hover) {
  .barra-contacto__item a:hover {
    color: var(--naranja);
  }
}

@media (min-width: 1024px) {
  .barra-contacto {
    padding: 40px 0;
  }

  ul.barra-contacto__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .barra-contacto__item {
    padding: 0;
  }

  .barra-contacto__item:not(:last-child) {
    border-right: 1px solid var(--naranja);
  }
}

/* Preguntas frecuentes en celular: los espacios de este diseño */
@media (max-width: 767px) {
  .faq-contacto.faq--plegable {
    padding: 50px 0;
  }

  .faq-contacto .faq__item {
    padding-block: 0;
  }

  /* La última pregunta mide una línea en el diseño; se puede seguir tocando en los 56 px */
  .faq-contacto .faq__item:last-child .faq__boton[aria-expanded="false"] {
    margin-bottom: -28px;
  }
}

/* Formulario: arma el link de WhatsApp */
.formulario {
  background: var(--olive);
  color: var(--blanco);
}

.formulario .contenedor {
  padding-inline: 0;
}

.formulario__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 50px 40px;
  border: 1px solid var(--naranja);
  border-radius: 20px;
  text-align: center;
}

.formulario__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 28px;
  text-align: left;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.campo input,
.campo textarea {
  width: 100%;
  min-height: 68px;
  padding: 18px 30px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--blanco);
  color: var(--olive);
  font-size: 18px;
  line-height: 28px;
}

.campo textarea {
  display: block;
  resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--olive);
  opacity: 1;
}

.campo [aria-invalid="true"] {
  border-color: var(--naranja);
}

.campo__error {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--naranja);
}

.formulario__btn {
  width: 100%;
  max-width: 300px;
  margin-top: 20px;
}

@media (min-width: 1024px) {
  .formulario {
    padding: 80px 0;
  }

  .formulario .contenedor {
    padding-inline: var(--margen-lateral);
  }

  .formulario__caja {
    padding: 56px;
  }
}

/* Íconos al pasar el mouse: solo compu y sin "reducir movimiento". Los activa js/icono-mouse.js */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .barra-contacto__icono {
    overflow: visible;
  }

  .esta-animando .barra-contacto__icono--telefono > g {
    transform-origin: 20px 20px;
    animation: contacto-telefono 0.6s ease-in-out;
  }

  .esta-animando .barra-contacto__icono--whatsapp > g {
    animation: contacto-whatsapp 0.6s ease-out;
  }

  .esta-animando .barra-contacto__agujas {
    transform-origin: 18.1667px 18.1667px;  /* centro del reloj */
    animation: contacto-agujas 1.2s ease-in-out;
  }

  @keyframes contacto-telefono {
    0%, 100% { transform: none; }
    12% { transform: rotate(-7deg); }
    26% { transform: rotate(7deg); }
    40% { transform: rotate(-6deg); }
    54% { transform: rotate(6deg); }
    68% { transform: rotate(-4deg); }
    82% { transform: rotate(3deg); }
  }

  @keyframes contacto-whatsapp {
    0%, 100% { transform: none; }
    35% { transform: translateY(-7px); }
    62% { transform: none; }
    80% { transform: translateY(-2px); }
  }

  @keyframes contacto-agujas {
    to { transform: rotate(360deg); }
  }
}