/* Ajustes de marca JsonCorp sobre Materio (modo oscuro, recoloreado a azul). */

/* El fondo del body lo pone el CSS de tema de Materio; acá solo lo que cambia por tema. */
:root {
  --jc-azul: #3b82f6;
  --jc-cian: #06b6d4;
  --jc-papel: #111a2e;
  --jc-borde: rgba(255, 255, 255, .08);
  --jc-sombra: rgba(0, 0, 0, .5);
}

html.light-style {
  --jc-papel: #ffffff;
  --jc-borde: rgba(15, 23, 42, .10);
  --jc-sombra: rgba(15, 23, 42, .15);
}

body { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; }

.logo-marca { height: 40px; width: auto; object-fit: contain; }

/* Logo: por defecto la versión de texto blanco (fondos oscuros). La de texto azul marino solo
   donde el fondo es claro: barra pública y menú del panel en tema claro, y la tarjeta del
   login en claro y semi-oscuro. En semi-oscuro la barra y el menú siguen oscuros, y el pie de
   página es oscuro en todos los temas. */
.logo-jc { display: inline-flex; }
.logo-jc__claro { display: none; }
html[data-tema=claro] .landing-navbar .logo-jc__oscuro,
html[data-tema=claro] .layout-menu .logo-jc__oscuro,
html.light-style .authentication-wrapper .logo-jc__oscuro { display: none; }
html[data-tema=claro] .landing-navbar .logo-jc__claro,
html[data-tema=claro] .layout-menu .logo-jc__claro,
html.light-style .authentication-wrapper .logo-jc__claro { display: inline-block; }
.authentication-wrapper .app-brand .logo-marca { height: 56px; }

/* Semi-oscuro en el sitio público: contenido claro con barra superior oscura, como el menú
   lateral oscuro que Materio usa en el panel. */
html[data-tema=semi] .layout-navbar .landing-navbar {
  background-color: rgba(17, 26, 46, .95) !important;
  backdrop-filter: blur(8px);
}
html[data-tema=semi] .landing-navbar .nav-link,
html[data-tema=semi] .landing-navbar .navbar-toggler,
html[data-tema=semi] .landing-navbar .selector-tema .btn { color: #e6ebf5 !important; }
html[data-tema=semi] .landing-navbar .nav-link.active { color: var(--jc-azul) !important; }
.landing-footer .logo-marca { height: 48px; }
.app-brand .logo-marca { height: 38px; }

.texto-degradado {
  background: linear-gradient(90deg, var(--jc-azul), var(--jc-cian));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bajada { max-width: 680px; }

/* ---------- Navegación por anclas ---------- */
/* Sin scroll-padding: las secciones de Materio ya traen 100 px de relleno arriba, que es donde
   cae el menú fijo. Con margen extra se asomaba una franja del hero detrás del menú. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Hero a pantalla completa ---------- */
/* Es igual en los tres temas: es una foto con sombra, el texto siempre va en blanco. */
.hero-pantalla {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* en celular descuenta la barra del navegador */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  background: #0b1220;
}
.hero-pantalla__foto {
  position: absolute;
  /* La foto ocupa todo el alto bajo el menú y mantiene su proporción: nunca se corta arriba
     (el letrero) ni abajo (el escritorio). Si el ancho no coincide, se ajusta por los costados:
     va anclada a la derecha, donde están las personas, y el borde izquierdo se funde con el
     fondo oscuro, que es donde va el texto. */
  top: 5.5rem;
  right: 0;
  height: calc(100% - 5.5rem);
  width: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.hero-pantalla__sombra {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 9, 17, .94) 0%, rgba(5, 9, 17, .78) 40%, rgba(5, 9, 17, .35) 62%, rgba(5, 9, 17, .05) 82%),
    linear-gradient(0deg, rgba(5, 9, 17, .85) 0%, rgba(5, 9, 17, .35) 35%, transparent 55%),
    linear-gradient(180deg, rgba(5, 9, 17, .7) 0%, rgba(5, 9, 17, .25) 12%, transparent 22%); /* franja arriba: el menú se lee aunque la foto tenga zonas brillantes */
}
.hero-pantalla__texto {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(7rem, 16vh, 10rem);
}
.hero-pantalla h1 {
  color: #fff;
  font-size: clamp(2rem, 4.3vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
  max-width: 21ch;
}
/* La promesa va en su propia línea y con el degradado de la marca: es lo que se tiene que recordar. */
.hero-pantalla__acento {
  display: block;
  background: linear-gradient(90deg, #60a5fa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* La bajada explica qué hacemos: tiene que leerse de un vistazo, no como letra chica. */
.hero-pantalla p {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1rem, 1.3vw, 1.15rem); /* claramente más chica que el titular: es la explicación, no el gancho */
  font-weight: 400;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* Indicador para bajar: parpadea suave y la flecha rebota. */
.hero-deslice {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero-deslice:hover, .hero-deslice:focus-visible { color: #fff; }
.hero-deslice span { animation: deslice-pulso 2s ease-in-out infinite; }
.hero-deslice i { font-size: 1.75rem; line-height: 1; animation: deslice-pulso 2s ease-in-out infinite, deslice-rebote 2s ease-in-out infinite; }
@keyframes deslice-pulso { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes deslice-rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero-deslice span, .hero-deslice i { animation: none; } }

/* Celular: la foto es horizontal y a pantalla completa quedaba recortada a una franja. Acá va
   arriba en cuadrado (encuadrada en las personas), y el texto debajo sobre fondo oscuro.
   Si algún día hay una foto vertical, se vuelve al diseño de pantalla completa con <picture>. */
/* También en cualquier pantalla alta (tablet vertical): ahí la foto a pantalla completa cortaba
   a la persona de adelante. */
@media (max-width: 767.98px), (max-aspect-ratio: 4/5) {
  .hero-pantalla {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 4.5rem; /* alto del menú fijo */
  }
  .hero-pantalla__foto {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: 66% center;
    /* El borde inferior se funde con el fondo en vez de cortar en seco. */
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .hero-pantalla__sombra { display: none; }
  .hero-pantalla__texto { padding-top: 1.25rem; padding-bottom: 6.5rem; }
  .hero-pantalla h1, .hero-pantalla p { text-shadow: none; }
}

/* Menú fijo transparente mientras la foto del hero está a la vista (CSS puro con :has para que no parpadee; sitio.js marca cuándo ya se pasó la foto).
   Al bajar recupera el fondo sólido de Materio. */
/* El prefijo html empata la especificidad de la regla del semi-oscuro y, por ir después, gana. */
html:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar {
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
}
html:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar > .navbar-brand .navbar-toggler,
html:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar .selector-tema .btn { color: #fff !important; }
/* Solo en escritorio: en celular los enlaces viven en un panel desplegable con fondo propio. */
@media (min-width: 992px) {
  html:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar .nav-link { color: #fff !important; }
  html:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar .nav-link.active { text-decoration: underline; text-underline-offset: .5rem; text-decoration-thickness: 2px; }
}
.landing-navbar { transition: background-color .25s ease, box-shadow .25s ease; }

/* ---------- Tarjetas de servicio ---------- */
.tarjeta-servicio { transition: transform .2s ease, border-color .2s ease; border: 1px solid var(--jc-borde); overflow: hidden; }
.tarjeta-servicio:hover { transform: translateY(-4px); border-color: var(--color-servicio); }
.tarjeta-servicio__portada { position: relative; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--color-servicio) 18%, var(--jc-papel)); }
.tarjeta-servicio__portada img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-servicio__icono { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-servicio); }
.tarjeta-servicio__categoria { position: absolute; top: .75rem; left: .75rem; background: rgba(0, 0, 0, .55); color: #fff; }
.tarjeta-servicio__dato { color: var(--color-servicio); }

/* ---------- Ficha de servicio ---------- */
.ficha-hero { padding-top: 8.5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-servicio) 18%, transparent), transparent 60%); }
.ficha-acento { color: var(--color-servicio); }
.ficha-boton { background: var(--color-servicio); border-color: var(--color-servicio); color: #fff; }
.ficha-boton:hover { filter: brightness(1.1); color: #fff; }
.ficha-estadistica { background: color-mix(in srgb, var(--color-servicio) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-servicio) 25%, transparent); }
.ficha-plan--destacado { border: 2px solid var(--color-servicio) !important; }
.ficha-video { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: .75rem; }
.ficha-galeria img { width: 100%; height: auto; border-radius: .75rem; object-fit: cover; aspect-ratio: 16 / 9; }

/* ---------- Varios ---------- */
.problema-card { border-left: 4px solid var(--bs-danger, #ff4c51); }
.foto-equipo { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid var(--jc-azul); }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.whatsapp-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.h-px-150 { height: 150px !important; }
.politica h2 { scroll-margin-top: 7rem; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; }
.modal.d-block { background: transparent; }
.lista-editable .input-group + .input-group { margin-top: .5rem; }
.miniatura { width: 96px; height: 64px; object-fit: cover; border-radius: .5rem; }

/* ---------- WhatsApp flotante: latido ---------- */
/* Doble golpe como un corazón (pum-pum, pausa) más una onda que se expande: llama la atención
   sin marear. Se apaga al pasar el mouse y para quien pidió reducir el movimiento. */
.whatsapp-flotante { animation: wsp-latido 1.6s ease-in-out infinite; }
.whatsapp-flotante::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  z-index: -1;
  animation: wsp-onda 1.6s ease-out infinite;
}
.whatsapp-flotante:hover, .whatsapp-flotante:focus-visible { animation-play-state: paused; }
.whatsapp-flotante:hover::after { animation: none; opacity: 0; }

@keyframes wsp-latido {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.14); }
  20% { transform: scale(1); }
  30% { transform: scale(1.1); }
}
@keyframes wsp-onda {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante, .whatsapp-flotante::after { animation: none; }
}
/* El verde oficial de WhatsApp en vez del verde lima de Materio: el botón y la onda iguales. */
.whatsapp-flotante.btn-success { background-color: #25d366; border-color: #25d366; color: #fff; }
.whatsapp-flotante.btn-success:hover { background-color: #1ebe5b; border-color: #1ebe5b; color: #fff; }

/* ---------- Legibilidad del hero ---------- */
/* Además del degradado, una sombra suave separa las letras de la foto donde pasan sobre zonas
   claras. En la parte con degradado de color se usa drop-shadow: text-shadow se vería a través
   de las letras transparentes y ensuciaría el degradado. */
.hero-pantalla h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero-pantalla__acento {
  text-shadow: none;
  background-image: linear-gradient(90deg, #7cc0ff, #5ee7ff);
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .6));
}

/* ---------- Logo y enlaces del menú público, más grandes ---------- */
/* El logo de la barra usaba la regla de .app-brand (34 px, pensada para el menú del panel). */
.landing-navbar .app-brand .logo-marca { height: 52px; }
@media (min-width: 992px) {
  .landing-navbar .navbar-nav .nav-link { font-size: 1.05rem; font-weight: 600; padding-left: .9rem !important; padding-right: .9rem !important; }
}
@media (max-width: 991.98px) {
  .landing-navbar .app-brand .logo-marca { height: 42px; }
  .landing-nav-menu .navbar-nav .nav-link { font-size: 1.1rem; font-weight: 600; padding-top: .7rem; padding-bottom: .7rem; }
}

/* Tablet vertical: hay más ancho, la foto entra en 4:3 sin recortar a nadie. */
@media (min-width: 768px) and (max-aspect-ratio: 4/5) {
  .hero-pantalla__foto { aspect-ratio: 4 / 3; object-position: 62% center; }
  .hero-pantalla__texto { padding-top: 2rem; }
}

/* ---------- Sección de soluciones por tipo ---------- */
.soluciones-tipos__pestanas .nav-link {
  border-radius: 50rem;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  border: 1px solid var(--jc-borde);
}
.soluciones-tipos__pestanas .nav-link:not(.active):hover { border-color: var(--jc-azul); }
/* Materio le pone fondo y sombra de tarjeta al tab-content: acá las tarjetas ya son tarjetas. */
.soluciones-tipos__contenido { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.tarjeta-a-medida { border: 2px dashed var(--jc-borde); background: transparent; transition: border-color .2s ease, transform .2s ease; }
.tarjeta-a-medida:hover { border-color: var(--jc-azul); transform: translateY(-4px); }
.tarjeta-servicio__demo { position: absolute; top: .75rem; right: .75rem; }
.soluciones-tipos { overflow-x: clip; }

/* ---------- Carrusel de vitrinas ---------- */
/* Ocupa todo el ancho de la ventana aunque esté dentro del .container: así las vecinas se asoman
   desde los bordes de la pantalla y la del centro puede ser grande. */
.carrusel {
  --ancho-slide: min(1040px, 84vw);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.carrusel__pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem calc((100vw - var(--ancho-slide)) / 2) 1.5rem;
  scrollbar-width: none;
  outline: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__slide {
  flex: 0 0 var(--ancho-slide);
  scroll-snap-align: center;
  opacity: .35;
  transform: scale(.92);
  transition: opacity .45s ease, transform .45s ease;
}
.carrusel__slide.activa { opacity: 1; transform: none; }
.carrusel__slide--cta { flex-basis: min(380px, 84vw); }
.carrusel__slide--cta .tarjeta-a-medida { min-height: 100%; }

.vitrina {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  border: 1px solid var(--jc-borde);
  border-radius: 1.25rem;
  overflow: hidden;
  margin: 0;
}
.vitrina__pantalla {
  padding: clamp(1rem, 2.5vw, 2rem);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--color-servicio) 45%, transparent), transparent 60%),
    color-mix(in srgb, var(--color-servicio) 14%, #0b1220);
  display: flex;
  align-items: center;
}
.vitrina__navegador {
  width: 100%;
  border-radius: .75rem;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55);
}
.vitrina__barra { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #1c2333; }
.vitrina__barra span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.vitrina__barra span:nth-child(2) { background: #febc2e; }
.vitrina__barra span:nth-child(3) { background: #28c840; }
.vitrina__barra small {
  margin-inline: auto; padding: 1px 14px; border-radius: 6px; background: #0b1220; color: #94a3b8;
  font-size: .7rem; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vitrina__fotos { position: relative; aspect-ratio: 16 / 10; background: #0b1220; }
.vitrina__fotos img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .9s ease;
}
.vitrina__fotos img.activa { opacity: 1; }
.vitrina__icono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--color-servicio); }
.vitrina__info { padding: clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.vitrina__titulo { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 700; }

.carrusel__flecha {
  position: absolute; top: calc(50% - 1.5rem); transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--jc-borde);
  background: color-mix(in srgb, var(--jc-papel) 85%, transparent); color: inherit;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); z-index: 2;
  transition: background-color .2s ease, border-color .2s ease;
}
.carrusel__flecha:hover { border-color: var(--jc-azul); background: var(--jc-azul); color: #fff; }
.carrusel__flecha--prev { left: max(1rem, calc((100vw - var(--ancho-slide)) / 2 - 4rem)); }
.carrusel__flecha--next { right: max(1rem, calc((100vw - var(--ancho-slide)) / 2 - 4rem)); }
.carrusel__flecha[disabled] { opacity: 0; pointer-events: none; }
.carrusel__puntos { display: flex; justify-content: center; gap: .5rem; }
.carrusel__puntos button {
  width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 1rem;
  background: var(--jc-borde); background: color-mix(in srgb, currentColor 25%, transparent);
  transition: width .3s ease, background-color .3s ease;
}
.carrusel__puntos button.activo { width: 1.75rem; background: var(--jc-azul); }

@media (max-width: 991.98px) {
  .vitrina { grid-template-columns: 1fr; }
  .carrusel__flecha { display: none; }
}
@media (max-width: 575.98px) {
  .carrusel { --ancho-slide: 88vw; }
  .carrusel__pista { gap: .75rem; }
  .vitrina__pantalla { padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { scroll-behavior: auto; }
  .carrusel__slide, .vitrina__fotos img { transition: none; }
}

@media (max-width: 575.98px) {
  /* En celular las pestañas se desplazan de costado en vez de apilarse en cinco renglones. */
  .soluciones-tipos__pestanas { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
  .soluciones-tipos__pestanas .nav-link { white-space: nowrap; }
}

/* ---------- Portada en tema claro ---------- */
/* La portada seguía oscura en el tema claro: el selector cambiaba todo menos la primera
   pantalla, parecía no funcionar y la sección 2 quedaba blanca pegada a una portada oscura.
   En claro el velo sobre la foto es claro y el texto oscuro, igual que el resto del sitio. */
html[data-tema=claro] .hero-pantalla { background: #f4f5fa; color: #0f172a; }
html[data-tema=claro] .hero-pantalla__sombra {
  background:
    linear-gradient(90deg, rgba(244, 245, 250, .97) 0%, rgba(244, 245, 250, .86) 40%, rgba(244, 245, 250, .35) 62%, rgba(244, 245, 250, 0) 82%),
    linear-gradient(0deg, rgba(244, 245, 250, .92) 0%, rgba(244, 245, 250, .3) 35%, transparent 55%),
    linear-gradient(180deg, rgba(244, 245, 250, .9) 0%, rgba(244, 245, 250, .3) 12%, transparent 22%);
}
html[data-tema=claro] .hero-pantalla h1 { color: #0f172a; text-shadow: none; }
html[data-tema=claro] .hero-pantalla__acento {
  background-image: linear-gradient(90deg, #2563eb, #0891b2);
  filter: none;
}
html[data-tema=claro] .hero-pantalla p { color: #334155; text-shadow: none; }
html[data-tema=claro] .hero-deslice,
html[data-tema=claro] .hero-deslice:hover { color: #0f172a; }

/* Menú sobre la portada clara: letras oscuras, como en el resto del sitio claro (el logo cambia solo de versión). */
html[data-tema=claro]:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar > .navbar-brand .navbar-toggler,
html[data-tema=claro]:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar .selector-tema .btn { color: #0f172a !important; }
@media (min-width: 992px) {
  html[data-tema=claro]:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar .nav-link { color: #1f2a44 !important; }
  html[data-tema=claro]:has([data-hero]) .layout-navbar:not(.fuera-de-hero) .landing-navbar .nav-link.active { color: var(--jc-azul) !important; }
}
/* La sección 2 continúa la portada: mismo fondo en claro (en oscuro ya coinciden). */
html[data-tema=claro] .soluciones-tipos { background: #f4f5fa; }


/* ---------- Menú público de lado a lado ---------- */
/* El fondo ocupa todo el ancho; el contenido deja ~6.5 % de margen a cada lado para no quedar
   pegado a los bordes. Sin las
   esquinas redondeadas de Materio, que solo tienen sentido en una barra flotante. */
.layout-navbar .navbar.landing-navbar {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding-left: clamp(1rem, 6.5vw, 8rem) !important;
  padding-right: clamp(1rem, 6.5vw, 8rem) !important;
}

/* ---------- Menú siempre oscuro (temas oscuro y semi-oscuro) ---------- */
/* Un solo color en todo momento, más oscuro que el fondo de la página y que las tarjetas
   (#111a2e): antes era transparente sobre la foto y al bajar tomaba el azul de las tarjetas,
   así que cambiaba de tono y se confundía con el contenido. La línea fina de abajo termina de
   separarlo. Mayor especificidad que la regla de transparencia sobre la portada. */
html:not([data-tema=claro]) nav.layout-navbar .navbar.landing-navbar,
html:not([data-tema=claro]):has([data-hero]) nav.layout-navbar:not(.fuera-de-hero) .navbar.landing-navbar {
  background-color: #050911 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: none !important;
}