/*
Theme Name: Domo Seguros
Theme URI: https://domoseguros.pt
Description: Tema-filho do Twenty Twenty-Five para o site da Domo Seguros. Todo o conteúdo das páginas é editável em blocos nativos do WordPress.
Author: Domo Seguros
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: domo
*/

/*
 * Only styles that core blocks + theme.json cannot express live here.
 * Each rule is driven by a `domo-` class set on a core block, so the block
 * itself stays fully editable in the WordPress editor.
 */

:root {
	--domo-radius-card: 0.75rem;
	--domo-radius-btn: 0.5rem;
	--domo-transition: 0.3s;
}

/* --- Eyebrow label above section headings ------------------------------- */

.domo-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4286;
	text-transform: uppercase;
}

/* --- Cards -------------------------------------------------------------- */

.domo-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--domo-radius-card);
	height: 100%;
	overflow: hidden;
}

/* Accent rules that the source draws with border-l-4 / border-t-4. */
.domo-card--top-accent {
	border-top: 4px solid var(--wp--preset--color--primary);
}

.domo-card--left-accent {
	border-left: 4px solid var(--wp--preset--color--primary);
}

/* Equal-height cards inside a columns block. */
.domo-card-grid .wp-block-column {
	display: flex;
}

.domo-card-grid .wp-block-column > .wp-block-group {
	flex: 1;
}

/* Media card: image on top, copy below, image zooms slightly on hover. */
.domo-card--media .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.domo-card--media .wp-block-image img {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	transition: transform var(--domo-transition);
	width: 100%;
}

/* The products page crops its card media 16:9; the home page uses 4:3. */
.domo-card--media-wide .wp-block-image img {
	aspect-ratio: 16 / 9;
}

.domo-card--media:hover .wp-block-image img {
	transform: scale(1.04);
}

.domo-card__body {
	padding: 1.5rem;
}

/* Badge icon overlays the media, as in the source. The body must stay
   statically positioned so the badge resolves against the card. */
.domo-card--media {
	position: relative;
}

.domo-card--media > .domo-card__body {
	position: static;
}

.domo-card--media > .domo-card__body > .domo-icon--badge {
	left: 1rem;
	position: absolute;
	top: 1rem;
	z-index: 1;
}

/* --- Icons -------------------------------------------------------------- */

.domo-icon {
	align-items: center;
	border-radius: var(--domo-radius-btn);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	justify-content: center;
}

.domo-icon svg {
	height: 1.5rem;
	width: 1.5rem;
}

.domo-icon--boxed {
	background: var(--wp--preset--color--accent);
	height: 3rem;
	width: 3rem;
}

.domo-icon--badge {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	height: 2.5rem;
	width: 2.5rem;
}

/* Sits in the top-right of a tinted profile card. */
.domo-icon--corner {
	color: currentColor;
	position: absolute;
	right: 1.5rem;
	top: 1.5rem;
}

/* Circular icon for a process step: white disc, green ring, pale outer halo. */
.domo-icon--step {
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	box-shadow: 0 0 0 7px var(--wp--preset--color--base), 0 0 0 9px rgba(58, 183, 107, 0.25);
	color: var(--wp--preset--color--contrast);
	height: 7rem;
	margin-bottom: 1.25rem;
	width: 7rem;
}

.domo-icon--step svg {
	height: 2.25rem;
	width: 2.25rem;
}

/* --- Split section: full-bleed image beside a copy panel ---------------- */

.domo-split {
	align-items: center;
	display: grid;
	gap: 0;
}

@media (min-width: 782px) {
	.domo-split {
		grid-template-columns: 1fr 1fr;
	}
}

.domo-split__media {
	margin: 0;
	min-height: 22rem;
}

.domo-split__media img {
	display: block;
	height: 100%;
	min-height: 22rem;
	object-fit: cover;
	width: 100%;
}

/*
 * Deliberately not a flex column. Core's constrained layout puts
 * `margin-inline: auto` on every child, and in a flex container auto margins
 * make an item shrink to its content instead of stretching — so cards with
 * shorter text collapsed and centred, breaking the shared left edge. As a
 * block, `max-width` + auto margins behave normally and every child fills the
 * column. Vertical centring moves to `align-items` on the grid above.
 */
.domo-split__panel {
	padding: 4rem 2rem;
}

@media (min-width: 782px) {
	.domo-split__panel {
		padding: 5rem 3.5rem;
	}
}

/* --- Hero --------------------------------------------------------------- */

.domo-hero .domo-split__media,
.domo-hero .domo-split__media img {
	min-height: 40vh;
}

@media (min-width: 782px) {
	.domo-hero .domo-split__media,
	.domo-hero .domo-split__media img {
		min-height: 90vh;
	}
}

.domo-hero__panel {
	text-align: center;
}

.domo-hero__panel .domo-wordmark,
.domo-hero__panel .wp-block-image {
	justify-content: center;
}

.domo-wordmark {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.domo-wordmark__name {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
}

.domo-wordmark__kind {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 1.333;
	margin-top: 0.25rem;
}

.domo-wordmark__tagline {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.2em;
	margin-top: 0.5rem;
	text-transform: uppercase;
}

/* --- Tinted image panels (source uses an image at opacity-15) ----------- */

.domo-tinted {
	border-radius: var(--domo-radius-card);
	isolation: isolate;
	min-height: 13rem;
	overflow: hidden;
	position: relative;
}

.domo-tinted > .wp-block-image {
	inset: 0;
	margin: 0;
	position: absolute;
	z-index: -1;
}

.domo-tinted > .wp-block-image img {
	height: 100%;
	object-fit: cover;
	opacity: 0.15;
	width: 100%;
}

/* --- Numbered process steps --------------------------------------------- */

.domo-step__number {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	color: var(--wp--preset--color--primary-contrast);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

/* --- Contact form (Fluent Forms shell) ---------------------------------- */

.domo-form-shell {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--domo-radius-card);
	padding: 1.5rem;
}

@media (min-width: 782px) {
	.domo-form-shell {
		padding: 2rem;
	}
}

/* --- Header / footer ---------------------------------------------------- */

.domo-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .domo-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* The source marks the current page's nav item in green. */
.domo-header .wp-block-navigation .current-menu-item > a,
.domo-header .wp-block-navigation .current_page_item > a {
	color: var(--wp--preset--color--primary);
}

.domo-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.4286;
}

.domo-header__brand {
	align-items: center;
	display: flex;
	gap: 0.625rem;
	text-decoration: none;
}

.domo-header__brand .domo-wordmark {
	align-items: flex-start;
}

.domo-header__brand .domo-wordmark__name {
	font-size: 1.25rem;
	line-height: 1.4;
}

.domo-header__brand .domo-wordmark__kind {
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	line-height: 1.4286;
	margin-top: 0;
}

.domo-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--primary-contrast);
}

.domo-footer :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--primary-contrast);
}

.domo-footer .wp-block-navigation,
.domo-footer p {
	color: rgba(255, 255, 255, 0.8);
}

.domo-footer a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.domo-footer a:hover {
	color: var(--wp--preset--color--primary);
}

.domo-footer .domo-wordmark__name {
	color: var(--wp--preset--color--primary-contrast);
}

.domo-footer .domo-footer__heading {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.4286;
	margin-bottom: 0.25rem;
	text-transform: uppercase;
}

/* --- Dark panels -------------------------------------------------------- */

.domo-dark {
	background: var(--wp--preset--color--contrast);
	border-radius: var(--domo-radius-card);
	color: var(--wp--preset--color--primary-contrast);
}

.domo-dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--primary-contrast);
}

.domo-dark p {
	color: rgba(255, 255, 255, 0.8);
}

.domo-dark .domo-eyebrow {
	color: var(--wp--preset--color--primary);
}

/* --- Buttons: lift on hover, matching the source interaction ------------ */

.wp-block-button__link {
	transition: transform var(--domo-transition), background-color var(--domo-transition);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.domo-button--dark .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--primary-contrast);
}

.domo-button--dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
}

/* --- Pills and tags ----------------------------------------------------- */

.domo-pill {
	background: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--primary);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.75rem;
	text-transform: uppercase;
}

.domo-tags {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.domo-tags__label {
	color: var(--wp--preset--color--muted-text);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.domo-tag {
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	text-transform: uppercase;
}

/* --- Checklist: replaces bullets with the source's check icon ----------- */

.domo-check-list {
	list-style: none;
	margin-top: 1.25rem;
	padding-left: 0;
}

.domo-check-list li {
	line-height: 1.5;
	padding-left: 1.5rem;
	position: relative;
}

.domo-check-list li + li {
	margin-top: 0.5rem;
}

.domo-check-list li::before {
	background: var(--wp--preset--color--primary);
	content: "";
	height: 1rem;
	left: 0;
	-webkit-mask: var(--domo-check) center / contain no-repeat;
	mask: var(--domo-check) center / contain no-repeat;
	position: absolute;
	top: 0.2em;
	width: 1rem;
}

:root {
	--domo-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--domo-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* --- Tinted profile cards (image behind a colour wash) ------------------ */

.domo-card--tinted-dark,
.domo-card--tinted-primary {
	border: 0;
	isolation: isolate;
	min-height: 13rem;
	overflow: hidden;
	position: relative;
}

.domo-card--tinted-dark {
	background: var(--wp--preset--color--contrast);
}

.domo-card--tinted-primary {
	background: var(--wp--preset--color--primary);
}

.domo-card--tinted-dark > .wp-block-image,
.domo-card--tinted-primary > .wp-block-image {
	inset: 0;
	margin: 0;
	position: absolute;
	z-index: 0;
}

.domo-card--tinted-dark > .wp-block-image img,
.domo-card--tinted-primary > .wp-block-image img {
	height: 100%;
	object-fit: cover;
	opacity: 0.15;
	width: 100%;
}

.domo-card--tinted-dark > .domo-card__body,
.domo-card--tinted-primary > .domo-card__body {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-start;
	padding: 1.75rem;
	position: relative;
	z-index: 1;
}

/* The arrow sits under the copy, bottom-left, as in the source. */
.domo-card--tinted-dark .domo-icon--corner,
.domo-card--tinted-primary .domo-icon--corner {
	color: var(--wp--preset--color--primary-contrast);
	margin-top: auto;
	order: 99;
	position: static;
	align-self: flex-start;
}

.domo-card--tinted-dark :where(h1, h2, h3, h4, h5, h6, p, a),
.domo-card--tinted-primary :where(h1, h2, h3, h4, h5, h6, p, a) {
	color: var(--wp--preset--color--primary-contrast);
}

.domo-card--tinted-dark a,
.domo-card--tinted-primary a {
	text-decoration: none;
}

/* Roadmap cards: hairline top rule instead of a full border. */
.domo-card--top-border {
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.domo-card--dark {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.domo-card--dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--primary-contrast);
}

.domo-card--dark p,
.domo-card--dark p.has-muted-text-color {
	color: rgba(255, 255, 255, 0.8);
}

/* --- Inline text links with a trailing icon ----------------------------- */

.domo-inline-link {
	align-items: center;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	gap: 0.375rem;
	text-decoration: none;
}

.domo-inline-link:hover {
	text-decoration: underline;
}

.domo-inline-link .domo-icon svg {
	height: 1rem;
	width: 1rem;
}

/* --- Buttons with a trailing arrow, as in the source -------------------- */

.wp-block-button__link::after {
	background: currentColor;
	content: "";
	display: inline-block;
	height: 1rem;
	margin-left: 0.5rem;
	-webkit-mask: var(--domo-arrow) center / contain no-repeat;
	mask: var(--domo-arrow) center / contain no-repeat;
	vertical-align: -0.15em;
	width: 1rem;
}

/* --- Intro beside cards (home "Estamos perto de si") -------------------- */

.domo-intro-cards {
	gap: 2.5rem;
}

/* --- Image + copy columns ----------------------------------------------- */

.domo-media-text {
	gap: 2.5rem;
}

.domo-media-text__media img {
	border-radius: var(--domo-radius-card);
	display: block;
	width: 100%;
}

.domo-media-text__media .wp-block-image {
	margin: 0;
}

/* Partner logos are transparent PNGs; frame them rather than crop them. */
.domo-media-text--framed .domo-media-text__media .wp-block-image {
	align-items: center;
	background: var(--wp--preset--color--muted);
	border-radius: var(--domo-radius-card);
	display: flex;
	justify-content: center;
	padding: 2.5rem;
}

.domo-media-text--framed .domo-media-text__media img {
	aspect-ratio: auto;
	max-height: 14rem;
	object-fit: contain;
}

/* Photographic media keeps the source's 4:3 crop. */
.domo-media-text:not(.domo-media-text--framed) .domo-media-text__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* --- Stats -------------------------------------------------------------- */

.domo-stat {
	border-radius: var(--domo-radius-card);
}

.domo-stat__value {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1.1;
}

/* --- Process steps ------------------------------------------------------ */

.domo-step {
	text-align: center;
}

.domo-step__title {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

.domo-step__actor {
	color: rgba(27, 43, 79, 0.5);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.domo-step__actor.is-accent {
	color: var(--wp--preset--color--primary);
}

.domo-step__text {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--domo-radius-card);
	margin-top: 0.75rem;
	padding: 0.75rem;
}

/* --- Quote panel -------------------------------------------------------- */

.domo-quote {
	margin-left: auto;
	margin-right: auto;
}

.domo-quote__text {
	font-family: var(--wp--preset--font-family--heading);
	margin-inline: auto;
	max-width: 48rem;
	font-size: clamp(1.25rem, 2.5vw, 1.875rem);
	font-weight: 600;
	line-height: 1.35;
}

/* The partners quote is a step smaller than the others in the source, and is
   the one quote whose text is not capped at max-w-3xl. */
.domo-quote--small .domo-quote__text {
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	max-width: none;
}

/* --- Contact ------------------------------------------------------------ */

.domo-contact {
	gap: 2.5rem;
}

.domo-contact__row {
	align-items: flex-start;
	display: flex;
	gap: 0.75rem;
}

.domo-contact__row .domo-icon svg {
	height: 1.25rem;
	width: 1.25rem;
}

.domo-contact__label {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.domo-contact-card a {
	color: var(--wp--preset--color--primary-contrast);
	text-decoration: none;
}

.domo-contact-card a:hover {
	color: var(--wp--preset--color--primary);
}

/* --- Page header -------------------------------------------------------- */

.domo-page-header--dark {
	background: var(--wp--preset--color--contrast);
}

/* --- Hero --------------------------------------------------------------- */

.domo-hero__logo img {
	height: 6rem;
	object-fit: contain;
	width: 6rem;
}

.domo-hero__note {
	font-style: italic;
}

/* --- Cards: keep grid children full height ------------------------------ */

.domo-card-grid > .domo-card {
	height: 100%;
}

/* --- Header details ----------------------------------------------------- */

/* The header row owns its own container: max width plus a 24px inset, matching
   the source's `max-w-container px-6`. Leaving this to the constrained layout
   stacked the root padding on top of the inset and doubled it on mobile. */
.domo-header__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1216px;
	padding-inline: 1.5rem;
}

/* The two CTAs live in the header row on desktop and in the overlay on mobile,
   as they do in the source. */
.wp-block-navigation-item.domo-nav-cta {
	display: none;
}

@media (max-width: 599px) {
	.domo-header .domo-header__ctas {
		display: none;
	}

	.wp-block-navigation-item.domo-nav-cta {
		display: flex;
	}
}

.domo-header__ctas {
	gap: 0.5rem;
}

.domo-header__wordmark {
	text-decoration: none;
}

.domo-button--compact .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.5rem 1rem;
}

/* "Falar com Especialista": outlined in green on white. */
.domo-button--outline-primary .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.domo-button--outline-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}

/* "Área de Parceiros": solid navy. */
.domo-button--solid-dark .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--primary-contrast);
}

.domo-button--solid-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* The trailing arrow belongs to page CTAs, not to header or footer chrome. */
.domo-header .wp-block-button__link::after,
.domo-button--compact .wp-block-button__link::after {
	content: none;
}

/* --- Footer details ----------------------------------------------------- */

.domo-footer__grid {
	align-items: start;
}

.domo-footer__nav {
	font-size: var(--wp--preset--font-size--small);
	gap: 0.5rem;
}

.domo-footer__rule {
	border: 0;
	height: 1px;
	margin-block: 2.5rem 1.5rem;
	opacity: 0.2;
}

/* The source CTA panel is narrower than the content container. */
.domo-cta {
	margin-inline: auto;
	max-width: 50rem;
}

.domo-footer__lockup {
	gap: 0.625rem;
}

/* The footer lockup is a step smaller than the header's in the source. */
.domo-footer__lockup .domo-wordmark__name {
	font-size: 1.125rem;
	line-height: 1.556;
}

.domo-footer__lockup .domo-wordmark__kind {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	line-height: 1.333;
	margin-top: 0;
}

/* --- Contact Form 7 ------------------------------------------------------
 * CF7 ships almost no styling, so the form is dressed here to match the
 * source's field layout: labels above inputs, two columns above 640px.
 */

.domo-form-shell .wpcf7 p {
	margin: 0;
}

.domo-form-shell .wpcf7-form > p,
.domo-form-shell .domo-form-grid > p {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.domo-form-grid {
	display: grid;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
	.domo-form-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.domo-form-shell label {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.domo-form-shell .wpcf7-form-control-wrap {
	display: block;
}

/*
 * `box-sizing` is not inherited here: text inputs and textareas compute as
 * content-box, so `width: 100%` plus the padding and border made every field
 * 34px wider than its grid column — Nome overlapped Email, and the textarea
 * overflowed the card. Stated explicitly rather than assumed.
 */
.domo-form-shell input[type="text"],
.domo-form-shell input[type="email"],
.domo-form-shell input[type="tel"],
.domo-form-shell select,
.domo-form-shell textarea {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	box-sizing: border-box;
	border-radius: var(--domo-radius-btn);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.625rem 1rem;
	transition: border-color var(--domo-transition);
	width: 100%;
}

.domo-form-shell input:focus,
.domo-form-shell select:focus,
.domo-form-shell textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

.domo-form-shell textarea {
	resize: vertical;
}

.domo-form-shell .wpcf7-submit {
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--domo-radius-btn);
	color: var(--wp--preset--color--primary-contrast);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	box-sizing: border-box;
	margin-top: 1.5rem;
	padding: 0.875rem 1.75rem;
	transition: transform var(--domo-transition), background-color var(--domo-transition);
	width: 100%;
}

/*
 * The source shrink-wraps this button above 782px (`w-full md:w-auto`). Two
 * attempts to reproduce that — a later same-specificity rule and a heavier
 * selector — both failed to take effect, with no competing rule visible in the
 * CSSOM to explain it. Left full width, which reads deliberately in this card;
 * revisit if the difference ever matters.
 */

.domo-form-shell .wpcf7-submit:hover {
	transform: translateY(-2px);
}

.domo-form-shell .wpcf7-not-valid-tip {
	color: #b32d2e;
	font-size: var(--wp--preset--font-size--x-small);
}

.domo-form-shell .wpcf7-response-output {
	border-radius: var(--domo-radius-btn);
	font-size: var(--wp--preset--font-size--small);
	margin: 1.5rem 0 0;
	padding: 0.75rem 1rem;
}

/* Intro text sits in a flow container (`domo-stack`) rather than directly in a
 * constrained one. Core's constrained layout gives every child auto margins,
 * which would centre a width-capped lead; inside a flow container the cap
 * simply shortens the line and the text stays on the content column's edge.
 */
.domo-lead {
	max-width: 42rem;
}

.has-text-align-center .domo-lead,
.domo-lead.has-text-align-center {
	margin-inline: auto;
}

.domo-stack > * + * {
	margin-top: 0.75rem;
}

.domo-stack > .wp-block-buttons,
.domo-stack > .wp-block-heading {
	margin-top: 1rem;
}

/* --- Process steps: circled icons, then a separate row of cards ---------
 * The source rings each icon in white with a green border and a pale halo,
 * links the circles with green chevrons, and puts the descriptions in their
 * own aligned row below.
 */

.domo-steps {
	align-items: start;
	justify-items: center;
}

.domo-step {
	position: relative;
	text-align: center;
	width: 100%;
}

/* Connector chevron, centred on the circle and pointing at the next step. */
.domo-step--linked::after {
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22%3E%3C/path%3E%3C/svg%3E") center / 0.9rem no-repeat;
	border-radius: 999px;
	content: "";
	height: 1.75rem;
	position: absolute;
	right: -0.875rem;
	top: 3.5rem;
	transform: translateY(-50%);
	width: 1.75rem;
}

@media (max-width: 781px) {
	.domo-step--linked::after {
		display: none;
	}
}

.domo-step-column {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.domo-step__card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--domo-radius-card);
	flex: 1;
	margin-top: var(--wp--preset--spacing--40);
}

/* --- Header CTA glyphs --------------------------------------------------
 * The source puts an icon inside each header button. Core buttons hold rich
 * text, so inline SVG there would fail block validation; a masked pseudo
 * element gives the same result and keeps the block editable.
 */

.domo-button--phone .wp-block-button__link::before,
.domo-button--lock .wp-block-button__link::before {
	background: currentColor;
	content: "";
	display: inline-block;
	height: 0.95rem;
	margin-right: 0.45rem;
	vertical-align: -0.12em;
	width: 0.95rem;
}

.domo-button--phone .wp-block-button__link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2a9 9 0 0 1 9 9%22%3E%3C/path%3E%3Cpath d=%22M13 6a5 5 0 0 1 5 5%22%3E%3C/path%3E%3Cpath d=%22M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2a9 9 0 0 1 9 9%22%3E%3C/path%3E%3Cpath d=%22M13 6a5 5 0 0 1 5 5%22%3E%3C/path%3E%3Cpath d=%22M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

.domo-button--lock .wp-block-button__link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22%3E%3C/rect%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22 ry=%222%22%3E%3C/rect%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}

/* Footer contact rows align their glyph with the first line of text. */
.domo-footer__contact {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
}

.domo-footer__contact .domo-icon {
	color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.domo-footer__contact .domo-icon svg {
	height: 1rem;
	width: 1rem;
}


/* --- Responsive grids ----------------------------------------------------
 * Card grids use an explicit desktop column count so they match the source
 * exactly; core's grid layout has no breakpoints of its own, so the stacking
 * behaviour lives here. Selectors are doubled up to out-specify the layout
 * CSS core prints after the theme stylesheet.
 */

@media (max-width: 1023px) {
	.wp-block-group.domo-card-grid--3,
	.wp-block-group.domo-card-grid--4,
	.wp-block-group.domo-steps,
	.wp-block-group.domo-step-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.wp-block-group.domo-card-grid--2,
	.wp-block-group.domo-card-grid--3,
	.wp-block-group.domo-card-grid--4,
	.wp-block-group.domo-steps,
	.wp-block-group.domo-step-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Map embed ----------------------------------------------------------- */

.domo-map {
	border-radius: var(--domo-radius-card);
	overflow: hidden;
}

.domo-map iframe {
	display: block;
	width: 100%;
}


/* --- Line heights ---------------------------------------------------------
 * The source is Tailwind, whose leading is tied to each size step. A single
 * root line-height left small text noticeably looser than the original.
 */

.has-x-small-font-size {
	line-height: 1.333;
}

.has-small-font-size {
	line-height: 1.4286;
}

.has-medium-font-size {
	line-height: 1.5;
}

/* --- Measure --------------------------------------------------------------
 * Section headings are width-capped in the source (max-w-2xl / max-w-3xl);
 * without this they run the full content width and under-wrap.
 */

.domo-stack > h1 {
	max-width: 48rem;
}

.domo-stack > h2 {
	max-width: 42rem;
}

/* A display-sized h2 uses the tight leading the source gives its h1. */
.domo-stack > h2.has-display-font-size {
	line-height: 1.05;
	max-width: 48rem;
}

/* Some sections shrink-wrap to their capped text and centre in the viewport. */
.domo-block-centered {
	margin-inline: auto;
	max-width: 48rem;
}

/* The wrapper already sets the measure, so its descendants fill it rather than
   applying their own narrower caps on top. */
.domo-block-centered .domo-lead,
.domo-block-centered .domo-stack > h1,
.domo-block-centered .domo-stack > h2 {
	max-width: none;
}

.domo-stack.has-text-align-center > h1,
.domo-stack.has-text-align-center > h2 {
	margin-inline: auto;
	max-width: none;
}


/* Centred page headers are the one place the source scales the h1 down on
   small screens (text-4xl md:text-5xl); the rest stay at 48px throughout. */
.domo-page-header.has-text-align-center h1,
.domo-page-header .domo-stack.has-text-align-center h1 {
	font-size: 2.25rem;
}

@media (min-width: 782px) {
	.domo-page-header.has-text-align-center h1,
	.domo-page-header .domo-stack.has-text-align-center h1 {
		font-size: 3rem;
	}
}

/* --- Headings the source scales between breakpoints ---------------------- */

/* Products CTA: text-2xl md:text-3xl. */
.domo-cta h2.domo-cta__heading--sm {
	font-size: 1.5rem;
	line-height: 1.33;
}

@media (min-width: 782px) {
	.domo-cta h2.domo-cta__heading--sm {
		font-size: 1.875rem;
	}
}

/* Partners closing heading: text-4xl md:text-5xl. */
.domo-heading--display-responsive {
	font-size: 2.25rem;
	line-height: 1.1;
	max-width: 48rem;
}

@media (min-width: 782px) {
	.domo-heading--display-responsive {
		font-size: 3rem;
	}
}


/* Partner names on /sobre are text-3xl, a step below the section headings. */
.domo-heading--3xl {
	font-size: 1.875rem;
}

/* Leading follows the size step, not the heading level: a small h2 in the
   source has the same leading as any other 20px text. */
.wp-block-heading.has-large-font-size {
	line-height: 1.556;
}

.wp-block-heading.has-x-large-font-size {
	line-height: 1.4;
}

.wp-block-heading.has-xx-large-font-size {
	line-height: 1.333;
}

/* --- Leading for locally-sized text --------------------------------------
 * These classes set a font size in CSS rather than through a preset class, so
 * they inherit the root 1.5 leading instead of the size-linked value the
 * source uses. Stated explicitly rather than left to inheritance.
 */

.domo-footer__nav,
.domo-form-shell label,
.domo-inline-link,
.domo-step__title,
.domo-tags__label {
	line-height: 1.4286;
}

.domo-tag,
.domo-wordmark__tagline,
.domo-pill,
.domo-check-list,
.domo-check-list li,
.domo-form-shell .wpcf7-not-valid-tip {
	line-height: 1.333;
}


/* --- Heading weight ------------------------------------------------------
 * The source only sets extrabold on its large section headings; a small h2
 * such as "Dados de contacto" is bold. Weight follows the size step.
 */

.wp-block-heading.has-large-font-size,
.wp-block-heading.has-x-large-font-size,
.wp-block-heading.has-xx-large-font-size {
	font-weight: 700;
}

/* Two page headers are bold rather than extrabold in the source. */
.domo-heading--bold {
	font-weight: 700;
}

/* --- Process steps on mobile ---------------------------------------------
 * The source ships a separate mobile layout for this section: the circle moves
 * to the left with the title, actor and description stacked beside it, and the
 * description loses its card. `display: contents` on the step lets its parts
 * join the column grid so the same markup produces both layouts.
 */

@media (max-width: 599px) {
	.domo-step-column {
		align-items: start;
		column-gap: 1.5rem;
		display: grid;
		grid-template-columns: 4rem 1fr;
		row-gap: 0.125rem;
	}

	.domo-step {
		display: contents;
	}

	.domo-step .domo-icon--step {
		align-self: center;
		box-shadow: 0 0 0 5px var(--wp--preset--color--base), 0 0 0 7px rgba(58, 183, 107, 0.25);
		grid-column: 1;
		grid-row: 1 / span 3;
		height: 4rem;
		margin-bottom: 0;
		width: 4rem;
	}

	.domo-step .domo-icon--step svg {
		height: 1.5rem;
		width: 1.5rem;
	}

	.domo-step__title,
	.domo-step__actor {
		grid-column: 2;
		text-align: left;
	}

	.domo-step__card {
		background: none;
		border: 0;
		grid-column: 2;
		margin-top: 0.25rem;
		padding: 0;
	}

	.domo-step--linked::after {
		display: none;
	}
}

/* --- Floating WhatsApp CTA ------------------------------------------------
 * Not part of the Remixer original: an addition requested after migration.
 * Uses WhatsApp's own green so the affordance is recognisable, and expands to
 * show a label on pointer devices while staying a plain circle on touch.
 */

.domo-whatsapp {
	align-items: center;
	background: #25d366;
	border-radius: 999px;
	bottom: 1.25rem;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	color: #fff;
	display: inline-flex;
	gap: 0.5rem;
	box-sizing: border-box;
	height: 3.5rem;
	justify-content: center;
	padding: 0;
	position: fixed;
	right: 1.25rem;
	text-decoration: none;
	transition: transform var(--domo-transition), box-shadow var(--domo-transition);
	width: 3.5rem;
	z-index: 200;
}

.domo-whatsapp .domo-icon {
	color: #fff;
	flex-shrink: 0;
}

.domo-whatsapp .domo-icon svg {
	height: 1.75rem;
	width: 1.75rem;
}

.domo-whatsapp__label {
	display: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4286;
	white-space: nowrap;
}

.domo-whatsapp:hover,
.domo-whatsapp:focus-visible {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
	color: #fff;
	transform: translateY(-2px);
}

.domo-whatsapp:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Widen to a labelled pill where there is room and a pointer to hover with. */
@media (min-width: 782px) and (hover: hover) {
	.domo-whatsapp {
		padding: 0 1.25rem;
		width: auto;
	}

	.domo-whatsapp__label {
		display: inline;
	}
}

/* Keep clear of the admin bar for logged-in editors. */
.admin-bar .domo-whatsapp {
	bottom: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.domo-whatsapp {
		transition: none;
	}

	.domo-whatsapp:hover,
	.domo-whatsapp:focus-visible {
		transform: none;
	}
}

@media print {
	.domo-whatsapp {
		display: none;
	}
}

/* --- Consent-gated map ---------------------------------------------------
 * Google offers no privacy-preserving Maps embed, so the page ships a
 * self-hosted still of the same area and loads the iframe only on request.
 * The still is built from OpenStreetMap tiles — Google's imagery may not be
 * copied and re-hosted — hence the credit line.
 */

.domo-map {
	border-radius: var(--domo-radius-card);
	overflow: hidden;
	position: relative;
}

.domo-map iframe {
	display: block;
	width: 100%;
}

.domo-map__still {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.domo-map--gated {
	background: var(--wp--preset--color--muted);
}

/* Scrim keeps the button and its explanation legible over the map. */
.domo-map__gate {
	align-items: center;
	background: rgba(27, 43, 79, 0.55);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	inset: 0;
	justify-content: center;
	padding: 1.5rem;
	position: absolute;
	text-align: center;
}

.domo-map__note {
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4286;
	margin: 0;
	max-width: 34rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.domo-map__button {
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--domo-radius-btn);
	color: var(--wp--preset--color--primary-contrast);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	padding: 0.875rem 1.75rem;
	transition: transform var(--domo-transition), background-color var(--domo-transition);
}

.domo-map__button:hover {
	background: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}

.domo-map__button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.domo-map__credit {
	background: rgba(255, 255, 255, 0.85);
	border-radius: 0.25rem;
	bottom: 0.5rem;
	color: var(--wp--preset--color--muted-text);
	font-size: 0.6875rem;
	left: 0.5rem;
	line-height: 1.3;
	margin: 0;
	padding: 0.125rem 0.375rem;
	position: absolute;
}

.domo-map--loaded .domo-map__credit {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.domo-map__button {
		transition: none;
	}

	.domo-map__button:hover {
		transform: none;
	}
}