/* FOOTER — contacto (#contacto). Dirección: «café porteño antañón».
   Contrastes: crema .78 sobre espresso-oscuro ~9.0:1 y el h3 pleno 14.1:1;
   iconos/bordes de placa latón pleno 7.2:1 (>=3 en control); filetes de
   doble latón = ornamento. */
footer {
    background: var(--espresso-oscuro);
    /* doble filete de latón arriba: el umbral de la confitería */
    border-top: 3px double rgba(201, 162, 95, .65); /* 3.8:1 s/ el propio fondo */
    color: rgba(242, 233, 213, .78);
    padding: 70px 6% 30px;
    text-align: center;
    scroll-margin-top: 90px; /* la ancla #contacto no queda tapada por el nav fijo */

    h3 {
        color: var(--crema); /* 14.1:1; reemplaza el style inline del blade */
        font-weight: 400;
        letter-spacing: .04em;
    }

    img {
        height: 80px;
        width: auto; /* el atributo width del HTML no manda */
        margin-bottom: 24px;
    }

    a.tel {
        color: var(--laton); /* latón pleno 7.2:1 s/ el fondo del footer */
        display: inline-block;
        margin-top: 8px;
        font-size: 1rem;
        letter-spacing: .02em;
        text-decoration: none;
        transition: .3s;

        &:hover {
            color: var(--crema); /* 14.1:1 s/ el cambio */
            text-decoration: underline;
            text-decoration-color: rgba(201, 162, 95, .65); /* filete de latón 3.8:1, ornamento */
            text-underline-offset: 4px;
        }

        /* anillo de foco latón sobre espresso-oscuro: 7.2:1 */
        &:focus-visible {
            outline: 2px solid var(--laton);
            outline-offset: 3px;
        }
    }

    .social {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin: 26px 0;

        a {
            width: 42px;
            height: 42px;
            /* placa de latón: borde pleno 7.2:1 s/ el fondo del footer */
            border: 1px solid var(--laton);
            border-radius: 3px; /* placa cuadrada antañona, no pill */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--laton); /* ícono latón 7.2:1, no-textual >=3 */
            background: transparent;
            text-decoration: none;
            transition: .3s;

            /* segundo filete interior, mismo idioma que el resto de las placas */
            &::before {
                content: '';
                position: absolute;
                inset: 3px;
                border: 1px solid rgba(201, 162, 95, .3);
                border-radius: 1px;
                pointer-events: none;
            }

            svg {
                display: block;
            }

            /* anillo de foco latón sobre espresso-oscuro: 7.2:1 */
            &:focus-visible {
                outline: 2px solid var(--laton);
                outline-offset: 3px;
            }

            &:hover {
                background: var(--laton);
                color: var(--espresso-oscuro); /* 7.2:1 s/ el cambio a latón */
            }
        }
    }

    .pago {
        span {
            color: var(--laton); /* 7.2:1 s/ el fondo del footer: etiqueta legible */
            display: block;
            font-size: .72rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        p {
            font-size: .85rem;
            letter-spacing: .04em; /* hereda crema .78: ~9:1 */
        }
    }

    .copy {
        border-top: 1px solid rgba(201, 162, 95, .65); /* 3.8:1, filete legible */
        margin-top: 36px;
        padding-top: 24px;
        font-size: .78rem;
        letter-spacing: .08em;
    }
}