:root{
  --primary:        #1a237e;  
  --primary-dark:   #0d1333;   
  --secondary:      #bfa046;  
  --accent:         #0f172a;  
  --background:     #f5f7fb;  
  --surface:        #ffffff;  
  --text:           #352235;  
  --text-light:     #775b73;  
  --muted:          #9fb0c9;  
  --shadow:         0 8px 32px rgba(26,35,126,0.10);
}
.dark-mode{
  --primary:        #4A90E2;
  --primary-dark:   #2C578F;
  --secondary:      #FFA500;
  --accent:         #cfd8e3;
  --background:     #0b1222; 
  --surface:        #162032; 
  --text:           #e2e8f0; 
  --text-light:     #9fb0c9; 
  --muted:          #7c8ea9;
}
*{ box-sizing: border-box; }
body{
  background: var(--background);
  color: var(--text);
  font-family: "Segoe UI","Inter","Roboto",Arial,sans-serif;
  font-size: 1.06rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
section{ padding: 80px 0 60px; }
.section-title{
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 26px;
  position: relative;
}
.section-title::after{
  content:"";
  display:block;
  width: 86px;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
}
.navbar{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
  padding: .8rem 0;
}
.navbar-brand{  
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: .8px;
  color: #040d71 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.navbar .nav-link{
  color: #1446a9 !important;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  transition: .2s ease;
}
.dark-mode .navbar{
  background: rgba(14,21,38,0.96);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dark-mode .navbar .nav-link{ color: #1446a9 !important; }
.btn-top{
  position: fixed; right: 20px; bottom: 24px;
  width: 48px; height: 48px; padding: .45rem;
  border-radius: 50%;
  z-index: 1050;
  opacity: 0; pointer-events: none;
  background: rgba(255,255,255,0.95);
  color: #0f172a !important;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .18s ease, opacity .18s ease;
}
.btn-top.show{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.dark-mode .btn-top{
  background: rgba(15,23,42,.84);
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.card-custom{
  background: var(--surface);
  border: 1px solid #e3e6ee;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}
#clientes .card.card-custom{
  display: flex; align-items: center; justify-content: center;
  min-height: 210px;
  text-align: center;
}
.client-logo{
  height: 64px; max-width: 170px; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.14));
  margin: 0 auto;
}
form{
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.dark-mode form{ background: rgb(16, 1, 61); }
.form-control{
  border-radius: 10px;
  border: 1px solid #cfd8dc;
  font-size: 1.03rem;
}
.form-control:focus{
  border-color: var(--secondary);
  box-shadow: 0 4px 14px rgba(191,160,70,.12);
}
.input-dark::placeholder{ color: #7b8798 !important; }
.accordion-button{
  font-weight: 700;
}
.dark-mode .accordion-item{
  background: var(--surface) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.dark-mode .accordion-button{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.dark-mode .accordion-button:not(.collapsed){
  background: var(--primary-dark) !important;
  color: #fff !important;
}
.dark-mode .accordion-body{
  background: var(--surface) !important;
  color: var(--text-light) !important;
}
footer{
  background: #0a1223;
  color: #d7dfef;
  padding: 32px 0 18px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -2px 12px rgba(26,35,126,.10);
}
.text-muted{ color: var(--text-light) !important; opacity: .95 !important; }
.dark-mode .text-muted{ color: var(--text-light) !important; opacity: .97 !important; }
.card, .modal-content, .accordion-body, form, .carousel-bg{
  color: var(--text);
}
.dark-mode .card, .dark-mode .modal-content, .dark-mode .accordion-body, 
.dark-mode form, .dark-mode .carousel-bg{
  color: var(--text);
}
.btn {
  --btn-bg: var(--primary);
  --btn-bg-2: var(--secondary);
  --btn-fg: #fffefe;
  --btn-shadow: 0 8px 20px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  text-align: center;
  padding: 12px 22px;
  color: var(--btn-fg);
  background: linear-gradient(90deg, var(--btn-bg-2) 0%, var(--btn-bg) 100%);
  box-shadow: var(--btn-shadow);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-outline {
  --btn-fg: var(--primary);
  background: transparent;
  color: var(--btn-fg) !important;
  border: 2px solid currentColor;
  box-shadow: none;
}
.dark-mode .btn-outline { --btn-fg: #e6edf7; }
.btn-outline:hover {
  background: color-mix(in oklab, currentColor 12%, transparent);
  transform: translateY(-1px);
}
.btn-wsp {
  --btn-bg: #25D366;
  --btn-bg-2: #16A34A;
  --btn-fg: #ffffff;
  color: var(--btn-fg) !important;
  background: linear-gradient(90deg, var(--btn-bg-2), var(--btn-bg)) !important;
}
#opcionesReclamoModal .modal-dialog {
  max-width: 430px;
}
#opcionesReclamoModal .modal-content {
  border-radius: 18px;
  overflow: hidden;
  border: none;
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
#opcionesReclamoModal .modal-header {
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 18px 22px;
  border-bottom: none;
}
#opcionesReclamoModal .modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
#opcionesReclamoModal .btn-close {
  filter: brightness(100);
  opacity: .9;
}
#opcionesReclamoModal .btn-close:hover {
  opacity: 1;
}
#opcionesReclamoModal .modal-body {
  padding: 28px 22px 30px;
  text-align: center;
}
#opcionesReclamoModal p {
  color: var(--text-light);
  margin-bottom: 25px;
  font-size: 0.95rem;
}
#opcionesReclamoModal .btn {
  border-radius: 12px;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 700;
}
#opcionesReclamoModal .btn-imprimir {
  background: linear-gradient(90deg, #dedede, #f7f7f7);
  border: 1px solid #ccc;
  color: #333;
  transition: .2s ease;
}
#opcionesReclamoModal .btn-imprimir:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
#opcionesReclamoModal .btn-imprimir:disabled {
  background: #e8e8e8 !important;
  color: #b59fb5 !important;
  border: 1px solid #ccc !important;
  opacity: .65;
}
#opcionesReclamoModal .btn-enviar {
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
  transition: .2s ease;
}
#opcionesReclamoModal .btn-enviar:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}
#tarjetasCarousel .carousel-card-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem .9rem .8rem;
  background: linear-gradient(0deg, rgba(13,19,51,.78) 70%, rgba(13,19,51,0) 100%);
  color: #fff;
  border-radius: 0 0 16px 16px;  
  pointer-events: none;
  z-index: 2;
}
#tarjetasCarousel .card-img-top {
  width: 100%;
  height: 320px;          
  object-fit: contain;   
    object-position: center;
    background-color: #0a0a0a;
    border-radius: 1.2rem 1.2rem 0 0;
    transition: transform .25s ease, filter .25s ease;
  }
  .card-zoom { position: relative; overflow: hidden; }
  .card-zoom > a { display: block; position: relative; }
  .card-zoom .zoom-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.50));
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: #fff; opacity: 0; transform: scale(1.02);
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none; 
  }
  .card-zoom .zoom-overlay i { font-size: 1.6rem; }
  .card-zoom:hover .zoom-overlay,
  .card-zoom:focus-within .zoom-overlay {
    opacity: 1; transform: none;
  }
  .card-zoom img.card-img-top { cursor: zoom-in; }
  .card-zoom:hover img.card-img-top,
  .card-zoom:focus-within img.card-img-top {
    transform: scale(1.02);
    filter: brightness(1.03);
  }
.empresa-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
@media (min-width: 992px){
  .empresa-grid{
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
    align-items: center;
  }
}
.empresa-media{
  position: relative;
  margin: 0;
}
.empresa-img{
  width: 100%;
  aspect-ratio: 16/9;         
  object-fit: cover;           
  object-position: center;
  border-radius: 16px;
  display: block;
  background: #0a0a0a;        
  filter: brightness(1.05) contrast(1.05) saturate(1.04);
  transition: filter .25s ease, transform .25s ease;
}
.empresa-caption{
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  color: #fff; font-weight: 700;
  padding: 6px 10px; border-radius: 10px;
  font-size: .92rem;
}
.empresa-text{
  --max: 9.5rem;        
  max-height: var(--max);
  overflow: clip;
  transition: max-height .35s ease;
}
.empresa-text[data-collapsed="false"]{
  max-height: 9999px;
}
#empresaToggle.btn {
  --btn-fg: var(--primary);
  color: var(--primary) !important;
  background: transparent !important;
  border: 2px solid currentColor !important;
  box-shadow: none !important;
}
.servicios-filters{
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
.sf-btn{
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  font-weight: 800; letter-spacing: .2px;
  color: var(--primary); background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
}
.sf-btn:hover{ transform: translateY(-1px); background: rgba(0,0,0,.06); }
.sf-btn.is-active{
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  color: #fff; border-color: rgba(255,255,255,.45);
}
.dark-mode .sf-btn{
  color: #fff; border-color: rgba(255,255,255,.45);
}
.sc-more{
  --max: 0px;
  max-height: var(--max);
  overflow: clip;
  transition: max-height .3s ease;
}
.sc-more[data-collapsed="false"]{
  max-height: 400px;
}
.sc-toggle.btn{
  margin-top: auto;
  --btn-fg: var(--primary);
  color: var(--primary) !important;
  background: transparent !important;
  border: 2px solid currentColor !important;
  box-shadow: none !important;
}
.sc-toggle.btn:hover,
.sc-toggle.btn:focus-visible{
  background: color-mix(in oklab, currentColor 12%, transparent) !important;
  transform: translateY(-1px);
}
.dark-mode .sc-toggle.btn{
  color: #e6edf7 !important;
  border-color: #e6edf7 !important;
  background: rgba(15,23,42,.30) !important;
}
.dark-mode .sc-toggle.btn:hover,
.dark-mode .sc-toggle.btn:focus-visible{
  background: rgba(15,23,42,.45) !important;
}
.dark-mode .accordion-button::after{
  filter: invert(1) contrast(1.1);
}.hero {
  position: relative;
  min-height: 100vh;      
  width: 100%;
  overflow: hidden;
}
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active {
  opacity: 1;
  z-index: 1;
}
.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.65)
  );
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.hero-slides {
  position: absolute;
  inset: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slide.active {
  opacity: 1;
  z-index: 1;
}
.hero-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.65)
  );
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-slide img.hero-media {
  transform: scale(1);
  transition: transform 10s ease;
}
.hero-slide.active img.hero-media {
  transform: scale(1.15);
}
#wsp-float {
  position: fixed;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: calc(8px + env(safe-area-inset-left));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
#wsp-float.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#wsp-toggle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: #25D366;
  color: white;
  font-size: 1.8rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: pointer;
}
.wsp-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  opacity: 0;
  transform: scale(.95);
  pointer-events: none;
  transition: all .25s ease;
}
#wsp-float.open .wsp-options {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  align-items: flex-start;
}
.wsp-options a {
  background: #ffffff;
  color: #0f172a;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  white-space: nowrap;
}
.wsp-options a:hover {
  background: #25D366;
  color: white;
}
@keyframes wsp-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
#wsp-toggle {
  animation: wsp-pulse 2.2s infinite;
}
  .hero-slide img.hero-media {
    object-fit: contain;
    background-color:   #111;
  }
  .hero-slide video.hero-media {
    object-fit: cover;
  }