/* css/contacto.css (actualizado)
   Estilos formulario de contacto - apariencia similar a la imagen proporcionada
   Cambios principales: centrar el botón "Enviar" en .cont-row cont-row-submit
*/

/* Variables */
:root{
  --max-width: 980px;
  --accent-color: #7a0e0e; /* tono rojo oscuro del menú */
  --accent-strong: #4b0404;
  --bg-page: #f4f4f4;
  --box-border: #a65c7a; /* borde de caja (tono rosado suave) */
  --box-shadow: rgba(0,0,0,0.12);
  --text-color: #071133;
  --label-color: #7a0e0e;
  --label-weight: 800;
}

/* Reset y layout */
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-color);
  line-height: 1.35;
  padding: 24px 12px 48px;
}

/* Contenedor centrado */
.cont-page { display:flex; justify-content:center; }
.cont-inner {
  width:100%;
  max-width: var(--max-width);
  background: #ffffff;
  padding: 18px 22px 28px;
  box-shadow: 0 6px 12px var(--box-shadow);
}

/* Titulo y deco */
.cont-header { display:flex; align-items:flex-end; justify-content:flex-end; gap:18px; margin-bottom:10px; position:relative; }
.cont-titulo {
  font-size:34px;
  font-weight:800;
  color: var(--accent-strong);
  letter-spacing: 2px;
  margin:0;
  text-align:right;
}
.cont-deco {
  position:absolute;
  left:0;
  bottom:10px;
  height:8px;
  width:260px;
  background: var(--accent-strong);
  border-radius:2px;
}

/* Intro */
.cont-intro {
  color:#0b2b66;
  font-weight:700;
  font-style:italic;
  margin: 8px 0 16px 0;
}

/* Caja principal */
.cont-box {
  background: #f0efef;
  border: 3px solid var(--box-border);
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.06);
}

/* Filas: etiqueta a la izquierda, campo a la derecha */
.cont-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.cont-label {
  width:190px;
  color: var(--label-color);
  font-weight: var(--label-weight);
  font-size:16px;
  text-transform:uppercase;
}
.cont-field { flex:1; }

/* Inputs */
.cont-field input[type="text"],
.cont-field input[type="email"],
.cont-field input[type="tel"],
.cont-field textarea {
  width:100%;
  padding:8px 10px;
  border:1px solid #cfcfcf;
  border-radius:3px;
  background: #fff;
  font-size:14px;
  color:#222;
}

/* Textarea tamaño */
.cont-row-text .cont-field textarea {
  min-height:150px;
  resize: vertical;
}

/* Boton Enviar - estilo similar al menu del encabezado */
.btn-enviar {
  display:inline-block;
  padding:8px 16px;
  background: var(--accent-strong);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:4px;
  border:2px solid rgba(0,0,0,0.25);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.35);
  cursor:pointer;
  transition: transform .08s ease, background .12s ease;
}
.btn-enviar:hover,
.btn-enviar:focus {
  background: var(--accent-color);
  transform: translateY(-2px);
  outline: none;
}

/* NUEVAS REGLAS: centrar el botón dentro de su fila */
.cont-row.cont-row-submit {
  /* como .cont-row es display:flex; centramos horizontalmente */
  justify-content: center;
  /* alinear verticalmente al centro por si el input es más alto */
  align-items: center;
}

/* Asegurar que el contenedor que envuelve el botón no estire el ancho del mismo */
.submit-field {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Footer note */
.cont-footer-note {
  text-align:center;
  margin-top:18px;
  font-weight:700;
  color:#0b2b66;
}

/* Responsive: apilar labels/fields */
@media (max-width:860px) {
  .cont-header { justify-content:center; }
  .cont-deco { left: 50%; transform: translateX(-50%); }
  .cont-row { flex-direction:column; align-items:stretch; }
  .cont-label { width:100%; margin-bottom:6px; }
  .cont-field { width:100%; }

  /* En móvil la fila de submit queda en columna: centramos horizontalmente */
  .cont-row.cont-row-submit {
    flex-direction: column;
    align-items: center; /* centra el .submit-field */
  }
  .submit-field {
    justify-content: center;
    width: 100%;
    margin-top: 6px;
  }

  .cont-box { padding:12px; }
}