:root{
    --apx-red:#FF2800;
    --apx-white:#ffffff;
    --apx-black:#0A0A0A;
    --apx-grey-900:#121212;
    --apx-grey-700:#2A2A2A;
    --apx-grey-500:#6E6E6E;
}

/* Wrapper de la página de contacto */
.apx-contact{
    min-height: 92vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* margen interno para móviles */
    background: linear-gradient(135deg, var(--apx-grey-900) 0%, var(--apx-black) 100%);
}

/* Tarjeta principal */
.apx-contact__container{
    background: var(--apx-white);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    width: 100%;
    max-width: 740px;
    overflow: hidden;
    position: relative;
}

/* Header degradado con rayas sutiles animadas */
.apx-contact__header{
    background: linear-gradient(135deg, var(--apx-red) 0%, #d61e00 100%);
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.apx-contact__header::before{
    content:'';
    position:absolute; inset:-50% -50% auto auto;
    width:200%; height:200%;
    background: repeating-linear-gradient(
            45deg, transparent, transparent 10px, rgba(255,255,255,.03) 10px, rgba(255,255,255,.03) 20px
    );
    animation: apxSlide 20s linear infinite;
}
@keyframes apxSlide{ 0%{transform:translateX(-50px)} 100%{transform:translateX(50px)} }

.brand-box{
    display:inline-flex; align-items:center; justify-content:center;
    height:50px; min-width:60px; padding:0 16px;
    background: rgba(255,255,255,.2);
    color: var(--apx-white);
    border-radius: 12px; letter-spacing:1px; margin-bottom:15px;
    position:relative; z-index:2; backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,.1);
}
.brand-text{
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:2px; font-size:1.8rem; color:var(--apx-white); font-weight:400;
}
.apx-contact__header h1{
    font-family:'Bebas Neue',sans-serif;
    color: var(--apx-white); font-size:3rem; margin:10px 0; letter-spacing:1px; position:relative; z-index:2;
}
.apx-contact__header p{
    color: rgba(255,255,255,.9); font-size:1.1rem; margin:0; position:relative; z-index:2;
}

/* Contenido */
.apx-contact__formwrap{ padding: 45px; }
.form-group{ margin-bottom: 30px; }
.form-group label{
    display:block; margin-bottom:10px; color:var(--apx-black);
    font-weight:600; font-size:1rem;
}
.required{ color:var(--apx-red); margin-left:3px; }

/* Inputs */
.apx-contact__form input,
.apx-contact__form textarea{
    width:100%; padding:18px 20px;
    border:2px solid #e0e0e0; border-radius:14px;
    font-size:1rem; font-family:inherit;
    transition: all .3s ease; background:#f8f9fa;
    color: var(--apx-black);
}
.apx-contact__form input:focus,
.apx-contact__form textarea:focus{
    outline:none; border-color:var(--apx-red); background:#fff;
    box-shadow: 0 0 0 3px rgba(255,40,0,.1); transform: translateY(-2px);
}
.apx-contact__form textarea{ resize:vertical; min-height:140px; line-height:1.6; }

/* Botón CTA */
.btn-cta{
    background:var(--apx-red); color:var(--apx-white);
    border:none; border-radius:14px; padding:18px 40px;
    font-size:1.1rem; font-weight:600; text-transform:uppercase; letter-spacing:1px;
    cursor:pointer; transition:all .3s ease; width:100%; position:relative; overflow:hidden;
}
.btn-cta::before{
    content:''; position:absolute; inset:0 auto 0 -100%;
    width:100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    transition: left .5s;
}
.btn-cta:hover{ filter:brightness(.95); transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,40,0,.3); }
.btn-cta:hover::before{ left:100%; }
.btn-cta:active{ transform:translateY(0); }

/* Mensajes */
.success-message, .error-message{
    padding:18px 24px; border-radius:12px; margin-bottom:25px; font-weight:500;
    display:none; align-items:center;
}
.success-message{ background:#e6f9f2; color:#0f5132; border:1px solid rgba(18,184,134,.3); }
.error-message  { background:#fdeaea; color:#842029; border:1px solid rgba(220,53,69,.3); }
.success-message i, .error-message i{ margin-right:10px; font-size:1.2rem; }

/* Info lateral/abajo */
.contact-info{
    background: var(--apx-grey-700); color: var(--apx-white);
    padding:30px; border-radius:16px; margin-top:35px; position:relative;
}
.contact-info::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--apx-red); border-radius:16px 16px 0 0;
}
.contact-info h3{
    font-family:'Bebas Neue',sans-serif; color:var(--apx-white);
    font-size:1.8rem; margin-bottom:15px; letter-spacing:.5px;
}
.contact-info p{ color:#cfcfcf; margin:8px 0; display:flex; align-items:center; }
.contact-info i{ color:var(--apx-red); margin-right:12px; width:20px; text-align:center; }

/* Anim */
.fade-in{ animation: fadeIn .6s ease-out; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }

/* Loading en botón */
.loading{ position:relative; }
.loading::after{
    content:''; position:absolute; inset:0; margin:auto; width:20px; height:20px;
    border:2px solid transparent; border-top-color:var(--apx-white); border-radius:50%;
    animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Honeypot oculto */
.hp{ position:absolute !important; left:-99999px !important; opacity:0 !important; }

/* Responsivo */
@media (max-width: 768px){
    .apx-contact{ padding:15px; }
    .apx-contact__formwrap{ padding:30px; }
    .apx-contact__header{ padding:30px; }
    .apx-contact__header h1{ font-size:2.5rem; }
    .brand-text{ font-size:1.5rem; }
}
@media (max-width:575.98px){
    .apx-contact__formwrap{ padding:25px; }
    .apx-contact__header{ padding:25px; }
    .apx-contact__form input, .apx-contact__form textarea{ padding:15px 18px; }
    .btn-cta{ padding:16px 30px; font-size:1rem; }
}