/* =========================================================
   FURMATES – custom.css (limpio y ordenado)
   Objetivo: KV hero + helpers de layout + scaffold vitals
========================================================= */

/* =========================
   0) Font (Sora)
========================= */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap");

/* =========================
   1) Variables / Base
========================= */
:root{
  /* Brand */
  --fm-blue: #0064ff;
  --fm-sky:  #50c8ff;
  --fm-sky2: #a0ebff;
  --fm-navy: #001e46;

  --fm-cta-bg: rgba(160,235,255,.8); /* #a0ebff @ 80% */

  /* Layout */
  --fm-container: 1320px;
  --fm-gutter: 16px; /* mobile */
}

@media (min-width: 768px){
  :root{ --fm-gutter: 20px; }
}
@media (min-width: 1200px){
  :root{ --fm-gutter: 24px; }
}
@media (min-width: 1400px){
  :root{ --fm-gutter: 32px; }
}

html, body{
  width: 100%;
  overflow-x: hidden;
}

body{
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   2) Container (Classic)
   - mantenemos Bootstrap pero ajustamos a 1320 y gutters
========================= */
.container{
  width: 100% !important;
  max-width: var(--fm-container) !important;
  padding-left: var(--fm-gutter) !important;
  padding-right: var(--fm-gutter) !important;
}

/* =========================
   3) Full-bleed helpers
========================= */
.furmates-fullbleed{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Inner centrado dentro de full-bleed */
.furmates-wrap{
  max-width: var(--fm-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fm-gutter);
  padding-right: var(--fm-gutter);
}

/* Evita que #content.page-home meta padding lateral y arruine el full-bleed */
#content.page-home{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================
   4) Sections base
========================= */
.fm-section{
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (min-width: 768px){
  .fm-section{ padding-top: 64px; padding-bottom: 64px; }
}
@media (min-width: 1400px){
  .fm-section{ padding-top: 80px; padding-bottom: 80px; }
}

/* =========================================================
   5) HERO (KV)
   Reglas clave:
   - El media es overlay absoluto a la derecha (para tapar el texto).
   - overflow-y visible (para “apoyar abajo” sin recortar arriba).
   - Perro “baja” con translateY (no con bottom agresivo).
========================================================= */

.fm-hero{
  background: var(--fm-blue);
  color: #fff;
  overflow-x: hidden;
  overflow-y: visible; /* CLAVE: permite “bajar” el perro sin recortarlo */
}

.fm-hero__inner{
  position: relative;
  min-height: 640px;
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (max-width: 991.98px){
  .fm-hero__inner{
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* Copy */
.fm-hero__copy{
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.fm-hero__title{
  margin: 0 0 22px;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--fm-sky2);
  font-size: clamp(44px, 5.2vw, 96px);
}

.fm-hero__brand{
  color: #fff;
  text-transform: none; /* por si algún reset raro lo pisa */
}

.fm-hero__lead{
  margin: 0 0 32px;
  font-weight: 500;
  line-height: 1.2;
  max-width: 42ch;
  font-size: clamp(18px, 2.2vw, 24px);
  color: #fff; /* pedido */
}

.fm-hero__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 34px;
  border-radius: 999px;
  font-weight: 600; /* pedido (antes 800) */
  font-size: clamp(16px, 1.6vw, 28px);
  text-decoration: none;
  background: var(--fm-cta-bg);
  color: #fff;
  transition: filter .15s ease;
}

.fm-hero__cta:hover{
  color: #0064ff;
}

/* Media overlay (desktop) */
.fm-hero__media{
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(640px, 46vw);
  height: 100%;
  z-index: 3;          /* arriba del texto para que lo tape */
  pointer-events: none;
  overflow: visible;   /* permite que el perro “salga” */
}

/* Perro principal */
.fm-hero__dog{
  position: absolute;
  right: -10px;
  bottom: 0;
  height: 115%;
  width: auto;
  max-width: none;
  transform: translateY(10%); /* CLAVE: “apoya” abajo aunque el PNG tenga aire */
  transform-origin: bottom right;
}

/* Perro fantasma atrás */
.fm-hero__dog-ghost{
  position: absolute;
  right: -140px;
  bottom: 0;
  height: 115%;
  width: auto;
  max-width: none;
  opacity: 0.22;
  transform: translateY(8%);
  transform-origin: bottom right;
}

/* Ajuste fino para pantallas grandes */
@media (min-width: 1400px){
  .fm-hero__media{
    width: min(720px, 48vw);
  }
  .fm-hero__dog{
    right: -150px;
    height: 110%;
    transform: translateY(10%);
  }
  
}

/* Mobile/tablet: stack (sin overlay invasivo) */
@media (max-width: 991.98px){
  .fm-hero__media{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 360px;
    z-index: 1; /* atrás del texto en mobile */
    margin-top: 18px;
  }

  .fm-hero__dog,
  .fm-hero__dog-ghost{
    right: 50%;
    bottom: 0;
    height: 110%;
    transform: translate(50%, 10%);
  }

  .fm-hero__dog-ghost{
    transform: translate(65%, 8%);
    opacity: 0.18;
  }
}




/* =========================================================
   6) VITALS (scaffold)
========================================================= */
.fm-vitals{
  position: relative;
}

.fm-vitals__slide{
  position: relative;
}

.fm-vitals__bg img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

@media (max-width: 767.98px){
  .fm-vitals__bg img{
    height: 360px;
  }
}

.fm-vitals__content{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}


/* =========================================================
   FURMATES – HEADER (KV)  |  sobrescribe theme.css
   ========================================================= */

/* 1) Banda azul única + sin bordes/sombras */
#header,
#header .header-nav,
#header .header-top {
  background: var(--fm-blue) !important; /* #0064ff */
  border: 0 !important;
  box-shadow: none !important;
}

#header .header-nav {
  margin-bottom: 0 !important;
}

#header .header-top {
  padding-top: 0px;   /* aire como KV */
  padding-bottom: 18px;
}

/* 2) Links blancos (incluye menú y dropdowns) */
#header a,
#header a:visited,
#header .dropdown,
#header .dropdown-toggle,
#header .dropdown-item,
#header .language-selector,
#header .currency-selector {
  color: #fff !important;
  text-decoration: none;
}

/* Hover sutil (sin underline) */
#header a:hover {
  text-decoration: none !important;
  opacity: .92;
}

/* 3) Logo más grande (tu logo 366x90) */
#header .top-logo {
  display: flex;
  align-items: flex-start;
  min-height: 0 !important;
}

#header .top-logo img {
  width: auto !important;
  height: 90px !important;      /* KV */
  max-height: 90px !important;  /* pisa el max-height:2rem del theme */
}

/* 4) Menú principal: tamaño / peso / espaciado KV */
#header .header-top a[data-depth="0"],
#header .top-menu a[data-depth="0"] {
  color: #fff !important;
  text-transform: none !important; /* KV no va en mayúsculas */
  font-size: 18px;                 /* ~1.125rem */
  font-weight: 500;                /* más KV (no tan pesado como 600) */
  letter-spacing: 0;
  padding: 10px 18px;              /* aire horizontal */
}

/* Si querés un poquito más “firmes” (opcional):
#header .top-menu a[data-depth="0"] { font-weight: 600; }
*/

/* 5) Fila superior derecha (Moneda/Idioma + íconos) */
#header .header-nav .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding-top: 10px;
  padding-bottom: 6px;
}

/* Tipito más chico arriba (KV) */
#header .header-nav,
#header .header-nav .dropdown-toggle {
  font-size: 14px !important;
  font-weight: 500;
}

/* 6) Ocultar temporalmente (sin borrar para futuro) */
#_desktop_user_info,
#_desktop_cart,
#search_widget,
#header .blockcart,
#header .user-info {
  display: none !important;
}

/* 7) Evitar “líneas” o espacios raros debajo del header */
#header .header-top,
#header .header-nav {
  border-bottom: 0 !important;
}

@media (max-width: 575.98px){
  #header .top-logo img{ height: 64px !important; max-height: 64px !important; }
  #header .header-top{ padding-top: 14px; padding-bottom: 12px; }
}

.fm-social {
  color: #ffffff; /* o el color que quieras */
  margin-left: 15px;
  transition: 0.3s ease;
}

.fm-social:hover {
  color: #FFD24C; /* ejemplo hover Furmates */
}

.fm-social svg {
  display: block;
}

/* =========================================================
   FURMATES – HEADER KV (ajustes layout + logo + redes)
   ========================================================= */

/* Topbar: todo a la derecha en una sola línea */
#header .header-nav .row{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#header .header-nav .fm-topbar{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  margin-left: auto;
}

/* Evitar que "Contacte con nosotros" se corte en 2/3 líneas */
#header .header-nav #_desktop_contact_link,
#header .header-nav #_desktop_contact_link #contact-link,
#header .header-nav #_desktop_contact_link a{
  white-space: nowrap !important;
}

/* Moneda + Idioma en línea (sin márgenes del theme) */
#header .header-nav .currency-selector,
#header .header-nav .language-selector,
#header .header-nav #_desktop_contact_link{
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
}

/* Redes */
#header .header-nav .fm-header-social{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: 8px;
}

#header .header-nav .fm-social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fff;
}

#header .header-nav .fm-social svg{
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

/* Logo ~30% más grande */
#header #_desktop_logo img.logo,
#header #_desktop_logo img{
  height: 117px !important;      /* 90px * 1.3 */
  max-height: 117px !important;
  width: auto !important;
}

/* Menú principal alineado a la derecha */
#header .header-top .header-top-right{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Asegura que el contenedor del menú no “se estire” raro */
#header .header-top .header-top-right #_desktop_top_menu,
#header .header-top .header-top-right .menu{
  margin-left: auto;
}

/* =========================================================
   FURMATES – LOGO SVG FIX (no shrink + size up)
   ========================================================= */

#header #_desktop_logo{
  display: flex;
  align-items: center;
}

/* Contenedor del logo */
#header #_desktop_logo .top-logo,
#header #_desktop_logo a{
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: none !important;
}

/* Caso 1: SVG inline */
#header #_desktop_logo svg{
  height: 117px !important;   /* 90px * 1.3 */
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  flex: 0 0 auto !important;
}

/* Caso 2: SVG como <img src="logo.svg"> */
#header #_desktop_logo img.logo,
#header #_desktop_logo .top-logo img{
  height: 80px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  flex: 0 0 auto !important;
}

/* Caso 3: SVG como <object>/<embed> */
#header #_desktop_logo object,
#header #_desktop_logo embed{
  height: 117px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  flex: 0 0 auto !important;
}

/* Ocultar login y carrito SOLO en la topbar Furmates */
#header .header-nav .fm-topbar__nav1 #_desktop_user_info,
#header .header-nav .fm-topbar__nav1 #_desktop_cart,
#header .header-nav .fm-topbar__nav1 .user-info,
#header .header-nav .fm-topbar__nav1 .blockcart{
  display: none !important;
}

/* =========================================================
   FURMATES – TOPBAR (displayNav1 + displayNav2 alineado y en blanco)
   ========================================================= */

/* 1) El contenedor de hooks en una sola línea */
#header .header-nav .fm-topbar__nav1{
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}

/* 2) Forzar que cada bloque del hook no se vaya a otra línea */
#header .header-nav .fm-topbar__nav1 > *{
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Los wrappers típicos de PS (contacto/idioma/moneda/user/cart) */
#header .header-nav #_desktop_contact_link,
#header .header-nav #_desktop_language_selector,
#header .header-nav #_desktop_currency_selector,
#header .header-nav #_desktop_user_info,
#header .header-nav #_desktop_cart{
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Color blanco (porque los módulos traen _gray-darker y se ven negros) */
#header .header-nav .fm-topbar__nav1,
#header .header-nav .fm-topbar__nav1 a,
#header .header-nav .fm-topbar__nav1 span,
#header .header-nav .fm-topbar__nav1 i,
#header .header-nav .fm-topbar__nav1 ._gray-darker,
#header .header-nav .fm-topbar__nav1 .dropdown-toggle{
  color: #fff !important;
}

/* 5) Evitar que “Contacte con nosotros” se parta */
#header .header-nav .fm-topbar__nav1 #contact-link a,
#header .header-nav .fm-topbar__nav1 #_desktop_contact_link a{
  white-space: nowrap !important;
}

/* 6) OCULTAR el texto “Moneda:” (dejamos solo ARS $) */
#header .header-nav .fm-topbar__nav1 .currency-selector .hidden-sm-down,
#header .header-nav .fm-topbar__nav1 .currency-selector .currency-label,
#header .header-nav .fm-topbar__nav1 .currency-selector .label{
  display: none !important;
}

/* 7) Alinear los dropdowns y compactar altura */
#header .header-nav .fm-topbar__nav1 .dropdown{
  display: inline-flex !important;
  align-items: center !important;
}
#header .header-nav .fm-topbar__nav1 .dropdown-menu{
  color: #111; /* el menú desplegable puede ir oscuro, así se lee */
}

/* 8) (Opcional) si NO querés login y carrito en la franja superior */
#header .header-nav .fm-topbar__nav1 #_desktop_user_info,
#header .header-nav .fm-topbar__nav1 #_desktop_cart{
  display: none !important;
}

/* =========================================================
   FURMATES – TOPBAR FIX (alineación + dropdowns visibles)
   ========================================================= */

/* 1) Topbar en una línea y alineado */
#header .header-nav .fm-topbar,
#header .header-nav .fm-topbar__nav1{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}

/* 2) Normalización de altura y baseline (esto suele ser el verdadero culpable) */
#header .header-nav .fm-topbar__nav1,
#header .header-nav .fm-topbar__nav1 *{
  line-height: 1.2 !important;
}

/* 3) Cada módulo (contacto/idioma/moneda) en flex + sin paddings raros */
#header .header-nav .fm-topbar__nav1 #_desktop_contact_link,
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Forzar que el trigger (dropdown-toggle) sea clickeable y no se “aplane” */
#header .header-nav .fm-topbar__nav1 .dropdown,
#header .header-nav .fm-topbar__nav1 .dropdown-toggle{
  display: inline-flex !important;
  align-items: center !important;
}

#header .header-nav .fm-topbar__nav1 .dropdown-toggle{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
}

/* 5) Color blanco en toda la franja superior */
#header .header-nav .fm-topbar__nav1,
#header .header-nav .fm-topbar__nav1 a,
#header .header-nav .fm-topbar__nav1 span,
#header .header-nav .fm-topbar__nav1 i,
#header .header-nav .fm-topbar__nav1 ._gray-darker{
  color: #fff !important;
}

/* 6) “Moneda:” ocultar SOLO el label, sin romper el dropdown */
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .currency-selector .hidden-sm-down,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .currency-selector .currency-label,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .currency-selector .label{
  display: none !important;
}

/* 7) Dropdowns: fondo celeste + texto oscuro + items visibles */
#header .header-nav .fm-topbar__nav1 .dropdown-menu{
  background: #50c8ff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-top: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
  min-width: 180px !important;
}

#header .header-nav .fm-topbar__nav1 .dropdown-menu a,
#header .header-nav .fm-topbar__nav1 .dropdown-menu button,
#header .header-nav .fm-topbar__nav1 .dropdown-menu .dropdown-item{
  color: #0b1b2b !important; /* contraste */
  background: transparent !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  display: block !important;
  white-space: nowrap !important;
}

#header .header-nav .fm-topbar__nav1 .dropdown-menu a:hover,
#header .header-nav .fm-topbar__nav1 .dropdown-menu button:hover,
#header .header-nav .fm-topbar__nav1 .dropdown-menu .dropdown-item:hover{
  background: rgba(255,255,255,.35) !important;
}

/* 8) Fix del rectángulo blanco “fantasma” (suele ser un input/ul sin estilo) */
#header .header-nav .fm-topbar__nav1 .dropdown-menu *{
  background-color: transparent !important;
}
/* =========================================================
   FURMATES – TOPBAR ALIGN FIX (internos reales)
   ========================================================= */

/* Contenedor superior */
#header .header-nav .fm-topbar,
#header .header-nav .fm-topbar__nav1{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}

/* Wrappers de cada módulo */
#header .header-nav .fm-topbar__nav1 #_desktop_contact_link,
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector{
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 🔥 CLAVE: alinear los elementos internos que el theme pone con baseline raro */
#header .header-nav .fm-topbar__nav1 #_desktop_contact_link a,
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector .dropdown-toggle,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .dropdown-toggle,
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector select,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector select,
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector .expand-more,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .expand-more{
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;        /* unifica alturas */
  line-height: 22px !important;   /* unifica baseline */
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
}

/* Evitar que el theme meta márgenes/paddings que tiran para abajo */
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector *,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector *,
#header .header-nav .fm-topbar__nav1 #_desktop_contact_link *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Texto blanco */
#header .header-nav .fm-topbar__nav1,
#header .header-nav .fm-topbar__nav1 a,
#header .header-nav .fm-topbar__nav1 span,
#header .header-nav .fm-topbar__nav1 i,
#header .header-nav .fm-topbar__nav1 ._gray-darker{
  color: #fff !important;
}


/* =========================================================
   FURMATES – TOPBAR: usar <select> en desktop (evita doble Español)
   ========================================================= */

/* 1) OCULTAR el botón dropdown desktop (duplica “Español”/flecha) */
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector .btn-unstyle.hidden-sm-down,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .btn-unstyle.hidden-sm-down{
  display: none !important;
}

/* 2) MOSTRAR el <select> también en desktop (estaba hidden-md-up) */
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector select.hidden-md-up,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector select.hidden-md-up{
  display: inline-block !important;
}

/* 3) Ocultar labels que sobran */
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector #language-selector-label,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector #currency-selector-label{
  display: none !important;
}

/* 4) Estilo del SELECT en la topbar (blanco, prolijo, sin fondo) */
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector select,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: transparent !important;
  border: 0 !important;

  color: #fff !important;
  font-weight: 500;
  font-size: 14px;

  padding: 0 18px 0 0 !important; /* deja espacio para “flecha” fake */
  margin: 0 !important;
  line-height: 1 !important;
  height: 22px !important;

  cursor: pointer;
}

/* 5) Flechita “fake” para el select (porque el nativo depende del browser) */
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector .language-selector,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector{
  position: relative;
}

#header .header-nav .fm-topbar__nav1 #_desktop_language_selector .language-selector::after,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .currency-selector::after{
  content: "▾";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 12px;
  pointer-events: none;
}

/* 6) Alineación general */
#header .header-nav .fm-topbar,
#header .header-nav .fm-topbar__nav1{
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: nowrap !important;
}

#header .header-nav .fm-topbar__nav1 #_desktop_contact_link{
  display: flex !important;
  align-items: center !important;
}

#header .header-nav .fm-topbar__nav1 #_desktop_contact_link a{
  color: #fff !important;
  white-space: nowrap !important;
}

/* =========================================================
   FURMATES – Flechitas select (más grandes y centradas)
   ========================================================= */

#header .header-nav .fm-topbar__nav1 #_desktop_language_selector .language-selector::after,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector .currency-selector::after{
  font-size: 24px !important;      /* antes 12px */
  font-weight: 400 !important;
  right: -2px !important;          /* un pelín más afuera */
  top: 50% !important;
  transform: translateY(-52%) !important; /* centradita */
  line-height: 1 !important;
}

/* Un poco más de aire a la derecha para que no se pise el texto */
#header .header-nav .fm-topbar__nav1 #_desktop_language_selector select,
#header .header-nav .fm-topbar__nav1 #_desktop_currency_selector select{
  padding-right: 22px !important;  /* antes 18px */
}

#header {
    color: #FFF; /* menú hamburguesa blanco */

}

#mobile_top_menu_wrapper {
    background: transparent; /* fondo del menú movile sin color */

}

/* =========================
   FURMATES – Footer KV (azul)
   ========================= */

/* Color KV (del mock): rgb(0,101,255) = #0065FF */
:root{
  --furmates-footer-bg: #0064FF;
  --furmates-footer-text: rgba(255,255,255,.88);
  --furmates-footer-text-strong: #FFFFFF;
  --furmates-footer-divider: rgba(255,255,255,.18);
}

/* Quita padding/estilos del footer por defecto y pinta el contenedor */
#footer{
  padding-top: 0;
}

#footer .footer-container{
  background: var(--furmates-footer-bg);
  padding: 3.5rem 0 2.25rem;
  margin-top: 0;
  box-shadow: none;
}

/* Títulos (Productos / Nuestra empresa / Su cuenta / Información...) */
#footer .footer-container .h3,
#footer .footer-container .h4,
#footer .footer-container .block-contact-title,
#footer #block_myaccount_infos .myaccount-title,
#footer #block_myaccount_infos .myaccount-title a{
  color: var(--furmates-footer-text-strong) !important;
  font-weight: 700;
  text-transform: none; /* si querés MAYÚSCULAS, borrá esta línea */
}

/* Links (listas) */
#footer .footer-container li a,
#footer .footer-container .block-contact,
#footer .footer-container #contact-infos{
  color: var(--furmates-footer-text) !important;
}

#footer .footer-container li a:hover{
  color: var(--furmates-footer-text-strong) !important;
  text-decoration: underline;
}

/* Email (link) un poco más destacado */
#footer .footer-container #contact-infos a[href^="mailto:"]{
  color: var(--furmates-footer-text-strong) !important;
  font-weight: 600;
  text-decoration: none;
}
#footer .footer-container #contact-infos a[href^="mailto:"]:hover{
  text-decoration: underline;
}

/* Sacar “bloquecitos” mobile por defecto (fondo gris y bordes) */
#footer .footer-container .links ul{
  background: transparent !important;
}
#footer .footer-container .links ul > li{
  padding: 0 !important;
  font-weight: 400 !important;
  border-bottom: 0 !important;
}
#footer .footer-container .links ul > li a{
  color: var(--furmates-footer-text) !important;
}

/* Acordeones mobile: título + íconos */
#footer .footer-container .links .title{
  padding: .75rem 0;
  border-bottom: 1px solid var(--furmates-footer-divider);
  background: transparent;
}
#footer .footer-container .links .title .h3{
  color: var(--furmates-footer-text-strong) !important;
}
#footer .footer-container .links .navbar-toggler .material-icons{
  color: var(--furmates-footer-text-strong) !important;
}

/* Contact block: evitar el gris del theme */
#footer .footer-container .block-contact{
  font-size: .95rem;
}

/* Aire entre columnas (desktop) */
@media (min-width: 992px){
  #footer .footer-container .wrapper{
    padding-right: 2rem !important;
    padding-left: 0 !important;
  }
}

/* Aire para mobile */
@media (max-width: 991px){
  #footer .footer-container .row > [class*="col-"]{
    margin-bottom: 1.25rem;
  }
}

/* Línea final (copyright) */
#footer .footer-container .text-sm-center,
#footer .footer-container .text-sm-center a{
  color: rgba(255,255,255,.70) !important;
  font-size: .9rem;
  text-decoration: none;
}
#footer .footer-container .text-sm-center a:hover{
  color: #fff !important;
  text-decoration: underline;
}

/* ====================================
   Footer mobile – más aire lateral
   ==================================== */

@media (max-width: 480px) {

  /* Padding lateral general del footer */
  #footer .footer-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Ajuste específico para los títulos accordion */
  #footer .footer-container .links .title {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Listas internas */
  #footer .footer-container .links ul {
    padding-left: 0 !important;
  }

}

/* =========================
   LOGO BRANDS BANNER
   ========================= */
.fm-logo-brands {
  background: #f4f4f4; /* similar al KV */
  border-bottom: 1px solid rgba(0,0,0,.06);
}


.fm-logo-brands__inner{
  min-height: 110px;
  display: flex;
  align-items: center;

  /* clave para separarlos como KV */
  justify-content: space-between;
  gap: 0;

  /* aire lateral (similar al KV) */
  padding-inline: clamp(24px, 6vw, 96px);
}

.fm-logo-brands__item{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px;
  text-decoration: none;
}

.fm-logo-brands__item img{
  max-height: 80px;
  width: auto;
  display: block;
}


/* Responsive */


@media (max-width: 768px){
  .fm-logo-brands__inner{
    justify-content: center;
    gap: 28px;
    padding-inline: 16px;
    min-height: 96px;
  }
  .fm-logo-brands__item img{
    max-height: 44px;
  }
}

/* =========================
   ABOUT - IT'S FURMATES
   ========================= */
.fm-about{
  position: relative;
  background: #fff;
  padding: clamp(48px, 6vw, 96px) 0;
  overflow: hidden;
}

/* gatos/elementos decorativos como background (mañana los afinamos) */
.fm-about::before,
.fm-about::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  opacity:.12;
  background-repeat:no-repeat;
  background-size: contain;
}



/* =========================
   ABOUT DECOR ANIMATED
   ========================= */

.fm-about{
  position: relative;
  overflow: hidden;
}

/* DOG grande abajo izquierda */
.fm-about::before{
  content: "";
  position: absolute;
  left: -160px;
  bottom: -220px;

  width: 640px;
  height: 640px;

  background: url("/themes/furmates/assets/img/decor/dog-big.png") no-repeat center;
  background-size: contain;

  opacity: 0.25;
  pointer-events: none;
  z-index: 0;

  animation: fm-dog-float 6s ease-in-out infinite;
}

/* CAT arriba derecha */
.fm-about::after{
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;

  width: 420px;
  height: 420px;

  background: url("/themes/furmates/assets/img/decor/cat-top.png") no-repeat center;
  background-size: contain;

  opacity: 0.25;
  pointer-events: none;
  z-index: 0;

  animation: fm-cat-float 7s ease-in-out infinite;
}

/* Contenido arriba */
.fm-about .container{
  position: relative;
  z-index: 1;
}

/* =========================
   ANIMATIONS
   ========================= */

@keyframes fm-cat-float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(25px); }
  100% { transform: translateY(0px); }
}

@keyframes fm-dog-float {
  0%   { transform: translateY(0px) translateX(0px); }
  50%  { transform: translateY(-30px) translateX(10px); }
  100% { transform: translateY(0px) translateX(0px); }
}

/* Ajuste responsive */
@media (max-width: 768px){
  .fm-about::before{
    width: 460px;
    height: 460px;
    left: -220px;
    bottom: -260px;
  }

  .fm-about::after{
    width: 260px;
    height: 260px;
    right: -180px;
    top: -180px;
  }
  .fm-about::before,
  .fm-about::after{
    animation-duration: 9s;
  }
}


/* =========================
   END ABOUT DECOR BACKGROUND
   ========================= */

.fm-about__inner{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}


.fm-about__kicker{
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 14px;
  color: #0b1b3a;
  opacity: .85;
  margin-bottom: 10px;
}

.fm-about__title{
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1.05;
  color: #0a64ff; 
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.fm-about__content{
  text-align: left;
  max-width: 860px;
  margin: 0 auto;
}

.fm-about__lead{
  font-weight: 800;
  font-size: 19px;
  line-height: 1.6;
  color: #0b1b3a;
  margin-bottom: 18px;
}

.fm-about__p{
  font-size: 16px;
  line-height: 1.7;
  color: #0b1b3a;
  margin: 0 0 16px;
  opacity: .92;
}

.fm-about__p--strong{
  font-weight: 800;
  opacity: 1;
}

.fm-about__cta{
  display:flex;
  justify-content:center;
  margin-top: 26px;
}

/* Botón base (si ya tenés uno, mañana lo conectamos a tu sistema) */
.fm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 16px 34px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none;
  border: 0;
}


.fm-btn--primary{
  background: #0a56ff;
  color: #fff;
  box-shadow: 0 10px 26px rgba(10,86,255,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}

.fm-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(10,86,255,.28);
}


.fm-about::marker { content: ""; } /* ignore (no hace nada, solo para evitar pegado raro en algunos editores) */

.fm-about .container{
  position: relative;
  z-index: 1;
}

/* opcional: velo casi imperceptible para separar texto del fondo */
.fm-about .container::before{
  content:"";
  position:absolute;
  inset:-30px -20px;
  background: rgba(255,255,255,0.55);
  filter: blur(0px);
  z-index:-1;
  border-radius: 24px;
  display:none; /* lo activamos solo si hace falta */
}


/* Responsive */
@media (max-width: 768px){
  .fm-about__content{ text-align: left; padding: 0 4px; }
  .fm-about::before{ width: 420px; height: 420px; left: -170px; bottom: -210px; }
  .fm-about::after{ width: 280px; height: 280px; right: -140px; top: -140px; }
  .fm-about{ padding: 56px 0;}
  .fm-about__inner{padding: 0 8px; }
}

/* =========================
   Furmates – Brands banners (MVP)
========================= */

.fm-brands{
  width: 100%;
  position: relative;
}


.fm-brands__viewport{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}


.fm-brands__slide_v4p{
  display: none;
  min-height: clamp(360px, 30vw, 560px);
  background: linear-gradient(
    var(--fm-bg-angle, 115deg),
    var(--fm-bg-1, #0a279f) 0%,
    var(--fm-bg-2, #1239b7) 45%,
    var(--fm-bg-3, #4cd9ff) 100%
  );
}


.fm-brands__slide_v4p.is-active{ display:block; }


.fm-brands__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(34px, 4vw, 70px) clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: minmax(280px, 520px) 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 52px);
}

.fm-brands__inner--right{
  grid-template-columns: 1fr minmax(380px, 560px);
}

.fm-brands__content{ color:#fff; }

.fm-brands__brand-name{
  display:inline-block;
  font-weight: 700;
  opacity: .92;
  margin-bottom: 14px;
  font-size: 18px;
}

.fm-brands__title{
  margin: 0 0 14px 0;
  font-weight: 800;
  line-height: 1.02;
  font-size: clamp(36px, 4.2vw, 74px);
}

.fm-brands__lead{
  margin: 0 0 22px 0;
  max-width: 44ch;
  line-height: 1.28;
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 22px);
  color: #fff;
}

.fm-brands__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(0, 214, 255, .95);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  transition: transform .25s ease, filter .25s ease;
}

.fm-brands__cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  color: #0065ff;
}

.fm-brands__art{
  position: relative;
  width: min(680px, 50vw);
  height: clamp(240px, 22vw, 440px);
  margin-left: auto;
}

.fm-brands__art::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fm-art);
  background-repeat: no-repeat;
  background-position: var(--fm-art-pos, center);
  background-size: var(--fm-art-size, contain);
}

/* Rotación del dispositivo */
.fm-brands__slide_v4p .fm-brands__art::before{
  transform: rotate(var(--fm-art-rot, -14deg)) translateY(var(--fm-art-ty, 10px));
}

/* =========================
   WD KV FINAL: perro full-bleed + texto en container
========================= */

.fm-brands__slide_wd{
  display: none;
  min-height: clamp(360px, 30vw, 510px); /* tu valor correcto */
  background: linear-gradient(
    var(--fm-bg-angle, 115deg),
    var(--fm-bg-1, #ffd87d) 0%,
    var(--fm-bg-2, #d39c36) 45%,
    var(--fm-bg-3, #dbac51) 100%
  );
  position: relative;
  overflow: hidden; /* máscara del KV */
}

.fm-brands__slide_wd.is-active{ display:block; }

/* Perro full-bleed (NO depende del inner) */
.fm-brands__wd-art{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}


.fm-brands__wd-art::before{
  content:"";
  position:absolute;
  top: var(--fm-dog-top, -14%);
  bottom: var(--fm-dog-bottom, -5%);
  left: calc(50% - 660px + var(--fm-dog-x, 80px)); /* 👈 clave */
  right: auto;

  width: 900px;
  background-image: var(--fm-art);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
}

/* El container queda arriba del perro */
.fm-brands__slide_wd .fm-brands__inner--wd{
  position: relative;
  z-index: 1;

  min-height: inherit;
  height: 100%;

  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(34px, 4vw, 70px) clamp(18px, 3vw, 28px);

  display: flex;
  align-items: center;
  justify-content: flex-end; /* texto hacia la derecha */
}

/* Ancho del bloque de texto */
.fm-brands__slide_wd .fm-brands__content--wd{
  width: min(560px, 46vw);
}

/* Responsive: apilamos (perro arriba, texto abajo) */
@media (max-width: 992px){
  .fm-brands__slide_wd .fm-brands__inner--wd{
    justify-content: flex-start;
  }
  .fm-brands__slide_wd .fm-brands__content--wd{
    width: 100%;
  }

  /* en mobile bajamos un poco la escala para que no tape todo */
  .fm-brands__wd-art::before{
    background-position: left bottom;
    background-size: auto 110%;
    inset: -10% -10% -10% -10%;
  }
}

/* Dots */
/* =========================
   Dots sobre banner (overlay)
========================= */

.fm-brands__dots{
  position: absolute;
  left: 50%;
  bottom: 24px; /* separación del borde */
  transform: translateX(-50%);
  
  display: flex;
  gap: 12px;
  z-index: 5;
}

/* Botón base */
.fm-brands__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 0;

  background: rgba(255,255,255,0.4);
  transition: all .25s ease;
}

/* Hover */
.fm-brands__dot:hover{
  background: rgba(255,255,255,0.7);
  transform: scale(1.15);
}

/* Activo */
.fm-brands__dot.is-active{
  background: #ffffff;
  width: 28px;
  border-radius: 999px;
}

.fm-brands__dot:focus{
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Responsive */
@media (max-width: 992px){
  .fm-brands__inner,
  .fm-brands__inner--right{
    grid-template-columns: 1fr;
  }
  .fm-brands__art{
    width: min(720px, 92vw);
    margin: 10px auto 0;
    background-position: center;
  }
}

@media (max-width: 768px){
  .fm-brands__dots{
    bottom: 16px;
  }

  .fm-brands__dot{
    width: 14px;
    height: 14px;
  }

  .fm-brands__dot.is-active{
    width: 32px;
  }
}

/* =========================
   Animaciones banners (IO + re-trigger)
========================= */

/* Performance */
.fm-brands__content,
.fm-brands__art,
.fm-brands__wd-art::before{
  will-change: transform, opacity;
}

/* --- Base (estado antes de animar) --- */
.fm-brands [data-fm-slide] .fm-brands__brand-name,
.fm-brands [data-fm-slide] .fm-brands__title,
.fm-brands [data-fm-slide] .fm-brands__lead,
.fm-brands [data-fm-slide] .fm-brands__cta{
  opacity: 0;
  transform: translateY(18px);
}

/* --- Cuando el slide está listo para animar --- */
.fm-brands [data-fm-slide].is-anim .fm-brands__brand-name{ animation: fmFadeUp .65s ease forwards; animation-delay: .05s; }
.fm-brands [data-fm-slide].is-anim .fm-brands__title{      animation: fmFadeUp .75s ease forwards; animation-delay: .12s; }
.fm-brands [data-fm-slide].is-anim .fm-brands__lead{       animation: fmFadeUp .75s ease forwards; animation-delay: .20s; }
.fm-brands [data-fm-slide].is-anim .fm-brands__cta{        animation: fmFadeUp .75s ease forwards; animation-delay: .30s; }

@keyframes fmFadeUp{
  from{ opacity:0; transform: translateY(18px); }
  to  { opacity:1; transform: translateY(0); }
}

/* =========================
   Vitals: dispositivo entra + flota
========================= */

/* Estado base del contenedor del dispositivo */
.fm-brands__slide_v4p .fm-brands__art{
  opacity: 0;
  transform: translateY(34px);
}

/* Entra */
.fm-brands__slide_v4p.is-anim .fm-brands__art{
  animation: fmDeviceIn .85s ease forwards;
  animation-delay: .18s; /* un pelín después del título */
}

/* Flotación sutil (cuando ya entró) */
.fm-brands__slide_v4p.is-anim .fm-brands__art{
  /* 2 animaciones: entrada + float */
  animation:
    fmDeviceIn .85s ease forwards,
    fmFloat 5.5s ease-in-out infinite;
  animation-delay: .18s, 1.10s; /* float arranca después */
}

@keyframes fmDeviceIn{
  from{ opacity:0; transform: translateY(34px); }
  to  { opacity:1; transform: translateY(0); }
}

@keyframes fmFloat{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-18px); }
}



/* =========================
   WauDog: perro entra con fade + sube
   (animamos el ::before de tu overlay full-bleed)
========================= */

.fm-brands__slide_wd .fm-brands__wd-art::before{
  opacity: 0;
  transform: translateY(36px);
}

/* Entra */
.fm-brands__slide_wd.is-anim .fm-brands__wd-art::before{
  animation: fmDogIn .9s ease forwards;
  animation-delay: .08s;
}

@keyframes fmDogIn{
  from{ opacity:0; transform: translateY(36px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .fm-brands [data-fm-slide] *{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* CTA con pop suave (fix: no desaparece) */
.fm-brands [data-fm-slide].is-anim .fm-brands__cta{
  animation: fmCtaIn .8s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: .32s;
  opacity: 1; /* fallback si algo corta la animación */
}

@keyframes fmCtaIn{
  0%{
    opacity:0;
    transform: translateY(18px) scale(.92);
  }
  60%{
    opacity:1;
    transform: translateY(0) scale(1.05);
  }
  100%{
    opacity:1; /* CLAVE */
    transform: translateY(0) scale(1);
  }
}

/* Hover premium */
.fm-brands__cta{
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.fm-brands__cta:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

/* =========================
   Responsive – Slide 1 (Vitals) – Mobile 375
========================= */
@media (max-width: 420px){

  /* 1 columna, aire controlado */
  .fm-brands__slide_v4p .fm-brands__inner{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 18px 18px; /* menos alto arriba, más prolijo */
  }

  /* Título y lead un toque más compactos */
  .fm-brands__slide_v4p .fm-brands__brand-name{
    margin-bottom: 8px;
    font-size: 15px;
  }

  .fm-brands__slide_v4p .fm-brands__title{
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: 1.00;
    margin-bottom: 10px;
  }

  .fm-brands__slide_v4p .fm-brands__lead{
    font-size: 15px;
    line-height: 1.28;
    margin-bottom: 14px;
    max-width: 34ch;
  }

  /* ✅ BOTÓN PREMIUM MOBILE */
  .fm-brands__slide_v4p .fm-brands__cta{
    /* tamaño/alto más “touch-friendly” pero sin verse enorme */
    padding: 14px 18px;
    min-height: 48px;

    /* ancho controlado (no full si no querés) */
    width: min(320px, 100%);
    max-width: 100%;

    /* texto y layout */
    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;
    text-align: left;

    /* look */
    border-radius: 16px;              /* menos “pastilla” */
    box-shadow: 0 14px 26px rgba(0,0,0,.18);
  }

  /* si querés que el texto del botón no quede tan “alto”, lo centramos */
  .fm-brands__slide_v4p .fm-brands__cta{
    justify-content: flex-start; /* queda más “producto/pro” */
    gap: 10px;
  }

  /* Arte debajo: mejor encuadre */
  .fm-brands__slide_v4p .fm-brands__art{
    width: 100%;
    height: clamp(210px, 62vw, 280px);
    margin: 6px auto 0;
  }

  .fm-brands__slide_v4p .fm-brands__art::before{
    background-position: center;
    background-size: contain;
  }

  /* Dots: más cerca y centrados */
  .fm-brands__dots{
    padding-top: 10px;
  }
}

/* =========================
   SLIDE 1 Responsive – Tablet 768 (como móvil)
========================= */
/* =========================
   Tablet/Mobile – Slide 1 centrado + aire + dots abajo
========================= */
@media (max-width: 900px){

  /* Reservo espacio para los dots */
  .fm-brands__slide_v4p{
    padding-bottom: 54px;
    position: relative;
  }

  /* Inner 1 columna y centrado */
  .fm-brands__slide_v4p .fm-brands__inner{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 44px 22px 18px;
    text-align: center;
    justify-items: center; /* centra items dentro del grid */
  }

  /* Centro el bloque de texto */
  .fm-brands__slide_v4p .fm-brands__content{
    max-width: 520px;
    margin: 0 auto;
  }

  /* CTA centrado + tamaño más prolijo */
  .fm-brands__slide_v4p .fm-brands__cta{
    margin: 10px auto 0;
    width: min(420px, 92%);
    padding: 14px 18px;
    border-radius: 18px;
  }

  /* Dispositivo centrado y con aire para que NO pise los dots */
  .fm-brands__slide_v4p .fm-brands__art{
    width: min(560px, 92vw);
    height: clamp(220px, 40vw, 320px);
    margin: 8px auto 10px; /* ese 10px da aire antes de los dots */
  }

  .fm-brands__slide_v4p .fm-brands__art::before{
    background-position: center;
    background-size: contain;
  }

  
}

/* =========================
   Slide 2 (WauDog) – Mobile ≤480 (375)
   Objetivo: texto legible + QR visible (CTA más abajo)
========================= */
@media (max-width: 480px){

  /* Reservo lugar para dots y aire general */
  .fm-brands__slide_wd{
    padding-bottom: 72px; /* + aire para dots + CTA sin tapar QR */
  }

  /* Layout del bloque de texto */
  .fm-brands__slide_wd .fm-brands__inner--wd{
    justify-content: center;
    align-items: flex-start;
    padding: 36px 18px 22px; /* un poco más de aire arriba */
  }

  .fm-brands__slide_wd .fm-brands__content--wd{
    width: 100%;
    max-width: 340px;
    text-align: left;
    position: relative;
  }

  /* Scrim detrás del texto */
  .fm-brands__slide_wd .fm-brands__content--wd::before{
    content:"";
    position:absolute;
    inset: -14px -14px -10px -14px; /* menos “alto” para que el CTA baje */
    border-radius: 18px;
    background: linear-gradient(
      90deg,
      rgba(211,156,54,.78) 0%,
      rgba(219,172,81,.38) 70%,
      rgba(219,172,81,0) 100%
    );
    z-index: -1;
  }

  /* Perro: más “background” */
  .fm-brands__wd-art::before{
    left: -30px;
    top: -6%;
    bottom: -10%;
    width: 520px;
    opacity: .55;
    filter: saturate(.95) contrast(.95);
  }

  /* CTA: lo bajamos para no tapar la chapita/QR */
  .fm-brands__slide_wd .fm-brands__cta{
    width: min(320px, 92%);
    padding: 14px 18px;
    border-radius: 18px;
    margin-top: 22px; /* baja el CTA */
  }

}

/* =========================
   Slide 2 (WauDog) – Tablet 768–1024
   Texto y CTA a la derecha
========================= */
@media (min-width: 600px) and (max-width: 1024px){

  .fm-brands__slide_wd{
    padding-bottom: 60px;
  }

  /* Volvemos a layout derecha */
  .fm-brands__slide_wd .fm-brands__inner--wd{
    justify-content: flex-end;
    align-items: center;
    padding: 60px 40px;
  }

  .fm-brands__slide_wd .fm-brands__content--wd{
    width: min(420px, 42vw);
    text-align: left;
  }

/* Perro más a la izquierda (puede cortarse) */
  .fm-brands__wd-art::before{
    left: -140px;     /* probá -120 / -160 / -200 */
    width: 760px;     /* un toque más ancho para que siga “presente” */
    opacity: .80;     /* opcional: baja competencia con texto */
  }

  /* CTA alineado correctamente */
  .fm-brands__slide_wd .fm-brands__cta{
    margin-top: 18px;
    width: fit-content;
  }

}

/* =========================
   Slide 2 – Desktop intermedio (1100–1366)
   Alejar perro del texto
========================= */
@media (min-width: 1100px) and (max-width: 1366px){

  .fm-brands__slide_wd{
    --fm-dog-x: 20px; /* más a la izquierda que 80px, pero sin desaparecer */
  }

  .fm-brands__wd-art::before{
    
    width: 860px;   /* mantiene presencia sin acercarse */
  }


  .fm-brands__slide_wd .fm-brands__content--wd{
    width: min(520px, 44vw); /* le damos un poco más de aire al texto */
  }

}

/* =========================
   Furmates – Newsletter bar
========================= */

.fm-newsletter{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.fm-newsletter{
  padding: 30px 0;
  background: linear-gradient(90deg, #0064ff 0%, #7bccff 100%);
}

.fm-newsletter__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}

.fm-newsletter__left{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width: 260px;
}

.fm-newsletter__icon{
  width: 142px;
  height: 142px;
  position: relative;
  flex: 0 0 auto;
}

/* Ícono patita (simple, sin depender de font icons) */
.fm-newsletter__icon::before{
  content:"";
  position:absolute;
  inset: 10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* Poné tu SVG acá */
  background-image:url("/themes/furmates/assets/img/icons/paw.svg");
  opacity:.65;
}

.fm-newsletter__title{
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
}

.fm-newsletter__subtitle{
  margin-top: 10px;
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.3;
  color: rgba(255,255,255,.95);
}

.fm-newsletter__conditions{
  display:none !important;
}

.fm-newsletter__right{
  flex: 1 1 auto;
  display:flex;
  flex-direction: column;
  align-items:flex-end;
}


.fm-newsletter__form{
  width: min(720px, 100%);
  height: 68px;            /* un toque más alto */
  /*padding: 6px 6px 6px 26px;*/
  display:flex;
  align-items:center;
  background: #ffffff;
  border-radius: 999px;
  border: 0;

}

.fm-newsletter__input{
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: none;
  color: #9aa3b2;
  font-size: 16px;
  padding: 0;
}

.fm-newsletter__input::placeholder{
  color: #c3cad5;
}

.fm-newsletter__input::placeholder{
  color: rgba(255,255,255,.75);
}

.fm-newsletter__btn{
  width: 70px;
  height: 70px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #a0ebff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: all .2s ease;
}

.fm-newsletter__btn:hover{
  background:#94e7fd;
  transform: translateX(2px);
}

.fm-newsletter__arrow{
  width: 14px;
  height: 14px;
  display:block;
  position: relative;
}

.fm-newsletter__arrow::before{
  content:"";
  position:absolute;
  inset:0;
  border-right: 2.5px solid #fff;
  border-top: 2.5px solid #fff;
  transform: rotate(45deg);
  top: 1px;
  left: -1px;
  opacity: .95;
}



.fm-newsletter__msg{
  margin: 10px 10px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.95);
}
.fm-newsletter__msg.is-error{ opacity: .95; }
.fm-newsletter__msg.is-ok{ opacity: .95; }

/* Responsive */
@media (max-width: 992px){
  .fm-newsletter__inner{
    flex-direction: column;
    align-items: stretch;
  }
  .fm-newsletter__right{
    align-items: stretch;
  }
}

@media (max-width: 480px){
  .fm-newsletter{
    padding: 20px 0;
  }
  .fm-newsletter__form{
    padding: 8px 8px 8px 14px;
  }
  .fm-newsletter__btn{
    width: 48px;
    height: 48px;
  }
}

/* =========================
   FM Contact CTA (footer-pre)
========================= */
.fm-contact-cta{
  padding: 54px 0;
  background: linear-gradient(90deg, #0128ff 0%, #3ca5ff 100%);
}
.fm-contact-cta__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 26px;
}
.fm-contact-cta__icon{
  width: 142px;
  height: 142px;
  position: relative;
  flex: 0 0 auto;
}
.fm-contact-cta__icon::before{
  content:"";
  position:absolute;
  inset: 12px;
  background: url("/themes/furmates/assets/img/icons/paw.svg") no-repeat center/contain;
  opacity: .65;
}
.fm-contact-cta__title{
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 720px;
}
.fm-contact-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 58px;
  padding: 0 44px;
  border-radius: 999px;
  background: #00c1f4;
  color:#fff;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease;
}
.fm-contact-cta__btn:hover{
  transform: translateY(-1px);
  background:#a0ebff;
}
@media (max-width: 992px){
  .fm-contact-cta__inner{
    flex-direction: column;
    align-items:flex-start;
  }
}

#main .page-content, #main .page-footer, #main .page-header {
    margin-bottom: 0 !important;
}

.block-social.col-lg-4.col-md-12.col-sm-12 {
    display: none !important;
}

/* =========================
   NUESTRA TIENDA (KV)
========================= */
.fm-store{
  padding: clamp(40px, 5vw, 84px) 0;
}

.fm-store__head{
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 40px);
}

.fm-store__eyebrow{
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0b1c33;
  opacity: .9;
  margin-bottom: 8px;
}

.fm-store__title{
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.05;
  margin: 0;
  font-weight: 800;
  color: #1677ff; /* azul KV */
}

.fm-store__subtitle{
  margin: 12px auto 0;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.45;
  color: #0b1c33;
  opacity: .85;
}

/* rail */
.fm-store__rail{
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
  margin-top: clamp(18px, 2.5vw, 34px);
}

/* cards base */
.fm-store__card{
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
}

/* botones */
.fm-store__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

.fm-store__btn--solid{
  background: #1677ff;
  color: #fff;
}

.fm-store__btn--ghost{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
}

.fm-store__btn:hover,
.fm-store__btn:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.02);
  color: #001e46;
}



/* =========================
   FLIP (texto)
========================= */
.fm-flip{
  height: 260px;
  perspective: 1000px;
  outline: none;
}

.fm-flip__inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
}

.fm-flip:hover .fm-flip__inner,
.fm-flip:focus .fm-flip__inner,
.fm-flip:focus-visible .fm-flip__inner{
  transform: rotateY(180deg);
}

.fm-flip__face{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
}

.fm-flip__face--front.fm-flip__face--text{
  background: #0a3a66; /* azul oscuro card texto */
  display: grid;
  place-items: center;
  padding: 22px;
}

.fm-flip__h{
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
  position: relative;
  z-index: 2;
}

/* forma "oreja perro" bottom */
.fm-flip__shape__1{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  background-image: url('/themes/furmates/assets/img/store/oreja-abajo.svg');
  background-position-y: bottom;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 1;
}

/* forma oreja gato top */
.fm-flip__shape__2{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 64%;
  background-image: url('/themes/furmates/assets/img/store/oreja-arriba.svg');
  background-position-y: top;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 1;
}


/* dorso para cards texto: #52bcf6 */
.fm-flip__face--back-text{
  transform: rotateY(180deg);
  background: #52bcf6;
  display: grid;
  place-items: center;
  padding: 22px;
}

.fm-flip__backContent{
  text-align: center;
  color: #042552;
}

.fm-flip__kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 8px;
}

.fm-flip__backTitle{
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 14px;
}

/* =========================
   PET CARDS (perritos)
   front: linear diagonal #1677ff -> #8ad9ff
   back: radial dark #042552 -> #1e498d
========================= */
.fm-petcard{
  height: 260px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1677ff 0%, #8ad9ff 100%);
}

/* acá ponés tus imágenes como background para match 1:1 del KV */
.fm-petcard__media{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  transform: translateZ(0);
}

/* TODO: reemplazar URLs por las reales del theme */
.fm-petcard__media--dog1{ background-image: url('/themes/furmates/assets/img/store/dog-1.png'); }
.fm-petcard__media--dog2{ background-image: url('/themes/furmates/assets/img/store/dog-2.png'); }

/* overlay dorso al hover */
.fm-petcard__overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .22s ease;
  background: radial-gradient(circle at 50% 40%, #1e498d 0%, #042552 68%, #042552 100%);
}

.fm-store__card--pet:hover .fm-petcard__overlay,
.fm-store__card--pet:focus-within .fm-petcard__overlay{
  opacity: 1;
}

/* =========================
   CÓMO FUNCIONA (3 pasos)
========================= */
.fm-how{
  margin-top: clamp(26px, 3vw, 44px);
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(22,119,255,.06);
  border: 1px solid rgba(22,119,255,.12);
}

.fm-how__title{
  font-weight: 900;
  color: #0b1c33;
  margin-bottom: 12px;
  text-align: center;
}

.fm-how__steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fm-how__step{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(4,37,82,.08);
  color: #0b1c33;
  font-weight: 600;
}

.fm-how__num{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #52bcf6;
  color: #042552;
  font-weight: 900;
}

a.fm-store__btn.fm-store__btn--ghost {
    color: #fff;
}

a.fm-store__btn.fm-store__btn--ghost:hover {
    color: #001e46;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px){
  .fm-store__rail{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .fm-store__rail{ grid-template-columns: 1fr; }
  /* en mobile: evitamos flip (mejor UX) */
  .fm-flip:hover .fm-flip__inner{ transform: none; }
  .fm-flip__inner{ transform: none !important; }
  .fm-flip__face--back-text{ display: none; }
  .fm-how__steps{ grid-template-columns: 1fr; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .fm-flip__inner,
  .fm-store__btn,
  .fm-petcard__overlay{ transition: none !important; }
}

/* =========================
   CMS PAGE NOSOTROS
========================= */

.page-content.page-cms {
    padding: 1.25rem 1.25rem 0 1.25rem;
    text-align: justify;
    background: #fff;
}
#wrapper {
    background: #fff;
}