body {
margin: 0;
font-family: 'Roboto', sans-serif;
color: #444;
background: #fff;
line-height: 1.6;
}

/* HEADER */
.contacto-header {
position: relative;
background: url('../img/contact.png') top/cover no-repeat;
height: 450px;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 60px;
text-align: left;
color: #fff;
background-attachment: fixed;
}

.contacto-header .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
}

.contacto-header .header-text {
position: relative;
z-index: 1;
max-width: 600px;
padding: 20px;
}

.contacto-header h1 {
font-family: 'Playfair Display', serif;
font-size: 70px;
margin-bottom: 15px;
}

.contacto-header p {
font-size: 20px;
font-weight: 300;
}

/* FORMULARIO */
.contacto-formulario {
max-width: 1100px;
margin: 40px auto 60px auto;
padding: 25px 30px;
text-align: center;
background: #fff;
border-radius: 20px;
box-shadow: 0px 8px 25px rgba(0,0,0,0.08);
position: relative;
top: -50px;
transition: transform 0.5s ease-out;
}

.contacto-formulario h2 {
font-family: 'Playfair Display', serif;
font-size: 32px;
margin-bottom: 35px;
color: #0a2640;
}

.formulario {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.formulario input,
.formulario select,
.formulario textarea {
padding: 14px 18px;
border: 1px solid #e0e0e0;
border-radius: 15px;
font-size: 15px;
width: 100%;
box-sizing: border-box;
background: #fafafa;
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
transition: all 0.3s ease-in-out;
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
border-color: #0a2640;
box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
outline: none;
}

textarea {
grid-column: 1 / span 2;
resize: none;
height: 130px;
}

button {
grid-column: 1 / span 2;
background: #0a2640;
color: #fff;
border: none;
padding: 15px;
font-size: 16px;
text-transform: uppercase;
cursor: pointer;
border-radius: 15px;
transition: all 0.4s ease-in-out;
letter-spacing: 1px;
}

button:hover {
background: #08365a;
transform: scale(1.05) translateY(-2px);
box-shadow: 0px 6px 12px rgba(0,0,0,0.2);
}

/* INFO CONTACTO */
.contacto-info {
background: #f9f9f9;
padding: 50px 20px;
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}

.info-item {
background: #fff;
padding: 25px 20px;
border-radius: 15px;
box-shadow: 0px 3px 15px rgba(0,0,0,0.08);
text-align: center;
max-width: 220px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
flex: 1;
min-width: 200px;
}

.info-item:hover {
transform: translateY(-8px);
box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
}

.info-item i {
font-size: 32px;
color: #0a2640;
margin-bottom: 12px;
}

.info-item p {
margin: 0;
font-size: 15px;
font-weight: 500;
}

/* ERRORES */
.error-message {
color: #ff4d4f;
font-size: 13px;
margin-top: 4px;
text-align: left;
}

input.error, select.error, textarea.error {
border-color: #ff4d4f;
box-shadow: 0 0 5px rgba(255, 77, 79, 0.5);
}

input.valid, select.valid, textarea.valid {
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

.g-recaptcha {
margin: 15px 0;
display: flex;
justify-content: center;
}

/* ===== MEDIA QUERIES ===== */

/* Tablet */
@media (max-width: 1024px) {
.contacto-header {
height: 350px;
padding-left: 40px;
justify-content: center;
text-align: center;
}
.contacto-header h1 { font-size: 50px; }
.contacto-header p { font-size: 18px; }
.contacto-header .header-text { max-width: 500px; }

.contacto-formulario {
max-width: 90%;
margin: 30px auto;
padding: 20px 25px;
top: -40px;
}
.contacto-formulario h2 { font-size: 28px; }

.formulario { gap: 15px; }
.formulario input, .formulario textarea { font-size: 14px; padding: 12px 15px; }
textarea { height: 120px; }
button { padding: 14px; font-size: 15px; }

.contacto-info { padding: 40px 20px; gap: 25px; }
.info-item { padding: 20px 15px; max-width: 180px; min-width: 160px; }
.info-item i { font-size: 28px; }
.info-item p { font-size: 14px; }
}

/* Móvil */
@media (max-width: 768px) {
.contacto-header {
height: 300px;
padding: 0 20px;
background-attachment: scroll;
text-align: center;
}
.contacto-header h1 { font-size: 36px; }
.contacto-header p { font-size: 16px; }
.contacto-header .header-text { max-width: 100%; }

.contacto-formulario {
max-width: 95%;
margin: 20px auto;
padding: 15px 20px;
top: -30px;
border-radius: 15px;
}
.contacto-formulario h2 { font-size: 24px; }
.formulario { grid-template-columns: 1fr; gap: 12px; }
textarea { height: 100px; grid-column: 1; }
button { grid-column: 1; font-size: 14px; border-radius: 12px; }

.contacto-info {
flex-direction: column;
align-items: center;
padding: 30px 15px;
gap: 20px;
}
.info-item {
max-width: 100%;
min-width: 250px;
margin-bottom: 10px;
}
.info-item i { font-size: 26px; }
.info-item:hover { transform: translateY(-5px); }
.error-message { font-size: 12px; }
}

/* Móvil pequeño */
@media (max-width: 480px) {
.contacto-header { height: 250px; }
.contacto-formulario { padding: 12px 15px; top: -20px; }
.contacto-formulario h2 { font-size: 22px; }
.formulario { gap: 10px; }
textarea { height: 90px; }
button { font-size: 13px; padding: 12px; }
.contacto-info { padding: 25px 10px; gap: 15px; }
.info-item { min-width: 200px; padding: 15px; }
.info-item i { font-size: 24px; }
.info-item p { font-size: 13px; }
}
.form-message {
  margin-top: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
}