/* S27-LAYER */
@layer sections {
/**
 * contact.css — Estilos de paginas de contacto
 * AVN Networks v1.0.0
 * Se carga condicionalmente en /contacto/ y /en/contact/
 */

/* ---- Layout de dos columnas ---- */
.avn-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    padding-block: 4rem;
}
@media (max-width: 768px) {
    .avn-contact-layout { grid-template-columns: 1fr; }
}

/* ---- Columna izquierda — info ---- */
.avn-contact-info__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 1rem;
}
.avn-contact-info__subtitle { color: #aaa; margin-bottom: 2rem; }

.avn-contact-detail {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
    align-items: flex-start;
}
.avn-contact-detail__icon { font-size: 1.25rem; flex-shrink: 0; color: var(--avn-accent); }
.avn-contact-detail__label { font-size: .8rem; color: #888; margin-bottom: .2rem; }
.avn-contact-detail__value a { color: var(--avn-text); text-decoration: none; }
.avn-contact-detail__value a:hover { color: var(--avn-accent); }

/* ---- WhatsApp CTA ---- */
.avn-contact-wa {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: #25d366;
    color: #fff;
    padding: .75rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 1.5rem;
    transition: opacity .2s;
}
.avn-contact-wa:hover { opacity: .88; }

/* ---- Columna derecha — formulario (compacta) ---- */
.avn-contact-form-col {
    background: #111;
    border: 1px solid var(--avn-border);
    border-radius: var(--avn-radius);
    padding: 2rem;
}
.avn-contact-form-col h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

/* ---- CF7 field styles ---- */
.avn-form .wpcf7-form-control-wrap { display: block; margin-bottom: 1rem; }
.avn-form input[type="text"],
.avn-form input[type="email"],
.avn-form input[type="tel"],
.avn-form textarea,
.avn-form select {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid var(--avn-border);
    border-radius: 8px;
    color: var(--avn-text);
    padding: .75rem 1rem;
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .2s;
}
.avn-form input:focus,
.avn-form textarea:focus,
.avn-form select:focus {
    outline: none;
    border-color: var(--avn-accent);
}
.avn-form textarea { min-height: 120px; resize: vertical; }
.avn-form .wpcf7-submit {
    background: var(--avn-accent);
    color: #000;
    border: none;
    padding: .8rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity .2s;
    width: 100%;
}
.avn-form .wpcf7-submit:hover { opacity: .88; }
.avn-form .wpcf7-not-valid-tip { font-size: .8rem; color: #f87171; margin-top: .25rem; }

/* ---- CP-06: botones Maps / Waze ---- */
.avn-contact-map-btns {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}
.avn-contact-map-btn {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s, transform .15s;
    white-space: nowrap;
}
.avn-contact-map-btn:hover { opacity: .85; transform: translateY(-1px); }
.avn-contact-map-btn--maps { background: #1a73e8; color: #fff; }
.avn-contact-map-btn--waze { background: #05c3de; color: #000; }

/* ---- S29 T5: clases faltantes ---- */
/* Contact form wrapper */
.avn-contact-form { position: relative; }

/* CF7 success overlay */
.avn-cf7-success { display: none; position: absolute; inset: 0; background: var(--avn-bg-card); border-radius: var(--avn-radius); z-index: 10; align-items: center; justify-content: center; animation: avn-fade-in .4s ease; }
.avn-cf7-success.is-visible { display: flex; }
.avn-cf7-success__box   { text-align: center; padding: 2.5rem 2rem; }
.avn-cf7-success__icon  { font-size: 3rem; margin-bottom: 1rem; display: block; }
.avn-cf7-success__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 .75rem; color: var(--avn-on-surface); }
.avn-cf7-success__msg   { color: var(--avn-text-muted); margin: 0 0 1.5rem; }
.avn-cf7-success__close { background: none; border: 1px solid var(--avn-border); color: var(--avn-text-muted); border-radius: var(--avn-radius-sm); padding: .5rem 1.25rem; cursor: pointer; transition: border-color .2s, color .2s; }
.avn-cf7-success__close:hover { border-color: var(--avn-accent); color: var(--avn-accent); }
}