/*
 * Theme Name: Farmacias Jardines
 * Description: FJ
 * Author: Arroba PR
 * Author URI: https://www.arrobapr.com
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
body {color: #575757!important; overflow-x: hidden; font-family: 'Inter', sans-serif!important;}
html {overflow-x: hidden}
a {cursor: pointer;text-decoration: none!important;color:#272727}
h1 {font-size: 42px;font-family: 'Playfair Display', sans-serif!important;color: #07487e}
h2 {font-size:30px!important; font-family: 'Playfair Display', sans-serif!important;;color: #07487e;;}
h3 { font-family: 'Playfair Display', sans-serif!important;font-weight:600!important;color: #07487e}
p {line-height: 150%; font-size: 18px; }
.top-bar {display: block; text-align: center;  background-color: #07487e;}
.top-bar p {display: inline-block; margin: 10px 5px; color: #fff; font-size: 16px}
img {max-width: 100%; height: auto;}
section {padding:40px 0;position: relative}
.cont {position: absolute; right: 10%; top: 40%}
.cont a {color: #575757}
.cont a {margin: 0 7px}
.navbar { display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  left: 0;
  width: 100% !important;
  background: transparent !important;
  z-index: 10;
  text-align: center !important;
  box-shadow: none;
  border-radius: 0 !important;
  transition: 0.6s !important;
}

/* LOGO CENTRALIZADO */
.navbar-brand {
  display: block !important;
  width: 100%;
  margin: 5px auto !important;
  padding: 0 !important;
  background: transparent;
  transition: 0.6s !important;
  text-align: center;
}


/* MENÚ CENTRALIZADO DEBAJO DEL LOGO */
.navbar-nav {
  display: inline-block;
  float: none !important;
  width: 100% !important;
  margin: 0px auto 0 auto;
  text-align: center;
  transition: 0.6s;
}

.navbar-nav > li {
  display: inline-block;
  float: none;
  margin: 0 8px;
}

.navbar-nav > li > a {
  text-align: center;
  color: #575757;
  font-size: 20px;
  transition: 0.4s all ease-in-out;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color: #07487e;
  text-decoration: none;
  transition: 0.4s all ease-in-out;
}

.navbar .active {
  color: #07487e;
  transition: 0.3s all ease-in-out;
}

/* Botón opcional en la navbar */
.navbar .btn-orange {
 color: #fff;
  padding: 5px 8px;
}
.banner {
  height: 650px;
  background: url(img/fj-banner-bg-4k.webp) center no-repeat;
  background-size: cover;
  text-align: center;
  position: relative; /* Necesario para posicionar pseudoelementos */
}

/* Elemento izquierdo (bottom left) */
.banner::before {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 320px;  /* Ajusta según el diseño */
  height: 320px;
  background: url(img/fj-banner-mujer.webp)center; /* Puedes poner aquí imagen o lo que necesites */
}

/* Elemento derecho (center vertically) */
.banner::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 320px;  /* Ajusta según el diseño */
  height: 320px;
  background: url(img/fj-banner-hombre.webp)center; /* Puedes poner aquí imagen o lo que necesites */

}

.caption {padding-top: 350px}
.top-bar b {color: #fff}
.caption b {color: #f89d22}
b {color: #f89d22}
.hm-ser {position: relative; background-color: #f6f6f6;text-align: center }
.hm-ser .row {margin: 100px 0}
.bt {
 position: relative; text-align: center;
  border-radius: 20px;
  background-color: #fff;padding: 20px 30px; height:310px}
.bt strong {display: block; margin: 5px 0}
.bt img {margin-top: -80px}
.bt h3 {font-size: 24px;margin-top: 50px}

.us {text-align: center;  background-color: #fff;padding: 0}
.us .row {margin:  40px 0;  background-color: #07487e;padding: 30px ; border-radius: 0 0 100px 100px }
.us  h2 {text-align: left;color:#fff}
.us .col-sm-6 p {text-align: left;color: #fff;}


.bene {text-align: center; background-color: #fff;}
.bene .row {margin:  30px 0}
.bene strong {font-size: 18px; display: block; margin:5px auto; }
.bn {background-color: #f6f6f6;padding: 30px;border-radius:100px 0 100px; height: 340px}


.btn-orange {padding:5px 15px;display: inline-block;
  border-radius: 25px;
  background-image: linear-gradient(to left, #f1b21d, #f99b22);;text-decoration:none ;
 font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: #fff; transition: 0.3s all ease-in-out; font-size:20px; border:3px solid transparent;transition: 0.3s all ease-in-out}
.btn-orange:hover{background: #fff;color: #f99b22;border:3px solid #f99b22;transition: 0.3s all ease-in-out;text-decoration: none}

.contact {text-align: center; background-image: #f6f6f6}
.contact p {display:block; text-align: left; margin: 0; color:#575757 }
.contact p b {color:#575757}
.contact .row {margin: 40px 0}
.contact strong {display:block;text-align: left}
.contact a {color: #575757}
.contact i {color: #3597c1;display: block; text-align: left}
.receta {text-align: center; padding-top: 0}
/*Footer*/
footer{max-width: 100%;text-align:center;padding:  15px 0; background: #07487e; position: relative; }
footer .fsocial {color: #fff!important;margin:0 5px ; font-size: 22px}
footer img { display: inline-block; height:auto}
footer p {color: #fff; display: inline-block}
footer a {color: #fff; font-weight:bold; display:inline-block}

.not-found {text-align: center; margin-top: 100px; font-size: 24px;}
/*Responsive */
@media screen and (max-width:2701px){


}

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

 .banner {
  height: 650px;
  background: url(img/fj-banner-bg-2k.webp) center no-repeat;
  background-size: cover;
  text-align: center;
  position: relative; /* Necesario para posicionar pseudoelementos */
}
}

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

}
@media screen and (max-width:1367px){
  .caption {
  padding-top: 350px; width: 50%; margin: auto
}
 .banner {
  height: 600px;
  background: url(img/fj-banner-bg-l.webp) center no-repeat;
  background-size: cover;
  text-align: center;
  position: relative; /* Necesario para posicionar pseudoelementos */
}
}


@media screen and (max-width:1199px){
 .caption {
  padding-top: 350px; width: 42%; margin: auto
}
  .banner::before {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 260px;
  height: 260px;
}
  .banner::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 260px;
  height: 260px;
}
  .bt {
  position: relative;
  text-align: center;
  border-radius: 20px;
  background-color: #fff;
  padding: 20px;
  height: 330px;
}
  .bt p {font-size: 16px}
  .top-bar p {font-size: 14px}
  .bn {
  background-color: #f6f6f6;
  padding: 30px;
  border-radius: 70px 0 70px;
  height: 370px;
}
  .us .col-sm-6 p {
  text-align: left;
  color: #fff;font-size: 16px
}
}

@media screen and (max-width:991px){
  .hm-ser .container {max-width: 100%}
   .bt {
    position: relative;
    text-align: center;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px;
    height: 380px;
  }
  .cont .btn-orange {font-size: 16px}
  .cont {right: 5%}
  .navbar-brand img {max-width: 100px}
  .caption {
  padding-top: 270px; width: 42%; margin: auto
}
    .banner::before {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 220px;
  height: 220px;
}
  .banner::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
}
  .navbar-nav > li > a {
  text-align: center;
  color: #575757;
  font-size: 18px;
  transition: 0.4s all ease-in-out;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
  .bene .container, .us .container{max-width: 100%}
}

@media screen and (max-width:768px){
  .bt p {
    font-size: 16px;text-align: left
  }
 .cont a {
  margin: 0 3px;
}
  .cont {
  position: absolute;
  right: 2%;
  top: 27%;
}
 
.banner {
  height: 600px;
  background: url(img/fj-banner-bg-t.webp) center no-repeat;
  background-size: cover;
  text-align: center;
  position: relative; /* Necesario para posicionar pseudoelementos */
}
}

@media screen and (max-width:767px){
 
  .banner:after, .banner:before {display: none}
  .navbar {
    text-align: center !important;
    justify-content: center !important;
    z-index: 20;
   margin-top: 15px;
    padding: 0px 0 !important;
  }
  .caption {padding-top: 160px; width: 90%}
.container {padding-left: 25px!important;padding-right: 25px!important;}

  .top-bar {padding: 5px}
.top-bar p {
  display: inline-block;
  margin: 0;
  color: #fff;
  font-size: 14px;

}
  .contact {padding: 0}
  .hm-ser h2 {margin-bottom: 40px}
    .bt {
    position: relative;
    text-align: center;
    border-radius: 20px;
    background-color: #fff;
    padding: 20px;
    height: auto;margin: 50px 0
  }
  .us h2 {
  text-align: left;
  color: #fff;margin: 10px 0
}
  .us h3 {color:#f89d22; text-align: left }
  .us .row {
  margin: 40px 0;
  background-color: #07487e;
  padding: 30px 20px;
  border-radius: 0 0 70px 70px;
}
  .contact p {text-align: center}
  .bn {
    background-color: #f6f6f6;
    padding: 30px;
    border-radius: 40px 0 40px;
    height: auto;margin: 20px 0
  }
  .bt h3 {
  font-size: 24px;
  margin-top: 20px;
}
  .hm-ser .row {margin: 0}
 .banner {
    height: 350px;
    background: url(img/fj-banner-bg-m.webp) center no-repeat;
    background-size:  cover; position: relative;
  }
 
  h2 {font-size: 26px!important;}
  h4 {font-size: 20px!important;}
 
  .fsocial {text-align: center}


  p {font-size: 16px}
   .bene strong {
    font-size: 18px;
  }
  .contact i {
  color: #3597c1;
  display: block;
  text-align: center;
}
  .contact p {margin-bottom: 10px}
  .contact strong {text-align: center}

  footer .fsocial {color: #fff!important;margin: 5px ;  display: inline-block}
  footer a {font-size: 15px; text-align: center}
  footer {text-align: center}
   .cont {
    position: absolute;
    right: 10%;
    top: 30%;
  }
  .bene {padding-bottom: 0}
  .hm-ser {
  position: relative;
  background-color: #f6f6f6;
  text-align: center;padding-bottom: 0
}
}