/* /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; }
}

/* ---- 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;
}

/* ---- Footer ----------------------------------------------- */
.landing-footer[b-ehu9ne1xun] {
  background: var(--grafito, #3A3A3C);
  color: white;
  padding: 60px 0 30px;
}
.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;
  /* Mismo fix que .landing-nav-logo: sin app.css, las letras del logo
     heredan el color por defecto del <a> y se ven moradas. Grafito. */
  color: var(--grafito, #3A3A3C);
}
.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 { transition: 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 — estilos scoped
   ===========================================================
   Espejo del patrón de card usado por Login.razor y
   AddPaymentMethod.razor: card blanco, label sentence case 14px,
   inputs blancos con borde 1px y radio 12px, `space-y-5` entre
   campos y `mt-2` extra antes del submit (≈ `mt-7` del Login).

   El botón (.landing-btn*) y la animación de entrada los provee
   Landing.razor.css; el bloque de botones está prefijado con
   `.landing-page ::deep` para que el CSS scoped del padre cruce
   al hijo. Lo mismo aplica a `.landing-enter`, que es no-op en
   toda la landing y vive en el padre.
   =========================================================== */

/* ---- Card del form ------------------------------------------ */
/* Mismo `card bg-base-100 shadow-…` que Login.razor:30-31 y
   AddPaymentMethod.razor:61-62. Se renderiza dentro del track
   derecho de `.landing-neg` (1fr). Sin min-width:0 el min-content
   del <input> empuja el track más allá de su ancho y rompe el
   layout en viewports chicos. */
.landing-form[b-r9bhstkmw5] {
  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;
}
@media (min-width: 640px) {
  .landing-form[b-r9bhstkmw5] { padding: 24px; }
}

/* ---- Header (título + subtítulo) ----------------------------- */
.landing-form-head[b-r9bhstkmw5] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.landing-form h3[b-r9bhstkmw5] {
  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-form h3[b-r9bhstkmw5] { font-size: 1.5rem; }
}
.landing-form-sub[b-r9bhstkmw5] {
  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-form-fields[b-r9bhstkmw5] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.landing-field[b-r9bhstkmw5] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.landing-field-label[b-r9bhstkmw5] {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #1F2937;
}
.landing-opt[b-r9bhstkmw5] {
  color: #6B7280;
  font-weight: 400;
}
.landing-helper[b-r9bhstkmw5] {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6B7280;
}

/* ---- Controles: blancos, 1px, radio 12px, focus cyan -------- */
.landing-input[b-r9bhstkmw5] {
  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%;
  min-width: 0;
  min-height: 3rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 640px) {
  .landing-input[b-r9bhstkmw5] {
    font-size: 0.875rem;
    min-height: 2.5rem;
    padding: 0 12px;
  }
}

.landing-input[b-r9bhstkmw5]::placeholder { color: #9CA3AF; }
.landing-input:hover[b-r9bhstkmw5] { border-color: #B6B9C0; }

.landing-input:focus[b-r9bhstkmw5],
.landing-input:focus-within[b-r9bhstkmw5] {
  outline: none;
  border-color: #29A5DD;
  box-shadow: 0 0 0 3px rgba(41, 165, 221, 0.25);
}

.landing-input:user-invalid[b-r9bhstkmw5] { border-color: #E11D48; }

/* Select: chevron inline, padding-right compensa el icono. */
.landing-select[b-r9bhstkmw5] {
  -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-select:invalid[b-r9bhstkmw5] { color: #9CA3AF; }
.landing-select option[b-r9bhstkmw5] { color: #1F2937; }
.landing-select option[value=""][b-r9bhstkmw5] { color: #6B7280; }

.landing-textarea[b-r9bhstkmw5] {
  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:230. */
.landing-form button[type="submit"][b-r9bhstkmw5] { margin-top: 8px; }

/* ---- Alerta de error (alert-error suave, sobre card blanco) -- */
.landing-form-message[b-r9bhstkmw5] {
  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-modal[b-r9bhstkmw5] {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.landing-modal[hidden][b-r9bhstkmw5] { display: none; }

.landing-modal-backdrop[b-r9bhstkmw5] {
  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-r9bhstkmw5 0.2s ease-out;
}
@keyframes landing-modal-fade-b-r9bhstkmw5 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.landing-modal-card[b-r9bhstkmw5] {
  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-r9bhstkmw5 0.28s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@keyframes landing-modal-rise-b-r9bhstkmw5 {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.landing-modal-row[b-r9bhstkmw5] {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.landing-modal-icon[b-r9bhstkmw5] {
  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-modal-icon svg[b-r9bhstkmw5] {
  width: 22px;
  height: 22px;
}
.landing-modal-content[b-r9bhstkmw5] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-modal-title[b-r9bhstkmw5] {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1F2937;
}
@media (min-width: 640px) {
  .landing-modal-title[b-r9bhstkmw5] { font-size: 1.125rem; }
}
.landing-modal-body[b-r9bhstkmw5] {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4B5563;
  text-wrap: pretty;
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 639.98px) {
  .landing-form[b-r9bhstkmw5] { padding: 18px 18px 20px; }
  .landing-form h3[b-r9bhstkmw5] { font-size: 1.125rem; }
  .landing-modal-card[b-r9bhstkmw5] { padding: 18px 20px; }
}

/* ---- Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .landing-modal-backdrop[b-r9bhstkmw5],
  .landing-modal-card[b-r9bhstkmw5] { animation: none; }
  .landing-input[b-r9bhstkmw5] { transition: none; }
}
/* /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; }
}