/* ======== CONTENEDOR GENERAL ======== */
.contacto {
  padding: 100px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
}

/* ======== CONTENIDO FLEX ======== */
.contacto-contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  max-width: 1100px;
  width: 100%;
  justify-content: center;
  flex-direction: row-reverse;
}

/* ======== FORMULARIO ======== */
.contacto-formulario,
.contacto-info {
  background-color: white;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Tamaños */
.contacto-formulario {
  flex: 1 1 380px;
  max-width: 460px;
}

.contacto-info {
  flex: 1 1 350px;
  max-width: 460px;
}

/* Titulos */
.contacto-formulario h2,
.contacto-info h2 {
  margin-bottom: 14px;
  font-size: 25px;
  color: #12395f;
  font-weight: 800;
}

/* Labels */
.contacto-formulario label {
  display: block;
  margin-top: 14px;
  font-size: 25px;
}

/* Inputs */
.contacto-formulario input,
.contacto-formulario textarea {
  width: 100%;
  padding: 9px;
  margin-top: 7px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

/* ======== BOTÓN FORMULARIO ======== */
.contacto-formulario button {
  margin-top: 18px;
  padding: 11px 23px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #195DAC, #2F73C2);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.contacto-formulario button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  background: linear-gradient(135deg, #2F73C2, #195DAC);
}

/* ======== INFO — ESTILO PREMIUM ======== */
.contacto-info {
  padding: 30px 28px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Títulos */
.contacto-info h2 {
  font-size: 26px;
  color: #12395f;
  font-weight: 800;
  margin-bottom: 5px;
  text-align: left;
}

/* Párrafos */
.contacto-info p {
  font-size: 17px;
  color: #2f3e4f;
  line-height: 1.6;
  padding-left: 6px;
  position: relative;
}

/* Puntos decorativos */
.contacto-info p::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #195dac;
  border-radius: 50%;
  position: absolute;
  left: -2px;
  top: 10px;
  opacity: 0.6;
}

/* El primer párrafo no lleva punto */
.contacto-info p:first-of-type::before {
  display: none;
}

/* Separador suave entre secciones */
.contacto-info p + h2 {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e6edf5;
}

/* ======== LISTA DE HORARIO ======== */
.contacto-info .horario {
  margin-top: 10px;
  padding-left: 0;
  border-radius: 10px;
  background: #f5f8ff;
  padding: 12px 15px;
}

.contacto-info .horario li {
  font-size: 16px;
  margin: 4px 0;
  color: #263445;
  padding-left: 12px;
  position: relative;
}

.contacto-info .horario li::before {
  color: #195dac;
  font-weight: bold;
  position: absolute;
  left: 0;
}


/* Mapa */
.contacto-mapa {
  margin-top: 40px;
  width: 100%;
  height: 400px;
}

.contacto-mapa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
}