/* =========================================================
   DV SOLUCIONES - BASE STYLES
   Stack: Bootstrap 5 + Custom CSS + animate.css
   ========================================================= */

/* --- 1) Variables globales --- */
:root {
  --dv-navy: #17262f;
  --dv-orange: #fa801f;
  --dv-white: #ffffff;
  --dv-gray-100: #f0f5f7;
  --dv-teal: #05828c;

  --dv-text: var(--dv-navy);
  --dv-text-muted: rgba(23, 38, 47, 0.72);

  --dv-border: rgba(23, 38, 47, 0.12);
  --dv-shadow-sm: 0 6px 18px rgba(23, 38, 47, 0.10);
  --dv-shadow-md: 0 14px 40px rgba(23, 38, 47, 0.14);

  --dv-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --dv-fs-xxs: 0.75rem;
  --dv-fs-xs: 0.875rem;
  --dv-fs-sm: 0.95rem;
  --dv-fs-md: 1rem;
  --dv-fs-lg: 1.125rem;
  --dv-fs-xl: 1.375rem;
  --dv-fs-2xl: 1.75rem;
  --dv-fs-3xl: 2.25rem;

  --dv-radius-sm: 10px;
  --dv-radius-md: 16px;
  --dv-radius-lg: 22px;

  --dv-section-pad-y: clamp(48px, 6vw, 96px);

  --dv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dv-speed: 220ms;
}

/* --- 2) Base defaults --- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--dv-font);
  color: var(--dv-text);
  background: var(--dv-white);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(250, 128, 31, 0.25); }

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dv-orange); }

/* --- 3) Tipografía utilitaria (weights) --- */
.dv-w-200 { font-weight: 200; }
.dv-w-300 { font-weight: 300; }
.dv-w-400 { font-weight: 400; }
.dv-w-500 { font-weight: 500; }
.dv-w-600 { font-weight: 600; }
.dv-w-700 { font-weight: 700; }
.dv-w-800 { font-weight: 800; }
.dv-w-900 { font-weight: 900; }

.dv-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.dv-lead {
  color: var(--dv-text-muted);
  font-size: var(--dv-fs-lg);
}

/* --- 4) Secciones / fondos --- */
.dv-section { padding: var(--dv-section-pad-y) 0; }
.dv-bg-soft { background: var(--dv-gray-100); }
.dv-bg-navy { background: var(--dv-navy); color: var(--dv-white); }

/* --- 5) Botones DV --- */
.btn-dv-primary {
  background: var(--dv-orange);
  border: 1px solid var(--dv-orange);
  color: var(--dv-white);
  font-weight: 800;
  border-radius: 12px;
  padding: 12px 18px;
  transition: transform var(--dv-speed) var(--dv-ease),
              box-shadow var(--dv-speed) var(--dv-ease),
              background var(--dv-speed) var(--dv-ease),
              border-color var(--dv-speed) var(--dv-ease);
}

.btn-dv-primary:hover {
  background: #f06f10;
  border-color: #f06f10;
  color: var(--dv-white);
  transform: translateY(-1px);
  box-shadow: var(--dv-shadow-sm);
}

.btn-dv-outline {
  background: transparent;
  border: 1px solid rgba(250, 128, 31, 0.6);
  color: var(--dv-orange);
  font-weight: 800;
  border-radius: 12px;
  padding: 12px 18px;
  transition: transform var(--dv-speed) var(--dv-ease),
              box-shadow var(--dv-speed) var(--dv-ease),
              background var(--dv-speed) var(--dv-ease);
}

.btn-dv-outline:hover {
  background: rgba(250, 128, 31, 0.10);
  transform: translateY(-1px);
  box-shadow: var(--dv-shadow-sm);
}

/* --- 6) Cards --- */
.dv-card {
  background: var(--dv-white);
  border: 1px solid var(--dv-border);
  border-radius: var(--dv-radius-md);
  overflow: hidden;
  transition: transform var(--dv-speed) var(--dv-ease),
              box-shadow var(--dv-speed) var(--dv-ease);
}

.dv-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dv-shadow-sm);
}

/* --- 7) Inputs --- */
.form-control:focus,
.form-select:focus {
  border-color: rgba(5, 130, 140, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(5, 130, 140, 0.18);
}

/* --- 8) Accesibilidad --- */
.dv-animate { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* =========================================================
   DV NAVBAR
   ========================================================= */
.dv-navbar {
  background: var(--dv-white);
  border-bottom: 1px solid var(--dv-border);
  padding: 14px 0;
}

.dv-navbar__brand { gap: 10px; }

.dv-navbar__logo {
  width: 250px;
  height: auto;
  display: block;
}

.dv-navbar__link {
  font-weight: 700;
  color: var(--dv-navy);
  padding: 10px 14px;
  transition: color var(--dv-speed) var(--dv-ease);
}

.dv-navbar__link:hover,
.dv-navbar__link:focus { color: var(--dv-orange); }

.dv-navbar__btn {
  white-space: nowrap;
  padding: 12px 18px;
}

.dv-dropdown-menu {
  border-radius: 14px;
  border: 1px solid var(--dv-border);
  box-shadow: var(--dv-shadow-sm);
  padding: 10px;
}

.dv-dropdown-item {
  border-radius: 10px;
  font-weight: 700;
  padding: 10px 12px;
}

.dv-dropdown-item:hover,
.dv-dropdown-item:focus {
  background: rgba(250, 128, 31, 0.12);
  color: var(--dv-navy);
}

.dv-navbar__toggler {
  border: 1px solid rgba(23, 38, 47, 0.20);
  border-radius: 12px;
  padding: 8px 10px;
}

.dv-navbar__toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(5, 130, 140, 0.18);
}

@media (max-width: 991.98px) {
  .dv-navbar__nav { padding-top: 14px; }
  .dv-navbar__link { padding: 12px 8px; }
  .dv-dropdown-menu { padding: 8px; }
}

/* =========================================================
   DV HERO
   ========================================================= */
.dv-hero { position: relative; background: var(--dv-white); overflow: hidden; }

.dv-hero__container {
  position: relative;
  min-height: clamp(460px, 70vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dv-hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: radial-gradient(circle at 1px 1px, rgba(23,38,47,0.25) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

.dv-hero__content { position: relative; max-width: 860px; padding: 40px 12px; z-index: 3; }

.dv-hero__kicker {
  color: var(--dv-text-muted);
  font-size: var(--dv-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dv-hero__title { font-size: clamp(1.6rem, 4.2vw, 3.1rem); margin: 0; }

.dv-hero__subtitle { max-width: 720px; margin: 0 auto; }

.dv-hero__scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  gap: 6px;
}

.dv-hero__chev {
  width: 18px;
  height: 18px;
  border-right: 3px solid var(--dv-orange);
  border-bottom: 3px solid var(--dv-orange);
  transform: rotate(45deg);
  opacity: 0.95;
  animation: dvChev 1.25s var(--dv-ease) infinite;
}
.dv-hero__chev:nth-child(2) { animation-delay: 0.12s; opacity: 0.75; }
.dv-hero__chev:nth-child(3) { animation-delay: 0.24s; opacity: 0.55; }

@keyframes dvChev {
  0% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(0, 6px); }
  100% { transform: rotate(45deg) translate(0, 0); }
}

.dv-hero__cluster {
  position: absolute;
  top: 0; bottom: 0;
  width: 34%;
  z-index: 2;
  pointer-events: none;
}
.dv-hero__cluster--left { left: 0; }
.dv-hero__cluster--right { right: 0; }

.dv-hero__img {
  position: absolute;
  width: clamp(120px, 14vw, 190px);
  height: clamp(90px, 10vw, 140px);
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--dv-shadow-sm);
  border: 1px solid rgba(23,38,47,0.08);
  transform: translate3d(0,0,0);
  will-change: transform;
}

.dv-hero__img--l1 { top: 46px; left: 18px; }
.dv-hero__img--l2 { top: 190px; left: 42px; border-radius: 26px; }
.dv-hero__img--l3 { bottom: 0px; left: 46px; width: clamp(140px, 18vw, 230px); height: clamp(110px, 14vw, 170px); }

.dv-hero__img--r1 { top: 54px; right: 20px; border-radius: 26px; }
.dv-hero__img--r2 { top: 210px; right: 46px; }
.dv-hero__img--r3 { bottom: 0px; right: 50px; width: clamp(140px, 18vw, 230px); height: clamp(110px, 14vw, 170px); }

.dv-hero__dots {
  position: absolute;
  width: 84px;
  height: 84px;
  background-image: radial-gradient(circle at 4px 4px, rgba(250,128,31,0.55) 2px, transparent 2px);
  background-size: 14px 14px;
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}

.dv-hero__dots--left { top: 40px; left: 22%; }
.dv-hero__dots--right { top: 110px; right: 18%; }

@media (max-width: 991.98px) {
  .dv-hero__cluster { width: 42%; }
  .dv-hero__img--l3, .dv-hero__img--r3 { display: none; }
  .dv-hero__dots--left { left: 10%; }
  .dv-hero__dots--right { right: 10%; }
}

@media (max-width: 575.98px) {
  .dv-hero__cluster { display: none; }
  .dv-hero__bg { opacity: 0.10; }
  .dv-hero__content { padding: 28px 6px; }
  .dv-hero__scroll { bottom: 16px; }
}

/* =========================================================
   HOME ABOUT
   ========================================================= */
.dv-home-about { background: var(--dv-white); }

.dv-home-about__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 34px;
  align-items: center;
}

.dv-home-about__title {
  font-size: clamp(2rem, 4.3vw, 3.2rem);
  line-height: 1.02;
}

.dv-info-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 22px 22px;
  border-bottom: 1px solid var(--dv-border);
  background: var(--dv-white);
}
.dv-info-card:last-child { border-bottom: none; }

.dv-info-card__icon {
  width: 52px; height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--dv-teal);
  background: rgba(5, 130, 140, 0.12);
}
.dv-info-card__icon--orange {
  color: var(--dv-orange);
  background: rgba(250, 128, 31, 0.12);
}

.dv-info-card__title { font-weight: 900; font-size: 1.12rem; margin: 0; }

.dv-info-card__text {
  color: var(--dv-text-muted);
  font-size: var(--dv-fs-sm);
  margin: 0;
  max-width: 62ch;
}

.dv-home-about__media { display: flex; justify-content: center; align-items: center; }

.dv-home-about__img {
  width: min(420px, 100%);
  aspect-ratio: 1/1;
  border-radius: var(--dv-radius-md);
  background: #8fc1ea;
  border: 1px solid rgba(23, 38, 47, 0.10);
}

@media (max-width: 991.98px) {
  .dv-home-about__grid { grid-template-columns: 1fr; }
  .dv-home-about__media { justify-content: flex-start; }
  .dv-home-about__img { width: 100%; max-width: 520px; }
}

/* =========================================================
   MARQUESINA CRUZADA
   ========================================================= */
.dv-marquee {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: transparent;
}

.dv-marquee__layer {
  position: absolute;
  left: -16%;
  width: 132%;
  padding: 16px 0;
  overflow: hidden;
  border-top: 1px solid rgba(23, 38, 47, 0.06);
  border-bottom: 1px solid rgba(23, 38, 47, 0.06);
}

.dv-marquee--navy {
  top: 50%;
  background: var(--dv-navy);
  z-index: 1;
  transform: rotate(-3deg) translateY(-2px);
  transform-origin: center;
}

.dv-marquee--orange {
  top: 50%;
  background: var(--dv-orange);
  z-index: 2;
  transform: rotate(5deg) translateY(3px);
  transform-origin: center;
}

.dv-marquee__track {
  display: flex;
  width: max-content;
  gap: 36px;
  align-items: center;
  will-change: transform;
  animation: dvMarquee 14s linear infinite;
}

.dv-marquee__track--reverse {
  animation-direction: reverse;
  animation-duration: 18s;
}

.dv-marquee__text {
  display: inline-block;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 2.2vw, 1.35rem);
  padding-left: 18px;
}

.dv-marquee--navy .dv-marquee__text { color: var(--dv-white); }
.dv-marquee--orange .dv-marquee__text { color: #111; }

@keyframes dvMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 991.98px) {
  .dv-marquee { height: 112px; }
  .dv-marquee__layer { left: -20%; width: 140%; }
  .dv-marquee--navy { transform: rotate(-5deg) translateY(-48px); }
  .dv-marquee--orange { transform: rotate(-5deg) translateY(16px); }
}

@media (max-width: 575.98px) {
  .dv-marquee { height: 178px; }
  .dv-marquee__layer { left: -24%; width: 148%; }
  .dv-marquee--navy { transform: rotate(-4deg) translateY(-44px); }
  .dv-marquee--orange { transform: rotate(-4deg) translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .dv-marquee__track { animation: none !important; transform: translateX(0) !important; }
}

/* =========================================================
   PRODUCTOS DESTACADOS + HOVER PRO (sin duplicado)
   ========================================================= */
.dv-featured { background: var(--dv-white); }

.dv-featured__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.02;
}

.dv-featured-card {
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--dv-speed) var(--dv-ease),
              box-shadow var(--dv-speed) var(--dv-ease);
}

.dv-featured-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid rgba(23, 38, 47, 0.10);
  box-shadow: none;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.5s ease;
}

.dv-featured-card__name {
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
}

.dv-featured-card__btn {
  width: 100%;
  max-width: 260px;
  border-radius: 0;
  padding: 14px 18px;
  letter-spacing: 0.08em;
}

.dv-featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.dv-featured-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 4px;
  background: var(--dv-orange);
  transition: width 0.45s ease;
}

.dv-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.08);
}

.dv-featured-card:hover .dv-featured-card__img {
  transform: scale(1.08);
  filter: brightness(0.95);
}

.dv-featured-card:hover::before { opacity: 1; }
.dv-featured-card:hover::after { width: 100%; }
.dv-featured-card:focus-within::after { width: 100%; }

/* =========================================================
   CTA PROYECTOS
   ========================================================= */
.dv-project-cta { background: var(--dv-gray-100); position: relative; }

.dv-project-cta__wrap { position: relative; display: flex; justify-content: flex-end; }

.dv-project-cta__media { width: 82%; margin-left: auto; }
.dv-project-cta__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 20px 45px rgba(0,0,0,.12);
}

.dv-project-cta__card {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 520px;
  background: #ffffff;
  padding: 50px;
  border-radius: 18px;
  box-shadow: 0 25px 50px rgba(0,0,0,.15);
}

.dv-project-cta__title { color: var(--dv-navy); }
.dv-project-cta__text { color: rgba(23,38,47,.72); line-height: 1.6; max-width: 420px; }

@media (max-width: 991px) {
  .dv-project-cta__wrap { display: block; }
  .dv-project-cta__media { width: 100%; }
  .dv-project-cta__card {
    position: relative;
    transform: none;
    margin-top: -60px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 40px;
  }
}
@media (max-width: 576px) {
  .dv-project-cta__card { padding: 30px; }
}

/* =========================================================
   MARQUESINA STACK (BLOG/NOTICIAS) - PARALELAS
   ========================================================= */
.dv-marquee--stack {
  height: auto;            /* override importante */
  overflow: hidden;
  padding: 0;
}

.dv-marquee--stack .dv-marquee__layer {
  position: relative;
  transform: none !important;
  height: 54px;
  display: flex;
  align-items: center;
  overflow: hidden;
  left: 0;
  width: 100%;
  padding: 0;
}

.dv-marquee--stack .dv-marquee__text {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 22px;
  white-space: nowrap;
  padding-right: 48px;
  padding-left: 18px;
}

.dv-marquee--stack .dv-marquee--navy { background: var(--dv-navy); }
.dv-marquee--stack .dv-marquee--navy .dv-marquee__text { color: var(--dv-white); }

.dv-marquee--stack .dv-marquee--orange { background: var(--dv-orange); }
.dv-marquee--stack .dv-marquee--orange .dv-marquee__text { color: #111; }

@media (max-width: 575px) {
  .dv-marquee--stack .dv-marquee__layer { height: 46px; }
  .dv-marquee--stack .dv-marquee__text { font-size: 18px; }
}

/* =========================================================
   BLOG PREVIEW (INDEX)
   ========================================================= */
.dv-blog-preview { background: var(--dv-white); }


.dv-blog-preview__media {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 25px 55px rgba(0,0,0,.12);
}

.dv-blog-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 520px;
  transform: scale(1.01);
}

.dv-blog-preview__subtitle {
  color: rgba(23,38,47,.75);
  max-width: 520px;
  margin-bottom: 24px;
}

.dv-blog-preview__list {
  background: var(--dv-white);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(23,38,47,.08);
}

.dv-blog-item {
  display: grid;
  grid-template-columns: 110px 1fr 24px;
  gap: 18px;
  align-items: center;
  padding: 18px 18px;
  color: inherit;
  position: relative;
  transition: transform .2s ease, background .2s ease;
}
.dv-blog-item + .dv-blog-item { border-top: 1px solid rgba(23,38,47,.08); }

.dv-blog-item__thumb {
  width: 110px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--dv-gray-100); /* FIX */
  flex: none;
}
.dv-blog-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.dv-blog-item__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--dv-navy);
  margin: 0 0 6px 0;
}

.dv-blog-item__excerpt {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(23,38,47,.72);
  margin: 0;
}

.dv-blog-item__chev {
  font-size: 28px;
  line-height: 1;
  color: rgba(23,38,47,.45);
  justify-self: end;
  transition: transform .25s ease, color .25s ease;
}

.dv-blog-item:hover {
  background: rgba(240,245,247,.8);
  transform: translateY(-1px);
}
.dv-blog-item:hover .dv-blog-item__thumb img { transform: scale(1.08); }
.dv-blog-item:hover .dv-blog-item__chev { transform: translateX(4px); color: var(--dv-orange); }

.dv-blog-preview__cta { margin-top: 18px; }

@media (max-width: 991px) {
  .dv-blog-preview__grid { grid-template-columns: 1fr; gap: 26px; }
  .dv-blog-preview__img { min-height: 360px; }
}
@media (max-width: 575px) {
  .dv-blog-item { grid-template-columns: 92px 1fr 18px; gap: 14px; padding: 14px; }
  .dv-blog-item__thumb { width: 92px; height: 64px; }
  .dv-blog-item__title { font-size: 16px; }
}

/* =========================================================
   CTA BANNER (WHATSAPP)
   ========================================================= */
.dv-cta-banner { background: var(--dv-white); }

.dv-cta-banner__wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  padding: 44px 48px;
  box-shadow: 0 25px 55px rgba(0,0,0,.12);

  background-image: url("../Images/home/cta-proyecto.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.dv-cta-banner__overlay {
  position: absolute;
  inset: 0;
 background-image: url(../Images/home/banner.png);
 background-size: cover;
 background-position: right;
}

.dv-cta-banner__content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: var(--dv-white);
}

.dv-cta-banner__title {
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.05;
  font-weight: 900;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.dv-cta-banner__text {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 18px 0;
  color: rgba(255,255,255,.88);
  max-width: 520px;
}

.dv-cta-banner__btn { padding: 12px 26px; font-weight: 800; }

@media (max-width: 991px) {
  .dv-cta-banner__wrap { padding: 34px 26px; background-position: center; min-height: 240px; }
  .dv-cta-banner__overlay {
    background: linear-gradient(180deg, rgba(23,38,47,.72) 0%, rgba(23,38,47,.55) 45%, rgba(23,38,47,.35) 100%);
  }
  .dv-cta-banner__content { max-width: 100%; }
}

@media (max-width: 575px) {
  .dv-cta-banner__wrap { min-height: 220px; }
  .dv-cta-banner__text { font-size: 15px; }
}

/* =========================================================
   CONTACT (Index)
   ========================================================= */
.dv-contact { background: var(--dv-gray-100);
padding: 50px; } /* FIX */

.dv-contact__subtitle {
  color: rgba(23,38,47,.75);
  max-width: 760px;
  margin: 0 auto;
}

.dv-contact__card {
  background: var(--dv-white);
  border-radius: 12px;
  padding: 34px 34px 30px;
  box-shadow: 0 22px 55px rgba(0,0,0,.10);
  border: 1px solid rgba(23,38,47,.08);
}

.dv-contact__card-title {
  font-weight: 800;
  color: var(--dv-navy);
  font-size: clamp(22px, 2.4vw, 30px);
}

.dv-contact__card-text { color: rgba(23,38,47,.72); }

.dv-contact__label {
  font-weight: 700;
  color: rgba(23,38,47,.90);
  margin-bottom: 6px;
}

.dv-contact__input,
.dv-contact__textarea {
  border: 1px solid rgba(23,38,47,.18);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.dv-contact__textarea {
  resize: none;
  min-height: 132px;
}

.dv-contact__input:focus,
.dv-contact__textarea:focus {
  border-color: var(--dv-teal);
  box-shadow: 0 0 0 .2rem rgba(5,130,140,.18);
}

.dv-contact__btn {
  min-width: 220px;
  padding: 12px 22px;
  font-weight: 800;
}

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

@media (max-width: 575.98px) {
  .dv-contact__card { padding: 24px 18px 20px; }
}

/* Alerts */
.dv-alert {
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
  animation: dvFade .45s ease;
  font-size: 15px;
  border: 1px solid transparent;
}

.dv-alert strong {
  display: block;
  font-weight: 800;
  margin-bottom: 4px;
}

.dv-alert--success {
  background: #e8f6f4;
  color: #0c4c52;
  border-color: #bfe5e1;
}

.dv-alert--error {
  background: #fdecec;
  color: #6b1f1f;
  border-color: #f5c5c5;
}

@keyframes dvFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* =========================
   DV FOOTER
========================= */
.dv-footer{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.08), transparent 55%),
              linear-gradient(180deg, #0f1b22 0%, #0b141a 100%);
  color: rgba(255,255,255,.88);
  padding: 34px 0 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.dv-footer__wrap{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Top row */
.dv-footer__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.dv-footer__brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--dv-white);
}

.dv-footer__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}

.dv-footer__brand-text{
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 20px;
}

/* Contact */
.dv-footer__contact{
  display: grid;
  gap: 10px;
  justify-items: end;
}

.dv-footer__contact-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-weight: 700;
}

.dv-footer__contact-item:hover{
  color: var(--dv-white);
}

.dv-footer__icon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.75);
}

.dv-footer__icon--orange{
  color: var(--dv-orange);
}

/* Mid row */
.dv-footer__mid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 10px;
}

.dv-footer__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.dv-footer__link{
  color: rgba(255,255,255,.70);
  font-weight: 700;
  text-decoration: none;
}

.dv-footer__link:hover{
  color: var(--dv-white);
}

/* Social */
.dv-footer__social{
  display: inline-flex;
  gap: 14px;
}

.dv-footer__social-link{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.78);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.dv-footer__social-link:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.11);
  color: var(--dv-white);
}

/* Bottom row */
.dv-footer__bottom{
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.dv-footer__copy{
  color: rgba(255,255,255,.55);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-footer__top{
    flex-direction: column;
    align-items: flex-start;
  }

  .dv-footer__contact{
    justify-items: start;
  }

  .dv-footer__mid{
    flex-direction: column;
    align-items: flex-start;
  }

  .dv-footer__nav{
    gap: 14px 18px;
  }
}
/* =========================
   DV SCROLL TOP + PROGRESS RING
========================= */
.dv-scrolltop{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;

  width: 56px;
  height: 56px;
  border-radius: 16px;

  border: 1px solid rgba(23,38,47,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);

  box-shadow: 0 18px 40px rgba(0,0,0,.14);

  display: grid;
  place-items: center;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;

  color: var(--dv-navy);
}

/* Visible */
.dv-scrolltop.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover */
.dv-scrolltop:hover{
  transform: translateY(-2px);
  border-color: rgba(250,128,31,.35);
  color: var(--dv-orange);
}

/* Focus accesible */
.dv-scrolltop:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(5,130,140,.22), 0 18px 40px rgba(0,0,0,.14);
}

/* Icon */
.dv-scrolltop__icon{
  position: relative;
  z-index: 2;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

/* Ring */
.dv-scrolltop__ring{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  z-index: 1;
  transform: rotate(-90deg); /* inicia arriba */
}

/* Track & progress */
.dv-scrolltop__track{
  fill: none;
  stroke: rgba(23,38,47,.12);
  stroke-width: 3.5;
}

.dv-scrolltop__progress{
  fill: none;
  stroke: var(--dv-orange);
  stroke-width: 3.5;
  stroke-linecap: round;

  /* Se setea por JS */
  stroke-dasharray: 138.23;  /* 2πr con r=22 => ~138.23 */
  stroke-dashoffset: 138.23;

  transition: stroke-dashoffset .12s linear;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dv-scrolltop,
  .dv-scrolltop__progress{
    transition: none !important;
  }
}
/* =========================================================
   HERO (imagen + marquesina cruzada) - REUTILIZABLE
   Clases:
   .dv-about-hero, __bg, __overlay, __marquee, __band, __track, __text
   ========================================================= */

.dv-about-hero{
  position: relative;
  min-height: clamp(320px, 48vh, 520px);
  overflow: hidden;
  border-bottom: 1px solid rgba(23,38,47,.08);
  background: #cfe2f3; /* fallback si no carga imagen */

  /* ✅ Variables por defecto (fallback) */
  --dv-about-hero-bg: url("../Images/quienes-somos/hero_nosotros.png");
  --dv-about-hero-bg-position: center;
  --dv-about-hero-overlay: url(../Images/contacto/contacto_hero.png);
}

/* Fondo (usa variable) */
.dv-about-hero__bg{
  position: absolute;
  inset: 0;
  background-image: var(--dv-about-hero-bg);             /* ✅ dinámico */
  background-size: cover;
  background-position: var(--dv-about-hero-bg-position); /* ✅ dinámico */
  background-repeat: no-repeat;
  transform: scale(1.03);
}

/* Overlay para contraste (usa variable) */
.dv-about-hero__overlay{
  position: absolute;
  inset: 0;
  background: var(--dv-about-hero-overlay); /* ✅ dinámico */
  background-size: cover;
  background-position: center;
}

/* Contenedor de listones cruzados */
.dv-about-hero__marquee{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Bandas */
.dv-about-hero__band{
  position: absolute;
  left: -18%;
  width: 136%;
  height: 64px;
  display: flex;
  align-items: center;
  overflow: hidden;

  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* Navy (atrás) */
.dv-about-hero__band--navy{
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  transform-origin: center;
  background: rgba(23,38,47,.92);
  z-index: 1;
}

/* Orange (arriba) */
.dv-about-hero__band--orange{
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
  transform-origin: center;
  background: rgba(250,128,31,.98);
  z-index: 2;
}

/* Track animado */
.dv-about-hero__track{
  display: flex;
  width: max-content;
  align-items: center;
  gap: 42px;
  will-change: transform;
  animation: dvAboutMarquee 14s linear infinite;
}

.dv-about-hero__track--reverse{
  animation-direction: reverse;
  animation-duration: 18s;
}

/* Texto */
.dv-about-hero__text{
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(1rem, 2.3vw, 1.5rem);
  padding-left: 18px;
}

/* Colores texto por banda */
.dv-about-hero__band--navy .dv-about-hero__text{ color: #fff; }
.dv-about-hero__band--orange .dv-about-hero__text{ color: #111; }

/* Animación */
@keyframes dvAboutMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-about-hero__band{
    height: 56px;
    left: -24%;
    width: 148%;
  }
  .dv-about-hero__band--navy{ transform: translateY(-50%) rotate(-7deg); }
  .dv-about-hero__band--orange{ transform: translateY(-50%) rotate(9deg); }
}

@media (max-width: 575.98px){
  .dv-about-hero{ min-height: 280px; }
  .dv-about-hero__band{ height: 50px; }
  .dv-about-hero__text{
    font-size: 1.05rem;
    letter-spacing: 0.10em;
  }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .dv-about-hero__track{
    animation: none !important;
    transform: translateX(0) !important;
  }
}
/* =========================================================
   QUIÉNES SOMOS - SOBRE NUESTRO TRABAJO (con barras animadas)
   ========================================================= */

.dv-about-work{
  background: var(--dv-white);
}

.dv-about-work__grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
}

/* Visual izquierdo: dos "bloques" como referencia */
.dv-about-work__visual{
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
}

.dv-about-work__img{
  background: #8fc1ea; /* placeholder tipo maqueta */
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

.dv-about-work__img--small{
  width: min(260px, 70%);
  height: 260px;
  position: absolute;
  left: 0;
  top: 90px;
}

.dv-about-work__img--tall{
  width: min(260px, 80%);
  height: 380px;
  position: absolute;
  right: 0;
  top: 20px;
}

/* Contenido */
.dv-about-work__kicker{
  font-size: var(--dv-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(23,38,47,.65);
  margin: 0 0 10px 0;
  font-weight: 800;
}

.dv-about-work__title{
  font-size: clamp(2rem, 4.3vw, 3.1rem);
  margin: 0 0 12px 0;
}

.dv-about-work__text{
  color: rgba(23,38,47,.72);
  max-width: 62ch;
  margin: 0 0 22px 0;
}

/* Metrics */
.dv-about-work__metrics{
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.dv-metric__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.dv-metric__label{
  font-weight: 800;
  font-size: 0.95rem;
  color: rgba(23,38,47,.88);
}

.dv-metric__value{
  font-weight: 900;
  font-size: 0.95rem;
  color: rgba(23,38,47,.55);
}

/* Barra base */
.dv-metric__bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(23,38,47,.12);
  overflow: hidden;
  position: relative;
}

/* Fill (animado) */
.dv-metric__fill{
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transform: translateZ(0);
  transition: width 1100ms cubic-bezier(.2,.8,.2,1);
}

.dv-metric__fill--orange{ background: var(--dv-orange); }
.dv-metric__fill--navy{ background: var(--dv-navy); }

.dv-about-work__btn{
  padding: 12px 22px;
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-about-work__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dv-about-work__visual{
    min-height: 360px;
  }

  .dv-about-work__img--small{
    left: 8px;
    top: 90px;
  }

  .dv-about-work__img--tall{
    right: 8px;
    top: 20px;
  }
}

@media (max-width: 575.98px){
  .dv-about-work__visual{
    min-height: 320px;
  }

  .dv-about-work__img--small{
    width: 58%;
    height: 210px;
  }

  .dv-about-work__img--tall{
    width: 62%;
    height: 300px;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .dv-metric__fill{
    transition: none !important;
  }
}

/* =========================================================
   QUIÉNES SOMOS - SECCIÓN SOLUCIONES (layout editorial)
   ========================================================= */
/* =========================================================
   SECCIÓN: SOLUCIONES (QUIÉNES SOMOS)
   - Sin espacios entre contenedores (como maqueta)
   - Col izquierda rellena altura para evitar hueco inferior
   ========================================================= */

.dv-solutions{
  background: var(--dv-white);
}

/* Grid: columnas pegadas */
.dv-solutions__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;                 /* ✅ elimina el espacio rojo vertical entre columnas */
  align-items: stretch;   /* ✅ ambas columnas a la misma altura */
}

/* Col izquierda: ocupa 100% de la altura del grid */
.dv-solutions__left{
  display: flex;
  flex-direction: column;
  height: 100%;           /* ✅ importante para que no quede hueco inferior */
}

/* Bloque superior: texto + botón */
.dv-solutions__intro{
  max-width: 640px;
  padding-right: 22px;    /* ✅ recupera “aire” sin usar gap */
  margin-bottom: 14px;    /* separación controlada con margin (no gap del grid) */
}

.dv-solutions__kicker{
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(23,38,47,.55);
  margin: 0;
}

.dv-solutions__title{
  font-size: clamp(2.1rem, 4.3vw, 3.25rem);
  line-height: 1.02;
  margin: 0;
}

.dv-solutions__text{
  color: rgba(23,38,47,.72);
  max-width: 62ch;
  margin: 0;
}

.dv-solutions__intro p:last-child{
  margin-bottom: 0;
}

.dv-solutions__btn{
  margin-bottom: 0;
}

/* Bloque inferior: se estira para “rellenar” y eliminar el espacio rojo inferior */
.dv-solutions__lower{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.10);
  gap: 0;
  margin: 0;

  flex: 1;               /* ✅ clave: rellena el alto restante */
  min-height: 0;         /* ✅ evita comportamientos raros con flex + overflow */
}

/* Imagen inferior izquierda */
.dv-solutions__lower-media{
  position: relative;
  background: #dfeaf0;
  height: 100%;          /* ✅ para que estire junto con el contenedor */
  min-height: 240px;     /* mantiene presencia visual mínima */
}

.dv-solutions__lower-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card naranja inferior derecha */
.dv-solutions__lower-card{
  background: var(--dv-orange);
  color: #111;
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  height: 100%;          /* ✅ acompaña el estirado del bloque inferior */
}

.dv-solutions__bullet-title{
  font-weight: 900;
  font-size: 1.05rem;
  margin: 0 0 6px 0;
  color: #111;
}

.dv-solutions__bullet-text{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(17,17,17,.86);
}

/* Col derecha: imagen alta pegada */
.dv-solutions__right{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 25px 55px rgba(0,0,0,.12);
  border: 1px solid rgba(23,38,47,.08);
  background: #dfeaf0;

  height: 100%;          /* ✅ misma altura que la izquierda */
  min-height: 640px;     /* mantiene “imagen alta” */
  display: flex;

  /* ❌ quitamos estos para evitar separaciones:
     align-self: start;
     margin-top: 6px;
  */
}

/* Imagen derecha */
.dv-solutions__right-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =============================
   Responsive
============================= */
@media (max-width: 991.98px){
  .dv-solutions__grid{
    grid-template-columns: 1fr;
    gap: 26px;            /* en mobile sí conviene aire */
  }

  .dv-solutions__intro{
    padding-right: 0;
    margin-bottom: 14px;
  }

  .dv-solutions__right{
    min-height: 420px;
  }

  .dv-solutions__lower{
    grid-template-columns: 1fr; /* apila imagen + card */
    flex: initial;              /* en mobile ya no necesita “rellenar” */
  }

  .dv-solutions__lower-media{
    min-height: 240px;
  }
}

@media (max-width: 575.98px){
  .dv-solutions__lower-card{
    padding: 22px 18px;
  }
}


/* ===============================
   DV SERVICES SECTION
=============================== */

.dv-services{
  background: var(--dv-white);
}

/* HEADER */
.dv-services__header{
  max-width: 780px;
  margin: 0 auto 60px auto;
}

.dv-services__kicker{
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(23,38,47,.55);
  margin-bottom: 12px;
}

.dv-services__title{
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  margin-bottom: 14px;
}

.dv-services__text{
  color: rgba(23,38,47,.72);
  max-width: 65ch;
  margin: 0 auto;
}

/* GRID */
.dv-services__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* IMAGE */
.dv-services__media{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.12);
}

.dv-services__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* LIST */
.dv-services__list{
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}

/* CARD */
.dv-service-card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;

  padding: 26px 28px;
  border-radius: 14px;

  background: var(--dv-white);
  border: 1px solid rgba(23,38,47,.08);

  box-shadow: 0 12px 28px rgba(0,0,0,.06);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease,
    color .35s ease;
}

/* TEXT BLOCK */
.dv-service-card__content{
  max-width: 420px;
}

.dv-service-card__title{
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 6px 0;
}

.dv-service-card__text{
  margin: 0;
  font-size: .95rem;
  color: rgba(23,38,47,.72);
  line-height: 1.5;
}

/* BUTTON */
.btn-dv-outline{
  border: 2px solid var(--dv-orange);
  color: var(--dv-orange);
  padding: 10px 18px;
  font-weight: 700;
  border-radius: 10px;
  background: transparent;
  transition: all .3s ease;
}

/* ===============================
   HOVER EFFECT
=============================== */

.dv-service-card:hover{
  background: var(--dv-orange);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.14);
}

.dv-service-card:hover .dv-service-card__title{
  color: #111;
}

.dv-service-card:hover .dv-service-card__text{
  color: rgba(17,17,17,.85);
}

.dv-service-card:hover .btn-dv-outline{
  background: #111;
  border-color: #111;
  color: #fff;
}

/* ===============================
   RESPONSIVE
=============================== */

@media (max-width: 991.98px){

  .dv-services__grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .dv-services__media{
    min-height: 380px;
  }

}

@media (max-width: 575.98px){

  .dv-service-card{
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-dv-outline{
    width: 100%;
    text-align: center;
  }

}

/* =========================================================
   DV STATS / NUMERALIA (QUIÉNES SOMOS)
   ========================================================= */

.dv-stats{
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 6vw, 86px) 0; /* controla alto tipo banner */
  background: var(--dv-navy);
  color: var(--dv-white);
}

/* Imagen de fondo */
.dv-stats__bg{
  position: absolute;
  inset: 0;
  background-image: url("../Images/quienes-somos/numeralia-bg.jpg"); /* <-- CAMBIA RUTA */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

/* Overlay para legibilidad */
.dv-stats__overlay{
  position: absolute;
  inset: 0;
 background-image: url(../Images/quienes-somos/nosotros06.png);
 background-size: cover;
 background-position: center;
}

/* Contenido */
.dv-stats__wrap{
  position: relative;
  z-index: 1;
}

/* Grid de indicadores */
.dv-stats__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3.2vw, 44px);
  align-items: center;
  text-align: center;
}

/* Item */
.dv-stats__item{
  padding: 10px 8px;
}

/* Número */
.dv-stats__value{
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}

/* Etiqueta */
.dv-stats__label{
  font-size: 0.95rem;
  color: rgba(255,255,255,.78);
  margin: 0;
}

/* Nota opcional */
.dv-stats__note{
  text-align: center;
  margin-top: 18px;
  font-size: 0.9rem;
  color: rgba(255,255,255,.70);
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-stats__grid{
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .dv-stats__item{
    padding: 8px 0;
  }

  .dv-stats__overlay{
    background: linear-gradient(
      180deg,
      rgba(23,38,47,.74) 0%,
      rgba(23,38,47,.55) 55%,
      rgba(23,38,47,.35) 100%
    );
  }
}

/* =========================================================
   PRODUCTOS Y SERVICIOS - HERO CARRUSEL
   ========================================================= */

.dv-ps-hero{
  background: var(--dv-white);
}

.dv-ps-hero__carousel{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(23,38,47,.08);
  box-shadow: 0 22px 55px rgba(0,0,0,.10);
  min-height: clamp(220px, 38vw, 420px);
}

/* Imagen */
.dv-ps-hero__img{
  height: clamp(220px, 38vw, 420px);
  object-fit: cover;
}

/* Laterales oscuros (como tu mock) */
.dv-ps-hero__edge{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  z-index: 2;
  pointer-events: none;
}

.dv-ps-hero__edge--left{
  left: 0;
  background: linear-gradient(90deg, rgba(23,38,47,.90) 0%, rgba(23,38,47,.00) 100%);
}

.dv-ps-hero__edge--right{
  right: 0;
  background: linear-gradient(270deg, rgba(23,38,47,.90) 0%, rgba(23,38,47,.00) 100%);
}

/* Flechas */
.dv-ps-hero__nav{
  width: 16%;
  z-index: 3;
  opacity: 1;
}

.dv-ps-hero__chev{
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 8px 20px rgba(0,0,0,.35);
  user-select: none;
}

/* Dots */
.dv-ps-hero__dots{
  z-index: 4;
  gap: 8px;
  margin-bottom: 16px;
}

.dv-ps-hero__dots [data-bs-target]{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  opacity: .6;
}

.dv-ps-hero__dots .active{
  opacity: 1;
}

/* Contador 1/4 */
.dv-ps-hero__counter{
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(23,38,47,.62);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}

.dv-ps-hero__counter-current{
  font-weight: 900;
  font-size: 1.05rem;
}

.dv-ps-hero__counter-total{
  font-weight: 800;
  opacity: .9;
}

.dv-ps-hero__counter-sep{
  opacity: .8;
}

/* Mobile: bordes y navegación más compacta */
@media (max-width: 575.98px){
  .dv-ps-hero__edge{ width: 22%; }
  .dv-ps-hero__nav{ width: 22%; }
  .dv-ps-hero__counter{ right: 10px; bottom: 10px; padding: 8px 10px; }
}

/* =========================================================
   SECCIÓN: PRODUCTOS / SERVICIOS DESTACADOS
   ========================================================= */

.dv-ps-featured{
  background: var(--dv-white);
}

/* Encabezado */
.dv-ps-featured__head{
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 38px;
}

.dv-ps-featured__title{
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  margin: 0;
}

.dv-ps-featured__text{
  color: rgba(23,38,47,.72);
  line-height: 1.55;
}

/* =========================================================
   GRID 2x2
   ========================================================= */

.dv-ps-featured__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}

/* =========================================================
   TARJETA
   ========================================================= */

.dv-ps-product{
  background: #fff;
  border: 1px solid rgba(23,38,47,.08);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  display: flex;
  flex-direction: column;
}

/* Hover elegante marca DV */
.dv-ps-product:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border-color: rgba(243,120,33,.45);
}

/* =========================================================
   IMAGEN
   ========================================================= */

.dv-ps-product__media{
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #eef3f6;
  margin-bottom: 12px;
}

.dv-ps-product__media img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

/* zoom sutil */
.dv-ps-product:hover .dv-ps-product__media img{
  transform: scale(1.05);
}

/* =========================================================
   TEXTO
   ========================================================= */

.dv-ps-product__name{
  font-size: 1.15rem;
  font-weight: 700;
  margin: 6px 0 4px 0;
}

.dv-ps-product__meta{
  font-size: .92rem;
  color: rgba(23,38,47,.65);
  margin: 0 0 14px 0;
}

/* =========================================================
   BOTÓN
   ========================================================= */

.dv-ps-product__btn{
  margin-top: auto;
  padding: 9px 18px;
  font-size: .9rem;
  border-radius: 6px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px){
  .dv-ps-featured__grid{
    grid-template-columns: 1fr;
  }

  .dv-ps-product__media img{
    height: 220px;
  }
}
/* =========================================================
   SECCIÓN: CTA WHATSAPP
   ========================================================= */

.dv-cta-whatsapp__box{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  padding: 42px 48px;
}

/* Imagen fondo */
.dv-cta-whatsapp__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Overlay oscuro marca DV */
.dv-cta-whatsapp__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(12,30,44,.78) 0%,
      rgba(12,30,44,.60) 40%,
      rgba(12,30,44,.35) 70%,
      rgba(12,30,44,.15) 100%
    );
  z-index: 1;
}

/* Contenido */
.dv-cta-whatsapp__content{
  position: relative;
  z-index: 2;
  max-width: 560px;
  color: #fff;
}

.dv-cta-whatsapp__title{
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin: 0 0 10px 0;
}

.dv-cta-whatsapp__text{
  margin: 0 0 22px 0;
  color: rgba(255,255,255,.88);
}

/* Botón */
.dv-cta-whatsapp__btn{
  padding: 12px 24px;
  font-weight: 600;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px){

  .dv-cta-whatsapp__box{
    padding: 32px 26px;
    text-align: center;
    justify-content: center;
  }

  .dv-cta-whatsapp__content{
    max-width: 100%;
  }

  .dv-cta-whatsapp__overlay{
    background:
      linear-gradient(
        180deg,
        rgba(12,30,44,.75) 0%,
        rgba(12,30,44,.55) 100%
      );
  }
}

/* =========================================================
   HERO VARIANT: CIMENTACIÓN
   ========================================================= */
.dv-about-hero--cimentacion{
  --dv-about-hero-bg: url("../Images/productos/hero-cimentacion.jpg");
  --dv-about-hero-bg-position: center 35%;
}

/* =========================================================
   HERO VARIANT: PROTECCION
   ========================================================= */
.dv-about-hero--proteccion .dv-about-hero__bg{
  background-image: url("../Images/productos/hero-proteccion.jpg");
}
/* =========================================================
   HERO VARIANT: Adhesivos y sistemas de instalación
   ========================================================= */

.dv-about-hero--especialidades .dv-about-hero__bg{
  background-image: url("../Images/productos/hero-especialidades.jpg");
}

/* =========================================================
   HERO VARIANT: Adhesivos y sistemas de instalación
   ========================================================= */
   .dv-about-hero--acabados .dv-about-hero__bg{
  background-image: url("../Images/productos/hero-especialidades-02.jpg");
}
/* =========================================================
   HERO VARIANT: Contacto
   ========================================================= */
.dv-about-hero--contacto .dv-about-hero__bg{
  background-image:url("../Images/productos/hero-contacto.jpg");
}
  /* =========================================================
   DV SOLUCIONES - MAQUETA 2 COLUMNAS (Contenido + Headers)
   Clases:
   .dv-catalog
   .dv-split-header, .dv-split-subheader
   .dv-info-row, .dv-info-row--reverse
   .dv-info-media, .dv-info-content
   .dv-info-title, .dv-info-text
   .dv-info-list, .dv-info-list__title, .dv-info-mini
   .dv-quote-list
   ========================================================= */

/* Section wrapper */
.dv-catalog{
  background: var(--dv-white);
}

/* =========================
   Headers (rompe-sección)
========================= */

.dv-split-header{
  padding: 22px 0 18px;
  margin: 26px 0 24px;
  border-top: 1px solid rgba(23,38,47,.10);
}

.dv-split-header__title{
  margin: 0 0 8px 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  color: var(--dv-navy);
}

.dv-split-header__lead{
  margin: 0;
  max-width: 80ch;
  color: rgba(23,38,47,.72);
  font-size: var(--dv-fs-md);
  line-height: 1.55;
}

/* Subheader */
.dv-split-subheader{
  margin: 0 0 18px 0;
  padding: 16px 0 0;
}

.dv-split-subheader__title{
  margin: 0 0 6px 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--dv-navy);
}

.dv-split-subheader__lead{
  margin: 0;
  max-width: 85ch;
  color: rgba(23,38,47,.70);
  line-height: 1.55;
  font-size: var(--dv-fs-sm);
}

/* =========================
   Rows (2 columnas)
========================= */

.dv-info-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;

  padding: 22px 0;
  border-top: 1px solid rgba(23,38,47,.08);
}

.dv-info-row:first-of-type{
  border-top: none;
}

/* Alterna orden (imagen derecha / texto izquierda) */
.dv-info-row--reverse .dv-info-media{
  order: 2;
}
.dv-info-row--reverse .dv-info-content{
  order: 1;
}

/* Media */
.dv-info-media{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(23,38,47,.10);
  box-shadow: 0 22px 55px rgba(0,0,0,.10);
  background: var(--dv-gray-100);
  min-height: 260px;
}

.dv-info-media img{
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

/* Content */
.dv-info-content{
  min-width: 0;
}

.dv-info-title{
  margin: 0 0 10px 0;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 2.3vw, 1.8rem);
  line-height: 1.12;
  color: var(--dv-navy);
}

.dv-info-text{
  margin: 0;
  max-width: 70ch;
  color: rgba(23,38,47,.72);
  line-height: 1.65;
  font-size: var(--dv-fs-md);
}

/* =========================
   Lists (Cross-selling)
========================= */

.dv-info-list{
  margin-top: 14px;
}

.dv-info-list__title{
  margin: 18px 0 8px 0;
  font-weight: 900;
  color: rgba(23,38,47,.92);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.dv-info-list ul{
  margin: 0 0 10px 0;
  padding-left: 18px;
  color: rgba(23,38,47,.75);
}

.dv-info-list li{
  margin: 6px 0;
  line-height: 1.5;
}

.dv-info-mini{
  margin: 0 0 6px 0;
  font-size: 0.92rem;
  color: rgba(23,38,47,.62);
}

/* =========================
   Quote list (Mensajes listos)
========================= */

.dv-quote-list{
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.dv-quote-list li{
  border: 1px solid rgba(23,38,47,.10);
  background: rgba(240,245,247,.85);
  border-radius: 14px;
  padding: 14px 14px;
  color: rgba(23,38,47,.74);
  line-height: 1.6;
}

.dv-quote-list strong{
  display: inline-block;
  margin-bottom: 6px;
  color: var(--dv-navy);
  font-weight: 900;
}

/* =========================
   Responsive
========================= */

@media (max-width: 991.98px){
  .dv-info-row{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 0;
  }

  .dv-info-row--reverse .dv-info-media,
  .dv-info-row--reverse .dv-info-content{
    order: initial;
  }

  .dv-info-media{
    min-height: 220px;
  }

  .dv-info-media img{
    min-height: 220px;
  }
}

@media (max-width: 575.98px){
  .dv-split-header{
    margin: 18px 0 18px;
    padding: 18px 0 14px;
  }

  .dv-info-media{
    border-radius: 12px;
  }

  .dv-quote-list li{
    padding: 12px 12px;
    border-radius: 12px;
  }
}

/* =========================================================
   DV PROYECTOS - GRID EDITORIAL
   (inspirado en tu referencia)
   ========================================================= */

.dv-projects{
  background: var(--dv-white);
}

.dv-projects__container{
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
}

/* Header */
.dv-projects__head{
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(42px, 6vw, 78px) 0 clamp(18px, 3vw, 34px);
  text-align: center;
}

.dv-projects__kicker{
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(23,38,47,.60);
  margin: 0 0 12px 0;
  font-weight: 800;
}

.dv-projects__title{
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin: 0 0 12px 0;
}

.dv-projects__lead{
  margin: 0 auto;
  max-width: 70ch;
  color: rgba(23,38,47,.72);
  font-size: var(--dv-fs-lg);
}

/* List */
.dv-projects__list{
  display: grid;
  gap: 0; /* filas pegadas (editorial) */
}

/* Item base */
.dv-projects-item{
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(23,38,47,.08);
}

.dv-projects-item:last-child{
  border-bottom: 1px solid rgba(23,38,47,.08);
}

/* Fondos por fila (como tu referencia) */
.dv-projects-item--light{ background: #d8d8d8; }
.dv-projects-item--dark{ background: #6b6b6b; }
.dv-projects-item--black{ background: #141414; }

/* Grid interno */
.dv-projects-item__grid{
  display: grid;
  grid-template-columns: 0.36fr 0.64fr;
  align-items: center;
  min-height: clamp(380px, 48vw, 620px);
  padding: clamp(26px, 3vw, 54px) 0;
}

/* Copy (izquierda) */
.dv-projects-item__copy{
  padding-left: clamp(16px, 3vw, 60px);
  padding-right: clamp(16px, 3vw, 40px);
  color: rgba(255,255,255,.88);
}

/* Cambia el color del copy según fondo */
.dv-projects-item--light .dv-projects-item__copy{
  color: rgba(17,17,17,.88);
}

.dv-projects-item__eyebrow{
  margin: 0 0 10px 0;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  opacity: .85;
}

.dv-projects-item__mini-title{
  margin: 0 0 12px 0;
  font-weight: 900;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  letter-spacing: -0.01em;
}

.dv-projects-item__text{
  margin: 0 0 22px 0;
  max-width: 42ch;
  line-height: 1.65;
  opacity: .92;
}

.dv-projects-item__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .9rem;
  color: inherit;
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}

.dv-projects-item__cta:hover{
  transform: translateX(4px);
  opacity: 1;
}

/* Media (derecha) */
.dv-projects-item__media{
  position: relative;
  padding-right: clamp(16px, 3vw, 60px);
  padding-left: clamp(12px, 2vw, 18px);
}

/* Headline sobre imágenes */
.dv-projects-item__headline{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  z-index: 4;

  width: min(980px, 92%);
  text-align: center;

  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(2rem, 5vw, 4.4rem);

  color: rgba(255,255,255,.92);
  text-decoration: none;

  transition: opacity .25s ease, transform .25s ease;
}

.dv-projects-item__headline:hover{
  opacity: 1;
  transform: translate(-50%, -52%) scale(1.01);
}

/* En fondo claro, headline oscuro */
.dv-projects-item--light .dv-projects-item__headline{
  color: rgba(17,17,17,.92);
}

/* Subline */
.dv-projects-item__subline{
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(36px, 4vw, 54px));
  transform: translateX(-50%);
  z-index: 4;

  width: min(760px, 86%);
  text-align: center;

  margin: 0;
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}

.dv-projects-item--light .dv-projects-item__subline{
  color: rgba(17,17,17,.68);
}

/* Shots layout */
.dv-projects-item__shots{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
}

/* Shot base */
.dv-projects-item__shot{
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 22px 55px rgba(0,0,0,.18);
  background: rgba(255,255,255,.06);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}

.dv-projects-item--light .dv-projects-item__shot{
  border-color: rgba(23,38,47,.14);
  box-shadow: 0 22px 55px rgba(0,0,0,.12);
}

/* Proporciones */
.dv-projects-item__shot--primary{
  border-radius: 0;
  aspect-ratio: 1 / 1;
}

.dv-projects-item__shot--secondary{
  border-radius: 0;
  aspect-ratio: 16 / 10;
  max-width: 520px;
  margin-left: auto;
}

/* Imagen */
.dv-projects-item__shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02);
  transform: scale(1.01);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}

/* Overlay sutil como tu referencia */
.dv-projects-item__shot::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 130, 140, 0.10); /* toque DV (teal) */
  pointer-events: none;
  transition: opacity .35s ease;
  opacity: .8;
}

.dv-projects-item:hover .dv-projects-item__shot img{
  transform: scale(1.06);
  filter: saturate(1.08);
}

.dv-projects-item:hover .dv-projects-item__shot{
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0,0,0,.22);
}

.dv-projects-item:hover .dv-projects-item__shot::after{
  opacity: .55;
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-projects-item__grid{
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: auto;
    padding: 26px 0 42px;
  }

  .dv-projects-item__copy{
    padding-left: clamp(16px, 3vw, 34px);
    padding-right: clamp(16px, 3vw, 34px);
  }

  .dv-projects-item__media{
    padding-left: clamp(16px, 3vw, 34px);
    padding-right: clamp(16px, 3vw, 34px);
  }

  .dv-projects-item__headline{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin: 0 0 10px 0;
    text-align: left;
  }

  .dv-projects-item__subline{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    text-align: left;
    margin: 0 0 18px 0;
  }

  .dv-projects-item__shots{
    grid-template-columns: 1fr;
  }

  .dv-projects-item__shot--secondary{
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 575.98px){
  .dv-projects__head{
    text-align: left;
  }

  .dv-projects-item__text{
    max-width: 100%;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .dv-projects-item__shot,
  .dv-projects-item__shot img,
  .dv-projects-item__headline{
    transition: none !important;
  }
}


/* =========================================================
   DV PROJECT DETAIL (EDITORIAL)
   - Left: info + keypoints
   - Right: gallery grid + zoom hover
   ========================================================= */

.dv-project-detail{
  background: var(--dv-white);
}

.dv-project-detail__container{
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
  padding-top: clamp(22px, 3vw, 34px);
  padding-bottom: clamp(46px, 6vw, 86px);
}

/* Topbar */
.dv-project-detail__topbar{
  margin-bottom: clamp(18px, 2.6vw, 26px);
}

.dv-project-detail__back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: rgba(23,38,47,.78);
  text-decoration: none;
  transition: color var(--dv-speed) var(--dv-ease), transform var(--dv-speed) var(--dv-ease);
}

.dv-project-detail__back:hover{
  color: var(--dv-orange);
  transform: translateX(-2px);
}

/* Grid */
.dv-project-detail__grid{
  display: grid;
  grid-template-columns: 0.44fr 0.56fr;
  gap: clamp(18px, 3.4vw, 44px);
  align-items: start;
}

/* LEFT */
.dv-project-detail__info{
  max-width: 640px;
}

.dv-project-detail__title{
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 3.8vw, 3.05rem);
  margin: 0 0 14px 0;
  color: var(--dv-navy);
}

.dv-project-detail__intro{
  margin: 0 0 18px 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(23,38,47,.74);
  max-width: 62ch;
}

.dv-project-detail__text p{
  margin: 0 0 14px 0;
  line-height: 1.75;
  color: rgba(23,38,47,.72);
  max-width: 68ch;
}

.dv-project-detail__text p:last-child{
  margin-bottom: 0;
}

/* Meta block (como la referencia) */
.dv-project-detail__meta{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(23,38,47,.10);
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.dv-project-detail__meta-row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: baseline;
}

.dv-project-detail__meta-label{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(23,38,47,.62);
}

.dv-project-detail__meta-value{
  font-size: .96rem;
  font-weight: 700;
  color: rgba(23,38,47,.78);
}

/* Highlights */
.dv-project-detail__highlights{
  margin-top: 26px;
}

.dv-project-detail__h2{
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  margin: 0 0 12px 0;
  color: var(--dv-navy);
}

.dv-project-detail__bullets{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}

.dv-project-detail__bullets li{
  color: rgba(23,38,47,.74);
  line-height: 1.65;
}

/* CTA */
.dv-project-detail__cta{
  margin-top: 28px;
}

.dv-project-detail__btn{
  padding: 12px 20px;
  border-radius: 12px;
}

/* RIGHT: Gallery */
.dv-project-detail__gallery{
  position: relative;
}

.dv-project-detail__gallery-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

/* Image card */
.dv-project-detail__img{
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(23,38,47,.12);
  background: #eef3f6;
  box-shadow: 0 22px 55px rgba(0,0,0,.10);
  text-decoration: none;
}

.dv-project-detail__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .45s ease;
  will-change: transform;
}

/* Zoom hover */
.dv-project-detail__img:hover img{
  transform: scale(1.10);
  filter: saturate(1.05);
}

/* Variantes de tamaño */
.dv-project-detail__img--lg{
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.dv-project-detail__img--wide{
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}

/* Default aspect */
.dv-project-detail__img:not(.dv-project-detail__img--lg):not(.dv-project-detail__img--wide){
  aspect-ratio: 1 / 1;
}

/* Note */
.dv-project-detail__note{
  margin: 14px 0 0 0;
  font-size: .9rem;
  color: rgba(23,38,47,.55);
  line-height: 1.45;
  max-width: 72ch;
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-project-detail__grid{
    grid-template-columns: 1fr;
  }

  .dv-project-detail__info{
    max-width: 100%;
  }
}

@media (max-width: 575.98px){
  .dv-project-detail__meta-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dv-project-detail__gallery-grid{
    grid-template-columns: 1fr;
  }

  .dv-project-detail__img:not(.dv-project-detail__img--lg):not(.dv-project-detail__img--wide){
    aspect-ratio: 16 / 11;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dv-project-detail__img img{
    transition: none !important;
  }
}

/* =========================================================
   PROJECT DETAIL - Amazon gallery layout
   ========================================================= */
.dv-project-detail{
  background: var(--dv-white);
  padding: clamp(26px, 3vw, 44px) 0;
}

.dv-project-detail__container{
  padding-left: clamp(16px, 3vw, 44px);
  padding-right: clamp(16px, 3vw, 44px);
}

.dv-project-detail__topbar{ margin-bottom: 16px; }

.dv-project-detail__back{
  font-weight: 800;
  color: rgba(23,38,47,.78);
  text-decoration: none;
}
.dv-project-detail__back:hover{ color: var(--dv-orange); }

/* Grid general: galería (izq) + info (der) */
.dv-project-detail__grid--amazon{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}

/* ===== Amazon-like gallery ===== */
.dv-project-gallery{
  display: grid;
  grid-template-columns: 82px 1fr; /* thumbs + main */
  gap: 14px;
  align-items: start;
}

/* Thumbs column */
.dv-project-gallery__thumbs{
  display: grid;
  gap: 10px;
  align-content: start;
}

.dv-project-gallery__thumb{
  width: 82px;
  height: 82px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(23,38,47,.12);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dv-project-gallery__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.dv-project-gallery__thumb:hover{
  transform: translateY(-1px);
  border-color: rgba(250,128,31,.55);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}

.dv-project-gallery__thumb.is-active{
  border-color: rgba(250,128,31,.85);
  box-shadow: 0 18px 32px rgba(250,128,31,.16);
}

/* Main image stage */
.dv-project-gallery__stage{
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(23,38,47,.10);
  background: #eef3f6;
  box-shadow: 0 22px 55px rgba(0,0,0,.12);
  min-height: clamp(420px, 48vw, 640px);
}

.dv-project-gallery__stage img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* Amazon feel */
  display: block;
  background: #fff;
  transform: scale(1.00);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

/* Zoom hover en la imagen principal */
.dv-project-gallery__stage:hover img{
  transform: scale(1.06);
}

/* ===== Info editorial (derecha) ===== */
.dv-project-detail__title{
  font-size: clamp(1.9rem, 2.7vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
}

.dv-project-detail__intro{
  color: rgba(23,38,47,.72);
  font-size: 1.03rem;
  line-height: 1.6;
  margin: 0 0 16px 0;
  max-width: 62ch;
}

.dv-project-detail__text p{
  color: rgba(23,38,47,.72);
  line-height: 1.7;
  margin: 0 0 12px 0;
  max-width: 66ch;
}

.dv-project-detail__meta{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(23,38,47,.10);
  display: grid;
  gap: 10px;
}

.dv-project-detail__meta-row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
}

.dv-project-detail__meta-label{
  font-weight: 900;
  color: rgba(23,38,47,.75);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}

.dv-project-detail__meta-value{
  font-weight: 700;
  color: rgba(23,38,47,.75);
}

.dv-project-detail__highlights{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(23,38,47,.10);
}

.dv-project-detail__h2{
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.dv-project-detail__bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(23,38,47,.72);
  line-height: 1.65;
}

.dv-project-detail__cta{ margin-top: 18px; }

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .dv-project-detail__grid--amazon{
    grid-template-columns: 1fr;
  }

  .dv-project-gallery{
    grid-template-columns: 72px 1fr;
  }

  .dv-project-gallery__thumb{
    width: 72px;
    height: 72px;
    border-radius: 12px;
  }

  .dv-project-gallery__stage{
    min-height: 360px;
  }
}

@media (max-width: 575.98px){
  .dv-project-gallery{
    grid-template-columns: 1fr;
  }

  .dv-project-gallery__thumbs{
    grid-auto-flow: column;
    grid-auto-columns: 72px;
    overflow-x: auto;
    padding-bottom: 6px;
    gap: 10px;
  }

  .dv-project-gallery__thumb{
    width: 72px;
    height: 72px;
    flex: none;
  }

  .dv-project-gallery__stage{
    min-height: 320px;
  }
}

/* =========================================================
   PROJECTS CTA BANNER (Imagen + botón WhatsApp)
   ========================================================= */
.dv-projects-cta{
  padding: clamp(18px, 2.8vw, 34px) 0;
  background: var(--dv-white);
}

.dv-projects-cta__wrap{
  position: relative;
  border-radius: 10px;
  overflow: hidden;

  min-height: clamp(220px, 26vw, 320px);

  display: flex;
  align-items: center;

  padding: clamp(28px, 4vw, 56px);

  border: 1px solid rgba(23,38,47,.08);
  box-shadow: 0 25px 55px rgba(0,0,0,.12);

  background-image: url("../Images/proyectos/cta-proyectos.jpg"); /* <-- cambia a tu ruta */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay para legibilidad */
.dv-projects-cta__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(23,38,47,.60) 0%,
    rgba(23,38,47,.42) 35%,
    rgba(23,38,47,.22) 60%,
    rgba(23,38,47,.10) 100%
  );
}

/* Contenido */
.dv-projects-cta__content{
  position: relative;
  z-index: 1;
  max-width: 760px;
  color: var(--dv-white);
}

/* Título editorial */
.dv-projects-cta__title{
  font-size: clamp(1.65rem, 3.1vw, 2.6rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}

/* Texto opcional */
.dv-projects-cta__text{
  margin: 0 0 18px 0;
  color: rgba(255,255,255,.88);
  max-width: 62ch;
  line-height: 1.55;
}

/* Botón (usa tu .btn-dv-primary) */
.dv-projects-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  font-weight: 900;
  border-radius: 0; /* más editorial como tu referencia */
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-projects-cta__wrap{
    padding: 34px 26px;
    min-height: 240px;
    background-position: center;
  }

  .dv-projects-cta__overlay{
    background: linear-gradient(
      180deg,
      rgba(23,38,47,.65) 0%,
      rgba(23,38,47,.45) 55%,
      rgba(23,38,47,.22) 100%
    );
  }

  .dv-projects-cta__content{
    max-width: 100%;
    text-align: left;
  }
}

@media (max-width: 575.98px){
  .dv-projects-cta__wrap{
    min-height: 220px;
  }

  .dv-projects-cta__btn{
    width: fit-content;
  }
}

.dv-contact {
 
  background: #f6f7f9;
}

.dv-contact__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

/* Imagen izquierda */
.dv-contact__media {
  position: relative;
  overflow: hidden;
}

.dv-contact__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Formulario derecho */
.dv-contact__form-wrap {
  background: #f26522; /* naranja corporativo */
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dv-contact__title {
  color: #000000;
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
}

.dv-contact__subtitle {
  color: rgba(85, 85, 85, 0.85);
  margin-bottom: 40px;
  max-width: 420px;
}

/* Formulario */
.dv-contact__form {
  width: 100%;
}

.dv-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dv-form__input,
.dv-form__textarea {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  color: #fff;
  margin-bottom: 24px;
  font-size: 15px;
}

.dv-form__input::placeholder,
.dv-form__textarea::placeholder {
  color: rgba(255,255,255,0.7);
}

.dv-form__textarea {
  resize: none;
  min-height: 90px;
}

.dv-form__input:focus,
.dv-form__textarea:focus {
  outline: none;
  border-bottom: 1px solid #fff;
}

/* Botón */
.dv-form__btn {
  background: #0c2238;
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.dv-form__btn:hover {
  background: #091a2b;
}

/* Responsive */
@media (max-width: 992px) {
  .dv-contact__container {
    grid-template-columns: 1fr;
  }

  .dv-contact__media {
    height: 260px;
  }

  .dv-contact__form-wrap {
    padding: 50px 30px;
  }

  .dv-form__row {
    grid-template-columns: 1fr;
  }
}
.dv-services-preview {
  padding: 80px 0;
  text-align: center;
}

.dv-services-preview__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
}

.dv-services-preview__title {
  font-size: 36px;
  margin-bottom: 10px;
  color: #0c2238;
}

.dv-services-preview__text {
  max-width: 720px;
  margin: 0 auto 50px;
  color: #6b7280;
}

.dv-services-preview__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  text-align: left;
}

/* Card */
.dv-service-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .25s ease;
}

.dv-service-card:hover {
  transform: translateY(-6px);
}

.dv-service-card__img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  margin-bottom: 18px;
  border-radius: 8px;
}

.dv-service-card__title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #0c2238;
}

.dv-service-card__text {
  color: #6b7280;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.dv-service-card__cta {
  color: #f26522;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1200px) {
  .dv-services-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dv-services-preview__grid {
    grid-template-columns: 1fr;
  }
}
.dv-highlight {
  padding: 0;
  background: #ffffff;
}

.dv-highlight__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  min-height: 320px;
}

/* Columna 1: Imagen */
.dv-highlight__media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.dv-highlight__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}

/* Overlay para que se lea el texto sobre la imagen */
.dv-highlight__overlay {
  position: absolute;
  inset: 0;
  padding: 42px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* oscurecido sutil para legibilidad */
  background: linear-gradient(
    90deg,
    rgba(12, 34, 56, 0.78) 0%,
    rgba(12, 34, 56, 0.52) 55%,
    rgba(12, 34, 56, 0.18) 100%
  );
}

.dv-highlight__headline {
  color: #ffffff;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
  margin: 0 0 12px;
  max-width: 420px;
}

.dv-highlight__copy {
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 420px;
  line-height: 1.55;
}

/* Col 2 y 3: Tarjetas enlace */
.dv-highlight-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 46px 44px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dv-highlight-card:hover {
  transform: translateY(-4px);
}

/* Variante clara */
.dv-highlight-card--light {
  background: #f6f7f9;
  color: #0c2238;
}

/* Variante naranja */
.dv-highlight-card--orange {
  background: #f26522;
  color: #ffffff;
}

.dv-highlight-card__icon {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.18);
}

.dv-highlight-card--light .dv-highlight-card__icon {
  background: rgba(12, 34, 56, 0.08);
}

.dv-highlight-card__icon-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.dv-highlight-card__title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
}

.dv-highlight-card__text {
  margin: 0 0 14px;
  line-height: 1.55;
  opacity: 0.85;
}

/* CTA */
.dv-highlight-card__cta {
  font-weight: 800;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dv-highlight-card--light .dv-highlight-card__cta {
  color: #f26522;
}

.dv-highlight-card--orange .dv-highlight-card__cta {
  color: #ffffff;
}

/* Responsive */
@media (max-width: 992px) {
  .dv-highlight__grid {
    grid-template-columns: 1fr;
  }

  .dv-highlight__media {
    min-height: 260px;
  }

  .dv-highlight__overlay {
    padding: 34px 24px;
    background: linear-gradient(
      180deg,
      rgba(12, 34, 56, 0.78) 0%,
      rgba(12, 34, 56, 0.42) 100%
    );
  }

  .dv-highlight__headline {
    font-size: 28px;
  }

  .dv-highlight-card {
    padding: 34px 24px;
  }
}
/* =========================================================
   TERMS - Extra minimal (sobre tu DV base)
   ========================================================= */

.dv-terms-hero{
  background: linear-gradient(180deg, rgba(23,38,47,.02), rgba(23,38,47,0));
}

/* Meta box */
.dv-terms-meta{
  margin: 22px auto 0;
  width: min(540px, 100%);
  background: rgba(240,245,247,.85);
  border: 1px solid rgba(23,38,47,.10);
  border-radius: var(--dv-radius-md);
  padding: 14px 16px;
  text-align: left;
  box-shadow: var(--dv-shadow-sm);
}

.dv-terms-meta__row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(23,38,47,.08);
}
.dv-terms-meta__row:last-child{ border-bottom: none; }

.dv-terms-meta__label{
  font-size: var(--dv-fs-xxs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(23,38,47,.62);
}
.dv-terms-meta__value{
  font-weight: 900;
  color: rgba(23,38,47,.82);
}

/* Layout: content + toc */
.dv-terms-layout{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.dv-terms-card{ padding: 26px; }

/* Sticky TOC */
.dv-terms-aside{
  padding: 18px;
  position: sticky;
  top: 92px;
}

.dv-terms-aside__title{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: 12px;
  color: rgba(23,38,47,.85);
}

.dv-terms-toc{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(23,38,47,.10);
  background: var(--dv-white);
  margin-bottom: 10px;
  transition: transform var(--dv-speed) var(--dv-ease),
              box-shadow var(--dv-speed) var(--dv-ease),
              border-color var(--dv-speed) var(--dv-ease);
  font-weight: 800;
}

.dv-terms-toc:hover{
  transform: translateY(-2px);
  box-shadow: var(--dv-shadow-sm);
  border-color: rgba(250,128,31,.35);
}

.dv-terms-toc small{
  font-weight: 900;
  color: var(--dv-orange);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
}

.dv-terms-aside__cta{
  border-top: 1px solid rgba(23,38,47,.10);
  padding-top: 14px;
  margin-top: 12px;
}

/* Typography */
.dv-terms-head{ margin-bottom: 14px; }
.dv-terms-h2{ margin: 0 0 10px 0; font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.dv-terms-lead{ margin: 0; color: rgba(23,38,47,.72); }

.dv-terms-section{
  padding: 18px 0;
  border-top: 1px solid rgba(23,38,47,.08);
}
.dv-terms-section:first-of-type{
  border-top: none;
  padding-top: 10px;
}

.dv-terms-h3{
  margin: 0 0 10px 0;
  font-weight: 900;
  color: var(--dv-navy);
  font-size: 1.02rem;
}

.dv-terms-list{
  margin: 10px 0 0 0;
  padding-left: 18px;
  color: rgba(23,38,47,.74);
}
.dv-terms-list li{ margin: 6px 0; line-height: 1.55; }

.dv-terms-note{
  margin-top: 18px;
  padding: 14px 14px;
  border-radius: var(--dv-radius-sm);
  border: 1px solid rgba(250,128,31,.30);
  background: rgba(250,128,31,.10);
  color: rgba(23,38,47,.90);
  font-weight: 800;
  font-size: .95rem;
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-terms-layout{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dv-terms-aside{
    position: relative;
    top: auto;
  }
}

@media (max-width: 575.98px){
  .dv-terms-card{ padding: 22px 18px; }
}

/* =========================================================
   404 - Extra minimal (sobre DV base)
   ========================================================= */

.dv-404{
  position: relative;
  overflow: hidden;
  background: var(--dv-white);
  padding: clamp(56px, 7vw, 96px) 0;
  border-bottom: 1px solid rgba(23,38,47,.08);
}

.dv-404__bg{
  position: absolute;
  inset: 0;
  opacity: .9;
  pointer-events: none;
  background:
    radial-gradient(800px 420px at 20% 30%, rgba(250,128,31,.16), transparent 60%),
    radial-gradient(720px 420px at 80% 40%, rgba(5,130,140,.14), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(23,38,47,0.14) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
}

.dv-404__container{ position: relative; z-index: 1; }

.dv-404__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 3.2vw, 38px);
  align-items: center;
}

.dv-404__kicker{
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(23,38,47,.60);
  font-weight: 900;
  margin-bottom: 10px;
}

.dv-404__title{
  margin: 0 0 14px 0;
  line-height: .92;
  font-size: clamp(3.1rem, 7vw, 5.2rem);
}

.dv-404__title-sub{
  font-size: clamp(1.25rem, 2.3vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  display: inline-block;
  margin-top: 10px;
}

.dv-404__text{
  margin: 0 0 18px 0;
  color: rgba(23,38,47,.72);
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.7;
}

.dv-404__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.dv-404__quick{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0 0;
}

.dv-404__pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(23,38,47,.12);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  font-weight: 800;
  color: rgba(23,38,47,.82);
  transition: transform var(--dv-speed) var(--dv-ease),
              box-shadow var(--dv-speed) var(--dv-ease),
              border-color var(--dv-speed) var(--dv-ease);
}

.dv-404__pill:hover{
  transform: translateY(-2px);
  box-shadow: var(--dv-shadow-sm);
  border-color: rgba(250,128,31,.35);
}

.dv-404__tip{
  margin-top: 16px;
  padding: 14px 14px;
  border-radius: var(--dv-radius-sm);
  border: 1px solid rgba(23,38,47,.10);
  background: rgba(240,245,247,.85);
  color: rgba(23,38,47,.78);
}

.dv-404__tip strong{
  color: rgba(23,38,47,.92);
  font-weight: 900;
}

/* Right panel */
.dv-404__panel{ padding: 18px; }

.dv-404__panel-top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.dv-404__badge{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .08em;
  background: rgba(250,128,31,.14);
  color: rgba(23,38,47,.88);
  border: 1px solid rgba(250,128,31,.25);
}

.dv-404__panel-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}

.dv-404__panel-sub{
  color: rgba(23,38,47,.62);
  font-weight: 800;
  font-size: .92rem;
}

.dv-404__panel-links{
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.dv-404__link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(23,38,47,.10);
  background: #fff;
  font-weight: 900;
  transition: transform var(--dv-speed) var(--dv-ease),
              box-shadow var(--dv-speed) var(--dv-ease),
              border-color var(--dv-speed) var(--dv-ease);
}

.dv-404__link:hover{
  transform: translateY(-2px);
  box-shadow: var(--dv-shadow-sm);
  border-color: rgba(250,128,31,.35);
}

.dv-404__link small{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--dv-orange);
}

.dv-404__panel-foot{
  border-top: 1px solid rgba(23,38,47,.10);
  padding-top: 14px;
}

/* Responsive */
@media (max-width: 991.98px){
  .dv-404__grid{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 575.98px){
  .dv-404__actions .btn{
    width: 100%;
  }
}

/*EMPEZAMOS BLOG*/

/* =========================================================
BLOG.HTML CSS CORREGIDO (NO ROMPE BOOTSTRAP)
Mantiene alineación natural del grid 8 / 4
Solo estilos visuales, sin tocar columnas
========================================================= */

/* =========================
HERO
========================= */
.dv-blog-hero{
  padding:90px 0 70px;
  background:
    linear-gradient(135deg,rgba(8,31,55,.94),rgba(13,55,92,.90)),
    url("../Images/blog/blog-hero.jpg") center/cover no-repeat;
  color:#fff;
}

.dv-blog-hero__kicker{
  display:inline-block;
  margin-bottom:14px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ff7a00;
}

.dv-blog-hero__title{
  margin:0 0 14px;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1.05;
  font-weight:900;
}

.dv-blog-hero__text{
  max-width:720px;
  margin:0;
  font-size:1.08rem;
  line-height:1.8;
  color:rgba(255,255,255,.88);
}

/* =========================
PAGE
========================= */
.dv-blog-page{
  padding:70px 0;
  background:#f5f6f8;
}

/* =========================
SEARCH
========================= */
.dv-blog-toolbar{
  margin-bottom:28px;
}

.dv-blog-search{
  display:grid;
  grid-template-columns:1fr 140px;
  gap:14px;
}

.dv-blog-search input{
  height:58px;
  border:none;
  border-radius:16px;
  background:#fff;
  padding:0 20px;
  outline:none;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
}

.dv-blog-search input:focus{
  box-shadow:0 0 0 4px rgba(255,122,0,.14);
}

.dv-blog-search button{
  height:58px;
  border:none;
  border-radius:16px;
  background:#ff7a00;
  color:#fff;
  font-weight:800;
}

.dv-blog-search button:hover{
  background:#e56d00;
}

/* =========================
GRID POSTS
========================= */


/* =========================
CARD
========================= */
.dv-blog-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 16px 38px rgba(0,0,0,.06);
  transition:.28s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}

.dv-blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 52px rgba(0,0,0,.10);
}

.dv-blog-card__media{
  aspect-ratio:16/10;
  overflow:hidden;
}

.dv-blog-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.dv-blog-card__body{
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.dv-blog-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.dv-blog-card__tag{
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  color:#ff7a00;
}

.dv-blog-card__date{
  font-size:.82rem;
  color:#7b8794;
}

.dv-blog-card__title{
  margin:0 0 14px;
  font-size:1.45rem;
  line-height:1.2;
  font-weight:900;
  color:#081f37;
}

.dv-blog-card__excerpt{
  margin:0 0 18px;
  line-height:1.75;
  color:#667085;
}

.dv-blog-card__link{
  margin-top:auto;
  color:#081f37;
  font-weight:800;
}

/* =========================
SIDEBAR
========================= */
.dv-blog-page__sidebar{
  position:sticky;
  top:110px;
}

.dv-blog-widget{
  background:#fff;
  border-radius:24px;
  padding:26px;
  margin-bottom:24px;
  box-shadow:0 16px 38px rgba(0,0,0,.05);
}

.dv-blog-widget__title{
  margin:0 0 18px;
  font-size:1.08rem;
  font-weight:900;
  color:#081f37;
}

/* FEATURED */
.dv-blog-feature{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  text-decoration:none;
}

.dv-blog-feature img{
  width:110px;
  height:90px;
  object-fit:cover;
  border-radius:14px;
}

.dv-blog-feature strong{
  display:block;
  color:#081f37;
  margin-bottom:6px;
}

.dv-blog-feature span{
  display:block;
  font-size:.92rem;
  line-height:1.55;
  color:#6b7280;
}

/* LATEST */
#dvBlogLatest{
  display:grid;
  gap:16px;
}

.dv-blog-latest{
  display:grid;
  grid-template-columns:82px 1fr;
  gap:14px;
  text-decoration:none;
  align-items:center;
}

.dv-blog-latest img{
  width:82px;
  height:68px;
  object-fit:cover;
  border-radius:12px;
}

.dv-blog-latest span{
  font-size:.94rem;
  font-weight:800;
  line-height:1.45;
  color:#081f37;
}

/* CTA */
.dv-blog-widget--cta{
  background:linear-gradient(135deg,#ff7a00,#ff9730);
  color:#fff;
}

.dv-blog-widget--cta h3{
  margin:0 0 12px;
  color:#fff;
  font-weight:900;
}

.dv-blog-widget--cta p{
  margin:0 0 18px;
  line-height:1.7;
}

.dv-blog-widget--cta .btn{
  height:52px;
  border:none;
  border-radius:14px;
  background:#081f37;
  font-weight:800;
}

/* =========================
RESPONSIVE
========================= */
@media (max-width:991px){

  .dv-blog-page{
    padding:56px 0;
  }

  .dv-blog-page__sidebar{
    position:static;
    margin-top:10px;
  }

}

@media (max-width:767px){

  .dv-blog-search{
    grid-template-columns:1fr;
  }

  .dv-blog-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .dv-blog-feature{
    grid-template-columns:1fr;
  }

  .dv-blog-feature img{
    width:100%;
    height:220px;
  }

}

@media (max-width:575px){

  .dv-blog-card__body,
  .dv-blog-widget{
    padding:22px;
  }

  .dv-blog-card__title{
    font-size:1.25rem;
  }

}

.dv-about-hero--autonivelantes{
  --hero-image:url('../Images/heroes/autonivelantes.jpg');
}

.dv-specification{
  background:#f8f9fa;
}

.dv-service-card{
  background:#fff;
  padding:24px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  height:100%;
}

.dv-service-card h5{
  margin-bottom:12px;
  color:var(--dv-navy);
}

.dv-spec-chip{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:50px;
  padding:14px 18px;
  text-align:center;
  font-weight:700;
  box-shadow:0 4px 15px rgba(0,0,0,.05);
}