/*
===============================================
COMPONENTE: SERVICES (Homepage Grid) - REFINADO
===============================================
*/

.new-services {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background-color: #f3f3f3;
}

.services__container {
    width: 100%;
    max-width: 1920px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-l) var(--spacing-s);
}
@media only screen and (min-width: 768px) {
    .services__container {
        padding: var(--spacing-l);
    }
}

.services__container .title {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: clamp(1.8rem, 0.943rem + 4.286vw, 3rem);
    color: var(--color-text);
    margin: 0 0 var(--spacing-s) 0;
    text-align: center;
}
.services__container .divider {
    margin-bottom: var(--spacing-l);
    width: 100%;
}

.services__grid {
    display: flex;
    width: 100%;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-s);
    margin: 0 0 var(--spacing-m) 0;
}
@media only screen and (min-width: 768px) {
    .services__grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}
@media only screen and (min-width: 1024px) {
    .services__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.grid__element {
    aspect-ratio: 4/5;
    position: relative;
    width: 100%;
    border-radius: 8px;
    text-decoration: none;
    overflow: hidden;
    border: 3px solid transparent;
    /* Solo transiciones para efectos hover - no para fadeIn (opacity/transform general) */
    transition: box-shadow 0.3s ease, border 0.3s ease;
}
@media only screen and (min-width: 1024px) {
    .grid__element {
        aspect-ratio: 5/7;
    }
}

.grid__element--split { display: flex; flex-direction: column; gap: var(--spacing-s); padding: 0; border: none; background: transparent; overflow: visible; }
.split-card { flex: 1; position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: 8px; border: 3px solid transparent; transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; }
.split-card h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem) !important; }

/* --- UNIFICACIÓN DE ANIMACIONES Y ESTILOS HOVER --- */
.grid__element:not(.grid__element--split) {
    /* Transición específica para translateY de hover - separada de fadeIn */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

.grid__element:not(.grid__element--split):hover,
.grid__element:not(.grid__element--split):focus,
.split-card:hover,
.split-card:focus { 
    transform: translateY(-5px); 
    box-shadow: var(--shadow-elevation-medium); 
    border-color: var(--color-accent);
}
.grid__element:not(.grid__element--split):hover > article img, 
.grid__element:not(.grid__element--split):focus > article img,
.split-card:hover > article img,
.split-card:focus > article img { transform: scale(1.12); }
.grid__element:not(.grid__element--split):hover > article h3, 
.grid__element:not(.grid__element--split):focus > article h3,
.split-card:hover > article h3,
.split-card:focus > article h3 { color: var(--color-accent); }

/* --- ESTILOS DE CONTENIDO DE TARJETAS --- */
.grid__element article,
.split-card article { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: var(--spacing-s); }
.grid__element article img,
.split-card article img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; z-index: 1; }
.grid__element article h3,
.split-card article h3 { position: relative; margin: 0; color: var(--color-text-wt); font-family: var(--font-primary); font-size: clamp(1.6rem, 1.4rem + 1vw, 2rem); font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.6); z-index: 3; text-align: center; pointer-events: none; transition: color 0.4s ease; }

/* --- OVERLAY DE LAS TARJETAS --- */
.grid__element:not(.grid__element--split)::after,
.split-card::after { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); pointer-events: none; z-index: 2; transition: background 0.3s ease; }
.grid__element:not(.grid__element--split):hover::after,
.grid__element:not(.grid__element--split):focus::after,
.split-card:hover::after,
.split-card:focus::after { background: rgba(0, 0, 0, 0.6); }


/* --- BOTÓN "VER TODOS" (CON ARREGLO RESPONSIVE) --- */
.services__view-all-btn {
    /* Mobile-first: El botón se comporta como un bloque */
    display: flex;
    width: 100%;
    max-width: 500px; /* Evita que sea excesivamente ancho en tablets */
    margin-left: auto;
    margin-right: auto;
    
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    padding: var(--spacing-s) var(--spacing-m);
    text-decoration: none;
    font-family: var(--font-primary);
    color: var(--color-accent);
    background-color: transparent;
    font-size: 1.2rem; /* Tamaño de fuente ajustado para móvil */
    font-weight: 500;
    border: 2px solid var(--color-accent);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    margin-top: var(--spacing-m); /* Más margen superior para respirar */
}

.services__view-all-btn:hover,
.services__view-all-btn:focus {
    background-color: var(--color-accent);
    color: var(--color-text-wt);
    transform: translateY(-4px);
}

.services__view-all-btn i {
    font-size: 1.2em;
}

/* Tablet y Desktop: El botón vuelve a su tamaño de contenido */
@media only screen and (min-width: 768px) {
    .services__view-all-btn {
        display: inline-flex; /* Vuelve a ser inline */
        width: auto;           /* Ancho automático */
        max-width: none;
        font-size: 1.4rem;     /* Fuente original restaurada */
    }
}