/* GLOBAL STYLES
-------------------------------------------------- */
:root{
  --rosa: rgb(230,18,128);
  --azul-oscuro: rgb(33,35,76);
  --gris: rgb(115,115,143);
}

/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #000;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-top: 100px; /* Ajusta este valor según la altura de tu navbar */
  margin-bottom: 4rem;
}


.carousel-caption.text-start,
.carousel-caption,
.carousel-caption.text-end{
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
  gap:20px;
}

.carousel_texto{
  background: linear-gradient(to right, var(--azul-oscuro), var(--rosa));
  color: white;
  box-shadow: 8px 8px 8px 8px rgba(0,0,0,0.2);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  padding: 30px;
  position: relative;
}

.carousel_texto h1 {
  font-weight: bold; /* Hace el texto negrita */
  font-style: italic; /* Hace el texto cursiva */
}

.carousel_texto p{
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24;
}

.carousel_redes{
  margin: 20px 0px 20px auto;
  background-color: transparent;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  color: rgb(0,0,0);
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
}
.carousel-control-prev {
  color: blueviolet;
}

.boton-whatsapp {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.boton-whatsapp a {
  text-decoration: none;
}

.boton-whatsapp img {
  width: 50px;
  height: 50px;
}

@media (max-width: 768px) { /* Para pantallas más pequeñas */
  .carousel-item {
    height: 80vh; /* Reduce la altura del carousel para que encaje en pantallas pequeñas */
  }

  .carousel_texto {
    font-size: 1rem; /* Ajusta el tamaño del texto para pantallas pequeñas */
  }
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */
.row.featurette{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
  grid-auto-rows:22rem;
  grid-auto-flow: dense;
}

.container.marketing{
  display: grid;
  grid-template-columns: 1fr; /*repeat(auto-fil,minmax(50rem,1fr)); */
  grid-template-rows: 1fr;
}

.footer__icono{
  color: var(--rosa);
}
.footer__icono:hover{
  color: var(--azul-oscuro);
}
.texto_cuerpo{
  height: 100%;
  width: 1fr;
  margin: 0px;
  padding: 20px;
  border: 0px;
  border-top-left-radius: 0.37rem;
  border-top-right-radius: 0.37rem;
  border-bottom-right-radius: 0.37rem;
  border-bottom-left-radius: 0.37rem;
  background-color: white;
  padding: 10px;
  color: black;
  z-index: 1;
}

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/*Otros estilos que no sabía donde mas meter*/
.quienes_somos_bg{
  /* height: 500px; */
  /* display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr; */
  margin: 0px;
  border: 0px;
  border-top-left-radius: 0.37rem;
  border-top-right-radius: 0.37rem;
  border-bottom-right-radius: 0.37rem;
  border-bottom-left-radius: 0.37rem;
  background-color: white;
}
.quienes_texto{
  height: 100%;
  width: 1fr;
  margin: 50px;
  border: 0px;
  border-top-left-radius: 0.37rem;
  border-top-right-radius: 0.37rem;
  border-bottom-right-radius: 0.37rem;
  border-bottom-left-radius: 0.37rem;
  background-color: transparent;
  text-align: justify;
  color: var(--azul-oscuro);
}
.quienes_img{
  opacity: 1;
}

.clientes{
  width: 100%;
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,25rem),1fr));
  grid-auto-rows: 1fr;
}
.formulario_contacto{
  height: 100%;
  width: auto;
  display:grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  margin:auto; 
  padding: 100px;
  justify-content: center;
  color:white;
 
}
.resaltado_contacto{
  box-shadow: 8px 8px 8px 8px rgba(0,0,0,0.2);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background-color: var(--azul-oscuro);
  opacity: .8;
  text-align: left;
  justify-content: center;
  display:flex;
  align-items: center;
}

/* Estilos generales de los templates */

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.footer__redes {
  display: flex;
  justify-content: center;
}
.footer {
  display: flex;
  flex-direction: column; 
  align-items: center;     
  font-size: 0.9em;
  text-align: center;
}
.content {
  display: flex;
  justify-content: center;
}
.bg_image{
  background-image: url(IMG-02.jpg);
  height: 100%;
  width: 100%;
  background-size: "cover";
  background-attachment:"fixed";
  background-repeat: repeat-y;
  background-position:center;
  background-size: 1920px 2500px;
}
header {
  font-family: 'Open Sans', 'Roboto', sans-serif;    
}
body {
  font-family: 'Open Sans', 'Roboto', sans-serif;
}

/* Menú desplegable cambio de idioma */
.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  background-color: #FFFFFF;
}

.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a {
  display: block;
  color: #000000;
  padding: 5px;
  text-decoration: none;
}
.dropdown-content a:hover {
  color: #FFFFFF;
  background-color: rgb(230,18,128);
}
.globe {
    display: inline-block;
    content: "";
    vertical-align: -.125em;
    background-image: url(globe_pink.png);
    background-size: 20px 20px;
    /* background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z' clip-rule='evenodd'/></svg>"); */
    background-repeat: no-repeat;
}
.check {
  background-image: url(check2.svg);
  background-size: 16px 16px;
}

/*----000----*/