/* =========================================================
   AMAZING MEXICAN CRAVINGS — CONTACT US
   El Top Bar y el header usan directamente assets/css/home.css.
   Este archivo solo controla la estructura y los formularios.
   ========================================================= */

:root {
    --amz-contact-background: #101010;
    --amz-contact-card: #1b1b1b;
    --amz-contact-card-bottom: #151515;
    --amz-contact-border: #373737;
    --amz-contact-white: #ffffff;
    --amz-contact-yellow: #ffd400;
    --amz-contact-muted: #dedede;
    --amz-contact-icon-background: #403917;
    --amz-contact-container: 1280px;
}

html,
body {
    overflow-x: hidden;
}

body.amz-contact-body {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--amz-contact-background) !important;
}

/* Ocultar el header y footer predeterminados de Astra. */
body.amz-contact-body #masthead,
body.amz-contact-body .site-header,
body.amz-contact-body .ast-mobile-header-wrap,
body.amz-contact-body .ast-desktop-header-content,
body.amz-contact-body .ast-above-header-wrap,
body.amz-contact-body .ast-main-header-wrap,
body.amz-contact-body .ast-primary-header-bar,
body.amz-contact-body .ast-below-header-wrap,
body.amz-contact-body #colophon,
body.amz-contact-body .site-footer,
body.amz-contact-body .site-above-footer-wrap,
body.amz-contact-body .site-primary-footer-wrap,
body.amz-contact-body .site-below-footer-wrap {
    display: none !important;
}

/* Evitar que Astra coloque header y contenido en una fila. */
body.amz-contact-body #page,
body.amz-contact-body .site,
body.amz-contact-body #content,
body.amz-contact-body .site-content,
body.amz-contact-body .site-content > .ast-container,
body.amz-contact-body #primary {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.amz-contact-body .site-content > .ast-container {
    display: block !important;
}

.amz-contact-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.amz-contact-shell > .amz-topbar,
.amz-contact-shell > .amz-header,
.amz-contact-shell > .amz-contact-page {
    display: block;
    width: 100%;
    max-width: none;
    clear: both;
}

/* No se redefine el header aquí.
   .amz-topbar, .amz-header, .amz-logo, .amz-nav y
   .amz-order-button reciben todo su diseño desde home.css. */

/* =========================================================
   CONTACT US — DOS COLUMNAS
   ========================================================= */

.amz-contact-page {
    width: 100%;
    min-height: 100vh;
    color: var(--amz-contact-white);
    background: var(--amz-contact-background);
    font-family: Arial, Helvetica, sans-serif;
}

.amz-contact-layout-section {
    min-height: 100vh;
    padding:
        32px
        max(20px, env(safe-area-inset-right))
        calc(42px + env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
}

.amz-contact-container {
    width: min(100%, var(--amz-contact-container));
    margin-inline: auto;
}

.amz-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 30px;
    align-items: start;
}

.amz-contact-column {
    min-width: 0;
}

.amz-contact-heading {
    margin-bottom: 35px;
}

.amz-contact-heading h1 {
    margin: 0;
    color: var(--amz-contact-white);
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 900;
    line-height: 0.94;
    letter-spacing: -0.035em;
}

.amz-contact-list {
    display: grid;
    gap: 20px;
}

.amz-contact-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 116px;
    padding: 21px 24px;
    border: 1px solid var(--amz-contact-border);
    border-radius: 31px;
    background:
        linear-gradient(
            180deg,
            var(--amz-contact-card) 0%,
            var(--amz-contact-card-bottom) 100%
        );
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.amz-contact-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--amz-contact-icon-background);
    font-size: 23px;
}

.amz-contact-details {
    min-width: 0;
}

.amz-contact-details h2 {
    margin: 0 0 10px;
    color: var(--amz-contact-yellow);
    font-size: 22px;
    font-weight: 850;
    line-height: 1.05;
}

.amz-contact-details a,
.amz-contact-details p {
    display: block;
    margin: 0;
    color: var(--amz-contact-white);
    font-size: 20px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.amz-contact-details a span {
    display: block;
}

.amz-contact-details a:hover {
    color: var(--amz-contact-yellow);
}

/* =========================================================
   FORMULARIO DERECHO
   ========================================================= */

.amz-contact-form-card {
    padding: 30px;
    border: 1px solid var(--amz-contact-border);
    border-radius: 31px;
    background:
        linear-gradient(
            180deg,
            var(--amz-contact-card) 0%,
            var(--amz-contact-card-bottom) 100%
        );
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.amz-contact-form-heading {
    margin-bottom: 26px;
}

.amz-contact-eyebrow {
    margin: 0 0 8px;
    color: var(--amz-contact-yellow);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.amz-contact-form-heading h2 {
    margin: 0 0 10px;
    color: var(--amz-contact-white);
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
}

.amz-contact-form-heading > p:last-child {
    margin: 0;
    color: var(--amz-contact-muted);
    font-size: 17px;
    line-height: 1.5;
}

.amz-contact-form {
    display: grid;
    gap: 18px;
}

.amz-contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.amz-contact-field {
    display: grid;
    gap: 8px;
}

.amz-contact-field label {
    color: var(--amz-contact-white);
    font-size: 15px;
    font-weight: 700;
}

.amz-contact-field label span {
    color: var(--amz-contact-yellow);
}

.amz-contact-field input,
.amz-contact-field textarea {
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid #4c4c4c;
    border-radius: 13px;
    outline: none;
    color: #111111;
    background: #ffffff;
    font-family: inherit;
    font-size: 16px;
    box-shadow: none;
}

.amz-contact-field textarea {
    min-height: 150px;
    resize: vertical;
}

.amz-contact-field input:focus,
.amz-contact-field textarea:focus {
    border-color: var(--amz-contact-yellow);
    box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.18);
}

.amz-contact-submit {
    min-height: 56px;
    padding: 14px 24px;
    border: 0;
    border-radius: 14px;
    color: #111111;
    background: var(--amz-contact-yellow);
    font-family: inherit;
    font-size: 17px;
    font-weight: 850;
    cursor: pointer;
}

.amz-contact-submit:hover {
    filter: brightness(0.93);
}

.amz-contact-alert {
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: 13px;
    font-size: 15px;
    line-height: 1.45;
}

.amz-contact-alert--success {
    color: #dfffe4;
    background: rgba(30, 145, 61, 0.22);
    border: 1px solid rgba(70, 210, 105, 0.45);
}

.amz-contact-alert--error {
    color: #ffe3e1;
    background: rgba(190, 38, 31, 0.22);
    border: 1px solid rgba(255, 98, 90, 0.45);
}

.amz-contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* =========================================================
   RESPONSIVE DEL CONTENIDO
   ========================================================= */

@media (max-width: 980px) {
    .amz-contact-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .amz-contact-column--information,
    .amz-contact-column--form {
        width: min(100%, 760px);
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .amz-contact-layout-section {
        padding-top: 20px;
    }

    .amz-contact-heading h1 {
        font-size: clamp(44px, 12vw, 62px);
    }

    .amz-contact-card {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 17px;
        min-height: 129px;
        padding: 23px 29px;
        border-radius: 29px;
    }

    .amz-contact-details h2 {
        font-size: 21px;
    }

    .amz-contact-details a,
    .amz-contact-details p {
        font-size: 19px;
    }

    .amz-contact-form-card {
        padding: 23px;
        border-radius: 29px;
    }

    .amz-contact-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .amz-contact-layout-section {
        padding-inline: 13px;
    }

    .amz-contact-heading h1 {
        font-size: 42px;
    }

    .amz-contact-card {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
        min-height: 118px;
        padding: 20px;
        border-radius: 25px;
    }

    .amz-contact-icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .amz-contact-details h2 {
        margin-bottom: 8px;
        font-size: 18px;
    }

    .amz-contact-details a,
    .amz-contact-details p {
        font-size: 16px;
    }

    .amz-contact-form-card {
        padding: 20px;
        border-radius: 25px;
    }

    .amz-contact-field input,
    .amz-contact-field textarea {
        font-size: 15px;
    }
}