/*=========================================================
    PÁGINA DE CONTACTO - RJL SERVICIOS
=========================================================*/


/*=========================================================
    SECCIÓN PRINCIPAL
=========================================================*/

    .contacto{
        width:100%;
        padding:30px 0 90px;
        background:#f5f5f5;
    }

/*=========================================================
    CONTENEDOR PRINCIPAL
=========================================================*/

.contacto .contenedor{

    max-width:1300px;              /* Ancho máximo del contenido */

    margin:0 auto;                 /* Centrar horizontalmente */

}


/*=========================================================
    CABECERA DE LA PÁGINA
=========================================================*/

.contacto-titulo{

    text-align:center;             /* Centrar todo el contenido */

    margin-bottom:60px;            /* Separación con las columnas */

}


/* Texto superior "CONTACTO" */

.contacto-titulo span{

    display:inline-block;          /* Permite aplicar márgenes */

    color:#c62828;                 /* Color corporativo */

    font-size:2rem;             /* Tamaño del texto */

    font-weight:600;               /* Negrita */

    text-transform:uppercase;      /* Mayúsculas */

    letter-spacing:3px;            /* Separación entre letras */

    margin-bottom:12px;            /* Espacio inferior */

}


/* Título principal */

.contacto-titulo h1{

    font-size:3rem;                /* Tamaño del título */

    color:#222;                    /* Color oscuro */

    font-weight:700;               /* Negrita */

    margin-bottom:20px;            /* Separación inferior */

}


/* Texto descriptivo */

.contacto-titulo p{

    max-width:760px;               /* Ancho máximo */

    margin:0 auto;                 /* Centrado */

    color:#666;                    /* Gris medio */

    font-size:1.05rem;             /* Tamaño del texto */

    line-height:1.8;               /* Altura entre líneas */

}


/*=========================================================
    CONTENEDOR DE DOS COLUMNAS
=========================================================*/

.contacto-grid{

    display:grid;                       /* Activa CSS Grid */

    grid-template-columns:1.2fr .8fr;   /* Dos columnas */

    gap:40px;                           /* Separación */

    align-items:stretch;                /* Las columnas tendrán la misma altura */

}

/*=========================================================
    COLUMNA IZQUIERDA - FORMULARIO
=========================================================*/

.formulario-contacto{

    background:#ffffff;                 /* Fondo blanco */

    padding:45px;                       /* Espaciado interior */

    border-radius:20px;                 /* Bordes redondeados */

    box-shadow:0 15px 40px rgba(0,0,0,.08); /* Sombra elegante */

}


/*=========================================================
    CAMPOS DEL FORMULARIO
=========================================================*/

.campo{

    display:flex;                       /* Activa Flexbox */

    flex-direction:column;              /* Coloca el label encima del campo */

    margin-bottom:25px;                 /* Separación entre campos */

}


/*=========================================================
    ETIQUETAS (LABEL)
=========================================================*/

.campo label{

    font-size:0.95rem;                  /* Tamaño del texto */

    font-weight:600;                    /* Negrita */

    color:#333;                         /* Color oscuro */

    margin-bottom:8px;                  /* Separación con el campo */

}


/*=========================================================
    INPUTS, SELECT Y TEXTAREA
=========================================================*/

.campo input,

.campo select,

.campo textarea{

    width:100%;                         /* Ocupa todo el ancho */

    padding:15px 18px;                  /* Espaciado interior */

    border:1.5px solid #dddddd;           /* Borde gris */

    border-radius:12px;                 /* Bordes redondeados */

    background:#fafafa;                 /* Fondo muy claro */

    font-size:1rem;                     /* Tamaño del texto */

    font-family:inherit;                /* Usa la fuente de la página */

    outline:none;                       /* Quita el borde azul */

    transition:all .30s ease;           /* Animación suave */

}


/*=========================================================
    EFECTO AL HACER CLIC EN LOS CAMPOS
=========================================================*/

.campo input:focus,
.campo select:focus,
.campo textarea:focus{

    border:1px solid #c62828;

    background:#ffffff;

    box-shadow:none;

    transition:all .30s ease;

}
/*=========================================================
    EFECTO AL PASAR EL RATÓN
=========================================================*/

.campo input:hover,
.campo select:hover,
.campo textarea:hover{

    border:1px solid #d84a4a;

    background:#ffffff;

    box-shadow:none;

}
/*=========================================================
    COLUMNA DERECHA - TARJETA DE CONTACTO
=========================================================*/

.info-contacto{

    display:flex;                       /* Permite que la tarjeta crezca */


}


/*=========================================================
    TARJETA
=========================================================*/

.tarjeta-contacto{

    background:#ffffff;

    padding:45px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    width:100%;

    display:flex;

    flex-direction:column;

}


/*=========================================================
    SUBTÍTULO
=========================================================*/

.tarjeta-contacto .subtitulo{

    display:inline-block;               /* Permite aplicar márgenes */

    color:#c62828;                      /* Color corporativo */

    font-size:.90rem;                   /* Tamaño */

    font-weight:700;                    /* Negrita */

    letter-spacing:2px;                 /* Separación entre letras */

    text-transform:uppercase;           /* Mayúsculas */

    margin-bottom:12px;                 /* Separación inferior */

}


/*=========================================================
    TÍTULO
=========================================================*/

.tarjeta-contacto h2{

    color:#222;                         /* Color oscuro */

    font-size:2rem;                     /* Tamaño */

    margin-bottom:18px;                 /* Separación */

}


/*=========================================================
    TEXTO
=========================================================*/

.tarjeta-contacto > p{

    color:#666;                         /* Gris */

    line-height:1.8;                    /* Altura entre líneas */

    margin-bottom:35px;                 /* Separación inferior */

}

/*=========================================================
    CADA DATO DE CONTACTO
=========================================================*/

.dato-contacto{

    display:flex;                          /* Coloca icono y texto en una línea */

    align-items:flex-start;                /* Alineación superior */

    gap:18px;                              /* Separación entre icono y texto */

    margin-bottom:28px;                    /* Espacio entre cada dato */

}


/*=========================================================
    ICONOS
=========================================================*/

.dato-contacto i{

    width:55px;                            /* Ancho */

    height:55px;                           /* Alto */

    display:flex;                          /* Centrar icono */

    justify-content:center;                /* Centrado horizontal */

    align-items:center;                    /* Centrado vertical */

    border-radius:50%;                     /* Círculo */

    background:#c62828;                    /* Rojo corporativo */

    color:#ffffff;                         /* Icono blanco */

    font-size:1.2rem;                      /* Tamaño del icono */

    flex-shrink:0;                         /* Evita que se encoja */

    box-shadow:0 8px 20px rgba(198,40,40,.25); /* Sombra roja */

    transition:.35s ease;                  /* Animación */

}


/*=========================================================
    EFECTO SOBRE EL ICONO
=========================================================*/

.dato-contacto:hover i{

    transform:translateY(-4px) scale(1.08); /* Se eleva ligeramente */

    background:#a91f1f;                     /* Rojo más oscuro */

}


/*=========================================================
    TÍTULOS
=========================================================*/

.dato-contacto h3{

    margin:0 0 6px;

    color:#222;

    font-size:1.05rem;

}


/*=========================================================
    TEXTO
=========================================================*/

.dato-contacto p{

    margin:0;

    color:#666;

    line-height:1.6;

}

/*=========================================================
    MENSAJE FINAL
=========================================================*/

.mensaje-final{

    display:flex;                              /* Icono y texto en una fila */

    align-items:flex-start;                    /* Alineación superior */

    gap:15px;                                  /* Espacio entre icono y texto */

    margin-top:35px;                           /* Separación superior */

    padding:20px;                              /* Espaciado interior */

    background:#fff5f5;                        /* Fondo rojo muy suave */

    border-left:5px solid #c62828;             /* Línea roja lateral */

    border-radius:12px;                        /* Bordes redondeados */

}


/*=========================================================
    ICONO DEL MENSAJE FINAL
=========================================================*/

.mensaje-final i{

    color:#c62828;                             /* Color rojo */

    font-size:1.5rem;                          /* Tamaño */

    margin-top:2px;                            /* Ajuste vertical */

}


/*=========================================================
    TEXTO DEL MENSAJE FINAL
=========================================================*/

.mensaje-final p{

    margin:0;                                  /* Elimina márgenes */

    color:#555;                                /* Gris oscuro */

    line-height:1.7;                           /* Altura entre líneas */

}
/*=========================================================
    ÁREA DE TEXTO
=========================================================*/

.campo textarea{

    min-height:180px;                   /* Altura mínima */

    resize:vertical;                    /* Solo ampliar verticalmente */

}


/*=========================================================
    BOTÓN ENVIAR
=========================================================*/

.btn-enviar{

    width:100%;                         /* Ocupa todo el ancho */

    padding:18px;                       /* Altura del botón */

    border:none;                        /* Sin borde */

    border-radius:14px;                 /* Bordes más redondeados */

    background:linear-gradient(135deg,#d32f2f,#b71c1c); /* Degradado rojo */

    color:#ffffff;                      /* Texto blanco */

    font-size:1.08rem;                  /* Tamaño del texto */

    font-weight:700;                    /* Negrita */

    letter-spacing:.3px;                /* Ligera separación */

    cursor:pointer;                     /* Cursor mano */

    box-shadow:0 12px 25px rgba(198,40,40,.25); /* Sombra elegante */

    transition:all .35s ease;           /* Animación */

}


/*=========================================================
    EFECTO HOVER DEL BOTÓN
=========================================================*/

.btn-enviar:hover{

    background:linear-gradient(135deg,#e53935,#c62828); /* Rojo más vivo */

    transform:translateY(-4px);         /* Se eleva ligeramente */

    box-shadow:0 18px 35px rgba(198,40,40,.35); /* Sombra más intensa */

}

/* ==================================================
   ACCESIBILIDAD DEL FORMULARIO
================================================== */

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible,
.btn-enviar:focus-visible {
    outline: 3px solid rgba(198, 40, 40, 0.28);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .campo input,
    .campo select,
    .campo textarea,
    .btn-enviar {
        transition: none !important;
    }

    .btn-enviar:hover {
        transform: none !important;
    }
}