/* INICIALIZAR VARIABLES */
@import url(variables.css);

/* LAPTOP */
@media (max-width: 1280px) {

    /* NAVBAR */
    .ve-navbar__logo {
        padding: 0 16px;
    }

    .ve-isotipo {
        width: 28px;
        height: 37px;
    }

    .ve-navbar__logo p {
        font-size: var(--fs-7);
    }

    .ve-navbar__links {
        gap: 32px;
    }

    .nav-link,
    .ve-navbar__links .btn-primary {
        font-size: var(--fs-3);
    }

    /* HERO */
    .hero__btn {
        flex-wrap: wrap;
    }

    .hero__img {
        max-height: 464px;
    }

    .btn-secondary,
    .btn-primary {
        font-size: var(--fs-6);
    }

    /* PORTFOLIO */
    .portfolio__slider {
        gap: 48px;
    }

    .portfolio__client {
        width: 794px;
        height: 447px;
    }

    .btn-arrow {
        width: 52px;
        height: 52px;
    }

    /* SERVICES */
    .services__text {
        padding: 0 32px;
    }

    .services__terms {
        padding: 56px 83px;
        gap: 32px;
        display: flex;
        flex-direction: column;
    }

    .services__term {
        align-items: center;
    }

    .services__why__body a {
        font-size: var(--fs-3);
    }

    /* WHO */
    .who__content {
        gap: 40px;
    }

    .who__btn .btn-secondary {
        font-size: var(--fs-5);
    }

    .who__picture {
        max-width: 381px;
    }

    /* BUILD */
    .build {
        padding-bottom: 148px;
    }

    .build__header {
        gap: 20px;
    }

    .build__price__total-price {
        font-weight: var(--fw-extrabold);
        font-size: var(--fs-12);
    }

    .build__price__text p:last-child {
        font-size: var(--fs-3);
    }

    .build__form {
        gap: 16px;
    }

    .build__base-card {
        padding: 20px 32px;
        gap: 20px;
    }

    .build__lock-price {
        gap: 12px;
    }

    .build__base-card img {
        width: 24px;
        height: 32px;
    }

    .base__price {
        font-size: var(--fs-7);
    }

    .build__deliverables {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .ve-textarea {
        gap: 12px;
    }

    .ve-textarea label {
        font-size: var(--fs-6);
    }

    .ve-textarea textarea {
        min-height: 108px;
        padding: 12px 20px;
        font-size: var(--fs-4);
    }

    .build__sections {
        gap: 16px;
    }

    .build__section {
        gap: 28px;
        padding: 0 28px;
    }

    .build__section__number p {
        font-size: var(--fs-6);
    }

    .build__section .ve-textarea textarea {
        min-height: 68px;
        border-radius: var(--br-4);
    }

    .build__section__price {
        font-size: var(--fs-6);
    }

    .btn-eliminar {
        padding: 8px 36px;
        font-size: var(--fs-5);
    }

    .btn-add {
        font-size: var(--fs-5);
    }

    .build__extras {
        gap: 16px;
    }

    .build__extra__content {
        gap: 12px;
    }

    input[type="checkbox"].ve-checkbox {
        width: 16px;
        height: 16px;
    }

    .build__extra__content__text {
        font-size: var(--fs-4);
    }

    .build__extra__content__price {
        font-size: var(--fs-5);
    }

    select {
        padding: 0 8px;
        font-size: var(--fs-4);
        font-weight: var(--fw-semibold);
        border-radius: var(--br-1);
    }

    select option {
        padding: 0 8px;
    }

    .btn-send {
        font-size: var(--fs-5);
    }

    /* MODAL CONTACTO */
    .send {
        max-width: 868px;
        padding: 32px;
    }

    .send__header {
        gap: 32px;
    }

    .send-back-arrow {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .send__total-price {
        font-size: var(--fs-8);
    }

    .send__ticket {
        padding: 20px;
    }

    .send__items-title p {
        font-size: var(--fs-4);
    }

    .send__item p {
        font-size: var(--fs-3);
    }

    .ve-input label {
        font-size: var(--fs-4);
    }

    .ve-input input {
        font-size: var(--fs-3);
    }

    .build__extra .build__extra__content {
        gap: 12px;
    }

    .check-send {
        width: 14px !important;
        height: 14px !important;
    }

    .text-send-modal {
        font-size: var(--fs-3) !important;
    }

    /* POLITICS */
    .legal__img {
        max-width: 381px;
    }

    .writing li {
        font-size: var(--fs-6);
    }

}



/* TABLET */
@media (max-width: 880px) {

    .btn-secondary,
    .btn-primary {
        font-size: var(--fs-5);
    }

    /* NAVBAR */
    .ve-isotipo {
        width: 32px;
        height: 41px;
    }

    .content--nav {
        max-width: 100%;
    }

    .navbar-container {
        top: 0;
        padding: 0;
    }

    .ve-navbar {
        width: 100%;
        border: none;
        border-bottom: solid 2px #FFF3D526;
        border-radius: 0;
        padding: 24px 16px;
        height: 85px;
        transition: border-bottom .3s ease-in-out;
    }

    .ve-navbar:hover {
        border: none;
        border-bottom: solid 2px #FFF3D526;
    }

    .ve-navbar.menu-open {
        border-bottom: solid 2px var(--primary-300);
    }

    .ve-navbar {
        padding: 24px;
    }

    .ve-navbar__links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* HERO */
    .hero {
        position: relative;
        padding-top: 141px;
        padding-bottom: 56px;
        overflow: hidden;
    }

    .hero__content {
        flex-direction: column;
        gap: 48px;
    }

    .hero__text {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .hero__body,
    .hero__btn {
        align-items: center;
        justify-content: center;
    }

    .hero__img {
        max-height: 536px;
        max-width: 536px;
    }

    /* PORTFOLIO */
    .portfolio__content {
        gap: 44px;
    }

    .portfolio__text {
        padding: 0 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .portfolio__client {
        width: 90vw;
        max-width: 720px;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .portfolio__client .btn-secondary {
        bottom: 40px;
    }

    .portfolio__slider {
        gap: 40px;
    }

    .btn-arrow img {
        opacity: 1;
    }

    /* SERVICES */
    .services__content {
        gap: 48px;
    }

    .services__cards {
        flex-direction: column;
        gap: 56px;
    }

    .services__terms {
        padding: 48px 0;
    }

    .services__why__content,
    .services__why__body {
        text-align: center;
        align-items: center;
    }

    /* WHO */
    .who__content {
        flex-direction: column;
        gap: 48px;
    }

    .who__text {
        gap: 8px;
        text-align: center;
    }

    .who__body {
        align-items: center;
    }

    /* BUILD */
    .build {
        padding-bottom: 136px;
    }

    .build__header {
        flex-wrap: wrap;
        justify-content: center;
    }

    .build__price {
        flex-shrink: 0;
    }

    .build__content {
        padding: 32px;
    }

    .build__head h2 {
        word-break: break-word;
    }

    .build__price__total-price {
        font-size: var(--fs-11);
    }

    .build__price__text p:last-child {
        font-size: var(--fs-2);
    }

    .build__title {
        gap: 16px;
    }

    .build__base-card {
        padding: 16px;
        gap: 12px;
        flex-direction: column;
    }

    .build__deliverables {
        justify-content: center;
    }

    .build__form>.ve-textarea textarea {
        min-height: 108px;
    }

    .build__section {
        gap: 12px;
        padding: 0;
    }

    .build__section__number p {
        font-size: var(--fs-5);
        width: 12px;
    }

    .ve-textarea textarea {
        font-size: var(--fs-3);
    }

    .build__section__price {
        font-size: var(--fs-5);
    }

    .btn-eliminar {
        font-size: var(--fs-4);
    }

    .btn-add {
        font-size: var(--fs-4);
    }

    input[type="checkbox"].ve-checkbox {
        width: 14px;
        height: 14px;
    }

    .build__extra__content__text {
        font-size: var(--fs-3);
    }

    .build__extra__content__price {
        font-size: var(--fs-4);
    }

    .btn-eliminar {
        width: 44px;
        height: 44px;
        padding: 0;
        background-color: transparent;
        background-image: url('../assets/icons/ui/ve-cancel.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        font-size: 0;
        border: none;
    }

    .btn-eliminar:hover {
        background-color: transparent;
        opacity: 0.7;
    }

    .build__extra {
        flex-wrap: wrap;
        gap: 16px;
        align-items: flex-start;
    }

    .btn-send {
        font-size: var(--fs-4);
    }

    /* SEND MODAL */
    .send {
        max-width: 648px;
        padding: 24px;
    }

    .send__content {
        gap: 24px;
    }

    .send__header {
        gap: 24px;
    }

    .send-back-arrow {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    .send__form {
        gap: 16px;
    }

    .send__title {
        gap: 12px;
    }

    .send__ticket {
        padding: 16px;
    }

    .send__main-credentials {
        flex-direction: column;
        gap: 16px;
    }

    .build__extra .build__extra__content {
        gap: 8px;
    }

    .btn-send {
        padding: 12px 32px;
    }

    /* FOOTER */
    .footer__rights {
        max-width: 132px;
    }

    .ve-isotipo-footer {
        width: 64px;
        height: 85px;
    }

    .footer__legal {
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        text-align: center;
    }

    /* POLITICS */
    .legal__img {
        max-width: 350px;
    }

    .legal__content {
        flex-direction: column;
    }

    .legal__text h1 {
        text-align: center;
    }

    .writing li {
        font-size: var(--fs-5);
    }


}



/* MOBILE */
@media (max-width: 480px) {

    /* NAVBAR */
    .ve-navbar {
        height: 77px;
    }

    .ve-isotipo {
        width: 36px;
        height: 45px;
    }

    .ve-navbar__logo p {
        display: none;
    }

    .mobile-menu {
        top: 77px;
        height: 100vh;
    }

    .hero {
        padding-top: 129px;
        padding-bottom: 52px;
    }

    .hero__btn a {
        width: 100%;
    }

    /* PORTFOLIO */
    .portfolio__text {
        padding: 0;
    }

    .portfolio__slider {
        gap: 36px;
    }

    .btn-arrow {
        width: 48px;
        height: 48px;
    }

    .portfolio__client {
        width: 95vw;
        max-width: 100%;
    }

    .portfolio__client .btn-secondary {
        bottom: 25px;
        font-size: var(--fs-4);
        padding: 8px 32px;
    }

    /* SERVICES */
    .services__text {
        padding: 0;
    }

    .services__card {
        gap: 32px;
    }

    .services__term>img {
        max-width: 80px;
    }

    .services__why {
        padding: 32px;
    }

    .services__why__body .btn-primary {
        padding: 12px 40px;
        min-width: 100%;
    }

    /* WHO */
    .who__btn a {
        padding: 12px 40px;
        width: 100%;
    }

    .build__content {
        gap: 28px;
        padding: 24px;
    }

    /* BUILD */
    .build {
        padding: 56px 0;
        padding-bottom: 136px;
    }

    .content--build--form {
        max-width: 100%;

    }

    .build__head,
    .build__price {
        text-align: center;
    }

    .build__title {
        gap: 12px;
    }

    .build__title img {
        width: 24px;
        height: 28px;
    }

    .build__base-card img {
        width: 20px;
        height: 27px;
    }

    .base__price {
        font-size: var(--fs-6);
    }

    .build__deliverables p {
        font-size: var(--fs-2);
    }

    .ve-textarea label {
        font-size: var(--fs-4);
    }

    .build__section__number p {
        font-size: var(--fs-4);
        width: 10px;
    }

    .build__section__price {
        font-size: var(--fs-4);
    }

    .btn-eliminar {
        min-width: 28px;
        min-height: 28px;
    }

    .build__section textarea {
        width: 100%;
    }

    .btn-add {
        padding: 12px 32px;
    }

    select {
        padding: 4px 12px;
    }

    .build__extra {
        padding: 16px;
        align-items: center;
        justify-content: center;
    }

    .build__extra .build__extra__content {
        gap: 12px;
        justify-content: center;
    }

    input[type="checkbox"].ve-checkbox {
        min-width: 14px;
        min-height: 14px;
    }

    /* MODAL SEND */
    .send-back-arrow {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .send__title {
        gap: 8px;
    }

    .send-title-arrow {
        width: 20px;
        height: 24px;
    }

    .send__total-price {
        font-size: var(--fs-6);
    }

    .send__items-title p {
        font-size: var(--fs-3);
    }

    .send__item p {
        font-size: var(--fs-2);
    }

    .form__send {
        gap: 16px;
    }

    .ve-input {
        gap: 8px;
    }

    .ve-input label {
        font-size: var(--fs-3);
    }

    .build__extra .build__extra__content {
        gap: 8px;
    }

    /* FOOTER */
    .footer__content {
        flex-direction: column;
        gap: 20px;
    }

    .footer__rights {
        max-width: 100%;
        text-align: center;
    }

    .ve-isotipo-footer {
        width: 72px;
        height: 96px;
    }

    .footer__legal {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }

    .footer__legal a {
        min-width: fit-content;
    }

    /* POLITICS */
    .legal__text h1,
    .writing__block h2 {
        word-break: break-all;
    }

    .writing li {
        font-size: var(--fs-4);
    }


    select::picker-icon {
        transform: none;
    }

    select:open::picker-icon {
        transform: none;
    }

    select option {
        padding: initial;
        font-size: inherit;
        font-weight: inherit;
    }

    ::picker(select) {
        appearance: auto;
        background-color: transparent;
        border-radius: 0;
        max-width: none;
    }

    #seccion-email:has(option[disabled]:checked) {
        color: inherit;
    }


}