/**
 * Archivo : pages/contact.css
 * Scope   : Contact FE-02.
 * Función : Hero con formulario translúcido y canales posteriores.
 */

.contact-hero { overflow: clip; }
.contact-hero__inner { display: grid; min-height: auto; gap: clamp(var(--space-3), 4vw, var(--space-6)); align-items: start; align-content: start; padding-block: clamp(2rem, 5vw, 4.25rem); }
.contact-hero__editorial { min-width: 0; align-self: start; }
.contact-hero__editorial > .breadcrumbs { width: 100%; margin: 0; padding-block: 0 var(--space-3); }
.contact-hero__copy { align-self: start; }
.contact-hero__copy h1 { max-width: 14ch; }
.contact-hero__copy .page-hero__intro { margin-block-end: 0; color: rgb(255 255 255 / 82%); }
.contact-form-panel { width: 100%; max-width: 48rem; min-width: 0; padding: clamp(var(--space-3), 4vw, var(--space-5)); border: 1px solid rgb(255 255 255 / 20%); border-radius: var(--radius-md); background: rgb(8 8 8 / 52%); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 26%); backdrop-filter: blur(1.25rem); }
.contact-form-panel > h2 { margin-block-end: var(--space-2); font-size: clamp(1.25rem, 3vw, 1.65rem); }
.contact-form-status { display: grid; grid-template-columns: 0.3rem minmax(0, 1fr); gap: var(--space-2); align-items: stretch; margin-block-end: var(--space-4); padding: var(--space-3); border: 1px solid rgb(242 194 48 / 26%); border-radius: var(--radius-sm); background: rgb(8 8 8 / 70%); color: rgb(255 255 255 / 76%); }
.contact-form-status__flag { border-radius: 999px; background: var(--color-accent); }
.contact-form-status p { align-self: center; margin: 0; }
.contact-form-status[data-state="success"] { border-color: rgb(88 202 124 / 52%); background: rgb(26 91 48 / 22%); color: #a8e8ba; }
.contact-form-status[data-state="success"] .contact-form-status__flag { background: #58ca7c; }
.contact-form-status[data-state="error"] { border-color: rgb(237 92 92 / 58%); background: rgb(112 28 28 / 24%); color: #ffb0b0; }
.contact-form-status[data-state="error"] .contact-form-status__flag { background: #ed5c5c; }
.contact-form { max-width: none; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-error { margin: 0.4rem 0 0; color: #ffb0b0; font-size: 0.82rem; line-height: 1.45; }
.form-error[hidden] { display: none; }
.form-check .form-error { grid-column: 1 / -1; }
.contact-form input,
.contact-form select,
.contact-form textarea { border-color: rgb(255 255 255 / 30%); background: rgb(8 8 8 / 78%); color: var(--color-text); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--color-accent); outline-color: var(--color-accent); }
.contact-form [aria-invalid="true"],
.contact-form [aria-invalid="true"]:focus,
.contact-form [aria-invalid="true"]:focus-visible { border-color: #ed5c5c; outline: 2px solid #ed5c5c; outline-offset: 3px; }
.contact-form .is-invalid > label { color: #ffb0b0; }
.contact-form [data-validate-field] { scroll-margin-block-start: calc(var(--site-header-height) + var(--space-4)); }

.contact-turnstile {
    min-height: 4.75rem;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.contact-turnstile .cf-turnstile,
.contact-turnstile iframe {
    max-width: 100%;
    border-radius: inherit;
}

.contact-turnstile__placeholder {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    border: 1px dashed rgb(255 255 255 / 24%);
    border-radius: var(--radius-sm);
    background: rgb(8 8 8 / 42%);
    color: rgb(255 255 255 / 48%);
    font-size: 0.82rem;
    text-align: center;
}

.contact-form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}

.contact-submit {
    display: flex;
    width: 100%;
    justify-content: center;
}

@media (min-width: 40rem) {
    .contact-form-actions {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .contact-submit {
        width: auto;
        justify-content: flex-end;
    }
}

.contact-channels-section { background: var(--color-bg); }
.contact-channels-layout { display: grid; gap: clamp(var(--space-4), 5vw, var(--space-6)); align-items: start; }
.contact-channels h2,
.contact-socials h2 { margin-block-end: var(--space-2); font-size: clamp(1.25rem, 3vw, 1.65rem); }
.contact-channels ul,
.contact-socials ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.contact-channels a { display: grid; gap: 0.1rem; min-height: 3rem; padding: 0.65rem 0; border-block-end: 1px solid var(--color-border); text-decoration: none; }
.contact-channels a span { color: var(--color-muted); font-size: 0.8rem; }
.contact-channels a strong { overflow-wrap: anywhere; }
.contact-channels a:hover strong,
.contact-channels a:focus-visible strong,
.contact-socials a:hover,
.contact-socials a:focus-visible { color: var(--color-accent); }
.contact-socials a { display: inline-flex; min-height: 3rem; align-items: center; gap: 0.75rem; color: var(--color-text); text-decoration: none; }
.contact-socials__icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; color: var(--color-accent); }
.contact-coffee-area { display: flex; grid-column: 1 / -1; align-items: end; justify-content: end; min-width: 0; padding-block-start: var(--space-2); }
.contact-coffee { margin: 0; }

@supports not ((backdrop-filter: blur(1rem))) {
    .contact-form-panel { background: rgb(8 8 8 / 90%); }
}

@media (min-width: 48rem) {
    .contact-channels-layout { grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 0.65fr); }
}

@media (min-width: 64rem) {
    .contact-hero__inner { grid-template-columns: minmax(18rem, 0.78fr) minmax(32rem, 1.22fr); }
    .contact-hero__editorial { position: sticky; inset-block-start: calc(var(--site-header-height) + var(--space-3)); }
    .contact-form-panel { justify-self: end; }
}