:root {
  --catalog-width: 1320px;
  --catalog-hero-height: clamp(480px, 67vh, 680px);
}

body { background: #f7fbfa; }
main { padding-top: calc(6.15rem + 1rem); }

.catalog-header { position: sticky; top: 0; z-index: 50; height: 5.5rem; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(23,79,90,.08); backdrop-filter: blur(18px); }
.catalog-nav { display: flex; align-items: center; gap: 2.5rem; width: min(var(--catalog-width), calc(100% - 3rem)); height: 100%; margin: auto; }
.catalog-logo img { display: block; width: auto; height: 3.65rem; }
.catalog-nav__links { display: flex; align-items: center; gap: .35rem; }
.catalog-nav__links a { padding: .7rem 1rem; border-radius: 999px; color: var(--color-text); font-size: .82rem; font-weight: 700; }
.catalog-nav__links a:hover, .catalog-nav__links .is-active { color: var(--color-dark-teal); background: #eaf5f3; }
.catalog-nav__contact { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: .75rem 1.1rem; border-radius: 999px; background: var(--color-dark-teal); color: white; font-size: .8rem; font-weight: 700; }

.detergent-hero { position: relative; width: calc(100% - 3rem); height: var(--catalog-hero-height); min-height: var(--catalog-hero-height); margin: 0 auto; overflow: hidden; border-radius: 30px; box-shadow: 0 28px 75px rgba(5,93,133,.16); font-family: var(--font-body); }
.detergent-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg,rgba(4,55,78,.98) 0%,rgba(7,91,119,.96) 18%,rgba(31,157,160,.82) 31%,rgba(31,157,160,.38) 40%,rgba(31,157,160,0) 54%); }
.detergent-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detergent-hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: min(630px, 52%); height: 100%; min-height: 0; padding: clamp(2.5rem, 6vw, 6rem); color: white; }
.detergent-hero__content > span { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; padding: .45rem .85rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.12); font-family: var(--font-body); font-size: .74rem; font-weight: 700; }
.detergent-hero h1 { color: white; font-family: var(--font-body); font-size: clamp(2.5rem, 4.6vw, 4.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.06em; }
.detergent-hero h1 strong { color: var(--color-mint); font-weight: 800; }
.detergent-hero p { max-width: 50ch; margin: 1.2rem 0 1.6rem; color: rgba(255,255,255,.82); font-family: var(--font-body); font-weight: 400; }
.detergent-hero__content > a { display: inline-flex; align-items: center; gap: .65rem; padding: .9rem 1.25rem; border-radius: 999px; background: var(--color-primary); color: white; font-family: var(--font-body); font-size: .85rem; font-weight: 700; }

.detergent-products { width: min(var(--catalog-width), calc(100% - 3rem)); margin: auto; padding: 7rem 0; font-family: var(--font-body); }
.detergent-products__header { max-width: 730px; margin: 0 auto 3.5rem; text-align: center; }
.detergent-products__header > span { color: var(--color-primary-dark); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.detergent-products__header h2 { margin: .6rem 0 .8rem; color: var(--color-dark-teal); font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing: -.05em; }
.detergent-products__header h1 { margin: .6rem 0 .8rem; color: var(--color-dark-teal); font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.1; letter-spacing: -.05em; }
.detergent-products__header p { color: var(--color-text-light); }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.detergent-card { position: relative; overflow: hidden; border: 1px solid rgba(23,79,90,.08); border-radius: 24px; background: white; text-align: left; box-shadow: 0 12px 34px rgba(20,79,90,.07); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.detergent-card:hover { border-color: rgba(67,170,164,.38); box-shadow: 0 24px 55px rgba(20,79,90,.13); transform: translateY(-8px); }
.detergent-card__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .4rem .7rem; border-radius: 999px; background: var(--color-dark-teal); color: white; font-size: .65rem; font-weight: 700; }
.detergent-card__image { aspect-ratio: 1.08; overflow: hidden; background: linear-gradient(145deg,#fff,#edf7f5); }
.detergent-card__image img { width: 100%; height: 100%; padding: .75rem; object-fit: contain; object-position: center; transition: transform .55s ease; }
.detergent-card:hover .detergent-card__image img { transform: scale(1.035); }
.detergent-card__body { padding: 1.4rem 1.5rem 1.55rem; }
.detergent-card__body > span { color: var(--color-primary-dark); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.detergent-card__body h3 { margin: .25rem 0 .45rem; color: var(--color-dark-teal); font-size: 1.45rem; letter-spacing: -.03em; }
.detergent-card__body p { min-height: 2.8rem; color: var(--color-text-light); font-size: .8rem; }
.detergent-card__body strong { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #e3eeec; color: var(--color-dark-teal); font-size: .8rem; }
.detergent-card__body strong i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e5f4f1; }

.detergent-help { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: min(var(--catalog-width), calc(100% - 3rem)); margin: 0 auto 7rem; padding: 3rem; border-radius: 26px; background: linear-gradient(135deg,var(--color-dark-teal),#034764); color: white; font-family: var(--font-body); }
.detergent-help span { color: var(--color-mint); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.detergent-help h2 { max-width: 650px; margin-top: .35rem; color: white; font-size: clamp(1.7rem,3vw,2.6rem); letter-spacing: -.04em; }
.detergent-help a { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; padding: .9rem 1.3rem; border-radius: 999px; background: var(--color-mint); color: var(--color-dark-teal); font-size: .85rem; font-weight: 800; }

.catalog-footer { display: flex; align-items: center; gap: 1.5rem; padding: 2rem max(1.5rem, calc((100% - var(--catalog-width))/2)); background: #123f48; color: rgba(255,255,255,.75); font-size: .78rem; }
.catalog-footer img { width: auto; height: 3.5rem; padding: .35rem .7rem; border-radius: 10px; background: white; }
.catalog-footer a { margin-left: auto; color: var(--color-mint); font-weight: 700; }

.product-dialog { position: fixed; inset: 0; width: min(920px, calc(100% - 2rem)); height: fit-content; max-height: min(720px, calc(100vh - 2rem)); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 28px; background: white; box-shadow: 0 35px 110px rgba(5,63,90,.34); font-family: var(--font-body); }
.product-dialog::backdrop { background: rgba(8,38,44,.66); backdrop-filter: blur(8px); }
.product-dialog[open] { display: grid; grid-template-columns: .88fr 1.12fr; animation: dialog-in .28s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.product-dialog__close { position: absolute; top: 1rem; right: 1rem; z-index: 3; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #edf6f4; color: var(--color-dark-teal); font-size: 1.3rem; }
.product-dialog__image { min-height: 0; height: min(680px, calc(100vh - 3rem)); overflow: hidden; background: linear-gradient(145deg,#fff,#edf5f7); }
.product-dialog__image img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.product-dialog__content { align-self: center; min-width: 0; padding: clamp(2rem,4vw,3rem); }
.product-dialog__content > span { color: var(--color-primary-dark); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.product-dialog__content h2 { margin: .3rem 0 .8rem; color: var(--color-dark-teal); font-size: 2.5rem; letter-spacing: -.05em; }
.product-dialog__content > p { margin-bottom: 1.4rem; color: var(--color-text); font-size: .88rem; }
.product-dialog__content h3 { margin-bottom: .6rem; color: var(--color-dark-teal); font-size: .85rem; }
.product-dialog__content ul { display: grid; gap: .45rem; margin-bottom: 1.4rem; }
.product-dialog__content li { display: flex; align-items: center; gap: .5rem; color: var(--color-text); font-size: .8rem; }
.product-dialog__content li::before { content: "✓"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #def2ee; color: var(--color-primary-dark); font-size: .65rem; font-weight: 800; }
.product-dialog__size { display: flex; align-items: center; gap: .8rem; width: 100%; margin-bottom: 1.5rem; padding: .95rem 1rem; border-radius: 14px; background: #efefef; color: var(--color-dark-teal); }
.product-dialog__size i { flex: 0 0 auto; font-size: 1.4rem; }.product-dialog__size div { display: grid; min-width: 0; }.product-dialog__size small { color: var(--color-text-light); font-size: .62rem; }.product-dialog__size strong { max-width: 100%; overflow-wrap: anywhere; font-size: .82rem; }
#dialog-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; padding: .95rem 1.2rem; border-radius: 999px; background: #25d366; color: white; font-size: .85rem; font-weight: 800; }

.official-category-banner {
  width: calc(100% - 3rem);
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;
  background: var(--color-white);
  box-shadow: 0 22px 60px rgba(5,93,133,.13);
}

.official-category-banner img { width: 100%; height: auto; }

.page-desinfectantes .detergent-products { padding-top: 5.5rem; }
.page-removedores .detergent-products { padding-top: 5.5rem; }
.page-removedores .product-grid { grid-template-columns: repeat(2, minmax(280px, 420px)); justify-content: center; }

.removedores-hero {
  display: block;
  background: #073e4b;
}
.removedores-hero::after {
  display: block;
  background: linear-gradient(90deg, rgba(4,45,56,.98) 0%, rgba(5,57,68,.9) 34%, rgba(5,57,68,.5) 55%, rgba(5,57,68,.08) 78%);
}
.removedores-hero > img { object-position: center; }
.removedores-hero h1 { color: var(--color-white); }
.removedores-hero h1 strong { color: var(--color-white); }
.removedores-hero p { color: rgba(255,255,255,.82); }

.page-single-product .product-grid { grid-template-columns: minmax(280px, 420px); justify-content: center; }
.page-single-product .detergent-products { padding-top: 5.5rem; }

/* Banners fotográficos unificados con una transición suave de la paleta corporativa. */
.photographic-line-hero {
  isolation: isolate;
  background: #055d85;
}
.photographic-line-hero::after {
  background: linear-gradient(
    90deg,
    rgba(5,93,133,.98) 0%,
    rgba(5,93,133,.94) 24%,
    rgba(5,93,133,.78) 38%,
    rgba(76,186,178,.46) 54%,
    rgba(76,186,178,.18) 69%,
    rgba(76,186,178,0) 84%
  );
}
.photographic-line-hero > img {
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
}
.photographic-line-hero .detergent-hero__content { z-index: 2; }
.page-limpiadores .product-grid { grid-template-columns: repeat(2, minmax(280px, 420px)); justify-content: center; }
.page-suavizantes .product-grid { grid-template-columns: repeat(2, minmax(280px, 420px)); justify-content: center; }
.page-automotriz .product-grid { grid-template-columns: repeat(3, minmax(260px, 380px)); justify-content: center; }

@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2,1fr); }.detergent-hero__content { width: 65%; }.catalog-nav__links a:last-child { display: none; } }
@media (max-width: 650px) {
  .catalog-header { height: 4.75rem; }.catalog-nav { width: calc(100% - 1.5rem); gap: .7rem; }.catalog-logo img { height: 3.1rem; }.catalog-nav__links { margin-left: auto; }.catalog-nav__links a { display: none; }.catalog-nav__links .is-active { display: block; padding: .55rem .7rem; }.catalog-nav__contact { margin-left: 0; padding: .7rem; }.catalog-nav__contact span { display: none; }
  main { padding-top: calc(5rem + .5rem); }.detergent-hero { width: calc(100% - 1rem); height: 610px; min-height: 610px; border-radius: 22px; }.detergent-hero::after { background: linear-gradient(90deg,rgba(4,55,78,.94) 0%,rgba(7,91,119,.84) 22%,rgba(31,157,160,.56) 40%,rgba(31,157,160,0) 66%); }.detergent-hero > img { object-position: 64% center; }.detergent-hero__content { justify-content: flex-end; width: 100%; padding: 1.5rem; background: linear-gradient(0deg,rgba(5,42,49,.96),rgba(5,42,49,.58) 65%,transparent); }.detergent-hero h1 { font-size: 2.55rem; }
  .detergent-products { width: calc(100% - 1.5rem); padding: 5rem 0; }.detergent-products__header { margin-bottom: 2.25rem; }.product-grid { grid-template-columns: 1fr; }.detergent-card__image { aspect-ratio: 1.15; }
  .detergent-help { align-items: flex-start; flex-direction: column; width: calc(100% - 1.5rem); margin-bottom: 5rem; padding: 2rem 1.5rem; }.detergent-help a { width: 100%; justify-content: center; }
  .catalog-footer { align-items: flex-start; flex-direction: column; }.catalog-footer a { margin-left: 0; }
  .product-dialog[open] { display: block; overflow-y: auto; }.product-dialog__image { min-height: 260px; height: 260px; }.product-dialog__content { padding: 1.5rem; }.product-dialog__content h2 { font-size: 2rem; }
  .official-category-banner { width: calc(100% - 1rem); border-radius: 16px; }
  .official-category-banner img { min-height: 150px; object-fit: cover; object-position: center; }
  .page-desinfectantes .detergent-products { padding-top: 4rem; }
  .page-removedores .detergent-products { padding-top: 4rem; }
  .page-removedores .product-grid { grid-template-columns: 1fr; }
  .removedores-hero::after {
    display: block;
    background: linear-gradient(0deg,rgba(5,42,49,.98) 0%,rgba(5,42,49,.82) 58%,rgba(5,42,49,.2) 100%);
  }
  .removedores-hero > img { object-position: 70% center; }
  .photographic-line-hero::after {
    background: linear-gradient(0deg,rgba(5,93,133,.98) 0%,rgba(5,93,133,.9) 40%,rgba(5,93,133,.62) 60%,rgba(76,186,178,.24) 78%,rgba(76,186,178,0) 100%);
  }
  .photographic-line-hero .detergent-hero__content { background: none; }
  .photographic-line-hero > img { object-position: 70% center; }
  .page-automotriz .photographic-line-hero > img { object-position: 76% center; }
  .page-desengrasantes .photographic-line-hero > img { object-position: 74% center; }
  .page-limpiadores .product-grid,
  .page-suavizantes .product-grid,
  .page-automotriz .product-grid,
  .page-desengrasantes .product-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }