/* IKREA — About section, reference-aligned desktop and responsive layouts. */
#nosotros.about-band{isolation:isolate;min-height:320px;background:#100823;color:#fff}
#nosotros .about-backdrop{background:linear-gradient(90deg,rgba(17,7,42,.98) 0%,rgba(23,10,51,.95) 38%,rgba(24,9,48,.68) 64%,rgba(15,7,28,.88) 100%),radial-gradient(ellipse at 72% 15%,rgba(255,103,30,.35),transparent 44%),radial-gradient(ellipse at 14% 95%,rgba(116,38,227,.5),transparent 55%);pointer-events:none}
#nosotros .about-backdrop:after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 12% 130%,transparent 0 13px,rgba(133,62,242,.17) 14px 15px,transparent 16px 26px);mask-image:linear-gradient(0deg,#000,transparent 43%)}
#nosotros .about-band-inner{min-height:320px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.8fr) minmax(210px,.95fr);gap:clamp(20px,3vw,42px);align-items:center;padding-block:25px}
#nosotros .about-copy .section-tag{display:block;color:#ff782b;font-weight:800;font-size:13px;letter-spacing:.02em;margin-bottom:9px}
#nosotros .about-copy h2{font-family:Manrope,sans-serif;font-size:clamp(25px,2.45vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.04em;margin:0 0 10px}
#nosotros .about-copy h2 em{font-style:normal;color:#ff742a}
#nosotros .about-copy p{font-size:clamp(13px,1.12vw,15px);line-height:1.43;color:#e9e2f1;max-width:510px;margin:0 0 10px}
#nosotros .outline-link{display:inline-flex;align-items:center;gap:12px;padding:7px 18px;font-size:13px;font-weight:800;line-height:1.2;color:#ff842e;border:1.5px solid #ff7825;border-radius:100px;transition:background .2s,color .2s,transform .2s}
#nosotros .outline-link:hover,#nosotros .outline-link:focus-visible{background:#ff7825;color:#170a2b;transform:translateY(-2px)}
#nosotros .about-benefits{background:linear-gradient(130deg,rgba(20,8,49,.76),rgba(30,14,62,.56));border:1px solid rgba(176,112,255,.12);border-radius:16px;padding:18px 15px;display:grid;grid-template-columns:1fr;gap:18px;backdrop-filter:blur(8px)}
#nosotros .about-benefits>div{display:flex;align-items:center;gap:13px;font-size:13px;color:#f1e9fa;white-space:nowrap}
#nosotros .about-benefits>div>span:first-child{width:29px;flex:0 0 29px;font-size:25px;line-height:1;color:#a94dff;text-align:center}
#nosotros .about-benefits>div:nth-child(3)>span:first-child{color:#ff7627}
#nosotros .about-benefits>div:nth-child(4)>span:first-child{color:#ff7627}
#nosotros .about-sign{font-family:Manrope,sans-serif;font-size:clamp(48px,6vw,92px);font-weight:900;letter-spacing:-.10em;line-height:.95;color:#ff792f;text-align:center;text-shadow:0 0 25px rgba(255,108,38,.3)}
#nosotros .about-sign>span{color:#b47aff}
#nosotros .about-sign small{font-family:Manrope,sans-serif;font-size:clamp(9px,1vw,13px);font-weight:800;letter-spacing:.19em;color:#fff;margin-top:14px}
@media(max-width:1000px){
 #nosotros .about-band-inner{grid-template-columns:minmax(0,1.3fr) minmax(220px,1fr);gap:25px;padding-block:36px}
 #nosotros .about-sign{grid-column:1/-1;font-size:66px}
}
@media(max-width:700px){
 #nosotros .about-band-inner{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:45px 0}
 #nosotros .about-copy{margin:0}
 #nosotros .about-copy h2{font-size:clamp(27px,7vw,36px)}
 #nosotros .about-copy p{font-size:14px;line-height:1.55}
 #nosotros .about-benefits{grid-template-columns:1fr 1fr;gap:20px 12px}
 #nosotros .about-benefits>div{white-space:normal;font-size:12px;gap:8px}
 #nosotros .about-sign{font-size:clamp(55px,13vw,85px)}
}
@media(max-width:430px){#nosotros .about-benefits{grid-template-columns:1fr}#nosotros .about-benefits>div{font-size:13px}}
@media(prefers-reduced-motion:reduce){#nosotros .outline-link{transition:none}}

/* More generous vertical rhythm and balanced spacing for About IKREA. */
#nosotros.about-band{min-height:440px}
#nosotros .about-band-inner{
 min-height:440px;
 padding-block:72px;
 grid-template-columns:minmax(0,1.35fr) minmax(235px,.85fr) minmax(190px,.8fr);
 gap:clamp(28px,3.4vw,54px);
}
#nosotros .about-copy .section-tag{margin-bottom:15px}
#nosotros .about-copy h2{margin-bottom:19px;line-height:1.17}
#nosotros .about-copy p{line-height:1.65;margin-bottom:24px}
#nosotros .outline-link{padding:10px 20px}
#nosotros .about-benefits{padding:28px 23px;gap:24px}
#nosotros .about-benefits>div{font-size:14px;gap:15px}
#nosotros .about-sign small{margin-top:20px}
@media(max-width:1000px){
 #nosotros .about-band-inner{min-height:0;padding-block:65px;gap:34px;grid-template-columns:minmax(0,1.25fr) minmax(220px,1fr)}
 #nosotros .about-sign{grid-column:1/-1}
}
@media(max-width:700px){
 #nosotros .about-band-inner{padding-block:58px;gap:32px}
 #nosotros .about-copy h2{margin-bottom:17px}
 #nosotros .about-copy p{margin-bottom:22px}
 #nosotros .about-benefits{padding:25px 20px;gap:23px 15px}
 #nosotros .about-benefits>div{font-size:13px}
}
@media(max-width:430px){
 #nosotros .about-band-inner{padding-block:50px;gap:28px}
 #nosotros .about-benefits{gap:20px}
}

/* Match the previous section's CTA proportions without stretching full width. */
#nosotros .about-copy .outline-link{
 width:max-content;
 max-width:100%;
 padding:13px 21px;
 gap:8px;
 font-size:13px;
 line-height:1.3;
 justify-content:center;
}

/* About section: heading separator matching the Services visual language. */
#nosotros .about-copy>.section-tag{
 display:flex!important;flex-direction:column!important;
 align-items:flex-start!important;gap:11px!important;
 margin-bottom:17px!important;
}
#nosotros .about-copy>.section-tag::after{
 content:"";display:block;width:104px;height:2px;border-radius:2px;
 background:linear-gradient(90deg,#ff692d 0%,#ff692d 65%,rgba(255,105,45,0) 100%);
}
/* Semantic SVG icons: consistent sizing, stroke and clear silhouettes. */
#nosotros .about-benefits>div>.about-benefit-icon{
 display:grid;place-items:center;
 width:34px!important;height:34px!important;flex:0 0 34px!important;
 color:#b777ff!important;
 background:rgba(153,73,255,.11);
 border:1px solid rgba(183,119,255,.22);
 border-radius:10px;
}
#nosotros .about-benefits>div:nth-child(3)>.about-benefit-icon,
#nosotros .about-benefits>div:nth-child(4)>.about-benefit-icon{
 color:#ff8a32!important;background:rgba(255,120,39,.1);
 border-color:rgba(255,120,39,.25);
}
#nosotros .about-benefit-icon svg{
 display:block;width:21px;height:21px;
 fill:none;stroke:currentColor;stroke-width:1.9;
 stroke-linecap:round;stroke-linejoin:round;
}
/* Subtle horizontal movement of the outlined story CTA. */
@media(prefers-reduced-motion:no-preference){
 #nosotros .about-copy .outline-link{
  animation:ikrea-about-cta-sway 3.1s ease-in-out infinite;
  will-change:translate;
 }
}
@keyframes ikrea-about-cta-sway{
 0%,100%{translate:0 0}
 50%{translate:7px 0}
}
@media(prefers-reduced-motion:reduce){
 #nosotros .about-copy .outline-link{animation:none!important}
}

/* Office image backdrop for About IKREA; keep copy legible on the left. */
#nosotros.about-band{position:relative;overflow:hidden;background:#100823}
#nosotros .about-backdrop{
 position:absolute;inset:0;z-index:0;
 background-image:linear-gradient(90deg,#100823 0%,rgba(16,8,35,.96) 24%,rgba(16,8,35,.68) 43%,rgba(16,8,35,.08) 68%),url("assets/images/impacto_kreativo_oficina_degradado.webp")!important;
 background-size:cover!important;
 background-position:center right!important;
 background-repeat:no-repeat!important;
}
#nosotros .about-backdrop::after{display:none!important}
#nosotros .about-band-inner{position:relative;z-index:1}
#nosotros .about-sign{display:none!important}
#nosotros .about-band-inner{
 grid-template-columns:minmax(0,1.1fr) minmax(210px,.7fr) minmax(0,.75fr)!important;
}
#nosotros .about-copy{grid-column:1}
#nosotros .about-benefits{grid-column:2}
@media(max-width:1000px){
 #nosotros .about-band-inner{grid-template-columns:minmax(0,1.1fr) minmax(190px,.8fr)!important}
 #nosotros .about-backdrop{background-position:60% center!important}
}
@media(max-width:700px){
 #nosotros .about-band-inner{display:flex!important;flex-direction:column!important;align-items:stretch!important}
 #nosotros .about-backdrop{
  background-image:linear-gradient(180deg,rgba(16,8,35,.92) 0%,rgba(16,8,35,.88) 46%,rgba(16,8,35,.65) 100%),url("assets/images/impacto_kreativo_oficina_degradado.webp")!important;
  background-position:64% center!important;
 }
 #nosotros .about-copy,#nosotros .about-benefits{grid-column:auto}
}

/* Benefits row sits immediately below the office composition, as in approved reference. */
#nosotros .about-band-inner{
 grid-template-columns:minmax(0,1fr)!important;
 padding-bottom:22px!important;
}
#nosotros .about-copy{grid-column:1;max-width:610px}
#nosotros .about-benefits-container{
 position:relative;z-index:2;
 padding-bottom:0;
}
#nosotros .about-benefits-container .about-benefits-strip{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(0,1fr))!important;
 gap:0!important;
 padding:22px 0!important;
 background:rgba(13,5,35,.94)!important;
 border:0!important;
 border-radius:0!important;
 backdrop-filter:none!important;
}
#nosotros .about-benefits-container .about-benefits-strip>div{
 min-width:0;display:grid!important;
 grid-template-columns:52px minmax(0,1fr)!important;
 grid-template-rows:auto auto!important;
 column-gap:12px!important;row-gap:4px!important;
 align-content:center!important;
 padding:4px 18px!important;
 white-space:normal!important;
 border-right:1px solid rgba(185,139,241,.22);
}
#nosotros .about-benefits-container .about-benefits-strip>div:last-child{border-right:0}
#nosotros .about-benefits-strip .about-benefit-icon{
 grid-row:1/3!important;grid-column:1!important;
 width:46px!important;height:46px!important;flex:0 0 46px!important;
 border-radius:14px!important;
 box-shadow:0 0 20px rgba(129,55,232,.2);
}
#nosotros .about-benefits-strip .about-benefit-icon svg{width:27px;height:27px}
#nosotros .about-benefits-strip>div>span:nth-child(2){
 grid-column:2;grid-row:1;
 font-size:13px!important;font-weight:750!important;line-height:1.25!important;
 color:#fff!important;
}
#nosotros .about-benefits-strip>div>small{
 grid-column:2;grid-row:2;
 color:#d5cce6!important;font-size:11px!important;line-height:1.4!important;
}
@media(max-width:900px){
 #nosotros .about-benefits-container .about-benefits-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:16px!important}
 #nosotros .about-benefits-container .about-benefits-strip>div:nth-child(2){border-right:0}
}
@media(max-width:550px){
 #nosotros .about-benefits-container .about-benefits-strip{grid-template-columns:1fr!important;row-gap:0!important;padding:10px 0!important}
 #nosotros .about-benefits-container .about-benefits-strip>div{border-right:0!important;border-bottom:1px solid rgba(185,139,241,.16);padding:12px 8px!important}
 #nosotros .about-benefits-container .about-benefits-strip>div:last-child{border-bottom:0}
}

/* Lift the entire benefits band; center content with equal top/bottom breathing room. */
#nosotros .about-benefits-container{padding-top:0!important;transform:translateY(-14px);margin-bottom:-14px}
#nosotros .about-benefits-container .about-benefits-strip{
 padding-top:28px!important;
 padding-bottom:52px!important;
 align-items:stretch!important;
}
#nosotros .about-benefits-container .about-benefits-strip>div{
 padding-top:18px!important;
 padding-bottom:18px!important;
 align-content:center!important;
}
@media(max-width:550px){
 #nosotros .about-benefits-container .about-benefits-strip>div{
  padding-top:18px!important;
  padding-bottom:18px!important;
 }
}
/* Float only the four icons; leave text and cards stationary. */
@media(prefers-reduced-motion:no-preference){
 #nosotros .about-benefits-strip .about-benefit-icon{
  animation:ikrea-about-benefit-float 3.6s ease-in-out infinite!important;
  will-change:transform;
 }
 #nosotros .about-benefits-strip>div:nth-child(2) .about-benefit-icon{animation-delay:-.9s!important}
 #nosotros .about-benefits-strip>div:nth-child(3) .about-benefit-icon{animation-delay:-1.8s!important}
 #nosotros .about-benefits-strip>div:nth-child(4) .about-benefit-icon{animation-delay:-2.7s!important}
}
@keyframes ikrea-about-benefit-float{
 0%,100%{transform:translate3d(0,0,0)}
 50%{transform:translate3d(0,-7px,0)}
}
@media(prefers-reduced-motion:reduce){
 #nosotros .about-benefits-strip .about-benefit-icon{animation:none!important}
}

/* Full-viewport band background, without moving the four content columns. */
#nosotros .about-benefits-container .about-benefits-strip{
 position:relative!important;
 isolation:isolate;
 background:transparent!important;
}
#nosotros .about-benefits-container .about-benefits-strip::before{
 content:"";
 position:absolute;
 top:0;
 bottom:0;
 left:50%;
 width:100vw;
 transform:translateX(-50%);
 background:linear-gradient(180deg,rgba(13,5,35,.18) 0%,rgba(13,5,35,.58) 20%,rgba(13,5,35,.78) 55%,rgba(13,5,35,.48) 86%,rgba(13,5,35,.14) 100%);
 z-index:-1;
 pointer-events:none;
}

/* Stronger typography across the four About benefits. */
#nosotros .about-benefits-strip>div>span:nth-child(2){font-size:15px!important;line-height:1.35!important}
#nosotros .about-benefits-strip>div>small{font-size:13px!important;line-height:1.45!important}

/* About section: match Services with 70px top spacing, keep bottom unchanged. */
#nosotros .about-band-inner{padding-top:70px!important}

/* About: restrained asymmetric edge ornaments, without a dotted mesh. */
#nosotros.about-band{position:relative!important;isolation:isolate!important;overflow:hidden}
#nosotros .about-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#nosotros .about-backdrop::before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:
  radial-gradient(circle at 2.5% 14%,rgba(166,79,255,.72) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 6.5% 31%,rgba(166,79,255,.48) 0 1.8px,transparent 2.8px),
  radial-gradient(circle at 3.7% 53%,rgba(255,112,40,.54) 0 1.6px,transparent 2.8px),
  radial-gradient(circle at 8% 78%,rgba(175,87,255,.45) 0 1.7px,transparent 2.7px),
  radial-gradient(circle at 97% 12%,rgba(173,76,255,.54) 0 1.6px,transparent 2.6px),
  radial-gradient(circle at 93% 32%,rgba(255,115,48,.53) 0 2px,transparent 3px),
  radial-gradient(circle at 98% 63%,rgba(162,78,251,.50) 0 1.8px,transparent 2.8px),
  radial-gradient(circle at 95% 86%,rgba(255,113,47,.49) 0 1.7px,transparent 2.7px),
  repeating-radial-gradient(ellipse 480px 380px at -10% 51%,transparent 0 25px,rgba(165,72,253,.18) 26px 27px,transparent 28px 49px),
  repeating-radial-gradient(ellipse 500px 390px at 112% 49%,transparent 0 28px,rgba(181,87,255,.14) 29px 30px,transparent 31px 54px);
 opacity:.58;
 -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 11%,transparent 27%,transparent 73%,rgba(0,0,0,.70) 90%,#000 100%);
 mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 11%,transparent 27%,transparent 73%,rgba(0,0,0,.70) 90%,#000 100%);
}
#nosotros .about-backdrop::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:
  repeating-linear-gradient(157deg,transparent 0 36px,rgba(166,83,249,.09) 37px 38px,transparent 39px 78px),
  radial-gradient(ellipse 180px 330px at 0% 77%,rgba(103,33,200,.18),transparent),
  radial-gradient(ellipse 200px 320px at 100% 19%,rgba(255,112,39,.11),transparent),
  linear-gradient(132deg,transparent 0 8%,rgba(255,107,38,.11) 8.1%,transparent 8.25%,transparent 93%,rgba(169,73,251,.12) 93.1%,transparent 93.25%);
 opacity:.42;
 -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 19%,transparent 81%,#000 100%);
 mask-image:linear-gradient(90deg,#000 0%,transparent 19%,transparent 81%,#000 100%);
}
#nosotros .about-band-inner,#nosotros .about-benefits-container{position:relative;z-index:1}
@media(max-width:700px){
 #nosotros .about-backdrop::before{opacity:.34}
 #nosotros .about-backdrop::after{opacity:.24}
}

/* Interactive starfield for Sobre Impacto: behind all foreground content. */
#nosotros.about-band{position:relative!important;isolation:isolate!important;overflow:hidden!important}
#nosotros .solution-cosmos{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#nosotros .solution-cosmos canvas{display:block;width:100%;height:100%;opacity:.92}
#nosotros .about-backdrop{z-index:0!important;pointer-events:none}
#nosotros .about-band-inner{position:relative;z-index:2!important}
@media(prefers-reduced-motion:reduce){#nosotros .solution-cosmos{opacity:.6}}

/* About CTA: white label and icon on orange hover/focus. */
#nosotros .about-copy .outline-link:hover,
#nosotros .about-copy .outline-link:focus-visible{color:#fff!important}
#nosotros .about-copy .outline-link:hover *,
#nosotros .about-copy .outline-link:focus-visible *{color:#fff!important;stroke:currentColor!important}

/* Center Conoce nuestra historia on narrow screens only. */
@media(max-width:700px){
 #nosotros .about-copy .outline-link{
  display:flex!important;width:max-content!important;max-width:100%!important;
  margin-left:auto!important;margin-right:auto!important;
  justify-content:center!important;
 }
}
