/* ===== At-Once Elementor — estilos compartidos =====
   Hardcodeados para vencer al Kit de Elementor (que en este sitio tiene
   primary #0093CC cyan, secondary #ED8560 naranja, fuente Montserrat/Work Sans).
   Specificity alta + !important asegura que el plugin sea 1:1 con la landing. */

:root {
  --at-once-primary: #2563EB;
  --at-once-primary-hover: #1D4ED8;
  --at-once-primary-light: #DBEAFE;
  --at-once-dark: #030712;
  --at-once-text: #6B7280;
  --at-once-text-strong: #111827;
  --at-once-radius: 1rem;
  --at-once-radius-lg: 1.5rem;
}

/* Reset agresivo: misma stack de fuentes que la landing real (system fonts).
   La landing original declara Inter pero en la práctica usa SF Pro / Segoe UI
   como fallback. Mantenemos el mismo stack para que rinda idéntico. */
body .at-once-section,
body .at-once-section *,
body .at-once-section h1,
body .at-once-section h2,
body .at-once-section h3,
body .at-once-section h4,
body .at-once-section h5,
body .at-once-section h6,
body .at-once-section p,
body .at-once-section a,
body .at-once-section button,
body .at-once-section input,
body .at-once-section textarea,
body .at-once-section select,
body .at-once-section label,
body .at-once-section span,
body .at-once-section div,
body .at-once-section li {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Color de texto base — el Kit pone #555555. Lo neutralizamos. */
body .at-once-section { color: #111827 !important; }
body html.dark .at-once-section { color: #F3F4F6 !important; }

.at-once-section *::selection { background-color: #2563EB; color: #fff; }

/* ===== RESET de specificity-alta para vencer al theme/Elementor =====
   Algunos themes (Hello Elementor, Astra, OceanWP) inyectan font-size,
   line-height, font-weight y letter-spacing fijos para h1/h2/h3/h4/p/a.
   Esto neutraliza ese override permitiendo que las clases Tailwind manden. */
.at-once-section,
.at-once-section * {
  box-sizing: border-box;
}
.at-once-section h1, .at-once-section h2, .at-once-section h3, .at-once-section h4, .at-once-section h5, .at-once-section h6 {
  letter-spacing: -0.03em !important;
  font-family: inherit !important;
  margin: 0;                        /* sin !important — para que mb-*, mt-* funcionen */
  padding: 0;
  line-height: 1.2 !important;
  color: inherit !important;       /* Hereda color del padre — neutraliza color azul del theme/Kit */
  font-weight: inherit;
}
/* Pero si el heading tiene una clase de color específica, esa gana por specificity */
body .at-once-section h1.text-primary,
body .at-once-section h2.text-primary,
body .at-once-section h3.text-primary,
body .at-once-section h4.text-primary,
body .at-once-section h1 .text-primary,
body .at-once-section h2 .text-primary,
body .at-once-section h3 .text-primary,
body .at-once-section h4 .text-primary { color: #2563EB !important; }
.at-once-section p {
  margin-top: 0;                   /* sólo verticales — preserva mx-auto */
  margin-bottom: 0;
  padding: 0;
  font-family: inherit !important;
}
.at-once-section ul, .at-once-section ol { margin: 0; padding: 0; list-style: none; }
.at-once-section li { margin: 0; padding: 0; }
.at-once-section a {
  text-decoration: none !important;
  font-family: inherit !important;
  font-weight: inherit !important;     /* Vence al theme que pone weight 800 */
  font-size: inherit !important;       /* Vence al theme que pone 29px */
  line-height: inherit !important;
  color: inherit;
}
/* Restaurar las utilidades text-*/font-* cuando aplican directamente sobre <a>.
   Como el "inherit !important" gana por specificity sobre las text-* sin !important
   del theme, necesitamos restaurarlas explícitamente para anchors. */
.at-once-section a.text-xs   { font-size: 0.75rem !important; }
.at-once-section a.text-sm   { font-size: 0.875rem !important; }
.at-once-section a.text-base { font-size: 1rem !important; }
.at-once-section a.text-lg   { font-size: 1.125rem !important; }
.at-once-section a.text-xl   { font-size: 1.25rem !important; }
.at-once-section a.text-2xl  { font-size: 1.5rem !important; }
.at-once-section a.font-bold     { font-weight: 700 !important; }
.at-once-section a.font-semibold { font-weight: 600 !important; }
.at-once-section a.font-medium   { font-weight: 500 !important; }
.at-once-section img { max-width: 100%; height: auto; display: inline-block; }

/* Tailwind text-* utilities boost — el theme suele matchear con
   `.elementor-element h1 { font-size: 56px }` y vence a Tailwind sin !important. */
.at-once-section .text-xs   { font-size: 0.75rem !important; line-height: 1rem !important; }
.at-once-section .text-sm   { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.at-once-section .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
.at-once-section .text-lg   { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.at-once-section .text-xl   { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.at-once-section .text-2xl  { font-size: 1.5rem !important; line-height: 2rem !important; }
.at-once-section .text-3xl  { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.at-once-section .text-4xl  { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.at-once-section .text-5xl  { font-size: 3rem !important; line-height: 1 !important; }
.at-once-section .text-6xl  { font-size: 3.75rem !important; line-height: 1 !important; }
@media (min-width: 768px) {
  .at-once-section .md\:text-xs   { font-size: 0.75rem !important; line-height: 1rem !important; }
  .at-once-section .md\:text-sm   { font-size: 0.875rem !important; line-height: 1.25rem !important; }
  .at-once-section .md\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
  .at-once-section .md\:text-lg   { font-size: 1.125rem !important; line-height: 1.75rem !important; }
  .at-once-section .md\:text-xl   { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  .at-once-section .md\:text-2xl  { font-size: 1.5rem !important; line-height: 2rem !important; }
  .at-once-section .md\:text-3xl  { font-size: 1.875rem !important; line-height: 2.25rem !important; }
  .at-once-section .md\:text-4xl  { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .at-once-section .md\:text-5xl  { font-size: 3rem !important; line-height: 1 !important; }
  .at-once-section .md\:text-6xl  { font-size: 3.75rem !important; line-height: 1 !important; }
}
@media (min-width: 1024px) {
  .at-once-section .lg\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; }
  .at-once-section .lg\:text-lg   { font-size: 1.125rem !important; line-height: 1.75rem !important; }
  .at-once-section .lg\:text-xl   { font-size: 1.25rem !important; line-height: 1.75rem !important; }
  .at-once-section .lg\:text-2xl  { font-size: 1.5rem !important; line-height: 2rem !important; }
  .at-once-section .lg\:text-3xl  { font-size: 1.875rem !important; line-height: 2.25rem !important; }
  .at-once-section .lg\:text-4xl  { font-size: 2.25rem !important; line-height: 2.5rem !important; }
  .at-once-section .lg\:text-5xl  { font-size: 3rem !important; line-height: 1 !important; }
  .at-once-section .lg\:text-6xl  { font-size: 3.75rem !important; line-height: 1 !important; }
}
/* ===== Spacing utilities forzados (Tailwind mb-*, mt-*, space-y-*) =====
   Necesarios porque algunos themes reset-ean margin en p/h y rompen el spacing. */
.at-once-section .mb-1  { margin-bottom: 0.25rem !important; }
.at-once-section .mb-2  { margin-bottom: 0.5rem !important; }
.at-once-section .mb-3  { margin-bottom: 0.75rem !important; }
.at-once-section .mb-4  { margin-bottom: 1rem !important; }
.at-once-section .mb-5  { margin-bottom: 1.25rem !important; }
.at-once-section .mb-6  { margin-bottom: 1.5rem !important; }
.at-once-section .mb-7  { margin-bottom: 1.75rem !important; }
.at-once-section .mb-8  { margin-bottom: 2rem !important; }
.at-once-section .mb-10 { margin-bottom: 2.5rem !important; }
.at-once-section .mb-12 { margin-bottom: 3rem !important; }
.at-once-section .mb-14 { margin-bottom: 3.5rem !important; }
.at-once-section .mb-16 { margin-bottom: 4rem !important; }

.at-once-section .mt-1  { margin-top: 0.25rem !important; }
.at-once-section .mt-2  { margin-top: 0.5rem !important; }
.at-once-section .mt-3  { margin-top: 0.75rem !important; }
.at-once-section .mt-4  { margin-top: 1rem !important; }
.at-once-section .mt-5  { margin-top: 1.25rem !important; }
.at-once-section .mt-6  { margin-top: 1.5rem !important; }
.at-once-section .mt-8  { margin-top: 2rem !important; }
.at-once-section .mt-10 { margin-top: 2.5rem !important; }
.at-once-section .mt-12 { margin-top: 3rem !important; }

/* space-y-* genera margin-top en hijos siguientes */
.at-once-section .space-y-1  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem !important; }
.at-once-section .space-y-2  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem !important; }
.at-once-section .space-y-3  > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem !important; }
.at-once-section .space-y-4  > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; }
.at-once-section .space-y-5  > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem !important; }
.at-once-section .space-y-6  > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem !important; }
.at-once-section .space-y-8  > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem !important; }

/* mx-auto (centrado horizontal de bloques) — el theme suele forzar margin: 0 */
.at-once-section .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.at-once-section .ml-auto { margin-left: auto !important; }
.at-once-section .mr-auto { margin-right: auto !important; }
.at-once-section .my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* gap-* refuerzo (display flex/grid) */
.at-once-section .gap-1   { gap: 0.25rem !important; }
.at-once-section .gap-1\.5{ gap: 0.375rem !important; }
.at-once-section .gap-2   { gap: 0.5rem !important; }
.at-once-section .gap-2\.5{ gap: 0.625rem !important; }
.at-once-section .gap-3   { gap: 0.75rem !important; }
.at-once-section .gap-4   { gap: 1rem !important; }
.at-once-section .gap-5   { gap: 1.25rem !important; }
.at-once-section .gap-6   { gap: 1.5rem !important; }
.at-once-section .gap-8   { gap: 2rem !important; }
.at-once-section .gap-10  { gap: 2.5rem !important; }
.at-once-section .gap-12  { gap: 3rem !important; }
.at-once-section .gap-14  { gap: 3.5rem !important; }

.at-once-section .font-bold       { font-weight: 700 !important; }
.at-once-section .font-semibold   { font-weight: 600 !important; }
.at-once-section .font-medium     { font-weight: 500 !important; }
.at-once-section .font-black      { font-weight: 900 !important; }
/* Sin !important para que las clases text-* (con !important) ganen cuando coexisten */
.at-once-section .leading-tight   { line-height: 1.25; }
.at-once-section .leading-relaxed { line-height: 1.625; }

/* ===== Colors hardcodeados (vencen al Kit de Elementor) ===== */
body .at-once-section .text-primary       { color: #2563EB !important; }
body .at-once-section .text-gray-300      { color: #D1D5DB !important; }
body .at-once-section .text-gray-400      { color: #9CA3AF !important; }
body .at-once-section .text-gray-500      { color: #6B7280 !important; }
body .at-once-section .text-gray-600      { color: #4B5563 !important; }
body .at-once-section .text-gray-700      { color: #374151 !important; }
body .at-once-section .text-gray-800      { color: #1F2937 !important; }
body .at-once-section .text-gray-900      { color: #111827 !important; }
body .at-once-section .text-white         { color: #FFFFFF !important; }
body .at-once-section .text-red-500       { color: #EF4444 !important; }
body .at-once-section .text-green-500     { color: #22C55E !important; }
body .at-once-section .text-yellow-500    { color: #EAB308 !important; }

body .at-once-section .bg-white           { background-color: #FFFFFF !important; }
body .at-once-section .bg-gray-50         { background-color: #F9FAFB !important; }
body .at-once-section .bg-gray-100        { background-color: #F3F4F6 !important; }
body .at-once-section .bg-gray-200        { background-color: #E5E7EB !important; }
body .at-once-section .bg-gray-900        { background-color: #111827 !important; }
body .at-once-section .bg-red-50          { background-color: #FEF2F2 !important; }
body .at-once-section .bg-green-50        { background-color: #F0FDF4 !important; }
body .at-once-section .bg-yellow-50       { background-color: #FEFCE8 !important; }

body .at-once-section .border-gray-100    { border-color: #F3F4F6 !important; }
body .at-once-section .border-gray-200    { border-color: #E5E7EB !important; }
body .at-once-section .border-gray-300    { border-color: #D1D5DB !important; }

/* Hipervínculos dentro del plugin — el theme suele aplicarles color primary del Kit. */
body .at-once-section a { color: inherit; }
body .at-once-section a.text-primary { color: #2563EB !important; }

/* Inputs — el theme suele cambiarles bg/border/color */
body .at-once-section input[type="text"],
body .at-once-section input[type="email"],
body .at-once-section input[type="tel"],
body .at-once-section input[type="url"],
body .at-once-section textarea,
body .at-once-section select {
  background-color: #FFFFFF !important;
  color: #111827 !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 0.75rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
body .at-once-section input:focus,
body .at-once-section textarea:focus,
body .at-once-section select:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}
body .at-once-section input::placeholder,
body .at-once-section textarea::placeholder { color: #9CA3AF !important; }
body .at-once-section label {
  color: #374151 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 0.375rem !important;
}

/* Botón primary — valores 1:1 con landing real:
   borderRadius 12px (0.75rem), fontWeight 700, fontSize 16px base / 14px en form. */
a.at-once-btn-primary,
button.at-once-btn-primary,
.at-once-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  background: linear-gradient(to right, #2563EB, #60A5FA) !important;
  background-image: linear-gradient(to right, #2563EB, #60A5FA) !important;
  border: 0 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 25px rgba(37,99,235,0.20) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  width: auto;
}
a.at-once-btn-primary:hover,
button.at-once-btn-primary:hover,
.at-once-btn-primary:hover {
  background: linear-gradient(to right, #1D4ED8, #3B82F6) !important;
  background-image: linear-gradient(to right, #1D4ED8, #3B82F6) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 15px 30px rgba(37,99,235,0.30) !important;
}
.at-once-btn-primary:active { transform: scale(0.97); }

a.at-once-btn-secondary,
button.at-once-btn-secondary,
.at-once-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 1rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #374151 !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  width: auto;
}
a.at-once-btn-secondary:hover,
button.at-once-btn-secondary:hover,
.at-once-btn-secondary:hover {
  background: #f9fafb !important;
  color: #374151 !important;
}
.at-once-btn-secondary:active { transform: scale(0.97); }

/* Si el botón tiene la clase .text-sm (común en grids de form), reduce font
   y sube el weight a 700 para igualar la landing real (form-style) */
.at-once-section .at-once-btn-primary.text-sm,
.at-once-section .at-once-btn-secondary.text-sm {
  font-size: 0.875rem !important;
  padding: 0.875rem 1rem !important;
  font-weight: 700 !important;
}

/* Que el icono dentro del botón no rompa flex */
.at-once-btn-primary i, .at-once-btn-secondary i { line-height: 1 !important; flex-shrink: 0; }

/* En grids de 2 cols (form completo), botones llenan el item al 100% */
.at-once-section .grid > .at-once-btn-primary,
.at-once-section .grid > .at-once-btn-secondary,
.at-once-section .grid > a.at-once-btn-primary,
.at-once-section .grid > a.at-once-btn-secondary,
.at-once-section .grid > button.at-once-btn-primary,
.at-once-section .grid > button.at-once-btn-secondary {
  width: 100% !important;
  white-space: nowrap !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
/* Botones con clase w-full (Hero express form, CTA single button) */
.at-once-section .at-once-btn-primary.w-full,
.at-once-section .at-once-btn-secondary.w-full,
.at-once-section a.at-once-btn-primary.w-full,
.at-once-section a.at-once-btn-secondary.w-full,
.at-once-section button.at-once-btn-primary.w-full,
.at-once-section button.at-once-btn-secondary.w-full {
  width: 100% !important;
}

/* Mobile menu helpers */
.at-once-mobile-menu.at-once-open { display: flex !important; }

/* ============================================================
   HEADER / NAV — todos los estilos forzados con !important
   para vencer themes que rompen <nav a> con tamaños grandes.
   ============================================================ */
.at-once-nav-wrapper { width: 100% !important; padding: 0.75rem 1rem 0 !important; font-family: 'Inter', sans-serif !important; }
.at-once-nav-wrapper.at-once-nav-sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 50 !important; }
.at-once-nav { max-width: 72rem !important; margin: 0 auto !important; }
.at-once-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 56px !important;
  padding: 0 1.5rem !important;
  border-radius: 1rem !important;
  font-family: 'Inter', sans-serif !important;
}
.at-once-nav-inner > * { font-family: 'Inter', sans-serif !important; }

.at-once-nav-logo { display: inline-flex !important; align-items: center !important; text-decoration: none !important; }
.at-once-nav-logo img { display: block !important; width: auto !important; max-width: none !important; }

.at-once-nav-links {
  display: none !important;
  align-items: center !important;
  gap: 1.5rem !important;
}
@media (min-width: 768px) { .at-once-nav-links { display: flex !important; } }

.at-once-nav-link {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  font-family: 'Inter', sans-serif !important;
  transition: color 0.15s ease !important;
}
.at-once-nav-link:hover { color: #111827 !important; }

.at-once-nav-cta {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #fff !important;
  background: linear-gradient(to right, #2563EB, #60A5FA) !important;
  background-image: linear-gradient(to right, #2563EB, #60A5FA) !important;
  padding: 0.5rem 1.25rem !important;
  margin: 0 !important;
  border-radius: 0.75rem !important;
  border: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(37,99,235,0.20) !important;
}
.at-once-nav-cta:hover { background: linear-gradient(to right, #1D4ED8, #3B82F6) !important; background-image: linear-gradient(to right, #1D4ED8, #3B82F6) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(37,99,235,0.30) !important; }

.at-once-nav-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  color: #111827 !important;
}
@media (min-width: 768px) { .at-once-nav-toggle { display: none !important; } }

.at-once-nav-mobile {
  display: none;
  flex-direction: column !important;
  gap: 1rem !important;
  margin-top: 0.5rem !important;
  padding: 1.25rem !important;
  border-radius: 1rem !important;
  font-family: 'Inter', sans-serif !important;
}
@media (min-width: 768px) { .at-once-nav-mobile { display: none !important; } }
.at-once-nav-mobile.at-once-open { display: flex !important; }
.at-once-nav-mobile-link, .at-once-nav-mobile-cta {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #111827 !important;
  text-decoration: none !important;
  padding: 0 !important;
}
.at-once-nav-mobile-cta { font-weight: 700 !important; color: var(--at-once-primary) !important; }

.at-once-nav-spacer { height: 80px; }

.at-once-nav-divider { width: 1px; height: 1.25rem; background: #E5E7EB; display: inline-block; }

/* Toggle iOS-style */
.at-once-theme-switch {
  width: 44px !important;
  height: 26px !important;
  background: #E5E7EB !important;
  border-radius: 13px !important;
  border: 0 !important;
  position: relative;
  cursor: pointer;
  padding: 0 !important;
  transition: background 0.3s !important;
  display: inline-block !important;
  flex-shrink: 0;
}
.at-once-theme-switch::after {
  content: '';
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform 0.3s, background 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
html.dark .at-once-theme-switch { background: #2563EB !important; }
html.dark .at-once-theme-switch::after { transform: translateX(18px); }

/* ============================================================
   DARK MODE — colores invertidos para todo el plugin
   ============================================================ */
/* Body en dark se oscurece — esto evita que el navbar semi-transparente
   muestre "blanco" del body de WP detrás. */
html.dark, html.dark body { background-color: #030712 !important; }

html.dark body .at-once-section { color: #F3F4F6 !important; background-color: transparent !important; }

html.dark body .at-once-section .text-gray-300  { color: #E5E7EB !important; }
html.dark body .at-once-section .text-gray-400  { color: #D1D5DB !important; }
html.dark body .at-once-section .text-gray-500  { color: #9CA3AF !important; }
html.dark body .at-once-section .text-gray-600  { color: #D1D5DB !important; }
html.dark body .at-once-section .text-gray-700  { color: #E5E7EB !important; }
html.dark body .at-once-section .text-gray-800  { color: #F3F4F6 !important; }
html.dark body .at-once-section .text-gray-900  { color: #F9FAFB !important; }

html.dark body .at-once-section .bg-white       { background-color: #030712 !important; }
/* Variantes con opacidad de Tailwind (bg-white/80, bg-white/50, etc.) */
html.dark body .at-once-section [class*="bg-white\/"],
html.dark body .at-once-section [class*="bg-white/"] { background-color: rgba(255,255,255,0.06) !important; }
html.dark body .at-once-section .bg-gray-50     { background-color: #0B1220 !important; }
html.dark body .at-once-section .bg-gray-100    { background-color: #111827 !important; }
html.dark body .at-once-section .bg-gray-200    { background-color: #1F2937 !important; }
html.dark body .at-once-section .bg-gray-900    { background-color: #FFFFFF !important; }
html.dark body .at-once-section .bg-red-50      { background-color: rgba(239,68,68,0.10) !important; }
html.dark body .at-once-section .bg-green-50    { background-color: rgba(34,197,94,0.10) !important; }
html.dark body .at-once-section .bg-yellow-50   { background-color: rgba(234,179,8,0.10) !important; }

/* Borders en dark: colores sólidos como la landing real.
   IMPORTANTE: cubrimos tanto descendientes (.at-once-section .border-X) como
   compound selectors (.at-once-section.border-X) porque el border puede estar
   en el wrapper section o en un hijo. */
html.dark body .at-once-section .border-gray-100,
html.dark body .at-once-section.border-gray-100 { border-color: #111827 !important; }
html.dark body .at-once-section .border-gray-200,
html.dark body .at-once-section.border-gray-200 { border-color: #1F2937 !important; }
html.dark body .at-once-section .border-gray-300,
html.dark body .at-once-section.border-gray-300 { border-color: #374151 !important; }
html.dark body .at-once-section .border-gray-700,
html.dark body .at-once-section.border-gray-700 { border-color: #374151 !important; }
html.dark body .at-once-section .border-gray-800,
html.dark body .at-once-section.border-gray-800 { border-color: #1F2937 !important; }
html.dark body .at-once-section .border-y,
html.dark body .at-once-section.border-y         { border-top-color: #1F2937 !important; border-bottom-color: #1F2937 !important; }
html.dark body .at-once-section .border-t,
html.dark body .at-once-section.border-t         { border-top-color: #1F2937 !important; }
html.dark body .at-once-section .border-b,
html.dark body .at-once-section.border-b         { border-bottom-color: #1F2937 !important; }

html.dark body .at-once-section input[type="text"],
html.dark body .at-once-section input[type="email"],
html.dark body .at-once-section input[type="tel"],
html.dark body .at-once-section textarea,
html.dark body .at-once-section select {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #F3F4F6 !important;
}
html.dark body .at-once-section input::placeholder,
html.dark body .at-once-section textarea::placeholder { color: #6B7280 !important; }
html.dark body .at-once-section label { color: #D1D5DB !important; }

/* Glass en dark se vuelve oscuro semi-transparente
   (regla amplia: aplica en hero, header, footer, etc.) */
html.dark body .at-once-glass {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  color: #F3F4F6 !important;
}

/* FontAwesome — el reset agresivo le quitó la font-family. Restaurarla. */
.at-once-section i.fa, .at-once-section i.fas, .at-once-section i.far, .at-once-section i.fab,
.at-once-section .fa, .at-once-section .fas, .at-once-section .far, .at-once-section .fab {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
}
.at-once-section i.far { font-weight: 400; }
.at-once-section i.fab { font-family: 'Font Awesome 6 Brands' !important; font-weight: 400; }

/* Botón primary en dark se vuelve blanco con texto oscuro */
html.dark body .at-once-section a.at-once-btn-primary,
html.dark body .at-once-section button.at-once-btn-primary,
html.dark body .at-once-section .at-once-btn-primary {
  background: #fff !important;
  color: #111827 !important;
}
html.dark body .at-once-section .at-once-btn-primary:hover { background: #E5E7EB !important; color: #111827 !important; }

html.dark body .at-once-section a.at-once-btn-secondary,
html.dark body .at-once-section button.at-once-btn-secondary,
html.dark body .at-once-section .at-once-btn-secondary {
  background: rgba(255,255,255,0.10) !important;
  color: #F3F4F6 !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* Nav en dark */
html.dark body .at-once-nav-link { color: #D1D5DB !important; }
html.dark body .at-once-nav-link:hover { color: #fff !important; }
html.dark body .at-once-nav-cta { background: #fff !important; color: #111827 !important; }
html.dark body .at-once-nav-cta:hover { background: #E5E7EB !important; }
html.dark body .at-once-nav-divider { background: rgba(255,255,255,0.1) !important; }

/* Logo en dark mode: convierte el logo de color a blanco
   (filtro brightness 0 + invert = silueta blanca, mismo trick que la landing). */
html.dark body .at-once-logo-img {
  filter: brightness(0) invert(1);
}

/* Hero overlay en dark */
html.dark .at-once-hero-overlay {
  background: linear-gradient(to right,
    rgba(3,7,18,0.92) 0%,
    rgba(3,7,18,0.72) 40%,
    rgba(3,7,18,0.0) 100%) !important;
}

/* Glass cards */
.at-once-glass,
.at-once-section .glass {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
html.dark body .at-once-section .glass {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  color: #F3F4F6 !important;
}

/* Text gradient (primary -> accent) — usado en heros y headings con énfasis */
.at-once-section .text-gradient {
  background: linear-gradient(90deg, #2563EB 0%, #60A5FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  display: inline-block;
}

/* text-huge — H1 hero clamp */
.at-once-section h1.text-huge,
.at-once-section .text-huge {
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
}
@media (max-width: 767px) {
  .at-once-section .text-huge {
    font-size: clamp(2.25rem, 11vw, 3.5rem) !important;
    line-height: 1.1 !important;
  }
}

/* Color utilities for accent (Tailwind CDN config defines accent #60A5FA) */
body .at-once-section .text-accent       { color: #60A5FA !important; }
body .at-once-section .bg-accent         { background-color: #60A5FA !important; }
/* Opacity variants used by landing */
body .at-once-section .bg-primary\/5     { background-color: rgba(37,99,235,0.05) !important; }
body .at-once-section .bg-primary\/10    { background-color: rgba(37,99,235,0.10) !important; }
body .at-once-section .bg-primary\/20    { background-color: rgba(37,99,235,0.20) !important; }
body .at-once-section .bg-accent\/10     { background-color: rgba(96,165,250,0.10) !important; }
body .at-once-section .bg-accent\/20     { background-color: rgba(96,165,250,0.20) !important; }
body .at-once-section .border-primary\/10 { border-color: rgba(37,99,235,0.10) !important; }
body .at-once-section .border-primary\/20 { border-color: rgba(37,99,235,0.20) !important; }
body .at-once-section .text-primary\/40  { color: rgba(37,99,235,0.40) !important; }

/* Slate grays usados por el landing real (real Tailwind has them but aseguramos override del theme) */
body .at-once-section .text-slate-300    { color: #CBD5E1 !important; }
body .at-once-section .text-slate-400    { color: #94A3B8 !important; }
body .at-once-section .text-slate-500    { color: #64748B !important; }
body .at-once-section .text-slate-600    { color: #475569 !important; }
body .at-once-section .text-slate-700    { color: #334155 !important; }
body .at-once-section .bg-slate-50       { background-color: #F8FAFC !important; }
body .at-once-section .bg-slate-100      { background-color: #F1F5F9 !important; }
body .at-once-section .border-slate-100  { border-color: #F1F5F9 !important; }
body .at-once-section .border-slate-200  { border-color: #E2E8F0 !important; }
body .at-once-section .border-slate-300  { border-color: #CBD5E1 !important; }

/* Big number background pattern (proceso cards) — el theme puede override text colors */
body .at-once-section .text-slate-100    { color: #F1F5F9 !important; }

/* Hero canvas */
.at-once-webgl-canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Hero overlay para legibilidad sobre canvas 3D */
.at-once-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.72) 40%,
    rgba(255,255,255,0.0) 100%);
}

/* Tipografía huge para hero — forzada para vencer al theme. */
.at-once-section h1.at-once-text-huge,
.at-once-section h2.at-once-text-huge,
h1.at-once-text-huge,
.at-once-text-huge {
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
  margin: 0 0 1.5rem 0 !important;
}

/* Animaciones */
.at-once-fade-up {
  opacity: 0; transform: translateY(24px);
  animation: at-once-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.at-once-fade-up.at-once-d1 { animation-delay: 0.12s; }
.at-once-fade-up.at-once-d2 { animation-delay: 0.24s; }
.at-once-fade-up.at-once-d3 { animation-delay: 0.36s; }
@keyframes at-once-fade-up { to { opacity: 1; transform: translateY(0); } }

/* ===== Reveal animations (motion-style) =====
   Variantes: up (default), down, left, right, scale, blur. Cada una entra con
   easing cubic-bezier(0.16, 1, 0.3, 1) (mismo que Framer Motion `easeOut`). */
.at-once-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.at-once-reveal.at-once-active { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }

/* Variantes direccionales */
.at-once-reveal-up    { transform: translateY(40px); }
.at-once-reveal-down  { transform: translateY(-40px); }
.at-once-reveal-left  { transform: translateX(40px); }
.at-once-reveal-right { transform: translateX(-40px); }
.at-once-reveal-scale { transform: scale(0.92); }
.at-once-reveal-blur  { transform: translateY(20px); filter: blur(8px); }
.at-once-reveal-rotate { transform: rotate(-3deg) translateY(20px); }

/* Stagger delays (hasta 8) */
.at-once-reveal-d1 { transition-delay: 0.08s; }
.at-once-reveal-d2 { transition-delay: 0.16s; }
.at-once-reveal-d3 { transition-delay: 0.24s; }
.at-once-reveal-d4 { transition-delay: 0.32s; }
.at-once-reveal-d5 { transition-delay: 0.40s; }
.at-once-reveal-d6 { transition-delay: 0.48s; }
.at-once-reveal-d7 { transition-delay: 0.56s; }
.at-once-reveal-d8 { transition-delay: 0.64s; }

/* Hover micro-interactions: cards lift on hover */
.at-once-section .at-once-glass {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease;
}
.at-once-section .at-once-glass.at-once-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
html.dark .at-once-section .at-once-glass.at-once-card-hover:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Floating elements en hero */
@keyframes at-once-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.at-once-float { animation: at-once-float 4s ease-in-out infinite; }

/* Glow pulse en badges/chips */
@keyframes at-once-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}
.at-once-glow { animation: at-once-glow 2.5s ease-out infinite; }

/* ============================================================
   MOBILE OPTIMIZATIONS (max-width 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Prevenir overflow horizontal causado por reveal-left/right (translateX 40px) */
  body { overflow-x: hidden; }
  .at-once-section { overflow-x: hidden; }

  /* En mobile, todas las animaciones direccionales colapsan a fade-up
     para evitar overflow horizontal y que se vean más controladas. */
  .at-once-reveal-left,
  .at-once-reveal-right { transform: translateY(30px) !important; }

  /* Reducir el clamp del hero h1 — en pantallas estrechas 2.8rem es ok */
  .at-once-text-huge {
    font-size: clamp(2.25rem, 11vw, 3.5rem) !important;
    line-height: 1.1 !important;
  }

  /* Reducir padding lateral en cards y secciones */
  .at-once-section .px-6 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .at-once-section .p-7  { padding: 1.25rem !important; }
  .at-once-section .p-8  { padding: 1.5rem !important; }
  .at-once-section .lg\:p-10, .at-once-section .lg\:p-14 { padding: 1.5rem !important; }

  /* Reducir tamaño de h2 grandes en mobile */
  .at-once-section .text-3xl { font-size: 1.5rem !important; line-height: 1.875rem !important; }
  .at-once-section .text-4xl { font-size: 1.75rem !important; line-height: 2rem !important; }
  .at-once-section .text-5xl { font-size: 2rem !important; line-height: 1.15 !important; }

  /* Spacing de secciones más compacto */
  .at-once-section .py-20 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .at-once-section .py-24 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

  /* Form cards con menos padding interno */
  .at-once-section .at-once-glass.rounded-3xl { padding: 1.5rem !important; }

  /* Botones del nav con texto más pequeño */
  .at-once-nav-cta { font-size: 0.8125rem !important; padding: 0.5rem 1rem !important; }

  /* Hero panel form a width completo */
  .at-once-section .grid > .lg\:col-span-5,
  .at-once-section .grid > .lg\:col-span-7 { width: 100% !important; }

  /* Stats grid más compacto */
  .at-once-section .grid.lg\:grid-cols-4 > .at-once-glass { padding: 1rem !important; }
  .at-once-section .text-4xl.font-black,
  .at-once-section .text-5xl.font-black { font-size: 2rem !important; }

  /* Métricas flotantes del hero — esconder en mobile (no caben bien) */
  .at-once-section [class*="absolute"][class*="-bottom"][class*="-right"].at-once-glass,
  .at-once-section [class*="absolute"][class*="-top"][class*="-right"].at-once-glass {
    position: static !important;
    margin-top: 1rem;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Stat hover pulse */
@keyframes at-once-pulse-stat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.at-once-stat:hover { animation: at-once-pulse-stat 0.6s ease; }

/* Indicador puntual de “en vivo” / status */
.at-once-pulse-dot {
  width: 0.625rem; height: 0.625rem; border-radius: 9999px;
  background: #22c55e;
  animation: at-once-pulse-dot 1.5s ease-in-out infinite;
}
@keyframes at-once-pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.8); }
}

/* Scrollbar discreto */
.at-once-section ::-webkit-scrollbar { width: 6px; }
.at-once-section ::-webkit-scrollbar-track { background: transparent; }
.at-once-section ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Editor de Elementor: que los widgets respiren cuando se ven aislados */
.elementor-editor-active .at-once-section { min-height: 200px; }

/* Dentro del editor, mostrar siempre todo el contenido visible.
   Cubre los selectores que Elementor aplica al preview iframe y al admin. */
.elementor-editor-active .at-once-reveal,
.elementor-editor-active .at-once-fade-up,
.elementor-edit-mode .at-once-reveal,
.elementor-edit-mode .at-once-fade-up,
body.elementor-preview .at-once-reveal,
body.elementor-preview .at-once-fade-up {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
}