/* ============================================================
   InPros SpA - sistema visual
   La paleta y las tipografias se editan en
   Elementor > Site Settings. Este archivo las traduce al
   diseno aprobado; no hardcodea colores salvo como respaldo.
   ============================================================ */

:root,
body {
	--inp-ox:    var(--e-global-color-accent,    #B8631F);
	--inp-graf:  var(--e-global-color-primary,   #191713);
	--inp-horm:  var(--e-global-color-secondary, #7C7061);
	--inp-verde: var(--e-global-color-inpverde,  #13312F);
	--inp-hueso: var(--e-global-color-inphueso,  #FBF4E9);
	--inp-acero: var(--e-global-color-inpacero,  #E9DCC6);

	--inp-pad:   5vw;
	--inp-linea: rgba(25, 23, 19, .16);
	--inp-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Base ---------- */

body {
	background: var(--inp-hueso);
	color: var(--inp-graf);
}

body.home .site-content .ast-container {
	max-width: none !important;
	padding: 0 !important;
}

body.home .entry-content { margin: 0 !important; }

.inp-sec {
	padding: 16vh var(--inp-pad) !important;
}

/* ---------- Cabecera de seccion ---------- */

.inp-eyebrow {
	flex-direction: row !important;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 0 0 18px !important;
	margin-bottom: 9vh;
	border-bottom: 1px solid var(--inp-linea);
}

.inp-eyebrow__label .elementor-heading-title {
	margin: 0;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--inp-horm);
}

.inp-eyebrow__num .elementor-heading-title {
	margin: 0;
	font-family: var(--inp-mono);
	font-size: 12px;
	color: var(--inp-ox);
}

.inp-h2 .elementor-heading-title {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.inp-body p { margin: 0; font-size: 17px; line-height: 1.7; }
.inp-body--muted p { color: var(--inp-horm); }

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

.inp-hero {
	position: relative;
	min-height: 100svh;
	justify-content: flex-end !important;
	align-items: flex-start !important;
	padding: 0 var(--inp-pad) 12vh !important;
	overflow: hidden;
}

.inp-hero__inner {
	align-items: flex-start !important;
	gap: 0 !important;
	padding: 0 !important;
	max-width: 1100px;
}

.inp-kicker .elementor-heading-title {
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(251, 244, 233, .75);
}

.inp-hero__title .elementor-heading-title {
	margin: 0;
	color: var(--inp-hueso);
	font-size: clamp(38px, 5.2vw, 76px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.inp-hero__lead p {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(251, 244, 233, .86);
}

/* Enlace subrayado en lugar de boton macizo. */
.inp-link .elementor-button {
	display: inline-block;
	margin-top: 30px;
	padding: 0 0 5px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--inp-ox);
	border-radius: 0;
	color: var(--inp-hueso);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .3s ease;
}

.inp-link .elementor-button:hover { color: var(--inp-ox); background: none; }
.inp-link .elementor-button-text::after { content: " \2192"; }

/* ---------- Nosotros ---------- */

.inp-nosotros__cols {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	margin-top: 5vh;
	padding: 0 !important;
}

/* ---------- Servicios ---------- */

.inp-serv-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10vh 6vw;
	padding: 0 !important;
}

.inp-serv { padding: 0 !important; gap: 0 !important; }

.inp-serv__img { overflow: hidden; }

.inp-serv__img img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
	transition: transform .6s ease;
}

.inp-serv:hover .inp-serv__img img { transform: scale(1.03); }

.inp-serv__num .elementor-heading-title {
	margin: 22px 0 0;
	font-family: var(--inp-mono);
	font-size: 12px;
	color: var(--inp-ox);
}

.inp-serv__title .elementor-heading-title {
	margin: 10px 0 0;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.2;
}

.inp-serv__text p {
	margin: 12px 0 0;
	max-width: 42ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--inp-horm);
}

/* ---------- Sectores ---------- */

.inp-sect-list { padding: 0 !important; gap: 0 !important; }

.inp-sect-row {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 32px;
	align-items: start;
	padding: 38px 0 !important;
	border-bottom: 1px solid var(--inp-linea);
}

.inp-sect-row:first-child { border-top: 1px solid var(--inp-linea); }

.inp-sect-row__title .elementor-heading-title {
	margin: 0;
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 500;
	line-height: 1.15;
	transition: color .3s ease;
}

.inp-sect-row:hover .inp-sect-row__title .elementor-heading-title { color: var(--inp-ox); }

.inp-sect-row__text p {
	margin: 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--inp-horm);
}

/* Miniatura que sigue al cursor (la coloca inpros.js). */
.inp-sect-row__thumb {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	width: 300px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.inp-sect-row__thumb img { display: block; width: 100%; height: 210px; object-fit: cover; }
.inp-sect-row__thumb.is-on { opacity: 1; }

/* ---------- Proceso ---------- */

.inp-proc-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6vw;
	padding: 0 !important;
}

.inp-proc { padding: 0 !important; gap: 0 !important; }

.inp-proc__num .elementor-heading-title {
	margin: 0;
	font-family: var(--inp-mono);
	font-size: 12px;
	color: var(--inp-ox);
}

.inp-proc__title .elementor-heading-title { margin: 14px 0 0; font-size: 22px; font-weight: 500; }

.inp-proc__text p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--inp-horm); }

/* ---------- Proyectos ---------- */

.inp-proy-grid {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr);
	gap: 9vh 3vw;
	padding: 0 !important;
}

.inp-proy { padding: 0 !important; }

.inp-proy:nth-child(1) { grid-column: 1 / span 7; }
.inp-proy:nth-child(2) { grid-column: 9 / span 4; margin-top: 12vh; }
.inp-proy:nth-child(3) { grid-column: 1 / span 4; }
.inp-proy:nth-child(4) { grid-column: 6 / span 7; }
.inp-proy:nth-child(5) { grid-column: 1 / span 6; }
.inp-proy:nth-child(6) { grid-column: 8 / span 5; margin-top: 8vh; }
.inp-proy:nth-child(7) { grid-column: 1 / span 12; }

.inp-proy__img figure { margin: 0; }
.inp-proy__img img { display: block; width: 100%; height: auto; }

.inp-proy__img figcaption {
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--inp-horm);
	text-align: left;
}

.inp-proy__nota p {
	margin: 8vh 0 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--inp-horm);
}

/* ---------- Contacto ---------- */

.inp-contacto { background: var(--inp-verde); color: var(--inp-hueso); }

.inp-contacto .inp-eyebrow { border-bottom-color: rgba(251, 244, 233, .2); }
.inp-contacto .inp-eyebrow__label .elementor-heading-title { color: rgba(251, 244, 233, .6); }
.inp-contacto .inp-h2 .elementor-heading-title { color: var(--inp-hueso); }

.inp-contacto__cols {
	display: grid !important;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 6vw;
	margin-top: 6vh;
	padding: 0 !important;
}

.inp-contacto__form,
.inp-contacto__datos { padding: 0 !important; gap: 0 !important; }

.inp-dato__label .elementor-heading-title {
	margin: 34px 0 0;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(251, 244, 233, .55);
}

.inp-contacto__datos > :first-child .elementor-heading-title { margin-top: 0; }

.inp-dato__valor p { margin: 8px 0 0; font-size: 19px; }

.inp-dato__valor a {
	color: var(--inp-hueso);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease;
}

.inp-dato__valor a:hover { border-bottom-color: var(--inp-ox); }

/* Formulario WPForms dentro de la seccion oscura. */
.inp-contacto .wpforms-container { margin: 0 !important; }

.inp-contacto .wpforms-field-label {
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(251, 244, 233, .55) !important;
}

.inp-contacto .wpforms-field input[type="text"],
.inp-contacto .wpforms-field input[type="email"],
.inp-contacto .wpforms-field textarea {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(251, 244, 233, .34) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--inp-hueso) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	padding: 8px 0 !important;
	max-width: 100% !important;
}

.inp-contacto .wpforms-field input:focus,
.inp-contacto .wpforms-field textarea:focus {
	border-bottom-color: var(--inp-ox) !important;
	outline: none !important;
}

.inp-contacto .wpforms-submit {
	background: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--inp-ox) !important;
	border-radius: 0 !important;
	color: var(--inp-hueso) !important;
	padding: 0 0 5px !important;
	font-size: 12px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.inp-contacto .wpforms-submit:hover { color: var(--inp-ox) !important; }

/* ---------- Pie ---------- */

.inp-footer { padding: 10vh var(--inp-pad) 6vh !important; }

.inp-footer__top {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: space-between;
	align-items: baseline;
	gap: 32px;
	padding: 0 !important;
}

.inp-footer__logo img { height: 40px; width: auto; }

/* El nav del pie desbordaba bajo 556px: ahora envuelve. */
.inp-footer__nav p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
}

.inp-footer__nav a {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--inp-horm);
	text-decoration: none;
}

.inp-footer__nav a:hover { color: var(--inp-ox); }

.inp-footer__legal p {
	margin: 6vh 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--inp-linea);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--inp-horm);
}

/* ---------- Cabecera Astra fija y esmerilada ---------- */

body.home #masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background: rgba(251, 244, 233, .72) !important;
	-webkit-backdrop-filter: saturate(120%) blur(14px);
	backdrop-filter: saturate(120%) blur(14px);
	border-bottom: 1px solid rgba(25, 23, 19, .1);
	transition: background .4s ease;
}

body.home #masthead .ast-primary-header-bar,
body.home #masthead .main-header-bar { background: transparent !important; border: 0 !important; }

body.home #masthead.is-solid { background: rgba(251, 244, 233, .95) !important; }

body.home #masthead .main-header-menu > .menu-item > .menu-link {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
	.inp-nosotros__cols { grid-template-columns: 1fr; gap: 24px; }
	.inp-proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7vh 6vw; }
	.inp-contacto__cols { grid-template-columns: 1fr; gap: 8vh; }
	.inp-proy-grid { gap: 7vh 3vw; }
	.inp-proy-grid > .inp-proy { grid-column: 1 / span 12 !important; margin-top: 0 !important; }
}

@media (max-width: 760px) {
	:root { --inp-pad: 6vw; }
	.inp-sec { padding: 11vh var(--inp-pad) !important; }
	.inp-hero { min-height: 88svh; padding-bottom: 9vh !important; }
	.inp-serv-grid { grid-template-columns: 1fr; gap: 8vh 0; }
	.inp-sect-row { grid-template-columns: 1fr; gap: 12px; }
	.inp-sect-row__thumb { display: none !important; }
	.inp-eyebrow { margin-bottom: 6vh; }
}

@media (max-width: 420px) {
	.inp-proc-grid { grid-template-columns: 1fr; gap: 5vh; }
	.inp-dato__valor p { font-size: 17px; }
	.inp-serv__img img { height: 230px; }
}

/* ---------- Anclas bajo la cabecera fija ---------- */

html { scroll-behavior: smooth; }

#top,
#nosotros,
#servicios,
#sectores,
#proyectos,
#contacto { scroll-margin-top: 96px; }

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

/* ---------- Tipografia: Archivo en todo el sitio ---------- */

body,
body h1, body h2, body h3, body h4,
body .elementor-heading-title,
body input, body textarea, body button {
	font-family: Archivo, Helvetica, Arial, sans-serif;
}

/* ---------- Identidad en la cabecera ---------- */

.custom-logo-link img,
.ast-site-identity .custom-logo-link img {
	max-height: 46px;
	width: auto;
}

.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-description,
.site-header .site-title,
.site-header .site-description {
	display: none !important;
}

body.home #masthead .ast-primary-header-bar {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	transition: padding .4s ease;
}

body.home #masthead.is-solid .ast-primary-header-bar {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* Elementor define --min-height en .e-con; hay que ganarle. */
.inp-hero.e-con {
	--min-height: 100svh;
	min-height: 100svh;
}

@supports not (height: 100svh) {
	.inp-hero.e-con { --min-height: 100vh; min-height: 100vh; }
}

/* ---------- Capas del hero ---------- */

.inp-hero > .elementor-background-video-container { z-index: 0; }
.inp-hero::before { z-index: 1; }
.inp-hero > .inp-hero__inner { position: relative; z-index: 2; }

/* El kit de Elementor colorea los titulares con el global 'primary';
   sobre fondo oscuro hay que forzar el hueso. */
.inp-hero .elementor-heading-title,
.inp-contacto .elementor-heading-title { color: var(--inp-hueso); }

.inp-kicker .elementor-heading-title { color: rgba(251, 244, 233, .75); }
.inp-contacto .inp-eyebrow__label .elementor-heading-title { color: rgba(251, 244, 233, .6); }
.inp-contacto .inp-eyebrow__num .elementor-heading-title,
.inp-eyebrow__num .elementor-heading-title { color: var(--inp-ox); }
.inp-eyebrow__label .elementor-heading-title { color: var(--inp-horm); }
.inp-serv__num .elementor-heading-title,
.inp-proc__num .elementor-heading-title { color: var(--inp-ox); }

/* ============================================================
   Correcciones sobre el kit de Elementor
   El kit colorea titulares y botones con sus globales y su hoja
   carga despues de esta, asi que aqui hace falta !important.
   ============================================================ */

/* Texto sobre fondo oscuro: hero y contacto. */
.inp-hero .elementor-heading-title,
.inp-hero__title .elementor-heading-title,
.inp-contacto .elementor-heading-title,
.inp-contacto .inp-h2 .elementor-heading-title { color: var(--inp-hueso) !important; }

.inp-kicker .elementor-heading-title { color: rgba(251, 244, 233, .75) !important; }
.inp-hero__lead p { color: rgba(251, 244, 233, .86) !important; }

.inp-contacto .inp-eyebrow__label .elementor-heading-title { color: rgba(251, 244, 233, .6) !important; }
.inp-contacto .inp-dato__label .elementor-heading-title { color: rgba(251, 244, 233, .55) !important; }
.inp-contacto .inp-dato__valor p { color: var(--inp-hueso) !important; }
.inp-contacto .inp-dato__valor a { color: var(--inp-hueso) !important; }

/* Numeros de seccion y etiquetas. */
.inp-eyebrow__num .elementor-heading-title,
.inp-serv__num .elementor-heading-title,
.inp-proc__num .elementor-heading-title { color: var(--inp-ox) !important; }

.inp-eyebrow__label .elementor-heading-title { color: var(--inp-horm) !important; }

/* El boton del hero es un enlace subrayado, no un boton macizo. */
.inp-link .elementor-button,
.inp-link .elementor-button:visited {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--inp-ox) !important;
	border-radius: 0 !important;
	color: var(--inp-hueso) !important;
	padding: 0 0 5px !important;
	fill: var(--inp-hueso) !important;
}

.inp-link .elementor-button:hover { color: var(--inp-ox) !important; background-color: transparent !important; }

/* ============================================================
   Ajustes posteriores a la primera entrega
   ============================================================ */

/* Fondo hueso en todo el sitio. Astra pinta blanco desde su CSS
   dinamico, que se encola despues de esta hoja. */
body,
.site,
#page,
#content { background-color: var(--inp-hueso) !important; }

/* ---------- Cabecera: logo y menu centrados y contenidos ---------- */
/* Solo el header de escritorio; en movil se conserva
   logo a la izquierda y boton de menu a la derecha. */

#masthead > div:not(.ast-mobile-header-wrap) .ast-main-header-wrap .site-primary-header-wrap {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
}

#masthead > div:not(.ast-mobile-header-wrap) .ast-main-header-wrap .ast-builder-grid-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 12px 44px !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .ast-main-header-wrap .site-header-primary-section-left,
#masthead > div:not(.ast-mobile-header-wrap) .ast-main-header-wrap .site-header-primary-section-right {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: 100% !important;
	justify-content: center !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .ast-main-header-wrap .main-header-menu {
	justify-content: center !important;
	flex-wrap: wrap;
}

#masthead > div:not(.ast-mobile-header-wrap) .ast-main-header-wrap .main-header-menu > .menu-item > .menu-link {
	padding-left: 15px;
	padding-right: 15px;
}

/* La cabecera pasa a dos filas: se reduce su relleno propio. */
body.home #masthead > div:not(.ast-mobile-header-wrap) .ast-main-header-wrap .ast-primary-header-bar {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

body.home #masthead.is-solid > .ast-main-header-wrap .ast-primary-header-bar {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* Cabecera mas alta: las anclas necesitan mas margen de parada. */
#top,
#nosotros,
#servicios,
#sectores,
#proyectos,
#contacto { scroll-margin-top: 150px; }

/* ---------- Afinado de la cabecera centrada ---------- */

#masthead > div:not(.ast-mobile-header-wrap) .ast-builder-grid-row { gap: 6px !important; }

/* Sin rellenos laterales heredados: el logo debe caer en el eje exacto. */
#masthead > div:not(.ast-mobile-header-wrap) .site-header-primary-section-left,
#masthead > div:not(.ast-mobile-header-wrap) .site-header-primary-section-right,
#masthead > div:not(.ast-mobile-header-wrap) .ast-builder-layout-element,
#masthead > div:not(.ast-mobile-header-wrap) .ast-site-identity {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .custom-logo-link img { max-height: 38px; }

body.home #masthead > div:not(.ast-mobile-header-wrap) .ast-primary-header-bar {
	padding-top: 10px !important;
	padding-bottom: 8px !important;
}

body.home #masthead.is-solid > div:not(.ast-mobile-header-wrap) .ast-primary-header-bar {
	padding-top: 6px !important;
	padding-bottom: 4px !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .main-header-menu > .menu-item > .menu-link {
	padding-top: 6px;
	padding-bottom: 6px;
}

#top,
#nosotros,
#servicios,
#sectores,
#proyectos,
#contacto { scroll-margin-top: 130px; }

/* ---------- Compactado fino de la cabecera ---------- */

#masthead > div:not(.ast-mobile-header-wrap) .site-primary-header-wrap {
	min-height: 0 !important;
}

/* font-size:0 elimina el nodo de espacio que descentraba el logo. */
#masthead > div:not(.ast-mobile-header-wrap) .ast-site-identity {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	font-size: 0 !important;
	justify-content: center !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .custom-logo-link {
	display: block !important;
	line-height: 0 !important;
}

/* Astra da al menu un line-height de altura completa. */
#masthead > div:not(.ast-mobile-header-wrap) .main-header-menu > .menu-item > .menu-link {
	line-height: 1.4 !important;
	height: auto !important;
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}

#top,
#nosotros,
#servicios,
#sectores,
#proyectos,
#contacto { scroll-margin-top: 115px; }

/* ============================================================
   Paginas interiores y fichas de curso
   ============================================================ */

/* En la home la cabecera flota sobre el hero; en el resto va
   en el flujo normal, solida, para no tapar el contenido. */
body:not(.home) #masthead {
	position: relative;
	background: var(--inp-hueso) !important;
	border-bottom: 1px solid var(--inp-linea);
}

.inp-cursos-intro { padding-top: 12vh !important; }

.inp-cursos-titulo .elementor-heading-title {
	max-width: 24ch;
	font-size: clamp(32px, 4vw, 56px);
}

/* ---------- Fichas de curso ---------- */

.inp-curso-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7vh 3vw;
	padding: 0 !important;
}

.inp-curso {
	padding: 0 0 28px !important;
	gap: 0 !important;
	border-bottom: 1px solid var(--inp-linea);
}

.inp-curso__img { overflow: hidden; }

.inp-curso__img img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform .6s ease;
}

.inp-curso:hover .inp-curso__img img { transform: scale(1.03); }

.inp-curso__meta .elementor-heading-title {
	margin: 20px 0 0;
	font-family: var(--inp-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--inp-ox) !important;
}

.inp-curso__titulo .elementor-heading-title {
	margin: 12px 0 0;
	font-size: clamp(20px, 1.9vw, 26px);
	font-weight: 500;
	line-height: 1.2;
}

.inp-curso__texto p {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--inp-horm);
}

.inp-curso__cta .elementor-button,
.inp-curso__cta .elementor-button:visited {
	display: inline-block;
	margin-top: 20px;
	padding: 0 0 5px !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-bottom: 1px solid var(--inp-ox) !important;
	border-radius: 0 !important;
	color: var(--inp-graf) !important;
	font-size: 12px !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .3s ease;
}

.inp-curso__cta .elementor-button:hover { color: var(--inp-ox) !important; background-color: transparent !important; }
.inp-curso__cta .elementor-button-text::after { content: " \2192"; }

@media (max-width: 1080px) {
	.inp-curso-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6vh 4vw; }
}

@media (max-width: 760px) {
	.inp-curso-grid { grid-template-columns: 1fr; gap: 6vh 0; }
	.inp-cursos-intro { padding-top: 8vh !important; }
}

/* El menu debe verse igual en la home y en paginas interiores. */
#masthead .main-header-menu > .menu-item > .menu-link {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ============================================================
   Alturas de imagen
   widget-image.min.css de Elementor declara height:auto y se
   carga despues de esta hoja, por eso hace falta !important
   para que los recortes uniformes se respeten.
   ============================================================ */

.inp-serv__img img {
	height: 300px !important;
	width: 100% !important;
	object-fit: cover !important;
}

.inp-curso__img img {
	height: 220px !important;
	width: 100% !important;
	object-fit: cover !important;
}

.inp-sect-row__thumb img {
	height: 210px !important;
	width: 100% !important;
	object-fit: cover !important;
}

.inp-footer__logo img {
	height: 40px !important;
	width: auto !important;
}

@media (max-width: 420px) {
	.inp-serv__img img { height: 230px !important; }
}

/* ============================================================
   Cabecera: una sola fila, logo a la izquierda del menu,
   y el conjunto centrado en la pagina.
   ============================================================ */

#masthead > div:not(.ast-mobile-header-wrap) .ast-builder-grid-row {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 14px 44px !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .site-header-primary-section-left,
#masthead > div:not(.ast-mobile-header-wrap) .site-header-primary-section-right {
	flex: 0 0 auto !important;
	width: auto !important;
	align-items: center !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .custom-logo-link img { max-height: 40px; }

body.home #masthead > div:not(.ast-mobile-header-wrap) .ast-primary-header-bar {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

body.home #masthead.is-solid > div:not(.ast-mobile-header-wrap) .ast-primary-header-bar {
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}

/* ---------- Barra de administracion de WordPress ----------
   Solo la ven los usuarios con sesion iniciada, pero tapaba
   la cabecera fija de la portada. */

body.admin-bar.home #masthead { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar.home #masthead { top: 46px; }
}

#top,
#nosotros,
#servicios,
#sectores,
#proyectos,
#contacto { scroll-margin-top: 90px; }

body.admin-bar #top,
body.admin-bar #nosotros,
body.admin-bar #servicios,
body.admin-bar #sectores,
body.admin-bar #proyectos,
body.admin-bar #contacto { scroll-margin-top: 122px; }

/* ============================================================
   Tienda (WooCommerce)
   Hereda la paleta y la tipografia del resto del sitio.
   ============================================================ */

.woocommerce-page .site-content,
.woocommerce .site-content { background: var(--inp-hueso); }

.woocommerce-page .ast-container,
.woocommerce .ast-container {
	max-width: 1240px;
	padding-top: 8vh;
	padding-bottom: 10vh;
}

.woocommerce-products-header__title,
.woocommerce-page h1.entry-title {
	font-size: clamp(30px, 3.4vw, 44px) !important;
	font-weight: 500 !important;
	letter-spacing: -.01em;
	margin-bottom: 6vh !important;
}

/* Rejilla de productos */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 17px !important;
	font-weight: 500 !important;
	line-height: 1.3;
	padding-top: 14px !important;
}

.woocommerce ul.products li.product img {
	margin-bottom: 0 !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--inp-graf) !important;
	font-size: 17px !important;
	font-variant-numeric: tabular-nums;
}

.woocommerce span.onsale {
	background: var(--inp-ox) !important;
	color: var(--inp-hueso) !important;
	border-radius: 0 !important;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Botones: mismo criterio que el resto del sitio. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit {
	background: var(--inp-graf) !important;
	color: var(--inp-hueso) !important;
	border-radius: 0 !important;
	font-family: inherit !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 14px 22px !important;
	transition: background .3s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--inp-ox) !important;
	color: var(--inp-hueso) !important;
}

/* Avisos */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--inp-ox) !important;
	background: var(--inp-acero) !important;
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--inp-ox) !important; }

/* Formularios de carrito y checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.shop_table {
	border-radius: 0 !important;
	font-family: inherit !important;
}

.woocommerce table.shop_table th { font-weight: 500; }

/* La tienda no lleva la cabecera flotante de la portada. */
.woocommerce-page #masthead { position: relative; }

/* La cabecera compacta aplica en todas las paginas, no solo en la portada. */
#masthead > div:not(.ast-mobile-header-wrap) .ast-primary-header-bar {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

#masthead > div:not(.ast-mobile-header-wrap) .site-primary-header-wrap {
	min-height: 0 !important;
}

/* Astra aplica padding 72px/90px al contenedor interno de la
   cabecera; el alto real lo controla .ast-primary-header-bar. */
#masthead > div:not(.ast-mobile-header-wrap) .site-primary-header-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ============================================================
   Sectores: texto con una fotografia fija al costado
   Sustituye a la miniatura que seguia al cursor, que estorbaba
   la lectura durante el scroll.
   ============================================================ */

.inp-sect-cols {
	display: grid !important;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 4vw;
	align-items: start;
	padding: 0 !important;
}

.inp-sect-foto { padding: 0 !important; }

.inp-sect-foto__img img {
	display: block;
	width: 100% !important;
	height: 560px !important;
	object-fit: cover !important;
}

/* La miniatura flotante ya no existe. */
.inp-sect-row__thumb { display: none !important; }

@media (max-width: 1080px) {
	.inp-sect-cols { grid-template-columns: 1fr; gap: 5vh; }
	.inp-sect-foto__img img { height: 320px !important; }
}

@media (max-width: 760px) {
	.inp-sect-foto__img img { height: 240px !important; }
}

/* ============================================================
   Hero: degradado inferior
   La capa plana se bajo a 0.35 para que se vea el video. El texto
   necesita contraste solo en la franja de abajo, no en toda la
   imagen: de ahi este degradado en lugar de mas opacidad global.
   ============================================================ */

.inp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(25, 23, 19, .82) 0%,
		rgba(25, 23, 19, .42) 38%,
		rgba(25, 23, 19, 0) 70%
	);
}

/* ============================================================
   Formulario de contacto — portada actual (.nx)
   El bloque .inp-contacto de mas arriba quedo huerfano: apunta al
   markup del diseno anterior y hoy no aplica a nada. Por eso el
   formulario caia al azul de fabrica de WPForms (#066aab, en :root).
   Aqui se redefinen las variables del plugin sobre el contenedor,
   en vez de pelear regla por regla: el hover, el foco y el estado
   de envio que dibuja WPForms heredan la paleta por si solos.
   El formulario va sobre caja blanca, no sobre la banda oscura.
   ============================================================ */

.nx .wpforms-container {
	--wpforms-button-background-color: #B8631F;
	--wpforms-button-border-color: #B8631F;
	--wpforms-button-text-color: #FBF4E9;
	--wpforms-button-border-radius: 0px;
	--wpforms-page-break-color: #B8631F;
	--wpforms-label-error-color: #8F4D18;
	--wpforms-field-border-color: #E5DACA;
	--wpforms-field-border-color-spare: #E5DACA;
}

.nx .wpforms-container .wpforms-submit {
	min-height: 48px;
	padding: 14px 30px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background-color .18s ease, border-color .18s ease;
}

.nx .wpforms-container .wpforms-submit:hover {
	background-color: #8F4D18;
	border-color: #8F4D18;
}

/* Sin transicion: el anillo de foco tiene que aparecer al instante. */
.nx .wpforms-container .wpforms-submit:focus-visible {
	outline: 2px solid #191713;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.nx .wpforms-container .wpforms-submit { transition: none; }
}