/*
    Hu SpA
    hucrea.cl - hucreativa.cl
    Disenno 2025 (rev3)

*/

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;



    --color-first: #5367B9;

    --alpha-first: #5367B9AA;

    --color-second: #029DDE;

    --alpha-second: #029DDECC;

    --color-dark: #003799;

    --alpha-dark: #003799CC;

    --color-black: #333;

    --alpha-black: #333333CC;

    --color-gray: #BFBFBF;

    --alpha-gray: #BFBFBFCC;

    --color-white: #fff;

    --alpha-white: #ffffff30;

    --color-purple: #764ba2;

    --alpha-purple: #764ba2cc;

}



body {

    border-top: .5rem solid var(--alpha-dark);

    font-family: "Raleway", sans-serif;

    line-height: 1.6;

    background: linear-gradient(180deg, var(--alpha-white) 45%, var(--alpha-first) 100%);

    background-attachment: fixed;

    min-height: 100vh;

    max-width: 100vw;

}



.switch {

    font-size: .9rem;

    text-align: center;

    margin: 1rem 0;

}



.switch .icon {

    width: 1rem;

    height: auto;

}



.switch a {

    text-decoration: none;

    color: var(--color-dark);

    font-weight: 500;

}



.switch a:hover {

    color: var(--color-first);

}



.switch .active {

    font-weight: 800;

}



.switch .lang:not(:last-child)::after {

    content: "|";

    color: var(--color-second);

    padding: 0 .5rem;

    font-weight: 500;

}



.copyright {

    font-size: .85rem;

    text-align: center;

    margin: 1rem 0;

}



main {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 100vh;

    position: relative;

}



.content {

    position: relative;

    z-index: 2;

    max-width: 90vw;

    padding: 0 1rem;

}



header {

    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 1rem;

    align-items: center;

    animation: fadeInUp .5s ease-out 1.2s both;

}



#logo {

    width: 100%;

    height: auto;

    margin-bottom: 1rem;

    animation: fadeInUp 1s ease-out;

}



#subtitle {

    text-align: left;

    font-size: 2rem;

    font-weight: 300;

    line-height: 1.2;

    margin-bottom: .5rem;

    animation: fadeInUp 1.5s ease-out 0.3s both;

}



#subtitle .words {

    font-weight: 300;

    animation: fadeInUp 2s ease-out 0.6s both;

}



.verbs {

    display: inline-block;

    font-size: clamp( 1.5rem, 8vw, 3rem );

    text-align: left;

    height: 1em;

    vertical-align: -2px;

}



.verbs > .rotating {

    font-size: 0;

    opacity: 0;

    margin-left: -1rem;

    position: absolute;

    font-weight: 400;

    color: var(--color-second);

}



.verbs > .rotating:nth-child(1) {

    animation: roll 8s linear infinite 0s;

}



.verbs > .rotating:nth-child(2) {

    animation: roll2 8s linear infinite 2s;

}



.verbs > .rotating:nth-child(3) {

    animation: roll 8s linear infinite 4s;

}



.verbs > .rotating:nth-child(4) {

    animation: roll2 8s linear infinite 6s;

}



section.cards {

    display: grid;

    grid-template-columns: repeat( 3, minmax(250px, 1fr) );

    grid-template-rows: 1fr;

    gap: 2rem;

    justify-content: center; 

    align-content: center; 

    justify-items: center; 

    align-items: center; 

    margin: 4rem 0;

    animation: fadeInUp 1s ease-out 1.2s both;

}



.card {

    background: var(--alpha-white);

    padding: 3rem;

    border-radius: 1.5rem;

    backdrop-filter: blur( 1.5rem );

    transition: all .3s ease;

    text-align: left;

}



.card:hover {

    transform: translateY(-0.5rem);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

    background: linear-gradient(180deg, var(--color-white) 35%, var(--alpha-white) 100%);

}



.card:hover > h3 {

    color: var(--color-first);

}



.card h3 {

    color: var(--color-second);

    font-size: 1.5rem;

    margin-bottom: 1rem;

}



.card.contact {

    text-align: center;

    grid-area: 1 / 3 / 3 / 4;

}



.card.ampc {

    grid-area: 2 / 1 / 3 / 3;

}



.sticky {

    top: 10rem;

    position: sticky;

}



button,

a.button {

    color: var(--color-white);

}



.button {

    display: inline-block;

    padding: 1rem 3rem;

    width: max-content;

    margin: 1rem auto;

    background: linear-gradient(45deg, var(--color-second), var(--alpha-first));

    text-decoration: none;

    border-radius: 50px;

    font-weight: 500;

    font-size: 1.1rem;

    transition: all 0.3s ease;

    box-shadow: 0 10px 30px var(--alpha-white);

    animation: fadeInUp 1s ease-out 1.5s both;

    border: none;

    cursor: pointer;

}



.button.inverse {

    border: var(--color-first) .1rem solid;

    background: transparent;

    color: var(--color-first);

}



.button:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 40px var(--alpha-gray);

    background: linear-gradient(45deg, var(--alpha-first), var(--color-second));

    color: var(--color-white);

}



.button-submit {

    width: 100%;

    padding: 18px;

    background: linear-gradient(45deg, var(--alpha-second), var(--alpha-purple));

    border: none;

    border-radius: 50px;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

}



.button-submit:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 30px var(--alpha-gray);

}



.rrss {

    display: flex;

    justify-content: center;

    gap: 1rem;

    margin: 2rem 0;

    animation: fadeInUp 1s ease-out 0.9s both;

}



.social {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    border-radius: 50%;

    color: var(--color-first);

    text-decoration: none;

    font-size: 1.5rem;

    transition: all 0.3s ease;

    backdrop-filter: blur(1rem);

}



.social:hover {

    background: var(--color-first);

    color: var(--color-white);

    transform: translateY(-5px);

    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);

}



/* Modal Styles */

.modal {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: var(--alpha-black);

    backdrop-filter: blur(1rem);

}



.modal-content {

    background: linear-gradient(180deg, var(--color-white) 35%, var(--alpha-first) 200%);

    background-attachment: fixed;

    margin: 3rem auto;

    padding: 2rem;

    border-radius: 1rem;

    width: 90%;

    max-width: 38rem;

    max-height: 80vh;

    position: relative;

    animation: modalFadeIn 0.3s ease-out;

    backdrop-filter: blur(2rem);

    overflow-y: scroll;

    scrollbar-color: var(--color-second) var(--alpha-white);

    scrollbar-width: thin;

}



.close {

    color: var(--alpha-black);

    float: right;

    font-size: 3rem;

    font-weight: 500;

    cursor: pointer;

    transition: color 0.3s ease;

}



.close:hover {

    color: red;

}



.req {

    font-weight: 800;

    font-size: 1.3em;

    color: red;

}



.form-title {

    margin-bottom: 2rem;

    font-size: 2rem;

    text-align: center;

}



.form-group {

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    margin-bottom: .5rem;

    font-weight: 800;

    padding-left: .25rem;

}



.form-group input,

.form-group select,

.form-group textarea {

    font-family: inherit;

    width: 100%;

    padding: .7rem;

    border: .05rem solid var(--alpha-gray);

    border-radius: 1rem;

    font-size: 1rem;

    transition: all 0.3s ease;

    background: var(--color-white);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--alpha-purple);

    background: var(--color-white);

    box-shadow: 0 0 1rem rgba(102, 126, 234, 0.1);

}



.form-group textarea {

    height: 120px;

    resize: vertical;

}



.checkbox-group {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 30px;

}



.checkbox-group input[type="checkbox"] {

    width: auto;

    margin-top: 5px;

}



.checkbox-group label {

    margin-bottom: 0;

    font-size: 0.9rem;

    line-height: 1.4;

}



.particles {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 0;

}



.particle {

    position: absolute;

    background: var(--alpha-first);

    border-radius: 50%;

    animation: float 20s infinite linear;

}



/* Responsive Design */

@media (max-width: 768px) {

    #logo {

        width: 250px;

    }

    

    .social-links {

        gap: 20px;

    }

    

    .social-link {

        width: 50px;

        height: 50px;

        font-size: 1.2rem;

    }

    

    section.cards,

    header {

        grid-template-columns: 1fr;

        grid-template-rows: 1fr;

        gap: 1rem;

        text-align: center;

    }



    .card.contact,

    .card.ampc {

        grid-area: initial;

    }

    

    .card {

        padding: 2rem;

    }

    

    .modal-content {

        margin: 10% auto;

        padding: 2rem;

    }

}



/**

 *  Animaciones

 */



@keyframes float {

    0% {

        transform: translateY(100vh) rotate(0deg);

        opacity: 0;

    }

    10% {

        opacity: .5;

    }

    90% {

        opacity: .9;

    }

    100% {

        transform: translateY(-100vh) rotate(360deg);

        opacity: 0;

    }

}



@keyframes roll {

    0% {

        font-size: 0;

        opacity: 0;

        margin-left: -30px;

        margin-top: 0;

        transform: rotate( -25deg );

        font-weight: 100;

    }



    3% {

        opacity: 1;

        transform: rotate( 0deg );

    }



    5% {

        font-size: inherit;

        opacity: 1;

        margin-left: 0;

        margin-top: 0;

        font-weight: 700;

    }



    20% {

        font-size: inherit;

        opacity: 1;

        margin-left: 0;

        margin-top: 0;

        transform: rotate( 0deg );

    }



    50% {

        font-weight: 500;

        font-size: 0;

        opacity: 0.5;

        margin-right: 1rem;

        margin-top: 5rem;

        color: var(--alpha-white);

    }



    100% {

        font-size: 0;

        opacity: 0;

        margin-right: -2rem;

        margin-top: 0;

        transform: rotate( -15deg );

        font-weight: 100; 

    }

}



@keyframes roll2 {

    0% {

        font-size: 0;

        opacity: 0;

        margin-left: -1rem;

        margin-top: 0;

        transform: rotate( -25deg );

        font-weight: 100;

    }



    3% {

        opacity: 1;

        transform: rotate( 0deg );

    }



    5% {

        font-size: inherit;

        opacity: 1;

        margin-left: 0;

        margin-top: 0;

        font-weight: 700;

    }



    20% {

        font-size: inherit;

        opacity: 1;

        margin-left: 0;

        margin-top: 0;

        transform: rotate( 0deg );

    }



    50% {

        font-weight: 500;

        font-size: 0;

        opacity: 0.5;

        margin-left: 1rem;

        margin-top: 6rem;

        color: var(--alpha-white);

    }



    100% {

        font-size: 0;

        opacity: 0;

        margin-left: -1rem;

        margin-top: 0;

        transform: rotate( 15deg );

        font-weight: 100;

    }

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(2rem);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes modalFadeIn {

    from {

        opacity: 0;

        transform: scale(0.8);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}