/* CSS Reset */

*{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a{
  cursor: pointer;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  font-family: Arial, sans-serif; /* Define default font family */
  font-size: 16px; /* Define default font size */
  line-height: 1.6; /* Define default line height */
  background-color: #ffffff; /* Set background color */
  color: #101828; /* Set text color */
}

h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  font-size: inherit;
}

button{
  cursor: pointer;
}

.ta-c{
  text-align: center;
}

.ta-l{
  text-align: left;
}

.ta-r{
  text-align: right;
}

/* Margin classes based on an 8-point grid */

/* Bottom margin */
.mt-0 { margin-top: 0; }
.mt-xs{ margin-top: 8px; }
.mt-sm { margin-top: 16px; }
.mt-md{ margin-top: 24px; }
.mt-lg { margin-top: 32px; }
.mt-xl { margin-top: 40px; }
.mt-2xl { margin-top: 48px; }
.mt-3xl { margin-top: 56px; }
.mt-4xl { margin-top: 64px; }
.mt-5xl { margin-top: 72px; }
.mt-6xl { margin-top: 80px; }
.mt-7xl { margin-top: 88px; }
.mt-8xl { margin-top: 96px; }

/* Bottom margin */
.mb-0 { margin-bottom: 0; }
.mb-xs{ margin-bottom: 8px; }
.mb-sm { margin-bottom: 16px; }
.mb-md{ margin-bottom: 24px; }
.mb-lg { margin-bottom: 32px; }
.mb-xl { margin-bottom: 40px; }
.mb-2xl { margin-bottom: 48px; }
.mb-3xl { margin-bottom: 56px; }
.mb-4xl { margin-bottom: 64px; }
.mb-5xl { margin-bottom: 72px; }
.mb-6xl { margin-bottom: 80px; }
.mb-7xl { margin-bottom: 88px; }
.mb-8xl { margin-bottom: 96px; }

/* Left margin */
.ml-0 { margin-left: 0; }
.ml-xs{ margin-left: 8px; }
.ml-sm { margin-left: 16px; }
.ml-md{ margin-left: 24px; }
.ml-lg { margin-left: 32px; }
.ml-xl { margin-left: 40px; }
.ml-2xl { margin-left: 48px; }
.ml-3xl { margin-left: 56px; }
.ml-4xl { margin-left: 64px; }
.ml-5xl { margin-left: 72px; }
.ml-6xl { margin-left: 80px; }
.ml-7xl { margin-left: 88px; }
.ml-8xl { margin-left: 96px; }

/* Right margin */
.mr-0 { margin-right: 0; }
.mr-xs{ margin-right: 8px; }
.mr-sm { margin-right: 16px; }
.mr-md{ margin-right: 24px; }
.mr-lg { margin-right: 32px; }
.mr-xl { margin-right: 40px; }
.mr-2xl { margin-right: 48px; }
.mr-3xl { margin-right: 56px; }
.mr-4xl { margin-right: 64px; }
.mr-5xl { margin-right: 72px; }
.mr-6xl { margin-right: 80px; }
.mr-7xl { margin-right: 88px; }
.mr-8xl { margin-right: 96px; }

/* Padding classes based on an 8-point grid */

/* Top padding */
.pt-0 { padding-top: 0; }
.pt-xs{ padding-top: 8px; }
.pt-sm { padding-top: 16px; }
.pt-md{ padding-top: 24px; }
.pt-lg { padding-top: 32px; }
.pt-xl { padding-top: 40px; }
.pt-2xl { padding-top: 48px; }
.pt-3xl { padding-top: 56px; }
.pt-4xl { padding-top: 64px; }
.pt-5xl { padding-top: 72px; }
.pt-6xl { padding-top: 80px; }
.pt-7xl { padding-top: 88px; }
.pt-8xl { padding-top: 96px; }

/* Bottom padding */
.pb-0 { padding-bottom: 0; }
.pb-xs{ padding-bottom: 8px; }
.pb-sm { padding-bottom: 16px; }
.pb-md{ padding-bottom: 24px; }
.pb-lg { padding-bottom: 32px; }
.pb-xl { padding-bottom: 40px; }
.pb-2xl { padding-bottom: 48px; }
.pb-3xl { padding-bottom: 56px; }
.pb-4xl { padding-bottom: 64px; }
.pb-5xl { padding-bottom: 72px; }
.pb-6xl { padding-bottom: 80px; }
.pb-7xl { padding-bottom: 88px; }
.pb-8xl { padding-bottom: 96px; }

/* Left padding */
.pl-0 { padding-left: 0; }
.pl-xs{ padding-left: 8px; }
.pl-sm { padding-left: 16px; }
.pl-md{ padding-left: 24px; }
.pl-lg { padding-left: 32px; }
.pl-xl { padding-left: 40px; }
.pl-2xl { padding-left: 48px; }
.pl-3xl { padding-left: 56px; }
.pl-4xl { padding-left: 64px; }
.pl-5xl { padding-left: 72px; }
.pl-6xl { padding-left: 80px; }
.pl-7xl { padding-left: 88px; }
.pl-8xl { padding-left: 96px; }

/* Right padding */
.pr-0 { padding-right: 0; }
.pr-xs{ padding-right: 8px; }
.pr-sm { padding-right: 16px; }
.pr-md{ padding-right: 24px; }
.pr-lg { padding-right: 32px; }
.pr-xl { padding-right: 40px; }
.pr-2xl { padding-right: 48px; }
.pr-3xl { padding-right: 56px; }
.pr-4xl { padding-right: 64px; }
.pr-5xl { padding-right: 72px; }
.pr-6xl { padding-right: 80px; }
.pr-7xl { padding-right: 88px; }
.pr-8xl { padding-right: 96px; }

/* Colors */


.Limegreen__900{
  color: #1a4c2b;
}
.Limegreen__800{
  color: #2c8048;
}
.Limegreen__700{
  color: #349956;
}
.Limegreen__600{
  color: #46cc73;
}
.Limegreen__500{
  color: #57ff90;
}
.Limegreen__400{
  color: #79ffa6;
}
.Limegreen__300{
  color: #89ffb1;
}
.Limegreen__200{
  color: #9affbc;
}
.Limegreen__100{
  color: #bcffd3;
}
.Limegreen__50{
  color: #cdffde;
}
.Verysoftblue__900{
  color: #1c1c31;
}
.Verysoftblue__800{
  color: #383863;
}
.Verysoftblue__700{
  color: #535394;
}
.Verysoftblue__600{
  color: #6f6fc6;
}
.Verysoftblue__500{
  color: #8b8bf7;
}
.Verysoftblue__400{
  color: #9797f8;
}
.Verysoftblue__300{
  color: #aeaef9;
}
.Verysoftblue__200{
  color: #c5c5fb;
}
.Verysoftblue__100{
  color: #d1d1fc;
}
.Verysoftblue__50{
  color: #e8e8fd;
}
.Brightcyan__900{
  color: #1d757f;
}
.Brightcyan__800{
  color: #28a4b1;
}
.Brightcyan__700{
  color: #2ebbca;
}
.Brightcyan__600{
  color: #33d3e4;
}
.Brightcyan__500{
  color: #39eafd;
}
.Brightcyan__400{
  color: #4decfd;
}
.Brightcyan__300{
  color: #61eefd;
}
.Brightcyan__200{
  color: #88f2fe;
}
.Brightcyan__100{
  color: #b0f7fe;
}
.Brightcyan__50{
  color: #c4f9fe;
}
.Vividyellow__900{
  color: #333200;
}
.Vividyellow__800{
  color: #666501;
}
.Vividyellow__700{
  color: #999701;
}
.Vividyellow__600{
  color: #ccca02;
}
.Vividyellow__500{
  color: #fffc02;
}
.Vividyellow__400{
  color: #fffd35;
}
.Vividyellow__300{
  color: #fffd4e;
}
.Vividyellow__200{
  color: #fffd67;
}
.Vividyellow__100{
  color: #fffe81;
}
.Vividyellow__50{
  color: #fffeb3;
}
.Brightblue__50{
  color: #e7e4fd;
}
.Brightblue__100{
  color: #dad5fd;
}
.Brightblue__200{
  color: #d1cbfd;
}
.Brightblue__300{
  color: #b7aefd;
}
.Brightblue__400{
  color: #8f81fd;
}
.Brightblue__500{
  color: #7362fc;
}
.Brightblue__600{
  color: #503bfb;
}
.Brightblue__700{
  color: #3326a1;
}
.Brightblue__800{
  color: #291e81;
}
.Brightblue__900{
  color: #211867;
}
.Gray__900{
  color: #101828;
}
.Gray__800{
  color: #1d2939;
}
.Gray__700{
  color: #344054;
}
.Gray__600{
  color: #475467;
}
.Gray__500{
  color: #667085;
}
.Gray__400{
  color: #98a2b3;
}
.Gray__300{
  color: #d0d5dd;
}
.Gray__200{
  color: #eaecf0;
}
.Gray__100{
  color: #edf0f3;
}
.Gray__50{
  color: #f9fafb;
}
.Success__900{
  color: #054f31;
}
.Success__800{
  color: #05603a;
}
.Success__700{
  color: #027a48;
}
.Success__600{
  color: #039855;
}
.Success__500{
  color: #12b76a;
}
.Success__400{
  color: #32d583;
}
.Success__300{
  color: #6ce9a6;
}
.Success__200{
  color: #a6f4c5;
}
.Success__100{
  color: #d1fadf;
}
.Success__50{
  color: #ecfdf3;
}
.Warning__900{
  color: #7a2e0e;
}
.Warning__800{
  color: #93370d;
}
.Warning__700{
  color: #b54708;
}
.Warning__600{
  color: #dc6803;
}
.Warning__500{
  color: #f79009;
}
.Warning__400{
  color: #fdb022;
}
.Warning__300{
  color: #fec84b;
}
.Warning__200{
  color: #fedf89;
}
.Warning__100{
  color: #fef0c7;
}
.Warning__50{
  color: #fffaeb;
}
.Error__900{
  color: #7a271a;
}
.Error__800{
  color: #912018;
}
.Error__700{
  color: #b42318;
}
.Error__600{
  color: #d92d20;
}
.Error__500{
  color: #f04438;
}
.Error__400{
  color: #f97066;
}
.Error__300{
  color: #fda29b;
}
.Error__200{
  color: #fecdca;
}
.Error__100{
  color: #fee4e2;
}
.All__White{
  color: #ffffff;
}
.All__Disabled{
  color: #f2f4f7;
}

/* Fonts */

.H1{
  font-size: 96px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 112px;
}
.H2{
  font-size: 80px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 88px;
}
.H3{
  font-size: 60px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 68px;
}
.H4{
  font-size: 48px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 52px;
}
.H5{
  font-size: 32px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 36px;
}
.H6{
  font-size: 28px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 32px;
}
.Subtitleregular{
  font-size: 20px;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  line-height: 28px;
}
.Subtitlemedium{
  font-size: 20px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  line-height: 28px;
}
.Subtitlebold{
  font-size: 20px;
  font-family: "Hind", sans-serif;
  font-weight: 700;
  line-height: 28px;
}
.Bodyregular{
  font-size: 18px;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  line-height: 24px;
}
.Bodymedium{
  font-size: 18px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  line-height: 24px;
}
.Bodybold{
  font-size: 18px;
  font-family: "Hind", sans-serif;
  font-weight: 700;
  line-height: 24px;
}
.Smallregular{
  font-size: 16px;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  line-height: 20px;
}
.Smallmedium{
  font-size: 16px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  line-height: 20px;
}
.Smallbold{
  font-size: 16px;
  font-family: "Hind", sans-serif;
  font-weight: 700;
  line-height: 20px;
}
.Captionregular{
  font-size: 14px;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  line-height: 18px;
}
.Captionmedium{
  font-size: 14px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  line-height: 18px;
}
.Captionbold{
  font-size: 14px;
  font-family: "Hind", sans-serif;
  font-weight: 700;
  line-height: 18px;
}

/* Styles */

.container{
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 32px;
}

.container__100{
  width: 100%;
  padding: 0 80px;
}

.text-link{
  font-size: 16px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 0;
}

.text-link.Brightblue__700::after{
  content: '';
  width: 0%;
  height: 3px;
  background: #3326a1;
  left: 0;
  bottom: 0;
  position: absolute;
  transition: all .3s;
}

.text-link.Brightblue__700:hover::after{
  content: '';
  width: 100%;
  height: 3px;
  background: #3326a1;
  left: 0;
  bottom: 0;
  position: absolute;
}

.text-link.Brightblue__600::after{
  content: '';
  width: 0%;
  height: 3px;
  background: #503bfb;
  left: 0;
  bottom: 0;
  position: absolute;
  transition: all .3s;
}

.text-link.Brightblue__600:hover::after{
  content: '';
  width: 100%;
  height: 3px;
  background: #503bfb;
  left: 0;
  bottom: 0;
  position: absolute;
}

.btn__text__lg{
  padding: 16px 20px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 0px solid transparent;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s;
  align-items: center;
}

.btn__text__md{
  padding: 12px 16px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 0px solid transparent;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s;
  align-items: center;
}


.btn__primary__lg{
  padding: 16px 20px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 3px solid #101828;
  background: #57ff90;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s;
  align-items: center;
  justify-content: center;
}

.btn__primary__lg:hover{
  box-shadow: 8px 8px 0px 0px #101828;
}

.btn__primary__md:hover{
  box-shadow: 8px 8px 0px 0px #101828;
}

.btn__secondary__lg:hover{
  box-shadow: 8px 8px 0px 0px #101828;
}

.btn__secondary__md:hover, input#submitForm:hover{
  box-shadow: 8px 8px 0px 0px #101828;
}

.btn__primary__md{
  padding: 12px 16px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 3px solid #101828;
  background: #57ff90;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s; 
  align-items: center;
  justify-content: center;
}

.btn__primary__md__search{
  padding: 12px 16px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 3px solid #101828;
  background: #57ff90;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s; 
  align-items: center;
}

.btn__secondary__lg{
  padding: 16px 20px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 3px solid #101828;
  background: transparent;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s;
  align-items: center;
  justify-content: center;
}

.btn__secondary__md{
  padding: 12px 16px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 3px solid #101828;
  background: transparent;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s; 
  align-items: center;
  justify-content: center;
}

button.btn__secondary__md:disabled{
  border: 3px solid #f2f4f7;
  color: #f2f4f7 !important;
  box-shadow: 0px 0px 0px 0px #f2f4f7;
  cursor: not-allowed;
}

input#submitForm:disabled {
  border: 3px solid #f2f4f7;
  color: white;
  box-shadow: 0px 0px 0px 0px #f2f4f7;
  cursor: not-allowed;
  background-color: #f2f4f7;
}

input#submitForm{
  padding: 12px 16px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 3px solid #101828;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s; 
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: "Hind", sans-serif;
  font-weight: 700;
  line-height: 24px;
  width: 100%;
  color: #101828;
  cursor: pointer;
  background: rgb(87, 255, 144);
}

button.btn__secondary__md:disabled .label__button{
  color: #f2f4f7 !important;
}

button.btn__secondary__md:disabled:hover{
  box-shadow: 0px 0px 0px 0px #f2f4f7;
}


.btn__secondary__md__filters{
  padding: 12px 16px;
  gap: 8px;
  box-shadow: 0px 0px 0px 0px #101828;
  border: 3px solid #101828;
  background: transparent;
  border-radius: 12px;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s; 
  align-items: center;
  white-space: nowrap;
  position: relative;
}

.filters-count{
  position: absolute;
  font-size: 14px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  line-height: 14px;
  top: -10px;
  right: -10px;
  background-color: #101828;
  color: white;
  border: 2px solid white;
  border-radius: 100%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap__menu__desktop{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.wrap__menu__desktop__100{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0;
}

.wrap__buttons__banner{
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}

.landing__b1{
  background: #FFFAEB;
  margin-top: -118px;
  overflow: hidden;
}

.wrap__content__banner{
  width: 60%;
}

.wrap__content__banner p{
  width: 85%;
}

.sticker-1{
  position: absolute;
  bottom: -5%;
  left: 55%;
}

.sticker-2{
  position: absolute;
  top: 45%;
  left: -15%;
}

.sticker-3{
  position: absolute;
  top: 15%;
  left: 80%;
}

.sticker-1__footer{
  position: absolute;
  bottom: 16%;
  left: 1%;
  width: 76px;
  rotate: -6deg;
}

.sticker-2__footer{
  position: absolute;
  bottom: 56%;
  left: 23%;
  width: 78px;
  rotate: 10deg;
}

.sticker-3__footer{
  position: absolute;
  bottom: 5%;
  left: 48%;
  width: 80px;
  rotate: -10deg;
}

.sticker-4__footer{
  position: absolute;
  bottom: 45%;
  left: 74%;
  width: 84px;
  rotate: 4deg;
}

.sticker-5__footer{
  position: absolute;
  bottom: 15%;
  left: 94%;
  width: 84px;
  rotate: -14deg;
}

@keyframes float {
  50% {
     transform: translate(0, 5px);
  }
}

@keyframes float-2 {
  50% {
     transform: translate(0, -2px);
  }
}

@keyframes float-3 {
  50% {
     transform: translate(0, -4px);
  }
}

.wrap__features__app{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;

  margin: auto;
}

.wrap__images__features{
  width: 38%;
}

.wrap__content__features{
  width: 50%;
  gap: 0px;
  display: flex;
  flex-direction: column;
}

.content__features{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrap__title__banner{
  display: flex;
  flex-direction: column;
}

.wrap__top__title__banner{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.wrap__img__banner{
  width: 35%;
  text-align: right;
  padding-top: 130px;
  position: relative;
  height: fit-content;
}

.wrap__banner__main{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 140px 0 72px 0;
  height: auto;
  position: relative;
}

.landing__b3{
  position: relative;
  overflow: hidden;
  background: #FFFAEB;
}

.landing__b4{
  background: #FFFAEB;
}

.landing__b3:after{
  position: absolute;
  width: 50%;
  height: 80%;
  background: #E7E4FD;
  border-bottom-right-radius: 40px;
  border-top-right-radius: 40px;
  content: '';
  top: 0%;
  left: 0;
  z-index: 0;
}

.landing__b2{
  background: #FFFAEB;
}

.landing__b3:before{
  position: absolute;
  width: 50%;
  height: 80%;
  background: #E7E4FD;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  content: '';
  top: 0%;
  left: 50%;
  z-index: 0;
}

.carrousel-wrapper {
  display: flex;
  white-space: nowrap;
}

#carrousel, #carrousel-invert {
  display: inline-block;
  white-space: nowrap;
  z-index: 1;
  position: relative;
}

#carrousel {
  animation: carrousel-loop 55s linear infinite;
}

#carrousel-invert {
  animation: carrousel-loop-invert 55s linear infinite;
}

@keyframes carrousel-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes carrousel-loop-invert {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.wrap__steps__web{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  z-index: 1;
  position: relative;
}

.item__step__web{
  width: 45%;
  border-radius: 32px;
  background: #7362FC;
  display: flex;
  flex-direction: row;
  padding: 32px;
  box-shadow: 15px 15px 0px 0px #101828;
  border: 3px solid #101828;
  justify-content: space-between;
}

.img__step__web{
  max-width: 96px;
}

.img__step__web img{
  width: 100%;
}

.wrap__title__section__CTA{
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 800px;
  margin: auto;
}

.wrap__image__screens__cta{
  z-index: 9;
}
/* La imagen del CTA está exportada en 3x; sin límite salía a ~1000px.
   La acotamos para que se vea a su tamaño real (~1/3). */
.wrap__image__screens__cta img{
  max-width: 410px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.wrap__images__features img{
  height: 70%;
}

.landing__b4 p, .landing__b4 h1{
  transition: all .5s;
}

.landing__b4.active p{
  color: transparent; !important;
}

.landing__b4.active h1{
  color: #291E81;
}

.wrap__screens__cta{
  display: flex;
  width: 1008px;
  min-width: 1008px;
  flex-direction: column;
  background: #7362FC;
  border-radius: 40px;
  padding-top: 96px;
  align-items: center;
  gap: 64px;
  margin: auto;
  height: 550px;
  min-height: 550px;
  transition: border-radius 0.1s, box-shadow .3s;
  box-shadow: 15px 15px 0px 0px #101828;
  border: 3px solid #101828;
  position: relative;
}

.band__background{
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 25%;
  transform: translateX(-50%);
  overflow: hidden;
}


.wrap__cta__items{
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.footer__landing{
  background: #7362FC;
  border-top: 0px solid transparent;
}

.footer__app{
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.wrap__social__media{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-right: 3px solid #101828;
  border-left: 3px solid #101828;
}

.item__social__media{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 33.33%;
  justify-content: center;
  text-decoration: none;
  transition: all .3s;
}

.separator__footer{
  width: 3px;
  height: 10;
  background: #101828;
}

.item__social__media.orange__hover:hover{
  background: #39EAFD;
}

.item__social__media.green__hover:hover{
  background: #57FF90;
}

.item__social__media.red__hover:hover{
  background: #FFFC02;
}

.wrap__social__icons{
  display: flex;
  align-items: center;
  text-decoration: none;
}

.wrap__social__icons a{
  text-decoration: none;
}

.animate__title{
  width: 100%;
  height: 112px;
  background: #503BFB;
  position: absolute;
  top: 115px;
}

.wrap__icon__title{
  display: flex;
  align-items: center;
}

.wrap__animate__title{
  position: relative;
  overflow: hidden;
}

.wrap__animate__title .H1, .wrap__animate__title .H3{
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.wrap__animate__title .H6{
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.wrap__animate__title span{
  display: block;
}

.wrap__bottom__title__banner{
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.wrap__animate__height{
  display: flex;
  flex-direction: column;
  gap: 0px;
  text-align: center;
  justify-content: center;
  z-index: 2;
}

.justify__center__title{
  justify-content: center;
}


.paragraph__banner{
  z-index: 2;
  position: relative;
}

.arrow__down__banner{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 32px;
}

.landing__b3-5{
  background: #FFFAEB;
  padding: 200px 0;
}

.align-right{
  text-align: right;
}

.wrap__chat{
  margin: auto;
  max-width: 65%;
}

.wrap__chat{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wrap__image__chat{
  text-align: center;
}

/* ── Chat bubbles (HTML/CSS) ───────────────────────────────────────────────── */
.wrap_item_chat .chat__photo {
  max-width: 56%;
  height: auto;
  display: inline-block;
}

.chat__time {
  font-size: 14px;
  font-weight: 500;
  color: #349956;
  margin-bottom: 10px;
  text-align: left;
}
.chat__time--right { text-align: right; }

.chat__bubble {
  display: inline-block;
  max-width: 75%;
  padding: 18px 28px;
  border: 3px solid #101828;
  border-radius: 32px;
  font-family: inherit;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: #101828;
  position: relative;
  text-align: left;
  word-wrap: break-word;
  filter: drop-shadow(8px 8px 0 #101828);
}

.chat__bubble--purple { background: #7362FC; }
.chat__bubble--yellow { background: #FFFC02; }

.chat__bubble__text {
  position: relative;
  z-index: 1;
}

/* Colita SVG — pegada al borde inferior del bocadillo, fuera de la curva del radio */
.chat__tail {
  position: absolute;
  width: 32px;
  height: 28px;
  bottom: -28px;
  pointer-events: none;
  overflow: visible;
}

.chat__tail--right { right: 42px; }
.chat__tail--left { left: 42px; }

@media (max-width: 768px) {
  .chat__bubble {
    font-size: 18px;
    padding: 12px 18px;
    border-radius: 22px;
    max-width: 88%;
    filter: drop-shadow(6px 6px 0 #101828);
  }
  .chat__tail { width: 26px; height: 22px; bottom: -22px; }
  .chat__tail--right { right: 28px; }
  .chat__tail--left  { left: 28px; }
  .chat__time { font-size: 12px; margin-bottom: 6px; }
  .wrap_item_chat .chat__photo { max-width: 72%; }
}

/* ── Landing — optimizaciones mobile ────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Tipografía landing — reducir headlines gigantes */
  .landing__b1 .H1,
  .landing__b3 .H1,
  .landing__b4 .H1 {
    font-size: 40px;
    line-height: 46px;
  }
  .landing__b1 .wrap__animate__title .H1,
  .landing__b3 .wrap__animate__title .H1,
  .landing__b4 .wrap__animate__title .H1 {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .content__features .H3 {
    font-size: 32px;
    line-height: 36px;
  }
  .content__features .wrap__animate__title .H3 {
    gap: 6px;
    flex-wrap: wrap;
  }

  /* Banner b1 — botones full-width, paragraph y socials centrados */
  .landing__b1 .wrap__buttons__banner {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .landing__b1 .wrap__buttons__banner > a,
  .landing__b1 .wrap__buttons__banner > a > .label__button,
  .landing__b1 .wrap__buttons__banner > a > div {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .landing__b1 .paragraph__banner {
    font-size: 16px;
    line-height: 22px;
  }
  .landing__b1 .wrap__social__icons {
    margin-top: 32px !important;
    gap: 16px;
    justify-content: center;
  }
  .landing__b1 .wrap__social__icons .item__social__media_icon {
    margin-right: 16px !important;
  }
  .landing__b1 .sticker-1,
  .landing__b1 .sticker-2,
  .landing__b1 .sticker-3 {
    width: 60px !important;
  }
  .wrap__banner__main { padding: 96px 0 48px 0; }
  .wrap__img__banner { width: 75%; margin-bottom: 32px; }

  /* Features b2 — pantallas más compactas, botón full-width */
  .landing__b2 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .content__features { margin: 48px 0; }
  .wrap__images__features__1,
  .wrap__images__features__2,
  .wrap__images__features__3 {
    height: 280px;
    width: 100%;
    border-radius: 24px;
    box-shadow: 8px 8px 0 0 #101828;
    margin-bottom: 24px;
  }
  .wrap__images__features__1 img,
  .wrap__images__features__2 img,
  .wrap__images__features__3 img {
    height: 75%;
  }
  .content__features .btn__primary__md {
    width: 100%;
  }
  .content__features .btn__primary__md .label__button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Steps b3 — cards más compactas */
  .landing__b3 {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .item__step__web {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 8px 8px 0 0 #101828;
    margin-bottom: 20px !important;
    gap: 16px;
  }
  .item__step__web .H3 { font-size: 28px; line-height: 32px; }
  .item__step__web .H6 { font-size: 18px; line-height: 22px; }
  .item__step__web .Smallregular { font-size: 13px; line-height: 18px; }
  .img__step__web { max-width: 64px; }

  /* Chat b3-5 — padding razonable, sticker más chico */
  .landing__b3-5 { padding: 64px 0; }
  .wrap__chat { max-width: 100%; gap: 18px; }
  .wrap__image__chat { margin-top: 32px !important; }
  .wrap__image__chat img { max-width: 120px; }

  /* CTA b4 — deja que el JS de scroll (#miDiv) controle width/height igual que desktop.
     Solo neutralizamos el min-width de 1008px y limitamos overflow. */
  .wrap__screens__cta {
    min-width: 0 !important;
    max-width: 100%;
    padding: 96px 16px 40px;
    gap: 48px;
    justify-content: flex-start;
  }
  .band__background { top: 28%; }
  .band__background .H1 { font-size: 40px; line-height: 46px; }
  .wrap__cta__items { gap: 40px; padding: 0; }
  .wrap__image__screens__cta img { width: 100% !important; }
  .landing__b4 .wrap__buttons__banner {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding: 0 8px;
  }
  .landing__b4 .wrap__buttons__banner > a,
  .landing__b4 .wrap__buttons__banner > a > .label__button,
  .landing__b4 .wrap__buttons__banner > a > div {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Footer landing — items sociales con padding razonable */
  .footer__landing .item__social__media {
    padding: 20px 16px !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .landing__b1 .H1,
  .landing__b3 .H1,
  .landing__b4 .H1,
  .band__background .H1 {
    font-size: 34px;
    line-height: 38px;
  }
  .content__features .H3 {
    font-size: 26px;
    line-height: 30px;
  }
  .chat__bubble {
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 20px;
  }
  .item__step__web { padding: 16px; gap: 12px; }
  .item__step__web .H3 { font-size: 24px; line-height: 28px; }
  .img__step__web { max-width: 56px; }
  .wrap__images__features__1,
  .wrap__images__features__2,
  .wrap__images__features__3 {
    height: 220px;
  }
}

.wrap__images__features{
  height: 60vh;
  border-radius: 32px;
  border: 3px solid #101828;
  position: sticky;
  top: 10vh;
  transition: background-color 0.3s ease;
  background: #7362FC;
  box-shadow: 16px 16px 0px 0px #101828;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap__images__features__1{
  height: 60vh;
  width: 70%;
  border-radius: 32px;
  border: 3px solid #101828;
  position: relative;
  transition: background-color 0.3s ease;
  background: #7362FC;
  box-shadow: 16px 16px 0px 0px #101828;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  margin-bottom: 48px;
}

.wrap__images__features__2{
  height: 60vh;
  width: 70%;
  border-radius: 32px;
  border: 3px solid #101828;
  position: relative;
  transition: background-color 0.3s ease;
  background: #FFFC02;
  box-shadow: 16px 16px 0px 0px #101828;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  margin-bottom: 48px;
}

.wrap__images__features__3{
  height: 60vh;
  width: 70%;
  border-radius: 32px;
  border: 3px solid #101828;
  position: relative;
  transition: background-color 0.3s ease;
  background: #39EAFD;
  box-shadow: 16px 16px 0px 0px #101828;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  margin-bottom: 48px;
}

.wrap__images__features__1 img, .wrap__images__features__2 img, .wrap__images__features__3 img{
  height: 70%;
}

.background-violet{
  background: #7362FC;
  box-shadow: 16px 16px 0px 0px #101828;
}

.background-orange{
  background: #FFFC02;
  box-shadow: 16px 16px 0px 0px #101828;
}

.background-green{
  background: #39EAFD;
  box-shadow: 16px 16px 0px 0px #101828;
}

.wrap__logo__main img{
  width: 100%;
  height: 50px;
}

header{
  z-index: 99;
  position: relative;
}

.wrap__register{
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 0;
}

.wrap__register #nueva-mascota{
  width: 40%;
}

.right__form{
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 180px 72px 100px 72px;
}

.right__form__short{
  width: 40%;
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 180px 72px 100px 72px;
}

.left__image{
  width: 60%;
  background-color: #FFFAEB;
  min-height: 80vh;
  margin: 64px;
  border: 3px solid #101828;
  border-radius: 28px;
  align-items: center;
  box-shadow: rgb(16, 24, 40) 20px 20px 0px 0px;
}

.btn__login__social{
  background: white;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px #10182805;
  padding: 12px 12px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label__btn__social{
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.label__btn__social__text{
  font-size: 16px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  line-height: 16px; 
}

.wrap__form__content{
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.divider__form{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}

.divider__form:after{
  width: 100%;
  height: 1px;
  background-color: #EDF0F3;
  top: 49%;
  left: 0;
  content: '';
  position: absolute;
}

.label__divider{
  background-color: white;
  z-index: 2;
  position: relative;
  padding: 0 12px;
}

.simple__form{
  border: 3px solid #f9fafb;
  background: #f9fafb;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px #10182805;
  padding: 32px 12px 8px 12px;
  font-size: 18px;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  line-height: 18px;
  color: #101828;
  width: 100%;
}

/* Input de archivo (adjuntar foto de prueba): estilo limpio, sin el padding
   de los inputs de texto que rompía el botón "elegir archivo". */
.file__form{
  width: 100%;
  box-sizing: border-box;
  border: 3px solid #f9fafb;
  background: #f9fafb;
  border-radius: 8px;
  padding: 36px 12px 12px 12px; /* espacio arriba para el label flotante */
  font-size: 15px;
  font-family: "Hind", sans-serif;
  color: #101828;
  cursor: pointer;
  line-height: 1.4;
}
.file__form::file-selector-button,
.file__form::-webkit-file-upload-button{
  font-family: "Hind", sans-serif;
  font-weight: 700;
  color: #101828;
  background: #57ff90;
  border: 2px solid #101828;
  border-radius: 999px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Hay una regla global `input[type="file"]{visibility:hidden;position:absolute}`
   (para el uploader custom de la galería). Reactivamos SOLO este campo de prueba. */
#form-asalvo .file__form{
  visibility: visible;
  position: static;
}


.prefix::after {
  content: '+58';
  position: absolute;
  left: 12px;
  top: 47%;
  color: #101828;
  font-size: 18px;
  font-family: "Hind", sans-serif;
}

.prefix{
  position: relative;
}

.prefix .simple__form{
  padding-left: 44px;
}

.wrap__input__single{
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
}

.label__custom{
  position: absolute;
  left: 13px;
  top: 12px;
  z-index: 2;
}

.wrap__select__single{
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 100%;
}

.wrap__check__single{
  display: flex;
  flex-direction: row;
  gap: 4px;
  position: relative;
}

.btn__form__100{
  width: 100%;
}

/*.label__button{
  margin: auto;
}*/

.simple__form:focus{
  border: 3px solid #101828;
  outline: 0px solid #101828;
}

.simple__form--error{
  border: 3px solid #f04438 !important;
  background: #fff5f5;
}

.input__error__msg{
  font-size: 12px;
  color: #f04438;
  font-weight: 600;
  margin-top: 2px;
  display: none;
}

.input__error__msg.visible{
  display: block;
}

.register__form{
  margin-top: -118px;
}

.show-hide{
  position: absolute;
  right: 16px;
  top: 40px;
  cursor: pointer;
}

.input-pin{
  position: absolute;
  right: 16px;
  top: 40px;
}

.logo-header__desktop{
  display: block;
}

.logo-header__mobile{
  display: none;
}

/* Hide the default checkbox */
.custom-checkbox input {
  position: relative;
  opacity: 0;
  cursor: pointer;
}

/* Style the custom checkbox */
.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-image: url("../images/checkbox-default.svg");
}

/* When the checkbox is checked, change the background color */
.custom-checkbox input:checked + .checkmark {
  background-image: url("../images/checkbox-checked.svg");
}



/* Show the checkmark icon when the checkbox is checked */
.custom-checkbox input:checked + .checkmark:after {
  display: block;
}

/* Style the checkmark icon */
.custom-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/*Simple radio btn input CSS*/
.custom-control-label {
  cursor: pointer;
}

.cap-opt-1 {
  display: inline-block;
  min-width: 50px;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #59a9f7;
  background-color: #59a9f7;
}
/*Card Button CSS*/

.card-radio-btn{
  width: 100%;
}

.card-input-element + .card {
  width: 100%;
  padding: 16px;
  justify-content: center;
  color: var(--primary);
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 3px solid #f9fafb;
  border-radius: 8px;
  text-align: center;
  position: relative;
}

.card-input-element + .card:hover {
  cursor: pointer;

  border: 3px solid #101828
}

.card-input-element:checked + .card {
  border: 3px solid #101828;
  -webkit-transition: border 0.3s;
  -o-transition: border 0.3s;
  transition: border 0.3s;
}

.card-body img{
  max-height: 60px;
}

.card-input-element:checked + .card::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("../images/radio-checked.svg");
  position: absolute;
  right: 16px;
  top: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card-input-element + .card::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("../images/radio-default.svg");
  position: absolute;
  right: 16px;
  top: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-animation-name: fadeInCheckbox;
  animation-name: fadeInCheckbox;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fadeInCheckbox {
  from {
    opacity: 0;
    -webkit-transform: rotateZ(-20deg);
  }

  to {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
  }
}

@keyframes fadeInCheckbox {
  from {
    opacity: 0;
    transform: rotateZ(-20deg);
  }

  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}

.wrap__horizontal__card{
  display: flex;
  flex-direction: row;
  gap: 32px;
  flex-wrap: nowrap;
}

.d-none{
  display: none;
}

/* The container must be positioned relative: */
.custom-select, .custom-select-ubicacion {
  position: relative;
  width: 100%;
}

.custom-select select, .custom-select-ubicacion select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: #f9fafb;
  border: 3px solid #f9fafb;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px #10182805;
  padding: 32px 12px 8px 12px;
  font-size: 18px;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  line-height: 18px;
  color: #101828;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "\e940";
  font-family: 'feather' !important;
  top: 64%;
  transform: translateY(-50%);
  right: 14px;
  width: 16px;
  height: 16px;
}



/* Style items (options): */
.select-items {
  position: absolute;
  background-color: white;
  top: 93%;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 0px;
  border: 3px solid #101828;
  border-radius: 8px;
}

.select-arrow-active{
  border: 3px solid #101828;
  background: white;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div{
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  line-height: 20px;
  color: #101828;
}

.select-items div:hover, .same-as-selected {
  background-color: #E7E4FD;
  border-radius: 8px;
}

#map {
  position: absolute;
  top: calc(100% + 10px); /* Mover el mapa debajo del campo de entrada */
  left: 0;
  width: 100%;
  height: 300px; /* Ajusta la altura del mapa según tus necesidades */
  border: 1px solid #ccc; /* Añade un borde opcional */
}

#drop-area {
  border: 2px dashed #D0D5DD;
  border-radius: 8px;
  padding: 44px;
  text-align: center;
  position: relative;
  transition: all .3s;
  cursor: pointer;
}



#drop-area:hover {
  background-color: #F9FAFB;
}

.gif__upload{
  width: 100%;
  max-width: 140px;
}

input[type="file"]{
  visibility: hidden;
  position: absolute;
}

.wrap__image__exito img{
  max-height: 200px;
}

.wrap__image__exito{
  text-align: center;
  width: 100%;
}

.text-align-center{
  text-align: center;
}

.next__step{
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px 24px;
  border-radius: 8px;
}

.number__step, .icon__step{
  width: 100%;
  text-align: center;
  max-width: 32px;
}

.icon__step{
  display: none;
}

.step__done .icon__step{
  display: block;
}

.step__done .number__step{
  display: none;
}

.step__done{
  border: 1px solid #EAECF0;
}

.step__disabled{
  opacity: .5;
}

.wrap__share__buttons{
  display: flex;
  gap: 8px;
  flex-direction: row;
}

/* Botones de "Síguenos en redes" apilados (uno sobre el otro) */
.wrap__share__buttons--col{
  flex-direction: column;
}
.wrap__share__buttons--col > a{
  width: 100%;
}
.wrap__share__buttons--col > a .label__button{
  justify-content: center;
}

.step__done .wrap__btn__form{
  display: none;
}

.left__image{
  position: sticky;             /* se queda fijo al hacer scroll (sin romper las 2 columnas como sí haría position:fixed) */
  top: 64px;
  align-self: flex-start;       /* necesario para sticky: no estirar a la altura del formulario */
  max-height: calc(100vh - 96px); /* nunca más alto que el viewport (deja aire para márgenes + sombra) */
  overflow: hidden;
  display: flex;
  justify-content: center ;
}

.left__image img{
  max-width: 360px;
  position: relative;
  /* left: 50%; */
  /*top: 50%;
  transform: translateY(-50%);*/
}

.wrap__cta{
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  position: relative;
}

/* Variantes desktop/mobile del CTA "Ver todos" en home__b2 */
.wrap__cta--mobile { display: none; }

@media (max-width: 767px) {
  .wrap__cta--desktop { display: none; }
  .wrap__cta--mobile  { display: flex; width: 100%; }
  .wrap__cta--mobile .btn__secondary__md { width: 100%; justify-content: center; }
}

.wrap__input__searcher{
  border: 3px solid #101828;
  border-radius: 12px;
  box-shadow: 0px 0px 0px 0px #101828;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  justify-content: space-between;
  z-index: 2;
  background: white;
  transition: all .3s;
}
/*
.wrap__input__searcher:hover{
  box-shadow: 8px 8px 0px 0px #101828;
}
*/
.divider__searcher{
  height: 100%;
  width: 1px;
  background: #D0D5DD;
}

.item__input__search__report{
  width: 24%;
  cursor: pointer;
  /*border-right: 1px solid #EAECF0;*/
  position: relative;
  padding-left: 16px;
}

.search__report__options{
  position: absolute;
  background: white;
  border-radius: 12px;
  border: 3px solid #101828;
  width: 150%;
  left: 0px;
  bottom: -195px;
  display: none;
}

.search__type__options{
  position: absolute;
  background: white;
  border-radius: 8px;
  border: 3px solid #101828;
  width: 150%;
  left: -16px;
  bottom: -195px;
  display: none;
}

.item__input__search__mobile{
  display: none;
  width: 100%;
}


.item__input__search__type{
  width: 24%;
  cursor: pointer;
  /*border-right: 1px solid #EAECF0;*/
  position: relative;
}

.item__input__search__location{
  width: 48%;
  cursor: pointer;
  position: relative;
}

.btn__search__home{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.wrap__searcher{
  width: 75%;
}

.searcher__flex{
  outline: 3px solid #101828;
  box-shadow: rgb(16, 24, 40) 20px 20px 0px 0px;
  background: #FFFAEB;
  padding: 96px 32px;
  border-radius: 28px;
}

/* Variante compacta: sin perro, paddings y sombra reducidos */
.searcher__flex--compact{
  padding: 24px 24px;
  box-shadow: rgb(16, 24, 40) 15px 15px 0px 0px;
  border-radius: 16px;
}

.searcher__flex--compact .wrap__searcher{
  width: 100%;
}
.home__b1--compact{
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Mobile: la sombra de 15px se sale del viewport y se ve cortada.
   Se reduce padding/sombra y se le da más aire al trigger para que el
   botón verde de la lupa no se choque con el subtitle. */
@media (max-width: 767px) {
  .searcher__flex--compact{
    padding: 16px;
    border-radius: 14px;
  }
  .home__b1--compact{
    padding-top: 16px;
    padding-bottom: 16px;
  }
  /* Más padding-right en el trigger del searcher compact para que el
     subtitle no quede tapado por el botón verde de la lupa. */
  .searcher__flex--compact .item__input__search__mobile{
    padding-right: 72px;
  }
}

.input__searcher{
  border: 0px solid transparent;
  width: 100%;
}

input.input__searcher:focus,
input.input__searcher:focus-visible {
    outline: none;
    box-shadow: none;
}

.wrap__card__pub{
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.item__card__pub{
  flex: 1 1 calc(25% - 32px); /* 25% width minus the gap */
  max-width: calc(25% - 32px);
  text-decoration: none;
  position: relative;
}

.wrap__image__card__pub{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  overflow: hidden;
  max-height: 260px;
  width: 100%;
  position: relative;
}

.wrap__image__card__pub img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no__gallery__card{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.badge__card__pub{
  position: absolute;
  right: 8px;
  top: 8px;
  background-color: #7362FC;
  border-radius: 100px;
  padding: 4px 8px 2px 8px;
  border: 2px solid #101828;
}

/* Modificador para el badge en single-mascota: border igual al de tag__status__xl */
.badge__card__pub--xl{
  border-width: 3px;
  border-radius: 12px;
}

/* Tooltip al hacer hover sobre el badge de recompensa */
.badge__card__pub[data-tooltip]{
  cursor: help;
}
.badge__card__pub[data-tooltip]::before,
.badge__card__pub[data-tooltip]::after{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.badge__card__pub[data-tooltip]::after{
  content: '';
  position: absolute;
  top: 100%;
  right: 14px;
  margin-top: 2px;
  border: 6px solid transparent;
  border-bottom-color: #101828;
  z-index: 11;
}
.badge__card__pub[data-tooltip]::before{
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #101828;
  color: #ffffff;
  font-family: "Hind", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  padding: 8px 10px;
  border-radius: 8px;
  width: 180px;
  text-align: left;
  white-space: normal;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .18);
}
.badge__card__pub[data-tooltip]:hover::before,
.badge__card__pub[data-tooltip]:hover::after,
.badge__card__pub[data-tooltip]:focus-visible::before,
.badge__card__pub[data-tooltip]:focus-visible::after{
  opacity: 1;
  visibility: visible;
}

.badge__card{
  background-color: #FFFC02;
  border-radius: 100px;
  padding: 4px 8px;
  border: 2px solid #101828;
}

#gallery{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.gallery__card{
  max-width: 100%;
}

.gallery__card .slick-dots{
  bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
}

.gallery__card .slick-dots li button:before{
  color: white !important;
  font-size: 10px;
}

.gallery__card .slick-dots li{
  margin: 0;
}

.slick-dots li.slick-active button:before{
  color: white !important;
  opacity: 1 !important;
}

.gallery__card .slick-next{
  right: 4px;
}

.gallery__card .slick-prev{
  left: 4px;
}

.wrap__arrows__card__slider{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  display: flex;
  z-index: 1;
  padding: 8px;
  opacity: 0;
  transition: all .3s;
}

.wrap__arrows__filter__slider{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  display: flex;
  z-index: 1;
  padding: 8px;
  transition: all .3s;
}


.item__card__pub:hover .wrap__arrows__card__slider{
  opacity: 1;
}

.left__wrap, .right__wrap, .left__wrap__filters, .right__wrap__filters{
  border-radius: 100px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  box-shadow: 0px 1px 2px 0px #10182805;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
  border: 1px solid #D0D5DD;
}

.left__wrap, .left__wrap__filters{
  left:5px;
}

.right__wrap, .right__wrap__filters{
  right: 5px;
}



.false__tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0px 1px 2px 0px #10182805;
  border: 0px solid #101828;
  border-radius: 8px;
  background-color: #101828;
}

.item__false__tab {
    padding: 12px 16px 10px 16px;
    cursor: pointer;
    position: relative;
    text-align: center;
    border: 3px solid #101828;
    text-decoration: none;
}

.false-tab-active {
  background: white;
  text-decoration: none;
  border-radius: 8px;
}


.false-tab-active .label__false__tab {
  color: #101828 !important;
}

.wrap__false__tabs{
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  width: auto;
  white-space: nowrap;
}

.wrap__filter__tags {
  position: relative;
  width: fit-content;
  overflow: hidden;
}

.slider__filters {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* Importante para slick slider */
}



.item__filter_tag {
    display: none;
}

.item__filter_tag + label {
    display: inline-block;
    padding: 12px 16px;
    background: white;
    cursor: pointer;
    border-radius: 8px;
    border: 0px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Mantiene los elementos sin hacer salto de línea */
}

.item__filter_tag + label:hover {
    background-color: #f0f0f0;
}

.item__filter_tag:checked + label {
    background-color: #101828;
    color: white !important;
    border-color: #101828;
}

.slick-slide {
    outline: none; /* Elimina bordes en la navegación por teclado */
}


.mixitup-control-active{
  background: black;
}

.slider__filters__tags{
  position: relative;
  border-left: 1px solid #EDF0F3;
  border-right: 1px solid #EDF0F3;
  overflow: hidden;
}

.footer__new__top{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.column__footer__new{
  width: 31%;
}

.flex__top__footer{
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex-direction: row;
}

.wrap__footer__new{
  display: flex;
  flex-direction: column;
  gap: 64px;
  overflow: hidden;
  outline: 3px solid #101828;
  box-shadow: rgb(16, 24, 40) 20px 20px 0px 0px;
  background: #FFFAEB;
  padding: 64px 32px 0px 32px;
  border-radius: 28px;
}

.wrap__menu__footer{
  display: flex;
  flex-direction: column;
  gap: 12px;
    padding-inline-start: 0px;
    margin: 0;
}

.menu__column__new__footer{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.item__menu__footer{
  list-style: none;
  text-decoration: none;
  padding-inline-start: 0px;
}

.item__menu__footer a{
  text-decoration: none;
}

.wrap__image__searcher{
  width: 25%;
  text-align: right;
}

.wrap__image__searcher img{
  width: 90%;
}

.searcher__flex{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.wrap__footer__app{
  border: 3px solid #101828;
  background-color: #7362FC;
  box-shadow: 15px 15px 0px 0px #291E81;
  border-radius: 24px;
  display: flex;
  flex-direction: row;
}

.sub__menu__footer{
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sub__menu__footer a{
  text-decoration: none;
}

.column__footer{
  width: 25%;
}

.buttons__footer{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.bottom__footer__app{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.wrap__acount__page{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.posts__list__vertical{
  width: 57%;
}

.account__information{
  width: 40%;
  border: 3px solid #101828;
  background-color: #FFFAEB;
  box-shadow: rgb(16, 24, 40) 0px 0px 0px 0px;
  transition: all .3s;
  border-radius: 20px;
  box-shadow: 16px 16px 0px 0px #101828;
}



.wrap__image__card__vertical{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  max-height: 180px;
  width: 25%;
  position: relative;
}

.wrap__image__card__vertical img{
  max-width: 100%;
}

.wrap__bottom__vertical__card{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
}

.wrap__bottom__content__card{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wrap__content__vertical__card{
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrap__post__vertical{
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.list__section__info .item__section__info:last-child{
  border-bottom:  0px solid transparent;
}

.item__post__vertical{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}

.item__section__info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-start;
  border-bottom: 1px solid #EDF0F3;
}

.bottom__section__info{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-transform: capitalize;
}

.tag__status{
  padding: 4px 8px 2px 8px;
  border-radius: 8px;
  border: 2px solid #101828;
  width: fit-content;
  text-decoration: none;
}

.tag__status__xl{
  padding: 4px 8px 2px 8px;
  border-radius: 12px;
  border: 3px solid #101828;
}


.status__perdida{
  background-color: #F04438;
}

.status__sabueso{
  background-color: #7362FC;
}

.status__celeste{
  background-color: #39EAFD;
}

.title__two-lines {
  min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limitar a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Añadir puntos suspensivos */
    white-space: normal;
}


.status__encontrada{
  background-color: #FFFC02;
}

.wrap__tag__and__date{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  position: absolute;
  left: 8px;
  top: 8px;
}

.wrap__details__pub{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.wrap__location__card__pub{
  width: 50%;
}

.wrap__title__mascota__post{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.wrap__title__item{
  width: 100%;
}

.wrap__galeria{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  overflow: hidden;
  position: relative;
}

.wrap__galeria__left{
  width: 57%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 488px;
  cursor: pointer;
  border-radius: 20px;
}

.wrap__galeria__right{
  width: 41%;
}

#tour-gallery{
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0;
}

#tour-gallery .video{
  width: 48%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 16px;
  display: none;
}

#tour-gallery .video:nth-child(2), #tour-gallery .video:nth-child(3), #tour-gallery .video:nth-child(4), #tour-gallery .video:nth-child(5) {
  display: block;
}

#tour-gallery .video:nth-child(4), #tour-gallery .video:nth-child(5) {
  margin-bottom: 0px;
}

#tour-gallery .video img{
  width: 100%;
}


.item__imagen__galeria{
  width: 100%;
  height: 236px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  position: relative;
}

/* ── Variantes de galería según cantidad de fotos ───────────────────────── */

/* 1 foto: la principal ocupa todo, derecha se oculta */
.wrap__galeria--n-1 .wrap__galeria__left  { width: 100%; }
.wrap__galeria--n-1 .wrap__galeria__right { display: none; }

/* 2 fotos: principal + una foto alta a la derecha */
.wrap__galeria--n-2 #tour-gallery .video:nth-child(2) {
  display: block;
  width: 100%;
  height: 488px;
  margin-bottom: 0;
}
.wrap__galeria--n-2 #tour-gallery .video:nth-child(2) .item__imagen__galeria {
  height: 100%;
}

/* 3 fotos: principal + dos fotos apiladas a la derecha */
.wrap__galeria--n-3 #tour-gallery .video:nth-child(2),
.wrap__galeria--n-3 #tour-gallery .video:nth-child(3) {
  display: block;
  width: 100%;
}
.wrap__galeria--n-3 #tour-gallery .video:nth-child(2) {
  height: 236px;
  margin-bottom: 16px;
}
.wrap__galeria--n-3 #tour-gallery .video:nth-child(3) {
  height: 236px;
  margin-bottom: 0;
}
.wrap__galeria--n-3 #tour-gallery .video:nth-child(2) .item__imagen__galeria,
.wrap__galeria--n-3 #tour-gallery .video:nth-child(3) .item__imagen__galeria {
  height: 100%;
}

/* 4 fotos: principal + tres fotos apiladas a la derecha */
.wrap__galeria--n-4 #tour-gallery .video:nth-child(2),
.wrap__galeria--n-4 #tour-gallery .video:nth-child(3),
.wrap__galeria--n-4 #tour-gallery .video:nth-child(4) {
  display: block;
  width: 100%;
  height: 152px;
  margin-bottom: 16px;
}
.wrap__galeria--n-4 #tour-gallery .video:nth-child(4) {
  margin-bottom: 0;
}
.wrap__galeria--n-4 #tour-gallery .video:nth-child(2) .item__imagen__galeria,
.wrap__galeria--n-4 #tour-gallery .video:nth-child(3) .item__imagen__galeria,
.wrap__galeria--n-4 #tour-gallery .video:nth-child(4) .item__imagen__galeria {
  height: 100%;
}

/* 5+ fotos: layout original 2x2 (las reglas base ya muestran items 2-5).
   La 5ta tile recibe el overlay "+N" cuando hay más fotos ocultas detrás. */
.galeria__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 40, 0.55);
  color: #ffffff;
  font-weight: 700;
  font-size: 28px;
  border-radius: 20px;
  pointer-events: none;
}

.wrap__details__mascota{
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.item__detail__mascota{
  flex: 1 1 calc(50% - 16px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.image__item__detail__mascota{
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap__mascota__left__bottom{
  width: 65%;
}

.wrap__mascota__right__bottom{
  width: 31%;
  border: 3px solid #101828;
  background-color: #FFFAEB;
  border-radius: 20px;
  padding: 32px 24px;
  position: sticky;
  top: 24px;
  box-shadow: 16px 16px 0px 0px #101828;
}

.mascota__post__bottom{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.item__botones__mascota{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

/* Botón de contacto externo (ej. "Contactar en Mascotas por Venezuela"):
   fila propia y texto largo permitido. El id gana en especificidad a la
   regla mobile que trata a .btn__primary__md como icono de WhatsApp. */
.item__botones__mascota > #btn-contacto-externo{
  order: 0;
  flex: 1 1 100%;
  width: auto;
  min-width: 0;
}
.item__botones__mascota > #btn-contacto-externo .label__button{
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

/* Modal oculto por defecto */
.home__filters {
  display: none; /* Oculto por defecto */
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;

  align-items: center;
  justify-content: center;
  background-color: #00000080;
  z-index: 99;
}

.wrap__modal__filtros {
  width: 49%;
  background-color: white;
  border-radius: 20px;
  border: 3px solid #101828;
  margin: auto;
  padding: 32px 24px;
  box-shadow: 15px 15px 0px 0px #101828;
}

.top_bar__modal,
.bottom__bar__modal {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item__filter__content__two__columns{
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.chip-list {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 4px 4px;
}

.chip {
  display: inline-flex;
  width: 100%;
  align-items: center;
  padding: 8px 15px;
  background-color: #fff; /* Fondo gris por defecto */
  border: 1px solid #D0D5DD;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  user-select: none;
  box-shadow: 0px 1px 2px 0px #10182805;
  max-width: 32%;
}

.chip input[type="checkbox"], .chip input[type="radio"] {
  display: none;
}

.chip img{
  max-width: 48px;
}

.chip i {
  margin-right: 10px;
  transition: color 0.3s ease;
}

.chip span {
  transition: color 0.3s ease;
}

/* Esto aplica el fondo azul al contenedor completo */
.chip input[type="checkbox"]:checked ~ i + span, .chip input[type="radio"]:checked ~ i + span {
  color: #101828;
}

/* Asegura que tanto el icono como el texto cambien a blanco */
.chip input[type="checkbox"]:checked + i, .chip input[type="radio"]:checked + i {
  color: #101828;
}

.chip input[type="checkbox"]:checked + span, .chip input[type="radio"]:checked + span {
  color: #101828;
}

/* Aplica el fondo azul a todo el "chip" */
.chip:has(input[type="checkbox"]:checked), .chip:has(input[type="radio"]:checked) {
  background-color: #fff;
  outline: 3px solid #101828;
}

.chip:has(input:checked) {
  background-color: #fff;
  outline: 3px solid #101828;
}

.chip:has(input:checked) span {
  color: #101828;
}


.wrap__item__filter{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.content__modal{
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-top: 1px solid #EDF0F3;
  border-bottom: 1px solid #EDF0F3;
  overflow-y: auto;
  max-height: 55vh;
}

.item__img__banner img{
  width: 100%;
}

.filters__horizontal{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.wrap__steps__web .item__step__web:nth-of-type(-n+2){
  margin-bottom: 120px;
}

.fixed__btn{
  display: none;
}

.item__botones__mascota__secondary{
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.item__botones__mascota{
  gap: 8px;
}

/* === Detalle: dos filas (desktop y mobile) ===
   Fila 1: "Tengo información" solo, ancho completo.
   Fila 2: flyer, compartir y WhatsApp (iconos) repartidos a todo el ancho. */
.item__botones__mascota > #btn-contactar-dueno{
  order: 1;
  flex: 1 1 100%;
  min-width: 0;
}
/* El contenedor de flyer/compartir desaparece como caja para que sus
   botones sean items directos de la fila (3 iconos iguales). */
.item__botones__mascota__secondary{
  display: contents;
}
.item__botones__mascota #btn-flyer{ order: 2; }
.item__botones__mascota #btn-share{ order: 3; }
.item__botones__mascota > .btn__primary__md{ /* WhatsApp: solo icono */
  order: 4;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
}
.item__botones__mascota > .btn__primary__md .wa-label-full,
.item__botones__mascota > .btn__primary__md .wa-label-short{
  display: none;
}
.item__botones__mascota > a .label__button{
  gap: 4px;
  justify-content: center;
}

/* Label corto de WhatsApp: ya no se usa (WhatsApp es icono en todas las pantallas) */
.wa-label-short{ display: none; }

.mascota__post__top{
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Flyer y compartir: crecen para repartir la fila con WhatsApp (iconos) */
.item__botones__mascota__secondary .btn__secondary__md{
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
}

.autocomplete-results {
    display: none; /* Oculto por defecto */
    border: 1px solid #ddd;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;
    position: absolute;
    z-index: 99;
    top: 95%;
    border: 3px solid #101828;
    width: 49%;
    border-radius: 8px;
    right: -3px;}

.autocomplete-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.autocomplete-results li {
    padding: 8px 12px;
    cursor: pointer;
}

.autocomplete-results li:hover,
.autocomplete-results li.is-active {
    background-color: #f0f0f0;
}

.autocomplete-results .autocomplete-state {
    padding: 8px 12px;
    color: #6b7280;
    font-style: italic;
}

.image-container{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.image-container .image-wrapper{
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1; /* Puedes mantener esto si quieres proporción cuadrada */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-wrapper{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
  overflow: hidden;
}

.image-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-button{
  background: transparent;
  border: 0px solid transparent;
  cursor: pointer;
  border-radius: 4px;
}

.delete-button:hover{
  background: #f9fafb;
}

.image-container{
  padding: 12px 16px;
  background-color: white;
  border-radius: 8px;
  border: 1px solid #edf0f3;
}

button.text-link{
  background: transparent;
  border: 0px solid transparent;
}

.toggle-switch input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}

.toggle-switch label {
  cursor: pointer;
  text-indent: -9999px;
  width: 40px;
  height: 26px;
  background: #ccc;
  display: block;
  border-radius: 26px;
  position: relative;
  transition: background 0.3s;
}

.toggle-switch label:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + label {
  background: #4cd964; /* verde tipo iOS */
}

.toggle-switch input:checked + label:after {
  left: calc(100% - 3px);
  transform: translateX(-100%);
}

.toggle-switch label:active:after {
  width: 24px;
}

.recompensa__toggle{
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  background-color: #f9fafb;
  border-radius: 8px;
}

.image__item__detail__mascota img{
  max-width: 100%;
  position: relative;
}

.image__item__detail__mascota::after {
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  top: 70%;
  left: 50%;
  z-index: -1;
  background: rgba(16, 24, 40, 0.2);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  filter: blur(8px); /* aquí defines la cantidad de desenfoque */
}


.image__item__detail__mascota{
  max-width: 70px;
  width: 100%;
  position: relative;
}

#custom-map{
  border: 3px solid #101828;
  border-radius: 20px;
}

.acf-map{
  height: 350px;
}
.notification__wrap{
  padding: 12px 16px;
  border-radius: 12px;
  border: 3px solid;
  display: flex;
  flex-direction: row;
  gap: 16px;
  position: fixed;
  z-index: 99;
  left: 32px;
  bottom: 32px;
  align-items: center;
  transition: opacity 0.5s ease, bottom 0.5s ease;
}

.not__green{
  background-color: #cdffde;
  border: 3px solid #1a4c2b;
}

.not__red{
  background-color: #fee4e2;
  border: 3px solid #7a271a;
}

.modal__fullwidth{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background-color: #FFFC02;
  color: #101828;
  border: 3px solid #101828;
  box-shadow: 4px 4px 0px 0px #101828;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.btn__account__avatar{
  gap: 8px;
  background: transparent;
  display: flex;
  width: fit-content;
  text-decoration: none;
  transition: all .3s;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Más área táctil en mobile para el perfil y el botón de reportar */
@media (max-width: 767px){
  .btn__account__avatar{ padding: 12px; }
  .btn__primary__md{ padding: 12px; }
}

.label__account__btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  text-transform: capitalize;
}

.menu__acount{
  margin: 0;
  padding: 16px 0;
  display: flex;
  gap: 8px;
  flex-direction: column;
  list-style: none;
  text-decoration: none;
}

.menu__acount a{
  text-decoration: none;
}

.popover-account{
  background-color: white;
  width: max-content;
  border-radius: 12px;
  border: 3px solid #101828;
  margin: auto;
  padding: 0;
  box-shadow: 8px 8px 0px 0px #101828;
  position: absolute;
  top: 120%;
  right: 0;
  display: none;
}

.wrap__account__contet{
  position: relative;
}

.separator{
  width: 100%;
  height: 1px;
  background-color: #EDF0F3;
}

.wrap__close__modal i{
  cursor: pointer;
}

.wrap__details__vertical p{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* máximo de 3 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

/* Evita colapso de altura y mejora el render */
.gallery__card { min-height: 1px; visibility: visible; }
.gallery__card img { display:block; width:100%; height:auto; }

/* Opcional: oculta flechas cuando Slick aún no calculó */
.wrap__arrows__card__slider .left__wrap,
.wrap__arrows__card__slider .right__wrap { cursor: pointer; }

/* Si usas enlaces <a> contenedor, evita selección accidental al arrastrar */
.wrap__image__card__pub { -webkit-user-select: none; user-select: none; }

.wrap__title__and__sticker{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.wrap__title__and__sticker img{
  max-width: 88px;
}

.title__and__button{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.wrap__spaces__promo{
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}

.item__promo{
  width: 48%;
  border-radius: 32px;
  background: #7362FC;
  display: flex;
  flex-direction: row;
  padding: 32px;
  box-shadow: 15px 15px 0px 0px #101828;
  border: 3px solid #101828;
  justify-content: space-between;
}

/* --- Cuadro promo de stickers --- */
.item__promo--stickers{
  background: #FFFAEB;
  align-items: center;
  gap: 28px;
}
.item__promo--stickers .promo__sticker{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item__promo--stickers .promo__sticker img{
  height: 150px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Carrusel animado de stickers */
.item__promo--stickers .promo__sticker--anim{
  position: relative;
}
.item__promo--stickers .promo__sticker--anim img{
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: adStickerCycle 9.1s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(16,24,40,.18));
}
.item__promo--stickers .promo__sticker--anim img:nth-child(1){ animation-delay: 0s; }
.item__promo--stickers .promo__sticker--anim img:nth-child(2){ animation-delay: 1.3s; }
.item__promo--stickers .promo__sticker--anim img:nth-child(3){ animation-delay: 2.6s; }
.item__promo--stickers .promo__sticker--anim img:nth-child(4){ animation-delay: 3.9s; }
.item__promo--stickers .promo__sticker--anim img:nth-child(5){ animation-delay: 5.2s; }
.item__promo--stickers .promo__sticker--anim img:nth-child(6){ animation-delay: 6.5s; }
.item__promo--stickers .promo__sticker--anim img:nth-child(7){ animation-delay: 7.8s; }

@keyframes adStickerCycle{
  0%   { opacity: 0; transform: scale(.6) rotate(-8deg); }
  3%   { opacity: 1; transform: scale(1.08) rotate(3deg); }
  6%   { transform: scale(1) rotate(0deg); }
  12%  { opacity: 1; transform: scale(1) rotate(0deg); }
  15%  { opacity: 0; transform: scale(.7) rotate(8deg); }
  100% { opacity: 0; transform: scale(.6) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce){
  .item__promo--stickers .promo__sticker--anim img{ animation: none; }
  .item__promo--stickers .promo__sticker--anim img:nth-child(1){ opacity: 1; }
}
.item__promo--stickers .promo__content{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.item__promo--stickers .promo__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: #101828;
  margin: 0;
}
.item__promo--stickers .promo__subtitle{
  font-family: 'Hind', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #101828;
  margin: 0;
  max-width: 340px;
}
.item__promo--stickers .promo__content .btn__primary__md{
  margin-top: 8px;
}
@media (max-width: 480px){
  .item__promo--stickers{ flex-direction: column; text-align: center; }
  .item__promo--stickers .promo__content{ align-items: center; }
}

/* Chips de Sexo en el reporte: igualar borde y radius a las cards Perro/Gato */
#sexo-chips .chip{
  border: 3px solid #f9fafb;
  border-radius: 8px;
}
#sexo-chips .chip:hover{
  border-color: #101828;
}
#sexo-chips .chip img{
  max-width: 28px;
}
/* Seleccionado: solo cambia el color del borde (sin outline extra que se ve como trazo grande) */
#sexo-chips .chip:has(input:checked){
  outline: none;
  border-color: #101828;
}

/* ===== Dropdown de raza: combobox con buscador EN la caja + scroll (Tom Select) ===== */
.raza-select-wrap .ts-wrapper{ --ts-pr-caret: 30px; } /* espacio para el chevron */
.ts-wrapper.single .ts-control,
.raza-select-wrap .ts-control{
  position: relative;
  box-sizing: border-box;
  height: 75px;            /* altura fija: misma en focus/active y enable (sin saltos) */
  align-items: center;     /* texto centrado verticalmente como los demás inputs */
  border: 3px solid #f9fafb;
  background: #f9fafb;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px #10182805;
  padding: 32px 12px 8px 12px;
}
/* Chevron del combobox (mismo ícono feather que el resto de selects) */
.raza-select-wrap .ts-control::after{
  content: "\e940";
  font-family: 'feather' !important;
  position: absolute;
  right: 14px;
  top: 68%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: #101828;
  pointer-events: none;
  transition: transform .15s ease;
}
.raza-select-wrap .ts-wrapper.dropdown-active .ts-control::after{
  transform: translateY(-50%) rotate(180deg);
}
/* Estado "cargando" (mientras llega el AJAX): misma caja, sin verse apagada */
.raza-select-wrap .ts-wrapper.disabled,
.raza-select-wrap .ts-wrapper.disabled .ts-control{
  opacity: 1;
  cursor: default;
}
.raza-select-wrap .ts-control,
.raza-select-wrap .ts-control input,
.raza-select-wrap .ts-control .item{
  font-family: 'Hind', sans-serif;
  font-size: 18px;
  color: #101828;
}
.raza-select-wrap .ts-control input::placeholder{ color: #667085; opacity: 1; }
/* Activo / desplegado: borde negro tipo input activo */
.raza-select-wrap .ts-wrapper.focus .ts-control,
.raza-select-wrap .ts-wrapper.dropdown-active .ts-control{
  border-color: #101828;
  box-shadow: none;
}
.raza-select-wrap .ts-wrapper.dropdown-active .ts-control{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* Desplegable (lista) conectado a la caja */
.raza-select-wrap .ts-dropdown{
  margin: 0;
  border: 3px solid #101828;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #f9fafb;
  box-shadow: 0 8px 24px rgba(16,24,40,.12);
  font-family: 'Hind', sans-serif;
}
.raza-select-wrap .ts-dropdown .ts-dropdown-content{
  max-height: 240px;
  overflow-y: auto;
}
.raza-select-wrap .ts-dropdown .option{
  font-size: 16px;
  color: #101828;
  padding: 10px 12px;
}
.raza-select-wrap .ts-dropdown .option.active{
  background-color: #503BFB;
  color: #fff;
}
.raza-select-wrap .ts-dropdown .option.selected{
  background-color: #E7E4FD;
  color: #101828;
}
.raza-select-wrap .ts-dropdown .no-results{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  color: #667085;
  font-size: 16px;
}
.raza-select-wrap .ts-dropdown .ts-otra-btn{
  font-family: 'Hind', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #503BFB;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.raza-select-wrap .ts-dropdown .ts-otra-btn:hover{
  text-decoration: underline;
}

/* Indicador de conversión de HEIC */
.upload-busy{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Hind', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #101828;
  background: #ffffff;
  border: 2px solid #101828;
  border-radius: 999px;
  padding: 6px 16px;
}
.upload-busy::before{
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid #101828;
  border-top-color: transparent;
  border-radius: 50%;
  animation: uploadSpin 0.7s linear infinite;
}
@keyframes uploadSpin{ to { transform: rotate(360deg); } }

/* --- Cuadro de reportar --- */
.item__promo--reportar{
  background: #7362FC;
  align-items: center;
  gap: 24px;
}
.item__promo--reportar .promo__art{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item__promo--reportar .promo__art img{
  height: 150px;
  width: auto;
  display: block;
}
.item__promo--reportar .promo__content{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.item__promo--reportar .promo__title{
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: #101828;
  margin: 0;
}
.item__promo--reportar .promo__subtitle{
  font-family: 'Hind', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #101828;
  margin: 0;
  max-width: 340px;
}
.item__promo--reportar .promo__content .btn__primary__md{
  margin-top: 8px;
}
@media (max-width: 480px){
  .item__promo--reportar{ flex-direction: column; text-align: center; }
  .item__promo--reportar .promo__content{ align-items: center; }
}

.home__b4{
  background-color: #E7E4FD;
}

.wrap__whatsapp__section{
  max-width: 1008px;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}


.wrap__image__whatsapp{
  width: 27%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.wrap__content__whatsapp{
  width: 64%;
  max-width: 646px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.whatsapp__profiles img{
  max-width: 88px;
}

.whatsapp__profiles{
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

.logo__footer__new{
  font-size: 196px;
  line-height: 196px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.wrap__copyright{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#form-contactar{
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wrap__modal__share{
  width: fit-content;
}

.footer__new__bottom{
  position: relative;
}


/* Mobile */

@media screen and (max-width:1280px){
    .wrap__content__banner{
    width: 70%;
  }
}

@media screen and (max-width: 1080px){
  .wrap__searcher{
    width: 100%;
  }

  .wrap__modal__filtros{
    width: 60%;
  }

  .wrap__image__searcher{
    margin: auto;
    text-align: center;
  }

  .searcher__flex{
    flex-direction: column-reverse;
    gap: 32px;
  }
}

@media screen and (max-width:1024px){
  .wrap__images__features{
    width: 30%;
    height: 40vh;
  }

  .wrap__register #nueva-mascota{
    width: 100%;
  }

  .left__image{
    display: none;
  }

  .right__form, .right__form__short{
    width: 100%;
  }

  .wrap__content__banner{
    width: 100%;
  }

  .wrap__banner__main{
    flex-direction: column-reverse;
    height: auto;
    align-items: center;
  }

  .wrap__content__features{
    width: 60%;
  }

  .wrap__img__banner{
    width: 40%;
    padding-top: 0px;
    margin-bottom: 64px;
  }

  .sticker-3, .sticker-2, .sticker-1{
    animation: none;
    width: 100px;
  }

  .item__step__web{
    width: 55%;
    margin-bottom: 32px;
  }

  .wrap__steps__web{
    justify-content: center;
  }

  .wrap__screens__cta{
    width: 890px;
    min-width: 70%;
  }
  .wrap__steps__web .item__step__web:nth-of-type(-n+2){
    margin-bottom: 32px;
  }
}

@media screen and (max-width:990px){
  .column__footer__new .H6 {
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 24px;
  }

  .sticker-5__footer{
    left: 89%;
  }

  .sticker-4__footer{
    left: 67%;
  }

  .sticker-3__footer{
    left: 45%;
  }

  .wrap__whatsapp__section{
    flex-direction: column-reverse;
  }

  .wrap__galeria__left, .wrap__galeria__right, .wrap__mascota__left__bottom, .wrap__mascota__right__bottom, .wrap__content__whatsapp, .wrap__image__whatsapp{
    width: 100%;
  }

  .wrap__content__whatsapp{
    max-width: 100%;
    align-items: center;
  }

  .home__b4 .wrap__animate__title{
    margin: auto;
  }

  .wrap__content__whatsapp{
    text-align: center;
  }

  /* Headline del WhatsApp banner: que se ajuste y no desborde en mobile */
  .home__b4 .wrap__animate__title .H3 {
    font-size: 32px;
    line-height: 36px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .home__b4 .whatsapp__profiles {
    justify-content: center;
  }

  .column__footer__new .wrap__social__icons{
    justify-content: flex-start;
  }

  .mascota__post__bottom{
    gap: 32px;
  }

  .mascota__post__top{
    flex-direction: column-reverse;
    display: flex;
    gap: 24px;
  }

  .wrap__input__searcher, .item__filter__content__two__columns, .wrap__galeria , .mascota__post__bottom{
    flex-direction: column;
  }

  .item__card__pub {
    flex: 1 1 calc(33.33% - 24px); /* 25% width minus the gap */
    max-width: calc(33.33% - 24px);
  }

  .wrap__card__pub, .wrap__galeria{
    gap: 24px;
  }

  #tour-gallery .video{
    width: 24%;
    margin-bottom: 0px;
  }

  .item__imagen__galeria{
    height: 180px;
  }

  .item__input__search__mobile{
    display: block;
  }

  .item__input__search__report, .item__input__search__type, .item__input__search__location{
    display: none;
  }

  .search__report__options{
    width: 100%;
  }

  .filters__horizontal{
    gap: 16px;
  }

  .wrap__images__features{
    display: none;
  }

  .wrap__social__media{
    flex-direction: column;
  }

  .separator__footer {
    width: 100%;
    height: 3px;
  }

  .item__social__media, .wrap__searcher{
    width: 100%;
  }

  .wrap__image__searcher{
    margin: auto;
    text-align: center;
  }

  .content__features{
    height: auto;
    margin: 120px 0;
  }

  .wrap__image__screens__cta{
    text-align: center;
  }

  .wrap__image__screens__cta img{
    width: 80%;
  }

  .wrap__content__features{
    width: 80%;
  }

  .item__step__web{
    width: 75%;
  }

  .wrap__images__features__1, .wrap__images__features__2, .wrap__images__features__3{
    display: flex;
    width: 100%;
  }
}

@media screen and (max-width:768px){

  /* Fonts */

  .H1{
    font-size: 64px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 80px;
  }
  .H2{
    font-size: 56px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 72px;
  }
  .H3{
    font-size: 48px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 52px;
  }
  .H4{
    font-size: 36px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 40px;
  }
  .H5{
    font-size: 28px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 32px;
  }
  .H6{
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 24px;
  }
  .Subtitleregular{
    font-size: 18px;
    font-family: "Hind", sans-serif;
    font-weight: 400;
    line-height: 24px;
  }
  .Subtitlemedium{
    font-size: 18px;
    font-family: "Hind", sans-serif;
    font-weight: 500;
    line-height: 24px;
  }
  .Subtitlebold{
    font-size: 18px;
    font-family: "Hind", sans-serif;
    font-weight: 700;
    line-height: 24px;
  }
  .Bodyregular{
    font-size: 16px;
    font-family: "Hind", sans-serif;
    font-weight: 400;
    line-height: 20px;
  }
  .Bodymedium{
    font-size: 16px;
    font-family: "Hind", sans-serif;
    font-weight: 500;
    line-height: 20px;
  }
  .Bodybold{
    font-size: 16px;
    font-family: "Hind", sans-serif;
    font-weight: 700;
    line-height: 20px;
  }
  .Smallregular{
    font-size: 14px;
    font-family: "Hind", sans-serif;
    font-weight: 400;
    line-height: 18px;
  }
  .Smallmedium{
    font-size: 14px;
    font-family: "Hind", sans-serif;
    font-weight: 500;
    line-height: 18px;
  }
  .Smallbold{
    font-size: 14px;
    font-family: "Hind", sans-serif;
    font-weight: 700;
    line-height: 18px;
  }
  .Captionregular{
    font-size: 12px;
    font-family: "Hind", sans-serif;
    font-weight: 400;
    line-height: 16px;
  }
  .Captionmedium{
    font-size: 12px;
    font-family: "Hind", sans-serif;
    font-weight: 500;
    line-height: 16px;
  }
  .Captionbold{
    font-size: 12px;
    font-family: "Hind", sans-serif;
    font-weight: 700;
    line-height: 16px;
  }

  /* Margin classes based on an 8-point grid */

  /* Bottom margin */
  .mt-0 { margin-top: 0; }
  .mt-xs{ margin-top: 4px; }
  .mt-sm { margin-top: 8px; }
  .mt-md{ margin-top: 16px; }
  .mt-lg { margin-top: 24px; }
  .mt-xl { margin-top: 32px; }
  .mt-2xl { margin-top: 40px; }
  .mt-3xl { margin-top: 48px; }
  .mt-4xl { margin-top: 56px; }
  .mt-5xl { margin-top: 64px; }
  .mt-6xl { margin-top: 72px; }
  .mt-7xl { margin-top: 80px; }
  .mt-8xl { margin-top: 88px; }

  /* Bottom margin */
  .mb-0 { margin-bottom: 0; }
  .mb-xs{ margin-bottom: 4px; }
  .mb-sm { margin-bottom: 8px; }
  .mb-md{ margin-bottom: 16px; }
  .mb-lg { margin-bottom: 24px; }
  .mb-xl { margin-bottom: 32px; }
  .mb-2xl { margin-bottom: 40px; }
  .mb-3xl { margin-bottom: 48px; }
  .mb-4xl { margin-bottom: 56px; }
  .mb-5xl { margin-bottom: 64px; }
  .mb-6xl { margin-bottom: 72px; }
  .mb-7xl { margin-bottom: 80px; }
  .mb-8xl { margin-bottom: 88px; }

  /* Left margin */
  .ml-0 { margin-left: 0; }
  .ml-xs{ margin-left: 4px; }
  .ml-sm { margin-left: 8px; }
  .ml-md{ margin-left: 16px; }
  .ml-lg { margin-left: 24px; }
  .ml-xl { margin-left: 32px; }
  .ml-2xl { margin-left: 40px; }
  .ml-3xl { margin-left: 48px; }
  .ml-4xl { margin-left: 56px; }
  .ml-5xl { margin-left: 64px; }
  .ml-6xl { margin-left: 72px; }
  .ml-7xl { margin-left: 80px; }
  .ml-8xl { margin-left: 88px; }

  /* Right margin */
  .mr-0 { margin-right: 0; }
  .mr-xs{ margin-right: 4px; }
  .mr-sm { margin-right: 8px; }
  .mr-md{ margin-right: 16px; }
  .mr-lg { margin-right: 24px; }
  .mr-xl { margin-right: 32px; }
  .mr-2xl { margin-right: 40px; }
  .mr-3xl { margin-right: 48px; }
  .mr-4xl { margin-right: 56px; }
  .mr-5xl { margin-right: 64px; }
  .mr-6xl { margin-right: 72px; }
  .mr-7xl { margin-right: 80px; }
  .mr-8xl { margin-right: 88px; }

  /* Padding classes based on an 8-point grid */

  /* Top padding */
  .pt-0 { padding-top: 0; }
  .pt-xs{ padding-top: 4px; }
  .pt-sm { padding-top: 8px; }
  .pt-md{ padding-top: 16px; }
  .pt-lg { padding-top: 24px; }
  .pt-xl { padding-top: 32px; }
  .pt-2xl { padding-top: 40px; }
  .pt-3xl { padding-top: 48px; }
  .pt-4xl { padding-top: 56px; }
  .pt-5xl { padding-top: 64px; }
  .pt-6xl { padding-top: 72px; }
  .pt-7xl { padding-top: 80px; }
  .pt-8xl { padding-top: 88px; }

  /* Bottom padding */
  .pb-0 { padding-bottom: 0; }
  .pb-xs{ padding-bottom: 4px; }
  .pb-sm { padding-bottom: 8px; }
  .pb-md{ padding-bottom: 16px; }
  .pb-lg { padding-bottom: 24px; }
  .pb-xl { padding-bottom: 32px; }
  .pb-2xl { padding-bottom: 40px; }
  .pb-3xl { padding-bottom: 48px; }
  .pb-4xl { padding-bottom: 56px; }
  .pb-5xl { padding-bottom: 64px; }
  .pb-6xl { padding-bottom: 72px; }
  .pb-7xl { padding-bottom: 80px; }
  .pb-8xl { padding-bottom: 88px; }

  /* Left padding */
  .pl-0 { padding-left: 0; }
  .pl-xs{ padding-left: 4px; }
  .pl-sm { padding-left: 8px; }
  .pl-md{ padding-left: 16px; }
  .pl-lg { padding-left: 24px; }
  .pl-xl { padding-left: 32px; }
  .pl-2xl { padding-left: 40px; }
  .pl-3xl { padding-left: 48px; }
  .pl-4xl { padding-left: 56px; }
  .pl-5xl { padding-left: 64px; }
  .pl-6xl { padding-left: 72px; }
  .pl-7xl { padding-left: 80px; }
  .pl-8xl { padding-left: 88px; }

  /* Right padding */
  .pr-0 { padding-right: 0; }
  .pr-xs{ padding-right: 4px; }
  .pr-sm { padding-right: 8px; }
  .pr-md{ padding-right: 16px; }
  .pr-lg { padding-right: 24px; }
  .pr-xl { padding-right: 32px; }
  .pr-2xl { padding-right: 40px; }
  .pr-3xl { padding-right: 48px; }
  .pr-4xl { padding-right: 56px; }
  .pr-5xl { padding-right: 64px; }
  .pr-6xl { padding-right: 72px; }
  .pr-7xl { padding-right: 80px; }
  .pr-8xl { padding-right: 88px; }
  /* Styles */

  .container{
    padding: 0 16px;
  }

  .container__100{
    margin: 0;
    padding: 0 16px;
  }

  .right__form, .right__form__short{
    padding: 180px 16px 64px 16px;
  }


  .logo-header__desktop{
    display: none;
  }

  .logo-header__mobile{
    display: block;
  }

  .wrap__chat img{
    width: 100%;
  }

  .wrap__title__banner{
    align-items: center;
  }

  .wrap__buttons__banner, .wrap__social__icons{
    justify-content: center;
  }

  .paragraph__banner{
    width: 100% !important;
    text-align: center;
  }

  .wrap_item_chat:nth-child(3) img{
    width: 81%;
  }

  .wrap__content__features{
    width: 100%;
  }

  .item__step__web{
    width: 100%;
  }

  .wrap__chat{
    max-width: 85%;
  }

  .landing__b3:after, .landing__b3:before{
    height: 85%;
  }

  .sticker-2{
    left: -12%;
  }

  .wrap__img__banner{
    width: 70%;
  }

  .wrap_item_chat:nth-child(4) img{
    width: 97%;
  }

  .column__footer{
    width: 100%;
  }

  .wrap__footer__app{
    flex-direction: column;
    gap: 32px;
  }

  .btn__search__home{
    right: 8px;
  }
}

@media screen and (max-width: 767px){
  .wrap__buttons__banner, .item__post__vertical{
    flex-direction: column;
  }

  /* Sección "Síguenos en redes" del home: un botón por fila en mobile */
  .home__b4 .wrap__buttons__banner{
    flex-direction: column;
    gap: 12px;
  }
  .home__b4 .wrap__buttons__banner > a{
    width: 100%;
  }
  .home__b4 .wrap__buttons__banner > a > .label__button{
    justify-content: center;
  }

  .wrap__cta{
    gap: 4px;
  }

  .wrap__post__vertical {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea 2 columnas iguales */
    column-gap: 16px;                      /* Espacio horizontal entre los 2 divs */
    row-gap: 64px;                         /* Espacio vertical entre las filas */
}

  .popover-account{
    right: auto;
  }

  .footer__new__top{
    flex-direction: column;
    gap: 32px;
  }

  .column__footer__new{
    width: 100%;
  }

  .wrap__spaces__promo{
    flex-direction: column;
    gap: 32px;
  }

  .sticker-1__footer{
    left: 0%;
    max-width: 44px;
  }

  .sticker-5__footer{
    max-width: 44px;
  }

  .sticker-2__footer{
    display: none;
  }

  .sticker-4__footer{
    display: none;
  }

  .sticker-3__footer{
    bottom: 55%;
    max-width: 44px;
  }

  .label__account__btn{
    display: none;
  }

  .wrap__location__card__pub, .item__promo{
    width: 100%;
  }

  .item__detail__mascota{
    flex: 1 1 calc(50% - 16px);
  }

  .wrap__details__mascota{
      gap: 16px;
  }

  /* Sticker más chico en mobile + sombra proporcional */
  .image__item__detail__mascota{
    max-width: 44px;
  }
  .image__item__detail__mascota::after{
    width: 32px;
    height: 32px;
    filter: blur(5px);
  }

  .wrap__acount__page{
    flex-direction: column;
    gap: 32px;
  }

  .searcher__flex, .wrap__title__mascota__post{
    flex-direction: column-reverse;
  }

  .posts__list__vertical, .account__information, .wrap__image__card__vertical, .wrap__content__vertical__card, .wrap__searcher, .wrap__title__item{
    width: 100%;
  }

  .wrap__image__searcher{
    width: 60%;
    margin: auto;
    text-align: center;
  }

  .wrap__image__card__vertical{
    min-height: auto;
  }

  .item__post__vertical{
    justify-content: flex-start;
  }

  .wrap__bottom__vertical__card{
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .wrap__content__vertical__card, .item__post__vertical{
    gap: 16px;
  }

  .searcher__flex{
    gap: 32px;
  }

  .wrap__input__searcher{
    flex-direction: column;
  }

  .item__step__web{
    padding: 24px;
  }

  .img__step__web{
    max-width: 56px;
  }

  .bottom__footer__app{
    flex-direction: column;
    gap: 32px;
  }

  .wrap__sticker__footer {
    order: -1; /* Esto moverá el sticker al inicio dentro de su contenedor flex */
  }

  .wrap__social__icons {
      order: 1; /* Mantén el orden de los íconos después del sticker */
  }

  .wrap__copyright__footer {
      order: 2; /* Mantén el copyright al final */
  }

  .item__card__pub {
    flex: 1 1 calc(50% - 12px); /* 25% width minus the gap */
    max-width: calc(50% - 12px);
  }

  .wrap__card__pub{
    gap: 12px;
  }

  .filters__horizontal{
    flex-direction: column;
    gap: 8px;
  }

  .wrap__filter__tags{
    width: 100%;
  }

  .wrap__false__tabs, .false__tabs{
    width: 100%;
  }

  .wrap__modal__filtros{
    width: 100%;
  }

  .wrap__image__card__pub{
    max-height: 180px;
  }

  .wrap__details__pub{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .item__false__tab{
    width: 50% ;
  }

  .slider__filters__tags{
    border: 0px solid transparent;
  }

  .btn__secondary__md__filters{
    width: 100%;
    justify-content: center;
    background-color: white;
  }

  .fixed__btn{
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    z-index: 50;
    pointer-events: none; /* permite scroll a través del wrapper */
  }
  .fixed__btn .container,
  .fixed__btn .btn__secondary__md__filters{
    pointer-events: auto; /* el botón sí es clicable */
  }

  /* Contacto sticky al fondo en single-mascota (mobile).
     Se mantiene en su posición normal hasta que el usuario scrollee:
     entonces se pega al fondo del viewport con 16px de separación. */
  .wrap__mascota__right__bottom{
    position: sticky;
    top: auto;
    bottom: 16px;
    width: 100%;
    z-index: 50;
    padding: 16px;
    box-shadow: 8px 8px 0px 0px #101828;
  }

  .item__imagen__galeria{
    height: 80px;
  }

  .wrap__galeria__left{
    height: 240px;
  }

}

/* ── Single post (blog) ──────────────────────────────────────────────────────── */
.single__post__wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.single__post__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.tag__category {
  background-color: #39EAFD;
  border: 2px solid #101828;
  border-radius: 8px;
  padding: 4px 8px 2px;
  font-size: 12px;
  font-weight: 600;
  color: #101828;
  text-decoration: none;
  display: inline-block;
}
.single__post__title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: #101828;
  line-height: 1.15;
  margin-bottom: 20px;
}
.single__post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.single__post__meta span {
  display: flex;
  gap: 5px;
}
.single__post__hero {
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 0 24px;
  overflow: hidden;
}
.single__post__hero img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}
.single__post__content {
  font-size: 17px;
  line-height: 1.8;
  color: #344054;
}
.single__post__content h2 {
  font-size: 26px;
  font-weight: 800;
  color: #101828;
  margin: 48px 0 16px;
}
.single__post__content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
  margin: 36px 0 12px;
}
.single__post__content p { margin-bottom: 20px; }
.single__post__content ul,
.single__post__content ol {
  padding-left: 24px;
  margin-bottom: 20px;
}
.single__post__content li { margin-bottom: 8px; }
.single__post__content a { color: #1570EF; text-decoration: underline; }
.single__post__content blockquote {
  border-left: 4px solid #101828;
  margin: 32px 0;
  padding: 16px 24px;
  background: #f9fafb;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #374151;
}
.single__post__content img,
.single__post__content figure {
  width: calc(100% + 160px);
  max-width: calc(100% + 160px);
  margin-left: -80px;
  border-radius: 12px;
  display: block;
  margin-top: 36px;
  margin-bottom: 36px;
}
.single__post__content figcaption {
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  margin-top: -24px;
  margin-bottom: 36px;
  width: calc(100% + 160px);
  margin-left: -80px;
}

/* ── Privacidad ──────────────────────────────────────────────────────────────── */
.wrap__content__privacidad h2 {
  font-size: 20px;
  font-weight: 700;
  color: #101828;
  margin: 40px 0 12px;
}
.wrap__content__privacidad h3 {
  font-size: 16px;
  font-weight: 700;
  color: #101828;
  margin: 28px 0 8px;
}
.wrap__content__privacidad p {
  font-size: 16px;
  color: #344054;
  line-height: 1.75;
  margin-bottom: 16px;
}
.wrap__content__privacidad ul,
.wrap__content__privacidad ol {
  padding-left: 24px;
  margin-bottom: 16px;
}
.wrap__content__privacidad li {
  font-size: 16px;
  color: #344054;
  line-height: 1.75;
  margin-bottom: 6px;
}
.wrap__content__privacidad a {
  color: #7362FC;
  text-decoration: underline;
}
.wrap__content__privacidad strong {
  color: #101828;
}

@media (max-width: 900px) {
  .single__post__content img,
  .single__post__content figure,
  .single__post__content figcaption {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}

/* ── Modal shared ────────────────────────────────────────────────────────────── */
.modal__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.7);
  overflow-y: auto;
  padding: 24px 16px;
  align-items: center;
  justify-content: center;
}
.modal__card {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  border: 3px solid #101828;
  box-shadow: 8px 8px 0 #101828;
  overflow: hidden;
}
.modal__card--sm { max-width: 420px; }
.modal__card--md { max-width: 480px; }
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f2f4f7;
}
.modal__body { padding: 24px; }
.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.modal__close i { font-size: 20px; }

/* ── Share modal ─────────────────────────────────────────────────────────────── */
.share__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.share__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 3px solid #101828;
  border-radius: 16px;
  text-decoration: none;
  background: #fff;
  box-shadow: 4px 4px 0 #101828;
  cursor: pointer;
  transition: all .15s;
}
.share__btn span { font-size: 11px; font-weight: 700; color: #101828; text-align: center; line-height: 1.2; }
.share__divider { border-top: 1px solid #f2f4f7; margin-bottom: 16px; }
.share__url__row { display: flex; gap: 8px; align-items: center; }
.share__url__input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #d0d5dd;
  border-radius: 10px;
  font-size: 13px;
  color: #344054;
  background: #f9fafb;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.copy__feedback {
  display: none;
  margin: 8px 0 0;
  text-align: center;
}

/* ── Contactar dueño modal ───────────────────────────────────────────────────── */
.contactar__success {
  display: none;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.simple__form--textarea { resize: vertical; height: auto; }

/* ── Map ─────────────────────────────────────────────────────────────────────── */
#custom-map { width: 100%; height: 350px; }

/* ── Flyer modal ─────────────────────────────────────────────────────────────── */
.modal__overlay--scroll { align-items: flex-start; }

.flyer__wrap {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  background: #f3f4f6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.flyer__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.flyer__topbar__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.flyer__pad { padding: 20px; }

.flyer__card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.flyer__brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #7362FC;
}

.flyer__brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flyer__logo {
  height: 26px;
  width: auto;
  display: block;
}

.flyer__brand__tag {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}

.flyer__brandcta {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}


.flyer__head { padding: 16px 20px 0; }

.flyer__title__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
}

.flyer__name {
  font-size: 20px;
  font-weight: 800;
  color: #101828;
  margin: 0 0 2px;
  line-height: 1.2;
}

.flyer__breed {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.flyer__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.flyer__badge {
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #101828;
  background: var(--situacion-color, #7c3aed);
  border: 2px solid #101828;
  box-shadow: 3px 3px 0 #101828;
}

.flyer__badge--reward {
  background: #7362FC;
  color: #101828;
}

.flyer__badge--onphoto {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.flyer__gallery {
  display: flex;
  gap: 8px;
  height: 220px;
}

.flyer__gallery__main {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f3f4f6;
}

.flyer__gallery--has-grid .flyer__gallery__main { width: 57%; }

.flyer__gallery__grid {
  width: 41%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.flyer__gallery__thumb {
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}

.flyer__gallery img,
.flyer__gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flyer__body {
  display: flex;
  gap: 16px;
  padding: 20px;
  align-items: flex-start;
}

.flyer__info { width: 65%; }

.flyer__details__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 12px;
  margin-bottom: 16px;
}

.flyer__detail {
  flex: 1 1 calc(50% - 6px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.flyer__detail__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.flyer__detail__label {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.flyer__detail__value {
  font-size: 13px;
  font-weight: 700;
  color: #101828;
}

.flyer__desc {
  font-size: 12px;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 12px;
}

.flyer__location {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  font-size: 12px;
  color: #6b7280;
}

.flyer__location strong { color: #101828; }

.flyer__location__pin {
  width: 15px;
  height: 15px;
  color: var(--situacion-color, #7c3aed);
  flex-shrink: 0;
  margin-top: 1px;
  display: block;
}

.flyer__qr {
  width: 31%;
  border: 3px solid #101828;
  background: #fffaeb;
  border-radius: 20px;
  padding: 20px 14px;
  box-shadow: 8px 8px 0 #101828;
  text-align: center;
  flex-shrink: 0;
}

.flyer__qr__text {
  font-size: 11px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 14px;
  line-height: 1.5;
}

.flyer__qr__canvas {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.flyer__qr__url {
  font-size: 10px;
  color: #6b7280;
  word-break: break-all;
  display: block;
}

.flyer__map {
  margin: 0 20px 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.flyer__map img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

/* ===== Blog B5 ===== */
.wrap__card__blog {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.item__card__blog {
  flex: 1 1 calc(33.333% - 32px);
  max-width: calc(33.333% - 32px);
  text-decoration: none;
}

.wrap__image__card__blog {
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #F2F4F7;
}

.wrap__image__card__blog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrap__tags__blog {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 768px) {
  .item__card__blog {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ===== Blog archive home.php ===== */
.item__card__blog__featured {
  display: flex;
  gap: 40px;
  align-items: center;
  text-decoration: none;
}

.wrap__image__card__blog__featured {
  flex: 0 0 55%;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: #F2F4F7;
}

.wrap__image__card__blog__featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrap__content__blog__featured {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.blog__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid #101828;
  text-decoration: none;
  font-size: 16px;
  font-family: "Hind", sans-serif;
  font-weight: 500;
  color: #101828;
  transition: background-color 0.15s;
}

.blog__pagination .page-numbers.current,
.blog__pagination .page-numbers:hover {
  background-color: #101828;
  color: #fff;
}

.blog__pagination .page-numbers.dots {
  border: none;
  background: none;
  color: #667085;
}

@media (max-width: 768px) {
  .item__card__blog__featured {
    flex-direction: column;
    gap: 16px;
  }

  .wrap__image__card__blog__featured {
    flex: unset;
    width: 100%;
  }
}

@media (max-width: 375px) {
  .wrap__menu__desktop__100 .wrap__cta .label__button {
    font-size: 14px;
    line-height: 16px;
  }
}

/* ───────── Buscador del home: bottom sheet en mobile ─────────
   - .item__input__search__mobile  → trigger (visible solo en mobile)
   - .searcher__sheet              → contenedor de los 3 filtros
   - .searcher__sheet__backdrop    → fondo oscurecido (mobile)

   En desktop el sheet se "desarma" con display:contents para que los 3
   campos sigan apareciendo inline. Header/footer/backdrop quedan ocultos. */
.searcher__sheet { display: contents; }
.searcher__sheet__content { display: contents; }
.searcher__sheet__header,
.searcher__sheet__footer,
.searcher__sheet__backdrop { display: none; }

/* Trigger mobile renderizado como <button>: limpiamos los estilos default */
button.item__input__search__mobile {
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  margin: 0;
}

/* Tablet/mobile: el sheet se vuelve modal real */
@media (max-width: 990px) {
  .searcher__sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 92vh;
    background: #fff;
    border-top: 3px solid #101828;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 24px rgba(16,24,40,.18);
    z-index: 1001;
    transform: translateY(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .searcher__sheet__content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
  }
  .searcher__sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #EAECF0;
    flex: 0 0 auto;
  }
  .searcher__sheet__header h2 { margin: 0; }
  .searcher__sheet__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    font-size: 22px;
    color: #101828;
  }
  .searcher__sheet__footer {
    display: block;
    padding: 12px 20px 20px;
    border-top: 1px solid #EAECF0;
    background: #fff;
    flex: 0 0 auto;
  }
  .searcher__sheet__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16,24,40,.5);
    z-index: 1000;
  }

  /* Estado abierto: clase en <body> */
  body.searcher-sheet-open { overflow: hidden; }
  body.searcher-sheet-open .searcher__sheet { transform: translateY(0); }
  body.searcher-sheet-open .searcher__sheet__backdrop { display: block; }

  /* Levantamos el contenedor del searcher por encima del header (z-index 99)
     cuando el sheet está abierto. .wrap__input__searcher tiene z-index:2 y
     position:relative, lo que crea un stacking context que atrapa al sheet
     y al backdrop. Sin esto el header del sitio queda por encima del backdrop. */
  body.searcher-sheet-open .wrap__input__searcher {
    z-index: 1002;
  }

  /* Dentro del sheet, mostrar los 3 campos (override del display:none móvil) y
     limpiar paddings utilitarios (.pt-sm/.pb-sm) y el padding-left:16px que
     trae el `.item__input__search__report` por defecto, para que los 3 campos
     queden alineados a la izquierda y con spacing parejo. */
  body.searcher-sheet-open .searcher__sheet .item__input__search__report,
  body.searcher-sheet-open .searcher__sheet .item__input__search__type,
  body.searcher-sheet-open .searcher__sheet .item__input__search__location {
    display: block;
    width: 100%;
    padding: 16px 0;
  }
  /* Cuando el JS decida mostrarlas, se renderizan inline (no como overlay) */
  body.searcher-sheet-open .searcher__sheet .search__report__options,
  body.searcher-sheet-open .searcher__sheet .search__type__options {
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
    padding: 8px 0 0;
  }
  body.searcher-sheet-open .searcher__sheet .divider__searcher {
    height: 1px;
    width: 100%;
    background: #EAECF0;
    margin: 0;
  }

  /* Autocomplete dentro del sheet: fluye debajo del input, no como overlay
     posicionado en la esquina del sheet (que es position:fixed). */
  body.searcher-sheet-open .searcher__sheet .autocomplete-results {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 8px;
    max-height: 180px;
  }
}

/* Badge de conteo en chips de distrito (renderizado server-side desde PHP) */
.slider__filters__tags .count-badge{
  margin-left: 4px;
  font-size: 12px;
  opacity: .65;
}

/* ───────── Modal de filtros: ajustes mobile ─────────
   - Padding del modal más justo.
   - Sombra reducida para no salirse.
   - Chips en layout vertical (ícono arriba, texto abajo) para que el texto
     quepa sin cortarse ("Hembra", "No sé", etc.). */
@media (max-width: 767px) {
  .wrap__modal__filtros{
    padding: 20px 16px;
    border-radius: 16px;
    box-shadow: 8px 8px 0px 0px #101828;
  }

  .top_bar__modal h1{
    font-size: 20px;
  }

  .content__modal{
    gap: 24px;
    max-height: 60vh;
  }

  .chip-list{
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
  }

  .chip{
    flex: 1 1 calc(33.33% - 8px);
    max-width: none;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: 12px;
  }

  .chip img{
    max-width: 32px;
    flex-shrink: 0;
  }

  .chip span{
    font-size: 12px;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Inputs de fecha: que respiren un poco más en mobile */
  .item__filter__content__two__columns{
    gap: 12px;
  }
}

/* ===== Teléfono sticky del landing: cambia de pantalla con crossfade según la sección ===== */
.wrap__images__features .feature-screen{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 85%;
  width: auto;
  opacity: 0;
  transition: opacity .35s ease;
}
.wrap__images__features .feature-screen.is-active{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .wrap__images__features .feature-screen{ transition: none; }
}

/* ===== Ilustración de mascotas (login/registro/reporte): base + ojos + brillos ===== */
.pets-illustration{ position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.pets-illustration .pets-base{ display: block; width: 100%; height: auto; }
.pets-illustration .pets-eyes,
.pets-illustration .pets-shine{
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  pointer-events: none; will-change: transform;
  transition: transform 140ms ease-out;
}
.pets-illustration .pets-shine{ transition-duration: 200ms; }
@media (prefers-reduced-motion: reduce){
  .pets-illustration .pets-eyes,
  .pets-illustration .pets-shine{ transition: none; transform: none !important; }
}

/* Logo del footer: ocupa el 100% del contenedor (height auto mantiene proporción;
   los atributos width/height del <img> dan el aspect-ratio para evitar CLS). */
.wrap__logo__footer img{ width: 100%; height: auto; }

/* Trigger de cuenta para invitados (deslogueado): solo "Mi cuenta" + flecha, sin avatar.
   Como no hay círculo, forzamos que el texto se vea también en mobile (el avatar de
   logueado sí se oculta el texto en mobile, pero acá es el único elemento tocable). */
@media (max-width: 767px){
  .wrap__account__contet--guest .label__account__btn{ display: flex; }
}

/* ===== Selectores de fecha: chips (reporte + filtro) + calendario de marca ===== */
.date-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.date-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 16px;
  border:3px solid #f1efe8; background:#fff; border-radius:10px;
  font-family:'Hind',sans-serif; font-size:15px; font-weight:500; color:#101828;
  cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.date-chip:hover{ border-color:#101828; }
.date-chip--on{ background:#101828; border-color:#101828; color:#fff; }
.date-chip .feather{ font-size:16px; }
.date-help{ margin:10px 0 0; }
.fp-anchor{ position:absolute; top:0; left:0; width:1px; height:1px; padding:0; margin:0; border:0; opacity:0; pointer-events:none; }
.date-range-input{
  width:100%; margin-top:10px;
  border:3px solid #f9fafb; background:#f9fafb; border-radius:8px;
  padding:14px 12px; font-family:'Hind',sans-serif; font-size:16px; color:#101828; cursor:pointer;
}
.date-range-input:focus{ outline:none; border-color:#101828; }
.date-clear{
  margin-top:8px; background:transparent; border:0; padding:0;
  font-family:'Hind',sans-serif; font-size:14px; font-weight:600; color:#503BFB; cursor:pointer;
}
.date-clear:hover{ text-decoration:underline; }

/* Tema de marca para flatpickr */
.flatpickr-calendar{
  /* content-box: el grid de días mide 307.875px; con border-box (global *) el borde
     de 3px le comía 6px y la columna del domingo quedaba bajo el borde. Así el borde
     queda por fuera y el padding lateral le da aire a las celdas del extremo. */
  box-sizing: content-box;
  padding: 0 6px 6px;
  border:3px solid #101828; border-radius:12px; box-shadow:6px 6px 0 #101828;
  font-family:'Hind',sans-serif;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after{ display:none; }
.flatpickr-current-month, .flatpickr-current-month input.cur-year{ font-family:'Poppins',sans-serif; font-weight:600; color:#101828; }
/* El <select> de mes cambia de ancho según las opciones disponibles: con
   maxDate=hoy, el año tope solo lista ene–jun (mes más largo más corto) y los
   demás años listan los 12 (incluye "Septiembre"/"Diciembre"). Eso desplazaba el
   año al navegar. Ancho fijo que cabe el mes más largo → posición estable siempre. */
.flatpickr-current-month .flatpickr-monthDropdown-months{ width: 140px !important; text-align: center; }
.flatpickr-weekday{ color:#98a2b3; font-weight:600; }
.flatpickr-day{ color:#101828; border-radius:8px; }
.flatpickr-day:hover{ background:#E7E4FD; border-color:#E7E4FD; }
.flatpickr-day.today{ border:0; box-shadow:inset 0 0 0 2px #57FF90; }
.flatpickr-day.today:hover{ background:#E7E4FD; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover{
  background:#503BFB; border-color:#503BFB; color:#fff;
}
.flatpickr-day.inRange{ background:#E7E4FD; border-color:#E7E4FD; box-shadow:-5px 0 0 #E7E4FD, 5px 0 0 #E7E4FD; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay{ color:#d0d5dd; }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg{ fill:#101828; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg{ fill:#503BFB; }

/* Detalle de mascota (mobile): el layout de botones se hereda del base.
   Cuando el box flota como barra fija (clase .is-stuck via JS) ocultamos
   el texto y queda compacto, solo con botones; al fijarse en su lugar
   natural vuelve a mostrar el texto. El sticky-bottom vive en el bloque
   @media max-width:767px de más arriba. */
@media screen and (max-width: 767px){
  .wrap__mascota__right__bottom.is-stuck .item__text__mascota{
    display: none;
  }
  .wrap__mascota__right__bottom.is-stuck{
    padding-top: 14px;
    padding-bottom: 14px;
    /* Reserva el alto del texto oculto para que la altura del contenedor
       no cambie al alternar (evita el "temblor"). Lo setea el JS. */
    margin-bottom: var(--dock-reserve, 0px);
  }
}