/*!
Theme Name: Concrete
Theme URI: https://ejemplo.com/concrete
Author: Tu Nombre
Author URI: https://ejemplo.com
Description: Block Theme reutilizable para empresas de hormigon y construccion. Full Site Editing con patrones personalizados.
Version: 2.0.0
Tested up to: 6.7
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: concrete
Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, template-editing, wide-blocks

Concrete - Block Theme para empresas de construccion
Stack: CSS Moderno 2024/2025 - Container Queries, CSS Nesting, Logical Properties
*/

/* ==========================================================================
   # DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
	/* ---------------------------------------------
	   Color Tokens - Heredan de WordPress theme.json
	   Cambia los colores en Apariencia > Editor > Estilos
	   --------------------------------------------- */
	--color-primary: var(--wp--preset--color--primary, #FF6B00);
	--color-primary-dark: var(--wp--preset--color--primary-dark, #CC5500);
	--color-primary-light: color-mix(in oklch, var(--color-primary) 80%, white);
	--color-secondary: var(--wp--preset--color--secondary, #1A1A1A);
	--color-secondary-light: var(--wp--preset--color--dark, #333333);
	--color-accent: var(--wp--preset--color--accent, #FFD700);

	/* Neutrals - Heredan de WordPress */
	--color-white: var(--wp--preset--color--white, #FFFFFF);
	--color-light: var(--wp--preset--color--light, #F5F5F5);
	--color-gray-100: #F3F4F6;
	--color-gray-200: #E5E7EB;
	--color-gray-300: #D1D5DB;
	--color-gray-400: #9CA3AF;
	--color-gray-500: var(--wp--preset--color--gray, #6B7280);
	--color-gray-600: #4B5563;
	--color-gray-700: #374151;
	--color-gray-800: #1F2937;
	--color-gray-900: #111827;
	--color-black: #000000;

	/* Semantic Colors */
	--color-text: var(--color-gray-800);
	--color-text-muted: var(--color-gray-500);
	--color-text-inverse: var(--color-white);
	--color-border: var(--color-gray-200);
	--color-border-light: var(--color-gray-100);
	--color-surface: var(--color-white);
	--color-surface-elevated: var(--color-white);

	/* ---------------------------------------------
	   Typography Tokens - Fluid Typography
	   Using clamp() for responsive sizing
	   --------------------------------------------- */

	/* Font Families */
	--font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
	--font-body: "Open Sans", system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

	/* Fluid Font Sizes: clamp(min, preferred, max) */
	--text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
	--text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
	--text-base: clamp(0.938rem, 0.875rem + 0.3vw, 1rem);
	--text-lg: clamp(1.063rem, 0.95rem + 0.5vw, 1.125rem);
	--text-xl: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
	--text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
	--text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
	--text-4xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
	--text-5xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
	--text-6xl: clamp(2.75rem, 2rem + 3.75vw, 3.75rem);
	--text-hero: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);

	/* Line Heights */
	--leading-none: 1;
	--leading-tight: 1.2;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 1.75;

	/* Font Weights */
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* Letter Spacing */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0em;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;

	/* ---------------------------------------------
	   Spacing Tokens - Fluid Spacing
	   --------------------------------------------- */
	--space-3xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
	--space-2xs: clamp(0.375rem, 0.3rem + 0.375vw, 0.5rem);
	--space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
	--space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
	--space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
	--space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	--space-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
	--space-2xl: clamp(3rem, 2.25rem + 3.75vw, 4.5rem);
	--space-3xl: clamp(4rem, 3rem + 5vw, 6rem);
	--space-4xl: clamp(6rem, 4.5rem + 7.5vw, 9rem);

	/* Gutter (main layout padding) */
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

	/* ---------------------------------------------
	   Layout Tokens
	   --------------------------------------------- */
	--container-xs: 20rem;    /* 320px */
	--container-sm: 24rem;    /* 384px */
	--container-md: 28rem;    /* 448px */
	--container-lg: 32rem;    /* 512px */
	--container-xl: 36rem;    /* 576px */
	--container-2xl: 42rem;   /* 672px */
	--container-3xl: 48rem;   /* 768px */
	--container-4xl: 56rem;   /* 896px */
	--container-5xl: 64rem;   /* 1024px */
	--container-6xl: 72rem;   /* 1152px */
	--container-7xl: 80rem;   /* 1280px */
	--container-8xl: 87.5rem; /* 1400px */
	--container-prose: 65ch;
	--container-content: 50rem;  /* 800px - WordPress default */
	--container-wide: 87.5rem;   /* 1400px - Site max width */
	--container-full: 100%;
	--content-max-width: 87.5rem;  /* 1400px - Alias for hero/sections */

	/* ---------------------------------------------
	   Border & Radius Tokens
	   --------------------------------------------- */
	--radius-none: 0;
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-xl: 0.75rem;
	--radius-2xl: 1rem;
	--radius-3xl: 1.5rem;
	--radius-full: 9999px;

	--border-width-thin: 1px;
	--border-width-medium: 2px;
	--border-width-thick: 4px;

	/* ---------------------------------------------
	   Shadow Tokens
	   --------------------------------------------- */
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
	--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

	/* ---------------------------------------------
	   Transition Tokens
	   --------------------------------------------- */
	--duration-instant: 0ms;
	--duration-fast: 150ms;
	--duration-normal: 250ms;
	--duration-slow: 350ms;
	--duration-slower: 500ms;

	--ease-linear: linear;
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

	/* ---------------------------------------------
	   Z-Index Scale
	   --------------------------------------------- */
	--z-below: -1;
	--z-base: 0;
	--z-above: 1;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-overlay: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
	--z-max: 9999;

	/* ---------------------------------------------
	   Header Specific Tokens
	   --------------------------------------------- */
	--header-height-top: clamp(2rem, 1.75rem + 1.25vw, 2.5rem);
	--header-height-main: clamp(4rem, 3.5rem + 2.5vw, 5rem);
	--header-height-total: calc(var(--header-height-top) + var(--header-height-main));
}

/* ==========================================================================
   # MODERN CSS RESET (Based on Andy Bell's Modern Reset)
   Adapted for WordPress Block Themes
   ========================================================================== */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
}

/* Remove default margin and padding */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role */
:where(ul, ol)[role="list"] {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Set core body defaults */
body {
	min-block-size: 100vh;
	line-height: var(--leading-normal);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background-color: var(--color-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, h5, h6,
button, input, label {
	line-height: var(--leading-tight);
}

/* Balance text wrapping on headings */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
	font-family: var(--font-heading);
	font-weight: var(--font-bold);
	color: var(--color-secondary);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: var(--color-primary);
	transition: color var(--duration-fast) var(--ease-out);

	&:hover {
		color: var(--color-primary-dark);
	}
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-block-size: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   # FOCUS STYLES (Accessibility)
   ========================================================================== */

/* Remove default outline and add custom focus-visible */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: 0;
	z-index: var(--z-max);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: var(--font-semibold);
	text-decoration: none;

	&:focus {
		inset-block-start: 0;
	}
}

/* Screen reader only */
.sr-only,
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   # BASE TYPOGRAPHY
   ========================================================================== */

/* Headings */
h1, .h1 { font-size: var(--text-hero); }
h2, .h2 { font-size: var(--text-5xl); }
h3, .h3 { font-size: var(--text-4xl); }
h4, .h4 { font-size: var(--text-3xl); }
h5, .h5 { font-size: var(--text-2xl); }
h6, .h6 { font-size: var(--text-xl); }

/* Paragraph defaults */
p {
	margin-block-end: var(--space-md);
	text-wrap: pretty;

	&:last-child {
		margin-block-end: 0;
	}
}

/* Strong and emphasis */
strong, b {
	font-weight: var(--font-semibold);
}

/* Small text */
small {
	font-size: var(--text-sm);
}

/* ==========================================================================
   # BUTTONS BASE STYLES
   ========================================================================== */

.btn,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
	--_btn-bg: var(--wp--preset--color--primary, var(--color-primary, #FF6B00));
	--_btn-color: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	--_btn-border: transparent;
	--_btn-padding-x: var(--space-lg);
	--_btn-padding-y: var(--space-sm);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding-block: var(--_btn-padding-y);
	padding-inline: var(--_btn-padding-x);
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	line-height: var(--leading-tight);
	text-decoration: none;
	color: var(--_btn-color);
	background-color: var(--_btn-bg);
	border: var(--border-width-medium) solid var(--_btn-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);

	&:hover {
		--_btn-bg: var(--wp--preset--color--primary-dark, var(--color-primary-dark, #CC5500));
		transform: translateY(-1px);
	}

	&:active {
		transform: translateY(0);
	}

	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary, var(--color-primary, #FF6B00));
		outline-offset: 2px;
	}
}

/* Button variants using :where() for low specificity */
:where(.btn--secondary, .wp-block-button.is-style-outline .wp-block-button__link) {
	--_btn-bg: transparent;
	--_btn-color: var(--wp--preset--color--primary, var(--color-primary, #FF6B00));
	--_btn-border: var(--wp--preset--color--primary, var(--color-primary, #FF6B00));

	&:hover {
		--_btn-bg: var(--wp--preset--color--primary, var(--color-primary, #FF6B00));
		--_btn-color: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	}
}

:where(.btn--white) {
	--_btn-bg: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	--_btn-color: var(--wp--preset--color--primary, var(--color-primary, #FF6B00));
	--_btn-border: var(--wp--preset--color--white, var(--color-white, #FFFFFF));

	&:hover {
		--_btn-bg: var(--wp--preset--color--light, var(--color-light, #F5F5F5));
		--_btn-border: var(--wp--preset--color--light, var(--color-light, #F5F5F5));
	}
}

/* Boton con fondo secundario (oscuro) - para secciones claras */
:where(.btn--dark) {
	--_btn-bg: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A));
	--_btn-color: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	--_btn-border: transparent;

	&:hover {
		--_btn-bg: var(--wp--preset--color--dark, var(--color-gray-800, #1F2937));
	}
}

/* Boton light (fondo claro) - para secciones oscuras */
:where(.btn--light) {
	--_btn-bg: var(--wp--preset--color--light, var(--color-light, #F5F5F5));
	--_btn-color: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A));
	--_btn-border: transparent;

	&:hover {
		--_btn-bg: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	}
}

/* Boton outline oscuro */
:where(.btn--outline-dark) {
	--_btn-bg: transparent;
	--_btn-color: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A));
	--_btn-border: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A));

	&:hover {
		--_btn-bg: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A));
		--_btn-color: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	}
}

/* ==========================================================================
   # WORDPRESS BLOCK OVERRIDES
   ========================================================================== */

/* Remove padding from main when hero is first child (full bleed) */
main.wp-block-group:has(> .hero:first-child),
main.wp-block-group:has(> .page-hero:first-child),
main.wp-block-group:has(> .about-hero:first-child) {
	padding: 0 !important;
	margin: 0 !important;
}

/* Ensure no gaps between sections in main */
main.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 0 !important;
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}

/* Ensure hero takes full width */
.hero.alignfull {
	max-inline-size: none;
	margin-inline: calc(-1 * var(--wp--preset--spacing--30, 1.5rem));
	inline-size: calc(100% + (2 * var(--wp--preset--spacing--30, 1.5rem)));
}

/* Page hero full width - sin espacios */
.page-hero,
.about-hero {
	inline-size: 100%;
	margin-block-start: 0 !important;
}

/* ==========================================================================
   # HEADER STYLES - Modern Responsive Header
   ========================================================================== */

/* Header Container */
.site-header {
	container-type: inline-size;
	container-name: header;
	position: relative;
	z-index: var(--z-sticky);
	background-color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

/* Top Bar */
.header-top-bar {
	background-color: var(--wp--preset--color--dark, var(--color-secondary-light, #333333));
	color: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	font-size: var(--text-sm);
	padding-block: var(--space-xs);

	& a {
		color: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover {
			color: var(--wp--preset--color--primary, var(--color-primary, #FF6B00));
		}
	}

	& .header-top-bar__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-sm);
		max-inline-size: var(--container-wide);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	& .header-top-bar__contact {
		display: flex;
		align-items: center;
		gap: var(--space-md);
		flex-wrap: wrap;
	}

	& .header-top-bar__item {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);

		& svg {
			inline-size: 1em;
			block-size: 1em;
			fill: currentColor;
		}
	}

	& .header-top-bar__divider {
		color: color-mix(in oklch, var(--wp--preset--color--white, var(--color-white, #FFFFFF)) 50%, transparent);
		user-select: none;
	}

	& .header-top-bar__right {
		display: flex;
		align-items: center;
		gap: var(--space-md);
	}

	& .header-top-bar__hours {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}

	& .header-top-bar__lang-link {
		display: inline-flex;
		align-items: center;
		padding: 0.25rem 0.625rem;
		background: rgba(255,255,255,0.1);
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: 4px;
		color: white;
		font-family: var(--font-heading, 'Montserrat', sans-serif);
		font-size: 0.75rem;
		font-weight: 600;
		text-decoration: none;
		transition: all 0.2s ease;

		&:hover {
			background: rgba(255,255,255,0.2);
			border-color: rgba(255,255,255,0.3);
			color: white;
		}
	}
}

/* Main Header */
.header-main {
	padding-block: var(--space-sm);
	border-block-end: 1px solid var(--color-border-light);

	& .header-main__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-md);
		max-inline-size: var(--container-wide);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}
}

/* Logo */
.header-logo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-decoration: none;
	flex-shrink: 0;

	& img {
		block-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
		inline-size: auto;
		object-fit: contain;
	}

	& .header-logo__text {
		display: flex;
		flex-direction: column;
		line-height: var(--leading-tight);

		& .header-logo__name {
			font-family: var(--font-heading);
			font-size: var(--text-xl);
			font-weight: var(--font-bold);
			color: var(--color-secondary);
		}

		& .header-logo__tagline {
			font-size: var(--text-xs);
			color: var(--color-gray-500);
			text-transform: uppercase;
			letter-spacing: var(--tracking-wider);
		}
	}
}

/* Main Navigation */
.header-nav {
	display: none;

	& ul {
		display: flex;
		align-items: center;
		gap: var(--space-lg);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	& a {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		padding-block: var(--space-xs);
		font-family: var(--font-heading);
		font-size: var(--text-base);
		font-weight: var(--font-medium);
		color: var(--color-secondary);
		text-decoration: none;
		transition: color var(--duration-fast) var(--ease-out);

		&:hover,
		&[aria-current="page"] {
			color: var(--color-primary);
		}

		/* Dropdown indicator */
		& .nav-dropdown-icon {
			inline-size: 0.75em;
			block-size: 0.75em;
			transition: transform var(--duration-fast) var(--ease-out);
		}
	}

	/* Submenu */
	& .has-submenu {
		position: relative;

		&:hover .submenu,
		&:focus-within .submenu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		&:hover .nav-dropdown-icon {
			transform: rotate(180deg);
		}
	}

	& .submenu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		min-inline-size: 220px;

		background: var(--color-white, #FFFFFF);
		border-radius: 0.75rem;
		box-shadow:
			0 10px 40px rgb(0 0 0 / 0.12),
			0 4px 12px rgb(0 0 0 / 0.08);

		padding: 0.5rem;
		margin: 0;
		list-style: none;

		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: all 0.2s ease;
		z-index: 1000;

		& li a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.75rem;
			padding: 0.625rem 0.875rem;
			border-radius: 0.5rem;
			font-size: 0.875rem;
			font-weight: 500;
			color: var(--color-secondary, #1A1A1A);
			transition: all 0.15s ease;

			&:hover {
				background: var(--color-light, #F5F5F5);
				color: var(--color-primary, #FF6B00);
			}

			& svg {
				inline-size: 1rem;
				block-size: 1rem;
				opacity: 0;
				transform: translateX(-4px);
				transition: all 0.15s ease;
			}

			&:hover svg {
				opacity: 1;
				transform: translateX(0);
			}
		}

		& .submenu__divider {
			block-size: 1px;
			background: var(--color-gray-200, #E5E7EB);
			margin: 0.375rem 0.5rem;
		}

		& .submenu__all a {
			font-weight: 600;
			color: var(--color-primary, #FF6B00);

			& svg {
				opacity: 0.7;
			}

			&:hover {
				background: rgba(255, 107, 0, 0.08);

				& svg {
					opacity: 1;
				}
			}
		}
	}

	/* ==========================================================================
	   MEGA MENU - Servicios
	   ========================================================================== */
	& .has-mega-menu {
		position: relative;

		&:hover .mega-menu,
		&:focus-within .mega-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}

	& .mega-menu {
		position: absolute;
		inset-block-start: calc(100% + 0.5rem);
		inset-inline-start: 50%;
		transform: translateX(-50%) translateY(8px);
		inline-size: min(500px, 85vw);

		background: var(--color-white, #FFFFFF);
		border-radius: 0.875rem;
		box-shadow:
			0 20px 40px rgb(0 0 0 / 0.12),
			0 8px 16px rgb(0 0 0 / 0.08);
		border: 1px solid var(--color-gray-200, #E5E7EB);

		opacity: 0;
		visibility: hidden;
		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1000;

		&::before {
			content: '';
			position: absolute;
			inset-block-start: -0.5rem;
			inset-inline-start: 0;
			inset-inline-end: 0;
			block-size: 0.5rem;
		}
	}

	& .has-mega-menu:hover .mega-menu,
	& .has-mega-menu:focus-within .mega-menu {
		transform: translateX(-50%) translateY(0);
	}

	& .mega-menu__content {
		padding: 0;
	}

	& .mega-menu__header {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		padding: 0.875rem 1rem;
		border-block-end: 1px solid var(--color-gray-200, #E5E7EB);
		background: var(--color-light, #F9FAFB);
		border-radius: 0.875rem 0.875rem 0 0;
	}

	& .mega-menu__title {
		font-family: var(--font-heading, 'Montserrat', sans-serif);
		font-size: 0.8125rem;
		font-weight: 700;
		color: var(--color-secondary, #1A1A1A);
	}

	& .mega-menu__subtitle {
		font-size: 0.6875rem;
		color: var(--color-gray-500, #6B7280);
	}

	& .mega-menu__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.25rem;
		padding: 0.5rem;
	}

	& .mega-menu__item {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.625rem;
		border-radius: 0.5rem;
		text-decoration: none;
		transition: all 0.15s ease;

		&:hover {
			background: var(--color-light, #F5F5F5);

			& .mega-menu__thumb {
				transform: scale(1.05);
				box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
			}
		}
	}

	& .mega-menu__thumb {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: 0.5rem;
		overflow: hidden;
		background: color-mix(in oklch, var(--color-primary, #FF6B00) 10%, transparent);
		transition: all 0.2s ease;

		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}

		& svg {
			inline-size: 1.25rem;
			block-size: 1.25rem;
			color: var(--color-primary, #FF6B00);
		}
	}

	& .mega-menu__item-content {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
		flex: 1;
		min-inline-size: 0;
	}

	& .mega-menu__item-title {
		font-family: var(--font-heading, 'Montserrat', sans-serif);
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--color-secondary, #1A1A1A);
		line-height: 1.2;
	}

	& .mega-menu__item-desc {
		font-size: 0.6875rem;
		color: var(--color-gray-500, #6B7280);
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	& .mega-menu__item-arrow {
		display: none;
	}

	& .mega-menu__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem 1rem;
		background: var(--color-secondary, #1A1A1A);
		border-radius: 0 0 0.875rem 0.875rem;
	}

	& .mega-menu__all-link {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		font-family: var(--font-heading, 'Montserrat', sans-serif);
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--color-white, #FFFFFF);
		text-decoration: none;
		transition: color 0.15s ease;

		& svg {
			inline-size: 0.875rem;
			block-size: 0.875rem;
			transition: transform 0.15s ease;
		}

		&:hover {
			color: var(--color-primary, #FF6B00);

			& svg {
				transform: translateX(3px);
			}
		}
	}

	& .mega-menu__phone {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		font-size: 0.75rem;
		font-weight: 500;
		color: var(--color-gray-400, #9CA3AF);
		text-decoration: none;
		transition: color 0.15s ease;

		& svg {
			inline-size: 0.875rem;
			block-size: 0.875rem;
		}

		&:hover {
			color: var(--color-white, #FFFFFF);
		}
	}
}

/* Header Actions (CTA, Phone icon, etc) */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);

	& .header-phone-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		color: var(--color-secondary);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-full);
		transition:
			color var(--duration-fast) var(--ease-out),
			border-color var(--duration-fast) var(--ease-out);

		&:hover {
			color: var(--color-primary);
			border-color: var(--color-primary);
		}

		& svg {
			inline-size: 1.25rem;
			block-size: 1.25rem;
		}
	}

	& .header-cta {
		display: none;
	}
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-out);

	&:hover {
		border-color: var(--color-primary);
	}

	& svg {
		inline-size: 1.5rem;
		block-size: 1.5rem;
		color: var(--color-secondary);
	}
}

/* Mobile Menu */
.mobile-menu {
	position: fixed;
	inset-block-start: var(--header-height-total);
	inset-inline: 0;
	inset-block-end: 0;
	background-color: var(--color-white);
	padding: var(--space-lg);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--duration-normal) var(--ease-out);
	z-index: var(--z-overlay);

	&.is-open {
		transform: translateX(0);
	}

	& ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	& a {
		display: block;
		padding-block: var(--space-sm);
		font-family: var(--font-heading);
		font-size: var(--text-lg);
		font-weight: var(--font-medium);
		color: var(--color-secondary);
		text-decoration: none;
		border-block-end: 1px solid var(--color-border-light);

		&:hover {
			color: var(--color-primary);
		}
	}

	& .mobile-menu__cta {
		margin-block-start: var(--space-lg);
	}
}

/* ==========================================================================
   # HEADER CONTAINER QUERIES
   Responsive behavior based on container width
   ========================================================================== */

/* Small screens - hide top bar items */
@container header (max-width: 600px) {
	.header-top-bar__right {
		display: none;
	}

	.header-top-bar__divider {
		display: none;
	}

	.header-top-bar__inner {
		justify-content: center;
	}
}

/* Medium screens - show nav */
@container header (min-width: 768px) {
	.header-nav {
		display: block;
	}

	.mobile-menu-toggle {
		display: none;
	}

	.header-actions .header-cta {
		display: inline-flex;
	}
}

/* Large screens - more spacing */
@container header (min-width: 1024px) {
	.header-nav ul {
		gap: var(--space-xl);
	}

	.header-actions {
		gap: var(--space-md);
	}
}

/* ==========================================================================
   # WORDPRESS BLOCK OVERRIDES
   Using :where() for low specificity
   ========================================================================== */

/* Navigation Block */
:where(.wp-block-navigation) {
	font-family: var(--font-heading);
	font-weight: var(--font-medium);
}

:where(.wp-block-navigation__container) {
	gap: var(--space-lg);
}

:where(.wp-block-navigation-item__content) {
	padding: var(--space-xs) 0;
	color: var(--color-secondary);
	transition: color var(--duration-fast) var(--ease-out);

	&:hover {
		color: var(--color-primary);
	}
}

/* Navigation responsive menu */
:where(.wp-block-navigation__responsive-container.is-menu-open) {
	padding: var(--space-lg);

	& .wp-block-navigation__responsive-container-content {
		padding-block-start: var(--space-xl);
	}

	& .wp-block-navigation-item__content {
		padding: var(--space-sm) 0;
		font-size: var(--text-lg);
	}
}

/* Site Logo */
:where(.wp-block-site-logo img) {
	block-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
	inline-size: auto;
}

/* Site Title */
:where(.wp-block-site-title) {
	font-family: var(--font-heading);
	font-weight: var(--font-bold);

	& a {
		text-decoration: none;
	}
}

/* Group block with row layout */
:where(.wp-block-group.is-layout-flex) {
	gap: var(--space-sm);
}

/* Buttons block */
:where(.wp-block-buttons) {
	gap: var(--space-sm);
}

/* ==========================================================================
   # POST CARD COMPONENT (Container Query Example)
   ========================================================================== */

.post-card {
	container-type: inline-size;
	container-name: post-card;
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-normal) var(--ease-out);

	&:hover {
		box-shadow: var(--shadow-md);
	}

	/* Card Inner */
	& .post-card__inner {
		display: grid;
		grid-template-rows: auto 1fr;
	}

	/* Card Image */
	& .post-card__image {
		aspect-ratio: 16 / 9;
		overflow: hidden;

		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			transition: transform var(--duration-slow) var(--ease-out);
		}
	}

	&:hover .post-card__image img {
		transform: scale(1.05);
	}

	/* Card Content */
	& .post-card__content {
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
		padding: var(--space-md);
	}

	/* Card Meta */
	& .post-card__meta {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	& .post-card__category {
		padding: var(--space-3xs) var(--space-xs);
		background-color: var(--color-primary);
		color: var(--color-white);
		border-radius: var(--radius-sm);
		font-weight: var(--font-semibold);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* Card Title */
	& .post-card__title {
		font-size: var(--text-lg);
		font-weight: var(--font-bold);
		line-height: var(--leading-snug);
		color: var(--color-secondary);
		margin: 0;

		& a {
			color: inherit;
			text-decoration: none;

			&:hover {
				color: var(--color-primary);
			}
		}
	}

	/* Card Excerpt */
	& .post-card__excerpt {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		line-height: var(--leading-relaxed);
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Card Footer */
	& .post-card__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-start: auto;
		padding-block-start: var(--space-sm);
		border-block-start: 1px solid var(--color-border-light);
	}

	/* Card Author */
	& .post-card__author {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		font-size: var(--text-sm);
	}

	& .post-card__avatar {
		inline-size: 2rem;
		block-size: 2rem;
		border-radius: var(--radius-full);
		object-fit: cover;
	}

	/* Card Read More */
	& .post-card__read-more {
		font-size: var(--text-sm);
		font-weight: var(--font-semibold);
		color: var(--color-primary);
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

/* Post Card Container Queries */
@container post-card (min-width: 400px) {
	.post-card__inner {
		grid-template-columns: 40% 1fr;
		grid-template-rows: 1fr;
	}

	.post-card__image {
		aspect-ratio: 1;
	}

	.post-card__content {
		padding: var(--space-lg);
	}

	.post-card__title {
		font-size: var(--text-xl);
	}
}

@container post-card (min-width: 600px) {
	.post-card__content {
		padding: var(--space-xl);
	}

	.post-card__title {
		font-size: var(--text-2xl);
	}

	.post-card__excerpt {
		-webkit-line-clamp: 4;
	}
}

/* ==========================================================================
   # SERVICE CARD COMPONENT (Container Query Example)
   ========================================================================== */

.service-card {
	container-type: inline-size;
	container-name: service-card;
	position: relative;
	background-color: var(--color-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--duration-normal) var(--ease-out),
		transform var(--duration-normal) var(--ease-out);

	&:hover {
		box-shadow: var(--shadow-lg);
		transform: translateY(-4px);
	}

	/* Card Image */
	& .service-card__image {
		aspect-ratio: 4 / 3;
		overflow: hidden;

		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			transition: transform var(--duration-slow) var(--ease-out);
		}
	}

	&:hover .service-card__image img {
		transform: scale(1.1);
	}

	/* Card Content */
	& .service-card__content {
		padding: var(--space-md);
	}

	/* Card Icon */
	& .service-card__icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		margin-block-end: var(--space-sm);
		background-color: var(--color-primary);
		color: var(--color-white);
		border-radius: var(--radius-md);

		& svg {
			inline-size: 1.5rem;
			block-size: 1.5rem;
		}
	}

	/* Card Title */
	& .service-card__title {
		font-size: var(--text-lg);
		font-weight: var(--font-bold);
		color: var(--color-secondary);
		margin-block-end: var(--space-xs);

		& a {
			color: inherit;
			text-decoration: none;

			&:hover {
				color: var(--color-primary);
			}
		}
	}

	/* Card Description */
	& .service-card__description {
		font-size: var(--text-sm);
		color: var(--color-text-muted);
		line-height: var(--leading-relaxed);
	}

	/* Card Link */
	& .service-card__link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-start: var(--space-sm);
		font-size: var(--text-sm);
		font-weight: var(--font-semibold);
		color: var(--color-primary);
		text-decoration: none;

		& svg {
			inline-size: 1em;
			block-size: 1em;
			transition: transform var(--duration-fast) var(--ease-out);
		}

		&:hover svg {
			transform: translateX(4px);
		}
	}
}

/* Service Card Container Queries */
@container service-card (min-width: 300px) {
	.service-card__content {
		padding: var(--space-lg);
	}

	.service-card__icon {
		inline-size: 3.5rem;
		block-size: 3.5rem;
	}

	.service-card__title {
		font-size: var(--text-xl);
	}
}

/* ==========================================================================
   # SERVICIOS SECTION - Cards compartidas Home/Archive
   ========================================================================== */

.servicios-section {
	--section-padding: clamp(4rem, 10vh, 7rem);

	position: relative;
	padding-block: var(--section-padding);
	background: var(--color-light, #F5F5F5);

	container-type: inline-size;
	container-name: servicios;
}

.servicios-section--archive {
	background: var(--color-white, #FFFFFF);
}

.servicios-section__inner {
	inline-size: 100%;
	max-inline-size: var(--container-wide, 87.5rem);
	margin-inline: auto;
	padding-inline: var(--gutter, 1.5rem);
}

.servicios-section__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-block-end: clamp(2.5rem, 6vw, 4rem);
}

.servicios-section__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	margin-block-end: 1rem;

	background: color-mix(in oklch, var(--color-primary, #FF6B00) 12%, transparent);
	border: 1px solid color-mix(in oklch, var(--color-primary, #FF6B00) 25%, transparent);
	border-radius: 100vmax;

	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(0.65rem, 1.5vw, 0.75rem);
	font-weight: 600;
	color: var(--color-primary, #FF6B00);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.servicios-section__title {
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-secondary, #1A1A1A);
	margin: 0 0 1rem;
}

.servicios-section__subtitle {
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.6;
	color: var(--color-gray-600, #4B5563);
	max-inline-size: 50ch;
	margin: 0;
}

.servicios-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.5rem, 3vw, 2rem);
}

/* Servicio Card */
.servicio-card {
	position: relative;
	border-radius: clamp(0.75rem, 2vw, 1rem);
	overflow: hidden;
	background: var(--color-white, #FFFFFF);
	box-shadow:
		0 1px 3px rgb(0 0 0 / 0.08),
		0 4px 12px rgb(0 0 0 / 0.04);
	transition:
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.servicio-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 12px 24px rgb(0 0 0 / 0.1),
		0 4px 8px rgb(0 0 0 / 0.06);
}

.servicio-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	block-size: 100%;
}

.servicio-card__image-wrapper {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.servicio-card__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.servicio-card:hover .servicio-card__image {
	transform: scale(1.08);
}

.servicio-card__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	background: linear-gradient(135deg,
		var(--color-gray-200, #E5E7EB) 0%,
		var(--color-gray-100, #F3F4F6) 100%
	);

	& svg {
		inline-size: 3rem;
		block-size: 3rem;
		color: var(--color-gray-400, #9CA3AF);
	}
}

.servicio-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		oklch(0% 0 0 / 0.4) 0%,
		oklch(0% 0 0 / 0) 50%
	);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.servicio-card:hover .servicio-card__overlay {
	opacity: 1;
}

.servicio-card__content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	flex: 1;
}

.servicio-card__title {
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(1.125rem, 2.5vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-secondary, #1A1A1A);
	margin: 0;
	transition: color 0.3s ease;
}

.servicio-card:hover .servicio-card__title {
	color: var(--color-primary, #FF6B00);
}

.servicio-card__excerpt {
	font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
	line-height: 1.6;
	color: var(--color-gray-600, #4B5563);
	margin: 0;
	flex: 1;
}

.servicio-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: auto;
	padding-block-start: 0.75rem;

	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary, #FF6B00);

	& svg {
		transition: transform 0.3s ease;
	}
}

.servicio-card:hover .servicio-card__cta svg {
	transform: translateX(4px);
}

/* Servicios Footer CTA */
.servicios-section__footer {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(2.5rem, 6vw, 4rem);
}

.servicios-section__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem;

	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(0.9rem, 1.5vw, 1rem);
	font-weight: 600;
	text-decoration: none;

	color: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	background: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A));
	border-radius: 0.5rem;

	transition:
		background 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;

	& svg {
		transition: transform 0.3s ease;
	}

	&:hover {
		background: var(--wp--preset--color--dark, var(--color-gray-800, #1F2937));
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgb(0 0 0 / 0.2);

		& svg {
			transform: translateX(4px);
		}
	}
}

.servicios-section__empty {
	text-align: center;
	padding: 3rem;
	color: var(--color-gray-500, #6B7280);
	font-size: 1.125rem;
}

/* Servicios Animations */
.servicios-section [data-animate] {
	opacity: 0;
	animation: serviciosFadeUp 0.7s ease-out forwards;
}

.servicios-section [data-delay="1"] { animation-delay: 0.1s; }
.servicios-section [data-delay="2"] { animation-delay: 0.15s; }
.servicios-section [data-delay="3"] { animation-delay: 0.2s; }
.servicios-section [data-delay="4"] { animation-delay: 0.25s; }
.servicios-section [data-delay="5"] { animation-delay: 0.3s; }
.servicios-section [data-delay="6"] { animation-delay: 0.35s; }

@keyframes serviciosFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Servicios Container Queries */
@container servicios (max-width: 640px) {
	.servicios-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.servicio-card__image-wrapper {
		aspect-ratio: 16 / 9;
	}
}

@container servicios (min-width: 641px) and (max-width: 900px) {
	.servicios-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container servicios (min-width: 901px) {
	.servicios-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   # FLOTA SECTION - Cards compartidas Home/Archive
   ========================================================================== */

.flota-section {
	--section-padding: clamp(4rem, 10vh, 7rem);

	position: relative;
	padding-block: var(--section-padding);
	overflow: hidden;

	container-type: inline-size;
	container-name: flota;
}

.flota-section--archive {
	background: var(--color-white, #FFFFFF);

	& .flota-section__bg {
		background: var(--color-white, #FFFFFF);
	}

	& .flota-section__bg::before {
		display: none;
	}

	& .flota-section__title {
		color: var(--color-secondary, #1A1A1A);
	}

	& .flota-section__subtitle {
		color: var(--color-gray-600, #4B5563);
	}

	& .flota-card {
		background: var(--color-white, #FFFFFF);
		border: 1px solid var(--color-gray-200, #E5E7EB);
		box-shadow:
			0 1px 3px rgb(0 0 0 / 0.08),
			0 4px 12px rgb(0 0 0 / 0.04);
	}

	& .flota-card:hover {
		border-color: color-mix(in oklch, var(--color-primary, #FF6B00) 40%, transparent);
		box-shadow:
			0 12px 24px rgb(0 0 0 / 0.1),
			0 4px 8px rgb(0 0 0 / 0.06);
	}

	& .flota-card__title {
		color: var(--color-secondary, #1A1A1A);
	}

	& .flota-card:hover .flota-card__title {
		color: var(--color-primary, #FF6B00);
	}

	& .flota-card__excerpt {
		color: var(--color-gray-600, #4B5563);
	}

	& .flota-card__image-placeholder {
		background: var(--color-gray-200, #E5E7EB);

		& svg {
			color: var(--color-gray-400, #9CA3AF);
		}
	}
}

.flota-section__bg {
	position: absolute;
	inset: 0;
	background: var(--color-secondary, #1A1A1A);
	z-index: 0;
}

.flota-section__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in oklch, var(--color-primary, #FF6B00) 8%, transparent) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in oklch, var(--color-primary, #FF6B00) 5%, transparent) 0%, transparent 50%);
}

.flota-section__inner {
	position: relative;
	z-index: 1;
	inline-size: 100%;
	max-inline-size: var(--container-wide, 87.5rem);
	margin-inline: auto;
	padding-inline: var(--gutter, 1.5rem);
}

.flota-section__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-block-end: clamp(2.5rem, 6vw, 4rem);
}

.flota-section__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	margin-block-end: 1rem;

	background: color-mix(in oklch, var(--color-primary, #FF6B00) 15%, transparent);
	border: 1px solid color-mix(in oklch, var(--color-primary, #FF6B00) 30%, transparent);
	border-radius: 100vmax;

	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(0.65rem, 1.5vw, 0.75rem);
	font-weight: 600;
	color: var(--color-primary, #FF6B00);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.flota-section__title {
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-white, #FFFFFF);
	margin: 0 0 1rem;
}

.flota-section__subtitle {
	font-size: clamp(1rem, 2vw, 1.125rem);
	line-height: 1.6;
	color: color-mix(in oklch, white 70%, transparent);
	max-inline-size: 50ch;
	margin: 0;
}

.flota-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.5rem, 3vw, 2rem);
}

/* Flota Card */
.flota-card {
	position: relative;
	border-radius: clamp(0.75rem, 2vw, 1rem);
	overflow: hidden;
	background: color-mix(in oklch, white 5%, transparent);
	border: 1px solid color-mix(in oklch, white 10%, transparent);
	transition:
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.4s ease,
		background 0.4s ease;
}

.flota-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in oklch, var(--color-primary, #FF6B00) 40%, transparent);
	background: color-mix(in oklch, white 8%, transparent);
}

.flota-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	block-size: 100%;
}

.flota-card__image-wrapper {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.flota-card__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flota-card:hover .flota-card__image {
	transform: scale(1.08);
}

.flota-card__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	background: color-mix(in oklch, white 10%, transparent);

	& svg {
		inline-size: 3rem;
		block-size: 3rem;
		color: color-mix(in oklch, white 30%, transparent);
	}
}

.flota-card__capacity {
	position: absolute;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	padding: 0.5rem 0.875rem;

	background: var(--color-primary, #FF6B00);
	border-radius: 0.375rem;
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	color: white;
}

.flota-card__content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 3vw, 1.5rem);
	flex: 1;
}

.flota-card__title {
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(1.125rem, 2.5vw, 1.25rem);
	font-weight: 700;
	color: var(--color-white, #FFFFFF);
	margin: 0;
	transition: color 0.3s ease;
}

.flota-card:hover .flota-card__title {
	color: var(--color-primary, #FF6B00);
}

.flota-card__model {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-primary, #FF6B00);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.flota-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: color-mix(in oklch, white 60%, transparent);
	margin: 0;
	flex: 1;
}

/* Flota Card CTA - Estilo integrado */
.flota-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: auto;
	padding-block-start: 0.75rem;

	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary, #FF6B00);

	& svg {
		transition: transform 0.3s ease;
	}
}

.flota-card:hover .flota-card__cta svg {
	transform: translateX(4px);
}

/* Link wrapper para toda la tarjeta */
a.flota-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	block-size: 100%;
}

/* Flota Footer CTA */
.flota-section__footer {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(2.5rem, 6vw, 4rem);
}

.flota-section__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 2rem;

	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(0.9rem, 1.5vw, 1rem);
	font-weight: 600;
	text-decoration: none;

	color: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A));
	background: var(--wp--preset--color--white, var(--color-white, #FFFFFF));
	border-radius: 0.5rem;
	box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);

	transition:
		background 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;

	& svg {
		transition: transform 0.3s ease;
	}

	&:hover {
		background: var(--wp--preset--color--light, var(--color-light, #F5F5F5));
		transform: translateY(-2px);
		box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);

		& svg {
			transform: translateX(4px);
		}
	}
}

.flota-section__empty {
	text-align: center;
	padding: 3rem;
	color: color-mix(in oklch, white 50%, transparent);
	font-size: 1.125rem;
}

/* Flota Animations */
.flota-section [data-animate] {
	opacity: 0;
	animation: flotaFadeUp 0.7s ease-out forwards;
}

.flota-section [data-delay="1"] { animation-delay: 0.1s; }
.flota-section [data-delay="2"] { animation-delay: 0.2s; }
.flota-section [data-delay="3"] { animation-delay: 0.3s; }
.flota-section [data-delay="4"] { animation-delay: 0.25s; }
.flota-section [data-delay="5"] { animation-delay: 0.3s; }
.flota-section [data-delay="6"] { animation-delay: 0.35s; }

@keyframes flotaFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Flota Container Queries */
@container flota (max-width: 640px) {
	.flota-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

@container flota (min-width: 641px) and (max-width: 900px) {
	.flota-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container flota (min-width: 901px) {
	.flota-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Accessibility for sections */
@media (prefers-reduced-motion: reduce) {
	.servicios-section [data-animate],
	.flota-section [data-animate] {
		animation: none;
		opacity: 1;
	}

	.servicio-card,
	.servicio-card__image,
	.servicio-card__overlay,
	.servicio-card__title,
	.servicio-card__cta svg,
	.servicios-section__btn,
	.flota-card,
	.flota-card__image,
	.flota-card__link svg,
	.flota-section__btn {
		transition: none;
	}

	.servicio-card:hover,
	.flota-card:hover {
		transform: none;
	}

	.servicio-card:hover .servicio-card__image,
	.flota-card:hover .flota-card__image {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.servicio-card {
		border: 2px solid var(--color-secondary, #1A1A1A);
	}

	.servicios-section__badge {
		border-width: 2px;
	}
}

/* ==========================================================================
   # ARCHIVE & SINGLE HERO - Global Styles
   ========================================================================== */

.archive-hero,
.single-hero,
section.single-hero,
section.archive-hero {
	background: var(--wp--preset--color--secondary, var(--color-secondary, #1A1A1A)) !important;
	padding-block: clamp(2rem, 5vh, 3rem);
	margin: 0;
}

.archive-hero__inner,
.single-hero__inner {
	inline-size: 100%;
	max-inline-size: var(--container-wide, 87.5rem);
	margin-inline: auto;
	padding-inline: var(--gutter, 1.5rem);
}

.archive-hero__breadcrumb,
.single-hero__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 1rem;
	font-size: 0.875rem;
}

.archive-hero__breadcrumb a,
.single-hero__breadcrumb a {
	color: color-mix(in oklch, white 60%, transparent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.archive-hero__breadcrumb a:hover,
.single-hero__breadcrumb a:hover {
	color: var(--color-primary, #FF6B00);
}

.archive-hero__breadcrumb svg,
.single-hero__breadcrumb svg {
	inline-size: 1rem;
	block-size: 1rem;
	color: color-mix(in oklch, white 40%, transparent);
}

.archive-hero__breadcrumb span,
.single-hero__breadcrumb span {
	color: white;
}

.archive-hero__title,
.single-hero__title,
.single-hero h1,
.archive-hero h1 {
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: white !important;
	margin: 0;
	line-height: 1.2;
}

.archive-hero__subtitle {
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
	color: color-mix(in oklch, white 70%, transparent);
	margin: 0.75rem 0 0;
	max-inline-size: 50ch;
}

/* ==========================================================================
   # UTILITY CLASSES
   ========================================================================== */

/* Text alignment - using logical properties */
.text-start { text-align: start; }
.text-center { text-align: center; }
.text-end { text-align: end; }

/* Visually hidden but accessible */
.visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Container utility */
.container {
	inline-size: 100%;
	max-inline-size: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ==========================================================================
   # MEDIA QUERIES (Only for major layout shifts)
   Using Container Queries for component-level responsiveness
   ========================================================================== */

/* Mobile first approach - base styles are mobile */

/* Tablet and up */
@media (min-width: 768px) {
	:root {
		--gutter: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
	}
}

/* Desktop and up */
@media (min-width: 1024px) {
	:root {
		--gutter: clamp(2rem, 1.5rem + 2.5vw, 3rem);
	}
}

/* Large desktop */
@media (min-width: 1280px) {
	:root {
		--gutter: 3rem;
	}
}

/* ==========================================================================
   # PRINT STYLES
   ========================================================================== */

@media print {
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]::after {
		content: " (" attr(href) ")";
	}

	img {
		page-break-inside: avoid;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}

	.site-header,
	.site-footer,
	.no-print {
		display: none !important;
	}
}

/* ==========================================================================
   # BUSINESS STATUS INDICATOR - Abierto/Cerrado Estilo Google Maps
   ========================================================================== */

.concrete-business-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	background: var(--color-gray-100, #F3F4F6);
	border-radius: 100vmax;
	font-family: var(--font-heading, 'Montserrat', sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
}

.concrete-business-status__dot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: #22c55e;
	animation: statusPulse 2s ease-in-out infinite;
}

.concrete-business-status.is-closed .concrete-business-status__dot {
	background: #ef4444;
	animation: none;
}

.concrete-business-status__text {
	color: #22c55e;
}

.concrete-business-status.is-closed .concrete-business-status__text {
	color: #ef4444;
}

.concrete-business-status__next {
	color: var(--color-gray-500, #6B7280);
	font-weight: 500;
	padding-inline-start: 0.5rem;
	border-inline-start: 1px solid var(--color-gray-300, #D1D5DB);
}

@keyframes statusPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(0.9); }
}

/* Status en header (dark background) */
.header-top-bar .concrete-business-status {
	background: color-mix(in oklch, white 10%, transparent);
	padding: 0.25rem 0.625rem;
}

.header-top-bar .concrete-business-status__next {
	color: color-mix(in oklch, white 60%, transparent);
	border-color: color-mix(in oklch, white 20%, transparent);
}

/* Header Status Badge - Estilo Google Maps */
.header-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	background: color-mix(in oklch, white 8%, transparent);
	border-radius: 100vmax;
	font-size: 0.8125rem;
	font-weight: 500;
}

.header-status-badge__dot {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: #22c55e;
	animation: headerStatusPulse 2s ease-in-out infinite;
}

.header-status-badge.is-closed .header-status-badge__dot {
	background: #ef4444;
	animation: none;
}

.header-status-badge__text {
	font-weight: 600;
	color: #22c55e;
}

.header-status-badge.is-closed .header-status-badge__text {
	color: #ef4444;
}

.header-status-badge__hours {
	padding-inline-start: 0.5rem;
	border-inline-start: 1px solid color-mix(in oklch, white 20%, transparent);
	color: color-mix(in oklch, white 70%, transparent);
	font-weight: 400;
}

@keyframes headerStatusPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(0.85); }
}

/* Hide hours on small screens */
@media (max-width: 900px) {
	.header-status-badge__hours {
		display: none;
	}
}

@media (max-width: 600px) {
	.header-top-bar__status {
		display: none;
	}
}

/* Status compacto (solo dot + texto) */
.concrete-business-status--compact {
	padding: 0;
	background: none;
}

.concrete-business-status--compact .concrete-business-status__next {
	display: none;
}

/* Horarios table (para mostrar semana completa) */
.concrete-schedule-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.concrete-schedule-table th,
.concrete-schedule-table td {
	padding: 0.75rem 1rem;
	text-align: start;
	border-block-end: 1px solid var(--color-gray-200, #E5E7EB);
}

.concrete-schedule-table th {
	font-weight: 600;
	color: var(--color-secondary, #1A1A1A);
}

.concrete-schedule-table td {
	color: var(--color-gray-600, #4B5563);
}

.concrete-schedule-table tr.is-today {
	background: color-mix(in oklch, var(--color-primary, #FF6B00) 8%, transparent);
}

.concrete-schedule-table tr.is-today th {
	color: var(--color-primary, #FF6B00);
}

.concrete-schedule-table .is-closed td {
	color: var(--color-gray-400, #9CA3AF);
	font-style: italic;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.concrete-business-status__dot {
		animation: none;
	}
}