/* =============================================
   ARCHIVO: assets/css/landing-beerxpress.css
   Landing BeerXpress - Estilos específicos
   Módulo independiente del sistema principal
   ============================================= */

:root {
    --primary-gradient: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    --accent-color:     #06b6d4;
    --green-brand:      #328540;
    --text-light:       #ffffff;
    --glass-bg:         rgba(255,255,255,0.08);
    --glass-border:     rgba(255,255,255,0.15);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Inter',sans-serif;
    background:url('../../img/axonFondo.png') center center/cover no-repeat fixed;
    color:var(--text-light);
    overflow-x:hidden;
    min-height:100vh;
}

.data-particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.data-particle  { position:absolute; width:3px; height:3px; background:rgba(255,255,255,.5); border-radius:50%; animation:dataFlow 5s linear infinite; }

@keyframes dataFlow {
    0%   { transform:translate(0,0); opacity:0; }
    10%  { opacity:.8; } 90% { opacity:.8; }
    100% { transform:translate(100vw,50vh); opacity:0; }
}

.landing-wrap { position:relative; z-index:10; min-height:100vh; display:flex; flex-direction:column; padding-bottom:4rem; }

/* Header */
.landing-header { padding:1.5rem 0 1rem; }
.brand-logo     { display:flex; align-items:flex-start; gap:14px; text-decoration:none; }
.logo-img       { height:100px; width:auto; object-fit:contain; margin-top:-12px; } /*tamaño/margen superior*/
.brand-text1    { font-size:3rem; font-weight:800; line-height:1.1; }
.brand-beer     { color:var(--green-brand); }
.brand-xpress   { color:#94A3B8; }
.brand-sub      { font-size:.95rem; color:rgba(255,255,255,.85); margin-top:.1rem; }

.badge-launch   {
    display:inline-block; margin-left:.5rem;
    padding:.15em .7em; font-size:.65rem; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase;
    color:#1A3B5D; background:#FFC857; border-radius:20px;
    vertical-align:middle; white-space:nowrap;
    animation:badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(255,200,87,.5); }
    50%     { box-shadow:0 0 0 6px rgba(255,200,87,0); }
}

/* Hero */
.hero { padding:1.5rem 0 2rem; }
.hero-grid { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.hero-visual { display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.beer-toast  { width:260px; height:auto; filter:drop-shadow(0 4px 24px rgba(251,191,36,.3)); animation:beerFloat 3.5s ease-in-out infinite; }

@keyframes beerFloat {
    0%,100% { transform:translateY(0) rotate(-2deg); }
    50%     { transform:translateY(-12px) rotate(2deg); }
}

.hero-title { font-size:clamp(2.2rem,5vw,3.8rem); font-weight:700; line-height:1.1; margin-bottom:1rem; }
.hero-title span { background:var(--primary-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero-sub  { font-size:1.15rem; color:#ffffff; margin-bottom:.5rem; max-width:600px; text-shadow:0 1px 6px rgba(0,0,0,.55); }

/* Secciones */
.section-title {
    font-size:.85rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color:#ffffff;
    background:rgba(255,255,255,.12);
    border-left:3px solid #06b6d4;
    padding:.35rem .85rem; border-radius:0 8px 8px 0;
    display:inline-block; margin-bottom:1rem;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
}

.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.75rem; margin-bottom:2.5rem; }

.feat-card {
    background:var(--glass-bg); border:1px solid var(--glass-border);
    border-radius:14px; padding:1rem 1.2rem;
    display:flex; align-items:flex-start; gap:.8rem;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:border-color .2s ease, transform .2s ease;
}

.feat-card:hover { border-color:rgba(6,182,212,.5); transform:translateY(-2px); }
.feat-card i    { color:var(--accent-color); font-size:1.2rem; margin-top:.15rem; flex-shrink:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.feat-card span { font-size:.92rem; color:#ffffff; line-height:1.4; text-shadow:0 1px 4px rgba(0,0,0,.45); }

/* Login Section */
.login-section {
    background:var(--glass-bg); border:1px solid var(--glass-border);
    border-radius:16px; padding:2rem; margin-bottom:2.5rem;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    max-width:450px; margin-left:auto; margin-right:auto;
}

/* Modal */
.modal-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,.7); z-index:9998;
    display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

.modal-overlay.active { display:flex; }

.modal-content {
    background:rgba(6,182,212,0.25); border:1px solid rgba(6,182,212,0.4);
    border-radius:16px; padding:2rem;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    max-width:450px; width:90%;
    position:relative; z-index:9999;
    animation:modalSlideIn .3s ease-out;
}

@keyframes modalSlideIn {
    from { transform:translateY(-20px); opacity:0; }
    to { transform:translateY(0); opacity:1; }
}

.modal-close {
    position:absolute; top:1rem; right:1rem;
    background:none; border:none; color:rgba(255,255,255,.7);
    font-size:1.5rem; cursor:pointer;
    transition:color .2s;
}

.modal-close:hover { color:#fff; }

.login-title {
    font-size:1.3rem; font-weight:700; color:#ffffff;
    text-align:center; margin-bottom:1.5rem;
    text-shadow:0 1px 4px rgba(0,0,0,.4);
}

.form-group { margin-bottom:1rem; }

.form-label {
    display:block; font-size:.78rem; font-weight:600;
    color:rgba(255,255,255,.85); margin-bottom:.35rem;
}

.form-input {
    width:100%; padding:.75rem .85rem;
    border:1px solid rgba(255,255,255,.2);
    border-radius:8px; font-size:.95rem;
    color:#ffffff; background:rgba(255,255,255,.1);
    transition:border-color .2s, background .2s;
}

.form-input:focus {
    border-color:var(--accent-color);
    background:rgba(255,255,255,.15);
    outline:none;
}

.form-input::placeholder { color:rgba(255,255,255,.5); }
.form-hint { font-size:.72rem; color:rgba(255,255,255,.6); margin-top:.3rem; }

.remember-row {
    display:flex; align-items:center; gap:.5rem;
    margin:.5rem 0 1.25rem;
}

.remember-row input[type=checkbox] {
    width:16px; height:16px;
    accent-color:var(--accent-color); cursor:pointer;
}

.remember-row label { font-size:.83rem; color:rgba(255,255,255,.85); cursor:pointer; }

.btn-login {
    width:100%; padding:.85rem;
    background:var(--primary-gradient); color:#fff;
    border:none; border-radius:8px;
    font-size:1rem; font-weight:700; cursor:pointer;
    transition:opacity .2s, transform .1s;
}

.btn-login:hover:not(:disabled) { opacity:.92; }
.btn-login:active:not(:disabled) { transform:scale(.98); }
.btn-login:disabled { opacity:.6; cursor:not-allowed; }

.alert {
    padding:.75rem 1rem; border-radius:8px;
    font-size:.85rem; margin-bottom:1rem;
    display:none; align-items:center; gap:.5rem;
}

.alert.error   { background:rgba(239,68,68,.2); border:1px solid rgba(239,68,68,.4); color:#fca5a5; }
.alert.success { background:rgba(16,185,129,.2); border:1px solid rgba(16,185,129,.4); color:#6ee7b7; }
.alert.show    { display:flex; }

/* CTA */
.cta-row { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:2rem; justify-content:center; }

.btn-cta-primary {
    display:inline-flex; align-items:center; gap:.6rem;
    background:var(--primary-gradient); color:#fff;
    font-weight:700; font-size:1rem; padding:.85rem 2rem;
    border-radius:50px; text-decoration:none; border:none; cursor:pointer;
    transition:opacity .2s ease, transform .2s ease;
}

.btn-cta-primary:hover { opacity:.9; transform:translateY(-2px); color:#fff; }

.btn-cta-secondary {
    display:inline-flex; align-items:center; gap:.6rem;
    background:rgba(255,255,255,.1); color:rgba(255,255,255,.9);
    font-weight:600; font-size:.95rem; padding:.85rem 1.8rem;
    border-radius:50px; text-decoration:none;
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(8px);
    transition:background .2s ease, color .2s ease;
}

.btn-cta-secondary:hover { background:rgba(255,255,255,.18); color:#fff; }

/* Selector de idioma */
.lang-switcher {
    display:flex; align-items:center; gap:.3rem;
    background:rgba(255,255,255,.06);
    padding:.25rem .5rem; border-radius:8px;
    border:1px solid rgba(255,255,255,.1);
    position:fixed; top:1rem; right:1rem; z-index:9999;
}

.lang-btn {
    text-decoration:none; font-size:1.3rem;
    padding:.2rem .3rem; border-radius:4px;
    display:inline-flex; align-items:center; justify-content:center;
    transition:all .2s ease; line-height:1;
    background:none; border:none; cursor:pointer;
}

.lang-btn.active  { filter:grayscale(0%); opacity:1; background:rgba(255,255,255,.18); box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.lang-btn.inactive{ filter:grayscale(80%); opacity:.55; }
.lang-btn:hover   { filter:grayscale(0%); opacity:1; background:rgba(255,255,255,.1); }
.lang-divider     { color:rgba(255,255,255,.2); font-size:.8rem; user-select:none; }

/* Footer */
footer {
    position:fixed; bottom:0; left:0; width:100%; z-index:100;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.12);
    padding:.75rem 2rem;
    display:flex; align-items:center; justify-content:space-between;
    box-sizing:border-box;
}

footer .f-left  { font-size:.78rem; color:rgba(255,255,255,.65); letter-spacing:.3px; }
footer .f-mid   { font-size:.78rem; color:rgba(255,255,255,.5); }
footer .f-right { font-size:.78rem; }
footer a { color:rgba(255,255,255,.65); text-decoration:none; }
footer a:hover { color:#fff; }

@media(max-width:768px) {
    .brand-text1 { font-size:2rem; }
    .hero-title  { font-size:2rem; }
    .hero-grid   { grid-template-columns:1fr; }
    .hero-visual { display:none; }
    .cta-row     { flex-direction:column; align-items:flex-start; }
    footer       { flex-direction:column; align-items:flex-start; padding:.75rem 1rem; gap:.3rem; }
    .login-section { margin:1rem; }
    .modal-content { width:95%; padding:1.5rem; }
}