/* ==========================================================================
   Ingenionic — utilidades del tema
   Clases que se aplican desde el editor (Avanzado → Clases CSS adicionales).
   Todo lo que sea color, tipografía o espaciado base vive en theme.json.
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Titulares sobre fondo oscuro: el color viene del bloque padre. */
.has-navy-background-color :where(h1, h2, h3, h4, h5),
.has-navy-deep-background-color :where(h1, h2, h3, h4, h5),
.ing-section--dark :where(h1, h2, h3, h4, h5) {
	color: var(--wp--preset--color--white);
}

.has-navy-background-color :where(p, li),
.has-navy-deep-background-color :where(p, li),
.ing-section--dark :where(p, li) {
	color: var(--wp--preset--color--muted-light);
}

/* --- Etiqueta de sección (CONTACTO ——) ------------------------------------ */

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-block-end: 1.25rem !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--gold);
}

.eyebrow::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 42px;
	block-size: 1px;
	background: currentColor;
	opacity: 0.55;
}

.eyebrow--center {
	justify-content: center;
}

.eyebrow--plain::after {
	display: none;
}

/* --- Regla dorada sobre un titular ---------------------------------------- */

.rule-gold {
	position: relative;
	padding-block-start: 1.6rem;
}

.rule-gold::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--wp--custom--rule--width, 48px);
	block-size: var(--wp--custom--rule--height, 2px);
	background: var(--wp--preset--color--gold);
}

.rule-gold.has-text-align-center::before {
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

/* --- Enlaces con flecha ---------------------------------------------------- */

.arrow-link,
.arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	line-height: 1.4;
}

.arrow-link a::after,
a.arrow-link::after {
	content: "→";
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	transition: transform 0.22s ease;
}

.arrow-link a:hover::after,
a.arrow-link:hover::after {
	transform: translateX(4px);
}

.arrow-link a:hover,
a.arrow-link:hover {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* Variante con subrayado permanente (menú de tarjetas de servicio) */
.arrow-link--underline a,
a.arrow-link--underline {
	padding-block-end: 0.7rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	inline-size: 100%;
	justify-content: space-between;
}

.ing-section--dark .arrow-link--underline a,
.has-navy-background-color .arrow-link--underline a {
	border-block-end-color: var(--wp--preset--color--line-dark);
}

/* Etiqueta en versalitas dentro del enlace (SGR 5.0 →) */
.arrow-link--caps a,
a.arrow-link--caps {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Enlace de texto subrayado sobre navy (CTA secundario del hero) */
.link-underline a,
a.link-underline {
	color: var(--wp--preset--color--white);
	border-block-end: 1px solid rgba(255, 255, 255, 0.4);
	padding-block-end: 0.35rem;
	text-decoration: none;
}

.link-underline a:hover,
a.link-underline:hover {
	color: var(--wp--preset--color--gold);
	border-block-end-color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* --- Tarjetas -------------------------------------------------------------- */

.ing-card {
	block-size: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.ing-card:hover {
	border-color: var(--wp--preset--color--gold);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--card);
}

.ing-card--flat:hover {
	transform: none;
	box-shadow: none;
}

.ing-card--dark {
	background: var(--wp--preset--color--navy-soft);
	border-color: var(--wp--preset--color--line-dark);
}

.ing-card--dark :where(h2, h3, h4, h5) { color: var(--wp--preset--color--white); }
.ing-card--dark :where(p, li) { color: var(--wp--preset--color--muted-light); }

/* Tarjeta con imagen superior a sangre */
.ing-card--media > .wp-block-image,
.ing-card--media > figure:first-child {
	margin: 0;
	overflow: hidden;
	border-start-start-radius: 8px;
	border-start-end-radius: 8px;
}

.ing-card--media > .wp-block-image img,
.ing-card--media > figure:first-child img {
	display: block;
	inline-size: 100%;
	block-size: clamp(150px, 20vw, 190px);
	object-fit: cover;
	transition: transform 0.6s ease;
}

.ing-card--media:hover > .wp-block-image img,
.ing-card--media:hover > figure:first-child img {
	transform: scale(1.035);
}

/* --- Columnas separadas por línea vertical --------------------------------- */

.ing-divided > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var(--wp--preset--color--line);
	padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
}

.ing-section--dark .ing-divided > .wp-block-column + .wp-block-column,
.has-navy-background-color .ing-divided > .wp-block-column + .wp-block-column {
	border-inline-start-color: var(--wp--preset--color--line-dark);
}

@media (max-width: 781px) {
	.ing-divided > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--line);
		padding-inline-start: 0;
		padding-block-start: 1.5rem;
	}
	.ing-section--dark .ing-divided > .wp-block-column + .wp-block-column,
	.has-navy-background-color .ing-divided > .wp-block-column + .wp-block-column {
		border-block-start-color: var(--wp--preset--color--line-dark);
	}
}

/* Filas separadas por línea (bloques de contacto) */
.ing-stack-divided > * + * {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* --- Numerales 01 / 02 / 03 ------------------------------------------------- */

.numeral {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--numeral);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	letter-spacing: -0.02em;
	margin-block-end: 0.5rem !important;
}

.numeral--rule {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.numeral--rule::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 28px;
	block-size: 1px;
	background: currentColor;
	opacity: 0.6;
}

.numeral--small {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* --- Íconos de línea -------------------------------------------------------- */

.ing-icon,
.ing-icon svg,
.ing-icon img {
	inline-size: clamp(34px, 4vw, 42px);
	block-size: auto;
}

.ing-icon svg {
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ing-icon--sm,
.ing-icon--sm svg,
.ing-icon--sm img {
	inline-size: 26px;
}

.ing-icon figure,
figure.ing-icon {
	margin: 0;
}

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

.ing-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ing-hero .wp-block-cover__background,
.ing-hero.wp-block-cover .wp-block-cover__background {
	z-index: 1;
}

/* El velo va en z-index 1, asi que el contenido tiene que ir por encima:
   el nucleo deja .wp-block-cover__inner-container en z-index auto y el
   texto del hero quedaba tapado por el degradado. */
.ing-hero > .wp-block-cover__inner-container,
.ing-hero.wp-block-cover > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* --- Marca ------------------------------------------------------------------ */
/* El logotipo es blanco sobre transparente y vive dentro del tema, asi que no
   depende de la biblioteca de medios ni se pierde al reinstalar. Cabecera y pie
   son navy, que es el fondo para el que esta hecho. */

.ing-brand {
	display: inline-block;
	line-height: 0;
}

.ing-brand img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.ing-brand--header { inline-size: 178px; }
.ing-brand--footer { inline-size: 168px; }

@media (max-width: 781px) {
	.ing-brand--header { inline-size: 140px; }
}

/* Fotografia de cada hero. Va como fondo del Cover, debajo del velo, para no
   tocar el marcado del bloque: el degradado horizontal deja la zona del texto
   en navy solido y la imagen respira a la derecha. */
.ing-hero--inicio      { --ing-hero-img: url("../images/hero-inicio.webp"); }
.ing-hero--servicios   { --ing-hero-img: url("../images/hero-servicios.webp"); }
.ing-hero--diagnostico { --ing-hero-img: url("../images/hero-diagnostico.webp"); }
.ing-hero--nosotros    { --ing-hero-img: url("../images/hero-nosotros.webp"); }
.ing-hero--recursos    { --ing-hero-img: url("../images/hero-recursos.webp"); }
.ing-hero--contacto    { --ing-hero-img: url("../images/hero-contacto.webp"); }

.ing-hero[class*="ing-hero--"] {
	background-image: var(--ing-hero-img);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

/* En movil el velo horizontal ya no cubre la columna de texto, asi que se
   oscurece la imagen entera. */
@media (max-width: 781px) {
	.ing-hero[class*="ing-hero--"] {
		background-image: linear-gradient( rgba(15, 32, 53, 0.78), rgba(15, 32, 53, 0.78) ), var(--ing-hero-img);
	}
}

.ing-hero__text {
	max-inline-size: 36ch;
}

.ing-hero h1 {
	text-wrap: balance;
}

/* Hero con formulario a la derecha: la columna del form no se estira */
.ing-hero-form {
	background: var(--wp--preset--color--white);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--float);
}

/* --- Formularios ------------------------------------------------------------ */
/* Cubre el formulario nativo del tema y normaliza WPForms / Gravity / CF7. */

.ing-form label,
.ing-form .wpforms-field-label,
.ing-form .gfield_label,
.ing-form .ing-field__label {
	display: block;
	margin-block-end: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	line-height: 1.4;
}

.ing-form .ing-field + .ing-field {
	margin-block-start: 1rem;
}

.ing-form input[type="text"],
.ing-form input[type="email"],
.ing-form input[type="tel"],
.ing-form input[type="url"],
.ing-form input[type="number"],
.ing-form select,
.ing-form textarea {
	inline-size: 100%;
	padding: 0.78rem 0.9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	line-height: 1.5;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
}

.ing-form textarea {
	min-block-size: 110px;
	resize: vertical;
}

.ing-form select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6673' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 18px;
	padding-inline-end: 2.5rem;
}

.ing-form :where(input, select, textarea)::placeholder {
	color: #9aa3ae;
	opacity: 1;
}

.ing-form :where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
	outline: none;
}

.ing-form button[type="submit"],
.ing-form input[type="submit"],
.ing-form .wpforms-submit,
.ing-form .gform_button {
	inline-size: 100%;
	padding: 0.95rem 1.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--gold);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* --- HubSpot ---------------------------------------------------------------- */
/* El embebido trae su propio marcado; estas reglas lo alinean con el tema.
   Los inputs y el boton ya heredan de .ing-form porque el contenedor la lleva. */

.ing-form--hubspot .hs-form-field + .hs-form-field,
.ing-form--hubspot .hs-form-field + .hs_submit,
.ing-form--hubspot .hs-richtext + .hs_submit {
	margin-block-start: 1rem;
}

.ing-form--hubspot ul,
.ing-form--hubspot ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ing-form--hubspot .hs-field-desc {
	margin-block: 0.25rem 0.5rem;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}

.ing-form--hubspot .hs-richtext {
	margin-block: 1rem 0.75rem;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

.ing-form--hubspot .hs-richtext a {
	color: var(--wp--preset--color--gold);
}

.ing-form--hubspot .hs-form-required {
	color: var(--wp--preset--color--gold);
	margin-inline-start: 0.15rem;
}

/* HubSpot fija anchos en linea; se neutralizan para que la rejilla sea la del tema. */
.ing-form--hubspot .hs-form-field,
.ing-form--hubspot .input,
.ing-form--hubspot .hs-input {
	inline-size: 100% !important;
	margin-inline: 0 !important;
	box-sizing: border-box;
}

.ing-form--hubspot .hs-input[type="checkbox"],
.ing-form--hubspot .hs-input[type="radio"] {
	inline-size: auto !important;
	margin-inline-end: 0.5rem;
}

.ing-form--hubspot .hs-error-msgs label,
.ing-form--hubspot .hs-error-msg {
	margin-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	color: #b3261e;
}

.ing-form--hubspot .hs-input.invalid {
	border-color: #b3261e;
}

.ing-form--hubspot .submitted-message {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
}

.ing-form button[type="submit"]:hover,
.ing-form input[type="submit"]:hover,
.ing-form .wpforms-submit:hover,
.ing-form .gform_button:hover {
	background: var(--wp--preset--color--gold-light);
	border-color: var(--wp--preset--color--gold-light);
}

.ing-form__message {
	margin-block-end: 1.25rem !important;
	padding: 0.9rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--cream-deep);
	border-inline-start: 3px solid var(--wp--preset--color--gold);
	border-radius: 4px;
}

.ing-form__note {
	margin-block-start: 0.75rem !important;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--muted);
	text-align: center;
	line-height: 1.5;
}

/* --- Cabecera --------------------------------------------------------------- */

.ing-header {
	position: relative;
	z-index: 20;
}

.ing-header .wp-block-navigation {
	--navigation-layout-align: center;
}

.ing-header .wp-block-navigation a {
	color: var(--wp--preset--color--white);
	opacity: 0.88;
	padding-block: 0.35rem;
	transition: opacity 0.18s ease, color 0.18s ease;
}

.ing-header .wp-block-navigation a:hover {
	opacity: 1;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ing-header .wp-block-navigation .current-menu-item a,
.ing-header .wp-block-navigation .current_page_item a {
	opacity: 1;
	border-block-end: 2px solid var(--wp--preset--color--gold);
}

.ing-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--navy);
	padding: clamp(1.5rem, 5vw, 3rem);
}

.ing-header .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--wp--preset--color--white);
	font-size: 1.25rem;
}

.ing-header .wp-block-navigation__responsive-container-open svg,
.ing-header .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--white);
}

/* El logo del header no debe crecer más de lo necesario */
.ing-logo img {
	block-size: auto;
	max-block-size: 46px;
	inline-size: auto;
}

/* Oculta el CTA del header en móvil, donde ya vive dentro del menú */
@media (max-width: 781px) {
	.ing-header__cta { display: none; }
}

/* --- Pie de página ---------------------------------------------------------- */

.ing-footer .wp-block-navigation a,
.ing-footer a {
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
}

.ing-footer .wp-block-navigation a:hover,
.ing-footer a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* --- Pestañas de recursos (anclas internas) --------------------------------- */

.ing-tabs {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.ing-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 1.15rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	border-block-end: 2px solid transparent;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.ing-tabs a:hover {
	color: var(--wp--preset--color--gold);
	border-block-end-color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* --- Media ------------------------------------------------------------------ */

.ing-media-frame img {
	border-radius: 8px;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ing-media-ratio img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	inline-size: 100%;
}

/* Placeholder para los slots de imagen aún sin material */
.ing-media-placeholder {
	position: relative;
	min-block-size: clamp(180px, 26vw, 320px);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(201, 162, 39, 0.16), rgba(15, 32, 53, 0.08)),
		var(--wp--preset--color--cream-deep);
	border: 1px dashed var(--wp--preset--color--line);
}

/* Play overlay de los videos de YouTube */
.ing-play {
	position: relative;
}

.ing-play::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 58px;
	block-size: 58px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.9);
	background: rgba(15, 32, 53, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 22px;
	pointer-events: none;
}

/* --- Utilidades varias ------------------------------------------------------- */

.text-balance { text-wrap: balance; }
.measure { max-inline-size: 46ch; }
.measure-wide { max-inline-size: 60ch; }

.ing-sticky-cta {
	position: sticky;
	inset-block-start: 2rem;
}

@media (max-width: 781px) {
	.ing-sticky-cta { position: static; }
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--white);
	clip-path: none;
	color: var(--wp--preset--color--navy);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 6px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 6px;
	width: auto;
	z-index: 100000;
}