/*
Theme Name:        Nebel Theme
Author:            PM SEO Team
Description:       Tema a medida ultraligero para Grupo Nebel. Sin constructores visuales, orientado a WPO y SEO Local.
Version:           1.0.0
Requires at least: 6.5
Requires PHP:      8.0
Text Domain:       nebel
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   ÍNDICE
   --------------------------------------------------------------------------
   0. Tipografías auto-alojadas (@font-face)
   1. Variables (:root)
   2. Reset moderno
   3. Estilos base (tipografía, enlaces, encabezados)
   4. Utilidades (container, screen-reader-text, foco)
   5. Botones
   6. Cabeceras de sección
   7. Home — Hero (.hero-home)
   8. Home — Servicios (.services-home / .services-grid / .service-card)
   9. Home — Por qué elegirnos (.why-home / .why-grid / .why-card)
   10. Home — Proyectos (.portfolio-home / .portfolio-grid / .project-card)
   11. Home — CTA final (.cta-home)
   12. Media queries (mobile first: 640px tablet, 1024px escritorio)
   13. Accesibilidad: movimiento reducido
   14. Header (.site-header) y logotipo
   15. Navegación principal y menú móvil
   16. Footer (.site-footer / .footer-grid / .bottom-bar)
   17. Page Hero (cabecera de páginas internas)
   18. Contenido editorial (.entry-content / Gutenberg)
   19. Archivos: grid, paginación y sin resultados
   20. Bloque CTA de singles (.cta-block)
   21. Barra de contacto fija móvil (single de servicios)
   22. Formulario de contacto ([nebel_contacto])
   23. Logotipo corporativo, foto del Hero y bloques de Gutenberg
   ========================================================================== */


/* ==========================================================================
   0. TIPOGRAFÍAS AUTO-ALOJADAS
   --------------------------------------------------------------------------
   Fuentes variables (subset latín, cubre español) servidas desde el propio
   servidor: sin peticiones a Google (mejor LCP y cumplimiento RGPD).
   Se precargan desde functions.php (nebel_preload_fonts).
   Licencia: SIL Open Font License 1.1 (ver assets/fonts/OFL-*.txt).
   ========================================================================== */

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/playfair-display-latin-wght.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght.woff2") format("woff2");
}


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
	/* --- Paleta principal ------------------------------------------------ */
	--color-primary:       #0F2C1E; /* Verde bosque: fondos de contraste y textos principales. */
	--color-primary-soft:  #1A3F2D; /* Variante para degradados y placeholders de imagen. */
	--color-accent:        #C5A059; /* Dorado/ocre: botones y detalles. */
	--color-accent-light:  #D6B97C; /* Hover de botones dorados. */
	--color-accent-text:   #8A6A2C; /* Dorado oscuro para TEXTO sobre fondo claro (contraste AA). */
	--color-bg:            #F8F9FA; /* Blanco roto: fondo general. */
	--color-surface:       #FFFFFF; /* Superficie de tarjetas. */

	/* --- Textos ---------------------------------------------------------- */
	--color-text:          #24332B; /* Cuerpo de texto (verde casi negro, más suave que el primario). */
	--color-text-muted:    #5B6A62;
	--color-text-inverse:  #FFFFFF;
	--color-text-inverse-muted: rgba(255, 255, 255, 0.78);

	/* --- Bordes y sombras ------------------------------------------------ */
	--color-border:        rgba(15, 44, 30, 0.08);
	--color-border-inverse: rgba(197, 160, 89, 0.35);
	--shadow-sm:           0 1px 2px rgba(15, 44, 30, 0.04);
	--shadow-hover:        0 18px 40px -12px rgba(15, 44, 30, 0.22);

	/* --- Tipografía ------------------------------------------------------ */
	--font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Escala fluida (móvil → escritorio) */
	--fs-sm:   0.875rem;
	--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--fs-h6:   1rem;
	--fs-h5:   1.125rem;
	--fs-h4:   clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--fs-h3:   clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
	--fs-h2:   clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
	--fs-h1:   clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);

	--lh-tight: 1.15;
	--lh-base:  1.65;
	--tracking-wide: 0.12em;

	/* --- Espaciado y layout ---------------------------------------------- */
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: clamp(4rem, 3rem + 5vw, 7rem); /* Separación vertical entre secciones. */

	--container-max: 1240px;
	--gutter:        clamp(1.25rem, 4vw, 2.5rem);
	--grid-gap:      clamp(1.25rem, 2.5vw, 2rem);

	--radius:    4px;
	--radius-sm: 2px;

	/* --- Animación ------------------------------------------------------- */
	--ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
	--transition: 0.35s var(--ease);
}


/* ==========================================================================
   2. RESET MODERNO
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Listas con role="list" (las grids de la Home): sin viñetas ni sangría. */
ul[role="list"],
ol[role="list"] {
	list-style: none;
	padding: 0;
}


/* ==========================================================================
   3. ESTILOS BASE
   ========================================================================== */

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

/* --- Encabezados -------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* h5 y h6 pasan a sans-serif en versalitas: jerarquía clara sin recargar. */
h5,
h6 {
	font-family: var(--font-body);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* --- Enlaces ------------------------------------------------------------ */
a {
	color: var(--color-primary);
	text-decoration-line: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
	color: var(--color-accent-text);
	text-decoration-color: currentColor;
}

/* --- Otros -------------------------------------------------------------- */
strong,
b {
	font-weight: 600;
}

::selection {
	background-color: var(--color-accent);
	color: var(--color-primary);
}


/* ==========================================================================
   4. UTILIDADES
   ========================================================================== */

/* Contenedor centrado con márgenes laterales fluidos. */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Texto solo para lectores de pantalla (estándar de WordPress). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-surface);
	clip: auto !important;
	clip-path: none;
	color: var(--color-primary);
	display: block;
	height: auto;
	left: 1rem;
	padding: 1rem 1.5rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* Foco visible y accesible en todo el sitio (solo navegación por teclado). */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}


/* ==========================================================================
   5. BOTONES
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 3.25rem; /* Área táctil cómoda (> 48px). */
	padding: 0.9rem 1.9rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background-color var(--transition),
		border-color var(--transition),
		color var(--transition),
		transform var(--transition);
}

.btn:hover {
	transform: translateY(-1px);
}

/* Principal: fondo dorado + texto verde (contraste AA). */
.btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary);
}

.btn--primary:hover {
	background-color: var(--color-accent-light);
	border-color: var(--color-accent-light);
	color: var(--color-primary);
}

/* Secundario: outline blanco, para fondos oscuros (Hero y CTA final). */
.btn--secondary {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--color-text-inverse);
}

.btn--secondary:hover {
	background-color: var(--color-text-inverse);
	border-color: var(--color-text-inverse);
	color: var(--color-primary);
}

/* Ghost: outline verde, para fondos claros ("Ver todos..."). */
.btn--ghost {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn--ghost:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* WhatsApp: verde reconocible pero contenido para no romper la estética. */
.btn--whatsapp {
	background-color: #25D366;
	border-color: #25D366;
	color: var(--color-primary);
}

.btn--whatsapp:hover {
	background-color: #3EE07A;
	border-color: #3EE07A;
	color: var(--color-primary);
}


/* ==========================================================================
   6. CABECERAS DE SECCIÓN
   ========================================================================== */

.section-header {
	max-width: 46rem;
	margin: 0 auto var(--space-lg);
	text-align: center;
}

/* Filete dorado bajo el H2: detalle editorial de marca. */
.section-header__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin: var(--space-md) auto 0;
	background-color: var(--color-accent);
}


/* ==========================================================================
   7. HOME — HERO
   --------------------------------------------------------------------------
   Imagen de fondo: definir la variable --hero-image en línea, p. ej.:
   <section class="hero-home" style="--hero-image:url(...)">
   Sin imagen, se muestra el degradado verde de fallback.
   ========================================================================== */

.hero-home {
	position: relative;
	isolation: isolate; /* Crea contexto de apilamiento para el overlay. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	min-height: 80svh; /* Evita saltos con la barra del navegador móvil. */
	padding-block: calc(var(--space-xl) * 0.75);
	background-color: var(--color-primary); /* Fallback mientras carga la imagen. */
	background-image:
		radial-gradient(ellipse at 20% 0%, var(--color-primary-soft) 0%, transparent 60%),
		var(--hero-image, none);
	background-position: center;
	background-size: cover;
	color: var(--color-text-inverse);
	text-align: center;
}

/* Overlay oscuro para garantizar la legibilidad del texto sobre la foto. */
.hero-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(15, 44, 30, 0.45) 0%,
		rgba(15, 44, 30, 0.65) 55%,
		rgba(15, 44, 30, 0.88) 100%
	);
}

.hero-home__inner {
	max-width: 56rem;
}

.hero-home__title {
	color: var(--color-text-inverse);
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: 1.1;
}

.hero-home__title::after {
	content: "";
	display: block;
	width: 4rem;
	height: 1px;
	margin: var(--space-md) auto 0;
	background-color: var(--color-accent);
}

.hero-home__subtitle {
	max-width: 40rem;
	margin: var(--space-md) auto 0;
	color: var(--color-text-inverse-muted);
	font-size: var(--fs-lg);
	font-weight: 300;
	line-height: 1.6;
}

.hero-home__actions {
	display: flex;
	flex-direction: column; /* Móvil: botones apilados a ancho completo. */
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}


/* ==========================================================================
   8. HOME — SERVICIOS
   ========================================================================== */

.services-home {
	padding-block: var(--space-xl);
	background-color: var(--color-bg);
}

/* --- Grids (base móvil: 1 columna) ------------------------------------- */
.services-grid,
.why-grid,
.portfolio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
}

.services-grid__item,
.portfolio-grid__item,
.why-grid__item {
	display: flex; /* Las tarjetas ocupan toda la altura de la fila. */
}

/* --- Tarjetas (compartido: servicios y proyectos) ---------------------- */
.service-card,
.project-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.service-card:hover,
.project-card:hover,
.service-card:focus-within,
.project-card:focus-within {
	border-color: transparent;
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

/* Contenedor de imagen: proporción fija (evita CLS) y placeholder verde. */
.service-card__media,
.project-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--color-primary-soft);
}

.project-card__media {
	aspect-ratio: 3 / 2;
}

.service-card__image,
.project-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.service-card:hover .service-card__image,
.project-card:hover .project-card__image {
	transform: scale(1.05);
}

/* Cuerpo de la tarjeta. */
.service-card__body,
.project-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--space-md);
}

/* Tarjetas sin imagen destacada: filete dorado superior como acento. */
.service-card:not(:has(.service-card__media)),
.project-card:not(:has(.project-card__media)) {
	border-top: 2px solid var(--color-accent);
}

.service-card__title,
.project-card__title {
	font-size: var(--fs-h4);
	line-height: 1.25;
}

.service-card__title a,
.project-card__title a {
	color: inherit;
	text-decoration: none;
}

.service-card__title a:hover,
.project-card__title a:hover {
	color: var(--color-accent-text);
}

/* Enlace "Ver servicio / Ver Proyecto": anclado al fondo de la tarjeta. */
.service-card__link,
.project-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: auto;
	padding-top: var(--space-xs);
	color: var(--color-accent-text);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	text-transform: uppercase;
}

.service-card__link::after,
.project-card__link::after {
	content: "→";
	transition: transform var(--transition);
}

.service-card__link:hover::after,
.project-card__link:hover::after {
	transform: translateX(4px);
}

/* Botón "Ver todos" bajo las grids. */
.services-home__more,
.portfolio-home__more {
	margin-top: var(--space-lg);
	text-align: center;
}


/* ==========================================================================
   9. HOME — POR QUÉ ELEGIRNOS (sección oscura)
   ========================================================================== */

.why-home {
	padding-block: var(--space-xl);
	background-color: var(--color-primary);
	color: var(--color-text-inverse-muted);
}

.why-home .section-header__title {
	color: var(--color-text-inverse);
}

.why-card {
	width: 100%;
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border-inverse);
}

/* Hueco para el icono (SVG inline o sprite en la siguiente fase). */
.why-card__icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--space-md);
	border: 1px solid var(--color-accent);
	border-radius: 50%;
	color: var(--color-accent);
}

.why-card__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.why-card__title {
	margin-bottom: 0.75rem;
	color: var(--color-text-inverse);
	font-size: var(--fs-h4);
}

.why-card__text {
	font-size: 0.975rem;
	line-height: 1.7;
}


/* ==========================================================================
   10. HOME — PROYECTOS
   ========================================================================== */

.portfolio-home {
	padding-block: var(--space-xl);
	background-color: var(--color-surface);
}

.portfolio-home .project-card {
	background-color: var(--color-bg);
}

/* Categoría (taxonomía tipo-trabajo). */
.project-card__category {
	color: var(--color-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.project-card__category a {
	color: var(--color-accent-text);
	text-decoration: none;
}

.project-card__category a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   11. HOME — CTA FINAL (sección oscura)
   ========================================================================== */

.cta-home {
	position: relative;
	isolation: isolate;
	padding-block: var(--space-xl);
	background-color: var(--color-primary);
	background-image: radial-gradient(ellipse at 80% 100%, var(--color-primary-soft) 0%, transparent 65%);
	color: var(--color-text-inverse-muted);
	text-align: center;
}

.cta-home__inner {
	max-width: 50rem;
}

.cta-home__title {
	color: var(--color-text-inverse);
	font-size: var(--fs-h2);
}

.cta-home__text {
	max-width: 40rem;
	margin: var(--space-md) auto 0;
	font-size: var(--fs-lg);
	font-weight: 300;
}

.cta-home__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}


/* ==========================================================================
   12. MEDIA QUERIES (mobile first)
   ========================================================================== */

/* --- Tablet (≥ 640px): 2 columnas, botones en línea -------------------- */
@media (min-width: 640px) {

	.services-grid,
	.why-grid,
	.portfolio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero-home__actions,
	.cta-home__actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.why-grid {
		row-gap: var(--space-lg);
	}
}

/* --- Escritorio (≥ 1024px): 4 columnas servicios/diferenciales, 3 proyectos */
@media (min-width: 1024px) {

	.services-grid,
	.why-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.portfolio-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hero-home__subtitle {
		margin-top: var(--space-lg);
	}
}


/* ==========================================================================
   13. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

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

	.service-card:hover,
	.project-card:hover,
	.service-card:focus-within,
	.project-card:focus-within,
	.btn:hover {
		transform: none;
	}
}


/* ==========================================================================
   14. HEADER Y LOGOTIPO
   --------------------------------------------------------------------------
   Sticky sobre blanco roto translúcido con desenfoque. Respeta la barra
   de administración de WordPress (--wp-admin--admin-bar--height).
   ========================================================================== */

:root {
	--header-height: 4.25rem;
}

.site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: rgba(248, 249, 250, 0.94);
	box-shadow:
		0 1px 0 var(--color-border),
		0 8px 24px -16px rgba(15, 44, 30, 0.25);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	backdrop-filter: saturate(160%) blur(12px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--header-height);
}

/* Logotipo tipográfico. */
.site-logo {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
}

.site-logo__link {
	color: var(--color-primary);
	text-decoration: none;
}

.site-logo__link:hover {
	color: var(--color-primary);
}

/* Enlace "Saltar al contenido": visible solo al recibir foco. */
.skip-link:focus {
	z-index: 100001;
}


/* ==========================================================================
   15. NAVEGACIÓN PRINCIPAL Y MENÚ MÓVIL
   --------------------------------------------------------------------------
   Móvil/tablet (< 1024px): botón hamburguesa + panel desplegable.
   Escritorio (≥ 1024px): menú horizontal con submenús al hover/foco.
   Sin JS (.no-js): el menú se muestra siempre, sin botón.
   ========================================================================== */

/* --- Listas del menú (reset) ------------------------------------------- */
.nav-menu,
.nav-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu a {
	display: block;
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: var(--color-accent-text);
}

/* --- Botón hamburguesa ------------------------------------------------- */
.mobile-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.5rem; /* Alinea visualmente con el borde del contenedor. */
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--color-primary);
}

.mobile-menu-toggle__bars {
	display: grid;
	gap: 5px;
	width: 1.5rem;
}

.mobile-menu-toggle__bars span {
	display: block;
	height: 1.5px;
	background-color: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform var(--transition), opacity var(--transition);
}

/* Animación a "X" cuando el menú está abierto. */
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bars span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bars span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Panel móvil ------------------------------------------------------- */
.main-navigation {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - var(--header-height) - var(--wp-admin--admin-bar--height, 0px));
	max-height: calc(100dvh - var(--header-height) - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	padding: var(--space-xs) var(--gutter) var(--space-md);
	background-color: var(--color-bg);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 24px 32px -24px rgba(15, 44, 30, 0.3);

	/* Oculto por defecto (con JS), animado al abrir. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity var(--transition),
		transform var(--transition),
		visibility 0s linear 0.35s;
}

.site-header.is-menu-open .main-navigation {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity var(--transition),
		transform var(--transition),
		visibility 0s;
}

.main-navigation .nav-menu > li {
	border-bottom: 1px solid var(--color-border);
}

.main-navigation .nav-menu a {
	padding-block: 0.95rem;
}

/* Submenús en móvil: anidados con sangría. */
.main-navigation .sub-menu {
	padding: 0 0 0.75rem var(--space-sm);
}

.main-navigation .sub-menu a {
	padding-block: 0.5rem;
	font-size: 0.8125rem;
	text-transform: none;
	letter-spacing: 0;
}

.site-header__cta {
	width: 100%;
	margin-top: var(--space-md);
}

/* --- Sin JS: menú siempre visible, en flujo y sin botón ---------------- */
.no-js .mobile-menu-toggle {
	display: none;
}

.no-js .site-header__inner {
	flex-wrap: wrap;
}

.no-js .main-navigation {
	position: static;
	flex-basis: 100%;
	max-height: none;
	padding-inline: 0;
	visibility: visible;
	opacity: 1;
	transform: none;
	box-shadow: none;
}

/* --- Escritorio (≥ 1024px): menú horizontal ---------------------------- */
@media (min-width: 1024px) {

	:root {
		--header-height: 5.25rem;
	}

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

	.main-navigation,
	.no-js .main-navigation {
		position: static;
		display: flex;
		align-items: center;
		gap: var(--space-lg);
		max-height: none;
		overflow: visible;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.no-js .main-navigation {
		flex-basis: auto;
	}

	.main-navigation .nav-menu {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 2.2vw, 2.25rem);
	}

	.main-navigation .nav-menu > li {
		position: relative;
		border: 0;
	}

	.main-navigation .nav-menu > li > a {
		position: relative;
		padding-block: 0.5rem;
	}

	/* Subrayado dorado animado (hover y página actual). */
	.main-navigation .nav-menu > li > a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		background-color: var(--color-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--transition);
	}

	.main-navigation .nav-menu > li > a:hover::after,
	.main-navigation .nav-menu > .current-menu-item > a::after,
	.main-navigation .nav-menu > .current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	/* Submenú desplegable (hover y teclado). */
	.main-navigation .sub-menu {
		position: absolute;
		top: 100%;
		left: -1.25rem;
		min-width: 15rem;
		padding: 0.75rem 0;
		background-color: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		box-shadow: var(--shadow-hover);
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0.35s;
	}

	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity var(--transition), transform var(--transition), visibility 0s;
	}

	.main-navigation .sub-menu a {
		padding: 0.55rem 1.25rem;
	}

	.site-header__cta {
		width: auto;
		margin-top: 0;
		min-height: 2.75rem;
		padding: 0.7rem 1.4rem;
	}
}

/* Barra de admin en móvil (< 600px) no es fija: el header se pega arriba. */
@media (max-width: 600px) {

	.admin-bar .site-header {
		top: 0;
	}
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--color-primary);
	color: var(--color-text-inverse-muted);
	font-size: 0.9375rem;
}

.site-footer a {
	color: var(--color-text-inverse);
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer a:hover {
	color: var(--color-accent);
}

.site-footer__main {
	padding-block: calc(var(--space-xl) * 0.8);
}

/* --- Grid: 1 col (móvil) → 2 (tablet) → 3 (escritorio) ----------------- */
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

/* Marca. */
.site-footer__brand {
	margin-bottom: var(--space-sm);
	font-size: var(--fs-h3);
	font-weight: 600;
}

.site-footer__brand a {
	color: var(--color-text-inverse);
}

.site-footer__text {
	max-width: 26rem;
	line-height: 1.7;
}

/* Títulos de columna: versalitas doradas. */
.site-footer__title {
	margin-bottom: var(--space-md);
	color: var(--color-accent);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

/* Redes sociales. */
.social-links {
	display: flex;
	gap: 0.75rem;
	margin-top: var(--space-md);
}

.social-links__link {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border-inverse);
	border-radius: 50%;
	transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}

.site-footer .social-links__link:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary);
}

/* Menú del footer. */
.footer-menu {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Contacto. */
.footer-contact {
	font-style: normal;
}

.footer-contact__list {
	display: grid;
	gap: var(--space-sm);
	margin: 0;
}

.footer-contact__label {
	display: block;
	margin-bottom: 0.15rem;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Barra inferior ---------------------------------------------------- */
.bottom-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.8125rem;
}

.bottom-bar__inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-block: var(--space-md);
	text-align: center;
}

.bottom-bar__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

.site-footer .bottom-bar__legal a {
	color: var(--color-text-inverse-muted);
}

.site-footer .bottom-bar__legal a:hover {
	color: var(--color-accent);
}

@media (min-width: 640px) {

	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-col--brand {
		grid-column: 1 / -1; /* La marca ocupa toda la fila en tablet. */
	}

	.bottom-bar__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
}

@media (min-width: 1024px) {

	.footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr;
		gap: clamp(2.5rem, 5vw, 5rem);
	}

	.footer-col--brand {
		grid-column: auto;
	}
}


/* ==========================================================================
   17. PAGE HERO (páginas internas, archivos y singles)
   --------------------------------------------------------------------------
   --md: páginas sin imagen y archivos (~30vh).
   --lg: singles / páginas con imagen destacada (~45vh).
   La imagen es un <img> real posicionado detrás del texto (mejor LCP que
   un background-image).
   ========================================================================== */

.page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: max(30vh, 16rem);
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
	background-color: var(--color-primary);
	background-image: radial-gradient(ellipse at 15% 0%, var(--color-primary-soft) 0%, transparent 60%);
	color: var(--color-text-inverse);
	text-align: center;
}

.page-hero--lg {
	min-height: max(45vh, 20rem);
}

.page-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay solo cuando hay foto: garantiza el contraste del título. */
.page-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(15, 44, 30, 0.4) 0%,
		rgba(15, 44, 30, 0.6) 50%,
		rgba(15, 44, 30, 0.88) 100%
	);
}

.page-hero__inner {
	max-width: 54rem;
}

.page-hero__eyebrow {
	margin-bottom: var(--space-sm);
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.page-hero__title {
	color: var(--color-text-inverse);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	line-height: 1.12;
}

.page-hero__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin: var(--space-md) auto 0;
	background-color: var(--color-accent);
}

.page-hero__subtitle {
	max-width: 40rem;
	margin: var(--space-md) auto 0;
	color: var(--color-text-inverse-muted);
	font-size: var(--fs-lg);
	font-weight: 300;
}

/* Términos (tipo-trabajo) como "pastillas". */
.page-hero__terms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--space-md);
}

.term-pill {
	display: inline-block;
	padding: 0.4rem 1rem;
	border: 1px solid var(--color-border-inverse);
	border-radius: 999px;
	color: var(--color-text-inverse);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

a.term-pill:hover {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary);
}


/* ==========================================================================
   18. CONTENIDO EDITORIAL (.entry-content / bloques de Gutenberg)
   ========================================================================== */

.site-main {
	overflow-x: clip; /* Evita scroll horizontal con bloques .alignfull. */
}

.page-content {
	padding-block: calc(var(--space-xl) * 0.75);
}

/* Columna de lectura: ~800px (≈ 70 caracteres por línea). */
.content-narrow {
	width: 100%;
	max-width: calc(800px + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.entry-content {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
	line-height: 1.75;
}

/* Ritmo vertical uniforme entre bloques. */
.entry-content > * + * {
	margin-top: 1.25em;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content h2 {
	margin-top: 2.25em;
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
}

.entry-content h3 {
	margin-top: 1.9em;
	font-size: var(--fs-h4);
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 1.75em;
}

.entry-content :is(h2, h3, h4, h5, h6) + * {
	margin-top: 0.75em;
}

.entry-content strong {
	color: var(--color-primary);
}

/* Listas con viñeta dorada. */
.entry-content ul,
.entry-content ol {
	padding-left: 1.35em;
}

.entry-content li + li {
	margin-top: 0.5em;
}

.entry-content ul li::marker {
	color: var(--color-accent);
}

.entry-content ol li::marker {
	color: var(--color-accent-text);
	font-weight: 600;
}

/* Citas. */
.entry-content blockquote {
	margin-inline: 0;
	padding: 0.25em 0 0.25em 1.5em;
	border-left: 2px solid var(--color-accent);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 1.25em;
	font-style: italic;
	line-height: 1.5;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.75em;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-style: normal;
}

/* Imágenes y pies de foto. */
.entry-content img {
	border-radius: var(--radius);
}

.entry-content figure {
	margin-inline: 0;
}

.entry-content figcaption {
	margin-top: 0.75em;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

/* Alineaciones anchas y completas de Gutenberg. */
.entry-content .alignwide {
	width: min(var(--container-max), 100vw - (var(--gutter) * 2));
	max-width: none;
	margin-inline: calc(50% - min(var(--container-max), 100vw - (var(--gutter) * 2)) / 2);
}

.entry-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.entry-content .alignfull img,
.entry-content .alignwide img {
	width: 100%;
}

.entry-content hr {
	width: 4rem;
	margin-block: 2.5em;
	border: 0;
	border-top: 1px solid var(--color-accent);
}

/* Tablas. */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.entry-content th,
.entry-content td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

.entry-content th {
	color: var(--color-primary);
	font-weight: 600;
}

/* Paginación interna (<!--nextpage-->). */
.page-links {
	margin-top: var(--space-lg);
	font-weight: 600;
}

/* Enlace de vuelta (single de proyectos). */
.back-link {
	margin-top: var(--space-lg);
}

.back-link a {
	color: var(--color-accent-text);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	text-transform: uppercase;
}

.back-link a:hover {
	color: var(--color-primary);
}


/* ==========================================================================
   19. ARCHIVOS: GRID, PAGINACIÓN Y SIN RESULTADOS
   ========================================================================== */

.portfolio-archive {
	padding-block: calc(var(--space-xl) * 0.8);
}

/* Extracto en tarjetas genéricas (index.php). */
.project-card__excerpt {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Paginación nativa (the_posts_pagination). */
.pagination {
	margin-top: var(--space-lg);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.pagination a.page-numbers:hover {
	border-color: var(--color-accent);
	color: var(--color-accent-text);
}

.pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.pagination .page-numbers.dots {
	min-width: auto;
	border: 0;
	background: none;
}

.pagination .prev,
.pagination .next {
	padding-inline: 1.1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.no-results {
	padding-block: var(--space-lg);
	color: var(--color-text-muted);
	text-align: center;
}

.no-results p + p {
	margin-top: var(--space-md);
}


/* ==========================================================================
   20. BLOQUE CTA DE SINGLES (.cta-block)
   --------------------------------------------------------------------------
   --project: suave, fondo claro (presupuesto).
   --service: agresivo, fondo oscuro (WhatsApp + llamada).
   ========================================================================== */

.cta-block {
	padding-block: calc(var(--space-xl) * 0.8);
	text-align: center;
}

.cta-block__inner {
	max-width: 50rem;
}

.cta-block__title {
	font-size: var(--fs-h2);
}

.cta-block__text {
	max-width: 38rem;
	margin: var(--space-md) auto 0;
	font-size: var(--fs-lg);
}

.cta-block__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

/* Variante proyecto. */
.cta-block--project {
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

.cta-block--project .cta-block__text {
	color: var(--color-text-muted);
}

/* Variante servicio. */
.cta-block--service {
	background-color: var(--color-primary);
	background-image: radial-gradient(ellipse at 50% 120%, var(--color-primary-soft) 0%, transparent 65%);
	color: var(--color-text-inverse-muted);
}

.cta-block--service .cta-block__title {
	color: var(--color-text-inverse);
}

.cta-block__eyebrow {
	margin-bottom: var(--space-sm);
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cta-block__alt {
	margin-top: var(--space-md);
	font-size: var(--fs-sm);
}

.cta-block__alt a {
	color: var(--color-text-inverse);
}

/* Botón grande para CTAs de conversión. */
.btn--lg {
	min-height: 3.75rem;
	padding: 1.1rem 2.25rem;
	font-size: 0.9375rem;
}

@media (min-width: 640px) {

	.cta-block__actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}


/* ==========================================================================
   21. BARRA DE CONTACTO FIJA MÓVIL (todas las páginas, < 1024px)
   --------------------------------------------------------------------------
   "Solicitar presupuesto" + "WhatsApp". Respeta el área segura de iOS.
   Se activa/desactiva y se editan sus textos en Personalizar → Grupo Nebel.
   ========================================================================== */

.mobile-cta-bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 0.5rem;
	padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--color-primary);
	box-shadow: 0 -8px 24px -12px rgba(15, 44, 30, 0.45);
}

.mobile-cta-bar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 3rem;
	padding-inline: 0.5rem;
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.mobile-cta-bar__btn:hover {
	color: var(--color-primary);
}

.mobile-cta-bar__btn svg {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
}

.mobile-cta-bar__btn--quote {
	background-color: var(--color-accent);
}

.mobile-cta-bar__btn--whatsapp {
	background-color: #25D366;
}

/* Reserva espacio para que la barra no tape el final de la página. */
.has-mobile-cta-bar {
	padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}

/* Con el menú móvil abierto, la barra se oculta para no competir con él. */
.has-menu-open .mobile-cta-bar {
	display: none;
}

@media (min-width: 1024px) {

	.mobile-cta-bar {
		display: none;
	}

	.has-mobile-cta-bar {
		padding-bottom: 0;
	}
}


/* ==========================================================================
   22. FORMULARIO DE CONTACTO ([nebel_contacto])
   --------------------------------------------------------------------------
   Estados: :focus-visible, .form-field--invalid (error de servidor),
   :user-invalid (error nativo tras interactuar), .form-status--success/--error
   y .is-loading en el botón.
   ========================================================================== */

:root {
	--color-error:      #B42318; /* Contraste AA sobre blanco y blanco roto. */
	--color-error-bg:   #FEF3F2;
	--color-success:    #1E6B43;
	--color-success-bg: #ECF6F0;
}

.contact-form-wrap {
	margin-block: var(--space-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	scroll-margin-top: calc(var(--header-height) + 1rem); /* Ancla #formulario-contacto bajo el header sticky. */
}

/* Dentro de .entry-content se anula el ritmo vertical genérico. */
.entry-content .contact-form * + * {
	margin-top: 0;
}

.contact-form {
	display: grid;
	gap: 1.25rem;
	font-size: 1rem;
	line-height: 1.5;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.form-field {
	display: grid;
	gap: 0.4rem;
}

/* --- Labels ------------------------------------------------------------ */
.form-label {
	color: var(--color-primary);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.form-required {
	color: var(--color-accent-text);
}

/* --- Inputs y textarea ------------------------------------------------- */
.form-input {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.8rem 1rem;
	background-color: var(--color-bg);
	border: 1px solid rgba(15, 44, 30, 0.18);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 1rem; /* ≥ 16px: evita el zoom automático en iOS. */
	line-height: 1.4;
	transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
	-webkit-appearance: none;
	appearance: none;
}

.form-input::placeholder {
	color: var(--color-text-muted);
	opacity: 0.8;
}

.form-input:hover {
	border-color: rgba(15, 44, 30, 0.35);
}

.form-input:focus {
	outline: none;
	background-color: var(--color-surface);
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25);
}

.form-textarea {
	min-height: 9rem;
	resize: vertical;
}

/* --- Checkbox de privacidad ------------------------------------------- */
.form-field--check {
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: 0.75rem;
}

.form-checkbox {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15rem;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.form-check-label {
	color: var(--color-text);
	font-size: var(--fs-sm);
	cursor: pointer;
}

.form-field--check .form-error {
	grid-column: 2;
}

.form-legal {
	color: var(--color-text-muted);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* --- Errores ----------------------------------------------------------- */
.form-error {
	color: var(--color-error);
	font-size: 0.8125rem;
	font-weight: 500;
}

.form-field--invalid .form-input,
.form-input:user-invalid {
	background-color: var(--color-error-bg);
	border-color: var(--color-error);
}

.form-field--invalid .form-input:focus,
.form-input:user-invalid:focus {
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
}

/* --- Mensaje global (éxito / error) ------------------------------------ */
.form-status {
	padding: 1rem 1.25rem;
	border-left: 3px solid currentColor;
	border-radius: var(--radius-sm);
	font-size: 0.9375rem;
	font-weight: 500;
}

.form-status:focus {
	outline: none;
}

.form-status--success {
	background-color: var(--color-success-bg);
	color: var(--color-success);
}

.form-status--error {
	background-color: var(--color-error-bg);
	color: var(--color-error);
}

/* --- Botón de envío y estado de carga ---------------------------------- */
.contact-form__submit {
	justify-self: start;
	min-width: 14rem;
}

.contact-form__submit:disabled {
	cursor: progress;
	opacity: 0.85;
	transform: none;
}

.contact-form__submit.is-loading::after {
	content: "";
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nebel-spin 0.7s linear infinite;
}

@keyframes nebel-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Honeypot: fuera de pantalla (no display:none, algunos bots lo detectan) */
.contact-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 640px) {

	.form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {

	.contact-form__submit {
		justify-self: stretch;
	}
}


/* ==========================================================================
   23. LOGOTIPO CORPORATIVO, FOTO DEL HERO Y BLOQUES DE GUTENBERG
   ========================================================================== */

/* --- Logotipo (imagen) ------------------------------------------------- */
.site-logo__link {
	display: block;
	line-height: 0;
}

.site-logo__img {
	width: auto;
	height: 2.5rem; /* 40px móvil. */
}

.site-footer__brand a {
	display: inline-block;
	line-height: 0;
}

.site-footer__logo {
	width: auto;
	height: 3.5rem;
}

@media (min-width: 1024px) {

	.site-logo__img {
		height: 3rem; /* 48px escritorio. */
	}
}

/* Anclas de la Home (#servicios, #proyectos) bajo el header sticky. */
.services-home,
.portfolio-home,
.why-home {
	scroll-margin-top: var(--header-height);
}

/* --- Foto de fondo del Hero de la Home ---------------------------------- */
.hero-home__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Con foto, el degradado decorativo de fondo sobra (solo queda el overlay). */
.hero-home--has-image {
	background-image: none;
}

/* --- Footer: varios teléfonos ------------------------------------------ */
.footer-contact__phone {
	display: block;
}

.footer-contact__phone + .footer-contact__phone {
	margin-top: 0.2rem;
}

/* --- Botones de Gutenberg con el estilo de marca ------------------------ */
.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: 0.9rem 1.9rem;
	background-color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.entry-content .wp-block-button__link:hover {
	background-color: var(--color-accent-light);
	border-color: var(--color-accent-light);
	color: var(--color-primary);
}

/* Estilo "Contorno" del bloque Botón. */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* --- Columnas, imágenes y galerías -------------------------------------- */
.entry-content .wp-block-columns {
	gap: var(--space-lg);
	margin-block: 2em;
}

.entry-content .wp-block-column > :first-child {
	margin-top: 0;
}

.entry-content .wp-block-column > * + * {
	margin-top: 1em;
}

.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img {
	height: auto;
	border-radius: var(--radius);
}

.entry-content .wp-block-gallery {
	margin-block: 2em;
}

/* Tarjeta destacada (bloque Grupo con estilo propio). */
.entry-content .wp-block-group.has-background {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--radius);
}

/* --- Tarjetas de datos de contacto ([nebel_datos_contacto]) ------------- */
.contact-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	margin-block: 2em;
}

.entry-content .contact-cards * + * {
	margin-top: 0;
}

.contact-card {
	display: grid;
	gap: 0.35rem;
	align-content: start;
	padding: var(--space-md);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-accent);
	border-radius: var(--radius);
}

.contact-card__title {
	color: var(--color-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.contact-card__value {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contact-card__value:hover {
	color: var(--color-accent-text);
}

/* Párrafo de entradilla (clase "nebel-lead" en un bloque Párrafo). */
.entry-content .nebel-lead {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.5;
}

@media (min-width: 640px) {

	.contact-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Teléfono en la cabecera (móvil/tablet) ----------------------------- */
.header-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto; /* Lo pega a la hamburguesa, separado del logotipo. */
	padding: 0.5rem 0.25rem;
	color: var(--color-primary);
	font-size: 1rem; /* 16px (antes 15px). */
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.header-phone svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--color-accent-text);
}

.header-phone:hover {
	color: var(--color-accent-text);
}

/* El gap del header ya separa; el botón hamburguesa queda pegado al teléfono. */
.site-header__inner .header-phone + .mobile-menu-toggle {
	margin-left: -0.25rem;
}

/* Pantallas muy estrechas: solo el icono, para no montar el logotipo. */
@media (max-width: 359px) {

	.header-phone__number {
		display: none;
	}
}

@media (min-width: 1024px) {

	.header-phone {
		display: none;
	}
}

/* --- Hero en móvil: sin botón de presupuesto si existe la barra fija ------
   La barra inferior ya ofrece "Solicitar presupuesto": se evita repetirlo en
   el primer pantallazo. En escritorio (sin barra) el botón se mantiene. */
@media (max-width: 1023px) {

	.has-mobile-cta-bar .hero-home__actions .btn--primary {
		display: none;
	}
}