/*
 Theme Name:   Sub PujolV3
 Description:  Tema hijo para Pujol (Migración desde WPCode)
 Author:       Tu Nombre
 Template:     PujolV3
 Version:      1.0.0
*/

/* Estilos básicos para la cuadrícula de equipo */

.slick-slider .slick-list{
	width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
}


.slider-drag-galeria-foodMade.slick-slider .slick-list{
	    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.slider-drag-galeria-foodMade.slick-slider{
	padding: 0;
}

.slider-drag-galeria-foodMade.slick-slider .slick-next.slick-arrow,
.slider-drag-galeria-foodMade.slick-slider  .slick-prev.slick-arrow{
	display:none!important;
}

.slider-drag-galeria-foodMade.slick-slider .slick-list .pujol_galeria-title-wrap img{
	    width: 100%;
    height: auto;
}

.slick-slide{
	margin:.5rem;
	border-radius:20px;
	overflow:hidden;
	position:relative;
}

.slick-dots{
	display: inline-block;
    padding-inline-start: 0;
    list-style-type: none;
    width: 100%;
	text-align: center;
	    margin-block-start: 0;
	    min-width: 100%;
}

.slick-dots li{
	display: inline-block;
}



.slick-dots li button{
	background-color: transparent;
    border: 1px solid transparent;
    color: transparent;
    text-align: center;
	position:relative;
	 width: 25px;
font-size:0;
	
}

.slick-dots li button:after{
	    content: '*';
    position: absolute;
    width: 25px;
    text-align: center;
    color: var( --wp--preset--color--contrast-3);
	    right: 0;
	font-size:18px;
}

.pujol_post-experience {
	padding: 0 1rem;
	position:relative;
}


.slick-dots li.slick-active button:after{
	color:var( --wp--preset--color--contrast) 
}

.pujol_post-experience .pujol_post-info{
	position: absolute;
    bottom: 2rem;
    right: 0;
    left: 2rem;
    text-transform: uppercase;
    font-size: 2.5rem;
    word-break: auto-phrase;
    line-height: 2.5rem;
	max-width:250px;
    font-family: var(--wp--preset--font-family--akkurat-pro);
}

.pujol_post-experience .pujol_post-info a {
	text-decoration: none !important;
}

.pujol_post-experience .pujol_post-img{
	width: 400px;
}

@media (max-width: 900px){
	.pujol_post-experience .pujol_post-img{
		width: 350px;
	}
}

.pujol_post-experience .pujol_post-img img{
	    width: 100%;
    height: auto;
	border-radius: 20px;
    overflow: hidden;
}

.posRelateve{
	position:relative;
}
.slick-next.slick-arrow,
.post-navigation-link-next.pujol-arrow.pujol-next a{
	display: inline-block;
    position: absolute;
	right:1rem;
    background-image: url(https://pujol.com.mx/wp-content/uploads/2026/01/arrow-left.png);
    content: '';
    background-color: transparent;
    font-size: 0;
    width: 80px;
    height: 25px;
    border: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
	margin:0;
	
}

.slick-prev.slick-arrow, 
.post-navigation-link-previous.pujol-arrow.pujol-prev a{
	display: inline-block;
    position: absolute;
	left:1rem;
	
    background-image: url(https://pujol.com.mx/wp-content/uploads/2026/01/arrow-right.png);
    content: '';
    background-color: transparent;
    font-size: 0;
    width: 80px;
    height: 25px;
    border: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
	margin:0;

}

.slick-next.slick-arrow, .slick-prev.slick-arrow, .pujol-arrow.pujol-next{
		transition: opacity .4s;
    -webkit-transition: opacity .4s; /* Safari */
	opacity:1;
	
	top:-2rem;
}

.slick-next.slick-arrow:hover, .slick-prev.slick-arrow:hover{
	opacity:.6;
}

.pujol_post-equipa {
	padding: 0 1rem;
	position:relative;

	text-align:center;
}

.pujol_post-equipa .pujol_post-info{
    bottom: 2rem;
    right: 0;
    left: 2rem;    
    word-break: auto-phrase;  
	max-width:250px;   
	margin: auto;
}

.pujol_post-equipa .pujol_post-info p{
	margin-block-start: 0;
	font-family: var(--wp--preset--font-family--itc-legacy-serif-std);
	 color:var(--wp--preset--color--accent)!important;  
	text-transform: capitalize;
	margin-block-end: .5rem;
}

.pujol_post-equipa .pujol_post-info .pujol_post-title{
	font-size: 1.9rem;
	 line-height: 1.9rem;
	text-transform: uppercase;
	letter-spacing:2px;
	margin-block-end: 0;
		color: var(    --wp--preset--color--contrast)!important;
	font-family: var(--wp--preset--font-family--akkurat-pro);
}


.pujol_post-equipa .pujol_post-info a, .pujol_post-equipa .pujol_post-info a > *{

	text-decoration: none !important;
	text-align:center!important;
}

.pujol_post-equipa figure{
	    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 20px;
	    margin: auto;
}

.pujol_post-equipa  figure img{
	width:100%;
	height:auto;
}

.pujol_post-equipa  figure a br{
	display:none;
}


.slick-slide{
	margin:.5rem;
	border-radius:20px;
	overflow:hidden;
	position:relative;
}

.slider-drag-galeria .slick-slide .pujol_post-info{
	    color: #e8e6de;
	position:absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 2rem);
    background-color: #0303035c;
    padding: .5rem 1rem;
}

.slider-drag-galeria .slick-slide img {
    display: block;
    width: 100%;
    height: auto;
}


.slider-drag-galeria-lugares .slick-slide img {
  height: 480px; /* Or whatever fixed height you desire */
  width: 100%; /* Make the image take up 100% of its container's width */
  object-fit: cover; /* This is crucial for maintaining aspect ratio and filling the space */
  /* Other optional styles: */
  display: block; /* Removes extra space below images */
  /* max-width: none; *//* If images are larger than their containers */
	    max-width: 90vw;
}

/* Optional: If you have a specific container for the image inside the slide */
.slider-drag-galeria-lugares .slick-slide .pujol_galeria-title-wrap { /* Target the direct child of slick-slide if it wraps the image */
      height: 480px;
    width: 100%;/* Ensure the container also has the same fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Hide any overflow if object-fit: contain is used */
}



.pujol_galeria-actions{
	    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0000002e;
    text-align: right;
    padding: .3rem 1rem;
}
.pujol_galeria-actions .download-button{
	     color: var(--wp--preset--color--base);
    font-size: .8rem;
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--akkurat-pro);
	    text-decoration: none;
}

.slider-drag-galeria .pujol_galeria-title-wrap, 
.slider-drag-galeria .pujol_galeria a, .slider-drag-galeriaSustentabilidad
{
	z-index:2;
}

.slider-drag-galeria .slick-slide, .slider-drag-galeriaSustentabilidad{

    width: auto;
}

.slider-drag-galeriaSustentabilidad .slick-slide img{
	display: block;
        width: 100%;
    height: auto;
	
}

.slider-drag-galeria .slick-slide, .slider-drag-galeriaSustentabilidad .slick-slide {
	position:relative;
}
.slider-drag-galeria .slick-slide  figcaption, .slider-drag-galeriaSustentabilidad  .slick-slide  figcaption{
	position:absolute;
	z-index:3;
	bottom:0;
	left: 0;
	background-color:#03030326;
	    font-size: .7rem;
    font-family: var(--wp--preset--font-family--akkurat-pro);
	    text-transform: uppercase;
	margin:0;
	padding: .5rem 2rem;
	width:100%;
	
	
}


.slider-drag-galeria .slick-next.slick-arrow, .slider-drag-galeria .slick-prev.slick-arrow,
.slider-drag-galeriaSustentabilidad .slick-next.slick-arrow, .slider-drag-galeria .slick-prev.slick-arrow{
	transition: opacity .4s;
    -webkit-transition: opacity .4s; /* Safari */
	opacity:1;
	top: -1.5rem;
}

.pujol-equipo-gal{

    width: 100%;
	padding-bottom: 0 !important;
    padding-top: 0 !important;
	height:600px;
}



.pujol-equipo-gal.slick-slider .slick-list {
    width: auto;
    max-width: none;
    min-width: unset;
}


.pujol-equipo-gal .slick-slide{
	display: flex !important;
    width: auto !important;
    height: 600px;
    flex-flow: row; 
	margin-top:3rem;
}

.pujol-compromisos-wrap{
    display: flex;
	flex-flow:wrap;
	    flex-wrap: wrap;
    margin: 0;
    max-width: 100%;
    align-content:center;
	justify-content:center;
	background-color: transparent;	
    margin-top: 3rem!important;
	gap: 1rem;
  gap: 1rem 1rem; /* row-gap column gap */
  row-gap: 1rem;
  column-gap: 1rem;
	padding:0 1rem 0  1rem!important;
	   
}

.pujol-sostentabilidad-title{
	zoom: 80%;
    position: fixed;
    width: 100%;
    text-align: center;
    right: 0;
    left: 0;
	z-index:0;
}

.pujol-sostentabilidad-imagen{
	margin-top:5rem;
	z-index:11
}

.pujol-compromisos-wrap .pujol_compromiso{
	width:calc(33.33% - 1rem);

    height: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	background-color: #dededb;
    border-radius: 20px;
    margin-block-start: 0;
	
	 margin-right: 0!important;
	    margin-left: 0!important;

}

@media (max-width: 1149px){
	.pujol-compromisos-wrap .pujol_compromiso{
		width:calc(50% - 1rem);
    
	}
}

@media (max-width: 700px){
	.pujol-compromisos-wrap .pujol_compromiso{
		width:calc(100% - 1rem);
    
	}
}


.pujol-compromisos-wrap .pujol_compromiso .pujol_compromiso-wrap:before{
	content:'*';
	text-align:center;
	color:#A2A1A0;
	
}

.pujol-compromisos-wrap .pujol_compromiso .pujol_compromiso-wrap{
	max-width:250px;
	font-size:.9rem;
	margin-block-start: 0!important;
}

.pujol-compromisos-wrap .pujol_compromiso .pujol_compromiso-wrap p{
	margin:0!important;
	    margin-block-start: 0;
}




@media (max-width: 900px){
	.pujol-equipo-gal .slick-slide{
		display: flex !important;
		width: auto !important;
		height: auto;
		flex-flow: row;
		        max-width: 300px;
	}
	
	.pujol-equipo-gal {

		height: auto;
	}
	
	.slider-drag-galeria .slick-slide img {
    display: block;
    height: auto;
    width: 100%;
}
}

.pujol-equipo-gal .slick-slide img{
	    display: flex;
	width: auto !important;
    
}


.pujol_post-menu-wrap{
	min-height:530px!important;
	display:flex!important;
	flex-flow:row;
	justify-content:center;
	align-items:center;
		    background-color: #f5f2e7;
    padding: 2rem;
	border-radius:20px;
}

.pujol_post-menu .pujol_menu-info {
width:80vw!important;

}

.pujol_post-menu .pujol_menu-info .pujol_menu-title{
	    color: var(--wp--preset--color--contrast);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 400;
    line-height: 1.2;
    font-size: 1.5rem;
    text-transform: uppercase;
    text-align: center;
}