/**
 * Dadoteca child theme styles.
 *
 * Values reproduced from production (2026-10-13): Elementor kit post-6.css,
 * HFE header post-50.css, footer post-278.css, the Customizer CSS
 * (#wp-custom-css) and computed styles measured with Chrome at 390/1440 px.
 * Design tokens are hard-coded on purpose: header/footer must not depend on the
 * Elementor kit (phase 2 drops Elementor).
 */

/* ---------- Roboto, self-hosted (variable font, Google Fonts v51, SIL OFL 1.1) ----------
 * Weights used across the 17 pages: 200-800 normal, 300-600 italic.
 * unicode-range values copied from the Google Fonts css2 response. */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-normal-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 200 800;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-normal-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 300 600;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 300 600;
	font-stretch: 100%;
	font-display: swap;
	src: url("../fonts/roboto-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--dt-orange: #f67011;
	--dt-orange-glass: rgba(246, 112, 17, 0.92); /* #F67011EB */
	--dt-ice: #e8eaec;
	--dt-ink: #262626;
	--dt-hover-bg: #edeef0;
	--dt-font: "Roboto", sans-serif;
	--dt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Decision 2026-10-13 (Q25): Roboto across the whole site. */
body {
	font-family: var(--dt-font);
}

/* Carried over from the old Customizer "Additional CSS" (it is stored per theme
 * and does not follow the switch to the child theme). Hello's theme.css
 * underlines `.page-content a`; production removed that inside Elementor. */
.elementor a,
.elementor a:hover,
.elementor a:focus {
	text-decoration: none;
}

.dt-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dt-icon {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ============================== Header ============================== */

.dt-header-slot {
	/* Reserves the floating header's space so switching to the fixed bar does not
	 * shift the page. flow-root keeps the header's 50px top margin inside the slot
	 * (without it the margin collapses out of the slot and the page starts 30px lower
	 * than production). Height = production's HFE masthead: 50px offset + 7vh + 20px
	 * (measured 13/10/2026: 83px at 1440x900, 69px at 1440x700; the Elementor heroes
	 * pull themselves up under it with margin-top: -150px). */
	display: flow-root;
	min-height: calc(50px + 7vh + 20px);
	position: relative;
	z-index: 999;
}

@media (max-width: 767px) {
	.dt-header-slot {
		/* Production mobile masthead never goes below ~76px (390x700 measured 76.4px). */
		min-height: calc(50px + max(7vh + 20px, 76px));
	}
}

.dt-header {
	position: relative;
	z-index: 999;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: calc(100% - 100px);
	min-height: max(7vh, 52px);
	margin: 50px auto 0;
	padding: 6px 25px;
	font-family: var(--dt-font);
	background-color: var(--dt-orange-glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
	animation: dt-slide-in-down 1.25s var(--dt-ease) both;
}

@media (min-width: 768px) {
	.dt-header {
		width: 83.697%;
	}
}

@media (min-width: 2400px) {
	.dt-header {
		width: 50%;
	}
}

.dt-header__bar {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

.dt-header__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.dt-header__logo img {
	display: block;
	width: 112px;
	height: auto;
	transition: transform 0.3s ease;
}

.dt-header__logo:hover img,
.dt-header__logo:focus-visible img {
	transform: scale(0.89);
}

/* ---- Navigation (desktop) ---- */

.dt-nav {
	position: static;
	display: flex;
	align-items: center;
	margin-left: auto;
}

.dt-nav__menu {
	display: flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-nav__menu > li {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

.dt-nav__menu a {
	display: block;
	font-family: var(--dt-font);
	font-weight: 400;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.dt-nav__menu > li > a {
	position: relative;
	padding: 4px 9px;
	font-size: 16px;
	line-height: 16px;
	color: var(--dt-ice);
}

/* HFE "underline / grow" pointer. */
.dt-nav__menu > li > a::after {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	bottom: -2px;
	height: 2px;
	background-color: var(--dt-ice);
	transform: scaleX(0);
	transition: transform 0.25s ease;
}

.dt-nav__menu > li > a:hover,
.dt-nav__menu > li > a:focus-visible {
	color: #fff;
}

.dt-nav__menu > li > a:hover::after,
.dt-nav__menu > li > a:focus-visible::after {
	transform: scaleX(1);
}

.dt-nav__menu > .current-menu-item > a,
.dt-nav__menu > .current-menu-ancestor > a {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.06); /* #FFFFFF0F */
}

/* HFE kept its underline pointer on the current page's item (e.g. "Serviços" on /servicos/). */
.dt-nav__menu > .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Sub-menu disclosure button (resets Hello's reset.css button styles). */
.dt-header button.dt-nav__subtoggle,
.dt-header button.dt-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	font: inherit;
	color: var(--dt-ice);
	background: transparent;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
}

.dt-header button.dt-nav__subtoggle:hover,
.dt-header button.dt-nav__subtoggle:focus,
.dt-header button.dt-nav__toggle:hover,
.dt-header button.dt-nav__toggle:focus {
	color: #fff;
	background: transparent;
}

.dt-header button.dt-nav__subtoggle {
	/* 24x24 px, not overlapped by the link: WCAG 2.2 target size (Lighthouse
	 * target-size). The parent link drops its right padding (rule below), so the arrow
	 * stays ~where it was (2 px to the right) and the menu grows 3 px. */
	width: 24px;
	height: 24px;
	margin: 0;
	font-size: 10px;
}

@media (min-width: 1025px) {
	.dt-nav__menu > .menu-item-has-children > a {
		padding-right: 0;
	}

	.dt-nav__menu > .menu-item-has-children > a::after {
		right: 0;
	}
}

.dt-nav__subtoggle .dt-icon {
	transition: transform 0.2s ease;
}

.dt-nav__subtoggle[aria-expanded="true"] .dt-icon {
	transform: rotate(180deg);
}

.dt-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 300px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--dt-ice);
	border-radius: 11px;
	box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.42);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.dt-nav__menu > li:hover > .sub-menu,
.dt-nav__menu > li:focus-within > .sub-menu,
.dt-nav__subtoggle[aria-expanded="true"] + .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.dt-nav__menu .sub-menu a {
	padding: 9px;
	font-size: 16px;
	line-height: 20px;
	color: var(--dt-ink);
}

.dt-nav__menu .sub-menu a:hover,
.dt-nav__menu .sub-menu a:focus-visible,
.dt-nav__menu .sub-menu .current-menu-item > a {
	color: var(--dt-orange);
	background-color: var(--dt-hover-bg);
}

/* Toggle (mobile only). */
.dt-header button.dt-nav__toggle {
	display: none;
	margin-right: -11px; /* 44px touch target, icon still aligned to the bar padding */
	padding: 11px;
	font-size: 22px;
}

.dt-nav__toggle .dt-icon--close,
.dt-nav__toggle[aria-expanded="true"] .dt-icon--menu {
	display: none;
}

.dt-nav__toggle[aria-expanded="true"] .dt-icon--close {
	display: block;
}

/* ---- CTA ---- */

.dt-header__cta {
	flex: 0 0 auto;
	margin-left: 12px;
	padding: 10px 15px;
	font-family: var(--dt-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 15px;
	color: var(--dt-orange);
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--dt-ice);
	border: 1px solid currentColor;
	border-radius: 1000px;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dt-header__cta:hover,
.dt-header__cta:focus-visible {
	color: var(--dt-ice);
	background-color: rgba(255, 255, 255, 0.14); /* #FFFFFF24 */
	border-color: var(--dt-ice);
}

/* ---- Fixed (compact) state ---- */

/* After the entrance animation (or the first switch to fixed) never replay it:
 * removing .is-fixed would otherwise restart dt-slide-in-down. */
.dt-header.dt-header--settled {
	animation: none;
}

.dt-header.is-fixed {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 22px 32px;
	background-color: var(--dt-ink);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-radius: 0;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	animation: dt-fade-in 0.3s ease both;
}

.dt-sticky-sentinel {
	height: 1px;
	margin-top: -1px;
	pointer-events: none;
}

/* ---- Tablet + mobile (production breakpoint: <= 1024px) ---- */

@media (max-width: 1024px) {
	.dt-header button.dt-nav__toggle {
		display: inline-flex;
	}

	.dt-header__cta {
		display: none; /* elementor-hidden-tablet / elementor-hidden-mobile in production */
	}

	.dt-nav__menu {
		position: absolute;
		top: calc(100% - 8px);
		left: 0;
		right: 0;
		z-index: 1000;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background-color: var(--dt-ice);
		border-radius: 11px;
		box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.42);
		overflow: hidden;
	}

	.dt-header.is-menu-open .dt-nav__menu {
		display: flex;
	}

	.dt-nav__menu > li {
		flex-wrap: wrap;
	}

	.dt-nav__menu > li > a {
		flex: 1 1 auto;
		padding: 9px;
		line-height: 20px;
		color: var(--dt-ink);
	}

	.dt-nav__menu > li > a::after {
		display: none;
	}

	.dt-nav__menu > li > a:hover,
	.dt-nav__menu > li > a:focus-visible,
	.dt-nav__menu > .current-menu-item > a,
	.dt-nav__menu > .current-menu-ancestor > a {
		color: var(--dt-orange);
		background-color: var(--dt-hover-bg);
	}

	.dt-header button.dt-nav__subtoggle,
	.dt-header button.dt-nav__subtoggle:hover,
	.dt-header button.dt-nav__subtoggle:focus {
		width: 46px;
		height: 38px;
		margin: 0;
		font-size: 12px;
		color: var(--dt-ink);
	}

	.dt-nav__menu .sub-menu {
		position: static;
		display: none;
		flex: 0 0 100%;
		width: 100%;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.dt-nav__menu > li:hover > .sub-menu,
	.dt-nav__menu > li:focus-within > .sub-menu {
		display: none; /* mobile: only the button opens it */
	}

	.dt-nav__menu > li > .dt-nav__subtoggle[aria-expanded="true"] + .sub-menu {
		display: block;
	}

	.dt-nav__menu .sub-menu a {
		padding-left: 29px;
	}
}

@media (max-width: 767px) {
	.dt-header__logo img {
		width: 104px;
	}
}

/* ============================== Footer ============================== */

.dt-footer {
	font-family: var(--dt-font);
	color: var(--dt-ice);
	background-color: var(--dt-ink);
}

.dt-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1140px;
	margin: 0 auto;
}

.dt-footer__col {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 10px;
}

.dt-footer__col--info {
	justify-content: space-between;
}

@media (min-width: 768px) {
	.dt-footer__inner {
		align-items: stretch;
	}

	.dt-footer__col--brand {
		width: 46.161%;
	}

	.dt-footer__col--info {
		width: 50%;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.dt-footer__inner {
		align-items: flex-start;
	}

	.dt-footer__col--brand {
		width: 50%;
	}
}

.dt-footer p,
.dt-footer address {
	margin: 0;
}

.dt-footer__logo {
	display: block;
	width: 23.936%;
	min-width: 89px;
	height: auto;
}

.dt-footer .dt-footer__tagline {
	font-size: 14px;
	font-style: italic;
	font-weight: 300;
	line-height: 13px;
	/* production: a transparent divider (12px + 1px + 12px) plus one more 20px gap */
	margin-bottom: 45px;
}

.dt-social {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 26px;
	color: var(--dt-orange);
	background-color: var(--dt-ice);
	border-radius: 50%;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.dt-social__link .dt-icon {
	width: 26px;
	height: 26px;
}

.dt-social__link:hover,
.dt-social__link:focus-visible {
	color: var(--dt-ice);
	background-color: var(--dt-orange);
}

.dt-footer__email {
	font-size: 15px;
	font-style: italic;
	font-weight: 400;
	line-height: 15px;
	letter-spacing: 0.8px;
}

.dt-footer a {
	text-decoration: none;
}

.dt-footer__email a,
.dt-footer__plain {
	color: var(--dt-ice);
}

.dt-footer__email a:hover,
.dt-footer__email a:focus-visible,
.dt-footer__plain:hover,
.dt-footer__plain:focus-visible {
	color: var(--dt-orange);
}

.dt-footer__isologo {
	display: block;
	width: 53px;
	height: 53px;
}

.dt-footer__address {
	font-size: 11px;
	font-style: normal;
	line-height: 15px;
}

.dt-footer__rule {
	width: 45%;
	height: 0;
	margin: 2px 0;
	border: 0;
	border-top: 1px solid var(--dt-orange);
}

.dt-footer__legal {
	font-size: 12px;
	line-height: 16px;
}

.dt-footer__legal > a:first-child {
	font-weight: 700;
	color: var(--dt-orange);
}

.dt-footer__legal > a:first-child:hover,
.dt-footer__legal > a:first-child:focus-visible {
	color: var(--dt-ice);
}

/* ============================== RD forms ============================== */

/* Land below the fixed header when jumping to a form anchor. */
.dt-rd-form,
[id^="formulario"] {
	scroll-margin-top: 100px;
}

/* RD's own CSS for the submit button (generated per form by its editor) used to stack the label in a
   centred column; on 21/10 it came as a row centred only across, and the label sat at the top of the
   51-58 px button ("Enviar", "Cadastrar"). Centre it vertically whatever RD generates. */
[data-dt-form] .bricks-form__submit .bricks--component-button {
	align-items: center;
}

/* Submit button of the other RD forms: the hover and press of the /hackathon/ form button (Figma node
   3090-140; that page has its own in hackathon-fx.css). RD sets background and shadow with an id
   selector, so the hover ones need !important; RD defines no :hover of its own (checked on 21/10). */
[data-dt-form]:not([data-dt-form="hackathon"]) .bricks-form__submit .bricks--component-button {
	transition: transform 220ms cubic-bezier(0.33, 1, 0.68, 1), box-shadow 220ms cubic-bezier(0.33, 1, 0.68, 1), background-color 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) {
	[data-dt-form]:not([data-dt-form="hackathon"]) .bricks-form__submit .bricks--component-button:hover {
		background-color: #e26710 !important; /* #F67011 under the Figma's 8% black layer */
		box-shadow: 0 10px 22px rgba(246, 112, 17, 0.38) !important;
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	[data-dt-form]:not([data-dt-form="hackathon"]) .bricks-form__submit .bricks--component-button:hover {
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	[data-dt-form]:not([data-dt-form="hackathon"]) .bricks-form__submit .bricks--component-button:active {
		transform: scale(0.98);
		box-shadow: none !important;
	}
}

/* ============================== WhatsApp ============================== */

.dt-whatsapp {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 998;
	display: block;
	width: 65px;
	line-height: 0;
	border-radius: 50%;
	animation: dt-fade-in-up 2s var(--dt-ease) 0.5s both;
}

.dt-whatsapp img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.dt-whatsapp {
		width: 55px;
	}
}

@media (max-width: 767px) {
	.dt-whatsapp {
		width: 50px;
	}
}

/* ============================== Motion ============================== */

@keyframes dt-slide-in-down {
	from {
		transform: translate3d(0, -100%, 0);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes dt-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes dt-fade-in-up {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dt-header,
	.dt-header.is-fixed,
	.dt-whatsapp {
		animation: none;
	}

	.dt-header,
	.dt-nav__menu .sub-menu,
	.dt-header__cta,
	.dt-header__logo img {
		transition: none;
	}
}

/* [dadoteca_form] inside the Elementor editor preview (inc/forms.php) */
.dt-rd-form__placeholder {
	margin: 0;
	padding: 2rem 1.5rem;
	border: 2px dashed currentColor;
	border-radius: 15px;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	opacity: 0.8;
}

/* Elementor entrance animations (slideInRight, slideInLeft...) start outside the screen. Without a
   horizontal clip the document gets wider while they run, the phone's layout viewport grows and every
   fixed element (cookie banner, WhatsApp button) jumps: CLS 0.43 on /produtos/ (container 00b7c54).
   clip (not hidden) on main: no scroll container, nothing propagated to the viewport, sticky keeps working. */
.site-main {
	overflow-x: clip;
}

/* Video widget with the CSS class "dt-video-cover" (Advanced → CSS Classes): the player fills a box with
   the frame's own proportion (cover), whatever the video's, and the play icon gets the soft orange glow of
   the Figma. Used on /hackathon/ (vertical video in a 445 x 911 frame). */
.elementor-widget-video.dt-video-cover .elementor-wrapper {
	aspect-ratio: 445 / 911;
	overflow: hidden;
}

.elementor-widget-video.dt-video-cover .elementor-wrapper .elementor-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dt-video-cover .elementor-custom-embed-play svg {
	filter: drop-shadow(0 6px 20px rgba(246, 112, 17, 0.4));
}


/* Icon widget with the CSS class "dt-icon-block": the icon box is exactly its size (Elementor prints it
   inline, inside a line box that adds ~7 px below). Used on /hackathon/ to match the Figma's spacing. */
.dt-icon-block .elementor-icon-wrapper {
	line-height: 0;
}

/* Container with the CSS class "dt-hero-shade": on phones the background overlay (Elementor's ::before)
   starts darkening near the top, because the text sits higher up the photo there. Elementor accepts
   per-device gradient stops but prints only the desktop ones (measured on /hackathon/, 4.3.5). */
@media (max-width: 767px) {
	.e-con.dt-hero-shade::before {
		background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.88) 48%) !important;
	}
}

/* Logo carousels with Swiper's lazy load (inc/lazy.php): until a logo loads, its box is a block with the
   logo's proportions (inline aspect-ratio) and width (its width attribute, never wider than the slide, as
   the loaded logo), with no visible alt text, so the strip keeps the height of the loaded logos on every
   browser. */
.elementor-image-carousel .swiper-slide-image.swiper-lazy:not(.swiper-lazy-loaded) {
	display: block;
	max-width: 100%;
	height: auto;
	overflow: hidden;
	color: transparent;
}