html,body
{
  color: white;
  height:100%;
  width:100%;
  overflow-x: hidden;
    scroll-behavior: smooth;
}

.NavFijo
{
    position: fixed;
}

.textoNavT
{
  background-color: black;
  color: white;
  font-size: 1rem;
  text-align: center;
}

.textoNav
{
  color: white;
  font-size: 1rem;
  background-color: #a6b4d8;
  text-align: left;
}

.titulo
{
  text-align: center;
  color: #629dd1;
  font-size: 2.3rem;
}

.textoJustificado
{
  text-align: justify;
  color: #114f8c;
  font-size: 1.3rem;
}


.tituloCent
{
  text-align: center;
  color: #155390;
  font-weight: bold;
  font-size: 2.8rem;
  font-family:serif;
}

.subJustificado
{
  text-align: justify;
  font-weight: bold;
  color: #155390;
  font-size: 1.3rem;
}

.subCentral
{
  text-align: center;
  font-weight: bold;
  color: #838e93;
  font-size: 2.2rem;
}

/* #629dd1 #000080*/

.tituloCentAzul
{
  text-align: center;
  color: white;
  font-size: 1.2rem;
  background-color:darkblue;
  border-color: #312F2F;
  border-width: 1px;
  border-style: solid;
}

/*
.portada_index
{
    background-color: #312F2F;
    overflow-x: hidden;
}
*/

.fondoInicio
{
    background-image: url(Imagenes/Fondo.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

.fondoCapsula
{
    background-image: url(Imagenes/fondocapsulades.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

.fondoB
{
    background-image: url(Imagenes/fondocapsulab.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;
}

.colorlogo
{
    
    background-color: #a6b4d8;
}

.responsiva
{
  border-radius: 7px;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.icono
{
  border-radius: 7px;
  width: 30px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: inline;
}

.responsiva80
{
  border-radius: 7px;
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.logoban
{
  width: 5rem;
  height: auto;
  justify-content: left;
  align-items: left;
  display: block;
}

.bordes
{
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
}

.botonMenu 
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;    
    height: 4rem;
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: #a6b4d8;
    border: 0;
    border-radius: 15px;
    color: white;
    cursor: pointer;
    z-index: 80;
}

.botonMenu:focus 
{
    outline: none;
}
        
.botonMenu:focus + .principal 
{
    transform: translateX(1rem);
}
        
nav.principal 
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 15rem;
    background-color: #a6b4d8;
    transform: translateX(15rem);
    transition: 1s all;
    z-index: 99;
}

nav.principal ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 99;
}
        
nav.principal a 
{
    display: block;
    color: white;
    padding: 1rem;
    transition: .5s all;
    z-index: 99;
}

nav.principal a:hover 
{
    text-decoration: none;
    background-color:#629dd1;
    z-index: 99;
}

p 
{
 -moz-animation: marquee 5s linear infinite;
 -webkit-animation: marquee 5s linear infinite;
 animation: marquee 5s linear infinite;
}

@-moz-keyframes marquee 
{
 0% 
 {
    transform: translateX(40%);
 }
 100% 
 {
    transform: translateX(-40%);
 }
}
      
@-webkit-keyframes marquee 
{
 0% 
 {
    transform: translateX(40%);
 }
 100% 
 {
    transform: translateX(-40%);
 }
}

@keyframes marquee 
{
 0% 
 {
      -moz-transform: translateX(40%);
      -webkit-transform: translateX(40%);
      transform: translateX(40%);
 }
 100% 
 {
      -moz-transform: translateX(-40%);
      -webkit-transform: translateX(-40%);
      transform: translateX(-40%);
 }
}

@keyframes show
{
 from 
 {
    opacity: 0;
    scale: 10%;
 }
 to
 {
    opacity: 1;
    scale: 100%;
 }
}

.jugadorefecto 
{
  view-timeline-name: --reveal;
  
  animation-name: show;
  animation-fill-mode: both;
  
  animation-timeline: --reveal;
  animation-range: entry 30% cover 60%;
}

.deg1
{
    background-color: #104f8c;
}
.deg2
{
    background-color: #126aa3;
}
.deg3
{
    background-color: #2599c3;
}
.deg4
{
    background-color: #6ac6e4;
}
.deg5
{
    background-color: #a6b4d8;
}

.whats
{ 
    display: inline-block;
    background-color:#25d366; 
    color:#FFF; 
    padding:10px 20px; 
    border-radius:5px; 
    text-align:center; 
    text-decoration:none; 
    font-size: 1.5rem;
}

.correo
{ 
    display: inline-block;
    background-color:#267cb5; 
    color:#FFF; 
    padding:10px 20px; 
    border-radius:5px; 
    text-align:center; 
    text-decoration:none; 
    font-size: 1.5rem;
}


@keyframes show
{
 from 
 {
    opacity: 0;
    scale: 10%;
 }
 to
 {
    opacity: 1;
    scale: 100%;
 }
}

.efectoScroll 
{
  view-timeline-name: --reveal;
  
  animation-name: show;
  animation-fill-mode: both;
  
  animation-timeline: --reveal;
  animation-range: entry 30% cover 60%;
}
 
.escala
{
  border-radius: 7px;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
  box-shadow: #629dd1 0 0 0px 0px;
}

.escala:hover
{
  box-shadow: #629dd1 0 0 20px 5px;
}

.scale-up-horizontal-right
{
    animation: scale-up-horizontal-right 3s;
} 

@keyframes scale-up-horizontal-right
{0%{transform:scaleX(.4);transform-origin:right center}100%{transform:scaleX(1);transform-origin:right center}}


.carru
{
  display: flex;
  width: 600px;
  height: auto;
    place-content: center;
}

.carru img
{
  width: 0px;
  flex-grow: 1;
  object-fit: cover;
  opacity: .8;
  transition: .5s ease;
}

.carru img:hover
{
  cursor: crosshair;
  width: 300px;
  opacity: 1;
  filter: contrast(120%);
}