:root {
    --rtc-primary: #003366; /* Azul oscuro */
    --rtc-accent:  #00A86B; /* Verde */
    --rtc-light:   #f5f8ff;
    --rtc-dark:    #0b1420;
  }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    color: #1b1f23;
  }
  
  /* Navbar */
  .navbar { box-shadow: 0 6px 24px rgba(0,0,0,.06); }
  .navbar-brand { font-weight: 800; letter-spacing: .4px; }
  
  /* Botón acento (base) */
  .btn-accent {
    background: var(--rtc-accent);
    border-color: var(--rtc-accent);
    color:#fff;
  }
  
  /* Hero */
  .hero {
    position: relative;
    background: linear-gradient(135deg, rgba(0,51,102,.92), rgba(0,51,102,.75)), url('img/hero-instalacion.jpg') center/cover no-repeat;
    color: #fff;
    min-height: 88vh;
    display: grid; place-items: center;
  }
  .hero h1 { font-weight: 800; line-height: 1.05; }
  .hero p.lead { color: #e6eef8; }
  .hero .cta-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px;
  }
  
  /* Títulos de sección */
  .section-title { font-weight: 800; letter-spacing: .3px; }
  .title-underline { width: 72px; height: 4px; background: var(--rtc-accent); border-radius: 999px; }
  
  /* Cards */
  .service-card { transition: transform .25s ease, box-shadow .25s ease; border: 1px solid #edf1f7; }
  .service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
  
  /* Listas de feature */
  .feature { display: flex; gap: 12px; align-items: flex-start; }
  .feature i { color: var(--rtc-accent); font-size: 1.2rem; margin-top: 3px; }
  
  /* Contacto */
  .contact-section { background: linear-gradient(180deg, var(--rtc-light), #fff); }
  
  /* Footer */
  footer { background: var(--rtc-dark); color: #aab3c0; }
  footer a { color: #d9e2ef; text-decoration: none; }
  footer a:hover { color: #fff; text-decoration: underline; }
  
  /* WhatsApp flotante */
  .floating-wa {
    position: fixed; right: 18px; bottom: 18px; z-index: 1030;
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; background: #25D366; color:#fff;
    box-shadow: 0 10px 24px rgba(37,211,102,.45);
  }
  .floating-wa:hover { filter: brightness(.95); color:#fff; }
  
  /* Separación entre filas */
  .row + .row { margin-top: 2rem; }
  @media (min-width: 992px){
    .row + .row { margin-top: 3rem; }
  }
  
  /* Divisor */
  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e6edf5, #cfd8e3, #e6edf5, transparent);
  }
  
  /* Cajas de add-on */
  .addon-box{
    border:1.5px solid #cfe0ff;
    border-radius:16px;
    padding:14px;
    background:#f7fbff; /* opcional */
  }
  
  /* Sección contacto – estilo espectacular */
  #contacto.contact-hero{
    background: linear-gradient(135deg, #003366 0%, #00519f 45%, #00A86B 100%);
    position: relative; overflow: hidden;
  }
  #contacto .glass{
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.14);
  }
  #contacto .section-kicker{
    display: inline-flex; gap: 8px; align-items: center;
    padding: .35rem .7rem; border-radius: 999px;
    background: rgba(255,255,255,.65); color: #0b1420;
    font-weight: 600; font-size: .85rem;
  }
  #contacto .input-icon .input-group-text{ background: transparent; border-right: 0; }
  #contacto .input-icon .form-control,
  #contacto .input-icon .form-select{ border-left: 0; }
  #contacto .form-control:focus, #contacto .form-select:focus{
    box-shadow: 0 0 0 .25rem rgba(0,168,107,.15); border-color: #00A86B;
  }
  #contacto .btn-wa-ghost{ border:1px solid #25D366; color:#25D366; background:transparent; }
  #contacto .btn-wa-ghost:hover{ background:#25D366; color:#fff; }
  #contacto .subtle{ color:#6b7786; }
  
  /* Carrusel del hero */
  .hero-carousel .carousel-item img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:16px;
  }
  @media (min-width: 992px){
    .hero-carousel .carousel-item img{ height:320px; }
  }
  
  /* ===========================
     Animaciones (activadas solo si JS corre)
     =========================== */
  .reveal-enabled .reveal-up,
  .reveal-enabled .reveal-left,
  .reveal-enabled .reveal-right,
  .reveal-enabled .reveal-zoom { 
    opacity: 0; will-change: transform, opacity;
  }
  .reveal-enabled .reveal-up   { transform: translateY(24px) scale(.98); }
  .reveal-enabled .reveal-left { transform: translateX(-28px); }
  .reveal-enabled .reveal-right{ transform: translateX(28px); }
  .reveal-enabled .reveal-zoom { transform: scale(.96); }
  .reveal-enabled .is-visible  {
    opacity: 1; transform: none;
    transition: transform .7s cubic-bezier(.2,.6,.2,1), opacity .7s ease;
  }
  
  /* Stagger por filas */
  .reveal-enabled .stagger > * { opacity: 0; transform: translateY(18px); }
  .reveal-enabled .stagger.is-visible > * {
    opacity: 1; transform: none;
    transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .6s ease;
  }
  .reveal-enabled .stagger.is-visible > *:nth-child(1){transition-delay:.05s}
  .reveal-enabled .stagger.is-visible > *:nth-child(2){transition-delay:.10s}
  .reveal-enabled .stagger.is-visible > *:nth-child(3){transition-delay:.15s}
  .reveal-enabled .stagger.is-visible > *:nth-child(4){transition-delay:.20s}
  .reveal-enabled .stagger.is-visible > *:nth-child(5){transition-delay:.25s}
  .reveal-enabled .stagger.is-visible > *:nth-child(6){transition-delay:.30s}
  
  /* ==== Micro-interacciones ==== */
  .btn, .cta-card, .service-card, .addon-box {
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .btn-accent:hover,
  .btn-outline-primary:hover,
  .btn-outline-success:hover,
  .btn-light:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,.08);
  }
  .btn-outline-success { border-color:#25D366; color:#25D366; }
  .btn-outline-success:hover { background:#25D366; color:#fff; }
  .cta-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
  .addon-box:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  
  /* Pulso WA flotante */
  @keyframes soft-pulse { 0%, 85% { transform: scale(1);} 90% { transform: scale(1.08);} 100% { transform: scale(1);} }
  .floating-wa { animation: soft-pulse 12s ease-in-out infinite; }
  .floating-wa:hover { animation: none; transform: translateY(-2px) scale(1.06); box-shadow: 0 14px 28px rgba(37,211,102,.5); }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
  
  /* Hover azul + texto blanco para outline/light */
  .btn-outline-light:hover,
  .btn-outline-light:focus,
  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-light:hover,
  .btn-light:focus {
    background-color: var(--rtc-primary) !important;
    border-color: var(--rtc-primary) !important;
    color: #fff !important;
  }
  .btn-outline-light:focus-visible,
  .btn-outline-primary:focus-visible,
  .btn-light:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(0,51,102,.25);
  }
  
  /* Específico del hero */
  .hero .btn-outline-light:hover,
  .hero .btn-outline-light:focus {
    background-color: var(--rtc-primary) !important;
    border-color: var(--rtc-primary) !important;
    color: #fff !important;
  }
  
  /* Hover azul para .btn-accent (unificado) */
  .btn-accent:hover,
  .btn-accent:focus,
  .btn-accent:active,
  .btn-accent.active {
    background-color: var(--rtc-primary) !important;
    border-color: var(--rtc-primary) !important;
    color: #fff !important;
    filter: none !important;
  }
  .btn-accent:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(0,51,102,.25);
  }
  .btn-accent.disabled,
  .btn-accent:disabled {
    background-color: var(--rtc-accent);
    border-color: var(--rtc-accent);
    color: #fff;
  }

  
  @media (max-width: 576px){
    .reveal-up, .reveal-left, .reveal-right, .reveal-zoom { 
      opacity: 1 !important; transform: none !important;
    }
  }

  /* Asegura que la X esté por encima de la imagen/enlace */
#promoModal .btn-close { z-index: 1065; }
/* Por si acaso, crea contexto de apilado */
#promoModal .modal-content { position: relative; background: transparent; border: 0; }
#promoModal #promoLink { position: relative; z-index: 1; display: block; }

.planes {
  font-family: Arial, sans-serif;
  margin: 30px auto;
  max-width: 900px;
}

.tabla-planes {
  display: flex;
  flex-direction: column;
  border: 2px solid #ddd;
}

.fila {
  display: flex;
}

.celda {
  flex: 1;
  padding: 15px;
  text-align: center;
  border: 1px solid #ddd;
}

.encabezado .celda.plan {
  background-color: #5a4d35;
  color: white;
  font-weight: bold;
}

.titulo {
  background-color: #f1b82d;
  font-weight: bold;
}

.tachado {
  text-decoration: line-through;
  color: gray;
}

.precio {
  font-size: 1.5rem;
  font-weight: bold;
}

@media (max-width: 768px) {
  .fila {
    flex-direction: column;
  }
}


/* Título */
.titulo-principal{
  text-align:center; color:#0056b3; font-family:Arial, sans-serif; margin:16px 0 20px;
}

/* Contenedor scroll en móviles */
.tabla-planes-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabla-planes {
  display: flex;
  flex-direction: column;
  min-width: 850px; /* fuerza scroll horizontal */
}

.fila {
  display: flex;
  flex-direction: row; /* siempre horizontal */
}

/* Mantener primera columna fija si quieres */
.fila .celda:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 2;
}

/* Íconos de redes: estilos consistentes */
.rs i{ font-size:1.5rem; margin:0 5px; vertical-align:middle; }
.rs .fa-whatsapp{ color:#25D366; }
.rs .fa-telegram{ color:#0088cc; }
.rs .fa-facebook{ color:#1877F2; }
.rs .fa-facebook-messenger{ color:#006AFF; }
.rs .fa-instagram{ color:#E4405F; }
.rs .fa-snapchat{ color:#FFFC00; }
.rs .xlogo{ width:20px; height:20px; margin:0 5px; vertical-align:middle; }

/* Botón contratar */
.btn-contratar{
  display:inline-block; padding:10px 16px; background:#25D366; color:#fff; font-weight:700;
  text-decoration:none; border-radius:8px; transition:background .2s, transform .1s;
}
.btn-contratar:hover{ background:#1ebe5d; transform:translateY(-1px); }

/* Ajustes en pantallas pequeñas */
@media (max-width: 768px) {
  .tabla-planes { min-width: 720px; }
  .celda { padding: 10px; font-size: 0.9rem; }
  .precio { font-size: 1.2rem; }
}