/* Importado de externos */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0,0');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* Varibles */
:root {
  --azul-claro: #eef6fd;
  --azul-gris: #223545;
  --azul-marino: #001729;
  --azul-marino-transparente: #001729f4;  
  --azul-oscuro: #001729;
  --ubicacion-claro: #a8dadc;
  --ubicacion-oscuro: #457b9d;
  --blanco: #ffffff;
  --fucsia: #ed1650ff;
  --negro: #000000;
  
  --medianil-horizontal: 12%;
  --medianil-horizontal-mas-medio: 18%;
  --medianil-horizontal-mas-uno: 24%;
  --medianil-horizontal-medio: 6%;
  --medianil-horizontal-cuarto: 3%;

  --medianil-vertical: 4%;
  --medianil-vertical-mas-medio: 6%;
  --medianil-vertical-medio: 2%;
  --medianil-vertical-cuarto: 1%;
}

/* CSS estándar */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;/*-webkit-text-size-adjust:100%*/}


body {
  background-color: var(--blanco);
  font-family: "Montserrat", sans-serif;
  font-size: calc(1rem + 0.25vw);
  font-weight: 400;
  line-height: 1.75;
  margin: 0%;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Montserrat', sans-serif;
  /*font-kerning: 0.6;*/
  font-weight: 900;
  line-height: .83;
  letter-spacing: -1.5px;
  margin: 0rem;
}

h1 { font-size: calc(7rem + 0.5000vw);}
h2 { font-size: calc(2rem + 0.8331vw);}
h3 { font-size: calc(1rem + 0.7500vw);}

a {
  background-color:transparent;
  color: var(--blanco);
  text-decoration: none;
}
a:active,a:hover{
  outline-width:0;
}
section {
  width:100%;
  padding: var(--medianil-vertical) var(--medianil-horizontal-medio);
}
table {
  border:none;
  border-collapse: collapse;
  width: 100%;
}
tr {
  border:none;
}
td {
  border:none;
  vertical-align: top;
}

/* Ajustes para iconos de Google */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 48
}

/* Sección: Inicio */
.button {
  background-color: var(--fucsia);
  border:none;
  border-radius: .5rem;
  color: var(--blanco);
  display:inline-block;
  font-size: calc(1rem + 0.7500vw);
  font-size: -moz-calc(1rem + 0.7500vw);
  font-size: -webkit-calc(1rem + 0.7500vw);
  font-size: -ms-calc(1rem + 0.7500vw);
  font-weight: 900;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  white-space:nowrap;
  /*margin-top: 0.5rem 1rem;  */
}

.rc-menu {
  background-image: url(../assets/webp/menu-backgound.webp);
  background-position: bottom center;
  background-repeat: repeat;
  background-size:cover;
  padding-top: 3%;
}
.rc-logo {
  height: calc(2rem + 1vw);
  height: -moz-calc(2rem + 1vw);
  height: -webkit-calc(2rem + 1vw);
  margin-left: 12%;
}
.rc-menu-button {
  color: var(--blanco);
  font-size: calc(2rem + 1vw);
  font-size: -moz-calc(2rem + 1vw);
  font-size: -webkit-calc(2rem + 1vw);
  margin-right: 12%;
  line-height: 1.25;
}
.rc-menu-button a:hover {
  color: var(--fucsia);
}
#secciones {
  background-image: url(../webp/menu-backgound.webp);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size:cover;
  display: none;
  color:var(--fucsia);
  font-family: 'Montserrat', sans-serif;
  font-size: calc(.75rem + 1vw);
  font-size: -moz-calc(.75rem + 1vw);
  font-size: -webkit-calc(.75rem + 1vw);
  font-weight:700;
  letter-spacing: -1px;
  line-height: normal;
}
.rc-seccion:hover {
  color: var(--blanco);
}

/* Inicio */
#inicio {
  color: var(--fucsia);
  height: 100vh;
  width: 100vw;
}
/*
@media screen and (orientation:portrait) {
  #inicio {
    height: 65vh;
    width: 100vw;
  }
}
*/
#inicio .cta {
  font-size: calc(1rem + .5vw);
  font-size: -moz-calc(1rem + .5vw);
  font-size: -webkit-calc(1rem + .5vw);
  margin-top: 1vw;
  color: var(--negro);
}
#inicio .redes {
  padding-bottom: 6vh;
  padding-right: 6.25vw;
  z-index:1;
}
#inicio .red {
  height: 2rem;
  width:auto;
  margin: 0rem .5rem 0rem 0rem;
}
#inicio .icono {
  fill:var(--blanco);
}
#inicio .icono:hover {
  fill:var(--fucsia);
}

/* Sección: Quiénessomos */
#quienes-somos {
  background-color: var(--blanco);
  color:var(--negro);
  padding-top: 8vh;
  padding-bottom: 6vh;
}
#quienes-somos .tablet {
  width: 0%;
}
#quienes-somos .espacio {
  width: var(--medianil-horizontal-medio);
}
#quienes-somos .manifiesto {
  padding-top: var(--medianil-vertical-mas-medio);
  padding-right: var(--medianil-horizontal-medio);
}
#chango1 {
  /*
  background:url(../assets/webp/ChangoPlaneta.webp) transparent;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: no-repeat;
  background-size:contain;
  position:relative;
  top:0;
  z-index:0;
  background-size: calc(40vw - 8rem);
  height: 40vw;
  width: 40vw;
  background-size: calc(34vw - 8rem);
*/
  height: auto;
  width: 30vw;
  margin-right: 4vw;
}

/* Sección: Quiénessomos */
#gracias {
  background-color: var(--blanco);
  color:var(--negro);
  padding-top: 20vh;
  padding-bottom: 6vh;
}

/* Sección: Servicios */
#servicios {
  background-color: var(--fucsia);
  color:var(--negro);
  padding-top: 8vh;
  padding-bottom: 8vh;
}
#servicios h3 {
  color:var(--blanco);
}
#servicios td {
  width: 27.33333%;
}
#servicios .icon {
  color:var(--negro);
  font-size: 6rem;
}
#servicios .espacio {
  width: var(--medianil-horizontal);
}

/* Sección: Reels */
#reels {
  background-color: var(--blanco);
  padding-top: 8vh;
  padding-bottom: 1px;
}
#reels .espacio {
  width: var(--medianil-horizontal-medio);
}
#reels .titulo-1 {
  color:var(--negro);
  font-size: calc(1.25rem + 1vw);
  font-size: -moz-calc(1.25rem + 1vw);
  font-size: -webkit-calc(1.25rem + 1vw);
}
#reels .titulo-2 {
  color: var(--fucsia);
  font-size: calc(3.8874rem + 1vw);
  font-size: -moz-calc(3.8874rem + 1vw);
  font-size: -webkit-calc(3.8874rem + 1vw);
}
#reels img {
  display: block;
  height:auto;
  width:100%;
}
#reels #cta:hover {
  opacity: .5;
}
#chango2 {
  /*
  background:url(../assets/webp/ChangoMedita.webp) transparent;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: no-repeat;
  background-size:cover;
  position:relative;
  top:0;
  z-index:0;
  background-size: calc(30vw - 8rem);
  height: 24vw;
  width: 30vw;
  */
  height: auto;
  width: 30vw;
  /*margin-right: 4vw;*/
}


#reels .play-video {
  max-width: 26vw;
}

/* Sección: Contacto */
#contacto {
  background-color: var(--blanco);
  color: var(--negro);
  padding: 0%;
}
#contacto #vineta {
  background-color: var(--azul-gris);
  padding: 0%;
  padding: var(--medianil-vertical) var(--medianil-horizontal-cuarto) 0% var(--medianil-horizontal-cuarto);
  text-align: right;
  width: 37.08333%;
}
#contacto #formulario {
  background-color: var(--azul-claro);
  padding: var(--medianil-vertical) var(--medianil-horizontal);
}
#contacto input, #contacto textarea {
  background-color: transparent;
  border:none;
  border-bottom: solid 1px var(--negro);
  outline: none;
  padding: 1rem;
  width:100%;
}
#contacto .cta {
  background-color: var(--fucsia);
  border: none;
  border-radius: 0.25rem;
  color: var(--blanco);
  font-size: 1.2rem;
  font-weight: 900;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  width: auto;
}
#contacto .cta:hover {
  background-color: var(--negro);
}


/* Sección: Ubicación */
#ubicacion {
  background-color: var(--ubicacion-claro);
  color: var(--negro);
  padding-bottom: 0;
}
#ubicacion #titulo {
  text-align: right;
}
#ubicacion .espacio {
  width: var(--medianil-horizontal);
}
#chango3 {
  /*
  background:url(../assets/webp/ChangoVuela.webp) transparent;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: no-repeat;
  background-size:contain;
  position:relative;
  top:0;
  z-index:0;
  background-size: calc(30vw - 8rem);
  height: 24vw;
  width: 30vw;
  */
  height: auto;
  width: 30vw;
}

/* Sección: Pie de página */
#pie-pagina {
  background-color: var(--fucsia);
  color: var(--blanco);
}
#pie-pagina a:hover {
  filter: invert(1);
}
#pie-pagina img {
  height: 2rem;
  width: auto;
}
#pie-pagina #logo {
  text-align: left;
}
#pie-pagina #copyright {
  text-align: center;
}
#pie-pagina #redes {
  text-align: right;
}

/* Ajustes para: Télefono */
@media (max-width:640px) {
  .ocultar-si-telefono {
    display: none;
  }
  .rc-menu {
    padding-top: 6%;
  }
  .rc-logo {
    height: calc(1.5rem + 1vw);
    height: -moz-calc(1.5rem + 1vw);
    height: -webkit-calc(1.5rem + 1vw);
    margin-left: 6%;
  }
  .rc-menu-button {
    font-size: calc(1.5rem + 1vw);
    font-size: -moz-calc(1.5rem + 1vw);
    font-size: -webkit-calc(1.5rem + 1vw);
    margin-right: 6%;
    margin-top: -8%;
  }
  #inicio #video-clip {
    object-fit: cover;
  }
  #inicio h1 { font-size: calc(4.3rem + 0.5000vw);}
  #inicio .cta {
    font-size: calc(1.1rem + .5vw);
    font-size: -moz-calc(1.1rem + .5vw);
    font-size: -webkit-calc(1.1rem + .5vw);
    margin-top: 1vw;
  }
  #quienes-somos {
    padding: 0%;
    padding: var(--medianil-vertical-mas-medio) var(--medianil-horizontal);
  }
  #servicios {
    padding: 0%;
    padding: var(--medianil-horizontal);
    margin-bottom: -1rem;
    /*
    padding-top: var(--medianil-horizontal);
    padding-bottom: var(--medianil-horizontal);*/
  }
  /*
  #reels {
    padding-top: var(--medianil-horizontal);
    padding-bottom: 0%;
  }
  */
  #reels {
    padding: 0%;
    padding: var(--medianil-horizontal);
    padding-bottom: 0%;
  }
  #contacto {
    margin-top: -1.25rem;
  }
  #contacto #formulario {
    padding: 0%;
    padding: var(--medianil-horizontal);
    margin-bottom: -1rem;
  }
  #contacto #vineta {
    text-align: center;
    padding: 0%;
  }
  #ubicacion {
    padding: 0%;
    padding: var(--medianil-horizontal);
    margin-bottom: -1rem;
  }
  #ubicacion #titulo, #ubicacion #datos {
    text-align: left;
  }
  #pie-pagina {
    padding: 0%;
    padding: var(--medianil-horizontal);
    margin-bottom: -1rem;
  }

}

/* Ajustes para: Tabletas */
@media (max-width:1081px) and (min-width:641px) {
  .ocultar-si-tablet {
    display: none;
  }
  #reels {
    padding-bottom: 0%;
  }
  #reels .chango {
    text-align: center;
  }
  #reels .chango img {
    display:inline;
    width: auto;
  }
  #contacto {
    margin-top: -.5rem;
  }
}

/* Ajustes para: PC */
@media (min-width:1082px) {
  .ocultar-si-pc {
    display: none;
  }
}