/*==================================================
=        CONSTRUCCIÓN Y REFORMAS - RJL SERVICIOS    =
====================================================*/



/*==================================================
=              CONTENEDOR GENERAL                   =
====================================================*/

/* Contenedor principal de todas las secciones */
main .contenedor{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}



/*==================================================
=              ESTILOS GENERALES                    =
====================================================*/

/* Fondo general de la página */
main{
    background: #f8f8f8;
}

/* Espaciado superior e inferior de todas las secciones */
main section{
    padding:60px 0;
}



/*==================================================
=             TÍTULOS DE LAS SECCIONES              =
====================================================*/

/* Contenedor del título */
.titulo-seccion{
    text-align: center;
    margin-bottom: 60px;
}

/* Texto pequeño superior */
.titulo-seccion span{

    display: inline-block;

    color: #c62828;

    font-size: 0.95rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 15px;

}

/* Título principal */
.titulo-seccion h2{

    font-size: 2.5rem;

    color: #222;

    font-weight: 700;

    margin-bottom: 20px;

}

/* Línea decorativa */
.titulo-seccion h2::after{

    content: "";

    display: block;

    width: 80px;

    height: 4px;

    background: #c62828;

    margin: 18px auto 0;

    border-radius: 10px;

}


/*==================================================
=          PRESENTACIÓN DEL SERVICIO                =
====================================================*/

/* Sección principal de introducción */
.construccion-intro{
    background: #ffffff;
}

/* Distribución en dos columnas */
.construccion-intro .contenedor{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}


/* Texto superior */
.intro-texto .subtitulo{

    display: inline-block;

    color: #c62828;

    font-size: 0.8rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-bottom: 10px;

}

/* Título principal */
.intro-texto h2{

    font-size: 2.8rem;

    color: #222;

    line-height: 1.2;

    margin-bottom: 20px;

}

/* Párrafo */
.intro-texto p{

    font-size: 1.05rem;

    color: #666;

    line-height: 1.9;

}

/* Imagen */
.intro-imagen img{

    width:100%;

    max-width:760px;

    display:block;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

    transition:.4s;

}
/* Efecto al pasar el ratón */
.intro-imagen img:hover{

    transform: scale(1.03);

}

/*==================================================
=           SERVICIOS DE CONSTRUCCIÓN               =
====================================================*/

/* Fondo de la sección */
.servicios-construccion{
    background: #f5f5f5;
}

/* Cuadrícula de tarjetas */
.grid-servicios{

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 35px;

}

/* Tarjeta */
.card-servicio{

    background: #ffffff;

    padding: 40px 35px;

    border-radius: 18px;

    text-align: center;

    box-shadow: 0 12px 30px rgba(0,0,0,.08);

    transition: all .35s ease;

    border-top: 5px solid transparent;

}

/* Efecto al pasar el ratón */
.card-servicio:hover{

    transform: translateY(-10px);

    border-top: 5px solid #c62828;

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

}

/* Icono */
.card-servicio i{

    font-size: 3rem;

    color: #c62828;

    margin-bottom: 25px;

}

/* Título */
.card-servicio h3{

    font-size: 1.5rem;

    color: #222;

    margin-bottom: 18px;

}

/* Texto */
.card-servicio p{

    color: #666;

    line-height: 1.8;

    font-size: 1rem;

}

/*==================================================
=               CÓMO TRABAJAMOS                     =
====================================================*/

/* Fondo blanco */
.proceso-trabajo{
    background: #ffffff;
}

/* Cuadrícula de los pasos */
.pasos-grid{

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 60px;

}

/* Tarjeta de cada paso */
.paso{

    background: #f8f8f8;

    padding: 35px 30px;

    text-align: center;

    border-radius: 18px;

    transition: all .35s ease;

    position: relative;

    overflow: hidden;

    box-shadow: 0 10px 25px rgba(0,0,0,.08);

}

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

.paso:hover{

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0,0,0,.12);

}

/* Número */
.numero{

    width: 70px;

    height: 70px;

    margin: 0 auto 25px;

    border-radius: 50%;

    background: #c62828;

    color: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.5rem;

    font-weight: 700;

}

/* Título */
.paso h3{

    color: #222;

    font-size: 1.35rem;

    margin-bottom: 15px;

}

/* Texto */
.paso p{

    color: #666;

    line-height: 1.8;

    font-size: 1rem;

}


/*==================================================
=          ¿POR QUÉ ELEGIR RJL SERVICIOS?           =
====================================================*/

/* Fondo blanco de la sección */
.porque-elegir{

    background:#ffffff;

}


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

/* Distribuye el texto y la imagen en dos columnas */
.porque-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

}


/*==================================================
=               CONTENIDO DE TEXTO                 =
====================================================*/

/* Texto superior en rojo */
.porque-texto span{

    display:inline-block;

    color:#c62828;

    font-size:.95rem;

    font-weight:700;

    margin-bottom:15px;

}


/* Título principal */
.porque-texto h2{

    font-size:3rem;

    color:#222;

    margin-bottom:25px;

    line-height:1.2;

}


/* Párrafo descriptivo */
.porque-texto p{

    color:#666;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:30px;

}


/* Lista de ventajas */
.porque-texto ul{

    list-style:none;

    padding:0;

    margin:0;

}


/* Cada elemento de la lista */
.porque-texto li{

    margin-bottom:16px;

    font-size:1.05rem;

    color:#333;

    font-weight:500;

}


/*==================================================
=              CONTENEDOR DE LA IMAGEN             =
====================================================*/

/* Centra la imagen dentro de la columna */
.porque-imagen{

    display:flex;

    justify-content:center;

}

/*==================================================
=              COLUMNA DE LA IMAGEN                =
==================================================*/

.porque-imagen{

    /* Centra la imagen dentro de su columna */
    display:flex;
    justify-content:center;
    align-items:center;

}

.porque-imagen img{

    width:100%;                 /* Ocupa todo el ancho disponible */
    max-width:560px;            /* Tamaño máximo de la imagen */

    border-radius:20px;         /* Esquinas redondeadas */

    box-shadow:0 15px 35px rgba(0,0,0,.12); /* Sombra suave */

    transition:transform .35s ease,
               box-shadow .35s ease;

}

/* Hover suave */
.porque-imagen img:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 45px rgba(0,0,0,.18);

}

/*==================================================
=             LLAMADA A LA ACCIÓN (CTA)             =
====================================================*/

/* Sección CTA */
.cta-construccion{

    background: linear-gradient(135deg, #c62828, #9d1f1f); /* Fondo rojo corporativo */

    color:#ffffff;                                         /* Texto blanco */

    text-align:center;                                     /* Centra el contenido */

    padding:100px 20px;                                    /* Espaciado interior */

}

/* Título */
.cta-construccion h2{

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

    font-weight:700;                                       /* Negrita */

    color:#ffffff;                                         /* Color blanco */

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

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

}

/* Texto */
.cta-construccion p{

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

    margin:0 auto 40px;                                   /* Centrado y separación */

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

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

    color:rgba(255,255,255,.95);                           /* Blanco ligeramente transparente */

}

/* Botón */
.btn-cta{

    display:inline-block;                                  /* Permite padding */

    background:#ffffff;                                    /* Fondo blanco */

    color:#c62828;                                         /* Texto rojo */

    text-decoration:none;                                  /* Quita el subrayado */

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

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

    font-weight:700;                                       /* Texto en negrita */

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

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

    box-shadow:0 12px 30px rgba(0,0,0,.20);                /* Sombra */

}

/* Hover del botón */
.btn-cta:hover{

    background:#222;                                       /* Fondo negro */

    color:#ffffff;                                         /* Texto blanco */

    transform:translateY(-4px);                            /* Eleva el botón */

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

}
/*==================================================
=              RESPONSIVE TABLET                    =
====================================================*/

@media (max-width:992px){

    /* Presentación */
    .construccion-intro .contenedor{

        grid-template-columns: 1fr;

        text-align: center;

    }

    /* ¿Por qué elegirnos? */
    .porque-grid{

        grid-template-columns: 1fr;

        text-align: center;

    }

    /* Tarjetas */
    .grid-servicios{

        grid-template-columns: 1fr 1fr;

    }

    /* Pasos */
    .pasos-grid{

        grid-template-columns: repeat(2,1fr);

    }

}


/*==================================================
=              RESPONSIVE MÓVIL                     =
====================================================*/

@media (max-width:768px){

    /* Secciones */
    main section{

        padding: 70px 0;

    }

    /* Títulos */
    .titulo-seccion h2{

        font-size: 2rem;

    }

    /* Introducción */
    .intro-texto h2{

        font-size: 2rem;

    }

    /* Tarjetas */
    .grid-servicios{

        grid-template-columns: 1fr;

    }

    /* Pasos */
    .pasos-grid{

        grid-template-columns: 1fr;

    }

    /* CTA */
    .cta-construccion h2{

        font-size: 2rem;

    }

    .cta-construccion p{

        font-size: 1rem;

    }

}



/*==================================================
=          DISTRIBUCIÓN EN DOS COLUMNAS            =
==================================================*/

.porque-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;             /* Menos separación entre texto e imagen */

    align-items:center;   /* Centra ambas columnas verticalmente */

}


/* Centra la lista pero mantiene el texto alineado a la izquierda */
.porque-texto ul{

    display:inline-block;

    text-align:left;

}


/* Reduce ligeramente el tamaño de la imagen */
.porque-imagen img{

    max-width:420px;

    margin-top:20px;

}

/* ==================================================
   AJUSTES DE INTEGRACIÓN - CONSTRUCCIÓN
================================================== */

.intro-imagen {
    min-width: 0;
}

.intro-imagen a {
    display: block;
}

.intro-imagen img {
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .intro-imagen img,
    .card-servicio,
    .paso,
    .btn-cta {
        transition: none !important;
    }

    .intro-imagen img:hover,
    .card-servicio:hover,
    .paso:hover,
    .btn-cta:hover {
        transform: none !important;
    }
}