.contacto {
background: var(--fondo);
}
.contacto__interior {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 900px;
padding: 56px 40px 80px;
}
.contacto__tarjeta {
padding: 48px 44px;
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: var(--radio-lg);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
.contacto__titulo {
margin-bottom: 8px;
font-size: 28px;
padding-bottom: 14px;
}
.contacto__titulo::after,
.contacto__subtitulo::after {
width: 40px;
height: 3px;
}
.contacto__subtitulo {
margin-bottom: 4px;
font-size: 24px;
padding-bottom: 14px;
}
.contacto__datos {
display: flex;
gap: 12px;
margin-top: 24px;
}
.contacto__dato {
display: flex;
align-items: flex-start;
gap: 12px;
flex: 1 1 0;
min-width: 0;
padding: 16px 20px;
background: var(--fondo);
border: 1px solid var(--borde);
border-radius: 14px;
transition: var(--transicion);
}
.contacto__dato:hover {
background: var(--verde-claro);
border-color: rgba(0, 166, 75, 0.15);
}
.contacto__dato-icono {
flex-shrink: 0;
color: var(--verde);
line-height: 0;
}
.contacto__dato-icono svg {
width: 20px;
height: 20px;
}
.contacto__dato-titulo {
margin-bottom: 2px;
font-size: 14px;
font-weight: 700;
}
.contacto__dato-texto {
margin: 0;
font-size: 13px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.contacto__dato-texto a:hover { color: var(--verde); }
.contacto__whatsapp {
margin-top: 20px;
}
.contacto__separador {
margin: 32px 0;
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.contacto__form {
margin-top: 8px;
}
.contacto__campo {
margin: 0 0 16px;
}
.contacto__campo label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
color: var(--titular);
}
.contacto__campo span { color: var(--verde); }
.contacto__enviar {
padding: 16px 40px;
}
.contacto__tarjeta--mapa {
display: flex;
flex-direction: column;
padding: 36px 32px;
}
.contacto__mapa {
flex: 1;
margin: 16px 0;
border-radius: var(--radio);
overflow: hidden;
background: var(--fondo);
}
.contacto__mapa iframe {
display: block;
width: 100%;
min-height: 320px;
border: 0;
}
.contacto__mapa-boton {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 8px;
padding: 12px 20px;
border: 1px solid var(--borde-fuerte);
border-radius: 12px;
background: var(--fondo);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--titular);
transition: var(--transicion);
}
.contacto__mapa-boton:hover {
background: var(--verde-claro);
border-color: rgba(0, 166, 75, 0.2);
color: var(--verde-oscuro);
}
.contacto__mapa-boton svg { color: var(--verde); }
@media (max-width: 968px) {
.contacto__interior { padding: 40px 24px 60px; gap: 28px; }
.contacto__tarjeta { padding: 36px 28px; }
.contacto__titulo { font-size: 24px; }
.contacto__datos { flex-direction: column; }
}
@media (max-width: 480px) {
.contacto__interior { padding: 28px 16px 48px; }
.contacto__tarjeta {
padding: 28px 20px;
border-radius: 20px;
}
.contacto__titulo { font-size: 22px; }
.contacto__subtitulo { font-size: 20px; }
}