/*
Theme Name: Servicios Madrigal
Theme URI: https://serviciosmadrigal.local
Author: Servicios Madrigal
Description: Tema de bloques nativo de WordPress para Servicios Madrigal — construcción y mantenimiento. Compatible con Full Site Editing, portable a hosting WordPress estándar.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: servicios-madrigal
*/

/* ==========================================================================
   Servicios Madrigal — estilos complementarios a theme.json
   Estas reglas cubren composiciones (badges superpuestos, overlap de
   secciones, grid de servicios/galería) que theme.json por sí solo no
   puede expresar. Usa exclusivamente variables definidas en theme.json.
   ========================================================================== */

/*
 * Block-level flex on purpose: WordPress centres constrained children with
 * `margin-inline: auto !important`, and auto margins do not centre an
 * inline-level box. As `inline-flex` this sat flush against the viewport
 * edge on wide screens while its sibling heading centred correctly.
 */
.sm-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sm-eyebrow.has-text-align-center {
	justify-content: center;
}

.sm-eyebrow::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 2px;
	background: currentColor;
}

/* ---------- Header ---------- */
/*
 * Sticky lives on the template-part wrapper, not the inner group: a sticky
 * element only travels within its own parent, so pinning the inner div would
 * release it as soon as the header block scrolled past.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.sm-header .wp-block-navigation {
	--wp--custom--nav-gap: 2rem;
}

/*
 * The desktop nav is right-aligned; reset that inside the mobile overlay so
 * the links are centred and never sit flush against the viewport edge.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 4.5rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	padding: 0.35rem 0;
}

/* Visible keyboard focus everywhere, not just in the header. */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation-item__content:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
	border-radius: 4px;
}

/* The orange CTA band needs a dark ring to stay visible against it. */
.sm-cta-final a:focus-visible,
.sm-cta-final button:focus-visible {
	outline-color: var(--wp--preset--color--navy);
}

/*
 * The supplied logo is navy-on-transparent artwork, so on the navy header it
 * sits on a light plate instead of being recoloured — the brand file itself is
 * never filtered, tinted or distorted. The plate is sized generously so the
 * "SERVICIOS MADRIGAL" wordmark stays readable rather than shrinking to a chip.
 */
.sm-header__logo,
.sm-footer__logo {
	background: #ffffff;
	border-radius: 10px;
	padding: 0.5rem 0.9rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.sm-header__logo img,
.sm-footer__logo img {
	height: 42px;
	width: auto;
	display: block;
}

.sm-footer__logo img {
	height: 36px;
}

.sm-header__logo .wp-block-site-logo,
.sm-footer__logo .wp-block-site-logo {
	line-height: 0;
}

.sm-header__logo .custom-logo-link,
.sm-footer__logo .custom-logo-link {
	display: block;
	line-height: 0;
}

@media (max-width: 599px) {
	.sm-header__logo {
		padding: 0.4rem 0.7rem;
	}

	.sm-header__logo img {
		height: 32px;
	}
}

/* ---------- Hero ---------- */
.sm-hero {
	position: relative;
	overflow: visible;
}

.sm-hero__eyebrow {
	color: var(--wp--preset--color--orange);
}

.sm-hero h1 mark,
.sm-hero__accent {
	background: none;
	color: var(--wp--preset--color--orange);
}

.sm-hero__media {
	position: relative;
}

.sm-hero__media img {
	border-radius: var(--radius-lg, 20px);
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.sm-badge {
	position: absolute;
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--card-lg);
	padding: 0.65rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.8125rem;
	line-height: 1.25;
	z-index: 2;
}

.sm-badge--top {
	top: 1rem;
	right: 1rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1rem;
}

.sm-badge p {
	margin: 0;
}

.sm-badge--bottom {
	left: -1.25rem;
	bottom: -1.25rem;
}

.sm-badge--bottom::before {
	content: "";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--green);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7 9 18l-5-5'/%3E%3C/svg%3E");
}

.sm-badge strong {
	display: block;
	font-size: 1rem;
	font-family: var(--wp--preset--font-family--heading);
}

/* ---------- Service cards (overlap hero/light section) ---------- */
/*
 * Core's layout stylesheet zeroes margin-block-start on first children and
 * applies auto inline margins, so these rules are scoped tightly enough to
 * win on specificity rather than relying on !important.
 */
.wp-block-group.sm-services-wrap {
	margin-top: 0;
	padding-top: 0;
}

/*
 * Rendered as a grid rather than core's flex columns: core stacks columns
 * below 782px with an !important flex-basis, which a grid container simply
 * ignores. This gives predictable 4 / 2 / 1 column behaviour.
 */
.sm-services-wrap > .sm-services {
	margin-top: clamp(-4.5rem, -6vw, -3rem);
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

.sm-service-card {
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: var(--radius-md, 14px);
	box-shadow: var(--wp--preset--shadow--card);
	border: 1px solid var(--wp--preset--color--gray-100);
	border-top: 3px solid var(--wp--preset--color--gray-400);
	padding: 1.75rem 1.5rem;
}

.sm-service-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sm-service-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--card-lg);
}

.sm-service-card--remodelacion { border-top-color: var(--wp--preset--color--green); }
.sm-service-card--electricidad { border-top-color: var(--wp--preset--color--orange); }
.sm-service-card--soldadura { border-top-color: var(--wp--preset--color--teal); }
.sm-service-card--plomeria { border-top-color: #3B67D6; }

/*
 * Decorative section icons are drawn from CSS rather than embedded in post
 * content, so the page stays made of plain editable blocks and an editor
 * cannot accidentally delete or break them.
 */
.sm-service-card::before,
.sm-urgent-card::before,
.sm-stat::before {
	content: "";
	display: block;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-position: center;
}

.sm-service-card::before {
	width: 42px;
	height: 42px;
	background-size: 22px 22px;
	margin-bottom: 1rem;
}

.sm-service-card--remodelacion::before {
	background-color: #E6F8EF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2312A150' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V8l7-5 7 5v13'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}

.sm-service-card--electricidad::before {
	background-color: #FDF2E1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8Z'/%3E%3C/svg%3E");
}

.sm-service-card--soldadura::before {
	background-color: #E4F7F4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230F9D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2s5 5.5 5 10a5 5 0 0 1-10 0c0-1.7.7-3.3 1.5-4.6'/%3E%3Cpath d='M12 22v-4'/%3E%3C/svg%3E");
}

.sm-service-card--plomeria::before {
	background-color: #E7EEFC;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233B67D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5S6 9 6 13.5a6 6 0 0 0 12 0C18 9 12 2.5 12 2.5Z'/%3E%3C/svg%3E");
}

.sm-service-card h3 {
	font-size: 1.0625rem;
	margin: 0 0 0.5rem;
}

.sm-service-card p {
	color: var(--wp--preset--color--gray-600);
	font-size: 0.9375rem;
	margin: 0;
}

/* ---------- Why us ---------- */
.sm-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.sm-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	color: var(--wp--preset--color--gray-600);
	font-size: 0.9375rem;
}

.sm-checklist li::before {
	content: "\2713";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	margin-top: 0.1rem;
}

.sm-urgent-card {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-radius: var(--radius-lg, 20px);
	padding: 2rem;
}

.sm-urgent-card p {
	color: rgba(255,255,255,0.75);
}

.sm-urgent-card::before {
	width: 44px;
	height: 44px;
	background-color: rgba(245, 166, 35, 0.15);
	background-size: 22px 22px;
	margin-bottom: 1rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.sm-stats {
	margin-top: 1.5rem;
}

.sm-stat {
	box-sizing: border-box;
	background: var(--wp--preset--color--gray-50);
	border-radius: var(--radius-md, 14px);
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--gray-100);
}

.sm-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.15rem;
}

.sm-stat__label {
	color: var(--wp--preset--color--gray-600);
	font-size: 0.8125rem;
	margin: 0;
}

.sm-stat::before {
	width: 20px;
	height: 20px;
	border-radius: 0;
	background-size: 18px 18px;
	margin-bottom: 0.6rem;
}

.sm-stat--experiencia::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.3A7 7 0 0 0 12 2Z'/%3E%3Cpath d='M9 22h6'/%3E%3C/svg%3E");
}

.sm-stat--proyectos::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7 9 18l-5-5'/%3E%3C/svg%3E");
}

.sm-stat--clientes::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

.sm-stat--tecnicos::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 6v6c0 5 3.4 9.2 8 10 4.6-.8 8-5 8-10V6l-8-4Z'/%3E%3C/svg%3E");
}

/* ---------- Anchor targets ---------- */
/*
 * The header is sticky, so anchored sections must reserve its height or the
 * heading lands underneath it when jumping from the nav.
 */
:where(#servicios, #proyectos, #contacto),
.sm-gallery-section,
.sm-cta-final {
	scroll-margin-top: 6rem;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.sm-cta-final .sm-eyebrow {
	color: var(--wp--preset--color--navy);
	opacity: 0.75;
}

/* ---------- Footer ---------- */
.sm-footer a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
}

.sm-footer a:hover {
	color: var(--wp--preset--color--orange);
}

.sm-footer__logo {
	display: inline-block;
}

.sm-footer__legal {
	gap: 0.5rem 1.5rem;
}

.sm-footer__legal p {
	margin: 0;
	opacity: 0.7;
}

.sm-footer__credit {
	white-space: nowrap;
}

@media (max-width: 599px) {
	.sm-footer__credit {
		white-space: normal;
	}
}

/* ---------- Buttons ---------- */
/* Core ships no hover state for wp-element-button; add a restrained one. */
.wp-element-button,
.wp-block-button__link {
	transition: filter 0.18s ease, transform 0.18s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
}

/* ---------- Utility ---------- */
.sm-radius-lg { border-radius: var(--radius-lg, 20px); }

/* Available to screen readers and keyboard users, hidden visually. */
.sm-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Metrics use the same grid approach so they stay two-up on phones. */
.wp-block-columns.sm-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (max-width: 960px) {
	.sm-services-wrap > .sm-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.sm-services-wrap > .sm-services { margin-top: -2.5rem; }
	.sm-badge--bottom { left: 1rem; bottom: -1rem; }
}

@media (max-width: 599px) {
	.sm-services-wrap > .sm-services {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 1.5rem;
	}
	.wp-block-group.sm-services-wrap { padding-top: 2rem; }
	.sm-badge--bottom { position: static; margin-top: 0.75rem; display: inline-flex; }
	.sm-hero__media { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}