/* === Solo formulario: #eb-contact === */

/* Variables y tarjeta locales al form (no globales) */
/*
Colores 3G Dark Jade (oscuro elegante)
#eb-contact {
    --card: #121419;
    --text: #E9EEF3;
    --muted: #9AA3AD;
    --primary: #00D4A4;
    --danger: #FF5A5F;
}

Colores 3G Navy & Gold (corporativo/premium)
#eb-contact {
    --card: #0E1A27;
    --text: #F2F5F8;
    --muted: #A7B0BA;
    --primary: #D4AF37;
    --danger: #E64646;
}

Colores 3G Light Emerald (claro limpio)
#eb-contact {
    --card: #FFFFFF;
    --text: #1F2937;
    --muted: #6B7280;
    --primary: #ED7121;
    --danger: #DC2626;
}

Colores 3G Default
#eb-contact {
    --bg: #0f1115;
    --card: #171a21;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --primary: #00e0a4;
    --danger: #ff4d4f;
}
*/

/* Colores Dafeult */
#eb-contact {
    --card: #FFFFFF;
    --text: #1F2937;
    --muted: #6B7280;
    --primary: #ED7121;
    --danger: #DC2626;

    /* Muevo el estilo de .container al propio form */
    display: block;
    max-width: 720px;
    margin: 4rem auto;
    padding: 2rem;
    background: var(--card);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Box-sizing solo dentro del form */
#eb-contact,
#eb-contact * {
    box-sizing: border-box;
}

/* Campos */
#eb-contact .field {
    margin-bottom: 2rem;
}

#eb-contact label {
    display: block;
    margin-bottom: .35rem;
    color: var(--muted);
    font-size: .95rem;
}

/* Inputs & Textarea */
#eb-contact input[type="text"],
#eb-contact input[type="email"],
#eb-contact input[type="tel"],
#eb-contact textarea {
    width: 100%;
    padding: .9rem 1rem;
    border-radius: 10px;
    border: 1px solid #f3f3f3;
    background: #f7f7f7;
    color: var(--text);
    outline: none;
    transition: border-color .15s ease;
}

#eb-contact textarea {
    resize: vertical;
    min-height: 120px;
}

#eb-contact input:focus,
#eb-contact textarea:focus {
    border-color: var(--primary);
}

/* Textos de ayuda y requerido */
#eb-contact .hint {
    color: var(--muted);
    font-size: .85rem;
}

#eb-contact .req {
    color: var(--primary);
}

/* Botón */
/* Botón visual común para <button> y <a class="eb-btn"> */
#eb-contact :is(button[type="submit"], a.eb-btn) {
    width: 100%;
    padding: 1.5rem 1.5rem;
    border: none;
    border-radius: 12px;
    background: black;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: transform .05s ease, filter .15s ease, opacity .15s ease;
    text-decoration: none; /* quita subrayado del <a> */
}

#eb-contact :is(button[type="submit"], a.eb-btn):active {
    transform: translateY(1px);
}

#eb-contact button[disabled],
#eb-contact a.eb-btn[aria-disabled="true"] {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Estado */
#eb-contact .status {
    margin-top: .85rem;
    min-height: 1.25rem;
    font-size: 1.2rem;
}

#eb-contact .status.error {
    color: var(--danger);
}

#eb-contact .status.ok {
    color: var(--primary);
}

/* Honeypot oculto */
#eb-contact .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Opcional: “blindaje” si la web anfitriona tiene estilos muy agresivos
#eb-contact { all: revert; }  */
/* Explicación de revert: vuelve al valor del UA/usuario en ese contexto. :contentReference[oaicite:1]{index=1} */