/* =====================================================================
   BYNARI · Capa de refresco "Dark refinado"
   Se carga DESPUÉS del CSS original y lo sobreescribe.
   El CSS de Astro usa selectores con scope ([data-astro-cid-...]) de
   alta especificidad, por eso aquí usamos !important de forma deliberada.
   Para revertir: quitar el <link> de este archivo en index.html.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --by-bg:        #080b12;
  --by-soft:      #0c111c;
  --by-line:      rgba(255,255,255,.08);
  --by-line-2:    rgba(255,255,255,.04);
  --by-text:      #eef2f8;
  --by-muted:     #93a1b5;
  --by-accent:    #22d3ee;   /* UN solo acento */
  --by-accent-2:  #38bdf8;
  --by-accent-ink:#06212a;
  --by-ease:      cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Grano fino global (sutil, no interactivo) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tipografía display ---------- */
h1, h2, h3,
.section-tag, .section-badge, .hero-badge,
.gradient-text, .highlight, .paso-num {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif !important;
}
h1 { font-weight: 600 !important; letter-spacing: -.03em !important; line-height: 1.05 !important; }
h2 { font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.1 !important; }
h3 { font-weight: 600 !important; letter-spacing: -.01em !important; }

/* Texto en gradiente -> acento cian unificado */
.gradient-text,
h1 .highlight, .highlight {
  background: linear-gradient(120deg, var(--by-accent), var(--by-accent-2)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* ---------- Badges / tags / pills (acento único) ---------- */
.section-badge, .section-tag, .hero-badge {
  background: rgba(34,211,238,.08) !important;
  border: 1px solid rgba(34,211,238,.22) !important;
  color: var(--by-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
}
.feature-pill, .zona-pill, .ciber-tag, .des-tipo, .ht-badge {
  background: var(--by-soft) !important;
  border: 1px solid var(--by-line) !important;
  color: var(--by-text) !important;
  border-radius: 11px !important;
}
.feature-pill svg, .ciber-tag svg { color: var(--by-accent) !important; }

/* ---------- Botones refinados ---------- */
.btn-primary, .btn-cta, .banner-btn, .ht-prev-cta, .ciber-link-main {
  background: linear-gradient(120deg, var(--by-accent), var(--by-accent-2)) !important;
  color: var(--by-accent-ink) !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 40px -16px rgba(34,211,238,.6) !important;
  transition: transform .25s var(--by-ease), box-shadow .25s var(--by-ease) !important;
}
.btn-primary:hover, .btn-cta:hover, .banner-btn:hover, .ht-prev-cta:hover, .ciber-link-main:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 52px -18px rgba(34,211,238,.85) !important;
}
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--by-line) !important;
  color: var(--by-text) !important;
  border-radius: 12px !important;
  transition: transform .25s var(--by-ease), background .25s var(--by-ease) !important;
}
.btn-secondary:hover { background: rgba(255,255,255,.05) !important; transform: translateY(-2px) !important; }

/* Enlaces de acción -> acento */
.sol-link, .partners-link, .ciber-read, .des-card-btn:hover { color: var(--by-accent) !important; }
.nav-link:hover { color: var(--by-accent) !important; }

/* ---------- Tarjetas refinadas ---------- */
.sol-card, .testimonio-card, .cob-card, .des-card-btn,
.paso-card, .ciber-card, .partner-card, .digital-card {
  background: var(--by-soft) !important;
  border: 1px solid var(--by-line) !important;
  border-radius: 16px !important;
  transition: transform .3s var(--by-ease), border-color .3s var(--by-ease), box-shadow .3s var(--by-ease) !important;
}
.sol-card:hover, .testimonio-card:hover, .cob-card:hover, .des-card-btn:hover,
.paso-card:hover, .ciber-card:hover, .partner-card:hover, .digital-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34,211,238,.35) !important;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(34,211,238,.08) !important;
}

/* Iconos de tarjeta con acento */
.sol-icon, .paso-icon, .ciber-shield { color: var(--by-accent) !important; }

/* Marcos de imagen / glow -> acento */
.slide-img-glow { background: radial-gradient(circle, rgba(34,211,238,.22), transparent 70%) !important; }

/* ---------- Calmar efectos del hero ---------- */
.hero-particles { opacity: .28 !important; }
.hero-glow      { opacity: .42 !important; }
.hero-grid      { opacity: .55 !important; }
.social-ring    { animation-duration: 6s !important; }

/* ---------- Banner principal: formato CENTRADO full-screen ---------- */
.hero {
  min-height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Bloquear el carrusel en la 1ª diapositiva y ocultar el resto (sin tocar el JS) */
#carouselTrack { transform: none !important; }
#carouselTrack > .carousel-slide:not(:first-child) { display: none !important; }
.carousel-arrow, .carousel-dots, .carousel-footer { display: none !important; }

/* Centrar el contenido de la diapositiva */
.hero .slide-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}
.hero .slide-text { text-align: center !important; max-width: 860px !important; }
.hero .slide-image { display: none !important; }            /* fuera la imagen lateral */
.hero .hero-badge { margin: 0 auto 1.5rem !important; }
.hero h1 {
  font-size: clamp(2.7rem, 6.5vw, 5rem) !important;
  margin: 0 auto !important;
}
.hero .hero-desc {
  margin: 1.5rem auto 0 !important;
  max-width: 42em !important;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
}
.hero .hero-features { justify-content: center !important; margin-top: 1.8rem !important; }
.hero .hero-actions  { justify-content: center !important; margin-top: 2.2rem !important; }


/* ---------- Más aire en las secciones ---------- */
.soluciones, .hytera-productos, .proceso, .desarrollos,
.galeria, .cobertura, .partners, .testimonios, .ciberseguridad {
  padding-top: clamp(4.5rem, 8vw, 7.5rem) !important;
  padding-bottom: clamp(4.5rem, 8vw, 7.5rem) !important;
}
.section-header { margin-bottom: clamp(2.75rem, 5vw, 4rem) !important; }

/* ---------- Portafolio (#desarrollos): grilla -> CARRUSEL ---------- */
#desarrollos .des-grid,
#hytera .ht-preview-grid,
#partners .partners-grid {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: 1.35rem !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  -ms-overflow-style: none;          /* IE/Edge */
  scrollbar-width: none;             /* Firefox */
}
#desarrollos .des-grid::-webkit-scrollbar,
#hytera .ht-preview-grid::-webkit-scrollbar,
#partners .partners-grid::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

/* tarjetas/tiles del carrusel de clientes */
#partners .partner-card {
  flex: 0 0 clamp(160px, 22%, 200px) !important;
  scroll-snap-align: start;
}
@media (max-width: 700px) { #partners .partner-card { flex-basis: 45% !important; } }

#desarrollos .des-card {
  flex: 0 0 clamp(280px, 40%, 380px) !important;
  scroll-snap-align: start;
  min-width: 0;
  /* siempre visibles dentro del carrusel (anula el reveal original) */
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 700px) {
  #desarrollos .des-card { flex-basis: 84% !important; }
}

/* Items del carrusel Hytera */
#hytera .ht-prev-item {
  flex: 0 0 clamp(190px, 25%, 260px) !important;
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 700px) {
  #hytera .ht-prev-item { flex-basis: 62% !important; }
}

/* Contenedor + flechas de navegación (las inyecta el JS) */
.by-carousel { position: relative; }
.by-carousel-btn {
  position: absolute; top: 44%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(12,17,28,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--by-line); color: var(--by-text);
  display: grid; place-items: center; cursor: pointer; z-index: 6;
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.75);
  transition: border-color .25s var(--by-ease), color .25s var(--by-ease), opacity .25s var(--by-ease), transform .25s var(--by-ease);
}
.by-carousel-btn.prev { left: -12px; }
.by-carousel-btn.next { right: -12px; }
.by-carousel-btn:hover { border-color: var(--by-accent); color: var(--by-accent); }
.by-carousel-btn:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .by-carousel-btn { display: none; } } /* en móvil: deslizar con el dedo */

/* ---------- Menú "Soluciones": dropdown ---------- */
.by-dd { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.by-dd-caret {
  background: none; border: none; padding: 2px; margin: 0;
  color: var(--by-muted); cursor: pointer; display: inline-grid; place-items: center;
  transition: transform .25s var(--by-ease), color .2s var(--by-ease);
}
.by-dd:hover .by-dd-caret, .by-dd.open .by-dd-caret { color: var(--by-accent); transform: rotate(180deg); }

.by-dd-menu {
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 250px; padding: 8px;
  background: rgba(10,14,22,.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--by-line); border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--by-ease), transform .22s var(--by-ease), visibility .22s;
  z-index: 1200;
}
/* puente invisible para que no se cierre al mover el mouse hacia el panel */
.by-dd-menu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.by-dd:hover .by-dd-menu,
.by-dd:focus-within .by-dd-menu,
.by-dd.open .by-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.by-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--by-muted); font-size: .9rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background .2s var(--by-ease), color .2s var(--by-ease);
}
.by-dd-item:hover { background: rgba(34,211,238,.1); color: var(--by-text); }
.by-dd-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--by-accent); opacity: .5; flex: none; transition: opacity .2s; }
.by-dd-item:hover .dot { opacity: 1; }

/* resaltado de la tarjeta destino al llegar desde el menú */
.sol-card.by-highlight {
  box-shadow: 0 0 0 2px var(--by-accent), 0 24px 60px -28px rgba(0,0,0,.9) !important;
  border-color: transparent !important;
  transition: box-shadow .4s var(--by-ease) !important;
}

/* En móvil: el dropdown vive dentro del menú hamburguesa, desplegable */
@media (max-width: 768px) {
  .by-dd { display: flex; width: 100%; justify-content: space-between; }
  .by-dd-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    width: 100%; min-width: 0; margin: .6rem 0 0; padding: 0 0 0 .85rem;
    background: transparent; border: none; border-left: 2px solid var(--by-line);
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    display: none;
  }
  .by-dd.open .by-dd-menu { display: block; }
  .by-dd-item { white-space: normal; }
}

/* ---------- Soluciones: estilo BOTONES grandes ---------- */
/* Grupo de equipos: 4 tarjetas en una sola fila (sin hueco) */
#soluciones .soluciones-grid:not(.digital-grid) {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 980px) {
  #soluciones .soluciones-grid:not(.digital-grid) { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  #soluciones .soluciones-grid:not(.digital-grid) { grid-template-columns: 1fr !important; }
}

#soluciones .sol-card {
  text-align: center !important;
  align-items: center !important;
  cursor: pointer;
  padding: 2.2rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
}
#soluciones .sol-card:focus-visible {
  outline: none !important;
  border-color: var(--by-accent) !important;
  box-shadow: 0 0 0 2px var(--by-accent) !important;
}
#soluciones .sol-icon {
  font-size: 1.9rem !important;
  width: 66px; height: 66px; border-radius: 18px;
  display: grid !important; place-items: center;
  margin: 0 auto !important;
  background: rgba(34,211,238,.10);
  border: 1px solid rgba(34,211,238,.22);
}
#soluciones .sol-card h3 { margin: .95rem 0 0 !important; font-size: 1.15rem !important; }

/* Detalle (descripción + features): oculto, se revela al pasar el mouse / foco */
#soluciones .sol-card p,
#soluciones .sol-card .sol-features {
  max-height: 0; opacity: 0; margin: 0 !important; overflow: hidden;
  transition: max-height .4s var(--by-ease), opacity .3s var(--by-ease), margin .3s var(--by-ease);
}
#soluciones .sol-card:hover p,
#soluciones .sol-card:focus-within p,
#soluciones .sol-card:hover .sol-features,
#soluciones .sol-card:focus-within .sol-features {
  max-height: 14rem; opacity: 1; margin-top: .7rem !important;
}

/* Flecha tipo botón */
#soluciones .sol-card::after {
  content: "→";
  font-family: "Space Grotesk", sans-serif;
  color: var(--by-accent); font-size: 1.3rem; line-height: 1;
  margin-top: 1.05rem; opacity: .65;
  transition: transform .25s var(--by-ease), opacity .25s var(--by-ease);
}
#soluciones .sol-card:hover::after { transform: translateX(6px); opacity: 1; }

/* El botón es toda la tarjeta: ocultar enlaces internos sobrantes */
#soluciones .sol-link { display: none !important; }

/* En táctil (sin hover): mostrar siempre el detalle */
@media (hover: none) {
  #soluciones .sol-card p,
  #soluciones .sol-card .sol-features { max-height: none; opacity: 1; margin-top: .7rem !important; }
  #soluciones .sol-card::after { opacity: 1; }
}

/* ---------- Soluciones Digitales: énfasis estilo MARKETING ---------- */
#soluciones .group-label.digital .group-text,
#soluciones .group-label.digital span:not(.group-line) {
  background: linear-gradient(120deg, var(--by-accent), var(--by-accent-2)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-weight: 700 !important;
}
#soluciones .digital-grid { gap: 1.5rem !important; }

/* La tarjeta digital deja de ser "botón" y pasa a panel marketing */
#soluciones .sol-card.digital-card {
  text-align: left !important;
  align-items: stretch !important;
  cursor: default;
  padding: 2.2rem !important;
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 80% at 100% 0%, rgba(34,211,238,.14), transparent 55%),
    linear-gradient(160deg, rgba(56,189,248,.07), rgba(12,17,28,.92)) !important;
  border: 1px solid rgba(34,211,238,.30) !important;
  box-shadow: 0 26px 64px -34px rgba(34,211,238,.45) !important;
}
/* barra de acento superior */
#soluciones .sol-card.digital-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--by-accent), var(--by-accent-2));
}
/* sin flecha de "botón" */
#soluciones .sol-card.digital-card::after { content: none !important; }
#soluciones .sol-card.digital-card .sol-icon {
  width: 56px; height: 56px; font-size: 1.6rem !important; border-radius: 14px;
  margin: 0 0 .2rem !important;
}
#soluciones .sol-card.digital-card h3 { text-align: left !important; margin-top: 1rem !important; }

/* descripción + beneficios SIEMPRE visibles */
#soluciones .sol-card.digital-card p,
#soluciones .sol-card.digital-card .sol-features {
  max-height: none !important; opacity: 1 !important; overflow: visible !important;
  text-align: left !important;
}
#soluciones .sol-card.digital-card p { margin-top: .85rem !important; color: var(--by-muted); }
#soluciones .sol-card.digital-card .sol-features {
  list-style: none !important; margin: 1.15rem 0 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; gap: .55rem;
}
#soluciones .sol-card.digital-card .sol-features li {
  position: relative; padding-left: 1.65rem; color: var(--by-text); font-size: .9rem;
}
#soluciones .sol-card.digital-card .sol-features li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--by-accent); font-weight: 800;
}

/* CTA marketing: el enlace vuelve como botón potente */
#soluciones .sol-card.digital-card .sol-link {
  display: inline-flex !important; align-items: center; gap: .5rem;
  margin-top: 1.5rem !important; align-self: flex-start;
  background: linear-gradient(120deg, var(--by-accent), var(--by-accent-2)) !important;
  color: var(--by-accent-ink) !important;
  padding: .72rem 1.35rem !important; border-radius: 11px !important;
  font-weight: 700 !important; font-size: .9rem !important; text-decoration: none !important;
  box-shadow: 0 12px 30px -14px rgba(34,211,238,.6);
  transition: transform .25s var(--by-ease), box-shadow .25s var(--by-ease);
}
#soluciones .sol-card.digital-card .sol-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -16px rgba(34,211,238,.85);
}
/* hover del panel: realce mayor */
#soluciones .sol-card.digital-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(34,211,238,.5) !important;
  box-shadow: 0 34px 80px -34px rgba(34,211,238,.55) !important;
}

/* ---------- Nuestro equipo (avatar circular) ---------- */
.by-team { margin-top: clamp(3rem, 6vw, 5rem); }
.by-team-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.by-team-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 600; color: var(--by-accent);
  background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.22);
  border-radius: 999px; padding: .42rem 1rem;
}
.by-team-title {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--by-text);
  font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; margin-top: 1rem;
}
.by-team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }

.by-team-card {
  flex: 0 1 200px; max-width: 230px;
  background: var(--by-soft); border: 1px solid var(--by-line); border-radius: 16px;
  padding: 2.1rem 1.25rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .3s var(--by-ease), border-color .3s var(--by-ease), box-shadow .3s var(--by-ease);
}
.by-team-card:hover {
  transform: translateY(-4px); border-color: rgba(34,211,238,.35);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(34,211,238,.08);
}
.by-team-avatar {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: var(--by-accent-ink);
  background: linear-gradient(135deg, var(--by-accent), var(--by-accent-2));
  box-shadow: 0 14px 34px -14px rgba(34,211,238,.6);
}
.by-team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.by-team-initials { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.7rem; letter-spacing: .02em; }
.by-team-name {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--by-text);
  font-size: 1.1rem; margin-top: 1.1rem;
}
.by-team-role { color: var(--by-muted); font-size: .9rem; margin-top: .25rem; }
.by-team-social { display: flex; gap: .5rem; margin-top: 1.1rem; }
.by-team-social a {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--by-line); color: var(--by-muted); text-decoration: none;
  transition: border-color .2s var(--by-ease), color .2s var(--by-ease), background .2s var(--by-ease);
}
.by-team-social a:hover { border-color: var(--by-accent); color: var(--by-accent); background: rgba(34,211,238,.08); }

/* ---------- Rotador de desarrollos (imagen + título que cambian solos) ---------- */
.by-rotator { margin: 1.3rem 0 .2rem; }
.by-rotator-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--by-line); background: #06080d;
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.8);
}
.by-rotator-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.03);
  transition: opacity .9s var(--by-ease), transform 6s linear;
}
.by-rotator-img.active { opacity: 1; transform: scale(1); }
.by-rotator-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(0deg, rgba(6,8,13,.94), rgba(6,8,13,.4) 60%, transparent);
  padding: 1.6rem .9rem .75rem;
  font-size: .85rem; font-weight: 600; color: #fff;
}
.by-rotator-cap::before {
  content: "● "; color: var(--by-accent); font-size: .7em; vertical-align: middle;
}

/* ---------- Cobertura: zonas con MÁS énfasis ---------- */
.cobertura .zonas {
  margin-top: 2rem !important;
  padding: 2rem 1.75rem !important;
  border-radius: 18px;
  text-align: center;
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(34,211,238,.14), transparent 60%),
    var(--by-soft);
  border: 1px solid rgba(34,211,238,.28);
  box-shadow: 0 26px 64px -36px rgba(34,211,238,.4);
}
.cobertura .zonas h4 {
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 600 !important; letter-spacing: -.01em;
  font-size: 1.25rem !important; color: var(--by-text) !important;
  display: inline-flex; align-items: center; gap: .5rem;
}
.cobertura .zonas h4::before { content: "📍"; font-size: 1.05em; }
.cobertura .zonas-list { gap: .7rem !important; margin-top: 1.3rem !important; }

.cobertura .zona-pill {
  display: inline-flex !important; align-items: center; gap: .45rem;
  font-size: .95rem !important; font-weight: 700 !important;
  padding: .65rem 1.25rem !important;
  border-radius: 999px !important;
  background: rgba(34,211,238,.10) !important;
  border: 1px solid rgba(34,211,238,.40) !important;
  color: var(--by-text) !important;
  transition: transform .25s var(--by-ease), background .25s var(--by-ease),
              box-shadow .25s var(--by-ease), color .25s var(--by-ease),
              border-color .25s var(--by-ease) !important;
}
.cobertura .zona-pill::before { content: "📍"; font-size: .9em; }
.cobertura .zona-pill:hover {
  transform: translateY(-3px);
  background: linear-gradient(120deg, var(--by-accent), var(--by-accent-2)) !important;
  color: var(--by-accent-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px -10px rgba(34,211,238,.65) !important;
}
/* "Región de Los Lagos" (última) como zona principal, resaltada */
.cobertura .zonas-list .zona-pill:last-child {
  background: linear-gradient(120deg, var(--by-accent), var(--by-accent-2)) !important;
  color: var(--by-accent-ink) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 30px -12px rgba(34,211,238,.6) !important;
}

/* ---------- Partners / Clientes: muro de logos (tiles blancos, dinámico) ---------- */
.partners .partners-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 1.1rem !important;
  max-width: 1000px; margin-inline: auto;
}
.partners .partner-card {
  background: #ffffff !important; border: 1px solid var(--by-line) !important;
  border-radius: 14px !important; padding: 1.35rem 1.1rem !important;
  display: grid !important; place-items: center !important; min-height: 92px;
  transition: transform .3s var(--by-ease), box-shadow .3s var(--by-ease) !important;
}
.partners .partner-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.85), 0 0 0 2px rgba(34,211,238,.4) !important;
}
.partners .partner-logo-wrap {
  background: transparent !important; border: none !important;
  width: auto !important; height: auto !important; padding: 0 !important; overflow: visible;
  display: grid !important; place-items: center !important;
}
.partners .partner-logo-wrap img {
  width: 150px !important; height: 58px !important; object-fit: contain !important;
}
/* Logos casi cuadrados se ven chicos al contener: les damos un realce */
.partners .partner-logo-wrap img[src*="dogroup"] { transform: scale(1.35); }
@media (max-width: 560px) {
  .partners .partner-logo-wrap img { width: 116px !important; height: 46px !important; }
}
.partners .partner-info { display: none !important; }

/* ---------- Logos de confianza DENTRO del hero (MARQUEE infinito) ---------- */
.by-hero-logos {
  margin-top: clamp(2.2rem, 4vw, 3.5rem);
  width: 100%; display: flex; flex-direction: column; align-items: center;
}
.by-hero-logos-label {
  text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 600;
  color: var(--by-muted); margin-bottom: .95rem;
}
.by-hero-logos-bar {
  position: relative; overflow: hidden; display: block;
  width: min(100%, 760px);
  background: #ffffff; border-radius: 14px; padding: .95rem 0;
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.7);
}
.by-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: by-marquee 32s linear infinite;
}
.by-hero-logos-bar:hover .by-marquee-track { animation-play-state: paused; }
.by-marquee-track img {
  height: 46px; width: auto; object-fit: contain; flex: none; margin: 0 1.9rem; opacity: .92;
}
.by-marquee-track img[src*="dogroup"] { transform: scale(1.3); }
@keyframes by-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .by-marquee-track img { height: 34px; margin: 0 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .by-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; padding: 0 1rem; }
}

/* ---------- Equipo como sección propia ---------- */
.by-team-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.by-team-section .by-team { margin-top: 0 !important; }

/* ---------- Hero: énfasis en el botón "Ver catálogo Hytera" ---------- */
.hero .hero-actions a[href="/catalogo"] {
  background: rgba(34,211,238,.12) !important;
  border: 1.5px solid var(--by-accent) !important;
  color: var(--by-accent) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 4px rgba(34,211,238,.10), 0 16px 36px -16px rgba(34,211,238,.6) !important;
}
.hero .hero-actions a[href="/catalogo"] svg { color: var(--by-accent) !important; }
.hero .hero-actions a[href="/catalogo"]:hover {
  background: rgba(34,211,238,.20) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 0 0 4px rgba(34,211,238,.16), 0 22px 46px -18px rgba(34,211,238,.8) !important;
}

/* ---------- Hero: pills de servicios destacadas ---------- */
.hero .hero-features { position: relative; row-gap: .6rem !important; }
.hero .hero-features::before {
  content: "Nuestros servicios";
  flex-basis: 100%; width: 100%; text-align: center;
  text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; font-weight: 700;
  color: var(--by-accent); margin-bottom: .25rem;
}
.hero .feature-pill {
  background: rgba(34,211,238,.09) !important;
  border: 1px solid rgba(34,211,238,.34) !important;
  color: var(--by-text) !important;
  font-weight: 600 !important; font-size: .86rem !important;
  padding: .6rem 1.1rem !important; border-radius: 999px !important;
  transition: transform .25s var(--by-ease), background .25s var(--by-ease), box-shadow .25s var(--by-ease) !important;
}
.hero .feature-pill svg { color: var(--by-accent) !important; }
.hero .feature-pill:hover {
  transform: translateY(-2px) !important;
  background: rgba(34,211,238,.18) !important;
  box-shadow: 0 12px 28px -12px rgba(34,211,238,.55) !important;
}

/* ---------- Badge del equipo (ej: Práctica Profesional) ---------- */
.by-team-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--by-accent-ink);
  background: linear-gradient(120deg, var(--by-accent), var(--by-accent-2));
  padding: .32rem .72rem; border-radius: 999px; margin-bottom: .9rem;
  box-shadow: 0 8px 20px -8px rgba(34,211,238,.6);
}
.by-team-badge svg { flex: none; }

/* ---------- Etiqueta "Cotizar" del botón flotante de WhatsApp ---------- */
.wa-btn { overflow: visible !important; }
.wa-btn .wa-label {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #ffffff; color: #128c7e; font-weight: 700; font-size: .82rem;
  padding: .48rem .9rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.45);
  pointer-events: none; z-index: 2;
  animation: wa-label-pop 2.8s var(--by-ease) infinite;
}
.wa-btn .wa-label::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: #ffffff;
}
@keyframes wa-label-pop { 0%,100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .wa-btn .wa-label { animation: none; } }
@media (max-width: 480px) { .wa-btn .wa-label { font-size: .76rem; padding: .42rem .75rem; } }

/* ---------- Botón de acceso al panel (footer) ---------- */
.by-admin-link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .7rem; font-size: .8rem; font-weight: 600;
  color: var(--by-muted) !important; text-decoration: none !important;
  border: 1px solid var(--by-line); border-radius: 999px; padding: .45rem .95rem;
  transition: border-color .2s var(--by-ease), color .2s var(--by-ease), background .2s var(--by-ease);
}
.by-admin-link:hover {
  color: var(--by-accent) !important; border-color: var(--by-accent);
  background: rgba(34,211,238,.08);
}

/* ---------- Scroll reveal (progresivo: sólo si html.by-reveal) ---------- */
.by-reveal [data-by-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--by-ease), transform .7s var(--by-ease);
  will-change: opacity, transform;
}
.by-reveal [data-by-reveal].by-in { opacity: 1; transform: none; }

/* ---------- Accesibilidad: respeta reduce-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .by-reveal [data-by-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-particles, .hero-glow, .social-ring, .slide-img-glow { animation: none !important; }
}

/* ================= RESPONSIVE / MÓVIL (correcciones) ================= */
html, body { overflow-x: hidden !important; max-width: 100%; }
img, svg, video { max-width: 100%; }

@media (max-width: 768px) {
  /* Anti-desborde general */
  .container { padding-left: 1rem !important; padding-right: 1rem !important; max-width: 100% !important; }

  /* HERO: que fluya (sin forzar 100vh) y sin desbordes laterales */
  .hero { min-height: auto !important; padding: 96px 0 56px !important; }
  .hero .carousel-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  .hero .slide-content { max-width: 100% !important; padding-left: 1rem !important; padding-right: 1rem !important; gap: 1.1rem !important; }
  .hero .slide-text { max-width: 100% !important; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.6rem) !important; line-height: 1.12 !important; }
  .hero .hero-desc { font-size: .98rem !important; margin-top: 1rem !important; }
  .hero .hero-features { margin-top: 1.3rem !important; }
  .hero .hero-actions { flex-direction: column !important; width: 100%; max-width: 320px; margin: 1.6rem auto 0 !important; }
  .hero .hero-actions a { width: 100% !important; justify-content: center; }
  .by-hero-logos { width: 100%; }
  .by-hero-logos-bar { width: 100% !important; }

  /* Títulos de sección no muy grandes */
  h1 { font-size: clamp(1.85rem, 8vw, 2.6rem) !important; }
  h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: clamp(1.7rem, 9vw, 2.2rem) !important; }
  .by-marquee-track img { height: 30px; margin: 0 1.1rem; }
}