/*
	CSS personalizado para 03 ENTORNO
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Beige Oscuro: C3B398 rgb(195,179,152) */
/*            Gris: 999999 rgb(153,153,153) */
/*     Beige Medio: DFD8CB rgb(223,216,203) */
/*     Beige Claro: EEE9E4 rgb(238,233,228) */
/* Beige Muy Claro: F7F5F2 rgb(247,245,242) */

/*   Marron Oscuro: 8E6E53 rgb(142,110, 83) */
/*    Marron Medio: C5B09C rgb(197,176,156) */
/*    Marron Claro: E9DACB rgb(233,218,203) */
/*Marron Muy Claro: F9F1E8 rgb(249,241,232) */

/*     Azul Oscuro: 6689A1 rgb(102,137,161) */
/*      Azul Medio: 9BB2C2 rgb(155,178,194) */
/*      Azul Claro: CDD9E0 rgb(205,217,224) */
/*  Azul Muy Claro: E6ECF0 rgb(230,236,240) */

/************************************ MODIFICADOS DE syle-home ***********************************/

/******************************************* #rowIntro *******************************************/

#rowIntro .divIntro p               { margin: 20px 0px; font-size: 18px; text-align: justify; line-height: 160%; }
#rowIntro .divIntro p:first-of-type { margin-top: 0px; }
#rowIntro .divIntro p:last-of-type  { margin-bottom: 0px; }

@media (max-width: 1180px) { #rowIntro .divIntro   { padding: 0px 20px; } }
@media (max-width:  980px) { #rowIntro .divIntro p { font-size: 16px; } }
@media (max-width:  580px) { #rowIntro .divIntro p { margin: 15px 0px; font-size: 14px; line-height: 140%; } }
@media (max-width:  380px) { #rowIntro .divIntro   { padding: 0px 10px; } #rowIntro .divIntro p { margin: 10px 0px; } }
@media (max-width:  340px) { #rowIntro .divIntro p { text-align: left; } }

/****************************************** #rowEntorno ******************************************/

#rowEntorno .divEntorno   { margin: 50px 0px; }
#rowEntorno .divEntorno * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }

#rowEntorno .divGrid       { margin: auto; max-width: 1140px; } /*3 columnas de 380*/
#rowEntorno .divGrid:after { content: ''; display: block; clear: both; }

#rowEntorno .divGridItem                     { padding: 30px; width: 33.33%; height: 450px; float: left; } /* height: 340 foto + 50 title + 60 padding */
#rowEntorno .divGridItem .divFoto            { width: 100%; height: 340px; line-height: 0px; }
#rowEntorno .divGridItem .divFoto            { background-repeat: no-repeat; background-position: center center; background-size: cover; }
#rowEntorno .divGridItem .divTitulo          { width: 100%; height: 50px; background: #C3B398; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#rowEntorno .divGridItem .divTitulo h1       { font-size: 24px; font-weight: 600; color: #FFFFFF; text-align: center;  }
#rowEntorno .divGridItem .divTitulo i        { margin-left: 5px; font-size: 24px; color: #FFFFFF;  }
#rowEntorno .divGridItem .divTitulo:hover h1 { color: var(--color-mar1-hex); }
#rowEntorno .divGridItem .divTitulo:hover i  { color: var(--color-mar1-hex); }
#rowEntorno .divGridItem .divTexto           { padding: 0px 20px; width: 100%; height: 0px; background: #C3B398; overflow: hidden; /*display: none;*/ }
#rowEntorno .divGridItem .divTexto  p        { margin: 15px 0px; font-size: 16px; line-height: 120%; }

@media (max-width: 1180px) {
	#rowEntorno .divEntorno                { padding: 0px 30px; }
	#rowEntorno .divGridItem               { padding: 20px; height: 390px; } /* height: 300 foto + 50 title + 40 padding */
	#rowEntorno .divGridItem .divFoto      { height: 300px; }
	#rowEntorno .divGridItem .divTitulo h1 { font-size: 20px; }
}

@media (max-width: 980px) {
	#rowEntorno .divEntorno                { margin: 40px 0px; padding: 0px 20px; }
	#rowEntorno .divGridItem               { padding: 15px; height: 300px; } /* height: 230 foto + 40 title + 30 padding */
	#rowEntorno .divGridItem .divFoto      { height: 230px; }
	#rowEntorno .divGridItem .divTitulo    { height: 40px; }
	#rowEntorno .divGridItem .divTitulo h1 { font-size: 18px; letter-spacing: -0.5px; }
}

@media (max-width: 780px) {
	#rowEntorno .divEntorno           { margin: 30px 0px; padding: 0px 20px; }
	#rowEntorno .divGridItem          { padding: 10px; width: 50%; height: 260px; } /* height: 200 foto + 40 title + 20 padding */
	#rowEntorno .divGridItem .divFoto { height: 200px; }
}

@media (max-width: 580px) {
	#rowEntorno .divGridItem          { width: 100%; height: 220px; } /* height: 160 foto + 40 title + 20 padding */
	#rowEntorno .divGridItem .divFoto { height: 160px; }
}