/* =============================================
   NEWSLETTER POPUP: España 2026 campaign
   ============================================= */

.np-backdrop{
    position:fixed; inset:0;
    z-index:10000;
    background:rgba(8,13,36,0.38);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
}
.np-backdrop.is-visible{ opacity:1; pointer-events:all; }

.np-card{
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(0.94);
    z-index:10001;
    width:min(360px, calc(100vw - 32px));
    background:var(--color-cream);
    border-radius:var(--radius-sm);
    overflow:hidden;
    box-shadow:0 40px 90px rgba(8,13,36,0.34), 0 4px 20px rgba(8,13,36,0.12);
    opacity:0;
    pointer-events:none;
    transition:opacity .4s cubic-bezier(0.16,1,0.3,1), transform .4s cubic-bezier(0.16,1,0.3,1);
}
.np-card.is-visible{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    pointer-events:all;
}

@media (prefers-reduced-motion: reduce){
    .np-card, .np-backdrop{ transition:opacity .01s linear; }
    .np-card{ transform:translate(-50%,-50%); }
}

.np-photo{
    position:relative;
    width:100%;
    aspect-ratio:2/1;
    overflow:hidden;
}
.np-photo img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center 24%;
    display:block;
}
.np-photo::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(58,18,6,0) 58%, var(--color-cream) 100%);
}

.np-badge{
    position:absolute;
    top:16px; left:16px;
    z-index:2;
    background:#FFC21E;
    color:#3A1206;
    font-size:0.64rem;
    font-weight:700;
    letter-spacing:0.09em;
    text-transform:uppercase;
    padding:7px 12px;
    border-radius:9999px;
}

.np-close{
    position:absolute;
    top:14px; right:14px;
    z-index:2;
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border-radius:9999px;
    background:rgba(8,13,36,0.38);
    color:var(--color-cream);
    cursor:pointer;
    backdrop-filter:blur(4px);
    transition:background .18s ease;
}
.np-close:hover{ background:rgba(8,13,36,0.6); }
.np-close:focus-visible{ outline:2px solid #FFC21E; outline-offset:2px; }
.np-close svg{ width:14px; height:14px; }

.np-body{
    position:relative;
    padding:14px 22px 16px;
    text-align:center;
}

.np-eyebrow{
    display:block;
    font-size:0.58rem;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:#D8341F;
    margin-bottom:4px;
}

.np-title{
    font-size:clamp(1.2rem, 3.4vw, 1.4rem);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-0.01em;
    text-transform:uppercase;
    color:var(--color-navy);
    text-wrap:balance;
    margin-bottom:6px;
}
.np-title em{ font-style:normal; color:#D8341F; }

.np-sub{
    font-size:0.8rem;
    line-height:1.4;
    color:rgba(14,27,77,0.62);
    max-width:32ch;
    margin:0 auto 12px;
}

.np-form{ display:flex; gap:8px; margin-bottom:6px; }
.np-input{
    flex:1;
    min-width:0;
    height:42px;
    padding:0 16px;
    border:1.5px solid var(--color-line);
    border-radius:9999px;
    background:#fff;
    color:var(--color-navy);
    font-size:0.88rem;
    font-family:inherit;
    outline:none;
    transition:border-color .18s ease;
}
.np-input::placeholder{ color:rgba(14,27,77,0.38); }
.np-input:focus{ border-color:#D8341F; }

.np-submit{
    flex-shrink:0;
    width:42px; height:42px;
    border-radius:9999px;
    background:var(--color-navy);
    color:#FFC21E;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:background .18s ease, transform .18s ease;
}
.np-submit:hover{ background:#12256a; }
.np-submit:active{ transform:scale(0.94); }
.np-submit:focus-visible{ outline:2px solid #D8341F; outline-offset:2px; }
.np-submit svg{ width:17px; height:17px; }

.np-fine{ font-size:0.64rem; color:rgba(14,27,77,0.42); margin-bottom:6px; }

.np-dismiss{
    display:inline-block;
    font-size:0.76rem;
    font-weight:700;
    color:rgba(14,27,77,0.4);
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
}
.np-dismiss:hover{ color:rgba(14,27,77,0.7); }

.np-success{
    display:none;
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding:8px 0 6px;
}
.np-success.is-active{ display:flex; }
.np-form-wrap.is-hidden{ display:none; }

.np-success-icon{
    width:44px; height:44px;
    border-radius:9999px;
    background:var(--color-navy);
    color:#FFC21E;
    display:flex; align-items:center; justify-content:center;
}
.np-success-icon svg{ width:20px; height:20px; }
.np-success-title{ font-size:0.98rem; font-weight:700; color:var(--color-navy); text-transform:uppercase; }
.np-success-sub{ font-size:0.82rem; color:rgba(14,27,77,0.6); text-align:center; max-width:28ch; }

@media (max-width:480px){
    .np-card{ width:min(300px, calc(100vw - 32px)); }
    .np-body{ padding:12px 18px 14px; }
    .np-eyebrow{ font-size:0.54rem; margin-bottom:3px; }
    .np-title{ font-size:1.05rem; margin-bottom:4px; }
    .np-sub{ font-size:0.74rem; margin-bottom:10px; }
    .np-input{ height:38px; font-size:0.82rem; padding:0 14px; }
    .np-submit{ width:38px; height:38px; }
    .np-submit svg{ width:15px; height:15px; }
    .np-fine{ font-size:0.6rem; margin-bottom:5px; }
    .np-badge{ font-size:0.58rem; padding:6px 10px; top:12px; left:12px; }
    .np-close{ width:28px; height:28px; top:10px; right:10px; }
    .np-close svg{ width:12px; height:12px; }
}