/* ==========================================================================
   DT SeguriCAM — hoja de estilos del tema
   Paleta, tipografia e iconografia segun el Manual de Identidad de Marca.

   1.  Variables y base
   2.  Tipografia y utilidades de texto
   3.  Botones
   4.  Encabezado y navegacion
   5.  Hero
   6.  Encabezados de seccion
   7.  Tarjetas con icono
   8.  Bloques de segmento (condominios / empresas)
   9.  Listas con check
   10. Ventajas
   11. Proceso
   12. Galeria de proyectos
   13. Nosotros
   14. CTA final y contacto
   15. Pie de pagina
   16. Boton flotante de WhatsApp
   17. Accesibilidad y utilidades
   18. Marcas y certificaciones
   19. Instagram
   20. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Variables y base
   ========================================================================== */
:root {
	--dt-base: #0d0d0d;
	--dt-surface: #111111;
	--dt-card: #1a1a1c;
	--dt-border: #262629;
	--dt-line: #1f1f22;
	--dt-primary: #6ccb1f;
	--dt-primary-dark: #4a8f18;
	--dt-primary-light: #a7f04d;
	--dt-silver: #bfc3c6;
	--dt-muted: #8a8e92;
	--dt-white: #ffffff;
	--dt-on-primary: #0a2405;
	--dt-radius: 18px;
	--dt-radius-sm: 12px;
	--dt-header-h: 76px;
	--dt-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--dt-base);
	color: var(--dt-white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

/* Secciones */
.dt-section {
	padding-block: clamp(56px, 7vw, 92px);
	scroll-margin-top: var(--dt-header-h);
}

.dt-section--surface {
	background-color: var(--dt-surface);
	border-block: 1px solid var(--dt-line);
}

.dt-section--flush-top {
	padding-block-start: 0;
}

.dt-section--flush-bottom {
	padding-block-end: 0;
}

/* ==========================================================================
   2. Tipografia y utilidades de texto
   ========================================================================== */
.dt-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.76rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dt-primary);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 14px;
}

.dt-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--dt-primary);
	flex: 0 0 auto;
}

.dt-lead {
	font-size: 1.14rem;
	color: var(--dt-silver);
	max-width: 46ch;
	text-wrap: pretty;
}

.dt-note {
	font-size: 0.87rem;
	color: var(--dt-muted);
}

/* ==========================================================================
   3. Botones
   ========================================================================== */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Variante secundaria: borde verde sobre fondo transparente */
.is-style-dt-outline .wp-block-button__link,
.wp-block-button.is-style-dt-outline .wp-block-button__link {
	background-color: transparent;
	border: 1.6px solid var(--dt-primary);
	color: var(--dt-primary);
}

.is-style-dt-outline .wp-block-button__link:hover {
	background-color: var(--dt-primary);
	color: var(--dt-on-primary);
}

/* Icono de WhatsApp dentro del boton */
.dt-btn-wa .wp-block-button__link::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%230A2405%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%200%200-8.6%2015l-1.3%204.7%204.8-1.3A10%2010%200%201%200%2012%202Zm5.2%2014c-.2.6-1.2%201.2-1.7%201.2-.4%200-1%20.1-3.3-.8-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2.1c.2-.2.5-.3.7-.3h.5c.2%200%20.4%200%20.6.5l.8%202c.1.2.1.4%200%20.5l-.4.6c-.2.2-.3.4-.1.7.2.3.8%201.3%201.7%202.1%201.2%201%202.1%201.4%202.4%201.5.2.1.4.1.6-.1l.9-1c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.3.5.4.1.2.1.9-.1%201.5Z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.dt-btn-wa.is-style-dt-outline .wp-block-button__link::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%236CCB1F%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%200%200-8.6%2015l-1.3%204.7%204.8-1.3A10%2010%200%201%200%2012%202Zm5.2%2014c-.2.6-1.2%201.2-1.7%201.2-.4%200-1%20.1-3.3-.8-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2.1c.2-.2.5-.3.7-.3h.5c.2%200%20.4%200%20.6.5l.8%202c.1.2.1.4%200%20.5l-.4.6c-.2.2-.3.4-.1.7.2.3.8%201.3%201.7%202.1%201.2%201%202.1%201.4%202.4%201.5.2.1.4.1.6-.1l.9-1c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.3.5.4.1.2.1.9-.1%201.5Z%22%2F%3E%3C%2Fsvg%3E");
}

.dt-btn-lg .wp-block-button__link {
	font-size: 1.1rem;
	padding: 19px 34px;
	border-radius: 14px;
	box-shadow: 0 14px 40px -14px rgba(108, 203, 31, 0.6);
}

/* ==========================================================================
   4. Encabezado y navegacion
   ========================================================================== */
.dt-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background-color: rgba(13, 13, 13, 0.9);
	backdrop-filter: blur(14px);
	border-block-end: 1px solid #232326;
}

.dt-header__inner {
	max-width: 1220px;
	margin-inline: auto;
	min-height: var(--dt-header-h);
	gap: 18px;
	flex-wrap: nowrap;
}

.dt-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	flex: 0 0 auto;
	text-decoration: none;
}

.dt-brand__logo {
	margin: 0;
	flex: 0 0 auto;
	line-height: 0;
}

.dt-brand img,
.dt-brand .custom-logo {
	width: 48px;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

.dt-brand__name {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 1.1rem;
	line-height: 1.15;
	color: var(--dt-white);
	white-space: nowrap;
	margin: 0;
}

.dt-brand__name .dt-green {
	color: var(--dt-primary);
}

/* Menu: desborda hacia la derecha y se puede desplazar en pantallas angostas */
.dt-nav {
	flex: 1 1 auto;
	min-width: 0;
	margin-inline-start: auto;
}

.dt-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: flex-start;
	gap: 2px;
}

.dt-nav .wp-block-navigation__container::-webkit-scrollbar {
	display: none;
}

.dt-nav .wp-block-navigation-item__content {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--dt-silver);
	padding: 9px 12px;
	border-radius: 9px;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.dt-nav .wp-block-navigation-item__content:hover,
.dt-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--dt-white);
	background-color: #1e1e20;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.dt-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(48px, 7vw, 92px) clamp(56px, 7vw, 96px);
	scroll-margin-top: var(--dt-header-h);
}

.dt-hero::before {
	content: "";
	position: absolute;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 203, 31, 0.14), transparent 62%);
	top: -220px;
	right: -160px;
	pointer-events: none;
}

.dt-hero > * {
	position: relative;
	z-index: 2;
}

.dt-hero__title {
	margin-block: 20px;
}

.dt-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 34px;
	list-style: none;
	padding: 0;
}

.dt-hero__badges li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	color: var(--dt-silver);
	border: 1px solid #232326;
	background-color: #161617;
	border-radius: 40px;
	padding: 9px 16px;
}

.dt-hero__badges li::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.dt-hero__badges li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M12%203%204%206v6c0%205%203.5%208.5%208%2010%204.5-1.5%208-5%208-10V6l-8-3Z%22%2F%3E%3C%2Fsvg%3E"); }
.dt-hero__badges li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.dt-hero__badges li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M12%202v4M12%2018v4M4.9%204.9l2.8%202.8M16.3%2016.3l2.8%202.8M2%2012h4M18%2012h4M4.9%2019.1l2.8-2.8M16.3%207.7l2.8-2.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }

.dt-media {
	overflow: hidden;
	border: 1px solid #2a2a2d;
	border-radius: 22px;
	box-shadow: var(--dt-shadow);
	margin: 0;
}

.dt-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.dt-media--portrait img {
	aspect-ratio: 4 / 5;
}

.dt-media--landscape {
	border-radius: 20px;
	box-shadow: none;
	border-color: var(--dt-border);
}

.dt-media--landscape img {
	aspect-ratio: 4 / 3;
}

/* ==========================================================================
   6. Encabezados de seccion
   ========================================================================== */
.dt-sec-head {
	max-width: 740px;
	margin-block-end: 42px;
}

.dt-sec-head h2 {
	margin-block: 0 12px;
}

.dt-sec-head p {
	font-size: 1.05rem;
	color: var(--dt-silver);
	margin: 0;
	text-wrap: pretty;
}

.dt-green {
	color: var(--dt-primary);
}

/* ==========================================================================
   7. Tarjetas con icono
   ========================================================================== */
.dt-grid {
	gap: 20px;
}

.dt-card {
	background-color: var(--dt-card);
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius);
	padding: 30px;
	transition: border-color 0.24s ease, transform 0.24s ease;
	height: 100%;
}

.dt-card:hover {
	border-color: rgba(108, 203, 31, 0.5);
	transform: translateY(-5px);
}

.dt-card::before {
	content: "";
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1.8px solid var(--dt-primary);
	background-color: rgba(108, 203, 31, 0.08);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
	margin-block-end: 20px;
}

.dt-card h3 {
	margin-block: 0 9px;
	font-size: 1.2rem;
}

.dt-card p {
	font-size: 0.97rem;
	margin: 0;
}

.dt-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-block-start: 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--dt-primary);
}

.dt-card__link::after {
	content: "→";
	transition: transform 0.2s ease;
}

.dt-card__link:hover::after {
	transform: translateX(4px);
}

/* Iconografia por tarjeta */
.dt-card--condominios::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M3%2021h18M6%2021V7l6-4%206%204v14M10%209h.01M14%209h.01M10%2013h.01M14%2013h.01M10%2017h4%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--empresas::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M3%2021h18M5%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16M15%2021V9h4v12M8%207h2M8%2011h2M8%2015h2%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--hogares::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M3%2012%2012%204l9%208M5%2010v10h14V10M9%2020v-6h6v6%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--cctv::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M2%208h13v8H2zM15%2010l5-3v10l-5-3%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--acceso::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216%22%20r%3D%221.4%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--monitoreo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--instalacion::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200-5.7%205.7l-6%206%202%202%206-6a4%204%200%200%200%205.7-5.7l-2.5%202.5-2-2%202.5-2.5Z%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--mantencion::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M12%202v4M12%2018v4M4.9%204.9l2.8%202.8M16.3%2016.3l2.8%202.8M2%2012h4M18%2012h4M4.9%2019.1l2.8-2.8M16.3%207.7l2.8-2.8%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--asesoria::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M9%2018h6M10%2022h4M12%202a7%207%200%200%200-4%2012.7c.6.5%201%201.3%201%202.1V17h6v-.2c0-.8.4-1.6%201-2.1A7%207%200%200%200%2012%202Z%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--proposito::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--mision::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M12%203%204%206v6c0%205%203.5%208.5%208%2010%204.5-1.5%208-5%208-10V6l-8-3Z%22%2F%3E%3C%2Fsvg%3E"); }
.dt-card--vision::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M2%2012s3.5-7%2010-7%2010%207%2010%207-3.5%207-10%207-10-7-10-7Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }

/* Tarjetas de proposito / mision / vision: titulo verde */
.dt-card--mvv h3 {
	color: var(--dt-primary);
}

/* ==========================================================================
   8. Bloques de segmento (condominios / empresas)
   ========================================================================== */
.dt-segment {
	scroll-margin-top: var(--dt-header-h);
}

.dt-segment .wp-block-columns {
	gap: clamp(30px, 4vw, 54px);
	align-items: center;
}

.dt-segment h2 {
	margin-block: 0 16px;
}

.dt-segment > .wp-block-columns p {
	font-size: 1.02rem;
}

/* ==========================================================================
   9. Listas con check
   ========================================================================== */
.dt-check-list {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dt-check-list li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 0.98rem;
	color: #d9d9d9;
}

.dt-check-list li::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	margin-block-start: 5px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222.6%22%3E%3Cpath%20d%3D%22m5%2012%205%205%209-11%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ==========================================================================
   10. Ventajas
   ========================================================================== */
.dt-features {
	gap: 32px 40px;
}

.dt-feature {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.dt-feature::before {
	content: "";
	width: 50px;
	height: 50px;
	flex: 0 0 auto;
	border-radius: 14px;
	background-color: rgba(108, 203, 31, 0.1);
	border: 1px solid rgba(108, 203, 31, 0.3);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 23px 23px;
}

.dt-feature h3 {
	margin-block: 0 5px;
	font-size: 1.1rem;
}

.dt-feature p {
	font-size: 0.96rem;
	margin: 0;
}

.dt-feature--instalacion::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M12%203%204%206v6c0%205%203.5%208.5%208%2010%204.5-1.5%208-5%208-10V6l-8-3Z%22%2F%3E%3C%2Fsvg%3E"); }
.dt-feature--respaldo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.dt-feature--asesoria::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M9%2018h6M10%2022h4M12%202a7%207%200%200%200-4%2012.7c.6.5%201%201.3%201%202.1V17h6v-.2c0-.8.4-1.6%201-2.1A7%207%200%200%200%2012%202Z%22%2F%3E%3C%2Fsvg%3E"); }
.dt-feature--tecnologia::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M9%209h6v6H9z%22%2F%3E%3Cpath%20d%3D%22M4%2010H2M4%2014H2M22%2010h-2M22%2014h-2M10%204V2M14%204V2M10%2022v-2M14%2022v-2%22%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   11. Proceso
   ========================================================================== */
.dt-steps {
	gap: 24px;
}

.dt-step {
	border-block-start: 2px solid var(--dt-border);
	padding-block-start: 18px;
}

.dt-step--first {
	border-block-start-color: var(--dt-primary);
}

.dt-step__n {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.4px var(--dt-primary-dark);
	display: block;
	margin-block-end: 12px;
}

.dt-step h3 {
	margin-block: 0 6px;
	font-size: 1.08rem;
}

.dt-step p {
	font-size: 0.93rem;
	margin: 0;
}

/* ==========================================================================
   12. Galeria de proyectos
   ========================================================================== */
.dt-gallery {
	gap: 16px;
}

.dt-gallery .wp-block-image {
	margin: 0;
	border: 1px solid var(--dt-border);
	border-radius: 16px;
	overflow: hidden;
}

.dt-gallery .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0;
}

/* ==========================================================================
   13. Nosotros
   ========================================================================== */
.dt-values {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 28px;
	list-style: none;
	padding: 0;
}

.dt-values li {
	border: 1px solid var(--dt-border);
	background-color: var(--dt-card);
	border-radius: 40px;
	padding: 9px 17px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.88rem;
	color: #d9d9d9;
}

.dt-mvv {
	margin-block-start: clamp(38px, 5vw, 58px);
	gap: 20px;
}

/* ==========================================================================
   14. CTA final y contacto
   ========================================================================== */
.dt-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #16330a 0%, #0d0d0d 62%);
	border: 1px solid rgba(108, 203, 31, 0.3);
	border-radius: 24px;
	padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 52px);
}

.dt-cta::before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(108, 203, 31, 0.2), transparent 60%);
	top: -250px;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}

.dt-cta > * {
	position: relative;
	z-index: 2;
}

.dt-cta h2 {
	margin-block: 0 14px;
	text-wrap: balance;
}

.dt-cta__buttons {
	margin-block-end: 24px;
	gap: 9px;
}

.dt-cta__buttons .wp-block-button__link {
	font-size: 0.9rem;
	font-weight: 600;
	padding: 11px 18px;
	border-radius: 40px;
}

.dt-contact-card {
	background-color: rgba(13, 13, 13, 0.55);
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius);
	padding: clamp(24px, 3vw, 32px);
	backdrop-filter: blur(6px);
}

.dt-contact-card h3 {
	margin-block: 0 22px;
	font-size: 1.14rem;
}

.dt-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dt-contact-list li {
	display: flex;
	gap: 14px;
	align-items: center;
	font-size: 0.98rem;
	color: var(--dt-white);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.dt-contact-list li::before {
	content: "";
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: var(--dt-radius-sm);
	background-color: rgba(108, 203, 31, 0.1);
	border: 1px solid rgba(108, 203, 31, 0.3);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

.dt-contact-list li a {
	color: var(--dt-white);
}

.dt-contact-list li a:hover {
	color: var(--dt-primary);
}

.dt-contact-list li span {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--dt-muted);
}

.dt-contact-list li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%236CCB1F%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%200%200-8.6%2015l-1.3%204.7%204.8-1.3A10%2010%200%201%200%2012%202Zm5.2%2014c-.2.6-1.2%201.2-1.7%201.2-.4%200-1%20.1-3.3-.8-2.8-1.1-4.5-4-4.7-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2.1c.2-.2.5-.3.7-.3h.5c.2%200%20.4%200%20.6.5l.8%202c.1.2.1.4%200%20.5l-.4.6c-.2.2-.3.4-.1.7.2.3.8%201.3%201.7%202.1%201.2%201%202.1%201.4%202.4%201.5.2.1.4.1.6-.1l.9-1c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.3.5.4.1.2.1.9-.1%201.5Z%22%2F%3E%3C%2Fsvg%3E"); }
.dt-contact-list li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m2%207%2010%206%2010-6%22%2F%3E%3C%2Fsvg%3E"); }
.dt-contact-list li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.dt-contact-list li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236CCB1F%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M12%2021s-7-6.7-7-12a7%207%200%200%201%2014%200c0%205.3-7%2012-7%2012Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }

.dt-social {
	display: flex;
	gap: 10px;
	margin-block-start: 26px;
	padding-block-start: 22px;
	border-block-start: 1px solid var(--dt-border);
}

.dt-social .wp-social-link {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	border: 1px solid #2e2e31;
	background-color: transparent;
	color: var(--dt-silver);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dt-social .wp-social-link:hover {
	border-color: var(--dt-primary);
	color: var(--dt-primary);
}

/* ==========================================================================
   15. Pie de pagina
   ========================================================================== */
.dt-footer {
	background-color: var(--dt-surface);
	border-block-start: 1px solid var(--dt-line);
	padding-block: clamp(44px, 5vw, 58px) 30px;
}

.dt-footer__cols {
	gap: 34px;
	margin-block-end: 40px;
}

.dt-footer__tagline {
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dt-muted);
	margin: 0;
}

.dt-footer__about {
	font-size: 0.92rem;
	color: var(--dt-silver);
	max-width: 36ch;
	margin-block-start: 18px;
}

.dt-footer h2,
.dt-footer h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--dt-muted);
	margin-block: 0 16px;
}

.dt-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dt-footer__links li,
.dt-footer__links a {
	font-size: 0.94rem;
	color: var(--dt-silver);
}

.dt-footer__links a:hover {
	color: var(--dt-primary);
}

.dt-footer__bottom {
	border-block-start: 1px solid var(--dt-line);
	padding-block: 24px 56px;
	font-size: 0.85rem;
	color: var(--dt-muted);
	gap: 16px;
}

.dt-footer__bottom p {
	color: var(--dt-muted);
	font-size: 0.85rem;
	margin: 0;
}

/* deja aire para que el boton flotante no tape el texto */
.dt-footer__claim {
	margin-inline-end: 78px;
}

/* ==========================================================================
   16. Boton flotante de WhatsApp
   ========================================================================== */
.dt-wa-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 80;
}

.dt-wa-float .wp-block-button__link {
	width: 60px;
	height: 60px;
	padding: 0;
	border-radius: 50%;
	background-color: var(--dt-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-indent: -9999px;
	animation: dt-pulse 2.8s infinite;
}

.dt-wa-float .wp-block-button__link::before {
	width: 32px;
	height: 32px;
	text-indent: 0;
}

.dt-wa-float .wp-block-button__link:hover {
	background-color: var(--dt-primary-dark);
	transform: scale(1.07);
}

@keyframes dt-pulse {
	0% { box-shadow: 0 0 0 0 rgba(108, 203, 31, 0.45); }
	70% { box-shadow: 0 0 0 18px rgba(108, 203, 31, 0); }
	100% { box-shadow: 0 0 0 0 rgba(108, 203, 31, 0); }
}

/* ==========================================================================
   17. Accesibilidad y utilidades
   ========================================================================== */
.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;
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--dt-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.dt-wa-float .wp-block-button__link { animation: none; }
	.dt-card:hover,
	.wp-block-button__link:hover { transform: none; }
}

/* ==========================================================================
   18. Marcas y certificaciones
   19. Instagram
   20. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.dt-hero .wp-block-column,
	.dt-segment .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 781px) {
	:root {
		--dt-header-h: 68px;
	}

	.dt-brand__name {
		font-size: 1rem;
	}

	.dt-brand img,
	.dt-brand .custom-logo {
		width: 42px;
		height: auto;
	}

	.dt-card {
		padding: 24px;
	}

	.dt-footer__claim {
		margin-inline-end: 0;
	}

	.dt-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.dt-media--portrait img {
		aspect-ratio: 3 / 4;
	}
}

@media (max-width: 600px) {
	.dt-header__inner {
		gap: 10px;
	}

	.dt-header__cta .wp-block-button__link {
		padding: 12px 16px;
		font-size: 0.9rem;
	}

	.dt-btn-lg .wp-block-button__link {
		font-size: 1rem;
		padding: 17px 24px;
	}

	.dt-cta {
		padding: 30px 20px;
	}
}