/* Padres Digitales · Suscripción */
.pd-subscribe-page {
    position: relative;
    min-height: 100vh;
    background: #f5f5f7;
}

.pd-subscribe-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 68px);
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem);
    background:
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.92), rgba(255,255,255,0) 28%),
        linear-gradient(135deg, rgba(245,245,247,.98) 0%, rgba(255,255,255,.98) 48%, rgba(232,233,236,.94) 100%);
}

.pd-subscribe-hero::before {
    position: absolute;
    inset: -6%;
    content: "";
    background: url('../images/malla-apple-dense.svg') center / cover no-repeat;
    opacity: .50;
    filter: grayscale(1) contrast(1.02) brightness(.92);
    animation: pd-subscribe-mesh 7.5s ease-in-out infinite alternate;
    pointer-events: none;
}

.pd-subscribe-hero::after {
    position: absolute;
    inset: 0;
    content: "";
    background: radial-gradient(ellipse at center, rgba(255,255,255,.72), rgba(255,255,255,.24) 52%, rgba(245,245,247,.08) 100%);
    pointer-events: none;
}

@keyframes pd-subscribe-mesh {
    from { transform: translate3d(-4px, 3px, 0) scale(1.012); }
    to { transform: translate3d(7px, -5px, 0) scale(1.024); }
}

.pd-subscribe-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(340px, 520px);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.pd-subscribe-hero__eyebrow {
    margin: 0 0 .8rem;
    color: #6e6e73;
    font-size: .94rem;
    font-weight: 760;
}

.pd-subscribe-hero__copy h1 {
    max-width: 760px;
    margin: 0;
    color: #1d1d1f;
    font-size: clamp(3rem, 6vw, 6.1rem);
    line-height: .96;
    letter-spacing: -.055em;
}

.pd-subscribe-hero__copy p:last-child {
    max-width: 620px;
    margin: 1.35rem 0 0;
    color: #6e6e73;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.45;
}

.pd-subscribe-proof {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    max-width: 640px;
    margin: clamp(1.15rem, 2vw, 1.8rem) 0 0;
}

.pd-subscribe-proof span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 .82rem;
    color: #36383d;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(210,210,215,.86);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(29,29,31,.07);
    font-size: .84rem;
    font-weight: 720;
}

.pd-subscribe-form {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #1d1d1f;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(210,210,215,.9);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(29,29,31,.12);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.pd-subscribe-form::before,
.pd-subscribe-form::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.pd-subscribe-form::before {
    right: clamp(-4.8rem, -7vw, -2.5rem);
    bottom: clamp(2.5rem, 6vw, 5.2rem);
    width: clamp(230px, 39vw, 430px);
    aspect-ratio: 1.58;
    border: 2px solid rgba(86,89,96,.17);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.16) 0 49%, transparent 50%),
        linear-gradient(35deg, rgba(255,255,255,.10) 0 49%, transparent 50%),
        linear-gradient(135deg, rgba(29,29,31,.13), rgba(142,142,147,.05));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.52),
        0 34px 80px rgba(29,29,31,.12);
    opacity: .72;
    transform: rotate(-7deg);
    mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.14) 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.14) 86%, transparent 100%);
}

.pd-subscribe-form::after {
    inset: 0;
    background:
        radial-gradient(circle at 80% 32%, rgba(255,255,255,.58), transparent 18%),
        radial-gradient(circle at 74% 68%, rgba(29,29,31,.08), transparent 26%);
    opacity: .78;
}

.pd-subscribe-form > * {
    position: relative;
    z-index: 1;
}

.pd-subscribe-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
}

.pd-subscribe-form label,
.pd-subscribe-topics {
    margin: 0;
}

.pd-subscribe-form label > span:first-child,
.pd-subscribe-topics legend {
    display: block;
    margin-bottom: .45rem;
    color: #1d1d1f;
    font-size: .9rem;
    font-weight: 760;
}

.pd-subscribe-form input[type="text"],
.pd-subscribe-form input[type="email"],
.pd-subscribe-form select {
    width: 100%;
    min-height: 48px;
    padding: 0 .95rem;
    color: #1d1d1f;
    background: rgba(245,245,247,.92);
    border: 1px solid rgba(134,134,139,.34);
    border-radius: 14px;
    font-size: 1rem;
}

.pd-subscribe-form input:focus,
.pd-subscribe-form select:focus {
    outline: 2px solid rgba(134,168,255,.8);
    outline-offset: 1px;
}

.pd-subscribe-topics {
    padding: 1rem;
    border: 1px solid rgba(210,210,215,.74);
    border-radius: 20px;
    background: rgba(245,245,247,.62);
}

.pd-subscribe-topics p {
    margin: -.2rem 0 .9rem;
    color: #6e6e73;
    font-size: .9rem;
}

.pd-subscribe-topics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.pd-subscribe-topics__grid label,
.pd-subscribe-form__privacy {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    align-items: start;
    color: #424245;
    font-size: .92rem;
    line-height: 1.35;
}

.pd-subscribe-topics__grid input,
.pd-subscribe-form__privacy input {
    margin-top: .18rem;
    accent-color: #1d1d1f;
}

.pd-subscribe-digest {
    padding: 1rem;
    border: 1px solid rgba(210,210,215,.74);
    border-radius: 20px;
    background: rgba(245,245,247,.64);
}

.pd-subscribe-digest__label {
    margin: 0 0 .75rem;
    color: #1d1d1f;
    font-size: .9rem;
    font-weight: 760;
}

.pd-subscribe-digest__grid {
    display: grid;
    gap: .6rem;
}

.pd-subscribe-digest__grid div {
    display: grid;
    gap: .12rem;
    padding-left: .72rem;
    border-left: 2px solid rgba(29,29,31,.18);
}

.pd-subscribe-digest__grid strong {
    color: #242529;
    font-size: .92rem;
}

.pd-subscribe-digest__grid span {
    color: #6e6e73;
    font-size: .84rem;
    line-height: 1.38;
}

.pd-subscribe-form__privacy {
    font-size: .82rem;
    color: #6e6e73;
}

.pd-subscribe-form__privacy a {
    color: #1d1d1f;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pd-subscribe-form__legal {
    margin: 0;
    color: #8e8e93;
    font-size: .78rem;
    line-height: 1.45;
}

.pd-subscribe-form button[type="submit"] {
    justify-self: start;
    min-height: 48px;
    padding: 0 1.25rem;
    color: #fff;
    background: #1d1d1f;
    border: 1px solid #1d1d1f;
    border-radius: 999px;
    font-weight: 760;
    transition: color 90ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pd-subscribe-form button[type="submit"]:hover,
.pd-subscribe-form button[type="submit"]:focus,
.pd-subscribe-form button[type="submit"]:active {
    color: #1d1d1f;
    background: #fff;
    border-color: #1d1d1f;
    box-shadow: 0 14px 34px rgba(29,29,31,.14);
    transform: translateY(-1px);
}

@media (max-width: 820px) {
    .pd-subscribe-hero { padding: 3.2rem 0 3rem; }
    .pd-subscribe-hero__inner { grid-template-columns: 1fr; }
    .pd-subscribe-hero__copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
    .pd-subscribe-form__row,
    .pd-subscribe-topics__grid { grid-template-columns: 1fr; }
}


/* 7.5.9: suscripción limpia, sin recuadro blanco dominante, con marca y autor. */
.pd-subscribe-brand {
    display: block;
    width: clamp(180px, 18vw, 260px);
    height: auto;
    margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
    filter: grayscale(1) contrast(1.04);
}

.pd-subscribe-form {
    background: rgba(255,255,255,.48) !important;
    border: 1px solid rgba(210,210,215,.68) !important;
    box-shadow: 0 24px 70px rgba(29,29,31,.08) !important;
}

.pd-subscribe-hero::after {
    background: radial-gradient(ellipse at center, rgba(255,255,255,.42), rgba(255,255,255,.14) 52%, rgba(245,245,247,.04) 100%) !important;
}

.pd-subscribe-author {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .75rem;
    background: rgba(245,245,247,.66);
    border: 1px solid rgba(210,210,215,.72);
    border-radius: 18px;
}

.pd-subscribe-author__avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    color: #f5f5f7;
    background: linear-gradient(135deg, #1d1d1f, #6e6e73);
    border-radius: 999px;
    font-weight: 800;
}

.pd-subscribe-author strong,
.pd-subscribe-author small {
    display: block;
}

.pd-subscribe-author small {
    margin-top: .12rem;
    color: #6e6e73;
    font-size: .78rem;
    line-height: 1.35;
}

.pd-subscribe-form button[type="submit"] {
    color: #fff !important;
    background: #1d1d1f !important;
    border: 1px solid #1d1d1f !important;
}

.pd-subscribe-form button[type="submit"]:hover,
.pd-subscribe-form button[type="submit"]:focus,
.pd-subscribe-form button[type="submit"]:active {
    color: #1d1d1f !important;
    background: #fff !important;
    border-color: #1d1d1f !important;
    box-shadow: inset 0 0 0 1px #1d1d1f, 0 14px 34px rgba(29,29,31,.14) !important;
    transform: translateY(-1px) !important;
}


/* 7.6.0: foto real proporcionada y logotipo al cierre del formulario. */
.pd-subscribe-brand,
.pd-subscribe-author,
.pd-subscribe-author__avatar {
    display: none !important;
}

.pd-subscribe-presenter {
    display: flex;
    gap: .8rem;
    align-items: center;
    padding: .7rem .75rem;
    background: rgba(245,245,247,.58);
    border: 1px solid rgba(210,210,215,.72);
    border-radius: 18px;
}

.pd-subscribe-presenter img {
    display: block;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(210,210,215,.45));
}

.pd-subscribe-presenter strong,
.pd-subscribe-presenter small {
    display: block;
}

.pd-subscribe-presenter small {
    margin-top: .14rem;
    color: #6e6e73;
    font-size: .78rem;
    line-height: 1.35;
}

.pd-subscribe-form-logo {
    display: block;
    width: clamp(150px, 42%, 210px);
    height: auto;
    margin: .4rem auto 0;
    opacity: .72;
    filter: grayscale(1) contrast(1.04);
}

.pd-subscribe-experience {
    position: relative;
    overflow: hidden;
    padding: clamp(3.8rem, 7vw, 7rem) 0;
    background:
        radial-gradient(circle at 18% 42%, rgba(255,255,255,.14), transparent 28%),
        linear-gradient(135deg, #101113 0%, #1d1d1f 48%, #4a4d53 100%);
    color: #f5f5f7;
}

.pd-subscribe-experience::before {
    position: absolute;
    inset: -20%;
    content: "";
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 38px);
    opacity: .44;
    transform: rotate(-8deg);
    pointer-events: none;
}

.pd-subscribe-experience__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, .95fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
}

.pd-subscribe-envelope {
    position: relative;
    min-height: clamp(240px, 32vw, 430px);
    filter: drop-shadow(0 42px 85px rgba(0,0,0,.38));
}

.pd-subscribe-envelope::before,
.pd-subscribe-envelope::after,
.pd-subscribe-envelope span {
    position: absolute;
    content: "";
}

.pd-subscribe-envelope::before {
    inset: 10% 0 8%;
    border: 2px solid rgba(238,242,246,.24);
    border-radius: 28px;
    background:
        linear-gradient(140deg, rgba(255,255,255,.12) 0 49.5%, transparent 50%),
        linear-gradient(40deg, rgba(255,255,255,.09) 0 49.5%, transparent 50%),
        linear-gradient(135deg, rgba(245,245,247,.18), rgba(134,139,146,.08));
    transform: perspective(900px) rotateY(-13deg) rotateZ(-4deg);
}

.pd-subscribe-envelope::after {
    inset: 18% 12% 24%;
    border-top: 2px solid rgba(238,242,246,.22);
    border-left: 2px solid rgba(238,242,246,.13);
    transform: skewY(-18deg);
    opacity: .76;
}

.pd-subscribe-envelope span {
    inset: 0;
    background:
        radial-gradient(circle at 35% 26%, rgba(255,255,255,.26), transparent 18%),
        radial-gradient(circle at 70% 72%, rgba(238,242,246,.18), transparent 24%),
        linear-gradient(90deg, transparent 0%, rgba(245,245,247,.13) 35%, transparent 76%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 64%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 64%, transparent 100%);
}

.pd-subscribe-experience__eyebrow {
    margin: 0 0 .8rem;
    color: #c7c7cc;
    font-size: .86rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pd-subscribe-experience__copy h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 5.2rem);
    line-height: .98;
}

.pd-subscribe-experience__copy p:last-child {
    max-width: 610px;
    margin: 1rem 0 0;
    color: rgba(245,245,247,.76);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.48;
}

.pd-subscribe-values {
    padding: clamp(3rem, 6vw, 5.5rem) 0;
    background: #f5f5f7;
}

.pd-subscribe-values__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.pd-subscribe-values article {
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    background:
        radial-gradient(circle at 80% 0%, rgba(255,255,255,.98), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(238,239,242,.78));
    border: 1px solid rgba(210,210,215,.86);
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(29,29,31,.07);
}

.pd-subscribe-values article span {
    display: block;
    margin: 0 0 1.1rem;
    background: linear-gradient(135deg, rgba(4, 19, 33, .34) 0%, rgba(8, 44, 75, .28) 46%, rgba(10, 93, 148, .34) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(64px, 5.2vw, 86px);
    font-weight: 840;
    letter-spacing: -.075em;
    line-height: .78;
}

.pd-subscribe-values h2 {
    margin: 0;
    color: #1d1d1f;
    font-size: clamp(1.18rem, 1.6vw, 1.55rem);
    line-height: 1.08;
}

.pd-subscribe-values p {
    margin: .65rem 0 0;
    color: #6e6e73;
    font-size: .95rem;
    line-height: 1.46;
}

@media (max-width: 820px) {
    .pd-subscribe-presenter img {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
}

@media (max-width: 820px) {
    .pd-subscribe-proof span {
        min-height: 32px;
        font-size: .78rem;
    }

    .pd-subscribe-form::before {
        right: -5.6rem;
        bottom: 5.6rem;
        width: 280px;
        opacity: .54;
    }

    .pd-subscribe-experience__inner,
    .pd-subscribe-values__grid {
        grid-template-columns: 1fr;
    }

    .pd-subscribe-envelope {
        min-height: 230px;
    }
}


/* 7.6.1: foto fuera del formulario, mayor y sin cápsula. */
.pd-subscribe-presenter,
.pd-subscribe-presenter img {
    display: none !important;
}

.pd-subscribe-presenter-figure {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    max-width: 520px;
    margin: clamp(1.6rem, 3vw, 2.3rem) 0 0;
    padding: 0;
}

.pd-subscribe-presenter-figure img {
    display: block;
    width: clamp(130px, 16vw, 210px);
    height: auto;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 22px 34px rgba(29,29,31,.16));
}

.pd-subscribe-presenter-figure figcaption {
    margin: 0 0 .8rem;
    color: #6e6e73;
    font-size: .95rem;
    line-height: 1.38;
}

.pd-subscribe-presenter-figure strong,
.pd-subscribe-presenter-figure span {
    display: block;
}

.pd-subscribe-presenter-figure strong {
    color: #1d1d1f;
    font-size: 1rem;
}

@media (max-width: 820px) {
    .pd-subscribe-presenter-figure {
        align-items: center;
        gap: .9rem;
    }

    .pd-subscribe-presenter-figure img {
        width: clamp(118px, 34vw, 150px);
    }

    .pd-subscribe-presenter-figure figcaption {
        margin-bottom: 0;
        font-size: .88rem;
    }
}


/* 7.6.2: interacción más rápida en botones y redes. */
:where(button, input[type="submit"], .pd-desktop-header-social a, .pd-mobile-menu-social a, .pd-article-share a, .pd-footer a, .pd-subscribe-form button) {
    transition-duration: 90ms !important;
}

.pd-subscribe-message {
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border-radius: 16px;
    font-size: .92rem;
    font-weight: 650;
}
.pd-subscribe-message--ok { color: #0f5132; background: rgba(209,231,221,.72); border: 1px solid rgba(186,219,204,.9); }
.pd-subscribe-message--error { color: #842029; background: rgba(248,215,218,.72); border: 1px solid rgba(245,194,199,.9); }


/* 7.6.3: elimina el recuadro blanco central del fondo de suscripción. */
.pd-subscribe-hero::after {
    display: none !important;
    content: none !important;
}

.pd-subscribe-hero {
    background:
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.72), rgba(255,255,255,0) 30%),
        linear-gradient(135deg, rgba(245,245,247,.98) 0%, rgba(255,255,255,.96) 48%, rgba(232,233,236,.94) 100%) !important;
}

.pd-subscribe-hero__inner {
    background: transparent !important;
}


/* 7.6.4: eliminación definitiva del cuadro blanco semitransparente en escritorio. */
@media (min-width: 821px) {
    .pd-subscribe-page,
    .pd-subscribe-hero,
    .pd-subscribe-hero__inner,
    .pd-subscribe-hero__copy {
        box-shadow: none !important;
    }

    .pd-subscribe-hero__inner,
    .pd-subscribe-hero__copy,
    .pd-subscribe-hero__copy::before,
    .pd-subscribe-hero__copy::after,
    .pd-subscribe-hero__inner::before,
    .pd-subscribe-hero__inner::after {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .pd-subscribe-hero::after {
        display: none !important;
        opacity: 0 !important;
        background: transparent !important;
    }

.pd-subscribe-hero::before {
        opacity: .50 !important;
        z-index: 0 !important;
    }

    .pd-subscribe-hero__inner {
        isolation: isolate !important;
    }
}


/* 7.11.8: binario sutil dentro de cajas blancas de formulario. */
.pd-subscribe-form::after {
    inset: auto;
    right: -36%;
    bottom: 7%;
    width: 155%;
    content: "0101 1100 0011 1010 0110 1001 0101 0010 1110 0001 1011 0100 0101 1100 0011 1010";
    color: rgba(63,70,79,.13);
    background: none !important;
    font-family: "Courier New", monospace;
    font-size: clamp(.92rem, 1.45vw, 1.35rem);
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.75;
    opacity: .72;
    text-shadow: none;
    transform: rotate(10deg);
    white-space: pre-wrap;
    animation: pd-subscribe-form-binary 19s linear infinite;
}

@keyframes pd-subscribe-form-binary {
    from { translate: 8% 4%; }
    to { translate: -8% -4%; }
}

@media (prefers-reduced-motion: reduce) {
    .pd-subscribe-form::after {
        animation: none;
    }
}

/* 7.11.9: enlaces legales de formularios sin azul ni subrayado. */
.pd-subscribe-form__privacy a { color: currentColor !important; font-weight: 760 !important; font-style: normal !important; text-decoration: none !important; }

/* 7.12.0: binario visible y guía digital en suscripción. */
.pd-subscribe-form {
    isolation: isolate;
}

.pd-subscribe-form::after {
    right: -34%;
    bottom: 2%;
    width: 170%;
    content: "0101 1100 0011 1010 0110 1001 0101 0010\A1110 0001 1011 0100 0101 1100 0011 1010\A0011 1010 0110 1001 0101 0010 1110 0001\A1011 0100 0101 1100 0011 1010 0110 1001";
    color: rgba(63,70,79,.34);
    font-size: clamp(1rem, 1.65vw, 1.58rem);
    line-height: 1.42;
    opacity: .92;
    text-shadow: 0 1px 0 rgba(255,255,255,.42);
}

.pd-subscribe-experience {
    isolation: isolate;
}

.pd-subscribe-experience::after {
    position: absolute;
    inset: 8% -10% auto;
    z-index: 0;
    content: "0101 1100 0011 1010 0110 1001 0101 0010 1110 0001\A1011 0100 0101 1100 0011 1010 0110 1001 0101 0010\A0010 1110 0001 1011 0100 0101 1100 0011 1010 0110\A1100 0011 1010 0110 1001 0101 0010 1110 0001 1011";
    color: rgba(245,245,247,.28);
    font-family: "Courier New", monospace;
    font-size: clamp(1rem, 1.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.72;
    white-space: pre-wrap;
    pointer-events: none;
    opacity: .86;
    transform: rotate(-7deg);
    animation: pd-subscribe-form-binary 20s linear infinite reverse;
}

.pd-subscribe-experience__inner,
.pd-subscribe-experience__copy {
    position: relative;
    z-index: 1;
}

.pd-subscribe-envelope {
    min-height: clamp(270px, 31vw, 430px);
    overflow: visible;
    filter: drop-shadow(0 42px 80px rgba(0,0,0,.36));
}

.pd-subscribe-envelope::before {
    inset: 8% 5% 10%;
    border: 2px solid rgba(245,245,247,.24);
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(245,245,247,.20) 0 17%, transparent 17% 100%),
        repeating-linear-gradient(0deg, rgba(245,245,247,.22) 0 2px, transparent 2px 18px),
        linear-gradient(135deg, rgba(245,245,247,.13), rgba(88,93,102,.08));
    transform: perspective(900px) rotateY(-12deg) rotateZ(-4deg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 28px 60px rgba(0,0,0,.24);
}

.pd-subscribe-envelope::after {
    inset: 19% 15% 20%;
    border-radius: 18px;
    background:
        repeating-linear-gradient(0deg, rgba(245,245,247,.32) 0 2px, transparent 2px 16px),
        repeating-linear-gradient(90deg, rgba(190,198,208,.20) 0 1px, transparent 1px 26px),
        linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.34) 48%, transparent 58% 100%);
    clip-path: polygon(0 0, 87% 0, 100% 14%, 100% 100%, 0 100%);
    transform: translate3d(0,0,0);
    animation: pd-subscribe-guide-pages 4.6s ease-in-out infinite;
}

.pd-subscribe-envelope span {
    inset: 0;
    background:
        radial-gradient(circle at 34% 22%, rgba(255,255,255,.28), transparent 18%),
        radial-gradient(circle at 76% 72%, rgba(190,198,208,.20), transparent 26%),
        linear-gradient(90deg, transparent 0%, rgba(245,245,247,.16) 28%, transparent 74%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 70%, transparent 100%);
}

@keyframes pd-subscribe-guide-pages {
    0%, 100% { translate: 0 0; opacity: .76; }
    45% { translate: 9px -5px; opacity: 1; }
    70% { translate: -3px 3px; opacity: .88; }
}

.pd-subscribe-values article {
    position: relative;
    overflow: hidden;
}

.pd-subscribe-values article::before {
    position: absolute;
    inset: -18% -28%;
    content: "0101 1100 0011 1010 0110\A1001 0101 0010 1110 0001\A1011 0100 0101 1100 0011";
    color: rgba(63,70,79,.16);
    font-family: "Courier New", monospace;
    font-size: clamp(.95rem, 1.4vw, 1.3rem);
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.62;
    white-space: pre-wrap;
    transform: rotate(-11deg);
    pointer-events: none;
}

.pd-subscribe-values article > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 820px) {
    .pd-subscribe-form::after {
        right: -62%;
        bottom: 7%;
        width: 215%;
        font-size: 1rem;
        opacity: .84;
    }

    .pd-subscribe-experience::after {
        inset: 12% -48% auto -28%;
        font-size: .96rem;
        opacity: .62;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-subscribe-experience::after,
    .pd-subscribe-envelope::after {
        animation: none;
    }
}

/* 7.12.1: suscripción con binario completo, variado y en movimiento. */
.pd-subscribe-experience::after {
    inset: -6% -16% -8%;
    width: auto;
    content: "0101 1100 0011 1010 0110 1001 0101 0010 1110 0001\A1011 0100 0101 1100 0011 1010 0110 1001 0101 0010\A0010 1110 0001 1011 0100 0101 1100 0011 1010 0110\A1100 0011 1010 0110 1001 0101 0010 1110 0001 1011\A0110 1001 0101 0010 1110 0001 1011 0100 0101 1100";
    color: rgba(245,245,247,.30);
    font-size: clamp(1rem, 1.7vw, 1.72rem);
    line-height: 1.72;
    opacity: .88;
    transform: rotate(-6deg);
    animation: pd-subscribe-dark-binary-a 24s linear infinite;
}

.pd-subscribe-experience__inner::before {
    position: absolute;
    inset: auto -10% -26% -12%;
    z-index: 0;
    content: "1110 0001 1011 0100 0101 1100 0011 1010 0110\A0101 0010 1110 0001 1011 0100 0101 1100 0011\A1001 0101 0010 1110 0001 1011 0100 0101";
    color: rgba(190,198,208,.24);
    font-family: "Courier New", monospace;
    font-size: clamp(.95rem, 1.45vw, 1.44rem);
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1.9;
    white-space: pre-wrap;
    pointer-events: none;
    transform: rotate(9deg);
    animation: pd-subscribe-dark-binary-b 30s linear infinite;
}

.pd-subscribe-values article::before,
.pd-subscribe-values article::after {
    position: absolute;
    inset: -36% -44%;
    z-index: 0;
    font-family: "Courier New", monospace;
    font-weight: 700;
    letter-spacing: .16em;
    white-space: pre-wrap;
    pointer-events: none;
}

.pd-subscribe-values article::before {
    content: "0101 1100 0011 1010 0110 1001\A0101 0010 1110 0001 1011 0100\A0011 1010 0110 1001 0101 0010\A1110 0001 1011 0100 0101 1100";
    color: rgba(74,80,90,.20);
    font-size: clamp(.95rem, 1.3vw, 1.28rem);
    line-height: 1.72;
    transform: rotate(-12deg);
    animation: pd-subscribe-card-binary-a 20s linear infinite;
}

.pd-subscribe-values article::after {
    content: "1001 0101 0010 1110 0001\A1011 0100 0101 1100 0011\A0110 1001 0101 0010 1110";
    color: rgba(160,169,180,.23);
    font-size: clamp(.86rem, 1.1vw, 1.12rem);
    line-height: 1.92;
    transform: rotate(11deg);
    animation: pd-subscribe-card-binary-b 27s linear infinite;
}

.pd-subscribe-values article:nth-child(2)::before { transform: rotate(7deg); animation-duration: 24s; animation-direction: reverse; color: rgba(35,41,50,.15); }
.pd-subscribe-values article:nth-child(2)::after { transform: rotate(-15deg); animation-duration: 21s; }
.pd-subscribe-values article:nth-child(3)::before { transform: rotate(15deg); animation-duration: 22s; color: rgba(142,151,162,.24); }
.pd-subscribe-values article:nth-child(3)::after { transform: rotate(-7deg); animation-duration: 29s; animation-direction: reverse; color: rgba(74,80,90,.18); }

@keyframes pd-subscribe-dark-binary-a {
    0% { translate: -4% -5%; }
    50% { translate: 6% 8%; }
    100% { translate: -4% -5%; }
}

@keyframes pd-subscribe-dark-binary-b {
    0% { translate: 6% 4%; }
    50% { translate: -7% -8%; }
    100% { translate: 6% 4%; }
}

@keyframes pd-subscribe-card-binary-a {
    0% { translate: -5% -4%; }
    50% { translate: 8% 10%; }
    100% { translate: -5% -4%; }
}

@keyframes pd-subscribe-card-binary-b {
    0% { translate: 7% 8%; }
    50% { translate: -8% -7%; }
    100% { translate: 7% 8%; }
}

@media (max-width: 820px) {
    .pd-subscribe-experience::after {
        inset: -4% -62% -8% -40%;
        font-size: .98rem;
        opacity: .78;
    }

    .pd-subscribe-experience__inner::before {
        inset: auto -58% -16% -46%;
        font-size: .9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-subscribe-experience::after,
    .pd-subscribe-experience__inner::before,
    .pd-subscribe-values article::before,
    .pd-subscribe-values article::after {
        animation: none;
    }
}

/* 7.12.2: carrusel binario visible en toda la tarjeta de suscripción. */
.pd-subscribe-values article::before,
.pd-subscribe-values article::after {
    width: 185%;
}

.pd-subscribe-values article::before {
    inset: -26% auto auto -42%;
    content: "0101 1100 0011 1010 0110 1001 0101 0010\A1110 0001 1011 0100 0101 1100 0011 1010\A0011 1010 0110 1001 0101 0010 1110 0001\A1011 0100 0101 1100 0011 1010 0110 1001\A0101 0010 1110 0001 1011 0100 0101 1100";
    color: rgba(60,67,78,.22);
    font-size: clamp(1rem, 1.45vw, 1.42rem);
    line-height: 1.66;
    transform: rotate(-14deg);
    animation: pd-subscribe-card-binary-sweep-a 18s linear infinite;
}

.pd-subscribe-values article::after {
    right: -46%;
    bottom: -30%;
    content: "1001 0101 0010 1110 0001 1011 0100\A0110 1001 0101 0010 1110 0001 1011\A1100 0011 1010 0110 1001 0101 0010\A0001 1011 0100 0101 1100 0011 1010";
    color: rgba(150,160,172,.26);
    font-size: clamp(.9rem, 1.2vw, 1.18rem);
    line-height: 1.92;
    transform: rotate(13deg);
    animation: pd-subscribe-card-binary-sweep-b 25s linear infinite;
}

.pd-subscribe-values article:nth-child(2)::before {
    inset: -18% auto auto -50%;
    color: rgba(35,41,50,.17);
    transform: rotate(9deg);
    animation-duration: 23s;
    animation-direction: reverse;
}

.pd-subscribe-values article:nth-child(2)::after {
    right: -52%;
    bottom: -18%;
    transform: rotate(-17deg);
    animation-duration: 19s;
}

.pd-subscribe-values article:nth-child(3)::before {
    inset: -30% auto auto -34%;
    color: rgba(142,151,162,.28);
    transform: rotate(16deg);
    animation-duration: 21s;
}

.pd-subscribe-values article:nth-child(3)::after {
    right: -38%;
    bottom: -36%;
    color: rgba(65,72,84,.19);
    transform: rotate(-8deg);
    animation-duration: 29s;
    animation-direction: reverse;
}

@keyframes pd-subscribe-card-binary-sweep-a {
    0% { translate: -6% -8%; }
    45% { translate: 10% 13%; }
    100% { translate: -6% -8%; }
}

@keyframes pd-subscribe-card-binary-sweep-b {
    0% { translate: 9% 10%; }
    50% { translate: -10% -12%; }
    100% { translate: 9% 10%; }
}

@media (max-width: 820px) {
    .pd-subscribe-values article::before {
        width: 230%;
        font-size: .98rem;
    }

    .pd-subscribe-values article::after {
        width: 210%;
        font-size: .88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-subscribe-values article::before,
    .pd-subscribe-values article::after {
        animation: none;
    }
}
