/* ==========================================================================
   DPI NORMALIZATION (MASTER + ALL HEROES)
   Enqueue AFTER tailwind.css
   ========================================================================== */

/* 0) Cancel hard override (Tailwind/custom) that sets html{font-size:12px!important} */
html {
  font-size: 16px !important;
}

:root {
  --ui-scale: 1;
  /* Fixed nav height, respects DPI normalization */
  --cns25-fixed-nav-h: calc(72px * var(--ui-scale));
}

@media (min-width: 768px) {
  :root {
    --cns25-fixed-nav-h: calc(83px * var(--ui-scale));
  }
}

/* 1) Windows DPI scaling (125% / 150%) ONLY */
@media (min-width: 1024px) and (min-resolution: 1.2dppx) and (max-resolution: 1.6dppx) {
  html {
    font-size: 14.5px !important;
  }
  :root {
    --ui-scale: 0.92;
  }
}

/* Safety ultra-wide */
@media (min-width: 2200px) {
  html {
    font-size: 16px !important;
  }
}

/* 2) Headings base (heroes override by IDs) */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.1;
}
h4,
h5,
h6 {
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 2.8vw, 3.5rem);
}
h2 {
  font-size: clamp(1.75rem, 2.3vw, 3rem);
}
h3 {
  font-size: clamp(1.5rem, 1.9vw, 2.5rem);
}
h4 {
  font-size: clamp(1.25rem, 1.4vw, 1.875rem);
}
h5 {
  font-size: clamp(1.125rem, 1.2vw, 1.5rem);
}
h6 {
  font-size: clamp(1rem, 1vw, 1.25rem);
}

/* 3) Tailwind bracket px text utilities -> rem (normalize) */
.text-\[80px\],
.md\:text-\[80px\] {
  font-size: 5rem;
  line-height: 1;
}
.text-\[56px\],
.md\:text-\[56px\] {
  font-size: 3.5rem;
  line-height: 1;
}
.text-\[40px\] {
  font-size: 2.5rem;
  line-height: 1.1;
}
.text-\[22px\] {
  font-size: 1.375rem;
  line-height: 1.4;
}
.text-\[17px\],
.md\:text-\[17px\] {
  font-size: 1.0625rem;
  line-height: 1.5;
}
.text-\[15px\] {
  font-size: 0.9375rem;
  line-height: 1.5;
}
.text-\[11px\],
.md\:text-\[11px\] {
  font-size: 0.6875rem;
  line-height: 1.4;
}
.text-\[10px\] {
  font-size: 0.625rem;
  line-height: 1.4;
}

/* 4) px-based UI normalization (only when --ui-scale != 1) */
@media (min-width: 1024px) {
  .h-\[800px\] {
    height: calc(800px * var(--ui-scale));
  }
  .h-\[600px\] {
    height: calc(600px * var(--ui-scale));
  }
  .h-\[500px\] {
    height: calc(500px * var(--ui-scale));
  }
  .h-\[450px\] {
    height: calc(450px * var(--ui-scale));
  }
  .h-\[400px\] {
    height: calc(400px * var(--ui-scale));
  }
  .h-\[350px\] {
    height: calc(350px * var(--ui-scale));
  }
  .h-\[300px\] {
    height: calc(300px * var(--ui-scale));
  }
  .h-\[83px\] {
    height: calc(83px * var(--ui-scale));
  }
  .h-\[72px\] {
    height: calc(72px * var(--ui-scale));
  }

  .min-h-\[520px\] {
    min-height: calc(520px * var(--ui-scale));
  }
  .min-h-\[400px\] {
    min-height: calc(400px * var(--ui-scale));
  }

  .w-\[800px\] {
    width: calc(800px * var(--ui-scale));
  }
  .w-\[600px\] {
    width: calc(600px * var(--ui-scale));
  }
  .w-\[500px\] {
    width: calc(500px * var(--ui-scale));
  }
  .w-\[400px\] {
    width: calc(400px * var(--ui-scale));
  }
  .w-\[300px\] {
    width: calc(300px * var(--ui-scale));
  }
  .w-\[200px\] {
    width: calc(200px * var(--ui-scale));
  }
  .w-\[72px\] {
    width: calc(72px * var(--ui-scale));
  }

  .size-\[72px\] {
    width: calc(72px * var(--ui-scale));
    height: calc(72px * var(--ui-scale));
  }

  .blur-\[120px\] {
    --tw-blur: blur(calc(120px * var(--ui-scale)));
  }
  .blur-\[100px\] {
    --tw-blur: blur(calc(100px * var(--ui-scale)));
  }
  .blur-\[80px\] {
    --tw-blur: blur(calc(80px * var(--ui-scale)));
  }

  .max-w-\[1600px\] {
    max-width: calc(1600px * var(--ui-scale));
  }
  .max-w-\[1240px\] {
    max-width: calc(1240px * var(--ui-scale));
  }
  .max-w-\[1200px\] {
    max-width: calc(1200px * var(--ui-scale));
  }
  .max-w-\[1000px\] {
    max-width: calc(1000px * var(--ui-scale));
  }
}

@media (min-width: 768px) {
  .md\:h-\[700px\] {
    height: calc(700px * var(--ui-scale));
  }
  .md\:h-\[550px\] {
    height: calc(550px * var(--ui-scale));
  }
  .md\:h-\[500px\] {
    height: calc(500px * var(--ui-scale));
  }
  .md\:h-\[450px\] {
    height: calc(450px * var(--ui-scale));
  }
  .md\:w-\[500px\] {
    width: calc(500px * var(--ui-scale));
  }
  .md\:w-\[400px\] {
    width: calc(400px * var(--ui-scale));
  }
}

/* 5) Images (SOFT) — DO NOT break product cards hover transforms */
img.object-cover {
  object-position: center 35%;
}

.bg-\[\#F3F6F7\] img.object-cover,
.bg-\[\#F4F7F9\] img.object-cover {
  object-fit: contain !important;
  object-position: center !important;
  background-color: #f3f6f7;
}

/* ==========================================================================
   HERO SYSTEM — fixed nav offsets
   ========================================================================== */

/* Only apply where the hero actually uses py-20 */
:is(
  .cinsa-catalogo-hero,
  .cinsa-donde-hero,
  .cinsa-contacto-hero,
  .blog-hero,
  .nosotros-hero,
  .cinsa-home-hero
).py-20 {
  padding-top: calc(clamp(2rem, 3.5vh, 3.25rem) + var(--cns25-fixed-nav-h)) !important;
  padding-bottom: clamp(1rem, 2.5vh, 2rem) !important;
}

/* Shared fullscreen behavior for interior heroes (Catalogo/Donde/Contacto/Nosotros) */
.cinsa-catalogo-hero,
.cinsa-donde-hero,
.cinsa-contacto-hero,
.blog-hero,
.nosotros-hero {
  min-height: calc(100svh - var(--cns25-fixed-nav-h));
  display: flex;
}

/* Top-aligned interior heroes */
.cinsa-catalogo-hero,
.blog-hero {
  align-items: flex-start;
}

.cinsa-catalogo-hero .container.h-full,
.blog-hero .container.h-full {
  justify-content: flex-start;
}

/* Mid-balanced interior heroes with shorter copy */
.cinsa-donde-hero,
.cinsa-contacto-hero,
.nosotros-hero {
  align-items: flex-start;
}

.cinsa-donde-hero .container.h-full,
.cinsa-contacto-hero .container.h-full,
.nosotros-hero .container.h-full {
  justify-content: center;
}

@media (max-width: 1023px) {
  .cinsa-catalogo-hero,
  .cinsa-donde-hero,
  .cinsa-contacto-hero,
  .blog-hero,
  .nosotros-hero {
    min-height: clamp(
      500px,
      calc(66svh - var(--cns25-fixed-nav-h)),
      calc(100svh - var(--cns25-fixed-nav-h))
    );
  }

  .cinsa-catalogo-hero .container.h-full,
  .cinsa-donde-hero .container.h-full,
  .cinsa-contacto-hero .container.h-full,
  .blog-hero .container.h-full,
  .nosotros-hero .container.h-full {
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .cinsa-catalogo-hero,
  .cinsa-donde-hero,
  .cinsa-contacto-hero,
  .nosotros-hero {
    min-height: calc(75svh - var(--cns25-fixed-nav-h));
  }
}

/* Label row under fixed nav */
.cns25-hero-label-row {
  margin-top: var(--cns25-fixed-nav-h) !important;
}

/* Safety */
html,
body {
  overflow-x: clip;
}

/* ==========================================================================
   A) MASTER HOME HERO
   ========================================================================== */
#cns25-master-hero__section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cns25-master-hero__section .cns25-master-hero__bg-overlay {
  background-image: linear-gradient(
    135deg,
    rgba(var(--brand-primary-color-rgb), 0.9) 0%,
    rgba(var(--brand-primary-color-rgb), 0.7) 50%,
    rgba(var(--brand-secondary-color-rgb), 0.6) 100%
  );
}

#cns25-master-hero__section .cns25-master-hero__container,
#cns25-master-hero__section > div[style*="margin-top: 170px"] {
  margin-top: 0 !important;
  padding-top: clamp(5rem, 10vh, 9rem) !important;
  padding-bottom: clamp(3rem, 8vh, 6rem) !important;
}

:is(
    #cns25-master-hero__section,
    #cns25-landing-mx-hero__section,
    #cns25-landing-usa-hero__section
  )
  .cns25-hero-logo-slot {
  width: clamp(180px, 24vw, 300px);
  aspect-ratio: 3 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

:is(
    #cns25-master-hero__section,
    #cns25-landing-mx-hero__section,
    #cns25-landing-usa-hero__section
  )
  .cns25-hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#cns25-master-hero__section #hero-titulo-1 {
  font-size: clamp(3.9rem, 9.75vw, 15.6rem) !important;
  line-height: 0.85 !important;
}

#cns25-master-hero__section #hero-titulo-2 {
  color: var(--brand-secondary-color);
  text-shadow: 0 10px 40px rgba(var(--brand-secondary-color-rgb), 0.6);
  font-size: clamp(2.6rem, 6.5vw, 10.4rem) !important;
  line-height: 0.9 !important;
}

#cns25-master-hero__section #hero-texto {
  margin-bottom: clamp(2.5rem, 6vh, 4rem) !important;
}

#cns25-master-hero__section .animate-bounce,
#cns25-master-hero__section .animate-bounce[style*="margin-top: 120px"] {
  margin-top: clamp(2.5rem, 6vh, 4.5rem) !important;
  margin-bottom: clamp(1rem, 3vh, 2.5rem) !important;
}

.cns25-master-hero__btn:hover {
  background-color: var(--brand-secondary-color);
}

.cns25-master-hero__btn-overlay {
  background: linear-gradient(
    to right,
    var(--brand-secondary-color),
    rgba(var(--brand-secondary-color-rgb), 0.8)
  );
}

.cns25-master-hero__modal-content {
  background-image: linear-gradient(
    135deg,
    rgba(var(--brand-primary-color-rgb), 1) 0%,
    rgba(var(--brand-primary-color-rgb), 0.95) 50%,
    rgba(var(--brand-secondary-color-rgb), 1) 100%
  );
}

.cns25-master-hero__region-card:hover {
  border-color: var(--brand-secondary-color);
}

.cns25-master-hero__region-card-overlay {
  background: linear-gradient(
    to bottom right,
    rgba(var(--brand-secondary-color-rgb), 0),
    rgba(var(--brand-secondary-color-rgb), 0.2)
  );
}

.cns25-master-manifiesto {
  background-color: rgba(var(--brand-primary-deep-rgb, 0, 31, 91), 0.95);
}

.cns25-master-manifiesto__pattern {
  background: radial-gradient(51.77% 192.67% at 50% 50%, #fff 0.05%, rgba(0, 0, 0, 0) 0%);
}

#back-to-top.cns25-back-to-top {
  background-color: var(--brand-primary-deep, #001f5b);
}

#back-to-top.cns25-back-to-top:hover {
  background-color: var(--brand-secondary-color, #e10054);
}

#back-to-top.cns25-back-to-top .cns25-back-to-top__pulse {
  border-color: var(--brand-secondary-color, #e10054);
}

.cns25-marquee-container {
  overflow: hidden;
  background-color: var(--brand-primary-deep);
  padding: 1.5rem 0;
  position: relative;
  width: 100%;
}

:root {
  --cns25-top-marquee-duration: 32s;
  --cns25-clientes-marquee-duration: 105s;
}

@media (max-width: 1024px) {
  :root {
    --cns25-top-marquee-duration: 26s;
    --cns25-clientes-marquee-duration: 85s;
  }
}

.cns25-marquee-wrapper {
  display: flex;
  width: fit-content;
  animation: cns25-marquee-scroll var(--cns25-top-marquee-duration) linear infinite;
}

.cns25-marquee-content {
  display: flex;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 100vw;
}

.cns25-marquee-item {
  display: inline-flex;
  align-items: center;
  margin: 0 3rem;
}

.cns25-marquee-text {
  color: white;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.9;
}

.cns25-marquee-separator {
  color: var(--brand-secondary-color);
  margin: 0 2rem;
  font-size: 1.5rem;
}

@keyframes cns25-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.cns25-marquee-container:hover .cns25-marquee-wrapper {
  animation-play-state: paused;
}

.awards-marquee-container {
  position: relative;
  width: 100%;
  background-color: var(--brand-primary-deep);
  padding: 2rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gradient-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8rem;
  background: linear-gradient(to right, var(--brand-primary-deep), transparent);
  z-index: 10;
}

.gradient-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8rem;
  background: linear-gradient(to left, var(--brand-primary-deep), transparent);
  z-index: 10;
}

.awards-marquee-wrapper {
  display: flex;
  width: fit-content;
  animation: awards-scroll 50s linear infinite;
}

.awards-marquee-content {
  display: flex;
  gap: 4rem;
  padding-right: 4rem;
  flex-shrink: 0;
}

.award-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.award-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--brand-secondary-color);
  flex-shrink: 0;
}

.award-text {
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.875rem;
}

.award-separator {
  width: 0.375rem;
  height: 0.375rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-left: 1rem;
}

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

.awards-marquee-container:hover .awards-marquee-wrapper {
  animation-play-state: paused;
}

#cns25-landing-mx-hero__section,
#cns25-landing-usa-hero__section {
  background-size: cover;
  background-position: center;
  position: relative;
}

.landing-hero-overlay {
  background-image: linear-gradient(
    135deg,
    rgba(0, 153, 185, 0.8) 0%,
    rgba(233, 0, 76, 0.7) 100%
  );
}

#cns25-landing-mx-hero__section .hero-regresar-link,
#cns25-landing-usa-hero__section .hero-regresar-link {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 39px;
  color: #fff;
}

#cns25-landing-mx-hero__section .hero-desde-text,
#cns25-landing-usa-hero__section .hero-desde-text {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: #dadfe1b2;
}

.landing-mx-hero-title-1,
.landing-usa-hero-title-1 {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 7vw, 85px);
  line-height: 1.326;
  color: #fff;
  text-align: center;
}

.landing-mx-hero-title-2 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(3.5rem, 7.7vw, 100px);
  line-height: 0.9;
  color: #e7004c;
  text-align: center;
  text-shadow: 1px 1px 2px white;
}

.landing-usa-hero-title-2 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.5rem, 7.7vw, 90px);
  line-height: 0.9;
  color: #e7004c;
  text-align: center;
  text-shadow: 1px 1px 2px white;
}

#cns25-landing-mx-hero__section .hero-description-text,
#cns25-landing-usa-hero__section .hero-description-text {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 39px;
  color: #dadfe1;
  text-align: center;
}

#cns25-landing-mx-hero__section .btn-comenzar-text,
#cns25-landing-usa-hero__section .btn-comenzar-text {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: #fff;
}

#cns25-landing-mx-hero__section .hero-scroll-text,
#cns25-landing-usa-hero__section .hero-scroll-text {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: #ffffff80;
}

#cns25-landing-mx-hero__section .btn-comenzar-line,
#cns25-landing-usa-hero__section .btn-comenzar-line {
  width: 32px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.6);
  transition: width 0.3s ease;
}

#cns25-landing-mx-hero__section .btn-comenzar:hover .btn-comenzar-line,
#cns25-landing-usa-hero__section .btn-comenzar:hover .btn-comenzar-line {
  width: 48px;
}

#cns25-landing-mx-hero__section .hero-regresar,
#cns25-landing-usa-hero__section .hero-regresar {
  top: 40px;
  left: 40px;
}

@media (max-width: 768px) {
  #cns25-landing-mx-hero__section .hero-regresar,
  #cns25-landing-usa-hero__section .hero-regresar {
    top: 20px;
    left: 20px;
  }
}

#landing-mx-section,
#landing-usa-section {
  background-color: #f8f9fa;
}

#landing-mx-section .section-subtitle,
#landing-usa-section .section-subtitle {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 5px;
  color: var(--brand-primary-color);
  text-transform: uppercase;
}

#landing-mx-section .section-title,
#landing-usa-section .section-title {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 64px);
  line-height: 1.1;
  color: var(--brand-primary-color);
}

#landing-mx-section .brand-box-container,
#landing-usa-section .brand-box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

#landing-mx-section .brand-box,
#landing-usa-section .brand-box {
  aspect-ratio: 1 / 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 5rem 3.5rem;
  text-align: left;
  position: relative;
}

#landing-mx-section .brand-description,
#landing-usa-section .brand-description {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  width: 100%;
  margin-top: auto;
}

#landing-mx-section .brand-logo-container,
#landing-usa-section .brand-logo-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-top: auto;
  width: 100%;
}

#landing-mx-section .cns25-landing-brand-logo,
#landing-usa-section .cns25-landing-brand-logo {
  width: clamp(170px, 18vw, 240px);
  height: clamp(64px, 7vw, 92px);
  object-fit: contain;
  object-position: center;
}

#landing-mx-section .cns25-landing-brand-logo--compact,
#landing-usa-section .cns25-landing-brand-logo--compact {
  width: clamp(140px, 15vw, 200px);
  height: clamp(84px, 9vw, 116px);
}

#landing-mx-section .cns25-landing-brand-logo--wide,
#landing-usa-section .cns25-landing-brand-logo--wide {
  width: clamp(175px, 18vw, 250px);
  height: clamp(66px, 7vw, 96px);
}

#landing-mx-section .brand-logo-subtitle,
#landing-usa-section .brand-logo-subtitle {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #fff;
  margin-top: 1.5rem;
}

#landing-mx-section .brand-link,
#landing-usa-section .brand-link {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 4px;
  color: #fff;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

#landing-mx-section .brand-link .line,
#landing-usa-section .brand-link .line {
  width: 40px;
  height: 1px;
  background-color: #fff;
  transition: width 0.3s ease;
  position: relative;
  z-index: 11;
}

#landing-mx-section .brand-link::after,
#landing-usa-section .brand-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

#landing-mx-section .brand-link:hover .line,
#landing-usa-section .brand-link:hover .line {
  width: 60px;
}

#landing-mx-section .support-section,
#landing-usa-section .support-section {
  padding: 2rem 2rem 4rem;
  background-color: #f8f9fa;
  text-align: center;
}

#landing-mx-section .support-subtitle,
#landing-usa-section .support-subtitle {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 4px;
  color: #9ea6a9;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: block;
}

#landing-mx-section .support-title,
#landing-usa-section .support-title {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(3rem, 6vw, 64px);
  color: var(--brand-secondary-color);
  margin-bottom: 3rem;
}

#landing-mx-section .support-card,
#landing-usa-section .support-card {
  background: #f2f4f5;
  border-radius: 12px;
  padding: 2rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px;
  width: 100%;
}

#landing-mx-section .support-icon-circle,
#landing-usa-section .support-icon-circle {
  width: 40px;
  height: 40px;
  background-color: var(--brand-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: white;
}

#landing-mx-section .support-label,
#landing-usa-section .support-label {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--brand-primary-color);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

#landing-mx-section .support-value,
#landing-usa-section .support-value {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--brand-primary-color);
  text-decoration: none;
}

.landing-brand-box--primary {
  background: radial-gradient(
    230.51% 62.44% at 48.12% 42.56%,
    #001f5b 0%,
    #000d2f 100%
  );
}

#landing-mx-section .landing-brand-box--secondary {
  background: radial-gradient(
    210.55% 50% at 50% 50%,
    #0033a0 0%,
    #00123a 100%
  );
}

#landing-usa-section .landing-brand-box--secondary {
  background: radial-gradient(
    469.53% 78.44% at 50% 50%,
    var(--brand-primary-color) 0%,
    var(--brand-primary-color) 10%,
    var(--brand-primary-deep) 100%
  );
}

#landing-usa-section .landing-brand-box--granite {
  background: radial-gradient(
    170% 95% at 50% 15%,
    rgba(248, 154, 28, 0.95) 0%,
    rgba(248, 154, 28, 0.78) 30%,
    rgba(18, 17, 12, 0.96) 100%
  );
}

@media (max-width: 768px) {
  #landing-mx-section .brand-box-container,
  #landing-usa-section .brand-box-container {
    grid-template-columns: 1fr;
    margin: 0 1.5rem;
  }

  #landing-mx-section .brand-box,
  #landing-usa-section .brand-box {
    aspect-ratio: auto;
    padding: 4rem 2rem;
    min-height: 450px;
  }

  #landing-mx-section .support-section,
  #landing-usa-section .support-section {
    padding: 4rem 1.5rem;
  }
}

.marcas-ribbon-base {
  writing-mode: vertical-rl;
  color: rgb(0, 31, 91);
}

.marcas-ribbon-cinsa,
.marcas-ribbon-usa {
  background-color: var(--brand-secondary-color);
}

.marcas-ribbon-santa {
  background-color: #fff;
}

.marcas-ribbon-gw {
  background-color: #f89a1c;
}

.cinsa-hero-fixed-bg {
  background-attachment: fixed;
}

@media (max-width: 1024px) {
  .cinsa-hero-fixed-bg {
    background-attachment: scroll;
  }
}

.cinsa-contacto-faqs details > summary {
  list-style: none;
}

.cinsa-contacto-faqs details > summary::-webkit-details-marker {
  display: none;
}

.cinsa-contacto-faqs details .faq-panel {
  overflow: hidden;
}

.cinsa-contacto-faqs details[open] .faq-caret {
  transform: rotate(180deg);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.valid .wpcf7-response-output {
  color: #198754;
  background-color: #d4edda;
  border-color: #c3e6cb;
  margin: 0;
}

#providers-grid > div {
  animation: providersFadeIn 0.5s ease-out forwards;
}

@keyframes providersFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#search-provider::placeholder {
  font-weight: 500;
}

.nosotros-hero {
  position: relative;
}

.nosotros-hero__bg {
  filter: grayscale(100%);
  z-index: 0;
}

.nosotros-hero-overlay {
  background: linear-gradient(
    to right,
    rgba(var(--brand-primary-color-rgb), 0.8),
    rgba(var(--brand-secondary-color-rgb), 0.25)
  );
}

.nosotros-historia {
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.nosotros-historia .bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.nosotros-historia .bg-blob-1 {
  top: 10%;
  left: -5%;
  background-color: var(--brand-primary-color);
  width: 400px;
  height: 400px;
  opacity: 0.08;
}

.nosotros-historia .bg-blob-2 {
  bottom: 20%;
  right: -5%;
  background-color: var(--brand-primary-color);
  width: 500px;
  height: 500px;
  opacity: 0.08;
}

.nosotros-historia .bg-blob-3 {
  top: 40%;
  right: 10%;
  background-color: #fce7f3;
  width: 300px;
  height: 300px;
  opacity: 0.1;
}

.nosotros-historia .quote-mark {
  font-family: "Playfair Display", serif;
  font-size: 140px;
  line-height: 1;
  color: #c6d6e2;
  opacity: 0.7;
  position: absolute;
  user-select: none;
}

.nosotros-historia .quote-left {
  top: -60px;
  left: -40px;
}

.nosotros-historia .quote-right {
  bottom: -80px;
  right: -40px;
}

.nosotros-historia .history-text {
  color: #4b5563;
  line-height: 1.8;
  font-size: 1.15rem;
  font-weight: 300;
}

.history-swiper {
  width: 100%;
  max-width: 970px;
  margin: 80px auto;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.history-swiper .swiper-slide img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.history-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--brand-primary-color);
  opacity: 0.4;
  transition: all 0.3s ease;
}

.history-swiper .swiper-pagination-bullet-active {
  width: 35px;
  border-radius: 5px;
  opacity: 1;
  background: var(--brand-primary-color);
}

.slogan-section {
  max-width: 1200px;
  margin: 100px auto 0;
  text-align: center;
}

.slogan-text {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  line-height: 1.1;
  font-style: italic;
  font-weight: 500;
  color: #1a1a1a;
}

.slogan-highlight {
  color: var(--brand-secondary-color);
  display: block;
  margin-top: 10px;
}

/* Historia (Nosotros): same accent color as .slogan-highlight, without inheriting its layout rules */
.nosotros-historia #conocenos-historia-texto-titulo {
  color: var(--brand-secondary-color);
}

@media (max-width: 1024px) {
  .slogan-text {
    font-size: 3rem;
  }

  .history-swiper .swiper-slide img {
    height: 450px;
  }
}

@media (max-width: 768px) {
  .slogan-text {
    font-size: 2.2rem;
  }

  .history-swiper .swiper-slide img {
    height: 350px;
  }

  .nosotros-historia .quote-mark {
    font-size: 100px;
  }

  .nosotros-historia .quote-left {
    top: -40px;
    left: -10px;
  }

  .nosotros-historia .quote-right {
    bottom: -50px;
    right: -10px;
  }

  .nosotros-historia .history-text {
    font-size: 1rem;
    padding: 0 20px;
  }
}

.history-timeline-section {
  background: linear-gradient(
    180deg,
    rgba(var(--brand-primary-color-rgb), 1) 0%,
    rgba(var(--brand-primary-color-rgb), 0.8) 50%,
    rgba(var(--brand-primary-color-rgb), 0.5) 100%
  );
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.history-timeline-swiper {
  overflow: visible !important;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.history-timeline-swiper .swiper-slide {
  width: 90%;
  max-width: 1000px;
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
  opacity: 0.4;
  transform: scale(0.9);
  filter: blur(2px) grayscale(0.5);
}

.history-timeline-swiper .swiper-slide-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: blur(0) grayscale(0) !important;
}

.history-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: row;
  min-height: unset;
}

.image-container {
  aspect-ratio: 4 / 3;
}

@media (max-width: 768px) {
  .history-timeline-swiper .swiper-slide {
    width: 85%;
  }

  .history-card {
    flex-direction: column;
    border-radius: 2rem;
  }

  .history-card .image-container {
    height: 250px;
  }

  .image-container {
    aspect-ratio: 16 / 9;
  }
}

.history-timeline-swiper .swiper-pagination {
  position: relative !important;
  bottom: 0 !important;
  margin-top: 3rem;
}

.history-timeline-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #fff;
  opacity: 0.5;
  transition: all 0.3s ease;
  margin: 0 6px !important;
}

.history-timeline-swiper .swiper-pagination-bullet-active {
  width: 35px;
  border-radius: 20px;
  opacity: 1;
}

.history-title {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-size: 96px;
}

@media (max-width: 768px) {
  .history-title {
    font-size: 48px;
  }
}

/* ==========================================================================
   B) CINSA HOME HERO
   ========================================================================== */
.cinsa-home-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(1rem, 4vh, 4rem);
}

.cinsa-home-hero > .h-36 {
  height: clamp(4rem, 10vh, 8rem) !important;
}

.cinsa-home-hero div[style*="height: 200px"] {
  height: clamp(0px, 4vh, 4rem) !important;
}

#cinsa-home-hero-descripcion {
  margin-bottom: clamp(1.5rem, 3vh, 3rem) !important;
}
#cinsa-home-hero-boton {
  margin-top: 0 !important;
}

/* CINSA HOME TITLES – MAX @2560 */
#cinsa-home-hero-titulo-1 {
  font-size: clamp(4.5rem, 6.875vw, 11rem) !important;
  line-height: 0.95 !important;
}
#cinsa-home-hero-titulo-2 {
  font-size: clamp(3.5rem, 5.3125vw, 8.5rem) !important;
  line-height: 0.95 !important;
}
#cinsa-home-hero-titulo-3 {
  font-size: clamp(4rem, 6.875vw, 11rem) !important;
  line-height: 0.95 !important;
}
#cinsa-home-hero-titulo-4 {
  font-size: clamp(3.8rem, 5.625vw, 9rem) !important;
  line-height: 0.95 !important;
}

/* ==========================================================================
   B.1) UNIFIED DESKTOP HERO TYPOGRAPHY
   - Applies from 1280px and keeps proportion across desktop sizes (incl. Mac)
   - Uses shared scale variables to avoid per-page hardcoded drifts
   ========================================================================== */
:root {
  --hero-desktop-title-scale: 1;
  --hero-desktop-copy-scale: 1;
}

@media (min-width: 1280px) {
  :root {
    --hero-desktop-title-scale: 1.04;
    --hero-desktop-copy-scale: 1.03;
  }
}

@media (min-width: 1536px) {
  :root {
    --hero-desktop-title-scale: 1.1;
    --hero-desktop-copy-scale: 1.08;
  }
}

@media (min-width: 1920px) {
  :root {
    --hero-desktop-title-scale: 1.16;
    --hero-desktop-copy-scale: 1.12;
  }
}

@media (min-width: 1280px) {
  /* Title line 1 */
  #catalogo-hero-titulo-1,
  #donde-comprar-hero-titulo-1,
  #contacto-hero-titulo-1,
  #conocenos-hero-titulo-1,
  #cinsa-usa-hero-titulo-1,
  #cinsa-usa-ing-hero-titulo-1,
  #graniteware-es-hero-titulo-1,
  #graniteware-usa-hero-titulo-1,
  #santa-anita-home-hero-titulo-1 {
    font-size: calc(clamp(3.25rem, 5.55vw, 6.85rem) * var(--hero-desktop-title-scale)) !important;
    line-height: 0.88 !important;
  }

  /* Title line 2 */
  #catalogo-hero-titulo-2,
  #donde-comprar-hero-titulo-2,
  #contacto-hero-titulo-2,
  #conocenos-hero-titulo-2,
  #cinsa-usa-hero-titulo-2,
  #cinsa-usa-ing-hero-titulo-2,
  #graniteware-es-hero-titulo-2,
  #graniteware-usa-hero-titulo-2,
  #santa-anita-home-hero-titulo-2 {
    font-size: calc(clamp(2.9rem, 5.1vw, 6.45rem) * var(--hero-desktop-title-scale)) !important;
    line-height: 0.88 !important;
  }

  /* Title line 3 */
  #cinsa-usa-hero-titulo-3,
  #cinsa-usa-ing-hero-titulo-3,
  #graniteware-es-hero-titulo-3,
  #graniteware-usa-hero-titulo-3,
  #santa-anita-home-hero-titulo-3 {
    font-size: calc(clamp(3.25rem, 5.7vw, 7rem) * var(--hero-desktop-title-scale)) !important;
    line-height: 0.86 !important;
  }

  /* Title line 4 */
  #cinsa-usa-hero-titulo-4,
  #cinsa-usa-ing-hero-titulo-4,
  #graniteware-es-hero-titulo-4,
  #graniteware-usa-hero-titulo-4,
  #santa-anita-home-hero-titulo-4 {
    font-size: calc(clamp(3rem, 5.2vw, 6.6rem) * var(--hero-desktop-title-scale)) !important;
    line-height: 0.88 !important;
  }

  /* Heroes built with generic classes (blog/promociones) */
  #blog-hero .hero-title-1,
  #promociones-hero .hero-title-1 {
    font-size: calc(clamp(3.1rem, 5.4vw, 6.7rem) * var(--hero-desktop-title-scale)) !important;
    line-height: 0.86 !important;
  }

  #blog-hero .hero-title-2,
  #promociones-hero .hero-title-2 {
    font-size: calc(clamp(3rem, 5.2vw, 6.4rem) * var(--hero-desktop-title-scale)) !important;
    line-height: 0.86 !important;
  }

  /* Hero descriptions */
  #catalogo-hero-desc,
  #donde-comprar-hero-descripcion,
  #contacto-hero-descripcion,
  #conocenos-hero-descripcion,
  #cinsa-usa-hero-descripcion,
  #cinsa-usa-ing-hero-descripcion,
  #santa-anita-home-hero-descripcion,
  #blog-hero .hero-description,
  #promociones-hero .hero-description {
    font-size: calc(clamp(1rem, 1.2vw, 1.3rem) * var(--hero-desktop-copy-scale)) !important;
    line-height: 1.4 !important;
  }

  /* Compact rhythm when wraps happen */
  .cinsa-contacto-hero .space-y-2,
  .cinsa-catalogo-hero .space-y-4,
  .cinsa-donde-hero .space-y-4,
  .nosotros-hero .space-y-4 {
    margin-bottom: clamp(1.4rem, 2.4vh, 2.3rem) !important;
  }

  #contacto-hero-titulo-2 {
    margin-top: -0.04em !important;
  }
}

/* In heroes only: neutralize transforms on images if you must */
.cinsa-home-hero img.transition-transform,
#cns25-master-hero__section img.transition-transform {
  transform: none !important;
}

/* ==========================================================================
   CINSA HERO — OVERLAY + PLACAS (base fallback)
   ========================================================================== */
/* Base fallback overlay (CINSA default) */
.cinsa-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 31, 91, 0.55);
  z-index: 1;
}

.cinsa-plate-wrap,
.cinsa-white-wrap {
  position: relative;
}

.cinsa-plate {
  position: absolute;
  inset: 0;
  border-radius: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.cinsa-plate--blue {
  background: rgba(0, 31, 91, 0.35);
  left: -18px;
  right: -22px;
  top: -8px;
  bottom: -8px;
}

.cinsa-plate--red {
  background: linear-gradient(
    90deg,
    rgba(233, 0, 76, 0.28) 0%,
    rgba(233, 0, 76, 0.18) 45%,
    rgba(233, 0, 76, 0.06) 78%,
    rgba(233, 0, 76, 0) 100%
  );
  left: -10px;
  right: -12px;
  top: -6px;
  bottom: -6px;
}

.cinsa-plate--white {
  top: 50%;
  bottom: auto;
  left: 60%;
  right: -56px;
  transform: translateY(-50%);
  height: 84px;
  width: auto;
  background: linear-gradient(
    90deg,
    rgba(218, 223, 225, 0.18) 0%,
    rgba(218, 223, 225, 0.12) 55%,
    rgba(218, 223, 225, 0) 100%
  );
}

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

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

  .cinsa-plate--white {
    left: 58%;
    right: -24px;
    height: 50px;
  }
}

/* ==========================================================================
   HERO SHADOW (elimina inline styles)
   ========================================================================== */
.cinsa-hero-shadow {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   FOOTER SYSTEM (all brands) — stable (no Tailwind brackets)
   ========================================================================== */
.cinsa-footer-top-grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 768px) {
  .cinsa-footer-top-grid {
    grid-template-columns: 384px 1fr;
    align-items: start;
  }
  .cinsa-footer-top-grid.is-320 {
    grid-template-columns: 320px 1fr;
  }
}

.cinsa-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
@media (min-width: 768px) {
  .cinsa-footer-brand {
    align-items: center;
    text-align: center;
  }
}

.cinsa-footer-socials {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 768px) {
  .cinsa-footer-socials {
    width: auto;
    justify-content: center;
  }
}

.cinsa-footer-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
  justify-content: start;
  align-items: start;
  column-gap: 40px;
  row-gap: 28px;
}
@media (max-width: 639px) {
  .cinsa-footer-menu-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 24px;
  }
}

.cinsa-footer-menu-col {
  min-width: 110px;
}

@media (max-width: 768px) {
  #blog-posts .u-font-source,
  #blog-filtros .u-font-source,
  #blog-hero .hero-label-top,
  #promociones-hero .hero-label-top,
  #contacto-form .tracking-\[0\.4em\],
  #buscador-proveedores .tracking-\[0\.2em\],
  #buscador-proveedores .tracking-\[0\.4em\],
  #conocenos-tecnologia-titulo + div {
    letter-spacing: 0.28em !important;
  }

  #buscador-proveedores h2 {
    font-size: clamp(2.25rem, 8vw, 3rem);
    line-height: 1.1;
  }

  #buscador-proveedores .flex.flex-wrap.items-center.gap-6 {
    gap: 0.75rem;
  }

  #buscador-proveedores .flex.flex-wrap.items-center.gap-6 > button {
    width: 100%;
    justify-content: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ==========================================================================
   MARQUEE (clientes) — stable
   ========================================================================== */
.cinsa-home-clientes-marquee {
  display: flex;
  width: max-content;
  animation: cinsaClientesMarquee var(--cns25-clientes-marquee-duration) linear infinite;
  will-change: transform;
}

@keyframes cinsaClientesMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.cinsa-home-clientes-marquee:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .cinsa-home-clientes-marquee {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   BLOG (shared styles moved from template inline CSS)
   ========================================================================== */
.blog-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-attachment: fixed;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.blog-hero-overlay {
  background: linear-gradient(
    to right,
    rgba(var(--brand-primary-color-rgb, 0, 113, 156), 0.8),
    rgba(var(--brand-secondary-color-rgb, 225, 0, 84), 0.25)
  );
}

#blog-hero .hero-title-wrap {
  margin-bottom: clamp(1.5rem, 2.5vh, 2.25rem);
}

#blog-hero .hero-title-2 {
  margin-top: clamp(0.5rem, 1vh, 0.875rem);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#blog-hero .hero-copy-wrap {
  margin-bottom: clamp(1.25rem, 2vh, 2rem);
}

@media (max-width: 768px) {
  .blog-hero {
    padding-top: 120px;
    padding-bottom: 60px;
    min-height: auto;
    text-align: center;
  }

  .blog-hero::before {
    background-attachment: scroll;
    background-position: center;
  }

  .blog-hero .flex.items-center.gap-6 {
    justify-content: center;
  }

  .blog-hero .max-w-xl {
    margin-left: auto;
    margin-right: auto;
  }

  #blog-hero .hero-label-top {
    letter-spacing: 0.28em;
  }
}

.blog-featured-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 1rem;
}

.blog-featured-grid-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .blog-featured-grid,
  .blog-featured-grid-2 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 16px;
    height: 600px;
  }

  .grid-area-main {
    grid-column: span 3 / span 3;
    grid-row: span 4 / span 4;
  }

  .grid-area-top-mid {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 4;
  }

  .grid-area-top-right {
    grid-row: span 2 / span 2;
    grid-column-start: 7;
  }

  .grid-area-bot-mid {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 3;
  }

  .grid-area-bot-right {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 6;
    grid-row-start: 3;
  }

  .grid-area-2-top-left {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
  }

  .grid-area-2-top-mid {
    grid-column: span 1;
    grid-row: span 2 / span 2;
    grid-column-start: 4;
  }

  .grid-area-2-main-right {
    grid-column: span 3 / span 3;
    grid-row: span 4 / span 4;
    grid-column-start: 5;
  }

  .grid-area-2-bot-left {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-row-start: 3;
    grid-column-start: 1;
  }

  .grid-area-2-bot-mid {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
  }

  .featured-card {
    height: 100%;
  }
}

.featured-card {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  height: 300px;
  width: 100%;
}

.featured-card__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.featured-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.featured-card__image-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.featured-card:hover .featured-card__image-media {
  transform: scale(1.05);
}

.featured-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(240, 240, 240, 0.85);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.featured-card__date {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: #8da8b9;
}

.featured-card__title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: var(--brand-primary-color);
}

.featured-card__badge {
  display: inline-block;
  background-color: #efdde2;
  color: #d15b7f;
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

.featured-card__excerpt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #4a4a4a;
}

@media (max-width: 768px) {
  .featured-card__title {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
    overflow-wrap: anywhere;
  }

  .featured-card__badge {
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }

  .blog-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 700;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--brand-primary-color);
  margin: 0 2px;
}

.blog-pagination .page-numbers.current {
  background: var(--brand-secondary-color);
  color: #fff;
  box-shadow: 0 8px 20px -4px rgba(var(--brand-secondary-color-rgb), 0.4);
}

.blog-pagination .page-numbers:hover:not(.current):not(.dots) {
  background: #f0f7fa;
  transform: translateY(-2px);
}

.blog-pagination .prev,
.blog-pagination .next {
  border: 1px solid #e8f3f7;
  background: #f8fbfc;
  color: #cbd5e1;
}

.blog-pagination .next {
  background: #fff;
  color: var(--brand-primary-color);
  box-shadow: 0 4px 10px rgba(var(--brand-primary-color-rgb), 0.05);
}

.blog-pagination .dots {
  border: none;
  background: transparent;
  color: #cbd5e1;
  width: 1.5rem;
}

/* ==========================================================================
   PROMOCIONES (shared styles moved from template inline CSS)
   ========================================================================== */
.promos-source {
  font-family: "Source Sans Pro", sans-serif;
}

.promociones-hero {
  position: relative;
  min-height: 750px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.promociones-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

.promociones-hero-overlay {
  background: linear-gradient(
    1deg,
    rgba(5, 5, 5, 0) 50%,
    var(--brand-secondary-color) 97.19%
  );
}

#promociones-hero .hero-label-top {
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

#promociones-hero .hero-label-bottom {
  font-size: clamp(0.625rem, 1.5vw, 0.75rem);
}

#promociones-hero .hero-description {
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
}

@media (max-width: 768px) {
  .promociones-hero {
    padding-top: 120px;
    padding-bottom: 60px;
    min-height: auto;
    text-align: center;
  }

  .promociones-hero::before {
    background-attachment: scroll;
    background-position: center;
  }

  .promociones-hero .flex.items-center.gap-6 {
    justify-content: center;
  }

  .promociones-hero .max-w-xl {
    margin-left: auto;
    margin-right: auto;
  }
}

#ofertas-mes .ofertas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

#ofertas-mes .oferta-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 1/1.1;
  transition: transform 0.3s ease;
}

#ofertas-mes .oferta-card.horizontal {
  aspect-ratio: 16/7;
}

#ofertas-mes .oferta-card--vertical {
  aspect-ratio: 0.7;
  min-height: 400px;
}

#ofertas-mes .oferta-card--wide {
  aspect-ratio: 32/7;
}

#ofertas-mes .oferta-card:hover {
  transform: translateY(-5px);
}

#ofertas-mes .oferta-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#ofertas-mes .oferta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--brand-secondary-color-rgb), 1) 0%,
    rgba(var(--brand-secondary-color-rgb), 0.4) 30%,
    transparent 60%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 2rem;
  color: #fff;
}

#ofertas-mes .oferta-card.horizontal .oferta-overlay {
  padding: 1.5rem;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
}

#ofertas-mes .oferta-title {
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: 1rem;
}

#ofertas-mes .oferta-card.horizontal .oferta-title {
  margin-bottom: 0;
}

#ofertas-mes .oferta-btn {
  background: var(--brand-primary-color);
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  text-transform: capitalize;
  text-align: center;
  transition: opacity 0.2s;
  width: fit-content;
}

#ofertas-mes .oferta-btn:hover {
  opacity: 0.9;
}

#ofertas-mes .brand-logo-slot {
  width: clamp(4.4rem, 9vw, 6.4rem);
  height: clamp(2.2rem, 4.6vw, 3.2rem);
  margin: 0 auto 0.85rem;
  opacity: 0.92;
}

#ofertas-mes .brand-logo-card {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}

#ofertas-mes .oferta-card.horizontal .brand-logo-slot {
  width: clamp(3.8rem, 8vw, 5.2rem);
  height: clamp(1.8rem, 3.8vw, 2.6rem);
  margin: 0 0 0.6rem;
}

@media (max-width: 1024px) {
  #ofertas-mes .ofertas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #ofertas-mes .ofertas-grid {
    grid-template-columns: 1fr;
  }

  #ofertas-mes .oferta-card.horizontal {
    aspect-ratio: 4/3;
  }
}

.promos-mv-eyebrow {
  color: rgba(var(--brand-primary-color-rgb), 0.6);
}

.promos-mv-title {
  color: var(--brand-primary-color);
  border-left: 3px solid var(--brand-primary-color);
}

.promos-mv-badge {
  background-color: var(--brand-primary-color);
}

.promos-mv-card-shell {
  background-color: rgba(218, 223, 225, 0.2);
}

.promos-mv-overlay {
  background: linear-gradient(
    to top,
    rgba(var(--brand-primary-color-rgb), 0.82),
    rgba(var(--brand-primary-color-rgb), 0.45),
    transparent
  );
}

.promos-mv-link {
  color: var(--brand-primary-color);
}

.promos-mv-link:hover {
  background-color: var(--brand-secondary-color);
  color: #fff;
}

.promos-mv-cat {
  color: var(--brand-secondary-color);
}

.promos-mv-name {
  color: var(--brand-primary-color);
}

.group:hover .promos-mv-name {
  color: var(--brand-secondary-color);
}

.promos-mv-rating {
  color: rgba(var(--brand-primary-color-rgb), 0.6);
}

.promos-mv-price {
  color: var(--brand-primary-color);
}

.promos-mv-divider {
  background-color: var(--brand-secondary-color);
}

.promos-mv-btn {
  background-color: var(--brand-primary-color);
}

.promos-mv-btn:hover {
  background-color: var(--brand-secondary-color);
}

.promos-mv-glow {
  background-color: rgba(var(--brand-secondary-color-rgb), 0.08);
}

/* Pleca 4 blanca: PLACA flotante decorativa (como tu white actual) */
.cinsa-plate--sa-white-plate {
  inset: auto;
  height: 84px;
  width: auto;
  left: 60%;
  right: -56px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.1) 55%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* ==========================================================================
   Graniteware ES – Overrides por clases nuevas
   (no tocar base multi-marca)
   ========================================================================== */

/* Overlay: gradiente horizontal amarillo -> negro (sutil, equivalente a alpha 0.55) */
.brand-hero-overlay--yellow-black {
  background: linear-gradient(
    90deg,
    rgba(248, 154, 28, 0.55) 0%,
    rgba(248, 154, 28, 0.4) 45%,
    rgba(58, 58, 58, 0.28) 78%,
    rgba(58, 58, 58, 0) 100%
  );
}

/* Pleca T1: misma geometría que la barra azul, solo amarillo */
.brand-plate--t1-yellow {
  left: -18px;
  right: -22px;
  top: -8px;
  bottom: -8px;
  background: rgba(248, 154, 28, 0.35);
}

/* Pleca T2: mismo estilo de gradiente que white-bar, pero negro */
.brand-plate--t2-black-bar {
  left: -10px;
  right: -12px;
  top: -6px;
  bottom: -6px;
  background: linear-gradient(
    90deg,
    rgba(58, 58, 58, 0.28) 0%,
    rgba(58, 58, 58, 0.18) 45%,
    rgba(58, 58, 58, 0.06) 78%,
    rgba(58, 58, 58, 0) 100%
  );
}

@media (max-width: 767px) {
  .cinsa-plate--sa-white-plate {
    left: 58%;
    right: -24px;
    height: 50px;
  }

  .brand-plate--t1-yellow {
    left: -10px;
    right: -12px;
    top: -5px;
    bottom: -5px;
  }

  .brand-plate--t2-black-bar {
    left: -8px;
    right: -10px;
    top: -4px;
    bottom: -4px;
  }
}

/* ==========================================================================
   Footer: evitar títulos en 2 líneas (global)
   Aplica a todas las marcas
   ========================================================================== */
.cinsa-footer-menu-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  column-gap: 48px;
}

/* Títulos del menú: nunca se rompen */
.cinsa-footer-menu-grid h4 {
  white-space: nowrap;
}

/* Si en pantallas muy chicas llegara a apretar, relajamos tracking */
@media (max-width: 420px) {
  .cinsa-footer-menu-grid h4 {
    letter-spacing: 0.18em !important;
  }
}


/* ==========================================================================
   Consolidated: animations.css
   ========================================================================== */

/**
 * Animations CSS
 * Reusable animations for the entire project
 * All animations have a duration of 1 second
 */

/* ========================================
   FADE IN + SLIDE ANIMATIONS
   ======================================== */

/* Fade In and Slide from Top to Bottom */
@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInSlideDown {
    animation: fadeInSlideDown 1s ease-out;
}

/* Fade In and Slide from Bottom to Top */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInSlideUp {
    animation: fadeInSlideUp 1s ease-out;
}

/* Fade In and Slide from Left to Right */
@keyframes fadeInSlideRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInSlideRight {
    animation: fadeInSlideRight 1s ease-out;
}

/* Fade In and Slide from Left to Right (Centered Vertically) */
@keyframes fadeInSlideRightCentered {
    from {
        opacity: 0;
        transform: translateX(-20px) translateY(-50%);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }
}

.fadeInSlideRightCentered {
    animation: fadeInSlideRightCentered 1.5s ease-out;
}

/* Fade In and Slide from Right to Left */
@keyframes fadeInSlideLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInSlideLeft {
    animation: fadeInSlideLeft 1s ease-out;
}

/* Fade In and Slide from Right to Left (Centered Vertically) */
@keyframes fadeInSlideLeftCentered {
    from {
        opacity: 0;
        transform: translateX(50px) translateY(-50%);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }
}

.fadeInSlideLeftCentered {
    animation: fadeInSlideLeftCentered 1.5s ease-out;
}

/* ========================================
   TRANSFORM ANIMATIONS
   ======================================== */

/* Zoom In - Scale to 1.1 */
@keyframes zoomIn {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

.zoomIn {
    animation: zoomIn 1s ease-in-out;
}

/* Slide Up Small - TranslateY -8px */
@keyframes slideUpSmall {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-8px);
    }
}

.slideUpSmall {
    animation: slideUpSmall 1s ease-out;
}

/* Slide Right Small - TranslateX 10px */
@keyframes slideRightSmall {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(10px);
    }
}

.slideRightSmall {
    animation: slideRightSmall 1s ease-out;
}

/* Arrow Bounce - Continuous horizontal bounce */
@keyframes arrowBounce {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(8px);
    }
}

.arrowBounce {
    animation: arrowBounce 1.5s ease-in-out infinite;
}

/* Scale Up - Grow from small to normal size */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.3);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scaleUp {
    animation: scaleUp 1s ease-out;
}

/* ========================================
   SIZE ANIMATIONS
   ======================================== */

/* Expand Width - 0 to 100% */
@keyframes expandWidth {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.expandWidth {
    animation: expandWidth 1s ease-out;
}

/* Expand Width from Right to Left - 0 to 100% */
@keyframes expandWidthRTL {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.expandWidthRTL {
    transform-origin: right;
    animation: expandWidthRTL 1s ease-out;
}

/* Expand Width from Left to Right - Respects original width */
@keyframes expandWidthLTR {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.expandWidthLTR {
    transform-origin: left;
    animation: expandWidthLTR 1s ease-out;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Animation delays */
.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

/* ========================================
   ACCESSIBILITY: REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  .animate-on-scroll,
  .fadeInSlideDown,
  .fadeInSlideUp,
  .fadeInSlideRight,
  .fadeInSlideRightCentered,
  .fadeInSlideLeft,
  .fadeInSlideLeftCentered,
  .zoomIn,
  .slideUpSmall,
  .slideRightSmall,
  .arrowBounce,
  .scaleUp,
  .expandWidth,
  .expandWidthRTL,
  .expandWidthLTR,
  .animate-bounce,
  .cns25-marquee-wrapper,
  .awards-marquee-wrapper,
  .cinsa-home-clientes-marquee {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.animation-delay-800 {
    animation-delay: 0.8s;
}

/* Animation fill modes */
.animation-forwards {
    animation-fill-mode: forwards;
}

.animation-backwards {
    animation-fill-mode: backwards;
}

.animation-both {
    animation-fill-mode: both;
}

/* Animation iteration */
.animation-infinite {
    animation-iteration-count: infinite;
}

/* Animation timing functions */
.animation-ease {
    animation-timing-function: ease;
}

.animation-ease-in {
    animation-timing-function: ease-in;
}

.animation-ease-out {
    animation-timing-function: ease-out;
}

.animation-ease-in-out {
    animation-timing-function: ease-in-out;
}

.animation-linear {
    animation-timing-function: linear;
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */

/* Initial state for elements that will animate on scroll */
.animate-on-scroll {
    opacity: 0;
    visibility: hidden;
}

/* State when element is visible and animated */
.animate-on-scroll.animated {
    opacity: 1;
    visibility: visible;
    animation-fill-mode: forwards;
}