/*-----------------------------------------------------------------------------------
	LUCIANE LERSCH — Ajustes de layout para MOBILE
	Este arquivo é carregado DEPOIS do style.css.
	Tudo aqui está dentro de media queries: o layout do desktop (>= 992px) não muda.
-----------------------------------------------------------------------------------*/


/* =============================================================
   1. TABLETS E CELULARES  (até 991px)
   ============================================================= */
@media (max-width: 991.98px){

	/* 1.1 — Elementos com largura maior que a tela (causavam corte
	         e rolagem lateral). Todos passam a caber em 100%. */
	.h3-style,
	.row-style,
	.row-range-style,
	.p-contact-style,
	.h1-coffee-central-style,
	.h1-4-style,
	.h3-19-style,
	.h3-7-style,
	.p-6-style,
	.p-hot-beverages-style,
	.p-range-style,
	.p-2-style,
	.p-3-style,
	.html-widget-style,
	.btn-button-style{
		width: 100% !important;
		max-width: 100%;
	}

	/* 1.2 — Margens fixas em pixels (feitas para telas grandes) */
	.row-style{
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 0;
	}
	.bloc-margin-bottom{
		margin-bottom: 24px;
	}
	.btn-style{
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
		display: block;
		max-width: 340px;
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 17px;
	}
	.btn-margin-left{
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		padding-top: 18px;
		padding-bottom: 18px;
	}
	.btn-xl{
		padding: 15px 24px;
		font-size: 19px;
	}
	.container-div-0-min-height{
		min-height: 0;
	}
	.container-div-min-height{
		min-height: 0;
	}

	/* 1.3 — Espaçamento vertical dos blocos (era 100px em qualquer tela) */
	.bloc-lg{ padding: 56px 20px; }
	.bloc-md{ padding: 40px 20px; }

	/* 1.4 — Parallax: no celular o fundo fixo corta a imagem e "treme"
	         durante a rolagem. Aqui ele vira um fundo normal do bloco. */
	.b-parallax .parallax{
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: auto !important;
		width: 100% !important;
		height: 100% !important;
		background-attachment: scroll !important;
		background-position: center center;
	}

	/* 1.4b — Faixa de título das páginas internas: o texto branco ficava
	          quase invisível sobre a parede clara da foto. Um véu escuro
	          devolve o contraste. */
	#heading .parallax::after{
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background: rgba(45,22,14,0.55);
	}
	#heading .container{
		padding-top: 52px;
		padding-bottom: 52px;
	}
	/* Fundo em tamanho natural virava um recorte aleatório da imagem */
	.b-parallax .parallax.bg-t-edge{
		background-size: cover !important;
		background-position: center center !important;
	}

	/* 1.5 — Ícones/ilustrações SVG: as alturas fixas (245px, 300px, 463px…)
	         faziam o desenho vazar por cima do título. Agora se adaptam. */
	.html-widget-0-style,
	.html-widget-our-coffee-style,
	.html-widget-menu-style,
	.html-widget-coffee-central-style,
	.html-widget-style{
		height: 180px !important;
		width: 100%;
		margin-bottom: 6px;
	}
	.html-widget-range-style{
		height: 90px !important;
		width: 100%;
	}
	.html-widget-0-style svg,
	.html-widget-our-coffee-style svg,
	.html-widget-menu-style svg,
	.html-widget-coffee-central-style svg,
	.html-widget-range-style svg,
	.html-widget-style svg{
		display: block;
		width: 100%;
		height: 100%;
		max-width: 100%;
	}
	.feature-icon > svg{
		max-width: 100%;
	}

	/* 1.6 — Barra de contato do topo */
	#bloc-0 .container{
		padding: 30px 20px;
	}
	#bloc-0 .row > div{
		text-align: center;
	}
	.h3-style{
		line-height: 1.35;
		font-size: 22px;
		margin-bottom: 14px !important;
	}
	.h5-style{
		font-size: 17px;
		margin: 12px 0 0 0 !important;
	}
	#bloc-0 .btn-whatsapp-style{
		max-width: 320px;
		margin: 0 auto;
		font-size: 17px;
	}

	/* 1.7 — Barra de navegação (logo + menu + redes sociais) */
	#bloc-1 .container{
		padding-left: 16px;
		padding-right: 16px;
	}
	#bloc-1 .navbar{
		flex-wrap: wrap;
		align-items: center;
		padding-left: 0;
		padding-right: 0;
	}
	.navbar-brand.link-style{
		font-size: 0;
		line-height: 1;
		margin: 0;
		padding: 0;
		flex: 0 1 auto;
	}
	.navbar-brand img{
		width: auto !important;
		height: auto !important;
		max-width: 64vw;
		max-height: 72px;
	}
	#bloc-1 .navbar-toggler{
		margin-left: auto;
		flex: 0 0 auto;
	}
	#bloc-1 .navbar-collapse{
		width: 100%;
		flex-basis: 100%;
	}
	.site-navigation.navbar-nav{
		width: 100%;
		margin: 8px 0 0 0 !important;
	}
	.site-navigation .nav-link{
		text-align: center;
		padding: 12px 0;
		font-size: 17px;
		letter-spacing: .5px;
	}
	#bloc-1 .navbar-content-area{
		width: 100%;
		flex-basis: 100%;
	}
	#bloc-1 .social-link-bric,
	#footer .social-link-bric{
		text-align: center !important;
		margin-top: 6px;
	}
	#bloc-1 .social-link-bric svg{
		width: 32px;
		height: 32px;
	}

	/* 1.8 — Rodapé: o botão "sanduíche" do rodapé abria o menu do topo.
	         No celular os links do rodapé ficam sempre visíveis. */
	#footer .navbar-toggler{
		display: none !important;
	}
	#footer .navbar-collapse{
		display: block !important;
		height: auto !important;
		width: 100%;
		visibility: visible !important;
	}
	#footer .site-navigation{
		flex-direction: column;
		align-items: center;
	}
	#footer .site-navigation .nav-link{
		padding: 10px 0;
	}
	#footer .navbar{
		padding: 0;
	}
	.img-footer-style{
		max-width: 280px;
		margin-top: 18px;
	}
	.footer-divider{
		width: 60%;
		margin-top: 22px;
		margin-bottom: 22px;
	}

	/* 1.9 — Textos centralizados também no celular
	         (as classes originais só centralizavam a partir de 992px) */
	.p-contact-style,
	.h1-coffee-central-style,
	.h1-4-style,
	.h3-cold-beverages-style{
		text-align: center !important;
		margin-left: auto;
		margin-right: auto;
	}

}


/* =============================================================
   2. CELULARES  (até 767px)
   ============================================================= */
@media (max-width: 767.98px){

	/* 2.1 — Títulos de página */
	.page-heading,
	.h1-style,
	.h1-heading-style,
	.h1-websérie-style,
	.h1-contato-style{
		font-size: 34px;
		line-height: 1.25;
		word-break: normal;
	}
	.h1-4-style{
		font-size: 26px;
		line-height: 1.3;
	}
	.h3-cold-beverages-style{
		font-size: 24px;
		line-height: 1.3;
	}
	.p-contact-style,
	.h1-coffee-central-style{
		font-size: 24px;
		line-height: 1.35;
	}
	.h1-uma-introdução-style,
	.h1-bloc-24-style{
		font-size: 20px;
		line-height: 1.35;
	}
	.h3-range-style,
	.h3-5-style,
	.h3-our-coffee-style,
	.h3-10-style,
	.h3-12-style,
	.h3-13-style,
	.h3-contact-style,
	.h3-19-style{
		font-size: 21px;
	}

	/* 2.2 — Corpo de texto: tamanhos de desktop (20–40px) ficavam
	         grandes demais na tela pequena. */
	.p-style,.p-2-style,.p-3-style,.p-6-style,.p-11-style,.p-12-style,
	.p-15-style,.p-16-style,.p-16-menu-style,.p-17-style,.p-18-style,
	.p-19-style,.p-20-style,.p-21-style,.p-22-style,.p-23-style,
	.p-24-style,.p-24-menu-style,.p-25-style,.p-25-menu-style,.p-26-style,
	.p-27-style,.p-31-style,.p-32-style,.p-33-style,.p-34-style,.p-35-style,
	.p-36-style,.p-bloc-18-style,.p-bloc-19-style,.p-26-bloc-19-style,
	.p-27-bloc-19-style,.p-menu-style,.p-range-style,.p-coffee-central-style,
	.p-cold-beverages-style,.p-hot-beverages-style,.info-text{
		font-size: 17px;
		line-height: 1.65;
	}
	.p-15-contact-style{
		font-size: 18px;
		line-height: 1.7;
	}
	/* Texto justificado abre "buracos" em telas estreitas */
	.text-justify{
		text-align: left !important;
	}

	/* 2.3 — Botões longos */
	.btn-button-style{
		width: 100% !important;
		max-width: 360px;
		margin: 0 auto;
		padding-top: 18px;
		padding-bottom: 18px;
		font-size: 17px;
		line-height: 1.4;
	}
	.btn-xl{
		font-size: 17px;
		padding: 14px 20px;
		line-height: 1.4;
	}
	#brand-area .btn{
		max-width: 100%;
		white-space: normal;
	}

	/* 2.4a — Colunas "col" sem tamanho definido ficavam lado a lado
	          (ex.: o texto "Atendimento em todo Brasil" dividia a linha
	          com a ilustração e ficava numa coluna estreitíssima).
	          No celular cada uma ocupa a linha inteira. */
	.bloc .row > .col{
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* 2.4b — Títulos dos cartões com o mesmo tamanho */
	#range h3, #our-coffee h3, #contact h3{
		font-size: 21px;
		line-height: 1.3;
	}

	/* 2.4 — Cartões (áreas de atuação / sobre mim) com respiro entre si */
	#range .row-range-style > div,
	#our-coffee .row > div[class*="col-"],
	#contact .row > div[class*="col-"]{
		margin-bottom: 26px;
	}

	/* 2.5 — Espaçamento dos blocos */
	.bloc-lg{ padding: 44px 18px; }
	.bloc-md{ padding: 34px 18px; }
	.primary-divider{ width: 110px; }

	/* 2.6 — HERO da página inicial:
	         a foto estava enquadrada no centro, o que na vertical mostrava
	         só a parede. Reposiciona a foto e leva a logo/botão para baixo,
	         sobre um véu claro que garante a leitura. */
	#hero{
		background-position: 78% center;
		min-height: 100vh;
	}
	#hero::before{
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background: linear-gradient(to top,
			rgba(236,226,218,0.97) 0%,
			rgba(236,226,218,0.88) 26%,
			rgba(236,226,218,0.00) 58%);
		pointer-events: none;
		z-index: 0;
	}
	#hero > .container{
		position: relative;
		z-index: 1;
	}
	#hero{
		padding-bottom: 36px;
	}
	#hero > .container > .row{
		align-self: flex-end !important;
	}
	#hero .row-style > div{
		align-self: flex-end !important;
	}
	#hero .img-fluid-up{
		min-width: 0;
	}
	#hero .img-style{
		width: 82%;
		max-width: 300px;
		margin: 0 auto;
	}
	#hero .btn-style{
		margin-top: 18px;
	}

	/* 2.7 — Vídeos do YouTube ocupando a largura toda */
	.embed-responsive{
		width: 100%;
	}

}


/* =============================================================
   3. CELULARES PEQUENOS  (até 575px)
   ============================================================= */
@media (max-width: 575.98px){

	.bloc-lg{ padding: 40px 16px; }
	.bloc-md{ padding: 30px 16px; }
	.bloc{ padding-left: 16px; padding-right: 16px; }

	.page-heading,
	.h1-style,
	.h1-heading-style,
	.h1-websérie-style,
	.h1-contato-style{
		font-size: 30px;
	}
	.h3-style{ font-size: 20px; }
	.navbar-brand img{ max-height: 56px; }

	.html-widget-0-style,
	.html-widget-our-coffee-style,
	.html-widget-menu-style,
	.html-widget-coffee-central-style,
	.html-widget-style{
		height: 145px !important;
	}
	.html-widget-range-style{
		height: 80px !important;
	}

	#footer .social-link-bric svg{
		width: 36px;
		height: 36px;
	}

}


/* Altura real da tela do celular (barra do navegador não corta o hero) */
@supports (min-height: 100svh){
	@media (max-width: 767.98px){
		#hero{ min-height: 100svh; }
	}
}