/* =========================================================
   Vi.Ca Custom — ajustes de front-end sobre o Elementor
   Os seletores usam os IDs dos elementos do Elementor
   (elementor-element-xxxxxxx). Se um elemento for apagado e
   recriado no editor, o ID muda e a regra deixa de valer.
   ========================================================= */

/* ---------------------------------------------------------
   Overflow horizontal no desktop entre ~1025px e ~1415px
   (iPad paisagem 1180, notebooks 1280/1366).
   Estes containers têm largura fixa de 1400px no desktop;
   aqui eles só encolhem quando a tela é menor que isso.
   Em telas >= 1440px o layout fica idêntico ao original.
   --------------------------------------------------------- */
.elementor .elementor-element.elementor-element-a77ee8c, /* Nossos diferenciais */
.elementor .elementor-element.elementor-element-af3cf04, /* Protocolos de saúde e cuidados */
.elementor .elementor-element.elementor-element-7840de6, /* Valores de referência / Compromissos */
.elementor .elementor-element.elementor-element-a31f9c0, /* ONGs e protetores parceiros */
.elementor .elementor-element.elementor-element-955b264  /* Pronto para adotar? */ {
	max-width: calc(100vw - 32px);
}

/* Quem adota muda vidas (versão desktop): imagem decorativa
   com posição absoluta passa da borda direita em ~1180px. */
.elementor .elementor-element.elementor-element-7bc55a9 {
	overflow-x: clip;
}

/* Na mídia: ícone decorativo passa ~2px da borda em ~1025–1100px. */
.elementor .elementor-element.elementor-element-8a41f57 {
	overflow-x: clip;
}

/* ---------------------------------------------------------
   ONGs e protetores parceiros (desktop): o coração rosa com "?"
   era puxado para trás com margin-left negativa (-337px) e
   ficava sobre o título. Aqui o título ocupa só a largura do
   texto e o coração fica logo depois dele, em qualquer largura.
   --------------------------------------------------------- */
@media (min-width: 1025px) {
	.elementor .elementor-element.elementor-element-9619da9 { /* título */
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
	}

	.elementor .elementor-element.elementor-element-7de4b9e { /* coração */
		margin-left: 8px !important;
	}
}

/* ---------------------------------------------------------
   Custos e transparência — cards "Custos Diretos – Responsabilidade
   do Tutor" (6da732b) e "Custos de estrutura" (6a8586a), a partir
   do tablet (≥ 768px).

   O fundo de cada card é um SVG 563×313 que já traz o retângulo
   bege de cantos arredondados + a ilustração (seringa /
   estetoscópio) no canto superior direito. Com "cover", quando o
   texto do card cresce (o card de custos diretos passou a ter a
   lista do jurídico), o SVG inteiro é ampliado pela altura e a
   ilustração vira um borrão gigante sobre o texto.
   Aqui o SVG fica na largura do card, ancorado no topo (tamanho e
   posição originais da ilustração) e o resto do card é completado
   com o mesmo bege (#F9F2E4), seja qual for a altura do texto.
   --------------------------------------------------------- */
@media (min-width: 768px) {
	.elementor .elementor-element.elementor-element-6da732b,
	.elementor .elementor-element.elementor-element-6a8586a {
		background-color: #F9F2E4 !important;
		background-size: 100% auto !important;
		background-position: 50% 0 !important;
		background-repeat: no-repeat !important;
	}
}

/* Tablet em pé (768–899px): o card fica estreito demais para a
   ilustração e o texto dividirem a largura; só o fundo bege. */
@media (min-width: 768px) and (max-width: 899px) {
	.elementor .elementor-element.elementor-element-6da732b,
	.elementor .elementor-element.elementor-element-6a8586a {
		background-image: none !important;
	}
}

/* Tablet deitado (900–1024px): título e lista numa coluna de 64%,
   que termina antes da seringa e do estetoscópio. */
@media (min-width: 900px) and (max-width: 1024px) {
	.elementor .elementor-element.elementor-element-d6c021e, /* título custos diretos */
	.elementor .elementor-element.elementor-element-162c6de, /* lista custos diretos */
	.elementor .elementor-element.elementor-element-307971b, /* título custos de estrutura */
	.elementor .elementor-element.elementor-element-9514f40  /* lista custos de estrutura */ {
		--container-widget-width: 64% !important;
		width: 64% !important;
		max-width: 64% !important;
	}
}

/* ---------------------------------------------------------
   Container c6a37b5 (antigo "Valores de referência" + "Compromissos
   e limites"). A pedido do jurídico os valores foram removidos e
   ficaram só a faixa azul "Valores refletem protocolos…" (fb6a879) e
   "Compromissos e limites". O container ainda tinha min-height de
   1685px com conteúdo centralizado (≈ 400px vazios acima e abaixo no
   tablet/desktop) e a faixa tinha margem negativa (−80px / −66px)
   para subir sobre os cards de valores — no celular ela passava a
   cobrir o card "Custos de estrutura".
   --------------------------------------------------------- */
.elementor .elementor-element.elementor-element-c6a37b5 {
	--min-height: 0px !important;
	min-height: 0 !important;
}

.elementor .elementor-element.elementor-element-fb6a879 { /* faixa azul */
	margin-top: 24px !important;
}

@media (min-width: 768px) {
	.elementor .elementor-element.elementor-element-fb6a879 {
		margin-top: 40px !important;
	}
}

/* Desktop: o título "Custos Diretos – Responsabilidade do Tutor" é
   mais longo que o antigo e passava por baixo da seringa; fica com a
   mesma largura da lista (76%). */
@media (min-width: 1025px) {
	.elementor .elementor-element.elementor-element-d6c021e {
		--container-widget-width: 76% !important;
		width: 76% !important;
		max-width: 76% !important;
	}
}

/* ---------------------------------------------------------
   Hero (5d4e108) — celular deitado, layout mobile (< 768px).
   A imagem de fundo do mobile é vertical e, com o celular
   deitado, fica ampliada pela largura: ancorada no topo, o
   cachorro era cortado e sobrava fundo vazio. Ancorada embaixo,
   ele aparece inteiro. No retrato não muda nada, porque lá a
   imagem é ajustada pela altura.
   --------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor .elementor-element.elementor-element-5d4e108 {
		background-position: 50% 100% !important;
	}
}

/* Celular deitado e baixo (ex.: 568×320, 740×360): hero compacto
   para o botão caber na primeira tela, mesmo com o título em duas
   linhas ("… Centro de Adoção e REABILITAÇÃO").
   Celular em pé não é afetado (altura > 500px). */
@media (max-width: 767px) and (max-height: 500px) {
	.elementor .elementor-element.elementor-element-5d4e108 {
		--gap: 12px 12px !important;
		--row-gap: 12px !important;
		row-gap: 12px !important;
	}

	.elementor .elementor-element.elementor-element-f6420b7 { /* logo: era 55px acima */
		margin-top: 12px !important;
	}

	.elementor .elementor-element.elementor-element-b965320 .elementor-heading-title { /* título */
		font-size: 30px !important;
	}

	/* "responsável": o Elementor o puxa 19px para cima, sobre o título;
	   com o título em duas linhas ele encostava em "REABILITAÇÃO". */
	.elementor .elementor-element.elementor-element-e6ddbb5 {
		margin-top: -10px !important;
	}

	.elementor .elementor-element.elementor-element-e6ddbb5 .elementor-heading-title {
		font-size: 38px !important;
		line-height: 1.1 !important;
	}

	.elementor .elementor-element.elementor-element-557bc3f .elementor-button {
		padding: 14px 24px !important;
	}
}

/* ---------------------------------------------------------
   Hero — título no tablet (768–1024px).
   A 55px, "REABILITAÇÃO" não cabe na coluna do título (42%) no
   tablet em pé: passava ~60px por cima da foto e deixava o "e"
   sozinho numa linha. Aqui o título acompanha a largura da tela
   (46px a 768px) e volta aos 55px a partir de ~920px.
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor .elementor-element.elementor-element-b965320 .elementor-heading-title {
		font-size: min(55px, 6vw) !important;
	}
}

/* ---------------------------------------------------------
   Hero — celulares grandes deitados (812–932px de largura),
   que caem no layout de tablet, mas com ~375–430px de altura.
   Com o título a 55px, só o título cabia na primeira tela.
   Aqui o hero é compactado para o botão aparecer sem rolar.
   O max-height deixa tablets de verdade (retrato e paisagem)
   intactos.
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) and (max-height: 500px) {
	.elementor .elementor-element.elementor-element-5d4e108 {
		min-height: 100vh !important;
		padding-top: 12px !important;
		padding-bottom: 24px !important;
		--gap: 10px 10px !important;
		--row-gap: 10px !important;
		row-gap: 10px !important;
	}

	/* Logo */
	.elementor .elementor-element.elementor-element-f6420b7 .elementor-icon {
		font-size: 28px !important;
	}

	.elementor .elementor-element.elementor-element-f6420b7 svg {
		height: 28px !important;
	}

	/* "Adote Vi.Ca — Centro de Adoção e REABILITAÇÃO": coluna mais
	   larga para o título ocupar duas linhas em vez de três. */
	.elementor .elementor-element.elementor-element-b965320 {
		--container-widget-width: 52% !important;
		width: 52% !important;
	}

	.elementor .elementor-element.elementor-element-b965320 .elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.1 !important;
	}

	/* "responsável" */
	.elementor .elementor-element.elementor-element-e6ddbb5 {
		margin-top: -6px !important;
	}

	.elementor .elementor-element.elementor-element-e6ddbb5 .elementor-heading-title {
		font-size: 50px !important;
		line-height: 1.1 !important;
	}

	/* Texto de apresentação */
	.elementor .elementor-element.elementor-element-60d5882 {
		--container-widget-width: 46% !important;
		width: 46% !important;
	}

	.elementor .elementor-element.elementor-element-60d5882 p {
		font-size: 15px !important;
		line-height: 1.45 !important;
	}

	.elementor .elementor-element.elementor-element-60d5882 p:last-child {
		margin-bottom: 0 !important;
	}

	/* Botão "conheça nossos compromissos" */
	.elementor .elementor-element.elementor-element-557bc3f .elementor-button {
		padding: 14px 24px !important;
		font-size: 17px !important;
	}
}