/* ===================================
   Contactame
   ===================================

   The reference's contact page is the plainest thing on that whole site: a
   single left-aligned block of text, indented from the left edge, with the
   name in caps at the top and the addressable things underlined. No form, no
   icons, no cards, no columns.

   This is that layout with the colours inverted, as Diana asked - dark ground
   and light text instead of the reference's black-on-white. Everything else
   is measured from it:

     15px / weight 300 / 1px letter-spacing / line-height ~1.42
     text indented from the left rather than starting at the page edge
     (reference: x=213 in a 959px viewport, so a little over a fifth in)

   What this replaces: a Bootstrap two-column layout whose second column was
   empty, a decorative dot-canvas, and a Line Awesome icon beside every line.
   The icons are the main loss and it is deliberate - the reference labels
   each line in words instead, which reads better and drops an icon font from
   the section.
====================================== */

.contact-us {
    background-color: #0b0b0d;
    padding: 118px 0 124px;
    /* anchor for the absolutely-positioned chevron below, same as the other
       three sections */
    position: relative;
}

/* ===================================
   Scroll cue - back to the top

   The same glyph the other three sections carry, pointing the other way. This
   is the last section, so the only place left to go is back where you started;
   an identical downward chevron here would promise a fifth section that does
   not exist.

   hero-fullbleed.css draws it as a right + bottom border pair rotated 45deg
   into a downward V, and defines everything else about it - size, hit target,
   colour, placement 38px off the bottom. Only the angle changes here, and
   this file is linked after that one, so these win at equal specificity.

   The margin flips with the angle. The shared rule lifts the box 4px above
   centre because a downward V carries its visual mass above its vertex; an
   upward one carries it below, so the same 4px goes the other way (-14px +
   8px = -6px). Without it the glyph sits noticeably high in its box.
====================================== */
.contact-scroll::after {
    margin: -6px 0 0 -10px;
    transform: scaleX(var(--chev-stretch)) rotate(-135deg);
}

/* Same 2px nudge along the direction it points as everywhere else: rotating
   (2px, 2px) by -135deg resolves to straight up, exactly as 45deg resolves to
   straight down in the other three. */
.contact-scroll:hover::after,
.contact-scroll:focus-visible::after {
    transform: scaleX(var(--chev-stretch)) rotate(-135deg) translate(2px, 2px);
}

/* Indented like the reference's, but the indent collapses on narrow screens
   where there is no room to give away. max() keeps it from ever being tighter
   than the 25px inset the rest of the site aligns to. */
.contact-block {
    max-width: 640px;
    margin-left: max(25px, 18%);
    padding-right: 25px;
}

.contact-name {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 200;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 34px;
}

.contact-line {
    color: #b8bec7;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 200;
    letter-spacing: 1px;
    line-height: 1.45;
    margin: 0 0 26px;
}

.contact-line:last-child {
    margin-bottom: 0;
}

/* The word above each contact route - "Correo", "WhatsApp". The reference uses
   a plain sentence for this; a dimmer label reads more clearly once the
   colours are inverted, because light-on-dark carries less weight than
   dark-on-light at the same size. */
.contact-label {
    display: block;
    color: #7c818b;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 4px;
}

.contact-line a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .25s ease;
}

.contact-line a:hover,
.contact-line a:focus-visible {
    color: #b8bec7;
}

.contact-line a:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .contact-us {
        padding: 78px 0 84px;
    }

    .contact-block {
        margin-left: 16px;
        padding-right: 16px;
    }
}