@charset "UTF-8";
/*!
* Start Bootstrap - Creative v7.0.7 (https://startbootstrap.com/theme/creative)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-creative/blob/master/LICENSE)
*/
/*!
 * Bootstrap  v5.2.3 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange:  #de5a6c;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary:  #de5a6c;
  --bs-azul-oscuro:#1c325d;
  --bs-azul-claro: #00abec;
  
  --bs-azul-logo:#0093d1;
  --bs-rojo-sos: #F04D68;
  --bs-negro-sos:  #1c1c1b;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 222, 90, 108;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: Akrobat;
  --bs-font-monospace: Akrobat;
  --bs-font-menu: Akrobat;
  --bs-font-color-menu: white;
  --bs-alto-principal-pc: 84vh;
  --bs-alto-principal-movil: 21vh;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: Roboto;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color:  #de5a6c;
  --bs-link-hover-color: #84ccf1;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body{ background:#fff;
    font-family: 'roboto', sans-serif;
    overflow-x:hidden;
}

.formulario{
	padding:30px 20px 0 0;
	display:block;
  font-family: var(--bs-body-font-family)
}

.bg-blanco{
  background-color: white;
}

.bg-azullogo{
  background-color: var(--bs-azul-logo);
}

.bg-negro{
  background-color: var(--bs-negro-sos);
  
}



/* Versión móvil */
.banner{
  background-color: var(--bs-negro-sos);
  background-image: url("../images/2025/Banner2025-2.jpg?");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  height: 30vh;
}

.espaciador{
  height: 0vh;
}

.card-body{
  height: auto;
}


.texto-tarjeta{
  /* margin: 40px 0; */
  font-family: var(--bs-body-font-family);
  font-size: 20px !important;
  color: var(--bs-negro-sos);
  text-align: center;
  line-height: 32px !important;
  /*font-weight: bold;*/
  text-shadow: var(--bs-gray-500);
}

.box-mensaje{
  background: rgb(232,232,238);
  background: linear-gradient(90deg, rgb(46, 46, 47) 0%, rgb(84, 84, 89) 51%, rgb(35, 36, 36) 100%);
  min-height: 15vh;
  display: flex;
  align-content: center;
  align-items: center;
  border-radius: 10px;
}

.negrita{
  font-family: var(--bs-body-font-family);
  font-weight: 700;
}

.icono-redes{
  width: 25px;
  height: 25px;
  float: left;
}

.carrusel-fotos{
  position: relative;
  width: 100%;
  overflow: hidden;
}

/*versión tableta*/
@media (min-width: 767px) {
  .card-body{
    height: 71vh;
  }
  .box-mensaje{
    min-height: 40vh;
  }
  .texto-tarjeta{
    font-size: 20px !important;
  }
  .banner{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    height: 79vh;
  }
  .texto-tarjeta{
    /* margin: 40px 0; */
    font-size: 24px !important;
  }
  
}

/*versión pc*/
@media (min-width: 992px) {
  .banner{
    background-image: url("../images/2025/Banner2025-2.jpg?");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    height: 87vh;

  }
  .espaciador{
    height: 2vh;
  }
  .card-body{
    height: 46vh;
  }
  .texto-tarjeta{
    /* margin: 40px 0; */
    font-size: 24px !important;
 
  }
  .box-mensaje{
    min-height: 25vh;
  }
  .icono-redes{
    width: 50px;
    height: 50px;
    float: left;
  }
 
}
/* Versión PCs más grandes */
@media (min-width: 1600px) {
  .card-body{
    height: 22vh;
  }

  .box-mensaje{
    min-height: 25vh;
  }
}

.texto-centrado{
  text-align: center;
}
.carrusel-fotos{
  background-color: var(--bs-negro-sos);
}

.lograr{
  background-color: var(--bs-azul-logo);
  color:#FFFFFF;
  font-size:18px;
}

.somos2 p{
  margin:0 !important;
}
.somos2{
  -webkit-border-radius: 15px;
border-radius: 15px;
  color: black;
  background-color: #FFFFFF;
 /*  margin-left:150px; */
  height:100px;
  text-align:center;
  font-weight:bold;
  padding:4px 35px 15px 35px;
  border: 1px solid #0080B0;
  letter-spacing:5px;
  -webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.somos2:hover{
-webkit-box-shadow: 0 0 15px 5px #DEDEDE;
box-shadow: 0 0 15px 5px #DEDEDE;
  -webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.somos2 p:nth-child(2){
  font-size:44px;
  font-weight:bold;
  line-height:35px;
  letter-spacing:2px;
  text-shadow: 3px 3px 16px #999999;
}

.boton{
  background: #F14E69;
  color:#FFFFFF;
  text-align:center;
  -webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 15px 5px #FFFFFF;
box-shadow: 0 0 15px 5px #FFFFFF;
border:2px solid #FFFFFF;
font-size:28px;
padding:10px 30px;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
font-family: 'roboto-bold', sans-serif;
}
.boton:hover{
-webkit-box-shadow: 0 0 25px 10px #FFFFFF;
box-shadow: 0 0 25px 10px #FFFFFF;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
cursor:pointer; 
}




.sub1{
  margin: 40px 0;
  font-size: 35px !important;
  color: #F04D68;
  text-align: center;
  line-height: 35px !important;
  font-weight: bold;
      
}
h2.f2-h2{
  margin: 40px 0;
  font-size: 32px;
  color: #F04D68;
  text-align: center;
  line-height: 40px !important;
  font-weight: bold;
     
}


/* Efecto voltear tarjeta */
 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
 /* versión móvil */

.tarjeta{
  background-color: transparent;
  /*   width: 300px;*/
    min-height: 35vh;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    
    color: var(--bs-negro-sos);
    /* display: flex;
    align-items: center; */
    padding:20px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    
}

.frente{
  background-color: #bbb;
  color: var(--bs-negro-sos);
  text-shadow: #fafafa;
  display: flex;
  align-items: center;
}
.frente:hover{
  color:var(--bs-azul-oscuro);
  cursor: pointer;
}
.atras{
  background-color: var(--bs-azul-logo);
  color: white;
}

 .flip-card {
  background-color: transparent;
/*   width: 300px;*/
  height: 35vh;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* Versión tableta */
@media (min-width: 767px) {
  .flip-card {
      height: 128vh;
    }
}
/* Versión PC */
@media (min-width: 992px) {
  .flip-card {
      height: 70vh;
    }
}


/* Versión PCs más grandes */
@media (min-width: 1600px) {
  .flip-card {
      height: 45vh;
    }
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: var(--bs-negro-sos);
  display: flex;
  align-items: center;
  padding:20px;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
  padding:20px;
  
} 

.flip-card-back p{
  text-align: left;
} 
/* Termina efecto voltear tarjeta */