.suscribirse__sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sección stretched */
.suscribirse {
    position: relative;
    width: 100%;
    min-height: clamp(280px, 30vw, 420px);
    display: flex;
    align-items: center;
    overflow: hidden;

    /* Fondo “parallax feel” */
    background-image: url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?q=80&w=2400&auto=format&fit=crop");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin-top: 5rem;
}

/* Parallax clásico solo desktop */
@media (min-width:1024px) {
    .suscribirse {
        background-attachment: fixed;
    }
}

/* Overlay con rojo */
.suscribirse__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .56) 40%,
            rgba(0, 0, 0, .30) 70%,
            rgba(0, 0, 0, .62) 100%),
        radial-gradient(900px 420px at 18% 50%,
            rgba(231, 76, 60, .35),
            rgba(231, 76, 60, 0) 65%);
}

/* Container: casi full width */
.suscribirse__container {
    position: relative;
    z-index: 2;
    width: min(1500px, calc(100% - 18px));
    margin: 0 auto;
    padding: clamp(18px, 3vw, 34px) 0;
}

/* Inner: 2 columnas */
.suscribirse__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 3vw, 40px);
    align-items: center;

    padding: clamp(18px, 3vw, 36px);
    border-radius: 14px;

    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    backdrop-filter: blur(7px);
    position: relative;
    overflow: hidden;
}

/* Línea roja decorativa */
.suscribirse__inner::before {
    content: "";
    position: absolute;
    left: -20%;
    top: -60%;
    width: 60%;
    height: 220%;
    transform: rotate(18deg);
    background: linear-gradient(180deg,
            rgba(231, 76, 60, 0),
            rgba(231, 76, 60, .18),
            rgba(231, 76, 60, 0));
    pointer-events: none;
}

.suscribirse__left {
    min-width: 0;
}

.suscribirse__text {
    margin: 0 0 14px;
    color: var(--color-white);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.28;
    max-width: 52ch;
}

.suscribirse__text strong {
    color: var(--color-white);
    position: relative;
    white-space: nowrap;
}

.suscribirse__text strong::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-primary), rgba(231, 76, 60, .25));
}

/* Form */
.suscribirse__form {
    display: grid;
    gap: 10px;
}

.suscribirse__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    max-width: 640px;
}

.suscribirse__input {
    height: 46px;
    width: 100%;
    padding: 0 14px;
    /* border-radius: 12px; */
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: var(--color-white);
    outline: none;
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.suscribirse__input::placeholder {
    color: rgba(255, 255, 255, .70);
}

.suscribirse__input:focus {
    border-color: rgba(231, 76, 60, .85);
    box-shadow: 0 0 0 5px rgba(231, 76, 60, .22);
    background: rgba(255, 255, 255, .10);
}

.suscribirse__btn {
    height: 46px;
    padding: 0 18px;
    /* border-radius: 12px; */
    border: 1px solid rgba(231, 76, 60, .55);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(231, 76, 60, .28);
    transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}

.suscribirse__btn:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(231, 76, 60, .34);
}

.suscribirse__btn:active {
    transform: translateY(0);
}

.suscribirse__btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .7);
    outline-offset: 4px;
}

.suscribirse__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .86rem;
    color: rgba(255, 255, 255, .78);
    line-height: 1.35;
    max-width: 640px;
}

.suscribirse__consent input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.suscribirse__consent a {
    color: rgba(255, 255, 255, .95);
    text-decoration: none;
    border-bottom: 1px solid rgba(231, 76, 60, .65);
}

.suscribirse__consent a:hover {
    border-bottom-color: rgba(231, 76, 60, 1);
}

/* Logo derecha */
.suscribirse__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.suscribirse__logo {
    width: min(360px, 92%);
    height: auto;
    margin-right: clamp(0px, 4vw, 6rem);
    filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .40));
    opacity: .98;
}

/* Responsive */
@media (max-width:980px) {
    .suscribirse__inner {
        grid-template-columns: 1fr;
    }

    .suscribirse__right {
        justify-content: flex-start;
    }

    .suscribirse__logo {
        margin-right: 0;
        width: min(320px, 85%);
    }
}

@media (max-width:560px) {
    .suscribirse__container {
        width: calc(100% - 14px);
    }

    .suscribirse__row {
        grid-template-columns: 1fr;
    }

    .suscribirse__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .suscribirse__btn,
    .suscribirse__input {
        transition: none !important;
    }
}