@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
  --bg:#0b0f13;
  --card:#0f1720;
  --muted:#b6cbb6;         /* más cálido y fresco */
  --primary:#29A838;       /* verde brillante solicitado */
  --accent:#7FE08A;        /* tono complementario claro */
  --glass: rgba(46,166,86,0.06);
  --radius:16px;           /* más amigable */
  --max-width:1200px;
  --text:#eef6ec;          /* más suave */
  --danger:#ff6b6b;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color-scheme: dark;
  --transition-fast: 180ms;
}

*{box-sizing:border-box}
html,body{
    height:100%;
    font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(41,168,56,0.06), transparent 8%),
    radial-gradient(900px 400px at 90% 90%, rgba(127,224,138,0.03), transparent 8%),
    linear-gradient(180deg,var(--bg) 0%, #071018 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
  transition: background var(--transition-fast);
}

/* Layout container */
.container{max-width:var(--max-width);margin:0 auto;padding:1.25rem}

/* Header */
/* .site-header{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  position:sticky;top:0;z-index:40;padding:0.75rem 0;backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.02);
} */
/* Header base: pegajoso en la parte superior */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100; /* suficientemente alto para estar por encima del contenido */
  transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;
  /* otras propiedades existentes (padding, backdrop-filter, etc.) se mantienen */
}

/* Header sólido al hacer scroll (mantiene el look del fondo de la página) */
.site-header.solid{
  background: linear-gradient(180deg, var(--bg) 0%, #071018 100%);
  border-bottom: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 6px 24px rgba(2,6,23,0.45);
  backdrop-filter: none;
}

.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);padding:.2rem; text-decoration: none;}
.logo .brand{font-weight:700;letter-spacing:0.2px}
.main-nav{display:block}
.nav-list{display:flex;gap:0.5rem;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--muted);text-decoration:none;padding:.55rem .75rem;border-radius:12px;transition:all var(--transition-fast)}
.nav-list a:hover{color:var(--text);background:var(--glass);transform:translateY(-2px)}

/* Actions */
.actions{display:flex;gap:.5rem;align-items:center}
.btn{font-weight:700;border:0;padding:.7rem .95rem;border-radius:12px;cursor:pointer;background:transparent;color:var(--text);font-size:0.95rem}
.btn-primary{
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 65%, white 10%));
  color: #021009;
  box-shadow: 0 8px 30px rgba(41,168,56,0.12);
}
.btn-outline{border:1px solid rgba(255,255,255,0.06);background:transparent}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn:active{transform:translateY(1px)}

/* Mobile menu */
.menu-toggle{display:none;background:transparent;border:0;color:var(--muted)}
.mobile-menu{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding:.75rem;border-radius:12px;margin:0.6rem 1.25rem;box-shadow:0 6px 24px rgba(2,6,23,0.45)
}
.mobile-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.mobile-menu a{color:var(--text);text-decoration:none;padding:.8rem;border-radius:10px;display:block}

/* Hero */
.hero{padding:3rem 0}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr minmax(280px, 44%);
  gap:2rem;
  align-items:center;
}
.hero-copy h1{font-size:clamp(1.6rem,4.2vw,2.6rem);margin:0 0 .6rem;line-height:1.08}
.lead{color:var(--muted);margin:0 0 1rem;font-size:1.05rem}
.hero-ctas{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.trust-list{display:flex;gap:1rem;color:var(--muted);list-style:none;padding:0;margin:1rem 0 0;font-size:.95rem}

/* Mockup visual */
.mockup{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:20px;padding:1rem;box-shadow:0 18px 50px rgba(2,6,23,0.55);border:1px solid rgba(255,255,255,0.02)
}
.mockup-header{font-weight:800;padding:.6rem 0;color:var(--primary);font-size:1rem}
.mockup-body{background:linear-gradient(180deg, rgba(2,8,10,0.55), rgba(2,8,10,0.45));padding:1rem;border-radius:12px}
.msg{background:rgba(4,18,14,0.55);padding:.7rem;border-radius:12px;margin-bottom:.6rem}
.msg.muted{opacity:.9;font-size:.96rem}
.stats{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.stats div{background:rgba(255,255,255,0.02);padding:.6rem;border-radius:10px;text-align:center;min-width:88px}

/* Features */
.features{padding:2.25rem 0}
.features-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem;margin-top:1rem;
}
.feature{background:var(--card);padding:1rem;border-radius:16px;border:1px solid rgba(255,255,255,0.02);transition:transform var(--transition-fast), box-shadow var(--transition-fast)}
.feature:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(2,6,23,0.5)}
.feature h3{margin:0 0 .5rem}
.icon{width:42px;height:42px;color:var(--primary);margin-bottom:.5rem}

/* Pricing */
.pricing{padding:2.25rem 0}
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:1rem;margin-top:1rem;
}
.plan{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:1.1rem;border-radius:16px;border:1px solid rgba(255,255,255,0.02);text-align:center;min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.plan.popular{transform:translateY(-6px);box-shadow:0 18px 50px rgba(41,168,56,0.09)}
.plan .price{font-size:1.35rem;font-weight:800;margin:.6rem 0}
.plan ul{list-style:none;padding:0;margin:1rem 0}
.ribbon{position:absolute;margin-top:-1.2rem;background:var(--accent);color:#021009;padding:.25rem .6rem;border-radius:999px;font-size:.85rem}

/* Testimonials */
.testimonials{padding:2.25rem 0}
.testimonials-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem;margin-top:1rem;
}
blockquote{background:var(--card);padding:1rem;border-radius:14px;border-left:4px solid var(--primary);margin:0}

/* Contact */
.contact{padding:2.25rem 0}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:1rem;margin-top:1rem;
}
.contact-form{background:var(--card);padding:1rem;border-radius:16px;border:1px solid rgba(255,255,255,0.02)}
.contact-form label{display:block;margin-top:.6rem;color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%;padding:.7rem;margin-top:.3rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text);font-size:0.95rem}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.02);padding:1rem 0;margin-top:2rem}
.footer-inner{display:flex;flex-direction:row;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:none;margin-left:0.8rem}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,7,12,0.6);padding:1rem;z-index:60}
.modal[aria-hidden="true"]{display:none}
.modal-panel{background:var(--card);padding:1.1rem;border-radius:16px;max-width:720px;width:100%;border:1px solid rgba(255,255,255,0.02)}
.modal-close{background:transparent;border:0;color:var(--muted);font-size:1.6rem;float:right}

/* Utilities */
.muted{color:var(--muted)}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.form-actions{display:flex;gap:.5rem;margin-top:.8rem;align-items:center}

/* Responsive tweaks */
@media (max-width:980px){
  .hero-grid{grid-template-columns: 1fr minmax(240px, 44%);gap:1.4rem}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .header-inner{padding:0 1rem}
  .nav-list{display:none}
  .menu-toggle{display:inline-block}
  .mobile-menu{margin:0 1rem}
  .hero-grid{grid-template-columns:1fr;gap:1rem}
  .hero-visual{order:2}
  .main-nav{display:none}
  .features-grid{grid-template-columns:1fr}
  .mockup{display:block}
  .container{padding:0 1rem}
  .btn{padding:.75rem 1rem}
}

/* Very small screens: bigger tappable CTAs */
@media (max-width:420px){
  .hero-copy h1{font-size:1.5rem}
  .lead{font-size:1rem}
  .btn{font-size:1rem;padding:.85rem 1.1rem;border-radius:14px}
}

/* Focus & accessibility */
a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(41,168,56,0.14);outline-offset:3px;border-radius:12px}


/* Ocultar los botones de acciones en pantallas pequeñas (teléfono) */
@media (max-width: 720px) {
  .site-header .actions a.btn,
  .site-header .actions .btn-ghost {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Fondo sólido en el header al hacer scroll */
.site-header.solid{
  background: rgba(0,0,0,0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 24px rgba(2,6,23,0.55);
  backdrop-filter: none;
  transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* Asegurar contraste interno cuando el header es sólido */
.site-header.solid .nav-list a,
.site-header.solid .actions .btn-ghost,
.site-header.solid .menu-toggle,
.site-header.solid .logo,
.site-header.solid .logo .brand{
  color: var(--text) !important;
}

/* Ajustes de borde para botones fantasma */
.site-header.solid .btn-ghost{
  border-color: rgba(255,255,255,0.06);
}

/* Añadir al final de tu styles.css (o en la sección de header) */

/* Fondo sólido en el header al hacer scroll */
.site-header.solid{
  background: rgba(0,0,0,0.96) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 24px rgba(2,6,23,0.55);
  backdrop-filter: none;
  transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* Asegurar contraste interno cuando el header es sólido */
.site-header.solid .nav-list a,
.site-header.solid .actions .btn-ghost,
.site-header.solid .menu-toggle,
.site-header.solid .logo,
.site-header.solid .logo .brand{
  color: var(--text) !important;
}

/* Ajustes de borde para botones fantasma */
.site-header.solid .btn-ghost{
  border-color: rgba(255,255,255,0.06);
}

/* Reemplaza las reglas anteriores para que la ilustración ocupe la mitad del ancho en escritorio */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 50%); /* contenido principal + columna visual = 50% */
  gap: 1.6rem;
  align-items: center;
}

/* Ilustración más contenida */
.illustration{
  width: 100%;
  max-height: 520px;   /* menor altura para que no domine la página */
  border-radius: 16px;
  overflow: hidden;
  display: block;
  box-shadow: 0 18px 50px rgba(2,6,23,0.45);
  border: 1px solid rgba(255,255,255,0.02);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  transform: translateZ(0);
}

/* Ajustes responsivos: en tablet reducir un poco la columna visual */
@media (max-width:980px){
  .hero-grid { grid-template-columns: 1fr minmax(280px, 44%); }
  .illustration{ max-height: 460px; }
}

/* En móviles la ilustración pasa a ocupar toda la fila (full-width) */
@media (max-width:720px){
  .hero-grid{ grid-template-columns: 1fr; }
  .illustration{ max-height: 420px; border-radius:14px; width:100%; }
}
a, a:link, a:visited {
  color: var(--primary);
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease;
}

a:hover, a:focus {
  color: color-mix(in srgb, var(--primary) 85%, white 15%);
  text-decoration: underline;
  opacity: 0.95;
}
/* Resaltar borde de los botones "Solicitar información" y "Acceso" (header) */
.site-header .actions .btn-ghost {
  border: 2px solid rgba(41,168,56,0.20); /* borde visible pero suave */
  padding: .66rem 1.05rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(41,168,56,0.06);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

/* Hover / focus: más vivo y accesible */
.site-header .actions .btn-ghost:hover,
.site-header .actions .btn-ghost:focus {
  border-color: var(--primary);
  box-shadow: 0 12px 36px rgba(41,168,56,0.14);
  transform: translateY(-2px);
  outline: none;
}

/* Asegurar que el borde destaque incluso cuando el header se vuelve sólido */
.site-header.solid .actions .btn-ghost {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 30px rgba(41,168,56,0.12);
}


/* Pie de página: texto de notas muy pequeño */
.footer-fineprint {
  margin-top: 0.6rem;
  padding: 0.8rem 0 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.02);
}

.fineprint {
  color: rgba(230,238,243,0.62); /* más tenue para notas */
  font-size: 12px;                /* letra muy pequeña */
  line-height: 1.35;
  margin: 0 0 0.5rem 0;
}

/* Meta información aún más pequeña */
.smallprint-meta {
  font-size: 11px;
  color: rgba(230,238,243,0.54);
  margin-top: 0.35rem;
}

/* Enlaces dentro de la fineprint mantienen color primario pero con buen contraste */
.footer-fineprint a {
  color: var(--primary);
  text-decoration: underline;
}

/* En dispositivos muy pequeños, aumentar levemente el tamaño para legibilidad */
@media (max-width:420px){
  .fineprint { font-size: 13px; line-height: 1.4; }
  .smallprint-meta { font-size: 12px; }
}









/* Footer: highlight text when jumped-to */
.site-footer.highlight-text .footer-inner p,
.site-footer.highlight-text .footer-fineprint .fineprint,
.site-footer.highlight-text .footer-fineprint .smallprint-meta,
.site-footer.highlight-text .footer-fineprint a {
  background: linear-gradient(90deg, rgba(41,168,56,0.14), rgba(41,168,56,0.08));
  color: var(--text);
  padding: .18rem .36rem;
  border-radius: 6px;
  transition: background 300ms ease, color 300ms ease, transform 300ms ease;
  display: inline-block; /* so padding applies nicely around lines */
}

/* Slight scale pulse to draw attention */
@keyframes footer-text-pulse {
  0%   { transform: scale(1); background-position: 0% 50%; }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Apply animation on highlight */
.site-footer.highlight-text .footer-inner p,
.site-footer.highlight-text .footer-fineprint .fineprint,
.site-footer.highlight-text .footer-fineprint .smallprint-meta {
  animation: footer-text-pulse 1400ms ease;
}

/* Make links inside fineprint more visible when highlighted */
.site-footer.highlight-text .footer-fineprint a {
  color: #021009;
  font-weight: 600;
  text-decoration: underline;
}

/* Ensure highlight is visible on small screens (less padding collapse) */
@media (max-width:420px){
  .site-footer.highlight-text .footer-inner p,
  .site-footer.highlight-text .footer-fineprint .fineprint,
  .site-footer.highlight-text .footer-fineprint .smallprint-meta {
    padding: .14rem .28rem;
    border-radius: 5px;
  }
}






/* --- Mobile: reubicar y estilizar botones header para una sola columna --- */
@media (max-width: 720px) {
  /* Permitimos que el header se envuelva y el contenido fluya en filas */
  .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1rem;
  }

  /* Ocultamos la nav horizontal (ya lo haces) y colocamos las acciones en bloque */
  .main-nav { display: none; }

  /* Aseguramos que el menu-toggle quede visible en la esquina superior derecha */
  .menu-toggle {
    display: inline-block;
    order: 1;
    margin-left: auto;
    background: transparent;
  }

  /* Actions: ahora ocupan toda la anchura y se apilan verticalmente */
  .actions {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;    /* apilados verticalmente */
    gap: 0.65rem;
    align-items: stretch;
    margin-top: 0.25rem;
    padding: 0 0.5rem;
  }

  /* Cada botón llena todo el ancho con buen padding para dedo */
  .actions .btn {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    border-radius: 12px;
  }

  /* Diferenciación visual ligera entre los dos botones */
  .actions .btn.btn-primary {
    /* si quieres un btn-primary en móvil: lo dejamos como está */
  }
  .actions .btn.btn-ghost {
    background: rgba(255,255,255,0.02);
  }

  /* Si quieres que el menu movil tenga también acceso rápido a los botones,
     asegúrate de que las entradas del mobileMenu ya contienen "Solicitar información" y "Acceso". */
  #mobileMenu { padding: 0.6rem 1rem; }

  /* Reducir margen del logo para ganar espacio */
  .logo { padding:.08rem 0; }

  /* Ajustes para que el footer no quede oculto por el header sticky */
  html, body { scroll-padding-top: 72px; } /* ajusta si tu header es mayor/menor */
}






#formStatus { display: block; /* o inline-block según diseño / padding: .6rem .9rem; border-radius: 10px; font-weight: 600; font-size: 0.95rem; background: rgba(255, 10, 10, 0.06); / fondo de error suave / color: var(--danger, #ff4d4f); / color de texto (usa tu variable) */ border: 1px solid rgba(255,10,10,0.14); margin-top: .6rem; }

/* Mensaje de éxito */ #formStatus.success { background: rgba(41,168,56,0.08); color: var(--accent, #29A838); border-color: rgba(41,168,56,0.12); }

/* oculto accesible (ya lo usas) */ .sr-only { position: absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }







/* whatsapp-widget start */
.floating-btn {
  /* Core positioning properties */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* Ensures it stays on top of other content */

  /* Visual styling */
  width: 60px;
  height: 60px;
  background-color: #000; /* Button color */
  color: white;
  border-radius: 50px; /* Makes it perfectly round */
  
  /* Centering the icon inside the button */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-decoration: none;

  /* Subtle shadow for depth */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  
  /* Smooth hover animation */
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Hover effect */
.floating-btn:hover {
  background-color: #000; /* Darker shade on hover */
  transform: scale(1.05); /* Slight grow effect */
}
/* whatsapp-widget stop */