/* resources/css/app.css */

@import "@fortawesome/fontawesome-free/css/all.css";
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {

    .responsive-padding {
        @apply px-6 py-5 md:pb-10;
      }
    .header_1{
        @apply text-black font-semibold text-32 leading-[150%] md:font-bold md:text-52 md:leading-[78px]
    }
    .header_2 {
      @apply text-black font-normal font-manrope text-24 leading-[150%] md:text-36 md:leading-[54px] md:pl-10 md:pt-10;
    }
    .header_red {
        @apply text-secondary-red font-bold font-manrope text-16 leading-[150%] md:text-20 md:leading-[54px]  md:pl-10 md:pt-10  uppercase;
      }

    .body_txt {
      @apply text-black font-light font-manrope text-16 leading-[150%] md:text-20 md:leading-[30px];
    }

    .btn_red {
        @apply w-[321px] h-14 px-4 py-2.5 bg-[#d12420] rounded-[35px] shadow inline-flex justify-center items-center gap-2 cursor-pointer text-white text-xl font-semibold font-manrope capitalize leading-[25px];
      }
    .btn_red:hover {
        @apply bg-[#f00]; /* Cambia a un color más claro al hacer hover */
      }
    .input_form{
        @apply color: #757575 font-size: 16px font-family: Inter font-weight: 400 line-height: 16px word-wrap: break-word

    }
  }
  @layer utilities {
    .bg-mirrored {
        position: relative;
        background-image: url('../../public/images/cup_coffe.png');
        height: 444px;
        bottom: 22rem;
        background-repeat: repeat-x;
        background-color: #F6F0EB;
    }

    .bg-mirrored::after {
        content: '';
        position: absolute;
        top: 100%;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 444px;
        background-image: url('../../public/images/cup_coffe.png');
        background-repeat: repeat-x;
        transform: scaleY(-1.01) rotate(0deg);
        background-color: #512C1F;
        z-index: 0;
    }
}
.section {
    min-height: 100vh;
    scroll-margin-top: 5rem;
}

.custom-scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.custom-scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

body {
    margin: 0;
    line-height: normal;
}

html {
    scroll-behavior: smooth;
}
html, body {
    height: 100%;
    width: 100%;

    margin: 0;
}
/* Aplicar overflow-x: hidden solo en móviles */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden; /* Evita el desbordamiento horizontal solo en móvil */
    }
}
#header {
    position: fixed !important;
    top: 0 !important;
}

/* --Typography-- */

.display {
    font-size: 40px;
    line-height: 100%;
    font-weight: 800;
}

.desktop_body_txt {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.btn_primary {
    color: white;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 20.70px;
    word-wrap: break-word
}


/* Estilos personalizados para los elementos de navegación */

#header {
    height: 56px;
    /* Altura del header */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra ligera */
}

.navigation_bold{
    font-weight: 700;
}
.navigation{
    color: var(--Black, #000);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.18px;
    text-transform: capitalize;
}
.nav-bar {
    border-width: 0.5px;
    border-color: bisque;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.nav-item {
    position: relative;
    white-space: nowrap;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ED1B24;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-item:hover::after,
.nav-item:focus::after,
.nav-item.font-bold::after {
    transform: scaleX(1);
}

#navbar {
    /* background-color: rgba(238, 232, 213, 0.8); */
    transform: translateY(0);
}

#navbar.scrolled {
    background-color: rgba(238, 232, 213, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.hidden-navbar {
    /* display: none; */
    display:none;
    visibility: visible;
}


/* Estilos para las flechas de navegación */

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    z-index: 10;
    transition: all 0.3s ease;
}

.arrow.left {
    left: 0;
}

.arrow.right {
    right: 0;
}

.arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.hidden-arrows {
    display: none;
}


/* Estilos del botón "Back to Top" */

#btn-back-to-top {
    padding: 12px;
    border-radius: 30px 0px 0px 30px;
}

/* --- stytles ----- */


.text-fade1 {
    background: linear-gradient(to top left, #311001, #5e2e0f, #d19236);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    background-clip: text;
  }


.card {
    height: 120px;
    width: 240px;
    margin-left: -45px;
}
.label_new {
    font-style: normal;
    font-size: 20px;
    color: #000000;
    flex: none;
    order: 0;
    flex-grow: 1;
    text-align: justify;
}

.header_black_new {
    font-style: normal;
    font-weight: 700;
    font-size: 42px;
    line-height: 150%;
    color: #000000;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.label_new_premium {
    height: 54px;
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 150%;
    color: #000000;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin-bottom: 4%;
}



.label_new_end {
     font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #000000;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.header_experience_red {
    height: 30px;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 150%;
    text-transform: uppercase;
    color: #D12420;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.header_experience_red_mobile {
    height: 16px;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 120%;
    text-transform: uppercase;
    color: #D12420;
    align-self: center;
    flex-grow: 0;
    margin-bottom: 10px;
}

.frame_form {
    position: relative;
    border-radius: 20px;
    background: var(--White, #FFF);
    box-shadow: -7px -8px var(--sds-size-depth-800) var(--sds-size-depth-negative-100) rgba(212, 212, 212, 0.10),
                8px -8px var(--sds-size-depth-100) var(--sds-size-depth-negative-100) rgba(155, 155, 157, 0.05);

    display: flex;
    width: 631px;
    /* width: calc(100% - 2rem); */
    margin: 0 auto;
    left: 0 !important; /* Centra el contenedor en móviles */
    padding: 20px; /* Simplifica los paddings */
    flex-direction: column;
    align-items: center;

    /* position: fixed; */
    /* margin-left:33.3%; */
    margin-top: 3rem;

    /* transform: translateX(-50%); */
    z-index: 10;

    /* Estilo para pantallas grandes (Web) */
    @media (min-width: 1688px) {
        width: 631px;
        top: 6.5rem;
        /* left:33.3%; */
    }

    /* Estilo para tablets */
    @media (max-width: 1024px) and (min-width: 768px) {
        width: 80%; /* Ocupa un 80% del ancho del viewport */
        top: 5rem; /* Ajusta el espacio superior */
        left: 50%; /* Centra horizontalmente */
    }

    /* Estilo para móviles */
    @media (max-width: 758px) {
        width: 100% !important;
      top: 5.6rem !important;
      /* left: 10.8rem !important; */
    }
}
.hidden-important {
    display: none !important;
}
.scroll-container {
    position: relative;
    padding-bottom: 25px; /* Espacio adicional para evitar que el scroll se superponga */
    overflow-x: auto;
    scrollbar-color: #F80000 rgba(0, 0, 0, 0.1); /* Color del scroll */
    scrollbar-width: thin; /* Ancho del scroll */
}

/* Personalización del scroll en navegadores basados en WebKit (Chrome, Safari, Edge) */
.scroll-container::-webkit-scrollbar {
    height: 8px; /* Altura del scroll horizontal */
}

.scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Fondo del track */
    border-radius: 10px; /* Redondeo del track */
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #F80000; /* Color del scroll */
    border-radius: 10px; /* Redondeo del scroll */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #D12420; /* Color al hacer hover */
}
#phone {
    background: transparent !important;
}

.iti__flag-container {
    margin-left: 0 !important; /* Ajusta si el diseño se descompone */
}

.peer-placeholder-shown {
    transform: translateY(0) scale(1);
}

.peer-focus {
    transform: translateY(-1.5rem) scale(0.75);
}
.container {
    max-width: 100vw;
    overflow-x: hidden;
}