/*Segun el manual de uso de la marca tengo estos colores a disposición y tipografía*/
/* 1. FUENTES Y VARIABLES */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:wght@500&display=swap');

:root {
    --violeta-taisel: #7B5CFF;
    --negro-carbon: #121212;
    --blanco-puro: #FFFFFF;
    --gris-fog: #F2F2F5;
    --gris-slate: #A7A9B4;
    --beige-editorial: #F7F4EF;
}

/* 2. RESET Y TIPOGRAFÍA */
html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background-color: var(--blanco-puro);
    color: var(--negro-carbon);
}

h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

h2, h3, h4, p {
    font-family: 'Inter', sans-serif;
}

/* 3. ESTRUCTURA GLOBAL Y CENTRADO */
/* Usamos este selector para aplicar el centrado a todos tus grids al mismo tiempo */
.servicios-grid, 
.metodologia-grid, 
.equipo-grid {
    display: grid;
    width: 95%;          /* Ocupa casi todo el ancho en móviles */
    max-width: 1100px;   /* Se frena en 1100px en monitores grandes */
    margin: 0 auto;    /* EL TRUCO MÁGICO: Centra el bloque en el medio */
    gap: 30px;
    padding: 20px 0;
}

/* Definición de columnas para escritorio */
.servicios-grid { grid-template-columns: repeat(3, 1fr); }
.metodologia-grid { grid-template-columns: repeat(4, 1fr); }
.equipo-grid { grid-template-columns: repeat(3, 1fr); }

/* 4. CENTRADO DE CONTENIDO (Tu flecha roja) */
.card-personalizada, .paso {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra iconos/fotos horizontalmente */
    text-align: center;  /* Centra todos los textos */
}

/* 5. TAMAÑO DE IMÁGENES (Tus barras rojas) */
.img-ajustada {
    height: 140px;       /* Tamaño grande para servicios */
    width: auto;
    max-width: 100%;     /* No permite que se desborde */
    object-fit: contain;
    margin-bottom: 20px;
}

.img-paso-grande {
    height: 100px;       /* Tamaño para metodología */
    width: auto;
    object-fit: contain;
    margin-bottom: 15px;
}

.img-equipo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--violeta-taisel);
}

.rol {
    font-weight: bold;
    color: var(--violeta-taisel);
}

/* 6. REDES SOCIALES (FOOTER) */
.icono-red {
    width: 35px !important;
    height: 35px !important;
    object-fit: cover;
    border-radius: 6px;
}

/* 7. RESPONSIVIDAD (Solución definitiva) */
/* Image of CSS Grid responsive layout with media queries */
@media (max-width: 992px) {
    /* En tablets, todo pasa a 2 columnas */
    .servicios-grid, .equipo-grid, .metodologia-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    /* En celulares, todo pasa a 1 sola columna */
    .servicios-grid, .equipo-grid, .metodologia-grid {
        grid-template-columns: 1fr !important;
    }
    
    h1 { font-size: 1.8rem; } /* Achicamos un poco el título en el celu */
    
    .img-ajustada { height: 110px; } /* Achicamos un poco las imágenes en el celu */
}