es el que se pega (el nav solo no tenía
recorrido porque su contenedor medía lo mismo que él) */
body.depro-site .depro-header { position: sticky; top: 0; z-index: 9999; }
body.depro-site .depro-header nav,
body.depro-site.admin-bar .depro-header nav { position: relative; top: auto; transition: box-shadow .2s ease; }
body.depro-site .depro-header.is-scrolled nav { box-shadow: 0 2px 12px rgba(41, 47, 50, .12); }
body.depro-site.admin-bar .depro-header { top: 32px; }
/* Proyectos e Industrias: menos aire bajo el banner; filtros arriba y
buscador en su propia línea, a la izquierda y a todo el ancho */
body.depro-site .depro-wrap > section:has(> .proy-filtros) { padding-top: 24px !important; }
.proy-filtros { gap: 8px !important; margin-bottom: 20px !important; }
.proy-filtros > select { flex: 1 1 150px; min-width: 0; min-height: 44px; }
.proy-buscar, .proy-buscar--mobile { display: block; flex: 1 1 100%; margin-left: 0 !important; }
.proy-buscar input { width: 100% !important; min-height: 44px; font-size: 16px !important; box-sizing: border-box; }
#proy-grid { gap: 16px !important; }
}
@media (max-width: 782px) {
body.depro-site.admin-bar .depro-header { top: 46px; }
}
@media (max-width: 600px) {
/* acá la barra de admin de WP deja de ser fija */
body.depro-site.admin-bar .depro-header { top: 0; }
}
@media (max-width: 768px) {
body.depro-site .depro-wrap > section:has(> .proy-filtros) { padding-top: 20px !important; }
/* Somos DEPRO: foto vertical arriba (sin texto sobre las caras) y el
texto abajo, sobre el degradado */
body.depro-site .sd-hero { min-height: 0; align-items: flex-end; padding-top: 92vw; padding-bottom: 40px; background: #292F32; }
.sd-hero-video {
inset: 0 0 auto 0; height: 150vw;
background-image: url('../img/sd-hero-equipo-mobile.jpg');
background-image: image-set(
url('../img/sd-hero-equipo-mobile@1x.jpg') 1x,
url('../img/sd-hero-equipo-mobile.jpg') 2x);
background-position: center top; background-size: cover;
}
.sd-hero-video::after {
background: linear-gradient(to bottom,
rgba(41,47,50,0) 0%, rgba(41,47,50,0) 55%,
rgba(41,47,50,.75) 70%, rgba(41,47,50,.94) 86%, #292F32 100%);
}
body.depro-site .sd-hero-content h1 { font-size: 34px; margin-bottom: 12px; }
body.depro-site .sd-hero-content p { font-size: 16px; line-height: 1.55; }
body.depro-site .sd-hero-content p.sd-hero-small { font-size: 14px; margin-bottom: 20px; }
/* Somos DEPRO: Nuestros Valores más compacto y alineado a la izquierda */
body.depro-site section.sd-valores { padding-top: 40px; padding-bottom: 40px; }
.sd-valores-inner { text-align: left; }
.sd-valores .sec-title, body.depro-site .sd-valores .sec-title { font-size: 22px; text-align: left; margin-bottom: 12px; }
.sd-valores p, body.depro-site .sd-valores p { font-size: 15px; line-height: 1.65; text-align: left; }
}
/* ===== MOBILE — páginas de Soluciones (2026-09-30) =====
Masterplan, Proyecto Ejecutivo, Gerenciamiento, Dirección Técnica y
Gemelo Digital. Solo ≤991 / ≤768: desktop (≥992) no cambia. */
@media (max-width: 991px) {
/* Bloque intro: título → texto → video, centrado y apilado */
.que-es-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.que-es-text { width: 100%; text-align: center; }
.que-es-text .sec-title, .que-es-text p { text-align: center; }
.que-es .video-embed { width: 100%; max-width: 640px; margin: 0 auto; }
/* Preguntas que resuelve: pregunta bien marcada, respuesta más liviana */
.nec-fila h3, .nec-card h3, body.depro-site .nec-fila h3, body.depro-site .nec-card h3 { font-weight: 800; color: var(--c-tinta, #292F32); }
.nec-fila p, .nec-card .nec-sub, body.depro-site .nec-fila p, body.depro-site .nec-card .nec-sub { font-weight: 400; color: var(--c-secundario-2, #5C6870); }
.gd-faq-item summary { font-weight: 700; }
.gd-faq-item p { font-weight: 400; color: var(--c-secundario-2, #5C6870); }
}
@media (max-width: 768px) {
/* Banner de soluciones más bajo y con tipografía proporcional */
body.depro-site.page section.mp-hero { padding-top: 28px; padding-bottom: 32px; }
body.depro-site.page .mp-hero .tag { margin-bottom: 8px !important; }
body.depro-site.page .mp-hero h1 { font-size: 26px; line-height: 1.2; margin-bottom: 10px; }
body.depro-site.page .mp-hero .mp-hero-sub { font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
/* Contacto: sin hueco entre el encabezado y los campos; campos en una
columna con menos aire entre sí */
body.depro-site section.mp-form:not(.pd-cta) { padding-top: 40px; padding-bottom: 40px; }
body.depro-site section.mp-form:not(.pd-cta) .mp-form-inner { gap: 16px; }
body.depro-site section.mp-form:not(.pd-cta) .mp-form-title { font-size: 24px; line-height: 1.25; margin-bottom: 8px; }
body.depro-site section.mp-form:not(.pd-cta) .mp-form-sub { font-size: 15px; line-height: 1.55; margin-bottom: 0; }
/* la región de avisos de CF7 (vacía) sumaba ~26px por el margen de su :
queda oculta visualmente pero disponible para lectores de pantalla */
body.depro-site section.mp-form:not(.pd-cta) .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.depro-site section.mp-form:not(.pd-cta) .mp-fields { gap: 8px; }
body.depro-site section.mp-form:not(.pd-cta) .mp-fields > * { width: 100%; }
}
/* ==========================================================================
Soluciones por proyecto + contacto directo (2026-09-30)
========================================================================== */
/* Tarjeta del catálogo: una etiqueta por solución aplicada (data-solucion lista los códigos). */
.proy-sols { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; }
.proy-sol { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--c-principal-2); background: rgba(255,255,255,.10); border-radius: 4px; padding: 4px 9px; }
/* Banner de la ficha: las soluciones se agregan como .pd-fact (single-proyecto.php). */
/* Contacto directo debajo del botón de los formularios de contacto. */
.depro-contacto-directo { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2rem; width: 100%; margin-top: 8px; }
body.depro-site .depro-contacto-directo a.dcd-item { display: inline-flex; align-items: center; gap: 8px; color: var(--c-sobre-oscuro); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; }
.depro-contacto-directo .dcd-item i { font-size: 18px; }
body.depro-site .depro-contacto-directo a.dcd-item:hover span, body.depro-site .depro-contacto-directo a.dcd-item:focus-visible span { text-decoration: underline; }
@media (max-width: 767.98px) {
.depro-contacto-directo { flex-direction: column; align-items: center; gap: 0.75rem; }
}
/* ==========================================================================
Videos de fondo de banners (2026-09-30): cobertura completa y sin
interferir con el mouse.
========================================================================== */
.hero-media, .hero-media .hero-video, .banner-bg-video { pointer-events: none; }
.hero-media .hero-video, .banner-bg-video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* ==========================================================================
MOBILE — Blog: categorías como carrusel horizontal de chips (2026-10-01)
Solo ≤991px; en desktop la columna lateral queda igual.
========================================================================== */
@media (max-width: 991px) {
body.depro-site section[data-blog-listing] { padding-top: 20px; }
[data-blog-listing] .blog-layout { gap: 0; }
[data-blog-listing] .blog-sidebar {
display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px;
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 1rem;
/* sangra hasta el borde de la pantalla; el padding mantiene los chips alineados */
margin: 0 -16px 1.5rem; padding: 0.5rem 1rem;
border: none; position: static; max-height: none;
/* fade al borde derecho: indica que hay más categorías */
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
[data-blog-listing] .blog-sidebar.is-end { -webkit-mask-image: none; mask-image: none; }
[data-blog-listing] .blog-sidebar::-webkit-scrollbar { display: none; }
/* "Explorá" queda solo para lectores de pantalla */
[data-blog-listing] .blog-sidebar-label {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-blog-listing] .blog-sidebar-item,
[data-blog-listing] a.blog-sidebar-item {
flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px;
padding: 0 16px; border-radius: 20px; white-space: nowrap;
font-size: 13px; font-weight: 600; line-height: 1;
color: var(--c-tinta); background: var(--c-superficie, #F4F6F8);
border: 1px solid var(--c-hairline); border-left-width: 1px;
}
[data-blog-listing] .blog-sidebar-item:hover { color: var(--depro-primary); background: var(--depro-light); }
[data-blog-listing] .blog-sidebar-item.active,
[data-blog-listing] .blog-sidebar-item.active:hover {
color: #fff; background: var(--depro-primary); border-color: var(--depro-primary);
}
[data-blog-listing] .blog-sidebar-item:focus-visible { outline: 2px solid var(--depro-primary); outline-offset: 2px; }
}
/* 768–991: el gutter de la sección es 24px (16px recién en ≤767) */
@media (min-width: 768px) and (max-width: 991px) {
[data-blog-listing] .blog-sidebar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; scroll-padding-inline: 24px; }
}
/* Blog: categoría activa en azul DEPRO con texto blanco también en desktop
(2026-10-01). Solo colores: la columna lateral conserva su disposición. */
.blog-sidebar-item.active,
.blog-sidebar-item.active:hover { color: #fff; background: var(--depro-primary); border-left-color: var(--depro-primary); }
/* Botón flotante de WhatsApp propio (enlace wa.me, 1.1.182). Misma posición
y tamaño que el de Click to Chat, que queda oculto desde su opción. */
.depro-wa { position: fixed; right: 15px; bottom: 15px; z-index: 99999999; display: block; width: 50px; height: 50px; line-height: 0; -webkit-tap-highlight-color: transparent; }
.depro-wa img { display: block; width: 50px; height: 50px; }
.depro-wa:focus-visible { outline: 2px solid var(--depro-primary); outline-offset: 3px; border-radius: 12px; }