/* Página: rotulación para clínicas en Barcelona
   Base global: /css/style-v3.css
   Selectores específicos con prefijo cs-. */

.cs-hero{
  position:relative;
  min-height:840px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#090909;
  color:#fff;
}
.cs-hero-media,
.cs-hero-media img,
.cs-hero-overlay{position:absolute;inset:0;width:100%;height:100%}
.cs-hero-media{margin:0}
.cs-hero-media img{object-fit:cover;object-position:center 46%}
.cs-hero-overlay{
  background:
    linear-gradient(90deg,rgba(7,7,7,.97) 0%,rgba(7,7,7,.90) 42%,rgba(7,7,7,.48) 72%,rgba(7,7,7,.20) 100%),
    linear-gradient(0deg,rgba(0,0,0,.48),transparent 54%);
}
.cs-hero::before,
.cs-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border:1px solid rgba(249,115,22,.22);
  border-radius:50%;
}
.cs-hero::before{right:-10vw;bottom:-32vw;width:62vw;height:62vw}
.cs-hero::after{right:10vw;bottom:-42vw;width:78vw;height:78vw;border-color:rgba(249,115,22,.10)}
.cs-hero-content{
  position:relative;
  z-index:2;
  padding-top:184px;
  padding-bottom:116px;
}
.cs-hero-content h1{
  max-width:900px;
  margin-bottom:24px;
  color:#fff;
  font-size:clamp(3.2rem,6vw,6.5rem);
}
.cs-hero-lead{
  max-width:830px;
  margin-bottom:14px;
  color:#fff;
  font-size:clamp(1.26rem,2vw,1.92rem);
  font-weight:720;
  line-height:1.4;
}
.cs-hero-text{max-width:760px;color:#c9c9c9;font-size:1.06rem}
.cs-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:13px;
  margin:33px 0 0;
  padding:0;
  list-style:none;
  color:#d7d7d7;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cs-hero-points li{display:flex;align-items:center;gap:13px}
.cs-hero-points li:not(:last-child)::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange)}

.cs-trust{background:var(--orange);color:#fff}
.cs-trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-trust-grid>div{padding:24px 25px;border-right:1px solid rgba(255,255,255,.34)}
.cs-trust-grid>div:last-child{border-right:0}
.cs-trust strong,.cs-trust span{display:block}
.cs-trust strong{font-size:1rem}
.cs-trust span{color:#fff1e8;font-size:.82rem}

.cs-breadcrumb{background:#0d0d0d;border-bottom:1px solid #292929}
.cs-breadcrumb-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  min-height:58px;
  color:#b9b9b9;
  font-size:.83rem;
}
.cs-breadcrumb a{color:#f3f3f3;text-decoration:none}
.cs-breadcrumb a:hover{color:#ff9b59}
.cs-breadcrumb-inner>span[aria-hidden="true"]{color:var(--orange)}

.cs-intro{background:var(--bg)}
.cs-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:clamp(58px,8vw,118px);
  align-items:center;
}
.cs-intro-copy h2{max-width:860px;margin-bottom:28px}
.cs-intro-copy p{max-width:760px}
.cs-intro-copy .text-link{margin-top:16px}
.cs-intro-media{position:relative;margin:0;padding:34px 0 0 34px}
.cs-intro-media>span{position:absolute;inset:0 68px 68px 0;border:3px solid var(--orange)}
.cs-intro-media img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  box-shadow:var(--shadow);
}
.cs-intro-media figcaption{
  position:absolute;
  z-index:2;
  right:-20px;
  bottom:34px;
  width:min(350px,82%);
  padding:23px;
  background:#0e0e0e;
  color:#fff;
  box-shadow:var(--shadow);
}
.cs-intro-media figcaption strong,
.cs-intro-media figcaption small{display:block}
.cs-intro-media figcaption small{margin-top:7px;color:#bdbdbd;line-height:1.5}

.cs-needs{background:#fff}
.cs-needs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cs-needs article{
  position:relative;
  min-height:260px;
  padding:34px;
  overflow:hidden;
  background:var(--bg);
  border-top:4px solid transparent;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.cs-needs article::after{
  content:"";
  position:absolute;
  right:-58px;
  bottom:-58px;
  width:150px;
  height:150px;
  border:1px solid rgba(249,115,22,.20);
  border-radius:50%;
}
.cs-needs article:hover{transform:translateY(-5px);border-color:var(--orange);box-shadow:0 18px 42px rgba(0,0,0,.08)}
.cs-needs article>span{
  display:inline-block;
  margin-bottom:28px;
  color:var(--orange-dark);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.13em;
}
.cs-needs h3{margin-bottom:15px;font-size:1.46rem}
.cs-needs p{margin:0}

.cs-solutions{background:#f2eee8}
.cs-solutions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cs-solution-card{background:#fff;overflow:hidden;box-shadow:0 12px 38px rgba(0,0,0,.07)}
.cs-solution-card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cs-solution-card:nth-child(2) img{object-position:center 42%}
.cs-solution-card>div{padding:30px}
.cs-solution-card>div>span{
  color:var(--orange-dark);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cs-solution-card h3{margin:12px 0 15px;font-size:1.65rem}
.cs-solution-card p{margin-bottom:18px}
.cs-solution-card ul{margin:0;padding:0;list-style:none}
.cs-solution-card li{
  position:relative;
  padding:10px 0 10px 20px;
  border-top:1px solid #e1ddd7;
  color:#46423e;
  font-size:.9rem;
}
.cs-solution-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:19px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
}

.cs-visual-banner{
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#111;
}
.cs-visual-banner>img,.cs-visual-overlay{position:absolute;inset:0;width:100%;height:100%}
.cs-visual-banner>img{object-fit:cover;object-position:center}
.cs-visual-overlay{
  background:
    linear-gradient(90deg,rgba(8,8,8,.97) 0%,rgba(8,8,8,.84) 50%,rgba(8,8,8,.20) 100%),
    linear-gradient(0deg,rgba(0,0,0,.40),transparent 60%);
}
.cs-visual-banner::after{
  content:"";
  position:absolute;
  right:-16vw;
  top:-28vw;
  width:58vw;
  height:58vw;
  border:1px solid rgba(249,115,22,.24);
  border-radius:50%;
}
.cs-visual-content{position:relative;z-index:1;padding-top:105px;padding-bottom:105px}
.cs-visual-content h2{max-width:920px;color:#fff}
.cs-visual-content p{max-width:770px;color:#d0d0d0;font-size:1.08rem}
.cs-visual-content .btn{margin-top:18px}

.cs-pillars{background:#fff}
.cs-pillars-grid{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(58px,8vw,115px);
  align-items:start;
}
.cs-pillars-heading{position:sticky;top:130px}
.cs-pillars-heading p{font-size:1.04rem}
.cs-pillars-heading .btn{margin-top:18px}
.cs-pillars-list{display:grid;gap:0}
.cs-pillars-list article{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:25px;
  padding:30px 0;
  border-top:1px solid #d9d3cc;
}
.cs-pillars-list article:last-child{border-bottom:1px solid #d9d3cc}
.cs-pillars-list article>span{color:var(--orange);font-size:1.35rem;font-weight:900}
.cs-pillars-list h3{margin-bottom:9px;font-size:1.7rem}
.cs-pillars-list p{margin:0}

.cs-case{background:#0d0d0d;color:#fff}
.cs-case-grid{
  display:grid;
  grid-template-columns:minmax(350px,.82fr) minmax(0,1.18fr);
  gap:clamp(60px,8vw,122px);
  align-items:center;
}
.cs-case-media{position:relative;margin:0;padding:34px 0 0 34px}
.cs-case-media>span{position:absolute;inset:0 62px 62px 0;border:3px solid var(--orange);background:transparent}
.cs-case-media img{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  box-shadow:0 34px 80px rgba(0,0,0,.45);
}
.cs-case-media figcaption{
  position:absolute;
  z-index:2;
  left:10px;
  bottom:32px;
  padding:13px 18px;
  background:var(--orange);
  color:#fff;
  font-weight:850;
}
.cs-case-copy h2{color:#fff}
.cs-case-copy>p{color:#c9c9c9;font-size:1.08rem}
.cs-case-copy dl{margin:32px 0}
.cs-case-copy dl>div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:18px;
  padding:16px 0;
  border-top:1px solid #363636;
}
.cs-case-copy dl>div:last-child{border-bottom:1px solid #363636}
.cs-case-copy dt{
  color:#ff9b59;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cs-case-copy dd{margin:0;color:#ddd}

.cs-centres{background:#f5f1ec}
.cs-centres-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cs-centres article{
  min-height:230px;
  padding:32px;
  background:#fff;
  border-left:4px solid transparent;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.cs-centres article:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 16px 38px rgba(0,0,0,.07)}
.cs-centres article>span{
  display:block;
  margin-bottom:22px;
  color:var(--orange-dark);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
}
.cs-centres h3{font-size:1.5rem;margin-bottom:13px}
.cs-centres p{margin:0}

.cs-process{background:#151515;color:#fff}
.cs-process-grid{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(55px,8vw,120px);
  align-items:start;
}
.cs-process-heading{position:sticky;top:130px}
.cs-process-heading h2{color:#fff}
.cs-process-heading p{color:#aaa;font-size:1.07rem}
.cs-process-heading .btn{margin-top:20px}
.cs-process-list{margin:0;padding:0;list-style:none}
.cs-process-list li{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:24px;
  padding:28px 0;
  border-top:1px solid #383838;
}
.cs-process-list li:last-child{border-bottom:1px solid #383838}
.cs-process-list>li>span{color:var(--orange);font-size:1.4rem;font-weight:900}
.cs-process-list h3{margin-bottom:8px;color:#fff;font-size:1.65rem}
.cs-process-list p{margin:0;color:#aaa}

.cs-zones{
  position:relative;
  overflow:hidden;
  background:#fff;
}
.cs-zones-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(55px,8vw,115px);
  align-items:center;
}
.cs-zones-copy h2{max-width:700px}
.cs-zones-copy p{max-width:690px;font-size:1.04rem}
.cs-zone-chips{display:flex;flex-wrap:wrap;gap:12px;align-content:center}
.cs-zone-chips span{
  padding:12px 18px;
  border:1px solid #d0c8bf;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 24px rgba(0,0,0,.04);
  font-size:.9rem;
  font-weight:850;
  backdrop-filter:blur(4px);
}
.cs-zones-orbit{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.cs-zones-orbit-one{
  right:-10vw;
  top:-22vw;
  width:56vw;
  height:56vw;
  border:2px solid rgba(249,115,22,.17);
}
.cs-zones-orbit-two{
  right:5vw;
  top:-8vw;
  width:38vw;
  height:38vw;
  background:rgba(249,115,22,.035);
  border:1px solid rgba(249,115,22,.11);
}
.cs-zones-orbit-three{
  right:24vw;
  bottom:-15vw;
  width:29vw;
  height:29vw;
  background:rgba(249,115,22,.055);
  border:1px solid rgba(249,115,22,.14);
}

.cs-faq{background:var(--bg)}
.cs-related{background:#fff}

@media (max-width:1100px){
  .cs-hero{min-height:760px}
  .cs-hero-content{padding-top:164px;padding-bottom:92px}
  .cs-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-trust-grid>div:nth-child(2){border-right:0}
  .cs-trust-grid>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.34)}
  .cs-intro-grid{gap:62px}
  .cs-needs-grid,.cs-solutions-grid,.cs-centres-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-case-grid{grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);gap:64px}
  .cs-zones-grid{grid-template-columns:1fr;gap:42px}
  .cs-zone-chips{max-width:850px}
}

@media (max-width:820px){
  .cs-hero{min-height:720px;align-items:flex-end}
  .cs-hero-media img{object-position:62% center}
  .cs-hero-overlay{
    background:
      linear-gradient(0deg,rgba(7,7,7,.98) 0%,rgba(7,7,7,.88) 58%,rgba(7,7,7,.46) 100%),
      linear-gradient(90deg,rgba(7,7,7,.55),rgba(7,7,7,.15));
  }
  .cs-hero-content{padding-top:155px;padding-bottom:74px}
  .cs-hero-content h1{font-size:clamp(2.75rem,10vw,4.7rem)}
  .cs-hero-lead{font-size:1.2rem}
  .cs-hero-text{font-size:1rem}
  .cs-intro-grid,.cs-pillars-grid,.cs-case-grid,.cs-process-grid{grid-template-columns:1fr}
  .cs-intro-grid{gap:58px}
  .cs-intro-media{max-width:650px;margin-inline:auto}
  .cs-pillars-heading,.cs-process-heading{position:static}
  .cs-case-media{max-width:600px;margin-inline:auto}
  .cs-case-copy{max-width:760px}
  .cs-visual-banner{min-height:590px}
  .cs-visual-banner>img{object-position:68% center}
  .cs-visual-overlay{background:linear-gradient(0deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.80) 60%,rgba(8,8,8,.35) 100%)}
  .cs-visual-content{padding-top:88px;padding-bottom:88px}
  .cs-zones-orbit-one{right:-24vw;top:-8vw;width:82vw;height:82vw}
  .cs-zones-orbit-two{right:5vw;top:10vw;width:55vw;height:55vw}
  .cs-zones-orbit-three{right:35vw;bottom:-18vw;width:42vw;height:42vw}
}

@media (max-width:640px){
  .cs-hero{min-height:700px}
  .cs-hero-content{padding-top:140px;padding-bottom:60px}
  .cs-hero-points{gap:10px;font-size:.7rem}
  .cs-trust-grid{grid-template-columns:1fr}
  .cs-trust-grid>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.34)}
  .cs-trust-grid>div:last-child{border-bottom:0}
  .cs-breadcrumb-inner{min-height:54px;font-size:.78rem}
  .cs-intro-media{padding:22px 0 0 22px}
  .cs-intro-media>span{inset:0 38px 38px 0;border-width:2px}
  .cs-intro-media figcaption{position:relative;right:auto;bottom:auto;width:calc(100% - 22px);margin:-46px 0 0 22px}
  .cs-needs-grid,.cs-solutions-grid,.cs-centres-grid{grid-template-columns:1fr}
  .cs-needs article{min-height:auto}
  .cs-solution-card>div{padding:25px}
  .cs-pillars-list article,.cs-process-list li{grid-template-columns:58px 1fr;gap:18px}
  .cs-case-media{padding:22px 0 0 22px}
  .cs-case-media>span{inset:0 38px 38px 0;border-width:2px}
  .cs-case-media figcaption{left:0;bottom:20px;font-size:.83rem}
  .cs-case-copy dl>div{grid-template-columns:1fr;gap:7px}
  .cs-zone-chips{gap:9px}
  .cs-zone-chips span{padding:10px 14px;font-size:.82rem}
  .cs-zones-orbit-one{right:-48vw;top:4vw;width:120vw;height:120vw}
  .cs-zones-orbit-two{right:-5vw;top:24vw;width:82vw;height:82vw}
  .cs-zones-orbit-three{right:42vw;bottom:-28vw;width:66vw;height:66vw}
}

@media (max-width:460px){
  .cs-hero-content h1{font-size:2.55rem}
  .cs-hero-lead{font-size:1.08rem}
  .cs-hero-points li{width:100%}
  .cs-hero-points li::after{display:none}
  .cs-needs article,.cs-centres article{padding:27px}
  .cs-pillars-list article,.cs-process-list li{grid-template-columns:1fr}
  .cs-pillars-list article>span,.cs-process-list>li>span{font-size:1rem}
}