/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Las reglas vivían acá, pero se movieron a styles.css por el issue de Tailwind 4 + Blazor scoped CSS. Ver styles.css. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
:host[b-y7pqcyfg13] {
    display: block;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
:host[b-rf6lolraeo] {
    display: block;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-pkta74hfzq],
.components-reconnect-repeated-attempt-visible[b-pkta74hfzq],
.components-reconnect-failed-visible[b-pkta74hfzq],
.components-pause-visible[b-pkta74hfzq],
.components-resume-failed-visible[b-pkta74hfzq],
.components-rejoining-animation[b-pkta74hfzq] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-retrying[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-failed[b-pkta74hfzq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-pkta74hfzq] {
    display: block;
}


#components-reconnect-modal[b-pkta74hfzq] {
    background-color: var(--color-base-100, #FFFFFF);
    color: var(--color-base-content, #3A3A3C);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(58, 58, 60, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-pkta74hfzq 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-pkta74hfzq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-pkta74hfzq 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-pkta74hfzq]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-pkta74hfzq 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-pkta74hfzq {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-pkta74hfzq {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-pkta74hfzq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-pkta74hfzq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-pkta74hfzq] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-pkta74hfzq] {
    border: 0;
    background-color: var(--color-primary, #29A5DD);
    color: var(--color-primary-content, #FFFFFF);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-pkta74hfzq] {
        background-color: var(--color-accent, #3FB6EC);
    }

    #components-reconnect-modal button:active[b-pkta74hfzq] {
        background-color: var(--color-primary, #29A5DD);
    }

.components-rejoining-animation[b-pkta74hfzq] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-pkta74hfzq] {
        position: absolute;
        border: 3px solid var(--color-primary, #29A5DD);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-pkta74hfzq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-pkta74hfzq] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-pkta74hfzq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Account.razor.rz.scp.css */
/* ===========================================================
   Account.razor — estilos scoped
   Enfoque mobile-first. Breakpoints de Tailwind: sm=640, md=768.
   =========================================================== */

/* ---- Badge de iniciales (anchor visual de la página) ------- */
/* La única animación custom de esta página. Escala + fade para
   diferenciar del home-rise global, que es solo translateY.
   El delay de 80ms lo separa del stagger del card contenedor
   (home-stagger-1) para que el card aparezca primero y la
   identidad "aterrice" sobre él.                                 */
@keyframes initials-in-b-mu15pcork3 {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.initials-badge[b-mu15pcork3] {
  animation: initials-in-b-mu15pcork3 0.5s cubic-bezier(0.2, 0, 0, 1) 80ms both;
}

/* ---- Respeta prefers-reduced-motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .initials-badge[b-mu15pcork3] { animation: none; }
}
/* /Components/Pages/AddPaymentMethod.razor.rz.scp.css */
/* ===========================================================
   AddPaymentMethod.razor — estilos scoped
   Enfoque mobile-first. Breakpoints de Tailwind: sm=640, md=768.
   =========================================================== */

/* ---- Botón de envío sticky en móvil ------------------------- */
/* En desktop el botón fluye normal dentro del card. En móvil
   se queda fijo en la parte inferior con un halo superior y
   respeta el área segura del dispositivo.                     */
@media (max-width: 767.98px) {
  .actions-mobile[b-2c6l6yxh9f] {
    position: sticky;
    bottom: 0;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-bottom: -1rem;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(
      to top,
      var(--color-base-200) 70%,
      transparent 100%
    );
    z-index: 10;
  }
  .actions-mobile .btn-primary[b-2c6l6yxh9f] {
    box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--color-primary) 40%, transparent);
  }
  .add-card-shell[b-2c6l6yxh9f] {
    /* Deja espacio inferior para que el contenido no quede
       tapado por la barra sticky cuando el form es largo.    */
    padding-bottom: 1rem;
  }
}

/* En desktop, restaura el comportamiento normal de la barra. */
@media (min-width: 768px) {
  .actions-mobile[b-2c6l6yxh9f] {
    margin-top: 1.25rem;
  }
}

/* ---- Animación de entrada del card preview ------------------ */
@keyframes card-float-in-b-2c6l6yxh9f {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.add-card-shell .perspective-\[1200px\] > div[b-2c6l6yxh9f] {
  animation: card-float-in-b-2c6l6yxh9f 0.45s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .add-card-shell .perspective-\[1200px\] > div[b-2c6l6yxh9f] { animation: none; }
}
/* /Components/Pages/Cabinet.razor.rz.scp.css */
/* ===========================================================
   Cabinet.razor — estilos scoped
   Enfoque mobile-first. Los breakpoints respetan los defaults
   de Tailwind: sm = 640px, md = 768px, lg = 1024px.
   =========================================================== */

/* ---- Modales: en móvil se anclan abajo como bottom-sheet --- */
@media (max-width: 639.98px) {
  .modal:has(.modal-sheet)[b-fvrqgexfbi] {
    align-items: flex-end;
  }
  .modal-sheet[b-fvrqgexfbi] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    animation: sheet-up-b-fvrqgexfbi 0.25s ease-out;
  }
  @keyframes sheet-up-b-fvrqgexfbi {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ---- Padding inferior del contenedor en móvil ---------------- */
/* Da espacio para que la última tarjeta no quede pegada al
   borde inferior del viewport en pantallas pequeñas.          */
@media (max-width: 767.98px) {
  .home-shell[b-fvrqgexfbi] {
    padding-bottom: 1.5rem;
  }
}

/* ---- Empty state del pedido activo --------------------------- */
/* Animación sutil de entrada: fade + rise. Se respeta la
   preferencia del usuario de reducir movimiento.               */
@keyframes empty-state-rise-b-fvrqgexfbi {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.empty-state-enter[b-fvrqgexfbi] {
  animation: empty-state-rise-b-fvrqgexfbi 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .empty-state-enter[b-fvrqgexfbi] { animation: none; }
}

/* ---- Visor JSON temporal de depuración ------------------------ */
/* Conserva la indentación del payload, permite inspeccionarlo sin
   agrandar el modal y corta identificadores largos en móvil.     */
.order-debug-json[b-fvrqgexfbi] {
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Stagger de entrada y order-appear ----------------------- */
/* Las animaciones compartidas (.home-stagger, .order-row) viven
   en styles.css para poder reutilizarse en otras páginas sin
   que el scope suffix de Blazor rompa la especificidad.        */
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Tokens extendidos de la landing. Vivían solo como comentarios en
   Landing.razor.css (con `--profundo`, `--azul-vivo`, `--azul`,
   `--grafito`, `--gris-txt`, etc.). Los exponemos acá para que la
   landing pueda referenciarlos vía `var(...)` desde su CSS scoped. */
.landing-page[b-ehu9ne1xun] {
  --profundo: #012B58;
  --azul-vivo: #29A5DD;
  --azul: #3880C2;
  --grafito: #3A3A3C;
  --nube: #F2F6FA;
  --blanco: #FFFFFF;
  --gris-txt: #6B7280;
  --gris-inv: #A9C4DC;
}

.landing-page[b-ehu9ne1xun] {
  min-height: 100%;
  background: var(--blanco, #FFFFFF);
  color: var(--grafito, #3A3A3C);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

.landing-page *[b-ehu9ne1xun],
.landing-page *[b-ehu9ne1xun]::before,
.landing-page *[b-ehu9ne1xun]::after {
  box-sizing: border-box;
}

.landing-page img[b-ehu9ne1xun],
.landing-page svg[b-ehu9ne1xun] {
  display: block;
  max-width: 100%;
}

.landing-page button[b-ehu9ne1xun],
.landing-page input[b-ehu9ne1xun],
.landing-page select[b-ehu9ne1xun],
.landing-page textarea[b-ehu9ne1xun] {
  font: inherit;
}

/* ---- Landing enter: stagger al cargar la página ------------- */
/* Aplica el principio "Split and Stagger Enter Animations" del
   skill make-interfaces-feel-better (animations.md:41-117).
   Cada bloque semántico de la landing entra con su propio delay,
   combinando opacity + translateY + filter:blur (3 propiedades
   compositor-only). El namespace es paralelo a .home-stagger:
   las clases .landing-* ya viven acá desde el fix de cascade
   layers, y este stagger exige 3 properties mientras home-stagger
   solo tiene 2. */
@keyframes landing-enter-b-ehu9ne1xun {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.landing-enter[b-ehu9ne1xun] {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

/* Variante para hero image: mix-blend-mode: screen no soporta
   bien el blur — animamos solo opacity + translateY. */
@keyframes landing-enter-lift-b-ehu9ne1xun {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-enter--no-blur[b-ehu9ne1xun] {
  filter: none;
  animation-name: landing-enter-lift-b-ehu9ne1xun;
}

/* Variante para header sticky: no debe "saltar desde abajo"
   mientras está pegado al top. Animamos solo opacity + blur. */
@keyframes landing-enter-fade-b-ehu9ne1xun {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}
.landing-enter--no-lift[b-ehu9ne1xun] {
  transform: none;
  animation-name: landing-enter-fade-b-ehu9ne1xun;
}

/* 17 delays numerados, incremento 70ms — la última animación
   termina en 1120 + 450 = 1570ms, dentro del budget perceptual
   de ~1.5s para una landing. */
.landing-enter-1[b-ehu9ne1xun]  { animation-delay:    0ms; }
.landing-enter-2[b-ehu9ne1xun]  { animation-delay:   70ms; }
.landing-enter-3[b-ehu9ne1xun]  { animation-delay:  140ms; }
.landing-enter-4[b-ehu9ne1xun]  { animation-delay:  210ms; }
.landing-enter-5[b-ehu9ne1xun]  { animation-delay:  280ms; }
.landing-enter-6[b-ehu9ne1xun]  { animation-delay:  350ms; }
.landing-enter-7[b-ehu9ne1xun]  { animation-delay:  420ms; }
.landing-enter-8[b-ehu9ne1xun]  { animation-delay:  490ms; }
.landing-enter-9[b-ehu9ne1xun]  { animation-delay:  560ms; }
.landing-enter-10[b-ehu9ne1xun] { animation-delay:  630ms; }
.landing-enter-11[b-ehu9ne1xun] { animation-delay:  700ms; }
.landing-enter-12[b-ehu9ne1xun] { animation-delay:  770ms; }
.landing-enter-13[b-ehu9ne1xun] { animation-delay:  840ms; }
.landing-enter-14[b-ehu9ne1xun] { animation-delay:  910ms; }
.landing-enter-15[b-ehu9ne1xun] { animation-delay:  980ms; }
.landing-enter-16[b-ehu9ne1xun] { animation-delay: 1050ms; }
.landing-enter-17[b-ehu9ne1xun] { animation-delay: 1120ms; }

/* ===========================================================
   Landing.razor — estilos scoped
   Landing pública de marketing. Reutiliza los tokens del tema
   infinitech vía CSS variables (--color-primary, --color-base-200,
   --color-base-content, etc.) y agrega un set propio de clases
   "landing-*" para hero, secciones, cards, franjas, etc.
   Mobile-first. Breakpoints: sm=640, md=768.
   =========================================================== */

/* ---- Contenedor común -------------------------------------- */
.landing-wrap[b-ehu9ne1xun] {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .landing-wrap[b-ehu9ne1xun] { padding: 0 18px; }
}

/* ---- Header propio (no es el navbar de la app) ------------- */
.landing-nav[b-ehu9ne1xun] {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.93);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 10%, transparent);
}

.landing-nav-in[b-ehu9ne1xun] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 76px;
}

.landing-nav-logo[b-ehu9ne1xun] {
  display: inline-flex;
  align-items: center;
  /* Power2GoLogoLight usa fill: currentColor en las letras. La landing
     no carga app.css (Tailwind/DaisyUI), así que el <a> cae al color
     de link por defecto del navegador (#0000EE, azul/morado). Forzamos
     grafito para que herede el mismo tono oscuro que usa Power2GoLogoDark
     (#404041) en /home y /auth/login. */
  color: var(--grafito, #3A3A3C);
}
.landing-nav-logo[b-ehu9ne1xun]  svg {
  width: auto;
  height: 2rem;
}

@media (min-width: 768px) {
  .landing-nav-logo[b-ehu9ne1xun]  svg { height: 2.25rem; }
}

.landing-nav-links[b-ehu9ne1xun] {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.94rem;
  font-weight: 500;
  color: #6B7280;
}

.landing-nav-links a[b-ehu9ne1xun] { color: inherit; text-decoration: none; }
.landing-nav-links a:hover[b-ehu9ne1xun] { color: var(--azul-vivo, #29A5DD); }

/* Keyboard focus ring en los links del nav (no había focus-visible
   específico para landing, solo el genérico del navegador) */
.landing-nav-links a:focus-visible[b-ehu9ne1xun] {
  outline: 2px solid var(--azul-vivo, #29A5DD);
  outline-offset: 4px;
  border-radius: 4px;
}

.landing-burger[b-ehu9ne1xun] {
  display: none;
  background: transparent;
  border: 0;
  color: var(--grafito, #3A3A3C);
  cursor: pointer;
  /* Hit area 30×30 → ≥44×44 (WCAG 2.5.5 / Apple HIG 44pt).
     Padding 10px 8px + min-width/min-height 44px garantiza el área
     sin importar el tamaño del viewport. */
  padding: 10px 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.landing-burger:focus-visible[b-ehu9ne1xun] {
  outline: 2px solid var(--azul-vivo, #29A5DD);
  outline-offset: 2px;
  border-radius: 8px;
}

/* CTA vive dentro del <nav> tanto en desktop (margin-left:auto empuja
   al extremo derecho) como en mobile (queda como último item del
   dropdown con divisor top-border). */
.landing-nav-cta[b-ehu9ne1xun] { margin-left: auto; }

/* .landing-nav-links a { color: inherit } tiene especificidad
   (0,1,1) y le gana a .landing-btn--azul (0,1,0), así que sin esta
   regla el botón heredaría el gris #6B7280 del padre y se vería como
   link de texto en lugar de botón azul. Empate + orden = victoria. */
.landing-nav-links a.landing-nav-cta[b-ehu9ne1xun],
a.landing-nav-cta:hover[b-ehu9ne1xun] { color: white; }

@media (max-width: 960px) {
  .landing-nav-links[b-ehu9ne1xun] { display: none; }
  .landing-nav-links.on[b-ehu9ne1xun] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: white;
    padding: 22px 24px;
    gap: 14px;
    border-bottom: 1px solid
      color-mix(in oklab, var(--grafito, #3A3A3C) 12%, transparent);
    /* Si la lista crece (idiomas, login, etc.) o el viewport es chico,
       el dropdown no se sale de la pantalla: max-height del alto
       visible menos el header, con scroll interno. */
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .landing-burger[b-ehu9ne1xun] { display: inline-flex; }

  /* CTA dentro del dropdown: reset del margin-left:auto de desktop,
     divisor top-border y ancho completo para diferenciarlo de los
     links de navegación. */
  .landing-nav-cta[b-ehu9ne1xun] {
    margin-left: 0;
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid
      color-mix(in oklab, var(--grafito, #3A3A3C) 12%, transparent);
    text-align: center;
  }
}

/* ---- Tipografía base --------------------------------------- */
/* El proyecto usa el stack del sistema (sin Google Fonts). El hero,
   h2 y eyebrow originalmente usaban Archivo / Manrope / DM Mono. Para
   mantener legibilidad sin sumar requests externos, dejamos los
   headers en sans del sistema pero con font-stretch cuando el browser
   lo soporte (DaisyUI ya define una scale).                              */
.landing-h1[b-ehu9ne1xun] {
  font-size: clamp(2.5rem, 6.4vw, 4.7rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-stretch: 92%;
  margin: 0 0 22px;
}
.landing-h1-accent[b-ehu9ne1xun] { color: #3FB6EC; }

.landing-h2[b-ehu9ne1xun] {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-stretch: 94%;
  margin: 0 0 18px;
}

.landing-sub[b-ehu9ne1xun] {
  color: #6B7280;
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  max-width: 56ch;
}
.landing-sub--light[b-ehu9ne1xun] { color: #CFE0EF; }

.landing-eyebrow[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-vivo, #29A5DD);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.landing-eyebrow[b-ehu9ne1xun]::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #3FB6EC;
  flex-shrink: 0;
}
.landing-eyebrow--dark[b-ehu9ne1xun] { color: #3FB6EC; }

/* ---- Botones ------------------------------------------------ */
/* Definidos con `.landing-page ::deep` para que alcancen a los
   componentes hijos (LandingContactForm, etc.) — el CSS scoped de
   Blazor no cruza del padre al hijo, pero `::deep` sí. Geometría
   espejada del `btn btn-primary` de DaisyUI (alturas 48/40px,
   font-weight 500, pill, focus visible) para que los CTAs de la
   landing se sientan del mismo sistema que el resto de la app,
   conservando los colores de marca de la landing. */
.landing-page[b-ehu9ne1xun]  .landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 1.25rem;
  min-height: 3rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
@media (min-width: 640px) {
  .landing-page[b-ehu9ne1xun]  .landing-btn {
    font-size: 0.875rem;
    padding: 0 1rem;
    min-height: 2.5rem;
  }
}
.landing-page[b-ehu9ne1xun]  .landing-btn:focus-visible {
  outline: 2px solid var(--azul-vivo, #29A5DD);
  outline-offset: 3px;
}
.landing-page[b-ehu9ne1xun]  .landing-btn:disabled,
.landing-page[b-ehu9ne1xun]  .landing-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.landing-page[b-ehu9ne1xun]  .landing-btn:active:not(:disabled):not([disabled]) {
  transform: translateY(0.5px);
}

/* Variante de ancho completo (submit del form). */
.landing-page[b-ehu9ne1xun]  .landing-btn--block { width: 100%; }

/* CTA primario: fondo azul de marca, texto blanco. Hover/active
   oscurecen sutilmente siguiendo el patrón `btn-primary` de DaisyUI
   (`color-mix(base, #000 7%)` en hover, `5%` en active). */
.landing-page[b-ehu9ne1xun]  .landing-btn--azul {
  background-color: var(--azul-vivo, #29A5DD);
  color: var(--blanco, #FFFFFF);
}
.landing-page[b-ehu9ne1xun]  .landing-btn--azul:hover:not(:disabled):not([disabled]) {
  background-color: #269ACE;
}
.landing-page[b-ehu9ne1xun]  .landing-btn--azul:active:not(:disabled):not([disabled]) {
  background-color: #279DD2;
}

/* CTA oscuro (secundario sobre fondos claros). */
.landing-page[b-ehu9ne1xun]  .landing-btn--oscuro {
  background-color: var(--grafito, #3A3A3C);
  color: var(--blanco, #FFFFFF);
}
.landing-page[b-ehu9ne1xun]  .landing-btn--oscuro:hover:not(:disabled):not([disabled]) {
  background-color: #4d4d50;
}

/* CTA ghost sobre fondos oscuros (ej. precio "Comprar"). */
.landing-page[b-ehu9ne1xun]  .landing-btn--linea {
  border-color: color-mix(in oklab, var(--blanco, #FFFFFF) 50%, transparent);
  color: var(--blanco, #FFFFFF);
}
.landing-page[b-ehu9ne1xun]  .landing-btn--linea:hover:not(:disabled):not([disabled]) {
  border-color: var(--azul-vivo, #29A5DD);
  color: var(--azul-vivo, #29A5DD);
}

/* CTA outline sobre fondos claros (precio "Quiero comprar uno"). */
.landing-page[b-ehu9ne1xun]  .landing-btn--linea-osc {
  border-color: color-mix(in oklab, var(--grafito, #3A3A3C) 25%, transparent);
  color: var(--grafito, #3A3A3C);
}
.landing-page[b-ehu9ne1xun]  .landing-btn--linea-osc:hover:not(:disabled):not([disabled]) {
  border-color: var(--grafito, #3A3A3C);
  background-color: var(--grafito, #3A3A3C);
  color: var(--blanco, #FFFFFF);
}

/* ---- Hero --------------------------------------------------- */
.landing-hero[b-ehu9ne1xun] {
  background: var(--profundo, #012B58) !important;
  color: white;
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 108px);
}

.landing-hero[b-ehu9ne1xun]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 62% at 72% 46%,
    #0E7BC4 0%,
    #04437D 42%,
    var(--profundo, #012B58) 74%
  );
  z-index: 0;
}

.landing-hero-grid[b-ehu9ne1xun] {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .landing-hero-grid[b-ehu9ne1xun] {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

.landing-chip[b-ehu9ne1xun] {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 26px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 9px 18px;
  border-radius: 9999px;
}
.landing-chip b[b-ehu9ne1xun] {
  font-weight: 800;
  font-stretch: 95%;
  font-size: 1.3rem;
}
.landing-chip span[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A9C4DC;
}

.landing-hero-acc[b-ehu9ne1xun] {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}

.landing-hero-foto[b-ehu9ne1xun] { position: relative; }
/* hero.webp es un recorte con fondo transparente (450x544), no la foto .jpg
   opaca de antes. Por eso se quitaron `mix-blend-mode: screen` (lavaba la
   imagen y volvía translúcidos los tonos oscuros del gabinete) y el
   `border-radius` (no hay caja visible que redondear).
   El drop-shadow sigue la silueta del recorte; un box-shadow dibujaría un
   rectángulo alrededor del área transparente. */
.landing-hero-foto img[b-ehu9ne1xun] {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
  aspect-ratio: 450 / 544;
  margin-left: auto;
  filter: saturate(1.05) drop-shadow(0 18px 34px rgba(1, 20, 42, 0.45));
}
@media (max-width: 900px) {
  .landing-hero-foto img[b-ehu9ne1xun] { margin: 0 auto; max-width: 330px; }
}

.landing-hero-glow[b-ehu9ne1xun] {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 165, 221, 0.4), transparent 62%);
  filter: blur(50px);
  animation: landing-latido-b-ehu9ne1xun 6s ease-in-out infinite;
  z-index: -1;
}
@keyframes landing-latido-b-ehu9ne1xun {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.07); }
}

/* ---- Franja (strip) ---------------------------------------- */
.landing-franja[b-ehu9ne1xun] {
  background: var(--grafito, #3A3A3C);
  color: white;
  padding: 26px 0;
}
.landing-franja-grid[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.landing-franja-it[b-ehu9ne1xun] { display: flex; flex-direction: column; gap: 3px; }
.landing-franja-it b[b-ehu9ne1xun] {
  font-weight: 700;
  font-stretch: 96%;
  font-size: 1.02rem;
}
.landing-franja-it span[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9CA3AF;
}
@media (max-width: 820px) {
  .landing-franja-grid[b-ehu9ne1xun] { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ---- Secciones genéricas ----------------------------------- */
.landing-sec[b-ehu9ne1xun] {
  padding: clamp(70px, 8.5vw, 124px) 0;
  position: relative;
}
.landing-sec--azul[b-ehu9ne1xun] { background: #012B58; color: white; }
.landing-sec--nube[b-ehu9ne1xun] { background: var(--nube, #F2F6FA); }

/* ---- Cómo funciona (RCR) ---------------------------------- */
.landing-rcr[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 60px;
  align-items: center;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .landing-rcr[b-ehu9ne1xun] { grid-template-columns: 1fr; gap: 40px; }
  .landing-rcr-foto[b-ehu9ne1xun] { order: -1; }
}
.landing-rcr-foto img[b-ehu9ne1xun] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 22px 50px rgba(1, 43, 88, 0.16);
}
@media (max-width: 900px) {
  /* Apilado, la columna se come todo el wrap (~852px a 900px de viewport).
     Sin tope, una foto 4:5 mediría ~1065px de alto y taparía la pantalla
     entera en tablet. */
  .landing-rcr-foto img[b-ehu9ne1xun] { max-width: 520px; margin-inline: auto; }
}

.landing-pasos[b-ehu9ne1xun] { margin-top: 34px; display: flex; flex-direction: column; }
.landing-paso[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 22px;
  padding: 24px 0;
  border-top: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 14%, transparent);
  align-items: start;
}
.landing-paso:last-child[b-ehu9ne1xun] {
  border-bottom: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 14%, transparent);
}
.landing-paso-tag[b-ehu9ne1xun] {
  font-weight: 800;
  font-stretch: 90%;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--azul-vivo, #29A5DD);
  padding-top: 2px;
}
.landing-paso h3[b-ehu9ne1xun] {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 600;
}
.landing-paso p[b-ehu9ne1xun] { color: #6B7280; font-size: 0.98rem; margin: 0; }
@media (max-width: 900px) {
  .landing-paso[b-ehu9ne1xun] { grid-template-columns: 96px 1fr; gap: 16px; }
}

/* ---- Specs (El cargador) ---------------------------------- */
.landing-specs[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.landing-spec[b-ehu9ne1xun] {
  background: white;
  border: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 12%, transparent);
  border-radius: 16px;
  padding: 26px 24px;
}
.landing-spec b[b-ehu9ne1xun] {
  display: block;
  font-weight: 800;
  font-stretch: 95%;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--azul-vivo, #29A5DD);
}
.landing-spec span[b-ehu9ne1xun] { font-size: 0.92rem; color: #6B7280; }
@media (max-width: 900px) {
  .landing-specs[b-ehu9ne1xun] { grid-template-columns: 1fr 1fr; }
}

/* ---- Precios ----------------------------------------------- */
.landing-precios[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 26px;
}
.landing-precio[b-ehu9ne1xun] {
  border-radius: 16px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
}
.landing-precio--azul[b-ehu9ne1xun] { background: #012B58; color: white; }
.landing-precio--blanco[b-ehu9ne1xun] {
  background: white;
  border: 1.5px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 14%, transparent);
}

.landing-precio-et[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.73rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: #3FB6EC;
}
.landing-precio--blanco .landing-precio-et[b-ehu9ne1xun] { color: #6B7280; }

.landing-precio-n[b-ehu9ne1xun] {
  font-weight: 800;
  font-stretch: 94%;
  font-size: 2.7rem;
  letter-spacing: -0.035em;
  line-height: 1;
}
.landing-precio-n small[b-ehu9ne1xun] { font-weight: 600; font-size: 0.95rem; letter-spacing: 0; }

.landing-precio ul[b-ehu9ne1xun] {
  list-style: none;
  margin: 20px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.95rem;
  padding: 0;
}
.landing-precio li[b-ehu9ne1xun] {
  padding-left: 22px;
  position: relative;
  color: #A9C4DC;
}
.landing-precio--blanco li[b-ehu9ne1xun] { color: #6B7280; }
.landing-precio li[b-ehu9ne1xun]::before {
  content: "›";
  position: absolute;
  left: 0;
  color: #3FB6EC;
  font-weight: 700;
}
.landing-precio .landing-btn[b-ehu9ne1xun] { margin-top: auto; }
@media (max-width: 820px) {
  .landing-precios[b-ehu9ne1xun] { grid-template-columns: 1fr; }
}

/* ---- Cifras y lugares (Estaciones) ------------------------- */
.landing-cifras[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.landing-cifra[b-ehu9ne1xun] { border-left: 3px solid #3FB6EC; padding-left: 16px; }
.landing-cifra b[b-ehu9ne1xun] {
  display: block;
  font-weight: 800;
  font-stretch: 94%;
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.landing-cifra span[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7280;
}

.landing-lugares[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-top: 48px;
}
.landing-lugar[b-ehu9ne1xun] {
  background: var(--nube, #F2F6FA);
  border: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 10%, transparent);
  border-radius: 12px;
  padding: 18px 17px;
  font-size: 0.94rem;
  font-weight: 500;
  transition: background-color 0.18s, border-color 0.18s;
}
.landing-lugar:hover[b-ehu9ne1xun] { background: #E4EFF8; border-color: #3FB6EC; }
@media (max-width: 900px) {
  .landing-cifras[b-ehu9ne1xun],
  .landing-lugares[b-ehu9ne1xun] { grid-template-columns: 1fr 1fr; }
}

.landing-mapa[b-ehu9ne1xun] {
  margin-top: 42px;
  border: 2px dashed
    color-mix(in oklab, var(--grafito, #3A3A3C) 22%, transparent);
  border-radius: 16px;
  min-height: 290px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 38px;
  background: var(--nube, #F2F6FA);
}
.landing-mapa p[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: #6B7280;
  margin: 0;
}

/* ---- Cards (Aliados) -------------------------------------- */
.landing-cards[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .landing-cards[b-ehu9ne1xun] { grid-template-columns: 1fr; }
}
.landing-card[b-ehu9ne1xun] {
  background: white;
  border: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 12%, transparent);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.landing-card:hover[b-ehu9ne1xun] {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(1, 43, 88, 0.14);
}
.landing-card-img[b-ehu9ne1xun] {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #012B58;
}
.landing-card-img img[b-ehu9ne1xun] { width: 100%; height: 100%; object-fit: cover; }
.landing-card-txt[b-ehu9ne1xun] {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.landing-card-txt h3[b-ehu9ne1xun] {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
}
.landing-card-txt p[b-ehu9ne1xun] {
  color: #6B7280;
  font-size: 0.95rem;
  margin: 0 0 18px;
}
.landing-card-link[b-ehu9ne1xun] {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--azul-vivo, #29A5DD);
  text-decoration: none;
}
.landing-card-link:hover[b-ehu9ne1xun] { color: #3FB6EC; }

/* ---- Negocio + form (sobre azul) ------------------------- */
.landing-neg[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.landing-benes[b-ehu9ne1xun] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 30px;
}
.landing-bene[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.landing-bene-n[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.83rem;
  color: #3FB6EC;
  padding-top: 3px;
}
.landing-bene h3[b-ehu9ne1xun] { font-size: 1.06rem; margin: 0 0 4px; font-weight: 600; }
.landing-bene p[b-ehu9ne1xun] { color: #A9C4DC; font-size: 0.94rem; margin: 0; }
@media (max-width: 900px) {
  .landing-neg[b-ehu9ne1xun] { grid-template-columns: 1fr; gap: 44px; }
}

/* ---- LandingContactForm (Solicita tu estación) -------------
   Estilos del componente `<LandingContactForm />` que se renderiza
   como child component dentro de esta página. El componente emite
   todo su árbol (form, inputs, labels, etc.) desde su propio Razor
   file, así que los descendientes NO reciben el scope attribute
   `b-[HASH]` de esta página (Landing) — reciben el del archivo
   `LandingContactForm.razor.css` si lo tuviera, pero ese archivo
   quedó vacío a propósito (ver comentario en su header).

   Para que las reglas escritas acá matcheen los descendientes del
   child component, tenemos que usar `::deep` después de un
   selector con scope válido. El compilador de Blazor scoped CSS
   traduce `.landing-page ::deep .landing-input` a
   `.landing-page[b-ehu9ne1xun] .landing-input` — el atributo se
   aplica sólo al `.landing-page` (que es root de Landing y sí lo
   carga) y `.landing-input` matchea cualquier descendiente sin
   requerir atributo. Es exactamente el mismo patrón que ya usa
   `Landing.razor.css` líneas 9-13 (`.landing-page ::deep .landing-btn`)
   y que Privacy.razor.css aprovecha para heredar estilos del
   sitio en su página legal.

   Sin esto, los selectores `.landing-page .landing-input[b-HASH]`
   nunca matchean y los inputs/select/textarea se renderizan con
   el user-agent stylesheet: el `<select>` tomaba el ancho del
   `<option>` más largo y desbordaba la card por la derecha. */

/* ---- Card del form ------------------------------------------ */
/* Espejo de `card bg-base-100 shadow-…` que usan Login.razor y
   AddPaymentMethod.razor. Sin `min-width: 0` el min-content del
   `<input>` empuja el track 1fr del `.landing-neg` y rompe el
   layout en viewports chicos. */
.landing-page[b-ehu9ne1xun]  .landing-form {
  background: #FFFFFF;
  color: #1F2937;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(58, 58, 60, 0.04),
    0 4px 12px rgba(58, 58, 60, 0.06);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 640px) {
  .landing-page[b-ehu9ne1xun]  .landing-form { padding: 24px; }
}
@media (max-width: 639.98px) {
  .landing-page[b-ehu9ne1xun]  .landing-form { padding: 18px 18px 20px; }
}

/* ---- Header (título + subtítulo) ----------------------------- */
.landing-page[b-ehu9ne1xun]  .landing-form-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-page[b-ehu9ne1xun]  .landing-form h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: #1F2937;
  text-wrap: balance;
}
@media (min-width: 640px) {
  .landing-page[b-ehu9ne1xun]  .landing-form h3 { font-size: 1.5rem; }
}
@media (max-width: 639.98px) {
  .landing-page[b-ehu9ne1xun]  .landing-form h3 { font-size: 1.125rem; }
}
.landing-page[b-ehu9ne1xun]  .landing-form-sub {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4B5563;
  text-wrap: pretty;
}

/* ---- Campos (space-y-5 entre ellos, gap-1.5 label→control) -- */
.landing-page[b-ehu9ne1xun]  .landing-form-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.landing-page[b-ehu9ne1xun]  .landing-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.landing-page[b-ehu9ne1xun]  .landing-field-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1F2937;
}
.landing-page[b-ehu9ne1xun]  .landing-opt {
  color: #6B7280;
  font-weight: 400;
}
.landing-page[b-ehu9ne1xun]  .landing-helper {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6B7280;
}

/* ---- Controles: blancos, 1px, radio 12px, focus cyan --------
   `width: 100%` + `max-width: 100%` aquí es lo que evita el
   overflow del `<select>` y el `<textarea>`: sin esto, el
   `<select>` tomaba el ancho del option más largo y se salía
   de la card por la derecha. El textarea sin `max-width: 100%`
   también crecía más allá del card en algunos navegadores
   cuando el contenido era largo. */
.landing-page[b-ehu9ne1xun]  .landing-input {
  display: block;
  background: #FFFFFF;
  border: 1px solid #D6D8DC;
  border-radius: 0.75rem;
  padding: 0 14px;
  color: #1F2937;
  font-size: 1rem;
  line-height: 1.4;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 3rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 640px) {
  .landing-page[b-ehu9ne1xun]  .landing-input {
    font-size: 0.875rem;
    min-height: 2.5rem;
    padding: 0 12px;
  }
}
.landing-page[b-ehu9ne1xun]  .landing-input::placeholder { color: #9CA3AF; }
.landing-page[b-ehu9ne1xun]  .landing-input:hover { border-color: #B6B9C0; }
.landing-page[b-ehu9ne1xun]  .landing-input:focus,
.landing-page[b-ehu9ne1xun]  .landing-input:focus-within {
  outline: none;
  border-color: #29A5DD;
  box-shadow: 0 0 0 3px rgba(41, 165, 221, 0.25);
}
.landing-page[b-ehu9ne1xun]  .landing-input:user-invalid { border-color: #E11D48; }

/* Select: chevron inline, padding-right compensa el icono. */
.landing-page[b-ehu9ne1xun]  .landing-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
.landing-page[b-ehu9ne1xun]  .landing-select:invalid { color: #9CA3AF; }
.landing-page[b-ehu9ne1xun]  .landing-select option { color: #1F2937; }
.landing-page[b-ehu9ne1xun]  .landing-select option[value=""] { color: #6B7280; }

.landing-page[b-ehu9ne1xun]  .landing-textarea {
  min-height: 6.5rem;
  padding-top: 10px;
  padding-bottom: 10px;
  resize: vertical;
  line-height: 1.5;
}

/* `mt-2` extra en el submit = 20 (gap del card) + 8 = 28px, que
   espeja el `mt-7` del botón primario en Login.razor. */
.landing-page[b-ehu9ne1xun]  .landing-form button[type="submit"] { margin-top: 8px; }

/* ---- Alerta de error (alert-error suave, sobre card blanco) -- */
.landing-page[b-ehu9ne1xun]  .landing-form-message {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 12px;
}

/* ---- Modal de éxito ----------------------------------------- */
.landing-page[b-ehu9ne1xun]  .landing-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.landing-page[b-ehu9ne1xun]  .landing-modal[hidden] { display: none; }

.landing-page[b-ehu9ne1xun]  .landing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 20, 42, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: landing-modal-fade-b-ehu9ne1xun 0.2s ease-out;
}
@keyframes landing-modal-fade-b-ehu9ne1xun {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.landing-page[b-ehu9ne1xun]  .landing-modal-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: #FFFFFF;
  color: #1F2937;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow:
    0 24px 60px rgba(1, 20, 42, 0.32),
    0 1px 2px rgba(1, 20, 42, 0.12);
  animation: landing-modal-rise-b-ehu9ne1xun 0.28s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@keyframes landing-modal-rise-b-ehu9ne1xun {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.landing-page[b-ehu9ne1xun]  .landing-modal-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.landing-page[b-ehu9ne1xun]  .landing-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
  flex-shrink: 0;
}
.landing-page[b-ehu9ne1xun]  .landing-modal-icon svg {
  width: 22px;
  height: 22px;
}
.landing-page[b-ehu9ne1xun]  .landing-modal-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-page[b-ehu9ne1xun]  .landing-modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1F2937;
}
@media (min-width: 640px) {
  .landing-page[b-ehu9ne1xun]  .landing-modal-title { font-size: 1.125rem; }
}
.landing-page[b-ehu9ne1xun]  .landing-modal-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4B5563;
  text-wrap: pretty;
}
@media (max-width: 639.98px) {
  .landing-page[b-ehu9ne1xun]  .landing-modal-card { padding: 18px 20px; }
}

/* ---- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .landing-page[b-ehu9ne1xun]  .landing-modal-backdrop,
  .landing-page[b-ehu9ne1xun]  .landing-modal-card { animation: none; }
  .landing-page[b-ehu9ne1xun]  .landing-input { transition: none; }
}

/* ---- FAQ --------------------------------------------------- */
.landing-faq[b-ehu9ne1xun] { margin-top: 42px; max-width: 850px; }
.landing-faq details[b-ehu9ne1xun] {
  border-bottom: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 15%, transparent);
}
.landing-faq summary[b-ehu9ne1xun] {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-weight: 700;
  font-stretch: 98%;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}
.landing-faq summary[b-ehu9ne1xun]::-webkit-details-marker { display: none; }
.landing-faq summary[b-ehu9ne1xun]::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 19px;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--azul-vivo, #29A5DD);
  transition: transform 0.2s;
}
.landing-faq details[open] summary[b-ehu9ne1xun]::after { transform: rotate(45deg); }
.landing-faq p[b-ehu9ne1xun] {
  padding: 0 44px 24px 0;
  color: #6B7280;
  font-size: 0.99rem;
  margin: 0;
}

/* ---- Cierre (CTA final) ----------------------------------- */
.landing-cierre[b-ehu9ne1xun] {
  background: #012B58;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.landing-cierre[b-ehu9ne1xun]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 70% at 50% 50%,
    #0A6DB4 0%,
    transparent 66%
  );
  z-index: 0;
}
.landing-cierre .landing-wrap[b-ehu9ne1xun] { position: relative; z-index: 2; }
.landing-cierre .landing-h2[b-ehu9ne1xun] { margin: 0 auto 18px; max-width: 17ch; }
.landing-cierre p[b-ehu9ne1xun] {
  color: #A9C4DC;
  max-width: 50ch;
  margin: 0 auto 30px;
}
.landing-cierre-acc[b-ehu9ne1xun] {
  display: flex;
  gap: 13px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Soporte flotante --------------------------------------- */
.landing-whatsapp[b-ehu9ne1xun] {
  position: fixed;
  right: max(20px, calc(env(safe-area-inset-right) + 20px));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #128C7E;
  color: var(--blanco, #FFFFFF);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(1, 43, 88, 0.22),
    0 0 0 4px rgba(255, 255, 255, 0.88);
  transition: transform 0.18s ease, background-color 0.18s ease,
    box-shadow 0.18s ease;
}
.landing-whatsapp svg[b-ehu9ne1xun] {
  width: 27px;
  height: 27px;
}
.landing-whatsapp:hover[b-ehu9ne1xun] {
  background: #0F7B70;
  transform: translateY(-2px);
  box-shadow: 0 11px 26px rgba(1, 43, 88, 0.26),
    0 0 0 4px rgba(255, 255, 255, 0.96);
}
.landing-whatsapp:active[b-ehu9ne1xun] { transform: scale(0.96); }
.landing-whatsapp:focus-visible[b-ehu9ne1xun] {
  outline: 3px solid var(--azul-vivo, #29A5DD);
  outline-offset: 4px;
}
.landing-whatsapp-label[b-ehu9ne1xun] {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  max-width: min(220px, calc(100vw - 104px));
  padding: 10px 14px;
  border-radius: 9999px;
  background: var(--blanco, #FFFFFF);
  color: var(--profundo, #012B58);
  box-shadow: 0 8px 24px rgba(1, 43, 88, 0.18);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease,
    visibility 0s linear 0.18s;
}
.landing-whatsapp:hover .landing-whatsapp-label[b-ehu9ne1xun],
.landing-whatsapp:focus-visible .landing-whatsapp-label[b-ehu9ne1xun] {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

/* El botón fijo necesita espacio propio para no cubrir el contenido
   legal del footer al llegar al final de la página. */
.landing-footer[b-ehu9ne1xun] {
  background: var(--grafito, #3A3A3C);
  color: white;
  padding: 60px 0 96px;
}
.landing-footer-grid[b-ehu9ne1xun] {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 34px;
}
.landing-footer-logo[b-ehu9ne1xun] {
  margin-bottom: 16px;
  /* Power2GoLogoLight usa currentColor en el wordmark. En el footer
     grafito debe heredar blanco; el isotipo conserva su gradiente azul. */
  color: var(--blanco, #FFFFFF);
}
.landing-footer-logo[b-ehu9ne1xun]  svg {
  width: auto;
  height: 2rem;
}
.landing-footer h4[b-ehu9ne1xun] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0 0 14px;
  font-weight: 400;
}
.landing-footer ul[b-ehu9ne1xun] {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.93rem;
  padding: 0;
  margin: 0;
}
.landing-footer ul a[b-ehu9ne1xun] { color: #C9CDD4; text-decoration: none; }
.landing-footer ul a:hover[b-ehu9ne1xun] { color: #3FB6EC; }
.landing-footer p[b-ehu9ne1xun] {
  color: #9CA3AF;
  font-size: 0.92rem;
  max-width: 32ch;
  margin: 0;
}
.landing-footer-legal[b-ehu9ne1xun] {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  color: #9CA3AF;
}
.landing-footer-legal a[b-ehu9ne1xun] { color: #9CA3AF; text-decoration: none; }
@media (max-width: 820px) {
  .landing-footer-grid[b-ehu9ne1xun] { grid-template-columns: 1fr 1fr; }
}

/* En mobile pequeño (≤480px) el footer pasa a 1 columna para que
   la fila "Logo+descripción | Producto" no quede apretada: el logo
   necesita respiro y el bloque de descripción compite por ancho
   con la lista de Producto al estar ambos en la misma celda. */
@media (max-width: 480px) {
  .landing-footer-grid[b-ehu9ne1xun] { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Smooth anchor scroll + sticky-nav offset -------------- */
/* El header (.landing-nav) es sticky de 76px. `scroll-behavior: smooth`
   anima el salto a las secciones con id (#como, #cargador, #negocios,
   #faq); `scroll-margin-top: 92px` deja 16px de respiro para que el
   título no quede tapado por el header al llegar. */
.landing-sec[id][b-ehu9ne1xun] { scroll-margin-top: 92px; }

/* ---- Respeta prefers-reduced-motion ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .landing-hero-glow[b-ehu9ne1xun] { animation: none; }
  .landing-card[b-ehu9ne1xun],
  .landing-lugar[b-ehu9ne1xun],
  .landing-btn[b-ehu9ne1xun],
  .landing-faq summary[b-ehu9ne1xun]::after,
  .landing-whatsapp[b-ehu9ne1xun],
  .landing-whatsapp-label[b-ehu9ne1xun] { transition: none; }
  .landing-whatsapp:hover[b-ehu9ne1xun],
  .landing-whatsapp:active[b-ehu9ne1xun] { transform: none; }

  /* Stagger de entrada: cancelar animación y resetear el estado
     base a "final" (opacity/transform/filter en sus valores finales).
     Sin este reset, el contenido quedaría invisible porque
     .landing-enter declara opacity:0 como estado de partida. */
  .landing-enter[b-ehu9ne1xun],
  .landing-enter-1[b-ehu9ne1xun], .landing-enter-2[b-ehu9ne1xun], .landing-enter-3[b-ehu9ne1xun], .landing-enter-4[b-ehu9ne1xun],
  .landing-enter-5[b-ehu9ne1xun], .landing-enter-6[b-ehu9ne1xun], .landing-enter-7[b-ehu9ne1xun], .landing-enter-8[b-ehu9ne1xun],
  .landing-enter-9[b-ehu9ne1xun], .landing-enter-10[b-ehu9ne1xun], .landing-enter-11[b-ehu9ne1xun], .landing-enter-12[b-ehu9ne1xun],
  .landing-enter-13[b-ehu9ne1xun], .landing-enter-14[b-ehu9ne1xun], .landing-enter-15[b-ehu9ne1xun], .landing-enter-16[b-ehu9ne1xun],
  .landing-enter-17[b-ehu9ne1xun] {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* /Components/Pages/LandingContactForm.razor.rz.scp.css */
/* ===========================================================
   LandingContactForm.razor.css — DEPRECADO / VACÍO
   ===========================================================
   Los estilos de este componente fueron migrados a
   `Landing.razor.css` bajo el prefijo `.landing-page`.

   Razón: Blazor scoped CSS sólo agrega el atributo `[b-…]` al
   elemento raíz del componente, NO a sus descendientes. Cuando
   `LandingContactForm` se usa como child component (renderizado
   desde `Landing.razor` con `<LandingContactForm />`), las reglas
   `.landing-input[b-…]`, `.landing-field[b-…]`, etc. NUNCA
   matcheaban, así que los inputs/select/textarea se renderizaban
   con el ancho default del user-agent y desbordaban la card.

   Mover las reglas al scope del padre (`Landing.razor` →
   `<div class="landing-page">`) soluciona el problema: el scope
   attribute SÍ se aplica a ese wrapper y los selectores
   `.landing-page .landing-input { ... }` matchean todos los
   descendientes sin requerir atributo de scope.

   Si este archivo vuelve a poblarse por accidente, los estilos
   nuevos quedarán inertes (no romperán nada) pero el bug de
   overflow puede regresar si las reglas dependen de que los
   selectores scoped matcheen. No reintroducir reglas aquí.
   =========================================================== */
/* /Components/Pages/Login.razor.rz.scp.css */
/* ===========================================================
   Login.razor — estilos scoped
   Sólo el countdown del botón "Reenviar enlace". El resto del
   markup usa utilidades Tailwind/DaisyUI como el resto de la app.
   =========================================================== */

/* Contador "Espera 45s" sobre el botón deshabilitado.
   `tabular-nums` mantiene los dígitos en columnas de ancho fijo: al
   cambiar de 60 a 59 a 58 el botón no salta de tamaño y el usuario
   puede mirar fijo el número esperando reenviar sin sentir un
   parpadeo lateral. Es un detalle chico pero muy visible. */
.resend-countdown[b-4hnai2hn04] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: 0.01em;
  opacity: 0.85;
}
/* /Components/Pages/PaymentMethods.razor.rz.scp.css */
/* ===========================================================
   PaymentMethods.razor — estilos scoped
   Enfoque mobile-first. Breakpoints de Tailwind: sm=640, md=768.
   =========================================================== */

/* ---- Confirmación: bottom-sheet en móvil -------------------- */
@media (max-width: 639.98px) {
  .modal:has(.modal-sheet)[b-cubsajqg2p] {
    align-items: flex-end;
  }
  .modal-sheet[b-cubsajqg2p] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    animation: payment-method-sheet-up-b-cubsajqg2p 0.25s ease-out;
  }
  @keyframes payment-method-sheet-up-b-cubsajqg2p {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* ---- Empty state: animación de entrada --------------------- */
@keyframes empty-state-rise-b-cubsajqg2p {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.empty-state-enter[b-cubsajqg2p] {
  animation: empty-state-rise-b-cubsajqg2p 0.4s ease-out;
}

/* ---- Lista de tarjetas: stagger reveal --------------------- */
.stagger-in > *[b-cubsajqg2p] {
  animation: card-rise-b-cubsajqg2p 0.45s ease-out backwards;
}
.stagger-in > *:nth-child(1)[b-cubsajqg2p] { animation-delay: 0ms; }
.stagger-in > *:nth-child(2)[b-cubsajqg2p] { animation-delay: 60ms; }
.stagger-in > *:nth-child(3)[b-cubsajqg2p] { animation-delay: 120ms; }
.stagger-in > *:nth-child(4)[b-cubsajqg2p] { animation-delay: 180ms; }
.stagger-in > *:nth-child(5)[b-cubsajqg2p] { animation-delay: 240ms; }
.stagger-in > *:nth-child(n+6)[b-cubsajqg2p] { animation-delay: 280ms; }

@keyframes card-rise-b-cubsajqg2p {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Respeta prefers-reduced-motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .empty-state-enter[b-cubsajqg2p],
  .stagger-in > *[b-cubsajqg2p],
  .modal-sheet[b-cubsajqg2p] { animation: none; }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* ===========================================================================
   Privacy.razor.css — Estilos scoped para /privacy

   Blazor scoped CSS funciona así: las clases definidas en este archivo
   reciben un sufijo [b-<HASH>] en ambos lados (selector CSS Y atributo
   en el HTML renderizado). Si uso una clase que NO está definida acá
   (caso típico: las .landing-* que vienen de Landing.razor.css), el HTML
   queda sin scope y el selector de Landing —que SÍ está scoped a su
   propio [b-HASH]— no matchea, así que los estilos no se aplican.

   Para evitar eso, duplicamos acá las reglas de Landing.razor.css que
   Privacy necesita. El bundle final lleva ambos scopes; las clases
   que viven acá matchean los elementos con [b-PRIVACY_HASH] y los
   estilos renderizan. Cuando cambies estilos globales del sitio,
   revisá también este archivo.

   Clases originales en Landing.razor.css que se duplican:
     .landing-page (tokens + base)
     .landing-nav*, .landing-burger, .landing-btn*
     .landing-hero, .landing-h1*, .landing-sub, .landing-eyebrow*
     .landing-sec, .landing-sec--azul, .landing-sec--nube
     .landing-wrap, .landing-enter*, prefers-reduced-motion
     .landing-footer*, .landing-footer-legal*
   =========================================================================== */

.privacy-page[b-uog8o4v56d] {
  --profundo: #012B58;
  --azul-vivo: #29A5DD;
  --azul: #3880C2;
  --grafito: #3A3A3C;
  --nube: #F2F6FA;
  --blanco: #FFFFFF;
  --gris-txt: #6B7280;
  --gris-inv: #A9C4DC;
}

.privacy-page[b-uog8o4v56d] {
  min-height: 100%;
  background: var(--blanco);
  color: var(--grafito);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

.privacy-page *[b-uog8o4v56d],
.privacy-page *[b-uog8o4v56d]::before,
.privacy-page *[b-uog8o4v56d]::after {
  box-sizing: border-box;
}

.privacy-page img[b-uog8o4v56d],
.privacy-page svg[b-uog8o4v56d] {
  display: block;
  max-width: 100%;
}

.privacy-page button[b-uog8o4v56d],
.privacy-page input[b-uog8o4v56d],
.privacy-page select[b-uog8o4v56d],
.privacy-page textarea[b-uog8o4v56d] {
  font: inherit;
}

/* ---- Landing enter: stagger al cargar la página ------------- */
@keyframes landing-enter-b-uog8o4v56d {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.landing-enter[b-uog8o4v56d] {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

@keyframes landing-enter-lift-b-uog8o4v56d {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-enter--no-blur[b-uog8o4v56d] {
  filter: none;
  animation-name: landing-enter-lift-b-uog8o4v56d;
}

@keyframes landing-enter-fade-b-uog8o4v56d {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}
.landing-enter--no-lift[b-uog8o4v56d] {
  transform: none;
  animation-name: landing-enter-fade-b-uog8o4v56d;
}

/* Privacy usa hasta .landing-enter-14. */
.landing-enter-1[b-uog8o4v56d]  { animation-delay:    0ms; }
.landing-enter-2[b-uog8o4v56d]  { animation-delay:   70ms; }
.landing-enter-3[b-uog8o4v56d]  { animation-delay:  140ms; }
.landing-enter-4[b-uog8o4v56d]  { animation-delay:  210ms; }
.landing-enter-5[b-uog8o4v56d]  { animation-delay:  280ms; }
.landing-enter-6[b-uog8o4v56d]  { animation-delay:  350ms; }
.landing-enter-7[b-uog8o4v56d]  { animation-delay:  420ms; }
.landing-enter-8[b-uog8o4v56d]  { animation-delay:  490ms; }
.landing-enter-9[b-uog8o4v56d]  { animation-delay:  560ms; }
.landing-enter-10[b-uog8o4v56d] { animation-delay:  630ms; }
.landing-enter-11[b-uog8o4v56d] { animation-delay:  700ms; }
.landing-enter-12[b-uog8o4v56d] { animation-delay:  770ms; }
.landing-enter-13[b-uog8o4v56d] { animation-delay:  840ms; }
.landing-enter-14[b-uog8o4v56d] { animation-delay:  910ms; }

/* ---- Contenedor común -------------------------------------- */
.landing-wrap[b-uog8o4v56d] {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 768px) {
  .landing-wrap[b-uog8o4v56d] { padding: 0 18px; }
}

/* ---- Header propio ------------------------------------------ */
.landing-nav[b-uog8o4v56d] {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.93);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid
    color-mix(in oklab, var(--grafito, #3A3A3C) 10%, transparent);
}

.landing-nav-in[b-uog8o4v56d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 76px;
}

.landing-nav-logo[b-uog8o4v56d] {
  display: inline-flex;
  align-items: center;
  color: var(--grafito, #3A3A3C);
}
.landing-nav-logo[b-uog8o4v56d]  svg {
  width: auto;
  height: 2rem;
}

@media (min-width: 768px) {
  .landing-nav-logo[b-uog8o4v56d]  svg { height: 2.25rem; }
}

.landing-nav-links[b-uog8o4v56d] {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.94rem;
  font-weight: 500;
  color: #6B7280;
}

.landing-nav-links a[b-uog8o4v56d] { color: inherit; text-decoration: none; }
.landing-nav-links a:hover[b-uog8o4v56d] { color: var(--azul-vivo, #29A5DD); }

.landing-nav-links a:focus-visible[b-uog8o4v56d] {
  outline: 2px solid var(--azul-vivo, #29A5DD);
  outline-offset: 4px;
  border-radius: 4px;
}

.landing-burger[b-uog8o4v56d] {
  display: none;
  background: transparent;
  border: 0;
  color: var(--grafito, #3A3A3C);
  cursor: pointer;
  padding: 10px 8px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.landing-burger:focus-visible[b-uog8o4v56d] {
  outline: 2px solid var(--azul-vivo, #29A5DD);
  outline-offset: 2px;
  border-radius: 8px;
}

.landing-nav-cta[b-uog8o4v56d] { margin-left: auto; }

.landing-nav-links a.landing-nav-cta[b-uog8o4v56d],
a.landing-nav-cta:hover[b-uog8o4v56d] { color: white; }

@media (max-width: 960px) {
  .landing-nav-links[b-uog8o4v56d] { display: none; }
  .privacy-page .landing-nav-links.on[b-uog8o4v56d] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: white;
    padding: 22px 24px;
    gap: 14px;
    border-bottom: 1px solid
      color-mix(in oklab, var(--grafito, #3A3A3C) 12%, transparent);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .landing-burger[b-uog8o4v56d] { display: inline-flex; }

  .privacy-page .landing-nav-cta[b-uog8o4v56d] {
    margin-left: 0;
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid
      color-mix(in oklab, var(--grafito, #3A3A3C) 12%, transparent);
    text-align: center;
  }
}

/* ---- Tipografía --------------------------------------------- */
.landing-h1[b-uog8o4v56d] {
  font-size: clamp(2.5rem, 6.4vw, 4.7rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-stretch: 92%;
  margin: 0 0 22px;
}
.landing-h1-accent[b-uog8o4v56d] { color: #3FB6EC; }

.landing-h2[b-uog8o4v56d] {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-stretch: 94%;
  margin: 0 0 18px;
}

.landing-sub[b-uog8o4v56d] {
  color: #6B7280;
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  max-width: 56ch;
}
.landing-sub--light[b-uog8o4v56d] { color: #CFE0EF; }

.landing-eyebrow[b-uog8o4v56d] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-vivo, #29A5DD);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.landing-eyebrow[b-uog8o4v56d]::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #3FB6EC;
  flex-shrink: 0;
}
.landing-eyebrow--dark[b-uog8o4v56d] { color: #3FB6EC; }

/* ---- Botones (duplicado del .landing-btn de Landing.razor.css,
   pero sin el wrapper `.landing-page ::deep` porque acá todo el
   árbol ya está dentro de .privacy-page y el botón es local). ---- */
.landing-btn[b-uog8o4v56d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 1.25rem;
  min-height: 3rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
@media (min-width: 640px) {
  .landing-btn[b-uog8o4v56d] {
    font-size: 0.875rem;
    padding: 0 1rem;
    min-height: 2.5rem;
  }
}
.landing-btn:focus-visible[b-uog8o4v56d] {
  outline: 2px solid var(--azul-vivo, #29A5DD);
  outline-offset: 3px;
}
.landing-btn:disabled[b-uog8o4v56d],
.landing-btn[disabled][b-uog8o4v56d] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.landing-btn:active:not(:disabled):not([disabled])[b-uog8o4v56d] {
  transform: translateY(0.5px);
}

.landing-btn--azul[b-uog8o4v56d] {
  background-color: var(--azul-vivo, #29A5DD);
  color: var(--blanco, #FFFFFF);
}
.landing-btn--azul:hover:not(:disabled):not([disabled])[b-uog8o4v56d] {
  background-color: #269ACE;
}
.landing-btn--azul:active:not(:disabled):not([disabled])[b-uog8o4v56d] {
  background-color: #279DD2;
}

/* ---- Hero --------------------------------------------------- */
.landing-hero[b-uog8o4v56d] {
  background: var(--profundo, #012B58) !important;
  color: white;
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 108px);
}

.landing-hero[b-uog8o4v56d]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 62% at 72% 46%,
    #0E7BC4 0%,
    #04437D 42%,
    var(--profundo, #012B58) 74%
  );
  z-index: 0;
}

.landing-hero > .landing-wrap[b-uog8o4v56d] { position: relative; z-index: 2; }

/* ---- Secciones genéricas ----------------------------------- */
.landing-sec[b-uog8o4v56d] {
  padding: clamp(70px, 8.5vw, 124px) 0;
  position: relative;
}
.landing-sec--azul[b-uog8o4v56d] { background: #012B58; color: white; }
.landing-sec--nube[b-uog8o4v56d] { background: var(--nube, #F2F6FA); }

/* ---- Footer grafito ----------------------------------------- */
.landing-footer[b-uog8o4v56d] {
  background: var(--grafito, #3A3A3C);
  color: white;
  padding: 60px 0 96px;
}
.landing-footer-grid[b-uog8o4v56d] {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 34px;
}
.landing-footer-logo[b-uog8o4v56d] {
  margin-bottom: 16px;
  color: var(--blanco, #FFFFFF);
}
.landing-footer-logo[b-uog8o4v56d]  svg {
  width: auto;
  height: 2rem;
}
.landing-footer h4[b-uog8o4v56d] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0 0 14px;
  font-weight: 400;
}
.landing-footer ul[b-uog8o4v56d] {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.93rem;
  padding: 0;
  margin: 0;
}
.landing-footer ul a[b-uog8o4v56d] { color: #C9CDD4; text-decoration: none; }
.landing-footer ul a:hover[b-uog8o4v56d] { color: #3FB6EC; }
.landing-footer p[b-uog8o4v56d] {
  color: #9CA3AF;
  font-size: 0.92rem;
  max-width: 32ch;
  margin: 0;
}
.landing-footer-legal[b-uog8o4v56d] {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  color: #9CA3AF;
}
.landing-footer-legal a[b-uog8o4v56d] { color: #9CA3AF; text-decoration: none; }
.landing-footer-legal a.is-active[b-uog8o4v56d] { color: #3FB6EC; }

@media (max-width: 820px) {
  .landing-footer-grid[b-uog8o4v56d] { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .landing-footer-grid[b-uog8o4v56d] { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Tipografía del cuerpo legal ---------------------------- */
.legal-paragraph[b-uog8o4v56d] {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.65;
  color: #374151;
  max-width: 70ch;
  margin: 0 0 1.25rem;
}

.legal-paragraph--intro[b-uog8o4v56d] {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  color: var(--grafito);
}

.legal-list[b-uog8o4v56d] {
  margin: 1.25rem 0 1.75rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #374151;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.6;
}
.legal-list li[b-uog8o4v56d]::marker {
  color: var(--azul-vivo);
  font-weight: 700;
}

.legal-divider[b-uog8o4v56d] {
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--grafito) 12%, transparent);
  margin: 2.5rem 0;
}

.legal-updated[b-uog8o4v56d] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #CFE0EF;
}
.legal-updated[b-uog8o4v56d]::before {
  content: "";
  width: 26px;
  height: 2px;
  background: #3FB6EC;
  flex-shrink: 0;
}

.legal-h2[b-uog8o4v56d] {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--profundo);
}

/* ---- Contacto ARCO ------------------------------------------ */
.legal-contact[b-uog8o4v56d] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 820px) {
  .legal-contact[b-uog8o4v56d] { grid-template-columns: 1fr; gap: 28px; }
}
.legal-contact-info p[b-uog8o4v56d] { color: #CFE0EF; max-width: 48ch; }
.legal-contact-info a[b-uog8o4v56d] { color: #3FB6EC; text-decoration: none; }
.legal-contact-info a:hover[b-uog8o4v56d] { text-decoration: underline; }
.legal-contact-list[b-uog8o4v56d] {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-contact-list li[b-uog8o4v56d] {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  font-size: 0.95rem;
  color: #CFE0EF;
}
.legal-contact-list .legal-contact-label[b-uog8o4v56d] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3FB6EC;
  padding-top: 3px;
}

/* ---- prefers-reduced-motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .landing-enter[b-uog8o4v56d],
  .landing-enter-1[b-uog8o4v56d], .landing-enter-2[b-uog8o4v56d], .landing-enter-3[b-uog8o4v56d], .landing-enter-4[b-uog8o4v56d],
  .landing-enter-5[b-uog8o4v56d], .landing-enter-6[b-uog8o4v56d], .landing-enter-7[b-uog8o4v56d], .landing-enter-8[b-uog8o4v56d],
  .landing-enter-9[b-uog8o4v56d], .landing-enter-10[b-uog8o4v56d], .landing-enter-11[b-uog8o4v56d], .landing-enter-12[b-uog8o4v56d],
  .landing-enter-13[b-uog8o4v56d], .landing-enter-14[b-uog8o4v56d] {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .landing-btn[b-uog8o4v56d] { transition: none; }
}