/*=========================================================
=                    CONTACT PAGE                         =
=========================================================*/

.contact-page{
    background:var(--bg-alt);
}

.contact-page__container{}

.contact-page__header{
    text-align:center;
    max-width:640px;
    margin-inline:auto;
    padding:var(--space-5) 0 var(--space-4);
}

.contact-page__title{
    font-size:clamp(2.2rem,4vw,3.2rem);
    text-transform:uppercase;
    color:var(--primary-dark);
}

.contact-page__title::after{
    content:"";
    display:block;
    width:52px;
    height:3px;
    margin:var(--space-2) auto 0;
    background:linear-gradient(90deg,var(--sunflower),var(--accent));
    border-radius:2px;
}

.contact-page__description{
    margin-top:var(--space-2);
    color:var(--text-soft);
    font-size:1.1rem;
}

/*---------- Options ----------*/

.contact-options{
    background:var(--bg);
}

.contact-options__container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-3);
}

.contact-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:var(--space-4) var(--space-3) var(--space-3);
    text-align:center;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition-slow), box-shadow var(--transition), border-color var(--transition);
}

.contact-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:var(--sunflower);
}

.contact-card__icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:76px;
    height:76px;
    margin-bottom:var(--space-2);
    border-radius:50%;
    background:var(--primary-soft);
    background-repeat:no-repeat;
    background-position:center;
    background-size:34px;
    transition:transform var(--transition-slow), background var(--transition);
}

.contact-card:hover .contact-card__icon{
    transform:scale(1.08) rotate(-4deg);
    background-color:var(--sunflower-soft);
}

.contact-card__icon--whatsapp{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F6E45'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1-.2.2-.7.8-.8 1-.2.2-.3.2-.5.1-.2-.1-1.1-.4-2-1.3-.7-.7-1.2-1.5-1.4-1.7-.1-.2 0-.4.1-.5l.4-.4c.1-.1.2-.3.2-.4.1-.2 0-.3 0-.5s-.6-1.5-.8-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.2-.9.9-.9 2.2s1 2.6 1.1 2.8c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E");
}

.contact-card__icon--instagram{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6E45' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.1' fill='%232F6E45' stroke='none'/%3E%3C/svg%3E");
}

.contact-card__title{
    margin-bottom:.5rem;
    font-size:1.1rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--primary-dark);
}

.contact-card__description{
    margin-bottom:var(--space-3);
    color:var(--text-soft);
}

/*---------- Location ----------*/

.contact-location{
    background:var(--bg-alt);
}

.contact-location__container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-5);
    align-items:center;
}

.contact-location__title{
    margin-bottom:var(--space-2);
    font-size:clamp(1.9rem,3.2vw,2.4rem);
    text-transform:uppercase;
    color:var(--primary-dark);
}

.contact-location__description{
    margin-bottom:var(--space-3);
    color:var(--text-soft);
}

.contact-location__details{
    display:grid;
    gap:.6rem;
}

.contact-location__details p{
    padding-left:1.3rem;
    position:relative;
    color:var(--text-soft);
}

.contact-location__details p::before{
    content:"";
    position:absolute;
    left:0;
    top:.5rem;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
}

.contact-location__map{
    height:380px;

    overflow:hidden;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    border:1px solid var(--border);
}

.location__iframe{

    display:block;

    width:100%;
    height:100%;

    border:0;
}

/*---------- Form ----------*/

.contact-form{
    background:var(--bg);
}

.contact-form__container{
    max-width:700px;
}

.contact-form__title{
    margin-bottom:var(--space-4);
    text-align:center;
    font-size:clamp(1.9rem,3.2vw,2.4rem);
    text-transform:uppercase;
    color:var(--primary-dark);
}

.form{
    display:grid;
    gap:var(--space-2);
    padding:var(--space-4);
    background:var(--surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.form__input,
.form__textarea{
    padding:var(--space-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg);
    font-family:var(--font-body);
    color:var(--text);
    transition:border-color var(--transition), box-shadow var(--transition);
}

.form__input::placeholder,
.form__textarea::placeholder{
    color:var(--text-soft);
}

.form__input:focus,
.form__textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-soft);
}

.form__textarea{
    min-height:150px;
    resize:vertical;
}

.form .btn{
    justify-self:start;
}

/*---------- CTA ----------*/

.contact-cta{
    text-align:center;
    background:var(--primary-dark);
}

.contact-cta__title{
    margin-bottom:var(--space-3);
    color:var(--text-invert);
    font-size:clamp(1.6rem,3vw,2.2rem);
    text-transform:uppercase;
}

/*---------- Responsive ----------*/

@media(max-width:768px){

  .contact-options__container,
  .contact-location__container{
    grid-template-columns:1fr;
  }

  .form{
    padding:var(--space-3);
  }

}