/* ============================================

   CONTENEDOR PRINCIPAL SOLO PARA CONTACTO.HTML

=============================================== */

.contacto1 {

    margin-top: 20px;

    max-width: 1320px;   /* límite de ancho */

    margin-left: auto;   /* centra horizontalmente */

    margin-right: auto;  /* centra horizontalmente */

    padding: 0 20px;     /* opcional: espacio lateral */

}



/* ============================================

   CONTENEDOR DE LAS DOS COLUMNAS

=============================================== */

.contacto-pagina-contenido {

    display: flex;

    align-items: flex-start;

    gap: 40px;

    width: 100%;

}



/* ================================

   COLUMNA IZQUIERDA

================================ */

.contacto-info {

    width: 45%;

    text-align: left;

    margin-top: 40px;

}



.titulo-box {

    display: flex;

    align-items: center;

    gap: 12px; /*espacio entre la linea y el titulo*/

    margin-bottom: 5px;

}



.linea-roja {

    width: 50px;

    height: 4px;

    background: var(--rojo);

    border-radius: 4px;

}



.titulo-contacto {

    font-size: 18px;

    font-weight: 600;

    color: var(--negro);

}



.subtitulo-contacto {

    font-size: 50px;

    font-weight: 700;

    color: var(--rojo);

    margin-bottom: 40px;

    text-align: left;

    margin-top: 8px;   /* antes seguro estaba en 20–30px */

}



.info-box {

    padding: 10px 20px; /*espacio dentro del recuadro*/

    border-bottom: 5px solid var(--rojo-oscuro);

    margin-bottom: 5px;

    transition: 0.3s ease;

    border-radius: 4px;

    text-align: left;

}



.info-box:hover {

    background: var(--rojo);

    cursor: pointer;


}



.info-box h3 {

    font-size: 22px;

    font-weight: 700;

    margin: 0;

    color: var(--negro);

}



.info-box p {

    font-size: 18px;

    line-height: 1.4;

    margin-left: 62px;

    margin-top: 14px;

    display: block;

    transition: 0.3s ease;

}

.info-box:hover h3 {
    color: var(--blanco); /* título en blanco */
}

.info-box:hover p {
    color: var(--blanco); /* párrafo en blanco */
}


.info-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 6px;

}



/* ============================================

   ICONOS DEL LADO IZQUIERDO    

=============================================== */

.contacto-info .icono {

    font-size: 40px;

    color: var(--rojo);

    margin-right: 10px;

    flex-shrink: 0;

}



.info-box:hover .icono {

    color: var(--blanco);

}



/* ====================================

   FORMULARIO PREMIUM (COLUMNA DERECHA)

======================================= */

.contacto-formulario {

    width: 55%;

    padding: 40px;

    box-sizing: border-box;

}



.form-texto {

    font-size: 16px;

    margin-bottom: 20px;

    color: var(--gris-oscuro);

    line-height: 1.5;

}



.form-card {

    background: rgba(255, 255, 255, 0.25);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    padding: 35px;

    border-radius: 14px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

    border: 1px solid rgba(255,255,255,0.35);

}



.formulario-index {

    display: flex;

    flex-direction: column;

    gap: 22px;

}



/* ============================================

   ICONOS DEL FORMULARIO (SEPARADOS)

=============================================== */

/* Icono fijo dentro del form-group */

.form-group {

    position: relative; /* asegura que el icono se posicione relativo al grupo */

    margin-bottom: 20px;   /* espacio entre grupos */

}



/* Icono fijo */

.form-group .icono {

    position: absolute;

    left: 14px;

    height: 48px;           /* misma altura que el input */

    line-height: 48px;      /* centra el icono en esa altura */

    font-size: 18px;

    color: var(--negro);

    pointer-events: none;

}



.textarea-group .icono {

    top: 12px ;

    transform: none ;

    line-height: normal;

}



/* Input con altura fija */

.form-group input,

.form-group select {

    height: 48px;          /* altura consistente */

    line-height: 48px;     /* referencia vertical */

    padding-left: 45px;    /* espacio para el icono */

}   



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 14px 16px 14px 45px;

    border-radius: 8px;

    border: 1px solid #ccc;

    background: rgba(255,255,255,0.85);

    font-size: 16px;

    transition: 0.3s ease;

    outline: none;

    color: black;

    box-sizing: border-box;

}



.textarea-group textarea {

    height: 160px;

    resize: none;

}



.form-row-2col {

    display: flex;

    gap: 20px;

}



.form-row-2col .form-group {

    flex: 1;

}



.btn-enviar {

    background: var(--rojo-oscuro);

    color: var(--blanco);

    padding: 14px;

    border: none;

    border-radius: 8px;

    font-size: 18px;

    cursor: pointer;

    width: 100%;

    transition: 0.3s ease;

}



.btn-enviar:hover {

    background: var(--rojo-hover-claro);

}



/* ================================

   FOCUS

================================ */



/* Eliminar el borde azul nativo del navegador */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: var(--rojo);

    background: var(--blanco);

    outline: none !important;

    box-shadow: none !important

}



/* ================================

   ESTILOS DE VALIDACIÓN

================================ */

/* Mantener borde rojo y fondo rojizo incluso en foco */ 

/* Input en error */

.error-input,

.error-input:focus {

    border: 2px solid var(--rojo) !important;

    background: rgba(255,0,0,0.08) !important;

    box-shadow: 0 0 6px rgba(211,47,47,0.4) !important;

    color: var(--negro);

}



/* Icono cambia a rojo cuando el campo está en foco */

.form-group:focus-within .icono {

    color: var(--rojo);

}



/* Icono se mantiene rojo si el campo tiene error */

.form-group.error .icono {

    color: var(--rojo) !important; 

}



/* Mensajes */

.form-group small {

    display: none;

    font-size: 14px;

    margin-top: 4px;

    color: var(--rojo);

}



/* Mensaje de error debajo del campo */

.form-group small.error {

    display: none;        /* no ocupa espacio hasta que haya error */

    margin-top: 6px;        /* separación clara del input */

    margin-left: 10px;    /* alineado con el texto del input, no con el icono */

    font-size: 14px;

    line-height: 1.3;

    color: var(--rojo-hover-claro);

    font-weight: 700;

    position: static; /* 🔑 evita que afecte al icono */

    

}



/* Cuando hay texto de error, se activa */

.form-group.error small.error {

    display: block;        /* ocupa espacio debajo del input */

}



/* Mensaje de éxito */

.mensaje-exito {

    margin-top: 15px;

    background: var(--fondo-verdeclaro);

    color: var(--letra-verdeoscura);

    padding: 12px;

    border-radius: 6px;

    border: 1px solid #c3e6cb; /* borde verde suave */

    font-weight: bold;

    text-align: center;

    box-shadow: 0 0 8px rgba(0,0,0,0.2);

    animation: fadeIn 0.5s ease forwards;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(-5px); }

    to { opacity: 1; transform: translateY(0); }

}



/* Mensaje general de error */

.mensaje-error-general {

    margin-top: 15px;

    padding: 12px 18px;

    border-radius: 10px;

    background: rgba(255, 0, 0, 0.2);

    color: var(--negro);

    font-weight: 600;

    text-align: center;

    box-shadow: 0 0 8px rgba(0,0,0,0.2);

}



/* Evita el fondo celeste del autocompletado */

.form-group input:-webkit-autofill,

.form-group textarea:-webkit-autofill,

.form-group select:-webkit-autofill {

    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.1) inset !important; /* fondo translúcido */

    -webkit-text-fill-color: var(--negro) !important; /* texto en tu color */

    border: 1px solid #ccc !important; /* mantiene tu borde */
    transition: background-color 5000s ease-in-out 0s; /* truco para evitar parpadeo */

}



/* Si el campo tiene error y además autocompletado */

.form-group input.error-input:-webkit-autofill,

.form-group textarea.error-input:-webkit-autofill {

    -webkit-box-shadow: 0 0 0px 1000px rgba(255,0,0,0.08) inset !important;

    -webkit-text-fill-color: var(--negro) !important;

    border: 2px solid var(--rojo) !important;

}

.btn-enviar:disabled {

    background: #6c757d;   /* gris */

    color: #fff;

    cursor: not-allowed;

    opacity: 0.8;

}





/* ================================

   RESPONSIVE

================================ */

@media (max-width: 900px) {

    .contacto-formulario {

        width: 100%;

        padding: 20px;

    }



    .form-row-2col {

        flex-direction: column;

        gap: 15px;

    }

}