@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@500&family=Kanit:wght@400;600&family=Roboto+Condensed:wght@400;700&display=swap');

:root {
  --clrbg: #1B2040;
  --clrfnt: #fbfbfb;
  --clropt: #121212;
  --clraccent: #166A9A;
  --clraccenth: #4abcff;
  --clrxyntrus: #1f2952;
  --clrxyntrusred: #ee2d46;
  --padx: 12%;
  --pady: 2rem;
  --fnt-size: 16px;
  --fnt-p: clamp(1rem, 2.4vw, 1.4rem);
  --fnt-h1: clamp(2.4rem, 6vw, 4.8rem);
  --fnt-h2: 3rem;
  --fnt-h3: 2.4rem;
  --fnt-h4: 1.6rem;
  --fnt-h5: 1.6rem;
  --ff-p: "Roboto Condensed", sans-serif;
  --ff-h1: "Roboto Condensed", sans-serif;
  --ff-h2: "Cormorant SC", serif;
  --ff-h3: "Roboto Condensed", sans-serif;
  --ff-h4: "Roboto Condensed", sans-serif;
  --ff-h5: "Roboto Condensed", sans-serif;
  --ifw: 600px;
  --ifh: 450px;
  --navh: 88px;
  --navhr: 68px;
  --logomenu: 115px;
  --icored: 40px;
  --icoredr: 36px;
  --hambur: 32px;
}

title {
  display: none;
}

body {
  overflow-x: hidden;
  padding-top: 120px;
}

html {
  background: var(--clrbg);
  font-family: "Kumbh Sans", Roboto, sans-serif;
  overflow-x: hidden;
  box-sizing: border-box;
  font-size: var(--fnt-size);
  scroll-behavior: smooth;
  font-family: var(--ff-p);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  color: inherit;
  box-sizing: inherit;
}

ul, li, a {
  text-decoration: none;
  /* list-style-type: none; */
}

a, button {
  cursor: pointer;
}

h1, a, p, button, ul, li, label {
  font-size: var(--fnt-p);
  color: var(--clrfnt);
}

li {
  margin-left: 1.25rem;
}

h1 {
  font-size: var(--fnt-h1);
  text-transform: uppercase;
}

h2 {
  font-family: var(--ff-h2);
  font-size: var(--fnt-h2);
  color: var(--clrforta);
}

h3 {
  font-family: var(--ff-h3);
  font-size: var(--fnt-h3);
}

h4 {
  font-family: var(--ff-h4);
  font-size: var(--fnt-h4);
}

h5 {
  font-family: var(--ff-h5);
  font-size: var(--fnt-h5);
}

h2, h3, h4, h5 {
  margin-bottom: 1.4rem;
  text-align: center;
}

.padx {
  padding-left: var(--padx);
  padding-right: var(--padx);
}

.pady {
  padding-top: var(--pady);
  padding-bottom: var(--pady);
}

.spacer {
  height: 2rem;
}

.flexo {
  display: flex;
}

.gap {
  gap: 2rem;
}

.txtc {
  text-align: center;
}

.resp {
  max-width: 100%;
  height: auto;
}

/* NAVBAR */

#navbar {
  height: var(--navhr);
  background: var(--clrxyntrus);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  padding: 1rem var(--padx);
  z-index: 999;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 28px #00000055;
}

#navLogo {
  width: var(--logomenu);
  min-width: 100px;
  opacity: 0.8;
  transition: opacity ease-in-out 150ms;
}

#navLogo:hover {
  opacity: 1;
}

#navMenu ul {
  font-family: var(--ff-menu);
  list-style: none;
  font-weight: 400;
  align-items: center;
}

#navMenu a {
  font-size: clamp(14px, 2.8vw, 16px) !important;
  letter-spacing: 1px;
  position: relative;
}

#navMenu .hov::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background-color: var(--clrxyntrusred);
  opacity: 0;
  transition: opacity ease 200ms;
}

#navMenu .hov:hover::after {
  opacity: 1;
}

.navMob {
  display: none;
}

.hambur {
  display: none;
}

@media (max-width: 768px) {
  #navMenu {
    display: none;
  }
  .hambur {
    display: block;
    width: var(--hambur);
    height: var(--hambur);
    cursor: pointer;
    z-index: 999;
  }
  .hambur span {
    display: block;
    width: var(--hambur);
    height: 3px;
    background-color: white;
    margin-bottom: 8px;
    border-radius: 8px;
    transition: transform ease 150ms;
    visibility: visible;
  }
  .selected span:first-child, .selected span:last-child {
    transform: rotate(45deg);
    transform-origin: left;
  }
  .selected span:last-child {
    transform: rotate(-45deg);
  }
  .selected span:nth-of-type(2) {
    visibility: hidden;
  }
  .navMob {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 0;
    width: 60vw;
    min-width: 300px;
    max-width: 600px;
    height: 100vh;
    background-color: var(--clrxyntrus);
    justify-content: space-evenly;
    padding: 4rem 2rem;
    transform: translateX(610px);
    transition: transform ease-out 250ms;
  }
  .navMob.show {
    transform: translateX(0);
  }
  #navMenuMob {
    text-align: center;
    height: 100%;
  }
  #navMenuMob ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 100%;
  }
  #navMenuMob ul li {
    list-style: none;
  }
  #navMenuMob a {
    font-size: clamp(2rem, 3vw, 3.6rem);
    font-weight: 600;
    padding: 1rem 0;
  }
}



/* HEAD */

.titulo {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.titulo h1 {
  font-size: var(--fnt-h1);
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  display: inline;
}

.titulo img {
  width: 3rem;
}

/* .titulo h1::before { */
/*   content: ''; */
/*   height: 6vw; */
/*   min-height: 2.4rem; */
/*   max-height: 4.8rem; */
/*   width: 6vw; */
/*   min-width: 2.4rem; */
/*   max-width: 4.8rem; */
/*   position: absolute; */
/*   left: -18%; */
/*   top: .2rem; */
/*   background-image: url('./location.svg'); */
/*   background-size: 60%; */
/*   background-repeat: no-repeat; */
/*   background-position: center; */
/*   border: solid 4px white; */
/*   border-radius: 50%; */
/* } */


/* MAPA */

#selector {
  justify-content: center;
  align-items: center;
}

.styledSelect {
  gap: 1rem;
  align-items: center;
  position: relative;
}

.styledSelect::before {
  content: '';
  width: 30px;
  height: 30px;
  background: var(--clraccent);
  position: absolute;
  right: 3px;
  top: 4px;
  pointer-events: none;
  cursor: pointer;
  z-index: 2;
}

.styledSelect::after {
  content: '';
  z-index: 3;
  position: absolute;
  width: 0;
  height: 0;
  top: 16px;
  right: 10px;
  border: 8px solid transparent;
  border-color: #fff transparent transparent transparent;
}

label {
  font-size: var(--fnt-p) !important;
}

select {
  padding: .2rem 1rem;
  outline: solid 4px var(--clraccent);
  border-radius: 0;
  background: white;
  text-transform: uppercase;
  font-size: var(--fnt-p);
  font-family: var(--ff-p);
  appearance: none;
  position: relative;
  min-width: 340px;
  width: 340px;
  height: 37px;
  cursor: pointer;
}

select:hover {
  outline: solid 4px var(--clraccenth);
}

option {
  text-transform: uppercase;
  font-size: var(--fnt-p);
}

.listaMap {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

#listaFarmacias {
  width: 30%;
}

#listaFarmacias li {
  list-style: none;
  width: 100%;
  margin-left: 0;
}

.farmCont {
  padding: .5rem 0rem .5rem 2.8rem;
  margin-bottom: 1rem;
  position: relative;
  background-color: #ffffff11;
}

.farmCont a::before {
  content: '';
  width: 2rem;
  height: 100%;
  position: absolute;
  left: .4rem;
  top: 0;
  background-image: url('./location.svg');
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}

.farmCont:hover, .farmCont:active {
  outline: solid 4px var(--clraccent);
}

.farmCont a p:first-child {
  text-transform: uppercase;
  font-weight: 600;
}

#miIframe {
  border: solid 4px var(--clraccent);
  background-color: #00000022;
  background-image: url('./location.svg');
  background-position: center;
  background-size: 30%;
  background-repeat: no-repeat;
  width: var(--ifw);
  height: var(--ifh);
}

@media (max-width: 1367px) {
  .listaMap {
    flex-direction: column-reverse;
    align-items: center;
  }
  #listaFarmacias {
    width: 80%;
  }
}

@media (max-width: 1080px) {
  :root {
    --ifw: 300px;
    --ifh: 225px;
    --fnt-size: 12px;
  }
  .titulo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #selector {
    flex-direction: column;
    gap: 1rem;
  }
  select {
    min-width: 260px;
    width: 260px;
    outline: solid 3px var(--clraccent);
  }
  .titulo h1::before {
    border: solid 2px white;   
  }
}