body {
  background-color: #a77009;
  font-family: 'Poppins', sans-serif; }

header {
  display: grid;
  grid-template-rows: auto auto;
  text-align: center;
  background-color: #523e26;
  color: #e8cfc1; }
  header a {
    font-size: larger; }
  header .navbar-brand {
    font-size: larger; }
  header .bg-light {
    --bs-bg-opacity: 0;
    background-color: #523e26 !important; }
  header .navbar-light .navbar-brand {
    color: #e8cfc1; }
    header .navbar-light .navbar-brand:hover {
      color: #a77009; }
  header .navbar-light .navbar-nav .nav-link {
    color: #e8cfc1; }
    header .navbar-light .navbar-nav .nav-link:hover {
      color: #a77009; }
  header .dropdown-menu {
    background-color: #523e26;
    color: #e8cfc1; }
    header .dropdown-menu:hover {
      color: #a77009; }
  header .dropdown-item {
    color: #e8cfc1; }
    header .dropdown-item:hover {
      color: #a77009;
      background-color: #523e26; }
      header .dropdown-item:hover.active {
        color: #ce6957; }
        header .dropdown-item:hover.active:hover {
          color: #a77009; }
  header .dropdown-item.active, header .dropdown-item:active {
    color: #ce6957;
    text-decoration: none;
    background-color: #523e26; }
  header .navbar-light .navbar-nav .nav-link.active, header .navbar-light .navbar-nav .show > .nav-link {
    color: #e8cfc1; }
    header .navbar-light .navbar-nav .nav-link.active:hover, header .navbar-light .navbar-nav .show > .nav-link:hover {
      color: #a77009; }
    header .navbar-light .navbar-nav .nav-link.active.active, header .navbar-light .navbar-nav .show > .nav-link.active {
      color: #ce6957; }
      header .navbar-light .navbar-nav .nav-link.active.active:hover, header .navbar-light .navbar-nav .show > .nav-link.active:hover {
        color: #a77009; }
  header .navbar-light .navbar-nav .nav-link:focus, header .navbar-light .navbar-nav .nav-link:hover {
    color: #e8cfc1; }
  header .navbar-brand:focus {
    color: #e8cfc1; }
  header nav .nav-imagen {
    width: 8%;
    margin-left: 1%; }
  header .navbar-light .navbar-nav .nav-link:hover {
    color: #a77009; }

.presentacion {
  display: grid;
  grid-template-areas: "imagen-top imagen-top imagen-top"
 "titulos titulos alan";
  background-image: url("../fotos/fondo.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  color: #e8cfc1; }
  .presentacion .titulos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20%;
    margin-right: 18%;
    grid-area: titulos; }
    .presentacion .titulos .guerra {
      color: #ff4949; }
  .presentacion .imagen {
    background-image: url("../fotos/fondo3.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    grid-area: alan; }
  .presentacion .imagen-top {
    background-image: url("../fotos/fondo2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 23px;
    grid-area: imagen-top; }

.video {
  display: grid;
  grid-template-areas: "titulos trailer";
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #e8cfc1; }
  .video .video-titulos {
    grid-area: titulos;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 15%; }
    .video .video-titulos .futuro {
      color: #ff4949; }
    .video .video-titulos h5 {
      color: #f2be99; }
  .video .video-trailer {
    height: 250px;
    grid-area: trailer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 15%; }
    .video .video-trailer iframe {
      max-width: 100%;
      max-height: 100%; }

.carrusel {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin-left: 35%;
  margin-right: 35%;
  color: #e8cfc1; }
  .carrusel .carrusel-titulos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10%; }
  .carrusel h5 {
    color: #ff4949; }

.conoceme {
  height: 633px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #e8cfc1;
  margin-top: 5%;
  background-image: url("../fotos/conoceme.jpg");
  background-repeat: no-repeat;
  background-size: cover; }
  .conoceme h1 {
    color: #f2be99; }
  .conoceme .conoceme-titulos-y-texto {
    margin-left: 15%; }
  .conoceme .conoceme-texto {
    margin-top: 5%; }

.opiniones {
  margin-top: 5%;
  display: grid;
  grid-template-areas: "titulo titulo titulo"
 "joan peter hugh";
  color: #e8cfc1; }
  .opiniones .opiniones-titulos {
    grid-area: titulo; }
  .opiniones h5 {
    color: #ff4949; }
  .opiniones .opiniones-joan {
    margin-top: 5%;
    margin: 3%;
    grid-area: joan;
    background-color: #d67747;
    display: grid;
    grid-template-areas: "foto nombre nombre nombre nombre nombre estrellas estrellas estrellas estrellas "
 "texto texto texto texto texto texto texto texto texto texto"; }
    .opiniones .opiniones-joan .opiniones-joan-foto {
      grid-area: foto;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-joan .opiniones-joan-nombre-pais {
      grid-area: nombre;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-joan .opiniones-joan-estrellas {
      grid-area: estrellas;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-joan .opiniones-joan-texto {
      grid-area: texto;
      margin: 5%; }
  .opiniones .opiniones-peter {
    margin-top: 5%;
    margin: 3%;
    grid-area: peter;
    background-color: #d67747;
    display: grid;
    grid-template-areas: "foto nombre nombre nombre nombre nombre estrellas estrellas estrellas estrellas "
 "texto texto texto texto texto texto texto texto texto texto"; }
    .opiniones .opiniones-peter .opiniones-peter-foto {
      grid-area: foto;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-peter .opiniones-peter-nombre-pais {
      grid-area: nombre;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-peter .opiniones-peter-estrellas {
      grid-area: estrellas;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-peter .opiniones-peter-texto {
      grid-area: texto;
      margin: 5%; }
  .opiniones .opiniones-hugh {
    margin-top: 5%;
    margin: 3%;
    grid-area: hugh;
    background-color: #d67747;
    display: grid;
    grid-template-areas: "foto nombre nombre nombre nombre nombre estrellas estrellas estrellas estrellas "
 "texto texto texto texto texto texto texto texto texto texto"; }
    .opiniones .opiniones-hugh .opiniones-hugh-foto {
      grid-area: foto;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-hugh .opiniones-hugh-nombre-pais {
      grid-area: nombre;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-hugh .opiniones-hugh-estrellas {
      grid-area: estrellas;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .opiniones .opiniones-hugh .opiniones-hugh-texto {
      grid-area: texto;
      margin: 5%; }

.formulario {
  height: 633px;
  margin-top: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../fotos/fondo-formulario.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-areas: "imagen formulario";
  color: #f2be99; }
  .formulario .formulario-imagen {
    margin: 5%;
    grid-area: imagen; }
  .formulario .formulario-excel {
    margin: 5%;
    grid-area: formulario; }
    .formulario .formulario-excel .mb-3 {
      margin: 5%;
      display: flex;
      justify-content: center; }
      .formulario .formulario-excel .mb-3 .form-control {
        width: 50%; }
    .formulario .formulario-excel .boton {
      display: flex;
      justify-content: center; }
      .formulario .formulario-excel .boton button {
        background-color: #ff4949;
        border: none;
        color: #e8cfc1; }

.pie {
  padding: 2px;
  background-color: #523e26;
  color: #e8cfc1; }
  .pie .pie-imagenes {
    margin: 1%; }
  .pie p {
    margin: 1%; }

.texto-general {
  margin: 1%;
  color: #e8cfc1;
  background-color: #d67747; }
  .texto-general p {
    margin: 2%; }

.biografia-card {
  display: grid;
  grid-template-areas: "texto imagen"; }
  .biografia-card .biografia-card-texto {
    grid-area: texto; }
  .biografia-card .card {
    margin: 2%;
    grid-area: imagen;
    background-color: #d67747;
    border: 1px solid #e8cfc1; }
    .biografia-card .card img {
      max-width: 150px;
      max-height: 160px; }
    .biografia-card .card .card-body {
      max-width: 150px; }

.logros-card {
  display: grid;
  grid-template-areas: "imagen texto"; }
  .logros-card .logros-card-texto {
    grid-area: texto; }
  .logros-card .card {
    margin: 2%;
    grid-area: imagen;
    background-color: #d67747;
    border: 1px solid #e8cfc1; }
    .logros-card .card img {
      max-width: 300px;
      max-height: 310px; }
    .logros-card .card .card-body {
      max-width: 300px; }

.reconocimiento-card-casa {
  display: grid;
  grid-template-areas: "texto imagen"; }
  .reconocimiento-card-casa .reconocimiento-card-casa-texto {
    grid-area: texto; }
  .reconocimiento-card-casa .card {
    margin: 2%;
    grid-area: imagen;
    background-color: #d67747;
    border: 1px solid #e8cfc1; }
    .reconocimiento-card-casa .card img {
      max-width: 200px;
      max-height: 210px; }
    .reconocimiento-card-casa .card .card-body {
      max-width: 200px; }

.reconocimiento-card-universidad {
  display: grid;
  grid-template-areas: "imagen texto"; }
  .reconocimiento-card-universidad .reconocimiento-card-universidad-texto {
    grid-area: texto; }
  .reconocimiento-card-universidad .card {
    margin: 2%;
    grid-area: imagen;
    background-color: #d67747;
    border: 1px solid #e8cfc1; }
    .reconocimiento-card-universidad .card img {
      max-width: 150px;
      max-height: 200px; }
    .reconocimiento-card-universidad .card .card-body {
      max-width: 150px; }

.reconocimiento-carrusel {
  max-height: 633px;
  margin-top: 2%;
  background-image: url("../fotos/reconocimiento-fondo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  color: #e8cfc1; }
  .reconocimiento-carrusel h2 {
    margin: 2%; }
  .reconocimiento-carrusel .carousel-item {
    height: 500px;
    max-width: 900px;
    margin-top: 3%; }
    .reconocimiento-carrusel .carousel-item img {
      max-width: 900px;
      max-height: 400px; }
  .reconocimiento-carrusel .carousel-inner {
    display: flex;
    justify-content: center; }
  .reconocimiento-carrusel .carousel-control-prev {
    display: flex;
    justify-content: flex-end; }
  .reconocimiento-carrusel .carousel-control-next {
    display: flex;
    justify-content: flex-start; }
  .reconocimiento-carrusel .carousel-caption {
    color: #e8cfc1; }
  .reconocimiento-carrusel .carousel-indicators [data-bs-target] {
    background-color: #e8cfc1; }

@media screen and (max-width: 987px) {
  .video .video-titulos {
    margin-left: 5%; }
  .video .video-trailer {
    margin-right: 5%; }
  .presentacion .imagen {
    max-width: 60%; }
  .carrusel {
    margin-left: 20%;
    margin-right: 20%; } }

@media screen and (max-width: 768px) {
  .video .video-titulos {
    margin-left: 2%; }
  .video .video-trailer {
    margin-right: 2%; }
  h1 {
    font-size: x-large; }
  h2 {
    font-size: larger; }
  h3 {
    font-size: large; }
  h4 {
    font-size: medium; }
  h5 {
    font-size: small; }
  h6 {
    font-size: small; }
  p {
    font-size: small; }
  .carrusel {
    margin-left: 15%;
    margin-right: 15%; }
    .carrusel .d-md-block {
      display: block !important; }
  .reconocimiento-carrusel .carousel-item {
    height: 410px; }
  .reconocimiento-carrusel .carousel-control-next, .reconocimiento-carrusel .carousel-control-prev {
    display: flex;
    align-items: flex-start;
    margin-top: 30%; }
  .reconocimiento-carrusel .d-none {
    display: block !important; } }

@media screen and (max-width: 570px) {
  header nav .nav-imagen img {
    width: 40px;
    height: 44px; }
  h1 {
    font-size: larger; }
  h2 {
    font-size: large; }
  h3 {
    font-size: medium; }
  h4 {
    font-size: small; }
  .video {
    display: flex;
    flex-direction: column; }
  .carrusel {
    margin-left: 10%;
    margin-right: 10%; }
  .opiniones {
    display: flex;
    flex-direction: column; }
  .logros-card {
    display: flex;
    flex-direction: column; }
    .logros-card .card {
      max-width: 300px; }
  .reconocimiento-carrusel .carousel-item {
    height: 350px; } }

@media screen and (max-width: 400px) {
  .biografia-card {
    display: flex;
    flex-direction: column; }
    .biografia-card .card {
      max-width: 150px; }
  .reconocimiento-card-casa {
    display: flex;
    flex-direction: column; }
    .reconocimiento-card-casa .card {
      max-width: 200px; }
  .reconocimiento-card-universidad {
    display: flex;
    flex-direction: column; }
    .reconocimiento-card-universidad .card {
      max-width: 150px; }
  .reconocimiento-carrusel .carousel-item {
    height: 300px; } }

@media screen and (max-width: 300px) {
  header a {
    font-size: medium; }
  header .navbar-brand {
    font-size: medium; }
  header nav .nav-imagen img {
    width: 30px;
    height: 34px; }
  .carrusel {
    margin-left: 5%;
    margin-right: 5%; }
  .reconocimiento-carrusel .carousel-control-next, .reconocimiento-carrusel .carousel-control-prev {
    margin-top: 45%; } }