html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, .font-display { font-family: 'Space Grotesk', sans-serif; }

#inicio p.max-w-3xl {
  max-width: 58rem;
  text-align: justify;
}

@media (min-width: 768px) {
  .md\:pb-28 {
    padding-bottom: 21rem;
  }
}

#servicios .mb-16 {
  margin-bottom: 2rem;
}

#site-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#site-header.header-solid {
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(9, 70, 123, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Transparent state: logo/menu/lang-switcher render in white over the hero photo. */
#site-header .logo-solid { display: none; }
#site-header.header-solid .logo-solid { display: inline-block; }
#site-header.header-solid .logo-transparent { display: none; }

/* Fixed box so the two logo files (different source aspect ratios) render at the same visual
   size instead of jumping when header-solid swaps logo_blanco.png for cablesoft-logo.png. */
.logo-box { height: 1.5rem; width: 9rem; }
@media (min-width: 768px) {
  .logo-box { height: 1.75rem; width: 10.5rem; }
}

#site-header nav > ul > li > a,
#site-header #menu-toggle,
#site-header #lang-switcher-btn {
  color: #ffffff;
  transition: color .25s ease;
}
#site-header nav > ul > li > a:hover { color: #b3d4ff; }
#site-header #lang-switcher-btn:hover { background-color: rgba(255, 255, 255, 0.12); }

#site-header.header-solid nav > ul > li > a { color: #080d17; }
#site-header.header-solid nav > ul > li > a:hover { color: #125ecf; }
#site-header.header-solid #menu-toggle { color: #0a2c63; }
#site-header.header-solid #lang-switcher-btn {
  color: #09467b;
}
#site-header.header-solid #lang-switcher-btn:hover { background-color: #eef6ff; }

/* Hardcoded (not Tailwind-custom-color-dependent) so these critical CTAs always render visibly */
.btn-solid {
  background-color: #09467b;
  color: #ffffff;
}
.btn-solid:hover { background-color: #0f4aa8; }

.toggle-switch { appearance: none; width: 44px; height: 24px; border-radius: 9999px; background: #b3d4ff; position: relative; cursor: pointer; transition: background .2s; }
.toggle-switch:checked { background: #125ecf; }
.toggle-switch::before { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:9999px; background:#fff; transition: transform .2s; }
.toggle-switch:checked::before { transform: translateX(20px); }
.toggle-switch:disabled { opacity: .6; cursor: not-allowed; }

html { scrollbar-color: #125ecf #dbebff; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #dbebff; }
::-webkit-scrollbar-thumb { background: #125ecf; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #0f4aa8; }

.w-7 { width: 2.8rem !important; }
.h-7 { height: 2.8rem !important; }

.hero-bg-image {
  /* The source photo is a warm gold/copper hex-mesh; the solid layer below recolors it to the
     site's signal-900 blue (same as #cookie-banner's bg-signal-900) via a "color" blend, so only
     the two vignette gradients above it need normal blending for text legibility. */
  background-image:
    radial-gradient(ellipse at center, rgba(10, 44, 99, 0.5) 0%, rgba(10, 44, 99, 0.25) 55%, rgba(10, 44, 99, 0.68) 100%),
    linear-gradient(180deg, rgba(10, 44, 99, 0.55) 0%, rgba(10, 44, 99, 0.35) 40%, rgba(10, 44, 99, 0.78) 100%),
    linear-gradient(rgba(10, 44, 99, 0.92), rgba(10, 44, 99, 0.92)),
    url('../img/BackgroundCable.jpg');
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, normal, color, normal;
}

.contact-bg-image {
  background-image:
    linear-gradient(180deg, rgba(6, 12, 26, 0.35) 0%, rgba(6, 12, 26, 0.15) 30%, rgba(6, 12, 26, 0.45) 100%),
    url('../img/contacto.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.services-bg-image {
  background-image:
    linear-gradient(rgba(6, 12, 26, 0.72), rgba(6, 12, 26, 0.72)),
    url('../img/hero-photo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Scoped under .js (set by the inline script in <head>) so content stays visible by default when
   JavaScript is blocked, slow, or fails — only animate the reveal when JS actually runs. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  background: transparent;
}

.text-white\/60 {
  color: white !important;
}

.text-white\/80 {
  color: rgb(255 255 255 / 1.8) !important;
  font-weight: 900 !important;
}

.text-sm {
  font-size: 1rem !important;
  line-height: 1.25rem !important;
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(4px) !important;
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 1.1), 0 8px 10px 1px rgb(0 0 0 / 0.1) !important;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-anim > * {
  opacity: 0;
  animation: heroIn .7s ease forwards;
}
.hero-anim > *:nth-child(1) { animation-delay: .05s; }
.hero-anim > *:nth-child(2) { animation-delay: .18s; }
.hero-anim > *:nth-child(3) { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
  .hero-anim > * { animation: none; opacity: 1; }
}

.phone-wave-ring {
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  animation: phoneWave 1.8s ease-out infinite;
}
.phone-wave-ring-delay { animation-delay: .6s; }
@keyframes phoneWave {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-wave-ring { animation: none; opacity: 0; }
}

/* ===== Service cards: whole card is clickable (external PBX link, or pre-fills + scrolls to contact) ===== */
.service-card { cursor: pointer; transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease; }
.service-card:hover { box-shadow: 0 20px 35px -15px rgba(0, 0, 0, 0.45); transform: translateY(-2px); }
.service-card:focus-visible { outline: 2px solid #1c78f0; outline-offset: 3px; }
/* Higher specificity than .reveal.is-visible so the cards keep a background over the dark photo.
   Light frosted glass (not dark navy) so the card reads as a distinct pane against the blue photo
   instead of blending into it. */
.reveal.service-card.is-visible {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.55);
}
.reveal.service-card.is-visible:hover {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }