/* FILE: /srv/slimboom/Sites/slimboom/public/assets/spanihel/hero.css
 * Version: 2026-11-07-v33, V32 pagination plus homepage CTA hover states.
 * Same approved 1774 x 789 images; right-side captions remain in WebP.
 * Desktop + mobile use the same real DOM headings, descriptions and links.
 */
/* StrategySift V40: semantic contrast correction; scope intentionally limited. */

body.sb-unified.sa-mode .sa-main > .hero .slide > .sa-hero-art{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center 22%;
}
body.sb-unified.sa-mode .hero .sa-hero-copy{
  position:absolute; top:10.5%; left:5.6%; z-index:2;
  width:min(48%, 850px); color:#fff; text-align:left;
  text-shadow:0 2px 13px rgba(0,16,40,.2);
}
body.sb-unified.sa-mode .hero .sa-hero-kicker{
  display:flex; align-items:center; gap:20px;
  margin:0 0 clamp(18px,2vw,34px); color:#e5f2fd;
  font-size:clamp(12px,1.12vw,20px); line-height:1.35; font-weight:600;
  letter-spacing:.23em; text-transform:uppercase;
}
body.sb-unified.sa-mode .hero .sa-hero-kicker::before{
  content:""; flex:0 0 auto; width:45px; height:5px;
  border-radius:5px; background:#ff8308;
}
body.sb-unified.sa-mode .hero .sa-hero-copy h1{
  margin:0 0 clamp(17px,1.8vw,30px); color:#fff;
  font-size:clamp(32px,3.63vw,71px); font-weight:800;
  letter-spacing:-.025em; line-height:1.08;
}
body.sb-unified.sa-mode .hero .sa-hero-description{
  margin:0; max-width:min(42vw,770px); color:#f0f8ff;
  font-size:clamp(16px,1.55vw,28px); line-height:1.35;
  font-weight:400;
}
body.sb-unified.sa-mode .hero .sa-hero-actions{
  display:flex; flex-wrap:wrap; gap:clamp(12px,1.8vw,32px);
  margin-top:clamp(20px,2.4vw,44px);
}
body.sb-unified.sa-mode .hero .sa-hero-button{
  min-height:clamp(44px,3.55vw,64px);
  padding:clamp(10px,.95vw,18px) clamp(16px,1.8vw,32px);
  border:2px solid transparent; border-radius:10px;
  display:inline-flex; justify-content:center; align-items:center;
  gap:17px; font-size:clamp(14px,1.23vw,22px); line-height:1.15;
  font-weight:750; text-shadow:none; white-space:nowrap;
  transition:background-color .2s ease,box-shadow .2s ease;
}
body.sb-unified.sa-mode .hero .sa-hero-button--primary{
  background:#ff8308; border-color:#ff8308; color:var(--ss-color-on-accent,#0b2545);
}
body.sb-unified.sa-mode .hero .sa-hero-button--primary:hover{
  background:#e87200; border-color:#e87200;
}
body.sb-unified.sa-mode .hero .sa-hero-button--secondary{
  background:rgba(4,33,65,.15); border-color:rgba(245,251,255,.85); color:white;
}
body.sb-unified.sa-mode .hero .sa-hero-button--secondary:hover{
  background:rgba(10,71,119,.5);
}
body.sb-unified.sa-mode .hero .sa-hero-button:focus-visible,
body.sb-unified.sa-mode .hero .hero-dots button:focus-visible{
  outline:3px solid #fff; outline-offset:4px;
}
/* Hide unused legacy image-backed hit targets. Kept only as CSS compatibility. */
body.sb-unified.sa-mode .hero .sa-hero-hitareas{display:none;}
@media(max-width:1300px) and (min-width:861px){
  body.sb-unified.sa-mode .hero .sa-hero-copy{width:50%;}
  body.sb-unified.sa-mode .hero .sa-hero-copy h1{font-size:clamp(32px,3.35vw,50px);}
  body.sb-unified.sa-mode .hero .sa-hero-description{font-size:clamp(16px,1.65vw,21px);}
  body.sb-unified.sa-mode .hero .sa-hero-kicker{font-size:clamp(12px,1.13vw,15px);}
}
@media(max-width:860px){
  body.sb-unified.sa-mode .sa-main > .hero{
    aspect-ratio:auto; height:510px;
  }
  body.sb-unified.sa-mode .hero .slide{background-image:none;}
  body.sb-unified.sa-mode .sa-main > .hero .slide > .sa-hero-art{
    display:block; object-fit:cover; object-position:left center;
  }
  body.sb-unified.sa-mode .hero .slide::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,rgba(3,26,55,.95) 0%,rgba(3,26,55,.83) 55%,rgba(5,41,75,.32) 100%);
    pointer-events:none;
  }
  body.sb-unified.sa-mode .hero .sa-hero-copy{
    top:12%; left:6%; width:min(88%,560px); z-index:2;
  }
  body.sb-unified.sa-mode .hero .sa-hero-kicker{font-size:12px;letter-spacing:.15em;gap:12px;margin-bottom:20px;}
  body.sb-unified.sa-mode .hero .sa-hero-kicker::before{width:28px;height:4px;}
  body.sb-unified.sa-mode .hero .sa-hero-copy h1{
    font-size:clamp(29px,6.3vw,47px); line-height:1.11;
    letter-spacing:-.025em; margin-bottom:18px;
  }
  body.sb-unified.sa-mode .hero .sa-hero-description{
    max-width:540px; font-size:clamp(15px,2.45vw,18px); line-height:1.53;
  }
  body.sb-unified.sa-mode .hero .sa-hero-actions{gap:12px;margin-top:26px;}
  body.sb-unified.sa-mode .hero .sa-hero-button{font-size:14px;padding:12px 15px;border-radius:8px;min-height:46px;}
  body.sb-unified.sa-mode .hero .hero-dots{bottom:15px;}
}
@media(max-width:560px){
  body.sb-unified.sa-mode .sa-main > .hero{height:520px;}
  body.sb-unified.sa-mode .hero .sa-hero-copy{left:20px;top:13%;width:calc(100% - 40px);}
  body.sb-unified.sa-mode .hero .sa-hero-copy h1{font-size:clamp(29px,8.5vw,37px);}
  body.sb-unified.sa-mode .hero .sa-hero-description{font-size:15px;}
  body.sb-unified.sa-mode .hero .sa-hero-actions{gap:10px;margin-top:24px;}
  body.sb-unified.sa-mode .hero .sa-hero-button{font-size:12px;padding:11px 12px;min-height:44px;}
}
@media(prefers-reduced-motion:reduce){
  body.sb-unified.sa-mode .hero .sa-hero-button{transition:none;}
}

/* V32: enlarge each carousel pagination CLICK/TAP target without changing the
 * visible 30x5 indicator. The slider JS/DOM and images remain unchanged.
 * Original desktop indicator center is preserved by adjusting bottom offset.
 */
body.sb-unified.sa-mode .hero .hero-dots {
  gap: 0;
  padding: 0;
  bottom: calc(4.1% - 11.5px);
}
body.sb-unified.sa-mode .hero .hero-dots button,
body.sb-unified.sa-mode .hero .hero-dots button.active {
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  opacity: 1;
  cursor: pointer;
  touch-action: manipulation;
}
body.sb-unified.sa-mode .hero .hero-dots button::after {
  content: "";
  display: block;
  width: 30px;
  height: 5px;
  border-radius: 8px;
  background: #9ab9d6;
  opacity: .65;
}
body.sb-unified.sa-mode .hero .hero-dots button.active::after {
  background: #fff;
  opacity: 1;
}
@media (max-width: 860px) {
  body.sb-unified.sa-mode .hero .hero-dots { bottom: 4px; }
}

/* V33: homepage interactive states only. Preserve the existing layouts,
 * labels, hit target sizes, hero media, and slider behavior. */
body.sb-unified.sa-mode .sa-main .btn,
body.sb-unified.sa-mode .sa-main .more,
body.sb-unified.sa-mode .sa-main .paper-links a,
body.sb-unified.sa-mode .sa-main .pathway-link {
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body.sb-unified.sa-mode .hero .hero-dots button,
body.sb-unified.sa-mode .hero .hero-dots button::after {
  transition:background-color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine) {
  body.sb-unified.sa-mode .sa-main .btn-primary:hover {
    color:var(--ss-color-on-accent,#0b2545);
    background:#df6d00;
    border-color:#df6d00;
    box-shadow:0 5px 15px rgba(223,109,0,.22);
  }
  body.sb-unified.sa-mode .sa-main .btn-secondary:hover {
    color:#0b568b;
    background:#edf6fd;
    border-color:#76b2d8;
    box-shadow:0 4px 12px rgba(9,78,129,.10);
  }
  body.sb-unified.sa-mode .sa-main .more:hover,
  body.sb-unified.sa-mode .sa-main .pathway-link:hover {
    color:#084c7d;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  body.sb-unified.sa-mode .sa-main .paper-links a:hover {
    color:#084c7d;
    background:#edf6fd;
    border-color:#76b2d8;
  }
  body.sb-unified.sa-mode .hero .hero-dots button:hover {
    background:rgba(255,255,255,.13);
  }
  body.sb-unified.sa-mode .hero .hero-dots button:hover::after {
    background:#fff;
    opacity:1;
    box-shadow:0 0 0 2px rgba(255,255,255,.16);
  }
  body.sb-unified.sa-mode .sa-global-header__account>summary:hover,
  body.sb-unified.sa-mode .sa-global-header__mobile>summary:hover {
    background:#edf6fb;
    border-radius:7px;
  }
}
body.sb-unified.sa-mode .sa-main :is(.btn,.more,.paper-links a,.pathway-link):focus-visible,
body.sb-unified.sa-mode .sa-global-header :is(summary,button):focus-visible {
  outline:2px solid #147bb5;
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce) {
  body.sb-unified.sa-mode .sa-main :is(.btn,.more,.paper-links a,.pathway-link),
  body.sb-unified.sa-mode .hero .hero-dots button,
  body.sb-unified.sa-mode .hero .hero-dots button::after {
    transition:none;
  }
}