/* =========================================================
   HIGH VOLTAGE
   CONTACTO
   Sustituye al bloque "CONTACTO" (.h-contact) de styles.css
   ========================================================= */

.h-contact {
    position: relative;
    background-color: #e4e4e4;
    padding: 110px 0 120px;
}

.h-contact .wrapper-main {
    max-width: 1000px;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 50px;
    row-gap: 0;
    align-items: start;
}


/* =========================
   TÍTULO
   ========================= */

.h-contact h3 {
    margin: 0;

    font-family: 'Bebas Neue', cursive;
    font-size: 11.5rem;
    line-height: .78;
    letter-spacing: -.01em;

    color: #000;

    /* Título en vertical, leyendo de abajo arriba */
    grid-column: 1;
    grid-row: 1 / span 2;

    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: right;
}


/* =========================
   MENSAJE DE ENVÍO (#enviado)
   ========================= */

.h-contact #enviado {
    grid-column: 2;
    grid-row: 1;

    margin-bottom: 18px;
    padding: 22px 26px;

    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.5;

    color: #fff;
    background-color: #000;
    border-left: 6px solid var(--rojo);
}

.h-contact #enviado:empty {
    display: none;
}

/* Mensaje enviado: el formulario desaparece y el mensaje ocupa su sitio */
.h-contact #enviado:last-child {
    margin-bottom: 0;
    padding: 40px;

    font-size: 1.35rem;
}

@media (max-width: 550px) {
    .h-contact #enviado:last-child {
        padding: 26px 22px;
        font-size: 1.15rem;
    }
}


/* =========================
   PANEL DEL FORMULARIO
   ========================= */

.h-contact form {
    grid-column: 2;
    grid-row: 2;

    position: relative;
    z-index: 1;

    margin: 0;

    background-color: #000;
    padding: 45px 40px 40px;
}

.h-contact legend:empty {
    display: none;
}

.h-contact legend {
    padding: 0;
    margin-bottom: 25px;

    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.5;

    color: #cdcdcd;
}

.h-contact .form__group {
    margin-bottom: 22px;
}


/* =========================
   CAMPOS
   ========================= */

.h-contact .input-field,
.h-contact input[type="text"],
.h-contact input[type="tel"],
.h-contact input[type="email"],
.h-contact textarea {
    display: block;
    width: 100%;

    padding: 14px 0;

    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;

    color: #fff;
    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    border-radius: 0;

    transition: border-color .25s ease, box-shadow .25s ease;
}

.h-contact textarea {
    min-height: 140px;
    resize: vertical;
}

.h-contact .input-field:focus,
.h-contact input:focus,
.h-contact textarea:focus {
    outline: none;
    border-bottom-color: var(--rojo);
    box-shadow: 0 1px 0 var(--rojo);
}

.h-contact ::placeholder {
    color: rgba(255, 255, 255, .7);
    opacity: 1;
}


/* =========================
   BOTÓN
   ========================= */

.h-contact .button-lined.--white,
.h-contact button[type="submit"],
.h-contact input[type="submit"] {
    display: block;
    width: 100%;

    margin-top: 35px;
    padding: 14px 20px 12px;

    font-family: 'Bebas Neue', cursive;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: .04em;

    color: #fff;
    background-color: var(--rojo);
    border: 2px solid var(--rojo);

    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.h-contact .button-lined.--white:hover,
.h-contact .button-lined.--white:focus-visible,
.h-contact button[type="submit"]:hover,
.h-contact button[type="submit"]:focus-visible,
.h-contact input[type="submit"]:hover,
.h-contact input[type="submit"]:focus-visible {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .h-contact h3 {
        font-size: 9rem;
    }

    .h-contact .wrapper-main {
        gap: 35px;
    }
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    .h-contact {
        padding: 80px 0 100px;
    }

    .h-contact .wrapper-main {
        display: block;
    }

    .h-contact h3 {
        font-size: 5.5rem;
        margin-bottom: 30px;

        writing-mode: horizontal-tb;
        transform: none;
        text-align: left;
    }
}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 550px) {

    .h-contact {
        padding: 65px 0 85px;
    }

    .h-contact h3 {
        font-size: 4.7rem;
        line-height: .8;
    }

    .h-contact form {
        padding: 30px 22px 26px;
    }
}