:root {
  --brand-primary: #32005A;
  --brand-primary-dark: #260044;
  --brand-accent: #FF2B50;
  --brand-accent-dark: #e01f3f;
  --white: #FFFFFF;
  --bg: #FBF9FD;
  --muted: #F3EEF8;
  --text: #222229;
  --card-shadow: 0 12px 36px rgba(50, 0, 90, 0.06);
  --brand-gradient: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
}

.container { max-width: 1500px; margin: 0 auto; padding: 0 20px; }

/* Navbar - personalizado: fondo blanco, links en brand-primary, hover en brand-accent */
.navbar {
  background: var(--white) !important;
  box-shadow: 0 6px 20px rgba(50,0,90,0.04);
  border-bottom: 1px solid rgba(50,0,90,0.06);
}
.navbar .navbar-brand { color: var(--brand-primary); font-weight: 800; font-size: 1.35rem; }
.navbar .nav-link {
  color: var(--brand-primary);
  font-weight: 600;
  font-size: 1.25rem; /* más grande */
  padding: 0.75rem 1.1rem; /* aumentar click/tap area */
}

/* Más espacio entre items del nav */
.navbar-nav .nav-item { margin-left: 0.5rem; }

/* Ajustes para pantallas pequeñas: mantener legible pero más compacto */
@media (max-width: 576px) {
  .navbar .nav-link { font-size: 1rem; padding: 0.5rem 0.6rem; }
  .navbar .navbar-brand { font-size: 1.1rem; }
  .navbar-nav .nav-item { margin-left: 0.25rem; }
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--brand-accent); text-decoration:none; }
.navbar .nav-link.active { color: var(--brand-primary); }

/* Si la etiqueta del nav sigue usando .navbar-dark, forzamos un icono toggler oscuro */
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%2332005A' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Banner principal */
.BannerPrincipal {
  /* Gradiente con mayor presencia de brand-primary (#32005A) */
  background: linear-gradient(90deg, var(--brand-primary) 72%, var(--brand-accent) 100%);
  color: var(--white);
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: 56px 0;
}

/* Mantener posición/overflow en CSS en vez de inline */
.BannerPrincipal { position: relative; overflow: hidden; }

/* Logo sizing moved from inline to CSS */
.site-logo {
  border: 4px solid #FF2B50; /* borde más grueso */
  border-radius: 16px;
  box-sizing: border-box;
  display: inline-block;
  padding: 14px; /* aumentado: más separación entre imagen y borde */
  background-clip: padding-box;
  height: 92px; /* aumentado para compensar padding */
  width: auto;
  object-fit: contain;
}

@media (max-width: 576px) {
  .site-logo {
    border-width: 4px;
    padding: 8px; /* móvil: un poco más de padding */
    height: 64px;
  }
}

/* Imagen en la sección Nosotros: un poco más grande que el logo del navbar */
.nosotros-image-box .site-logo {
  height: 140px; /* aumentado para mayor presencia */
  padding: 30px; /* más separación del borde */
  border-width: 4px;
  border-radius: 30px;
}

@media (max-width: 768px) {
  .nosotros-image-box .site-logo {
    height: 112px;
    padding: 12px;
  }
}


/* Beneficio icon injected by JS uses class .beneficio-img */
.beneficio-img { width:64px; height:64px; object-fit:contain; }

/* Sección Quiénes somos */
.Nosotros { background: linear-gradient(180deg, rgba(250,250,253,1), rgba(245,243,250,1)); }
.Nosotros h2 { color: var(--brand-primary); }
.nosotros-image-box { display:flex; align-items:center; justify-content:center; min-height:220px; }
.nosotros-image-box img { max-width:360px; object-fit:contain; }

.BannerPrincipal.hero { padding: 56px 0; }
.BannerPrincipal .hero-image-box { background: rgba(255,255,255,0.06); padding:18px; border-radius:14px; box-shadow: 0 18px 46px rgba(50,0,90,0.12); min-height:320px; display:flex; align-items:center; justify-content:center; }
.hero-company-photo { max-width:100%; max-height:360px; object-fit:cover; border-radius:10px; }
.hero-content { max-width:720px; }
.hero-title { font-size: clamp(28px, 4.4vw, 48px); margin:0 0 12px; font-weight:800; color:var(--white); }
.hero-subtitle { font-size:1.125rem; color: rgba(255,255,255,0.92); }
.BannerPrincipal .btn-light { background: #fff !important; color: var(--brand-primary) !important; font-weight:700; }
.BannerPrincipal .btn-outline-light { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.95); }
.BannerPrincipal .btn-outline-light:hover { background: rgba(255,255,255,0.08); }

/* Beneficios grid */
.Beneficios { padding: 56px 0; }
.Beneficios h2 { text-align:center; margin-bottom:28px; color:var(--brand-primary); }
.beneficios-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
.beneficio-card { background: var(--white); border-radius:12px; padding:22px; text-align:center; box-shadow: var(--card-shadow); min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.beneficio-card h5 { margin:12px 0 6px; color:var(--brand-primary); font-size:1.05rem; }
.beneficio-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(50,0,90,0.06); }
.beneficio-card p { margin:0; color:#444; font-size:0.95rem; }

/* Icono grande dentro de beneficio */
.beneficio-icon { width:72px; height:72px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:28px; background: linear-gradient(180deg, rgba(50,0,90,0.95), rgba(255,43,80,0.9)); color:#fff; box-shadow: 0 10px 30px rgba(50,0,90,0.08); margin-bottom:12px; }
.beneficio-card .beneficio-icon { background: linear-gradient(90deg, rgba(50,0,90,0.95), rgba(255,43,80,0.9)); }

/* Animaciones suaves al hacer scroll */
.animate-on-scroll { opacity: 0; transform: translateY(18px); will-change: transform, opacity; transition: opacity 760ms cubic-bezier(.2,.9,.2,1), transform 760ms cubic-bezier(.2,.9,.2,1); }
.animate-on-scroll.animate-in { opacity: 1; transform: none; }

/* Slight glow for benefit icons to look premium */
.beneficio-icon { box-shadow: 0 14px 40px rgba(50,0,90,0.12), 0 4px 18px rgba(255,43,80,0.06); }



/* Plan styles moved to css/planes.css */

/* Comentarios */
.ComentariosDestacados { padding:48px 0; }
.ComentariosDestacados h2 { color:var(--brand-primary); text-align:center; margin-bottom:20px; }
.testimonial { background: var(--white); padding:18px; border-radius:10px; box-shadow: var(--card-shadow); margin-bottom:12px; }

/* Testimonios */
.Testimonios { padding:56px 0; background: transparent; }
.Testimonios h2 { text-align:center; margin-bottom:8px; }
.testimonials-grid .testimonial-card { background: var(--white); border-radius:12px; box-shadow: var(--card-shadow); min-height:220px; display:flex; flex-direction:column; justify-content:space-between; }
.testimonial-card img { width:64px; height:64px; object-fit:cover; }
.testimonial-card p { color:#444; margin-bottom:8px; }
.testimonial-card .text-warning { font-size:0.95rem; }


/* Contacto */
.Contacto { padding:56px 0; background: linear-gradient(180deg, var(--muted), rgba(255,255,255,0)); }
.Contacto h2 { color:var(--brand-primary); text-align:center; margin-bottom:18px; }
.Contacto form { max-width:720px; margin:0 auto; background:var(--white); padding:22px; border-radius:12px; box-shadow: var(--card-shadow); }
.Contacto label { font-weight:600; color:#222; }
.Contacto .form-control { border-radius:8px; }
.Contacto .btn-primary { background: var(--brand-accent); border: none; }

/* Global primary button (use brand accent). Banner overrides this to keep white CTA on dark bg */
.btn-primary {
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-dark)) !important;
  color: var(--white) !important;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 10px 32px rgba(255,43,80,0.14);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s;
}
.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255,43,80,0.2);
  filter: brightness(1.04);
}

/* Keep Banner button inverted (white background) */
.BannerPrincipal .btn-primary { background: var(--white) !important; color: var(--brand-primary) !important; box-shadow: 0 10px 30px rgba(50,0,90,0.12); }

/* Heading accents */
h2 { color: var(--brand-primary); }

/* Price emphasis moved to css/planes.css */

/* Footer */
/* Footer (site footer) */
.site-footer { background: var(--brand-primary); color: var(--white); padding:48px 0 20px; }
.site-footer .container { max-width:1140px; }
.site-footer .footer-brand { color: var(--white); font-weight:800; font-size:1.25rem; margin-bottom:6px; }
.site-footer .text-white-80 { color: rgba(255,255,255,0.9); }
.site-footer .footer-title { color: #fff; font-weight:700; margin-bottom:8px; }
.site-footer .footer-links li, .site-footer .footer-contact li { margin-bottom:6px; }
.site-footer a { color: rgba(255,255,255,0.95); text-decoration:none; }
.site-footer a:hover { color: var(--brand-accent); text-decoration:underline; }
.footer-divider { border-color: rgba(255,255,255,0.06); margin:18px 0; }
.site-footer p { margin:0; }

/* Utilities */
.text-center { text-align:center; }

/* WhatsApp floating - keep previous styles but adapt spacing */
.whatsapp-float {
  position: fixed;
  right: 60px;
  bottom: 20px;
  width: 72px;
  height: 72px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
  z-index: 1030;
  text-decoration: none;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s;
  color: #fff;
}
.whatsapp-float:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(37, 211, 102, 0.32); }
.whatsapp-svg { display:block; width:64%; height:64%; max-width:40px; max-height:40px; }
.whatsapp-tooltip { position:absolute; right: 70px; bottom: 50%; transform: translateY(50%); background: rgba(0,0,0,0.85); color:#fff; padding:8px 12px; border-radius:6px; font-size:13px; opacity:0; pointer-events:none; transition:opacity 0.12s ease, transform 0.12s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.whatsapp-float:hover .whatsapp-tooltip, .whatsapp-float:focus .whatsapp-tooltip { opacity:1; transform: translateY(50%) translateX(-4px); pointer-events:auto; }
.whatsapp-qr { position: fixed; left:0; top:0; width:180px; height:180px; border-radius:8px; background:#fff; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,0.18); z-index:10000; display:none; transition:opacity 0.12s ease; }
.whatsapp-qr::after{ content:''; position:absolute; left:50%; transform:translateX(-50%) rotate(45deg); bottom:-8px; width:14px; height:14px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.08); }
@media (max-width:576px){ .whatsapp-float{ right:40px; } .whatsapp-qr{ display:none; } .BannerPrincipal .container{ flex-direction:column; align-items:flex-start; } }

/* Cobertura */
.Cobertura { background: transparent; }
.coverage-map { background: #e9ecef; border-radius:12px; min-height:360px; display:flex; align-items:center; justify-content:center; box-shadow: var(--card-shadow); overflow:hidden; }
.coverage-map-placeholder { color:#6c757d; font-weight:600; text-align:center; padding:12px; }
.coverage-panel { background: transparent; }
.coverage-panel h2 { color: var(--brand-primary); font-weight:800; }
.coverage-panel .text-secondary { color: #6c757d !important; }
.coverage-panel .form-control { border-radius:8px; }
.coverage-panel .btn-primary { background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-dark)); border:none; }

@media (max-width: 768px) {
  .coverage-map { min-height:240px; }
}


/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 60px; /* movido más hacia la izquierda */
  bottom: 20px;
  width: 72px;
  height: 72px;
  background-color: #25D366; /* verde WhatsApp */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
  z-index: 1030;
  text-decoration: none;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s;
}
.whatsapp-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.32);
}
.whatsapp-float svg {
  display: block;
  width: 64%;
  height: 64%;
  max-width: 44px;
  max-height: 44px;
}

/* Icono alternativo (emoji) para evitar distorsiones del SVG */
.whatsapp-svg {
  display: block;
  width: 64%;
  height: 64%;
  max-width: 40px;
  max-height: 40px;
}

.whatsapp-float { color: #fff; }

@media (max-width: 576px) {
  .whatsapp-float {
    right: 40px;
    bottom: 14px;
    width: 60px;
    height: 60px;
  }
}

/* Tooltip del botón WhatsApp */
.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  bottom: 50%;
  transform: translateY(50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.whatsapp-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(0, 0, 0, 0.85);
}
.whatsapp-float:hover .whatsapp-tooltip,
.whatsapp-float:focus .whatsapp-tooltip {
  opacity: 1;
  transform: translateY(50%) translateX(-4px);
  pointer-events: auto;
}

@media (max-width: 576px) {
  .whatsapp-tooltip { right: 62px; font-size: 12px; }
}

/* QR image shown on hover (desktop) */
.whatsapp-qr {
  position: fixed;
  /* left/top will be set dynamically by JS to appear above the button */
  left: 0;
  top: 0;
  width: 180px;
  height: 180px;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  z-index: 10000;
  display: none;
  transition: opacity 0.12s ease;
}

/* small arrow pointing to the button */
.whatsapp-qr::after{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

@media (max-width: 576px) {
  .whatsapp-qr { display: none; }
}

/* Utilities: fondo morado de marca -> texto claro y botones invertidos */
.bg-morado, .bg-brand-primary {
  background-color: var(--brand-primary) !important;
  color: var(--white) !important;
}
.bg-morado a, .bg-brand-primary a,
.bg-morado p, .bg-brand-primary p,
.bg-morado h1, .bg-brand-primary h1,
.bg-morado h2, .bg-brand-primary h2,
.bg-morado h3, .bg-brand-primary h3,
.bg-morado li, .bg-brand-primary li,
.bg-morado span, .bg-brand-primary span {
  color: var(--white) !important;
}
.bg-morado svg, .bg-brand-primary svg { fill: var(--white) !important; color: var(--white) !important; }

/* Invertir botones dentro de fondo morado para mantener contraste */
.bg-morado .btn-primary, .bg-brand-primary .btn-primary {
  background: var(--white) !important;
  color: var(--brand-primary) !important;
  box-shadow: none !important;
}
.bg-morado .btn-outline-light, .bg-brand-primary .btn-outline-light {
  border-color: rgba(255,255,255,0.18) !important;
  color: var(--white) !important;
}

/* Ensure links show subtle accent on hover while remaining white by default */
.bg-morado a:hover, .bg-brand-primary a:hover { color: var(--brand-accent) !important; }

/* Layout: Sticky footer using flexbox */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

/* Nota: Se añadió solo el layout flex para asegurar que el footer quede siempre al final.
   Las reglas anteriores sobre .Cobertura ya existen más arriba; no las duplicamos aquí. */

/* ==========================
   Mejoras de diseño: amplitud, animaciones, overlay fibra
   ========================== */

/* Más amplitud general */
.container.wide { max-width: 1400px; padding: 0 32px; }

/* Secciones más amplias y aireadas */
section { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 768px) { section { padding-top: 36px; padding-bottom: 36px; } }

/* Banner overlay y animación de fondo (efecto movimiento sutil tipo fibra) */
.BannerPrincipal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 8px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%23ffffff' stop-opacity='0.9'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0.25'/></linearGradient></defs><path d='M0 100 C200 0 400 200 800 100' stroke='url(%23g)' stroke-width='2' fill='none'/><path d='M0 180 C200 80 400 280 800 180' stroke='url(%23g)' stroke-width='2' fill='none'/><path d='M0 260 C200 160 400 360 800 260' stroke='url(%23g)' stroke-width='2' fill='none'/></svg>");
  background-size: auto 120%, 1800px 900px;
  background-position: 0 0, 0 0;
  /* Animación más rápida y con mayor desplazamiento para sensación de movimiento */
  animation: moveBG 12s linear infinite;
}

@keyframes moveBG {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 900px 600px, 1600px 900px; }
}

/* Decorative floating fiber element (usado en index.php) */
.banner-fiber {
  position: absolute;
  right: -6%;
  top: 6%;
  width: 46%;
  height: 88%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'><defs><linearGradient id='lg' x1='0' x2='1'><stop offset='0' stop-color='%23ffffff' stop-opacity='0.9'/><stop offset='1' stop-color='%23ffffff' stop-opacity='0.15'/></linearGradient></defs><g fill='none' stroke='url(%23lg)' stroke-width='2'><path d='M0 100 C200 0 400 200 800 100'/><path d='M0 250 C200 150 400 350 800 250'/><path d='M0 400 C200 300 400 500 800 400'/><path d='M0 550 C200 450 400 650 800 550'/></g></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.18;
  filter: blur(0.6px) saturate(1.05);
  transform: translateY(0);
  z-index: 0;
  pointer-events: none;
  /* aumentar velocidad y amplitud del float para más movimiento */
  animation: floatFiber 6s ease-in-out infinite;
}

/* Canvas que dibuja nodos y conexiones animadas */
.banner-canvas {
  position: absolute;
  inset: 0; /* cubrir todo el banner */
  width: 100%;
  height: 100%;
  z-index: 1; /* sobre overlay de fibra (z-index 0) pero detrás del contenido */
  pointer-events: none;
}

/* Asegurar que el contenido textual del banner esté por encima del canvas */
.BannerPrincipal .container, .BannerPrincipal .carousel, .BannerPrincipal .hero-content {
  position: relative; z-index: 2;
}

@keyframes floatFiber {
  0%,100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(14px) rotate(0.6deg); }
}

/* Smooth image and card transitions */
.beneficio-card, .testimonial-card, .hero-company-photo, .site-logo { transition: transform 360ms cubic-bezier(.2,.9,.2,1), box-shadow 360ms ease, opacity 360ms ease; }
.hero-company-photo:hover, .beneficio-card:hover { transform: translateY(-8px) scale(1.01); }

.container.wide, .banner-fiber, .BannerPrincipal::before { /* ensure these sit above banners content flow */ z-index: 0; }

/* Banner side title removed per user request. */

/* Keep carousel centered and slightly larger using Bootstrap grid. Remove manual left shift. */
.BannerPrincipal .carousel-column { margin-left: auto; margin-right: auto; position: relative; z-index: 2; }