/*
 * LAU home - "Contacto y cotizacion" section support layer.
 *
 * Background, colours, border, radius, padding, shadow and every gap on the
 * editable blocks come from block attributes and theme.json presets; the
 * contact cards' hover comes from the shared `lau-interactive-cards` utility.
 * Only what Gutenberg has no control for lives here: the icon glyphs, the
 * social row, the Fluent Forms quote form's visual styling (the form itself
 * is a real Fluent Forms form rendered through its own native block - see
 * contacto.php) and the reveal.
 *
 * Every selector is scoped to .lau-contacto, so nothing here can reach the
 * header, the hero or the previous sections.
 */

.lau-contacto__intro > * {
	max-width: 34rem;
}

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

/*
 * A circular outline, not the solid ink square used elsewhere: these read as
 * direct channels (call, write, find us), a lighter register than the
 * feature-list icons in "Por que elegirnos" or "A quien atendemos".
 */
.lau-contacto__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--spx-border);
	background-color: var(--wp--preset--color--spx-surface);
}

.lau-contacto__icon::before {
	content: "";
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--spx-primary);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Identical glyph to the hero's own WhatsApp button, reused rather than redrawn. */
.lau-contacto__icon-whatsapp::before {
	-webkit-mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E");
	mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E");
}

.lau-contacto__icon-mail::before {
	-webkit-mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
	mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* Identical glyph to the delineacion coverage note, reused rather than redrawn. */
.lau-contacto__icon-pin::before {
	-webkit-mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.lau-contacto__card-body {
	min-width: 0;
}

.lau-contacto__card-body p:not(:first-child),
.lau-contacto__card-body a,
.lau-contacto__panel > p,
.lau-contacto .fluentform .ff-el-input--label label,
.lau-contacto .fluentform .ff-el-form-control {
	font-size: 1rem !important;
}

.lau-contacto__card-body p:not(:first-child),
.lau-contacto__panel > p {
	line-height: 1.55 !important;
}

.lau-contacto__card-body a {
	color: inherit;
	text-decoration: none;
}

.lau-contacto__card-body a:hover {
	text-decoration: underline;
}

/* ---------- Social row ---------- */

/*
 * Explicit margin-top rather than relying on the column's own blockGap: the
 * cards group and the social row are two separate top-level blocks in that
 * column, and the gap between them measured 0px in practice, not the
 * spacing|50 the column's blockGap attribute implied.
 */
.lau-contacto__social {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
}

.lau-contacto__social-item {
	margin: 0;
}

.lau-contacto__social-item a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--spx-border);
	border-radius: 0.4rem;
	color: var(--wp--preset--color--spx-muted-foreground);
	font-size: 1rem;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.lau-contacto__social-item a:hover {
	color: var(--wp--preset--color--spx-ink);
	border-color: var(--wp--preset--color--spx-ink-soft);
}

.lau-contacto__social-icon {
	width: 0.9rem;
	height: 0.9rem;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.lau-contacto__social-icon-instagram {
	-webkit-mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
	mask-image: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E");
}

.lau-contacto__social-icon-facebook {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94z'/%3E%3C/svg%3E");
}

.lau-contacto__social-icon-tiktok {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.6 5.82a4.28 4.28 0 0 1-3.14-1.4V15a4.6 4.6 0 1 1-3.86-4.54v2.35a2.28 2.28 0 1 0 1.59 2.17V2h2.27a4.28 4.28 0 0 0 3.14 3.68z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.6 5.82a4.28 4.28 0 0 1-3.14-1.4V15a4.6 4.6 0 1 1-3.86-4.54v2.35a2.28 2.28 0 1 0 1.59 2.17V2h2.27a4.28 4.28 0 0 0 3.14 3.68z'/%3E%3C/svg%3E");
}

/* ---------- Form (Fluent Forms) ---------- */

/*
 * The form renders through Fluent Forms' own native Gutenberg block
 * (`fluentfom/guten-block`, see contacto.php) instead of raw HTML, so these
 * rules target the plugin's own class names, not ones this project defined.
 * Fluent Forms ships its own default stylesheet with its own colours and
 * spacing on the same elements, so matching this section's look needs
 * `!important` in several places to reliably win - the same pattern used
 * everywhere else in this project for a framework/preset's own baked-in
 * styles, just this time the framework is a plugin instead of Gutenberg.
 */
.lau-contacto .fluentform {
	margin-top: var(--wp--preset--spacing--50);
}

.lau-contacto .fluentform .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

.lau-contacto .fluentform .ff-t-container {
	margin-bottom: var(--wp--preset--spacing--40) !important;
	gap: var(--wp--preset--spacing--40);
}

.lau-contacto .fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--spx-mono);
	font-size: var(--wp--preset--font-size--spx-xs);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--spx-ink);
}

.lau-contacto .fluentform .ff-el-form-control {
	box-sizing: border-box;
	width: 100% !important;
	height: 2.85rem !important;
	padding: 0 0.9rem !important;
	border: 1px solid var(--wp--preset--color--spx-border) !important;
	border-radius: 0.4rem !important;
	background-color: var(--wp--preset--color--spx-surface) !important;
	color: var(--wp--preset--color--spx-ink) !important;
	font-family: inherit !important;
	font-size: var(--wp--preset--font-size--spx-small) !important;
	transition: border-color 0.2s ease;
}

.lau-contacto .fluentform .ff-el-form-control::placeholder {
	color: var(--wp--preset--color--spx-muted-foreground);
}

.lau-contacto .fluentform .ff-el-form-control:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: var(--wp--preset--color--spx-primary) !important;
}

.lau-contacto .fluentform select.ff-el-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7076' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1rem;
	padding-right: 2.5rem !important;
}

.lau-contacto .fluentform textarea.ff-el-form-control {
	height: auto !important;
	padding-top: 0.7rem !important;
	padding-bottom: 0.7rem !important;
	resize: vertical;
	line-height: 1.5;
}

/*
 * "Ubicacion" reads as one framed card (section title, then the two rows of
 * fields) built from three separate, ordinary Fluent Forms elements joined
 * purely with matching borders and radii - not a single fieldset, because
 * the plugin has no field type that groups a title, a hint and several
 * inputs into one visual container. The section-break field is the one
 * piece that ignores its own `container_class` setting (confirmed by
 * rendering it - every other field type here honours it), so it is
 * targeted by the `data-name` prefix Fluent Forms always gives that field
 * type instead.
 */
.lau-contacto .fluentform [data-name^="section_break"],
.lau-contacto .fluentform .lau-ff-location {
	border-left: 1px solid var(--wp--preset--color--spx-border);
	border-right: 1px solid var(--wp--preset--color--spx-border);
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
	margin-bottom: 0 !important;
}

.lau-contacto .fluentform [data-name^="section_break"] {
	border-top: 1px solid var(--wp--preset--color--spx-border);
	border-radius: 0.5rem 0.5rem 0 0;
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: 0.5rem;
}

.lau-contacto .fluentform [data-name^="section_break"] hr {
	display: none;
}

.lau-contacto .fluentform [data-name^="section_break"] .ff-el-section-title {
	margin: 0 0 0.4rem;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--spx-mono);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--spx-ink);
}

.lau-contacto .fluentform [data-name^="section_break"] .ff-section_break_desk {
	margin: 0;
	color: var(--wp--preset--color--spx-muted-foreground);
	font-size: 1rem;
}

.lau-contacto .fluentform .ff-t-container.lau-ff-location {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.lau-contacto .fluentform .ff-el-group.lau-ff-location {
	border-bottom: 1px solid var(--wp--preset--color--spx-border);
	border-radius: 0 0 0.5rem 0.5rem;
	padding-top: 0.75rem;
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* ---------- Submit ---------- */

/*
 * Fluent Forms renders the submit button as a plain <button>, not a
 * `wp-block-button`, so the shared `lau-interactive-cards` utility cannot
 * reach it. Its hover mirrors that utility's own button treatment - same
 * lift, easing and shadow escalation - the same way the standalone submit
 * buttons in inicio/sections/descargar.php and cta.php already do. The
 * `container_class: "lau-contacto__submit"` set on the button field in the
 * registration script is what puts that class on its wrapper div - unlike
 * section_break, this field type does honour it.
 */
.lau-contacto .fluentform .lau-contacto__submit {
	margin-bottom: 0 !important;
}

.lau-contacto .fluentform button.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100% !important;
	height: 3rem !important;
	border: 0 !important;
	border-radius: 0.5rem !important;
	background-color: var(--wp--preset--color--spx-primary) !important;
	box-shadow: var(--wp--preset--shadow--spx-plan);
	color: var(--wp--preset--color--spx-paper) !important;
	font-family: inherit !important;
	font-size: var(--wp--preset--font-size--spx-body) !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition:
		transform 0.5s cubic-bezier(0.16, 0.84, 0.28, 1),
		box-shadow 0.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.lau-contacto .fluentform button.ff-btn-submit::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
	.lau-contacto .fluentform button.ff-btn-submit:hover {
		transform: translateY(-0.125rem);
		box-shadow: var(--wp--preset--shadow--spx-lift);
		background-color: var(--wp--preset--color--spx-primary) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lau-contacto .fluentform button.ff-btn-submit:hover {
		transform: none;
	}
}

/* ---------- Reveal ---------- */

/*
 * Scroll-driven, so it needs no JavaScript, and guarded twice: browsers
 * without `animation-timeline` never run it and show the content as it is,
 * and a reduced-motion preference opts out. The content is therefore never
 * hidden by a timeline that failed to resolve.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lau-contacto__intro,
		.lau-contacto__cards,
		.lau-contacto__panel {
			animation: lau-contacto-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		@keyframes lau-contacto-reveal {
			from {
				opacity: 0;
				transform: translateY(1.25rem);
			}

			to {
				opacity: 1;
				transform: none;
			}
		}
	}
}