.container {
  padding: 0 15px;
  margin: 0 auto;
  max-width: 100%;
  width: 100%; }
  @media (min-width: 576px) {
    .container {
      max-width: 540px; } }
  @media (min-width: 768px) {
    .container {
      max-width: 720px; } }
  @media (min-width: 992px) {
    .container {
      max-width: 960px; } }
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px; } }
  @media (min-width: 1400px) {
    .container {
      max-width: 1320px; } }
  @media (min-width: 1700px) {
    .container {
      max-width: 1652px; } }

.container-sm {
  padding: 0 15px;
  margin: 0 auto;
  max-width: 100%;
  width: 100%; }
  @media (min-width: 576px) {
    .container-sm {
      max-width: 340px; } }
  @media (min-width: 768px) {
    .container-sm {
      max-width: 320px; } }
  @media (min-width: 992px) {
    .container-sm {
      max-width: 560px; } }
  @media (min-width: 1200px) {
    .container-sm {
      max-width: 1000px; } }
  @media (min-width: 1400px) {
    .container-sm {
      max-width: 1080px; } }
  @media (min-width: 1700px) {
    .container-sm {
      max-width: 1252px; } }

.header {
  width: 100%;
  height: 118px;
  /*background-color #2F2E2E;*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99; }
  @media (min-width: 1199px) {
    .header {
      position: absolute;
      height: auto; } }
  .header__mobile {
    width: 100%;
    display: block;
    background-color: #ffffff; }
    @media (min-width: 1200px) {
      .header__mobile {
        display: none; } }
    .header__mobile .container {
      padding: 15px; }
    .header__mobile__top {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .header__mobile__top__logo {
        width: 271px;
        height: 88px; }
        .header__mobile__top__logo img {
          width: 100%; }
      .header__mobile__top__toggle {
        width: 43px;
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 1px solid #ad7516;
        border-radius: 4px;
        padding: 10px;
        background-color: #ffffff; }
        .header__mobile__top__toggle__bar {
          width: 100%;
          height: 2px;
          background-color: #5E5E5E;
          position: relative;
          transition: 0.3s; }
          .header__mobile__top__toggle__bar::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: -8px;
            left: 0;
            background-color: #5E5E5E;
            transition: 0.3s; }
          .header__mobile__top__toggle__bar::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: -8px;
            left: 0;
            background-color: #5E5E5E;
            transition: 0.3s; }
        .header__mobile__top__toggle--active {
          border: 1px solid transparent; }
          .header__mobile__top__toggle--active .header__mobile__top__toggle__bar {
            background-color: transparent; }
            .header__mobile__top__toggle--active .header__mobile__top__toggle__bar::before {
              top: 0;
              left: 0;
              transform: rotate(315deg); }
            .header__mobile__top__toggle--active .header__mobile__top__toggle__bar::after {
              top: 0;
              left: 0;
              transform: rotate(-315deg); }
    .header__mobile__contact {
      padding-top: 10px; }
      .header__mobile__contact__item {
        padding-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #FFFFFF;
        font-size: 18px;
        text-decoration: underline; }
        .header__mobile__contact__item__icon {
          width: 16px; }
          .header__mobile__contact__item__icon svg {
            width: 100%; }
      .header__mobile__contact p {
        padding-top: 5px;
        color: #FFFFFF;
        text-align: center;
        font-size: 18px;
        text-decoration: underline; }
    .header__mobile__bottom {
      padding-top: 60px;
      width: 100%;
      margin: auto; }
      .header__mobile__bottom p {
        color: #d00000;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
        line-height: 1.8em;
        letter-spacing: 0em; }
      .header__mobile__bottom p.green {
        color: #0EE62F; }
  .header__desktop {
    width: 100%;
    height: 100%;
    display: none; }
    @media (min-width: 1200px) {
      .header__desktop {
        display: block; } }
    .header__desktop__top {
      display: flex;
      justify-content: space-between;
      /*gap: 50px;*/
      padding: 33px 0; }
      .header__desktop__top__logo {
        width: 469px; }
        .header__desktop__top__logo img {
          width: 100%; }
      .header__desktop__top__contact h1 {
        width: 100%;
        font-size: 19px;
        color: #d00000;
        letter-spacing: normal;
        line-height: normal;
        font-weight: bold; }
      .header__desktop__top__contact__form {
        width: 100%;
        padding-top: 30px;
        display: grid;
        Color: #ffffff;
        grid-template-columns: repeat(2, 1fr); }
        .header__desktop__top__contact__form__item {
          display: flex;
          flex-direction: column; }
          .header__desktop__top__contact__form__item p {
            color: #FFFFFF;
            font-size: 14px;
            padding-bottom: 10px; }
          .header__desktop__top__contact__form__item__text {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #d00000;
            font-size: 22px;
            text-decoration: underline;
            font-weight: 800; }
            .header__desktop__top__contact__form__item__text__icon {
              width: 16px; }
              .header__desktop__top__contact__form__item__text__icon svg {
                width: 100%;
                height: 100%; }
        .header__desktop__top__contact__form__item_line {
          display: flex;
          flex-direction: column;
          border-left: 1px solid #d00000;
          border-right: 1px solid #d00000;
          padding: 0 20px; }
          .header__desktop__top__contact__form__item_line p {
            color: #d00000;
            font-size: 14px;
            padding-bottom: 10px; }
          .header__desktop__top__contact__form__item_line__text {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #d00000;
            font-size: 22px;
            text-decoration: underline;
            font-weight: 800; }
            .header__desktop__top__contact__form__item_line__text__icon {
              width: 16px; }
              .header__desktop__top__contact__form__item_line__text__icon svg {
                width: 100%;
                height: 100%; }
    .header__desktop__medium {
      display: flex;
      justify-content: center;
      width: 100%;
      background-color: #ad7516;
      padding: 5px 0; }
      .header__desktop__medium__bottom {
        border-right: 1px solid #d00000;
        color: #FFFFFF;
        font-size: 18px;
        line-height: 16px;
        padding: 15px; }
        @media (min-width: 1400px) {
          .header__desktop__medium__bottom {
            padding: 15px 50px; } }
        .header__desktop__medium__bottom--active {
          border-right: 1px solid #d00000;
          color: #FFFFFF;
          font-size: 18px;
          padding: 15px 50px;
          background-color: #2F2E2E; }
          .header__desktop__medium__bottom--active:hover {
            background-color: #FFFFFF;
            color: #2F2E2E; }
        .header__desktop__medium__bottom:hover {
          background-color: #FFFFFF;
          color: #2F2E2E; }
    .header__desktop__bottom {
      padding: 20px 0;
      width: 100%;
      margin: auto; 
    background-color: #ffffff;
  box-shadow: 2px 2px 2px 3px rgba(0, 0, 0, 0.2);}
      .header__desktop__bottom p {
        color: #d00000;
        font-size: 18px;
        text-align: center;
        font-weight: bold;
        line-height: 1.8em;
        letter-spacing: 0em; }
        @media (min-width: 1199px) {
          .header__desktop__bottom p {
            font-size: 28px; } }
      .header__desktop__bottom p.green {
        color: #000; }

/*.layout_whatsapp {
  position: fixed;
  top: 90%;
  right: 25px;
  z-index: 100; }
  @media (min-width: 1199px) {
    .layout_whatsapp {
      display: none; } }
  .layout_whatsapp img {
    width: 20px;
    height: 20px;}*/

    .layout_whatsapp {
  position: fixed;
  top: 90%;
  right: 25px;
  z-index: 100; }
  @media (min-width: 1199px) {
    .layout_whatsapp {
      display: none; } }
 
/* .layout_whatsapp img {
    width: 70px;
    height: 70px;}*/

.menu {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -200%;
  left: 0;
  background-color: #2F2E2E;
  z-index: 100;
  padding: 30px 0;
  transition: 0.3s; }
  .menu--active {
    top: 100px; }
  .menu .container {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 50px; }
    .menu .container a {
      font-size: 18px;
      color: #d00000;
      text-transform: uppercase;
      padding: 10px 0;
      transition: 0.3s; }
    .menu .container hr {
      width: 100%; }

.footer {
  width: 100%;
  /*background-color: #2F2E2E;*/
  background-image: url(https://fletex.com.mx/img/fondo-metal-footer.jpg);
  padding: 30px 0;
  position: absolute;
   }
  @media (min-width: 1199px) {
    .footer {
      padding: 20px 0;/*padding: 60px 0;*/ 
    } }
  .footer__contact h1 {
    letter-spacing: -0.05em;
    color: #ffffff;
    line-height: 0.8em;
    text-align: center;
    font-size: 34px;
    margin-top: 25px; }
    @media (min-width: 1199px) {
      .footer__contact h1 {
        font-size: 92px; } }
  .footer__contact h2 {
    line-height: 1em;
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: normal;
    padding-top: 10px;
    font-family: helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif; }
    @media (min-width: 1199px) {
      .footer__contact h2 {
        font-size: 22px;
        padding-top: 46px; } }
  .footer__contact__phone {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    padding: 20px 0; }
    @media (min-width: 1199px) {
      .footer__contact__phone {
        grid-template-columns: repeat(3, 1fr);
        width: 60%;
        padding: 40px 0;
        gap: 10px; } }
    .footer__contact__phone__item {
      display: flex;
      align-items: center;
      gap: 20px;
      color: #FFFFFF;
      font-size: 15px;
      text-decoration: underline; }
      @media (min-width: 1199px) {
        .footer__contact__phone__item {
          font-size: 16px;
          gap: 10px; } }
      .footer__contact__phone__item__icon {
        width: 25px; }
        .footer__contact__phone__item__icon svg {
          width: 100%; }
  .footer__contact__email_location {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 60px; }
    @media (min-width: 1199px) {
      .footer__contact__email_location {
        width: 60%;
        flex-direction: row;
        gap: 30px; } }
    .footer__contact__email_location__item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #FFFFFF;
      text-decoration: underline;
      font-size: 15px; }
      @media (min-width: 1199px) {
        .footer__contact__email_location__item {
          font-size: 21px; } }
      .footer__contact__email_location__item__icon {
        width: 25px; }
        .footer__contact__email_location__item__icon svg {
          width: 100%; }
  .footer hr {
    border: 1px solid #605E5E; }
  .footer__information {
    width: 100%;
    display: flex;
    text-align: center;
    flex-direction: column;
    padding-top: 25px; }
    @media (min-width: 1199px) {
      .footer__information {
        gap: 20px; } }
    .footer__information__legal {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      color: #fff;
      font-size: 18px; }
      @media (min-width: 1199px) {
        .footer__information__legal {
          gap: 20px;
          flex-direction: row; } }
      .footer__information__legal a {
        color: #fff;
        text-decoration: underline; }
    .footer__information p.text {
      color: #fff;
      font-size: 9px;
      padding-top: 20px; }

.service_home {
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 0.45); }
  @media (min-width: 1200px) {
    .service_home {
      height: 870px;
      background-color: transparent; } }
  .service_home video {
    height: 100%;
    width: 100%; }
    @media (min-width: 1199px) {
      .service_home video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative; } }
  .service_home__text {
    width: 100%;
    position: relative;
    top: -45%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.45);
    padding: 60px 0;
    display: none; }
    @media (min-width: 1199px) {
      .service_home__text {
        display: flex;
        align-items: center;
        justify-content: center; } }
    .service_home__text .container-sm {
      animation-name: animationService;
      animation-duration: 4s;
      animation-iteration-count: initial; }

@keyframes animationService {
  0% {
    transform: translateX(-200%); } }
    .service_home__text h1 {
      width: 100%;
      font-size: 53px;
      line-height: 1.3em;
      color: #FFFFFF;
      font-weight: normal;
      margin: auto;
      text-align: center;
      padding-bottom: 22px; }
      @media (min-width: 1700px) {
        .service_home__text h1 {
          width: 60%;
          font-size: 63px; } }
    .service_home__text h2 {
      letter-spacing: -0.01em;
      font-size: 36px;
      color: #FFFFFF;
      text-align: center;
      font-weight: normal;
      padding-bottom: 22px; }
    .service_home__text hr {
      width: 98px;
      margin: auto;
      border: 5px solid #d00000; }
  .service_home__text_two {
    width: 100%;
    border-top: 5px solid rgba(0, 0, 0, 0.45);
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center; }
    .service_home__text_two h1 {
      width: 100%;
      font-size: 26px;
      line-height: 1.3em;
      color: #FFFFFF;
      font-weight: normal;
      margin: auto;
      text-align: center;
      padding-bottom: 22px; }
    .service_home__text_two h2 {
      letter-spacing: -0.01em;
      font-size: 26px;
      color: #FFFFFF;
      text-align: center;
      font-weight: normal;
      padding-bottom: 22px; }
    .service_home__text_two hr {
      width: 98px;
      margin: auto;
      border: 5px solid #d00000; }

.information {
  width: 100%;
  height: auto;
  background-color: #2F2E2E;
  margin-top: 118px;
  padding-bottom: 10px; }
  @media (min-width: 1199px) {
    .information {
      display: none; } }

.clients {
  width: 100%;
  height: auto;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  padding: 20px 0; }
  @media (min-width: 1199px) {
    .clients {
      height: auto;
      position: relative;
      overflow: hidden;
      padding: 60px 0; } }
  .clients h1 {
    font-size: 23px;
    color: black;
    letter-spacing: normal;
    line-height: normal;
    padding: 20px 0;
    text-align: center; }
    @media (min-width: 1199px) {
      .clients h1 {
        font-size: 40px; } }
  .clients hr {
    width: 98px;
    margin: auto;
    border: 5px solid #d00000;
    animation-name: line;
    animation-duration: 4s;
    animation-iteration-count: initial; }
    @media (min-width: 1199px) {
      @keyframes line {
        0% {
          width: 0%; }
        100% {
          width: 98px; } } }
  .clients__grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding-top: 20px;
    animation-name: animation;
    animation-duration: 4s;
    animation-iteration-count: initial; }
    @media (min-width: 1199px) {
      .clients__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px; }
      @keyframes animation {
        0% {
          transform: scale(0.1); } } }
    @media (min-width: 1400px) {
      .clients__grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px; } }
    .clients__grid img {
      width: 100%;
      margin: auto; }
      @media (min-width: 1199px) {
        .clients__grid img {
          width: 175px; } }

.we_ensure {
  width: 100%;
  height: 100%;
  background-color: #e3e3e3;
  padding: 20px 30px; }
  @media (min-width: 1199px) {
    .we_ensure {
      margin: auto;
      padding: 0 0px 30px 0; } }
  .we_ensure .container-sm {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr); }
    @media (min-width: 1232px) {
      .we_ensure .container-sm {
        max-width: 100%;
        grid-template-columns: repeat(2, 1fr); } }
  .we_ensure--left {
    width: 20%;
    border: 2px solid #d00000;
    position: absolute; }
  .we_ensure__information {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    display: none;
    z-index: 2; }
    .we_ensure__information--left {
      width: 20%;
      position: relative;
      top: -40%;
      left: 54%; }
      @media (min-width: 2500px) {
        .we_ensure__information--left {
          top: -40%;
          left: 57%; } }
      .we_ensure__information--left__horizontal {
        border: 2px solid #d00000;
        position: relative;
        left: 30%; }
      .we_ensure__information--left__vertical {
        position: relative;
        border: 2px solid #d00000;
        transform: rotate(90deg);
        top: 50px; }
        @media (min-width: 1400px) {
          .we_ensure__information--left__vertical {
            top: 76px; } }
        @media (min-width: 2500px) {
          .we_ensure__information--left__vertical {
            top: 110px; } }
    .we_ensure__information--right {
      width: 20%;
      position: relative;
      bottom: -25%;
      left: 77%; }
      @media (min-width: 2500px) {
        .we_ensure__information--right {
          bottom: -20%;
          left: 74%; } }
      .we_ensure__information--right__horizontal {
        border: 2px solid #d00000;
        position: relative;
        top: 84px;
        left: -50px; }
      .we_ensure__information--right__vertical {
        position: relative;
        border: 2px solid #d00000;
        transform: rotate(90deg);
        top: 40px; }
        @media (min-width: 1400px) {
          .we_ensure__information--right__vertical {
            top: 12px; } }
        @media (min-width: 1800px) {
          .we_ensure__information--right__vertical {
            top: 0px; } }
        @media (min-width: 2500px) {
          .we_ensure__information--right__vertical {
            top: -35px; } }
    @media (min-width: 1232px) {
      .we_ensure__information {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 120px;
        animation-name: information;
        animation-duration: 2s;
        animation-iteration-count: initial; } }
    .we_ensure__information p {
      width: 30%;
      margin-left: auto;
      letter-spacing: normal;
      line-height: 1.9em;
      font-size: 20px;
      text-align: center;
      font-weight: normal; }
      .we_ensure__information p:hover {
        transform: scale(120%);
        transition: 0.5s; }

@keyframes information {
  0% {
    transform: translateX(200%); } }
  .we_ensure__title {
    width: 100%;
    margin: auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #e3e3e3; }
    @media (min-width: 1232px) {
      .we_ensure__title {
        width: 50%; } }
    .we_ensure__title__icon {
      width: 90px;
      animation-name: icon;
      animation-duration: 4s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        @keyframes icon {
          0% {
            transform: translateX(-50%);
            opacity: 1; }
          100% {
            opacity: 1; } } }
      .we_ensure__title__icon svg {
        width: 100%;
        height: 100%; }
    .we_ensure__title h1 {
      width: 80%;
      text-align: center;
      padding: 20px 0;
      font-size: 30px; }
      @media (min-width: 1199px) {
        .we_ensure__title h1 {
          font-size: 66px; } }
    .we_ensure__title hr {
      width: 98px;
      margin: auto;
      border: 5px solid #d00000;
      margin-bottom: 20px;
      animation-name: line;
      animation-duration: 4s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        @keyframes line {
          0% {
            width: 0%; }
          100% {
            width: 98px; } } }
    .we_ensure__title p {
      font-size: 20px;
      text-align: center;
      animation-name: sub;
      animation-duration: 5s;
      z-index: 0; }
      @media (min-width: 1199px) {
        .we_ensure__title p {
          width: 70%;
          font-size: 27px;
          padding-bottom: 80px; }
        @keyframes sub {
          0% {
            opacity: 0; }
          100% {
            opacity: 1; } } }

.price {
  width: 100%;
  height: 100%;
  background-color: #e3e3e3;
  padding: 20px 0; }
  @media (min-width: 1199px) {
    .price {
      padding: 53px 0; } }
  .price .container-sm {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    text-align: center; }
    @media (min-width: 1428px) {
      .price .container-sm {
        grid-template-columns: repeat(2, 1fr); } }
  .price h1 {
    font-size: 28px;
    color: #000;
    letter-spacing: normal;
    line-height: normal;
    font-weight: bold; }
    @media (min-width: 1199px) {
      .price h1 {
        font-size: 59px; } }
  .price__text {
    padding-top: 20px; }
    @media (min-width: 1199px) {
      .price__text {
        padding-bottom: 0px; } }
    .price__text h1 {
      font-size: 25px;
      color: #d00000;
      letter-spacing: normal;
      line-height: normal;
      font-weight: normal;
      text-align: center;
      padding-bottom: 20px; }
      @media (min-width: 1199px) {
        .price__text h1 {
          padding-bottom: 30px; } }
    .price__text__contact {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
      text-align: center; }
      @media (min-width: 1700px) {
        .price__text__contact {
          text-align: left; } }
      @media (min-width: 1199px) {
        .price__text__contact {
          grid-template-columns: repeat(2, 1fr); } }
      .price__text__contact p {
        color: white;
        font-size: 18px;
        padding-bottom: 10px; }
      .price__text__contact__link {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 23px;
        color: #ffffff;
        letter-spacing: normal;
        line-height: normal;
        font-weight: bold;
        text-decoration: underline;
        text-align: center; }
        @media (min-width: 1700px) {
          .price__text__contact__link {
            flex-direction: row; } }
        .price__text__contact__link__icon {
          width: 16px;
          margin: auto; }
          @media (min-width: 1700px) {
            .price__text__contact__link__icon {
              margin: 0 0 0 0; } }
          .price__text__contact__link__icon svg {
            width: 100%; }

.experts {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 500px; }
  @media (min-width: 1199px) {
    .experts {
      margin-top: 95px;
      height: 800px; } }
  .experts--prev {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    z-index: 2; }
    .experts--prev svg {
      width: 40px;
      fill: white;
      opacity: 0.5; }
  .experts--next {
    position: absolute;
    right: 15px;
    top: 50%;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    z-index: 2; }
    .experts--next svg {
      width: 40px;
      fill: white;
      opacity: 0.5; }
  .experts__form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .experts__form--video {
      flex-direction: column; }
      .experts__form--video video {
        width: 100%;
        height: 100%;
        position: relative;
        filter: brightness(60%);
        z-index: -1;
        object-fit: cover; }
      .experts__form--video h1 {
        width: 70%;
        position: absolute;
        font-size: 15px;
        color: #FFFFFF;
        text-align: center;
        text-shadow: 1px 1px 3px #000; }
        @media (min-width: 1199px) {
          .experts__form--video h1 {
            font-size: 35px;
            margin: auto;
            line-height: 45px;
            text-shadow: 3px 2px 5px #000 } }
      .experts__form--video span {
        color: #d00000; }
    .experts__form__button {
      position: absolute;
      bottom: 19%;
      margin-top: 60px;
      background-color: #ad7516;
      font-size: 23px;
      color: #000;
      font-weight: 700;
      padding: 13px 81px;
      border-radius: 12px;
      animation-name: butt;
      width: 308px;
      animation-duration: 2s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        @keyframes butt {
          0% {
            opacity: 0;
            width: 0%;
            color: transparent; }
          90% {
            opacity: 1;
            width: 6%; }
          100% {
            color: #000000; } } }
      .experts__form__button:hover {
        background-color: #FFFFFF;
        border: 1px solid black; }

.swiper {
  width: 100%;
  height: 100%; }
  .swiper .swiper-slide {
    width: 100% !important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center; }
  .swiper .swiper-pagination-bullet {
    background-color: #FFFFFF;
    opacity: 0.6; }
  .swiper .swiper-pagination-bullet-active {
    background-color: transparent;
    border: 1px solid white; }

.quote {
  width: 100%;
  height: 100%;
  padding: 30px 0; }
  @media (min-width: 1199px) {
    .quote {
      padding: 60px 0; } }
  .quote .container-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  .quote h1 {
    width: 50%;
    line-height: 25px;
    text-align: center;
    font-size: 24px;
    letter-spacing: -0.05em;
    color: #2F2E2E; }
    @media (min-width: 1199px) {
      .quote h1 {
        font-size: 52px;
        line-height: 52px; } }
  .quote p {
    width: 80%;
    line-height: 1.5em;
    text-align: center;
    font-size: 18px;
    letter-spacing: normal;
    color: #A0A09F;
    font-weight: bold;
    padding: 20px 0; }
    @media (min-width: 1199px) {
      .quote p {
        font-size: 22px; } }
  .quote hr {
    width: 98px;
    margin: auto;
    border: 5px solid #d00000;
    animation-name: line;
    animation-duration: 4s;
    animation-iteration-count: initial; }
    @media (min-width: 1199px) {
      @keyframes line {
        0% {
          width: 0%; }
        100% {
          width: 98px; } } }
  .quote__grid {
    margin-top: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    animation-name: animation;
    animation-duration: 4s;
    animation-iteration-count: initial; }
    @media (min-width: 1199px) {
      .quote__grid {
        width: 80%; }
      @keyframes animation {
        0% {
          transform: scale(0.1); } } }
    .quote__grid__modal_form {
      width: 100%; }
      .quote__grid__modal_form--one {
        background-image: url("../img/trailer1.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
      .quote__grid__modal_form--two {
        background-image: url("../img/trailer2.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
      .quote__grid__modal_form--three {
        background-image: url("../img/trailer3.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
      .quote__grid__modal_form--four {
        background-image: url("../img/trailer4.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
      .quote__grid__modal_form--five {
        background-image: url("../img/trailer5.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
      .quote__grid__modal_form--six {
        background-image: url("../img/trailer6.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat; }
      .quote__grid__modal_form__hoverModal {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background-color: #ebebdb;
        opacity: 0;
        padding: 10px; }
        @media (min-width: 1199px) {
          .quote__grid__modal_form__hoverModal {
            padding: 20px; } }
        .quote__grid__modal_form__hoverModal h2 {
          color: #000000;
          font-size: 18px;
          padding-bottom: 10px;
          text-align: center; }
        .quote__grid__modal_form__hoverModal p {
          color: #000000;
          font-size: 16px;
          padding: 0;
          font-weight: normal; }
        .quote__grid__modal_form__hoverModal:hover {
          opacity: 1;
          cursor: pointer;
          transition: all 600ms; }
    .quote__grid div {
      display: flex; }
  .quote__button {
    margin-top: 30px;
    background-color: #d00000;
    padding: 14px 50px;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    border-radius: 12px; }
    .quote__button:hover {
      background-color: #FFFFFF;
      border: 1px solid black;
      color: #000000; }

.why_we {
  width: 100%;
  height: 100%;
  background-color: #000000;
  padding: 83px 0px 83px 0px; }
  .why_we .container-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  .why_we h1 {
    width: 50%;
    color: #d00000;
    line-height: 0.8em;
    text-align: center;
    font-size: 34px;
    letter-spacing: -0.05em;
    padding-bottom: 30px; }
  .why_we hr {
    width: 98px;
    margin: auto;
    border: 5px solid #d00000;
    animation-name: line;
    animation-duration: 4s;
    animation-iteration-count: initial; }
    @media (min-width: 1199px) {
      @keyframes line {
        0% {
          width: 0%; }
        100% {
          width: 98px; } } }
  .why_we__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px; }
    @media (min-width: 1199px) {
      .why_we__grid {
        grid-template-columns: repeat(5, 1fr); } }
    .why_we__grid__content {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
      .why_we__grid__content__logo {
        width: 90px; }
        .why_we__grid__content__logo img {
          width: 100%; }
      .why_we__grid__content p {
        font-size: 17px;
        font-weight: normal;
        color: #A0A09F;
        line-height: 1.5em;
        text-align: center; }

.urgent {
  width: 100%;
  height: 100%;
  background-color: #d00000;
  padding: 30px 0; }
  @media (min-width: 1199px) {
    .urgent {
      padding: 60px 0 80px;
      position: relative; } }
  .urgent .container-sm {
    display: grid;
    grid-template-columns: repeat(1, 1fr); }
    @media (min-width: 1199px) {
      .urgent .container-sm {
        grid-template-columns: repeat(2, 1fr); } }
  .urgent__text__logo {
    margin: auto;
    width: 90px;
    animation-name: icon;
    animation-duration: 4s;
    animation-iteration-count: initial; }
    @media (min-width: 1199px) {
      .urgent__text__logo {
        margin-top: -26px;
        width: 130px; }
      @keyframes icon {
        0% {
          transform: translateX(-50%);
          opacity: 1; }
        100% {
          opacity: 1; } } }
    .urgent__text__logo svg {
      width: 100%; }
  .urgent__text h1 {
    font-size: 24px;
    color: #FFFFFF;
    letter-spacing: normal;
    line-height: 1em;
    text-align: center;
    font-weight: 1000; }
    @media (min-width: 1199px) {
      .urgent__text h1 {
        font-size: 54px;
        margin: auto; } }
  .urgent__contact {
    margin: auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    padding-top: 30px; }
    @media (min-width: 1199px) {
      .urgent__contact {
        padding-top: 0px; } }
    .urgent__contact p {
      color: white;
      font-size: 23px;
      padding-bottom: 10px;
      text-align: center; 
    margin-top: 50px;}
    .urgent__contact__link {
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 23px;
      color: #d00000;
      letter-spacing: normal;
      line-height: normal;
      font-weight: bold;
      text-decoration: underline;
      text-align: center; }
      .urgent__contact__link__icon {
        width: 16px; }
        .urgent__contact__link__icon svg {
          width: 100%; }

/* Ocultar el elemento en pantallas pequeñas */
@media (max-width: 767px) { /* Ajusta el valor según tus necesidades */
  .imagen {
    display: none; /* Oculta el elemento */
  }
}
.imagen {
  width: 100%;
  height: 200px;
  background-image: url("../img/galeriahome-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
 /* filter: brightness(60%);*/ 
}
  @media (min-width: 1199px) {
    .imagen {
      position: relative;
      z-index: -2;
      height: 500px; } }

.aviso_de_privacidad {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 90px 0; }
  .aviso_de_privacidad .container-sm {
    margin-top: 77px; }
    @media (min-width: 1199px) {
      .aviso_de_privacidad .container-sm {
        margin-top: 250px; } }
  .aviso_de_privacidad h1 {
    letter-spacing: normal;
    line-height: normal;
    font-size: 40px;
    color: #000000;
    text-align: center; }
    @media (min-width: 1199px) {
      .aviso_de_privacidad h1 {
        font-size: 47px; } }
  .aviso_de_privacidad p {
    text-align: justify;
    letter-spacing: normal;
    line-height: normal;
    color: #000000;
    font-weight: normal;
    padding-top: 29px; }
  .aviso_de_privacidad span {
    font-weight: bold; }

.hero_units {
  width: 100%;
  height: 100%; }
  @media (min-width: 1199px) {
    .hero_units {
      background-image: url("../img/unidades-flotilla.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    /*  background-position: center;
      background-attachment: fixed;*/
      position: relative;
      height: 600px;
      margin-top: 111px; } }
  .hero_units img {
    width: 100%; }
    @media (min-width: 1199px) {
      .hero_units img {
        display: none; } }
  .hero_units__banner_top {
    width: 100%;
    height: auto;
    /*background-color: rgba(250, 250, 250, 0.75);*/
    padding: 20px 0; }
    @media (min-width: 1199px) {
      .hero_units__banner_top {
        padding: 30px 0; } }
    .hero_units__banner_top h1 {
      width: 50%;
      line-height: 30px;
      text-align: center;
      font-size: 36px;
      letter-spacing: normal;
      color: #2F2E2E;
      padding-bottom: 20px;
      margin: auto;
      animation-name: text;
      animation-duration: 2s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        .hero_units__banner_top h1 {
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          font-size: 80px;
          line-height: 90px;
          margin-top: 150px;
          color: #ffffff; }
        @keyframes text {
          from {
            width: 0; }
          to {
            width: 100%; } } }
    .hero_units__banner_top hr {
      width: 98px;
      margin: auto;
      border: 5px solid #d00000;
      animation-name: line;
      animation-duration: 4s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        @keyframes line {
          0% {
            width: 0%; }
          100% {
            width: 98px; } } }
  .hero_units__banner_bottom {
    width: 100%;
    height: auto;
    background-color: #e3e3e3;
    padding: 20px 0; }
    @media (min-width: 1199px) {
      .hero_units__banner_bottom {
        position: relative;
        bottom: -45%;
        padding: 30px 0;
        z-index: 1; } }
    .hero_units__banner_bottom .container-sm {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column; }
    .hero_units__banner_bottom h2 {
      width: 90%;
      font-weight: bold;
      font-style: normal;
      font-size: 31px;
      line-height: normal;
      text-align: center;
      color: #FFFFFF;
      margin-bottom: 20px; }
      @media (min-width: 1199px) {
        .hero_units__banner_bottom h2 {
          font-size: 75px; 
          color: #000000;} }
    .hero_units__banner_bottom h3 {
      letter-spacing: 0em;
      text-align: center;
      font-size: 16px;
      color: #d00000;
      font-weight: normal; }
      @media (min-width: 1199px) {
        .hero_units__banner_bottom h3 {
          font-size: 21px; } }
    .hero_units__banner_bottom a {
      letter-spacing: 0em;
      text-align: center;
      font-size: 20px;
      color: #d00000;
      font-weight: 900;
      text-decoration: underline;
      padding-bottom: 20px; }
      @media (min-width: 1199px) {
        .hero_units__banner_bottom a {
          font-size: 29px; } }
    .hero_units__banner_bottom p {
      width: 80%;
      text-align: center;
      font-size: 20px;
      color: #FFFFFF;
      font-weight: 900;
      text-decoration: underline;
      line-height: normal; }
      @media (min-width: 1199px) {
        .hero_units__banner_bottom p {
          font-size: 29px;
          color: #000000; } }

.catalog {
  width: 100%;
  height: 100%;
  padding: 20px 0; }
  @media (min-width: 1199px) {
    .catalog {
      padding: 30px 0;
      margin-top: 300px; } }
  .catalog .container-sm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; }
    @media (min-width: 1199px) {
      .catalog .container-sm {
        grid-template-columns: repeat(3, 1fr); } }
  .catalog__units {
    width: 100%;
    background-color: #CFCFCF; }
    .catalog__units__imagen {
      width: 100%; }
      .catalog__units__imagen img {
        width: 100%; }
    .catalog__units__text h1 {
      font-size: 18px;
      color: #ad7516;
      text-align: center;
      font-weight: 900; }
    .catalog__units__text p {
      font-size: 13px;
      text-align: center;
      color: #000000;
      white-space: pre-line;
      padding-bottom: 5px; }
    .catalog__units:hover .catalog__units__imagen img {
      filter: opacity(70%); }

.hero_services {
  width: 100%;
  height: 100%; }
  @media (min-width: 1199px) {
    .hero_services {
      background-image: url("../img/nuestros-servicios.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      /*background-position: center;
      background-attachment: fixed;*/
      position: relative;
      height: 600px;
      margin-top: 110px; } }
  .hero_services img {
    width: 100%; }
    @media (min-width: 1199px) {
      .hero_services img {
        display: none; } }
  .hero_services__banner_top {
    width: 100%;
    height: auto;
    /*background-color: rgba(250, 250, 250, 0.75);*/
    padding: 20px 0; }
    @media (min-width: 1199px) {
      .hero_services__banner_top {
        padding: 30px 0; } }
    .hero_services__banner_top h1 {
      width: 50%;
      line-height: 30px;
      text-align: center;
      font-size: 36px;
      letter-spacing: normal;
      color: #2F2E2E;
      padding-bottom: 20px;
      margin: auto;
      animation-name: text;
      animation-duration: 2s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        .hero_services__banner_top h1 {
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          font-size: 70px;
          line-height: 90px;
          margin-top: 160px;
          color:#ffffff;
          text-shadow: 2px 1px 3px black; }
        @keyframes text {
          from {
            width: 0; }
          to {
            width: 100%; } } }
    .hero_services__banner_top hr {
      width: 98px;
      margin: auto;
      border: 5px solid #d00000;
      animation-name: line;
      animation-duration: 4s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        @keyframes line {
          0% {
            width: 0%; }
          100% {
            width: 98px; } } }

.we_services {
  width: 100%;
  height: 100%;
  padding: 30px 0; }
  @media (min-width: 1199px) {
    .we_services {
      padding: 60px 20%; } }
  .we_services .container-sm {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px; }
    @media (min-width: 1199px) {
      .we_services .container-sm {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px; } }
  .we_services__service {
    width: 100%; }
    .we_services__service__imagen {
      width: 55px;
      margin: auto; }
      @media (min-width: 1199px) {
        .we_services__service__imagen {
          width: 160px;
          margin: 0; } }
      .we_services__service__imagen img {
        width: 100%; }
    .we_services__service h1 {
      font-size: 20px;
      color: #5E5E5E;
      text-align: center;
      font-weight: 900; }
      @media (min-width: 1199px) {
        .we_services__service h1 {
          text-align: start; } }
    .we_services__service__text {
      width: 90%;
      padding-top: 30px;
      margin-left: 30px; }
      .we_services__service__text li {
        letter-spacing: normal;
        font-size: 20px;
        color: #A0A09F; }
      .we_services__service__text p {
        font-size: 20px;
        text-align: center;
        color: #000000;
        white-space: pre-line;
        padding-bottom: 5px; }

.contact {
  width: 100%;
  height: 100%;
  padding: 30px 0; }
  @media (min-width: 1199px) {
    .contact {
      padding: 60px 0; } }
  .contact .container-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  .contact a {
    line-height: 1.2em;
    text-align: center;
    font-size: 22px;
    color: #2F2E2E;
    text-decoration: underline;
    letter-spacing: 0;
    font-weight: 900; }
    @media (min-width: 1199px) {
      .contact a {
        font-size: 54px; } }
  .contact h1 {
    width: 70%;
    font-size: 22px;
    color: #2F2E2E;
    text-align: center;
    padding: 10px 0; }
    @media (min-width: 1199px) {
      .contact h1 {
        width: 100%;
        font-size: 75px;
        padding: 30px 0; } }
  .contact hr {
    width: 98px;
    margin: auto;
    border: 5px solid #d00000;
    animation-name: line;
    animation-duration: 4s;
    animation-iteration-count: initial; }
    @media (min-width: 1199px) {
      @keyframes line {
        0% {
          width: 0%; }
        100% {
          width: 98px; } } }

.image_services {
  width: 100%;
  height: 200px;
  background-image: url("../img/bg-nuestros-servicios.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed; }
  @media (min-width: 1199px) {
    .image_services {
      z-index: -2;
      height: 600px; } }

.hero_cobertura {
  width: 100%;
  height: 100%;
  background-image: url("../img/cobertura-de-fletes.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; }
  @media (min-width: 1199px) {
    .hero_cobertura {
      /*background-attachment: fixed;*/
      position: relative;
      height: 650px;
      margin-top: 130px; } }
  .hero_cobertura__banner_top {
    width: 100%;
    height: auto;
    padding: 50px 0; }
    @media (min-width: 1199px) {
      .hero_cobertura__banner_top {
        padding: 10px 0 0 0;
        /*background-color: rgba(250, 250, 250, 0.75);*/
        padding: 20px 0; } }
    .hero_cobertura__banner_top h1 {
      line-height: 30px;
      text-align: center;
      font-size: 26px;
      letter-spacing: normal;
      color: #FFFFFF;
      margin: auto;
      animation: typing;
      animation-duration: 2s;
      animation-iteration-count: initial;
      overflow: hidden;
      white-space: nowrap; }
      @media (min-width: 1199px) {
        .hero_cobertura__banner_top h1 {
          width: 100%;
          font-size: 70px;
          line-height: 90px;
          color: #ffffff; 
        margin-top: 180px;}
        @keyframes typing {
          from {
            width: 0; }
          to {
            width: 100%; } } }
    .hero_cobertura__banner_top hr {
      width: 98px;
      margin: auto;
      border: 5px solid #d00000;
      animation-name: line;
      animation-duration: 4s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        @keyframes line {
          0% {
            width: 0%; }
          100% {
            width: 98px; } } }

.contact_cobertura {
  width: 100%;
  height: 100%;
  padding: 30px 0 0 0; }
  @media (min-width: 1199px) {
    .contact_cobertura {
      padding: 60px 0 0 0; } }
  .contact_cobertura .container-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  .contact_cobertura a {
    line-height: 1.2em;
    text-align: center;
    font-size: 19px;
    color: #2F2E2E;
    text-decoration: underline;
    letter-spacing: 0;
    font-weight: 900; }
    @media (min-width: 1199px) {
      .contact_cobertura a {
        font-size: 54px; } }
  .contact_cobertura p {
    font-size: 21px;
    text-align: justify;
    line-height: normal;
    color: #2F2E2E;
    padding: 30px 0 0 0; }

.location_movil {
  width: 100%;
  height: 100%;
  padding: 30px 0; }
  @media (min-width: 1199px) {
    .location_movil {
      display: none; } }
  .location_movil .container-sm {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px; }
  .location_movil__target {
    width: 100%;
    box-shadow: #dbba3b 5px 5px;
    background-color: #FBDB5B;
    padding: 10px; }
    .location_movil__target h1 {
      letter-spacing: normal;
      line-height: normal;
      text-align: center;
      font-size: 28px;
      font-weight: 900;
      color: #2F2E2E;
      padding-bottom: 10px; }
    .location_movil__target p {
      font-size: 11px;
      letter-spacing: normal;
      line-height: normal;
      color: #2F2E2E; }
    .location_movil__target__icon {
      margin: auto;
      width: 60px; }
      .location_movil__target__icon svg {
        width: 100%; }

.location_desktop {
  width: 100%;
  height: 1200px;
  display: none;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/NicePng_mapa-png_3532183.png");
  animation-name: animationhero;
  animation-duration: 4s;
  animation-iteration-count: initial; }

@keyframes animationhero {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  @media (min-width: 1199px) {
    .location_desktop {
      display: flex; } }
  .location_desktop .container-sm {
    display: flex;
    align-items: center;
    justify-content: center; }
  .location_desktop__pacifico {
    transform: translate(70%, 90%);
    display: flex;
    align-items: center;
    justify-content: center; }
    .location_desktop__pacifico__hero {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 182px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBDB5B; }
      .location_desktop__pacifico__hero__icon {
        width: 70px; }
        .location_desktop__pacifico__hero__icon svg {
          width: 100%;
          height: 100%; }
      .location_desktop__pacifico__hero h1 {
        letter-spacing: normal;
        line-height: normal;
        text-align: center;
        font-size: 28px;
        font-weight: 900;
        color: #2F2E2E;
        padding-bottom: 10px; }
    .location_desktop__pacifico__banner {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 300px;
      padding: 10px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBEBA3;
      position: absolute;
      z-index: 1;
      opacity: 0; }
      .location_desktop__pacifico__banner p {
        font-size: 11px;
        letter-spacing: normal;
        line-height: normal;
        color: #2F2E2E; }
    .location_desktop__pacifico:hover .location_desktop__pacifico__hero {
      background-color: transparent;
      box-shadow: none;
      opacity: 0; }
    .location_desktop__pacifico:hover .location_desktop__pacifico__banner {
      opacity: 1;
      transform: scale(120%);
      transition: 1s; }
  .location_desktop__arrow_pacifico {
    width: 131px;
    transform: translate(160%, 160%);
    animation-name: animation1;
    animation-duration: 4s;
    animation-iteration-count: initial; }

@keyframes animation1 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    .location_desktop__arrow_pacifico svg {
      width: 131px; }
  .location_desktop__centro {
    transform: translate(260%, -40%);
    display: flex;
    align-items: center;
    justify-content: center; }
    .location_desktop__centro__hero {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 182px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBDB5B; }
      .location_desktop__centro__hero__icon {
        width: 70px; }
        .location_desktop__centro__hero__icon svg {
          width: 100%;
          height: 100%; }
      .location_desktop__centro__hero h1 {
        letter-spacing: normal;
        line-height: normal;
        text-align: center;
        font-size: 28px;
        font-weight: 900;
        color: #2F2E2E;
        padding-bottom: 10px; }
    .location_desktop__centro__banner {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 250px;
      padding: 10px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBEBA3;
      position: absolute;
      z-index: 1;
      opacity: 0; }
      .location_desktop__centro__banner p {
        font-size: 11px;
        letter-spacing: normal;
        line-height: normal;
        color: #2F2E2E; }
    .location_desktop__centro:hover .location_desktop__centro__hero {
      background-color: transparent;
      box-shadow: none;
      opacity: 0; }
    .location_desktop__centro:hover .location_desktop__centro__banner {
      opacity: 1;
      transform: scale(120%);
      transition: 1s; }
  .location_desktop__arrow_centro {
    transform: translate(185%, 10%);
    animation-name: animation2;
    animation-duration: 4s;
    animation-iteration-count: initial; }

@keyframes animation2 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    .location_desktop__arrow_centro svg {
      transform: rotate(170deg);
      width: 131px; }
  .location_desktop__norte {
    transform: translate(13%, -190%);
    display: flex;
    align-items: center;
    justify-content: center; }
    .location_desktop__norte__hero {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 182px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBDB5B; }
      .location_desktop__norte__hero__icon {
        width: 70px; }
        .location_desktop__norte__hero__icon svg {
          width: 100%;
          height: 100%; }
      .location_desktop__norte__hero h1 {
        letter-spacing: normal;
        line-height: normal;
        text-align: center;
        font-size: 28px;
        font-weight: 900;
        color: #2F2E2E;
        padding-bottom: 10px; }
    .location_desktop__norte__banner {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 200px;
      padding: 10px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBEBA3;
      position: absolute;
      z-index: 1;
      opacity: 0; }
      .location_desktop__norte__banner p {
        font-size: 11px;
        letter-spacing: normal;
        line-height: normal;
        color: #2F2E2E; }
    .location_desktop__norte:hover .location_desktop__norte__hero {
      background-color: transparent;
      box-shadow: none;
      opacity: 0; }
    .location_desktop__norte:hover .location_desktop__norte__banner {
      opacity: 1;
      transform: scale(120%);
      transition: 1s; }
  .location_desktop__arrow_norte {
    transform: translate(-280%, -210%);
    animation-name: animation3;
    animation-duration: 4s;
    animation-iteration-count: initial; }

@keyframes animation3 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    .location_desktop__arrow_norte svg {
      transform: rotate(160deg);
      width: 131px; }
  .location_desktop__sureste {
    transform: translate(-220%, 200%);
    display: flex;
    align-items: center;
    justify-content: center; }
    .location_desktop__sureste__hero {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 182px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBDB5B; }
      .location_desktop__sureste__hero__icon {
        width: 70px; }
        .location_desktop__sureste__hero__icon svg {
          width: 100%;
          height: 100%; }
      .location_desktop__sureste__hero h1 {
        letter-spacing: normal;
        line-height: normal;
        text-align: center;
        font-size: 28px;
        font-weight: 900;
        color: #2F2E2E;
        padding-bottom: 10px; }
    .location_desktop__sureste__banner {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 250px;
      height: 380px;
      padding: 10px;
      box-shadow: #dbba3b 5px 5px;
      background-color: #FBEBA3;
      position: absolute;
      z-index: 1;
      opacity: 0; }
      .location_desktop__sureste__banner p {
        font-size: 11px;
        letter-spacing: normal;
        line-height: normal;
        color: #2F2E2E; }
    .location_desktop__sureste:hover .location_desktop__sureste__hero {
      background-color: transparent;
      box-shadow: none;
      opacity: 0; }
    .location_desktop__sureste:hover .location_desktop__sureste__banner {
      opacity: 1;
      transform: scale(120%);
      transition: 1s; }
  .location_desktop__arrow_sureste {
    transform: translate(-395%, 250%);
    animation-name: animation4;
    animation-duration: 4s;
    animation-iteration-count: initial; }

@keyframes animation4 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
    .location_desktop__arrow_sureste svg {
      width: 131px; }

* {
  margin: 0;
  padding: 0;
  font-family: Arial,Helvetica,sans-serif;
  box-sizing: border-box; }

button {
  border: 0;
  outline: none;
  background-color: transparent;
  transition: 0.3s; }

a {
  text-decoration: none;
  transition: 0.3s; }

svg {
  width: 100%;
  height: 100%; }
.swiper-slide.experts__form--video.one {
    background-image: url(https://fletex.com.mx/img/banner-home1.jpg);
    background-size: cover;
    background-position: center;
}
.swiper-slide.experts__form--video.two {
    background-image: url(https://fletex.com.mx/img/banner-home2.jpg);
    background-size: cover;
    background-position: center;
}
.swiper-slide.experts__form--video.three {
    background-image: url(https://fletex.com.mx/img/banner-home3.jpg);
    background-size: cover;
    background-position: center;
}
.swiper-slide.experts__form--video.four {
    background-image: url(https://fletex.com.mx/img/banner-home4.jpg);
    background-size: cover;
    background-position: center;
}
.swiper-slide.experts__form--video.five {
    background-image: url(https://fletex.com.mx/img/banner-home5.jpg);
    background-size: cover;
    background-position: center;
}
.swiper-slide.experts__form--video.six {
    background-image: url(https://fletex.com.mx/img/caja.jpg);
    background-size: cover;
    background-position: center;
}
.swiper-slide.experts__form--video.seven{
    background-image: url(https://fletex.com.mx/img/trai.jpg);
    background-size: cover;
    background-position: center;
}
 @media (min-width: 1700px) {
            .header__desktop__contact__phone a.phone {
              font-size: 16px; } }
      .header__desktop__contact a.whatsApp {
        background-color: #047FC3;
        border-radius: 5px;
        font-size: 15px;
        padding: 9px !important;
        color: white;
        font-weight: bold;
        text-transform: uppercase; }
        @media (min-width: 1700px) {
          .header__desktop__contact a.whatsApp {
            font-size: 16px;
            padding: 13px 36px !important; } }

              @media (min-width: 1199px) {
            .menu__links__contact__phone a.phone {
              font-size: 16px; } }
      .menu__links__contact a.whatsApp {
        background-color: #047FC3;
        border-radius: 5px;
        font-size: 13px;
        padding: 16px 26px !important;
        color: white;
        font-weight: bold;
        text-transform: uppercase; }
        @media (min-width: 1199px) {
          .menu__links__contact a.whatsApp {
            padding: 16px 36px !important;
            font-size: 20px; } }


            .layout_whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 35px;
  right: 9px;
  z-index: 100;
  gap: 10px; }
  @media (min-width: 1199px) {
    .layout_whatsapp {
      bottom: 80px; } }
  .layout_whatsapp__button {
    max-width: 300px !important;
    height: auto;
    padding: 0px;
    background-color: #15B633;
    border-radius: 100%; }
    .layout_whatsapp__button__img {
      width: 300px; }
      .layout_whatsapp__button__img img {
        width: 40px; }
    .layout_whatsapp__button__close {
      display: none;
      width: 50px;
      color: white; }
      .layout_whatsapp__button__close svg {
        width: 100%; }
    .layout_whatsapp__button--active .layout_whatsapp__button__img {
      display: none; }
    .layout_whatsapp__button--active .layout_whatsapp__button__close {
      display: block; }
  .layout_whatsapp__information {
        display: flex
;
    align-items: center;
    justify-content: center;
    display: block;
    background-color: #19E53C;
    border-radius: 40px;
    width: 100%;
    padding: 4px 30px;
    font-size: 17px;
    color: white;
        font-weight: 700; }

.chat_whatsApp {
  width: 90% ;
  margin: auto;
  height: 230px;
  position: fixed;
  bottom: -200%;
  right: 5%;
  z-index: 100;
  transition: 0.3s;
  border-radius: 10px; }
  @media (min-width: 720px) {
    .chat_whatsApp {
      width: 35%; } }
  @media (min-width: 1199px) {
    .chat_whatsApp {
      right: 5%;
      width: 352px; } }
  .chat_whatsApp--active {
    right: 1%;
    bottom: 310px; }
    @media (min-width: 1199px) {
      .chat_whatsApp--active {
        bottom: 340px; } }
  .chat_whatsApp__top {
    display: flex;
    justify-content: center;
    gap: 15px;
    background-color: #15B933;
    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
    padding: 15px; }
    .chat_whatsApp__top__logo {
      width: 60px;
      height: 100%; }
      @media (min-width: 992px) {
        .chat_whatsApp__top__logo {
          width: 63px;
          /*height: 43px;*/ } }
    .chat_whatsApp__top__text h1 {
      color: white;
      font-size: 15px;
      font-weight: semibold; }
    .chat_whatsApp__top__text p {
      color: white;
      padding-top: 15px;
      font-size: 13px; }
  .chat_whatsApp__agent {
    background-color: white;
    height: 149%;
    /*overflow-y: scroll;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 15px 15px 15px 15px; }
    .chat_whatsApp__agent::-webkit-scrollbar-thumb {
      background-color: #2DB742;
      /* color of the scroll thumb */
      border-radius: 20px;
      /* roundness of the scroll thumb */
      /* creates padding around scroll thumb */ }
    .chat_whatsApp__agent__target {
      padding: 5px;
      width: 100%;
      border: 1px solid #2DB742;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px; }
      .chat_whatsApp__agent__target__information {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px; }
        .chat_whatsApp__agent__target__information__imagen {
          width: 57px; }
          .chat_whatsApp__agent__target__information__imagen img {
            width: 73%; }
        .chat_whatsApp__agent__target__information__word h1 {
          font-size: 20px;
          font-weight: bold;
          color: black; }
        .chat_whatsApp__agent__target__information__word p {
          font-size: 13px;
          font-weight: normal;
          color: black; }
      .chat_whatsApp__agent__target__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px;
        background-color: #15B633;
        border-radius: 100%; }
        .chat_whatsApp__agent__target__icon img {
          width: 20px; }
      .chat_whatsApp__agent__target:hover {
        background-color: #CFCFCF; }

.chat_whatsApp__agent::-webkit-scrollbar {
  width: 3px;
  background-color: transparent;
  /* or add it to the track */ }
swiper-container {
      width: 100%;
      height: 100%;
    }

    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #444;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
     /* Estilos generales para ambas tablas */
        .table-container {
            border-radius: 8px;
            padding: 20px;
            width: 350px; /* Ancho predeterminado para móviles */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* Estilos para la tabla Básico */
        .basic-table {
            border: 1px solid #ac7516; /* Contorno color naranja/marrón */
        }
        
        .basic-table .header-cell {
            background-color: #ac7516; /* Fondo de las celdas color naranja/marrón */
        }

        /* Estilos para la tabla Completa */
        .complete-table {
            border: 1px solid #d00000; /* Contorno color rojo oscuro */
        }
        
        .complete-table .header-cell {
            background-color: #d00000; /* Fondo de las celdas color rojo oscuro */
        }

        /* Media Query para escritorio */
        @media (min-width: 768px) {
            .table-container {
                width: 450px; /* Ancho para pantallas más grandes (escritorio) */
            }
            .table-seguro{
                width: 650px; /* Ancho para pantallas más grandes (escritorio) */
            }
        }

        /* Estilos de texto en los encabezados */
        .header-cell {
            padding: 10px;
            text-align: center;
            margin-bottom: 5px;
            border-radius: 4px;
        }
        
        .header-cell h1, .header-cell h2, .header-cell h3 {
            color: white; /* Color de texto blanco para los títulos */
            margin: 0;
        }

        .table-container ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .table-container li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .table-container li:last-child {
            border-bottom: none;
        }

        .button-ba {
            display: block;
            width: 100%;
            padding: 12px;
            margin-top: 20px;
            text-align: center;
            background-color: #ac7516;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            font-size: 1em;
            font-weight: bold;
        }

        .button-ba:hover {
            background-color: #000000;
        }
        .button-co {
            display: block;
            width: 100%;
            padding: 12px;
            margin-top: 20px;
            text-align: center;
            background-color: #d00000;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            font-size: 1em;
            font-weight: bold;
        }

        .button-co:hover {
            background-color: #000000;
        }
        /* Oculta la imagen de escritorio por defecto (para móviles) */
.desktop-image {
    display: none;
    max-width: 100%;
    height: auto;
}

/* Oculta la imagen de móvil en escritorio */
.mobile-image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Media query para pantallas grandes (escritorio) */
@media (min-width: 768px) {
    .desktop-image {
        display: block; /* Muestra la imagen de escritorio */
    }

    .mobile-image {
        display: none; /* Oculta la imagen de móvil */
    }
}
.hero_seguro {
  width: 100%;
  height: 100%; }
  @media (min-width: 1199px) {
    .hero_seguro {
      background-image: url("../img/fletes-dimensiones-extendidas.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      /*background-position: center;
      background-attachment: fixed;*/
      position: relative;
      height: 600px;
      margin-top: 110px; } }
  .hero_seguro img {
    width: 100%; }
    @media (min-width: 1199px) {
      .hero_seguro img {
        display: none; } }
  .hero_seguro__banner_top {
    width: 100%;
    height: auto;
    background-color: rgba(250, 250, 250, 0.75);
    padding: 20px 0; }
    @media (min-width: 1199px) {
      .hero_seguro__banner_top {
        padding: 30px 0; } }
    .hero_seguro__banner_top h1 {
      width: 50%;
      line-height: 30px;
      text-align: center;
      font-size: 36px;
      letter-spacing: normal;
      color: #2F2E2E;
      padding-bottom: 20px;
      margin: auto;
      animation-name: text;
      animation-duration: 2s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        .hero_seguro__banner_top h1 {
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          font-size: 80px;
          line-height: 90px; }
        @keyframes text {
          from {
            width: 0; }
          to {
            width: 100%; } } }
    .hero_seguro__banner_top hr {
      width: 98px;
      margin: auto;
      border: 5px solid #d00000;
      animation-name: line;
      animation-duration: 4s;
      animation-iteration-count: initial; }
      @media (min-width: 1199px) {
        @keyframes line {
          0% {
            width: 0%; }
          100% {
            width: 98px; } } }

  .risk-table {
            border: 2px solid #ac7516; /* Contorno */
            border-collapse: collapse;
            width: 100%;
            max-width: 600px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: auto;
        }

        .risk-table th, .risk-table td {
            padding: 12px 15px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .risk-table th {
            background-color: #ac7516; /* Color de fondo del encabezado */
            color: white;
            font-size: 1.2em;
            text-align: center;
        }

        .risk-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Oculta la imagen de escritorio por defecto (para móviles) */
        .desktop-image {
            display: none;
            max-width: 100%;
            height: auto;
        }

        /* Oculta la imagen de móvil en escritorio */
        .mobile-image {
            display: block;
            max-width: 100%;
            height: auto;
        }

        /* Media query para pantallas grandes (escritorio) */
        @media (min-width: 768px) {
            .table-container {
                width: 450px;
            }
            .desktop-image {
                display: block; /* Muestra la imagen de escritorio */
            }

            .mobile-image {
                display: none; /* Oculta la imagen de móvil */
            }
        }
.contact.bg-deducible {
    background-color: #e3e3e3;
    }
 .seccion-fondo-inclinado {
            /* Clase específica para esta sección. Añádela a tu div/section. */
            padding: 50px 20px;
            color: white;
            position: relative; /* Necesario para que el gradiente sea el fondo principal */
            z-index: 1;
        }

        /* -------------------------------------------------- */
        /* 2. ESTILO DEL ELEMENTOR SHAPE FILL (SVG) */
        /* -------------------------------------------------- */
        
        /* Contenedor de la forma (Elementor suele darle position: absolute) */
        .mi-contenedor-shape {
            position: absolute;
            bottom: 0; /* Ubícalo en la parte inferior de la sección */
            left: 0;
            width: 100%;
            height: 100px; /* Altura del contenedor de la forma */
            overflow: hidden;
            z-index: 2; /* Para que quede encima del fondo inclinado, si es necesario */
        }

        /* Estilo para la forma SVG en sí */
        .elementor-shape-fill {    
            fill: #e3e3e3; /* Propiedad clave para darle color al SVG */
            width: 100%;
            height: 100%; /* El 100% de la altura de .mi-contenedor-shape */
        }
        
        /* -------------------------------------------------- */
        /* Ejemplo de Media Query (Si necesitas ajustar algo específicamente en móviles) */
        /* -------------------------------------------------- */
        @media (max-width: 768px) {
            .seccion-fondo-inclinado {
                padding: 30px 15px;
            }
        }
 /*TRIANGULO INVERTIDO*/
/* -------------------------------------------------- */

.mi-contenedor-shape-inv {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    height: 100px; 
    overflow: hidden;
    z-index: 2; 
    transform: scaleY(-1); 
}
.contact.bg-deducible-inv {
    background-color: #cececd;
}

.seccion-fondo-inclinado-inv {
    padding: 50px 20px;
    color: white;
    position: relative;
    z-index: 1;
}

.elementor-shape-fill-inv {
    fill: rgba(250, 250, 250, 0.75);
    width: 100%;
    height: 100%; 
}

@media (max-width: 768px) {
    .seccion-fondo-inclinado-inv {
        padding: 30px 15px;
    }
}
/*FIN TRAINGULO INVERTIDO*/

 /* Estilos para el fondo oscuro que cubre toda la pantalla */
#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fondo semi-transparente y oscuro */
    background-color: rgba(0, 0, 0, 0.7);
    /* Centra el contenido del pop-up (usando Flexbox) */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none; 
}

/* Estilos para la caja del contenido del pop-up */
#popup-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* **RESPONSIVIDAD CLAVE:** */
    max-width: 500px; /* Tamaño máximo en pantallas grandes */
    width: 90%;      /* Ocupa el 90% del ancho del viewport */
    text-align: center;
    position: relative;
    /* Aseguramos que el contenido fluya */
    box-sizing: border-box; 
}

/* Estilos para los títulos y texto */
#popup-content h2 {
    color: #004d99;
    margin-bottom: 10px;
    font-size: 1.5em; /* Tamaño de fuente relativo */
}

#popup-content h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2em; /* Tamaño de fuente relativo */
}

#popup-content p {
    color: #cc0000;
    font-size: 1.1em;
    font-weight: bold;
}

/* Estilos para el botón de cerrar (la 'x') */
#close-popup-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

#close-popup-btn:hover {
    color: #333;
}

/* 📱 MEDIA QUERY para pantallas muy pequeñas (ej. algunos móviles en vertical) */
@media (max-width: 480px) {
    #popup-content {
        /* Reduce el padding para que el contenido tenga más espacio */
        padding: 20px 15px; 
    }
    
    #popup-content h2 {
        font-size: 1.3em; 
    }

    #popup-content h3 {
        font-size: 1.1em; 
    }

    #popup-content p {
        font-size: 1em;
    }

    #close-popup-btn {
        /* Tamaño de la "x" un poco más pequeño */
        font-size: 24px;
        top: 5px;
        right: 10px;
    }
}

/*cta rojo*/
 .seccion-fondo-inclinado-rojo {
            /* Clase específica para esta sección. Añádela a tu div/section. */
            padding: 0px 20px;
            color: #d00000;
            position: relative; /* Necesario para que el gradiente sea el fondo principal */
            z-index: 1;
        }

        /* -------------------------------------------------- */
        /* 2. ESTILO DEL ELEMENTOR SHAPE FILL (SVG) */
        /* -------------------------------------------------- */
        
        /* Contenedor de la forma (Elementor suele darle position: absolute) */
        .mi-contenedor-shape-rojo {
            position: absolute;
            bottom: 0; /* Ubícalo en la parte inferior de la sección */
            left: 0;
            width: 100%;
            height: 100px; /* Altura del contenedor de la forma */
            overflow: hidden;
            z-index: 2; /* Para que quede encima del fondo inclinado, si es necesario */
        }

        /* Estilo para la forma SVG en sí */
        .elementor-shape-fill-rojo {    
            fill: #000; /* Propiedad clave para darle color al SVG */
            width: 100%;
            height: 100%; /* El 100% de la altura de .mi-contenedor-shape */
        }
        
        /* -------------------------------------------------- */
        /* Ejemplo de Media Query (Si necesitas ajustar algo específicamente en móviles) */
        /* -------------------------------------------------- */
        @media (max-width: 768px) {
            .seccion-fondo-inclinado-rojo {
                padding: 30px 15px;
                background-color: #d00000;
            }
        }
/*cta negro*/
 .seccion-fondo-inclinado-negro {
            /* Clase específica para esta sección. Añádela a tu div/section. */
            padding: 0px 20px;
            color: #000000;
            position: relative; /* Necesario para que el gradiente sea el fondo principal */
            z-index: 1;
        }

        /* -------------------------------------------------- */
        /* 2. ESTILO DEL ELEMENTOR SHAPE FILL (SVG) */
        /* -------------------------------------------------- */
        
        /* Contenedor de la forma (Elementor suele darle position: absolute) */
        .mi-contenedor-shape-negro {
            position: absolute;
            bottom: 0; /* Ubícalo en la parte inferior de la sección */
            left: 0;
            width: 100%;
            height: 100px; /* Altura del contenedor de la forma */
            overflow: hidden;
            z-index: 2; /* Para que quede encima del fondo inclinado, si es necesario */
        }

        /* Estilo para la forma SVG en sí */
        .elementor-shape-fill-negro {    
            fill: #ffffff; /* Propiedad clave para darle color al SVG */
            width: 100%;
            height: 100%; /* El 100% de la altura de .mi-contenedor-shape */
        }
        
        /* -------------------------------------------------- */
        /* Ejemplo de Media Query (Si necesitas ajustar algo específicamente en móviles) */
        /* -------------------------------------------------- */
        @media (max-width: 768px) {
            .seccion-fondo-inclinado-negro {
                padding: 30px 15px;
                background-color: #000;
            }
        }
/*cta gris*/
 .seccion-fondo-inclinado-gris {
            /* Clase específica para esta sección. Añádela a tu div/section. */
            padding: 0px 20px;
            color: #000000;
            position: relative; /* Necesario para que el gradiente sea el fondo principal */
            z-index: 1;
        }

        /* -------------------------------------------------- */
        /* 2. ESTILO DEL ELEMENTOR SHAPE FILL (SVG) */
        /* -------------------------------------------------- */
        
        /* Contenedor de la forma (Elementor suele darle position: absolute) */
        .mi-contenedor-shape-gris {
            position: absolute;
            bottom: 0; /* Ubícalo en la parte inferior de la sección */
            left: 0;
            width: 100%;
            height: 100px; /* Altura del contenedor de la forma */
            overflow: hidden;
            z-index: 2; /* Para que quede encima del fondo inclinado, si es necesario */
        }

        /* Estilo para la forma SVG en sí */
        .elementor-shape-fill-gris {    
            fill: #ffffff; /* Propiedad clave para darle color al SVG */
            width: 100%;
            height: 100%; /* El 100% de la altura de .mi-contenedor-shape */
        }
        
        /* -------------------------------------------------- */
        /* Ejemplo de Media Query (Si necesitas ajustar algo específicamente en móviles) */
        /* -------------------------------------------------- */
        @media (max-width: 768px) {
            .seccion-fondo-inclinado-gris {
                padding: 30px 15px;
                background-color: #e3e3e3;
                display: none;
            }
        }
 /*cta gris-unidades*/
 .seccion-fondo-inclinado-grisuni {
            /* Clase específica para esta sección. Añádela a tu div/section. */
            padding: 0px 20px;
            color: #000000;
            position: relative; /* Necesario para que el gradiente sea el fondo principal */
            z-index: 1;
        }

        /* -------------------------------------------------- */
        /* 2. ESTILO DEL ELEMENTOR SHAPE FILL (SVG) */
        /* -------------------------------------------------- */
        
        /* Contenedor de la forma (Elementor suele darle position: absolute) */
        .mi-contenedor-shape-grisuni {
            position: absolute;
            bottom: -270px; /* Ubícalo en la parte inferior de la sección */
            left: 0;
            width: 100%;
            height: 100px; /* Altura del contenedor de la forma */
            overflow: hidden;
            z-index: 2; /* Para que quede encima del fondo inclinado, si es necesario */
        }

        /* Estilo para la forma SVG en sí */
        .elementor-shape-fill-grisuni {    
            fill: #e3e3e3; /* Propiedad clave para darle color al SVG */
            width: 100%;
            height: 100%; /* El 100% de la altura de .mi-contenedor-shape */
        }
        
        /* -------------------------------------------------- */
        /* Ejemplo de Media Query (Si necesitas ajustar algo específicamente en móviles) */
        /* -------------------------------------------------- */
        @media (max-width: 768px) {
            .seccion-fondo-inclinado-grisuni {
                padding: 30px 15px;
                background-color: #e3e3e3;
                display: none;
            }
        }
/*cta ban banner home*/
 .seccion-fondo-inclinado-ban {
            /* Clase específica para esta sección. Añádela a tu div/section. */
            padding: 0px 20px;
            color: #000000;
            position: relative; /* Necesario para que el gradiente sea el fondo principal */
            z-index: 1;
        }

        /* -------------------------------------------------- */
        /* 2. ESTILO DEL ELEMENTOR SHAPE FILL (SVG) */
        /* -------------------------------------------------- */
        
        /* Contenedor de la forma (Elementor suele darle position: absolute) */
        .mi-contenedor-shape-ban {
            position: absolute;
            bottom: 0; /* Ubícalo en la parte inferior de la sección */
            left: 0;
            width: 100%;
            height: 100px; /* Altura del contenedor de la forma */
            overflow: hidden;
            z-index: 2; /* Para que quede encima del fondo inclinado, si es necesario */
        }

        /* Estilo para la forma SVG en sí */
        .elementor-shape-fill-ban {    
            fill: #d00000; /* Propiedad clave para darle color al SVG */
            width: 100%;
            height: 100%; /* El 100% de la altura de .mi-contenedor-shape */
        }
        
        /* -------------------------------------------------- */
        /* Ejemplo de Media Query (Si necesitas ajustar algo específicamente en móviles) */
        /* -------------------------------------------------- */
        @media (max-width: 768px) {
            .seccion-fondo-inclinado-ban {
                padding: 30px 15px;
                background-color: #000;
            }
        }
/*carrusel*/
.carousel {
    max-width: 900px; 
    margin: 0 auto;
    overflow: hidden; 
    position: relative;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Velocidad de la transición */
}

.carousel-item {
    min-width: calc(100% / 7); /* Es crucial: 100% dividido por 7 imágenes */
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Para 7 imágenes, la propiedad min-width se ajustará en JS, 
       pero la ponemos aquí como un buen punto de partida visual */
}

/* -------------------------------------------------- */
/* ESTILOS DE LAS FLECHAS DE CONTROL */
/* -------------------------------------------------- */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    color: white;
    border: none;
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    line-height: 1; /* Para centrar el carácter '<' o '>' */
    user-select: none; /* Evita que se seleccione el texto del botón */
    transition: background-color 0.3s;
}

.carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev {
    left: 0;
    border-radius: 0 5px 5px 0; /* Bordes redondeados solo en el lado interno */
}

.next {
    right: 0;
    border-radius: 5px 0 0 5px; /* Bordes redondeados solo en el lado interno */
}

/* -------------------------------------------------- */
/* RESPONSIVIDAD */
/* -------------------------------------------------- */
@media (max-width: 600px) {
    .carousel {
        border-radius: 0;
    }
    .carousel-control {
        padding: 10px; /* Flechas más pequeñas en móviles */
        font-size: 18px;
    }
}
/* -------------------------------------------------- */
/* MEDIA QUERY: OCULTAR POP-UP EN MÓVILES */
/* -------------------------------------------------- */
@media (max-width: 768px) {
    /* Usamos 768px como el punto de quiebre (breakpoint) común 
       para tabletas y móviles. */
    
    .popup-fijo {
        /* PROPIEDAD CLAVE: Oculta el pop-up por completo en pantallas pequeñas.
           Usamos !important para asegurar que sobreescriba la instrucción 'display: block' 
           que aplica el JavaScript. */
        display: none !important; 
    }
}
input {
    width: 100%;
    padding: 10px;
    border: 1px solid #000;
    margin-bottom: 10px;
    
border-radius: 5px;
    
}
    
    
textarea#mensaje {
    width: 100%;
    height: 134px;
    border-radius: 5px;
    padding: 10px;
}
button#button {
    color: #ffffff;
    background: #d00000;
    padding: 20px;
    border-radius: 15px;
    font-size: 20px;
}
a.mailfooter {
    display: -webkit-inline-box;
    color: #ffffff;
}
.header__desktop__top__contact__form__item_line__text.waa {
    color: #25d366;
}
a.flotante
 {
    display: scroll;
    position: fixed;
    bottom: 120px;
    right: 0px;
    z-index: 100;
    width: 100px;
}
 .imagen-video{
      cursor:pointer; border-radius:12px; 
      display:block; margin:40px auto; 
      transition:transform .25s ease;
      width: 100%;
      height: auto;
}
    .imagen-video:hover{ transform: scale(1.03); }

    .modal{
      position: fixed; inset: 0; display:none;
      justify-content:center; align-items:center;
      background: rgba(0,0,0,.8); z-index: 9999;
      padding: 20px;
  }
    .modal.open{ display:flex; }

    .modal-card{
      position:relative; width:min(920px, 96vw); background:#000;
      border-radius:10px; padding:10px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
      animation: pop .18s ease-out;
    }
    @keyframes pop{ from{ transform:scale(.96); opacity:.7 } to{ transform:scale(1); opacity:1 } }

    .modal video{ width:100%; height:auto; display:block; border-radius:8px; background:#000; }

    .cerrar{
      position:absolute; top:6px; right:10px; font-size:28px; line-height:1;
      color:#fff; cursor:pointer; padding:6px 10px; user-select:none;
    }
    .cerrar:hover{ color:#ff5a5a; }

    .experts__form--video h2 {
    width: 70%;
    position: absolute;
    font-size: 15px;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
}
@media (min-width: 1199px) {
    .experts__form--video h2 {
        font-size: 35px;
        margin: auto;
        line-height: 45px;
        text-shadow: 3px 2px 5px #000;
    }
    .urgent__text h2 {
        font-size: 54px;
        margin: auto;
    }
    .quote h3 {
        font-size: 52px;
        line-height: 52px;
        width: 50%;
        line-height: 52px;
       text-align: center;
       font-size: 52px;
       letter-spacing: -0.05em;
       color: #2F2E2E;
    }
    .we_ensure__title h4 {
        font-size: 66px;
    }
        .clients h3 {
        font-size: 40px;
    }
    .price h3 {
        font-size: 59px;
    }
    .footer__contact h5 {
        font-size: 92px;
    }
   .footer__contact h3 {
        font-size: 22px;
        padding-top: 46px;
    }
}

.urgent__text h2 {
    font-size: 54px;
    color: #FFFFFF;
    letter-spacing: normal;
    line-height: 1em;
    text-align: center;
    font-weight: 1000;
}
.why_we h5 {
    width: 50%;
    color: #d00000;
    line-height: 0.8em;
    text-align: center;
    font-size: 34px;
    letter-spacing: -0.05em;
    padding-bottom: 30px;
}
.quote h3 {
    line-height: 52px;
    text-align: center;
    font-size: 52px;
    letter-spacing: -0.05em;
    color: #2F2E2E;
}
.we_ensure__title h4 {
    width: 80%;
    text-align: center;
    padding: 20px 0;
    font-size: 52px;
}
.clients h3 {
    font-size: 30px;
    color: black;
    letter-spacing: normal;
    line-height: normal;
    padding: 20px 0;
    text-align: center;
}
.price h2 {
    font-size: 28px;
    color: #000;
    letter-spacing: normal;
    line-height: normal;
    font-weight: bold;
}
.price h3 {
    font-size: 52px;
    color: #000;
    letter-spacing: normal;
    line-height: normal;
    font-weight: bold;
}
.service_home__text h2 {
    width: 100%;
    font-size: 53px;
    line-height: 1.3em;
    color: #FFFFFF;
    font-weight: normal;
    margin: auto;
    text-align: center;
    padding-bottom: 22px;
}
.price__text h5 {
    font-size: 25px;
    color: #d00000;
    letter-spacing: normal;
    line-height: normal;
    font-weight: normal;
    text-align: center;
    padding-bottom: 20px;
}
.service_home__text h4 {
    letter-spacing_-0.01em;
    font-size: 36px;
    color: #FFFFFF;
    text-align: center;
    font-weight: normal;
    padding-bottom: 22px;
}
.footer__contact h5 {
    letter-spacing: -0.05em;
    color: #ffffff;
    line-height: 0.8em;
    text-align: center;
    font-size: 34px;
    margin-top: 25px;
}
.footer__contact h3 {
    line-height: 1em;
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: normal;
    padding-top: 10px;
    font-family: helvetica-w01-roman, helvetica-w02-roman, helvetica-lt-w10-roman, sans-serif;
}