/* ==========================================================================
   ESTILOS — BM Webs
   ==========================================================================
   1. Variables (colores y medidas)
   2. Base
   3. Botones
   4. Barra de navegación
   5. Portada (hero)
   6. Títulos de sección
   7. Proyectos
   8. Servicios
   9. Proceso
   10. Contacto
   11. Pie de página
   12. Animaciones
   13. Efectos con más vida (portada animada, cinta, luces, botón flotante)
   14. Celular
   ========================================================================== */


/* 1. VARIABLES — cambiá acá los colores de toda la página
   ========================================================================== */
:root {
  --bg: #0b0d12;        /* fondo principal */
  --bg2: #12151d;       /* fondo secundario */
  --card: #161a24;      /* fondo de tarjetas */
  --line: #232836;      /* bordes */
  --text: #e9ecf3;      /* texto principal */
  --muted: #9aa3b5;     /* texto secundario */
  --accent: #7c5cff;    /* color de acento 1 (violeta) */
  --accent2: #22d3ee;   /* color de acento 2 (celeste) */
  --radius: 16px;       /* redondeo de tarjetas */
}


/* 2. BASE
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3 {
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.15;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.grad {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* 3. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: .2s;
}

.btn-primary {
  background: linear-gradient(90deg, var(--accent), #5b8cff);
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px var(--accent);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--muted);
}

.btn-small {
  padding: 9px 18px;
}


/* 4. BARRA DE NAVEGACIÓN
   ========================================================================== */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 13, 18, .8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}

.logo span {
  color: var(--accent2);
}

.links {
  display: flex;
  gap: 28px;
  font-size: .95rem;
  color: var(--muted);
}

.links a:hover {
  color: var(--text);
}

.links a {
  position: relative;
  padding: 4px 0;
}

/* Rayita de color debajo de la sección que se está viendo */
.links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0);
  transition: transform .3s;
}

.links a.activo {
  color: var(--text);
}

.links a.activo::after,
.links a:hover::after {
  transform: scaleX(1);
}

.nav-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boton-menu {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.boton-menu span {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}


/* 5. PORTADA (HERO)
   ========================================================================== */
.hero {
  position: relative;
  padding: 90px 0 80px;
  overflow: hidden;
  isolation: isolate;
}

.pill {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg2);
  font-size: .85rem;
  color: var(--muted);
}

.pill b {
  color: #4ade80;
}

.hero h1 {
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  max-width: 820px;
  margin-bottom: 22px;
}

.hero p {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 34px;
}

.ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.stats {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  margin-top: 64px;
}

.stats b {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
}

.stats span {
  color: var(--muted);
  font-size: .9rem;
}


/* 6. TÍTULOS DE SECCIÓN
   ========================================================================== */
section {
  padding: 90px 0;
}

.section-alt {
  background: var(--bg2);
  border-block: 1px solid var(--line);
}

.head {
  margin-bottom: 44px;
}

.etiqueta {
  color: var(--accent2);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.head h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-top: 8px;
}

.head p {
  color: var(--muted);
  margin-top: 10px;
  max-width: 560px;
}


/* 7. PROYECTOS
   ========================================================================== */

/* Filtros por categoría */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.filters button {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg2);
  color: var(--muted);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: .2s;
}

.filters button:hover,
.filters button.active {
  color: var(--text);
  border-color: var(--accent);
}

/* Grilla de tarjetas */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
}

/* Tarjeta */
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: .25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6);
}

/* Imagen / vista previa */
.shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg2);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .5s;
}

.card:hover .shot img {
  transform: scale(1.04);
}

/* Barrita de navegador sobre la imagen */
.browser {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: rgba(0, 0, 0, .45);
}

.browser i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57;
}

.browser i:nth-child(2) { background: #febc2e; }
.browser i:nth-child(3) { background: #28c840; }

.browser em {
  margin-left: 8px;
  font-style: normal;
  font-size: .7rem;
  color: #cfd5e2;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Vista previa de color (cuando no hay imagen) */
.mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 26px;
  color: #fff;
  text-align: center;
}

.mock b {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
}

.mock span {
  font-size: .9rem;
  opacity: .85;
}

/* Texto de la tarjeta */
.body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.cat {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent2);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.body h3 {
  font-size: 1.3rem;
  margin: 6px 0 8px;
}

.body p {
  flex: 1;
  color: var(--muted);
  font-size: .95rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0;
}

.tags span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg2);
  font-size: .78rem;
  color: var(--muted);
}

.visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .92rem;
}

.visit:hover {
  color: var(--accent2);
}

/* Tarjeta final "¿Tu negocio es el próximo?" */
.card.cta {
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 40px 26px;
  border-style: dashed;
  background: transparent;
  text-align: center;
}

.card.cta h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.card.cta p {
  color: var(--muted);
  margin-bottom: 22px;
}


/* 8. SERVICIOS
   ========================================================================== */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.svc {
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.svc .ic {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .25), rgba(34, 211, 238, .2));
}

.svc .ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.svc p {
  color: var(--muted);
  font-size: .95rem;
}


/* 9. PROCESO
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  counter-reset: paso;
}

.step {
  padding: 24px;
  border-left: 2px solid var(--line);
}

/* Número automático 01, 02, 03... */
.step::before {
  counter-increment: paso;
  content: "0" counter(paso);
  display: block;
  margin-bottom: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 2rem;
  font-weight: 700;
}

.step:nth-child(odd)::before  { color: var(--accent); }
.step:nth-child(even)::before { color: var(--accent2); }

.step h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.step p {
  color: var(--muted);
  font-size: .92rem;
}


/* 10. CONTACTO
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  padding: 48px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 24px;
}

@media (max-width: 820px) {
  .contact {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

.contact h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 8px 0 14px;
}

.contact-info > p {
  color: var(--muted);
  margin-bottom: 26px;
}

/* Botones de WhatsApp y mail */
.direct {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.direct a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: .2s;
}

.direct a:hover {
  border-color: var(--accent);
}

.direct svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Formulario */
form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .85rem;
  color: var(--muted);
}

input,
select,
textarea {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

textarea {
  min-height: 100px;
  resize: vertical;
}


/* 11. PIE DE PÁGINA
   ========================================================================== */
footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}

footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}


/* 12. ANIMACIONES
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: .6s ease;
}

.reveal.show {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { transition: none !important; }
}



/* 13. EFECTOS CON MÁS VIDA
   ========================================================================== */

/* --- Barra de progreso de lectura --- */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 12px var(--accent);
}

/* --- Fondo animado de la portada --- */
.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: flotar-mancha 16s ease-in-out infinite alternate;
}

.m1 { width: 520px; height: 420px; top: -120px; right: 5%;  background: #7c5cff; }
.m2 { width: 420px; height: 360px; top: 20%;   left: -140px; background: #22d3ee; opacity: .3; animation-delay: -5s; }
.m3 { width: 360px; height: 300px; bottom: -120px; right: 30%; background: #ec4899; opacity: .22; animation-delay: -9s; }

@keyframes flotar-mancha {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, 40px) scale(1.12); }
  100% { transform: translate(-40px, 70px) scale(.95); }
}

/* Cuadrícula fina que se desvanece hacia abajo */
.cuadricula {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}

/* Luz que sigue al mouse */
.luz {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, .22), transparent 65%);
  transition: transform .25s ease-out;
  pointer-events: none;
}

/* --- Portada en dos columnas: texto + capturas --- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  align-items: center;
}

/* La palabra que cambia va en su propia línea, así el título no salta */
.rotador {
  display: block;
  min-height: 1.15em;
  white-space: nowrap;
}

.rotador::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: .9em;
  margin-left: 4px;
  vertical-align: -.08em;
  background: var(--accent2);
  animation: parpadeo 1s steps(1) infinite;
}

@keyframes parpadeo {
  50% { opacity: 0; }
}

.pill b {
  display: inline-block;
  animation: latido 1.8s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 10px #4ade80; }
}

/* Capturas flotando */
.hero-visual {
  position: relative;
  height: 440px;
}

.flotante {
  position: absolute;
  width: 78%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  animation: flotar 7s ease-in-out infinite;
}

.flotante .browser {
  position: relative;
  background: rgba(0, 0, 0, .6);
}

.flotante img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.f1 { top: 0;     right: 0;   z-index: 1; --giro: 4deg; }
.f2 { top: 120px; left: 0;    z-index: 2; --giro: -5deg; animation-delay: -2.3s; }
.f3 { top: 230px; right: 6%;  z-index: 3; width: 62%; --giro: 2deg; animation-delay: -4.6s; }

@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(var(--giro)); }
  50%      { transform: translateY(-14px) rotate(var(--giro)); }
}

.chip-flotante {
  position: absolute;
  z-index: 4;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(22, 26, 36, .85);
  backdrop-filter: blur(8px);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
  animation: flotar 6s ease-in-out infinite;
  --giro: 0deg;
}

.c1 { top: 40px;  left: 2%; animation-delay: -1s; }
.c2 { bottom: 0;  right: 0; animation-delay: -3s; }

/* --- Cinta de rubros --- */
.cinta {
  overflow: hidden;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  background: var(--bg2);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.cinta-pista {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: deslizar 32s linear infinite;
}

.cinta span {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.cinta i {
  color: var(--accent);
  font-style: normal;
}

.cinta:hover .cinta-pista {
  animation-play-state: paused;
}

@keyframes deslizar {
  to { transform: translateX(-50%); }
}

/* --- Títulos de sección: rayita de color --- */
.head h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* --- Tarjetas y servicios: luz que sigue al mouse + borde de color --- */
.card,
.svc {
  position: relative;
  isolation: isolate;
}

.card::before,
.svc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, 0%), rgba(124, 92, 255, .16), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.card:hover::before,
.svc:hover::before {
  opacity: 1;
}

.card:hover,
.svc:hover {
  border-color: rgba(124, 92, 255, .55);
}

.card {
  animation: entrar .5s ease backwards;   /* "backwards" deja funcionar el efecto al pasar el mouse */
}

.card:nth-child(2) { animation-delay: .06s; }
.card:nth-child(3) { animation-delay: .12s; }
.card:nth-child(4) { animation-delay: .18s; }
.card:nth-child(5) { animation-delay: .24s; }
.card:nth-child(n+6) { animation-delay: .3s; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.card.cta {
  background: radial-gradient(400px circle at 50% 0%, rgba(124, 92, 255, .14), transparent 70%);
}

.svc {
  transition: .25s;
}

.svc:hover {
  transform: translateY(-4px);
}

.svc:hover .ic {
  transform: rotate(-6deg) scale(1.08);
}

.svc .ic {
  transition: transform .3s;
}

/* --- Proceso: línea de color que une los pasos --- */
.steps {
  position: relative;
}

.step {
  position: relative;
  border-left: 0;
  border-top: 2px solid var(--line);
  padding: 30px 6px 0;
}

.step::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 1s ease .3s;
}

.step.show::after {
  width: 100%;
}

.step::before {
  position: absolute;
  top: -22px;
  left: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--bg);
  font-size: 1rem;
}

.step h3 {
  margin-top: 10px;
}

/* --- Contacto: borde con brillo de color --- */
.contact {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .25), 0 30px 80px -40px rgba(124, 92, 255, .6);
}

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(500px 260px at 0% 0%, rgba(124, 92, 255, .14), transparent 70%),
    radial-gradient(400px 240px at 100% 100%, rgba(34, 211, 238, .1), transparent 70%);
}

/* --- Botón flotante de WhatsApp --- */
.wa-flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .7);
  opacity: 0;
  transform: translateY(20px) scale(.8);
  pointer-events: none;
  transition: .3s;
}

.wa-flotante.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wa-flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: onda 2.2s ease-out infinite;
}

@keyframes onda {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.6); opacity: 0; }
}

.wa-flotante svg {
  width: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .mancha, .flotante, .chip-flotante, .cinta-pista, .card, .wa-flotante::before, .pill b { animation: none !important; }
}


/* 14. CELULAR
   ========================================================================== */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-visual {
    height: 300px;
    max-width: 520px;
  }

  .f2 { top: 80px; }
  .f3 { top: 150px; }
}

@media (max-width: 760px) {
  .boton-menu {
    display: flex;
  }

  .links {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 14px 20px 20px;
    background: rgba(11, 13, 18, .97);
    border-bottom: 1px solid var(--line);
  }

  .links.abierto {
    display: flex;
  }

  /* Con el menú abierto la barra se vuelve sólida (si no, se transparenta el fondo) */
  nav:has(.links.abierto) {
    background: var(--bg);
    backdrop-filter: none;
  }

  .links.abierto {
    background: var(--bg);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, .7);
  }

  .links a {
    padding: 10px 0;
  }

  .links a::after {
    display: none;
  }

  .stats {
    gap: 28px;
    margin-top: 44px;
  }

  .steps {
    row-gap: 46px;
  }
}

@media (max-width: 480px) {
  .hero-visual {
    height: 240px;
  }

  .f2 { top: 60px; }
  .f3 { top: 115px; }

  .chip-flotante {
    font-size: .75rem;
    padding: 7px 11px;
  }

  .nav-derecha .btn-small {
    padding: 8px 14px;
    font-size: .85rem;
  }
}