/* ==========================================================================
   Shared Brand Utilities
   ========================================================================== */

:root {
  --neutral-050: #f8f9fa;
  --neutral-200: #dadfe1;
  --neutral-900: #3a3a3a;
  --neutral-900-rgb: 58, 58, 58;
}

.u-font-inter {
  font-family: "Inter", sans-serif;
}

.u-font-montserrat {
  font-family: "Montserrat", sans-serif;
}

.u-font-source3 {
  font-family: "Source Sans 3", sans-serif;
}

.u-font-source {
  font-family: "Source Sans Pro", sans-serif;
}

.u-text-shadow-soft {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.u-text-shadow-hero {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.u-mr-neg-12 {
  margin-right: 0;
}

@media (min-width: 768px) {
  .u-mr-neg-12 {
    margin-right: -3rem;
  }
}

.u-spacer-77 {
  width: 100%;
  height: 77px;
}

.u-aspect-3-2 {
  aspect-ratio: 3 / 2;
}

.u-mt-clamp-6-15-12 {
  margin-top: clamp(6rem, 15vw, 12rem);
}

.u-bg-cover-center {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.u-gradient-brand-fade-right {
  background: linear-gradient(
    to right,
    rgba(var(--brand-primary-color-rgb, 0, 51, 160), 0.2),
    transparent
  );
}

.text-neutral-900 {
  color: var(--neutral-900, #3a3a3a);
}

.text-neutral-900-70 {
  color: rgba(var(--neutral-900-rgb, 58, 58, 58), 0.7);
}

.text-neutral-900-60 {
  color: rgba(var(--neutral-900-rgb, 58, 58, 58), 0.6);
}

.text-neutral-200 {
  color: var(--neutral-200, #dadfe1);
}

.bg-neutral-050 {
  background-color: var(--neutral-050, #f8f9fa);
}

.bg-neutral-200 {
  background-color: var(--neutral-200, #dadfe1);
}

.bg-neutral-200-50 {
  background-color: rgba(218, 223, 225, 0.5);
}

.bg-neutral-200-30 {
  background-color: rgba(218, 223, 225, 0.3);
}

.bg-neutral-200-20 {
  background-color: rgba(218, 223, 225, 0.2);
}

.bg-neutral-900-15 {
  background-color: rgba(var(--neutral-900-rgb, 58, 58, 58), 0.15);
}

.bg-neutral-900-20 {
  background-color: rgba(var(--neutral-900-rgb, 58, 58, 58), 0.2);
}

.bg-neutral-900-5 {
  background-color: rgba(var(--neutral-900-rgb, 58, 58, 58), 0.05);
}

.border-neutral-900 {
  border-color: var(--neutral-900, #3a3a3a);
}

.focus-ring-neutral-900-30:focus {
  --tw-ring-color: rgba(var(--neutral-900-rgb, 58, 58, 58), 0.3);
}

.text-brandprimary {
  color: var(--brand-primary-color, #001f5b);
}

.text-brandprimary-80 {
  color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.8);
}

.text-brandprimary-70 {
  color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.7);
}

.text-brandprimary-60 {
  color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.6);
}

.text-brandprimary-40 {
  color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.4);
}

.bg-brandprimary {
  background-color: var(--brand-primary-color, #001f5b);
}

.bg-brandprimary-80 {
  background-color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.8);
}

.bg-brandprimary-5 {
  background-color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.05);
}

.border-brandprimary {
  border-color: var(--brand-primary-color, #001f5b);
}

.fill-brandprimary {
  fill: var(--brand-primary-color, #001f5b);
}

.focus-ring-brandprimary:focus {
  --tw-ring-color: var(--brand-primary-color, #001f5b);
}

.text-brandsecondary {
  color: var(--brand-secondary-color, #e10054);
}

.bg-brandsecondary {
  background-color: var(--brand-secondary-color, #e10054);
}

.bg-brandnavaccent {
  background-color: var(
    --brand-nav-accent-color,
    var(--brand-secondary-color, #e10054)
  );
}

.border-brandsecondary {
  border-color: var(--brand-secondary-color, #e10054);
}

.from-brandsecondary {
  --tw-gradient-from: var(--brand-secondary-color, #e10054);
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(var(--brand-secondary-color-rgb, 225, 0, 84), 0));
}

.from-neutral-900 {
  --tw-gradient-from: var(--neutral-900, #3a3a3a);
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(var(--neutral-900-rgb, 58, 58, 58), 0));
}

.shadow-brandsecondary {
  box-shadow: 0 10px 15px -3px rgba(var(--brand-secondary-color-rgb, 225, 0, 84), 0.2),
    0 4px 6px -2px rgba(var(--brand-secondary-color-rgb, 225, 0, 84), 0.05);
}

.focus-ring-brandsecondary:focus {
  --tw-ring-color: var(--brand-secondary-color, #e10054);
}

.hover-text-brandprimary:hover {
  color: var(--brand-primary-color, #001f5b);
}

.brand-tint-5 {
  background-color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.05);
}

.brand-tint-3 {
  background-color: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.03);
}

.brand-shadow-soft {
  box-shadow: 0 8px 30px rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.15);
}

.brand-shadow-card {
  box-shadow: 0 8px 30px rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.1);
}

.brand-shadow-strong {
  box-shadow: 0 8px 30px rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.2);
}

.brand-hero-overlay {
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.35),
    rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.65)
  );
}

.brand-gradient-primary-secondary {
  background: linear-gradient(
    145deg,
    var(--brand-primary-color, #001f5b) 0%,
    var(--brand-secondary-color, #e10054) 100%
  );
}

.brand-overlay-gradient-strong {
  background-image: linear-gradient(
    to top,
    rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.8),
    rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.4),
    transparent
  );
}

.cinsa-plate--sa-blue {
  left: -18px;
  right: -22px;
  top: -8px;
  bottom: -8px;
  background: rgba(var(--brand-primary-color-rgb, 0, 31, 91), 0.28);
}

.cinsa-plate--sa-white-bar {
  left: -10px;
  right: -12px;
  top: -6px;
  bottom: -6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.12) 55%,
    rgba(255, 255, 255, 0) 100%
  );
}

@media (max-width: 767px) {
  .cinsa-plate--sa-blue {
    left: -10px;
    right: -12px;
    top: -5px;
    bottom: -5px;
  }

  .cinsa-plate--sa-white-bar {
    left: -8px;
    right: -10px;
    top: -4px;
    bottom: -4px;
  }
}

.u-clip-diag-a {
  clip-path: polygon(0 0, 100% 100%, 100% calc(100% + 1px), 0 calc(100% + 1px));
}

.u-clip-diag-b {
  clip-path: polygon(0 100%, 100% 0, 100% calc(100% + 2px), 0 calc(100% + 2px));
}

.u-clip-diag-c {
  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
}

.u-divider-right-deep {
  background-color: var(--brand-primary-deep, #001f5b);
  clip-path: polygon(0px 100%, 100% 0px, 100% 100%, 0px 100%);
  transform-origin: right center;
  transform: none;
}

.u-divider-left-gray {
  background-color: rgb(218, 223, 225);
  clip-path: polygon(0px 0px, 100% 100%, 100% 100%, 0px 100%);
  transform-origin: left center;
  transform: none;
}

.u-divider-left-secondary {
  background-color: var(--brand-secondary-color, #e10054);
  clip-path: polygon(0px 0px, 100% 100%, 100% 100%, 0px 100%);
  transform-origin: left center;
  transform: none;
}

.u-divider-right-primary {
  background-color: var(--brand-primary-color, #001f5b);
  clip-path: polygon(0px 100%, 100% 0px, 100% 100%, 0px 100%);
  transform-origin: right center;
  transform: none;
}

.u-divider-left-primary {
  background-color: var(--brand-primary-color, #001f5b);
  clip-path: polygon(0px 0px, 100% 100%, 100% 100%, 0px 100%);
  transform-origin: left center;
  transform: none;
}

.u-origin-right-none {
  transform-origin: right center;
  transform: none;
}

.u-origin-left-none {
  transform-origin: left center;
  transform: none;
}

.u-clip-nosotros-a {
  clip-path: polygon(0 90%, 100% 0, 100% 100%, 0 100%);
  inset: -1px;
}

.u-clip-nosotros-b {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 10%);
  inset: -1px;
}