/**
 * Sky Solutions Group — Architectural Blueprint Grid & Micro-interactions
 * Modular system inspired by high-precision editorial/CAD layouts.
 * Consumes semantic tokens from holding-tokens.css (--grid-*, --band-alt-*, --ink, --orange).
 */

/* ——— 1. Global Film Grain Overlay ——— */
.ssg-grain{
  position:fixed;
  inset:0;
  z-index:40;
  pointer-events:none;
  opacity:.32;
  mix-blend-mode:var(--chrome-grain-blend, overlay);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
[data-theme="light"] .ssg-grain{
  opacity:.24;
}

/* ——— 2. 5-Column Architectural Band & Vertical Strokes ——— */
.bp-band{
  position:relative;
  isolation:isolate;
  overflow-x:clip;
  border-top:1px solid var(--grid-stroke);
  background:var(--mist);
  color:var(--charcoal);
}
.bp-band--alt{
  background:var(--band-alt-bg);
  color:var(--band-alt-ink);
  --grid-stroke:var(--band-alt-stroke);
}
.bp-band--surface{
  background:var(--surface);
}

/* Continuous 5-column background guides inside each band */
.bp-strokes{
  position:absolute;
  inset:0;
  width:min(1350px, 100% - 64px);
  margin:0 auto;
  pointer-events:none;
  z-index:0;
  display:grid;
  grid-template-columns:270px repeat(4, minmax(0, 1fr));
}
.bp-strokes > i{
  display:block;
  height:100%;
  border-left:1px solid var(--grid-stroke);
}
.bp-strokes > i:last-child{
  border-right:1px solid var(--grid-stroke);
}

/* Crosshair (+) nodes at section top intersections */
.bp-crosses{
  position:absolute;
  top:-5px;
  left:0;
  right:0;
  width:min(1350px, 100% - 64px);
  margin:0 auto;
  pointer-events:none;
  z-index:2;
  display:grid;
  grid-template-columns:270px repeat(4, minmax(0, 1fr));
}
.bp-crosses > b{
  position:relative;
  display:block;
  height:9px;
}
.bp-crosses > b::before,
.bp-crosses > b::after{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  background:var(--grid-cross);
}
.bp-crosses > b::before{
  width:9px;
  height:1px;
  transform:translateX(-4px);
}
.bp-crosses > b::after{
  width:1px;
  height:9px;
  transform:translateY(-4px);
}

/* ——— 3. Asymmetric 1+4 Grid Container (270px Sticky Rail + 1080px Stage) ——— */
.bp-stage{
  position:relative;
  z-index:1;
  width:min(1350px, 100% - 64px);
  margin:0 auto;
  display:grid;
  grid-template-columns:270px minmax(0, 1fr);
  padding:clamp(64px, 9vh, 112px) 0;
}

.bp-rail{
  position:relative;
  min-width:0;
  padding-right:24px;
}
.bp-rail__sticky{
  position:sticky;
  top:116px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.bp-tag{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:600 12px/1.2 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.bp-tag__slash{
  color:var(--ssg-orange);
  font-weight:700;
  letter-spacing:.04em;
}
.bp-rail__sub{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 0 0;
  border-top:1px solid var(--grid-stroke);
  font:500 12px/1.35 "Geist Sans",system-ui,sans-serif;
  color:var(--muted-2);
}
.bp-rail__sub span{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.bp-rail__sub strong{
  color:var(--ink);
  font-weight:650;
}

.bp-content{
  min-width:0;
  padding-left:clamp(24px, 3vw, 44px);
}

/* ——— 4. Double-Text Roll Button & Docked Icon Box ———
   Unificado globalmente en /css/holding-cta.css (.cta, .cta--ghost, .cta--on-media, .bp-btn) */

/* ——— 5. Interactive Accordion Matrix (01–03) ——— */
.bp-acc{
  border-top:1px solid var(--grid-stroke-strong);
}
.bp-acc__item{
  border-bottom:1px solid var(--grid-stroke-strong);
  transition:background .28s ease;
}
.bp-acc__head{
  width:100%;
  background:none;
  border:0;
  padding:clamp(22px, 3vh, 32px) 0;
  display:grid;
  grid-template-columns:72px minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.bp-acc__num{
  font:650 clamp(20px, 2.2vw, 28px)/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.04em;
  color:var(--muted-2);
  transition:color .25s ease;
}
.bp-acc__item.is-open .bp-acc__num{
  color:var(--ssg-orange);
}
.bp-acc__title{
  margin:0;
  font:650 clamp(22px, 2.8vw, 38px)/1.08 "Geist Sans",system-ui,sans-serif;
  letter-spacing:-.035em;
  color:var(--ink);
  opacity:.58;
  transition:opacity .25s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.bp-acc__item.is-open .bp-acc__title,
.bp-acc__head:hover .bp-acc__title{
  opacity:1;
}
.bp-acc__toggle{
  width:36px;
  height:36px;
  border:1px solid var(--grid-stroke-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:400 20px/1 "Geist Sans",system-ui,sans-serif;
  color:var(--ink);
  transition:transform .32s cubic-bezier(.16,1,.3,1), border-color .25s ease, background .25s ease;
}
.bp-acc__item.is-open .bp-acc__toggle{
  transform:rotate(45deg);
  border-color:var(--ssg-orange);
  color:var(--ssg-orange);
}
.bp-acc__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.16,1,.3,1);
}
.bp-acc__item.is-open .bp-acc__panel{
  grid-template-rows:1fr;
}
.bp-acc__panel-in{
  overflow:hidden;
}
.bp-acc__body-grid{
  padding:8px 0 clamp(32px, 4.5vh, 48px) 72px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 480px);
  gap:clamp(24px, 3.5vw, 48px);
  align-items:center;
}
.bp-acc__pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.bp-acc__pill{
  padding:5px 10px;
  border:1px solid var(--grid-stroke-strong);
  font:600 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.bp-acc__media{
  --px-x:0px;
  --px-y:0px;
  --px-mx:0px;
  --px-my:0px;
  --px-scale:1.15;
  position:relative;
  margin:0;
  aspect-ratio:16 / 9.8;
  overflow:hidden;
  border:1px solid var(--grid-stroke-strong);
  background:var(--ssg-film);
  isolation:isolate;
}
.bp-acc__media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,8,10,.18) 0%, transparent 42%, rgba(6,8,10,.52) 100%),
    linear-gradient(125deg, rgba(255,102,0,.12) 0%, transparent 45%);
  opacity:.72;
  transition:opacity .55s ease;
}
.bp-acc__media:hover::after{
  opacity:.42;
}
.bp-acc__media img,
.bp-acc__media video{
  position:absolute;
  top:-10%;
  left:0;
  width:100%;
  height:120%;
  object-fit:cover;
  display:block;
  will-change:transform;
  filter:contrast(1.07) brightness(.84) saturate(.62);
  transform:translate3d(calc(var(--px-x) + var(--px-mx)), calc(var(--px-y) + var(--px-my)), 0) scale(var(--px-scale));
  transition:transform .75s cubic-bezier(.16,1,.3,1), filter .55s ease;
}
.bp-acc__item.is-open .bp-acc__media{
  --px-scale:1.06;
  border-color:rgba(255,102,0,.42);
}
.bp-acc__item.is-open .bp-acc__media img,
.bp-acc__item.is-open .bp-acc__media video{
  filter:contrast(1.06) brightness(.92) saturate(.78);
}
.bp-acc__media:hover{
  --px-scale:1.1;
}
.bp-acc__frame{
  position:absolute;
  inset:10px;
  z-index:2;
  pointer-events:none;
}
.bp-acc__frame i{
  position:absolute;
  width:10px;
  height:10px;
  border:1px solid rgba(255,255,255,.45);
  transition:border-color .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.bp-acc__media:hover .bp-acc__frame i{
  border-color:var(--ssg-orange);
}
.bp-acc__frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.bp-acc__frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.bp-acc__frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.bp-acc__frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ——— 5b. Multi-plane Interactive HUD Overlay inside Image Parallax ——— */
@keyframes bpHudPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.22); }
}
@keyframes bpHudDash {
  to { stroke-dashoffset: -48; }
}
@keyframes bpHudSweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(220%); }
}

.bp-parallax-hud{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(14px, 1.8vw, 22px);
  transform:translate3d(var(--px-fg-x, 0px), var(--px-fg-y, 0px), 0);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.bp-parallax-hud__svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.bp-hud-line{
  stroke:rgba(255,102,0,.55);
  stroke-width:1.25;
  stroke-dasharray:5 5;
  animation:bpHudDash 2.6s linear infinite;
}
.bp-hud-ring{
  stroke:rgba(255,255,255,.32);
  stroke-width:1;
  stroke-dasharray:3 4;
}
.bp-hud-core{
  fill:var(--ssg-orange);
  filter:drop-shadow(0 0 8px rgba(255,102,0,.85));
}
.bp-hud-node{
  fill:#ffffff;
  stroke:var(--ssg-orange);
  stroke-width:1.5;
}
.bp-hud-chip{
  position:absolute;
  padding:5px 10px;
  background:rgba(6,8,10,.76);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font:650 10px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#ffffff;
  white-space:nowrap;
}
.bp-hud-chip--tl{ top:18%; left:14%; }
.bp-hud-chip--tr{ top:18%; right:14%; }
.bp-hud-chip--bl{ bottom:22%; left:14%; }
.bp-hud-chip--br{ bottom:22%; right:14%; }
.bp-hud-chip--center{
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-color:var(--ssg-orange);
  color:#ffffff;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
}

.bp-hud-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font:650 9.5px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.bp-hud-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  background:rgba(6,8,10,.72);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.bp-hud-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ssg-orange);
  animation:bpHudPulse 1.8s ease-in-out infinite;
}

.bp-hud-nodes{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px;
}
.bp-hud-nodes span{
  position:relative;
  overflow:hidden;
  padding:6px 4px;
  background:rgba(6,8,10,.76);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font:650 9px/1.15 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  text-align:center;
}
.bp-hud-nodes span b{
  display:block;
  color:var(--ssg-orange);
  margin-bottom:2px;
}
.bp-hud-nodes span.is-accent{
  border-color:rgba(255,102,0,.65);
}
.bp-hud-nodes span::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,102,0,.22), transparent);
  animation:bpHudSweep 3.4s ease-in-out infinite;
}

.bp-hud-timeline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  background:rgba(6,8,10,.78);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.bp-hud-step{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.bp-hud-step strong{
  font:700 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.1em;
  color:#ffffff;
}
.bp-hud-step.is-accent strong{
  color:var(--ssg-orange);
}
.bp-hud-step span{
  font:500 9px/1.1 "Geist Sans",system-ui,sans-serif;
  color:rgba(255,255,255,.72);
}
.bp-hud-trace{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.2), var(--ssg-orange));
  position:relative;
  overflow:hidden;
}

.bp-hud-split{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  background:rgba(6,8,10,.76);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.bp-hud-divider{
  width:1px;
  height:100%;
  background:rgba(255,102,0,.55);
}
.bp-hud-zone{
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  gap:3px;
  transition:background .3s ease;
}
.bp-hud-zone span{
  font:600 9px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.14em;
  color:var(--ssg-orange);
}
.bp-hud-zone strong{
  font:700 11px/1.1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.1em;
  color:#ffffff;
}
.bp-acc__media[data-hover-side="left"] .bp-hud-zone--left,
.bp-acc__media[data-hover-side="right"] .bp-hud-zone--right{
  background:rgba(255,102,0,.18);
}

/* ——— 6. Staggered Architectural Roadmap (4 Columns inside Stage) ——— */
.bp-roadmap{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  border-top:1px solid var(--grid-stroke-strong);
  border-bottom:1px solid var(--grid-stroke-strong);
}
.bp-step{
  position:relative;
  padding:clamp(28px, 4vh, 44px) clamp(20px, 2.4vw, 32px);
  border-right:1px solid var(--grid-stroke);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bp-step:last-child{
  border-right:0;
}
.bp-step:nth-child(2){
  padding-top:clamp(56px, 8vh, 96px);
}
.bp-step:nth-child(3){
  padding-top:clamp(92px, 13vh, 148px);
}
.bp-step__year{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:700 12px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ssg-orange);
}
.bp-step__year::before{
  content:"//";
  opacity:.85;
}
.bp-step__kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--grid-stroke);
}

/* ——— 7. Responsive Collapse ——— */
@media (max-width:1024px){
  .bp-strokes,
  .bp-crosses{
    width:min(1350px, 100% - 40px);
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .bp-strokes > i:nth-child(n+3),
  .bp-crosses > b:nth-child(n+3){
    display:none;
  }
  .bp-stage{
    width:min(1350px, 100% - 40px);
    grid-template-columns:1fr;
    gap:28px;
    padding:clamp(48px, 7vh, 76px) 0;
  }
  .bp-rail{
    padding-right:0;
  }
  .bp-rail__sticky{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    padding-bottom:14px;
    border-bottom:1px solid var(--grid-stroke);
  }
  .bp-rail__sub{
    border-top:0;
    padding-top:0;
    flex-direction:row;
    gap:16px;
  }
  .bp-content{
    padding-left:0;
  }
  .bp-acc__body-grid{
    padding-left:0;
    grid-template-columns:1fr;
  }
  .bp-roadmap{
    grid-template-columns:1fr;
  }
  .bp-step,
  .bp-step:nth-child(2),
  .bp-step:nth-child(3){
    padding:28px 0;
    border-right:0;
    border-bottom:1px solid var(--grid-stroke);
  }
  .bp-step:last-child{
    border-bottom:0;
  }
}

@media (max-width:560px){
  .bp-strokes,
  .bp-crosses,
  .bp-stage{
    width:min(1350px, 100% - 28px);
  }
  .bp-acc__head{
    grid-template-columns:44px minmax(0, 1fr) auto;
    gap:10px;
  }
}

/* ——— 8. Home Integration Layer (.bp-home-*) ——— */
/* Hero / Climb architectural HUD & grid overlay (ALWAYS WHITE ON VIDEO) */
.bp-scene-strokes{
  position:absolute;
  inset:0;
  width:min(1180px, 100% - 64px);
  margin:0 auto;
  pointer-events:none;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.bp-scene-strokes > i{
  display:block;
  height:100%;
  border-left:1px solid rgba(255,255,255,.07);
}
.bp-scene-strokes > i:last-child{
  border-right:1px solid rgba(255,255,255,.07);
}

.bp-scene-frame{
  position:absolute;
  inset:clamp(14px, 2vw, 22px);
  z-index:2;
  pointer-events:none;
}
.bp-scene-frame > i{
  position:absolute;
  width:16px;
  height:16px;
  border:1px solid rgba(255,255,255,.36);
}
.bp-scene-frame > i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.bp-scene-frame > i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.bp-scene-frame > i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.bp-scene-frame > i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.bp-scene-hud{
  position:absolute;
  left:clamp(24px, 3vw, 40px);
  right:clamp(24px, 3vw, 40px);
  bottom:clamp(20px, 2.8vh, 28px);
  z-index:2;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:600 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-shadow:0 1px 4px rgba(0,0,0,.75);
}
[data-theme="light"] .bp-scene-hud,
[data-theme="dark"] .bp-scene-hud{
  color:rgba(255,255,255,.78);
}
.bp-scene-hud b{
  color:var(--ssg-orange);
  font-weight:700;
  margin-right:6px;
}

.bp-feat-head{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:calc(12 * var(--s, 1px));
}
.f-l .bp-feat-head{
  flex-direction:row-reverse;
}
.bp-feat-head .mark-line{
  margin:0 !important;
}
.bp-feat-idx{
  font:650 11px/1 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 4px rgba(0,0,0,.85);
}
[data-theme="light"] .bp-feat-idx,
[data-theme="dark"] .bp-feat-idx{
  color:rgba(255,255,255,.88);
}
.bp-feat-idx b{
  color:var(--ssg-orange);
  font-weight:700;
}

/* Home architectural sections (#operacion, #empresas, #resenas, #equipo, #sedes, #faq) */
.bp-home-sec{
  position:relative;
  border-top:1px solid var(--grid-stroke);
}
.bp-home-sec.bp-home-sec--alt{
  background:var(--band-alt-bg);
  --grid-stroke:var(--band-alt-stroke);
}
.bp-home-sec > .bp-strokes,
.bp-home-sec > .bp-crosses{
  width:min(1180px, 100% - 64px);
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.bp-home-sec > .bp-strokes > i:nth-child(5),
.bp-home-sec > .bp-crosses > b:nth-child(5){
  display:none;
}
.bp-home-sec > .ops__in,
.bp-home-sec > .firms__in,
.bp-home-sec > .proof__in,
.bp-home-sec > .team__in,
.bp-home-sec > .sedes__in,
.bp-home-sec > .faq__in{
  position:relative;
  z-index:1;
  width:min(1180px, 100% - 64px);
}

.bp-sec-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  padding-bottom:14px;
  margin-bottom:clamp(20px, 3vh, 32px);
  border-bottom:1px solid var(--grid-stroke-strong);
}
.bp-sec-bar__meta{
  margin:0;
  font:600 11px/1.2 "Geist Sans",system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:900px){
  .bp-scene-hud{
    display:none;
  }
  .bp-scene-strokes,
  .bp-home-sec > .bp-strokes,
  .bp-home-sec > .bp-crosses{
    width:min(1180px, 100% - 40px);
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .bp-scene-strokes > i:nth-child(n+3),
  .bp-home-sec > .bp-strokes > i:nth-child(n+3),
  .bp-home-sec > .bp-crosses > b:nth-child(n+3){
    display:none;
  }
}
@media (max-aspect-ratio:1/1){
  .f-l .bp-feat-head{
    flex-direction:row;
  }
}
@media (max-width:560px){
  .bp-scene-strokes,
  .bp-home-sec > .bp-strokes,
  .bp-home-sec > .bp-crosses{
    width:min(1180px, 100% - 28px);
  }
}