/* ============================================================
   METADIGITAL THEME — ESTILOS PRINCIPALES
   Fuente de verdad: _reference/maqueta-v4-aprobada.html
   Tokens: variables definidas en este archivo (:root / html.dark)
   No modificar salvo para agregar nuevas secciones al final.
   ============================================================ */


/* ── 1. GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');


/* ── 2. RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }


/* ── 3. TOKENS LIGHT ── */
:root {
  --bg:           #f5f4f0;
  --bg2:          #ffffff;
  --bg3:          #eceae4;
  --texto:        #1c1c1a;
  --texto2:       #52524e;
  --texto3:       #9a9892;
  --acento:       #2d6a4f;
  --acento2:      #1f4f3a;
  --acento-claro: #e8f3ee;
  --acento-medio: #74b49b;
  --linea:        #e4e2da;
  --sombra:       0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --sombra-md:    0 6px 24px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
  --sombra-lg:    0 16px 48px rgba(0,0,0,0.11), 0 4px 16px rgba(0,0,0,0.06);
  --nav-bg:       rgba(245,244,240,0.94);
  --footer-bg:    #111110;
  --radio:        10px;
  --radio-lg:     16px;
  --max:          1180px;
  --toggle-track: #e4e2da;
  --toggle-thumb: #ffffff;
}


/* ── 4. TOKENS DARK ── */
html.dark {
  --bg:           #141412;
  --bg2:          #1e1e1b;
  --bg3:          #252520;
  --texto:        #e8e6df;
  --texto2:       #a09e96;
  --texto3:       #605e58;
  --acento:       #4a9e7a;
  --acento2:      #3a8060;
  --acento-claro: #1a2e24;
  --acento-medio: #3d7a5e;
  --linea:        #2e2d28;
  --sombra:       0 2px 12px rgba(0,0,0,0.3),  0 1px 3px rgba(0,0,0,0.2);
  --sombra-md:    0 6px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  --sombra-lg:    0 16px 48px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.28);
  --nav-bg:       rgba(20,20,18,0.94);
  --footer-bg:    #0a0a09;
  --toggle-track: #2d6a4f;
}


/* ── 5. BASE ── */
html { scroll-behavior: smooth; font-size: 16px; color-scheme: light; /* evita que el navegador aplique dark mode del sistema */ }
body {
  background:   var(--bg);
  color:        var(--texto);
  font-family:  'DM Sans', sans-serif;
  font-weight:  400;
  line-height:  1.7;
  overflow-x:   hidden;
  transition:   background 0.35s, color 0.35s;
}
a   { color: inherit; text-decoration: none }
img { max-width: 100%; display: block }

/* GeneratePress wrapper — forzar transparencia en dark mode */
html.dark .site-main,
html.dark #primary,
html.dark .entry-content,
html.dark .entry-header { background: transparent }

/* Scroll reveal */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--visible {
  opacity:   1;
  transform: translateY(0);
}

/* Delays escalonados para grids */
.reveal-delay-1 { transition-delay: 0.1s }
.reveal-delay-2 { transition-delay: 0.2s }
.reveal-delay-3 { transition-delay: 0.3s }
.reveal-delay-4 { transition-delay: 0.4s }

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none }
}


/* ── 6. CONTENEDOR ── */
/* .md-contenedor = alias usado en todos los template-parts PHP */
.contenedor,
.md-contenedor {
  max-width: var(--max);
  margin:    0 auto;
  padding:   0 2.5rem;
}


/* ── 7. TIPOGRAFÍA GLOBAL ── */
.eyebrow {
  font-family:    'DM Sans', sans-serif;
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--acento);
  margin-bottom:  0.85rem;
  display:        block;
}
.titulo-sec {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      clamp(1.85rem, 3.2vw, 2.75rem);
  line-height:    1.1;
  color:          var(--texto);
  margin-bottom:  1rem;
  letter-spacing: -0.025em;
}
.sub-sec {
  font-size:   0.975rem;
  color:       var(--texto2);
  max-width:   500px;
  line-height: 1.8;
  font-weight: 300;
}


/* ── 8. BOTONES ── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.8rem 1.7rem;
  border-radius:   var(--radio);
  font-family:     'DM Sans', sans-serif;
  font-weight:     500;
  font-size:       0.9rem;
  cursor:          pointer;
  transition:      all 0.2s;
  border:          none;
  text-decoration: none;
}
.btn-p { background: var(--acento); color: #fff }
.btn-p:hover { background: var(--acento2); color: #fff; box-shadow: 0 4px 16px color-mix(in srgb, var(--acento) 30%, transparent); transform: translateY(-1px) }

.btn-o { background: transparent; border: 1.5px solid var(--linea); color: var(--texto) }
.btn-o:hover { border-color: var(--acento); color: var(--acento) }

.btn-owh { background: transparent; border: 1.5px solid rgba(255,255,255,0.4); color: #fff }
.btn-owh:hover { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff }

.btn-wh { background: #fff; color: var(--acento) }
.btn-wh:hover { background: rgba(255,255,255,0.88) }

.arr { display: inline-block; transition: transform 0.18s }
.btn:hover .arr { transform: translateX(3px) }

.seccion { padding: 5rem 0 }


/* ── 9. DARK MODE TOGGLE ── */
.dm-toggle {
  display:    flex;
  align-items: center;
  gap:        0.5rem;
  cursor:     pointer;
  background: none;
  border:     none;
  padding:    0;
}
.dm-toggle:hover { background: transparent }
.dm-track {
  width:        42px;
  height:       24px;
  border-radius: 999px;
  background:   var(--toggle-track);
  position:     relative;
  transition:   background 0.3s;
  border:       1px solid var(--linea);
  flex-shrink:  0;
}
.dm-thumb {
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--toggle-thumb);
  box-shadow:    0 1px 4px rgba(0,0,0,0.15);
  transition:    transform 0.28s cubic-bezier(.34,1.56,.64,1);
}
html.dark .dm-thumb { transform: translateX(18px) }
.dm-icon { font-size: 0.85rem; line-height: 1 }


/* ── 10. NAV ── */
nav {
  position:       sticky;
  top:            0;
  z-index:        100;
  background:     var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom:  1px solid var(--linea);
  height:         64px;
  display:        flex;
  align-items:    center;
  transition:     background 0.35s, border-color 0.35s;
}
.nav-in {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
}
.logo-txt {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      1.2rem;
  color:          var(--texto);
  letter-spacing: -0.03em;
  transition:     color 0.35s;
}
.logo-txt span { color: var(--acento) }

.nav-links,
.nav-links li {
  list-style: none !important;
  margin:     0;
  padding:    0;
}
.nav-links li a { text-decoration: none !important }

.nav-links {
  display:     flex;
  align-items: center;
  gap:         2rem;
}
.nav-links li a {
  font-size:   0.85rem;
  font-weight: 400;
  color:       var(--texto2);
  transition:  color 0.15s;
}
.nav-links li a:hover { color: var(--texto) }

.nav-r   { display: flex; align-items: center; gap: 1.25rem }
.nav-tel { font-size: 0.82rem; color: var(--texto3) }

/* Hamburguesa */
.md-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         4px;
  width:           36px;
  height:          36px;
}
.md-hamburger span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--texto);
  border-radius: 2px;
  transition:    all 0.25s;
}

/* Drawer */
.md-drawer {
  position:       fixed;
  top:            0;
  right:          0;
  width:          min(300px, 85vw);
  height:         100vh;
  background:     var(--bg2);
  box-shadow:     var(--sombra-lg);
  z-index:        200;
  display:        flex;
  flex-direction: column;
  padding:        1.5rem;
  transform:      translateX(100%);
  transition:     transform 0.3s cubic-bezier(.4,0,.2,1), background 0.35s;
}
.md-drawer.open { transform: translateX(0) }

.md-drawer__header {
  display:         flex;
  justify-content: flex-end;
  margin-bottom:   2rem;
}
.md-drawer__close {
  background:  none;
  border:      none;
  font-size:   1.25rem;
  cursor:      pointer;
  color:       var(--texto3);
  padding:     0.25rem;
  line-height: 1;
}
.md-drawer__nav {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  flex:           1;
}
.md-drawer__link {
  font-size:     1rem;
  font-weight:   500;
  color:         var(--texto);
  padding:       0.75rem 0;
  border-bottom: 1px solid var(--linea);
  display:       block;
  transition:    color 0.15s;
}
.md-drawer__link:hover { color: var(--acento) }

.md-drawer__bottom {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  padding-top:    1.5rem;
  border-top:     1px solid var(--linea);
  margin-top:     1.5rem;
}
.md-drawer__toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.md-drawer__toggle-label {
  font-size:   0.85rem;
  color:       var(--texto2);
  font-weight: 500;
}
.md-drawer__cta { width: 100%; justify-content: center }

/* Overlay */
.md-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,0.45);
  z-index:    190;
}
.md-overlay.open { display: block }

/* Mobile nav overrides */
@media (max-width: 768px) {
  .md-hamburger        { display: flex }
  .nav-tel--desktop    { display: none }
  .dm-toggle--desktop  { display: none }
  .nav-cta--desktop    { display: none }
  .nav-in              { justify-content: space-between }
  .logo-txt            { position: absolute; left: 50%; transform: translateX(-50%) }
  nav                  { position: relative }
}

/* Header variante color sólido */
.nav--color {
  background:    var(--acento);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.nav--color .logo-txt        { color: #fff }
.nav--color .logo-txt span   { color: rgba(255,255,255,0.75) }
.nav--color .nav-links li a       { color: rgba(255,255,255,0.8); text-decoration: none }
.nav--color .nav-links li a:hover { color: #fff }
.nav--color .nav-tel         { color: rgba(255,255,255,0.6) }
.nav--color .md-hamburger span { background: #fff }
.nav--color .btn-p {
  background: #fff;
  color:      var(--acento);
}
.nav--color .btn-p:hover {
  background: rgba(255,255,255,0.88);
  color:      var(--acento);
}

.md-logo { display: flex; align-items: center; text-decoration: none }
.md-logo__img {
  max-height: 38px;
  width:      auto;
  max-width:  160px;
  object-fit: contain;
  display:    block;
}
.nav--color .md-logo__img { filter: brightness(0) invert(1) }


/* ── 11. HERO ── */
.hero {
  min-height:  88vh;
  display:     flex;
  align-items: center;
  background:  var(--bg2);
  position:    relative;
  overflow:    hidden;
  padding:     4.5rem 0;
  transition:  background 0.35s;
}

/* Gradiente animado hero */
.hero::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    120deg,
    color-mix(in srgb, var(--acento) 18%, white)  0%,
    var(--bg2)                                     30%,
    color-mix(in srgb, var(--acento) 22%, white)  55%,
    var(--bg2)                                     75%,
    color-mix(in srgb, var(--acento) 14%, white)  100%
  );
  background-size: 500% 500%;
  animation:       heroGradient 14s ease-in-out infinite;
  opacity:         1;
  pointer-events:  none;
  z-index:         0;
}

@keyframes heroGradient {
  0%   { background-position: 0%   20%  }
  25%  { background-position: 80%  0%   }
  50%  { background-position: 100% 80%  }
  75%  { background-position: 20%  100% }
  100% { background-position: 0%   20%  }
}

/* Asegurar que el contenido quede sobre el gradiente */
.hero .contenedor,
.hero .md-contenedor { position: relative; z-index: 1 }
.hero-deco-blob  { z-index: 0 }
.hero-deco-ring  { z-index: 0 }

.hero-deco-blob {
  position:       absolute;
  right:          -5%;
  top:            -10%;
  width:          55%;
  height:         120%;
  background:     radial-gradient(ellipse at 70% 40%, var(--acento-claro) 0%, transparent 65%);
  pointer-events: none;
  opacity:        0.6;
}
.hero-deco-ring {
  position:       absolute;
  right:          8%;
  top:            50%;
  transform:      translateY(-50%);
  width:          360px;
  height:         360px;
  border-radius:  50%;
  border:         1px solid color-mix(in srgb, var(--acento) 12%, transparent);
  pointer-events: none;
}
.hero-inner {
  display:               grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:                   4rem;
  align-items:           center;
  width:                 100%;
}
.hero-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  background:    var(--acento-claro);
  border-radius: 999px;
  padding:       0.32rem 0.9rem;
  margin-bottom: 1.75rem;
  transition:    background 0.35s;
}
.hero-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acento) }
.hero-tag span {
  font-size:      0.7rem;
  font-weight:    600;
  color:          var(--acento);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-h1 {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      clamp(2.4rem, 4.8vw, 4rem);
  line-height:    1.06;
  letter-spacing: -0.03em;
  color:          var(--texto);
  margin-bottom:  1.3rem;
  transition:     color 0.35s;
}
.hero-h1 mark { background: none; color: var(--acento); font-style: italic; margin-right: 0.15em }
.hero-sub {
  font-size:     1.05rem;
  color:         var(--texto2);
  font-weight:   300;
  line-height:   1.85;
  margin-bottom: 2.25rem;
  transition:    color 0.35s;
}
.hero-acc { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap }
.hero-proof {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  margin-top:    2.75rem;
  padding-top:   2rem;
  border-top:    1px solid var(--linea);
  transition:    border-color 0.35s;
}
.avatares { display: flex }
.av {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  border:        2px solid var(--bg2);
  background:    var(--acento-claro);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.63rem;
  font-weight:   700;
  color:         var(--acento);
  margin-right:  -9px;
  font-family:   'Plus Jakarta Sans', sans-serif;
  transition:    background 0.35s, border-color 0.35s;
}
.proof-txt { font-size: 0.82rem; color: var(--texto3); margin-left: 14px; transition: color 0.35s }
.proof-txt strong { color: var(--texto); font-weight: 600 }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center }


/* ── 12. FLOATING CARD ── */
.hero-card-float {
  background:    var(--bg2);
  border-radius: var(--radio-lg);
  box-shadow:    var(--sombra-lg);
  padding:       1.75rem;
  width:         100%;
  max-width:     340px;
  animation:     levitar 4s ease-in-out infinite;
  transition:    background 0.35s, box-shadow 0.35s;
  will-change:   transform;
}
@keyframes levitar {
  0%,  100% { transform: translateY(calc(var(--parallax-y, 0px) + 0px)) }
  50%        { transform: translateY(calc(var(--parallax-y, 0px) - 10px)) }
}
.hcf-label {
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--texto3);
  margin-bottom:  1.25rem;
  transition:     color 0.35s;
}
.hcf-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem }
.hcf-stat { background: var(--bg); border-radius: var(--radio); padding: 1rem; text-align: center; transition: background 0.35s }
.hcf-num {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-size:      1.6rem;
  font-weight:    800;
  color:          var(--acento);
  letter-spacing: -0.02em;
  display:        block;
  line-height:    1;
}
.hcf-lbl { font-size: 0.72rem; color: var(--texto3); margin-top: 0.2rem; transition: color 0.35s }
.hcf-bar-wrap { margin-bottom: 0.6rem }
.hcf-bar-label {
  display:         flex;
  justify-content: space-between;
  font-size:       0.75rem;
  color:           var(--texto2);
  margin-bottom:   0.4rem;
  transition:      color 0.35s;
}
.hcf-bar { height: 5px; background: var(--linea); border-radius: 999px; overflow: hidden; transition: background 0.35s }
.hcf-bar-fill { height: 100%; border-radius: 999px; background: var(--acento) }
.hcf-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  background:    var(--acento-claro);
  border-radius: 999px;
  padding:       0.4rem 0.9rem;
  font-size:     0.75rem;
  font-weight:   600;
  color:         var(--acento);
  margin-top:    1rem;
  transition:    background 0.35s;
}
.hcf-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--acento);
  animation:     pulsar 2s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1) }
  50%       { opacity: 0.5; transform: scale(0.75) }
}

/* Hero con imagen de fondo */
.hero--imagen {
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}
.hero--imagen::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(
    105deg,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.15) 75%,
    transparent      100%
  );
  z-index: 0;
}

/* Textos con opacidad suavizada */
.hero--imagen .hero-h1  { color: rgba(255,255,255,0.92) }
.hero--imagen .hero-sub { color: rgba(255,255,255,0.78) }
.hero--imagen .proof-txt        { color: rgba(255,255,255,0.65) }
.hero--imagen .proof-txt strong { color: rgba(255,255,255,0.88) }

/* Ocultar floating card con imagen activa */
.hero--imagen .hero-visual { display: none }

.hero--imagen .hero-tag {
  background:     rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
}
.hero--imagen .hero-tag span,
.hero--imagen .hero-tag-dot { color: #fff }

.hero--imagen .hero-proof  { border-color: rgba(255,255,255,0.2) }
.hero--imagen .btn-o {
  border-color: rgba(255,255,255,0.5);
  color:        #fff;
}
.hero--imagen .btn-o:hover {
  border-color: #fff;
  background:   rgba(255,255,255,0.1);
}

/* Ocultar gradiente animado cuando hay imagen */
.hero--imagen::before { display: none }


/* ── 13. LOGOS ── */
.logos-strip {
  padding:    1.75rem 0;
  background: var(--bg2);
  overflow:   hidden;
  transition: background 0.35s, border-color 0.35s;
}
.logos-lab {
  font-size:      0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--texto3);
  white-space:    nowrap;
  text-align:     center;
  margin-bottom:  1.25rem;
}
.logos-marquee {
  display:   flex;
  width:     100%;
  overflow:  hidden;
}
.logos-track {
  display:         flex;
  align-items:     center;
  gap:             5rem;
  padding:         0 1.5rem;
  animation:       marquee 28s linear infinite;
  flex-shrink:     0;
  min-width:       100%;
}
.logos-marquee:hover .logos-track { animation-play-state: paused }

@keyframes marquee {
  from { transform: translateX(0) }
  to   { transform: translateX(-100%) }
}

.logo-emp {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-size:      0.9rem;
  font-weight:    700;
  color:          var(--linea);
  letter-spacing: 0.04em;
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     color 0.2s;
}
.logo-emp:hover { color: var(--acento-medio) }

.logo-emp__img {
  max-height: 36px;
  width:      auto;
  object-fit: contain;
  filter:     grayscale(1);
  opacity:    0.45;
  transition: filter 0.2s, opacity 0.2s;
}
.logo-emp__img:hover { filter: none; opacity: 1 }


/* ── 13B. SECTORES ── */
.sectores-seccion {
  padding:    3rem 0;
  background: var(--bg2);
}
.sectores-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.5rem;
  flex-wrap:       wrap;
  gap:             0.5rem;
}
.sectores-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.75rem;
}
.sector-card {
  background:    var(--bg);
  border:        1.5px solid var(--linea);
  border-radius: 10px;
  padding:       0.9rem 1rem;
  display:       flex;
  align-items:   center;
  gap:           0.85rem;
  transition:    all 0.22s;
}
.sector-card:hover {
  border-color: var(--acento);
  box-shadow:   0 4px 16px color-mix(in srgb, var(--acento) 12%, transparent);
  transform:    translateY(-2px);
}
.sector-img {
  width:           44px;
  height:          44px;
  min-width:       44px;
  border-radius:   50%;
  overflow:        hidden;
  border:          1.5px solid var(--linea);
  background:      var(--bg3);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.2rem;
  transition:      border-color 0.2s;
  flex-shrink:     0;
}
.sector-card:hover .sector-img { border-color: var(--acento) }
.sector-img img { width: 100%; height: 100%; object-fit: cover }
.sector-nombre {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size:   0.82rem;
  color:       var(--texto);
  line-height: 1.25;
  transition:  color 0.2s;
}
.sector-card:hover .sector-nombre { color: var(--acento) }

@media (max-width: 768px) {
  .sectores-grid { grid-template-columns: 1fr 1fr }
}
/* Sectores — padding superior para separarse de servicios cards,
   padding inferior igual al estándar del resto de secciones (5rem) */
.sectores-seccion {
  padding: 2.5rem 0 5rem 0;
}


/* ── 14. SERVICIOS CARDS ── */
/* Servicios cards — padding inferior reducido para conectar con sectores */
.md-sc-seccion {
  padding-bottom: 2.5rem;
}
.sc-header-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   3rem;
  align-items:           end;
  margin-bottom:         0.5rem;
}
.sc-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   1.25rem;
  margin-top:            2.75rem;
}
.sc-card {
  background:    var(--bg2);
  border-radius: var(--radio-lg);
  box-shadow:    var(--sombra);
  padding:       1.75rem 1.6rem;
  transition:    all 0.25s;
  position:      relative;
  overflow:      hidden;
  border:        1px solid transparent;
}
.sc-card::after {
  content:          '';
  position:         absolute;
  bottom:           0;
  left:             0;
  right:            0;
  height:           3px;
  background:       var(--acento);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform 0.3s;
  border-radius:    0 0 var(--radio-lg) var(--radio-lg);
}
.sc-card:hover { box-shadow: var(--sombra-lg); transform: translateY(-5px) }
.sc-card:hover::after { transform: scaleX(1) }
.sc-icono {
  width:         44px;
  height:        44px;
  border-radius: 10px;
  background:    var(--acento-claro);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 1.1rem;
  font-size:     1.2rem;
  transition:    background 0.35s;
}
.sc-titulo {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    700;
  font-size:      1.05rem;
  margin-bottom:  0.55rem;
  color:          var(--texto);
  letter-spacing: -0.01em;
  transition:     color 0.35s;
}
.sc-desc {
  font-size:     0.86rem;
  color:         var(--texto2);
  line-height:   1.75;
  font-weight:   300;
  margin-bottom: 1.1rem;
  transition:    color 0.35s;
}
.sc-lnk {
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--acento);
  display:     inline-flex;
  align-items: center;
  gap:         0.35rem;
  transition:  gap 0.15s;
}
.sc-lnk:hover { gap: 0.6rem }


/* ── 15. SERVICIOS ALTERNADOS ── */
.sa-lista { display: flex; flex-direction: column; gap: 4rem; margin-top: 3rem }
.sa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center }
.sa-row.inv { grid-template-columns: 1fr 1fr }
.sa-row.inv .sa-txt { order: 2 }
.sa-row.inv .sa-img { order: 1 }
.sa-n {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--acento);
  margin-bottom:  0.75rem;
  display:        block;
}
.sa-h {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      1.65rem;
  line-height:    1.15;
  color:          var(--texto);
  margin-bottom:  0.9rem;
  letter-spacing: -0.02em;
  transition:     color 0.35s;
}
.sa-p {
  font-size:     0.9rem;
  color:         var(--texto2);
  line-height:   1.85;
  font-weight:   300;
  margin-bottom: 1.5rem;
  transition:    color 0.35s;
}
.sa-img {
  border-radius: var(--radio-lg);
  overflow:      hidden;
  aspect-ratio:  3/2;
  background:    var(--bg3);
  box-shadow:    var(--sombra-lg);
  position:      relative;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        1px solid var(--linea);
  transition:    background 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.sa-img-inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem }
.img-circle {
  width:         64px;
  height:        64px;
  border-radius: 50%;
  border:        1.5px solid var(--acento-medio);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.5rem;
  background:    var(--bg2);
  transition:    background 0.35s;
}
.img-lbl {
  font-size:      0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--texto3);
  font-weight:    500;
}
.sa-deco {
  position:       absolute;
  top:            1rem;
  right:          1.25rem;
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-size:      4.5rem;
  font-weight:    800;
  color:          var(--acento);
  opacity:        0.07;
  line-height:    1;
}
/* Imagen real subida en servicios alternados */
.sa-img__foto { width: 100%; height: 100%; object-fit: cover }


/* ── 16. DIFERENCIADORES ── */
.md-dif-dark {
  background: #111110;
  padding:    5rem 0;
}
.md-dif-dark .eyebrow    { color: var(--acento-medio) }
.md-dif-dark .titulo-sec { color: #fff }
.md-dif-dark .sub-sec    { color: rgba(255,255,255,0.45) }

.stats-dark {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   0;
  border-bottom:         1px solid rgba(255,255,255,0.07);
  padding-bottom:        2.75rem;
  margin-bottom:         2.75rem;
}
.stat-dark-item {
  text-align:   center;
  padding:      0 1.5rem;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.stat-dark-item:first-child { padding-left: 0; text-align: left }
.stat-dark-item:last-child  { border-right: none }

.stat-dark-num {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-size:      clamp(2rem, 3.5vw, 2.8rem);
  font-weight:    800;
  color:          var(--acento);
  display:        block;
  line-height:    1;
  margin-bottom:  0.35rem;
  letter-spacing: -0.03em;
}
.stat-dark-lbl {
  font-size:      0.72rem;
  color:          rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

.dif-dark-bottom {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           center;
}
.bul-lista--dark { display: flex; flex-direction: column; gap: 0.8rem }
.bul-item--dark {
  display:     flex;
  align-items: flex-start;
  gap:         0.8rem;
  font-size:   0.88rem;
  color:       rgba(255,255,255,0.55);
  line-height: 1.65;
  font-weight: 300;
}
.bul-ic--dark {
  width:           18px;
  height:          18px;
  min-width:       18px;
  border-radius:   50%;
  background:      var(--acento);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      3px;
  font-size:       0.58rem;
  color:           #fff;
}
.dif-dark-img {
  border-radius:   var(--radio-lg);
  overflow:        hidden;
  aspect-ratio:    4/3;
  background:      rgba(255,255,255,0.04);
  border:          1px solid rgba(255,255,255,0.07);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             1rem;
}
.dif-dark-img__foto { width: 100%; height: 100%; object-fit: cover }

.attr-lista {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}
.attr-item {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  padding:       1rem 1.25rem;
  background:    rgba(255,255,255,0.04);
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transition:    background 0.2s, border-color 0.2s;
}
.attr-item:hover {
  background:   var(--attr-hover-bg);
  border-color: var(--attr-hover-border);
}
.attr-icon {
  width:           42px;
  height:          42px;
  min-width:       42px;
  border-radius:   10px;
  background:      var(--attr-icon-bg);
  border:          1px solid var(--attr-icon-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.1rem;
  transition:      background 0.2s;
}
.attr-item:hover .attr-icon { background: var(--attr-icon-hover) }
.attr-texto  { display: flex; flex-direction: column; gap: 0.15rem }
.attr-titulo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size:   0.88rem;
  color:       #fff;
  line-height: 1.2;
}
.attr-desc {
  font-size:   0.76rem;
  color:       rgba(255,255,255,0.38);
  line-height: 1.5;
  font-weight: 300;
}


/* ── 17. TESTIMONIOS ── */
.test-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap:                   1.25rem;
  margin-top:            2.75rem;
}
.test-card {
  background:    var(--bg2);
  border-radius: var(--radio-lg);
  box-shadow:    var(--sombra);
  padding:       1.75rem;
  display:       flex;
  flex-direction: column;
  transition:    all 0.25s;
  border:        1px solid transparent;
}
.test-card:hover { box-shadow: var(--sombra-md); transform: translateY(-3px) }
.test-q {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size:   2.25rem;
  font-weight: 800;
  color:       var(--acento);
  opacity:     0.25;
  line-height: 0.85;
  margin-bottom: 0.65rem;
}
.test-t {
  font-size:     0.875rem;
  color:         var(--texto2);
  line-height:   1.8;
  font-style:    italic;
  font-weight:   300;
  flex:          1;
  margin-bottom: 1.35rem;
  transition:    color 0.35s;
}
.test-sep { border: none; border-top: 1px solid var(--linea); margin-bottom: 1.1rem; transition: border-color 0.35s }
.test-autor { display: flex; align-items: center; gap: 0.8rem }
.test-av {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    var(--acento-claro);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   'Plus Jakarta Sans', sans-serif;
  font-size:     0.78rem;
  font-weight:   700;
  color:         var(--acento);
  transition:    background 0.35s;
  flex-shrink:   0;
}
/* Foto real del testimonio */
.test-av__foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0 }
.test-nm { font-size: 0.83rem; font-weight: 600; color: var(--texto); transition: color 0.35s }
.test-cg { font-size: 0.73rem; color: var(--texto3); transition: color 0.35s }


/* ── 18. CTA BAND ── */
.cta-band {
  background: var(--acento);
  padding:    4.5rem 0;
  position:   relative;
  overflow:   hidden;
}

/* Líneas decorativas SVG camufladas */
.cta-band::before {
  content:        '';
  position:       absolute;
  top:            -70%;
  right:          -8%;
  width:          600px;
  height:         600px;
  border-radius:  50%;
  border:         1px solid rgba(255,255,255,0.18);
  pointer-events: none;
}
.cta-band::after {
  content:        '';
  position:       absolute;
  bottom:         -50%;
  right:          10%;
  width:          380px;
  height:         380px;
  border-radius:  50%;
  border:         1px solid rgba(255,255,255,0.14);
  pointer-events: none;
}

/* Tercer anillo via elemento interno */
.cta-ring {
  position:       absolute;
  top:            50%;
  right:          15%;
  transform:      translateY(-50%);
  width:          240px;
  height:         240px;
  border-radius:  50%;
  border:         1px solid rgba(255,255,255,0.10);
  pointer-events: none;
}

/* Asegurar contenido sobre decoración */
.cta-band .md-contenedor,
.cta-band .contenedor { position: relative; z-index: 1 }

.cta-in {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2.5rem;
  flex-wrap:       wrap;
}
.cta-h {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      clamp(1.6rem, 3vw, 2.4rem);
  color:          #fff;
  line-height:    1.15;
  letter-spacing: -0.02em;
  max-width:      520px;
}
.cta-acc { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap }


/* ── 19. PROCESO ── */
.md-proc-dark {
  background: #161614;
  padding:    5rem 0;
}
.md-proc-dark .eyebrow    { color: var(--acento-medio) }
.md-proc-dark .titulo-sec { color: #fff }
.md-proc-dark .sub-sec    { color: rgba(255,255,255,0.4) }

.proc-flow {
  display:     flex;
  align-items: flex-start;
  position:    relative;
  margin-top:  3.5rem;
}
.proc-flow::before {
  content:    '';
  position:   absolute;
  top:        27px;
  left:       calc(28px + 1.5rem);
  right:      calc(28px + 1.5rem);
  height:     1px;
  background: linear-gradient(90deg, var(--acento) 0%, rgba(255,255,255,0.08) 100%);
}

.proc-step {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        0 0.75rem;
  position:       relative;
  cursor:         default;
}
.proc-circle-wrap {
  position:        relative;
  width:           56px;
  height:          56px;
  margin-bottom:   1.1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.proc-circle-wrap::before,
.proc-circle-wrap::after {
  content:       '';
  position:      absolute;
  border-radius: 50%;
  transition:    transform 0.4s cubic-bezier(.34,1.56,.64,1), border-color 0.3s;
}
.proc-circle-wrap::before {
  width:  72px;
  height: 72px;
  border: 1px solid rgba(74,158,122,0.14);
}
.proc-circle-wrap::after {
  width:  90px;
  height: 90px;
  border: 1px solid rgba(74,158,122,0.07);
}
.proc-step:hover .proc-circle-wrap::before {
  transform:    scale(1.18);
  border-color: rgba(74,158,122,0.32);
}
.proc-step:hover .proc-circle-wrap::after {
  transform:    scale(1.22);
  border-color: rgba(74,158,122,0.16);
}

.proc-circle {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--acento);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Plus Jakarta Sans', sans-serif;
  font-weight:     800;
  font-size:       1rem;
  color:           #fff;
  position:        relative;
  z-index:         1;
  transition:      transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.25s;
}
.proc-step:hover .proc-circle {
  transform:  translateY(-4px) scale(1.06);
  background: var(--acento2);
}

.proc-step-title {
  font-family:   'Plus Jakarta Sans', sans-serif;
  font-weight:   700;
  font-size:     0.87rem;
  color:         #fff;
  margin-bottom: 0.4rem;
  transition:    color 0.2s;
}
.proc-step:hover .proc-step-title { color: var(--acento-medio) }

.proc-step-desc {
  font-size:   0.76rem;
  color:       rgba(255,255,255,0.38);
  line-height: 1.65;
  font-weight: 300;
}

@media (max-width: 768px) {
  .stats-dark              { grid-template-columns: 1fr 1fr; gap: 1.5rem }
  .stat-dark-item          { border-right: none; padding: 0; text-align: center }
  .stat-dark-item:first-child { text-align: center }
  .dif-dark-bottom         { grid-template-columns: 1fr; gap: 2.5rem }
  .proc-flow               { flex-direction: column; gap: 2.5rem }
  .proc-flow::before       { display: none }
  .proc-step               { width: 100% }
}


/* ── 20. FAQ ── */
.faq-wrap { max-width: 720px; margin: 2.5rem auto 0 }
.faq-item {
  background:    var(--bg2);
  border-radius: var(--radio);
  box-shadow:    var(--sombra);
  margin-bottom: 0.6rem;
  overflow:      hidden;
  border:        1px solid transparent;
  transition:    border-color 0.2s, background 0.35s, box-shadow 0.35s;
}
.faq-item.on { border-color: color-mix(in srgb, var(--acento) 20%, transparent) }
.faq-btn {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.2rem 1.5rem;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  font-family:     'DM Sans', sans-serif;
  font-size:       0.92rem;
  font-weight:     500;
  color:           var(--texto);
  transition:      color 0.15s;
}
.faq-btn:hover { color: var(--acento); background: transparent }
.faq-ic {
  width:         22px;
  height:        22px;
  min-width:     22px;
  border-radius: 50%;
  border:        1.5px solid var(--linea);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.1rem;
  color:         var(--texto3);
  transition:    all 0.22s;
}
.faq-item.on .faq-ic {
  transform:    rotate(45deg);
  border-color: var(--acento);
  color:        var(--acento);
  background:   var(--acento-claro);
}
.faq-resp {
  display:     none;
  padding:     0 1.5rem 1.2rem;
  font-size:   0.87rem;
  color:       var(--texto2);
  line-height: 1.85;
  font-weight: 300;
}
.faq-item.on .faq-resp { display: block }
.faq-cta-row { text-align: center; margin-top: 2rem }
.faq-cta-row a {
  font-size:     0.82rem;
  color:         var(--texto3);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 2px;
  transition:    color 0.15s, border-color 0.15s;
}
.faq-cta-row a:hover { color: var(--acento); border-color: var(--acento) }


/* ── 21. CONTACTO ── */
.cont-grid {
  display:               grid;
  grid-template-columns: 1fr 1.6fr;
  gap:                   4.5rem;
  align-items:           start;
  margin-top:            2.75rem;
}
.cont-h {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      1.7rem;
  line-height:    1.18;
  letter-spacing: -0.02em;
  margin-bottom:  0.75rem;
}
.cont-d { font-size: 0.9rem; color: var(--texto2); line-height: 1.85; font-weight: 300; margin-bottom: 2.25rem }
.cont-datos { display: flex; flex-direction: column; gap: 1rem }
.cont-dato { display: flex; align-items: flex-start; gap: 0.9rem }
.cont-ic {
  width:         38px;
  height:        38px;
  min-width:     38px;
  border-radius: var(--radio);
  background:    var(--acento-claro);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1rem;
  transition:    background 0.35s;
}
.cont-lab {
  font-size:      0.67rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--texto3);
  margin-bottom:  0.12rem;
}
.cont-val { font-size: 0.88rem; font-weight: 500; color: var(--texto) }
.cont-form-box {
  background:    var(--bg2);
  border-radius: var(--radio-lg);
  box-shadow:    var(--sombra-md);
  padding:       2.25rem;
  border:        1px solid var(--linea);
  transition:    background 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem }
.form-g { display: flex; flex-direction: column; gap: 0.38rem; margin-bottom: 0.9rem }
.form-lab { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto3) }
.form-inp {
  width:       100%;
  padding:     0.78rem 1rem;
  background:  var(--bg);
  border:      1.5px solid var(--linea);
  border-radius: var(--radio);
  font-family: 'DM Sans', sans-serif;
  font-size:   0.88rem;
  color:       var(--texto);
  transition:  border-color 0.2s, background 0.35s, color 0.35s;
  outline:     none;
}
.form-inp::placeholder { color: var(--texto3) }
.form-inp:focus {
  border-color: var(--acento);
  background:   var(--bg2);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--acento) 12%, transparent);
}
textarea.form-inp { resize: vertical; min-height: 115px }
.form-sub {
  width:         100%;
  padding:       0.9rem;
  background:    var(--acento);
  color:         #fff;
  border:        none;
  border-radius: var(--radio);
  font-family:   'DM Sans', sans-serif;
  font-size:     0.9rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    all 0.2s;
  margin-top:    0.25rem;
}
.form-sub:hover { background: var(--acento2); transform: translateY(-1px) }
.cont-form-placeholder {
  width:         100%;
  padding:       2rem;
  background:    var(--bg);
  border:        1.5px solid var(--linea);
  border-radius: var(--radio);
  font-size:     0.87rem;
  color:         var(--texto3);
  text-align:    center;
  transition:    background 0.35s, border-color 0.35s, color 0.35s;
}


/* ── 22. FOOTER ── */
/* REGLA: --footer-bg es siempre oscuro en ambos modos (token independiente) */
footer {
  background: var(--footer-bg);
  color:      rgba(255,255,255,0.45);
  padding:    3.75rem 0 2rem;
  transition: background 0.35s;
}
.ft-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   3.5rem;
  margin-bottom:         2.75rem;
}
.ft-logo {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      1.15rem;
  color:          #fff;
  letter-spacing: -0.02em;
  margin-bottom:  0.65rem;
}
.ft-logo span { color: var(--acento-medio) }
.ft-tag { font-size: 0.84rem; color: rgba(255,255,255,0.38); line-height: 1.8; margin-bottom: 1.4rem; max-width: 250px; font-weight: 300 }
.ft-redes { display: flex; gap: 0.45rem }
.ft-red {
  width:         32px;
  height:        32px;
  border-radius: 8px;
  border:        1px solid rgba(255,255,255,0.1);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.7rem;
  font-weight:   700;
  color:         rgba(255,255,255,0.3);
  transition:    all 0.2s;
  font-family:   'Plus Jakarta Sans', sans-serif;
}
.ft-red:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.75) }
.ft-col-h {
  font-size:      0.66rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.22);
  margin-bottom:  1.1rem;
}
.ft-lista { display: flex; flex-direction: column; gap: 0.6rem }
.ft-lista a,
.md-footer__enlace {
  font-size:   0.83rem;
  color:       rgba(255,255,255,0.33);
  transition:  color 0.15s;
  font-weight: 300;
}
.ft-lista a:hover,
.md-footer__enlace:hover { color: rgba(255,255,255,0.75) }

.ft-base {
  padding-top:     1.6rem;
  border-top:      1px solid rgba(255,255,255,0.07);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             0.75rem;
}
.ft-copy { font-size: 0.74rem; color: rgba(255,255,255,0.17) }
.ft-cr   { font-size: 0.74rem; color: rgba(255,255,255,0.14) }
.ft-cr a { color: rgba(255,255,255,0.3); transition: color 0.15s }
.ft-cr a:hover { color: rgba(255,255,255,0.6) }

/* Links de contacto en columna de footer */
.md-footer__contacto-item {
  display:     flex;
  align-items: flex-start;
  gap:         0.6rem;
  font-size:   0.83rem;
  color:       rgba(255,255,255,0.33);
  transition:  color 0.15s;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.md-footer__contacto-item:hover { color: rgba(255,255,255,0.75) }

.ft-lista a,
.md-footer__enlace        { color: rgba(255,255,255,0.55) }
.ft-copy                  { color: rgba(255,255,255,0.35) }
.ft-cr                    { color: rgba(255,255,255,0.30) }
.ft-cr a                  { color: rgba(255,255,255,0.55) }


/* ── 23. PÁGINAS INTERNAS ── */

/* Banner superior compartido por todas las páginas internas */
.page-banner {
  background: var(--acento);
  padding:    4rem 0;
}
.page-banner__titulo {
  font-family:    'Plus Jakarta Sans', sans-serif;
  font-weight:    800;
  font-size:      clamp(2rem, 4vw, 3.2rem);
  color:          #fff;
  letter-spacing: -0.03em;
  line-height:    1.1;
}

/* Nosotros — intro */
.nosotros-intro { padding: 5rem 0 }
.nosotros-intro__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4rem;
  align-items:           center;
}
.nosotros-intro__texto {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            1.25rem;
}
.nosotros-intro__cuerpo {
  font-size:   0.95rem;
  color:       var(--texto2);
  line-height: 1.85;
  font-weight: 300;
}
.nosotros-intro__imagen {
  border-radius: var(--radio-lg);
  aspect-ratio:  4/3;
  overflow:      hidden;
  box-shadow:    var(--sombra-lg);
  background:    var(--bg3);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-direction: column;
  gap:           1rem;
  border:        1px solid var(--linea);
}
.nosotros-intro__foto { width: 100%; height: 100%; object-fit: cover }

/* Nosotros — equipo */
.equipo-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   2rem;
}
.equipo-card { text-align: center }
.equipo-card__foto {
  width:         120px;
  height:        120px;
  border-radius: 50%;
  object-fit:    cover;
  margin:        0 auto 1rem;
  display:       block;
}
.equipo-card__iniciales {
  width:           120px;
  height:          120px;
  border-radius:   50%;
  background:      var(--acento-claro);
  color:           var(--acento);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Plus Jakarta Sans', sans-serif;
  font-weight:     700;
  font-size:       1.5rem;
  margin:          0 auto 1rem;
}
.equipo-card__nombre {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size:   1.05rem;
  color:       var(--texto);
  transition:  color 0.35s;
}
.equipo-card__cargo {
  font-size:   0.85rem;
  color:       var(--acento);
  margin-top:  0.25rem;
}
.serv-intro {
  text-align: center;
  max-width:  680px;
  margin:     0 auto;
  padding:    4rem 0 2rem;
}
.faq-empty {
  font-size:  0.9rem;
  color:      var(--texto3);
  text-align: center;
  padding:    2rem 0;
}
.faq-page-cta {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
  text-align:     center;
  padding:        3rem 0;
}
.faq-page-cta p {
  font-size: 1rem;
  color:     var(--texto2);
}

/* ── 23B. RESPONSIVE MOBILE ── */
@media (max-width: 768px) {

  /* CONTENEDOR */
  .contenedor,
  .md-contenedor { padding: 0 1.25rem }

  /* NAV */
  .nav-links { display: none }
  .nav-tel   { display: none }
  .nav-r     { gap: 0.75rem }

  /* HERO */
  .hero { padding: 3rem 0 }
  .hero::before { opacity: 0.35 }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-visual { display: none }
  .hero-h1     { font-size: clamp(2rem, 7vw, 2.8rem) }
  .hero-tag    { margin-bottom: 1.25rem }

  /* SERVICIOS ALTERNADOS */
  .sa-row,
  .sa-row.inv {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .sa-row.inv .sa-txt { order: 1 }
  .sa-row.inv .sa-img { order: 2 }

  /* DIFERENCIADORES */
  .dif-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .dif-img-wrap { aspect-ratio: 16/9 }

  /* CONTACTO */
  .cont-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .form-fila { grid-template-columns: 1fr }

  /* FOOTER */
  .ft-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* NOSOTROS */
  .nosotros-intro__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* SERVICIOS CARDS HEADER */
  .sc-header-split {
    flex-direction: column;
    align-items:    flex-start;
    gap:            1rem;
  }

  /* CTA BAND */
  .cta-in { flex-direction: column; text-align: center }
  .cta-acc { justify-content: center }

  /* STATS */
  .stats-g { grid-template-columns: 1fr 1fr }

}


/* ── 24. SCROLLBAR ── */
::-webkit-scrollbar        { width: 4px }
::-webkit-scrollbar-track  { background: var(--bg) }
::-webkit-scrollbar-thumb  { background: var(--linea); border-radius: 999px }