/* Phase 08: shared editorial layouts for native Sauleda CMS pages. */
.page-content--cms:has(.sauleda-cms){max-width:none;padding:0;background:var(--sauleda-cream,#ede8dc)}
.sauleda-cms{--cms-red:#b82828;--cms-ink:#1a1a18;--cms-muted:#5f5a54;--cms-paper:#fff;--cms-line:#d8d2c8;color:var(--cms-ink);font-size:1rem;line-height:1.65}
.sauleda-cms *{box-sizing:border-box}.sauleda-cms img{display:block;max-width:100%;height:auto}.sauleda-cms a{color:inherit}.sauleda-cms__hero{background:linear-gradient(135deg,#6d171b 0%,#b82828 52%,#d9684e 100%);color:#fff;padding:clamp(4rem,10vw,8rem) max(1.5rem,calc((100% - 1280px)/2 + 2rem)) clamp(3rem,7vw,5rem)}
.sauleda-cms__hero-inner{max-width:52rem}.sauleda-cms__kicker,.sauleda-cms__eyebrow{margin:0 0 .9rem;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.sauleda-cms__hero h1{margin:0 0 1rem;color:#fff;font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.03;letter-spacing:-.04em}.sauleda-cms__hero p{max-width:45rem;margin:0;font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.55}.sauleda-cms__section{max-width:1120px;margin:0 auto;padding:clamp(3.4rem,7vw,6.5rem) 1.5rem}.sauleda-cms__section+ .sauleda-cms__section{padding-top:0}.sauleda-cms__eyebrow{color:var(--cms-red)}.sauleda-cms h2{max-width:50rem;margin:0 0 1.1rem;font-size:clamp(1.6rem,3vw,2.55rem);line-height:1.18;letter-spacing:-.03em}.sauleda-cms h3{font-size:1.1rem;line-height:1.25}.sauleda-cms__section>p{max-width:48rem;margin:0 0 1rem;color:var(--cms-muted)}
.sauleda-cms__card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem;margin-top:2.4rem}.sauleda-cms__card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.sauleda-cms__card:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(26,26,24,.12)}.sauleda-cms__card:focus-visible{outline:3px solid var(--cms-red);outline-offset:3px}.sauleda-cms__card img{width:100%;aspect-ratio:16/10;object-fit:cover}.sauleda-cms__card span{display:grid;gap:.5rem;padding:1.1rem 1.15rem}.sauleda-cms__card strong{font-size:1.1rem}.sauleda-cms__card small{color:var(--cms-muted);font-size:.9rem;line-height:1.5}
.sauleda-cms__feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2.5rem}.sauleda-cms__feature{border-top:2px solid var(--cms-red);padding-top:1rem}.sauleda-cms__feature img{width:3rem;height:3rem;object-fit:contain;margin-bottom:.8rem}.sauleda-cms__feature h3{margin:.2rem 0 .4rem}.sauleda-cms__feature p{margin:0;color:var(--cms-muted);font-size:.94rem}.sauleda-cms__wide-image,.sauleda-cms__infographic{width:100%;margin-top:2.25rem;border-radius:1rem}.sauleda-cms__image-pair,.sauleda-cms__products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2.25rem}.sauleda-cms__image-pair img{border-radius:1rem;aspect-ratio:4/3;object-fit:cover}.sauleda-cms__product{padding:1.5rem;border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper)}.sauleda-cms__product>img{width:100%;max-height:12rem;object-fit:contain;margin-bottom:1rem}.sauleda-cms__product p{color:var(--cms-muted)}.sauleda-cms__steps,.sauleda-cms__check-list{display:grid;gap:.85rem;margin:1.5rem 0 0;padding:0;list-style:none}.sauleda-cms__steps{counter-reset:steps}.sauleda-cms__steps li{display:grid;gap:.2rem;grid-template-columns:auto 1fr;color:var(--cms-muted)}.sauleda-cms__steps li::before{counter-increment:steps;content:counter(steps,decimal-leading-zero);color:var(--cms-red);font-weight:700;margin-right:.65rem}.sauleda-cms__steps strong{color:var(--cms-ink)}.sauleda-cms__note{font-size:.82rem}.sauleda-cms__check-list li{position:relative;padding-left:1.6rem;color:var(--cms-muted)}.sauleda-cms__check-list li::before{position:absolute;left:0;content:'✓';color:var(--cms-red);font-weight:700}.sauleda-cms__closing{padding:4rem 1.5rem 6rem;text-align:center;background:#fff}.sauleda-cms__closing h2{margin:auto}.sauleda-cms__closing em{color:var(--cms-red)}
.sauleda-cms__timeline{position:relative;display:grid;gap:1.5rem;max-width:56rem;margin:2.5rem 0 0;padding:0;list-style:none}.sauleda-cms__timeline::before{position:absolute;top:0;bottom:0;left:1rem;width:2px;background:var(--cms-red);content:''}.sauleda-cms__timeline-item{position:relative;display:grid;grid-template-columns:5rem 1fr;gap:1rem}.sauleda-cms__timeline-item time{z-index:1;height:2rem;padding:.28rem .5rem;border:1px solid var(--cms-line);border-radius:999px;background:var(--cms-paper);color:var(--cms-red);font-weight:700;font-size:.82rem;text-align:center}.sauleda-cms__timeline-item article{overflow:hidden;border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper)}.sauleda-cms__timeline-item img{width:100%;max-height:16rem;object-fit:cover}.sauleda-cms__timeline-item h2,.sauleda-cms__timeline-item p{margin:1rem 1.2rem}.sauleda-cms__timeline-item h2{font-size:1.25rem}.sauleda-cms__timeline-item p{color:var(--cms-muted)}
@media (max-width:760px){.sauleda-cms__card-grid,.sauleda-cms__feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sauleda-cms__image-pair,.sauleda-cms__products{grid-template-columns:1fr}.sauleda-cms__timeline-item{grid-template-columns:4.25rem 1fr}.sauleda-cms__timeline::before{left:.85rem}}@media (max-width:480px){.sauleda-cms__card-grid,.sauleda-cms__feature-grid{grid-template-columns:1fr}.sauleda-cms__hero{padding-inline:1.25rem}.sauleda-cms__section{padding-inline:1.25rem}}
.sauleda-cms__card h3{margin:0;font-size:1.1rem}
.sauleda-cms__card-body{display:grid;gap:.5rem;padding:1.1rem 1.15rem}
.sauleda-cms__timeline-item>div{overflow:hidden;border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper)}
.sauleda-cms__card-body p{margin:0;color:var(--cms-muted);font-size:.9rem;line-height:1.5}
.sauleda-cms__hero{position:relative;overflow:hidden}.sauleda-cms__hero-media{position:absolute;inset:0;opacity:.22}.sauleda-cms__hero-media::after{position:absolute;inset:0;background:linear-gradient(90deg,rgba(86,16,20,.78),rgba(184,40,40,.34));content:''}.sauleda-cms__hero-media img{width:100%;height:100%;object-fit:cover}.sauleda-cms__hero-inner{position:relative;z-index:1}.sauleda-cms__certification-list{display:grid;gap:1rem;margin-top:2.25rem}.sauleda-cms__certification{display:grid;grid-template-columns:minmax(10rem,15rem) 1fr;gap:clamp(1.25rem,4vw,2.75rem);align-items:center;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper)}.sauleda-cms__certification-mark{display:grid;place-items:center;min-height:8rem;padding:1rem;border-radius:.75rem;background:#f3f3f4}.sauleda-cms__certification-mark img{max-width:100%;max-height:6rem;object-fit:contain}.sauleda-cms__certification h3{margin:0 0 .25rem}.sauleda-cms__certification p{margin:.5rem 0 0;color:var(--cms-muted);font-size:.94rem}.sauleda-cms__certification-subtitle{color:var(--cms-red)!important;font-size:.73rem!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.sauleda-cms__guarantee-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin:2.25rem 0 0;padding:0;list-style:none}.sauleda-cms__guarantee-grid li{display:grid;justify-items:center;gap:.85rem;min-height:11rem;padding:1.25rem .75rem;border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper);text-align:center}.sauleda-cms__guarantee-grid img{width:100%;height:4.5rem;object-fit:contain}.sauleda-cms__guarantee-grid h3{margin:0;font-size:.92rem}.sauleda-cms__performance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:2.25rem 0 0;padding:0;list-style:none}.sauleda-cms__performance-grid li{display:grid;grid-template-columns:3.25rem 1fr;gap:1rem;padding:1.25rem;border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper)}.sauleda-cms__performance-grid img{width:3rem;height:3rem;object-fit:contain}.sauleda-cms__performance-grid h3{margin:0 0 .35rem}.sauleda-cms__performance-grid p{margin:0;color:var(--cms-muted);font-size:.9rem;line-height:1.55}.sauleda-cms--catalogs .sauleda-cms__hero{min-height:18rem}.sauleda-cms__category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.sauleda-cms__category-card{display:flex;align-items:end;min-height:10rem;padding:1.25rem;border:1px solid var(--cms-line);border-radius:1rem;background:var(--cms-paper);font-size:1.15rem;font-weight:700;line-height:1.25;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.sauleda-cms__category-card:hover{transform:translateY(-3px);box-shadow:0 13px 28px rgba(26,26,24,.12)}.sauleda-cms__category-card:focus-visible,.sauleda-cms__button:focus-visible{outline:3px solid var(--cms-red);outline-offset:3px}.sauleda-cms__article-header{max-width:54rem;margin:0 auto;padding:clamp(4rem,10vw,8rem) 1.5rem 2.5rem}.sauleda-cms__article-header h1{margin:0 0 1rem;font-size:clamp(2.25rem,5vw,4.2rem);line-height:1.05;letter-spacing:-.04em}.sauleda-cms__article-header time{color:var(--cms-muted);font-size:.9rem}.sauleda-cms__article-body{max-width:48rem;margin:0 auto;padding:1rem 1.5rem clamp(4rem,8vw,7rem);font-size:1.05rem}.sauleda-cms__article-body>p{margin:0 0 1.4rem;color:var(--cms-muted)}.sauleda-cms__article-body h2{margin:2.7rem 0 1rem}.sauleda-cms__article-lead{font-size:1.25rem;line-height:1.65;color:var(--cms-ink)!important}.sauleda-cms__article-body blockquote{margin:2rem 0;padding:1.25rem 1.5rem;border-left:4px solid var(--cms-red);background:#fff;font-size:1.3rem;font-weight:600;line-height:1.45}.sauleda-cms__article-body blockquote p{margin:0}.sauleda-cms__article-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.75rem 0 0;padding:0;list-style:none}.sauleda-cms__article-tags li{padding:.4rem .7rem;border-radius:999px;background:#fff;color:var(--cms-red);font-size:.78rem;font-weight:700}.sauleda-cms__article-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:3rem;padding:1.5rem;border-radius:1rem;background:#fff}.sauleda-cms__article-cta p{margin:0;font-weight:700}.sauleda-cms__button{display:inline-flex;justify-content:center;padding:.7rem 1rem;border-radius:999px;background:var(--cms-red);color:#fff!important;font-size:.84rem;font-weight:700;text-decoration:none}.sauleda-cms__button:hover{background:#8c1f1f}
@media (max-width:900px){.sauleda-cms__guarantee-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sauleda-cms__category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:700px){.sauleda-cms__certification{grid-template-columns:1fr}.sauleda-cms__certification-mark{max-width:15rem;width:100%}.sauleda-cms__performance-grid{grid-template-columns:1fr}.sauleda-cms__article-cta{align-items:stretch;flex-direction:column}.sauleda-cms__button{width:100%}}@media (max-width:480px){.sauleda-cms__guarantee-grid,.sauleda-cms__category-grid{grid-template-columns:1fr}.sauleda-cms__guarantee-grid li{min-height:auto}}
.sauleda-cms__article-meta{margin:0;color:var(--cms-muted);font-size:.9rem}


/* ============================================================
   SAULEDA HISTORY V3 · ESTRUCTURA REFERENCIA
============================================================ */

.sauleda-history-v3 {
  --red:#b82828;
  --red-dk:#921f1f;
  --dark:#1a1a18;
  --mid:#666660;
  --muted:#8b8a83;
  --cream:#f1ede3;
  --cream-lt:#f7f4ed;
  --white:#fff;
  --border:rgba(26,26,24,.12);
  --pill:999px;
  --r-card:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body.cms-id-6 .breadcrumb,
body.cms-id-6 #main > .page-header {
  display:none!important;
}

body.cms-id-6 #content-wrapper,
body.cms-id-6 .page-content {
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

.sauleda-history-v3 *,
.sauleda-history-v3 *::before,
.sauleda-history-v3 *::after {
  box-sizing:border-box;
}



























.sauleda-history-v3 .decade-nav {
  position:sticky;
  top:78px;
  z-index:60;
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin-bottom:8px;
  padding:10px 4px 22px;
  background:linear-gradient(var(--cream) 60%,transparent);
  scrollbar-width:none;
}

.sauleda-history-v3 .decade-nav::-webkit-scrollbar {
  display:none;
}

.sauleda-history-v3 .decade-pill {
  flex-shrink:0;
  padding:8px 16px;
  border:1px solid var(--border);
  border-radius:var(--pill);
  background:var(--white);
  color:var(--mid);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
  transition:all .2s var(--ease);
}

.sauleda-history-v3 .decade-pill:hover {
  border-color:var(--red);
  color:var(--red);
}

.sauleda-history-v3 .decade-pill.active {
  border-color:var(--red);
  background:var(--red);
  color:#fff;
}

.sauleda-history-v3 .timeline {
  position:relative;
  max-width:680px;
  margin:0 auto;
}

.sauleda-history-v3 .timeline-spine {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:34px;
  transform:translateX(-50%);
  opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='72' viewBox='0 0 34 72'%3E%3Cpath d='M17,0 C4,10 30,24 17,36 C4,48 30,62 17,72' fill='none' stroke='%23B82828' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='0.5 7'/%3E%3C/svg%3E");
  background-repeat:repeat-y;
  background-position:top center;
  background-size:34px 72px;
}

.sauleda-history-v3 .tl-era {
  position:relative;
  padding:30px 0 16px;
  text-align:center;
}

.sauleda-history-v3 .tl-era:first-of-type {
  padding-top:0;
}

.sauleda-history-v3 .tl-era-label {
  position:relative;
  z-index:1;
  display:inline-block;
  padding:7px 18px;
  border:1px solid var(--border);
  border-radius:var(--pill);
  background:var(--cream);
  box-shadow:0 0 0 10px var(--cream);
  color:var(--mid);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.sauleda-history-v3 .tl-era-row {
  display:grid;
  grid-template-columns:1fr 34px 1fr;
}

.sauleda-history-v3 .tl-col {
  display:flex;
  flex-direction:column;
  gap:28px;
}

.sauleda-history-v3 .tl-col-left {
  grid-column:1 / 2;
  align-items:flex-end;
  padding-right:24px;
}

.sauleda-history-v3 .tl-col-right {
  grid-column:3 / 4;
  align-items:flex-start;
  padding-top:56px;
  padding-left:24px;
}

.sauleda-history-v3 .tl-item {
  position:relative;
}

.sauleda-history-v3 .tl-year {
  margin-bottom:6px;
  color:var(--red);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
}

.sauleda-history-v3 .tl-dot {
  position:absolute;
  top:22px;
  z-index:2;
  width:11px;
  height:11px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 1px var(--border);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}

.sauleda-history-v3 .tl-col-left .tl-dot {
  right:-46px;
}

.sauleda-history-v3 .tl-col-right .tl-dot {
  left:-47px;
}

.sauleda-history-v3 .tl-item.is-visible .tl-dot {
  transform:scale(1.2);
  box-shadow:0 0 0 5px rgba(184,40,40,.14);
}

.sauleda-history-v3 .tl-card {
  width:260px;
  max-width:260px;
  overflow:hidden;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:#fff;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}

.sauleda-history-v3 .tl-thumb {
  width:calc(100% + 36px);
  aspect-ratio:16/10;
  margin:-16px -18px 14px;
  background-color:var(--cream-lt);
  background-position:center;
  background-size:cover;
}

.sauleda-history-v3 .tl-thumb-contain {
  aspect-ratio:16/8;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.sauleda-history-v3 .tl-item.is-visible .tl-card {
  border-color:rgba(184,40,40,.25);
  box-shadow:0 10px 26px rgba(26,26,24,.06);
}

.sauleda-history-v3 .tl-card h3 {
  margin:0 0 6px;
  color:var(--dark);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
}

.sauleda-history-v3 .tl-card p {
  margin:0;
  color:var(--mid);
  font-size:.76rem;
  line-height:1.58;
}

.sauleda-history-v3 .reveal {
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  will-change:opacity,transform;
}

.sauleda-history-v3 .reveal.is-visible {
  opacity:1;
  transform:translateY(0);
}

@media (max-width:640px) {
  

  

  

  .sauleda-history-v3 .timeline-spine {
    left:15px;
    width:24px;
    transform:none;
    background-size:24px 60px;
  }

  .sauleda-history-v3 .tl-era-row {
    grid-template-columns:30px 1fr;
  }

  .sauleda-history-v3 .tl-col-left,
  .sauleda-history-v3 .tl-col-right {
    grid-column:2 / 3;
    align-items:flex-start;
    padding-top:0;
    padding-right:0;
    padding-left:22px;
  }

  .sauleda-history-v3 .tl-col-left .tl-dot,
  .sauleda-history-v3 .tl-col-right .tl-dot {
    right:auto;
    left:-18px;
  }

  .sauleda-history-v3 .tl-card {
    width:100%;
    max-width:100%;
  }

  .sauleda-history-v3 .decade-nav {
    top:66px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .sauleda-history-v3 .reveal {
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ============================================================
   SAULEDA HISTORY V3 · ESTRUCTURA REFERENCIA
============================================================ */

.sauleda-history-v3 {
  --red:#b82828;
  --red-dk:#921f1f;
  --dark:#1a1a18;
  --mid:#666660;
  --muted:#8b8a83;
  --cream:#f1ede3;
  --cream-lt:#f7f4ed;
  --white:#fff;
  --border:rgba(26,26,24,.12);
  --pill:999px;
  --r-card:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body.cms-id-6 .breadcrumb,
body.cms-id-6 #main > .page-header {
  display:none!important;
}

body.cms-id-6 #content-wrapper,
body.cms-id-6 .page-content {
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

.sauleda-history-v3 *,
.sauleda-history-v3 *::before,
.sauleda-history-v3 *::after {
  box-sizing:border-box;
}



























.sauleda-history-v3 .decade-nav {
  position:sticky;
  top:78px;
  z-index:60;
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin-bottom:8px;
  padding:10px 4px 22px;
  background:linear-gradient(var(--cream) 60%,transparent);
  scrollbar-width:none;
}

.sauleda-history-v3 .decade-nav::-webkit-scrollbar {
  display:none;
}

.sauleda-history-v3 .decade-pill {
  flex-shrink:0;
  padding:8px 16px;
  border:1px solid var(--border);
  border-radius:var(--pill);
  background:var(--white);
  color:var(--mid);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
  transition:all .2s var(--ease);
}

.sauleda-history-v3 .decade-pill:hover {
  border-color:var(--red);
  color:var(--red);
}

.sauleda-history-v3 .decade-pill.active {
  border-color:var(--red);
  background:var(--red);
  color:#fff;
}

.sauleda-history-v3 .timeline {
  position:relative;
  max-width:680px;
  margin:0 auto;
}

.sauleda-history-v3 .timeline-spine {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:34px;
  transform:translateX(-50%);
  opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='72' viewBox='0 0 34 72'%3E%3Cpath d='M17,0 C4,10 30,24 17,36 C4,48 30,62 17,72' fill='none' stroke='%23B82828' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='0.5 7'/%3E%3C/svg%3E");
  background-repeat:repeat-y;
  background-position:top center;
  background-size:34px 72px;
}

.sauleda-history-v3 .tl-era {
  position:relative;
  padding:30px 0 16px;
  text-align:center;
}

.sauleda-history-v3 .tl-era:first-of-type {
  padding-top:0;
}

.sauleda-history-v3 .tl-era-label {
  position:relative;
  z-index:1;
  display:inline-block;
  padding:7px 18px;
  border:1px solid var(--border);
  border-radius:var(--pill);
  background:var(--cream);
  box-shadow:0 0 0 10px var(--cream);
  color:var(--mid);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.sauleda-history-v3 .tl-era-row {
  display:grid;
  grid-template-columns:1fr 34px 1fr;
}

.sauleda-history-v3 .tl-col {
  display:flex;
  flex-direction:column;
  gap:28px;
}

.sauleda-history-v3 .tl-col-left {
  grid-column:1 / 2;
  align-items:flex-end;
  padding-right:24px;
}

.sauleda-history-v3 .tl-col-right {
  grid-column:3 / 4;
  align-items:flex-start;
  padding-top:56px;
  padding-left:24px;
}

.sauleda-history-v3 .tl-item {
  position:relative;
}

.sauleda-history-v3 .tl-year {
  margin-bottom:6px;
  color:var(--red);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
}

.sauleda-history-v3 .tl-dot {
  position:absolute;
  top:22px;
  z-index:2;
  width:11px;
  height:11px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 1px var(--border);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}

.sauleda-history-v3 .tl-col-left .tl-dot {
  right:-46px;
}

.sauleda-history-v3 .tl-col-right .tl-dot {
  left:-47px;
}

.sauleda-history-v3 .tl-item.is-visible .tl-dot {
  transform:scale(1.2);
  box-shadow:0 0 0 5px rgba(184,40,40,.14);
}

.sauleda-history-v3 .tl-card {
  width:260px;
  max-width:260px;
  overflow:hidden;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:#fff;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}

.sauleda-history-v3 .tl-thumb {
  width:calc(100% + 36px);
  aspect-ratio:16/10;
  margin:-16px -18px 14px;
  background-color:var(--cream-lt);
  background-position:center;
  background-size:cover;
}

.sauleda-history-v3 .tl-thumb-contain {
  aspect-ratio:16/8;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}

.sauleda-history-v3 .tl-item.is-visible .tl-card {
  border-color:rgba(184,40,40,.25);
  box-shadow:0 10px 26px rgba(26,26,24,.06);
}

.sauleda-history-v3 .tl-card h3 {
  margin:0 0 6px;
  color:var(--dark);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
}

.sauleda-history-v3 .tl-card p {
  margin:0;
  color:var(--mid);
  font-size:.76rem;
  line-height:1.58;
}

.sauleda-history-v3 .reveal {
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  will-change:opacity,transform;
}

.sauleda-history-v3 .reveal.is-visible {
  opacity:1;
  transform:translateY(0);
}

@media (max-width:640px) {
  

  

  

  .sauleda-history-v3 .timeline-spine {
    left:15px;
    width:24px;
    transform:none;
    background-size:24px 60px;
  }

  .sauleda-history-v3 .tl-era-row {
    grid-template-columns:30px 1fr;
  }

  .sauleda-history-v3 .tl-col-left,
  .sauleda-history-v3 .tl-col-right {
    grid-column:2 / 3;
    align-items:flex-start;
    padding-top:0;
    padding-right:0;
    padding-left:22px;
  }

  .sauleda-history-v3 .tl-col-left .tl-dot,
  .sauleda-history-v3 .tl-col-right .tl-dot {
    right:auto;
    left:-18px;
  }

  .sauleda-history-v3 .tl-card {
    width:100%;
    max-width:100%;
  }

  .sauleda-history-v3 .decade-nav {
    top:66px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .sauleda-history-v3 .reveal {
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ============================================================
   SAULEDA HISTORY · HERO + INTRO · DEFINICION UNICA
============================================================ */

/* Quitar cabecera CMS nativa de Hummingbird */
body.cms-id-6 .breadcrumb__wrapper,
body.cms-id-6 .center-column > .page-header {
  display: none !important;
}

body.cms-id-6 .columns-container.container,
body.cms-id-6 .center-column,
body.cms-id-6 .page-content--cms {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* HERO */
.sauleda-history-v3 .page-hero {
  position: relative;
  width: 100%;
  height: 44vh;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  background: #2a2a28;
}

.sauleda-history-v3 .page-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/themes/sauleda-store-theme/assets/img/cms/sauleda/history/history-hero.webp');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

.sauleda-history-v3 .page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(26,26,24,.70) 0%,
    rgba(26,26,24,.35) 60%,
    rgba(26,26,24,.24) 100%
  );
}

.sauleda-history-v3 .page-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 0 6% 52px;
  text-align: left;
}

.sauleda-history-v3 .page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  color: rgba(255,255,255,.65);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sauleda-history-v3 .page-hero h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(2.2rem,4vw,3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.sauleda-history-v3 .page-hero p {
  max-width: 540px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  line-height: 1.6;
}

/* ZONA BEIGE */
.sauleda-history-v3 .history-content-shell {
  width: 100%;
  margin: 0;
  background: var(--cream);
}

/* INTRO · igual que referencia */
.sauleda-history-v3 .content-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 84px 5% 90px;
}

.sauleda-history-v3 .content-header {
  width: 100%;
  max-width: 640px;
  margin: 0 0 40px;
  padding: 0;
  text-align: left;
}

.sauleda-history-v3 .sec-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-align: left;
  text-transform: uppercase;
}

.sauleda-history-v3 .sec-label::before {
  content: '';
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--red);
}

.sauleda-history-v3 .content-header p {
  margin: 0;
  color: var(--mid);
  font-size: .9rem;
  line-height: 1.8;
  text-align: left;
}

@media (max-width: 640px) {
  .sauleda-history-v3 .page-hero {
    height: 44vh;
    min-height: 360px;
  }

  .sauleda-history-v3 .page-hero-content {
    padding: 0 24px 38px;
  }

  .sauleda-history-v3 .content-section {
    padding: 56px 20px 72px;
  }
}

/* FIN HERO + INTRO · DEFINICION UNICA */


/* SAULEDA HISTORY · HERO DETRAS DEL HEADER */

/*
 * La referencia tiene una cabecera de 78px superpuesta al hero.
 * El header sigue conservando su funcionamiento sticky.
 */
body.cms-id-6 #header {
  position: relative;
  z-index: 100;
  background: transparent !important;
}

body.cms-id-6 #header .header,
body.cms-id-6 .sauleda-header,
body.cms-id-6 .sauleda-header__row {
  background-color: transparent !important;
}

/*
 * El header sigue ocupando 78px en el flujo de PrestaShop.
 * Recuperamos esos 78px para que el hero empiece físicamente
 * en la parte superior y quede por detrás del menú.
 */
body.cms-id-6 .sauleda-history-v3 .page-hero {
  margin-top: -84px !important;
}

/*
 * El hero mantiene 360px TOTALES, igual que la referencia.
 * El contenido queda abajo, no debajo de la navegación.
 */
body.cms-id-6 .sauleda-history-v3 .page-hero-content {
  padding-top: 78px !important;
}

/* FIN SAULEDA HISTORY · HERO DETRAS DEL HEADER */

/* SAULEDA HISTORY · SCROLL PROGRESS */

body.cms-id-6 #scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 0;
  height: 3px;
  background: #b82828;
  pointer-events: none;
}

/* FIN SAULEDA HISTORY · SCROLL PROGRESS */

/* SAULEDA VALUES V1 · MODELO ORIGINAL */

body.cms-id-7 .sauleda-values-v1 .sec-label {
display: inline-flex; align-items: center; gap: 8px; font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}

body.cms-id-7 .sauleda-values-v1 .sec-label::before {
content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0;
}

body.cms-id-7 .sauleda-values-v1 .page-hero {
position: relative; height: 44vh; min-height: 360px; overflow: hidden; background: #2a2a28;
}

body.cms-id-7 .sauleda-values-v1 .page-hero-bg {
position: absolute; inset: 0; background-size: cover; background-position: center 45%; background-image: url('/themes/sauleda-store-theme/assets/img/cms/sauleda/valores/hero-values.webp');
}

body.cms-id-7 .sauleda-values-v1 .page-hero-overlay {
position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,26,24,.7) 0%, rgba(26,26,24,.35) 60%, rgba(26,26,24,.24) 100%);
}

body.cms-id-7 .sauleda-values-v1 .page-hero-content {
position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6% 52px;
}

body.cms-id-7 .sauleda-values-v1 .page-breadcrumb {
display: flex; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 16px; flex-wrap: wrap;
}

body.cms-id-7 .sauleda-values-v1 .page-breadcrumb a {
color: rgba(255,255,255,.65); transition: color .2s;
}

body.cms-id-7 .sauleda-values-v1 .page-breadcrumb a:hover {
color: var(--white);
}

body.cms-id-7 .sauleda-values-v1 .page-hero h1 {
font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 700; color: var(--white); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 12px;
}

body.cms-id-7 .sauleda-values-v1 .page-hero p {
font-size: .9rem; color: rgba(255,255,255,.78); max-width: 540px; line-height: 1.6;
}

body.cms-id-7 .sauleda-values-v1 .content-section {
padding: 84px 5% 90px; max-width: 1280px; margin: 0 auto;
}

body.cms-id-7 .sauleda-values-v1 .content-header {
max-width: 640px; margin-bottom: 48px;
}

body.cms-id-7 .sauleda-values-v1 .content-header p {
font-size: .9rem; color: var(--mid); line-height: 1.8;
}

body.cms-id-7 .sauleda-values-v1 .values-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

body.cms-id-7 .sauleda-values-v1 .value-card {
background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; transition: box-shadow .3s, transform .3s;
}

body.cms-id-7 .sauleda-values-v1 .value-card:hover {
transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.08);
}

body.cms-id-7 .sauleda-values-v1 .value-card-img {
aspect-ratio: 1/1; background-size: cover; background-position: center;
}

body.cms-id-7 .sauleda-values-v1 .value-card-body {
padding: 26px 24px;
}

body.cms-id-7 .sauleda-values-v1 .value-card.no-img .value-card-body {
padding: 32px 26px;
}

body.cms-id-7 .sauleda-values-v1 .value-icon {
color: var(--red); width: 36px; height: 36px; margin-bottom: 18px;
}

body.cms-id-7 .sauleda-values-v1 .value-card h3 {
font-size: 1rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; letter-spacing: -.01em;
}

body.cms-id-7 .sauleda-values-v1 .value-card p {
font-size: .84rem; color: var(--mid); line-height: 1.7;
}

@media (max-width: 900px) {
body.cms-id-7 .sauleda-values-v1 .values-grid {
grid-template-columns: repeat(2,1fr);
}
}

@media (max-width: 580px) {
body.cms-id-7 .sauleda-values-v1 .values-grid {
grid-template-columns: 1fr;
}
}

body.cms-id-7 .sauleda-values-v1 .section-tinted {
background: var(--cream-lt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

body.cms-id-7 .sauleda-values-v1 .feature-split {
max-width: 1280px; margin: 0 auto; padding: 84px 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}

body.cms-id-7 .sauleda-values-v1 .feature-split-img {
aspect-ratio: 1/1; max-width: 460px; width: 100%; border-radius: var(--r-card); overflow: hidden; background-size: cover; background-position: center; justify-self: center;
}

body.cms-id-7 .sauleda-values-v1 .feature-split-body p {
font-size: .92rem; color: var(--mid); line-height: 1.85; margin-bottom: 16px;
}

body.cms-id-7 .sauleda-values-v1 .feature-split-body p:last-child {
margin-bottom: 0;
}

@media (max-width: 900px) {
body.cms-id-7 .sauleda-values-v1 .feature-split {
grid-template-columns: 1fr; gap: 32px; padding: 56px 6%;
}

body.cms-id-7 .sauleda-values-v1 .feature-split-img {
max-width: 100%;
}
}

body.cms-id-7 .sauleda-values-v1 .policy-panel {
max-width: 900px; margin: 0 auto; padding: 84px 5% 100px; text-align: center;
}

body.cms-id-7 .sauleda-values-v1 .policy-panel h2 {
font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; color: var(--dark); letter-spacing: -.02em; margin-bottom: 18px;
}

body.cms-id-7 .sauleda-values-v1 .policy-panel p {
font-size: .92rem; color: var(--mid); line-height: 1.85; max-width: 680px; margin: 0 auto 28px;
}

body.cms-id-7 .sauleda-values-v1 .policy-panel .btn-download {
display: inline-flex; align-items: center; gap: 8px;
}

body.cms-id-7 .sauleda-values-v1 .section-related {
padding: 70px 5% 100px; background: var(--white); border-top: 1px solid var(--border);
}

body.cms-id-7 .sauleda-values-v1 .related-inner {
max-width: 1280px; margin: 0 auto;
}

body.cms-id-7 .sauleda-values-v1 .related-label {
font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px;
}

body.cms-id-7 .sauleda-values-v1 .related-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

body.cms-id-7 .sauleda-values-v1 .related-card {
position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 16/10; display: block;
}

body.cms-id-7 .sauleda-values-v1 .related-img {
position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease;
}

body.cms-id-7 .sauleda-values-v1 .related-card:hover .related-img {
transform: scale(1.06);
}

body.cms-id-7 .sauleda-values-v1 .related-overlay {
position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,24,.8) 0%, transparent 55%);
}



@media (max-width: 900px) {
body.cms-id-7 .sauleda-values-v1 .related-grid {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 580px) {
body.cms-id-7 .sauleda-values-v1 .related-grid {
grid-template-columns: 1fr;
}
}

body.cms-id-7 .sauleda-values-v1 .section-logos {
padding: 44px 5%; background: var(--cream-lt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

body.cms-id-7 .sauleda-values-v1 .logos-label {
text-align: center; font-size: .63rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px;
}

body.cms-id-7 .sauleda-values-v1 .logos-track {
max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 20px;
}

@media (max-width: 700px) {
body.cms-id-7 .sauleda-values-v1 .logos-track {
grid-template-columns: repeat(2, 1fr); gap: 14px;
}
}

body.cms-id-7 .sauleda-values-v1 .reveal {
opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform;
}

body.cms-id-7 .sauleda-values-v1 .reveal.is-visible {
opacity: 1; transform: translateY(0);
}

body.cms-id-7 .sauleda-values-v1 .reveal-delay-1 {
transition-delay: .08s;
}

body.cms-id-7 .sauleda-values-v1 .reveal-delay-2 {
transition-delay: .16s;
}

body.cms-id-7 .sauleda-values-v1 .reveal-delay-3 {
transition-delay: .24s;
}

@media (prefers-reduced-motion: reduce) {
body.cms-id-7 .sauleda-values-v1 .reveal {
opacity: 1; transform: none; transition: none;
}
}



.sauleda-values-v1 {
  --red:#b82828;
  --red-dk:#921f1f;
  --dark:#1a1a18;
  --mid:#666660;
  --muted:#8b8a83;
  --cream:#f1ede3;
  --cream-lt:#f7f4ed;
  --white:#fff;
  --border:rgba(26,26,24,.12);
  --pill:999px;
  --r-card:14px;
  --r-img:12px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body.cms-id-7 .breadcrumb__wrapper,
body.cms-id-7 .center-column > .page-header {
  display:none!important;
}

body.cms-id-7 .columns-container.container,
body.cms-id-7 .center-column,
body.cms-id-7 .page-content--cms {
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

/* Hero detrás del menú, igual que History */
body.cms-id-7 #header {
  position:relative;
  z-index:100;
  background:transparent!important;
}

body.cms-id-7 .sauleda-header,
body.cms-id-7 .sauleda-header__row {
  background-color:transparent!important;
}

body.cms-id-7 .sauleda-values-v1 .page-hero {
  margin-top:-84px!important;
}

body.cms-id-7 .sauleda-values-v1 .page-hero-content {
  padding-top:84px!important;
}

body.cms-id-7 .sauleda-values-v1 .page-hero-bg {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/valores/hero-values.webp')!important;
  background-position:center 45%!important;
}

/* Barra superior */
body.cms-id-7 #scrollProgress {
  position:fixed;
  top:0;
  left:0;
  z-index:2147483647;
  width:0;
  height:3px;
  background:#b82828;
  pointer-events:none;
}



/* FIN SAULEDA VALUES V1 · MODELO ORIGINAL */


/* SAULEDA VALUES · RELATED LINK FIX */

body.cms-id-7 .sauleda-values-v1 .related-card {
  position: relative;
}

body.cms-id-7 .sauleda-values-v1 .related-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
}



/* FIN SAULEDA VALUES · RELATED LINK FIX */


/* SAULEDA VALUES · QUALITY BUTTON */

body.cms-id-7 .sauleda-values-v1 .policy-panel .btn-pill-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: #b82828;
  color: #fff !important;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none !important;
  transition:
    background .25s ease,
    transform .25s ease;
}

body.cms-id-7 .sauleda-values-v1 .policy-panel .btn-pill-red:hover {
  background: #921f1f;
  color: #fff !important;
  transform: translateY(-1px);
}

body.cms-id-7 .sauleda-values-v1 .policy-panel .btn-download::before {
  content: "↓";
  display: inline-block;
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

body.cms-id-7 .sauleda-values-v1 .policy-panel .btn-download svg {
  display: none;
}

/* FIN SAULEDA VALUES · QUALITY BUTTON */

/* SAULEDA VALUES · TITULO PRINCIPAL */

body.cms-id-7 .sauleda-values-v1 .content-header h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 18px;
}

/* FIN SAULEDA VALUES · TITULO PRINCIPAL */

/* SAULEDA VALUES · RELATED TITLE CANONICO */

body.cms-id-7 .sauleda-values-v1 .related-title {
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
  z-index: 4;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  pointer-events: none;
}

/* FIN SAULEDA VALUES · RELATED TITLE CANONICO */

/* SAULEDA SUSTAINABILITY V1 */

body.cms-id-8 .breadcrumb__wrapper,
body.cms-id-8 .center-column > .page-header {
  display: none !important;
}

body.cms-id-8 .columns-container > .container,
body.cms-id-8 .columns-container > .container > .row,
body.cms-id-8 .columns-container .center-column,
body.cms-id-8 .page-content--cms {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cms-id-8 .page-content--cms.rich-text {
  overflow: visible !important;
}

body.cms-id-8 .header,
body.cms-id-8 .header-top,
body.cms-id-8 .header-bottom {
  background-color: transparent !important;
}

body.cms-id-8 .header-top,
body.cms-id-8 .header-bottom {
  border-color: transparent !important;
}

body.cms-id-8 .sauleda-sustainability-v1 {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--dark);
}

body.cms-id-8 .sauleda-sustainability-v1 .page-hero {
  position: relative;
  height: 44vh;
  min-height: 360px;
  overflow: hidden;
  margin-top: -84px !important;
  background: #2a2a28;
}

body.cms-id-8 .sauleda-sustainability-v1 .page-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/sostenibilidad/hero-sustainability.webp');
  background-size: cover;
  background-position: center 45%;
}

body.cms-id-8 .sauleda-sustainability-v1 .page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.70) 0%,
      rgba(26,26,24,.35) 60%,
      rgba(26,26,24,.24) 100%
    );
}

body.cms-id-8 .sauleda-sustainability-v1 .page-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 84px 6% 52px;
}

body.cms-id-8 .sauleda-sustainability-v1 .page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  color: rgba(255,255,255,.65);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.cms-id-8 .sauleda-sustainability-v1 .page-breadcrumb a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
}

body.cms-id-8 .sauleda-sustainability-v1 .page-breadcrumb a:hover {
  color: #fff;
}

body.cms-id-8 .sauleda-sustainability-v1 .page-hero h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(2.2rem,4vw,3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}

body.cms-id-8 .sauleda-sustainability-v1 .page-hero p {
  max-width: 540px;
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  line-height: 1.6;
}

body.cms-id-8 .sauleda-sustainability-v1 .content-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 84px 5% 0;
}

body.cms-id-8 .sauleda-sustainability-v1 .content-section--products {
  padding-top: 0;
  padding-bottom: 40px;
}

body.cms-id-8 .sauleda-sustainability-v1 .content-header {
  max-width: 720px;
  margin-bottom: 40px;
}

body.cms-id-8 .sauleda-sustainability-v1 .content-header p {
  margin: 0 0 14px;
  color: var(--mid);
  font-size: .92rem;
  line-height: 1.85;
}

body.cms-id-8 .sauleda-sustainability-v1 .content-header p:last-child {
  margin-bottom: 0;
}

body.cms-id-8 .sauleda-sustainability-v1 .sec-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.cms-id-8 .sauleda-sustainability-v1 .sec-label::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--red);
}

body.cms-id-8 .sauleda-sustainability-v1 .sec-h2 {
  margin: 0 0 16px;
  color: var(--dark);
  font-size: clamp(1.4rem,2.2vw,1.9rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

body.cms-id-8 .sauleda-sustainability-v1 .icon-features-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px 24px;
  margin-bottom: 56px;
}

body.cms-id-8 .sauleda-sustainability-v1 .icon-feature img {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  object-fit: contain;
}

body.cms-id-8 .sauleda-sustainability-v1 .icon-feature h4 {
  margin: 0 0 6px;
  color: var(--dark);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.005em;
}

body.cms-id-8 .sauleda-sustainability-v1 .icon-feature p {
  margin: 0;
  color: var(--mid);
  font-size: .8rem;
  line-height: 1.6;
}

body.cms-id-8 .sauleda-sustainability-v1 .plant-heading {
  margin-bottom: 18px;
  color: var(--red);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.cms-id-8 .sauleda-sustainability-v1 .plant-heading--content {
  margin-top: 0;
  margin-bottom: 16px;
}

body.cms-id-8 .sauleda-sustainability-v1 .stats-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 56px;
}

body.cms-id-8 .sauleda-sustainability-v1 .stat-card {
  padding: 30px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: #fff;
  text-align: center;
}

body.cms-id-8 .sauleda-sustainability-v1 .stat-num {
  margin-bottom: 8px;
  color: var(--red);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

body.cms-id-8 .sauleda-sustainability-v1 .stat-label {
  margin: 0;
  color: var(--mid);
  font-size: .8rem;
  line-height: 1.55;
}

body.cms-id-8 .sauleda-sustainability-v1 .banner-wide {
  overflow: hidden;
  aspect-ratio: 3/1;
  margin-bottom: 56px;
  border-radius: var(--r-card);
}

body.cms-id-8 .sauleda-sustainability-v1 .banner-wide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.cms-id-8 .sauleda-sustainability-v1 .products-intro-lead {
  max-width: 680px;
  color: var(--dark) !important;
  font-size: 1.15rem !important;
  font-weight: 500;
  line-height: 1.6 !important;
  letter-spacing: -.01em;
}

body.cms-id-8 .sauleda-sustainability-v1 .product-block {
  margin-bottom: 40px;
  padding: 56px 5% 72px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: #fff;
}

body.cms-id-8 .sauleda-sustainability-v1 .product-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 10px 20px 10px 14px;
  border-radius: var(--pill);
  background: var(--cream-lt);
}

body.cms-id-8 .sauleda-sustainability-v1 .product-tag img {
  display: block;
  width: auto;
  height: 30px;
}

body.cms-id-8 .sauleda-sustainability-v1 .product-block > p {
  max-width: 720px;
  margin: 0 0 28px;
  color: var(--mid);
  font-size: .92rem;
  line-height: 1.85;
}

body.cms-id-8 .sauleda-sustainability-v1 .process-strip {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-bottom: 32px;
}

body.cms-id-8 .sauleda-sustainability-v1 .process-strip.six {
  grid-template-columns: repeat(6,1fr);
}

body.cms-id-8 .sauleda-sustainability-v1 .process-step img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--cream-lt);
  object-fit: cover;
}

body.cms-id-8 .sauleda-sustainability-v1 .process-step .num {
  margin-bottom: 3px;
  color: var(--red);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
}

body.cms-id-8 .sauleda-sustainability-v1 .process-step p {
  margin: 0;
  color: var(--mid);
  font-size: .68rem;
  line-height: 1.4;
}

body.cms-id-8 .sauleda-sustainability-v1 .green-footnote {
  margin-top: -16px !important;
  margin-bottom: 28px !important;
  color: var(--muted) !important;
  font-size: .68rem !important;
}

body.cms-id-8 .sauleda-sustainability-v1 .infographic-wrap {
  overflow: hidden;
  margin-bottom: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: #fff;
}

body.cms-id-8 .sauleda-sustainability-v1 .infographic-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

body.cms-id-8 .sauleda-sustainability-v1 .section-related {
  padding: 70px 5% 100px;
  border-top: 1px solid var(--border);
  background: #fff;
}

body.cms-id-8 .sauleda-sustainability-v1 .related-inner {
  max-width: 1280px;
  margin: 0 auto;
}

body.cms-id-8 .sauleda-sustainability-v1 .related-label {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.cms-id-8 .sauleda-sustainability-v1 .related-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

body.cms-id-8 .sauleda-sustainability-v1 .related-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  border-radius: var(--r-card);
}

body.cms-id-8 .sauleda-sustainability-v1 .related-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: transform .6s ease;
}

body.cms-id-8 .sauleda-sustainability-v1 .related-card:hover .related-img {
  transform: scale(1.06);
}

body.cms-id-8 .sauleda-sustainability-v1 .related-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to top,
      rgba(26,26,24,.8) 0%,
      transparent 55%
    );
}

body.cms-id-8 .sauleda-sustainability-v1 .related-title {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 4;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  pointer-events: none;
}

body.cms-id-8 .sauleda-sustainability-v1 .related-hit {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
}





body.cms-id-8 #scrollProgressSustainability {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 0;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--red) 0%,
      var(--red-dk) 100%
    );
  box-shadow: 0 0 12px rgba(184,40,40,.45);
  pointer-events: none;
}

@media (max-width: 900px) {

  body.cms-id-8 .sauleda-sustainability-v1 .related-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 760px) {

  body.cms-id-8 .sauleda-sustainability-v1 .icon-features-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.cms-id-8 .sauleda-sustainability-v1 .stats-row {
    grid-template-columns: 1fr;
  }

  body.cms-id-8 .sauleda-sustainability-v1 .process-strip,
  body.cms-id-8 .sauleda-sustainability-v1 .process-strip.six {
    grid-template-columns: repeat(3,1fr);
  }

}

@media (max-width: 580px) {

  body.cms-id-8 .sauleda-sustainability-v1 .related-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 480px) {

  body.cms-id-8 .sauleda-sustainability-v1 .icon-features-grid {
    grid-template-columns: 1fr;
  }

  body.cms-id-8 .sauleda-sustainability-v1 .process-strip,
  body.cms-id-8 .sauleda-sustainability-v1 .process-strip.six {
    grid-template-columns: repeat(2,1fr);
  }

}

/* FIN SAULEDA SUSTAINABILITY V1 */

/* SAULEDA SUSTAINABILITY VISUAL FIX */

/*
 * Romper definitivamente cualquier container
 * heredado de Hummingbird.
 */
body.cms-id-8 {
  overflow-x: hidden;
}

body.cms-id-8 .sauleda-sustainability-v1 {
  position: relative;
  left: 50%;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/*
 * Mantener el contenido interior amplio,
 * pero sin volver a encerrar toda la página.
 */
body.cms-id-8
.sauleda-sustainability-v1
.content-section {
  width: 100%;
  max-width: 1120px;
}

/*
 * Hero: misma foto pero claramente visible.
 */
body.cms-id-8
.sauleda-sustainability-v1
.page-hero-bg {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/sostenibilidad/hero-sustainability.webp')
    !important;
  background-position: center 45% !important;
  background-size: cover !important;
  opacity: 1 !important;
}

body.cms-id-8
.sauleda-sustainability-v1
.page-hero-overlay {
  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.52) 0%,
      rgba(26,26,24,.22) 60%,
      rgba(26,26,24,.12) 100%
    ) !important;
}

/*
 * Media de la planta de hilatura.
 * El mockup usaba MP4; mientras no exista,
 * usamos el recurso oficial actual de Sauleda.
 */
body.cms-id-8
.sauleda-sustainability-v1
.sos-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 8;
  margin-bottom: 56px;
  border-radius: var(--r-card);
  background: #1a1a18;
}

body.cms-id-8
.sauleda-sustainability-v1
.sos-video img,
body.cms-id-8
.sauleda-sustainability-v1
.sos-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Tarjetas de descarga.
 */
body.cms-id-8
.sauleda-sustainability-v1
.download-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 420px;
  margin: 28px 0 56px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: #fff;
  color: var(--dark);
  text-decoration: none !important;
  transition:
    box-shadow .25s,
    transform .25s;
}

body.cms-id-8
.sauleda-sustainability-v1
.download-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(0,0,0,.08);
}

body.cms-id-8
.sauleda-sustainability-v1
.download-card > img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
}

body.cms-id-8
.sauleda-sustainability-v1
.download-card-body h4 {
  margin: 0 0 4px;
  color: var(--dark);
  font-size: .88rem;
  font-weight: 600;
}

body.cms-id-8
.sauleda-sustainability-v1
.download-card-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--red);
  font-size: .76rem;
  font-weight: 500;
}

body.cms-id-8
.sauleda-sustainability-v1
.download-card-action::before {
  content: "↓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #b82828;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

/*
 * Barra de progreso.
 *
 * Color explícito: la barra vive fuera del
 * .sauleda-cms y no debe depender de variables
 * heredadas de ese bloque.
 */
body.cms-id-8 #scrollProgressSustainability {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2147483647 !important;
  display: block !important;
  width: 0;
  height: 3px !important;
  background:
    linear-gradient(
      90deg,
      #b82828 0%,
      #8f1e1e 100%
    ) !important;
  box-shadow:
    0 0 12px rgba(184,40,40,.45);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

/* FIN SAULEDA SUSTAINABILITY VISUAL FIX */

/* SAULEDA SUSTAINABILITY REVEAL MODEL */

/*
 * Comportamiento del mockup original:
 *
 * opacity 0
 * translateY 36px
 * duración 0.9s
 *
 * Se activa exclusivamente al entrar
 * en viewport mediante IntersectionObserver.
 */
body.cms-id-8
.sauleda-sustainability-v1
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    transform .9s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

body.cms-id-8
.sauleda-sustainability-v1
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* FIN SAULEDA SUSTAINABILITY REVEAL MODEL */



/* SAULEDA SUSTAINABILITY CANONICAL V2 */

body.cms-id-8 {
  overflow-x: hidden;
}

body.cms-id-8 .page-content--cms {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

body.cms-id-8 .sauleda-sustainability-v2 {

  --cream: #EDE8DC;
  --cream-lt: #F3F3F4;
  --white: #FFFFFF;
  --dark: #1A1A18;
  --mid: #4A4540;
  --muted: #8C8680;
  --red: #B82828;
  --red-dk: #8C1F1F;
  --border: #D8D2C8;
  --r-card: 14px;
  --pill: 999px;
  --ease: cubic-bezier(.4,0,.2,1);

  position: relative;
  left: 50%;

  width: 100vw;
  max-width: 100vw;

  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--cream);
  color: var(--dark);

  overflow: hidden;
}

body.cms-id-8
.sauleda-sustainability-v2
.page-hero {

  position: relative;

  height: 44vh;
  min-height: 360px;

  margin-top: -84px;

  overflow: hidden;

  background: #2a2a28;
}

body.cms-id-8
.sauleda-sustainability-v2
.page-hero-bg {

  position: absolute;
  inset: 0;

  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/sostenibilidad/hero-sustainability.webp');

  background-size: cover;
  background-position: center 45%;
}

body.cms-id-8
.sauleda-sustainability-v2
.page-hero-overlay {

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.70) 0%,
      rgba(26,26,24,.35) 60%,
      rgba(26,26,24,.24) 100%
    );
}

body.cms-id-8
.sauleda-sustainability-v2
.page-hero-content {

  position: relative;
  z-index: 2;

  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding:
    84px 6% 52px;
}

body.cms-id-8
.sauleda-sustainability-v2
.page-breadcrumb {

  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 16px;

  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;

  color: rgba(255,255,255,.65);
}

body.cms-id-8
.sauleda-sustainability-v2
.page-hero h1 {

  margin: 0 0 12px;

  font-size:
    clamp(2.2rem,4vw,3.6rem);

  font-weight: 700;

  line-height: 1.05;
  letter-spacing: -.025em;

  color: var(--white);
}

body.cms-id-8
.sauleda-sustainability-v2
.page-hero p {

  max-width: 540px;

  margin: 0;

  font-size: .9rem;
  line-height: 1.6;

  color: rgba(255,255,255,.78);
}


body.cms-id-8
.sauleda-sustainability-v2
.content-section {

  width: 100%;
  max-width: 1120px;

  margin: 0 auto;

  padding:
    84px 5% 0;
}

body.cms-id-8
.sauleda-sustainability-v2
.content-header {

  max-width: 720px;

  margin-bottom: 40px;
}

body.cms-id-8
.sauleda-sustainability-v2
.content-header p,
body.cms-id-8
.sauleda-sustainability-v2
.product-block > p {

  margin-bottom: 14px;

  font-size: .92rem;
  line-height: 1.85;

  color: var(--mid);
}

body.cms-id-8
.sauleda-sustainability-v2
.sec-label {

  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 18px;

  font-size: .66rem;
  font-weight: 500;

  letter-spacing: .2em;
  text-transform: uppercase;

  color: var(--muted);
}

body.cms-id-8
.sauleda-sustainability-v2
.sec-label::before {

  content: '';

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--red);

  flex-shrink: 0;
}

body.cms-id-8
.sauleda-sustainability-v2
.sec-h2 {

  margin-bottom: 16px;

  font-size:
    clamp(1.4rem,2.2vw,1.9rem);

  font-weight: 700;

  line-height: 1.25;
  letter-spacing: -.02em;

  color: var(--dark);
}


body.cms-id-8
.sauleda-sustainability-v2
.icon-features-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 32px 24px;

  margin-bottom: 56px;
}

body.cms-id-8
.sauleda-sustainability-v2
.icon-feature img {

  width: 50px;
  height: 50px;

  margin-bottom: 12px;
}

body.cms-id-8
.sauleda-sustainability-v2
.icon-feature h4 {

  margin-bottom: 6px;

  font-size: .84rem;
  font-weight: 600;

  letter-spacing: -.005em;

  color: var(--dark);
}

body.cms-id-8
.sauleda-sustainability-v2
.icon-feature p {

  margin: 0;

  font-size: .8rem;
  line-height: 1.6;

  color: var(--mid);
}


body.cms-id-8
.sauleda-sustainability-v2
.download-card {

  display: flex;
  align-items: center;

  gap: 18px;

  max-width: 420px;

  margin:
    28px 0 56px;

  padding: 16px;

  background: var(--white);

  border:
    1px solid var(--border);

  border-radius:
    var(--r-card);

  color: inherit;

  text-decoration: none;

  transition:
    box-shadow .25s,
    transform .25s;
}

body.cms-id-8
.sauleda-sustainability-v2
.download-card:hover {

  box-shadow:
    0 12px 30px rgba(0,0,0,.08);

  transform:
    translateY(-2px);
}

body.cms-id-8
.sauleda-sustainability-v2
.download-card > img {

  width: 60px;
  height: 60px;

  flex-shrink: 0;

  object-fit: cover;

  border-radius: 8px;
}

body.cms-id-8
.sauleda-sustainability-v2
.download-card-body h4 {

  margin-bottom: 4px;

  font-size: .88rem;
  font-weight: 600;

  color: var(--dark);
}

body.cms-id-8
.sauleda-sustainability-v2
.download-action {

  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-size: .76rem;
  font-weight: 500;

  color: var(--red);
}

body.cms-id-8
.sauleda-sustainability-v2
.download-icon {

  position: relative;

  display: inline-block;

  width: 13px;
  height: 14px;
}

body.cms-id-8
.sauleda-sustainability-v2
.download-icon::before {

  content: '';

  position: absolute;

  left: 6px;
  top: 0;

  width: 1.5px;
  height: 8px;

  background: currentColor;
}

body.cms-id-8
.sauleda-sustainability-v2
.download-icon::after {

  content: '↓';

  position: absolute;

  left: 1px;
  top: -5px;

  font-size: 16px;
  line-height: 16px;

  color: currentColor;
}


body.cms-id-8
.sauleda-sustainability-v2
.plant-header {

  margin-bottom: 18px;
}

body.cms-id-8
.sauleda-sustainability-v2
.plant-heading {

  margin-bottom: 18px;

  font-size: .68rem;
  font-weight: 700;

  letter-spacing: .18em;
  text-transform: uppercase;

  color: var(--red) !important;
}


body.cms-id-8
.sauleda-sustainability-v2
.sos-video {

  position: relative;

  aspect-ratio: 16 / 8;

  margin-bottom: 56px;

  overflow: hidden;

  border-radius:
    var(--r-card);

  background: #1a1a18;
}

body.cms-id-8
.sauleda-sustainability-v2
.sos-video video {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

body.cms-id-8
.sauleda-sustainability-v2
.sos-video.small {

  max-width: 640px;

  aspect-ratio: 16 / 9;

  margin:
    0 0 32px;
}


body.cms-id-8
.sauleda-sustainability-v2
.stats-row {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 20px;

  margin-bottom: 56px;
}

body.cms-id-8
.sauleda-sustainability-v2
.stat-card {

  padding: 30px 24px;

  text-align: center;

  background: var(--white);

  border:
    1px solid var(--border);

  border-radius:
    var(--r-card);
}

body.cms-id-8
.sauleda-sustainability-v2
.stat-num {

  margin-bottom: 8px;

  font-size: 2.2rem;
  font-weight: 700;

  letter-spacing: -.02em;

  color: var(--red);
}

body.cms-id-8
.sauleda-sustainability-v2
.stat-label {

  margin: 0;

  font-size: .8rem;
  line-height: 1.55;

  color: var(--mid);
}


body.cms-id-8
.sauleda-sustainability-v2
.banner-wide {

  aspect-ratio: 3 / 1;

  margin-bottom: 56px;

  overflow: hidden;

  border-radius:
    var(--r-card);
}

body.cms-id-8
.sauleda-sustainability-v2
.banner-wide img {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


body.cms-id-8
.sauleda-sustainability-v2
.factories-copy {

  margin-bottom: 20px;
}


body.cms-id-8
.sauleda-sustainability-v2
.products-section {

  padding-top: 56px;

  padding-bottom: 72px;
}

body.cms-id-8
.sauleda-sustainability-v2
.products-intro-lead {

  max-width: 680px;

  font-size: 1.15rem !important;
  font-weight: 500;

  line-height: 1.6 !important;
  letter-spacing: -.01em;

  color: var(--dark) !important;
}


body.cms-id-8
.sauleda-sustainability-v2
.product-block {

  margin-bottom: 40px;

  padding:
    56px 5% 72px;

  background: var(--white);

  border:
    1px solid var(--border);

  border-radius:
    var(--r-card);
}

body.cms-id-8
.sauleda-sustainability-v2
.product-tag {

  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 28px;

  padding:
    10px 20px 10px 14px;

  background:
    var(--cream-lt);

  border-radius:
    var(--pill);
}

body.cms-id-8
.sauleda-sustainability-v2
.product-tag img {

  display: block;

  width: auto;
  height: 30px;
}

body.cms-id-8
.sauleda-sustainability-v2
.product-block > p {

  max-width: 720px;

  margin-bottom: 28px;
}


body.cms-id-8
.sauleda-sustainability-v2
.process-strip {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 16px;

  margin-bottom: 32px;
}

body.cms-id-8
.sauleda-sustainability-v2
.process-strip.six {

  grid-template-columns:
    repeat(6,1fr);
}

body.cms-id-8
.sauleda-sustainability-v2
.process-step img {

  width: 100%;

  aspect-ratio: 1 / 1;

  margin-bottom: 8px;

  object-fit: cover;

  border-radius: 10px;

  background:
    var(--cream-lt);
}

body.cms-id-8
.sauleda-sustainability-v2
.process-step .num {

  margin-bottom: 3px;

  font-size: .64rem;
  font-weight: 700;

  letter-spacing: .08em;

  color: var(--red);
}

body.cms-id-8
.sauleda-sustainability-v2
.process-step p {

  margin: 0;

  font-size: .68rem;
  line-height: 1.4;

  color: var(--mid);
}


body.cms-id-8
.sauleda-sustainability-v2
.green-footnote {

  margin:
    -16px 0 28px !important;

  font-size: .68rem !important;

  color: var(--muted) !important;
}


body.cms-id-8
.sauleda-sustainability-v2
.infographic-wrap {

  margin-bottom: 32px;

  overflow: hidden;

  background: var(--white);

  border:
    1px solid var(--border);

  border-radius:
    var(--r-card);
}

body.cms-id-8
.sauleda-sustainability-v2
.infographic-wrap img {

  width: 100%;

  display: block;
}


/* RELATED conservado */

body.cms-id-8
.sauleda-sustainability-v2
.section-related {

  width: 100vw;

  position: relative;
  left: 50%;

  margin-left: -50vw;

  padding:
    70px 5% 100px;

  background:
    var(--white);

  border-top:
    1px solid var(--border);
}

body.cms-id-8
.sauleda-sustainability-v2
.related-inner {

  max-width: 1280px;

  margin: 0 auto;
}

body.cms-id-8
.sauleda-sustainability-v2
.related-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 16px;
}

body.cms-id-8
.sauleda-sustainability-v2
.related-card {

  position: relative;

  display: block;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  border-radius:
    var(--r-card);
}


/* REVEAL EXACTO DEL MODELO */

body.cms-id-8
.sauleda-sustainability-v2
.reveal {

  opacity: 0;

  transform:
    translateY(36px);

  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);

  will-change:
    opacity,
    transform;
}

body.cms-id-8
.sauleda-sustainability-v2
.reveal.is-visible {

  opacity: 1;

  transform:
    translateY(0);
}


/* PROGRESS */

#scrollProgressSustainability {

  position: fixed;

  top: 0;
  left: 0;

  width: 0%;
  height: 3px;

  z-index: 2147483647;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      #B82828 0%,
      #8C1F1F 100%
    );

  box-shadow:
    0 0 12px rgba(184,40,40,.45);

  transition:
    width .1s linear;
}


@media (max-width: 760px) {

  body.cms-id-8
  .sauleda-sustainability-v2
  .icon-features-grid {

    grid-template-columns:
      1fr 1fr;
  }

  body.cms-id-8
  .sauleda-sustainability-v2
  .stats-row {

    grid-template-columns:
      1fr;
  }

  body.cms-id-8
  .sauleda-sustainability-v2
  .process-strip,
  body.cms-id-8
  .sauleda-sustainability-v2
  .process-strip.six {

    grid-template-columns:
      repeat(3,1fr);
  }
}


@media (max-width: 480px) {

  body.cms-id-8
  .sauleda-sustainability-v2
  .icon-features-grid {

    grid-template-columns:
      1fr;
  }

  body.cms-id-8
  .sauleda-sustainability-v2
  .process-strip,
  body.cms-id-8
  .sauleda-sustainability-v2
  .process-strip.six {

    grid-template-columns:
      repeat(2,1fr);
  }
}


@media (prefers-reduced-motion: reduce) {

  body.cms-id-8
  .sauleda-sustainability-v2
  .reveal {

    opacity: 1;

    transform: none;

    transition: none;
  }
}

/* FIN SAULEDA SUSTAINABILITY CANONICAL V2 */


/* SAULEDA SUSTAINABILITY SAFE DOWNLOAD CARDS */

body.cms-id-8
.sauleda-sustainability-v2
.download-card-safe {
  position: relative;
}

body.cms-id-8
.sauleda-sustainability-v2
.download-hit {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: block;

  border: 0;
  padding: 0;
  margin: 0;

  background: transparent;

  text-decoration: none;
}

/* FIN SAULEDA SUSTAINABILITY SAFE DOWNLOAD CARDS */



/* SAULEDA SUSTAINABILITY RELATED + LOOP FULL VIDEO */


/* ==================================================
 * LOOP VIDEO · 100% DEL CONTENEDOR
 * ================================================== */

body.cms-id-8
.sauleda-sustainability-v2
.product-loop
.sos-video.small {

  width: 100% !important;
  max-width: none !important;

  aspect-ratio: 16 / 9;

  margin:
    0 0 32px;
}

body.cms-id-8
.sauleda-sustainability-v2
.product-loop
.sos-video.small video {

  width: 100% !important;
  height: 100% !important;

  display: block;

  object-fit: cover;
}


/* ==================================================
 * CONTINUE EXPLORING
 * ================================================== */

body.cms-id-8
.sauleda-sustainability-v2
.section-related {

  position: relative;

  left: 50%;

  width: 100vw;

  margin-left: -50vw;

  padding:
    70px 5% 100px;

  background: #ffffff;

  border-top:
    1px solid var(--border);
}


body.cms-id-8
.sauleda-sustainability-v2
.related-inner {

  width: 100%;

  max-width: 1280px;

  margin: 0 auto;
}


body.cms-id-8
.sauleda-sustainability-v2
.related-label {

  margin-bottom: 24px;

  font-size: .66rem;
  font-weight: 500;

  letter-spacing: .2em;
  text-transform: uppercase;

  color: var(--muted);
}


body.cms-id-8
.sauleda-sustainability-v2
.related-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 16px;
}


body.cms-id-8
.sauleda-sustainability-v2
.related-card {

  position: relative;

  display: block;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  border-radius:
    var(--r-card);

  background: #1a1a18;
}


body.cms-id-8
.sauleda-sustainability-v2
.related-photo {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .6s ease;
}


body.cms-id-8
.sauleda-sustainability-v2
.related-card:hover
.related-photo {

  transform:
    scale(1.06);
}


body.cms-id-8
.sauleda-sustainability-v2
.related-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(26,26,24,.80) 0%,
      rgba(26,26,24,.20) 55%,
      transparent 75%
    );

  pointer-events: none;
}


body.cms-id-8
.sauleda-sustainability-v2
.related-title {

  position: absolute;

  left: 18px;
  right: 18px;
  bottom: 16px;

  z-index: 2;

  font-size: 1rem;
  font-weight: 600;

  letter-spacing: -.01em;

  color: #ffffff;

  pointer-events: none;
}


body.cms-id-8
.sauleda-sustainability-v2
.related-hit {

  position: absolute;

  inset: 0;

  z-index: 5;

  display: block;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  text-decoration: none;
}


@media (max-width: 900px) {

  body.cms-id-8
  .sauleda-sustainability-v2
  .related-grid {

    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 580px) {

  body.cms-id-8
  .sauleda-sustainability-v2
  .related-grid {

    grid-template-columns:
      1fr;
  }

}


/* FIN SAULEDA SUSTAINABILITY RELATED + LOOP FULL VIDEO */



/* SAULEDA MASACRIL MODEL FIX V2 */


/* ==========================================================
   PRESTASHOP / HUMMINGBIRD
   ========================================================== */

body.cms-id-9 {
  overflow-x: hidden;
}


/*
 * Ocultar encabezado CMS nativo.
 * El modelo ya tiene su propio breadcrumb y su propio H1.
 */
body.cms-id-9 .breadcrumb,
body.cms-id-9 .page-header {
  display: none !important;
}

body.cms-id-9
.page-content--cms > h1:first-child {
  display: none !important;
}

body.cms-id-9
.page-content--cms {

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
 * Sacar CMS 9 del container de Hummingbird.
 */
body.cms-id-9
.sauleda-masacril-v1 {

--red: #B82828; --red-dk: #8C1F1F; --dark: #1A1A18; --mid: #4A4540; --muted: #8C8680;
    --cream: #EDE8DC; --cream-lt: #F3F3F4; --white: #FFFFFF; --border: #D8D2C8;
    --font: 'Space Grotesk', system-ui, sans-serif; --pill: 999px; --r-card: 14px; --r-img: 12px;
    --ease: cubic-bezier(.4,0,.2,1);

  position: relative;

  left: 50%;

  width: 100vw !important;
  max-width: 100vw !important;

  margin-left: -50vw !important;
  margin-right: -50vw !important;

  overflow: hidden;

  background: var(--cream);
  color: var(--dark);
}


/* ==========================================================
   CSS ORIGINAL DEL MODELO
   ========================================================== */

@scope (.sauleda-masacril-v1) {


  
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: var(--font); background: var(--cream); color: var(--dark); overflow-x: hidden; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; } img { display: block; max-width: 100%; } button { cursor: pointer; font-family: var(--font); }

  .nav-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 16px); transition: top .3s var(--ease); }
  .nav-wrap.scrolled { top: 10px; }
  .navbar { height: 52px; background: var(--red); border-radius: var(--pill); display: inline-flex; align-items: center; padding: 0 22px; width: auto; flex-shrink: 0; box-shadow: 0 4px 24px rgba(184,40,40,.25); transition: box-shadow .3s; }
  .nav-wrap.scrolled .navbar { box-shadow: 0 6px 32px rgba(184,40,40,.32); }
  .nav-logo { flex-shrink: 0; margin-right: 20px; line-height: 1; display: flex; align-items: center; }
  .nav-logo img { height: 22px; width: auto; display: block; }
  .logo-fallback-white { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--white); white-space: nowrap; }
  .logo-fallback-red { font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; color: var(--red); white-space: nowrap; }
  .nav-links { display: flex; align-items: center; gap: 4px; margin-right: auto; flex-shrink: 0; }
  .nav-links a { font-size: .76rem; font-weight: 400; letter-spacing: .04em; color: rgba(255,255,255,.85); padding: 6px 12px; border-radius: var(--pill); transition: background .2s; }
  .nav-links a:hover, .nav-links a.current { background: rgba(255,255,255,.16); color: var(--white); }
  .nav-dropdown { position: relative; }
  .dropdown-chevron { display: inline-block; margin-left: 3px; font-size: .6rem; transition: transform .2s; }
  .nav-dropdown:hover .dropdown-chevron { transform: rotate(180deg); }
  .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; min-width: 216px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility .2s; z-index: 400; }
  .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; }
  .dropdown-panel { background: var(--white); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 8px; transform: translateY(4px); transition: transform .2s var(--ease); }
  .nav-dropdown:hover .dropdown-panel { transform: translateY(0); }
  .dropdown-menu a { display: block; padding: 9px 14px; border-radius: 8px; font-size: .78rem; font-weight: 400; letter-spacing: .01em; color: var(--dark); background: transparent; }
  .dropdown-menu a:hover, .dropdown-menu a.current { background: var(--cream-lt); color: var(--red); }
  .nav-contact-standalone { flex-shrink: 0; white-space: nowrap; height: 52px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; letter-spacing: .05em; background: var(--white); color: var(--red); border-radius: var(--pill); padding: 0 26px; box-shadow: 0 4px 24px rgba(0,0,0,.12); transition: opacity .2s, box-shadow .3s, transform .2s; }
  .nav-contact-standalone:hover { opacity: .88; transform: translateY(-1px); }
  .nav-wrap.scrolled .nav-contact-standalone { box-shadow: 0 6px 28px rgba(0,0,0,.16); }
  .nav-trade { font-size: .72rem; font-weight: 500; letter-spacing: .05em; color: rgba(255,255,255,.9); border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--pill); padding: 8px 16px; flex-shrink: 0; margin-left: 10px; white-space: nowrap; transition: background .2s; }
  .nav-trade:hover { background: rgba(255,255,255,.12); }
  .nav-icons { display: flex; align-items: center; gap: 2px; margin-left: 6px; flex-shrink: 0; }
  .nav-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: rgba(255,255,255,.85); transition: background .2s; position: relative; }
  .nav-icon:hover { background: rgba(255,255,255,.15); }
  .search-overlay { position: fixed; inset: 0; background: rgba(26,26,24,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 800; display: flex; align-items: flex-start; justify-content: center; padding-top: 110px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .search-overlay.open { opacity: 1; visibility: visible; }
  .search-panel { background: var(--white); border-radius: 16px; width: min(560px, 90vw); max-height: 70vh; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; transform: translateY(-14px); transition: transform .25s; }
  .search-overlay.open .search-panel { transform: translateY(0); }
  .search-input-row { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .search-input-row svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
  .search-input-row input { flex: 1; border: none; outline: none; font-family: var(--font); font-size: .95rem; color: var(--dark); background: transparent; min-width: 0; }
  .search-close { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: none; flex-shrink: 0; }
  .search-close:hover { background: var(--cream-lt); color: var(--dark); }
  .search-close svg { width: 14px; height: 14px; }
  .search-results { overflow-y: auto; padding: 8px; }
  .search-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; transition: background .15s; }
  .search-result:hover { background: var(--cream-lt); }
  .search-result-title { font-size: .86rem; font-weight: 600; color: var(--dark); }
  .search-result-cat { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
  .search-empty, .search-hint { padding: 30px 20px; text-align: center; font-size: .84rem; color: var(--muted); }
  .nav-icon svg { width: 17px; height: 17px; }
  .cart-badge { position: absolute; top: 3px; right: 3px; background: var(--white); color: var(--red); font-size: .5rem; font-weight: 700; border-radius: 50%; width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; }
  .nav-sep { width: 1px; height: 18px; background: rgba(255,255,255,.22); margin: 0 6px; flex-shrink: 0; }
  .lang-btn { font-size: .7rem; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.9); background: none; border: none; display: flex; align-items: center; gap: 3px; padding: 6px 10px; border-radius: var(--pill); transition: background .2s; }
  .lang-btn:hover { background: rgba(255,255,255,.12); }
  @media (max-width: 900px) { .nav-links, .nav-sep, .nav-trade { display: none; } }

  .btn-pill-red { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: var(--white); padding: 12px 24px; border-radius: var(--pill); border: none; font-size: .78rem; font-weight: 500; letter-spacing: .05em; transition: background .25s, transform .25s; }
  .btn-pill-red:hover { background: var(--red-dk); transform: translateY(-1px); }
  .btn-pill-outline { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); color: var(--white); padding: 12px 24px; border-radius: var(--pill); border: 1.5px solid rgba(255,255,255,.5); font-size: .78rem; font-weight: 400; letter-spacing: .05em; transition: all .25s; }
  .btn-pill-outline:hover { background: rgba(255,255,255,.22); border-color: white; }

  .sec-label { display: inline-flex; align-items: center; gap: 8px; font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
  .sec-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }

  .page-hero { position: relative; height: 44vh; min-height: 360px; overflow: hidden; background: #2a2a28; }
  .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 40%; background-image: url('/themes/sauleda-store-theme/assets/img/cms/sauleda/masacril/sauleda-tecnologia-masacril.webp'); }
  .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(26,26,24,.7) 0%, rgba(26,26,24,.35) 60%, rgba(26,26,24,.24) 100%); }
  .page-hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 6% 52px; }
  .page-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 16px; flex-wrap: wrap; }
  .page-breadcrumb a { color: rgba(255,255,255,.65); transition: color .2s; }
  .page-breadcrumb a:hover { color: var(--white); }
  .page-hero h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 700; color: var(--white); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 12px; }
  .page-hero p { font-size: .9rem; color: rgba(255,255,255,.78); max-width: 540px; line-height: 1.6; }

  .content-section { padding: 84px 5% 90px; max-width: 1280px; margin: 0 auto; }
  .content-header { max-width: 640px; margin-bottom: 48px; }
  .content-header p { font-size: .9rem; color: var(--mid); line-height: 1.8; }

  .content-header p { font-size: .92rem; color: var(--mid); line-height: 1.85; margin-bottom: 14px; }
  .content-header p:last-child { margin-bottom: 0; }
  .sec-h2 { font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight: 700; color: var(--dark); letter-spacing: -.02em; line-height: 1.25; margin-bottom: 16px; }

  .infographic-feature { margin: 8px 0 64px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); background: var(--white); }
  .infographic-feature img { width: 100%; display: block; }

  .advantages-block { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: 40px 5%; margin-bottom: 64px; }
  .advantages-title { font-size: .95rem; font-weight: 700; color: var(--dark); letter-spacing: -.01em; margin-bottom: 24px; }
  .advantages-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; max-width: 900px; }
  .advantage-item { display: flex; align-items: flex-start; gap: 12px; font-size: .86rem; color: var(--mid); line-height: 1.55; }
  .advantage-item svg { width: 18px; height: 18px; color: var(--red); flex-shrink: 0; margin-top: 1px; }
  @media (max-width: 700px) { .advantages-list { grid-template-columns: 1fr; } }

  .section-related { padding: 70px 5% 100px; background: var(--white); border-top: 1px solid var(--border); }
  .related-inner { max-width: 1280px; margin: 0 auto; }
  .related-label { font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
  .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .related-card { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 16/10; display: block; }
  .related-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; }
  .related-card:hover .related-img { transform: scale(1.06); }
  .related-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,24,.8) 0%, transparent 55%); }
  .related-title { position: absolute; bottom: 16px; left: 18px; right: 18px; color: var(--white); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
  @media (max-width: 900px) { .related-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 580px) { .related-grid { grid-template-columns: 1fr; } }

  .section-logos { padding: 44px 5%; background: var(--cream-lt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .logos-label { text-align: center; font-size: .63rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
  .logos-track { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 20px; }
  .logo-it { display: flex; align-items: center; justify-content: center; height: 72px; padding: 0 16px; }
  .logo-it img { max-width: 160px; max-height: 40px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: filter .3s, opacity .3s; }
  .logo-it:nth-child(1) img { height: 26px; filter: brightness(0); max-width: 120px; }
  .logo-it:nth-child(3) img { height: 30px; max-width: 110px; }
  .logo-it:nth-child(4) img { height: 38px; max-width: 150px; }
  .logo-it:nth-child(5) img { height: 48px; max-width: 190px; }
  .logo-it:hover img { opacity: 1; filter: grayscale(0%); }
  .logo-it:nth-child(1):hover img { filter: brightness(0); }
  @media (max-width: 700px) { .logos-track { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

  .footer-cta { position: relative; min-height: 460px; overflow: hidden; background-size: cover; background-position: center 50%; background-image: url('/themes/sauleda-store-theme/assets/img/cms/sauleda/masacril/shutterstock_660321949-1-scaled.webp'); will-change: background-position; }
  .footer-cta-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,26,24,.65) 0%, rgba(26,26,24,.25) 100%); }
  .footer-cta-wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 70px 5%; display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
  .footer-cta-content { align-self: center; }
  .footer-cta h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 700; color: var(--white); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 24px; }
  .footer-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
  .contact-card { background: rgba(243, 243, 244, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-card); padding: 28px 26px; box-shadow: 0 16px 40px rgba(0,0,0,.16); max-width: 440px; margin-left: auto; }
  .contact-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 4px; letter-spacing: -.015em; line-height: 1.25; }
  .contact-card p.contact-intro { font-size: .76rem; color: var(--mid); margin-bottom: 16px; line-height: 1.55; }
  .contact-form { display: flex; flex-direction: column; gap: 10px; }
  .contact-field { display: flex; flex-direction: column; }
  .contact-field label { font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); margin-bottom: 4px; }
  .contact-field input, .contact-field textarea { font-family: var(--font); font-size: .82rem; color: var(--dark); background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; transition: border-color .2s, box-shadow .2s; resize: vertical; }
  .contact-field textarea { min-height: 68px; }
  .contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(184,40,40,.12); }
  .contact-check { display: flex; align-items: flex-start; gap: 8px; font-size: .7rem; color: var(--mid); line-height: 1.5; cursor: pointer; user-select: none; margin-top: 2px; }
  .contact-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; border: 1.5px solid var(--border); border-radius: 3px; background: var(--white); cursor: pointer; transition: background .2s, border-color .2s; position: relative; }
  .contact-check input[type="checkbox"]:checked { background: var(--red); border-color: var(--red); }
  .contact-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 3px; top: 0px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .contact-check a { color: var(--red); text-decoration: underline; }
  .contact-submit { align-self: flex-start; margin-top: 4px; background: var(--red); color: var(--white); padding: 10px 24px; border-radius: var(--pill); border: none; font-size: .72rem; font-weight: 500; letter-spacing: .05em; transition: background .25s, transform .25s; }
  .contact-submit:hover { background: var(--red-dk); transform: translateY(-1px); }
  .contact-submit:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
  @media (max-width: 960px) { .footer-cta-wrap { grid-template-columns: 1fr; gap: 32px; padding: 56px 5%; } .contact-card { padding: 24px 22px; margin-left: 0; max-width: 100%; } }
  .footer-panel { background: rgba(243,243,244,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.5); }
  .footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px; padding: 60px 5% 52px; border-bottom: 1px solid var(--border); }
  .f-logo { margin-bottom: 14px; line-height: 1; }
  .f-logo img { height: 24px; width: auto; display: block; filter: brightness(0) saturate(100%) invert(16%) sepia(97%) saturate(2837%) hue-rotate(356deg) brightness(92%) contrast(90%); }
  .f-desc { font-size: .82rem; line-height: 1.8; color: var(--mid); max-width: 260px; margin-bottom: 24px; }
  .f-col h4 { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dark); font-weight: 600; margin-bottom: 16px; }
  .f-col ul li { margin-bottom: 9px; }
  .f-col ul li a { font-size: .82rem; color: var(--mid); transition: color .2s; }
  .f-col ul li a:hover { color: var(--red); }
  .footer-bottom { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 5%; }
  .footer-bottom p { font-size: .71rem; color: var(--muted); }
  .legal { display: flex; gap: 20px; }
  .legal a { font-size: .71rem; color: var(--muted); transition: color .2s; }
  .legal a:hover { color: var(--dark); }

  .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--red) 0%, var(--red-dk) 100%); z-index: 500; box-shadow: 0 0 12px rgba(184,40,40,.45); transition: width .1s linear; pointer-events: none; }
  .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } .reveal-delay-4 { transition-delay: .32s; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
  

}


/* ==========================================================
   ADAPTACIÓN DEL HERO AL HEADER REAL
   ========================================================== */

body.cms-id-9
.sauleda-masacril-v1
.page-hero {

  margin-top: -84px;
}

body.cms-id-9
.sauleda-masacril-v1
.page-hero-content {

  padding-top: 84px;
}


/*
 * La imagen de hero la determina el propio modelo.
 * Todos sus URL ya apuntan a archivos locales.
 */


/* ==========================================================
   RELATED
   El HTML ya utiliza nuestro patrón seguro:
   div + img + link absoluto.
   ========================================================== */

body.cms-id-9
.sauleda-masacril-v1
.related-card {

  position: relative;

  display: block;

  overflow: hidden;
}

body.cms-id-9
.sauleda-masacril-v1
.related-photo {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .6s ease;
}

body.cms-id-9
.sauleda-masacril-v1
.related-card:hover
.related-photo {

  transform: scale(1.06);
}

body.cms-id-9
.sauleda-masacril-v1
.related-hit {

  position: absolute;

  inset: 0;

  z-index: 5;

  display: block;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  text-decoration: none;
}


/* ==========================================================
   REVEAL
   ========================================================== */

body.cms-id-9
.sauleda-masacril-v1
.reveal.is-visible {

  opacity: 1;

  transform:
    translateY(0);
}

body.cms-id-9
.sauleda-masacril-v1
.reveal-left.is-visible {

  opacity: 1;

  transform:
    translateX(0);
}


/* ==========================================================
   BARRA SUPERIOR
   ========================================================== */

#scrollProgressMasacril {

  position: fixed;

  top: 0;
  left: 0;

  width: 0%;
  height: 3px;

  z-index: 2147483647;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      #B82828,
      #8F1E1E
    );

  box-shadow:
    0 0 12px rgba(184,40,40,.45);
}


/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  body.cms-id-9
  .sauleda-masacril-v1
  .reveal,

  body.cms-id-9
  .sauleda-masacril-v1
  .reveal-left {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }
}


/* FIN SAULEDA MASACRIL MODEL FIX V2 */


/* SAULEDA MASACRIL · TICKS RELATED FIX */

/* ticks rojos en advantages */
body.cms-id-9 .sauleda-masacril-v1 .advantage-item{
  position: relative;
  padding-left: 18px;
}

body.cms-id-9 .sauleda-masacril-v1 .advantage-item::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: var(--red, #c42b2b);
}

/* por si algún theme pisa el título del related */
body.cms-id-9 .sauleda-masacril-v1 .related-title{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* FIN SAULEDA MASACRIL · TICKS RELATED FIX */

/* ===== SAULEDA CMS10 IDI MODEL START ===== */

/*
 * CMS 10 · I+D+i / R&D&I
 * Fuente visual: Sauleda USA IDI.html
 * Scope absoluto: body.cms-id-10
 */

/* ------------------------------------------------------------
   CONTENEDOR NATIVO CMS
   ------------------------------------------------------------ */

body.cms-id-10 #main > .page-header,
body.cms-id-10 #main .page-header {
  display: none !important;
}

body.cms-id-10 .page-content.page-cms {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.cms-id-10 .sauleda-idi-model {
  --idi-red: #b82828;
  --idi-red-dark: #8c1f1f;
  --idi-dark: #1a1a18;
  --idi-mid: #4a4540;
  --idi-muted: #8c8680;
  --idi-cream: #ede8dc;
  --idi-light: #f3f3f4;
  --idi-white: #ffffff;
  --idi-border: #d8d2c8;
  --idi-card-radius: 14px;
  --idi-image-radius: 12px;

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);

  overflow: hidden;

  color: var(--idi-dark);
  background: var(--idi-cream);

  font-family:
    "Space Grotesk",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body.cms-id-10 .sauleda-idi-model,
body.cms-id-10 .sauleda-idi-model *,
body.cms-id-10 .sauleda-idi-model *::before,
body.cms-id-10 .sauleda-idi-model *::after {
  box-sizing: border-box;
}

body.cms-id-10 .sauleda-idi-model img {
  display: block;
  max-width: 100%;
}

body.cms-id-10 .sauleda-idi-model a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

body.cms-id-10 .sauleda-idi-model .idi-hero {
  position: relative;

  height: 44vh;
  min-height: 360px;

  overflow: hidden;

  background: #2a2a28;
}

body.cms-id-10 .sauleda-idi-model .idi-hero-photo {
  position: absolute;
  inset: 0;
}

body.cms-id-10 .sauleda-idi-model .idi-hero-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 35%;
}

body.cms-id-10 .sauleda-idi-model .idi-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      160deg,
      rgba(26, 26, 24, .70) 0%,
      rgba(26, 26, 24, .35) 60%,
      rgba(26, 26, 24, .24) 100%
    );
}

body.cms-id-10 .sauleda-idi-model .idi-hero-content {
  position: relative;
  z-index: 2;

  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 0 6% 52px;
}

body.cms-id-10 .sauleda-idi-model .idi-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  margin: 0 0 18px;

  color: rgba(255,255,255,.68);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.4;

  text-transform: uppercase;
}

body.cms-id-10 .sauleda-idi-model .idi-hero h1 {
  max-width: 1000px;

  margin: 0 0 12px;

  color: var(--idi-white);

  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
}

body.cms-id-10 .sauleda-idi-model .idi-hero-description {
  max-width: 540px;

  margin: 0;

  color: rgba(255,255,255,.78);

  font-size: .9rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   CONTENIDO PRINCIPAL
   ------------------------------------------------------------ */

body.cms-id-10 .sauleda-idi-model .idi-content {
  max-width: 1280px;

  margin: 0 auto;
  padding: 84px 5% 90px;
}

body.cms-id-10 .sauleda-idi-model .idi-copy {
  max-width: 680px;

  margin: 0 0 48px;
}

body.cms-id-10 .sauleda-idi-model .idi-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin: 0 0 18px;

  color: var(--idi-muted);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.3;

  text-transform: uppercase;
}

body.cms-id-10 .sauleda-idi-model .idi-label::before {
  content: "";

  display: block;

  width: 4px;
  height: 4px;

  flex: 0 0 4px;

  border-radius: 50%;

  background: var(--idi-red);
}

body.cms-id-10 .sauleda-idi-model .idi-copy h2 {
  margin: 0 0 16px;

  color: var(--idi-dark);

  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

body.cms-id-10 .sauleda-idi-model .idi-copy p {
  margin: 0 0 18px;

  color: var(--idi-mid);

  font-size: .88rem;
  font-weight: 400;
  line-height: 1.72;
}

body.cms-id-10 .sauleda-idi-model .idi-copy p:last-child {
  margin-bottom: 0;
}

body.cms-id-10 .sauleda-idi-model .idi-copy .idi-lead {
  color: var(--idi-dark);

  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   DOS IMÁGENES
   ------------------------------------------------------------ */

body.cms-id-10 .sauleda-idi-model .idi-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;

  margin: 8px 0 64px;
}

body.cms-id-10 .sauleda-idi-model .idi-duo-image {
  overflow: hidden;

  aspect-ratio: 4 / 3;

  border: 1px solid var(--idi-border);
  border-radius: var(--idi-image-radius);

  background: #ddd;
}

body.cms-id-10 .sauleda-idi-model .idi-duo-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* ------------------------------------------------------------
   INTRO VENTAJAS
   ------------------------------------------------------------ */

body.cms-id-10 .sauleda-idi-model .idi-investment-intro {
  max-width: 680px;

  margin: 0 0 28px;

  color: var(--idi-dark);

  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   VENTAJAS
   ------------------------------------------------------------ */

body.cms-id-10 .sauleda-idi-model .idi-advantages {
  padding: 40px 5%;

  background: var(--idi-white);

  border: 1px solid var(--idi-border);
  border-radius: var(--idi-card-radius);
}

body.cms-id-10 .sauleda-idi-model .idi-advantages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;

  max-width: 1000px;
}

body.cms-id-10 .sauleda-idi-model .idi-advantage {
  position: relative;

  min-height: 24px;

  padding-left: 28px;

  color: var(--idi-mid);

  font-size: .86rem;
  font-weight: 400;
  line-height: 1.55;
}

body.cms-id-10 .sauleda-idi-model .idi-advantage::before {
  content: "✓";

  position: absolute;

  top: 1px;
  left: 0;

  color: var(--idi-red);

  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

/* ------------------------------------------------------------
   CIERRE
   ------------------------------------------------------------ */

body.cms-id-10 .sauleda-idi-model .idi-closing {
  padding: 64px 5%;

  text-align: center;

  background: var(--idi-light);

  border-top: 1px solid var(--idi-border);
  border-bottom: 1px solid var(--idi-border);
}

body.cms-id-10 .sauleda-idi-model .idi-closing h2 {
  max-width: 780px;

  margin: 0 auto;

  color: var(--idi-dark);

  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.16;
}

body.cms-id-10 .sauleda-idi-model .idi-closing em {
  color: var(--idi-red);
  font-style: normal;
}

/* ------------------------------------------------------------
   CONTINUE EXPLORING
   ------------------------------------------------------------ */

body.cms-id-10 .sauleda-idi-model .idi-related {
  padding: 70px 5% 100px;

  background: var(--idi-white);
}

body.cms-id-10 .sauleda-idi-model .idi-related-inner {
  max-width: 1280px;

  margin: 0 auto;
}

body.cms-id-10 .sauleda-idi-model .idi-related-label {
  margin: 0 0 24px;

  color: var(--idi-muted);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;

  text-transform: uppercase;
}

body.cms-id-10 .sauleda-idi-model .idi-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

body.cms-id-10 .sauleda-idi-model .idi-related-card {
  position: relative;

  overflow: hidden;

  aspect-ratio: 16 / 10;

  border-radius: var(--idi-card-radius);

  background: #262624;
}

body.cms-id-10 .sauleda-idi-model .idi-related-photo {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .6s ease;
}

body.cms-id-10 .sauleda-idi-model .idi-related-card:hover .idi-related-photo {
  transform: scale(1.06);
}

body.cms-id-10 .sauleda-idi-model .idi-related-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(26,26,24,.8) 0%,
      transparent 55%
    );
}

body.cms-id-10 .sauleda-idi-model .idi-related-title {
  position: absolute;

  z-index: 3;

  right: 18px;
  bottom: 16px;
  left: 18px;

  color: var(--idi-white);

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

body.cms-id-10 .sauleda-idi-model .idi-related-hit {
  position: absolute;
  z-index: 5;

  inset: 0;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

  body.cms-id-10 .sauleda-idi-model .idi-related-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 700px) {

  body.cms-id-10 .sauleda-idi-model .idi-duo,
  body.cms-id-10 .sauleda-idi-model .idi-advantages-grid {
    grid-template-columns: 1fr;
  }

  body.cms-id-10 .sauleda-idi-model .idi-content {
    padding-top: 64px;
    padding-bottom: 70px;
  }

}

@media (max-width: 580px) {

  body.cms-id-10 .sauleda-idi-model .idi-hero {
    min-height: 390px;
  }

  body.cms-id-10 .sauleda-idi-model .idi-hero-content {
    padding: 0 5% 38px;
  }

  body.cms-id-10 .sauleda-idi-model .idi-related-grid {
    grid-template-columns: 1fr;
  }

  body.cms-id-10 .sauleda-idi-model .idi-related {
    padding-bottom: 70px;
  }

}

/* ===== SAULEDA CMS10 IDI MODEL END ===== */

/* ===== SAULEDA CMS10 FINAL START ===== */

body.cms-id-10 .breadcrumb__wrapper,
body.cms-id-10 .page-header {
  display: none !important;
}

body.cms-id-10 .columns-container.container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.cms-id-10 #center-column {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.cms-id-10 #content.page-content--cms {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.cms-id-10 .sauleda-idi-model {
  --red: #b82828;
  --dark: #1a1a18;
  --mid: #4a4540;
  --muted: #8c8680;
  --cream: #ede8dc;
  --light: #f3f3f4;
  --white: #fff;
  --border: #d8d2c8;
  --card: 14px;
  --image: 12px;

  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--dark);
  background: var(--cream);
}

/* HERO */

body.cms-id-10 .idi-hero {
  position: relative;
  height: 44vh;
  min-height: 360px;
  overflow: hidden;
  background: #2a2a28;
}

body.cms-id-10 .idi-hero-photo {
  position: absolute;
  inset: 0;
}

body.cms-id-10 .idi-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

body.cms-id-10 .idi-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.70) 0%,
      rgba(26,26,24,.35) 60%,
      rgba(26,26,24,.24) 100%
    );
}

body.cms-id-10 .idi-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 0 6% 52px;
}

body.cms-id-10 .idi-breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;

  color: rgba(255,255,255,.68);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.cms-id-10 .idi-hero h1 {
  max-width: 1000px;
  margin: 0 0 12px;

  color: #fff;

  font-size: clamp(2.2rem,4vw,3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}

body.cms-id-10 .idi-hero-description {
  max-width: 540px;
  margin: 0;

  color: rgba(255,255,255,.78);
  font-size: .9rem;
  line-height: 1.6;
}

/* MAIN */

body.cms-id-10 .idi-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 84px 5% 90px;
}

body.cms-id-10 .idi-copy {
  max-width: 680px;
  margin-bottom: 48px;
}

body.cms-id-10 .idi-label {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 18px;

  color: var(--muted);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.cms-id-10 .idi-label::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
}

body.cms-id-10 .idi-copy h2 {
  margin: 0 0 16px;

  color: var(--dark);
  font-size: clamp(1.4rem,2.2vw,1.9rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
}

body.cms-id-10 .idi-copy p {
  margin: 0 0 18px;

  color: var(--mid);
  font-size: .88rem;
  line-height: 1.72;
}

body.cms-id-10 .idi-copy .idi-lead {
  color: var(--dark);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
}

/* DOS IMÁGENES */

body.cms-id-10 .idi-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;

  margin: 8px 0 64px;
}

body.cms-id-10 .idi-duo-image {
  overflow: hidden;
  aspect-ratio: 4/3;

  border: 1px solid var(--border);
  border-radius: var(--image);
}

body.cms-id-10 .idi-duo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* INTRO */

body.cms-id-10 .idi-investment-intro {
  max-width: 680px;
  margin: 0 0 28px;

  color: var(--dark);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
}

/* BENEFITS */

body.cms-id-10 .idi-advantages {
  padding: 40px 5%;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: var(--card);
}

body.cms-id-10 .idi-advantages-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 16px 32px;

  max-width: 1000px;
}

body.cms-id-10 .idi-advantage {
  position: relative;
  padding-left: 28px;

  color: var(--mid);
  font-size: .86rem;
  line-height: 1.55;
}

body.cms-id-10 .idi-advantage::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;

  color: var(--red);
  font-size: 16px;
}

/* CLOSING */

body.cms-id-10 .idi-closing {
  padding: 64px 5%;

  text-align: center;

  background: var(--light);

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

body.cms-id-10 .idi-closing h2 {
  max-width: 780px;
  margin: 0 auto;

  color: var(--dark);
  font-size: clamp(1.6rem,3vw,2.5rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.025em;
}

body.cms-id-10 .idi-closing em {
  color: var(--red);
  font-style: normal;
}

/* RELATED */

body.cms-id-10 .idi-related {
  padding: 70px 5% 100px;
  background: #fff;
}

body.cms-id-10 .idi-related-inner {
  max-width: 1280px;
  margin: 0 auto;
}

body.cms-id-10 .idi-related-label {
  margin-bottom: 24px;

  color: var(--muted);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.cms-id-10 .idi-related-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

body.cms-id-10 .idi-related-card {
  position: relative;
  overflow: hidden;

  aspect-ratio: 16/10;

  border-radius: var(--card);
  background: #292927;
}

body.cms-id-10 .idi-related-photo {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .6s ease;
}

body.cms-id-10 .idi-related-card:hover .idi-related-photo {
  transform: scale(1.06);
}

body.cms-id-10 .idi-related-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(26,26,24,.8) 0%,
      transparent 55%
    );
}

body.cms-id-10 .idi-related-title {
  position: absolute;
  z-index: 3;

  left: 18px;
  right: 18px;
  bottom: 16px;

  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

body.cms-id-10 .idi-related-hit {
  position: absolute;
  z-index: 5;
  inset: 0;
}

@media (max-width: 900px) {
  body.cms-id-10 .idi-related-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  body.cms-id-10 .idi-duo,
  body.cms-id-10 .idi-advantages-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  body.cms-id-10 .idi-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== SAULEDA CMS10 FINAL END ===== */

/* ===== SAULEDA CMS HERO HEADER OVERLAY START ===== */

/*
 * En las páginas CMS con hero Sauleda, la cabecera debe flotar
 * sobre la fotografía como en los modelos originales.
 */

body.page-cms #header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;

  width: 100%;

  z-index: 1000;

  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/*
 * El contenedor exterior del header tampoco debe pintar
 * una banda blanca detrás del menú.
 */
body.page-cms #header.header,
body.page-cms #header .sauleda-header {
  background: transparent !important;
}

/*
 * El hero comienza inmediatamente en la parte superior,
 * detrás de la navegación.
 */
body.page-cms #wrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/*
 * Hero CMS antiguo: History / Values / Sustainability /
 * Masacril, etc.
 */
body.page-cms .sauleda-cms__hero {
  margin-top: 0 !important;
}

/*
 * CMS10 nuevo.
 */
body.cms-id-10 .idi-hero {
  margin-top: 0 !important;
}

/*
 * Mantener imágenes como bloques, pero sin tocar
 * alturas ni estructura de las CMS.
 */
body.page-cms .page-content--cms img {
  display: block;
}

/* ===== SAULEDA CMS HERO HEADER OVERLAY END ===== */

/* ===== CMS10 HERO EXACT MODEL SPACING START ===== */

/*
 * El HTML modelo NO limita el ancho del H1.
 * El max-width anterior provocaba el salto a dos líneas y
 * desplazaba todo el contenido verticalmente hacia arriba.
 */

body.cms-id-10 .sauleda-idi-model .idi-hero {
  height: 44vh;
  min-height: 360px;
}

body.cms-id-10 .sauleda-idi-model .idi-hero-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 6% 52px;
}

body.cms-id-10 .sauleda-idi-model .idi-breadcrumb {
  margin-bottom: 18px;
}

body.cms-id-10 .sauleda-idi-model .idi-hero h1 {
  width: auto;
  max-width: none;

  margin: 0 0 12px;

  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
}

body.cms-id-10 .sauleda-idi-model .idi-hero-description {
  width: auto;
  max-width: 540px;

  margin: 0;

  font-size: .9rem;
  line-height: 1.6;
}

/* En pantallas donde físicamente ya no cabe, sí dejamos envolver */
@media (max-width: 1200px) {
  body.cms-id-10 .sauleda-idi-model .idi-hero h1 {
    max-width: 100%;
  }
}

/* ===== CMS10 HERO EXACT MODEL SPACING END ===== */

/* ===== SAULEDA CMS10 SCROLL EFFECTS START ===== */

/* Barra superior de progreso */

body.cms-id-10 #scrollProgressIdi {
  position: fixed;
  top: 0;
  left: 0;

  width: 0;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      #B82828 0%,
      #8C1F1F 100%
    );

  z-index: 5001;

  box-shadow:
    0 0 12px rgba(184,40,40,.45);

  pointer-events: none;
  transition: width .1s linear;
}


/* Reveal: sin JS todo sigue visible */

body.cms-id-10 .sauleda-idi-model .idi-scroll-reveal {
  opacity: 1;
  transform: none;
}


/* Solo activar estado oculto cuando JS ya está funcionando */

body.cms-id-10
.sauleda-idi-model.idi-scroll-ready
.idi-scroll-reveal {
  opacity: 0;
  transform: translateY(36px);

  transition:
    opacity .9s cubic-bezier(.4,0,.2,1),
    transform .9s cubic-bezier(.4,0,.2,1);

  will-change: opacity, transform;
}


body.cms-id-10
.sauleda-idi-model.idi-scroll-ready
.idi-scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {

  body.cms-id-10
  .sauleda-idi-model.idi-scroll-ready
  .idi-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* ===== SAULEDA CMS10 SCROLL EFFECTS END ===== */

/* ===== SAULEDA CMS11 EXACT START ===== */


/* ==========================================================
   VARIABLES DEL MODELO ORIGINAL
   ========================================================== */

body.cms-id-11 .sauleda-cert-model {
  --red: #B82828; --red-dk: #8C1F1F; --dark: #1A1A18; --mid: #4A4540; --muted: #8C8680;
  --cream: #EDE8DC; --cream-lt: #F3F3F4; --white: #FFFFFF; --border: #D8D2C8;
  --font: 'Space Grotesk', system-ui, sans-serif; --pill: 999px; --r-card: 14px; --r-img: 12px;
  --ease: cubic-bezier(.4,0,.2,1);

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  background: var(--cream);
  color: var(--dark);
}


/* ==========================================================
   PRESTASHOP · CMS11 A ANCHO COMPLETO
   ========================================================== */

body.cms-id-11 .breadcrumb__wrapper,
body.cms-id-11 .page-header {
  display: none !important;
}

body.cms-id-11 #wrapper {
  margin: 0 !important;
  padding: 0 !important;

  background: var(--cream, #eee9dd);
}

body.cms-id-11 .columns-container.container,
body.cms-id-11 #center-column,
body.cms-id-11 #content.page-content--cms {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

body.cms-id-11 #content.page-content--cms {
  overflow: visible;
}


/* ==========================================================
   RESET LOCAL
   ========================================================== */

body.cms-id-11 .sauleda-cert-model,
body.cms-id-11 .sauleda-cert-model * {
  box-sizing: border-box;
}

body.cms-id-11 .sauleda-cert-model section,
body.cms-id-11 .sauleda-cert-model div,
body.cms-id-11 .sauleda-cert-model figure {
  margin-top: 0;
}

body.cms-id-11 .sauleda-cert-model a {
  text-decoration: none;
}

body.cms-id-11 .sauleda-cert-model h1,
body.cms-id-11 .sauleda-cert-model h2,
body.cms-id-11 .sauleda-cert-model h3,
body.cms-id-11 .sauleda-cert-model h4,
body.cms-id-11 .sauleda-cert-model p {
  margin-top: 0;
}


/* ==========================================================
   HERO · MODELO EXACTO
   ========================================================== */

body.cms-id-11 .sauleda-cert-model .page-hero {
  position: relative;

  width: 100%;
  height: 44vh;
  min-height: 360px;

  margin: 0 !important;

  overflow: hidden;

  background: #2a2a28;
}

body.cms-id-11 .sauleda-cert-model .page-hero-bg {
  position: absolute;
  inset: 0;

  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/certificaciones/sauleda-certificaciones-hero.webp');

  background-size: cover;
  background-position: center 40%;
}

body.cms-id-11 .sauleda-cert-model .page-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.70) 0%,
      rgba(26,26,24,.35) 60%,
      rgba(26,26,24,.24) 100%
    );
}

body.cms-id-11 .sauleda-cert-model .page-hero-content {
  position: relative;
  z-index: 2;

  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 0 6% 52px;
}

body.cms-id-11 .sauleda-cert-model .page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin: 0 0 16px;

  color: rgba(255,255,255,.65);

  font-size: .7rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.cms-id-11 .sauleda-cert-model .page-breadcrumb a {
  color: rgba(255,255,255,.65);
}

body.cms-id-11 .sauleda-cert-model .page-breadcrumb a:hover {
  color: #fff;
}

body.cms-id-11 .sauleda-cert-model .page-hero h1 {
  width: auto;
  max-width: none;

  margin: 0 0 12px !important;

  color: #fff;

  font-size: clamp(2.2rem,4vw,3.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
}

body.cms-id-11 .sauleda-cert-model .page-hero p {
  max-width: 540px;

  margin: 0 !important;

  color: rgba(255,255,255,.78);

  font-size: .9rem;
  line-height: 1.6;
}


/* ==========================================================
   CONTENIDO GENERAL
   ========================================================== */

body.cms-id-11 .sauleda-cert-model .content-section {
  width: 100%;
  max-width: 1280px;

  margin: 0 auto !important;
  padding: 84px 5% 60px;

  background: var(--cream);
}

body.cms-id-11 .sauleda-cert-model .content-header {
  max-width: 720px;

  margin: 0 0 48px;
}

body.cms-id-11 .sauleda-cert-model .content-header p {
  margin: 0 0 14px !important;

  color: var(--mid);

  font-size: .9rem;
  line-height: 1.8;
}

body.cms-id-11 .sauleda-cert-model .content-header p:last-child {
  margin-bottom: 0 !important;
}

body.cms-id-11 .sauleda-cert-model .content-header p.lead-strong {
  color: var(--dark);

  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
}

body.cms-id-11 .sauleda-cert-model .sec-h2 {
  margin: 0 0 16px !important;

  color: var(--dark);

  font-size: clamp(1.4rem,2.2vw,1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

body.cms-id-11 .sauleda-cert-model .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 32px;
}


/* ==========================================================
   CERTIFICACIONES
   ========================================================== */

body.cms-id-11 .sauleda-cert-model .cert-list {
  display: flex;
  flex-direction: column;

  gap: 16px;

  margin: 0 0 8px;
}

body.cms-id-11 .sauleda-cert-model .cert-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;

  gap: 32px;

  padding: 30px;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

body.cms-id-11 .sauleda-cert-model .cert-logo-box {
  height: 130px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px;

  background: var(--cream-lt);

  border-radius: 10px;
}

body.cms-id-11 .sauleda-cert-model .cert-logo-box img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;

  object-fit: contain;
}

body.cms-id-11 .sauleda-cert-model .cert-text h3 {
  margin: 0 0 4px !important;

  color: var(--dark);

  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

body.cms-id-11 .sauleda-cert-model .cert-sub {
  margin: 0 0 12px;

  color: var(--muted);

  font-size: .68rem;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.cms-id-11 .sauleda-cert-model .cert-text p {
  margin: 0 0 10px !important;

  color: var(--mid);

  font-size: .85rem;
  line-height: 1.7;
}

body.cms-id-11 .sauleda-cert-model .cert-text p:last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   EXCELLENCE · MODELO EXACTO
   ========================================================== */

body.cms-id-11 .sauleda-cert-model .section-excellence {
  position: relative;

  width: 100%;

  margin: 0 !important;
  padding: 80px 5%;

  overflow: hidden;

  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/certificaciones/sauleda-certificaciones-hero.webp');

  background-size: cover;
  background-position: center 40%;
  background-attachment: fixed;
}

body.cms-id-11 .sauleda-cert-model .section-excellence-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      160deg,
      rgba(20,20,18,.88) 0%,
      rgba(20,20,18,.72) 100%
    );
}

body.cms-id-11 .sauleda-cert-model .excellence-inner {
  position: relative;
  z-index: 1;

  max-width: 900px;

  margin: 0 auto;
}

body.cms-id-11 .sauleda-cert-model .section-excellence .sec-h2,
body.cms-id-11 .sauleda-cert-model .section-excellence p.lead-strong {
  color: #fff;
}

body.cms-id-11 .sauleda-cert-model .section-excellence p.lead-strong {
  margin: 0 0 28px !important;

  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
}

body.cms-id-11 .sauleda-cert-model .excellence-list {
  display: flex;
  flex-direction: column;

  gap: 16px;
}

body.cms-id-11 .sauleda-cert-model .excellence-item {
  display: flex;
  align-items: flex-start;

  gap: 12px;

  color: rgba(255,255,255,.85);

  font-size: .9rem;
  line-height: 1.6;
}

body.cms-id-11 .sauleda-cert-model .excellence-item svg {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  margin-top: 1px;
  padding: 4px;

  color: #fff;
  background: var(--red);

  border-radius: 50%;
}


/* ==========================================================
   GARANTÍAS
   ========================================================== */

body.cms-id-11 .sauleda-cert-model .guarantee-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);

  gap: 16px;

  margin: 8px 0 0;
}

body.cms-id-11 .sauleda-cert-model .guarantee-card {
  display: block;

  padding: 26px 18px;

  background: #fff;

  color: var(--dark);

  border: 1px solid var(--border);
  border-radius: var(--r-card);

  text-align: center;

  transition:
    border-color .2s,
    transform .2s;
}

body.cms-id-11 .sauleda-cert-model a.guarantee-card:hover {
  border-color: var(--red);

  transform: translateY(-2px);
}

body.cms-id-11 .sauleda-cert-model .guarantee-icon {
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 16px;
}

body.cms-id-11 .sauleda-cert-model .guarantee-icon img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 70px !important;

  margin: 0 auto !important;

  object-fit: contain;
}

body.cms-id-11 .sauleda-cert-model .guarantee-card h4 {
  margin: 0 !important;

  color: var(--dark);

  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
}


/* ==========================================================
   PRESTACIONES
   ========================================================== */

body.cms-id-11 .sauleda-cert-model .features-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);

  gap: 16px;
}

body.cms-id-11 .sauleda-cert-model .feature-card {
  display: flex;
  align-items: flex-start;

  gap: 16px;

  padding: 26px 24px;

  background: #fff;

  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

body.cms-id-11 .sauleda-cert-model .feature-icon {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;
}

body.cms-id-11 .sauleda-cert-model .feature-icon img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 40px !important;
  max-height: 40px !important;

  margin: 0 !important;

  object-fit: contain;
}

body.cms-id-11 .sauleda-cert-model .feature-card h4 {
  margin: 0 0 6px !important;

  color: var(--dark);

  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

body.cms-id-11 .sauleda-cert-model .feature-card p {
  margin: 0 !important;

  color: var(--mid);

  font-size: .78rem;
  line-height: 1.6;
}


/* ==========================================================
   RELATED · MODELO EXACTO
   ========================================================== */

body.cms-id-11 .sauleda-cert-model .section-related {
  width: 100%;

  margin: 0 !important;
  padding: 70px 5% 100px;

  background: #fff;

  border-top: 1px solid var(--border);
}

body.cms-id-11 .sauleda-cert-model .related-inner {
  max-width: 1280px;

  margin: 0 auto;
}

body.cms-id-11 .sauleda-cert-model .related-label {
  margin: 0 0 24px;

  color: var(--muted);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.cms-id-11 .sauleda-cert-model .related-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);

  gap: 16px;
}

body.cms-id-11 .sauleda-cert-model .related-card {
  position: relative;

  display: block;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  border-radius: var(--r-card);
}

body.cms-id-11 .sauleda-cert-model .related-img {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  transition: transform .6s ease;
}

body.cms-id-11 .sauleda-cert-model .related-card:hover .related-img {
  transform: scale(1.06);
}

body.cms-id-11 .sauleda-cert-model .related-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(26,26,24,.80) 0%,
      transparent 55%
    );
}

body.cms-id-11 .sauleda-cert-model .related-title {
  position: absolute;

  left: 18px;
  right: 18px;
  bottom: 16px;

  color: #fff;

  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}


/* ==========================================================
   SCROLL PROGRESS + REVEAL
   ========================================================== */

body.cms-id-11 #scrollProgressCertifications {
  position: fixed;

  top: 0;
  left: 0;

  width: 0;
  height: 3px;

  z-index: 5001;

  background:
    linear-gradient(
      90deg,
      var(--red,#b82828) 0%,
      var(--red-dk,#8c1f1f) 100%
    );

  box-shadow:
    0 0 12px rgba(184,40,40,.45);

  pointer-events: none;

  transition: width .1s linear;
}


/*
 * Progressive enhancement:
 * solo ocultamos cuando sabemos que el JS funciona.
 */

body.cms-id-11
.sauleda-cert-model.is-scroll-ready
.reveal {
  opacity: 0;

  transform: translateY(36px);

  transition:
    opacity .9s var(--ease,cubic-bezier(.4,0,.2,1)),
    transform .9s var(--ease,cubic-bezier(.4,0,.2,1));

  will-change: opacity,transform;
}

body.cms-id-11
.sauleda-cert-model.is-scroll-ready
.reveal.is-visible {
  opacity: 1;

  transform: translateY(0);
}


/* ==========================================================
   RESPONSIVE DEL MODELO
   ========================================================== */

@media (max-width:900px) {

  body.cms-id-11 .sauleda-cert-model .guarantee-grid {
    grid-template-columns: repeat(3,1fr);
  }

  body.cms-id-11 .sauleda-cert-model .related-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width:800px) {

  body.cms-id-11 .sauleda-cert-model .two-col,
  body.cms-id-11 .sauleda-cert-model .features-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width:700px) {

  body.cms-id-11 .sauleda-cert-model .cert-row {
    grid-template-columns: 1fr;

    text-align: left;
  }

  body.cms-id-11 .sauleda-cert-model .cert-logo-box {
    height: 110px;
  }

}

@media (max-width:580px) {

  body.cms-id-11 .sauleda-cert-model .related-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width:560px) {

  body.cms-id-11 .sauleda-cert-model .guarantee-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

@media (max-width:700px) {

  body.cms-id-11 .sauleda-cert-model .page-hero {
    min-height: 360px;
  }

  body.cms-id-11 .sauleda-cert-model .page-hero-content {
    padding:
      0 5% 40px;
  }

  body.cms-id-11 .sauleda-cert-model .content-section {
    padding-left: 5%;
    padding-right: 5%;
  }

  body.cms-id-11 .sauleda-cert-model .section-excellence {
    background-attachment: scroll;
  }

}

@media (prefers-reduced-motion:reduce) {

  body.cms-id-11
  .sauleda-cert-model.is-scroll-ready
  .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }

}


/* ===== SAULEDA CMS11 EXACT END ===== */

/* ===== CMS11 FINAL OVERRIDES START ===== */


/*
 * CMS11:
 * el contenido jamás debe depender de IntersectionObserver
 * para ser visible.
 */

body.cms-id-11
.sauleda-cert-model
.reveal {
  display: revert !important;
  visibility: visible !important;

  opacity: 1 !important;
  transform: none !important;

  transition: none !important;
}


/*
 * Reafirmar específicamente el primer bloque,
 * Quality and Safety / Calidad y seguridad.
 */

body.cms-id-11
.sauleda-cert-model
.content-section:first-of-type
> .content-header:first-child {
  display: block !important;
  visibility: visible !important;

  opacity: 1 !important;
  transform: none !important;
}


/*
 * Tarjetas Related saneadas:
 * el enlace está ahora dentro del título.
 */

body.cms-id-11
.sauleda-cert-model
.related-title a {
  color: #fff !important;
  text-decoration: none !important;
}


/*
 * Garantías saneadas:
 * iconos definitivamente contenidos.
 */

body.cms-id-11
.sauleda-cert-model
.guarantee-icon img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 70px !important;

  margin: 0 auto !important;

  object-fit: contain !important;
}


/* ===== CMS11 FINAL OVERRIDES END ===== */

/* ===== CMS9 HERO CLIP FIX START ===== */

/*
 * El hero usa margin-top:-84px para colocarse detrás
 * del header. El wrapper tenía overflow:hidden y
 * recortaba precisamente esa parte superior.
 *
 * SOLO CMS9.
 */

body.cms-id-9
.sauleda-masacril-v1 {
  overflow: visible !important;
}

/*
 * El control horizontal continúa en BODY,
 * que ya tiene overflow-x:hidden.
 */

/* ===== CMS9 HERO CLIP FIX END ===== */

/* ===== SAULEDA ABOUT CANONICAL HERO START ===== */


/* ==========================================================
   COMPONENTE ÚNICO DE CABECERA
   CMS 6 · 7 · 8 · 9 · 10 · 11

   Las seis páginas utilizan AHORA estas mismas clases.
   Los estilos históricos .page-hero / .idi-hero quedan
   fuera del componente y ya no pueden modificarlo.
   ========================================================== */


/* ----------------------------------------------------------
   PrestaShop / Hummingbird
   ---------------------------------------------------------- */

:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) .breadcrumb__wrapper,

:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) .center-column > .page-header,

:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) #main > .page-header {
  display: none !important;
}


:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) .columns-container.container,

:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) #center-column,

:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) .center-column,

:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) .page-content--cms {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/*
 * Una sola relación entre el menú y las seis páginas.
 *
 * El header real de Sauleda queda superpuesto.
 * Ya NO usamos -84px en seis sitios diferentes.
 */
:is(
  body.cms-id-6,
  body.cms-id-7,
  body.cms-id-8,
  body.cms-id-9,
  body.cms-id-10,
  body.cms-id-11
) #header {
  position: absolute !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  z-index: 1000 !important;
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.sauleda-about-hero {
  position: relative;

  width: 100%;
  height: calc(44vh + 30px);
  min-height: 390px;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  background: #2a2a28;

  box-sizing: border-box;
}


.sauleda-about-hero *,
.sauleda-about-hero *::before,
.sauleda-about-hero *::after {
  box-sizing: border-box;
}


.sauleda-about-hero__media {
  position: absolute;
  inset: 0;

  overflow: hidden;
}


.sauleda-about-hero__media img {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none !important;

  object-fit: cover;
  object-position: center 45%;
}


.sauleda-about-hero__overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.70) 0%,
      rgba(26,26,24,.35) 60%,
      rgba(26,26,24,.24) 100%
    );
}


.sauleda-about-hero__content {
  transform: translateY(20px) !important;
  position: relative;

  z-index: 2;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  width: 100%;
  height: 100%;

  /*
   * ESTE valor gobierna las seis páginas.
   */
  padding: 0 6% 62px !important;

  margin: 0 !important;

  text-align: left;
}


/* ----------------------------------------------------------
   BREADCRUMB
   ---------------------------------------------------------- */

.sauleda-about-hero__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin: 0 0 16px !important;
  padding: 0 !important;

  color: rgba(255,255,255,.65);

  font-size: .7rem;
  font-weight: 400;

  line-height: 1.4;

  letter-spacing: .1em;
  text-transform: uppercase;
}


.sauleda-about-hero__breadcrumb a,
.sauleda-about-hero__breadcrumb span {
  color: rgba(255,255,255,.65) !important;
  text-decoration: none !important;
}


.sauleda-about-hero__breadcrumb a:hover {
  color: #fff !important;
}


/* ----------------------------------------------------------
   H1 + SUBTÍTULO
   ---------------------------------------------------------- */

.sauleda-about-hero h1 {
  max-width: 1100px;

  margin: 0 0 12px !important;
  padding: 0 !important;

  color: #fff !important;

  font-size:
    clamp(2.2rem, 4vw, 3.6rem) !important;

  font-weight: 700 !important;

  line-height: 1.05 !important;
  letter-spacing: -.025em !important;

  text-align: left !important;
}


.sauleda-about-hero__description {
  max-width: 620px;

  margin: 0 !important;
  padding: 0 !important;

  color:
    rgba(255,255,255,.78) !important;

  font-size: .9rem !important;
  font-weight: 400 !important;

  line-height: 1.6 !important;

  text-align: left !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 640px) {

  .sauleda-about-hero {
    height: 44vh;
    min-height: 360px;
  }

  .sauleda-about-hero__content {
    padding:
      0 24px 38px
      !important;
  }

  .sauleda-about-hero h1 {
    font-size:
      clamp(2rem, 9vw, 2.8rem)
      !important;
  }

}


/* ===== SAULEDA ABOUT CANONICAL HERO END ===== */

/* ===== CMS11 CERTIFICATIONS SCROLL FIX START ===== */

/*
 * CMS11 · REVEAL AISLADO
 *
 * No depende de .is-visible.
 * El JS específico añade .sauleda-cert-visible.
 */

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal,

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal-left {

  opacity: 0 !important;
  visibility: visible !important;

  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    transform .85s cubic-bezier(.22,.61,.36,1)
    !important;

  will-change:
    opacity,
    transform;
}


body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal {

  transform:
    translateY(36px)
    !important;
}


body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal-left {

  transform:
    translateX(-36px)
    !important;
}


/*
 * Estado visible propio.
 *
 * Tiene autoridad incluso aunque el JS histórico
 * haya añadido también .is-visible.
 */

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal.sauleda-cert-visible,

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal-left.sauleda-cert-visible {

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
}


/* delays originales */

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal-delay-1 {
  transition-delay: .08s !important;
}

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal-delay-2 {
  transition-delay: .16s !important;
}

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal-delay-3 {
  transition-delay: .24s !important;
}

body.cms-id-11.sauleda-cert-scroll-ready
.sauleda-cert-model
.reveal-delay-4 {
  transition-delay: .32s !important;
}


@media (prefers-reduced-motion: reduce) {

  body.cms-id-11.sauleda-cert-scroll-ready
  .sauleda-cert-model
  .reveal,

  body.cms-id-11.sauleda-cert-scroll-ready
  .sauleda-cert-model
  .reveal-left {

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }

}

/* ===== CMS11 CERTIFICATIONS SCROLL FIX END ===== */

/* ===== CMS11 CERTIFICATIONS LAYOUT RESTORE START ===== */

/*
 * ==========================================================
 * CMS11 · SOLO TARJETAS DE CERTIFICACIONES
 *
 * Importante:
 * NO modificar .content-section
 * NO modificar .sec-h2
 * NO modificar secciones generales
 * ==========================================================
 */


body.cms-id-11
.sauleda-cert-model
.cert-list {

  display: flex !important;

  flex-direction:
    column !important;

  gap: 24px !important;

  width: 100% !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-row {

  display: grid !important;

  grid-template-columns:
    270px minmax(0, 1fr)
    !important;

  align-items:
    center !important;

  column-gap:
    48px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    44px !important;

  background:
    #ffffff !important;

  border:
    1px solid #d8d2c8
    !important;

  border-radius:
    18px !important;

  overflow:
    hidden !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-logo-box {

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    270px !important;

  min-width:
    270px !important;

  height:
    195px !important;

  margin:
    0 !important;

  padding:
    20px !important;

  background:
    #f3f3f4 !important;

  border-radius:
    14px !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-logo-box img {

  display:
    block !important;

  width:
    auto !important;

  height:
    auto !important;

  max-width:
    230px !important;

  max-height:
    155px !important;

  margin:
    auto !important;

  object-fit:
    contain !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-text {

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  align-self:
    center !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-text h3 {

  margin:
    0 0 6px
    !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-sub {

  margin:
    0 0 22px
    !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-text p {

  margin:
    0 0 16px
    !important;
}


body.cms-id-11
.sauleda-cert-model
.cert-text p:last-child {

  margin-bottom:
    0 !important;
}


/* ----------------------------------------------------------
   RESPONSIVE SOLO DE LAS TARJETAS
   ---------------------------------------------------------- */

@media (max-width: 800px) {

  body.cms-id-11
  .sauleda-cert-model
  .cert-row {

    grid-template-columns:
      1fr
      !important;

    row-gap:
      26px !important;

    padding:
      24px !important;
  }


  body.cms-id-11
  .sauleda-cert-model
  .cert-logo-box {

    width:
      100% !important;

    min-width:
      0 !important;

    height:
      190px !important;
  }

}


/* ===== CMS11 CERTIFICATIONS LAYOUT RESTORE END ===== */

/* ===== CMS11 DETAIL FIX START ===== */


/* ==========================================================
   1. EXCELLENCE · TICKS ROJOS
   ========================================================== */

body.cms-id-11
.sauleda-cert-model
.excellence-item {

  position: relative !important;

  display: flex !important;

  align-items: flex-start !important;

  gap: 14px !important;
}


/*
 * Usamos nuestro propio tick para que no dependa
 * del SVG antiguo ni de estilos heredados.
 */

body.cms-id-11
.sauleda-cert-model
.excellence-item::before {

  content: "✓";

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex:
    0 0 20px !important;

  width:
    20px !important;

  height:
    20px !important;

  margin-top:
    2px !important;

  border-radius:
    50% !important;

  background:
    #c92f32 !important;

  color:
    #ffffff !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;
}


/*
 * Evitamos duplicar el icono si el SVG antiguo
 * sigue presente en el HTML.
 */

body.cms-id-11
.sauleda-cert-model
.excellence-item > svg {

  display:
    none !important;
}



/* ==========================================================
   2. GUARANTEE · HOVER
   ========================================================== */

body.cms-id-11
.sauleda-cert-model
.guarantee-card {

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease
    !important;
}


body.cms-id-11
.sauleda-cert-model
a.guarantee-card:hover {

  transform:
    translateY(-4px)
    !important;

  border-color:
    #c92f32 !important;

  box-shadow:
    0 12px 28px
    rgba(26,26,24,.12)
    !important;
}



/* ==========================================================
   3. PERFORMANCE FEATURES
   ICONO A LA IZQUIERDA
   ========================================================== */

body.cms-id-11
.sauleda-cert-model
.feature-card {

  display:
    grid !important;

  grid-template-columns:
    40px minmax(0,1fr)
    !important;

  grid-template-rows:
    auto auto
    !important;

  column-gap:
    18px !important;

  row-gap:
    6px !important;

  align-items:
    start !important;
}


body.cms-id-11
.sauleda-cert-model
.feature-icon {

  grid-column:
    1 !important;

  grid-row:
    1 / span 2 !important;

  align-self:
    start !important;

  justify-self:
    center !important;

  width:
    32px !important;

  height:
    32px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


body.cms-id-11
.sauleda-cert-model
.feature-icon img {

  display:
    block !important;

  width:
    32px !important;

  height:
    32px !important;

  object-fit:
    contain !important;

  margin:
    0 !important;
}


body.cms-id-11
.sauleda-cert-model
.feature-card h4 {

  grid-column:
    2 !important;

  grid-row:
    1 !important;

  margin:
    0 !important;
}


body.cms-id-11
.sauleda-cert-model
.feature-card p {

  grid-column:
    2 !important;

  grid-row:
    2 !important;

  margin:
    0 !important;
}


/* ===== CMS11 DETAIL FIX END ===== */

/* ===== CMS11 GUARANTEE HOVER FIX START ===== */

body.cms-id-11
.sauleda-cert-model
.guarantee-card {
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .25s ease
    !important;
}

body.cms-id-11
.sauleda-cert-model
.guarantee-card:hover {
  transform:
    translateY(-6px)
    !important;

  border-color:
    #c92f32
    !important;

  box-shadow:
    0 14px 30px
    rgba(26,26,24,.16)
    !important;

  background:
    #ffffff
    !important;
}

body.cms-id-11
.sauleda-cert-model
.guarantee-card
.guarantee-icon img {
  transition:
    transform .25s ease
    !important;
}

body.cms-id-11
.sauleda-cert-model
.guarantee-card:hover
.guarantee-icon img {
  transform:
    scale(1.06)
    !important;
}

/* ===== CMS11 GUARANTEE HOVER FIX END ===== */

/* ===== SAULEDA ABOUT CATEGORY FINAL START ===== */

/*
 * CATEGORY CMS 2 · ABOUT US / NOSOTROS
 *
 * Se reutiliza el HERO CANÓNICO de CMS6-11.
 * Aquí solo definimos:
 *
 * - integración PrestaShop;
 * - bloque Discover Sauleda;
 * - tarjetas exactas del modelo;
 * - hover exacto;
 * - reveal exacto.
 */


/* ==========================================================
   PRESTASHOP · FULL WIDTH
   ========================================================== */

body.cms-id-2
.breadcrumb__wrapper,

body.cms-id-2
.center-column > .page-header {
  display: none !important;
}


body.cms-id-2
.columns-container.container,

body.cms-id-2
.center-column,

body.cms-id-2
.page-content--cms,

body.cms-id-2
.page-content {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


body.cms-id-2
.sauleda-about-category {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  background: #fff;
}


/* ==========================================================
   HEADER SOBRE HERO
   ========================================================== */

body.cms-id-2
#header {
  position: relative;

  z-index: 1000;

  background:
    transparent
    !important;
}


body.cms-id-2
.sauleda-header,

body.cms-id-2
.sauleda-header__row {
  background-color:
    transparent
    !important;
}


/*
 * Solo adaptamos la posición.
 * Altura, tipografía, overlay, etc. vienen del
 * SAULEDA ABOUT CANONICAL HERO común.
 */
body.cms-id-2
.sauleda-about-hero {
  margin-top:
    -84px
    !important;
}


/* ==========================================================
   DISCOVER SAULEDA
   ========================================================== */

body.cms-id-2
.sauleda-about-index {
  width: 100%;

  padding:
    90px 5% 100px;

  background:
    #fff;
}


body.cms-id-2
.sauleda-about-index__inner {
  width: 100%;
  max-width: 1280px;

  margin:
    0 auto;
}


body.cms-id-2
.sauleda-about-index__header {
  max-width: 620px;

  margin:
    0 0 48px;
}


body.cms-id-2
.sauleda-about-index__label {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin:
    0 0 18px;

  color:
    #797973;

  font-size:
    .66rem;

  font-weight:
    500;

  line-height:
    1.4;

  letter-spacing:
    .2em;

  text-transform:
    uppercase;
}


body.cms-id-2
.sauleda-about-index__label::before {
  content: '';

  flex:
    0 0 7px;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #b82828;
}


body.cms-id-2
.sauleda-about-index__header h2 {
  margin:
    0 0 12px;

  color:
    #1a1a18;

  font-size:
    clamp(1.9rem,2.8vw,2.6rem);

  font-weight:
    700;

  line-height:
    1.15;

  letter-spacing:
    -.025em;
}


body.cms-id-2
.sauleda-about-index__header h2 span,
body.cms-id-2
.sauleda-about-index__header h2 em {
  display:
    inline;
}


body.cms-id-2
.sauleda-about-index__header h2 em {
  color:
    #b82828;

  font-style:
    normal;

  font-weight:
    300;
}


body.cms-id-2
.sauleda-about-index__header > p {
  margin:
    0;

  color:
    #5f5f5a;

  font-size:
    .9rem;

  font-weight:
    400;

  line-height:
    1.75;
}


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

body.cms-id-2
.sauleda-about-index__grid {
  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    18px;

  width:
    100%;
}


/* ==========================================================
   CARD · MODELO ORIGINAL
   ========================================================== */

body.cms-id-2
.sauleda-about-index__card {
  position:
    relative;

  display:
    block;

  min-width:
    0;

  aspect-ratio:
    4 / 3;

  overflow:
    hidden;

  border:
    0;

  border-radius:
    14px;

  background:
    #2a2a28;

  color:
    inherit;

  text-decoration:
    none
    !important;
}


/* ----------------------------------------------------------
   IMAGEN
   ---------------------------------------------------------- */

body.cms-id-2
.sauleda-about-index__card-img {
  position:
    absolute;

  inset:
    0;

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    cover;

  transition:
    transform .6s ease;

  transform:
    scale(1);
}


/* EXACTO DEL MODELO */
body.cms-id-2
.sauleda-about-index__card:hover
.sauleda-about-index__card-img {
  transform:
    scale(1.06);
}


/* HISTORY */
body.cms-id-2
.sauleda-about-index__card-img--1 {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/masacril/sauleda-rt-2024-people.jpg');
}


/* VALUES */
body.cms-id-2
.sauleda-about-index__card-img--2 {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/valores/hero-values.webp');
}


/* SUSTAINABILITY */
body.cms-id-2
.sauleda-about-index__card-img--3 {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/idi/shutterstock_1126876247-scaled.webp');
}


/* MASACRIL */
body.cms-id-2
.sauleda-about-index__card-img--4 {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/masacril/sauleda-tecnologia-masacril.webp');
}


/* R&D&I */
body.cms-id-2
.sauleda-about-index__card-img--5 {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/masacril/shutterstock_207840925-scaled-1.jpg');
}


/* CERTIFICATIONS */
body.cms-id-2
.sauleda-about-index__card-img--6 {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/idi/shutterstock_172896887-scaled.jpg');
}


/* ----------------------------------------------------------
   OVERLAY EXACTO
   ---------------------------------------------------------- */

body.cms-id-2
.sauleda-about-index__card-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      to top,
      rgba(26,26,24,.85) 0%,
      rgba(26,26,24,.20) 55%,
      transparent 75%
    );

  pointer-events:
    none;
}


/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */

body.cms-id-2
.sauleda-about-index__card-body {
  position:
    absolute;

  right:
    0;

  bottom:
    0;

  left:
    0;

  z-index:
    2;

  padding:
    22px;
}


body.cms-id-2
.sauleda-about-index__card-num {
  margin:
    0 0 8px;

  color:
    rgba(255,255,255,.65);

  font-size:
    .68rem;

  font-weight:
    400;

  line-height:
    1.4;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


body.cms-id-2
.sauleda-about-index__card h3 {
  margin:
    0 0 8px;

  padding:
    0;

  color:
    #fff
    !important;

  font-size:
    1.15rem;

  font-weight:
    700;

  line-height:
    1.25;

  letter-spacing:
    -.01em;
}


body.cms-id-2
.sauleda-about-index__card p {
  margin:
    0 0 12px;

  color:
    rgba(255,255,255,.82)
    !important;

  font-size:
    .8rem;

  font-weight:
    400;

  line-height:
    1.55;
}


/* ----------------------------------------------------------
   CTA · EXACTO DEL MODELO
   ---------------------------------------------------------- */

body.cms-id-2
.sauleda-about-index__card-cta {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    #fff;

  font-size:
    .65rem;

  font-weight:
    400;

  line-height:
    1.4;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

  opacity:
    0;

  transform:
    translateY(6px);

  transition:
    opacity .3s,
    transform .3s;
}


body.cms-id-2
.sauleda-about-index__card:hover
.sauleda-about-index__card-cta {
  opacity:
    1;

  transform:
    translateY(0);
}


body.cms-id-2
.sauleda-about-index__card-cta svg {
  flex:
    0 0 10px;

  width:
    10px;

  height:
    10px;
}


/*
 * IMPORTANTE:
 * A diferencia del primer intento:
 *
 * - NO translateY de la tarjeta en hover
 * - NO sombra nueva
 * - NO borde rojo
 * - NO cambio de color del título
 *
 * Solo:
 * imagen scale(1.06)
 * + CTA que aparece.
 */


/* ==========================================================
   REVEAL · EXACTO DEL MODELO
   ========================================================== */

body.cms-id-2
.sauleda-about-index
.reveal {
  opacity:
    0;

  transform:
    translateY(36px);

  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform;
}


body.cms-id-2
.sauleda-about-index
.reveal.is-visible {
  opacity:
    1;

  transform:
    translateY(0);
}


body.cms-id-2
.sauleda-about-index
.reveal-delay-1 {
  transition-delay:
    .08s;
}


body.cms-id-2
.sauleda-about-index
.reveal-delay-2 {
  transition-delay:
    .16s;
}


body.cms-id-2
.sauleda-about-index
.reveal-delay-3 {
  transition-delay:
    .24s;
}


body.cms-id-2
.sauleda-about-index
.reveal-delay-4 {
  transition-delay:
    .32s;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 960px) {

  body.cms-id-2
  .sauleda-about-index__grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 580px) {

  body.cms-id-2
  .sauleda-about-index {
    padding:
      64px 20px 76px;
  }


  body.cms-id-2
  .sauleda-about-index__header {
    margin-bottom:
      36px;
  }


  body.cms-id-2
  .sauleda-about-index__grid {
    grid-template-columns:
      minmax(0,1fr);

    gap:
      16px;
  }


  body.cms-id-2
  .sauleda-about-index__card {
    width:
      100%;

    min-width:
      0;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  body.cms-id-2
  .sauleda-about-index
  .reveal {
    opacity:
      1 !important;

    transform:
      none !important;

    transition:
      none !important;
  }


  body.cms-id-2
  .sauleda-about-index__card-img,

  body.cms-id-2
  .sauleda-about-index__card-cta {
    transition:
      none !important;
  }

}

/* ===== SAULEDA ABOUT CATEGORY FINAL END ===== */

/* ===== SAULEDA CMS12 CATALOGOS START ===== */

body.cms-id-12 {
  overflow-x: hidden;
}

/* Hummingbird: la página del modelo ya contiene hero y breadcrumb propios. */
body.cms-id-12 .breadcrumb__wrapper,
body.cms-id-12 .center-column > .page-header,
body.cms-id-12 .page-header {
  display: none !important;
}

body.cms-id-12 #wrapper {
  padding-top: 0 !important;
}

body.cms-id-12 .columns-container.container,
body.cms-id-12 #center-column,
body.cms-id-12 #content.page-content--cms {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cms-id-12 #content.page-content--cms {
  overflow: visible !important;
}

/* Header flotante sobre el hero. */
body.cms-id-12 #header {
  position: relative;
  z-index: 100;
  background: transparent !important;
}

body.cms-id-12 .sauleda-header,
body.cms-id-12 .sauleda-header__row {
  background-color: transparent !important;
}

body.cms-id-12 .sauleda-catalogos-model {
  --red: #B82828;
  --red-dk: #8C1F1F;
  --dark: #1A1A18;
  --mid: #4A4540;
  --muted: #8C8680;
  --cream: #EDE8DC;
  --cream-lt: #F3F3F4;
  --white: #FFFFFF;
  --border: #D8D2C8;
  --pill: 999px;
  --r-card: 14px;
  --ease: cubic-bezier(.4,0,.2,1);

  position: relative;
  left: 50%;

  width: 100vw;
  max-width: 100vw;

  margin-left: -50vw;
  margin-right: -50vw;

  overflow: hidden;

  color: var(--dark);
  background: var(--white);
}

body.cms-id-12 .sauleda-catalogos-model,
body.cms-id-12 .sauleda-catalogos-model *,
body.cms-id-12 .sauleda-catalogos-model *::before,
body.cms-id-12 .sauleda-catalogos-model *::after {
  box-sizing: border-box;
}

body.cms-id-12 .sauleda-catalogos-model h1,
body.cms-id-12 .sauleda-catalogos-model h2,
body.cms-id-12 .sauleda-catalogos-model p {
  margin: 0;
}

body.cms-id-12 .sauleda-catalogos-model a {
  color: inherit;
  text-decoration: none;
}


/* HERO */

body.cms-id-12 .sauleda-catalogos-model .page-hero {
  position: relative;

  height: 42vh;
  min-height: 340px;

  margin-top: -84px;

  overflow: hidden;
  background: #2a2a28;
}

body.cms-id-12 .sauleda-catalogos-model .page-hero-bg {
  position: absolute;
  inset: 0;

  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/catalogos/hero.jpg');

  background-size: cover;
  background-position: center 40%;
}

body.cms-id-12 .sauleda-catalogos-model .page-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.70) 0%,
      rgba(26,26,24,.35) 60%,
      rgba(26,26,24,.24) 100%
    );
}

body.cms-id-12 .sauleda-catalogos-model .page-hero-content {
  position: relative;
  z-index: 2;

  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: 84px 6% 52px;
}

body.cms-id-12 .sauleda-catalogos-model .page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 16px;

  color: rgba(255,255,255,.65);

  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.cms-id-12 .sauleda-catalogos-model .page-breadcrumb a {
  color: rgba(255,255,255,.65);
  transition: color .2s;
}

body.cms-id-12 .sauleda-catalogos-model .page-breadcrumb a:hover {
  color: var(--white);
}

body.cms-id-12 .sauleda-catalogos-model .page-hero h1 {
  margin-bottom: 12px;

  color: var(--white);

  font-size: clamp(2.2rem,4vw,3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}

body.cms-id-12 .sauleda-catalogos-model .page-hero p {
  max-width: 540px;

  color: rgba(255,255,255,.78);

  font-size: .9rem;
  line-height: 1.6;
}


/* SECTION LABEL */

body.cms-id-12 .sauleda-catalogos-model .sec-label {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 18px;

  color: var(--muted);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.cms-id-12 .sauleda-catalogos-model .sec-label::before {
  content: '';

  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;
  background: var(--red);
}

body.cms-id-12 .sauleda-catalogos-model .sec-label--center {
  justify-content: center;
}


/* CATALOGOS */

body.cms-id-12 .sauleda-catalogos-model .section-catalogs {
  padding: 80px 5%;
  background: var(--white);
}

body.cms-id-12 .sauleda-catalogos-model .cat-inner {
  width: 100%;
  max-width: 1280px;

  margin: 0 auto;
}

body.cms-id-12 .sauleda-catalogos-model .catalogos-heading {
  color: var(--dark);

  font-size: clamp(1.8rem,2.8vw,2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}

body.cms-id-12 .sauleda-catalogos-model .catalogos-heading em {
  color: var(--red);

  font-style: normal;
  font-weight: 300;
}

body.cms-id-12 .sauleda-catalogos-model .cat-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 24px;

  margin-top: 48px;
}

body.cms-id-12 .sauleda-catalogos-model .cat-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  border-radius: var(--r-card);
  background: var(--cream-lt);

  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease);
}

body.cms-id-12 .sauleda-catalogos-model .cat-card:hover {
  transform: translateY(-4px);

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

body.cms-id-12 .sauleda-catalogos-model .cat-cover {
  position: relative;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  background-size: cover;
  background-position: center;
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover--general {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/catalogos/general.webp');
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover--solar-pro {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/catalogos/solar-pro.webp');
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover--marine {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/catalogos/marine.webp');
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover--industrial {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/catalogos/industrial.webp');
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover--certifications {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/catalogos/certifications.jpg');
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover--trade-price {
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/catalogos/trade-price.webp');
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(26,26,24,.70) 0%,
      transparent 55%
    );
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover-badge {
  position: absolute;

  top: 14px;
  left: 14px;

  padding: 4px 11px;

  border-radius: var(--pill);

  background: var(--red);
  color: var(--white);

  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover-icon {
  position: absolute;

  bottom: 14px;
  left: 14px;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255,255,255,.16);

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  color: var(--white);
}

body.cms-id-12 .sauleda-catalogos-model .cat-cover-icon svg {
  width: 16px;
  height: 16px;
}

body.cms-id-12 .sauleda-catalogos-model .cat-body {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding: 20px 22px 22px;
}

body.cms-id-12 .sauleda-catalogos-model .cat-title {
  margin-bottom: 6px;

  color: var(--dark);

  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

body.cms-id-12 .sauleda-catalogos-model .cat-desc {
  flex: 1;

  margin-bottom: 16px;

  color: var(--mid);

  font-size: .8rem;
  line-height: 1.6;
}

body.cms-id-12 .sauleda-catalogos-model .cat-meta {
  margin-bottom: 16px;

  color: var(--muted);

  font-size: .68rem;
  letter-spacing: .04em;
}

body.cms-id-12
.sauleda-catalogos-model
.cat-meta span + span::before {
  content: '·';
  margin: 0 6px;
}


/* BOTONES */

body.cms-id-12 .sauleda-catalogos-model .btn-pill-outline-dk {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 100%;

  padding: 10px 20px;

  border: 1.5px solid var(--dark);
  border-radius: var(--pill);

  background: transparent;
  color: var(--dark);

  font: inherit;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .05em;

  transition: all .25s;
}

body.cms-id-12
.sauleda-catalogos-model
a.btn-pill-outline-dk:hover {
  background: var(--dark);
  color: var(--white);
}

/*
 * Los PDF del modelo todavía no existen.
 * Conservamos exactamente la llamada visual,
 * pero no generamos descargas falsas.
 */
body.cms-id-12
.sauleda-catalogos-model
a.btn-pill-outline-dk[aria-disabled="true"] {
  cursor: default;
}

body.cms-id-12
.sauleda-catalogos-model
.btn-pill-outline-dk:disabled {
  opacity: .45;
  cursor: not-allowed;
}

body.cms-id-12
.sauleda-catalogos-model
.btn-pill-outline-dk:disabled:hover {
  background: transparent;
  color: var(--dark);
}


/* TARIFA PROFESIONAL */

body.cms-id-12
.sauleda-catalogos-model
.cat-card.locked .cat-cover {
  filter: grayscale(60%) brightness(.75);
}

body.cms-id-12 .sauleda-catalogos-model .cat-lock-badge {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 0 20px;

  color: var(--white);
  text-align: center;
}

body.cms-id-12
.sauleda-catalogos-model
.cat-lock-badge svg {
  width: 26px;
  height: 26px;
}

body.cms-id-12
.sauleda-catalogos-model
.cat-lock-badge span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* CERTIFICACIONES */

body.cms-id-12 .sauleda-catalogos-model .section-certs {
  padding: 80px 5% 100px;

  border-top: 1px solid var(--border);

  background: var(--cream-lt);
}

body.cms-id-12 .sauleda-catalogos-model .certs-inner {
  width: 100%;
  max-width: 1280px;

  margin: 0 auto;
}

body.cms-id-12 .sauleda-catalogos-model .certs-header {
  max-width: 560px;

  margin: 0 auto 48px;

  text-align: center;
}

body.cms-id-12 .sauleda-catalogos-model .certs-header h2 {
  color: var(--dark);

  font-size: clamp(1.8rem,2.8vw,2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
}

body.cms-id-12 .sauleda-catalogos-model .certs-header h2 em {
  color: var(--red);

  font-style: normal;
  font-weight: 300;
}

body.cms-id-12 .sauleda-catalogos-model .certs-grid {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 20px;
}

body.cms-id-12 .sauleda-catalogos-model .cert-card {
  padding: 32px 24px;

  border: 1px solid var(--border);
  border-radius: var(--r-card);

  background: var(--white);

  text-align: center;
}

body.cms-id-12 .sauleda-catalogos-model .cert-mark {
  margin-bottom: 12px;

  color: var(--red);

  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

body.cms-id-12 .sauleda-catalogos-model .cert-card p {
  color: var(--mid);

  font-size: .78rem;
  line-height: 1.6;
}


/* REVEAL · SOLO CUANDO JS ESTÁ LISTO */

body.cms-id-12 .sauleda-catalogos-model .reveal {
  opacity: 1;
  transform: none;
}

body.cms-id-12
.sauleda-catalogos-model.is-scroll-ready
.reveal {
  opacity: 0;

  transform: translateY(36px);

  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);

  will-change: opacity,transform;
}

body.cms-id-12
.sauleda-catalogos-model.is-scroll-ready
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.cms-id-12
.sauleda-catalogos-model
.reveal-delay-1 {
  transition-delay: .08s;
}

body.cms-id-12
.sauleda-catalogos-model
.reveal-delay-2 {
  transition-delay: .16s;
}

body.cms-id-12
.sauleda-catalogos-model
.reveal-delay-3 {
  transition-delay: .24s;
}


/* RESPONSIVE */

@media (max-width:960px) {

  body.cms-id-12
  .sauleda-catalogos-model
  .cat-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  body.cms-id-12
  .sauleda-catalogos-model
  .certs-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media (max-width:580px) {

  body.cms-id-12
  .sauleda-catalogos-model
  .page-hero {
    min-height: 370px;
  }

  body.cms-id-12
  .sauleda-catalogos-model
  .page-hero-content {
    padding:
      84px 6% 38px;
  }

  body.cms-id-12
  .sauleda-catalogos-model
  .section-catalogs {
    padding:
      64px 20px;
  }

  body.cms-id-12
  .sauleda-catalogos-model
  .section-certs {
    padding:
      64px 20px 80px;
  }

  body.cms-id-12
  .sauleda-catalogos-model
  .cat-grid,
  body.cms-id-12
  .sauleda-catalogos-model
  .certs-grid {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion:reduce) {

  body.cms-id-12
  .sauleda-catalogos-model.is-scroll-ready
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

}

/* ===== SAULEDA CMS12 CATALOGOS END ===== */

/* ===== SAULEDA INSPIRATE MODEL START ===== */

body#cms:has(.sauleda-inspirate-model) .page-header,
body#cms:has(.sauleda-inspirate-model) .breadcrumb__wrapper {
  display: none !important;
}

body#cms:has(.sauleda-inspirate-model) #header.header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 16px 0 !important;
  background: transparent !important;
  z-index: 1070 !important;
}

.sauleda-inspirate-model {
  --red: #B82828;
  --red-dk: #8C1F1F;
  --dark: #1A1A18;
  --mid: #4A4540;
  --muted: #8C8680;
  --cream: #EDE8DC;
  --cream-lt: #F3F3F4;
  --white: #FFFFFF;
  --border: #D8D2C8;
  --pill: 999px;
  --r-card: 14px;
  --ease: cubic-bezier(.4,0,.2,1);

  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-top: -84px;
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
}

.sauleda-inspirate-model *,
.sauleda-inspirate-model *::before,
.sauleda-inspirate-model *::after {
  box-sizing: border-box;
}

.sauleda-inspirate-model a {
  color: inherit;
  text-decoration: none;
}

.sauleda-inspirate-model button {
  font: inherit;
  cursor: pointer;
}


/* HERO */

.sauleda-inspirate-model .page-hero {
  position: relative;
  height: 46vh;
  min-height: 380px;
  overflow: hidden;
  background: #2a2a28;
}

.sauleda-inspirate-model .page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/inspirate/only-you-hero.webp');
}

.sauleda-inspirate-model .page-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      160deg,
      rgba(26,26,24,.70) 0%,
      rgba(26,26,24,.35) 60%,
      rgba(26,26,24,.24) 100%
    );
}

.sauleda-inspirate-model .page-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 6% 52px;
}

.sauleda-inspirate-model .page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: .70rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

.sauleda-inspirate-model .page-breadcrumb a:hover {
  color: #fff;
}

.sauleda-inspirate-model .page-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem,4.5vw,4rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.025em;
  line-height: 1.05;
}

.sauleda-inspirate-model .page-hero p {
  margin: 0;
  max-width: 560px;
  font-size: .92rem;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}


/* FILTROS */

.sauleda-inspirate-model .cat-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 5% 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sauleda-inspirate-model .cat-btn {
  padding: 10px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--mid);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .03em;
  transition: all .2s;
}

.sauleda-inspirate-model .cat-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.sauleda-inspirate-model .cat-btn.active {
  border-color: var(--dark);
  background: var(--dark);
  color: var(--white);
}


/* DESTACADO */

.sauleda-inspirate-model .section-featured {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 5% 20px;
}

.sauleda-inspirate-model .featured-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 44px;
  align-items: center;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: 0 10px 32px rgba(0,0,0,.06);
}

.sauleda-inspirate-model .featured-img {
  aspect-ratio: 16/11;
  background-size: cover;
  background-position: center;
  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/inspirate/only-you-hero.webp');
}

.sauleda-inspirate-model .featured-body {
  padding: 12px 40px 12px 0;
}

.sauleda-inspirate-model .featured-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: var(--pill);
  background: var(--red);
  color: var(--white);
  font-size: .60rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sauleda-inspirate-model .featured-date {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .72rem;
}

.sauleda-inspirate-model .featured-body h2 {
  margin: 0 0 12px;
  color: var(--dark);
  font-size: clamp(1.4rem,2.4vw,1.9rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.sauleda-inspirate-model .featured-body p {
  margin: 0 0 20px;
  color: var(--mid);
  font-size: .88rem;
  line-height: 1.75;
}

.sauleda-inspirate-model .featured-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--red);
  color: var(--red);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
}


/* ARTÍCULOS */

.sauleda-inspirate-model .section-articles {
  padding: 40px 5% 100px;
}

.sauleda-inspirate-model .articles-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.sauleda-inspirate-model .articles-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 26px;
}

.sauleda-inspirate-model .article-card {
  display: block;
}

.sauleda-inspirate-model .article-card.is-hidden {
  display: none;
}

.sauleda-inspirate-model .article-thumb {
  aspect-ratio: 4/3;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: var(--r-card);
  background-position: center;
  background-size: cover;
}

.sauleda-inspirate-model .article-thumb-inner {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform .5s ease;
}

.sauleda-inspirate-model
.article-card:hover
.article-thumb-inner {
  transform: scale(1.06);
}

.sauleda-inspirate-model .article-date {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sauleda-inspirate-model .article-card h3 {
  margin: 0 0 8px;
  color: var(--dark);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  transition: color .2s;
}

.sauleda-inspirate-model .article-card:hover h3 {
  color: var(--red);
}

.sauleda-inspirate-model .article-card p {
  margin: 0 0 12px;
  color: var(--mid);
  font-size: .82rem;
  line-height: 1.65;
}

.sauleda-inspirate-model .article-tag {
  display: inline-flex;
  color: var(--red);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* REVEAL */

.sauleda-inspirate-model .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);
  will-change: opacity, transform;
}

.sauleda-inspirate-model .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sauleda-inspirate-model .reveal-delay-1 {
  transition-delay: .08s;
}

.sauleda-inspirate-model .reveal-delay-2 {
  transition-delay: .16s;
}


/* RESPONSIVE */

@media (max-width: 860px) {

  .sauleda-inspirate-model .featured-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sauleda-inspirate-model .featured-body {
    padding: 0 24px 28px;
  }

}

@media (max-width: 960px) {

  .sauleda-inspirate-model .articles-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

@media (max-width: 580px) {

  .sauleda-inspirate-model {
    margin-top: -76px;
  }

  .sauleda-inspirate-model .page-hero {
    min-height: 400px;
  }

  .sauleda-inspirate-model .page-hero-content {
    padding: 0 24px 38px;
  }

  .sauleda-inspirate-model .cat-bar {
    padding: 30px 20px 0;
  }

  .sauleda-inspirate-model .section-featured {
    padding: 30px 20px 16px;
  }

  .sauleda-inspirate-model .section-articles {
    padding: 30px 20px 70px;
  }

  .sauleda-inspirate-model .articles-grid {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {

  .sauleda-inspirate-model .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* ===== SAULEDA INSPIRATE MODEL END ===== */

/* ===== SAULEDA SIGN IN FINAL MODEL START ===== */

/*
 * Modelo:
 * Sauleda USA Iniciar Sesion.html
 *
 * Adaptación únicamente de markup para formulario nativo PS9.
 */

body:has(.sauleda-auth-section) {
  background: #EDE8DC;
}

body:has(.sauleda-auth-section) #header.header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  z-index: 1070 !important;
}

body:has(.sauleda-auth-section) .breadcrumb__wrapper,
body:has(.sauleda-auth-section) .page-header {
  display: none !important;
}

body:has(.sauleda-auth-section) .sauleda-auth-container,
body:has(.sauleda-auth-section) #main-content,
body:has(.sauleda-auth-section) .page-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   RESET LOCAL
   Evita que Hummingbird engorde las medidas del modelo
   ============================================================ */

.sauleda-auth-section,
.sauleda-auth-section *,
.sauleda-auth-section *::before,
.sauleda-auth-section *::after {
  box-sizing: border-box;
}

.sauleda-auth-section h1,
.sauleda-auth-section h2,
.sauleda-auth-section p {
  padding: 0;
}


/* ============================================================
   LAYOUT EXACTO DEL MODELO
   ============================================================ */

.sauleda-auth-section {
  --red: #B82828;
  --red-dk: #8C1F1F;
  --dark: #1A1A18;
  --mid: #4A4540;
  --muted: #8C8680;
  --cream: #EDE8DC;
  --cream-lt: #F3F3F4;
  --white: #FFFFFF;
  --border: #D8D2C8;
  --pill: 999px;
  --r-card: 14px;

  display: grid;

  grid-template-columns:
    1.05fr 1fr;

  width: 100%;
  min-height: 100vh;

  margin: 0;
  padding: 0;

  background: var(--cream);
  color: var(--dark);
}


/* ============================================================
   IZQUIERDA · FOTO REAL DEL MODELO
   ============================================================ */

.sauleda-auth-visual {
  position: relative;
  overflow: hidden;

  background-image:
    url('/themes/sauleda-store-theme/assets/img/cms/sauleda/idi/shutterstock_660321949-1-scaled.webp');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sauleda-auth-visual-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      190deg,
      rgba(26,26,24,.25) 0%,
      rgba(26,26,24,.70) 100%
    );
}

.sauleda-auth-visual-content {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  height: 100%;

  padding:
    140px
    56px
    64px;

  color: var(--white);
}

.sauleda-auth-sec-label {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  width: fit-content;

  margin: 0 0 18px;

  color:
    rgba(255,255,255,.75);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .20em;
  line-height: 1;
  text-transform: uppercase;
}

.sauleda-auth-sec-label::before {
  content: '';

  width: 7px;
  height: 7px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--red);
}

.sauleda-auth-visual-content h2 {
  max-width: 420px;

  margin: 0 0 16px;

  color: var(--white);

  font-size:
    clamp(1.8rem, 2.6vw, 2.6rem);

  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.18;
}

.sauleda-auth-visual-content p {
  max-width: 380px;

  margin: 0;

  color:
    rgba(255,255,255,.80);

  font-size: .88rem;
  line-height: 1.7;
}


/* ============================================================
   DERECHA
   ============================================================ */

.sauleda-auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;

  padding:
    128px
    6%
    60px;

  background: var(--cream);
}

.sauleda-auth-card {
  width: 100%;
  max-width: 400px;
}


/* etiqueta MI CUENTA */

.sauleda-auth-card
.sauleda-auth-sec-label--dark {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin: 0 0 14px;

  color: var(--muted);

  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .20em;
  line-height: 1;
  text-transform: uppercase;
}


/* ============================================================
   TABS
   ============================================================ */

.sauleda-auth-tabs {
  display: flex;

  gap: 8px;

  margin:
    0 0 30px;

  padding: 0;

  border-bottom:
    1px solid var(--border);
}

.sauleda-auth-tab {
  position: relative;

  display: block;

  margin: 0;
  padding:
    10px
    4px
    12px;

  border: 0;

  color: var(--muted);

  background: none;

  font-size: .80rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;

  text-decoration: none !important;
}

.sauleda-auth-tab + .sauleda-auth-tab {
  margin-left: 8px;
}

.sauleda-auth-tab::after {
  content: '';

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 2px;

  background: transparent;
}

.sauleda-auth-tab.active {
  color: var(--dark);
  font-weight: 600;
}

.sauleda-auth-tab.active::after {
  background: var(--red);
}


/* ============================================================
   TITULO
   ============================================================ */

.sauleda-auth-card h1 {
  margin:
    0 0 8px;

  color: var(--dark);

  font-size:
    clamp(1.7rem, 2.6vw, 2.1rem);

  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.sauleda-auth-sub {
  margin:
    0 0 30px !important;

  color: var(--mid);

  font-size: .84rem;
  line-height: 1.6;
}


/* ============================================================
   FORMULARIO PRESTASHOP
   ============================================================ */

.sauleda-auth-form {
  display: flex;
  flex-direction: column;

  gap: 16px;

  width: 100%;

  margin: 0;
  padding: 0;
}

.sauleda-auth-form-fields {
  display: flex;
  flex-direction: column;

  gap: 16px;

  margin: 0;
  padding: 0;
}


/*
 * Neutralizamos TODOS los márgenes Bootstrap/Hummingbird
 * dentro de cada campo.
 */

.sauleda-auth-form-fields > *,
.sauleda-auth-form .form-group,
.sauleda-auth-form .form-row,
.sauleda-auth-form .form-floating,
.sauleda-auth-form .form-control-wrapper,
.sauleda-auth-form .mb-1,
.sauleda-auth-form .mb-2,
.sauleda-auth-form .mb-3,
.sauleda-auth-form .mb-4 {
  margin:
    0 !important;

  padding-top: 0;
  padding-bottom: 0;
}


/* labels */

.sauleda-auth-form label,
.sauleda-auth-form .form-label {
  display: block;

  margin:
    0 0 6px !important;

  padding: 0;

  color: var(--mid);

  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}


/* inputs */

.sauleda-auth-form .form-control,
.sauleda-auth-form input[type="email"],
.sauleda-auth-form input[type="password"],
.sauleda-auth-form input[type="text"] {
  display: block;

  width: 100%;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding:
    12px
    14px !important;

  border:
    1px solid var(--border) !important;

  border-radius:
    8px !important;

  background:
    var(--cream-lt) !important;

  color: var(--dark);

  box-shadow:
    none !important;

  font-size: .88rem;
  line-height: 1.2;
}

.sauleda-auth-form
.form-control:focus {
  outline: none;

  border-color:
    var(--red) !important;

  background:
    var(--white) !important;

  box-shadow:
    0 0 0 3px rgba(184,40,40,.12)
    !important;
}


/* ============================================================
   CONTRASEÑA · OJO DENTRO DEL CAMPO
   ============================================================ */

.sauleda-auth-form .input-group {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;
}

.sauleda-auth-form
.input-group
.form-control {
  width: 100% !important;

  padding-right:
    50px !important;

  border-radius:
    8px !important;
}

.sauleda-auth-form
.input-group
.btn,
.sauleda-auth-form
.input-group
button {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  z-index: 5;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  min-width: 44px !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-left:
    1px solid var(--border) !important;

  border-radius:
    0 8px 8px 0 !important;

  background:
    transparent !important;

  color: var(--mid) !important;

  box-shadow: none !important;
}


/* ============================================================
   RECORDAR / PASSWORD
   ============================================================ */

.sauleda-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin:
    -4px 0 0;

  padding: 0;

  font-size: .78rem;
  line-height: 1.2;
}

.sauleda-auth-check {
  display: flex !important;
  align-items: center;

  gap: 7px;

  margin: 0 !important;

  color: var(--mid);

  cursor: pointer;
  user-select: none;
}

.sauleda-auth-check span {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.sauleda-auth-check
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  width: 14px;
  height: 14px;

  flex:
    0 0 14px;

  margin: 0;

  border:
    1.5px solid var(--border);

  border-radius: 3px;

  background: var(--white);
}

.sauleda-auth-link,
.sauleda-auth-switch a {
  color:
    var(--red) !important;

  font-weight: 500;

  text-decoration:
    none !important;
}


/* ============================================================
   BOTON
   ============================================================ */

.sauleda-auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 0 !important;

  margin:
    6px 0 0 !important;

  padding:
    13px
    24px !important;

  border:
    0 !important;

  border-radius:
    var(--pill) !important;

  background:
    var(--red) !important;

  color:
    var(--white) !important;

  font-size: .80rem;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.2;
}

.sauleda-auth-submit:hover {
  background:
    var(--red-dk) !important;
}


/* ============================================================
   NUEVO AQUI
   ============================================================ */

.sauleda-auth-switch {
  margin:
    26px 0 0 !important;

  padding: 0;

  color: var(--mid);

  font-size: .82rem;
  line-height: 1.3;
  text-align: center;
}


/* ============================================================
   DIVISOR
   ============================================================ */

.sauleda-auth-divider {
  display: flex;
  align-items: center;

  gap: 12px;

  margin:
    26px 0 !important;

  padding: 0;
}

.sauleda-auth-divider::before,
.sauleda-auth-divider::after {
  content: '';

  flex: 1;

  height: 1px;

  background:
    var(--border);
}

.sauleda-auth-divider span {
  color: var(--muted);

  font-size: .68rem;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}


/* ============================================================
   TRADE
   ============================================================ */

.sauleda-auth-trade {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  margin: 0;

  padding:
    16px
    18px;

  border-radius:
    var(--r-card);

  background:
    var(--cream-lt);
}

.sauleda-auth-trade p {
  margin: 0;
  padding: 0;

  color: var(--mid);

  font-size: .78rem;
  line-height: 1.5;
}

.sauleda-auth-trade p strong {
  display: block;

  margin:
    0 0 2px;

  color: var(--dark);

  font-size: .84rem;
}

.sauleda-auth-trade a {
  padding:
    8px
    16px;

  border:
    1.5px solid var(--red);

  border-radius:
    var(--pill);

  color:
    var(--red);

  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;

  white-space: nowrap;

  text-decoration:
    none !important;
}


/* ============================================================
   RESPONSIVE DEL MODELO
   ============================================================ */

@media (max-width: 900px) {

  .sauleda-auth-section {
    grid-template-columns:
      1fr;
  }

  .sauleda-auth-visual {
    display: none;
  }

}

@media (max-width: 480px) {

  .sauleda-auth-form-wrap {
    padding:
      116px
      6%
      50px;
  }

  .sauleda-auth-trade {
    flex-direction: column;
    align-items: flex-start;
  }

}

/* ===== SAULEDA SIGN IN FINAL MODEL END ===== */

/* ===== SAULEDA SIGN IN HIDE FOOTER START ===== */

/* Footer oculto exclusivamente en Sign In */
body:has(.sauleda-auth-section) #footer,
body:has(.sauleda-auth-section) footer,
body:has(.sauleda-auth-section) .footer-container {
  display: none !important;
}

/* ===== SAULEDA SIGN IN HIDE FOOTER END ===== */

/* ===== SAULEDA SIGN IN PAGE PADDING START ===== */

/*
 * Anula únicamente en Sign In:
 *
 * @layer ps-pages {
 *   .page:not(body) {
 *     padding-bottom: 2rem;
 *   }
 * }
 */
body:has(.sauleda-auth-section) .page:not(body) {
  padding-bottom: 0 !important;
}

/* ===== SAULEDA SIGN IN PAGE PADDING END ===== */