/* -------------------- Literata -------------------- */
@font-face {
    font-family: "Literata";
    src: url("./fonts/Literata-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Literata";
    src: url("./fonts/Literata-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Literata";
    src: url("./fonts/Literata-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Literata";
    src: url("./fonts/Literata-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Literata";
    src: url("./fonts/Literata-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* -------------------- Plus Jakarta Sans -------------------- */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("./fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
}

:root {
    --yellow: #ffd24e;
    --blue: #010f3c;
    --clear_violet: #9592f6;
    --violet: #6040ed;
    --gray_blue: #e5f3fc;
    --orange: #dd3b10;
    --violet_blue: #423eaf;
    --sky_blue: #78b2f9;
    --black: #000000;
    --black_clear: #111111;
    --white: #ffffff;
    --clear_grey: #f3fbff;
    --my_shadow: 0 0 80px rgba(120, 178, 249, 0.5);
}

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

li,
a {
    list-style-type: none;
    text-decoration: none;
    color: inherit;
}

p,
a {
    font-family: "Literata";
    font-weight: 300;
}

p a {
    color: var(--violet);
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
li {
    font-family: "Plus Jakarta Sans";
    font-weight: 600;
}


body {
    background-color: var(--clear_grey);
    color: var(--blue);
}

.main {
    position: relative;
    min-width: 300px;
    max-width: 1080px;
    margin: 0 auto;

    .header {
        padding: 10px 0;
        max-width: 1080px;
        min-width: 300px;

        nav {
            .nav_container {
                display: flex;
                width: 90%;
                margin: auto;
                justify-content: space-between;
                align-items: center;

                .logo {
                    width: 100px;
                    height: 100%;
                }

                .menu_container {
                    display: flex;
                    align-items: center;
                    column-gap: 15px;

                    .menu_btn {
                        display: none;
                        cursor: pointer;

                        .menu_icon {
                            fill: var(--violet);
                        }
                    }

                    .nav_links {
                        display: flex;
                        gap: 60px;

                        li a {
                            font-size: 14px;
                            font-family: "Plus Jakarta Sans";
                            font-weight: 700;
                        }
                    }
                }
            }
        }

        /*Queries solo del nav*/
        @media (width <=768px) {
            nav {
                .nav_container {
                    width: 90%;

                    .menu_container {
                        .menu_btn {
                            width: 30px;
                            height: 30px;
                            display: block;
                            z-index: 10;

                            .menu_icon {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .nav_links {
                            display: none;
                            position: fixed;
                            top: 0;
                            left: 0;
                            flex-direction: column;
                            align-items: start;
                            width: 100%;
                            inset: 0;
                            padding: 10px 0;
                            padding-top: 50px;
                            text-align: center;
                            color: var(--blue);
                            background-color: var(--white);
                            pointer-events: none;
                            z-index: 3;
                        }

                        .nav_links.active {
                            display: grid;
                            row-gap: 10px;
                            align-content: start;
                            pointer-events: all;
                        }
                    }
                }
            }
        }
    }

    .container_sticky {
        max-width: 1020px;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        min-height: 70vh;
        max-height: 1000px;
        margin: auto;
        padding: 0 30px;
        text-align: center;
        align-content: center;
        z-index: -1;
        display: grid;

        .img_sticky {
            max-width: 65%;
            margin: auto;
            margin-top: 30px;
        }

        h1 span {
            background: -webkit-linear-gradient(
                var(--clear_violet),
                var(--violet)
            );
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        article {
            h2 {
                margin-top: 28px;
                font-size: 10px;
                letter-spacing: 2px;
                text-transform: uppercase;
                font-family: "Plus Jakarta Sans";
                font-weight: 600;
            }

            p {
                margin: 42px 0 ;
                font-family: "Literata";
                font-weight: 300;
                font-style: italic;
            }
        }

        @media (width <= 768px) {
            .img_sticky {
                max-width: 120%;
                margin: 100px -20px auto;
            }
        }
    }
}

/* Estilos para los botones de leer ahora y para volver arriba */
.read_now_button {
    position: absolute;
    top: 103%;
    bottom: 5%;
    left: 0;
    right: 0;
    display: grid;
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--violet);
    z-index: 1;
    height: 50px;
}

.read_now_button.hidden {
    display: none;
}

.read_now_button.view {
    display: block;
}

.back_utton {
    display: none;
}

.back_button.active {
    display: grid;
    position: fixed;
    bottom: 20px;
    right: 180px;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--yellow);
}
@media (width <=768px) {
    .back_button.active {
        right: 50px;
    }
}

/* Estilos sección oculta por defecto */

.read_more_container {
    position: relative;
    display: none;
    max-width: 1020px;
    margin: auto;
    justify-content: center;
    align-items: center;
    text-align: left;
    background-color: var(--clear_grey);
    color: var(--blue);
    z-index: 2;

    h3{
        font-size: 19px;
    }

    p, p a{
        font-size: 16px;
    }

    .table {
        margin-bottom: 40px;
    }

    blockquote p {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 300;
        font-size: 13px;
    }

    blockquote p b {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 600;
        font-style: italic;
        font-size: 13px;
    }

    .references {
        display: grid;
        justify-content: center;
        row-gap: 10px;
        padding: 40px 10px 40px 30px;
        margin: 40px 60px 0 60px;
        border-radius: 10px;
        background-color: #f3f3f3;

        h4 {
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 20px;
        }

        p {
            font-size: 16px;
        }

        @media (width <= 768px) {
            padding: 60px 30px;
            margin: 40px 0px;
        }
    }

    .review_container {
        display: flex;
        align-items: center;
        column-gap: 20px;
        padding: 60px 40px;
        margin: 40px 60px 0 60px;
        box-shadow: var(--my_shadow);
        font-size: 16px;
        font-weight: 300;

        img {
            width: 100px;
            border-radius: 50%;
        }

        h4 {
            font-family: "Plus Jakarta Sans";
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 14px;
            font-size: 15px;
        }

        p {
            font-family: "Plus Jakarta Sans";
            font-size: 15px;
            font-weight: 300;
        }

        div {
            padding: 60px 10px;
        }

        @media (width <= 768px) {
            flex-direction: column;
            padding: 60px 40px;
            margin: 60px 0px;
            text-align: center;

            img{
                margin-bottom: 40px;
                width: 50%;
            }
        }

        div {
            padding: 0;
        }
    }

    .comments_title {
        margin: 140px 0 0 140px;
        font-size: 25px;

        @media (width <= 768px) {
            margin-left: 40px;
            margin-top: 60px;
        }
    }


    .comments_sub_container {
        margin: 40px 120px 0 120px;

        .comments_two {
            display: none;
        }

        .comments_two.active {
            display: grid;
        }

        h3 {
            font-family: "Plus Jakarta Sans";
            font-weight: 600;
            letter-spacing: 1px;
            margin-bottom: 14px;
            font-size: 15px;
        }

        p {
            font-family: "Plus Jakarta Sans";
            font-size: 15px;
        }

        @media (width <= 768px) {
            margin: 50px 20px 0 20px;
        }
    }

    .shadow_div {
        padding: 60px 40px;
        background-color: var(--white);
        box-shadow: var(--my_shadow);
        position: relative;
    }
    .view_comments_button {
        margin: 65px 0;
        text-transform: uppercase;
        text-decoration: underline;
        color: var(--violet);
        font-size: 14px;
        text-align: center;
    }
    .sidebar {
        width: 40px;
        position: absolute;
        top: 0;
        left: -15px;
        
        display: grid;
        gap: 10px;
        padding: 10px 0;
        justify-content: center;
        align-items: center;
        border-radius: 0 0 30px 30px;
        background-color: var(--yellow);
        z-index: 4;
        
        span.fecha{
            padding-left: 15px;
            font-family: "Plus Jakarta Sans";
            font-weight: 300;
            border-left: 1px solid;
            display: none;
        }

        span {
            img {
                width: 25px;
                height: 25px;
            }
        }
    }
    .lens {
        font-size: 120%;
    }

    .hidden {
        display: none;
    }
    .lens.zoom_icon {
        display: block;
    }

    @media (width <= 768px) {
        .sidebar {
            display: flex;
            width: 315px;
            border-radius: 0 30px 30px 0;
            gap: 15px;
            top:-20px;
        }

        span.fecha{
            display: inline-block !important;
        }

        .publish {
            display: none;
        }
    }

    .responsive {
        display: grid;
        justify-content: center;
        justify-items: center;
        padding: 70px 100px 60px 100px;
        background-color: var(--white);
        box-shadow: var(--my_shadow);
        background-image: url("./assets/brand/letra.png");
        background-repeat: no-repeat;
        background-position: 48px 20px;
    }

    @media (width <= 768px) {
        .responsive {
            padding: 70px 20px 0 20px;
            background-position: 0px 60px;
            background-size: 40px;
        }
    }
}


.publish {
    position: absolute;
    font-family: 'Plus Jakarta Sans';
    font-weight: 300;
    font-size: 14px;
    top: -20px;
    right: 0;
    padding: 10px 30px;
    border-radius: 30px 0 0 30px;
    color: var(--black);
    background-color: var(--yellow);
}

.read_more_container.about {
    display: grid;
    margin-top: 60px;
}

.tucan,
.almohada,
.tucan_two {
    width: 100px;
    margin: 28px auto;
}

.table_wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* suaviza el scroll en iOS */
}

.pricing_table {
    width: 1080px;
    min-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    border-radius: 0px;
    overflow: hidden;
    width: 100%;
    box-shadow: var(--my_shadow);

    th,
    td {
        padding: 20px 35px;
        font-size: 14px;
        font-family: "Plus Jakarta Sans";
        font-weight: 400;
    }

    th, td, thead, tbody, tr  {
        border: 1px solid #00000080;
    }

    .total-row {
        font-weight: 700;
        font-family: "Plus Jakarta Sans";
    }

    thead th {
        background-color: var(--clear_violet);
        color: var(--white);
        font-weight: 700;
        font-family: "Plus Jakarta Sans";
        border-radius: 8px 8px 0 0;
    }

    thead th:nth-child(2) {
        background-color: var(--violet);
    }

    th:first-child, td:first-child {
        text-align: left;
    }
    th:nth-child(2), td:nth-child(2) {
        text-align: center;
    }
    th:last-child, td:last-child {
        text-align: right;
    }

}

tbody tr:nth-child(even):not(.featured-row):not(.gap):not(.total-row) {
    background-color: var(--white);
}

tbody tr:nth-child(odd):not(.featured-row):not(.gap):not(.total-row) {
    background-color: var(--white);
}

.featured-row {
    background-color: var(--yellow);
    font-weight: bold;

    td {
        color: var(--black);
    }
}

.total-row td:nth-child(2) {
    background: var(--violet);
    color: var(--white);
    font-weight: bold;
    border-radius: 0 0 8px 8px;
}

.total-row td:nth-child(1) {
    border: none;
}

.total-row td:last-child {
    border-radius: 0px 0px 7px 7px;
}

.row-60 th {
    min-height: 40px;
}

.row-100 td {
    min-height: 60px;
}

.row-35 td {
    min-height: 35px;
}

.row-55 td {
    min-height: 55px;
}

/* Separadores visuales */
.gap {
    height: 20px;
    background: #ffc0cb66;
}

.featured {
    background: #5e6be1 !important;
    color: white;
}

.read_more_container.active {
    display: grid;
}

/*Estilos de la página Contac*/
.cards_container {
  display: grid;
  gap: 30px;
  max-width: 1080px;
  margin: 0 auto; 

  > div {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr); 

    article {
      text-align: right;

      img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: center;
        background-color: var(--white);
        box-shadow: 0 0 40px rgba(120, 178, 249, 0.4);
      }

      div {
        width: 100%;
        text-align: right;
        display: block;

        h3 {
          font-family: "Plus Jakarta Sans";
          font-size: 16px;
          font-weight: 700;
          margin-top: 10px;

          span {
            background: -webkit-linear-gradient(var(--clear_violet), var(--violet));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }

  @media (max-width: 767px) {
    > div {
      grid-template-columns: repeat(1, 1fr);
      gap: 30px;

      article {
        img {
          height: 220px;
        }

        div {
          h3 {
            font-size: 17px;
          }
        }
      }
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    > div {
      grid-template-columns: repeat(2, 1fr);
      gap: 25px;

      article {
        img {
          height: 220px;
        }
      }
    }
  }
}

 @media (width <= 768px) {
        .cards_container {
            width: 100%;
            justify-content: center;
        }

        .cards_container  div {
            display: grid;
            justify-content: center;
        }

    }

.container_tucan_two {
    display: grid;
    justify-content: center;
    margin-top: 100px;
}
.contact_img {
    width: 100%;
    height: 400px;
    margin: 60px 0;
    display: grid;
    background-color: var(--white);
    background-image: url(./assets/svg/header.svg);
    background-position: center top 20px;
    background-repeat: no-repeat;
    background-size: 85%;
    align-items: end;

    div {
        display: grid;
        width: 100%;
        height: 40px;
        align-items: center;
        margin-bottom: 40px;
        color: var(--white);
        background: var(--clear_violet);
        background: linear-gradient(
            90deg,
            rgba(149, 146, 246, 1) 54%,
            rgba(96, 64, 237, 1) 100%
        );

        h1 {
            text-align: right;
            margin-right: 20px;
        }
    }
}
@media (width <= 768px) {
    .contact_img {
        background-size: 175%;
    }
    h1 {
        text-align: center;
        margin: 0;
        font-size: 25px;
    }
}

.newsletter_container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 30px 60px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background-color: var(--yellow);

    .newsletter_content {
        display: grid;
        align-items: center;
        gap: 25px;

        p {
            font-family: "Literata";
            font-style: italic;
            font-weight: 400;
        }
    }

    .newsletter_form {
        label {
            font-family: "Plus Jakarta Sans";
            font-weight: 700;
        }

        label,
        button {
            display: block;
            margin-bottom: 10px;
        }
        input {
                width: 100%;              
                height: 40px;               
                padding: 10px;
                margin-bottom: 20px;
                border: none;
                border-radius: 6px;       
                background-color: var(--white);
                font-family: "Plus Jakarta Sans";
                font-weight: 300;
                box-sizing: border-box;    
                outline: none;         

                &:focus {
                    box-shadow: 0 0 0 2px var(--violet);
                }
            }

        button {
            width: 250px;
            padding: 10px 20px;
            height: 50px;
            color: var(--white);
            font-weight: 700;
            font-family: "Plus Jakarta Sans";
            background: var(--clear_violet);
            background: linear-gradient(
                90deg,
                rgba(149, 146, 246, 1) 50%,
                rgba(96, 64, 237, 1) 100%
            )
        }
    }

    @media (width <= 768px) {
        .newsletter_form {
            input, button {
                width: 100%;
            }

        }
    }
}

/* Footer*/

.footer {
    display: grid;
    color: var(--white);
    background: var(--clear_violet);
    background: linear-gradient(
        90deg,
        rgba(149, 146, 246, 1) 54%,
        rgba(96, 64, 237, 1) 100%
    );

    nav {
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        margin: auto;
        padding: 25px 0;
        max-width: 1080px;

        .footer_logo_container {
            height: 100%;
            padding-right: 50px;

            img {
                width: 100px;
                height: 100%;
            }
        }
        .footer_nav_links {
            display: grid;
            justify-content: center;
            height: 100%;
            padding: 0 80px 0 50px;
            row-gap: 10px;
            border-left: 2px solid var(--white);
            font-weight: 700;
            

            li a{
                font-family: "Plus Jakarta Sans";
                font-weight: 600;
                font-size: 15px;
            }
        }
    }

    .copyright {
        height: 60px;
        text-align: center;
        line-height: 60px;
        background-color: var(--blue);
        font-family: "Plus Jakarta Sans";
        font-weight: 300;
        font-size: 13px;
    }
}

@media (width <= 768px) {
    .footer {
        nav {
            justify-content: center;

            .footer_nav_links {
                padding: 0 20px 0 50px;
            }
        }
        .copyright {
            font-size: 12px;
        }
    }
}

.footer.home {
    display: none;
}

.footer.home.active {
    display: grid;
}