/* ==========================================================================
   Dekomm Ejecutivo — CSS complementario a theme.json
   Solo: header fijo, pseudo-elementos, hover, grids responsive y formulario.
   ========================================================================== */

:root {
	--dk-header-h: 76px;
	--dk-on-dark-text: #C9D1DC;
	--dk-error: #C0392B;
	--dk-ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--dk-header-h) + 16px); }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* Secciones apiladas sin hueco entre header / main / footer */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Foco visible (AA): navy sobre claro, ámbar claro sobre oscuro */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
	border-radius: 4px;
}
.dk-on-dark :focus-visible { outline-color: var(--wp--preset--color--amber-light); }

/* --------------------------------------------------------------------------
   Utilidades de color sobre fondo oscuro
   -------------------------------------------------------------------------- */
.dk-on-dark { color: var(--dk-on-dark-text); }
.dk-on-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--white); }
.dk-on-dark .is-style-eyebrow { color: var(--wp--preset--color--amber); }
.dk-on-dark a:where(:not(.wp-element-button)) { color: inherit; }
.dk-on-dark a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--amber-light); }
.dk-on-dark .dk-lead { color: rgba(255, 255, 255, .78); }

.dk-lead { max-width: 620px; }
.dk-sec-head { max-width: 720px; margin-bottom: 48px; }
.is-style-eyebrow + * { margin-block-start: 0 !important; }
.is-style-eyebrow { margin-bottom: 14px; }
.dk-note { font-size: 13px; font-style: italic; color: var(--wp--preset--color--muted); margin-top: 24px !important; }

/* Botones */
.wp-element-button,
.wp-block-button__link {
	transition: transform .2s var(--dk-ease), background-color .2s, color .2s, border-color .2s;
}
.wp-element-button:hover,
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--white); background: transparent; color: var(--wp--preset--color--white); }

/* Enlaces de acción ("Solicitar →") */
.dk-link { font-size: 14px; font-weight: 600; }
.dk-link a { text-decoration: none; color: var(--wp--preset--color--amber-text); }
.dk-link a:hover { color: var(--wp--preset--color--navy); }

/* --------------------------------------------------------------------------
   Listas con viñeta propia (estilos de bloque "Check ámbar" y "Punto ámbar")
   -------------------------------------------------------------------------- */
.is-style-check, .is-style-dot { list-style: none; padding-left: 0; display: grid; gap: 14px; }
.is-style-check > li, .is-style-dot > li { position: relative; padding-left: 30px; margin: 0; }
.is-style-check > li::before {
	content: ""; position: absolute; left: 0; top: .22em;
	width: 18px; height: 18px; border-radius: 50%;
	background: rgba(232, 137, 12, .14);
}
.is-style-check > li::after {
	content: ""; position: absolute; left: 6px; top: calc(.22em + 4px);
	width: 6px; height: 9px;
	border: solid var(--wp--preset--color--amber); border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.is-style-dot > li::before {
	content: ""; position: absolute; left: 6px; top: .65em;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--wp--preset--color--amber);
}

/* --------------------------------------------------------------------------
   Header fijo
   -------------------------------------------------------------------------- */
.dk-header {
	position: fixed; top: var(--wp-admin--admin-bar--height, 0); left: 0; right: 0; z-index: 50;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* El fondo y el blur van en un pseudo-elemento: si backdrop-filter estuviera en .dk-header,
   éste se volvería el contenedor de los position:fixed y el menú móvil quedaría atrapado en 68px. */
.dk-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgba(11, 23, 36, .82);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dk-header__in { min-height: var(--dk-header-h); }
.dk-header .wp-block-navigation a { opacity: .85; text-decoration: none; }
.dk-header .wp-block-navigation a:hover { opacity: 1; color: var(--wp--preset--color--amber-light); }
.dk-header .dk-header__cta .wp-block-button__link { padding: 11px 18px; font-size: 14px; }
.dk-header .wp-block-navigation__responsive-container.is-menu-open { padding: 24px clamp(16px, 4vw, 24px); }
.dk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: 56px; }
.dk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-family: var(--wp--preset--font-family--sora); font-size: 26px; font-weight: 600; letter-spacing: -.02em;
	gap: 20px; align-items: flex-start;
}
.dk-header .wp-block-navigation__responsive-container.is-menu-open a { opacity: 1; }
.dk-header .wp-block-navigation__responsive-container-open svg,
.dk-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* Logo */
.dk-logo { gap: 10px !important; }
.dk-logo .dk-logo__mark { margin: 0; flex: none; }
.dk-logo .dk-logo__mark img { height: 36px; width: auto; aspect-ratio: 220 / 229; display: block; }
.dk-logo__text { gap: 0 !important; line-height: 1.05; }
.dk-logo__name { font-family: var(--wp--preset--font-family--sora); font-size: 23px; font-weight: 700; letter-spacing: -.035em; color: var(--wp--preset--color--white); margin: 0; line-height: 1; }
.dk-logo__name a { text-decoration: none; color: inherit !important; }
.dk-logo__name a::after { /* punto naranja de la marca */
	content: ""; display: inline-block; width: .26em; height: .26em; margin-left: .07em;
	border-radius: 50%; background: var(--wp--preset--color--amber);
}
.dk-logo__legal { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .65); margin: 3px 0 0 !important; line-height: 1.2; }

/* Páginas interiores: compensa el header fijo */
.dk-page-hero { padding-top: calc(var(--dk-header-h) + clamp(56px, 7vw, 96px)) !important; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.dk-hero { position: relative; overflow: hidden; isolation: isolate; }
.dk-hero::before,
.dk-hero::after { content: ""; position: absolute; bottom: 0; pointer-events: none; }
/* Capa cercana: degradado + silueta industrial al 6 %. */
.dk-hero::before {
	left: 0; right: 0; height: 70%; z-index: -1;
	background:
		linear-gradient(180deg, transparent 0%, rgba(7, 17, 27, .5) 100%),
		url("../images/plant.svg?v=7") center bottom / cover no-repeat;
}
/* Capa lejana: otro perfil industrial, más tenue, con un vaivén horizontal casi imperceptible. */
.dk-hero::after {
	left: -48px; right: -48px; height: 52%; z-index: -2;
	background: url("../images/plant-far.svg?v=7") center bottom / cover no-repeat;
	filter: blur(1.5px);
	animation: dk-drift 80s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes dk-drift {
	from { transform: translate3d(-28px, 0, 0); }
	to   { transform: translate3d(28px, 0, 0); }
}
.dk-hero h1 { max-width: 900px; margin-bottom: 26px; }
.dk-hero .dk-cta { margin-top: 38px; }

/* Franja de cifras (vidrio) */
.wp-block-group.dk-stats {
	margin-top: clamp(56px, 8vw, 96px);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0;
	border-radius: 14px 14px 0 0;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	gap: 0;
}
.dk-stat { padding: 34px 30px; border-right: 1px solid rgba(255, 255, 255, .08); }
.dk-stat:last-child { border-right: 0; }
.dk-stat > * { margin: 0 !important; }
.dk-stat__n { font-weight: 600; letter-spacing: -.03em; line-height: 1.1 !important; }
.dk-stat__u { margin-top: 6px !important; color: var(--wp--preset--color--white); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.dk-stat__d { margin-top: 4px !important; font-size: 14px; color: rgba(255, 255, 255, .65); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Tarjetas de servicio
   -------------------------------------------------------------------------- */
.dk-card {
	padding: 32px 28px; background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line); border-radius: 14px;
	transition: border-color .25s, box-shadow .25s, transform .25s var(--dk-ease);
}
.dk-card:hover { border-color: transparent; box-shadow: var(--wp--preset--shadow--soft); transform: translateY(-4px); }
.dk-card > * { margin: 0 !important; }
.dk-card__n { font-family: var(--wp--preset--font-family--sora); font-weight: 600; }
.dk-card__desc { flex: 1; font-size: 15px; color: var(--wp--preset--color--muted); }

/* --------------------------------------------------------------------------
   Columnas proporcionales
   -------------------------------------------------------------------------- */
.wp-block-group.dk-split { grid-template-columns: 1fr 1.15fr; column-gap: 72px; align-items: start; }
.wp-block-group.dk-split--contact { grid-template-columns: .9fr 1.1fr; column-gap: 64px; }
.wp-block-group.dk-mv { column-gap: 72px; }
.dk-split .is-style-check { margin-top: 30px; }

/* Fundador */
.dk-founder { position: relative; overflow: hidden; border-radius: 18px; padding: 40px; color: var(--dk-on-dark-text); }
.dk-founder::after {
	content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 137, 12, .35), transparent 70%); pointer-events: none;
}
.dk-founder > * { position: relative; z-index: 1; }
.dk-founder h3 { font-size: 24px; margin-bottom: 24px; }
.dk-founder .is-style-dot { font-size: 15px; }
.dk-avatar { width: 64px; height: 64px; margin: 0 0 22px !important; }
.dk-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.dk-avatar--initials {
	display: grid; place-items: center; border-radius: 50%;
	background: linear-gradient(135deg, #E8890C, #B85F00);
	color: #fff; font: 600 20px/1 var(--wp--preset--font-family--sora);
}

/* Misión / visión */
.dk-big { font-family: var(--wp--preset--font-family--sora); line-height: 1.4; letter-spacing: -.01em; color: var(--wp--preset--color--white); margin-bottom: 26px; }
.dk-mv h3.is-style-eyebrow { margin-top: 2.5rem; }

/* Paneles beneficios / auditoría */
.dk-panel { border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 44px; }
.dk-panel h2 { margin-bottom: 20px; }
.dk-panel .is-style-check { margin-top: 20px; }
.dk-panel .dk-muted { color: var(--wp--preset--color--muted); }

/* Valores 3×2 con separadores de 1px */
.wp-block-group.dk-values {
	gap: 1px; background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line); border-radius: 14px; overflow: hidden;
}
.dk-values > * { background: var(--wp--preset--color--white); padding: 34px 30px; margin: 0 !important; }
.dk-values h3 { margin-bottom: 8px; }
.dk-values p { color: var(--wp--preset--color--muted); font-size: 15px; margin: 0; }

/* Contacto */
.dk-cinfo { margin-top: 36px !important; display: grid; gap: 22px; }
.dk-cinfo > * { margin: 0 !important; }
.dk-cinfo__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 255, 255, .62); margin: 0 0 4px !important; }
.dk-cinfo__value { font-size: 18px; font-weight: 500; color: var(--wp--preset--color--white); margin: 0 !important; }
.dk-cinfo__value a { text-decoration: none; }
.dk-contact-card { background: var(--wp--preset--color--white); border-radius: 18px; padding: 40px; box-shadow: var(--wp--preset--shadow--deep); color: var(--wp--preset--color--ink); }
.dk-contact-card :focus-visible { outline-color: var(--wp--preset--color--navy); }

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */
.dk-form { display: grid; gap: 20px; }
.dk-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dk-field { display: grid; gap: 7px; align-content: start; }
.dk-field--full { grid-column: 1 / -1; }
.dk-field label { font-size: 13px; font-weight: 600; color: var(--wp--preset--color--ink); }
.dk-req { color: var(--dk-error); }
.dk-field input,
.dk-field select,
.dk-field textarea {
	width: 100%; box-sizing: border-box; margin: 0;
	font: 400 15px/1.4 var(--wp--preset--font-family--inter);
	color: var(--wp--preset--color--navy); background: var(--wp--preset--color--white);
	border: 1.5px solid #CBD2DB; border-radius: 10px; padding: 13px 14px;
	transition: border-color .2s, box-shadow .2s;
}
.dk-field select {
	appearance: none; -webkit-appearance: none; padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6676' stroke-width='1.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.dk-field textarea { resize: vertical; min-height: 120px; }
.dk-field ::placeholder { color: #707A89; opacity: 1; }
.dk-field input:focus,
.dk-field select:focus,
.dk-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--amber-hover);
	box-shadow: 0 0 0 4px rgba(232, 137, 12, .22);
}
.dk-field.is-invalid input,
.dk-field.is-invalid select,
.dk-field.is-invalid textarea { border-color: var(--dk-error); }
.dk-field__error { margin: 0; font-size: 13px; color: var(--dk-error); }
.dk-field__error:empty { display: none; }

.dk-check { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; align-items: start; }
.dk-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wp--preset--color--amber-hover); }
.dk-check label { font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--ink); cursor: pointer; }
.dk-check label a { color: var(--wp--preset--color--amber-text); }
.dk-check .dk-field__error { grid-column: 2; margin-top: 4px; }
.dk-check.is-invalid label { color: var(--dk-error); }

.dk-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dk-form__submit { cursor: pointer; }
.dk-form__submit:disabled { opacity: .65; cursor: progress; transform: none; }
.dk-form__note { margin: 0; font-size: 13px; color: var(--wp--preset--color--muted); }
.dk-form__status { margin: 0; font-size: 14px; font-weight: 500; }
.dk-form__status:empty { display: none; }
.dk-form__status:focus { outline: none; }
.dk-form__status.is-error { color: var(--dk-error); }
.dk-form__status.is-ok { color: #126B3F; background: #E6F4EC; padding: 14px 16px; border-radius: 10px; }

.dk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.dk-footer { color: var(--dk-on-dark-text); }
.wp-block-group.dk-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; column-gap: 48px; }
.dk-footer__claim { margin-top: 18px !important; max-width: 320px; color: rgba(255, 255, 255, .7); }
.dk-footer__title { font-family: var(--wp--preset--font-family--inter); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.dk-footer__col p:not(.dk-footer__title) { font-size: 14px; color: rgba(255, 255, 255, .7); margin: 0 0 8px; }
.dk-footer__col a { text-decoration: none; }
.dk-footer__legal { margin-top: 48px !important; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .6); }
.dk-footer__legal p { margin: 0; }

/* Contenido de páginas interiores */
.dk-content :where(a) { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.wp-block-group.dk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-group.dk-split,
	.wp-block-group.dk-split--contact,
	.wp-block-group.dk-mv,
	.wp-block-group.dk-two { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.wp-block-group.dk-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dk-header .wp-block-navigation__container { gap: 22px !important; }
	.dk-header .wp-block-navigation { font-size: 14px; }
}

@media (max-width: 781px) {
	.dk-header .dk-header__cta { display: none; }
}

@media (max-width: 720px) {
	:root { --dk-header-h: 68px; }
	.wp-block-group.dk-grid-4,
	.wp-block-group.dk-values,
	.wp-block-group.dk-footer__cols { grid-template-columns: minmax(0, 1fr); }
	.wp-block-group.dk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dk-stat { padding: 24px 18px; }
	.dk-stat:nth-child(2n) { border-right: 0; }
	.dk-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.dk-form__grid { grid-template-columns: 1fr; }
	.dk-contact-card, .dk-panel, .dk-founder { padding: 24px; }
	.dk-hero { padding-top: 132px !important; }
	.dk-footer__legal { flex-direction: column; align-items: flex-start !important; }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.wp-element-button:hover, .wp-block-button__link:hover, .dk-card:hover { transform: none; }
	.dk-hero::after { animation: none; transform: none; }
}