/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

@font-face {
  font-family: "Arial Rounded MT";
  src: url("ArialRoundedMTBold.woff2") format("woff2"),
    url("ArialRoundedMTBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  /* background-color: #253442 !important;*/
}
.mb-20 {
  margin-bottom: 2rem;
}

.uppercase {
  text-transform: uppercase;
}
.center-block {
  margin: 0 auto;
  display: block;
}

.container {
  max-width: 680px;
  width: 100%;
  margin: auto;
}

/** Header */

/** MAIN **/

/** FOOTER **/

.site-footer-above-section-1 {
  background-color: var(--ast-global-color-1);
  color: white;
  padding: 20px;
}
.site-footer-above-section-2 {
  background-color: var(--ast-global-color-0);
  color: white;
  padding: 0;
  margin: 0;
  .footer-widget-area {
    margin: 0 !important;
  }
  h2 {
    padding: 20px;
    padding-bottom: 0;
  }
  #block-11 {
    padding: 0 20px;
  }

  iframe {
    width: 100%;
    height: 280px;
  }
}
ul.social li a {
  font-weight: normal !important;
}

.site-footer-above-section-3 {
  aside .widget {
    background-color: var(--ast-global-color-1);
    margin: 0;
    padding: 20px;
    color: white;
    ul li {
      text-align: center;
      display: block;
      font-size: 1.3rem;
      text-transform: uppercase;
      a {
        color: white;
        font-weight: 900;
      }
    }
  }
  h2 {
    color: white;
  }
  #block-15 {
    margin-bottom: 10px;
  }
}

footer .widget {
  font-size: 1.13rem;
  h2 {
    color: white;
    text-align: center;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 2.3rem;
    font-size: 2.3rem;
  }
}

.ast-builder-footer-grid-columns {
  grid-column-gap: 15px !important;
}

/** PAGES */

.menu-menu-paginas-container {
  margin-bottom: 200px;
  ul {
    margin: 80px auto;
    max-width: 400px;
    width: 100%;
    list-style: none;
    li {
      margin-bottom: 20px;

      text-align: center;
      font-weight: 900;
      font-size: 1.3rem;
      background-color: var(--ast-global-color-1);
      padding: 10px;
      border-radius: 50px;
      text-transform: uppercase;
      &:nth-child(even) {
        background-color: var(--ast-global-color-0);
      }
      a {
        color: white;
        text-decoration: none;
        font-size: 2rem;
      }
    }
  }
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  max-width: 100px !important;
}

@media screen and (min-width: 1024px) {
}
.dd-button {
  display: none;
}
.dd-input {
  display: none;
}

@media screen and (max-width: 767px) {
  #masthead .site-logo-img .astra-logo-svg,
  .ast-header-break-point
    #ast-fixed-header
    .site-logo-img
    .custom-logo-link
    img {
    max-width: 60px !important;
    width: 60px !important;
    height: 60px !important;
  }
  [data-section="section-header-mobile-trigger"]
    .ast-button-wrap
    .mobile-menu-toggle-icon
    .ast-mobile-svg {
    width: 40px;
    height: 40px;
  }
  .ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile {
    flex-direction: column;
  }
  .titulo-lateral {
    text-align: center;
    font-size: 1.5rem;
    margin: 20px auto;
  }

  /* Dropdown */

  .dropdown {
    position: relative;
    display: block;
  }

  .dd-button {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 10px 30px 10px 20px;
    background-color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
  }

  .dd-button:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
  }

  .dd-button:hover {
    background-color: #eeeeee;
  }

  .dd-menu {
    position: absolute;
    top: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    margin: 2px 0 0 0;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    list-style-type: none;
  }

  .dd-input + .dd-menu {
    display: none;
  }

  .dd-input:checked + .dd-menu {
    display: block;
    width: 100%;
    margin: 0;
  }

  .dd-menu li {
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
  }

  .dd-menu li:hover {
    background-color: #f6f6f6;
  }

  .dd-menu li a {
    display: block;
    margin: -10px -20px;
    padding: 10px 20px;
  }

  .dd-menu li.divider {
    padding: 0;
    border-bottom: 1px solid #cccccc;
  }
}

/** NOU **/
#ast-scroll-top {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  font-size: 22px;
}

#primary {
  font-family: "Varela Round";
  background-color: #fff;
}
.text-right {
  text-align: right;
}
.title {
  color: #ffa82b;
  font-size: 2rem;
  font-weight: 900;
  line-height: normal;
  padding: 40px 0;
  span.millennials {
    font-size: 3rem;
    color: #fff;
    display: block;

    &.blue {
      color: #253442;
    }
    span {
    }
  }
}

a.logo {
  display: block;
  border-bottom: 2px solid #fff;
  padding: 20px 0;
}

.logo img {
  max-width: 300px;
  display: block;
  padding: 20px 0;
  margin: auto;
}

.top-home {
  background-color: #253442 !important;
  font-family: "Varela Round";
  text-align: center;
  color: white;
  font-size: 2rem;
  .container {
    max-width: 768px;
  }
  h1,
  h2,
  p {
    color: white;
    margin: 0;
    strong {
      color: #ffa82b;
    }
  }
  h1 {
    font-family: "Arial Rounded MT";
    font-size: 2.7rem;
    padding: 50px 0;
  }
  h2 {
    font-family: "Arial Rounded MT";

    font-size: 2.7rem;
    color: #459989;
  }
  p {
    padding: 20px 0;
  }
}

.destacats {
  background-color: #253442 !important;
  font-family: "Varela Round";
  padding-top: 10px;
  padding-bottom: 80px;

  color: #fff;
  .destacat {
    cursor: pointer;
    background-color: #459989;
    margin-bottom: 40px;
    border-radius: 40px;
    color: #fff;
    padding: 40px;
    max-width: 600px;
    margin: 80px auto 40px;
    .separador {
      border-radius: 20px;
      width: 90px;
      display: block;
      padding: 18px 0;
      margin-bottom: 10px;
      background-color: #253442 !important;
    }
    h3 {
      color: #253442;
      text-align: left;
      font-weight: normal;
      font-size: 3.2rem;
      text-transform: uppercase;
    }
    p {
      font-size: 2.3rem;
      font-weight: 500;
      line-height: normal;
    }
    &.pink {
      background-color: #e36578 !important;
      + .text-inferior {
        color: #e36578 !important;
      }
    }
    &.green {
      background-color: #459989 !important;
      + .text-inferior {
        color: #459989 !important;
      }
    }
    &.yellow {
      background-color: #ffa82b !important;
      + .text-inferior {
        color: #ffa82b !important;
      }
    }
  }
  .text-inferior {
    text-align: center;
    color: white;
    font-size: 2rem;
    max-width: 680px;
    margin: 0 auto;
    line-height: normal;
  }
}
.logo-redes {
  display: block;
  margin: 20px auto;
  text-align: center;
}

.page-id-29 .destacats .destacat {
  background-color: #e36578 !important;
}

.estrategies {
  padding: 80px 0;
  .container {
    max-width: 960px;
  }
  h2 {
    font-family: "Arial Rounded MT";
    font-size: 2.7rem;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 60px;
  }
  .post {
    text-align: center;
    font-size: 1.3rem;
    h4 {
      font-size: 1.13rem;
      font-weight: 500;
    }
  }
}

.support {
  font-family: "Arial Rounded MT";

  background-color: #253442 !important;
  padding: 40px 0;
  font-size: 2.3rem;
  color: #ffa82b;
}

.equip {
  padding-bottom: 80px;
  background-color: white;
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .person {
    font-family: "Arial Rounded MT";

    text-align: center;
    color: #459989;
    font-weight: bold;
    p {
      font-size: 1.7rem;
      font-family: "Arial Rounded MT";
    }
    h4 {
      font-family: "Arial Rounded MT";

      font-size: 3rem;
    }
  }
}
.site-above-footer-wrap {
  background-color: #ffa82b !important;
  background-image: none !important;
  min-height: auto !important;
}

.ast-builder-menu-mobile
  .main-navigation
  .main-header-menu
  .menu-item
  > .menu-link {
  color: white;
  font-size: 20px;
}

[data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .mobile-menu-toggle-icon
  .ast-mobile-svg {
  width: 40px;
  height: 40px;
}
.millennials {
  .container {
    max-width: 960px;
  }
  .title {
    font-family: "Arial Rounded MT";
    font-size: 2.3rem;
    margin: 0 auto;
    max-width: 400px;
  }
}

.millennials-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
  padding: 80px 0;
  background-color: #253442 !important;
  color: white;
  text-align: center;
  font-size: 1.5rem;
  div {
    margin-bottom: 80px;
  }
  h4 {
    font-size: 1.5rem;
    color: white;
    margin: 0;
    margin-top: 10px;
  }
  .separator {
    display: block;
    color: white;
    line-height: normal;
  }
  a {
    color: #ffa82b;
  }
  img {
    height: 145px;
  }
}
.motiva {
  color: #ffa82b;
  font-size: 3rem;
  line-height: normal;
  margin: auto;
  margin-top: 40px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  img {
    margin-top: 20px;
  }
}

.galeria {
  padding: 80px 0;
  background-color: #253442 !important;
  h4 {
    font-family: "Arial Rounded MT";
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 3rem;
  }
  .container {
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px; /* Puedes ajustar el espacio entre imágenes */
  }
}

.video,
.clients {
  padding: 80px 0;
  background-color: #253442 !important;

  .player {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .container {
    max-width: 960px;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 100px;
  }
  .post {
    text-align: center;
    font-size: 1.3rem;
    position: relative;
    h4 {
      font-size: 1.7rem;
      font-weight: bold;
      color: white;
    }
    img.img-estrategies {
      position: absolute;
      width: 80px;
      left: -20px;
      top: 0;
      border-radius: 100%;
      border: 0 !important;
    }
  }
  h4 {
    font-family: "Arial Rounded MT";
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 3rem;
  }
}

.clients .post img {
  border: 2px solid #fff;
}
.clients .post h4 {
  text-transform: none;
  font-size: 1.3rem;
  margin-bottom: 8px;
  padding-left: 20px;
}

#ast-scroll-top {
  color: white !important;
}

.page-id-13 .clients .post img {
  border: 0px !important;
  border-radius: 40px;
}
.title {
  max-width: 300px;
  margin: 40px auto 0;
}

.carousel {
  perspective: 200px;
  height: 800px;
}

.carousel .carousel-item {
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px !important; /* Más ancho */
  height: 710px !important; /* Más alto (9:16) */
}

.youtube-vertical-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.youtube-vertical-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Evita que los secundarios se vean demasiado pequeños */
.carousel .carousel-item img,
.carousel .carousel-item iframe {
  max-height: 100%;
  object-fit: cover;
}

.carousel .carousel-item:not(.active) iframe {
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .ast-desktop-popup-content {
    height: 100vh;
  }
  .ast-builder-menu-mobile
    .main-navigation
    .main-header-menu
    .menu-item
    > .menu-link {
    font-size: 2.3rem;
    font-family: "Arial Rounded MT";
  }
  .ast-builder-menu-mobile.ast-builder-menu.ast-builder-menu-mobile-focus-item.ast-builder-layout-element.site-header-focus-item {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

.top-social {
  background-color: #459989;
  padding: 5px;
  .container {
    max-width: 775px;
    display: flex;
    justify-content: end;
  }
  img {
    width: 18px;
    margin-left: 15px;
  }
}

.page-id-29 .top-social {
  background-color: #e36578;
}
.page-id-103 .top-social {
  background-color: #ffa82b;
}

@media (min-width: 921px) {
  header {
    background-color: #253442 !important;
  }
  .ast-theme-transparent-header #masthead {
    position: relative !important;
    padding-top: 5px;
  }
}

.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
  background-color: rgba(37, 52, 66, 0.95);
}

nav#ast-desktop-site-navigation {
  background: none !important;
  box-shadow: none;
}

@media (max-width: 921px) {
  .ast-builder-menu-mobile
    .main-navigation
    .menu-item.current-menu-item
    > .menu-link,
  .ast-builder-menu-mobile
    .main-navigation
    .inline-on-mobile
    .menu-item.current-menu-item
    > .ast-menu-toggle,
  .ast-builder-menu-mobile
    .main-navigation
    .menu-item.current-menu-ancestor
    > .menu-link,
  .ast-builder-menu-mobile
    .main-navigation
    .menu-item.current-menu-ancestor
    > .ast-menu-toggle,
  .ast-builder-menu-mobile .main-navigation .main-header-menu,
  .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
  .ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu {
    background-color: rgba(37, 52, 66, 0.95);
  }
}
.ahfb-svg-iconset svg {
  width: 40px;
  height: 40px;
}

.video-featured {
  position: relative;
  margin-bottom: 2rem;
}
.video-featured img {
  width: 100%;
  border-radius: 1rem;
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.video-item img {
  width: 100%;
  border-radius: 0.75rem;
  transition: transform 0.3s ease;
}
.video-item:hover img {
  transform: scale(1.03);
}
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 1.3rem;
  padding: 0.5rem 1rem;
  border-radius: 50%;
  pointer-events: none;
}
.video-item a,
.video-featured a {
  position: relative;
  display: block;
}
.fancybox__container {
  z-index: 99999; /* asegura que se muestre sobre todo */
}

.fancybox-slide--video .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--iframe .fancybox-content {
  height: 100vh !important;
}

@media (max-width: 767px) {
  span.site-logo-img {
    display: none;
  }
  .ast-theme-transparent-header #masthead {
    padding-top: 20px;
  }
  .logo img {
    width: 200px;
  }
  .top-home {
    padding: 20px;
    h1 {
      font-size: 2.3rem;
      padding: 20px 0;
    }
    h2 {
      font-size: 2.13rem;
    }
    p {
      font-size: 1.5rem;
    }
  }
  .motiva {
    font-size: 2.13rem;
    margin-top: 20px;
  }
  .millennials,
  .support {
    padding: 20px;
    font-size: 1.5rem;
  }
  .millennials .title {
    padding: 0 20px;
    font-size: 2rem;
  }
  .millennials .title .millennials {
    padding: 0;
  }
  .destacats {
    padding: 20px;
    & .destacat {
      padding: 20px;
      border-radius: 20px;
      h3 {
        font-size: 2rem;
      }
      p {
        font-size: 1.6rem;
      }
      .separador {
        width: 60px;
        padding: 12px 0;
      }
    }
    .text-inferior {
      font-size: 1.5rem;
      line-height: 2.1rem;
    }
  }

  .estrategies {
    padding: 20px;
    .grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    h2 {
      font-size: 2rem;
    }
  }
  .equip {
    padding: 20px;
    margin-bottom: 0;
    & .person {
      h4 {
        font-size: 2rem;
      }
      p {
        font-size: 1.5rem;
      }
    }
  }
  .millennials-bottom {
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px 0 20px;
    div {
      margin-bottom: 40px;
    }
    img {
      height: 100px;
    }
  }
  .galeria,
  .clients,
  .video {
    padding: 20px;
    h4 {
      font-size: 2.5rem;
    }
    .grid {
      gap: 20px;
      grid-template-columns: repeat(1, 1fr);
      padding: 0 30px;
    }
  }

  .video,
  .clients {
    & .post {
      img.img-estrategies {
        width: 70px;
      }
    }
  }

  .galeria .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .logo-redes svg {
    max-width: 50px;
  }
}