@import url("fm-product.css");
/* =========================================================
   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;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0064ff; /* si algo queda fuera, queda azul marca, no blanco */
}

/*a {
    color: #0064FF;
    text-decoration: none;
}
*/

/* =========================
   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: 0px; padding-bottom: 80px; }
}


/* =========================
   Identity / Datos personales
   Ocultar Tratamiento
========================= */
body#identity #customer-form .form-group.row:has(label[for="field-id_gender"]) {
  display: none !important;
}
/* =========================================================
   HERO (KV) – VIDEO
   - Desktop: overlay a la derecha y por arriba del copy (lo tapa).
   - El MP4 negro queda contenido en su marco (no cubre todo el hero).
   - Mobile: stack (sin overlay invasivo).
========================================================= */

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

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

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

/* Copy */
.fm-hero__copy{
  position: relative;
  z-index: 2;          /* abajo del video para que el perro lo tape */
  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;
}

.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;
}

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

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

/* =========================
   Media overlay (desktop)
========================= */

.fm-hero__media{
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;

  /* CLAVE: el video (aunque sea negro) queda contenido en esta columna */
  width: min(640px, 46vw);
  height: 100%;

  z-index: 3;            /* arriba del copy: lo tapa */
  pointer-events: none;
  overflow: visible;
}

/* Video = “perro principal” (equivalente al PNG anterior) */
.fm-hero__video{
  position: absolute;
  right: -10px;
  bottom: 0;

  width: auto;
  height: 115%;
  max-width: none;

  object-fit: cover;
  object-position: 70% 10%;  /* tuning: corré perro dentro del recorte */
  transform: translateY(10%); /* “apoya” abajo */
  transform-origin: bottom right;
  border-radius: 0;
}

/* Ajuste fino para pantallas grandes */
@media (min-width: 1400px){
  .fm-hero__media{
    width: min(680px, 48vw);
  }
/*  .fm-hero__video{
    right: -150px;
    height: 110%;
    transform: translateY(10%);
    object-position: 70% 8%;
  }*/
      .fm-hero__video {
        right: 50px;
        height: 100%;
        transform: translateY(5%);
        object-position: 70% 8%;
    }

}

/* =========================================
   HERO – ajustes finos tablet
========================================= */
@media (min-width: 576px) and (max-width: 991.98px){
  .fm-hero__inner{
    min-height: 520px;
    padding-top: 64px;
    padding-bottom: 36px;
  }

  .fm-hero__copy{
    max-width: 62%;
    z-index: 2;
  }

  .fm-hero__title{
    margin: 0 0 16px;
  }

  .fm-hero__lead{
    margin: 0 0 24px;
    max-width: 30ch;

  }

  .fm-hero__cta{
    padding: 16px 28px;
  }

  .fm-hero__media{
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    width: 58%;
    height: 100%;
    z-index: 3;
    margin-top: 0;
    overflow: visible;
  }

  .fm-hero__video{
    position: absolute;
    right: -6%;
    bottom: 0;
    width: auto;
    height: 92%;
    max-width: none;
    transform: translateY(6%);
    transform-origin: bottom right;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* =========================================
   HERO – ajustes finos mobile
========================================= */
@media (max-width: 575.98px){
  .fm-hero__inner{
    min-height: 0;
    padding-top: 28px;
    /*padding-bottom: 24px;*/
  }

  .fm-hero__copy{
    max-width: 100%;
    z-index: 2;
  }

  .fm-hero__title{
    margin: 0 0 14px;
  }

  .fm-hero__lead{
    margin: 0 0 22px;
    max-width: 24ch;
  }

  .fm-hero__cta{
    padding: 14px 24px;
  }

  .fm-hero__media{
    position: relative;
    width: 100%;
    height: 300px;
    margin-top: 12px;
    overflow: hidden;
    z-index: 1;
  }

  .fm-hero__video{
    position: absolute;
    right: 10%;
    top: auto;
    /* bottom: -38px;              CLAVE: baja el perro */
    height: 98%;                /* un toque más chico */
    width: auto;
    max-width: none;
    transform: translateX(50%);
    transform-origin: bottom center;
    object-fit: contain;
    object-position: center bottom;
  }
}


.fm-hero__title {
  margin: 0 0 1.5rem;
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fm-hero__title-line {
  display: block;
}

.fm-hero__title-line--accent {
  color: #9ed9f6;
}

.fm-hero__title-line--main {
  color: #ffffff;
}

@media (min-width: 1200px) {
  .fm-hero__title {
    font-size: clamp(4.6rem, 7vw, 7rem);
    max-width: 8.5ch;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .fm-hero__title {
    font-size: clamp(3.6rem, 7vw, 5.4rem);
    max-width: 8.5ch;
    line-height: 0.95;
  }
}

@media (max-width: 767px) {
  .fm-hero__title {
    font-size: clamp(2.8rem, 12vw, 4.2rem);
    max-width: 9ch;
    line-height: 0.96;
    margin-bottom: 1.1rem;
  }
}

.fm-hero__lead {
  max-width: 32rem;
}

/* =========================================================
   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;
}
@media (max-width: 767px) {
  .fm-brands__slide_wd {
    --fm-dog-scale: 142%;
    --fm-dog-x: 48px;
    --fm-dog-top: -10%;
    --fm-dog-bottom: auto;
  }
}
@media (max-width: 767px) {
  body .fm-brands__slide_wd .fm-brands__wd-art {
    transform: translateY(5%) !important;
  }
}
/* Recuperar contraseña > link "Volvé a Inicio de sesión" */
body#password .page-footer a,
body#password footer.page-footer a,
body#password .page-footer ul li a {
  color: #0064ff !important;
}
/* =========================================================
   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;
}


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




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

}

/* =========================================================
   TABLET NAV FIX (576–991.98)
   Objetivo:
   - Ocultar menú desktop
   - Usar hamburguesa nativa de PS también en tablet
   - Mantener mobile <576 intacto
========================================================= */
@media (min-width: 576px) and (max-width: 991.98px){

  /* 1) Apagar el menú horizontal desktop que pisa el logo */
  #header #_desktop_top_menu,
  #header .menu.js-top-menu.hidden-sm-down{
    display: none !important;
  }

  /* 2) Encender el bloque mobile nativo en tablet */
  #header .header-nav .hidden-lg-up.mobile{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* 3) En tablet NO queremos el logo mobile duplicado */
  #header .header-nav .hidden-lg-up.mobile #_mobile_logo{
    display: none !important;
  }

  /* 4) Hamburguesa a la derecha, más grande y alineada */
  #header .header-nav .hidden-lg-up.mobile #menu-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    float: none !important;
    width: 40px !important;
    height: 40px !important;
  }

  #header .header-nav .hidden-lg-up.mobile #menu-icon .material-icons{
    font-size: 30px !important;
    line-height: 1 !important;
    color: #fff !important;
  }

  /* 5) El panel desplegable mobile también existe en tablet */
  #mobile_top_menu_wrapper.hidden-lg-up{
    display: none; /* lo sigue controlando JS */
  }

  /* 6) Estética del panel desplegable */
  #mobile_top_menu_wrapper{
    background: var(--fm-blue) !important;
    border-top: 0 !important;
  }

  #mobile_top_menu_wrapper a{
    color: #fff !important;
  }
}

/* =========================================================
   TABLET NAV FIX – bajar hamburguesa a la altura del logo
   Solo 576–991.98px
========================================================= */
@media (min-width: 576px) and (max-width: 991.98px){

  /* la fila superior no empuja raro */
  #header .header-nav{
    position: relative;
  }

  /* movemos el bloque mobile hacia abajo */
  #header .header-nav .hidden-lg-up.mobile{
    position: absolute !important;
    right: 24px !important;
    top: 58px !important;   /* ajustá entre 52 y 66 si querés fino */
    width: auto !important;
    z-index: 30 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* botón hamburguesa */
  #header .header-nav .hidden-lg-up.mobile #menu-icon{
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }

  #header .header-nav .hidden-lg-up.mobile #menu-icon .material-icons{
    font-size: 48px !important;
    line-height: 1 !important;
    color: #fff !important;
  }
}

/* movil hamburguesa + grande */
@media (max-width: 575.98px){
header .header-nav #menu-icon .material-icons {
    line-height: 64px !important;
    font-size: 32px !important;
    color: #fff !important;
}

.dropdown select {
    color: #fff;
    background: #0064ff;
    border: 0;
    outline: 0;
    -moz-appearance: none;
}
#mobile_top_menu_wrapper .js-top-menu-bottom #contact-link {
    display: none !important;
}


/* =========================================================
   MOBILE – dropdown idioma debajo del trigger
========================================================= */


  /* el contenedor del selector debe ser referencia */
  #mobile_top_menu_wrapper .language-selector,
  #mobile_top_menu_wrapper .dropdown.js-dropdown{
    position: relative;
  }

  /* menú desplegable debajo de “Español ▼” */
  #mobile_top_menu_wrapper .language-selector .dropdown-menu,
  #mobile_top_menu_wrapper #_mobile_language_selector .dropdown-menu{
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    min-width: 140px !important;
    z-index: 1200 !important;
    border-radius: 10px !important;
  }
}

/* =========================================================
   MOBILE – idioma dropdown: anclar debajo del trigger
========================================================= */
@media (max-width: 575.98px){

  /* el contenedor real del idioma debe ser la referencia */
  #mobile_top_menu_wrapper #_mobile_language_selector,
  #mobile_top_menu_wrapper #_mobile_language_selector .language-selector-wrapper,
  #mobile_top_menu_wrapper #_mobile_language_selector .language-selector,
  #mobile_top_menu_wrapper #_mobile_language_selector .dropdown.js-dropdown{
    position: relative !important;
  }

  /* forzamos el ul a soltarse de cualquier offset previo */
  #mobile_top_menu_wrapper #_mobile_language_selector .dropdown-menu{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    margin-top: 8px !important;
    margin-left: 0 !important;

    transform: none !important;
    inset: auto auto auto 0 !important;

    min-width: 140px !important;
    z-index: 9999 !important;
  }
}
/* =========================
   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 15px;
}

.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: 126px;
  height: 126px;
  position: relative;
  flex: 0 0 126px;
  margin-right: 18px;
}

.fm-contact-cta__icon::before{
  content:"";
  position:absolute;
  inset: 10px;
  background: url("/themes/furmates/assets/img/icons/iso_furmates.svg") no-repeat center/contain;
  opacity: .96;
}

.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: center;
    text-align: center;
    gap: 18px;
  }

  .fm-contact-cta__icon{
    width: 108px;
    height: 108px;
    flex: 0 0 108px;
    margin: 0 auto 10px;
  }

  .fm-contact-cta__icon::before{
    inset: 8px;
  }

  .fm-contact-cta__text{
    margin: 0 auto;
    max-width: 40ch;
  }

  .fm-contact-cta__title{
    margin: 0 auto;
    max-width: 22ch;
    font-size: clamp(34px, 4.6vw, 46px);
    line-height: 1.02;
    font-weight: 800;
    text-wrap: balance;
  }

  .fm-contact-cta__actions,
  .fm-contact-cta__btn{
    margin: 0 auto;
  }
}

@media (max-width: 575.98px){
  .fm-contact-cta__icon{
    width: 86px;
    height: 86px;
    flex: 0 0 86px;
    margin: 0 auto 14px;
  }

  .fm-contact-cta__icon::before{
    inset: 6px;
  }

  .fm-contact-cta__text{
    max-width: 26ch;
  }

  .fm-contact-cta__title{
    max-width: 16ch;
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.05;
  }
}

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


#main .page-footer .text-sm-center a {
  margin-bottom: 1rem !important;
}


.block-social.col-lg-4.col-md-12.col-sm-12 {
  display: none !important;
}
/* =========================================================
   Contact CTA – ajuste fino versión limpia
========================================================= */

/* desktop */
.fm-contact-cta{
  padding: 46px 0 !important;
}

.fm-contact-cta__inner{
  gap: 24px !important;
  align-items: center !important;
}

.fm-contact-cta__icon{
  width: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
  margin-right: 10px !important;
}

.fm-contact-cta__icon::after{
  display: none !important;
}

.fm-contact-cta__icon::before{
  inset: 10px !important;
  opacity: .92 !important;
}

.fm-contact-cta__text{
  max-width: 720px !important;
}

.fm-contact-cta__title{
  max-width: 30ch !important;
  font-size: clamp(20px, 1.5vw, 32px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
}

.fm-contact-cta__actions{
  margin-left: auto !important;
}

.fm-contact-cta__btn{
  min-width: 168px !important;
  height: 56px !important;
  padding: 0 34px !important;
  font-size: 17px !important;
  box-shadow: none !important;
}

/* tablet */
@media (max-width: 992px){
  .fm-contact-cta{
    padding: 40px 0 !important;
  }

  .fm-contact-cta__inner{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }

  .fm-contact-cta__icon{
    width: 86px !important;
    height: 86px !important;
    flex: 0 0 86px !important;
    margin: 0 auto 2px !important;
  }

  .fm-contact-cta__icon::before{
    inset: 8px !important;
  }

  .fm-contact-cta__text{
    max-width: 34ch !important;
    margin: 0 auto !important;
  }

  .fm-contact-cta__title{
    max-width: 17ch !important;
    font-size: clamp(28px, 4.2vw, 38px) !important;
    line-height: 1.03 !important;
    margin: 0 auto !important;
  }

  .fm-contact-cta__actions{
    margin: 0 auto !important;
  }

  .fm-contact-cta__btn{
    min-width: 158px !important;
    height: 52px !important;
    font-size: 16px !important;
    margin: 0 auto !important;
  }
}

/* mobile */
@media (max-width: 575.98px){
  .fm-contact-cta{
    padding: 34px 0 38px !important;
  }

  .fm-contact-cta__icon{
    width: 70px !important;
    height: 70px !important;
    flex: 0 0 70px !important;
  }

  .fm-contact-cta__icon::before{
    inset: 7px !important;
  }

  .fm-contact-cta__text{
    max-width: 24ch !important;
  }

  .fm-contact-cta__title{
    max-width: 14ch !important;
    font-size: clamp(22px, 6.8vw, 29px) !important;
    line-height: 1.05 !important;
  }

  .fm-contact-cta__btn{
    min-width: 148px !important;
    height: 50px !important;
    font-size: 15px !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: #001e46;
  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) — FIX FF/Safari (anti-espejo)
========================= */
.fm-flip{
  height: 260px;
  perspective: 1200px;
  -webkit-perspective: 1200px; /* Safari */
  outline: none;
  transform: translateZ(0); /* fuerza composición */
}

/* el elemento que rota */
.fm-flip__inner{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; /* Safari */
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

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

/* caras */
.fm-flip__face{
  position: absolute;
  inset: 0;
  border-radius: 18px;

  /* CLAVE */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  /* evita z-fighting / mirror text en FF/Safari */
  transform: translateZ(0.1px);
}

/* FIX extra: Safari/FF a veces espejan TEXTO de hijos */
.fm-flip__face *{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* FRONT */
.fm-flip__face--front.fm-flip__face--text{
  background: #0a3a66;
  display: grid;
  place-items: center;
  padding: 22px;
  transform: rotateY(0deg) translateZ(0.1px);
}

/* TITULO */
.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;

  /* ayuda en Safari */
  transform: translateZ(0.2px);
}

/* 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;
  transform: translateZ(0.05px);
}

/* 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;
  transform: translateZ(0.05px);
}

/* BACK */
.fm-flip__face--back-text{
  background: #52bcf6;
  display: grid;
  place-items: center;
  padding: 22px;

  /* CLAVE: cara trasera */
  transform: rotateY(180deg) translateZ(0.1px);
}

.fm-flip__backContent{
  text-align: center;
  color: #042552;
  transform: translateZ(0.2px);
}

.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;
}

/* =========================================
   HOW IT WORKS – PRO GRID VERSION
========================================= */

.fm-how__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* Igualar altura */
.fm-how__item{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(4,37,82,.08);
  box-shadow: 0 12px 28px rgba(4,37,82,.06);
  min-height: 220px;
}

.fm-how__badge{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #52bcf6;
  color: #042552;
  margin-bottom: 10px;
}

.fm-how__h{
  font-weight: 800;
  color: #042552;
  margin: 0 0 8px;
}

.fm-how__p{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(4,37,82,.85);
  margin: 0 0 8px;
}

.fm-how__p strong{
  color: #042552;
  font-weight: 700;
}

/* FILA 2 FULL WIDTH */
.fm-how__full{
  grid-column: 1 / -1;
  background: rgba(22,119,255,.06);
  border: 1px solid rgba(22,119,255,.18);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.fm-how__exclusive{
  margin: 0;
  font-weight: 600;
  color: #042552;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 992px){
  .fm-how__grid{
    grid-template-columns: 1fr;
  }

  .fm-how__full{
    grid-column: auto;
  }
}

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

/* =========================
   Global Page H1 – Furmates Style
   (Usamos el H1 nativo de page.tpl)
========================= */

.page-header {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 16px;
}

.page-header h1{
  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  color: #0064ff;
  margin: 0 0 10px;
}

/* Subtítulo debajo del H1 (si existe dentro del hero) */
.fm-auth__subtitle,
.fm-kv-contact__subtitle{
  color: #001e46;
}


/* =========================
   FORMULARIO DE CONTACTO
========================= */
.fm-kv-contact{
  padding: 24px 0 72px;
}

.fm-contact .fm-contact__hero{ /* si lo envolvés desde contact.tpl */
  background: #50c8ff;
  padding: 0 0 84px;
}

.fm-kv-contact__card{
  max-width: 820px;
  margin: 0 auto;
}

.fm-kv-contact__title{
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  margin: 0 0 8px;
  color: #0064ff;
}

.fm-kv-contact__subtitle{
  margin: 0 0 72px;
  opacity: .9;
  line-height: 1.50;
  color: #001e46;
}

.fm-kv-contact__form{
  background: transparent;
}

.fm-kv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

.fm-kv-field--full{
  grid-column: 1 / -1;
}

.fm-kv-label{
  display:block;
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: #fff;
  text-align: left;
  padding-left: 8px;
}

.fm-kv-input{
  width: 100%;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.85);
  padding: 14px 14px;
  background: #fff;
  outline: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
  color: #001e46;
}

.fm-kv-input:focus{
  border-color: rgba(255,255,255,1);
  box-shadow: 0 0 0 4px rgba(255,255,255,.25);
}

.fm-kv-textarea{
  resize: vertical;
  min-height: 180px;
}

.fm-kv-actions{
  display:flex;
  justify-content: center;
  margin-top: 28px;
}

.fm-kv-btn{
  border: 0;
  border-radius: 999px;
  padding: 14px 42px;
  font-weight: 800;
  font-size: 16px;
  background: #0B57F2;
  color: #fff;
  min-width: 220px;
}

.fm-kv-btn:hover{ filter: brightness(1.05); }

/****/
/* =========================
   Contact – CTA Enviar
========================= */

body#contact button[type="submit"],
body#contact .btn-primary {
  background: #0a56ff;
  color: #fff;
  border: none;
  box-shadow: 0 10px 26px rgba(10, 86, 255, .22);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}

/* Hover */
body#contact button[type="submit"]:hover,
body#contact .btn-primary:hover {
  background: #0a56ff; /* mantenemos azul */
  color: #24b9d7;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(10, 86, 255, .28);
}

/* Focus accesible */
body#contact button[type="submit"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 185, 215, .35);
}

/***/

.fm-kv-contact__hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.fm-kv-contact__honeypot{
  display:none !important;
}

.contact-form h3, .contact-rich h4 {
    color: #001e46;
    text-transform: uppercase;
}
.contact-rich .block .icon i {
    font-size: 2rem;
    color: #0064ff;
}
.contact-rich .block .data {
    width: auto;
    overflow: hidden;
    font-size: .875rem;
    color: #001e46;
}

.contact-rich, .contact-rich h4 {
    margin-bottom: 2rem;
    margin-top: 3rem;
    background: white;
    color: #001e46;
}
.contact-rich .block a[href^="mailto:"] {
        font-size: .815rem;
        color: #0064ff;

}

div#left-column {
    background: white;
    margin-top: 3rem;
}

/* =========================
   Contact – Left column as card
========================= */
body#contact #left-column{
  background: #fff;
  margin-top: 3rem;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  overflow: hidden; /* recorta hijos (líneas, iconos) dentro del radio */
}

/* aire interno para que no quede pegado */
body#contact #left-column .block,
body#contact #left-column .contact-infos{
  padding: 18px 18px;
}

/* Si el template mete bordes/hairlines, los suavizamos */
body#contact #left-column hr{
  opacity: .25;
}

@media (max-width: 768px){
  body#contact #left-column{
    margin-top: 1.25rem;
    border-radius: 16px;
  }
}

/* =========================
   Contact – mobile top breathing room
========================= */

@media (max-width: 768px){
  body#contact #wrapper .container > .row{
    padding: 1rem;
  }
}

/* ========================================
   CONTACT PAGE ONLY
======================================== */

/* Fondo celeste para toda la página contacto */
body#contact #wrapper {
  background: #50c8ff;
}

/* Fondo celeste para card-block solo en contacto */
body#contact .card-block {
  background: #50c8ff;
  border: none;
  box-shadow: none;
}

header.fm-contact__head {
    display: none;
}

#wrapper .breadcrumb li:last-child {
    margin: 0;
    color: #0064ff;
}



@media (max-width: 768px){
  .fm-kv-grid{ grid-template-columns: 1fr; }
  .fm-kv-actions{ justify-content: center; }
}

/* =========================
   Contact – Legal text
========================= */

body#contact .fm-kv-legal{
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #001e46;
  opacity: .85;
  max-width: 720px;
}

@media (max-width: 768px){
  body#contact .fm-kv-legal{
    font-size: 11px;
    margin-top: 14px;
  }
}

/* =========================
   Contact – Decorative animals
========================= */

body#contact #wrapper {
  position: relative;
  overflow: hidden;
}

/* Gato (no se corta + posición estable) */
body#contact #wrapper::before{
  content:"";
  position:absolute;
  top: 0;              /* dejamos top en 0 */
  right: -40px;        /* le damos aire hacia afuera */
  width: 340px;
  height: 420px;
  background: url('../img/form/cat.png') no-repeat right top;
  background-size: contain;
  opacity: .25;
  pointer-events: none;
  z-index: 10;

  transform: translateY(-5%); /* lo sube sin que overflow lo “mate” tanto */
}


/* Perro */
body#contact #wrapper::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0; /* fijo */
  width: 434px;
  height: 680px;
  background: url('../img/form/dog.png') no-repeat left bottom;
  background-size: contain;
  opacity: .25;
  pointer-events:none;
  z-index:10;

  transform: translateX(-14%); /* lo saca un poquito sin desaparecer */
  transform-origin: left bottom;
}

/* Aseguramos que el contenido quede arriba */
body#contact #wrapper > * {
  position: relative;
  z-index: 2;
}

/* Tablet */
@media (max-width: 1300px){
  body#contact #wrapper::before{
    width: 260px;
    height: 320px;
    right: -20px;
    transform: translateY(-15%);
    opacity: .18;
    z-index: 10;
  }

  body#contact #wrapper::after{
    width: 350px;
    height: 548px;
    opacity: .18;
    transform: translateX(-10%); /* menos salida para que no se pierda */
  }

}
/* <= 1024px (acá suele “desaparecer” si quedó muy afuera) */
@media (max-width: 1024px){
  body#contact #wrapper::after{
    width: 300px;
    height: 470px;
    opacity: .16;
    transform: translateX(-6%); /* lo traemos para que se vea */
  }
}

/* <= 992px (cuando bootstrap cambia fuerte columnas) */
@media (max-width: 992px){
  body#contact #wrapper::after{
    width: 260px;
    height: 400px;
    opacity: .14;
    transform: translateX(-3%);
  }
}

/* Mobile */
@media (max-width: 768px){
  body#contact #wrapper::before {
    width: 180px;
    height: 220px;
    opacity: 0.15;
  }

  /* el perro sigue visible en 768 */
  body#contact #wrapper::after{
    width: 300px;
    height: 470px;
    opacity: .12;
    transform: translateX(-2%);
  }
}

/* Ocultamos el perro recién en mobile chico */
@media (max-width: 576px){
  body#contact #wrapper::after{
    display: none;
  }
}

/* =========================
   Contact – mantener alto al enviar (success)
========================= */

/* Base: la sección siempre tiene aire como KV */
body#contact #wrapper .fm-contact__hero{
  min-height: 720px; /* ajustable */
}

/* Cuando el formulario ya no está (success), mantenemos el alto */
body#contact #wrapper .alert.alert-success{
  margin-top: 28px;
}

/* Tablet */
@media (max-width: 1300px){
  body#contact #wrapper .fm-contact__hero{
    min-height: 640px;
  }
}

/* Mobile */
@media (max-width: 768px){
  body#contact #wrapper .fm-contact__hero{
    min-height: 0; /* en mobile no conviene forzar alto */
  }
}

/* =========================
   Contact only – Animals entrance + float
   (Scoped to body#contact, won't touch Home)
========================= */

/* Entrance */
@keyframes fm-contact-cat-reveal{
  0%   { transform: translateY(-60%) scale(.98); opacity: 0; }
  100% { transform: translateY(-5%)  scale(1);   opacity: .25; }
}

@keyframes fm-contact-dog-reveal{
  0%   { transform: translateX(-14%) translateY(50%) scale(.98); opacity: 0; }
  100% { transform: translateX(-14%) translateY(10%) scale(1);   opacity: .25; }
}

/* Float */
@keyframes fm-contact-cat-float{
  0%   { transform: translateY(-5%); }
  50%  { transform: translateY(-2%); }
  100% { transform: translateY(-5%); }
}

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

/* Apply (only on Contact page) */
body#contact #wrapper::before{
  animation:
    fm-contact-cat-reveal 1.2s cubic-bezier(.22,.8,.2,1) forwards,
    fm-contact-cat-float 7s ease-in-out 1.2s infinite;
}

body#contact #wrapper::after{
  animation:
    fm-contact-dog-reveal 1.4s cubic-bezier(.22,.8,.2,1) forwards,
    fm-contact-dog-float 7s ease-in-out 1.4s infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body#contact #wrapper::before,
  body#contact #wrapper::after{
    animation: none !important;
  }
}

body#contact .fm-kv-captcha-question{
  margin: 0 0 10px;
  color: #001e46;
  font-weight: 700;
  line-height: 1.3;
}

/* =========================
   Auth (Login) – KV Furmates (sin card)
   Scoped: body#authentication
========================= */

/* Fondo celeste real (wrapper + content) */
body#authentication #wrapper,
body#authentication #content{
  background: #50c8ff;
}

body#authentication #content{
  padding: 0 !important;
}

/* Hero */
body#authentication .fm-auth__hero{
  position: relative;
  overflow: hidden;
  padding: 64px 0 90px;
}

/* Head */
body#authentication .fm-auth__head{
  max-width: 760px;
  margin: 0 auto 26px;
  text-align: left;
}

body#authentication .fm-auth__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  color: #0064ff;
}

body#authentication .fm-auth__subtitle{
  margin: 0;
  max-width: 720px;
  opacity: .95;
  color: #001e46;
}

/* Body */
body#authentication .fm-auth__body{
  max-width: 760px;
  margin: 0 auto;
}

/* Form area (sin card, pero con aire) */
body#authentication .fm-auth__form{
  padding: 10px 0 0;
}

/* Labels en blanco */
body#authentication .form-control-label,
body#authentication label{
  color: #fff !important;
}

/* Inputs: mismo “clean” que el form */
body#authentication .form-control{
  border-radius: 10px;
  border: 0;
}

/* Botón MOSTRAR password */
body#authentication .input-group .input-group-btn > .btn[data-action="show-password"]{
  padding: .78rem 1rem;
  background: #001e46;
  color: #fff;
  border: 0;
  border-radius: 0 10px 10px 0;
}
.renew-password .email {
    padding-bottom: 30px;
    color: #001e46;
}

/* Separaciones */
body#authentication .fm-auth__after{
  margin-top: 16px;
}

body#authentication .fm-auth__no-account{
  margin-top: 18px;
}

body#authentication .fm-auth__link{
  font-weight: 600;
  text-decoration: underline;
}

/* Botón primario (match Home CTA) */
body#authentication .btn.btn-primary{
  background: #0a56ff;
  color: #fff;
  box-shadow: 0 10px 26px rgba(10, 86, 255, .22);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
}

body#authentication .btn.btn-primary:hover{
  color: #24b9d7;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(10, 86, 255, .28);
}

/* Mobile: que no quede pegado al top */
@media (max-width: 768px){
  body#authentication .fm-auth__hero{
    padding: 26px 0 46px;
  }

  body#authentication .fm-auth__head,
  body#authentication .fm-auth__body{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce){
  body#authentication .btn.btn-primary{
    transition: none !important;
  }
}

/* =========================
   Auth – Forgot password link
   Scoped: Login & Register
========================= */

body#authentication .forgot-password a,
body#registration  .forgot-password a,
body#authentication a[href*="password"],
body#registration  a[href*="password"]{
  color: #0064ff;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}

/* Hover sutil */
body#authentication .forgot-password a:hover,
body#registration  .forgot-password a:hover,
body#authentication a[href*="password"]:hover,
body#registration  a[href*="password"]:hover{
  color: #001e46;
  opacity: .85;
}

/* =========================
   Auth – Create account link
   Scoped: Login & Register
========================= */

body#authentication .fm-auth__no-account a,
body#registration  .fm-auth__no-account a,
body#authentication a[data-link-action="display-register-form"],
body#registration  a[data-link-action="display-register-form"]{
  color: #0064ff;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}

/* Hover sutil */
body#authentication .fm-auth__no-account a:hover,
body#registration  .fm-auth__no-account a:hover,
body#authentication a[data-link-action="display-register-form"]:hover,
body#registration  a[data-link-action="display-register-form"]:hover{
  color: #001e46;
  opacity: .85;
}

/* =========================
   Auth (Login) – Decorative animals + entrance + float
   Scoped: body#authentication only
========================= */

body#authentication #wrapper{
  position: relative;
  overflow: hidden;
}

/* ---------- Animals base ---------- */

/* Cat */
body#authentication #wrapper::before{
  content:"";
  position:absolute;
  top:0;
  right:-40px;
  width:340px;
  height:420px;
  background:url('../img/form/cat.png') no-repeat right top;
  background-size:contain;
  opacity:.18;
  pointer-events:none;
  z-index:10;

  transform: translateY(-5%);
}

/* Dog base */
body#authentication #wrapper::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:420px;
  height:660px;
  background:url('../img/form/dog.png') no-repeat left bottom;
  background-size:contain;
  opacity:.18;
  pointer-events:none;
  z-index:10;
  transform-origin: left bottom;

  /* 👇 Control fino */
  --fm-auth-dog-x: -10%;
  --fm-auth-dog-y: 22%; /* más alto = más abajo (asoma menos) */
}

/* Content above animals */
body#authentication #wrapper > *{
  position:relative;
  z-index:2;
}

/* ---------- Entrance animations ---------- */

@keyframes fm-auth-cat-reveal{
  0%   { transform: translateY(-60%) scale(.98); opacity: 0; }
  100% { transform: translateY(-5%)  scale(1);   opacity: .18; }
}

/* Animaciones usando variables */
@keyframes fm-auth-dog-reveal{
  0%   { transform: translate(var(--fm-auth-dog-x), calc(var(--fm-auth-dog-y) + 35%)) scale(.98); opacity: 0; }
  100% { transform: translate(var(--fm-auth-dog-x), var(--fm-auth-dog-y)) scale(1); opacity: .18; }
}

/* ---------- Float animations ---------- */

@keyframes fm-auth-cat-float{
  0%   { transform: translateY(-5%); }
  50%  { transform: translateY(-2%); }
  100% { transform: translateY(-5%); }
}

@keyframes fm-auth-dog-float{
  0%   { transform: translate(var(--fm-auth-dog-x), var(--fm-auth-dog-y)); }
  50%  { transform: translate(var(--fm-auth-dog-x), calc(var(--fm-auth-dog-y) - 2%)); }
  100% { transform: translate(var(--fm-auth-dog-x), var(--fm-auth-dog-y)); }
}


/* Apply: entrance first, then float */
body#authentication #wrapper::before{
  animation:
    fm-auth-cat-reveal 1.2s cubic-bezier(.22,.8,.2,1) forwards,
    fm-auth-cat-float  7s ease-in-out 1.2s infinite;
}

/* Apply: entrada + float */
body#authentication #wrapper::after{
  animation:
    fm-auth-dog-reveal 1.4s cubic-bezier(.22,.8,.2,1) forwards,
    fm-auth-dog-float  7s ease-in-out 1.4s infinite;
}


/* ---------- Responsive tuning ---------- */
@media (max-width: 1300px){
  body#authentication #wrapper::before{
    width:260px;
    height:320px;
    right:-20px;
    opacity:.14;
  }
  body#authentication #wrapper::after{
    width:300px;
    height:470px;
    opacity:.14;
    --fm-auth-dog-x: -6%;
    --fm-auth-dog-y: 24%;
  }
}

@media (max-width: 768px){
  /* Cat */
body#authentication #wrapper::before{

  top:-15%;

}

/* Dog base */
body#authentication #wrapper::after{
   bottom: -30%;
   left: -10%;
   
}

@media (max-width: 480px){
  /* Cat */
body#authentication #wrapper::before{

  top:-15%;

}

/* Dog base */
body#authentication #wrapper::after{
   bottom: -40%;
   left: -30%;
   
}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body#authentication #wrapper::before,
  body#authentication #wrapper::after{
    animation: none !important;
  }
}
/* =========================
   Auth – Fix horizontal overlap
========================= */

body#authentication .form-group.row{
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

body#authentication .form-group.row .col-md-3{
  flex: 0 0 180px;
  max-width: 180px;
  padding-right: 20px;
}

body#authentication .form-group.row .col-md-6{
  flex: 1;
  max-width: 100%;
}

body#authentication .form-control-label{
  white-space: normal;
}

/* =========================
   Auth (Login) – Head alignment + spacing
   Scoped: body#authentication
========================= */

body#authentication .fm-auth__head{
  max-width: 760px;
  margin: 0 auto 18px;
  text-align: left;
}

body#authentication .fm-auth__title{
  margin: 0 0 8px;       /* menos aire entre H1 y subtítulo */
  line-height: 1.02;
}

body#authentication .fm-auth__subtitle{
  margin: 0;             /* elimina el “salto” extra */
}

/* =========================
   Auth – Forgot password (Password reset)
   Scoped: body#password
========================= */

/* Fondo celeste como KV */
body#password #wrapper,
body#password #content-wrapper,
body#password #content {
  background: #50c8ff;
}

/* Sin padding “blanco” del core (solo en esta página) */
body#password #content.page-content {
  padding: 0 !important;
  background: transparent !important;
}

/* Título + subtítulo (mismo criterio) */
body#password .fm-auth__title{
  color: #0064ff;
  margin: 0;
  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
}



body#password .fm-auth__subtitle{
  color: #001e46;
}

/* Labels blancos */
body#password .form-control-label,
body#password label.form-control-label,
body#password .forgotten-password label{
  color: #fff !important;
}

/* Link azul (y hover sutil) */
body#password a,
body#password .fm-auth__link,
body#password .account-link{
  color: #0064ff;
  font-weight: 600;
  transition: opacity .15s ease, text-decoration-color .15s ease;
}
body#password a:hover,
body#password .fm-auth__link:hover,
body#password .account-link:hover{
  opacity: .85;
}

/* Botón primario (match CTA home) */
body#password .btn.btn-primary{
  background: #0a56ff;
  color: #fff;
  box-shadow: 0 10px 26px rgba(10, 86, 255, .22);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  text-transform: uppercase;
}
body#password .btn.btn-primary:hover{
  color: #24b9d7;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(10, 86, 255, .28);
}

/* Inputs “clean” */
body#password .form-control{
  border-radius: 10px;
}

/* Mobile: aire lateral como en login */
@media (max-width: 768px){
  body#password .fm-auth__head,
  body#password .fm-auth__body{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body#password .btn.btn-primary{
    transition: none !important;
  }
}

/* =========================
   Forgot Password – Cover layout (no white under footer)
   Scoped: body#password
========================= */

body#password{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0064ff; /* si algo queda fuera, queda azul marca, no blanco */
}

/* el wrapper ocupa el alto disponible y empuja el footer hacia abajo */
body#password #wrapper{
  flex: 1 0 auto;
  background: #50c8ff;
}

/* footer queda abajo, sin “aire” blanco */
body#password #footer{
  margin-top: auto;
}

/* por si hay algún margen raro del main */
body#password main{
  background: transparent;
}

/* =========================
   Forgot Password – Animals
   Scoped: body#password
========================= */

/* Aseguramos contexto */
body#password #wrapper{
  position: relative;
  overflow: hidden;
}

/* DOG – bottom left */
body#password #wrapper::after{
  content:"";
  position:absolute;
  bottom:-300px;
  left:0;
  width: 300px;
  height: 650px;
  background: url('../img/form/dog.png') no-repeat left bottom;
  background-size: contain;
  opacity:.22;
  pointer-events:none;
  z-index:1;

  transform: translateX(-12%);
}

/* CAT – top right */
body#password #wrapper::before{
  content:"";
  position:absolute;
  top:-100px;
  right:0;
  width: 300px;
  height: 500px;
  background: url('../img/form/cat.png') no-repeat right top;
  background-size: contain;
  opacity:.18;
  pointer-events:none;
  z-index:1;

  transform: translateX(8%);
}

/* Aseguramos que el contenido quede arriba */
body#password #wrapper > *{
  position: relative;
  z-index: 2;
}

/* =========================
   Register – switch line
   Scoped: fm-auth--register
========================= */
body#authentication .fm-auth--register .fm-auth__switch{
  margin: 0 0 18px;
  color: #001e46;
  opacity: .95;
  font-weight: 600;
}

body#authentication .fm-auth--register .fm-auth__switch .fm-auth__link{
  color: #0064ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .15s ease, transform .15s ease;
}

body#authentication .fm-auth--register .fm-auth__switch .fm-auth__link:hover{
  opacity: .9;
  transform: translateY(-1px);
}

/* =========================
   Registration – KV Furmates (sin card)
   Scoped: body#registration
========================= */

body#registration{
  background:#50c8ff; /* cover celeste */
}

/* Fondo celeste + sin padding del content */
body#registration #wrapper,
body#registration #content{
  background:#50c8ff;
}

body#registration #content{
  padding:0 !important; /* lo pediste: sin padding */
}

/* Hero wrapper (similar a auth/contact) */
body#registration .page-content{
  background:#50c8ff;
}

body#registration .page-content .register-form{
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 0 90px;
}

/* H1 (title) como KV */
body#registration .page-header{
  max-width: 760px;
  margin: 0 auto 10px;
  padding: 0;
}

body#registration .page-header h1{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  color:#0064ff;
}

/* Subtitle (el <p> arriba del form) */
body#registration .register-form > p{
  margin: 0 0 22px;
  max-width: 720px;
  color:#001e46;
  opacity:.95;
}

/* Link dentro del subtitle */
body#registration .register-form > p a{
  color:#0064ff;
  font-weight: 700;
  text-decoration: underline;
  transition: opacity .15s ease, transform .15s ease;
}

body#registration .register-form > p a:hover{
  opacity:.85;
  transform: translateY(-1px);
}

/* =========================
   Titles + Subtitle + Auth Link
========================= */

/* H1 estilo Furmates */
.fm-auth__title,
.page-header h1{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  color: #0064ff;
}

/* Párrafos bajo título */
.fm-auth__subtitle,
.register-form > p{
  margin: 0 0 22px;
  color: #001e46;
  font-weight: 500;
  line-height: 1.5;
}

/* Link tipo auth (ej: ¡Inicie sesión!) */
.fm-auth__link{
  color: #0064ff;
  font-weight: 700;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
}

/* Hover elegante */
.fm-auth__link:hover{
  color: #001e46; /* azul marca */
  transform: translateY(-1px);
  opacity: .95;
}

.page-content.page-cms ul, p {
    color: #001e46; 
}

/* Labels blancos */
body#registration .form-control-label,
body#registration label.form-control-label{
    display: block;
    font-size: 12px;
    letter-spacing: .08em;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 8px;
    color: #fff;
    text-align: left;
    padding-left: 8px;
}
}

/* Inputs */
body#registration .form-control{
  border-radius: 10px;
}

/* Botón "Mostrar" (password) */
body#registration .input-group .input-group-btn > .btn[data-action=show-password]{
  padding: .78rem 1rem;
  background:#001e46;
  border:0;
  color:#fff;
  border-radius: 0 10px 10px 0;
}

/* CTA primary: mismo look&feel que Home/forms */
body#registration .btn.btn-primary{
  background:#0a56ff;
  color:#fff;
  box-shadow: 0 10px 26px rgba(10, 86, 255, .22);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
  border:0;
  border-radius:999px;
  padding: 12px 28px;
  font-weight: 700;
  margin-bottom: 3rem;
}

body#registration .btn.btn-primary:hover{
  color:#24b9d7;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(10, 86, 255, .28);
}

/* Ajustes de grid para que no quede “angosto” tipo backoffice */
body#registration .customer-form .form-group.row{
  align-items: center;
}

.custom-checkbox input[type=checkbox]+span {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin-right: .5rem;
    vertical-align: middle;
    pointer-events: none;
    cursor: pointer;
    border: 1px #0064ff solid;
}

.custom-radio {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: .5rem;
    vertical-align: middle;
    cursor: pointer;
    background: #fff;
    border: #0064ff 1px solid !important;
    border-radius: 50%;
}

.form-control {
    padding: .5rem 1rem;
    color: #001e46;
    background: #f6f6f6;
    border-radius: 10px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .03);
    border: 1px solid rgba(255, 255, 255,1);
}

.form-control-comment {
    padding-top: .5rem;
    font-size: .875rem;
    color: #fff;
}

/* Forzamos columnas razonables (label + input) */
@media (min-width: 768px){
  body#registration .customer-form .form-group.row .form-control-label{
    flex: 0 0 220px;
    max-width: 220px;
    text-align: left;
    padding-right: 16px;
  }
  body#registration .customer-form .form-group.row > div{
    flex: 1 1 auto;
    max-width: none;
  }
}

/* Mobile: padding lateral + aire */
@media (max-width: 768px){
  body#registration .page-header,
  body#registration .register-form{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body#registration .register-form{
    padding-top: 26px;
    padding-bottom: 46px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body#registration .btn.btn-primary,
  body#registration .register-form > p a{
    transition: none !important;
  }
}

/* =========================
   Register – Vertical Align labels/inputs like Login
   Scoped: body#registration
========================= */

/* 1) Fijamos ancho columna label (igual que login) */
body#registration .register-form .form-group.row .col-md-3{
  flex: 0 0 180px;
  max-width: 180px;
  padding-right: 20px;
}

/* 2) Permitimos que el label corte en 2 líneas sin empujar raro */
body#registration .register-form .form-control-label,
body#registration .register-form label{
  white-space: normal;
  color: #fff !important;
  margin-bottom: 0;
}

/* 3) Alineación vertical fina del row */
body#registration .register-form .form-group.row{
  align-items: center;
}

/* 4) Cuando hay help/ejemplo debajo (birthday), mantenemos input arriba
      para que el label no quede “bajo” visualmente */
body#registration .register-form .form-group.row > [class*="col-"]:not(.col-md-3){
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 5) En mobile, volvemos a flow normal */
@media (max-width: 768px){
  body#registration .register-form .form-group.row .col-md-3{
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 15px;
  }
  body#registration .register-form .form-group.row{
    align-items: flex-start;
  }
}

/* =========================
   Register – Animals (entry + float)
   Scoped: body#registration
========================= */

body#registration #wrapper{
  position: relative;
  overflow: hidden;
}

/* DOG – bottom left */
body#registration #wrapper::after{
  content:"";
  position:absolute;
  bottom:-20px;
  left:0;
  width: 430px;
  height: 680px;
  background: url('../img/form/dog.png') no-repeat left bottom;
  background-size: contain;
  opacity:.22;
  pointer-events:none;
  z-index:10;

  transform: translateX(-12%) translateY(30%);
  animation: fm-dog-entry 1.2s ease-out forwards,
             fm-dog-float 8s ease-in-out 1.2s infinite;

}

/* CAT – top right */
body#registration #wrapper::before{
  content:"";
  position:absolute;
  top:-20px;
  right:0;
  width: 380px;
  height: 520px;
  background: url('../img/form/cat.png') no-repeat right top;
  background-size: contain;
  opacity:.18;
  pointer-events:none;
  z-index:10;

  transform: translateX(10%) translateY(-30%);
  animation: fm-cat-entry 1.2s ease-out forwards,
             fm-cat-float 7s ease-in-out 1.2s infinite;
}

/* Contenido siempre arriba */
body#registration #wrapper > *{
  position: relative;
  z-index: 2;
}

/* Entrada suave */

@keyframes fm-dog-entry{
  to{
    transform: translateX(-12%) translateY(0);
  }
}

@keyframes fm-cat-entry{
  to{
    transform: translateX(10%) translateY(0);
  }
}

/* Loop flotante sutil */

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

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

@media (max-width: 640px){
/* DOG – bottom left */
body#registration #wrapper::after{
  bottom:-30%;
  opacity:.12;
}

/* CAT – top right */
body#registration #wrapper::before{
  top:-10%;
  opacity:.12;

}
}

/* =========================
   Register – layout tipo Contact (820px + labels arriba)
   Scoped: body#registration
========================= */

body#registration #content{
  background: #50c8ff;
  padding: 0 !important;
}

/* Contenedor centrado (igual que Contact) */
body#registration .register-form,
body#registration #customer-form{
  max-width: 820px;
  margin: 0 auto;
}

/* Aire general del “hero” si lo tenés montado */
body#registration .fm-auth__hero{
  padding: 64px 0 90px;
}

/* Pasar el form a “labels arriba” */
body#registration #customer-form .form-group.row{
  display: flex;
  flex-direction: column;     /* label arriba, input abajo */
  align-items: stretch;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Label full width arriba */
body#registration #customer-form .form-group.row > .form-control-label,
body#registration #customer-form .form-group.row > label,
body#registration #customer-form .form-group.row > .col-md-3{
  flex: 0 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 0 8px 0 !important;
  margin: 0 !important;
}

/* Campo full width abajo */
body#registration #customer-form .form-group.row > .col-md-6,
body#registration #customer-form .form-group.row > .col-md-5,
body#registration #customer-form .form-group.row > .col-md-9,
body#registration #customer-form .form-group.row > div[class*="col-"]{
  flex: 0 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Inputs “clean” como contacto */
body#registration #customer-form .form-control{
  border-radius: 12px;
}

/* Textos de ayuda/errores bien legibles */
body#registration #customer-form .form-control-comment,
body#registration #customer-form .help-block,
body#registration #customer-form .invalid-feedback{
  color: rgba(255,255,255,.92) !important;
}

/* Mobile: padding lateral */
@media (max-width: 768px){
  body#registration .register-form,
  body#registration #customer-form{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* =========================
   Register – Centrar botón GUARDAR
========================= */

body#registration .form-footer{
  text-align: center;
}

body#registration .form-footer .form-control-submit{
  float: none !important;
  display: inline-block;
}

/* =========================
   Register – Password input radius fix
   Scoped: body#registration
========================= */

/* Input contraseña dentro de input-group */
body#registration #customer-form .input-group .form-control{
  border-radius: 12px 0 0 12px !important;
}

/* Botón MOSTRAR acompaña el radio */
body#registration #customer-form .input-group .input-group-btn > .btn,
body#registration #customer-form .input-group-append .btn{
  border-radius: 0 12px 12px 0 !important;
}


/* =========================
   REGISTER – Orden visual correcto
   Global (desktop + tablet + mobile)
========================= */

body#registration #customer-form > div{
  display: flex;
  flex-direction: column;
}

/* Nombre */
body#registration #customer-form .form-group.row:has(label[for="field-firstname"]){
  order: 10;
}

/* Apellido */
body#registration #customer-form .form-group.row:has(label[for="field-lastname"]){
  order: 20;
}

/* Email */
body#registration #customer-form .form-group.row:has(label[for="field-email"]){
  order: 30;
}

/* CUIT */
body#registration #customer-form .form-group.row:has(label[for="field-siret"]){
  order: 40;
}

/* Contraseña (wrapper especial) */
body#registration #customer-form .field-password-policy{
  order: 50;
}

/* Captcha */
body#registration #customer-form .form-group.row:has(label[for="field-fm_captcha_answer"]){
  order: 60;
}

/* Checkboxes / radios */
body#registration #customer-form .form-group.row:has(.custom-checkbox),
body#registration #customer-form .form-group.row:has(.custom-radio){
  order: 70;
}

/* Footer / botón guardar */
body#registration #customer-form .form-footer{
  order: 80;
}

/* =========================
   Login – Fix password input-group radius (override global .form-control)
   Scoped: body#authentication
========================= */

/* Input password: solo esquina izquierda */
body#authentication #login-form .input-group .form-control,
body#authentication form#login-form .input-group input.form-control{
  border-radius: 10px 0 0 10px !important;
}

/* Botón MOSTRAR: solo esquina derecha */
body#authentication #login-form .input-group .input-group-btn > .btn[data-action="show-password"],
body#authentication #login-form .input-group .input-group-append > .btn[data-action="show-password"],
body#authentication #login-form .input-group .btn[data-action="show-password"]{
  border-radius: 0 10px 10px 0 !important;
}

/* Por si el input-group está usando overflow hidden o bordes raros */
body#authentication #login-form .input-group{
  border-radius: 10px;
  overflow: hidden;
}



/* =========================
   LOGIN – Mobile (labels arriba + inputs full + CTA centrado)
   HTML real: .form-group.row + .col-md-3/.col-md-6/.col-md-3
   Scoped: body#authentication
========================= */
@media (max-width: 768px){

  /* Cada fila del form se vuelve columna */
  body#authentication #login-form .form-group.row{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 14px; /* menos aire entre campos */
  }

  /* Todas las columnas (label/input/comment) a full width */
  body#authentication #login-form .form-group.row > [class*="col-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Label arriba, en mayúsculas */
  body#authentication #login-form .form-control-label{
    margin: 0 0 8px !important;
    text-align: left !important;
    white-space: normal;

    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    font-size: .85rem;

    color: #fff !important;
  }

  /* Ocultamos la columna comentario vacía para que no agregue altura */
  body#authentication #login-form .form-group.row .form-control-comment{
    display: none !important;
  }

  /* Inputs largos */
  body#authentication #login-form .form-control{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 0 16px;
    font-size: 1rem;
  }

  /* Password group: full width y alineado */
  body#authentication #login-form .input-group{
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    align-items: stretch;
  }

  body#authentication #login-form .input-group .form-control{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
  }

  body#authentication #login-form .input-group .input-group-btn > .btn[data-action="show-password"]{
    min-height: 48px;
    padding: .78rem 1rem;
  }

  /* CTA centrado */
  body#authentication #login-form .form-footer{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 10px;
  }

  body#authentication #login-form .form-footer .btn.btn-primary{
    display: inline-flex !important;
    margin: 0 auto !important;
    float: none !important;
    width: auto;
  }

  /* Links: menos separación */
  body#authentication #login-form .forgot-password{
    margin-top: 8px;
    text-align: center;
  }

  body#authentication .fm-auth__no-account{
    margin-top: 12px;
    text-align: center;
  }
}

@media (max-width: 768px){
  body#authentication #login-form .input-group .input-group-btn > .btn[data-action="show-password"]{
    background: #001e46;
    color: #fff;
    border: 0;
  }
}

/* =========================
   REGISTER – Desktop restore (>= 769px)
   Scoped: body#registration
========================= */
@media (min-width: 769px){

  body#registration #wrapper,
  body#registration #content,
  body#registration .page-content{
    background: #50c8ff;
  }

  body#registration .fm-auth__head,
  body#registration .fm-auth__body{
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Apilar campos como en Contact (label arriba) */
  body#registration #customer-form .form-group.row{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 14px;
  }

  body#registration #customer-form .form-group.row > [class*="col-"]{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
  }

  body#registration #customer-form .form-control-label,
  body#registration #customer-form label{
    display: block;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff !important;
    white-space: normal;
  }

  body#registration #customer-form .form-control{
    width: 100%;
    border: 0;
    border-radius: 12px;
    min-height: 48px;
    padding: 0 16px;
    font-size: 1rem;
  }

  /* Password input + mostrar */
  body#registration #customer-form .input-group{
    width: 100%;
    display: flex;
    align-items: stretch;
  }

  body#registration #customer-form .input-group .form-control{
    border-radius: 12px 0 0 12px;
    flex: 1 1 auto;
    min-width: 0;
  }

  body#registration #customer-form .input-group .input-group-btn > .btn[data-action="show-password"]{
    min-height: 48px;
    padding: .78rem 1rem;
    background: #001e46;
    color: #fff;
    border: 0;
    border-radius: 0 12px 12px 0;
  }

  /* Centrar CTA */
  body#registration #customer-form .form-footer{
    display: flex;
    justify-content: center;
  }
}

/* ====== Register: Title / subtitle / links (scoped) ====== */
body#registration .fm-auth__title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.05;
  color: #0064ff;
}

body#registration .fm-auth__subtitle{
  margin: 0 0 22px;
  color: #001e46 !important;
  font-weight: 500;
  line-height: 1.5;
}

body#registration .fm-auth__link{
  color: #0064ff;
  font-weight: 700;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
}

body#registration .fm-auth__link:hover{
  color: #001e46;
  transform: translateY(-1px);
  opacity: .95;
}

/* FIX: no pises todos los <p> del sitio */
.page-content.page-cms ul,
.page-content.page-cms p{
  color: #001e46;
}

@media (max-width: 768px){
body#registration #wrapper::after {

    bottom: -230px;
}
}

@media (max-width: 460px){
body#registration #wrapper::after {

    bottom: -500px;
}
}

/* =========================
   REGISTER – Checkbox labels fix
   Scoped: body#registration
========================= */

body#registration #customer-form .custom-checkbox label,
body#registration #customer-form .custom-radio label{
  text-transform: none !important;
  color: #001e46 !important;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 14px;
}

.page-content.page-cms ul, p {
    font-weight: 600;
    color: #001e46;
}

/* =========================
   PASSWORD RESET – Desktop KV restore (>= 769px)
   Scoped: body#password
   Objetivo: mismo look&feel que Login/Register + input NO se achica
========================= */
@media (min-width: 769px){

  /* Cover celeste (evita blanco) */
  body#password{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #50c8ff;
  }
  body#password #wrapper,
  body#password #content,
  body#password .page-content{
    background: #50c8ff !important;
  }
  body#password #content{
    padding: 0 !important;
  }

  /* Bloque central (como los otros forms) */
  body#password .page-content .forgotten-password{
    max-width: 820px;
    margin: 0 auto;
    padding: 64px 0 90px;
  }

  /* Título + subtítulo estilo KV */
  body#password .page-header{
    max-width: 820px;
    margin: 0 auto 10px;
    padding: 0;
  }
  body#password .page-header h1{
    margin: 0 0 10px;
    font-weight: 800;
    font-size: clamp(34px, 3.2vw, 52px);
    line-height: 1.05;
    color: #0064ff;
  }
  body#password .send-renew-password-link{
    margin: 0 0 22px;
    color: #001e46;
    opacity: .95;
    max-width: 760px;
  }

  /* Row principal: label + input + botón
     Clave: que el input NO se achique */
  body#password .forgotten-password .form-fields .form-group.center-email-fields{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
  }

  /* Label: ancho fijo razonable */
  body#password .forgotten-password .form-group.center-email-fields .form-control-label{
    flex: 0 0 180px;
    max-width: 180px;
    text-align: left;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    margin: 0;
    white-space: normal;
  }

  /* Input: ocupa todo lo que quede (NO shrink) */
  body#password .forgotten-password .form-group.center-email-fields .email{
    flex: 1 1 auto;
    min-width: 360px; /* anti “encogimiento” */
    max-width: none;
  }
  body#password .forgotten-password .form-group.center-email-fields .email .form-control{
    width: 100% !important;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    padding: 0 16px;
  }

  /* Botón: estilo CTA */
  body#password .forgotten-password .form-group.center-email-fields .btn.btn-primary{
    flex: 0 0 auto;
    background: #0a56ff;
    color: #fff;
    box-shadow: 0 10px 26px rgba(10, 86, 255, .22);
    transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
    border: 0;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 700;
    white-space: nowrap;
  }
  body#password .forgotten-password .form-group.center-email-fields .btn.btn-primary:hover{
    color: #24b9d7;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(10, 86, 255, .28);
  }

  /* Link “Back to login” */
  body#password #back-to-login{
    color: #0064ff;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
  }
  body#password #back-to-login:hover{
    color: #001e46;
    transform: translateY(-1px);
    opacity: .95;
  }


/* Si el H1 viene como .fm-auth__title (wrap KV) */

  body#password h1.fm-auth__title{
    margin: 0 0 10px;
    font-weight: 800;
    font-size: clamp(34px, 3.2vw, 52px);
    line-height: 1.05;
    color: #0064ff;
    letter-spacing: -0.02em;
  }
}

/* =========================
   PASSWORD RESET – Tablet fix (768–991px)
========================= */
@media (min-width: 768px) and (max-width: 991px){

  body#password .forgotten-password .form-group.center-email-fields{
    display:flex;
    align-items:center;
    gap:12px;
  }

  /* Label */
  body#password .forgotten-password .form-control-label{
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing:.06em;
    color:#fff;
    flex:0 0 160px;
  }

  /* Input: evitar que se encoja */
  body#password .forgotten-password .email{
    flex:1 1 auto;
    min-width:260px;
  }

  body#password .forgotten-password .email .form-control{
    width:100%;
    min-height:48px;
    border-radius:12px;
    padding:0 16px;
  }

}

/* =========================
   PASSWORD RESET – Tablet stack (768–991px)
   Label arriba + input full + botón full (sin cortes)
========================= */
@media (min-width: 768px) and (max-width: 991px){

  /* La fila pasa a columna */
  body#password .forgotten-password .form-group.center-email-fields{
    display:flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* Label arriba, en mayúsculas */
  body#password .forgotten-password .form-control-label{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    text-align: left !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    color: #fff !important;
    margin: 0 !important;
  }

  /* Input full width */
  body#password .forgotten-password .email{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  body#password .forgotten-password .email .form-control{
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
  }

  /* Botón debajo, full width, sin cortar texto */
  body#password .forgotten-password .form-control-submit{
    width: 100% !important;
    white-space: normal !important;   /* permite 2 líneas si hace falta */
    line-height: 1.15 !important;
    padding: 14px 18px !important;
    border-radius: 999px !important;
  }

  /* Si hay algún float viejo */
  body#password .forgotten-password .form-control-submit,
  body#password .forgotten-password .btn{
    float: none !important;
  }


}

@media (max-width: 768px) {
    body#password #wrapper::before {
       display:none;
    }
}

/* =========================
   PASSWORD RESET – Mobile label fix
========================= */
@media (max-width: 767px){

  body#password .forgotten-password .form-control-label{
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: .06em;
    font-weight: 800;
  }

}

@media (max-width: 640px){
.furmates-wrap {
    padding-left: 0px;
    padding-right: 0px;
}
.fm-hero__title {
  margin: 0 30px;

  }

  .fm-hero__lead {
    margin: 0 10px 32px 30px;
    font-weight: 500;
}

.fm-hero__cta {
    margin: 0 30px;
}
}


/* =========================================================
   Vitals4Pets – cleanup real del layout CMS (ID 6)
========================================================= */

body#cms.cms-id-6 nav.breadcrumb,
body#cms.cms-id-6 .breadcrumb {
  display: none !important;
}

body#cms.cms-id-6 #wrapper,
body#cms.cms-id-6 #content-wrapper,
body#cms.cms-id-6 #main,
body#cms.cms-id-6 #content.page-content.page-cms,
body#cms.cms-id-6 .page-content.page-cms {
    margin-top: 0 !important;
    padding-top: 0 !important;

}

body#cms.cms-id-6 #content-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#cms.cms-id-6 #main > .page-header,
body#cms.cms-id-6 .page-header {
  display: none !important;
}

/* =========================================================
   Vitals4Pets – Internal page MVP
   Top banner + About + Signals
========================================================= */

.page-vitals4pets{
  background: #fff;
}

/* =========================
   Top Banner
========================= */
.fm-v4p-top{
  position: relative;
  background:
    linear-gradient(45deg, #54c8f8 0 44%, #1881fe 44% 100%);
  overflow: hidden;
}

.fm-v4p-top__inner{
  min-height: 540px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  position: relative;
}

.fm-v4p-top__media{
  position: relative;
  z-index: 2;
  padding-top: 28px;
}

.fm-v4p-top__device{
  display: block;
  width: min(100%, 760px);
  height: auto;
  margin-left: -20px;
}

.fm-v4p-top__shape{
  position: absolute;
  top: 0;
  right: 0;
  width: min(52%, 760px);
  height: 280px;
  z-index: 1;
  pointer-events: none;
}

.fm-v4p-top__shape-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top right;
  display: block;
}

.fm-v4p-top__content{
  position: relative;
  z-index: 2;
  padding-left: clamp(20px, 4vw, 80px);
  padding-right: clamp(8px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.fm-v4p-top__brand{
  width: 100%;
  margin-bottom: 28px;
  display: flex;
  justify-content: flex-end;
}

.fm-v4p-top__brand-logo{
  width: min(100%, 430px);
  height: auto;
  display: block;
}

.fm-v4p-top__lead{
  margin: 0;
  max-width: 14ch;
  color: var(--fm-sky);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-size: clamp(28px, 3.5vw, 54px);
}

.fm-v4p-top__lead strong{
  font-weight: 800;
}

/* =========================================================
   Vitals4Pets – KV desktop con fondo JPG
   Paso: montar fondo final + ocultar shape + subir altura
========================================================= */
@media (min-width: 992px){
  .fm-v4p-top{
    position: relative;
    background: #fff;
    overflow: visible;
  }

  .fm-v4p-top::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 540px;
    background:
      url('/themes/furmates/assets/img/brands/vitals4pets/v4p-top-bg-desktop.jpg')
      no-repeat center top / cover;
    z-index: 0;
    pointer-events: none;
  }

  .fm-v4p-top__inner{
    position: relative;
    z-index: 1;
    min-height: 640px;
    grid-template-columns: 58% 42%;
    align-items: start;
  }

  .fm-v4p-top__shape{
    display: none;
  }

  .fm-v4p-top__media{
    position: relative;
    z-index: 3;
    padding-top: 36px;
  }

  .fm-v4p-top__device{
    display: block;
    width: min(100%, 860px);
    height: auto;
    margin-left: -8px;
    transform: translateY(14px);
  }

  .fm-v4p-top__content{
    position: relative;
    z-index: 2;
    padding-left: 0;
    padding-right: 44px;
    padding-top: 22px;
    align-items: flex-end;
    text-align: right;
  }

  .fm-v4p-top__brand{
    width: auto;
    margin-bottom: 86px;
    justify-content: flex-end;
  }

  .fm-v4p-top__brand-logo{
    width: min(100%, 360px);
    height: auto;
    display: block;
  }

  .fm-v4p-top__lead{
    margin: 0;
    max-width: 15ch;
    color: #56ccf9;
    font-size: 2.25rem; /* 36px */
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
}

/* =========================================================
   Vitals4Pets – ajuste fino KV desktop
========================================================= */
@media (min-width: 992px){
  .fm-v4p-top__media{
    padding-top: 58px;
  }

  .fm-v4p-top__device{
    width: min(100%, 460px);
    margin-left: 6px;
    transform: translateY(134px) rotate(-17deg);
    transform-origin: center center;
  }

  .fm-v4p-top__content{
    padding-right: 64px;
    padding-top: 0;
  }

  .fm-v4p-top__brand{
    width: 100%;
    justify-content: center;
    margin-bottom: 3rem;
    transform: translateY(3rem);
  }

  .fm-v4p-top__brand-logo{
    width: min(100%, 350px);
    margin: 0 auto;
  }

  .fm-v4p-top__lead{
    max-width: 14ch;
    margin-left: auto;
    color: #56ccf9 !important;
    font-size: 2.25rem; /* 36px */
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-align: center;
    text-wrap: balance;
  }

  .fm-v4p-top__lead strong{
    font-weight: 800;
  }
}

/* =========================================================
   Vitals4Pets – microajuste desktop
   dispositivo más al centro + lead alineado al logo
========================================================= */
@media (min-width: 992px){
  .fm-v4p-top__media{
    padding-left: 72px;
  }

  .fm-v4p-top__device{
    margin-left: 156px;
    margin-top: 50px;
  }

  .fm-v4p-top__content{
    padding-left: 18px;
    padding-right: 0;
    align-items: flex-start;
    text-align: left;
  }

  .fm-v4p-top__brand{
    justify-content: flex-start;
    width: auto;
  }

  .fm-v4p-top__lead{
    margin-left: 0;
    margin-right: 0;
    max-width: 14ch;
    text-align: left;
    align-self: flex-start;
  }
}

/* =========================================================
   Vitals4Pets – microajuste logo + lead desktop
========================================================= */
@media (min-width: 992px){
  .fm-v4p-top__content{
    padding-left: 0 !important;
    padding-right: 36px !important;
    padding-top: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  .fm-v4p-top__brand{
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 2.5rem !important;
    transform: translateX(-2rem) translateY(4rem);
  }

  .fm-v4p-top__brand-logo{
    margin: 0 auto !important;
  }

  .fm-v4p-top__lead{
    align-self: center !important;
    margin: 0 !important;
    max-width: 15ch !important;
    text-align: right !important;
    transform: translateX(-3rem) translateY(160px);
  }
}

/* =========================================================
   Vitals4Pets – ajuste lead ES desktop
   baja "en" para que quede con "un solo dispositivo"
========================================================= */
@media (min-width: 992px){
  body.lang-es .fm-v4p-top__lead{
    max-width: 18ch !important;
  }
}

/* =========================================================
   Vitals4Pets – animación suave del dispositivo
========================================================= */
@media (min-width: 992px){
  .fm-v4p-top__device{
    animation: fm-v4p-device-float 5.8s ease-in-out infinite;
    will-change: transform;
  }

  @keyframes fm-v4p-device-float{
    0%{
      transform: translateY(34px) rotate(-20deg);
    }
    25%{
      transform: translateY(28px) rotate(-18deg);
    }
    50%{
      transform: translateY(24px) rotate(-20.5deg);
    }
    75%{
      transform: translateY(30px) rotate(-22deg);
    }
    100%{
      transform: translateY(34px) rotate(-20deg);
    }
  }
}

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce){
  .fm-v4p-top__device{
    animation: none !important;
  }
}

/* =========================================================
   Vitals4Pets – ajuste desktop
   rotación dispositivo + wrap full width
========================================================= */
@media (min-width: 992px){
  .fm-v4p-top__inner.furmates-wrap{
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fm-v4p-top__device{
    transform: translateY(34px) rotate(-20deg);
    transform-origin: center center;
  }

  .fm-v4p-top__brand{
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   Vitals4Pets – entrada power del banner
========================================================= */
@media (min-width: 992px){
  .fm-v4p-top{
    overflow: hidden;
  }

  .fm-v4p-top::before{
    animation: fm-v4p-bg-in 1s cubic-bezier(.22,.61,.36,1) both;
  }

  .fm-v4p-top__media{
    animation: fm-v4p-device-in 1.05s cubic-bezier(.22,.61,.36,1) .12s both;
    will-change: transform, opacity;
  }

  .fm-v4p-top__brand{
    animation: fm-v4p-logo-in .9s cubic-bezier(.22,.61,.36,1) .35s both;
    will-change: transform, opacity;
  }

  .fm-v4p-top__lead{
    animation: fm-v4p-lead-in .95s cubic-bezier(.22,.61,.36,1) .5s both;
    will-change: transform, opacity;
  }

  @keyframes fm-v4p-bg-in{
    0%{
      opacity: 0;
      transform: scale(1.04);
      filter: saturate(.9);
    }
    100%{
      opacity: 1;
      transform: scale(1);
      filter: saturate(1);
    }
  }

  @keyframes fm-v4p-device-in{
    0%{
      opacity: 0;
      transform: translateX(-90px) translateY(46px) scale(.92);
    }
    100%{
      opacity: 1;
      transform: translateX(0) translateY(0) scale(1);
    }
  }

  @keyframes fm-v4p-logo-in{
    0%{
      opacity: 0;
      transform: translateY(-18px) scale(.96);
    }
    100%{
      opacity: 1;
      transform: translateX(-2rem) translateY(4rem) scale(1);
    }
  }

  @keyframes fm-v4p-lead-in{
    0%{
      opacity: 0;
      transform: translateX(16px) translateY(22px);
    }
    100%{
      opacity: 1;
      transform: translateX(-3rem) translateY(160px);
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .fm-v4p-top::before,
  .fm-v4p-top__media,
  .fm-v4p-top__brand,
  .fm-v4p-top__lead{
    animation: none !important;
  }
}



/* =========================
   About
========================= */
.fm-v4p-about{
  background: #fff;
}

.fm-v4p-about__grid{
  display: grid;
  grid-template-columns: minmax(280px, 430px) 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: center;
}


.fm-v4p-about__text{
  margin: 0;
  color: #111;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  max-width: 34ch;
}

.fm-v4p-about__visual{
  display: flex;
  justify-content: center;
  align-items: center;
}

.fm-v4p-about__img{
  display: block;
  width: min(100%, 620px);
  height: auto;
}

/* =========================================================
   Vitals4Pets – About title hierarchy
========================================================= */
.fm-v4p-about__title{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 22px;
  line-height: .96;
  letter-spacing: -0.03em;
  text-align: left;
}

.fm-v4p-about__kicker{
  display: block;
  color: rgba(0,100,255,.72);
  font-size: clamp(28px, 2.3vw, 44px);
  font-weight: 700;
}

.fm-v4p-about__title-main{
  display: block;
  color: var(--fm-blue);
  font-size: clamp(44px, 4.2vw, 74px);
  font-weight: 800;
}

/* =========================================================
   Vitals4Pets – About reveal on scroll
========================================================= */
.fm-v4p-about__title,
.fm-v4p-about__text,
.fm-v4p-about__visual{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .75s cubic-bezier(.22,.61,.36,1),
    transform .75s cubic-bezier(.22,.61,.36,1);
}

.fm-v4p-about__title{
  transform: translateY(42px);
  transition-delay: .02s;
  transition-duration: .9s;
}

.fm-v4p-about__text{
  transform: translateY(48px);
  transition-delay: .16s;
  transition-duration: 1s;
}

.fm-v4p-about__visual{
  transform: translateX(28px) scale(.985);
  transition-delay: .26s;
  transition-duration: .95s;
}

.fm-v4p-about.is-inview .fm-v4p-about__title,
.fm-v4p-about.is-inview .fm-v4p-about__text,
.fm-v4p-about.is-inview .fm-v4p-about__visual{
  opacity: 1;
}

.fm-v4p-about.is-inview .fm-v4p-about__title,
.fm-v4p-about.is-inview .fm-v4p-about__text{
  transform: translateY(0);
}

.fm-v4p-about.is-inview .fm-v4p-about__visual{
  transform: translateX(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .fm-v4p-about__title,
  .fm-v4p-about__text,
  .fm-v4p-about__visual{
    opacity: 1 !important;
    transition: none !important;
    transform: none !important;
  }
}




/* =========================
   Signals
========================= */
.fm-v4p-signals{
  background: #f3f3f3;
  padding-top: 28px;
}

.fm-v4p-signals__head{
  text-align: center;
  margin-bottom: 34px;
}

.fm-v4p-signals__eyebrow{
  margin: 0 0 10px;
  color: #111;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 500;
}

.fm-v4p-signals__title{
  margin: 0;
  color: var(--fm-blue);
  font-size: clamp(34px, 3.6vw, 60px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
}

.fm-v4p-signals__layout{
  display: grid;
  grid-template-columns: 1fr minmax(220px, 360px) 1fr;
  grid-template-areas:
    "left center right"
    "left center right"
    ".    bottom .";
  gap: 18px;
  align-items: center;
}

.fm-v4p-signals__cards--left{
  grid-area: left;
}

.fm-v4p-signals__cards--right{
  grid-area: right;
}

.fm-v4p-signals__cards{
  display: grid;
  gap: 14px;
}

.fm-v4p-signals__center{
  grid-area: center;
  display: flex;
  justify-content: center;
  align-items: end;
}

.fm-v4p-signals__vet{
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.fm-v4p-signals__bottom{
  grid-area: bottom;
  display: flex;
  justify-content: center;
  margin-top: -4px;
}

.fm-v4p-signals__bottom .fm-v4p-signal-card{
  width: min(100%, 320px);
}

.fm-v4p-signal-card{
  min-height: 120px;
  padding: 22px 18px;
  border-radius: 10px;
  background: #56c3f2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.fm-v4p-signal-card h3,
.fm-v4p-signal-card p{
  margin: 0;
  color: #fff;
}

.fm-v4p-signal-card h3{
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 600;
  line-height: 1.2;
}

.fm-v4p-signal-card--text{
  align-items: center;
  justify-content: center;
}

.fm-v4p-signal-card--text p{
  font-size: clamp(13px, 1.02vw, 16px);
  line-height: 1.45;
  max-width: 24ch;
}

/* =========================
   Responsive
========================= */
@media (max-width: 1199.98px){
  .fm-v4p-top__inner{
    min-height: 470px;
    grid-template-columns: 1fr 1fr;
  }

  .fm-v4p-top__shape{
    width: 56%;
    height: 220px;
  }

  .fm-v4p-top__lead{
    font-size: clamp(24px, 3vw, 42px);
  }
}

@media (max-width: 991.98px){
  .fm-v4p-top{
    background: linear-gradient(180deg, #54c8f8 0 48%, #f3f3f3 48% 100%);
  }

  .fm-v4p-top__inner{
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .fm-v4p-top__media{
    order: 2;
    padding-top: 0;
  }

  .fm-v4p-top__device{
    width: min(100%, 620px);
    margin: 0 auto;
  }

  .fm-v4p-top__shape{
    width: min(78%, 520px);
    height: 170px;
  }

  .fm-v4p-top__content{
    order: 1;
    padding-left: 0;
    align-items: flex-end;
    text-align: right;
    padding-top: 12px;
  }

  .fm-v4p-top__brand-logo{
    width: min(100%, 340px);
  }

  .fm-v4p-top__lead{
    max-width: 16ch;
  }

  .fm-v4p-about__grid{
    grid-template-columns: 1fr;
  }

  .fm-v4p-about__copy{
    max-width: 560px;
  }

  .fm-v4p-signals__layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "left"
      "right"
      "bottom";
  }

  .fm-v4p-signals__center{
    margin-bottom: 10px;
  }

  .fm-v4p-signals__vet{
    max-width: 280px;
  }

  .fm-v4p-signals__bottom{
    margin-top: 0;
  }

  .fm-v4p-signals__bottom .fm-v4p-signal-card{
    width: 100%;
  }
}

@media (max-width: 575.98px){
  .fm-v4p-top__shape{
    width: 86%;
    height: 130px;
  }

  .fm-v4p-top__brand-logo{
    width: min(100%, 280px);
  }

  .fm-v4p-top__lead{
    font-size: clamp(22px, 7vw, 34px);
  }

  .fm-v4p-signal-card{
    min-height: 98px;
    padding: 18px 14px;
  }
}

/* =========================================================
   Vitals4Pets – Signals / flip cards
========================================================= */
.fm-v4p-signals{
  background: #fff;
  padding-top: 34px;
}

.fm-v4p-signals__head{
  text-align: center;
  margin-bottom: 34px;
}

.fm-v4p-signals__eyebrow{
  margin: 0 0 10px;
  color: #111;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  font-weight: 500;
}

.fm-v4p-signals__title{
  margin: 0;
  color: var(--fm-blue);
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.03em;
}

.fm-v4p-signals__layout{
  display: grid;
  grid-template-columns: minmax(280px, 450px) minmax(240px, 320px) minmax(280px, 450px);
  grid-template-areas:
    "left center right"
    "left center right"
    ". bottom .";
  justify-content: center;
  align-items: center;
  column-gap: 34px;
  row-gap: 14px;
}

.fm-v4p-signals__cards--left{ grid-area: left; }
.fm-v4p-signals__cards--right{ grid-area: right; }

.fm-v4p-signals__cards{
  display: grid;
  gap: 14px;
  justify-items: center;
}

.fm-v4p-signals__center{
  grid-area: center;
  display: flex;
  justify-content: center;
  align-items: end;
}

.fm-v4p-signals__vet{
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

.fm-v4p-signals__bottom{
  grid-area: bottom;
  display: flex;
  justify-content: center;
  margin-top: -2px;
}

.fm-v4p-signals__bottom .fm-v4p-flip-card{
  width: min(100%, 450px);
}

/* ---------- Flip cards ---------- */
.fm-v4p-flip-card{
  width: min(100%, 450px);
  min-height: 255px;
  perspective: 1400px;
  cursor: pointer;
}

.fm-v4p-flip-card__inner{
  position: relative;
  width: 100%;
  min-height: 255px;
  transform-style: preserve-3d;
  transition: transform .78s cubic-bezier(.22,.61,.36,1);
}

.fm-v4p-flip-card:hover .fm-v4p-flip-card__inner,
.fm-v4p-flip-card:focus-within .fm-v4p-flip-card__inner{
  transform: rotateY(180deg);
}

.fm-v4p-flip-card__face{
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.fm-v4p-flip-card__face--front{
  background: #50c8ff;
  color: #fff;
  box-shadow: 0 10px 24px rgba(80,200,255,.14);
}

.fm-v4p-flip-card__face--back{
  background: #fff;
  color: #50c8ff;
  border: 2px solid #50c8ff;
  transform: rotateY(180deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.fm-v4p-flip-card__icon{
  display: block;
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 16px;
  flex: 0 0 auto;
}

.fm-v4p-flip-card__face--front h3,
.fm-v4p-flip-card__face--back p{
  margin: 0;
  text-wrap: balance;
}

.fm-v4p-flip-card__face--front h3{
  color: #fff;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.2;
  font-weight: 700;
  max-width: 16ch;
}

.fm-v4p-flip-card__face--back p{
  color: #50c8ff;
  font-size: clamp(17px, 1.18vw, 19px);
  line-height: 1.35;
  font-weight: 600;
  max-width: 24ch;
}


/* ---------- Responsive ---------- */
@media (max-width: 1399.98px){
  .fm-v4p-signals__layout{
    grid-template-columns: minmax(260px, 420px) minmax(220px, 300px) minmax(260px, 420px);
    column-gap: 24px;
  }

  .fm-v4p-flip-card,
  .fm-v4p-flip-card__inner{
    min-height: 238px;
  }
}

@media (max-width: 991.98px){
  .fm-v4p-signals__layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "center"
      "left"
      "right"
      "bottom";
    row-gap: 18px;
  }

  .fm-v4p-signals__cards{
    gap: 18px;
  }

  .fm-v4p-signals__center{
    margin-bottom: 8px;
  }

  .fm-v4p-signals__vet{
    max-width: 290px;
  }

  .fm-v4p-flip-card,
  .fm-v4p-flip-card__inner{
    width: 100%;
    max-width: 100%;
    min-height: 220px;
  }

  .fm-v4p-signals__bottom .fm-v4p-flip-card{
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .fm-v4p-flip-card__inner{
    transition: none !important;
  }
}

/* =========================================================
   Vitals4Pets – Signals desktop equal columns
   layout igual al KV
========================================================= */
@media (min-width: 992px){
  .fm-v4p-signals__layout{
    grid-template-columns: repeat(3, minmax(280px, 390px));
    grid-template-areas:
      "left center right"
      "left center right"
      "left bottom right";
    justify-content: center;
    align-items: start;
    column-gap: 22px;
    row-gap: 16px;
  }

  .fm-v4p-signals__cards--left{
    grid-area: left;
  }

  .fm-v4p-signals__cards--right{
    grid-area: right;
  }

  .fm-v4p-signals__cards{
    justify-items: stretch;
    gap: 16px;
  }

  .fm-v4p-flip-card,
  .fm-v4p-signals__bottom .fm-v4p-flip-card{
    width: 100%;
    max-width: none;
    min-height: 230px;
  }

  .fm-v4p-flip-card__inner{
    min-height: 230px;
  }

  .fm-v4p-signals__center{
    grid-area: center;
    width: 100%;
    height: calc(230px * 2 + 16px);
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .fm-v4p-signals__vet{
    width: 100%;
    max-width: 405px;
    height: auto;
  }

  .fm-v4p-signals__bottom{
    grid-area: bottom;
    width: 100%;
    margin-top: 0;
    display: flex;
    justify-content: stretch;
    align-items: start;
  }
}

/* =========================================================
   Vitals4Pets – Signals reveal on scroll
========================================================= */
.fm-v4p-signals__eyebrow,
.fm-v4p-signals__title,
.fm-v4p-signals__cards--left .fm-v4p-flip-card,
.fm-v4p-signals__cards--right .fm-v4p-flip-card,
.fm-v4p-signals__center,
.fm-v4p-signals__bottom{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}

/* Head */
.fm-v4p-signals__eyebrow{
  transform: translateY(24px);
  transition-delay: .02s;
}

.fm-v4p-signals__title{
  transform: translateY(30px);
  transition-delay: .12s;
}

/* Left column */
.fm-v4p-signals__cards--left .fm-v4p-flip-card:nth-child(1){
  transform: translateX(-34px) translateY(8px);
  transition-delay: .18s;
}
.fm-v4p-signals__cards--left .fm-v4p-flip-card:nth-child(2){
  transform: translateX(-34px) translateY(8px);
  transition-delay: .26s;
}
.fm-v4p-signals__cards--left .fm-v4p-flip-card:nth-child(3){
  transform: translateX(-34px) translateY(8px);
  transition-delay: .34s;
}

/* Right column */
.fm-v4p-signals__cards--right .fm-v4p-flip-card:nth-child(1){
  transform: translateX(34px) translateY(8px);
  transition-delay: .22s;
}
.fm-v4p-signals__cards--right .fm-v4p-flip-card:nth-child(2){
  transform: translateX(34px) translateY(8px);
  transition-delay: .30s;
}
.fm-v4p-signals__cards--right .fm-v4p-flip-card:nth-child(3){
  transform: translateX(34px) translateY(8px);
  transition-delay: .38s;
}

/* Center image */
.fm-v4p-signals__center{
  transform: translateY(34px) scale(.985);
  transition-delay: .2s;
}

/* Bottom center card */
.fm-v4p-signals__bottom{
  transform: translateY(30px);
  transition-delay: .42s;
}

/* Active state */
.fm-v4p-signals.is-inview .fm-v4p-signals__eyebrow,
.fm-v4p-signals.is-inview .fm-v4p-signals__title,
.fm-v4p-signals.is-inview .fm-v4p-signals__cards--left .fm-v4p-flip-card,
.fm-v4p-signals.is-inview .fm-v4p-signals__cards--right .fm-v4p-flip-card,
.fm-v4p-signals.is-inview .fm-v4p-signals__center,
.fm-v4p-signals.is-inview .fm-v4p-signals__bottom{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .fm-v4p-signals__eyebrow,
  .fm-v4p-signals__title,
  .fm-v4p-signals__cards--left .fm-v4p-flip-card,
  .fm-v4p-signals__cards--right .fm-v4p-flip-card,
  .fm-v4p-signals__center,
  .fm-v4p-signals__bottom{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Vitals4Pets – How it works
   dirección de arte: top editorial + video stage
========================================================= */
.fm-v4p-how{
  background: #f3f3f3;
  padding-top: 0;
  padding-bottom: 72px;
}

/* ---------- Top editorial band ---------- */
.fm-v4p-how__top{
  background: #00366e;
  color: #fff;
}

.fm-v4p-how__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px 0 72px;
}

.fm-v4p-how__head{
  max-width: 760px;
  margin: 0 0 34px;
}

.fm-v4p-how__title{
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(42px, 4.8vw, 72px);
  line-height: .96;
  font-weight: 800;
  letter-spacing: -.03em;
}

.fm-v4p-how__lead{
  margin: 0;
  color: #a0ebff !important;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.18;
  font-weight: 600;
  max-width: 32ch;
}

/* ---------- Steps ---------- */
.fm-v4p-how__steps{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.fm-v4p-how__step{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(3px);
}

.fm-v4p-how__step-num{
  width: 60px;
  height: 60px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(80,200,255,.18);
  border: 1px solid rgba(160,235,255,.3);
  color: #a0ebff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.fm-v4p-how__step-copy h3{
  margin: 2px 0 8px;
  color: #fff !important;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: left;
}

.fm-v4p-how__step-copy p{
  margin: 0;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(16px, 1.08vw, 18px);
  line-height: 1.42;
  font-weight: 500;
  max-width: 36ch;
}

/* ---------- Credits panel ---------- */
.fm-v4p-how__credits{
  margin-top: 10px;
  padding: 26px 28px;
  border-radius: 22px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(160,235,255,.18);
}

.fm-v4p-how__credits-intro,
.fm-v4p-how__credits-outro{
  margin: 0;
  color: #fff !important;
  font-size: clamp(17px, 1.12vw, 19px);
  line-height: 1.5;
  font-weight: 600;
}

.fm-v4p-how__credits-list{
  margin: 14px 0 16px 0;
  padding-left: 1.2rem;
}

.fm-v4p-how__credits-list li{
  margin: 6px 0;
  color: #a0ebff !important;
  font-size: clamp(16px, 1.04vw, 18px);
  line-height: 1.45;
  font-weight: 600;
}

.fm-v4p-how__new-electro{
  color: #a0ebff !important;
  font-weight: 600;
}

/* ---------- Video row ---------- */
.fm-v4p-how__media{
  padding-top: 28px;
}

.fm-v4p-how__video-shell{
  max-width: 1180px;
  margin: 0 auto;
}

.fm-v4p-how__video-placeholder{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.3)),
    linear-gradient(135deg, #0c447d 0%, #0a5fb6 45%, #50c8ff 100%);
  box-shadow: 0 24px 54px rgba(0,0,0,.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fm-v4p-how__video-placeholder::before{
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}

.fm-v4p-how__video-placeholder span{
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .fm-v4p-how{
    padding-bottom: 56px;
  }

  .fm-v4p-how__inner{
    padding: 56px 0 52px;
  }

  .fm-v4p-how__steps{
    grid-template-columns: 1fr;
  }

  .fm-v4p-how__step{
    grid-template-columns: 52px 1fr;
    gap: 14px;
    padding: 20px 18px;
  }

  .fm-v4p-how__step-num{
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .fm-v4p-how__credits{
    padding: 22px 18px;
  }

  .fm-v4p-how__media{
    padding-top: 20px;
  }

  .fm-v4p-how__video-placeholder{
    border-radius: 18px;
  }
}

@media (max-width: 575.98px){
  .fm-v4p-how__inner{
    padding: 46px 0 44px;
  }

  .fm-v4p-how__title{
    font-size: clamp(36px, 10vw, 52px);
  }

  .fm-v4p-how__lead{
    font-size: 18px;
  }

  .fm-v4p-how__step-copy h3{
    font-size: 24px;
  }

  .fm-v4p-how__step-copy p,
  .fm-v4p-how__credits-intro,
  .fm-v4p-how__credits-outro,
  .fm-v4p-how__credits-list li{
    font-size: 16px;
  }
}

/* =========================================================
   Vitals4Pets – How section
   overlap suave entre banda azul y video
========================================================= */
@media (min-width: 992px){
  .fm-v4p-how{
    padding-bottom: 96px;
  }

  .fm-v4p-how__top{
    position: relative;
    z-index: 1;
  }

  .fm-v4p-how__inner{
    padding-bottom: 150px; /* aire para que el video “suba” sin pisar el texto */
  }

  .fm-v4p-how__media{
    position: relative;
    z-index: 2;
    margin-top: -96px; /* overlap */
    padding-top: 0;
  }

  .fm-v4p-how__video-shell{
    max-width: 1240px; /* un poco más protagonista */
  }

  .fm-v4p-how__video-placeholder{
    border-radius: 28px;
    box-shadow: 0 28px 60px rgba(0, 24, 56, .22);
  }

  .fm-v4p-how__video-placeholder::before{
    inset: 16px;
    border-radius: 20px;
  }
}

/* =========================================================
   Vitals4Pets – How section
   overlap correcto: sube solo la caja del video
========================================================= */
.fm-v4p-how{
  position: relative;
  background: transparent;
  overflow: visible;
  padding-top: 0;
  padding-bottom: 0;
}

.fm-v4p-how__top,
.fm-v4p-how__media{
  position: relative;
  z-index: 1;
}

.fm-v4p-how__top{
  background: #00366e !important;
  color: #fff;
}

.fm-v4p-how__media{
  background: #f3f3f3;
}

@media (min-width: 992px){
  .fm-v4p-how__inner{
    padding-bottom: 96px; /* aire azul antes del overlap */
  }

  .fm-v4p-how__media{
    padding-top: 0;
    padding-bottom: 72px;
  }

  .fm-v4p-how__video-shell{
    max-width: 1180px;
    width: 100%;
    position: relative;
    z-index: 2;
    transform: translateY(-96px); /* overlap */
    margin-bottom: -96px;         /* compensa el corrimiento */
  }
}

@media (max-width: 991.98px){
  .fm-v4p-how__media{
    padding-bottom: 56px;
  }

  .fm-v4p-how__video-shell{
    transform: none;
    margin-bottom: 0;
  }
}

/* =========================================================
   Vitals4Pets – real video frame
========================================================= */
.fm-v4p-how__video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #0b1f38;
  box-shadow: 0 24px 54px rgba(0,0,0,.16);
}

.fm-v4p-how__video-frame::before{
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  pointer-events: none;
  z-index: 2;
}

.fm-v4p-how__video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b1f38;
}

@media (max-width: 991.98px){
  .fm-v4p-how__video-frame{
    border-radius: 18px;
  }

  .fm-v4p-how__video-frame::before{
    inset: 12px;
    border-radius: 14px;
  }
}

/* =========================================================
   Vitals4Pets – How
   más aire abajo en la banda azul para sostener el overlap
========================================================= */
@media (min-width: 992px){
  .fm-v4p-how__inner{
    padding-bottom: 190px;
  }

  .fm-v4p-how__video-shell{
    transform: translateY(-96px);
    margin-bottom: -96px;
  }
}

/* =========================================================
   Vitals4Pets – How reveal on scroll
========================================================= */
.fm-v4p-how__head,
.fm-v4p-how__step,
.fm-v4p-how__credits,
.fm-v4p-how__video-shell{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1);
}

/* Head */
.fm-v4p-how__head{
  transform: translateY(28px);
  transition-delay: .02s;
}

/* Steps */
.fm-v4p-how__step:nth-child(1){
  transform: translateY(26px);
  transition-delay: .10s;
}
.fm-v4p-how__step:nth-child(2){
  transform: translateY(26px);
  transition-delay: .18s;
}
.fm-v4p-how__step:nth-child(3){
  transform: translateY(26px);
  transition-delay: .26s;
}
.fm-v4p-how__step:nth-child(4){
  transform: translateY(26px);
  transition-delay: .34s;
}

/* Credits */
.fm-v4p-how__credits{
  transform: translateY(30px);
  transition-delay: .42s;
}

.fm-v4p-how__video-shell{
  transition-delay: .48s;
}

@media (min-width: 992px){
  .fm-v4p-how__video-shell{
    transform: translateY(-58px) scale(.988);
  }
}

@media (max-width: 991.98px){
  .fm-v4p-how__video-shell{
    transform: translateY(28px) scale(.988);
  }
}

/* Active */
.fm-v4p-how.is-inview .fm-v4p-how__head,
.fm-v4p-how.is-inview .fm-v4p-how__step,
.fm-v4p-how.is-inview .fm-v4p-how__credits{
  opacity: 1;
  transform: none;
}

.fm-v4p-how.is-inview .fm-v4p-how__video-shell{
  opacity: 1;
}

@media (min-width: 992px){
  .fm-v4p-how.is-inview .fm-v4p-how__video-shell{
    transform: translateY(-96px) scale(1);
  }
}

@media (max-width: 991.98px){
  .fm-v4p-how.is-inview .fm-v4p-how__video-shell{
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .fm-v4p-how__head,
  .fm-v4p-how__step,
  .fm-v4p-how__credits,
  .fm-v4p-how__video-shell{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Vitals4Pets – Benefits
   layout + gradient + hierarchy
========================================================= */
.fm-v4p-benefits{
  padding-top: 0;
  padding-bottom: 88px;
}

.fm-v4p-benefits__band{
  background: linear-gradient(135deg, #0064ff 0%, #318bff 52%, #72c6ff 100%);
  color: #fff;
}

.fm-v4p-benefits__inner{
  max-width: 1260px;
  margin: 0 auto;
  padding: 78px 0 86px;
}

.fm-v4p-benefits__head{
  text-align: center;
  margin: 0 auto 42px;
  max-width: 900px;
}

.fm-v4p-benefits__kicker{
  margin: 0 0 10px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.fm-v4p-benefits__title{
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: .96;
  letter-spacing: -.03em;
}

.fm-v4p-benefits__title-line{
  display: block;
  color: rgba(255,255,255,.92);
  font-size: clamp(32px, 3.4vw, 58px);
  font-weight: 700;
}

.fm-v4p-benefits__title-line--strong{
  color: #fff;
  font-size: clamp(46px, 5vw, 82px);
  font-weight: 800;
}

/* ---------- Main layout ---------- */
.fm-v4p-benefits__layout{
  display: grid;
  grid-template-columns: minmax(250px, 360px) minmax(320px, 430px) minmax(250px, 360px);
  align-items: end;
  justify-content: center;
  column-gap: 28px;
  row-gap: 20px;
}

.fm-v4p-benefits__col{
  display: grid;
  gap: 18px;
  align-self: center;
}

.fm-v4p-benefits__center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* ---------- Hero ---------- */
.fm-v4p-benefits__hero{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: end;
}

.fm-v4p-benefits__hero-img{
  display: block;
  width: min(100%, 430px);
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(0, 32, 84, .18));
}

/* ---------- Cards ---------- */
.fm-v4p-benefit-card{
  position: relative;
  background: rgba(255,255,255,.96);
  color: #111;
  border-radius: 0;
  box-shadow: 0 18px 34px rgba(0, 40, 96, .12);
  overflow: hidden;
}

.fm-v4p-benefit-card--image{
  min-height: 196px;
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: end;
}

.fm-v4p-benefit-card__media{
  align-self: end;
}

.fm-v4p-benefit-card__img{
  display: block;
  width: 100%;
  height: auto;
}

.fm-v4p-benefit-card__copy{
  padding: 22px 24px 20px;
}

.fm-v4p-benefit-card h3{
  margin: 0 0 8px;
  color: #001e46;
  font-size: clamp(20px, 1.48vw, 24px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.02em;
}

.fm-v4p-benefit-card p{
  margin: 0;
  color: #001e46;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.35;
  font-weight: 500;
}

/* Left / right art direction */
.fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(1) .fm-v4p-benefit-card__img{
  transform: translate(-2px, 4px);
}
.fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__img{
  transform: translate(8px, 10px);
}
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(1){
  grid-template-columns: 1fr 38%;
}
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(1) .fm-v4p-benefit-card__copy{
  order: 1;
  text-align: right;
}
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(1) .fm-v4p-benefit-card__media{
  order: 2;
}
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(2){
  grid-template-columns: 1fr 38%;
}
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__copy{
  order: 1;
}
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__media{
  order: 2;
  align-self: end;
}

/* ---------- Investment card ---------- */
.fm-v4p-benefit-card--investment{
  width: min(100%, 360px);
  margin-top: -8px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 38px rgba(0, 40, 96, .16);
}

.fm-v4p-benefit-card--investment .fm-v4p-benefit-card__copy{
  padding: 22px 24px 24px;
  text-align: center;
}

.fm-v4p-benefit-card--investment::before{
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 72%;
  height: 26px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.98);
  border-radius: 20px 20px 0 0;
}

.fm-v4p-benefit-card--investment h3{
  color: #0064ff;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px){
  .fm-v4p-benefits__layout{
    grid-template-columns: minmax(230px, 330px) minmax(280px, 380px) minmax(230px, 330px);
    column-gap: 20px;
  }

  .fm-v4p-benefit-card__copy{
    padding: 18px 18px 16px;
  }

  .fm-v4p-benefits__hero-img{
    width: min(100%, 370px);
  }
}

@media (max-width: 991.98px){
  .fm-v4p-benefits{
    padding-bottom: 64px;
  }

  .fm-v4p-benefits__inner{
    padding: 58px 0 62px;
  }

  .fm-v4p-benefits__head{
    margin-bottom: 30px;
  }

  .fm-v4p-benefits__layout{
    grid-template-columns: 1fr;
    row-gap: 22px;
  }

  .fm-v4p-benefits__col{
    gap: 16px;
    padding: 0 1rem;
  }

  .fm-v4p-benefits__center{
    order: 2;
    padding: 0 1rem;
  }

  .fm-v4p-benefits__col--left{
    order: 1;
  }

  .fm-v4p-benefits__col--right{
    order: 3;
  }

  .fm-v4p-benefits__hero-img{
    width: min(100%, 320px);
  }

  .fm-v4p-benefit-card--investment{
    width: 100%;
    max-width: 520px;
    /*margin-top: 8px;*/
  }
}

@media (max-width: 575.98px){
  .fm-v4p-benefits__inner{
    padding: 46px 0 50px;
  }

  .fm-v4p-benefits__kicker{
    font-size: 12px;
  }

  .fm-v4p-benefits__title-line{
    font-size: clamp(28px, 8vw, 36px);
  }

  .fm-v4p-benefits__title-line--strong{
    font-size: clamp(36px, 11vw, 50px);
  }

  .fm-v4p-benefit-card--image,
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(1),
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(2){
    grid-template-columns: 1fr;
  }

  .fm-v4p-benefit-card__media{
    max-width: 180px;
  }

  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(1) .fm-v4p-benefit-card__copy,
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__copy{
    text-align: left;
  }

  .fm-v4p-benefit-card__copy{
    padding: 18px 18px 20px;
  }
}

/* =========================================================
   Vitals4Pets – Benefits reveal on scroll
========================================================= */
.fm-v4p-benefits__head,
.fm-v4p-benefits__col--left .fm-v4p-benefit-card,
.fm-v4p-benefits__hero,
.fm-v4p-benefits__col--right .fm-v4p-benefit-card,
.fm-v4p-benefit-card--investment{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1);
}

/* Head */
.fm-v4p-benefits__head{
  transform: translateY(28px);
  transition-delay: .02s;
}

/* Left column */
.fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(1){
  transform: translateX(-34px) translateY(8px);
  transition-delay: .12s;
}
.fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2){
  transform: translateX(-34px) translateY(8px);
  transition-delay: .22s;
}

/* Center hero */
.fm-v4p-benefits__hero{
  transform: translateY(34px) scale(.985);
  transition-delay: .18s;
}

/* Right column */
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(1){
  transform: translateX(34px) translateY(8px);
  transition-delay: .16s;
}
.fm-v4p-benefits__col--right .fm-v4p-benefit-card:nth-child(2){
  transform: translateX(34px) translateY(8px);
  transition-delay: .26s;
}

/* Bottom investment card */
.fm-v4p-benefit-card--investment{
  transform: translateY(34px);
  transition-delay: .34s;
}

/* Active */
.fm-v4p-benefits.is-inview .fm-v4p-benefits__head,
.fm-v4p-benefits.is-inview .fm-v4p-benefits__col--left .fm-v4p-benefit-card,
.fm-v4p-benefits.is-inview .fm-v4p-benefits__hero,
.fm-v4p-benefits.is-inview .fm-v4p-benefits__col--right .fm-v4p-benefit-card,
.fm-v4p-benefits.is-inview .fm-v4p-benefit-card--investment{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .fm-v4p-benefits__head,
  .fm-v4p-benefits__col--left .fm-v4p-benefit-card,
  .fm-v4p-benefits__hero,
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card,
  .fm-v4p-benefit-card--investment{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Vitals4Pets – Use cases
========================================================= */
.fm-v4p-cases{
  background: #f3f3f3;
  padding-top: 78px;
  padding-bottom: 88px;
}

.fm-v4p-cases__inner{
  max-width: 1220px;
  margin: 0 auto;
}

.fm-v4p-cases__head{
  max-width: 760px;
  margin: 0 0 34px;
}

.fm-v4p-cases__kicker{
  margin: 0 0 10px;
  color: rgba(0,100,255,.72);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.fm-v4p-cases__title{
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: .96;
  letter-spacing: -.03em;
}

.fm-v4p-cases__title-line{
  display: block;
  color: rgba(0,100,255,.88);
  font-size: clamp(34px, 3.3vw, 56px);
  font-weight: 700;
}

.fm-v4p-cases__title-line--strong{
  color: var(--fm-blue);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 800;
}

.fm-v4p-cases__layout{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 480px);
  align-items: center;
  column-gap: 54px;
}

.fm-v4p-cases__copy{
  max-width: 760px;
}

.fm-v4p-cases__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.fm-v4p-cases__list li{
  position: relative;
  margin: 0;
  padding-left: 34px;
  color: #001e46;
  font-size: clamp(22px, 1.65vw, 24px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}


.fm-v4p-cases__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .36em;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #50c8ff 0%, #7cd6ff 100%);
  box-shadow: 0 0 0 4px rgba(80,200,255,.18);
}




.fm-v4p-cases__visual{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fm-v4p-cases__img{
  display: block;
  width: min(100%, 470px);
  height: auto;
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.18));
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px){
  .fm-v4p-cases__layout{
    column-gap: 36px;
  }

  .fm-v4p-cases__list li{
    font-size: clamp(20px, 1.45vw, 28px);
  }

  .fm-v4p-cases__img{
    width: min(100%, 420px);
  }
}

@media (max-width: 991.98px){
  .fm-v4p-cases{
    padding-top: 58px;
    padding-bottom: 64px;
  }

  .fm-v4p-cases__layout{
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .fm-v4p-cases__visual{
    order: 2;
  }

  .fm-v4p-cases__copy{
    order: 1;
  }

  .fm-v4p-cases__img{
    width: min(100%, 360px);
  }

  .fm-v4p-cases__list li{
    font-size: clamp(19px, 2.8vw, 26px);
  }
}

@media (max-width: 575.98px){
  .fm-v4p-cases{
    padding-top: 46px;
    padding-bottom: 52px;
  }

  .fm-v4p-cases__kicker{
    font-size: 12px;
  }

  .fm-v4p-cases__title-line{
    font-size: clamp(28px, 8vw, 36px);
  }

  .fm-v4p-cases__title-line--strong{
    font-size: clamp(38px, 11vw, 50px);
  }

  .fm-v4p-cases__list{
    gap: 16px;
  }

  .fm-v4p-cases__list li{
    padding-left: 36px;
    font-size: 18px;
    line-height: 1.24;
  }

  .fm-v4p-cases__list li::before{
    width: 18px;
    height: 18px;
  }
}

/* =========================================================
   Vitals4Pets – Use cases refinements
   viñeta más limpia + quitar franja azul heredada
========================================================= */

/* 1) La franja azul viene de la sección anterior */
.fm-v4p-benefits{
  padding-bottom: 0;
}

/* 2) Ajuste del arranque de esta sección */
.fm-v4p-cases{
  margin-top: 0;
  padding-top: 56px;
  background: #f3f3f3;
}

/* =========================================================
   Vitals4Pets – Use cases reveal on scroll
========================================================= */
.fm-v4p-cases__head,
.fm-v4p-cases__list li,
.fm-v4p-cases__visual{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1);
}

/* Head */
.fm-v4p-cases__head{
  transform: translateY(28px);
  transition-delay: .02s;
}

/* List cascade */
.fm-v4p-cases__list li:nth-child(1){
  transform: translateX(-26px) translateY(6px);
  transition-delay: .10s;
}
.fm-v4p-cases__list li:nth-child(2){
  transform: translateX(-26px) translateY(6px);
  transition-delay: .18s;
}
.fm-v4p-cases__list li:nth-child(3){
  transform: translateX(-26px) translateY(6px);
  transition-delay: .26s;
}
.fm-v4p-cases__list li:nth-child(4){
  transform: translateX(-26px) translateY(6px);
  transition-delay: .34s;
}
.fm-v4p-cases__list li:nth-child(5){
  transform: translateX(-26px) translateY(6px);
  transition-delay: .42s;
}
.fm-v4p-cases__list li:nth-child(6){
  transform: translateX(-26px) translateY(6px);
  transition-delay: .50s;
}

/* Pack visual */
.fm-v4p-cases__visual{
  transform: translateX(34px) translateY(12px) scale(.985);
  transition-delay: .24s;
}

/* Active state */
.fm-v4p-cases.is-inview .fm-v4p-cases__head,
.fm-v4p-cases.is-inview .fm-v4p-cases__list li,
.fm-v4p-cases.is-inview .fm-v4p-cases__visual{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .fm-v4p-cases__head,
  .fm-v4p-cases__list li,
  .fm-v4p-cases__visual{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Shared Contact CTA – reveal on scroll
========================================================= */
.fm-contact-cta__icon,
.fm-contact-cta__text,
.fm-contact-cta__actions{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1);
}

.fm-contact-cta__icon{
  transform: translateX(-26px) scale(.96);
  transition-delay: .04s;
}

.fm-contact-cta__text{
  transform: translateY(24px);
  transition-delay: .14s;
}

.fm-contact-cta__actions{
  transform: translateX(26px);
  transition-delay: .24s;
}

.fm-contact-cta.is-inview .fm-contact-cta__icon,
.fm-contact-cta.is-inview .fm-contact-cta__text,
.fm-contact-cta.is-inview .fm-contact-cta__actions{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .fm-contact-cta__icon,
  .fm-contact-cta__text,
  .fm-contact-cta__actions{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Contact CTA – tablet/mobile refinement
========================================================= */
@media (max-width: 992px){
  .fm-contact-cta__inner{
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  .fm-contact-cta__icon{
    margin: 0 auto;
  }

  .fm-contact-cta__text{
    margin: 0 auto;
    max-width: 30ch;
  }

  .fm-contact-cta__title{
    margin: 0 auto;
    max-width: 18ch;
    line-height: 1.08;
    text-wrap: balance;
  }

  .fm-contact-cta__actions{
    margin: 0 auto;
  }

  .fm-contact-cta__btn{
    margin: 0 auto;
  }

  .fm-contact-cta.is-inview .fm-contact-cta__actions{
    opacity: 1;
    transform: none;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px){
  .fm-contact-cta__text{
    max-width: 26ch;
  }

  .fm-contact-cta__title{
    max-width: 16ch;
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.05;
  }
}


body#cms.cms-id-6 section#nuestra-tienda {
  background: #fff !important;
}


/* =========================================================
   Our Store – reveal on scroll
========================================================= */
section#nuestra-tienda .fm-store__head,
section#nuestra-tienda .fm-store__rail > *,
section#nuestra-tienda .fm-store__steps > *,
section#nuestra-tienda .fm-store__footnote,
section#nuestra-tienda .fm-store__note{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1);
}

/* Head */
section#nuestra-tienda .fm-store__head{
  transform: translateY(28px);
  transition-delay: .02s;
}

/* Cards rail */
section#nuestra-tienda .fm-store__rail > *:nth-child(1){
  transform: translateX(-28px) translateY(8px);
  transition-delay: .10s;
}
section#nuestra-tienda .fm-store__rail > *:nth-child(2){
  transform: translateX(-12px) translateY(8px);
  transition-delay: .18s;
}
section#nuestra-tienda .fm-store__rail > *:nth-child(3){
  transform: translateX(12px) translateY(8px);
  transition-delay: .26s;
}
section#nuestra-tienda .fm-store__rail > *:nth-child(4){
  transform: translateX(28px) translateY(8px);
  transition-delay: .34s;
}

/* How it works / lower blocks */
section#nuestra-tienda .fm-store__steps > *:nth-child(1){
  transform: translateY(22px);
  transition-delay: .42s;
}
section#nuestra-tienda .fm-store__steps > *:nth-child(2){
  transform: translateY(22px);
  transition-delay: .50s;
}
section#nuestra-tienda .fm-store__steps > *:nth-child(3){
  transform: translateY(22px);
  transition-delay: .58s;
}

/* Footnote */
section#nuestra-tienda .fm-store__footnote,
section#nuestra-tienda .fm-store__note{
  transform: translateY(18px);
  transition-delay: .66s;
}

/* Active */
section#nuestra-tienda.is-inview .fm-store__head,
section#nuestra-tienda.is-inview .fm-store__rail > *,
section#nuestra-tienda.is-inview .fm-store__steps > *,
section#nuestra-tienda.is-inview .fm-store__footnote,
section#nuestra-tienda.is-inview .fm-store__note{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  section#nuestra-tienda .fm-store__head,
  section#nuestra-tienda .fm-store__rail > *,
  section#nuestra-tienda .fm-store__steps > *,
  section#nuestra-tienda .fm-store__footnote,
  section#nuestra-tienda .fm-store__note{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Shared Newsletter – reveal on scroll
   (theme override ps_emailsubscription)
========================================================= */
.fm-newsletter__left,
.fm-newsletter__text,
.fm-newsletter__right,
.fm-newsletter__form,
.fm-newsletter__msg{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity .82s cubic-bezier(.22,.61,.36,1),
    transform .82s cubic-bezier(.22,.61,.36,1);
}

.fm-newsletter__left{
  transform: translateX(-26px);
  transition-delay: .04s;
}

.fm-newsletter__text{
  transform: translateY(22px);
  transition-delay: .12s;
}

.fm-newsletter__right{
  transform: translateX(26px);
  transition-delay: .18s;
}

.fm-newsletter__form{
  transform: translateY(20px);
  transition-delay: .24s;
}

.fm-newsletter__msg{
  transform: translateY(16px);
  transition-delay: .30s;
}

.fm-newsletter.is-inview .fm-newsletter__left,
.fm-newsletter.is-inview .fm-newsletter__text,
.fm-newsletter.is-inview .fm-newsletter__right,
.fm-newsletter.is-inview .fm-newsletter__form,
.fm-newsletter.is-inview .fm-newsletter__msg{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .fm-newsletter__left,
  .fm-newsletter__text,
  .fm-newsletter__right,
  .fm-newsletter__form,
  .fm-newsletter__msg{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   LEGAL CMS PAGES
   cms-id-3  = Terms / Términos
   cms-id-9  = Privacy / Privacidad
   cms-id-10 = Cookies
   ========================================================= */

/* H1 de página */
body.cms-id-3 .page-header h1,
body.cms-id-9 .page-header h1,
body.cms-id-10 .page-header h1 {
  font-weight: 800 !important;
  font-size: clamp(34px, 3.2vw, 52px) !important;
  line-height: 1.05 !important;
  color: #0064ff !important;
  margin: 0 0 10px !important;
}

/* Color base del contenido */
body.cms-id-3 .page-content,
body.cms-id-9 .page-content,
body.cms-id-10 .page-content {
  color: #001e46 !important;
}

/* Subtítulos principales */
body.cms-id-3 .page-content h2,
body.cms-id-9 .page-content h2,
body.cms-id-10 .page-content h2 {
  font-size: 12pt !important;
  line-height: 1.35 !important;
  color: #001e46 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 1.6rem 0 0.7rem !important;
}

/* Subniveles dentro del contenido */
body.cms-id-3 .page-content h3,
body.cms-id-9 .page-content h3,
body.cms-id-10 .page-content h3 {
  font-size: 11pt !important;
  line-height: 1.45 !important;
  color: #001e46 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 1.2rem 0 0.45rem !important;
}

/* Párrafos y listas */
body.cms-id-3 .page-content p,
body.cms-id-3 .page-content li,
body.cms-id-9 .page-content p,
body.cms-id-9 .page-content li,
body.cms-id-10 .page-content p,
body.cms-id-10 .page-content li {
  font-size: 11pt !important;
  line-height: 1.65 !important;
  color: #001e46 !important;
  font-weight: 400 !important;
  margin: 0 0 1rem !important;
}

/* Listas */
body.cms-id-3 .page-content ul,
body.cms-id-3 .page-content ol,
body.cms-id-9 .page-content ul,
body.cms-id-9 .page-content ol,
body.cms-id-10 .page-content ul,
body.cms-id-10 .page-content ol {
  margin: 0 0 1rem 1.2rem !important;
  padding-left: 1rem !important;
}

/* Links */
body.cms-id-3 .page-content a,
body.cms-id-9 .page-content a,
body.cms-id-10 .page-content a {
  color: #24b9d7 !important;
  text-decoration: none !important;
}

body.cms-id-3 .page-content a:hover,
body.cms-id-3 .page-content a:focus,
body.cms-id-9 .page-content a:hover,
body.cms-id-9 .page-content a:focus,
body.cms-id-10 .page-content a:hover,
body.cms-id-10 .page-content a:focus {
  color: #24b9d7 !important;
  text-decoration: none !important;
  opacity: .9;
}


/* =========================================================
   HERO · Cascade reveal text only
   Mantiene composición actual / no toca video perro
========================================================= */

.fm-hero[data-fm-hero-reveal] .fm-hero__title-line,
.fm-hero[data-fm-hero-reveal] .fm-hero__lead,
.fm-hero[data-fm-hero-reveal] .fm-hero__cta {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  will-change: transform, opacity;
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    transform .72s cubic-bezier(.22, 1, .36, 1);
}

/* Estado visible */
.fm-hero[data-fm-hero-reveal].is-inview .fm-hero__title-line,
.fm-hero[data-fm-hero-reveal].is-inview .fm-hero__lead,
.fm-hero[data-fm-hero-reveal].is-inview .fm-hero__cta {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Cascada */
.fm-hero[data-fm-hero-reveal] .fm-hero__title-line--accent {
  transition-delay: .06s;
}

.fm-hero[data-fm-hero-reveal] .fm-hero__title-line--main {
  transition-delay: .18s;
}

.fm-hero[data-fm-hero-reveal] .fm-hero__lead {
  transition-delay: .32s;
}

.fm-hero[data-fm-hero-reveal] .fm-hero__cta {
  transition-delay: .46s;
}

/* Micro-presencia del CTA sin alterar caja */
.fm-hero[data-fm-hero-reveal] .fm-hero__cta {
  transform: translate3d(0, 28px, 0) scale(.98);
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    transform .72s cubic-bezier(.22, 1, .36, 1);
}

.fm-hero[data-fm-hero-reveal].is-inview .fm-hero__cta {
  transform: translate3d(0, 0, 0) scale(1);
}

/* El video queda intacto */
.fm-hero__media,
.fm-hero__video {
  opacity: 1;
  transform: none;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .fm-hero[data-fm-hero-reveal] .fm-hero__title-line,
  .fm-hero[data-fm-hero-reveal] .fm-hero__lead,
  .fm-hero[data-fm-hero-reveal] .fm-hero__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   HOME · Logo brands reveal
========================================================= */

.fm-logo-brands[data-fm-logo-brands-reveal] .fm-logo-brands__item {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.96);
  will-change: transform, opacity;
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
}

.fm-logo-brands[data-fm-logo-brands-reveal].is-inview .fm-logo-brands__item {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Cascada */
.fm-logo-brands[data-fm-logo-brands-reveal] .fm-logo-brands__item:nth-child(1) {
  transition-delay: .06s;
}

.fm-logo-brands[data-fm-logo-brands-reveal] .fm-logo-brands__item:nth-child(2) {
  transition-delay: .20s;
}

/* Micro plus: logos apenas más vivos al entrar */
.fm-logo-brands[data-fm-logo-brands-reveal].is-inview .fm-logo-brands__item img {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .fm-logo-brands[data-fm-logo-brands-reveal] .fm-logo-brands__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   HOME · It's Furmates / About reveal
   Seguro: solo anima si JS está activo
========================================================= */

html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__head,
html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__lead,
html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__p,
html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__cta {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  will-change: transform, opacity;
  transition:
    opacity .78s cubic-bezier(.22, 1, .36, 1),
    transform .78s cubic-bezier(.22, 1, .36, 1);
}

html.has-fm-motion .fm-about[data-fm-about-reveal="1"].is-inview .fm-about__head,
html.has-fm-motion .fm-about[data-fm-about-reveal="1"].is-inview .fm-about__lead,
html.has-fm-motion .fm-about[data-fm-about-reveal="1"].is-inview .fm-about__p,
html.has-fm-motion .fm-about[data-fm-about-reveal="1"].is-inview .fm-about__cta {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Cascada */
html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__head {
  transition-delay: .06s;
}

html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__lead {
  transition-delay: .18s;
}

html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__p:nth-of-type(2) {
  transition-delay: .30s;
}

html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__p:nth-of-type(3) {
  transition-delay: .42s;
}

html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__p:nth-of-type(4) {
  transition-delay: .54s;
}

html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__cta {
  transition-delay: .68s;
  transform: translate3d(0, 32px, 0) scale(.98);
}

html.has-fm-motion .fm-about[data-fm-about-reveal="1"].is-inview .fm-about__cta {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__head,
  html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__lead,
  html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__p,
  html.has-fm-motion .fm-about[data-fm-about-reveal="1"] .fm-about__cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   HOME · Footer reveal
========================================================= */

html.has-fm-motion .footer-container[data-fm-footer-reveal="1"] .fm-footer__row {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  will-change: transform, opacity;
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1);
}

html.has-fm-motion .footer-container[data-fm-footer-reveal="1"].is-inview .fm-footer__row {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Cascada */
html.has-fm-motion .footer-container[data-fm-footer-reveal="1"] .fm-footer__row--before {
  transition-delay: .06s;
}

html.has-fm-motion .footer-container[data-fm-footer-reveal="1"] .fm-footer__row--after {
  transition-delay: .20s;
}

html.has-fm-motion .footer-container[data-fm-footer-reveal="1"] .fm-footer__row--legal {
  transition-delay: .34s;
}

/* Copyright con una micro entrada más fina */
html.has-fm-motion .footer-container[data-fm-footer-reveal="1"] .fm-footer__copyright {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: .42s;
}

html.has-fm-motion .footer-container[data-fm-footer-reveal="1"].is-inview .fm-footer__copyright {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html.has-fm-motion .footer-container[data-fm-footer-reveal="1"] .fm-footer__row,
  html.has-fm-motion .footer-container[data-fm-footer-reveal="1"] .fm-footer__copyright {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   Vitals4Pets – HERO tablet/mobile simplificado
   Layout premium apilado
========================================================= */
@media (max-width: 991.98px){
  .fm-v4p-top{
    background: #f3f3f3 !important;
    overflow: hidden;
  }

  .fm-v4p-top::before,
  .fm-v4p-top__shape{
    display: none !important;
    content: none !important;
  }

  .fm-v4p-top__inner{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Bloque superior: marca */
  .fm-v4p-top__content{
    order: 1;
    width: 100%;
    background: linear-gradient(90deg, #50c8ff 0%, #1881fe 100%);
    padding: 18px 20px 22px;
    align-items: center !important;
    text-align: center !important;
  }

  .fm-v4p-top__brand{
    width: 100% !important;
    justify-content: center !important;
    margin: 0 0 14px !important;
    transform: none !important;
  }

  .fm-v4p-top__brand-logo{
    display: block;
    width: min(100%, 250px);
    margin: 0 auto;
  }

  /* Claim */
  .fm-v4p-top__lead{
    margin: 0 auto !important;
    max-width: 12ch;
    color: #fff !important;
    text-align: center !important;
    font-size: clamp(24px, 4.4vw, 34px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    transform: none !important;
  }

  .fm-v4p-top__lead strong{
    color: #fff !important;
    font-weight: 800;
  }

  /* Bloque inferior: dispositivo */
  .fm-v4p-top__media{
    order: 2;
    width: 100%;
    background: #f3f3f3;
    padding: 18px 0 10px;
    display: flex;
    justify-content: center;
  }

  .fm-v4p-top__device{
    width: min(100%, 560px);
    margin: 0 auto;
    transform: translateY(-8px) rotate(-6deg);
    animation: none !important;
  }
}

@media (max-width: 575.98px){
  .fm-v4p-top__content{
    padding: 16px 16px 18px;
  }

  .fm-v4p-top__brand-logo{
    width: min(100%, 220px);
  }

  .fm-v4p-top__lead{
    max-width: 11ch;
    font-size: clamp(18px, 8vw, 28px);
  }

  .fm-v4p-top__device{
    width: min(100%, 400px);
    transform: translateY(-4px) rotate(-4deg);
  }
}

/* =========================================================
   Vitals4Pets – HERO tablet/mobile
   mismo degradé en todo el bloque + sin paddings laterales
========================================================= */
@media (max-width: 991.98px){
  .fm-v4p-top{
    background: linear-gradient(90deg, #50c8ff 0%, #1881fe 100%) !important;
  }

  .fm-v4p-top__inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fm-v4p-top__content{
    background: linear-gradient(90deg, #50c8ff 0%, #1881fe 100%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fm-v4p-top__media{
    background: linear-gradient(90deg, #50c8ff 0%, #1881fe 100%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 575.98px){
  .fm-v4p-top__content,
  .fm-v4p-top__media{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   Vitals4Pets – tablet
   más presencia para logo + texto
========================================================= */
@media (min-width: 576px) and (max-width: 991.98px){
  .fm-v4p-top__content{
    padding-top: 26px !important;
    padding-bottom: 18px !important;
  }

  .fm-v4p-top__brand{
    margin-bottom: 18px !important;
  }

  .fm-v4p-top__brand-logo{
    width: min(100%, 280px) !important;
  }

  .fm-v4p-top__lead{
    max-width: 11ch !important;
    font-size: clamp(30px, 4.6vw, 40px) !important;
    line-height: 0.98 !important;
    padding: 12px 18px 14px !important;
    background: rgba(255,255,255,.08);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  .fm-v4p-top__media{
    padding-top: 6px !important;
  }

  .fm-v4p-top__device{
    width: min(100%, 520px) !important;
  }
}

/* =========================================================
   Vitals4Pets – Benefits
   Ajuste tablet + mobile: menos blanco, mejor acomodo
========================================================= */

/* ---------- TABLET ---------- */
@media (min-width: 576px) and (max-width: 991.98px){
  .fm-v4p-benefits__layout{
    gap: 18px !important;
  }

  .fm-v4p-benefit-card,
  .fm-v4p-benefit-card--image{
    min-height: 0 !important;
    height: auto !important;
  }

  .fm-v4p-benefit-card--image{
    display: grid !important;
    grid-template-columns: minmax(180px, 42%) 1fr;
    align-items: center !important;
    overflow: hidden;
  }

  .fm-v4p-benefit-card__media{
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .fm-v4p-benefit-card__img{
    display: block;
    width: 100%;
    max-width: 230px;
    height: auto !important;
    object-fit: contain !important;
  }

  .fm-v4p-benefit-card__copy{
    padding: 18px 20px !important;
    align-self: center;
  }

  .fm-v4p-benefit-card__copy h3{
    margin: 0 0 10px !important;
  }

  .fm-v4p-benefit-card__copy p{
    margin: 0 !important;
  }

  .fm-v4p-benefits__hero{
    margin-bottom: 0px !important;
  }

  .fm-v4p-benefits__hero-img{
    max-width: 320px;
    height: auto;
  }

  .fm-v4p-benefit-card--investment .fm-v4p-benefit-card__copy{
    padding: 20px 22px !important;
    text-align: center;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 575.98px){
  .fm-v4p-benefits__layout{
    gap: 16px !important;
  }

  .fm-v4p-benefit-card,
  .fm-v4p-benefit-card--image{
    min-height: 0 !important;
    height: auto !important;
  }

  .fm-v4p-benefit-card--image{
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
  }

  .fm-v4p-benefit-card__media{
    order: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .fm-v4p-benefit-card__copy{
    order: 2 !important;
    padding: 10px 16px 18px !important;
  }

  .fm-v4p-benefit-card__copy h3{
    margin: 0 0 10px !important;
  }

  .fm-v4p-benefit-card__copy p{
    margin: 0 !important;
  }

  .fm-v4p-benefit-card__img{
    display: block;
    width: min(100%, 210px);
    max-width: 210px;
    height: auto !important;
    object-fit: contain !important;
  }

  .fm-v4p-benefits__hero{
    margin-bottom: 0px !important;
  }

  .fm-v4p-benefits__hero-img{
    max-width: 250px;
    height: auto;
  }

  .fm-v4p-benefit-card--investment .fm-v4p-benefit-card__copy{
    padding: 16px !important;
    text-align: left;
  }
}

/* =========================================================
   Vitals4Pets – Benefits
   Alternancia final tablet + mobile
========================================================= */

/* ---------- TABLET ---------- */
@media (min-width: 576px) and (max-width: 991.98px){
  /* Base side-by-side */
  .fm-v4p-benefit-card--image{
    display: grid !important;
    grid-template-columns: minmax(180px, 42%) 1fr;
    align-items: center !important;
  }

  .fm-v4p-benefit-card--image .fm-v4p-benefit-card__media{
    order: 1;
    justify-content: flex-start;
  }

  .fm-v4p-benefit-card--image .fm-v4p-benefit-card__copy{
    order: 2;
    text-align: left;
  }

  /* Card 2 + Cards 3 y 4 => texto izquierda / imagen derecha */
  .fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2),
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card{
    grid-template-columns: 1fr minmax(180px, 42%) !important;
  }

  .fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__copy,
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card .fm-v4p-benefit-card__copy{
    order: 1 !important;
    text-align: left !important;
  }

  .fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__media,
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card .fm-v4p-benefit-card__media{
    order: 2 !important;
    justify-content: flex-end !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 575.98px){
  /* Todas las cards con layout horizontal */
  .fm-v4p-benefit-card--image{
    display: grid !important;
    grid-template-columns: minmax(120px, 42%) 1fr;
    align-items: end !important;
  }

  .fm-v4p-benefit-card--image .fm-v4p-benefit-card__media{
    order: 1;
    justify-content: flex-start;
  }

  .fm-v4p-benefit-card--image .fm-v4p-benefit-card__copy{
    order: 2;
    text-align: left;
    padding: 14px 16px 18px !important;
  }

  .fm-v4p-benefit-card--image .fm-v4p-benefit-card__img{
    width: min(100%, 160px);
    max-width: 160px;
  }

  /* Card 2 + Cards 3 y 4 => texto izquierda / imagen derecha */
  .fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2),
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card{
    grid-template-columns: 1fr minmax(120px, 42%) !important;
  }

  .fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__copy,
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card .fm-v4p-benefit-card__copy{
    order: 1 !important;
    text-align: left !important;
  }

  .fm-v4p-benefits__col--left .fm-v4p-benefit-card:nth-child(2) .fm-v4p-benefit-card__media,
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card .fm-v4p-benefit-card__media{
    order: 2 !important;
    justify-content: flex-end !important;
  }
}

/* =========================================================
   Vitals4Pets – Benefits
   Microajuste card 3: perro izquierda / texto derecha
========================================================= */

/* TABLET */
@media (min-width: 576px) and (max-width: 991.98px){
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:first-child{
    grid-template-columns: minmax(180px, 42%) 1fr !important;
  }

  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:first-child .fm-v4p-benefit-card__media{
    order: 1 !important;
    justify-content: flex-start !important;
  }

  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:first-child .fm-v4p-benefit-card__copy{
    order: 2 !important;
    text-align: left !important;
  }
}

/* MOBILE */
@media (max-width: 575.98px){
  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:first-child{
    grid-template-columns: minmax(120px, 42%) 1fr !important;
  }

  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:first-child .fm-v4p-benefit-card__media{
    order: 1 !important;
    justify-content: flex-start !important;
  }

  .fm-v4p-benefits__col--right .fm-v4p-benefit-card:first-child .fm-v4p-benefit-card__copy{
    order: 2 !important;
    text-align: left !important;
  }
}

/* =========================================================
   fm-store – tablet
   orden correcto de las 4 cards
========================================================= */
@media (min-width: 576px) and (max-width: 991.98px){
  .fm-store__rail > .fm-store__card:nth-child(1){
    order: 2 !important;
  }

  .fm-store__rail > .fm-store__card:nth-child(2){
    order: 1 !important;
  }

  .fm-store__rail > .fm-store__card:nth-child(3){
    order: 3 !important;
  }

  .fm-store__rail > .fm-store__card:nth-child(4){
    order: 4 !important;
  }
}

/* =========================================================
   Contact CTA – tablet micro adjustment
========================================================= */
@media (min-width: 576px) and (max-width: 992px){
  .fm-contact-cta__text{
    max-width: 40ch;
  }

  .fm-contact-cta__title{
    max-width: 22ch;
    font-size: clamp(34px, 4.6vw, 46px);
    line-height: 1.02;
    font-weight: 800;
  }
}

/* =========================================
   FURMATES · CATEGORY PAGES
========================================= */

body#category #left-column,
body#category #search_filters_wrapper,
body#category #js-active-search-filters,
body#category .block-category,
body#category .category-cover,
body#category #subcategories,
body#category #js-product-list-top {
  display: none !important;
}

body#category #content-wrapper {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

body#category #main {
  padding-bottom: 56px;
}

body#category .breadcrumb {
  margin-bottom: 18px;
}

/* ---------- HERO ---------- */

body#category .fm-cat-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 30vw, 380px);
  border-radius: 34px;
  padding: clamp(28px, 4vw, 54px);
  margin: 0 0 44px;
  background: linear-gradient(135deg, #f7fbff 0%, #e8f3ff 100%);
  box-shadow: 0 20px 56px rgba(0, 30, 70, 0.08);
  display: flex;
  align-items: center;
}

body#category .fm-cat-hero--default {
  background: linear-gradient(135deg, #f8fbff 0%, #edf5ff 100%);
}

body#category .fm-cat-hero__art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(48%, 560px);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
}

body#category .fm-cat-hero--wd .fm-cat-hero__art {
  right: -10px;
  opacity: 1;
}

body#category .fm-cat-hero--v4p {
  background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
}

body#category .fm-cat-hero--v4p .fm-cat-hero__art {
  inset: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.98;
}

body#category .fm-cat-hero__copy {
  position: relative;
  z-index: 2;
  max-width: min(620px, 58%);
}

body#category .fm-cat-hero__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #001e46;
}

body#category .fm-cat-hero__title {
  margin: 0 0 16px;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0a56ff;
}

body#category .fm-cat-hero__lead,
body#category .fm-cat-hero__lead p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #001e46;
  max-width: 56ch;
}

/* ---------- SECTION HEAD ---------- */

body#category .fm-cat-section {
  margin: 0 0 34px;
}

body#category .fm-cat-section__head {
  text-align: center;
  margin: 0 0 24px;
}

body#category .fm-cat-section__kicker {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #001e46;
}

body#category .fm-cat-section__title {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0a56ff;
}

/* ---------- SUBCATEGORY GRID ---------- */

body#category .fm-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

body#category .fm-cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(0, 30, 70, 0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 30, 70, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body#category .fm-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 30, 70, 0.12);
}

body#category .fm-cat-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.06 / 1;
  background: #f5f7fb;
  padding: 30px;
}

body#category .fm-cat-card__media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body#category .fm-cat-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 26px;
  text-align: center;
  flex: 1 1 auto;
}

body#category .fm-cat-card__title {
  margin: 0;
  min-height: 2.4em;
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 800;
  color: #001e46;
}

body#category .fm-cat-card__title a {
  color: inherit;
  text-decoration: none;
}

body#category .fm-cat-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 176px;
  margin-top: auto;
  text-decoration: none;
}

/* ---------- PRODUCT GRID ---------- */

body#category #js-product-list .products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
}

body#category #js-product-list .products > .js-product {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body#category #js-product-list .product-miniature,
body#category #js-product-list .thumbnail-container {
  height: 100%;
}

body#category #js-product-list .thumbnail-container {
  width: 100% !important;
  background: #fff;
  border: 1px solid rgba(0, 30, 70, 0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 30, 70, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body#category #js-product-list .thumbnail-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 30, 70, 0.12);
}

body#category #js-product-list .thumbnail-top {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 28px;
  background: #f5f7fb;
}

body#category #js-product-list .thumbnail-top img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body#category #js-product-list .product-description {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 24px;
  text-align: center;
}

body#category #js-product-list .product-title {
  min-height: 2.6em;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 800;
}

body#category #js-product-list .product-title a {
  color: #001e46;
  text-decoration: none;
}

body#category #js-product-list .product-price-and-shipping,
body#category #js-product-list .product-price {
  color: #0a56ff;
  font-weight: 800;
}

body#category #js-product-list .highlighted-informations,
body#category #js-product-list .product-flags,
body#category #js-product-list .quick-view {
  display: none !important;
}

body#category #js-product-list .ajax_add_to_cart_button,
body#category #js-product-list .add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 176px;
  margin-top: 10px;
  text-decoration: none;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1199px) {
  body#category .fm-cat-grid,
  body#category #js-product-list .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body#category .fm-cat-hero__copy {
    max-width: 62%;
  }
}

@media (max-width: 991px) {
  body#category .fm-cat-hero {
    min-height: 300px;
    padding: 28px 24px;
    border-radius: 26px;
  }

  body#category .fm-cat-hero__copy {
    max-width: 100%;
  }

  body#category .fm-cat-hero__art {
    width: min(58%, 420px);
    opacity: 0.24;
  }

  body#category .fm-cat-hero--v4p .fm-cat-hero__art {
    opacity: 0.18;
  }
}

@media (max-width: 767px) {
  body#category .fm-cat-grid,
  body#category #js-product-list .products {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body#category .fm-cat-hero {
    min-height: auto;
    padding: 24px 20px 180px;
    margin-bottom: 30px;
    border-radius: 22px;
  }

  body#category .fm-cat-hero__art {
    top: auto;
    right: -8%;
    bottom: 0;
    width: 88%;
    height: 52%;
    background-position: right bottom;
    opacity: 0.24;
  }

  body#category .fm-cat-hero--v4p {
    padding-bottom: 120px;
  }

  body#category .fm-cat-hero--v4p .fm-cat-hero__art {
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0.14;
  }

  body#category .fm-cat-hero__title {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  body#category .fm-cat-hero__lead,
  body#category .fm-cat-hero__lead p {
    font-size: 0.98rem;
  }

  body#category .fm-cat-card__media {
    padding: 22px;
  }
}

/* =========================================
   FURMATES · CATEGORY · ACCESORIOS TUNING
========================================= */

/* 1) Sacar breadcrumb */
body#category .breadcrumb-wrapper,
body#category .breadcrumb {
  display: none !important;
}

/* 2) Hero full width + menor altura + sin sombra */
body#category .fm-cat-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 52px;
  padding: clamp(22px, 2.8vw, 40px) 0;
  min-height: clamp(180px, 18vw, 250px);
  border-radius: 0;
  box-shadow: none !important;
}

body#category .fm-cat-hero--wd {
  background:
    linear-gradient(90deg,
      rgba(160, 235, 255, .20) 0%,
      rgba(80, 200, 255, .16) 22%,
      rgba(0, 100, 255, .08) 48%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.88) 0%,
      rgba(160,235,255,.16) 100%
    );
}

/* contenedor interno alineado con el grid del sitio */
body#category .fm-cat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body#category .fm-cat-hero__copy {
  width: min(1320px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto;
  padding-right: min(42%, 520px);
}

/* imagen hero derecha */
body#category .fm-cat-hero__art {
  top: 50%;
  right: max(24px, calc((100vw - 1320px) / 2));
  bottom: auto;
  width: min(34vw, 520px);
  height: min(70%, 180px);
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: 1;
}

/* 3) Paleta de marca */
body#category .fm-cat-hero__eyebrow,
body#category .fm-cat-section__kicker {
  color: #001e46;
}

body#category .fm-cat-hero__title,
body#category .fm-cat-section__title {
  color: #0064ff;
}

body#category .fm-cat-hero__lead,
body#category .fm-cat-hero__lead p {
  color: #001e46;
}

/* 4) Cards de subcategorías cuadradas */
body#category .fm-cat-grid--subcats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

body#category .fm-cat-card--subcategory {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid rgba(0, 30, 70, 0.08);
  background: rgba(160, 235, 255, 0.10);
}

body#category .fm-cat-card--subcategory:hover {
  transform: translateY(-3px);
  box-shadow: none;
  border-color: rgba(0, 100, 255, 0.22);
}

body#category .fm-cat-card--subcategory .fm-cat-card__media {
  aspect-ratio: 1 / 1;
  padding: 24px;
  background: rgba(160, 235, 255, 0.10);
}

body#category .fm-cat-card--subcategory .fm-cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body#category .fm-cat-card--subcategory .fm-cat-card__body {
  padding: 18px 18px 24px;
  background: #fff;
}

body#category .fm-cat-card--subcategory .fm-cat-card__title {
  min-height: auto;
  font-size: 1.9rem;
  line-height: 1.05;
  font-weight: 800;
  color: #001e46;
}

body#category .fm-cat-card--subcategory .fm-cat-card__cta {
  min-width: 176px;
  padding: 10px 24px;
  border-radius: 999px;
  background: #0064ff;
  color: #fff !important;
  box-shadow: none;
}

body#category .fm-cat-card--subcategory .fm-cat-card__cta:hover {
  background: #50c8ff;
  color: #001e46 !important;
  text-decoration: none;
}

/* títulos de sección más en sintonía con el sitio */
body#category .fm-cat-section__head {
  margin: 0 0 28px;
}

body#category .fm-cat-section__title {
  font-size: clamp(2.2rem, 4vw, 2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-align: center;
  
}

/* Responsive */
@media (max-width: 1199px) {
  body#category .fm-cat-hero__copy {
    width: min(100%, calc(100% - 40px));
    padding-right: min(40%, 380px);
  }

  body#category .fm-cat-hero__art {
    right: 20px;
    width: min(36vw, 420px);
  }
}

@media (max-width: 991px) {
  body#category .fm-cat-hero {
    min-height: 220px;
    padding: 26px 0;
  }

  body#category .fm-cat-hero__copy {
    width: calc(100% - 32px);
    padding-right: 0;
  }

  body#category .fm-cat-hero__art {
    opacity: .18;
    right: 12px;
    width: 42vw;
    height: 72%;
  }

  body#category .fm-cat-grid--subcats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  body#category .fm-cat-hero {
    min-height: auto;
    padding: 26px 0 34px;
    margin-bottom: 34px;
  }

  body#category .fm-cat-hero__copy {
    width: calc(100% - 24px);
  }

  body#category .fm-cat-hero__art {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: calc(100% - 24px);
    height: 120px;
    margin: 18px auto 0;
    opacity: 1;
    background-position: center;
  }

  body#category .fm-cat-grid--subcats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  body#category .fm-cat-card--subcategory .fm-cat-card__title {
    font-size: 1.5rem;
  }
}
/* =========================================
   FURMATES · CATEGORY · ACCESORIOS REFINO
========================================= */

/* Cards: más limpias y coherentes con el sitio */
body#category .fm-cat-grid--subcats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
}

body#category .fm-cat-card--subcategory {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
  overflow: visible;
  transform: none !important;
}

/* La pieza visual cuadrada es la imagen */
body#category .fm-cat-card--subcategory .fm-cat-card__media {
  aspect-ratio: 1 / 1;
  padding: 26px;
  border-radius: 30px;
  border: 1px solid rgba(0, 30, 70, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(0,100,255,.03) 100%);
  box-shadow: none;
  overflow: hidden;
}

body#category .fm-cat-card--subcategory .fm-cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body#category .fm-cat-card--subcategory .fm-cat-card__body {
  padding: 18px 10px 0;
  background: transparent;
  text-align: center;
}

body#category .fm-cat-card--subcategory .fm-cat-card__title {
  min-height: 0;
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 2vw, 2.1rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #001e46;
}

body#category .fm-cat-card--subcategory .fm-cat-card__title a {
  color: inherit;
  text-decoration: none;
}

/* CTA unificado con lenguaje WauDog */
body#category .fm-cat-card--subcategory .fm-cat-card__cta,
body#category .fm-cat-card--subcategory .fm-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 420px);
  min-height: 56px;
  padding: 14px 34px;
  border-radius: 999px;
  background: #0064ff;
  color: #a0ebff !important;
  text-decoration: none !important;
  font-size: clamp(1.1rem, 1.2vw, 1.32rem);
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 100, 255, .18);
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background-color .3s ease,
    color .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  body#category .fm-cat-card--subcategory .fm-cat-card__cta:hover,
  body#category .fm-cat-card--subcategory .fm-cat-card__cta:focus-visible,
  body#category .fm-cat-card--subcategory .fm-btn--primary:hover,
  body#category .fm-cat-card--subcategory .fm-btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 100, 255, .24);
    text-decoration: none !important;
  }
}

/* Hero: menos celeste protagonista */
body#category .fm-cat-hero--wd {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      rgba(0,100,255,.04) 100%
    );
}

body#category .fm-cat-hero__title,
body#category .fm-cat-section__title {
  color: #0064ff;
}

body#category .fm-cat-hero__eyebrow,
body#category .fm-cat-section__kicker,
body#category .fm-cat-hero__lead,
body#category .fm-cat-hero__lead p {
  color: #001e46;
}

/* Responsive */
@media (max-width: 991px) {
  body#category .fm-cat-grid--subcats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

  body#category .fm-cat-card--subcategory .fm-cat-card__title {
    font-size: 1.6rem;
  }
}

@media (max-width: 767px) {
  body#category .fm-cat-grid--subcats {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body#category .fm-cat-card--subcategory .fm-cat-card__media {
    border-radius: 24px;
    padding: 20px;
  }

  body#category .fm-cat-card--subcategory .fm-cat-card__title {
    font-size: 1.4rem;
    margin-bottom: 14px;
  }

  body#category .fm-cat-card--subcategory .fm-cat-card__cta,
  body#category .fm-cat-card--subcategory .fm-btn--primary {
    min-height: 52px;
    padding: 12px 24px;
    font-size: 1rem;
  }
}

/* =========================================
   FURMATES · CATEGORY · CTA SIZE TUNING
========================================= */

body#category .fm-cat-card--subcategory .fm-cat-card__cta,
body#category .fm-cat-card--subcategory .fm-btn--primary {
  min-width: 176px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.98rem;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0, 100, 255, .18);
}

@media (max-width: 767px) {
  body#category .fm-cat-card--subcategory .fm-cat-card__cta,
  body#category .fm-cat-card--subcategory .fm-btn--primary {
    min-width: 160px;
    min-height: 42px;
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}

/* =========================================
   FURMATES · CATEGORY · ACCESORIOS
   SPACING + HERO DOG POSITION
========================================= */

/* 1) Más respiración debajo de la imagen */
body#category .fm-cat-card--subcategory .fm-cat-card__body {
  padding: 24px 10px 0;
  text-align: center;
}

body#category .fm-cat-card--subcategory .fm-cat-card__title {
  margin: 0 0 20px;
}

body#category .fm-cat-card--subcategory .fm-cat-card__cta,
body#category .fm-cat-card--subcategory .fm-btn--primary {
  margin-top: 2px;
}

/* opcional: un poco más de aire entre cards */
body#category .fm-cat-grid--subcats {
  row-gap: 42px;
}

/* 2) Hero: perro más grande y mejor ubicado */
body#category .fm-cat-hero {
  min-height: clamp(220px, 20vw, 280px);
  padding: clamp(22px, 2.5vw, 36px) 0;
}

body#category .fm-cat-hero__copy {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding-right: clamp(260px, 28vw, 420px);
}

body#category .fm-cat-hero--wd .fm-cat-hero__art {
  top: auto;
  right: max(18px, calc((100vw - 1320px) / 2) + 8px);
  bottom: 0;
  width: clamp(220px, 19vw, 360px);
  height: calc(100% + 6px);
  transform: none;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 1;
}

/* Tablet */
@media (max-width: 1199px) {
  body#category .fm-cat-hero__copy {
    padding-right: clamp(220px, 26vw, 320px);
  }

  body#category .fm-cat-hero--wd .fm-cat-hero__art {
    right: 20px;
    width: clamp(190px, 22vw, 280px);
    height: calc(100% + 4px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  body#category .fm-cat-grid--subcats {
    row-gap: 26px;
  }

  body#category .fm-cat-card--subcategory .fm-cat-card__body {
    padding: 18px 8px 0;
  }

  body#category .fm-cat-card--subcategory .fm-cat-card__title {
    margin: 0 0 14px;
  }

  body#category .fm-cat-hero {
    min-height: auto;
  }

  body#category .fm-cat-hero__copy {
    padding-right: 0;
  }

  body#category .fm-cat-hero--wd .fm-cat-hero__art {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 24px);
    height: 150px;
    margin: 14px auto 0;
    background-position: center bottom;
  }
}

/* =========================================
   FURMATES · CATEGORY · HERO DOG ZOOM MASK
========================================= */

body#category .fm-cat-hero {
  overflow: hidden;
}

body#category .fm-cat-hero--wd .fm-cat-hero__art {
  top: 0;
  right: max(-50px, calc((100vw - 1320px) / 2) - 28px);
  bottom: 0;
  width: clamp(460px, 36vw, 680px);
  height: 100%;
  transform: none;
  background-repeat: no-repeat;
  background-position: right -50px bottom -245px;
  background-size: auto 220%;
  opacity: 1;
}

/* =========================================
   FURMATES · CATEGORY HERO
   TABLET + MOBILE FIX
========================================= */

/* =========================
   TABLET
   768px - 991px
========================= */
@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero {
    min-height: 250px;
    padding: 26px 0;
    margin-bottom: 38px;
    overflow: hidden;
  }

  body#category .fm-cat-hero__copy {
    width: calc(100% - 36px);
    margin: 0 auto;
    padding-right: 220px;
  }

  body#category .fm-cat-hero__eyebrow {
    margin-bottom: 10px;
    font-size: .88rem;
    letter-spacing: .12em;
  }

  body#category .fm-cat-hero__title {
    font-size:  clamp(3rem, 7vw, 2.5rem);
    line-height: .92;
    letter-spacing: -.045em;
    margin-bottom: 14px;
  }

  body#category .fm-cat-hero__lead,
  body#category .fm-cat-hero__lead p {
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.45;
  }

  body#category .fm-cat-hero--wd .fm-cat-hero__art {
    top: 0;
    right: -18px;
    bottom: 0;
    width: 280px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: right -8px bottom -30px;
    background-size: auto 132%;
    opacity: 1;
  }
}

/* =========================
   MOBILE
   hasta 767px
========================= */
@media (max-width: 767px) {
  body#category .fm-cat-hero {
    min-height: auto;
    padding: 22px 0 18px;
    margin-bottom: 28px;
    overflow: hidden;
  }

  body#category .fm-cat-hero__copy {
    width: calc(100% - 24px);
    margin: 0 auto;
    padding-right: 0;
  }

  body#category .fm-cat-hero__eyebrow {
    display: block;
    min-width: 300px !important;
    margin-bottom: 10px;
    font-size: .82rem;
    line-height: 1.2;
    letter-spacing: .13em;
  }

  body#category .fm-cat-hero__title {
    max-width: 12ch;
    font-size: clamp(2.2rem, 11vw, 3.4rem);
    line-height: .92;
    letter-spacing: -.05em;
    margin: 0 0 14px;
  }

  body#category .fm-cat-hero__lead,
  body#category .fm-cat-hero__lead p {
    min-width: 300px !important;
    max-width: 28ch;
    font-size: 1rem;
    line-height: 1.45;
    margin: 0;
  }

  /* ocultamos el perro en mobile para evitar ruido visual */
  body#category .fm-cat-hero--wd .fm-cat-hero__art {
    display: none;
  }

  body#category .fm-cat-section__head {
    margin-bottom: 18px;
  }

  body#category .fm-cat-section__kicker {
    font-size: .82rem;
    margin-bottom: 8px;
  }

  body#category .fm-cat-section__title {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: .95;
    letter-spacing: -.045em;
  }

  /* =========================================
   FURMATES · ARNeses HERO
   ZOOM + FRAME
========================================= */

body#category .fm-cat-hero__art--category-image {
  top: 0;
  right: max(-34px, calc((100vw - 1320px) / 2) - 28px);
  bottom: 0;
  width: clamp(620px, 43vw, 840px) !important;
  height: 100%;
  transform: none;
  background-repeat: no-repeat;
  background-position: right 18px bottom -2px;
  background-size: auto 128% !important;
  opacity: 1;
}


/* damos más aire al texto para que no choque con la imagen */
body#category .fm-cat-hero__copy {
  padding-right: clamp(340px, 31vw, 500px);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero__art--category-image {
    right: -18px;
    width: 360px;
    height: 100%;
    background-position: right 8px bottom 0;
    background-size: auto 108%;
  }

  body#category .fm-cat-hero__copy {
    padding-right: 250px;
  }
}

/* Mobile: mantenemos limpio */
@media (max-width: 767px) {
  body#category .fm-cat-hero__art--category-image {
    display: none;
  }

  body#category .fm-cat-hero__copy {
    padding-right: 0;
  }
}
/* =========================================
   FURMATES · HERO SUBCATEGORÍAS INTERNAS
   override directo sobre .fm-cat-hero__art
========================================= */

body#category .fm-cat-hero:not(.fm-cat-hero--wd):not(.fm-cat-hero--v4p) .fm-cat-hero__art {
  top: 0 !important;
  right: max(-34px, calc((100vw - 1320px) / 2) - 28px) !important;
  bottom: 0 !important;
  width: clamp(620px, 43vw, 840px) !important;
  height: 100% !important;
  transform: none !important;
  background-repeat: no-repeat !important;
  background-position: right 18px bottom -2px !important;
  background-size: auto 128% !important;
  opacity: 1 !important;
}

/* más aire para el bloque de texto */
body#category .fm-cat-hero:not(.fm-cat-hero--wd):not(.fm-cat-hero--v4p) .fm-cat-hero__copy {
  padding-right: clamp(340px, 31vw, 500px) !important;
}

/* tablet */
@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero:not(.fm-cat-hero--wd):not(.fm-cat-hero--v4p) .fm-cat-hero__art {
    right: -18px !important;
    width: 360px !important;
    height: 100% !important;
    background-position: right 8px bottom 0 !important;
    background-size: auto 108% !important;
  }

  body#category .fm-cat-hero:not(.fm-cat-hero--wd):not(.fm-cat-hero--v4p) .fm-cat-hero__copy {
    padding-right: 250px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  body#category .fm-cat-hero:not(.fm-cat-hero--wd):not(.fm-cat-hero--v4p) .fm-cat-hero__art {
    display: none !important;
  }

  body#category .fm-cat-hero:not(.fm-cat-hero--wd):not(.fm-cat-hero--v4p) .fm-cat-hero__copy {
    padding-right: 0 !important;
  }
}

/* =========================================
   FURMATES · HERO SUBCATEGORÍA
   override real sobre el mismo nodo
========================================= */

body#category .fm-cat-hero .fm-cat-hero__art.fm-cat-hero__art--category-image {
  top: 0 !important;
  right: max(-34px, calc((100vw - 1320px) / 2) - 28px) !important;
  bottom: 0 !important;
  width: clamp(620px, 43vw, 840px) !important;
  height: 100% !important;
  transform: none !important;
  background-repeat: no-repeat !important;
  background-position: right 18px bottom -2px !important;
  background-size: auto 128% !important;
  opacity: 1 !important;
}

body#category .fm-cat-hero .fm-cat-hero__art.fm-cat-hero__art--category-image + .fm-cat-hero__copy,
body#category .fm-cat-hero .fm-cat-hero__copy {
  padding-right: clamp(340px, 31vw, 500px) !important;
}

/* tablet */
@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero .fm-cat-hero__art.fm-cat-hero__art--category-image {
    right: -18px !important;
    width: 360px !important;
    height: 100% !important;
    background-position: right 8px bottom 0 !important;
    background-size: auto 108% !important;
  }

  body#category .fm-cat-hero .fm-cat-hero__copy {
    padding-right: 250px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  body#category .fm-cat-hero .fm-cat-hero__art.fm-cat-hero__art--category-image {
    display: none !important;
  }

  body#category .fm-cat-hero .fm-cat-hero__copy {
    padding-right: 0 !important;
  }
}

/* =========================================
   FURMATES · SUBCATEGORY HERO IMAGE
   responsive only
========================================= */

@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero__art.fm-cat-hero__art--category-image {
    right: -18px !important;
    width: 360px !important;
    height: 100% !important;
    background-position: right 8px bottom 0 !important;
    background-size: auto 108% !important;
  }

  body#category .fm-cat-hero__copy.fm-cat-hero__copy--category-image {
    padding-right: 250px !important;
  }
}

@media (max-width: 767px) {
  body#category .fm-cat-hero__art.fm-cat-hero__art--category-image {
    display: none !important;
  }

  body#category .fm-cat-hero__copy.fm-cat-hero__copy--category-image {
    padding-right: 0 !important;
  }
}

/* =========================================
   FURMATES · CATEGORY HERO · V4P FIX
========================================= */

body#category .fm-cat-hero--v4p {
  position: relative;
  overflow: hidden;
  min-height: clamp(220px, 20vw, 280px);
  padding: clamp(22px, 2.5vw, 36px) 0;
  margin-bottom: 40px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.98) 0%,
    rgba(80,200,255,.06) 100%
  ) !important;
}

body#category .fm-cat-hero--v4p .fm-cat-hero__copy {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding-right: clamp(320px, 30vw, 460px) !important;
}

body#category .fm-cat-hero--v4p .fm-cat-hero__art {
  position: absolute !important;
  top: 0 !important;
  right: max(-20px, calc((100vw - 1320px) / 2) - 12px) !important;
  bottom: 0 !important;
  left: auto !important;
  inset: auto !important;
  width: clamp(460px, 36vw, 680px) !important;
  height: 100% !important;
  transform: none !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: auto 92% !important;
  opacity: 1 !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero--v4p .fm-cat-hero__copy {
    padding-right: 240px !important;
  }

  body#category .fm-cat-hero--v4p .fm-cat-hero__art {
    right: -10px !important;
    width: 320px !important;
    background-size: auto 88% !important;
    background-position: right center !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  body#category .fm-cat-hero--v4p .fm-cat-hero__copy {
    width: calc(100% - 24px);
    padding-right: 0 !important;
  }

  body#category .fm-cat-hero--v4p .fm-cat-hero__art {
    display: none !important;
  }
}

/* =========================================
   FURMATES · CATEGORY HERO · V4P RESPONSIVE
========================================= */

@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero__copy.fm-cat-hero__copy--v4p {
    padding-right: 240px !important;
  }

  body#category .fm-cat-hero--v4p .fm-cat-hero__art {
    right: -10px !important;
    width: 320px !important;
    background-size: auto 84% !important;
    background-position: right center !important;
  }
}

@media (max-width: 767px) {
  body#category .fm-cat-hero__copy.fm-cat-hero__copy--v4p {
    padding-right: 0 !important;
  }

  body#category .fm-cat-hero--v4p .fm-cat-hero__art {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body#category .fm-cat-hero--v4p .fm-cat-hero__art {
    right: 0 !important;
    width: 50% !important;
    height: 100% !important;
    background-size: 50% auto !important;
    background-position: right center !important;
  }

  body#category .fm-cat-hero__copy.fm-cat-hero__copy--v4p {
    padding-right: 180px !important;
  }
}

/* =========================================================
   FURMATES – HEADER DESKTOP FINAL
   objetivo: igualar referencia visual 2
   ========================================================= */

@media (min-width: 992px){

  /* -----------------------------
     TOP NAV (fila superior)
  ----------------------------- */
  #header .header-nav{
    padding: 8px 0 0 !important;
    min-height: 34px !important;
  }

  #header .header-nav .container,
  #header .header-nav .row,
  #header .header-nav .hidden-sm-down.d-flex.w-100.align-items-center.justify-content-end,
  #header .header-nav .fm-topbar,
  #header .header-nav .fm-topbar__nav1{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }

  #header .header-nav .fm-topbar{
    width: 100% !important;
    gap: 14px !important;
    min-height: 28px !important;
  }

  #header .header-nav .fm-topbar__nav1{
    gap: 14px !important;
    min-height: 28px !important;
  }

  /* reset fuerte de classic */
  #header .header-nav #_desktop_contact_link,
  #header .header-nav #contact-link,
  #header .header-nav #_desktop_language_selector,
  #header .header-nav #_desktop_language_selector .language-selector-wrapper,
  #header .header-nav #_desktop_language_selector .language-selector,
  #header .header-nav #_desktop_language_selector .btn-unstyle,
  #header .header-nav #_desktop_user_info,
  #header .header-nav #_desktop_user_info .user-info,
  #header .header-nav #_desktop_user_info a,
  #header .header-nav #_desktop_cart,
  #header .header-nav #_desktop_cart .blockcart,
  #header .header-nav #_desktop_cart .header,
  #header .header-nav .fm-header-social,
  #header .header-nav .fm-social{
    margin: 0 !important;
    padding: 0 !important;
    min-height: 28px !important;
    height: auto !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* contacto */
  #header .header-nav #contact-link a{
    display: inline-flex !important;
    align-items: center !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  /* idioma */
  #header .header-nav #language-selector-label{
    display: none !important;
  }

  #header .header-nav #_desktop_language_selector .btn-unstyle{
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  #header .header-nav #_desktop_language_selector .expand-more,
  #header .header-nav #_desktop_language_selector .material-icons{
    color: #fff !important;
    line-height: 1 !important;
  }

  #header .header-nav #_desktop_language_selector .material-icons{
    font-size: 17px !important;
  }

  #header .header-nav #_desktop_language_selector .dropdown-menu{
    background: #50c8ff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 8px !important;
    margin-top: 8px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
  }

  #header .header-nav #_desktop_language_selector .dropdown-item{
    color: #001e46 !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  #header .header-nav #_desktop_language_selector .dropdown-item:hover{
    background: rgba(255,255,255,.35) !important;
  }

  /* usuario */
  #header .header-nav #_desktop_user_info .user-info{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #header .header-nav #_desktop_user_info .logout,
  #header .header-nav #_desktop_user_info .account,
  #header .header-nav #_desktop_user_info .user-info > a{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  #header .header-nav #_desktop_user_info .logout{
    font-weight: 400 !important;
    opacity: .92 !important;
  }

  #header .header-nav #_desktop_user_info .account{
    font-weight: 400 !important;
    opacity: .88 !important;
  }

  #header .header-nav #_desktop_user_info .material-icons{
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* carrito: icono + contador, sin palabra */
  #header .header-nav #_desktop_cart .blockcart,
  #header .header-nav #_desktop_cart .header{
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #fff !important;
  }

  #header .header-nav #_desktop_cart .header > span.hidden-sm-down{
    display: none !important;
  }

  #header .header-nav #_desktop_cart .shopping-cart{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    line-height: 1 !important;
    color: #fff !important;
    margin: 0 !important;
  }

  #header .header-nav #_desktop_cart .cart-products-count{
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #fff !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

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

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

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

  /* -----------------------------
     HEADER TOP (logo + menú + lupa)
  ----------------------------- */
  #header .header-top{
    padding-top: 4px !important;
    padding-bottom: 10px !important;
    position: relative !important;
  }

  #header .header-top .row{
    display: flex !important;
    align-items: flex-start !important;
  }

  /* logo un poco más controlado */
  #header #_desktop_logo{
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 4px !important;
  }

  /* menú principal a la derecha */
  #header .header-top .header-top-right{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    position: relative !important;
  }

  #header .header-top .menu{
    margin-left: auto !important;
    padding-right: 34px !important; /* deja aire para lupa */
    padding-top: 22px !important;
  }

  #header .header-top #_desktop_top_menu .top-menu{
    display: flex !important;
    justify-content: flex-end !important;
    gap: 54px !important;
  }

  #header .header-top #_desktop_top_menu .top-menu > li > a,
  #header .header-top #_desktop_top_menu .top-menu a{
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

 
  /* tono general */
  #header .header-nav a,
  #header .header-nav span,
  #header .header-nav i{
    color: #fff !important;
  }
}
/* =========================================================
   FURMATES – PASO 1
   Menú principal + lupa desktop
   ========================================================= */

@media (min-width: 992px){

  /* fila logo + menú */
  #header .header-top{
    padding-top: 6px !important;
    padding-bottom: 10px !important;
  }

  #header .header-top .row{
    display: flex !important;
    align-items: flex-start !important;
  }

  /* columna derecha */
  #header .header-top .header-top-right{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    position: relative !important;
  }

  /* menú principal */
  #header .header-top .menu{
    margin-left: auto !important;
    padding-top: 22px !important;
    padding-right: 38px !important; /* aire para la lupa */
  }

  #header .header-top #_desktop_top_menu .top-menu{
    display: flex !important;
    justify-content: flex-end !important;
    gap: 54px !important;
  }

  #header .header-top #_desktop_top_menu .top-menu > li > a,
  #header .header-top #_desktop_top_menu .top-menu a{
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

 
}
.renew-password .email {
    padding-bottom: 30px;
    color: #001e46 !important;
}


/* Furmates · checkout · radios de métodos de pago */
.payment-options .payment-option span.custom-radio,
.payment-options .payment-option span.custom-radio > span {
  border: 1px solid #0064ff !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.payment-options .payment-option input[type="radio"]:checked + span {
  border-color: #0064ff !important;
}

body#checkout section.checkout-step .payment-options .custom-radio {
    margin-right: .5rem;
    border: #0064ff 1px solid !important;
}

.custom-radio input[type=radio]:checked+span {
    position: absolute;
    top: .125rem;
    left: .125rem;
    display: block;
    width: 12px;
    height: 12px;
    background-color: #0064ff;
    border-radius: 50%;
}

.btn-primary, .btn-primary:hover {
    color: #fff;
    background-color: #0064ff;
    border-color: transparent;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: #50c8ff;
    text-decoration: none;
}

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #50c8ff;
    border-color: transparent;
}

.btn-primary:hover {
    background-color: #73d3ff;
}


/* Checkout header · Contact + WhatsApp */
.fm-checkout-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.fm-checkout-topbar__wa{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  line-height:1;
  margin-left:-2px;
}

.fm-checkout-topbar__wa:hover{
  color:#fff;
  opacity:.9;
  transform:translateY(-1px);
}


.fm-checkout-topbar__wa svg{
  display:block;
  width:28px !important;
  height:28px !important;
  overflow:visible;
}
 
 /* Mi cuenta > Datos personales > ocultar Tratamiento */

/* =========================
   Identity / Datos personales
   Ocultar Tratamiento
========================= */
body#identity #customer-form .form-group.row:has(label[for="field-id_gender"]) {
  display: none !important;
}