html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    
}

main{
    padding-top: var(--header-height);
}

/* ============ Contenedor máximo para pantallas grandes ============ */
.extension,
.Legal.Office,
.Purple.Legal.Office {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
}

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 0 15px;
    padding-bottom: 5%;
}

.imgExtension{
    width: 100%;
    max-width: 645px;
    height: auto;
    margin-left: 0;
}

.blue {
    color: #00b4b4;
}
  
.orange {
    color: #f89a1c;
}

.textColors{
    max-width: 650px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8;
    text-align: justify;
}

.columnText h1,
.misionVision h1,
.textPurpleLegalOffice h1 {
    font-size: clamp(26px, 2.2vw, 40px);
    margin-bottom: 15px;
    color: #464646;
}

.columnText p,
.list,
#puntos,
.oculto,
.text p,
.misionVision p,
.services p,
.overlay p,
.textPurpleLegalOffice P {
    font-size: clamp(16px, 1vw, 19px);
    line-height: 1.6;
    font-weight: 100;
    color: #464646;
    text-align: justify;
}

#btnVerMas {
    background: none;
    border: none;
    color: #0056b3;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    padding: 0;
}

#btnVerMas:hover {
    text-decoration: underline;
}

.oculto {
    display: none;
}

#imgRow2 {
    padding-top: 4%;
}

.blueWord {
    font-size: clamp(26px, 2.2vw, 40px);
    margin-bottom: 15px;
    color: #0000ff;
    margin: 0 15px;
}

.redWord,
.services h1 {
    font-size: clamp(26px, 2.2vw, 40px);
    margin-bottom: 15px;
    color: #fa4156;
    margin: 0 15px;
}

.textLegalOffice,
.services h1,
.services p,
.textPurpleLegalOffice h1 {
    margin: 2%;
}

.misionVision {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 0 5%;
}

.misionVision .text,
.misionVision h1 {
    text-align: left;
}

.servicesContainer{
    display:grid;
    grid-template-columns: repeat(2, 1fr); /* antes: repeat(auto-fit, minmax(280px, 1fr)) */
    gap:40px;
    padding:20px;
}

.serviceCard{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    cursor:pointer;
}

.serviceCard img{
    width:100%;
    display:block;
    transition: transform .6s ease;
}

.serviceCard:hover img{
    transform: scale(1.1);
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255, 255, 255, 0.856);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
    opacity:0;
    transition:.5s;
}

.serviceCard:hover .overlay{
    opacity:1;
}

.overlay h3{
    color:#464646;
    font-size: clamp(22px, 2vw, 36px);
    margin-bottom:10px;
    letter-spacing:1px;
    font-weight: 700;
}

.goldLine{
    width:0;
    height:2px;
    background:#f1c232;
    margin:10px 0 20px 0;
    transition:.4s;
}

.serviceCard:hover .goldLine{
    width:60px;
}

/* ============ Tablet: sigue en 2 columnas pero con menos gap ============ */
@media (max-width: 900px){

    .servicesContainer{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ============ Móvil: el texto se muestra siempre, sin hover ============ */
@media (max-width: 600px){

    .servicesContainer{
        grid-template-columns: 1fr; /* una tarjeta por fila para que se lea bien */
        gap: 20px;
    }

    .serviceCard{
        display: flex;
        flex-direction: column;
    }

    .serviceCard img{
        transition: none; /* ya no hay hover, evitamos el zoom raro al tocar */
    }

    .serviceCard:hover img{
        transform: none;
    }

    .overlay{
        position: static; /* deja de ser overlay flotante */
        width: 100%;
        height: auto;
        opacity: 1; /* siempre visible */
        background: #f8f8f8;
        padding: 20px;
    }

    .overlay h3{
        font-size: 22px;
    }

    .goldLine{
        width: 60px; /* siempre visible en vez de animarse */
    }
}
.purpleLegalOffice {
    background-color: #674ea7;
    text-align: center;
    color: white;
    font-size: clamp(22px, 2vw, 36px);
    padding: 10px;
    margin: 30px 8px;
    border-radius: 8px;
}

.darkGrayText {
    color: #464646 !important;
    font-weight: 700 !important;
}

.imgPurpleLegalOffice{
    display: flex;
    justify-content: center;
    margin-top: 10%;
}

.imgPurple {
    width:100%;
    max-width:500px;
    height:auto;
}

/* ============ Breakpoint intermedio para tablets (901-1200px) ============ */
@media (max-width: 1200px) and (min-width: 901px){

    .extension,
    .Legal.Office,
    .Purple.Legal.Office {
        max-width: 96%;
    }

    .columns{
        gap: 25px;
    }
}

/* ============ Breakpoint principal de móvil ============ */
@media (max-width: 900px){

    .columns{
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 0 12px;
    }

    #imgRow2 {
        padding-top: 0;
    }

    .imgExtension{
        max-width: 100%;
    }

    .misionVision {
        margin: 0 5%;
    }

    .servicesContainer{
        padding: 15px;
    }

    .purpleLegalOffice {
        margin: 20px 10px;
    }

    .imgPurpleLegalOffice{
        margin-top: 8%;
    }
}

/* ============ Breakpoint para celulares pequeños ============ */
@media (max-width: 480px){

    .columns{
        margin: 0 10px;
        gap: 15px;
    }

    .textColors{
        max-width: 100%;
    }

    .servicesContainer{
        padding: 10px;
        gap: 20px;
    }

    .overlay{
        padding: 15px;
    }

    .imgPurple {
        max-width: 100%;
    }
}