@charset "UTF-8";

/* ==========================================================================
   INSTITUCIONAL
   Lo que respalda a la empresa mas alla del catalogo: los fundadores, la
   oficina, las opiniones de clientes, la certificacion de Google y el
   historial de eventos, prensa y medios.

   Enfoque mobile first, igual que el resto del sitio: lo que esta fuera de
   una consulta de medios es la version de celular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OPINIONES DE CLIENTES
   La frase manda: va primero y en cuerpo grande. Quien la dijo va debajo,
   con la foto al costado, porque sin la frase el nombre no dice nada.
   -------------------------------------------------------------------------- */

.opiniones {
    display: grid;
    gap: 1.25rem;
}

.opiniones__item {
    display: flex;
}

.opiniones__figura {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    margin: 0;
    padding: 1.75rem 1.5rem 1.5rem;
    background-color: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}

.opiniones__texto {
    flex-grow: 1;
    margin: 0;
    color: var(--tinta-700);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* Las comillas del sitio anterior eran dos imagenes. Con una comilla
   tipografica se logra lo mismo sin pedir dos archivos mas. */
.opiniones__texto p::before {
    content: "\201C";
    margin-right: 0.1em;
    color: var(--azul-400);
    font-family: var(--titulos);
    font-size: 1.6em;
    line-height: 0;
    vertical-align: -0.28em;
}

.opiniones__texto p::after {
    content: "\201D";
    margin-left: 0.05em;
    color: var(--azul-400);
    font-family: var(--titulos);
    font-size: 1.6em;
    line-height: 0;
    vertical-align: -0.28em;
}

.opiniones__firma {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linea);
}

.opiniones__retrato {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 50%;
}

.opiniones__datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opiniones__cliente {
    color: var(--tinta-900);
    font-family: var(--titulos);
    font-size: 0.95rem;
    font-weight: 700;
}

.opiniones__rubro {
    color: var(--tinta-400);
    font-size: 0.82rem;
}

@media (min-width: 48em) {
    .opiniones {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 68em) {
    .opiniones {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   FUNDADORES
   -------------------------------------------------------------------------- */

.fundadores {
    display: grid;
    gap: 1.25rem;
    max-width: 34rem;
    margin-inline: auto;
}

.fundadores__item {
    padding: 1.5rem;
    background-color: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    text-align: center;
}

.fundadores__retrato {
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 1rem;
    object-fit: cover;
    border-radius: 50%;
}

.fundadores__nombre {
    margin: 0 0 0.2rem;
    color: var(--tinta-900);
    font-family: var(--titulos);
    font-size: 1.1rem;
    font-weight: 700;
}

.fundadores__puesto {
    margin: 0;
    color: var(--tinta-400);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fundadores__enlace {
    display: inline-block;
    margin-top: 0.85rem;
    color: var(--azul-600);
    font-size: 0.88rem;
    font-weight: 600;
}

@media (min-width: 40em) {
    .fundadores {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   GALERIA DE LA OFICINA
   Relacion de aspecto fija para que la grilla no se desarme mientras las
   fotos todavia no cargaron.
   -------------------------------------------------------------------------- */

.galeria {
    display: grid;
    gap: 0.85rem;
}

.galeria__item {
    overflow: hidden;
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}

.galeria__foto {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--transicion);
}

.galeria__item:hover .galeria__foto {
    transform: scale(1.03);
}

@media (min-width: 40em) {
    .galeria {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62em) {
    .galeria {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   CERTIFICACION DE GOOGLE
   -------------------------------------------------------------------------- */

.certificacion {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: 1.75rem 1.5rem;
    background-color: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
}

.certificacion__marca {
    width: 100%;
    max-width: 15rem;
    height: auto;
    margin-inline: auto;
}

.certificacion__texto {
    margin: 0;
    color: var(--tinta-700);
    line-height: 1.65;
    text-align: center;
}

.certificacion__diploma {
    width: 100%;
    max-width: 22rem;
    height: auto;
    margin-inline: auto;
    border: 1px solid var(--linea);
    border-radius: var(--radio-chico);
}

@media (min-width: 52em) {
    .certificacion {
        grid-template-columns: 1fr 1fr;
        padding: 2.25rem 2rem;
    }

    .certificacion__texto {
        text-align: left;
    }

    .certificacion__marca {
        margin-inline: 0;
    }
}

/* --------------------------------------------------------------------------
   PRESENCIA: EVENTOS, PRENSA Y MEDIOS
   -------------------------------------------------------------------------- */

.presencia {
    display: grid;
    gap: 1.25rem;
}

.presencia__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-suave);
    transition: transform var(--transicion), box-shadow var(--transicion);
}

.presencia__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
}

.presencia__foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 65 / 42;
    object-fit: cover;
    background-color: var(--papel);
}

.presencia__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-grow: 1;
    padding: 1.15rem 1.25rem 1.35rem;
}

.presencia__nombre {
    margin: 0;
    color: var(--tinta-900);
    font-family: var(--titulos);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
}

.presencia__texto {
    margin: 0;
    color: var(--tinta-500);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* El enlace envuelve la tarjeta entera: el area de toque en celular tiene
   que ser la tarjeta, no dos palabras del titulo. */
.presencia__video {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: auto;
    padding-top: 0.65rem;
    color: var(--azul-600);
    font-size: 0.86rem;
    font-weight: 600;
}

.presencia__video::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 0.34rem solid transparent;
    border-bottom: 0.34rem solid transparent;
    border-left: 0.55rem solid currentColor;
}

@media (min-width: 44em) {
    .presencia {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 68em) {
    .presencia {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   GRUPOS DE LA PAGINA DE PRESENCIA
   -------------------------------------------------------------------------- */

.grupo-presencia + .grupo-presencia {
    margin-top: 3rem;
}

.grupo-presencia__titulo {
    margin: 0 0 0.35rem;
    color: var(--tinta-900);
    font-family: var(--titulos);
    font-size: 1.35rem;
    font-weight: 700;
}

.grupo-presencia__bajada {
    margin: 0 0 1.5rem;
    color: var(--tinta-500);
    line-height: 1.6;
}