/* Reset muy simple */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Variables básicas */
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;

  --color-primary: #0d77be;        /* Azul R&CIA */
  --color-primary-dark: #0a63a0;   /* Hover azul más oscuro */

  --color-text: #111111;
  --color-text-muted: #6b7280;
  --color-border: #dddddd;

  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-soft: 0 18px 35px rgba(0, 0, 0, 0.12);

  --container-width: 1160px;

  /* ==========================
     FONDO GLOBAL
     ========================== */
  --bg-top:    #F1F6F9;  /* casi blanco */
  --bg-mid:    #D5DEE2;  /* gris frío */
  --bg-soft:   #CFDEE9;  /* celeste muy suave */
  --bg-accent: #5388AF;  /* celeste/azul acento */

  /* RGB para usar con rgba(var(--xxx-rgb), a) */
  --bg-top-rgb: 241 246 249;
  --bg-mid-rgb: 213 222 226;
  --bg-soft-rgb: 207 222 233;
  --bg-accent-rgb: 83 136 175;
}


/* =========================================================
   Fondo global (único) + layout sticky-footer
   ========================================================= */
html, body{
  min-height: 100%;
}

/* Fondo global (fallback en html) */
html{
  background:
    radial-gradient(900px 700px at 88% 120%,
      rgba(var(--bg-accent-rgb), 0.34) 0%,
      rgba(var(--bg-accent-rgb), 0.14) 40%,
      rgba(var(--bg-accent-rgb), 0.00) 75%
    ),
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 22%,
      var(--bg-top) 50%,
      var(--bg-mid) 82%,
      var(--bg-soft) 100%
    ) !important;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Body general + Fondo global
   - El degradé SIEMPRE vive en body para evitar "todo blanco" si existe un wrapper con fondo.
   - El resto del layout debe quedar transparente (main/wrappers), para que se vea el fondo único. */
body{
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--color-text);
  line-height: 1.5;
  font-weight: 400;

  /* Fondo global (blanco arriba → celeste abajo) */
  background:
    radial-gradient(900px 700px at 88% 120%,
      rgba(var(--bg-accent-rgb), 0.34) 0%,
      rgba(var(--bg-accent-rgb), 0.14) 40%,
      rgba(var(--bg-accent-rgb), 0.00) 75%
    ),
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 22%,
      var(--bg-top) 50%,
      var(--bg-mid) 82%,
      var(--bg-soft) 100%
    ) !important;
  background-repeat: no-repeat;
  background-size: cover;

  /* Sticky footer */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* El main empuja el footer al fondo cuando hay poco contenido */
main{
  flex: 1 0 auto;
}

/* IMPORTANTE: si algún wrapper pinta blanco, lo neutralizamos acá.
   Mantener la lista corta y genérica. */
main,
.page,
.site-main,
.site-content,
.content,
.content-wrap,
.wrapper,
#app,
#root{
  background: transparent !important;
}

/* Footer no se achica */
footer{
  flex-shrink: 0;
}

/* =========================================================
   Componentes base
   ========================================================= */

/* Botones genéricos */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.18);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Links tipo texto */
.link {
  font-size: 0.9rem;
  color: var(--color-primary);
}

.link:hover {
  text-decoration: underline;
}

/* Contenedor */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* Tipografía – jerarquía básica */
h1, h2, h3, h4 {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

p, li, span, label, input, textarea, button {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Links globales */
a {
  color: var(--color-text);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
}

/* =========================================
   CARD LEGENDARIA – Vehículos (Global)
   ========================================= */

.vcard{
  --vcard-radius: 24px;
  --vcard-border: rgba(0,0,0,.10);
  --vcard-shadow: var(--shadow-soft);
  --vcard-media-bg: #eef2f7;

  --cta-h: 34px;                 /* alto del área precio/ver */
  --line: rgba(13,119,190,.35);  /* línea sutil */

  display: flex;
  flex-direction: column;
  border-radius: var(--vcard-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--vcard-border);
  box-shadow: var(--vcard-shadow);
  color: var(--color-text);
  text-decoration: none;
}

/* Imagen: 4:3 fijo, cover, sin zoom */
.vcard-media{
  background: var(--vcard-media-bg);
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}
.vcard-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
  transition: none;
}

/* Body: alturas controladas para que NO se agrande */
.vcard-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Título: máximo 2 líneas */
.vcard-title{
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
  color: rgba(17,24,39,.92);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.02rem * 1.25 * 2); /* reserva 2 líneas siempre */
}

/* Meta: 1 línea (evita que empuje la card) */
.vcard-meta{
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA (precio/consultar -> Ver) */
.vcard-cta{
  margin-top: 2px;
  height: var(--cta-h);
  overflow: hidden;
}

.vcard-cta-stack{
  transform: translateY(0);
  transition: transform .28s ease;
}

.vcard-cta-row{
  height: var(--cta-h);
  display: flex;
  align-items: center;
  position: relative;
}

/* La línea sutil "debajo" del texto visible */
.vcard-cta-row::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--line);
}

/* Precio / Consultar */
.vcard-price{
  font-weight: 800;
  font-size: 1.03rem;
  color: var(--color-primary);
}

/* Ver (revelado en hover) */
.vcard-view{
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--color-primary);
}

/* Hover SOLO en desktop (sin zoom, sin lift): mueve la línea/stack */
@media (hover:hover) and (pointer:fine){
  .vcard:hover .vcard-cta-stack{
    transform: translateY(calc(var(--cta-h) * -1));
  }
}

/* Accesibilidad: si navegan con teclado, que haga lo mismo */
.vcard:focus-visible{
  outline: 3px solid rgba(13,119,190,.25);
  outline-offset: 3px;
}
@media (hover:hover) and (pointer:fine){
  .vcard:focus-visible .vcard-cta-stack{
    transform: translateY(calc(var(--cta-h) * -1));
  }
}

/* =========================================
   OVERRIDES – Card Legendaria
   - Precio centrado
   - Línea azul más angosta
   - Hover SOLO cuando pasás por el área del precio (no por la imagen)
   ========================================= */

/* Centrar Precio y "Ver" */
.vcard-cta-row{
  justify-content: center;
  text-align: center;
}

/* Línea azul más angosta y centrada */
.vcard-cta-row::after{
  left: 50%;
  transform: translateX(-50%);
  width: 72%;         /* ajustá 60–85% a gusto */
  right: auto;
}

/* IMPORTANTE: sacar el hover de toda la card */
@media (hover:hover) and (pointer:fine){
  .vcard:hover .vcard-cta-stack{
    transform: translateY(0) !important;
  }

  /* Hover SOLO en el área precio */
  .vcard-cta:hover .vcard-cta-stack{
    transform: translateY(calc(var(--cta-h) * -1)) !important;
  }
}

/* (Opcional) Si querés que con teclado también revele "Ver" al enfocar la card */
@media (hover:hover) and (pointer:fine){
  .vcard:focus-visible .vcard-cta-stack{
    transform: translateY(calc(var(--cta-h) * -1)) !important;
  }
}

/* =========================================
   Línea: abajo en Precio, arriba en Ver
   ========================================= */

/* Por defecto (Precio): línea abajo */
.vcard-cta-row::after{
  top: auto;
  bottom: 2px;
}

/* En la fila 2 (Ver): línea arriba */
.vcard-cta-stack .vcard-cta-row:nth-child(2)::after{
  bottom: auto;
  top: 2px;
}

/* Separador (·) con más espacio */
.vcard-meta span + span::before{
  content: "\00B7";
  display: inline-block;
  margin: 0 4px;      /* <-- separa más (probá 8–14px) */
  color: var(--color-text-muted);
  font-weight: 700;
  opacity: .9;
}

/* Ocultar hamburguesa en desktop (evita la línea) */
.nav-toggle{
  display: none;
}

/* Mostrar hamburguesa solo en mobile */
@media (max-width: 860px){
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* =========================================================
   GRID GLOBAL – Vehículos (Home + Inventario)
   (evita depender de home.css para el layout del inventario)
   ========================================================= */
.vehicle-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* 2 columnas */
@media (max-width: 900px){
  .vehicle-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1 columna */
@media (max-width: 600px){
  .vehicle-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   CARD LEGENDARIA – Vehículos (la que renderiza inventario.js)
   Clases: .vcard .vcard-media .vcard-body .vcard-title .vcard-meta .vcard-cta
   ========================================================= */

.vcard{
  --vcard-radius: 24px;
  --vcard-border: rgba(0,0,0,.10);
  --vcard-shadow: var(--shadow-soft);
  --vcard-media-bg: #eef2f7;

  --cta-h: 34px;                 /* alto del área precio/ver */
  --line: rgba(13,119,190,.35);  /* línea sutil */

  display: flex;
  flex-direction: column;
  border-radius: var(--vcard-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--vcard-border);
  box-shadow: var(--vcard-shadow);
  color: var(--color-text);
  text-decoration: none;
}

/* Imagen: 4:3 fijo, cover */
.vcard-media{
  background: var(--vcard-media-bg);
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}
.vcard-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
  transition: none;
}

/* Body: alturas controladas */
.vcard-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Título: 2 líneas máximo */
.vcard-title{
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.25;
  color: rgba(17,24,39,.92);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.02rem * 1.25 * 2);
}

/* Meta: 1 línea */
.vcard-meta{
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Separador · entre spans, con buen espaciado */
.vcard-meta span + span::before{
  content: "\00B7";
  display: inline-block;
  margin: 0 10px;      /* <- más separado (subí/bajá a gusto) */
  color: var(--color-text-muted);
  font-weight: 700;
  opacity: .9;
}

/* CTA (precio/consultar -> Ver) */
.vcard-cta{
  margin-top: 2px;
  height: var(--cta-h);
  overflow: hidden;
}

.vcard-cta-stack{
  transform: translateY(0);
  transition: transform .28s ease;
}

.vcard-cta-row{
  height: var(--cta-h);
  display: flex;
  align-items: center;
  justify-content: center; /* precio centrado */
  text-align: center;
  position: relative;
}

/* Línea sutil, más angosta y centrada */
.vcard-cta-row::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;              /* <- menos ancha */
  height: 1px;
  background: var(--line);
}

/* En la fila 1 (Precio): línea abajo */
.vcard-cta-stack .vcard-cta-row:nth-child(1)::after{
  top: auto;
  bottom: 2px;
}

/* En la fila 2 (Ver): línea arriba */
.vcard-cta-stack .vcard-cta-row:nth-child(2)::after{
  bottom: auto;
  top: 2px;
}

/* Precio / Consultar */
.vcard-price{
  font-weight: 800;
  font-size: 1.03rem;
  color: var(--color-primary);
}

/* Ver */
.vcard-view{
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--color-primary);
}

/* Hover SOLO cuando pasás por el área del precio (no por toda la card) */
@media (hover:hover) and (pointer:fine){
  .vcard:hover .vcard-cta-stack{ transform: translateY(0) !important; }
  .vcard-cta:hover .vcard-cta-stack{
    transform: translateY(calc(var(--cta-h) * -1)) !important;
  }
}

/* Focus */
.vcard:focus-visible{
  outline: 3px solid rgba(13,119,190,.25);
  outline-offset: 3px;
}



/* ==========================
   RYCIA_BG_FIX_v3 – HARD FORCE
   (Si algún CSS/inline te pisa el fondo, esto lo recupera)
   ========================== */
html, body{
}
html{
  background:
    radial-gradient(900px 700px at 88% 120%,
      rgba(var(--bg-accent-rgb), 0.34) 0%,
      rgba(var(--bg-accent-rgb), 0.14) 40%,
      rgba(var(--bg-accent-rgb), 0.00) 75%
    ),
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 22%,
      var(--bg-top) 50%,
      var(--bg-mid) 82%,
      var(--bg-soft) 100%
    ) !important;
  background-repeat: no-repeat;
  background-size: cover;
}
body{
  background:
    radial-gradient(900px 700px at 88% 120%,
      rgba(var(--bg-accent-rgb), 0.34) 0%,
      rgba(var(--bg-accent-rgb), 0.14) 40%,
      rgba(var(--bg-accent-rgb), 0.00) 75%
    ),
    linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 22%,
      var(--bg-top) 50%,
      var(--bg-mid) 82%,
      var(--bg-soft) 100%
    ) !important;
  background-repeat: no-repeat;
  background-size: cover;
}
:root{
  --cardnav-h: 60px;
  --cardnav-gap: 16px;
  --cardnav-offset: calc(var(--cardnav-h) + var(--cardnav-gap) + env(safe-area-inset-top, 0px));
}

/* ===========================
   iOS viejo: fallback para aspect-ratio
   (Safari iPhone 6/7/8)
   =========================== */

/* Asegura que el contenedor de media se comporte como bloque */
.vcard-media{
  display: block;
  position: relative;
}

/* Fallback: si el navegador NO soporta aspect-ratio, fijamos altura con padding */
@supports not (aspect-ratio: 1 / 1){
  .vcard-media{
    height: 0;
    padding-top: 75%; /* 4:3 => 3/4 = 0.75 */
  }
  .vcard-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}





/* =========================================================
   RYCIA_BG_SCROLL_PRIMARY_FIX
   Motivo: tus variables *-rgb están en formato "13 119 190"
   pero las usás dentro de rgba(var(--x-rgb), 0.xx).
   Para que funcione en todos los navegadores, redefinimos las
   variables RGB con COMAS y forzamos un único fondo basado en:
   blanco (#fff) → azul corporativo (#0d77be) con progresión al scroll.
   Pegado al FINAL para ganar la cascada.
   ========================================================= */

:root{
  --color-primary: #0d77be;
  --bg-white: #ffffff;

  /* IMPORTANTE: formato con comas para rgba() */
  --color-primary-rgb: 13, 119, 190;

  /* Si tu fondo actual usa estas vars, las pisamos para que respondan al azul corporativo */
  --bg-top: #ffffff;
  --bg-mid: rgba(var(--color-primary-rgb), 0.10);
  --bg-soft: rgba(var(--color-primary-rgb), 0.32);

  /* Esta es la que aparece en tu CSS actual (bg-accent-rgb) */
  --bg-accent-rgb: 13, 119, 190;
}

/* Neutraliza cualquier background previo del body */
html{ background: var(--bg-white) !important; }

body{
  background: transparent !important;
  position: relative;
  isolation: isolate;
}

/* Si algún wrapper grande te tapa el fondo, esto lo deja transparente */
main, .page, .wrapper, .site, .site-main, .site-content, #app, #root{
  background: transparent !important;
}

/* Fondo real: overlay con recorrido en 220vh para que el azul se note al scrollear.
   Ajustá 220vh → 280vh (más lento) o 160vh (más rápido). */
body::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(1100px 900px at 60% 118%,
      rgba(var(--color-primary-rgb), 0.30) 0%,
      rgba(var(--color-primary-rgb), 0.16) 45%,
      rgba(var(--color-primary-rgb), 0.00) 74%
    ),
    linear-gradient(180deg,
      var(--bg-white) 0%,
      var(--bg-white) 18%,
      rgba(var(--color-primary-rgb), 0.06) 40%,
      rgba(var(--color-primary-rgb), 0.18) 65%,
      rgba(var(--color-primary-rgb), 0.42) 85%,
      var(--color-primary) 100%
    ),
    /* base sólida para cubrir TODO el alto del documento */
    linear-gradient(var(--color-primary), var(--color-primary));

  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 1000vh, 100% 1000vh, 100% 100%;
  background-position: top, top, top;
}

/* Icono external-link (evita emoji en Android) */
.icon-ext{
  width: 0.7em;
  height: 0.7em;
  display: block;
}

/* Wrapper opcional si querés controlar padding/alineación */
.ig-promo__btnIcon,
.btn-extIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .4em;         /* ajustá a gusto */
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-0.02em); /* micro-ajuste visual */
}

/* Si necesitás un tamaño fijo (en vez de 1em), descomentá:
.icon-ext{ width: 14px; height: 14px; }
*/

/* Layout del footer-bottom (alineación tipo la captura) */
.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-copy{ margin: 0; }

.footer-sep{
  opacity: .35;
  user-select: none;
}

/* --- Crédito: Sogamu oculto con blur y aparece al hover --- */
.footer-credit{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

.footer-credit__label{
  opacity: .85;
}

.footer-credit__link{
  /* oculto por defecto */
  opacity: 0;
  filter: blur(10px);
  transform: translateY(1px);
  pointer-events: none;

  /* estética */
  color: inherit;
  font-weight: 600;
  text-decoration: none;

  /* transición */
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}

/* Reveal al hover y al foco (teclado) */
.footer-credit:hover .footer-credit__link,
.footer-credit:focus-within .footer-credit__link,
.footer-credit.is-revealed .footer-credit__link{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;

  /* pill sutil premium (opcional) */
  padding: .18rem .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.footer-credit__link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-credit__link:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* --- Crédito: sin layout shift (no mueve los |) --- */
.footer-credit{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.footer-credit__label{
  opacity: .85;
}

/* IMPORTANTE: la pill (padding/borde) existe SIEMPRE, pero transparente cuando está oculto */
.footer-credit__link{
  display: inline-flex;
  align-items: center;

  padding: .18rem .45rem;          /* <- fijo */
  border-radius: 999px;            /* <- fijo */
  border: 1px solid transparent;   /* <- fijo (no agrega ancho en hover) */
  background: rgba(255,255,255,0); /* <- fijo (solo cambia alpha) */
  box-sizing: border-box;

  /* oculto por defecto */
  opacity: 0;
  filter: blur(10px);
  transform: translateY(1px);
  pointer-events: none;

  color: inherit;
  font-weight: 600;
  text-decoration: none;

  transition:
    opacity .22s ease,
    filter .22s ease,
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease;
  will-change: opacity, filter, transform;
}

/* Reveal: NO cambies padding/borde acá, solo alpha/blur */
.footer-credit:hover .footer-credit__link,
.footer-credit:focus-within .footer-credit__link,
.footer-credit.is-revealed .footer-credit__link{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;

  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.footer-credit__link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-credit__link:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* separadores: que no se estiren ni “bailen” */
.footer-sep{ flex: 0 0 auto; }

/* Quitar “marco/sombra” solo en móvil en la sección de categorías */
@media (max-width: 768px) {
  /* 1) Si el negro viene de los overlays laterales (muy común) */
  .types-fade::before,
  .types-fade::after {
    content: none !important;   /* elimina los fades */
  }

  /* 2) Por si viene de sombras/filtros en wrappers */
  .home-body-styles,
  .types-fade,
  .body-style-shell,
  .types-strip {
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
  }
}

/* FOOTER: "Desarrollado por Sogamu" siempre visible (sin hover/blur) */
.footer-dev{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  opacity: 1;
}

.footer-dev__link{
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
  pointer-events: auto !important;

  text-decoration: none;
  font-weight: 650;
  color: inherit; /* o poné un color fijo si querés */
}

/* Si antes tenías hover que cambiaba cosas, neutralizalo */
.footer-dev__link:hover{
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-decoration: underline; /* opcional */
}