@import url('./Inter/inter.css');


:root {
  --primaryColorBrightness: #00C6D8;
  --primaryColor: #00ABBA;
  --primaryColorDarkness: #009AA7;

  --secondaryColorBrightness: #90255B;
  --secondaryColor: #6E1C45;
  --secondaryColorDarkness: #5F0231;

  --grisBrightness: #f5f5f5;
  --gris: #ededed;
  --grisDarkness: #dcdcdc;

  --colorTexto: #333;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
	text-decoration: none;
  outline: none;
  color: var(--colorTexto);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
}
body {
  font-variant: tabular-nums;
  line-height: 1.5715;
  font-feature-settings: 'tnum';
}
html {
  
  scroll-behavior: smooth;
}


ul { list-style: none; padding: 0; }
button, a, a:active, a:active *, a:focus, a:focus * { text-decoration: none; outline: none !important; }
input { box-shadow: none; font-size: 1.6rem; }

html, app-root { height: 100%; }
body { min-height: 100%; }
.ant-select-item { font-size: 1.6rem !important; height: auto; }

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background: var(--primaryColor);
  color: #fff;
  font-size: 1.8rem;
  letter-spacing: 0.07rem;
  font-variation-settings: "slnt" -5;
  text-align: center;
  transition: all 300ms;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 7px;
}
.btn:disabled { cursor: not-allowed !important; }
.btn path { fill: #fff; }
.btnChico {
  padding: 5px 10px;
  font-size: 1.6rem;
}
.btnLargo {
  padding: 10px 30px;
}
.btnChicoLargo {
  padding: 5px 25px;
  font-size: 1.6rem;
}
.btnPrimary { background: var(--primaryColor); }
.btnPrimary:hover { background: var(--primaryColorBrightness); }
.btnPrimary:disabled { background: var(--primaryColorDarkness); }
.btnSecondary { background: var(--secondaryColor); }
.btnSecondary:hover { background: var(--secondaryColorBrightness); }
.btnSecondary:disabled { background: var(--secondaryColorDarkness); }

path { fill: var(--colorTexto); }
.iconPrimary path { fill: var(--primaryColor);  }
.iconSecondary path { fill: var(--secondaryColor);  }
.iconBlanco path { fill: #fff;  }

.errorImg { width: 85px; }
.slnt10 { font-variation-settings: "slnt" -10; }
.slnt5 { font-variation-settings: "slnt" -5; }
.flex { display: flex; align-items: center; }
.currency::first-letter { margin-right: 5px; }

.fa-lg { font-size: 1.3rem; }



/* -CSS HEADER  */
header {
  padding: 10px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  box-shadow: 0 0 7px 0 rgba(0,0,0,.1);

  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  background: #fff;
}
header * { user-select: none; }
header .logo { justify-self: center; }
header .logo img {
  max-width: 125px;
  width: 100%;
}
header nav.menu { justify-self: flex-start; }
header nav.colegios { justify-self: flex-end; }
header nav > ul {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 25px;
}
header nav > ul li.first a {
  display: flex;
  align-items: center;
  grid-gap: 5px;
  font-size: 1.8rem;
  color: var(--colorTexto) !important;
  letter-spacing: 0.15rem;
  font-weight: 500;
  padding: 5px 15px;
  font-variation-settings: "slnt" -10;
  transition: all 300ms;
  position: relative;
}
header nav > ul li.first a::after {
  content: ' ';
  background: var(--primaryColor);
  width: 100%;
  height: 0px;
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  transition: all 300ms;
}
header nav > ul li.first a:hover { color: #fff !important; }
header nav > ul li.first a:hover::after { height: 100%; }
header nav > ul li.first a:hover path { fill: #fff; }
header nav > ul p.btn {
  position: relative;
  z-index: 11;
  font-weight: 500;
  padding: 10px 30px;
  letter-spacing: 0.15rem;
  text-transform: unset;
  font-variation-settings: "slnt" -10;
}
header nav > ul li.colegios { position: relative; }
header nav > ul li.colegios:hover > ul.submenu,
header nav > ul li.colegios:focus-within > ul.submenu { display: grid; }
header nav > ul li ul.submenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  z-index: 10;
}
header nav > ul li ul.submenu .flecha {
  text-align: right;
  padding-right: 30px;
  margin-top: -10px;
  margin-bottom: -18px;
}
header nav > ul li ul.submenu .flecha path { fill: var(--gris); }
header nav > ul li ul.submenu li a {
  background: var(--gris);
  display: block;
  color: var(--colorTexto);
  padding: 7px 40px 7px 20px;
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: 0;
  transition: all 100ms;
}
header nav > ul li ul.submenu li a:hover { background: var(--grisDarkness); }
header nav > ul li ul.submenu li:first-child { border-radius: 15px 15px 0 0 !important; }
header nav > ul li ul.submenu li:last-child { border-radius: 0 0 15px 15px !important; }
@media screen and (max-width: 1200px) {
  header { padding: 10px 30px; }
  header nav > ul { grid-gap: 15px; }
}
@media screen and (max-width: 1000px) {
  header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  header nav.menu { display: none; }
}
.vacio { width: 100%; height: 108px; }



/* -CSS FOOTER */
footer {
  background: var(--colorTexto);
  padding: 50px 100px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 30px 50px;
  min-height: 275px;
}
footer .datos h2 {
  margin-bottom: 20px;
  color: #fff;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 25px;
  font-variation-settings: "slnt" -5;
}
footer .datos h3 {
  font-weight: 500;
  margin: 10px 0;
  font-size: 1.6rem;
  color: #fff;
  display: flex;
  align-items: center;
  grid-gap: 5px;
  font-variation-settings: "slnt" -5;
}
footer .datos a {
  display: block;
  width: max-content;
}
footer .logo img {
  width: 100%;
  max-width: 150px;
  user-select: none;
}
footer .politicas {
  grid-column: span 2;
  display: grid;
  grid-gap: 12px;
}
footer .politicas a {
  display: block;
  width: max-content;
}
footer .politicas a h4 { text-decoration: underline; }
footer .politicas h4 {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 500;
  font-variation-settings: "slnt" -5;
}
@media screen and (max-width: 1100px) {
  footer { padding: 50px; }
}
@media screen and (max-width: 900px) {
  footer {
    padding: 40px 16px;
    grid-template-columns: 1fr;
    grid-template-areas: "datos" "politicas" "logo";
  }
  footer .datos {
    grid-area: datos;
    grid-column: span 1;
    text-align: center;
  }
  footer .datos a { margin: 0 auto; }
  footer .datos svg { display: none; }
  footer .datos h3 { justify-content: center; }
  footer .politicas {
    grid-area: politicas;
    grid-column: span 1;
    text-align: center;
  }
  footer .politicas a { width: unset; }
  footer .logo {
    grid-area: logo;
    grid-column: span 1;
    text-align: center;
  }
  footer .logo img { max-width: 100px; }
}




/* -CSS INDEX */
main.index {
  padding: 50px;
  background-image: linear-gradient(to right, rgba(0, 172, 187, .5), rgba(111, 28, 70, .5)), url('../img/main.jpg');
  height: 400px;
  background-size: cover;
  background-position-x: center;
  display: grid;
  align-content: center;
  justify-content: left;
}
main.index h1 {
  color: #fff;
  text-align: left;
}
main.index h2 {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 500;
  font-variation-settings: "slnt" -10;
}

section.nosotros {
  padding: 75px 150px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 75px;
}
section.nosotros h1 {
  grid-column: span 2;
  margin-bottom: -30px;
}
section.nosotros img {
  width: 75px;
}
section.nosotros h2 {
  color: var(--primaryColor);
  font-size: 2.2rem;
  font-weight: 600;
  font-variation-settings: "slnt" -10;
  margin-bottom: 10px;
  text-align: center;
}
section.nosotros p {
  margin-bottom: 10px;
  line-height: 27px;
}
section.nosotros .quienes-somos { grid-column: span 2; }
section.nosotros .mision,
section.nosotros .vision,
section.nosotros .compromiso {
  text-align: center;
}
section.nosotros .compromiso { grid-column: span 2; }
section.nosotros .compromiso p { text-align: center; }



/* -CSS POLITICAS */
main.privacidad {
  padding: 75px 100px;
}
main.privacidad h3 {
  font-size: 2rem;
  color: var(--primaryColor);
  font-weight: 600;
  margin-bottom: 5px;
  font-variation-settings: "slnt" -10;
}
main.privacidad h3.openpay { color: var(--colorTexto); }
main.privacidad ul { padding-left: 50px; }
main.privacidad ul li {
  list-style: disc;
  margin: 10px 0;
}



/* -CSS CANCELACION */
main.cancelacion {
  padding: 75px 100px;
}



.bounce {
  animation: bounce 5s ease infinite;
}
@keyframes bounce {
	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
	20% {transform: translateY(-30px);}
	30% {transform: translateY(-15px);}
}

.bounce2 {
  animation: bounce2 5s ease infinite;
}
@keyframes bounce2 {
	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
	20% {transform: translateY(-15px);}
	30% {transform: translateY(-7px);}
}



h1 {
  font-size: 3rem;
  font-weight: 600;
  color: var(--secondaryColorBrightness);
  font-variation-settings: "slnt" -10;
  text-align: center;
  margin-bottom: 15px;
}
p,
p strong {
  font-size: 1.6rem;
  font-variation-settings: "slnt" -5;
  text-align: justify;
}
p strong { font-weight: 700; }