/* =========================================================
   ECOP – Hoja de estilos optimizada
   ========================================================= */

/* ========== Variables ========== */
:root{
  /* Marca */
  --marca: #6B3A67;
  --marca-oscura: #4A2645;
  --marca-clara: #8B5A87;
  --acento: #9B6B97;

  /* Neutros */
  --crema: #F5F0E8;
  --gris-claro: #f8f8f8;
  --texto-oscuro: #333;
  --texto-claro: #666;

  /* Bootstrap bridge */
  --bs-primary: var(--marca);
  --bs-link-color: var(--marca);

  /* Design system */
  --ecop-primary: #501F57;
  --ecop-primary-700: #3f1845;
  --ecop-primary-900: #2a0f2f;
  --ecop-accent: #6CC24A;
  --ecop-bg: #F7F5F8;
  --ecop-surface: #FFFFFF;
  --ecop-text: #1A1320;
  --ecop-muted: #6b6274;
  --ecop-border: #e6e0ea;

  --shadow-sm: 0 6px 18px rgba(22,12,28,.06);
  --shadow-md: 0 12px 30px rgba(22,12,28,.09);

  /* Logos */
  --logo-h: clamp(80px, 8vw, 110px);
  --logo-w: clamp(140px, 14vw, 200px);
}

/* ========== Base ========== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6; color:var(--texto-oscuro); overflow-x:hidden;
}
a{ color: var(--bs-link-color, var(--marca)); }
a:hover{ color: var(--ecop-primary-700); }

/* ========== Layout utils ========== */
.container-flex{
  --lado: clamp(1rem, 3vw, 2rem);
  --ancho-max: 1400px;
  width: min(100% - (var(--lado) * 2), var(--ancho-max));
  margin-inline: auto; display: flex; flex-direction: column; padding: 0;
}
.section{ padding: 4rem 1rem; }
@media (min-width: 992px){ .section{ padding: 4rem 1.25rem; } }

/* ========== Navbar ========== */
.ecop-navbar{ background: linear-gradient(135deg, var(--acento), var(--marca-clara)); padding:.8rem 0; }
.navbar-brand,.navbar-brand:focus,.navbar-brand:hover{ color:#fff }
.navbar .nav-link{ color:#fff; opacity:.9; transition:.25s; border-radius:6px; padding:.5rem 1rem; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:#fff; background:rgba(255,255,255,.12); transform:translateY(-1px) }
.navbar-toggler{ border-color: rgba(255,255,255,.35) }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(255,255,255,.25) }
.shadow-on-scroll{ box-shadow:0 2px 10px rgba(0,0,0,.12) }
.brand-tagline{ color:rgba(255,255,255,.9); font-weight:600; letter-spacing:.2px; white-space:nowrap; opacity:.95 }

/* ========== Hero (genérico) ========== */
.hero{ position:relative; isolation:isolate; padding:5rem 2rem; text-align:center; overflow:hidden; }
.hero.bg-image{ background:url("/assets/images/ecop_laboratorio.JPG") center/cover no-repeat; }
.hero.parallax{ background-attachment: fixed; }
@media (max-width:991.98px),(prefers-reduced-motion:reduce){ .hero.parallax{ background-attachment: scroll; } }
.hero .text-panel{
  max-width:900px; margin:0 auto; text-align:center; background:rgba(255,255,255,.5);
  backdrop-filter:saturate(1.1) blur(2px); padding:2rem 2.25rem; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.hero h1{ color:var(--marca); margin-bottom:1rem; }
.hero .subtitle{ color:var(--texto-claro); max-width:820px; margin:0 auto 1rem; }
.hero .subtitle strong{ color:var(--marca); font-weight:700; }
.hero .experience{ background:var(--marca); color:#fff; padding:.6rem 1.2rem; border-radius:50px; display:inline-block; }

/* ========== Page hero morado (ondas) ==========  padding: clamp(3rem, 6vw, 4.25rem) 0; */
.page-hero{ position: relative; isolation:isolate; padding: clamp(1.5rem, 3vw, 2rem) 0; overflow:hidden; }
.page-hero--morado{ color:#fff; background: linear-gradient(135deg, var(--marca-oscura), var(--marca-clara)); }
.page-hero--morado .container{ position:relative; z-index:1; }
.hero-title{ color:#fff; }
.subtitle-claim{
  font-size:clamp(1.1rem,2.1vw,1.6rem); letter-spacing:.2px;
  background:linear-gradient(90deg,#fff 0%, #e7d9ef 40%, var(--ecop-accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-wrap:balance;
}
/* Ondas debajo del texto */
	.page-hero--morado::before{
	  content:""; position:absolute; inset:-10% -5% 0 -5%; z-index:0; pointer-events:none; opacity:.40;
	  background:url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 520' preserveAspectRatio='none'>\
	<g fill='none'>\
	<path stroke='%23F5F0E8' stroke-width='3.5' d='M0 60 C240 10 480 110 720 60 S1200 10 1440 60 S1600 110 1600 110'/>\
	<path stroke='%239B6B97' stroke-width='2'   d='M0 120 C280 90 520 150 760 120 S1240 90 1480 120 S1600 150 1600 150'/>\
	<path stroke='%238B5A87' stroke-width='1.5' d='M0 180 C220 150 460 210 700 180 S1180 150 1420 180 S1600 210 1600 210'/>\
	<path stroke='%236B3A67' stroke-width='2.8' d='M0 240 C260 220 500 270 740 240 S1220 220 1460 240 S1600 270 1600 270'/>\
	<path stroke='%23F5F0E8' stroke-width='1.6' d='M0 300 C300 280 540 330 780 300 S1260 280 1500 300 S1600 330 1600 330'/>\
	<path stroke='%239B6B97' stroke-width='1.2' d='M0 360 C260 350 520 390 780 360 S1260 350 1500 360 S1600 390 1600 390'/>\
	<path stroke='%236CC24A' stroke-width='1.4' d='M0 420 C240 410 520 440 820 420 S1280 410 1520 420 S1600 440 1600 440'/>\
	</g></svg>") center/cover no-repeat;
	}
	.page-hero--morado::after{
	  content:""; position:absolute; inset:-15% -10% -5% -10%; z-index:0; pointer-events:none; opacity:.28; transform: rotate(-8deg);
	  background:url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 520' preserveAspectRatio='none'>\
	<g fill='none'>\
	<path stroke='%239B6B97' stroke-width='3'   d='M0 90 C220 150 420 30 640 90 S1060 150 1280 90 S1600 30 1600 30'/>\
	<path stroke='%23F5F0E8' stroke-width='2.2' d='M0 210 C260 270 520 150 780 210 S1260 270 1520 210 S1600 150 1600 150'/>\
	<path stroke='%236B3A67' stroke-width='1.8' d='M0 330 C240 390 520 270 820 330 S1280 390 1520 330 S1600 270 1600 270'/>\
	<path stroke='%238B5A87' stroke-width='1.4' d='M0 450 C220 510 520 390 840 450 S1300 510 1540 450 S1600 390 1600 390'/>\
	</g></svg>") center/110% 110% no-repeat;
	}
@media (prefers-reduced-motion:reduce){ .page-hero--morado::after{ transform:none; } }

/* ========== Títulos ========== */
.section-title{
  text-align:center; font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  color: var(--marca); margin-bottom: 2.5rem; position: relative;
}
.section-title::after{
  content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:60px; height:3px; background: var(--acento);
}

/* ========== Servicios (1/2/4) ========== */
.services-overview{ background:#fff; perspective:900px; }
.services-grid{ display:grid; gap:28px; grid-template-columns:1fr; margin-top:2rem; }
@media (min-width:768px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .services-grid{ grid-template-columns:repeat(4,1fr); } }
.service-card{
  display:flex; flex-direction:column; min-height:100%;
  background:#fff; border:1px solid #eee; border-radius:16px;
  padding: clamp(1rem, 2.2vw, 1.75rem);
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
  transition:.15s transform, .15s box-shadow; position:relative; overflow:hidden;
}
.service-card::before{ content:''; position:absolute; top:0; left:0; width:100%; height:5px; background:linear-gradient(90deg, var(--marca), var(--acento)); }
.service-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.service-title{ font-size:clamp(1.15rem, 2vw, 1.45rem); margin-bottom:.5rem; line-height:1.25; color:var(--marca); }
.service-list{ margin:0; padding-left:1.1rem; }
.service-list li{ padding:.45rem 0 .45rem 1.1rem; position:relative; color:var(--texto-claro); }
.service-list li::before{ content:'✓'; position:absolute; left:0; color: var(--acento); font-weight:bold; }
.service-actions{ margin-top:auto; }
.cta-button{ display:inline-block; padding:.6rem 1rem; border-radius:10px; background:var(--marca); color:#fff; text-decoration:none; font-weight:600; }
.cta-button:hover{ filter: brightness(1.05); }

/* ========== Botones Bootstrap ========== */
.btn-primary{
  --bs-btn-bg: var(--ecop-primary);
  --bs-btn-border-color: var(--ecop-primary);
  --bs-btn-hover-bg: var(--ecop-primary-700);
  --bs-btn-hover-border-color: var(--ecop-primary-700);
  --bs-btn-active-bg: var(--ecop-primary-900);
  --bs-btn-active-border-color: var(--ecop-primary-900);
  box-shadow: 0 6px 14px rgba(80,31,87,.22); transition: .3s ease;
}
.btn-primary:hover{ transform: scale(1.05); }
.btn-outline-primary{
  --bs-btn-color: var(--ecop-primary);
  --bs-btn-border-color: var(--ecop-primary);
  --bs-btn-hover-bg: var(--ecop-primary);
  --bs-btn-hover-border-color: var(--ecop-primary);
  color: var(--ecop-primary); border-color: var(--ecop-primary);
}
#contactBtn[aria-busy="true"]{ cursor: progress; }
.btn-success.pulse-once{ animation:pulse-pop 500ms cubic-bezier(.4,0,.2,1) 1; }
@keyframes pulse-pop{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(25,135,84,.35)} 50%{transform:scale(1.03);box-shadow:0 0 0 8px rgba(25,135,84,.10)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(25,135,84,0)} }
@media (prefers-reduced-motion:reduce){ .btn-success.pulse-once{ animation:none!important } }

/* ========== Quiénes somos (capas comunes) ========== */
.section-alt{ background: var(--ecop-bg); }
.about{ padding:4rem 2rem; background: linear-gradient(135deg, var(--crema) 0%, #fff 100%); }

/* ========== MVF (Misión/Visión/Filosofía) ========== */
.mvf-section{ background: var(--ecop-surface,#fff); }
.mvf-grid{ display:grid; gap:22px; margin-top:1rem; grid-template-columns:1fr; }
@media (min-width:992px){ .mvf-grid{ grid-template-columns:repeat(3,1fr); } }
.mvf-card{
  background:#fff; border:1px solid var(--ecop-border); border-radius:16px;
  padding:1.25rem; box-shadow:var(--shadow-sm);
  transition:.25s transform, .25s box-shadow, .25s border-color;
}
.mvf-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-md); border-color:#e3d9eb; }
.mvf-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg, var(--marca), var(--acento)); }
.mvf-icon{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  margin-bottom:.5rem; background:var(--crema); color:var(--marca);
  font-size:1.35rem; box-shadow: inset 0 0 0 2px rgba(107,58,103,.08);
}
.mvf-title{ font-weight:700; color:var(--marca); margin:.25rem 0 .35rem; }
.mvf-text{ color:var(--ecop-muted); margin:0; }
.mvf-list{ margin:0; padding-left:1rem; color:var(--ecop-muted); }
.mvf-list li{ margin:.25rem 0; }

/* ========== Capacidades (grid + cards) ========== */
.team-features-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:768px){ .team-features-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .team-features-grid{ grid-template-columns:repeat(4,1fr); } }
.feature-card{
  background:#fff; border:1px solid var(--ecop-border);
  border-radius:14px; padding:1.25rem; text-align:center; box-shadow:var(--shadow-sm);
  transition:.25s transform, .25s box-shadow, .25s border-color;
}
.feature-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-md); border-color:#e3d9eb; }
.feature-icon-wrap{
  width:54px; height:54px; border-radius:50%; background:var(--crema); color:var(--marca);
  display:grid; place-items:center; margin:0 auto .5rem; box-shadow: inset 0 0 0 2px rgba(107,58,103,.08);
}
.feature-emoji{ font-size:1.35rem; line-height:1; }
.feature-title{ margin:.4rem 0 .25rem; color:var(--marca); font-weight:700; }
.feature-text{ color:var(--ecop-muted); margin:0; }

/* ========== Equipo (cards + modales) ========== */
.team-card{
  width:100%; background:#fff; border:1px solid var(--ecop-border);
  border-radius:16px; padding:1.25rem; text-align:center; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:.2s transform, .2s box-shadow, .2s border-color;
}
.team-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color:#e3d9eb; }
.team-card:focus-visible{ outline:2px solid var(--ecop-primary); outline-offset:3px; }
.avatar{ width:7rem; height:7rem; border-radius:50%; object-fit:cover; object-position:center; background:#fff; border:3px solid var(--ecop-primary); box-shadow:0 8px 22px rgba(22,12,28,.08); }
.team-name{ font-size:1rem; font-weight:700; color:var(--ecop-text); margin:.25rem 0 0; }
.team-role{ font-size:.9rem; color:var(--ecop-muted); }

.modal-ecop{ border:0; border-radius:16px; overflow:hidden; }
.modal-ecop__header{
  background: linear-gradient(135deg, var(--marca-oscura), var(--marca));
  color:#fff; padding:.9rem 1rem; display:flex; align-items:center; justify-content:space-between;
}
.modal-ecop__header .modal-title{ color:#fff; margin:0; font-weight:700; }
.btn-close-white{ filter: invert(1) grayscale(1) brightness(2); opacity:.9; }
.btn-close-white:hover{ opacity:1; }
.border-ecop-primary{ border-color: var(--ecop-primary) !important; }
.avatar-modal{ width:200px; height:200px; border-radius:50%; object-fit:cover; object-position:center; display:block; margin:0 auto; }

/* Animación modales */
.modal.fade .modal-dialog{ transform: translateY(12px) scale(.98); transition:.25s transform, .25s opacity; opacity:.85; }
.modal.show .modal-dialog{ transform: translateY(0) scale(1); opacity:1; }

/* ========== KPI cards ========== */
.kpi-card{
  background: var(--ecop-surface); border: 1px solid var(--ecop-border); border-radius: 16px;
  padding: 1.5rem 1rem; box-shadow: var(--shadow-sm);
  transition:.2s transform, .2s box-shadow;
}
.kpi-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.kpi-icon{
  font-size: clamp(1.6rem, 3.2vw, 2rem); width:56px; height:56px; margin: 0 auto .5rem;
  display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg, var(--crema), #fff); border:1px solid var(--ecop-border);
}
.kpi-number{
  font-weight:800; font-size:clamp(1.8rem, 4.2vw, 2.6rem); line-height:1; margin-bottom:.25rem;
  background: linear-gradient(135deg, var(--marca), var(--acento)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kpi-label{ color: var(--ecop-muted); font-weight:600; letter-spacing:.2px; }
.js-counter{ will-change: contents; }

/* ========== Carrusel de logos (continuo) ========== */
.logo-slider{ position:relative; overflow:hidden; padding:12px 0; }
.logo-track{
  display:flex; align-items:center; gap:clamp(16px,4vw,32px);
  width:max-content; will-change: transform; animation:logos-scroll var(--dur,30s) linear infinite;
}
@keyframes logos-scroll{ to{ transform: translateX(calc(-1 * var(--loop-w, 50%))); } }
.logo-slider:hover .logo-track, .logo-track:focus-within{ animation-play-state: paused; }

.logo-card{
  appearance:none; border:0; background:transparent; padding:0;
  flex:0 0 auto; width:var(--logo-w); cursor:pointer; outline-offset:4px;
  position:relative; height: calc(var(--logo-h) + 40px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.logo-card:hover, .logo-card:focus-visible{ transform: translateY(-4px) scale(1.02); }

.logo-box{
  width:100%; height:var(--logo-h);
  display:grid; place-items:center; border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06); border:1px solid #eee; padding:10px;
  overflow:hidden; line-height:0;
}
.logo-box img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:grayscale(1); opacity:.85; transition:filter .25s ease, opacity .25s ease;
}
.logo-card:hover img, .logo-card:focus-visible img{ filter:none; opacity:1; }
.logo-name{
  position:absolute; left:50%; bottom:.2rem; transform:translateX(-50%) translateY(6px) scale(.98);
  opacity:0; pointer-events:none; font-weight:700; font-size:.92rem; color:var(--ecop-primary);
  transition:opacity .2s ease, transform .2s ease;
}
.logo-card:hover .logo-name, .logo-card:focus-visible .logo-name{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.logo-caption{ text-align:center; margin-top:14px; font-weight:700; color:var(--marca); min-height:1.5em; }
@media (max-width:768px){ .logo-card{ width:140px } .logo-box{ height:clamp(60px, 9vw, 80px) } }

/* ========== Footer ========== */
.site-footer{ background:var(--marca); color:#fff; padding:2.25rem 0 }
.footer-title{ color:#fff }
.footer-links{ list-style:none; margin:0; padding:0 }
.footer-links a{ color:#fff; opacity:.9; text-decoration:none }
.footer-links a:hover{ opacity:1; text-decoration:underline }
.footer-grid{ display:grid; gap:24px; grid-template-columns:1fr }
@media (min-width:768px){ .footer-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1200px){ .footer-grid{ grid-template-columns:repeat(4,1fr) } }
.social-links{ display:flex; gap:.75rem; list-style:none; margin:0; padding:0 }
.social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  border:1px solid rgba(255,255,255,.35); color:#fff; background:transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.social-links a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); transform:translateY(-2px) }
.social-links svg{ width:20px; height:20px; display:block; fill:currentColor }
.footer-bottom{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; align-items:center;
  margin-top:1.25rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.25)
}

/* ========== Reveal genérico (re-usable) ========== */
.will-animate{ opacity:0; transform: translateY(14px); }
.is-visible{ opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }

/* ========== Responsive / Accesibilidad ========== */
@media (max-width:768px){
  .hero{ padding: 3.6rem 1.2rem }
  .section{ padding: 3rem 1.2rem }
}
@media (prefers-reduced-motion:reduce){
  .reveal-title,.service-card,.logo-card,.logo-box img,.mvf-card,.feature-card,.team-card,.modal .modal-dialog{ transition:none!important; transform:none!important }
  .logo-track{ animation:none; transform:none }
}
/* Mosaico de servicios */
.services-mosaic .svc-card{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  min-height: 280px; box-shadow: var(--shadow-sm); border:1px solid var(--ecop-border);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.services-mosaic .svc-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color:#e3d9eb;
}
.svc-card__bg, .svc-card__overlay{
  position:absolute; inset:0;
}
.svc-card__bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
}
.svc-card__overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 90%);
}
.svc-card__content{
  position: absolute; inset:auto 0 0 0; padding:1.1rem 1rem; color:#fff;
}
.svc-card__title{
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  margin:0 0 .35rem; line-height:1.2; font-weight:800;
}
.svc-card__bullets{ margin:0; padding-left:1rem; }
.svc-card__bullets li{
  font-size:.925rem; opacity:.98;
}

/* Imagen/ilustración común */
.service-ill{ width:100%; height:auto; object-fit:cover }

/* B) Banner visual */
.service-banner{ position:relative; overflow:hidden; padding:0 }
.service-banner__bg{ position:relative; height: clamp(260px, 36vw, 420px) }
.service-banner__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(.82);
}
.service-banner__panel{
  position:relative; margin:-70px auto 0; background:#fff; border-radius:16px;
  padding: clamp(1rem, 2.2vw, 1.6rem); box-shadow: var(--shadow-md);
  width:min(100% - 2rem, 980px);
}

/* C) Mini-cards */
.mini-card{
  display:flex; gap:.75rem; align-items:flex-start;
  background:#fff; border:1px solid var(--ecop-border); border-radius:12px;
  padding:.85rem; box-shadow: var(--shadow-sm);
}
.mini-card__icon{
  flex:0 0 44px; height:44px; display:grid; place-items:center; border-radius:10px;
  background: linear-gradient(135deg, var(--crema), #fff); border:1px solid var(--ecop-border);
  font-size:1.15rem; color:var(--marca);
}
.mini-card__body small{ display:block; margin-top:.25rem }

/* Ajustes responsivos mínimos */
@media (max-width: 991.98px){
  .service-split .service-ill{ max-height:280px; }
}

/* =================================================================
   ECOP – Estilos adicionales servicios (agregar al final de style.css)
   ================================================================= */

/* ── Panel head: badge + título en línea ─────────────────────── */
.svc-panel-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}

/* ── Badge de categoría por servicio ─────────────────────────── */
.svc-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 50px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Color único por servicio */
.svc-badge--industria  { background: #501F57; color: #fff; }
.svc-badge--clinicas   { background: #1a6b4a; color: #fff; }
.svc-badge--familias   { background: #b45309; color: #fff; }
.svc-badge--educacion  { background: #1d4ed8; color: #fff; }

/* ── Barra de acento superior del panel por servicio ─────────── */
.service-banner__panel {
  border-top: 5px solid var(--marca);        /* default */
}
.svc-industria .service-banner__panel { border-top-color: #501F57; }
.svc-clinicas  .service-banner__panel { border-top-color: #1a6b4a; }
.svc-familias  .service-banner__panel { border-top-color: #b45309; }
.svc-educacion .service-banner__panel { border-top-color: #1d4ed8; }

/* ── Sub-títulos dentro del panel ────────────────────────────── */
.svc-sub-title {
  color: var(--marca);
  font-weight: 700;
}
.svc-clinicas  .svc-sub-title { color: #1a6b4a; }
.svc-familias  .svc-sub-title { color: #b45309; }
.svc-educacion .svc-sub-title { color: #1d4ed8; }

/* ── Espaciado entre artículos ───────────────────────────────── */
.detailed-services .service-detail + .service-detail {
  margin-top: 3rem;
}

/* ── Imagen un poco más alta en desktop ──────────────────────── */
@media (min-width: 992px) {
  .service-banner__bg {
    height: clamp(300px, 40vw, 460px);
  }
}