@import url("tokens-diseno.css");

/* Green-focused visual system for case-study pages */
body.casos-green-theme {
  background-image:
    linear-gradient(rgba(133, 213, 161, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133, 213, 161, 0.08) 1px, transparent 1px) !important;
}

body.casos-green-theme .hud-matrix-link {
  stroke: rgba(133, 213, 161, 0.42);
  filter: drop-shadow(0 0 2px rgba(133, 213, 161, 0.22));
}

body.casos-green-theme .hud-matrix-icon {
  text-shadow: 0 0 8px rgba(133, 213, 161, 0.25);
}

html:has(body.casos-green-theme)::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(133, 213, 161, 0.1) 0,
    rgba(133, 213, 161, 0.1) 1px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0) 6px
  );
}

html:has(body.casos-green-theme)::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(133, 213, 161, 0.08),
    rgba(0, 0, 0, 0)
  );
}

body.casos-green-theme::before,
body.casos-green-theme::after {
  background: linear-gradient(to bottom, rgba(133, 213, 161, 0.36), rgba(133, 213, 161, 0.04));
}

body.casos-green-theme .sh-card,
body.casos-green-theme .sh-service-card,
body.casos-green-theme .sh-benefit,
body.casos-green-theme .u-group,
body.casos-green-theme .u-layout-cell {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(133, 213, 161, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.02);
  background-image:
    linear-gradient(90deg, rgba(133, 213, 161, 0.38), rgba(133, 213, 161, 0.38)),
    linear-gradient(180deg, rgba(133, 213, 161, 0.38), rgba(133, 213, 161, 0.38)),
    linear-gradient(90deg, rgba(133, 213, 161, 0.38), rgba(133, 213, 161, 0.38)),
    linear-gradient(180deg, rgba(133, 213, 161, 0.38), rgba(133, 213, 161, 0.38)) !important;
}

body.casos-green-theme .sh-card:hover,
body.casos-green-theme .sh-service-card:hover,
body.casos-green-theme .sh-benefit:hover {
  border-color: rgba(133, 213, 161, 0.62) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4), 0 0 26px rgba(133, 213, 161, 0.28);
}

/* Use-case hero: remove circular icon block and let text take full width */
body.casos-green-theme .casos-hero .casos-media {
  display: none !important;
}

body.casos-green-theme .casos-hero .sh-cover {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

body.casos-green-theme .casos-hero .sh-cover-text,
body.casos-green-theme .casos-hero .sh-lead {
  max-width: none !important;
}