/** --- Restablecimiento básico y tipografía general --- */
* {
    margin:             0;
    padding:            0;
    box-sizing:         border-box;
}

body {
    font-family:        Arial, sans-serif;
    line-height:        1.6;
    color:              #333;
    background-color:   #f4f4f4;
}

/* --- Sección de testimonios --- */
.testimonios {
    padding:            20px;
    text-align:         center;
    background-color:   #fff;
    margin-bottom:      20px;
    box-shadow:         0 2px 5px rgba(0,0,0,0.1);
/*    border:             solid  4px #FFCC00;*/
}

.testimonios__header h1 {
    font-size:          1.8em; /* Ajustado para móviles */
    color:              #333;
    margin-bottom:      10px;
}

.testimonios__header span {
    font-size:          0.9em; /* Ajustado para móviles */
    color:              #666;
}

/* --- Contenedor principal de las tarjetas (Enfoque Mobile First) --- */
.cntg-abuelo-card {
    display:            flex;
    flex-direction:     column; /* Las tarjetas siempre se apilan en móviles */
    align-items:        center;   /* Centra las tarjetas apiladas */
    padding:            10px; /* Menor padding para pantallas pequeñas */
    gap:                15px; /* Menor espacio entre tarjetas en móviles */
     /*border:             solid  4px #FFCC00;*/
}

/* --- Contenedor de cada tarjeta individual --- */
.subcnt-hijo-card {
    width:              95%; /* Ocupa casi todo el ancho disponible en móviles para mayor visibilidad */
    max-width:          380px; /* Un ancho máximo razonable para evitar que sean demasiado anchas en móviles grandes */
    background:         #FFF;
    border-radius:      10px;
    overflow:           hidden;
    box-shadow:         0 4px 8px rgba(0, 0, 0, 0.1);
    display:            flex;
    flex-direction:     column;
}

/* --- Encabezado de la empresa en la tarjeta --- */
.subcnt-hijo-card .header-emp {
    display:            flex;
    align-items:        center;
    padding:            0px; /* Padding ligeramente menor para móviles */
    background-color:   #f9f9f9;
    /*border:             solid 2px #FFCC00;*/
    border-bottom:      1px solid #eee;
}

.header-emp .lg-emp {
    width:              40px; /* Tamaño del logo de empresa ajustado para móviles */
    height:             40px;
    margin-right:       12px;
    flex-shrink:        0;
    /*border:             solid 2px #FFCC00;*/
}

.header-emp .lg-emp img {
    width:              100%;
    height:             100%;
    border-radius:      50%;
    object-fit:         cover;
    border:             2px solid rgba(0, 0, 0, 0.05);
}

.header-emp .n-emp h3 {
    width:              100%;
    font-size:          0.5em; /* Tamaño de fuente ajustado para móviles */
    color:              #333;
    margin:             0;
    text-align:         left;
    word-break:         break-word;
    /*border:             solid 2px #FFCC00;*/
}

/* --- Contenido principal de la tarjeta (imagen de perfil, nombre, opinión) --- */
.subcnt-hijo-card .subcnt-nieto-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.subcnt-nieto-card .header-info-card {
    padding: 15px; /* Ajuste para móviles */
    text-align: center;
    background: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #DDD;
}

/* Imagen de perfil del testimonial */
.subcnt-nieto-card .header-info-card img {
    border-radius: 50%;
    width: 100px; /* Tamaño de imagen de perfil ajustado para móviles */
    height: 100px;
    object-fit: cover;
    border: 4px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.subcnt-nieto-card .header-info-card a:hover img {
    transform:          scale(1.05);
    box-shadow:         0 0 0 12px rgba(0, 0, 0, 0.08);
}

.subcnt-nieto-card .header-info-card h2 {
    font-weight:        bold;
    font-size:          1.4em; /* Tamaño de fuente ajustado para móviles */
    color:              #333;
    margin:             0;
    text-align:         center;
    word-break:         break-word;
}

/* Sección de opinión/descripción */
.subcnt-nieto-card .opn-card {
    width:              100%;
    height:             250px;
    min-height:         180px;  Altura mínima para la descripción en móviles 
    padding:            15px; /* Ajuste para móviles */
    background:         #fbfbfb;
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
    flex-grow:          1;
    /*border:             solid 2px #FFCC00;*/
}

.subcnt-nieto-card .opn-card p {
    padding: 10px;
    height: 100%;
    margin-bottom:      5px; /* Espacio ajustado */
    line-height:        1.5;
    color:              #555;
    text-align:        justify;
    font-size:          0.95em; /* Tamaño de texto de descripción ajustado */
    overflow:           hidden;
    text-overflow:      ellipsis;
    display:            -webkit-box;
    -webkit-line-clamp: 5; /* Limita el texto a 5 líneas por defecto en móviles */
    -webkit-box-orient: vertical;
    /*border:             solid 2px #FFCC00;*/
}

/* --- Contenedor de iconos sociales --- */
.subcnt-hijo-card .cnt-social-card {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* Espacio ajustado para móviles */
    padding: 12px; /* Ajuste para móviles */
    background: #000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.subcnt-hijo-card .cnt-social-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* Tamaño de los iconos sociales ajustado para móviles */
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ddd;
    font-size: 1.1em; /* Tamaño de fuente del icono ajustado */
    transition: all 0.3s ease;
    text-decoration: none;
}

.cnt-social-card a:hover {
    background-color: #f0522a;
    color: #FFF;
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(240, 82, 42, 0.4);
}

/* --- Media Queries para adaptar a pantallas más grandes (tablets y laptops) --- */

/* Para tablets y pantallas medianas (mayor o igual a 768px) */
@media (min-width: 768px) {
    .testimonios__header h1 {
        font-size: 2.2em;
    }

    .testimonios__header span {
        font-size: 1em;
    }

    .cntg-abuelo-card {
        flex-direction: row; /* Las tarjetas se colocan en fila */
        flex-wrap: wrap; /* Permite que las tarjetas salten a la siguiente línea */
        justify-content: center;
        align-items: stretch; /* Asegura que las tarjetas en la misma fila tengan la misma altura */
        padding: 20px;
        gap: 25px; /* Aumenta el espacio entre tarjetas */
    }

    .subcnt-hijo-card {
        width: calc(50% - 25px); /* Dos tarjetas por fila con espacio entre ellas */
        max-width: 420px; /* Un poco más anchas para tablets */
    }

    .header-emp .lg-emp {
        width: 60px;
        height: 60px;
    }

    .header-emp .n-emp h3 {
        font-size: 1.3em;
    }

    .subcnt-nieto-card .header-info-card img {
        width: 120px;
        height: 120px;
    }

    .subcnt-nieto-card .header-info-card h2 {
        font-size: 1.6em;
    }

    .subcnt-nieto-card .opn-card {
        min-height: 150px; /* Aumenta la altura mínima para la descripción */
    }

    .subcnt-nieto-card .opn-card p {
        -webkit-line-clamp: 6; /* Permite más líneas en tablets */
        font-size: 1em;
    }

    .subcnt-hijo-card .cnt-social-card a {
        width: 40px;
        height: 40px;
        font-size: 1.2em;
    }
}

/* Para escritorios y pantallas grandes (mayor o igual a 1024px) */
@media (min-width: 1024px) {
    .testimonios__header h1 {
        font-size: 2.8em;
    }

    .testimonios__header span {
        font-size: 1.1em;
    }

    .cntg-abuelo-card {
        padding: 30px;
        gap: 30px;
    }

    .subcnt-hijo-card {
        width: calc(33.333% - 30px); /* Tres tarjetas por fila con espacio */
        max-width: 400px; /* Ajusta el ancho máximo para más tarjetas */
    }

    .header-emp .lg-emp {
        width: 70px;
        height: 70px;
    }

    .header-emp .n-emp h3 {
        font-size: 1.4em;
    }

    .subcnt-nieto-card .header-info-card img {
        width: 140px;
        height: 140px;
    }

    .subcnt-nieto-card .header-info-card h2 {
        font-size: 1.8em;
    }

    .subcnt-nieto-card .opn-card {
        min-height: 180px; /* Aumenta la altura mínima para más contenido */
    }

    .subcnt-nieto-card .opn-card p {
        -webkit-line-clamp: 7; /* Permite más líneas en escritorios */
        font-size: 1.05em;
    }

    .subcnt-hijo-card .cnt-social-card a {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
    }
}