/*
Threme Name: Lucrecia
Description: Catálogo de productos y suscripciones
Threme URI: https://buen-dia.com.mx
Author: Buen-Día
Version: 5.5



/* Inicia Home */


 .topbar-text {
    text-align: center;
  }

  .marquee-inner {
    display: inline;
  }

  .marquee-inner::after {
    content: ""; /* no duplicar */
  }

body#inicio footer,
body#cafe-verde footer,
body#clientes-b2b footer {z-index: 5;}

/* Secciones  */

section#portada {
	width: calc(100% - 0px);
	padding: 0;
	/* border: 20px solid var(--color-claro); */
	top: 0;
	margin: 0;
	min-height: calc(100vh - 6rem);
	overflow: hidden;
	background-color: var(--color-contraste);
	color: var(--color-secundario);
	position: sticky;
	overflow: hidden;
	z-index: 1;
	
}



section#portada .contenedor { position: relative; z-index: 10; align-self: stretch; min-height: calc(100vh - 10rem); justify-content: end; gap: 4rem}
section#portada figure.imagenfondo {background-size: cover; background-position: center; opacity: 1; }
section#portada.image figure.imagenfondo {background-position: 0; background-size: cover}

section#portada.image .scroll {width: calc(100% - 4rem); padding: 2rem;}
section#portada.image .scroll a {color: #f0f0f0}
		
	section#portada h1.display {color: var(--color-principal); font-size: 10rem; mix-blend-mode: screen; text-transform: none; font-weight: 300 !important; }
			section#portada .titulo h1.display:nth-child(1){z-index: 1}
			section#portada .titulo h1.display:nth-child(2){z-index: 3}

					
        			
	section#portada h4 {color: var(--texto-portada)}



section#banners {min-height: 60vh; color: var(--color-contraste) }

section.slider .fotograma {margin: 0; height: 100%; align-self: stretch;
	position: relative;
	min-height: 60vh; background-size: contain;
}

section.slider .texto {flex: 0 1 50%}
section.slider .imagen {flex: 0 1 50%}

section#banners .slide {background-color: transparent}

.slide.business span.boton a {border-color: var(--verde); color: var(--verde)}


#variedad-gesha span.boton a {background-color: var(--color-contraste); color: var(--color-principal); border-color: var(--color-contraste)}
#variedad-gesha span.boton:hover a {background-color: var(--color-principal); color: var(--color-contraste); border-color: var(--color-principal)}

#variedad-colombia span.boton a {background-color: var(--azul-bg); color: var(--azul); border-color: var(--azul-bg)}
#variedad-colombia span.boton:hover a {background-color: var(--azul); color: var(--azul-bg); border-color: var(--azul)}


#variedad-castillo span.boton a {background-color: var(--color-secundario); color: var(--color-contraste); border-color: var(--color-secundario)}
#variedad-castillo span.boton:hover a {background-color: var(--color-contraste); color: var(--color-secundario); border-color: var(--color-contraste)}

section.slider .contenedor {padding: 2rem; gap: 0 !important; width: calc(100% - 4rem); align-items: center; position: relative; min-height: 60vh;}
section.slider .slick-list{ padding: 0 !important; }
section.slider .caja {width: min(100%, 1280px); z-index: 10; padding: 0; }
section.slider .caja h2.display {font-size: 3rem; }
section.slider .caja h6 { line-height: 1.5; letter-spacing: 2px; text-transform: none;}
section.slider .caja p {font-size: 1rem;}

section .slick-prev,
section .slick-next {
    background-color: var(--color-secundario) !important;
    color: var(--color-contraste) !important;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
}

section .slick-prev::before,
section .slick-next::before{
    font-size: 1rem;
    color: var(--color-contraste);
    padding: 0 .5rem;
}


section#hero {
	z-index: 2;
	background-color: var(--color-principal);
	min-height: calc(100vh - 2rem);
	color: var(--color-contraste);
	overflow: hidden;
}

section#hero .contenedor {color: var(--blanco); align-items: start; align-self: stretch; justify-content: center;}
section#hero figure.fotograma {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	min-height: 100%;
	z-index: 0;
}

section#hero .columna { width: 40%;
	bottom: 2rem;
}

section#hero .encabezado {	
	position: relative;
	color: var(--color-contraste);
	z-index: 3;
}

section#hero .encabezado h2.display {font-size: 5rem}


section#hero ul.grid {position: relative; z-index: 2; width: 80%; gap: 2rem;}



section.image {z-index: 3; min-height: calc(100vh - 108px); top: 108px}
section.image .contenedor {z-index: 10; width: min(calc(100% - 8rem), 1280px); padding: 0 4rem; flex-direction: row; gap: 0}

section.image .encabezado p {text-transform: none; font-size: 1rem; font-weight: 400;}
section.image .columna {flex: 0 1 40%; position: relative; bottom: 3rem; gap: 2rem}
 section.image figure.imagenfondo {background-size: 30%; background-position: 75% 50%; opacity: .5; background-attachment: fixed;}

section.image .item {flex: 0 1 60%}

section.image:nth-child(even) figure.imagenfondo {order: 1; background-position: 25% 50%;}
/* section.image:nth-child(odd) .contenedor {align-items: end;} */
section.image:nth-child(even) .columna {order: 2}

section.image .encabezado {text-align: left;}
section.image figure.imagen {height: calc(100vh - 8rem); background-size: contain;}

section.link,
section.quote {top: 108px}

section#colombia.image span.boton a{background-color: var(--azul) !important; color:var(--azul-bg) !important;}
section#colombia.image span.boton:hover a{background-color: var(--azul-bg) !important; color:var(--azul) !important;}


section#castillo.image span.boton a{background-color: var(--color-secundario) !important; color:var(--color-contraste) !important;}
section#castillo.image span.boton:hover a{background-color: var(--color-principal) !important; color:var(--color-contraste) !important;}


section#gesha.image span.boton a{background-color: var(--verde) !important; color:var(--verde-bg) !important;}
section#gesha.image span.boton:hover a{background-color: var(--verde-bg) !important; color:var(--verde) !important;}


section.image h3.display {color: var(--blanco); text-align: center; line-height: 1.5; font-weight: 700;}
section.image h5 {color: var(--blanco); text-transform: uppercase;}

section .slide {width: calc(100% / 3)}

section.link {z-index: 3; min-height: calc(100vh - 20rem)}

section#banners {z-index: 8; position: sticky}

section.pagina.std h2,
section.pagina.std strong,
section.pagina.std h2 b {font-size: 1.5rem; margin-top: 1.5rem; color: var(--color-contraste)}
section.pagina.std h2 p {color: var(--texto-simple)}


section.galeria,
section.post {min-height: calc(100vh - 0)}

section.aside {min-height: 80vh;}


section#blog.link {justify-content: center; align-items: center; align-content:center; min-height: 30vh}
section#blog.link .contenedor {width: 100%; padding: 0 0; gap: 0}
section#blog.link .columna.dos {flex: auto;}
section#blog.link .contenedor .texto {width: calc(30% - 16rem); padding: 4rem 8rem;}



section#blog.link .slide,
section#blog.link .slide figure.imagen {min-height: 50vh;}

section#blog.link .slide figure.imagen .caja {
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 4rem);
	height: calc(100% - 4rem);
	padding: 2rem;
	background-color: transparent;
	color: var(--color-secundario);
	z-index: 10;
	font-size: 1.5rem;
	font-weight: 700;
}

section#blog.link .slide figure.imagen .caja h3.display {max-width: 60%; font-size: 2.5rem}

section#cafe-verde {z-index:8; background-color: var(--verde); color: var(--verde); min-height: 60vh;}
section#cafe-verde.quote .contenedor {width: min(calc(100% - 8rem), 60vw); gap: 1rem; z-index: 3;
padding: 6rem 4rem;
    color: var(--blanco);
}
section#cafe-verde.quote .contenedor .display {text-transform: uppercase}

section#cafe-verde.quote .contenedor .flex.gm h3.display {
	max-width: 410px;
    text-align: center;
	margin-bottom: 2rem
}

section#cafe-verde.quote p {text-align: center; font-family: var(--display-font)}
section#cafe-verde.quote figure.texturafondo {background-size: 75vw 85vh; background-position:-93% 60%}
section#cafe-verde span.boton a {background-color: var(--verde-bg);border-color: var(--verde-bg);color: var(--blanco);}



/* Página About */
section#portada.pagina h1.display {font-size: 6rem; color: #fff}
section#portada.pagina .columna {text-align: center}
section#portada.pagina {min-height: 75vh; align-content: center; position: relative; }
section#portada.pagina .contenedor{justify-content: center; align-content: center; align-items: center; min-height: 70vh; width: min(calc(100% - 8rem), 50vw); gap: 2rem}

section#about.pagina {
	min-height: auto;
	z-index: 3;
	background-color: var(--color-claro);
	color: #222;
	transition: background-color 0.2s linear;
	top: 0;
	justify-content: start;
	position: relative;
}


section#about.pagina .contenedor {
	padding: 6rem 4rem;
	align-items: center;
	gap: 8rem;
}



section#about.pagina figure.texturafondo {
	background-repeat: no-repeat;
    background-size: 40%;
    background-position: 77%;
}

section#about.pagina .display {
	color: var(--color-contraste);
}

section#about.pagina p {text-align: justify; text-align-last: left;}
section#about.pagina .columna.form {
	padding: 2rem;
	width: calc(100% - 4rem);
	background-color: #fff;
	border-radius: 1rem;
}

section#about.pagina input,
section#about.pagina textarea {border-color: #bbb;}
section#about.pagina input::placeholder {color: #333}

section#about input[type="submit" i] {
	background-color: var(--color-contraste);
	color: var(--color-secundario);
	border-radius: .5rem
}

section#about input[type="submit" i]:hover{
	background-color: var(--color-principal);
}


section.break {min-height: auto; position: relative; top: 0;}
#clientes-b2b section.break {
	background-color: var(--color-principal);
	color: var(--color-contraste);
}
section.break .contenedor {gap: 4rem; justify-content: start;}
section.break ul.grid.servicios {
	grid-template-columns: repeat(10, 2fr);
	gap: 0;
}

ul.grid.servicios li {grid-column: span 2}

ul.grid.servicios li figure.imagen {position: relative; height: min(40vh, 480px)}
ul.grid.servicios li figure .caja {z-index: 2; position: relative; padding: 2rem; width: calc(100% - 4rem); height: calc(100% - 4rem); top: 0; left: 0; 
	color:var(--color-secundario); justify-content: end;}

.btn-pill {
	padding: 1rem 2rem;
	border-radius: .5rem;
	border: 1px solid #eee;
	background: white;
	color: var(--color-contraste);
	cursor: pointer;
	letter-spacing: 1px;
	text-transform: none;
	font-family: var(--display-font);
	transition: background-color 0.3s ease, color 0.3s ease;
	
}



#quienes-somos section#portada.pagina {background-color:var(--color-contraste) }
#quienes-somos section#portada.pagina .deg.rad {opacity: 1}
#quienes-somos section#portada.pagina .titulo {width:40%;}
#quienes-somos section#portada.pagina h1.display {color: var(--color-secundario)}
#quienes-somos section.pagina.seccion {z-index: 9; background-color: var(--color-claro); position: relative; top: 0}
section.pagina.seccion .contenedor {gap: 0 !important; padding: 0 !important; width: 100% !important; align-items: center}
section.pagina.seccion article {flex: auto; width: calc(50% - 8rem); padding: 6rem 4rem; display: flex; flex-direction: column; gap: 2rem; align-items: start; justify-content: center; align-content: center;}
section.pagina.seccion article h3.display {color: var(--color-contraste); font-size: 2.5rem}
section.pagina.seccion article p {font-size: 1.25rem; text-align: justify; text-align-last: left}
section.pagina.seccion article p b, 
section.pagina.seccion article p strong {color: var(--color-contraste); font-weight: 700}
section.pagina.seccion aside.imagen {flex: auto !important; width: 50%; align-self: stretch !important; height: 100%;}
section.pagina.seccion aside figure.fotograma {width: calc(100% - 8rem); margin: 6rem 4rem;}

section.pagina.seccion:nth-child(odd) article {order: 2}
section.pagina.seccion:nth-child(even) article {order: 1}

section.pagina.seccion:nth-child(2) {background-color: var(--color-secundario) !important; color: var(--color-contraste) !important}
section.pagina.seccion:nth-child(2) article h3.display {}
section.pagina.seccion:nth-child(2) figure.fotograma {background-attachment: fixed; background-size: 50vw; background-position: 100%;}

section.pagina.seccion:nth-child(3) figure.fotograma {min-height: 100vh; margin: 0; width: 100%;}

section.pagina.seccion:nth-child(4) {min-height: 40vh; background-color: var(--color-principal) !important; color: var(--color-contraste) !important}
section.pagina.seccion:nth-child(4) article {padding: 4rem !important}
section.pagina.seccion:nth-child(4) figure.fotograma {width: 100% !important; margin: 0 !important; min-height: 80vh}

section.pagina.seccion:nth-child(odd) aside {order: 1}
section.pagina.seccion:nth-child(even) aside {order: 2}


section.banner.pagina .contenedor {align-items: center;}
section.banner.pagina .contenedor span.boton {width: auto}


h6.disclaimer {font-size: 12px; text-transform: none;}

section#related {background-color: var(--color-claro); min-height: 80vh;}

section#newsletter {background-color: var(--bg-newsletter); color: var(--bg-newsletter-texto)}
form#newsletter_form input {border-color: var(--bg-newsletter-texto); color: var(--bg-newsletter-texto)}
form#newsletter_form input::placeholder {color: var(--bg-newsletter-texto)}

section#newsletter.alt {width: 30%;}
section#newsletter .formulario{max-width: 50vw;}
section#newsletter form {display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem;}
section#newsletter form input[type="submit" i]{margin: 0}

section#newsletter input#correocontacto {flex: 1 1 70%}
form#newsletter_form input.half {max-width: calc(50% - 8px) !important; }
form#newsletter_form input.full {flex: 0 1 100%}


section span.piedefoto{padding: 1rem; color: var(--blanco); }


/* Página Blog */

section#blog {background-color: var(--color-claro); min-height: calc(100vh - 4rem); align-content: center}
section#blog .contenedor {flex: 1; align-self: stretch;}
section#blog figure.texturafondo {opacity: .7; background-size: 45%}
section#blog .contenedor .encabezado {}
section#blog .contenedor ul.grid {align-self: stretch; align-items: stretch;}
section#blog ul.grid li {display: grid; grid-template-columns: repeat(6,1fr); gap: 0;
	background-color:  var(--color-secundario); color: var(--color-contraste);
}

section#blog ul.grid li a.thumbnail {position: relative; grid-column: span 4; height: 100%; align-self: stretch; overflow: hidden;}
section#blog ul.grid li a.thumbnail figure {min-height: 45vh;
	transform: scale(1);
-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}
section#blog ul.grid li .caja {padding: 4rem; width: calc(100% - 8rem); align-self: stretch;
	grid-column: span 2;
		-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}

section#blog ul.grid li:hover a.thumbnail figure {
	transform: scale(1.05); opacity: .75;
-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}
section#blog ul.grid li:hover {
	background-color: var(--color-principal) !important;
	color: var(--color-contraste) !important;
		-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}


section#blog ul.grid li:hover .caja a {
	color: var(--color-contraste) !important;
}

section#blog ul.grid li .caja h3 {line-height: 1.2}

section#blog ul.grid li .caja a {align-items: start; justify-content: center}
section#blog figure.imagen {height: 100%;}

section#blog ul.grid li:nth-child(odd) a.thumbnail {order: 2}
section#blog ul.grid li:nth-child(odd) .caja {order: 1}
section#blog ul.grid li:nth-child(even) a.thumbnail {order:1}
section#blog ul.grid li:nth-child(even) {background-color: var(--color-contraste); color: var(--color-secundario)}
section#blog ul.grid li:nth-child(even) .caja {order: 2;}
section#blog ul.grid li:nth-child(even) .caja a {color: var(--color-secundario)}

body.post section.blog {background-color: var(--color-alt); color: var(--color-alt2); position: relative;}
section.blog.pagina .contenedor {padding: 4rem;align-content: center;}
section.blog.pagina .contenedor article {width: min(100%, 720px); display: flex; flex-wrap: wrap; flex-direction: column; gap: 1rem; align-items: start; justify-content: start;}
section.blog.pagina .contenedor article p {text-align: justify; text-align-last: left;}
section.blog.pagina figure.fotograma {
	justify-content: flex-end;
	align-content: center;
}
section.blog.pagina figure.fotograma .encabezado {flex: 0 1; width: min(calc(100% - 8rem), 1080px); padding: 2rem 0; color: var(--color-secundario); z-index: 23}
section.blog.pagina figure.fotograma .encabezado h1 {color: var(--color-secundario)}


body#cafe-verde,
body#cafe-verde main,
body#cafe-verde footer{
	background-color: var(--verde-bg);
}

body#cafe-verde .topheader
{background-color: var(--verde-bg)}

body#cafe-verde .espacio.fijo.copyright,
body#cafe-verde footer .columna.cuatro h4 {
	color: var(--color-secundario);
}


:is(body#cafe-verde footer .columna h2, body#clientes-b2b footer .columna h2){
	color: var(--color-secundario)
}
:is(
	body#cafe-verde footer .columna h4,
	) {
	color: var(--blanco)
}
body#quiero-exportar section#portada,
body#cafe-verde section#portada,
body#clientes-b2b section#portada {
	min-height: calc(60vh - 4rem);
	background-color: var(--verde);
}

body#quiero-exportar section#portada .contenedor,
body#cafe-verde section#portada .contenedor,
body#clientes-b2b section#portada .contenedor {
	min-height: calc(70vh - 16rem);
	padding: 4rem;
	width: min(calc(100% - 8rem),1440px);
}
body#cafe-verde section#portada .encabezado,
body#clientes-b2b section#portada .encabezado {
	flex: auto;
	text-align: left;
	z-index: 83;
}

body#cafe-verde section#about.pagina h2.display{color: var(--verde-bg) !important}

body#cafe-verde section#about.pagina {
	background-color: var(--color-claro);
	 color: var(--verde-bg)}

body#cafe-verde section#about form h4,
body#cafe-verde section#about form h3 {color: var(--color-contraste)}

body#cafe-verde section#about.pagina input,
body#cafe-verde section#about.pagina textarea {border-color: var(--verde-bg); color: var(--verde-bg)}

body#cafe-verde section#about input[type="submit" i] {
	background-color: var(--verde-bg);
	color: var(--blanco);
	border-radius: .5rem
}

body#cafe-verde section#about input[type="submit" i]:hover{
	background-color: var(--verde);
	color: var(--verde-bg)
}


/* Página Proyectos */


section#faqs{background-color: var(--azul-bg); color: var(--azul); top: 4rem}
section#faqs.no-sticky {top: 0; position: relative;}
section#faqs.pagina.std h2 {color: var(--azul)}

section#faqs .contenedor {overflow-y: scroll}


ul.lista {width: 100%; border-bottom: 1px solid var(--azul)}
ul.lista li {border-top: 1px solid var(--azul); padding: 1rem 0; margin: 0 !important; color: var(--azul); cursor: pointer;
	-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}
ul.lista li:hover {background-color: var(--color-principal); color: var(--color-contraste); border-color: var(--color-contraste);
padding: 2rem 1rem;
width: calc(100% - 2rem);
	-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}

ul.lista li .pregunta {justify-content: space-between; align-items: center;}
ul.lista li span {
	overflow: hidden;
		max-height: 0;
		opacity: 0;
		padding: 0;
transition:
		max-height .4s ease,
		opacity .25s ease,
		padding .3s ease;
}

ul.lista li span p {
	font-size: 1rem;
}
/* Estado abierto */
ul.lista li.is-open span.respuesta {
	max-height: 600px;
	/* ajusta según contenido */
	opacity: 1;
	padding: 1.5rem 0;
}

/* Animación del ícono */
ul.lista li .pregunta i {
	transition: transform .3s ease;
}

ul.lista li.is-open {background-color: var(--color-principal); color: var(--color-contraste);
padding: 2rem 1rem; width: calc(100% - 2rem)
}

ul.lista li.is-open .pregunta i {
	transform: rotate(180deg);
}


footer .logopie {flex: 1 1 100%; flex-direction: row; justify-content: space-between; color: var(--color-principal)}

footer .columna.dos h4 {color: var(--color-principal)}

footer .logopie .columna.dos {gap: 1rem}
footer .logopie .columna.dos p {margin-bottom: 2rem}
footer .logopie figure {min-height: 90px; background-size: cover; background-position: -50px 50%}

footer .columna {gap: 1rem;}
footer .columna h4.display {letter-spacing: 1px;}
footer .columna p {line-height: 1.5; font-size: 10pt;color: var(--color-claro)}

footer .columna h2 {color: var(--color-claro); font-weight: 700; font-size: 32pt}
footer .columna.correo {align-items: start;}
footer .columna.correo a {font-size: 1rem !important}
footer nav.redes {display: inline-flex; flex-direction: row; gap: 2rem}
footer nav.redes a {color: #fff;}
footer nav.redes i {font-size: 1rem}

footer .correo span.boton i {font-size: 32px}


form.popup-newsletter-form input,
form#form_newsletter input {flex: auto; border-radius: 0;
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
color: var(--texto-simple);
}

form.popup-newsletter-form button,
form#form_newsletter button {flex: auto; padding: 1rem; max-width: 3rem;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}

form.popup-newsletter-form button:hover,
form#form_newsletter button:hover {
	background-color: var(--color-principal);
	color: var(--color-contraste);
}


/* Brand Versión Castillo */
section#castillo {background-color: var(--color-contraste); color: var(--color-secundario)}
section#castillo :is(article) {
	background-color: var(--color-contraste)
}


section#castillo aside #tabulador {background-color: rgb(240,220, 169) !important;}

section#castillo.post.product {background-color: rgb(240,220, 169) !important}

section#castillo form.cart button.single_add_to_cart_button {background-color: var(--color-secundario); color: var(--color-contraste)}

section#castillo :is(article,
	nav.navegacion-producto,
	.variedad,
	.encabezado,
	.desc,
	.ficha) {
	border-color: var(--color-secundario)
}

ul.grid li#castillo .caja,
ul.grid li#castillo a,
section#castillo :is(
	nav.navegacion-producto,
	a,
	form.cart button.bd-attr-btn,
) {
	color: var(--color-secundario)
}

ul.grid li#castillo {
	background-color: var(--color-contraste);
	color: var(--color-secundario);
	border-color: var(--color-contraste)
}

ul.grid li#castillo:hover{
	background-color: var(--color-principal);
	color: var(--color-contraste);
}

section#castillo a.bd-sticker-suscripcion,
ul.grid li#castillo:hover a{
	color: var(--color-contraste) !important;
}


ul.grid li#castillo:hover .titulo,
ul.grid li#castillo:hover .ficha,
li#castillo:hover .ficha .precio,
li#castillo:hover .ficha .gramajes h6,
li#castillo:hover .ficha .gramajes span:nth-child(2) {
	border-color: var(--color-contraste);
	color: var(--color-contraste)
}

section#perfil {
	position: relative;
	margin-bottom: 8rem;
	border-top-width: 1px;
	border-top-style: solid;
	margin-bottom: 0;
	border-bottom-width: 1px;
	border-bottom-style: solid}


section#perfil .contenedor {flex-direction: row; gap: 4rem; align-items: start; padding: 0; width: 100%; gap: 0 !important}

section#perfil .contenedor article {
	width: 60%;
	flex: 0 1 60%;
}

section#perfil .contenedor article .encabezado,
section#perfil .contenedor article .texto {
	padding: 2rem 4rem;
	width: calc(100% - 8rem);
}
section#perfil .contenedor article .texto p {
	text-align: justify;
	text-align-last: left;
}

section#perfil .contenedor article .texto{padding-bottom: 4rem}

section#perfil .contenedor article .encabezado {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}



section#perfil .contenedor aside.galeria {
	padding: 0;
	flex: auto; justify-content: start; align-items: start;
	border-right-width: 1px;
	border-right-style: solid;
	border-left-width: 1px;
	border-left-style: solid;
	padding: 0;
	 width: calc(40% - 2px);
	flex: auto; justify-content: start; align-items: start;
}

section#perfil .contenedor aside.galeria .carrusel {flex: 1;}
section#perfil .contenedor aside.galeria .carrusel .slide {align-self: stretch; flex: 1}
section#perfil .contenedor aside.galeria .carrusel figure.imagen {height: 100vh}

section#perfil.castillo {background-color: var(--color-principal); color: var(--color-contraste);}


body#colombia section#perfil .contenedor aside.galeria {
	border-color: var(--azul)
}

#quienes-somos section#perfil {z-index: 10;}
#quienes-somos section.banner {z-index: 2;}
#quienes-somos section.banner figure.imagenfondo {background-attachment: fixed;}



/* Brand Versión Colombia */
body#colombia,
section#colombia,
section#perfil.colombia,
section#colombia span.boton.alt2 a,
nav.menu ul li#colombia:hover {background-color: var(--azul-bg); color: var(--azul)}
nav.menu ul li#colombia:hover a {color: var(--azul)}

section#colombia aside #tabulador{background-color: var(--azul)}
section#colombia span.boton.alt2 a {border-color: var(--azul)}
section#colombia span.boton.alt2:hover a {background-color: var(--azul); color: var(--azul-bg); border-color: var(--azul)}

section#colombia.image span.boton.alt2:hover a {color: var(--azul) !important}


ul.grid li#colombia,
body#colombia :is(
	#preloader,
	section#colombia article,
	.topheader,
		footer,
){
	background-color: var(--azul-bg);
	color: var(--azul)
}


ul.grid li#colombia:hover,
body#colombia :is(
	span.boton.alt a
) {
	background-color: var(--azul);
	color: var(--azul-bg);
	border-color: var(--azul)
}

section#colombia span.boton.alt2:hover a {color: var(--azul-bg) !important}
section#colombia.post.product {background-color: var(--azul) !important }


ul.grid li#colombia .caja,
ul.grid li#colombia a,
section#colombia :is(
	nav.navegacion-producto,
	a,
	form.cart button.bd-attr-btn,
	form.cart .quantity.bd-qty .bd-qty__btn,
	form.cart .quantity.bd-qty input.qty,
) {
	color: var(--azul);
}

ul.grid li#colombia,
ul.grid li#colombia.producto .titulo,
ul.grid li#colombia .ficha .precio,
ul.grid li#colombia .ficha .gramajes h6,
ul.grid li#colombia .ficha .gramajes span:nth-child(2),
ul.grid li#colombia.producto .ficha,
section#colombia :is(article,
	nav.navegacion-producto,
	.variedad,
	.encabezado,
	.desc,
	form.cart button.bd-attr-btn,
	form.cart .bd-variacion-fila,
	.woocommerce-variation-price,
	.ficha) {
	border-color: var(--azul);
}


ul.grid li#colombia:hover,
ul.grid li#colombia:hover .titulo,
ul.grid li#colombia:hover .ficha,
ul.grid li#colombia:hover .ficha .precio,
ul.grid li#colombia:hover .ficha .gramajes h6,
ul.grid li#colombia:hover .ficha .gramajes span:nth-child(2),
ul.grid li#colombia:hover a,
section#colombia :is(
	#tabulador .fila.origen,
	aside #tabulador,
	aside .tab .linea span:nth-child(1),
	aside .tab .linea:nth-child(1),
	aside h4,
	aside span a,
	aside .tab .linea.indicador span,
	#tabulador .fila.proceso
) {
	border-color: var(--azul-bg);
	color: var(--azul-bg);
}

body#colombia :is(
	footer .columna.dos h4
) {
	color: var(--azul);
}



/* Brand Geisha */
section#perfil.gesha,
body#gesha,
section#gesha,
section#gesha span.boton.alt2 a,
nav.menu ul li#gesha:hover {
	background-color: var(--verde-bg);
	color: var(--verde)
}



section#gesha aside #tabulador {background-color: var(--verde)}

nav.menu ul li#gesha:hover a {
	color: var(--verde)
}


section#gesha span.boton.alt2 a {
	border-color: var(--verde)
}

section#gesha span.boton.alt2:hover a {
	background-color: var(--verde);
	color: var(--verde-bg);
	border-color: var(--verde)
}

ul.grid li#gesha:hover a {color: var(--color-secundario)}

body#gesha :is(
	#preloader,	
	.topheader,
	footer,
	form.cart button.single_add_to_cart_button
) {
	background-color: var(--verde-bg) !important;
	color: var(--color-secundario) !important
}

body#gesha section#gesha.post.product {
	background-color: var(--verde) !important
}

ul.grid li#gesha,
section#gesha article {
	background-color: var(--color-secundario);
	color: var(--verde-bg)
}

ul.grid li#gesha:hover,
body#gesha :is(
	/* section.post.product form.cart button.single_add_to_cart_button, */
	span.boton.alt a) {
	background-color: var(--verde);
	color: var(--verde-bg);
	border-color: var(--verde)
}

#gesha section#perfil .contenedor,
#gesha section#perfil .contenedor aside {
	border-color: var(--verde)
}

ul.grid li#gesha .caja,
ul.grid li#gesha a,
section#gesha :is(
	article a,
	nav.navegacion-producto,
	form.cart button.bd-attr-btn,
	form.cart .quantity.bd-qty .bd-qty__btn,
	form.cart .quantity.bd-qty input.qty,
) {
	color: var(--verde-bg);
}

li#gesha.producto,
li#gesha.producto .titulo,
li#gesha.producto .ficha,
li#gesha .ficha .precio,
li#gesha .ficha .gramajes h6,
li#gesha .ficha .gramajes span:nth-child(2),
section#gesha :is(
	article,
	nav.navegacion-producto,
	.variedad,
	.encabezado,
	.desc,
	form.cart button.bd-attr-btn,
	form.cart .bd-variacion-fila,
	.woocommerce-variation-price,
	.ficha) {
	border-color: var(--verde-bg) !important
}

section#gesha :is(
	form.cart button.bd-attr-btn.is-active
) {
	background-color: var(--color-principal);
}

section#gesha :is(#tabulador .fila.origen,
	aside #tabulador,
	aside .tab .linea span:nth-child(1),
	aside .tab .linea:nth-child(1),
	aside h4,
	aside span a,
	aside .tab .linea.indicador span,
	#tabulador .fila.proceso) {
	border-color: var(--color-secundario);
	color: var(--color-secundario);
}

body#gesha :is(footer .columna.dos h4) {
	color: var(--verde);
}

ul.grid li#gesha:hover,
ul.grid li#gesha:hover .titulo,
li#gesha:hover .ficha .precio,
li#gesha:hover .ficha .gramajes h6,
li#gesha:hover .ficha .gramajes span {
	border-color: var(--verde-bg);
	color: var(--color-secundario)
}




section.post.product form.cart button.single_add_to_cart_button{
    background-color: var(--color-secundario) !important;
    color: var(--color-contraste) !important;
}

#colombia section.post.product form.cart button.single_add_to_cart_button.disabled {
	background-color: var(--azul) !important;
	color: var(--azul-bg) !important;
	border-color: var(--azul-bg) !important;
}

section.post.product form.cart button.single_add_to_cart_button:hover {
    background-color: var(--color-principal) !important;
    color: var(--color-contraste) !important;
}



#colombia .bd-attr-btn__check {border-color: var(--azul) !important}
#colombia .is-active .bd-attr-btn__check {border-color: var(--color-contraste) !important}