/* ZyvexWeby — sistema base (nav, footer, botones, utilidades) */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* === Nueva Paleta: Cian Eléctrico + Azul Marino + Naranja Cálido === */
  --primary: #06b6d4;
  --primary-dim: #0891b2;
  --secondary: #38bdf8;
  --accent: #2dd4bf;
  --dark: #040d14;
  --dark-light: #071525;
  --surface: rgba(6, 182, 212, 0.06);
  --text: #f0f4ff;
  --text-gray: #8b9ab8;
  --border: rgba(6, 182, 212, 0.18);
  --border-glow: rgba(6, 182, 212, 0.28);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-glow: 0 20px 50px rgba(6, 182, 212, 0.14);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  background: var(--dark);
  background-image:
    radial-gradient(ellipse 110% 70% at 60% -20%, rgba(6, 182, 212, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 80%, rgba(45, 212, 191, 0.05), transparent 45%);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
  min-height: 100vh;
}

/* ===================== SKIP LINK ===================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--dark-light);
  color: var(--text);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ===================== NAV ===================== */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(4, 13, 20, 0.88);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 1.1rem 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  transition: padding 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

nav.scrolled {
  padding: 0.8rem 7%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.logo-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  gap: 0;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  box-shadow: 0 6px 22px rgba(6, 182, 212, 0.4);
  margin-right: 11px;
  flex-shrink: 0;
}

.logo-text {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex;
  gap: clamp(0.8rem, 1.8vw, 1.8rem);
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: var(--text-gray);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.25s;
  position: relative;
  white-space: nowrap;
  padding: 4px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  transition: width 0.3s var(--ease-out);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* ===================== NAV DESPLEGABLE ===================== */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.nav-caret {
  font-size: 0.65em;
  transition: transform 0.25s var(--ease-out);
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

/* Puente invisible para no perder el hover en el hueco toggle→menú */
.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 265px;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: rgba(7, 21, 37, 0.98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
  z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: rgba(45, 212, 191, 0.1); color: var(--text); }

.nav-dropdown-heading {
  padding: 9px 12px 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
}

.nav-dropdown-menu > .nav-dropdown-heading:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 7px;
  z-index: 1001;
}

.menu-toggle span {
  width: 25px;
  height: 2.5px;
  background: var(--text);
  border-radius: 3px;
  transition: 0.3s var(--ease-out);
  transform-origin: center;
}

.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* ===================== BOTONES ===================== */
.btn {
  padding: 13px 30px;
  font-size: 0.93rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 10px 30px rgba(6, 182, 212, 0.35);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(6, 182, 212, 0.48);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-glow);
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(6, 182, 212, 0.07);
}

/* ===================== SCROLL REVEAL ===================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-child {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal-child.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== HOVER TILT ===================== */
.hover-tilt {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.hover-tilt:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(6, 182, 212, 0.16);
}

/* ===================== WHATSAPP FLOTANTE ===================== */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
}

.whatsapp-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #25d366, #1db954);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.35);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
  animation: zw-pulse 3s ease-in-out infinite;
}

.whatsapp-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 44px rgba(37, 211, 102, 0.5);
  animation: none;
}

.whatsapp-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.whatsapp-text { display: inline; }

@keyframes zw-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ===================== BACK TO TOP ===================== */
#toTop {
  position: fixed;
  top: 88px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.38);
  z-index: 1002;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  font-size: 13px;
  font-weight: 800;
}

#toTop.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===================== FOOTER ===================== */
footer {
  background: var(--dark-light);
}

.site-footer {
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--primary),
    var(--accent),
    transparent
  );
  opacity: 0.6;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-width: 1200px;
  padding: 4px 7% 10px;
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.footer-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.footer-title {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}

.footer-text {
  color: var(--text-gray);
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.site-footer p { margin: 0; }

.footer-col h4 {
  font-size: 0.88rem;
  margin: 0 0 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 7px;
}

.footer-links a {
  color: var(--text-gray);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s, padding-left 0.2s;
}

.footer-links a:hover {
  color: var(--primary);
  padding-left: 4px;
}

.footer-contact {
  display: grid;
  gap: 7px;
}

.footer-contact div {
  color: var(--text-gray);
  font-size: 0.88rem;
  line-height: 1.5;
}

.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
  margin: 6px 0 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 7% 14px;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--text-gray);
  font-size: 0.85rem;
}

.footer-bottom a {
  color: var(--text-gray);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom a:hover { color: var(--primary); }

.footer-inline-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-socials {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  text-decoration: none;
  color: var(--text-gray);
  transition: transform 0.2s, color 0.2s;
}

.footer-socials a:hover {
  transform: translateY(-2px);
  color: var(--primary);
}

.footer-socials svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

.footer-gradient {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

/* ===================== FOCUS ===================== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1400px) {
  nav { padding: 1rem 5%; }
  nav.scrolled { padding: 0.75rem 5%; }
}

@media (max-width: 1024px) {
  /* FIX: iOS Safari IntersectionObserver bug — no calcula correctamente
     la intersección cuando el elemento tiene transform aplicado.
     En móvil el contenido siempre debe ser visible; las animaciones son
     un extra de desktop. */
  .scroll-reveal,
  .reveal-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    /* Fondo SÓLIDO (sin backdrop-filter): el blur en móvil causa que el
       submenú de Servicios no se repinte al abrir y se vea cortado. */
    background: #081826;
    flex-direction: column;
    padding: 1rem 1.5rem 1.5rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--border);
    gap: 0;
    z-index: 999;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.active { display: flex; }

  /* Con el menú abierto, quitar el blur de la barra: evita el bug de
     repintado en móvil (el submenú de Servicios se cortaba al abrir). */
  #navbar:has(.nav-links.active) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-links li { width: 100%; }

  .nav-links a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    color: var(--text);
  }

  .nav-links a::after { display: none; }

  .nav-links li:last-child a { border-bottom: none; }

  /* Desplegable en móvil: acordeón (toca "Servicios" para abrir/cerrar) */
  .nav-dropdown::after { display: none; }

  .nav-dropdown { border-bottom: 1px solid var(--border); }

  .nav-links .nav-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 2px 14px 0;
    border-bottom: none;
    font-size: 1rem;
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.2s var(--ease-out);
  }

  .nav-dropdown.open > .nav-dropdown-toggle { color: var(--primary); }

  .nav-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0.72em;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.1);
    color: var(--primary);
    transition: transform 0.3s var(--ease-out), background 0.2s var(--ease-out);
  }

  /* La flecha solo rota al abrir (se anula el rotate por hover del desktop) */
  .nav-dropdown:hover .nav-caret,
  .nav-dropdown:focus-within .nav-caret { transform: none; }

  /* CLAVE DEL BUG: en escritorio el submenú se centra con
     transform: translateX(-50%) al hacer hover/focus. En móvil, al TOCAR
     "Servicios" se activa :focus-within y ese transform desplazaba el
     submenú a la izquierda, cortándolo. Aquí lo anulamos (mayor
     especificidad que la regla de escritorio) para que quede alineado. */
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu { transform: none; }

  .nav-dropdown.open .nav-caret {
    transform: rotate(180deg);
    background: rgba(45, 212, 191, 0.2);
  }

  .nav-dropdown-menu {
    position: static;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    margin: 0 0 4px;
    padding: 2px 0 2px 16px;
    background: transparent;
    border: none;
    border-left: 2px solid rgba(45, 212, 191, 0.28);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.34s var(--ease-out), opacity 0.28s var(--ease-out), margin 0.34s var(--ease-out);
  }

  .nav-dropdown.open .nav-dropdown-menu {
    max-height: 520px;
    opacity: 1;
  }

  .nav-dropdown-menu a {
    padding: 11px 0;
    font-size: 0.95rem;
    color: var(--text-gray);
    border-bottom: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
  }

  .nav-dropdown-menu a:active { color: var(--primary); padding-left: 4px; }

  .nav-dropdown-heading {
    padding: 12px 0 2px;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
  }

  .nav-dropdown-menu > .nav-dropdown-heading:first-child { padding-top: 4px; }

  .nav-dropdown-menu > .nav-dropdown-heading:not(:first-child) {
    margin-top: 0;
    border-top: none;
    padding-top: 14px;
  }

  .menu-toggle { display: flex; }

  .footer-contact div { white-space: normal; }
}

@media (max-width: 768px) {
  .whatsapp-text { display: none !important; }

  .whatsapp-btn {
    padding: 14px;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    justify-content: center;
  }

  .whatsapp-float {
    bottom: 20px;
    right: 18px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  nav {
    padding: 0.8rem 4%;
  }

  nav.scrolled {
    padding: 0.65rem 4%;
  }

  .logo-icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }

  .logo-text {
    font-size: 1.15rem;
  }

  .whatsapp-float {
    bottom: 16px;
    right: 14px;
  }

  .whatsapp-btn {
    width: 48px;
    height: 48px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 4px 4% 10px;
  }

  .footer-bottom {
    padding: 8px 4% 14px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* Nota: el override global de prefers-reduced-motion se removió porque mataba
   animaciones decorativas (typing del hero, snippets de "sobre mí", etc.) que
   son visuales clave del sitio. Si en el futuro se quiere respetar la
   preferencia del SO, hacerlo selectivamente por componente, no con `*`. */

/* =========================================================
   COOKIE CONSENT BANNER
   ========================================================= */
#cookieBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--dark-light);
  border-top: 1px solid var(--border-glow);
  padding: 16px 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(100%);
  animation: cookieSlideUp 0.4s ease forwards;
  animation-delay: 1s;
}

@keyframes cookieSlideUp {
  to { transform: translateY(0); }
}

#cookieBanner.hiding {
  animation: cookieSlideDown 0.35s ease forwards;
}

@keyframes cookieSlideDown {
  to { transform: translateY(100%); }
}

.cookie-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.cookie-text span { font-size: 1.1em; }

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}

.cookie-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.cookie-btn-accept {
  background: var(--primary);
  color: #fff;
}

.cookie-btn-essential {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

@media (max-width: 480px) {
  #cookieBanner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 5% 20px;
    gap: 14px;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-btn {
    flex: 1;
    text-align: center;
  }
}

/* ── Botones globales (disponibles en todas las páginas) ──────────────────── */
.btn-footer {
  padding: 10px 18px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
  font-size: 0.88rem;
  font-family: inherit;
}
.btn-footer-primary {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  box-shadow: 0 8px 26px rgba(6, 182, 212, 0.25);
}
.btn-footer-primary:hover {
  box-shadow: 0 12px 34px rgba(6, 182, 212, 0.35);
  transform: translateY(-2px);
}
.btn-footer-secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-glow);
}
.btn-footer-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

/* ── Section-tag con emoji (mayor padding vertical) ──────────────────────── */
.start-section .section-tag {
  padding: 7px 16px;
  line-height: 1.6;
}

/* ── Indicador de disponibilidad ──────────────────────────────────────────── */
.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82em;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
  will-change: transform;
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(0.45); }
}

/* ── Sección garantía (servicios.html) ────────────────────────────────────── */
.guarantee-section {
  padding: 60px 8%;
  background: var(--dark);
}
.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.guarantee-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.guarantee-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: 0 8px 28px rgba(6, 182, 212, 0.12);
}
.guarantee-icon {
  font-size: 2em;
  margin-bottom: 10px;
}
.guarantee-card h3 {
  font-size: 1em;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.guarantee-card p {
  font-size: 0.88em;
  color: var(--text-gray);
  margin: 0;
  line-height: 1.5;
}

/* ── Filtros de proyectos (proyectos.html) ────────────────────────────────── */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 20px 0 28px;
}
.proj-filter-btn {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-gray);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.proj-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.proj-filter-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-color: var(--primary);
  color: #fff;
}

/* ── Sección "Empieza hoy" (pagos.html) ───────────────────────────────────── */
.start-section {
  padding: 100px 8% 60px;
  background: var(--dark-light);
}
.start-steps {
  max-width: 700px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.start-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.start-num {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1em;
  margin-top: 2px;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.35);
}
.start-step h3 {
  margin: 0 0 4px;
  font-size: 1em;
  font-weight: 700;
  color: var(--text);
}
.start-step p {
  margin: 0;
  font-size: 0.9em;
  color: var(--text-gray);
  line-height: 1.5;
}
.start-step a {
  color: var(--primary);
  text-decoration: underline;
}

@media (max-width: 768px) {
  /* Garantía */
  .guarantee-grid { grid-template-columns: 1fr; }
  .guarantee-section { padding: 48px 5%; }

  /* "Empieza hoy" — mantener espacio para el nav fijo */
  .start-section { padding: 90px 5% 48px; }
  .start-section .section-tag { padding: 7px 14px; font-size: 0.68rem; }

  /* Filtros de proyectos — menos padding en botones */
  .proj-filter-btn { padding: 6px 13px; font-size: 0.8em; }

  /* Botones CTA en "Empieza hoy" — ancho completo en móvil */
  .start-section .btn-footer { width: 100%; justify-content: center; }
  .start-section > div[style] { flex-direction: column; align-items: stretch; }

  /* Badge de disponibilidad — texto más corto no desborda */
  .avail-badge { font-size: 0.76em; padding: 5px 11px; }
}

@media (max-width: 480px) {
  .start-section { padding: 82px 4% 40px; }
  .guarantee-section { padding: 40px 4%; }
  .project-filters { gap: 6px; }
  .proj-filter-btn { padding: 5px 11px; font-size: 0.76em; }
  .start-num { width: 32px; height: 32px; min-width: 32px; font-size: 0.9em; }
  .start-step { gap: 12px; }
}

/* =====================================================================
   EFECTOS VISUALES — cursor, progress, typing, loader, particles,
   glassmorphism, gradient border, wave dividers
   ===================================================================== */

/* ── Custom Cursor ───────────────────────────────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  will-change: transform;
  transition: opacity 0.3s;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(6, 182, 212, 0.55);
  background: rgba(6, 182, 212, 0.06);
  transition: width 0.2s, height 0.2s, border-color 0.2s, opacity 0.3s;
}
.cursor-ring.cursor-hover {
  width: 52px;
  height: 52px;
  border-color: rgba(6, 182, 212, 0.9);
  background: rgba(6, 182, 212, 0.12);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ── Scroll Progress Bar ─────────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

/* ── Typing Animation ────────────────────────────────────────────────── */
.hero-typing-line {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-gray);
  margin: -6px 0 14px;
  min-height: 1.4em;
}
.hero-typing {
  color: var(--primary);
  font-weight: 700;
}
.hero-typing::after {
  content: "|";
  color: var(--primary);
  animation: type-blink 0.75s step-end infinite;
  margin-left: 1px;
}
@keyframes type-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Loading Screen ──────────────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--dark);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-loader.loader-out {
  opacity: 0;
  visibility: hidden;
}
.loader-logo {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 2.2rem;
  color: #fff;
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.5);
  animation: loader-pulse 1.2s ease-in-out infinite;
}
.loader-bar {
  width: 140px;
  height: 3px;
  background: rgba(6, 182, 212, 0.15);
  border-radius: 3px;
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 3px;
  animation: loader-fill 1.2s ease-in-out forwards;
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(6, 182, 212, 0.5); }
  50%       { transform: scale(1.08); box-shadow: 0 0 60px rgba(6, 182, 212, 0.75); }
}
@keyframes loader-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── Particles Canvas ────────────────────────────────────────────────── */
#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  isolation: isolate;
}
@media (max-width: 768px) {
  #hero-particles { display: none; }
}

/* ── Glassmorphism — Package Cards ───────────────────────────────────── */
.package-card {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(6, 182, 212, 0.05) !important;
  border: 1px solid rgba(6, 182, 212, 0.16);
  position: relative;
  overflow: hidden;
}
.package-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.4), transparent);
}

/* ── Animated Gradient Border — Featured Package ─────────────────────── */
.package-card.featured {
  background: rgba(6, 182, 212, 0.07) !important;
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.package-card.featured::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg, var(--primary), var(--accent), var(--secondary), var(--primary));
  background-size: 300% 300%;
  animation: grad-border 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
@keyframes grad-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Wave Section Dividers ───────────────────────────────────────────── */
.wave-divider {
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.wave-divider svg {
  display: block;
  width: 100%;
}
.wave-divider.wave-down { transform: rotate(180deg); }

/* ===================== BOTÓN CAMBIO DE TEMA ===================== */
.theme-toggle {
  position: fixed;
  left: 24px;
  bottom: 28px;
  z-index: 9998;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-glow);
  background: var(--dark-light);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
}
.theme-toggle:hover {
  transform: translateY(-3px) scale(1.05);
  color: var(--primary);
  border-color: var(--primary);
}
@media (max-width: 768px) {
  .theme-toggle { width: 44px; height: 44px; font-size: 1.15rem; left: 16px; bottom: 20px; }
}

/* ===================== MODO CLARO (toggle claro/oscuro) ===================== */
html.light-mode {
  --primary: #0891b2;
  --primary-dim: #0e7490;
  --secondary: #0284c7;
  --accent: #14b8a6;
  --dark: #eef2f7;
  --dark-light: #ffffff;
  --surface: rgba(6, 182, 212, 0.07);
  --text: #0f1b2d;
  --text-gray: #55617a;
  --border: rgba(15, 27, 45, 0.12);
  --border-glow: rgba(8, 145, 178, 0.35);
  --shadow-glow: 0 20px 50px rgba(15, 40, 80, 0.10);
}
html.light-mode body {
  background: #eef2f7;
  background-image:
    radial-gradient(ellipse 110% 70% at 60% -20%, rgba(6, 182, 212, 0.10), transparent 55%),
    radial-gradient(ellipse 70% 50% at 0% 80%, rgba(45, 212, 191, 0.05), transparent 45%);
  color: var(--text);
}
html.light-mode nav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border);
}
html.light-mode nav.scrolled {
  box-shadow: 0 8px 30px rgba(15, 40, 80, 0.10);
}
html.light-mode .nav-links a { color: var(--text-gray); }
html.light-mode .nav-links a:hover,
html.light-mode .nav-links a.active { color: var(--text); }
html.light-mode .nav-dropdown-menu { background: rgba(255, 255, 255, 0.98); border-color: rgba(0, 0, 0, 0.08); }
html.light-mode .nav-dropdown-menu a { color: var(--text-gray); }
html.light-mode .nav-dropdown-menu a:hover { background: rgba(45, 212, 191, 0.12); color: var(--text); }
@media (max-width: 768px) {
  html.light-mode .nav-links {
    background: #ffffff;
    border-top: 1px solid var(--border);
  }
}
html.light-mode .theme-toggle { box-shadow: 0 8px 24px rgba(15, 40, 80, 0.14); }