@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg: #04070f;
    --bg2: #07101d;
    --card: rgba(10, 20, 34, .72);
    --line: rgba(100, 170, 255, .14);
    --blue: #12a8ff;
    --blue2: #0074ff;
    --orange: #ff9d25;
    --text: #f5f8ff;
    --muted: #8c9caf;
    --green: #31e59a;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

button, input { font: inherit; }

.ambient {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: .12;
    z-index: -2;
}

.ambient-one { background: #008cff; top: -220px; left: -160px; }
.ambient-two { background: #ff7b00; right: -220px; top: 45%; }

.grid-bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    opacity: .18;
    background-image:
        linear-gradient(rgba(40,120,190,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,120,190,.06) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.site-header {
    height: 82px;
    padding: 0 max(28px, calc((100vw - 1180px) / 2));
    display: flex;
    align-items: center;
    gap: 35px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(4,7,15,.78);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
}

.brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue), #0067ff);
    box-shadow: 0 0 28px rgba(18,168,255,.32);
    font-size: 16px;
}

.brand strong {
    display: block;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.7px;
}

.brand strong b { color: var(--blue); }

.brand small {
    color: var(--orange);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 27px;
    margin-left: auto;
}

.main-nav a {
    color: #aeb9c9;
    font-size: 13px;
    font-weight: 600;
    transition: .25s;
}

.main-nav a:hover { color: white; }

.telegram-btn, .primary-btn, .secondary-btn {
    border-radius: 12px;
    font-weight: 800;
    font-size: 12px;
    transition: .25s;
}

.telegram-btn {
    padding: 13px 19px;
    background: linear-gradient(135deg, #16aaff, #0878ef);
    box-shadow: 0 8px 30px rgba(0,130,255,.22);
}

.telegram-btn:hover, .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0,145,255,.35);
}

.menu-btn {
    display: none;
    background: transparent;
    color: white;
    border: 0;
    font-size: 25px;
}

.hero {
    max-width: 1180px;
    min-height: 690px;
    margin: auto;
    padding: 90px 28px 80px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 60px;
}

.eyebrow, .section-label {
    color: #24b9ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.3px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.pulse, .online {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: var(--green);
    box-shadow: 0 0 12px var(--green);
}

.hero h1 {
    font-size: clamp(58px, 7vw, 94px);
    line-height: .88;
    letter-spacing: -5px;
    margin: 0 0 28px;
}

.hero h1 span, .hero h1 strong {
    display: block;
}

.hero h1 span { color: #f2f6ff; }
.hero h1 strong { color: var(--orange); }

.hero-text {
    color: #9eacbe;
    font-size: 16px;
    line-height: 1.8;
    max-width: 600px;
}

.hero-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 22px;
    background: linear-gradient(135deg, #13b4ff, #0676f0);
    box-shadow: 0 8px 30px rgba(0,140,255,.2);
}

.secondary-btn {
    padding: 15px 22px;
    border: 1px solid rgba(255,157,37,.6);
    color: #ffbd69;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-features {
    display: flex;
    gap: 28px;
    margin-top: 48px;
}

.hero-features div {
    display: grid;
    grid-template-columns: 28px auto;
    column-gap: 8px;
}

.hero-features span {
    grid-row: span 2;
    font-size: 19px;
}

.hero-features strong {
    font-size: 11px;
}

.hero-features small {
    color: #748398;
    font-size: 9px;
    margin-top: 3px;
}

.hero-visual {
    min-height: 500px;
    position: relative;
    display: grid;
    place-items: center;
}

.cinema-card {
    width: min(390px, 75vw);
    aspect-ratio: 1 / 1.08;
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 38%, rgba(17,165,255,.2), transparent 30%),
        linear-gradient(145deg, #081c31, #050910 72%);
    border: 1px solid rgba(45,164,255,.25);
    box-shadow: 0 30px 100px rgba(0,0,0,.6), 0 0 80px rgba(0,128,255,.13);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.cinema-card:before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,.05);
}

.card-glow {
    position: absolute;
    width: 210px;
    height: 210px;
    background: var(--blue);
    filter: blur(90px);
    opacity: .2;
}

.play-ring {
    width: 145px;
    height: 145px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 35px rgba(18,168,255,.4), inset 0 0 30px rgba(18,168,255,.12);
    z-index: 2;
}

.play-ring span {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #12b7ff, #ff941d);
    padding-left: 4px;
    box-shadow: 0 0 30px rgba(18,168,255,.4);
}

.film-strip {
    position: absolute;
    width: 340px;
    height: 62px;
    border-top: 12px dotted rgba(255,157,37,.6);
    border-bottom: 12px dotted rgba(255,157,37,.6);
    opacity: .7;
}

.film-left { transform: rotate(-28deg) translate(-80px, 15px); }
.film-right { transform: rotate(28deg) translate(80px, -15px); border-color: rgba(18,168,255,.6); }

.cinema-copy {
    position: absolute;
    bottom: 43px;
    text-align: center;
    z-index: 2;
}

.cinema-copy small {
    display: block;
    color: #70cbff;
    font-size: 12px;
    letter-spacing: 5px;
    font-weight: 800;
}

.cinema-copy strong {
    font-size: 28px;
    color: var(--orange);
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid rgba(100,180,255,.15);
    border-radius: 15px;
    background: rgba(9,18,31,.84);
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.floating-card > span { font-size: 21px; }

.floating-card small, .floating-card strong {
    display: block;
}

.floating-card small {
    color: #6d849d;
    font-size: 8px;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.floating-card strong {
    font-size: 10px;
    margin-top: 3px;
}

.search-card { left: -5px; top: 80px; }
.bot-card { right: -5px; bottom: 65px; }

.search-section, .plans-section, .community-section, .steps-section, .faq-section {
    max-width: 1180px;
    margin: auto;
    padding: 110px 28px;
}

.search-section {
    text-align: center;
    border-top: 1px solid var(--line);
}

.search-section h2, .steps-section h2, .faq-section h2 {
    margin: 10px 0;
    font-size: clamp(35px, 5vw, 54px);
    letter-spacing: -2.5px;
}

.search-section h2 span, .steps-section h2 span, .faq-section h2 span,
.section-heading h2 span, .community-copy h2 span, .telegram-section h2 span {
    color: var(--orange);
}

.search-section > p {
    color: var(--muted);
    font-size: 14px;
}

.search-box {
    max-width: 750px;
    height: 65px;
    margin: 32px auto 18px;
    padding: 7px;
    display: flex;
    align-items: center;
    background: rgba(12,25,42,.8);
    border: 1px solid rgba(39,152,235,.25);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.search-box > span {
    padding-left: 17px;
    color: #55c8ff;
    font-size: 28px;
}

.search-box input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: white;
    padding: 0 14px;
    font-size: 13px;
}

.search-box input::placeholder { color: #63758b; }

.search-box button {
    height: 51px;
    border: 0;
    border-radius: 11px;
    padding: 0 22px;
    color: white;
    background: linear-gradient(135deg, #10adff, #0678ef);
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}

.categories button {
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(10,20,34,.6);
    color: #9eacbe;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    transition: .2s;
}

.categories button:hover, .categories button.active {
    color: white;
    border-color: rgba(18,168,255,.5);
    background: rgba(18,168,255,.1);
}

.search-message {
    min-height: 25px;
    margin-top: 17px;
    color: #6ccfff;
    font-size: 12px;
}

.plans-section { border-top: 1px solid var(--line); }

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 45px;
}

.section-heading h2 {
    margin: 9px 0 0;
    font-size: 48px;
    letter-spacing: -2.5px;
}

.section-heading p {
    color: var(--muted);
    font-size: 13px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.plan-card {
    position: relative;
    padding: 32px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(12,29,47,.72), rgba(7,12,22,.72));
    overflow: hidden;
}

.plan-card.featured {
    border-color: rgba(18,168,255,.5);
    box-shadow: 0 0 55px rgba(0,128,255,.1);
    transform: translateY(-10px);
}

.plan-card .popular {
    position: absolute;
    right: 0;
    top: 0;
    padding: 8px 13px;
    border-radius: 0 0 0 12px;
    background: var(--blue);
    font-size: 8px;
    font-weight: 900;
}

.plan-icon { font-size: 25px; margin-bottom: 25px; }

.plan-card h3 {
    margin: 0;
    font-size: 15px;
}

.plan-description {
    color: #718299;
    font-size: 11px;
    min-height: 30px;
}

.price {
    margin: 22px 0;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -3px;
}

.price sup { font-size: 18px; color: var(--orange); }
.price span {
    color: #77879a;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 600;
}

.plan-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
    color: #aab6c5;
    font-size: 11px;
    line-height: 2.5;
}

.plan-card a {
    display: block;
    text-align: center;
    padding: 13px;
    border: 1px solid rgba(18,168,255,.3);
    border-radius: 10px;
    font-size: 9px;
    font-weight: 900;
    color: #62caff;
}

.plan-card.featured a {
    color: white;
    background: linear-gradient(135deg, #0baeff, #0875ed);
}

.community-section {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 80px;
    border-top: 1px solid var(--line);
}

.community-copy h2 {
    margin: 12px 0 20px;
    font-size: clamp(38px, 5vw, 58px);
    line-height: .95;
    letter-spacing: -3px;
}

.community-copy p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 13px;
    max-width: 400px;
    margin-bottom: 28px;
}

.chat-window {
    border: 1px solid rgba(65,160,240,.22);
    border-radius: 23px;
    overflow: hidden;
    background: rgba(6,14,25,.86);
    box-shadow: 0 35px 80px rgba(0,0,0,.4);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 19px;
    background: rgba(12,27,45,.85);
    border-bottom: 1px solid var(--line);
}

.chat-avatar {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #11b3ff, #0876ef);
}

.chat-header strong, .chat-header small { display: block; }
.chat-header strong { font-size: 11px; }
.chat-header small { color: #73879e; font-size: 8px; margin-top: 4px; }
.chat-header .online { margin-right: 5px; }
.dots { margin-left: auto; color: #708198; }

.chat-body {
    padding: 22px;
    min-height: 300px;
}

.message {
    display: flex;
    gap: 9px;
    margin-bottom: 19px;
    max-width: 75%;
}

.message .avatar {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #18283a;
    font-size: 9px;
}

.message small {
    display: block;
    color: #71869d;
    font-size: 8px;
    margin-bottom: 4px;
}

.message p {
    margin: 0;
    padding: 10px 12px;
    border-radius: 11px;
    background: #112238;
    color: #c1ccda;
    font-size: 10px;
    line-height: 1.5;
}

.message.system {
    margin-left: 38px;
}

.message.system > span {
    font-size: 17px;
}

.message.system p {
    border: 1px solid rgba(18,168,255,.16);
    color: #65caff;
    background: rgba(18,168,255,.06);
}

.message.me {
    margin-left: auto;
    display: block;
    text-align: right;
}

.message.me p {
    display: inline-block;
    color: white;
    background: linear-gradient(135deg, #0b8de8, #0869d3);
}

.message.me small { margin-top: 4px; }

.chat-input {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

.chat-input input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: white;
    font-size: 10px;
}

.chat-input input::placeholder { color: #51647a; }

.chat-input button {
    border: 0;
    background: transparent;
    color: #36b9ff;
}

.steps-section {
    text-align: center;
    border-top: 1px solid var(--line);
}

.steps-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.step {
    text-align: left;
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(8,17,29,.55);
}

.step-number {
    color: #314459;
    font-size: 11px;
    font-weight: 900;
}

.step-icon {
    font-size: 28px;
    margin: 28px 0 17px;
}

.step h3 {
    font-size: 12px;
    margin: 0 0 9px;
}

.step p {
    color: #738398;
    font-size: 10px;
    line-height: 1.7;
    margin: 0;
}

.faq-section {
    border-top: 1px solid var(--line);
}

.faq-list {
    max-width: 850px;
    margin: 45px auto 0;
}

details {
    border-top: 1px solid var(--line);
}

details:last-child { border-bottom: 1px solid var(--line); }

summary {
    list-style: none;
    cursor: pointer;
    padding: 23px 4px;
    font-size: 13px;
    font-weight: 700;
}

summary::-webkit-details-marker { display: none; }

summary span {
    float: right;
    color: #35baff;
    font-size: 20px;
    font-weight: 400;
}

details p {
    color: #78899d;
    font-size: 11px;
    line-height: 1.8;
    padding: 0 25px 22px 4px;
    margin: 0;
}

.telegram-section {
    max-width: 1120px;
    margin: 30px auto 100px;
    padding: 55px;
    border-radius: 28px;
    border: 1px solid rgba(18,168,255,.2);
    background:
        radial-gradient(circle at 10% 50%, rgba(18,168,255,.13), transparent 35%),
        linear-gradient(110deg, rgba(10,31,51,.9), rgba(7,12,22,.9));
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    overflow: hidden;
}

.telegram-icon {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, #17b4ff, #0875ef);
    font-size: 29px;
    box-shadow: 0 15px 40px rgba(0,130,255,.25);
}

.telegram-section h2 {
    margin: 8px 0;
    font-size: 37px;
    line-height: .95;
    letter-spacing: -2px;
}

.telegram-section p {
    color: #78899c;
    font-size: 11px;
}

.telegram-section .primary-btn {
    margin-left: auto;
    white-space: nowrap;
}

.site-footer {
    padding: 45px 28px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: #5c6d80;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: white;
}

.footer-brand .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 11px;
}

.footer-brand strong {
    font-size: 13px;
}

.footer-brand b { color: var(--blue); }

.site-footer p {
    color: var(--orange);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 25px 0;
}

.footer-links a { font-size: 9px; color: #728297; }

.site-footer > small { font-size: 8px; }

@media (max-width: 900px) {
    .main-nav { display: none; }
    .site-header { gap: 15px; }
    .telegram-btn { margin-left: auto; }
    .menu-btn { display: block; }

    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 65px;
    }

    .eyebrow, .hero-features { justify-content: center; }
    .hero-text { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { min-height: 470px; }

    .plans-grid { grid-template-columns: 1fr; max-width: 500px; margin: auto; }
    .plan-card.featured { transform: none; }

    .community-section { grid-template-columns: 1fr; }
    .community-copy { text-align: center; }
    .community-copy p { margin-left: auto; margin-right: auto; }

    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .site-header { height: 70px; padding: 0 17px; }
    .brand { min-width: 0; }
    .brand strong { font-size: 14px; }
    .brand-mark { width: 34px; height: 34px; }
    .telegram-btn { padding: 10px 12px; font-size: 9px; }

    .hero { padding: 55px 20px; min-height: auto; }
    .hero h1 { font-size: 55px; letter-spacing: -4px; }
    .hero-text { font-size: 13px; }
    .hero-features { gap: 13px; }
    .hero-features small { display: none; }

    .hero-visual { min-height: 390px; }
    .cinema-card { width: 300px; }
    .floating-card { transform: scale(.82); }
    .search-card { left: -10px; }
    .bot-card { right: -10px; }

    .search-section, .plans-section, .community-section, .steps-section, .faq-section {
        padding: 75px 20px;
    }

    .search-box { height: 58px; }
    .search-box button { height: 44px; padding: 0 13px; }
    .search-box > span { font-size: 22px; padding-left: 10px; }

    .section-heading { display: block; }
    .section-heading h2 { font-size: 40px; }
    .section-heading p { margin-top: 12px; }

    .steps-grid { grid-template-columns: 1fr; }
    .step { text-align: center; }

    .telegram-section {
        margin: 20px;
        padding: 35px 25px;
        display: block;
        text-align: center;
    }

    .telegram-icon { margin: 0 auto 20px; }
    .telegram-section .primary-btn { margin: 25px 0 0; }

    .footer-links { flex-wrap: wrap; }
}

/* =========================================
   LO PIDES - PLANES 4 COLUMNAS
   ========================================= */

.plans-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px;
    align-items: stretch;
}

.plans-grid-four .plan-card {
    min-width: 0;
    padding: 26px 22px;
}

.plans-grid-four .plan-card h3 {
    font-size: 15px;
}

.plans-grid-four .plan-description {
    font-size: 10px;
    min-height: 30px;
}

.plans-grid-four .price {
    font-size: 38px;
    white-space: nowrap;
}

.plans-grid-four .price span {
    font-size: 9px;
}

.plans-grid-four .plan-card ul {
    font-size: 10px;
    line-height: 1.6;
}

.plans-grid-four .plan-card li {
    margin-bottom: 8px;
}

.plans-grid-four .plan-card > a {
    font-size: 10px;
}

/* Pantallas medianas */
@media (max-width: 1100px) {
    .plans-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Móviles */
@media (max-width: 900px) {
    .plans-grid-four {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================
   LO PIDES - PULIDO FINAL DE TARJETAS
   ========================================= */

.plans-grid-four {
    align-items: stretch !important;
}

.plans-grid-four .plan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 355px;
    box-sizing: border-box;
    padding: 24px 20px 20px;
}

.plans-grid-four .plan-icon {
    margin-bottom: 14px;
}

.plans-grid-four .plan-card h3 {
    margin-bottom: 6px;
}

.plans-grid-four .plan-description {
    min-height: 28px;
    margin-bottom: 10px;
}

/* Precio alineado */
.plans-grid-four .price {
    min-height: 58px;
    display: flex;
    align-items: center;
    margin: 4px 0 12px;
    line-height: 1;
}

.plans-grid-four .price-free {
    font-size: 17px !important;
    color: #8b9aad;
    letter-spacing: .5px;
}

/* Beneficios ocupan una zona uniforme */
.plans-grid-four .plan-card ul {
    flex: 1;
    min-height: 96px;
    margin: 0 0 18px;
    padding: 0;
}

.plans-grid-four .plan-card li {
    margin-bottom: 9px;
}

/* Botones siempre abajo y alineados */
.plans-grid-four .plan-card > a {
    margin-top: auto;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Plus destacado, pero integrado */
.plans-grid-four .plan-card.featured {
    transform: translateY(-6px);
    min-height: 367px;
}

/* Ultra con un pequeño toque premium */
.plans-grid-four .ultra-plan {
    border-color: rgba(255, 153, 0, .25);
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1100px) {
    .plans-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .plans-grid-four .plan-card {
        min-height: 350px;
    }

    .plans-grid-four .plan-card.featured {
        transform: none;
        min-height: 350px;
    }
}

@media (max-width: 900px) {
    .plans-grid-four {
        grid-template-columns: 1fr !important;
    }

    .plans-grid-four .plan-card,
    .plans-grid-four .plan-card.featured {
        min-height: 0;
    }
}


/* =========================================================
   LO PIDES - HERO PRINCIPAL
   ========================================================= */

.hero-lopides {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 45%, rgba(0, 140, 255, .10), transparent 30%),
        radial-gradient(circle at 20% 30%, rgba(0, 110, 255, .08), transparent 32%),
        linear-gradient(180deg, #020812 0%, #03070e 100%);
}

.hero-inner {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: 60px;
    padding: 80px 0 90px;
}

/* Fondo técnico */
.hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .20;
    background-image:
        linear-gradient(rgba(54, 140, 220, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54, 140, 220, .08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 75%, transparent);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.hero-glow-blue {
    width: 360px;
    height: 360px;
    right: 20%;
    top: 15%;
    background: rgba(0, 136, 255, .13);
}

.hero-glow-orange {
    width: 240px;
    height: 240px;
    right: -30px;
    bottom: 5%;
    background: rgba(255, 137, 0, .07);
}

/* Texto */
.hero-copy {
    position: relative;
    z-index: 5;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #18a8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    margin-bottom: 20px;
}

.hero-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18a8ff;
    box-shadow: 0 0 14px rgba(24, 168, 255, .9);
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(54px, 6vw, 86px);
    line-height: .91;
    letter-spacing: -4px;
    font-weight: 900;
}

.hero-copy h1 span {
    display: block;
    color: #f3f7fc;
}

.hero-copy h1 strong {
    display: block;
    color: #ff9b19;
    font-weight: 900;
    text-shadow: 0 0 35px rgba(255, 155, 25, .10);
}

.hero-lead {
    max-width: 510px;
    margin: 26px 0 30px;
    color: #93a2b7;
    font-size: 16px;
    line-height: 1.75;
}

/* Botones */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-btn {
    min-height: 48px;
    padding: 0 21px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hero-btn:hover {
    transform: translateY(-3px);
}

.hero-btn-primary {
    color: white;
    background: linear-gradient(135deg, #0d9cf5, #0878df);
    box-shadow: 0 10px 30px rgba(0, 140, 255, .20);
}

.hero-btn-secondary {
    color: #dce8f5;
    border: 1px solid rgba(70, 142, 198, .35);
    background: rgba(8, 18, 30, .72);
}

/* Mini características */
.hero-mini-info {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 38px;
}

.hero-mini-item {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hero-mini-item > span {
    font-size: 16px;
}

.hero-mini-item strong,
.hero-mini-item small {
    display: block;
}

.hero-mini-item strong {
    color: #dfe8f2;
    font-size: 10px;
}

.hero-mini-item small {
    color: #66778b;
    font-size: 8px;
    margin-top: 3px;
}

/* =========================================================
   HERO VISUAL
   ========================================================= */

.hero-visual {
    min-height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.hero-main-card {
    width: min(560px, 100%);
    position: relative;
    z-index: 4;
    border: 1px solid rgba(67, 133, 186, .30);
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(10, 24, 39, .97), rgba(3, 10, 18, .98));
    box-shadow:
        0 35px 90px rgba(0, 0, 0, .45),
        0 0 80px rgba(0, 126, 255, .08);
    transform: rotateY(-5deg) rotateX(2deg);
}

.hero-card-top {
    height: 72px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(91, 130, 162, .14);
}

.hero-card-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-play {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: white;
    font-size: 11px;
    background: linear-gradient(135deg, #10a8ff, #0874db);
    box-shadow: 0 0 24px rgba(0, 145, 255, .25);
}

.hero-card-brand strong,
.hero-card-brand small {
    display: block;
}

.hero-card-brand strong {
    color: #edf5fc;
    font-size: 12px;
    letter-spacing: -.3px;
}

.hero-card-brand small {
    color: #ff9a19;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-top: 2px;
}

.hero-live {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #7e90a4;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.hero-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #20d58a;
    box-shadow: 0 0 10px rgba(32, 213, 138, .7);
}

/* Pantalla */
.hero-card-screen {
    min-height: 340px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(12, 138, 255, .20), transparent 32%),
        linear-gradient(145deg, #071827, #030912);
}

.hero-screen-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 134, 255, .10);
    filter: blur(50px);
}

.hero-screen-content {
    position: relative;
    z-index: 3;
    padding: 55px 50px;
}

.hero-screen-label {
    color: #18a8ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero-screen-content h2 {
    margin: 15px 0 27px;
    color: #f5f8fc;
    font-size: 42px;
    line-height: .98;
    letter-spacing: -2px;
}

.hero-screen-content h2 span {
    display: block;
    color: #ff9818;
}

/* Buscador falso */
.hero-search-fake {
    width: 100%;
    max-width: 390px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(53, 147, 216, .28);
    background: rgba(2, 9, 17, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.hero-search-fake > span:first-child {
    font-size: 13px;
}

.hero-search-placeholder {
    flex: 1;
    color: #65788d;
    font-size: 10px;
}

.hero-search-fake b {
    color: #17a8ff;
    font-size: 18px;
}

/* Tarjetas flotantes */
.hero-floating {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-radius: 12px;
    border: 1px solid rgba(78, 139, 181, .22);
    background: rgba(5, 14, 24, .90);
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,.30);
}

.hero-floating > span {
    font-size: 16px;
}

.hero-floating strong,
.hero-floating small {
    display: block;
}

.hero-floating strong {
    color: #dfeaf5;
    font-size: 9px;
}

.hero-floating small {
    color: #65778a;
    font-size: 7px;
    margin-top: 3px;
}

.hero-floating-one {
    left: -25px;
    bottom: 42px;
}

.hero-floating-two {
    right: -25px;
    top: 115px;
}

/* Pie de tarjeta */
.hero-card-bottom {
    min-height: 48px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(91, 130, 162, .12);
}

.hero-card-bottom span {
    color: #53677b;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Órbitas */
.hero-orbit {
    position: absolute;
    border: 1px solid rgba(31, 145, 230, .13);
    border-radius: 50%;
    pointer-events: none;
}

.hero-orbit-one {
    width: 500px;
    height: 500px;
    transform: rotate(-18deg);
}

.hero-orbit-two {
    width: 390px;
    height: 390px;
    transform: rotate(22deg);
    border-color: rgba(255, 148, 20, .08);
}

/* Scroll */
.hero-scroll {
    position: absolute;
    z-index: 5;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    color: #526579;
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-scroll span {
    width: 5px;
    height: 5px;
    border-right: 1px solid #1da7ff;
    border-bottom: 1px solid #1da7ff;
    transform: rotate(45deg);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-top: 65px;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-kicker,
    .hero-actions,
    .hero-mini-info {
        justify-content: center;
    }

    .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual {
        min-height: 450px;
    }
}

@media (max-width: 600px) {

    .hero-lopides {
        min-height: auto;
    }

    .hero-inner {
        width: min(100% - 28px, 560px);
        padding: 55px 0 70px;
    }

    .hero-copy h1 {
        font-size: 52px;
        letter-spacing: -3px;
    }

    .hero-lead {
        font-size: 14px;
    }

    .hero-mini-info {
        gap: 15px;
    }

    .hero-mini-item {
        width: 100%;
        justify-content: center;
    }

    .hero-visual {
        min-height: 390px;
    }

    .hero-main-card {
        transform: none;
        border-radius: 18px;
    }

    .hero-card-screen {
        min-height: 285px;
    }

    .hero-screen-content {
        padding: 42px 25px;
    }

    .hero-screen-content h2 {
        font-size: 32px;
    }

    .hero-floating-one {
        left: 8px;
        bottom: 20px;
    }

    .hero-floating-two {
        right: 8px;
        top: 75px;
    }

    .hero-card-bottom {
        display: none;
    }

    .hero-orbit {
        display: none;
    }

    .hero-scroll {
        display: none;
    }
}


/* =========================================================
   LO PIDES - SECCIÓN EXPLORA
   ========================================================= */

.explore-lopides {
    position: relative;
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
    padding: 95px 0 105px;
}

/* Línea decorativa superior */
.explore-lopides::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(25, 157, 239, .35),
        rgba(255, 151, 20, .25),
        transparent
    );
}

/* Encabezado */
.explore-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.explore-kicker {
    display: inline-block;
    color: #18a8ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.2px;
    margin-bottom: 11px;
}

.explore-head h2 {
    margin: 0;
    color: #f2f6fb;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -2px;
}

.explore-head h2 span {
    color: #ff9918;
}

.explore-head p {
    margin: 12px 0 0;
    color: #718297;
    font-size: 12px;
}

.explore-live {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #61758a;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.3px;
    padding-bottom: 6px;
}

.explore-live span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1fd38b;
    box-shadow: 0 0 12px rgba(31, 211, 139, .7);
}


/* Películas / Series */
.explore-type {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    margin-bottom: 18px;
    border: 1px solid rgba(74, 126, 163, .20);
    border-radius: 14px;
    background: rgba(6, 17, 29, .70);
}

.explore-type .pestana-tipo {
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    color: #718398;
    background: transparent;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.explore-type .pestana-tipo span {
    margin-right: 7px;
}

.explore-type .pestana-tipo:hover {
    color: #dce8f3;
}

.explore-type .pestana-tipo.activo {
    color: white;
    background: linear-gradient(135deg, #119ff1, #0878db);
    box-shadow: 0 8px 25px rgba(0, 135, 245, .18);
}


/* Filtros */
.explore-filters {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.explore-filter-label {
    color: #4f6276;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.explore-filters .pestanas-peliculas {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.explore-filters .pestana-pelicula {
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid rgba(68, 116, 151, .20);
    border-radius: 9px;
    color: #72859a;
    background: rgba(7, 17, 28, .55);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.explore-filters .pestana-pelicula:hover {
    color: #dbe7f2;
    border-color: rgba(20, 155, 239, .35);
}

.explore-filters .pestana-pelicula.activo {
    color: #dff3ff;
    border-color: rgba(17, 161, 245, .55);
    background: rgba(9, 117, 190, .14);
}


/* Mensaje */
.mensaje-explorar {
    min-height: 18px;
    margin: 0 0 15px;
    color: #71859a;
    font-size: 10px;
}


/* Galería */
.explore-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

/*
   Las tarjetas generadas por el JavaScript
   heredan el estilo existente, pero les damos
   un acabado más integrado con la nueva sección.
*/
.explore-gallery > * {
    min-width: 0;
}


/* Pie */
.explore-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(70, 113, 143, .13);
}

.explore-bottom span {
    color: #4e6275;
    font-size: 8px;
}

.explore-bottom a {
    color: #18a8ff;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
}

.explore-bottom a:hover {
    color: #ff9918;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .explore-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .explore-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .explore-live {
        padding-bottom: 0;
    }

    .explore-filters {
        align-items: flex-start;
        flex-direction: column;
    }

    .explore-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .explore-lopides {
        width: min(100% - 28px, 560px);
        padding: 70px 0 75px;
    }

    .explore-head h2 {
        font-size: 34px;
    }

    .explore-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .explore-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   LO PIDES - CATÁLOGO REAL
   ========================================================= */

/* =========================================================
   LO PIDES - ESPACIO RESERVADO PARA CATÁLOGO FUTURO
   ========================================================= */

.catalog-coming-soon {
    position: relative;
    overflow: hidden;
    padding: 110px 24px;
    background:
        radial-gradient(circle at 50% 0%, rgba(39, 124, 255, .10), transparent 42%),
        #080d1c;
}

.catalog-coming-soon::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(65, 139, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(65, 139, 255, .025),
        0 0 0 140px rgba(65, 139, 255, .015);
    pointer-events: none;
}

.catalog-coming-inner {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    margin: 0 auto;
    text-align: center;
}

.catalog-coming-inner .section-label {
    margin-bottom: 18px;
}

.catalog-coming-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(61, 139, 255, .25);
    border-radius: 18px;
    background: rgba(38, 115, 255, .08);
    color: #5ea6ff;
    font-size: 30px;
    box-shadow: 0 0 35px rgba(38, 115, 255, .10);
}

.catalog-coming-inner h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 5vw, 58px);
    line-height: .98;
    letter-spacing: -.04em;
}

.catalog-coming-inner h2 span {
    color: #4d9aff;
}

.catalog-coming-inner p {
    max-width: 560px;
    margin: 24px auto 0;
    color: #9da9bd;
    font-size: 16px;
    line-height: 1.7;
}

.catalog-coming-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 111, 31, .25);
    border-radius: 999px;
    background: rgba(255, 111, 31, .07);
    color: #ff9a65;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

@media (max-width: 600px) {
    .catalog-coming-soon {
        padding: 80px 20px;
    }

    .catalog-coming-inner h2 {
        font-size: 34px;
    }

    .catalog-coming-inner p {
        font-size: 14px;
    }

    .catalog-coming-icon {
        width: 58px;
        height: 58px;
        font-size: 25px;
    }
}

/* =========================================================
   LO PIDES - COMUNIDAD PREMIUM
   ========================================================= */

.community-section {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    gap: clamp(40px, 7vw, 100px);
    align-items: center;
}

.community-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(52, 135, 255, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 80px rgba(52, 135, 255, .025),
        0 0 0 160px rgba(52, 135, 255, .015);
    pointer-events: none;
}

.community-copy {
    position: relative;
    z-index: 1;
}

.community-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 5vw, 68px);
    line-height: .94;
    letter-spacing: -.045em;
}

.community-copy h2 span {
    color: #4d9aff;
}

.community-copy > p {
    max-width: 570px;
    margin: 24px 0 0;
    color: #a7b2c6;
    font-size: 16px;
    line-height: 1.75;
}

.community-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 620px;
    margin: 30px 0;
}

.community-highlight {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 13px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.community-highlight > span {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(43, 127, 255, .10);
    font-size: 15px;
}

.community-highlight strong,
.community-highlight small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-highlight strong {
    color: #eaf1ff;
    font-size: 11px;
}

.community-highlight small {
    margin-top: 3px;
    color: #758198;
    font-size: 9px;
}

.community-chat-card {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(77, 154, 255, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(38, 116, 255, .12), transparent 35%),
        #0b1121;
    box-shadow:
        0 28px 70px rgba(0,0,0,.34),
        0 0 55px rgba(35, 112, 255, .06);
    transform: rotate(.5deg);
    transition: transform .3s ease, border-color .3s ease;
}

.community-chat-card:hover {
    transform: rotate(0deg) translateY(-4px);
    border-color: rgba(77, 154, 255, .28);
}

.community-chat-card .chat-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.018);
}

.community-chat-card .chat-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: linear-gradient(135deg, #277fff, #1455b9);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 8px 22px rgba(35, 112, 255, .22);
}

.community-chat-card .chat-title-wrap {
    min-width: 0;
    flex: 1;
}

.community-chat-card .chat-title-wrap strong {
    display: block;
    color: #f4f7ff;
    font-size: 12px;
    letter-spacing: .04em;
}

.community-chat-card .chat-title-wrap small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #7f8ba1;
    font-size: 10px;
}

.community-chat-card .online {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background: #55d889;
    box-shadow: 0 0 9px rgba(85,216,137,.55);
}

.community-chat-card .dots {
    color: #68748a;
    font-size: 13px;
    letter-spacing: 2px;
}

.community-chat-card .chat-body {
    min-height: 370px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-activity {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 auto 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: #68758c;
    font-size: 9px;
    letter-spacing: .05em;
}

.activity-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #55d889;
    box-shadow: 0 0 8px rgba(85,216,137,.55);
}

.community-chat-card .message {
    position: relative;
    max-width: 82%;
}

.community-chat-card .message.other {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.community-chat-card .message .avatar {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: #19243a;
    color: #91a0b9;
    font-size: 10px;
    font-weight: 800;
}

.community-chat-card .message > div {
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 5px 13px 13px 13px;
    background: rgba(255,255,255,.035);
}

.community-chat-card .message small {
    display: block;
    color: #6f7d94;
    font-size: 9px;
}

.community-chat-card .message p {
    margin: 4px 0 0;
    color: #d5ddeb;
    font-size: 12px;
    line-height: 1.45;
}

.community-chat-card .message time {
    display: block;
    margin-top: 5px;
    color: #59667c;
    font-size: 8px;
}

.community-chat-card .message.system {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-left: 38px;
}

.community-chat-card .message.system > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(43, 127, 255, .11);
}

.community-chat-card .message.system > div {
    border-color: rgba(43, 127, 255, .12);
    background: rgba(43, 127, 255, .055);
}

.community-chat-card .message.system small {
    color: #5798ed;
}

.community-chat-card .message.me {
    align-self: flex-end;
    margin-top: 3px;
    padding: 10px 13px;
    border-radius: 14px 5px 14px 14px;
    background: linear-gradient(135deg, #1f6ee0, #1754b2);
    box-shadow: 0 8px 20px rgba(25, 91, 190, .18);
}

.community-chat-card .message.me p {
    color: #fff;
}

.community-chat-card .message.me small {
    margin-top: 5px;
    color: rgba(255,255,255,.62);
    text-align: right;
}

.chat-footer {
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.10);
}

.community-chat-card .chat-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: #617087;
}

.chat-placeholder {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
}

.chat-send {
    color: #4d9aff;
    font-size: 14px;
}

.chat-telegram-link {
    display: block;
    margin-top: 10px;
    color: #639fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: right;
    text-decoration: none;
}

.chat-telegram-link:hover {
    color: #fff;
}

@media (max-width: 980px) {
    .community-section {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .community-copy {
        max-width: 760px;
    }

    .community-chat-card {
        max-width: 680px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .community-copy h2 {
        font-size: 42px;
    }

    .community-copy > p {
        font-size: 14px;
    }

    .community-highlights {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .community-highlight {
        padding: 11px;
    }

    .community-chat-card {
        border-radius: 19px;
        transform: none;
    }

    .community-chat-card .chat-body {
        min-height: 330px;
        padding: 18px 14px;
    }

    .community-chat-card .message {
        max-width: 90%;
    }
}


/* =========================================================
   LO PIDES - CÓMO FUNCIONA PREMIUM
   ========================================================= */

.steps-section {
    position: relative;
    overflow: hidden;
}

.steps-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 55px;
}

.steps-heading h2 {
    margin: 14px 0 0;
    font-size: clamp(42px, 5vw, 76px);
    line-height: .92;
    letter-spacing: -3px;
    font-weight: 900;
}

.steps-heading h2 span {
    color: var(--accent, #2f80ff);
}

.steps-heading > p {
    max-width: 390px;
    margin: 0 0 5px;
    color: rgba(255,255,255,.62);
    font-size: 15px;
    line-height: 1.8;
}

/* Flujo de tarjetas */

.steps-flow {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.step-card {
    position: relative;
    min-height: 330px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    box-shadow: 0 22px 60px rgba(0,0,0,.18);
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.step-card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -90px;
    bottom: -90px;
    border-radius: 50%;
    border: 1px solid rgba(47,128,255,.18);
}

.step-card:hover {
    transform: translateY(-7px);
    border-color: rgba(47,128,255,.28);
}

.step-card-featured {
    border-color: rgba(255,145,48,.25);
    background:
        linear-gradient(145deg, rgba(255,145,48,.09), rgba(255,255,255,.018));
}

.step-card-featured:hover {
    border-color: rgba(255,145,48,.45);
}

.step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step-number {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,.42);
}

.step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(47,128,255,.10);
    border: 1px solid rgba(47,128,255,.18);
    color: #6fa9ff;
    font-size: 21px;
    font-weight: 700;
}

.step-card-featured .step-icon {
    background: rgba(255,145,48,.10);
    border-color: rgba(255,145,48,.22);
    color: #ff963d;
}

.step-line {
    width: 38px;
    height: 2px;
    margin: 34px 0 27px;
    background: rgba(47,128,255,.65);
}

.step-card-featured .step-line {
    background: rgba(255,145,48,.75);
}

.step-card h3 {
    margin: 0 0 14px;
    font-size: 25px;
    letter-spacing: -.5px;
}

.step-card p {
    max-width: 245px;
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 14px;
    line-height: 1.75;
}

.step-tag {
    position: absolute;
    left: 25px;
    bottom: 24px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,255,255,.38);
}

/* Línea inferior */

.steps-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 38px;
    color: rgba(255,255,255,.35);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.steps-bottom strong {
    color: rgba(255,255,255,.82);
}

.steps-bottom-arrow {
    color: rgba(47,128,255,.7);
    font-size: 15px;
}

.steps-bottom-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f80ff;
    box-shadow: 0 0 14px rgba(47,128,255,.7);
}

/* Responsive */

@media (max-width: 1050px) {
    .steps-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-card {
        min-height: 290px;
    }
}

@media (max-width: 760px) {
    .steps-heading {
        display: block;
        margin-bottom: 38px;
    }

    .steps-heading h2 {
        font-size: clamp(40px, 12vw, 58px);
        letter-spacing: -2px;
    }

    .steps-heading > p {
        margin-top: 24px;
    }

    .steps-flow {
        grid-template-columns: 1fr;
    }

    .step-card {
        min-height: 270px;
    }

    .steps-bottom {
        flex-wrap: wrap;
        gap: 10px;
        text-align: center;
    }
}


/* =========================================================
   LO PIDES - FAQ PREMIUM
   ========================================================= */

.faq-section {
    position: relative;
    overflow: hidden;
}

.faq-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}

.faq-heading h2 {
    margin: 14px 0 0;
    font-size: clamp(44px, 5vw, 72px);
    line-height: .94;
    letter-spacing: -3px;
    font-weight: 900;
}

.faq-heading h2 span {
    color: var(--accent, #2f80ff);
}

.faq-heading > p {
    max-width: 350px;
    margin: 0 0 5px;
    color: rgba(255,255,255,.58);
    font-size: 15px;
    line-height: 1.8;
}

/* Lista */

.faq-list {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,.09);
}

.faq-item {
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 25px 8px;
    cursor: pointer;
    list-style: none;
    color: rgba(255,255,255,.9);
    font-size: 17px;
    font-weight: 700;
    transition: color .2s ease;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: #ffffff;
}

.faq-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(47,128,255,.25);
    border-radius: 50%;
    color: #6fa9ff;
    font-size: 21px;
    font-weight: 400;
    transition: transform .25s ease, background .25s ease;
}

.faq-item[open] .faq-plus {
    transform: rotate(45deg);
    background: rgba(47,128,255,.10);
}

.faq-answer {
    max-width: 760px;
    padding: 0 55px 25px 8px;
}

.faq-answer p {
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 1.8;
}

/* Destacar la pregunta abierta */

.faq-item[open] summary {
    color: #ffffff;
}

.faq-item[open] {
    border-bottom-color: rgba(47,128,255,.24);
}

/* Responsive */

@media (max-width: 760px) {
    .faq-heading {
        display: block;
        margin-bottom: 35px;
    }

    .faq-heading h2 {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -2px;
    }

    .faq-heading > p {
        margin-top: 22px;
    }

    .faq-item summary {
        padding: 21px 4px;
        font-size: 15px;
    }

    .faq-answer {
        padding: 0 45px 22px 4px;
    }
}


/* =========================================================
   FAQ - ESTADO ACTIVO
   ========================================================= */

/* Preguntas cerradas */
.faq-item summary {
    color: rgba(255,255,255,.88);
    transition: color .25s ease;
}

/* Hover */
.faq-item summary:hover {
    color: #4d91ff;
}

/* Pregunta abierta */
.faq-item[open] summary {
    color: #ff963d;
}

/* Icono de pregunta abierta */
.faq-item[open] .faq-plus {
    color: #ff963d;
    border-color: rgba(255,150,61,.35);
    background: rgba(255,150,61,.08);
}

/* Línea activa */
.faq-item[open] {
    border-bottom-color: rgba(255,150,61,.28);
}


/* =========================================================
   FAQ - TÍTULO ACTIVO EN NARANJA
   ========================================================= */

.faq-item[open] summary,
.faq-item[open] summary > span:first-child {
    color: #ff963d !important;
}

.faq-item[open] .faq-plus {
    color: #ff963d !important;
    border-color: rgba(255,150,61,.40);
    background: rgba(255,150,61,.08);
}


/* =========================================================
   LO PIDES - FOOTER DEFINITIVO
   ========================================================= */

.site-footer {
    position: relative;
    margin-top: 0;
    padding: 62px 0 24px;
    background: #030811;
    border-top: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -390px;
    bottom: -450px;
    border-radius: 50%;
    border: 1px solid rgba(47,128,255,.10);
    box-shadow:
        0 0 0 75px rgba(47,128,255,.018),
        0 0 0 150px rgba(255,150,61,.012);
    pointer-events: none;
}

/* CONTENEDOR */

.footer-main {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.35fr .85fr .95fr .9fr;
    gap: 50px;
    align-items: start;
}

/* MARCA */

.footer-brand {
    min-width: 0;
    padding: 0;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.footer-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: linear-gradient(145deg, #1596ff, #0875e8);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 10px 28px rgba(20,130,255,.18);
}

.footer-logo span:last-child {
    display: flex;
    flex-direction: column;
}

.footer-logo strong {
    color: #fff;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.5px;
    white-space: nowrap;
}

.footer-logo small {
    margin-top: 5px;
    color: #ff963d;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 2px;
}

.footer-brand > p {
    margin: 17px 0 0;
    max-width: 260px;
    color: rgba(255,255,255,.42);
    font-size: 12px;
    line-height: 1.6;
}

/* COLUMNAS */

.footer-title {
    display: block;
    margin-bottom: 18px;
    color: #27b7ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-column a {
    width: fit-content;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.4;
    transition: color .2s ease, transform .2s ease;
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(3px);
}

/* TELEGRAM */

.footer-column:nth-child(3) a:first-of-type {
    color: rgba(255,255,255,.70);
}

.footer-column:nth-child(3) a:last-of-type {
    color: rgba(255,255,255,.55);
}

/* CTA */

.footer-cta {
    padding-left: 30px;
    border-left: 1px solid rgba(255,255,255,.08);
}

.footer-cta h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 27px;
    line-height: .92;
    letter-spacing: -1.2px;
    font-weight: 900;
}

.footer-cta h3 span {
    color: #2f80ff;
}

.footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 17px;
    border: 1px solid rgba(47,128,255,.35);
    border-radius: 9px;
    background: rgba(47,128,255,.08);
    color: #70a9ff;
    text-decoration: none;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.footer-button:hover {
    background: #2f80ff;
    color: #fff;
    transform: translateY(-2px);
}

/* BARRA INFERIOR */

.footer-bottom {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 48px));
    margin: 48px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255,255,255,.25);
    font-size: 9px;
}

.footer-bottom-brand {
    color: rgba(255,255,255,.25);
    font-size: 8px;
    letter-spacing: 1.5px;
}

.footer-bottom-brand strong {
    color: rgba(255,255,255,.55);
}

/* TABLET */

@media (max-width: 950px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 38px 55px;
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-cta {
        padding-left: 0;
        border-left: 0;
    }
}

/* MÓVIL */

@media (max-width: 600px) {
    .site-footer {
        padding: 48px 0 22px;
    }

    .footer-main,
    .footer-bottom {
        width: calc(100% - 36px);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-brand > p {
        max-width: 280px;
    }

    .footer-cta {
        padding-top: 25px;
        border-top: 1px solid rgba(255,255,255,.07);
    }

    .footer-bottom {
        margin-top: 38px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* =========================================================
   TRANSICIÓN CTA TELEGRAM → FOOTER
   ========================================================= */

.telegram-section {
    padding-bottom: clamp(55px, 6vw, 80px);
}

.site-footer {
    padding-top: 52px;
}

@media (max-width: 600px) {
    .telegram-section {
        padding-bottom: 45px;
    }

    .site-footer {
        padding-top: 45px;
    }
}


/* =========================================================
   FOOTER - CONTRASTE FINAL
   ========================================================= */

.footer-logo strong {
    color: rgba(255,255,255,.96);
}

.footer-brand > p {
    color: rgba(255,255,255,.55);
}

.footer-column a {
    color: rgba(255,255,255,.65);
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-column:nth-child(3) a:first-of-type {
    color: rgba(255,255,255,.78);
}

.footer-column:nth-child(3) a:last-of-type {
    color: rgba(255,255,255,.65);
}

.footer-cta h3 {
    color: rgba(255,255,255,.94);
}

.footer-cta h3 span {
    color: #2f80ff;
}

.footer-bottom {
    color: rgba(255,255,255,.32);
}

.footer-bottom-brand {
    color: rgba(255,255,255,.32);
}

.footer-bottom-brand strong {
    color: rgba(255,255,255,.65);
}


/* =========================================================
   LO PIDES - HERO BOT INTERFACE
   ========================================================= */

.hero-bot-card {
    position: relative;
    width: min(100%, 560px);
    margin-left: auto;
    overflow: hidden;
    border: 1px solid rgba(47,128,255,.34);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 28%, rgba(25,105,190,.16), transparent 42%),
        linear-gradient(145deg, #0b1725 0%, #07101c 52%, #050a12 100%);
    box-shadow:
        0 35px 90px rgba(0,0,0,.55),
        0 0 55px rgba(18,119,255,.09),
        inset 0 1px 0 rgba(255,255,255,.05);
    z-index: 3;
}

.hero-bot-header {
    min-height: 76px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(17,30,45,.72);
}

.hero-bot-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-bot-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #159cff, #1268e9);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 8px 25px rgba(20,130,255,.25);
}

.hero-bot-profile strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
}

.hero-bot-profile small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.45);
    font-size: 12px;
}

.hero-bot-online {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #39e69a;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.hero-bot-online i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27e895;
    box-shadow: 0 0 12px rgba(39,232,149,.8);
}

.hero-bot-body {
    padding: 22px;
}

.hero-bot-message {
    padding: 15px;
    border-radius: 17px;
    background: linear-gradient(
        135deg,
        rgba(30,48,67,.95),
        rgba(17,32,48,.95)
    );
    border: 1px solid rgba(255,255,255,.045);
}

.hero-bot-user {
    padding: 9px 11px;
    border-left: 3px solid #9d5cff;
    border-radius: 8px;
    background: rgba(92,80,145,.24);
}

.hero-bot-user span {
    display: block;
    color: #bd88ff;
    font-size: 12px;
    font-weight: 700;
}

.hero-bot-user small {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 12px;
}

.hero-bot-message h3 {
    margin: 12px 0 0;
    color: #fff;
    font-size: 14px;
}

.hero-bot-line {
    width: 68%;
    height: 1px;
    margin: 8px 0 12px;
    background: rgba(255,255,255,.7);
}

.hero-bot-message p {
    margin: 0 0 9px;
    color: rgba(255,255,255,.86);
    font-size: 13px;
}

.hero-bot-message .hero-bot-muted {
    margin-bottom: 0;
    color: rgba(255,255,255,.52);
}

.hero-bot-search {
    min-height: 50px;
    margin-top: 15px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0,183,255,.6);
    border-radius: 14px;
    background: rgba(4,15,27,.85);
    box-shadow: 0 0 25px rgba(0,157,255,.07);
}

.hero-bot-search > span:first-child {
    font-size: 17px;
}

.hero-bot-search > span:nth-child(2) {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.48);
    font-size: 11px;
}

.hero-bot-search b {
    color: #00aaff;
    font-size: 20px;
}

.hero-bot-main-btn {
    min-height: 53px;
    margin-top: 13px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 13px;
    background: linear-gradient(135deg, #38a91f, #277d26);
    color: #fff;
    box-shadow: 0 10px 28px rgba(41,151,42,.14);
}

.hero-bot-main-btn span {
    font-size: 18px;
}

.hero-bot-main-btn strong {
    flex: 1;
    font-size: 15px;
}

.hero-bot-main-btn b {
    font-size: 27px;
    font-weight: 400;
}

.hero-bot-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 9px;
}

.hero-menu-btn {
    min-height: 47px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 11px;
    background: #192b3d;
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 700;
    transition: .22s ease;
}

.hero-menu-btn span {
    font-size: 15px;
}

.hero-menu-btn b {
    margin-left: auto;
    color: #149cff;
    font-size: 18px;
    font-weight: 400;
}

.hero-menu-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(47,128,255,.45);
    background: #1d344a;
}

.hero-bot-status {
    margin-top: 13px;
    padding: 13px 15px;
    border: 1px solid rgba(47,128,255,.22);
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(8,31,51,.9),
        rgba(5,17,29,.9)
    );
}

.hero-bot-status > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-status-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #17a8ff;
    background: rgba(15,151,255,.1);
    font-size: 18px;
}

.hero-bot-status strong {
    display: block;
    color: #13a9ff;
    font-size: 10px;
    letter-spacing: 1.1px;
}

.hero-bot-status small {
    display: block;
    margin-top: 4px;
    color: #ff963d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}


/* Responsive */

@media (max-width: 980px) {
    .hero-bot-card {
        width: min(100%, 540px);
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .hero-bot-card {
        border-radius: 21px;
    }

    .hero-bot-body {
        padding: 14px;
    }

    .hero-bot-header {
        min-height: 65px;
        padding: 12px 14px;
    }

    .hero-bot-avatar {
        width: 37px;
        height: 37px;
    }

    .hero-bot-menu {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-menu-btn {
        min-height: 45px;
    }

    .hero-bot-message h3 {
        font-size: 13px;
    }

    .hero-bot-search > span:nth-child(2) {
        font-size: 10px;
    }
}


/* =========================================================
   LO PIDES - HERO BOT VISUAL
   ========================================================= */

.hero-bot-visual {
    position: relative;
}

.hero-bot-card {
    position: relative;
    width: min(100%, 520px);
    margin-left: auto;
    overflow: hidden;
    border: 1px solid rgba(47,128,255,.42);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 20%, rgba(19,102,181,.18), transparent 42%),
        #09111d;
    box-shadow:
        0 30px 80px rgba(0,0,0,.42),
        0 0 50px rgba(24,126,255,.08);
    transform: perspective(1200px) rotateY(-2deg);
}

.hero-bot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 13px 17px;
    background: rgba(20,34,50,.94);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.hero-bot-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    border-radius: 12px;
    background: linear-gradient(145deg,#179cff,#0878df);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 8px 22px rgba(0,132,255,.25);
}

.hero-bot-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hero-bot-name strong {
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
}

.hero-bot-name small {
    margin-top: 3px;
    color: #7e8da1;
    font-size: 11px;
}

.hero-bot-online {
    margin-left: auto;
    color: #42e79b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.hero-bot-online i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #42e79b;
    box-shadow: 0 0 9px rgba(66,231,155,.7);
}

.hero-bot-body {
    padding: 18px;
}

.hero-bot-welcome {
    padding: 14px;
    border-radius: 15px;
    background: #172637;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.hero-bot-message-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-left: 3px solid #b06cff;
    border-radius: 7px;
    background: rgba(117,113,178,.22);
}

.hero-bot-message-head span {
    color: #d28cff;
    font-size: 11px;
    font-weight: 700;
}

.hero-bot-message-head small {
    color: #fff;
    font-size: 10px;
}

.hero-bot-welcome > strong {
    color: #fff;
    font-size: 12px;
}

.hero-bot-line {
    width: 78%;
    height: 1px;
    margin: 8px 0;
    background: rgba(255,255,255,.6);
}

.hero-bot-welcome p {
    margin: 7px 0 0;
    color: #e0e7ef;
    font-size: 10px;
}

.hero-bot-main-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 9px;
    background: #2d8b29;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.hero-bot-main-btn b {
    margin-left: auto;
    font-size: 18px;
}

.hero-bot-menu {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    margin-top: 6px;
}

.hero-bot-menu div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 38px;
    padding: 6px;
    border-radius: 8px;
    background: #1b2d40;
    color: #f2f5f8;
    font-size: 10px;
    font-weight: 700;
}

.hero-bot-menu b {
    color: #159eff;
    font-size: 14px;
}

.hero-bot-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding: 12px 13px;
    border: 1px solid rgba(0,181,255,.75);
    border-radius: 11px;
    background: #07121f;
    color: #718196;
    font-size: 9px;
}

.hero-bot-search span:nth-child(2) {
    flex: 1;
}

.hero-bot-search b {
    color: #00baff;
    font-size: 14px;
}

.hero-bot-results {
    margin-top: 10px;
    padding: 11px;
    border-radius: 12px;
    background: #142334;
}

.hero-result-title {
    color: #d8e1ea;
    font-size: 10px;
    margin-bottom: 9px;
}

.hero-result-group {
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 6px;
}

.hero-result-group b {
    color: #8ea1b5;
}

.hero-result-item {
    margin-top: 4px;
    padding: 7px 8px;
    border-radius: 6px;
    background: #1d3043;
    color: #e9eef4;
    font-size: 9px;
}

.hero-bot-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: #0d1926;
    color: #5d7186;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.hero-bot-footer span:nth-child(2) {
    color: #ff9a28;
}

.hero-bot-footer b {
    margin-left: auto;
    color: #3fe29a;
    font-size: 7px;
}

/* Responsive */

@media (max-width: 980px) {
    .hero-bot-card {
        margin: 0 auto;
        transform: none;
    }
}

@media (max-width: 600px) {
    .hero-bot-body {
        padding: 12px;
    }

    .hero-bot-menu {
        gap: 4px;
    }

    .hero-bot-menu div {
        font-size: 9px;
    }

    .hero-bot-results {
        display: none;
    }
}


/* =========================================================
   LO PIDES - PULIDO FINAL DEL HERO BOT
   ========================================================= */

/* Usuario de Telegram */
.hero-bot-message-head span {
    color: #b98cff;
    letter-spacing: .15px;
}

/* Campo de búsqueda con actividad */
.hero-bot-search {
    box-shadow:
        0 0 0 1px rgba(0,181,255,.04),
        0 0 22px rgba(0,181,255,.07);
    transition: box-shadow .25s ease, border-color .25s ease;
}

/* Resultado encontrado recientemente */
.hero-result-featured {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid rgba(47,128,255,.22);
    background: linear-gradient(
        90deg,
        rgba(36,82,130,.48),
        rgba(29,48,67,.95)
    );
}

.hero-result-featured b {
    margin-left: auto;
    color: #42a5ff;
    font-size: 14px;
}

/* Pequeño indicador de actividad */
.hero-result-featured::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 6px;
    border-radius: 50%;
    background: #3ee49b;
    box-shadow: 0 0 8px rgba(62,228,155,.65);
}

/* El nombre ficticio deja de parecer un nombre real */
.hero-bot-message-head {
    position: relative;
}

.hero-bot-message-head span::after {
    content: " • visitante";
    color: #71839a;
    font-weight: 500;
}

@media (max-width: 600px) {
    .hero-bot-message-head span {
        font-size: 10px;
    }

    .hero-bot-message-head span::after {
        content: "";
    }
}


/* =========================================================
   LO PIDES - NITIDEZ DEL PANEL HERO
   ========================================================= */

/* Sin transformación 3D: máxima nitidez */
.hero-bot-card {
    transform: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Texto principal más cómodo de leer */
.hero-bot-name strong {
    font-size: 14px;
}

.hero-bot-name small {
    font-size: 11px;
}

.hero-bot-message-head span {
    font-size: 11px;
}

.hero-bot-message-head small {
    font-size: 10px;
}

.hero-bot-welcome > strong {
    font-size: 13px;
}

.hero-bot-welcome p {
    font-size: 11px;
}

.hero-bot-main-btn {
    font-size: 13px;
}

.hero-bot-menu div {
    font-size: 11px;
}

.hero-bot-search {
    font-size: 10px;
}

.hero-result-title,
.hero-result-group {
    font-size: 11px;
}

.hero-result-item {
    font-size: 10px;
}

.hero-bot-footer {
    font-size: 9px;
}


/* =========================================================
   LO PIDES - AJUSTE FINAL DE PROPORCIÓN DEL HERO
   ========================================================= */

.hero-bot-card {
    width: min(92%, 485px);
    margin-right: 12px;
}

/* El panel debe acompañar al Hero, no dominarlo */
.hero-bot-body {
    padding: 16px;
}

.hero-bot-welcome {
    padding: 13px;
}

.hero-bot-main-btn {
    margin-top: 10px;
    padding: 10px 13px;
}

.hero-bot-menu div {
    min-height: 36px;
}

.hero-bot-search {
    margin-top: 10px;
    padding: 11px 12px;
}

.hero-bot-results {
    margin-top: 9px;
    padding: 10px;
}

/* Limpieza del identificador visual */
.hero-bot-message-head span::after {
    content: "" !important;
}

/* Más aire alrededor del panel */
@media (min-width: 981px) {
    .hero-bot-visual {
        padding-left: 18px;
    }
}

/* Móvil */
@media (max-width: 980px) {
    .hero-bot-card {
        width: min(94%, 500px);
        margin: 0 auto;
    }

    .hero-bot-visual {
        padding-left: 0;
    }
}


/* =========================================================
   LO PIDES - PLANES PREMIUM
   ========================================================= */

.plans-premium {
    position: relative;
    overflow: hidden;
}

.plans-premium::before {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    left: -430px;
    top: 80px;
    border: 1px solid rgba(47,128,255,.10);
    border-radius: 50%;
    pointer-events: none;
}

.plans-premium-heading {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 48px;
}

.plans-premium-heading h2 {
    margin: 10px 0 0;
}

.plans-premium-heading p {
    max-width: 360px;
    margin: 0 0 5px;
    color: rgba(255,255,255,.50);
    line-height: 1.7;
}

.plans-premium-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.premium-plan-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 30px 25px 24px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    background:
        linear-gradient(145deg,
            rgba(18,31,48,.96),
            rgba(7,14,24,.98));
    box-shadow: 0 18px 50px rgba(0,0,0,.20);
    overflow: hidden;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.premium-plan-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    opacity: .75;
    background: linear-gradient(90deg, transparent, #2f80ff, transparent);
}

.premium-plan-card:hover {
    transform: translateY(-7px);
    border-color: rgba(47,128,255,.42);
    box-shadow: 0 25px 65px rgba(0,0,0,.34);
}

.premium-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.premium-plan-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 23px;
}

.premium-plan-tag {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    color: rgba(255,255,255,.34);
}

.premium-plan-card h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.03em;
    color: #fff;
}

.premium-plan-description {
    min-height: 42px;
    margin: 9px 0 22px;
    color: rgba(255,255,255,.42);
    font-size: 13px;
    line-height: 1.55;
}

.premium-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-height: 48px;
}

.premium-price sup {
    font-size: 18px;
    font-weight: 800;
    color: #4d91ff;
    top: -1px;
    position: relative;
}

.premium-price strong {
    font-size: 43px;
    line-height: 1;
    letter-spacing: -.055em;
    color: #fff;
}

.premium-price > span {
    margin-left: 7px;
    color: rgba(255,255,255,.34);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.premium-price-free {
    display: block;
}

.premium-price-free strong {
    display: block;
    font-size: 31px;
    color: #4d91ff;
}

.premium-price-free span {
    display: block;
    margin: 5px 0 0;
    color: rgba(255,255,255,.34);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.premium-divider {
    height: 1px;
    margin: 24px 0 20px;
    background: rgba(255,255,255,.075);
}

.premium-benefits {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.premium-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,.57);
    font-size: 12px;
    line-height: 1.45;
}

.premium-benefits li > span {
    width: 20px;
    flex: 0 0 20px;
    font-size: 14px;
    text-align: center;
}

.premium-benefits strong {
    color: rgba(255,255,255,.91);
    font-weight: 800;
}

.premium-plan-button {
    width: 100%;
    margin-top: auto;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(47,128,255,.30);
    border-radius: 12px;
    background: rgba(47,128,255,.07);
    color: #78adff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: all .25s ease;
}

.premium-plan-button span {
    font-size: 15px;
    transition: transform .25s ease;
}

.premium-plan-button:hover {
    background: #2f80ff;
    border-color: #2f80ff;
    color: #fff;
    box-shadow: 0 12px 28px rgba(47,128,255,.25);
}

.premium-plan-button:hover span {
    transform: translate(3px,-2px);
}


/* PLUS: protagonista */
.premium-plan-plus {
    border-color: rgba(47,128,255,.45);
    background:
        radial-gradient(circle at 50% 0%, rgba(47,128,255,.16), transparent 45%),
        linear-gradient(145deg, rgba(17,35,61,.98), rgba(7,14,24,.98));
    box-shadow:
        0 22px 65px rgba(0,0,0,.32),
        0 0 45px rgba(47,128,255,.07);
}

.premium-plan-plus::before {
    background: linear-gradient(90deg, transparent, #4d91ff, transparent);
}

.premium-plan-plus:hover {
    border-color: rgba(77,145,255,.70);
    box-shadow:
        0 28px 75px rgba(0,0,0,.40),
        0 0 50px rgba(47,128,255,.12);
}

.premium-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -1px);
    padding: 7px 15px;
    border-radius: 0 0 10px 10px;
    background: #2f80ff;
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
    white-space: nowrap;
}

.premium-plan-plus .premium-plan-top {
    margin-top: 10px;
}

.premium-plan-plus .premium-plan-button {
    background: #2f80ff;
    border-color: #2f80ff;
    color: #fff;
    box-shadow: 0 12px 28px rgba(47,128,255,.20);
}

.premium-plan-plus .premium-plan-button:hover {
    background: #4d91ff;
    border-color: #4d91ff;
}


/* ULTRA */
.premium-plan-ultra {
    border-color: rgba(255,150,61,.24);
    background:
        radial-gradient(circle at 100% 0%, rgba(255,150,61,.10), transparent 43%),
        linear-gradient(145deg, rgba(31,25,22,.97), rgba(8,14,23,.98));
}

.premium-plan-ultra::before {
    background: linear-gradient(90deg, transparent, #ff963d, transparent);
}

.premium-plan-ultra:hover {
    border-color: rgba(255,150,61,.52);
}

.premium-plan-ultra .premium-price sup {
    color: #ff963d;
}

.premium-plan-ultra .premium-plan-button {
    border-color: rgba(255,150,61,.32);
    color: #ffad69;
    background: rgba(255,150,61,.06);
}

.premium-plan-ultra .premium-plan-button:hover {
    background: #ff963d;
    border-color: #ff963d;
    color: #111;
    box-shadow: 0 12px 28px rgba(255,150,61,.20);
}


/* RESPONSIVE */
@media (max-width: 1100px) {
    .plans-premium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .plans-premium-heading {
        display: block;
        margin-bottom: 35px;
    }

    .plans-premium-heading p {
        margin-top: 16px;
    }

    .plans-premium-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}


/* =========================================================
   PLANES - BOTONES TELEGRAM + WEB
   ========================================================= */

.premium-plan-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: auto;
}

.premium-plan-actions .premium-plan-button {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
}

/* Telegram */
.premium-plan-telegram {
    background: rgba(47,128,255,.08);
    border-color: rgba(47,128,255,.28);
    color: #72aaff;
}

/* Compra web */
.premium-plan-web {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.72);
}

.premium-plan-web:hover {
    background: #ff963d;
    border-color: #ff963d;
    color: #111;
    box-shadow: 0 12px 28px rgba(255,150,61,.20);
}

/* Plus: Telegram sigue siendo el principal */
.premium-plan-plus .premium-plan-telegram {
    background: #2f80ff;
    border-color: #2f80ff;
    color: #fff;
}

.premium-plan-plus .premium-plan-telegram:hover {
    background: #4d91ff;
    border-color: #4d91ff;
}

/* Ultra */
.premium-plan-ultra .premium-plan-telegram {
    border-color: rgba(255,150,61,.32);
    color: #ffad69;
    background: rgba(255,150,61,.06);
}

.premium-plan-ultra .premium-plan-telegram:hover {
    background: #ff963d;
    border-color: #ff963d;
    color: #111;
}

/* En pantallas grandes podemos dar más protagonismo al botón web */
@media (min-width: 900px) {
    .premium-plan-actions {
        gap: 8px;
    }

    .premium-plan-actions .premium-plan-button {
        font-size: 10px;
    }
}


/* =========================================================
   LO PIDES - CÓMO FUNCIONA · DISEÑO PREMIUM
   ========================================================= */

.steps-section {
    position: relative;
    overflow: hidden;
}

.steps-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Línea de conexión detrás de las tarjetas */
.steps-flow::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 66px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(47,128,255,.45),
        rgba(47,128,255,.45),
        rgba(255,150,61,.45),
        transparent
    );
    z-index: 0;
}

/* TARJETA */
.step-card {
    position: relative;
    z-index: 1;
    min-height: 355px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    background:
        linear-gradient(145deg,
            rgba(17,31,47,.97),
            rgba(7,14,23,.98));
    box-shadow:
        0 20px 55px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.035);
    overflow: hidden;
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

/* Número gigante decorativo */
.step-card-bg {
    position: absolute;
    right: -8px;
    top: 34px;
    color: rgba(255,255,255,.025);
    font-size: 105px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -8px;
    pointer-events: none;
}

.step-card:hover {
    transform: translateY(-8px);
    border-color: rgba(47,128,255,.38);
    box-shadow:
        0 28px 65px rgba(0,0,0,.32),
        0 0 35px rgba(47,128,255,.06);
}

/* CABECERA */
.step-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.step-number {
    color: #6e91b9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
}

.step-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    border: 1px solid rgba(47,128,255,.28);
    background: rgba(47,128,255,.09);
    color: #69a5ff;
    font-size: 22px;
    box-shadow: 0 8px 25px rgba(47,128,255,.07);
}

.step-card-featured {
    border-color: rgba(255,150,61,.30);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,150,61,.12),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            rgba(31,26,22,.97),
            rgba(8,14,23,.98)
        );
}

.step-card-featured .step-icon {
    border-color: rgba(255,150,61,.34);
    background: rgba(255,150,61,.10);
    color: #ff963d;
    box-shadow: 0 8px 25px rgba(255,150,61,.08);
}

.step-card-featured:hover {
    border-color: rgba(255,150,61,.58);
    box-shadow:
        0 28px 65px rgba(0,0,0,.32),
        0 0 35px rgba(255,150,61,.07);
}

/* LÍNEA */
.step-line {
    position: relative;
    z-index: 2;
    width: 42px;
    height: 2px;
    margin: 31px 0 22px;
    background: #2f80ff;
    box-shadow: 0 0 12px rgba(47,128,255,.30);
}

.step-card-featured .step-line {
    background: #ff963d;
    box-shadow: 0 0 12px rgba(255,150,61,.25);
}

/* CONTENIDO */
.step-content {
    position: relative;
    z-index: 2;
}

.step-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255,255,255,.32);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.step-card h3 {
    margin: 0 0 13px;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.7px;
}

.step-card p {
    max-width: 240px;
    margin: 0;
    color: rgba(255,255,255,.53);
    font-size: 13px;
    line-height: 1.75;
}

/* PIE DE TARJETA */
.step-footer {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.065);
}

.step-footer > span {
    color: #397fcf;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.step-footer strong {
    color: rgba(255,255,255,.38);
    font-size: 8px;
    letter-spacing: 1.2px;
}

.step-card-featured .step-footer > span {
    color: #ff963d;
}

.step-card-featured .step-footer strong {
    color: rgba(255,255,255,.65);
}

/* BARRA INFERIOR */
.steps-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 42px;
    padding: 16px 24px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
}

.steps-bottom-track {
    position: absolute;
    left: 15%;
    right: 15%;
    top: 50%;
    height: 1px;
    background: rgba(47,128,255,.18);
    z-index: 0;
}

.steps-bottom-item,
.steps-bottom-arrow {
    position: relative;
    z-index: 1;
    background: #07101b;
}

.steps-bottom-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    color: rgba(255,255,255,.42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.steps-bottom-item span {
    color: #397fcf;
    font-size: 8px;
}

.steps-bottom-arrow {
    padding: 0 3px;
    color: #2f80ff;
    font-size: 17px;
}

.steps-bottom-final {
    color: #fff;
}

.steps-bottom-final span {
    color: #ff963d;
}

/* TABLET */
@media (max-width: 1050px) {
    .steps-flow {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-flow::before {
        display: none;
    }

    .step-card {
        min-height: 320px;
    }
}

/* MÓVIL */
@media (max-width: 760px) {
    .steps-flow {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .step-card {
        min-height: 285px;
        padding: 22px;
    }

    .step-card-bg {
        font-size: 90px;
    }

    .step-footer {
        left: 22px;
        right: 22px;
        bottom: 19px;
    }

    .steps-bottom {
        gap: 9px;
        padding: 14px 10px;
    }

    .steps-bottom-track {
        display: none;
    }

    .steps-bottom-item {
        padding: 0 3px;
        font-size: 8px;
        letter-spacing: 1px;
    }

    .steps-bottom-arrow {
        font-size: 14px;
    }
}


/* =========================================================
   LO PIDES · GUÍA DE USO · 10 PASOS
   INTERFAZ PREMIUM
   ========================================================= */

.howto-section {
    position: relative;
    overflow: hidden;
    padding: 110px 5% 100px;
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 119, 255, .10), transparent 28%),
        radial-gradient(circle at 90% 70%, rgba(255, 130, 35, .07), transparent 30%),
        #030812;
}

.howto-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(50, 145, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 145, 255, .08) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.howto-heading {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto 55px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: end;
    gap: 70px;
}

.howto-heading .section-label {
    color: #21a7ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .25em;
    margin-bottom: 14px;
}

.howto-heading h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 76px);
    line-height: .92;
    letter-spacing: -.055em;
    font-weight: 950;
    color: #f5f8ff;
}

.howto-heading h2 span {
    color: #218cff;
}

.howto-heading > p {
    margin: 0 0 7px;
    max-width: 470px;
    color: rgba(224, 232, 244, .68);
    font-size: 16px;
    line-height: 1.75;
}

/* GRID */

.howto-grid {
    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* CARD */

.howto-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 27px;
    border-radius: 24px;
    border: 1px solid rgba(70, 150, 230, .22);
    background:
        linear-gradient(145deg, rgba(18, 34, 53, .97), rgba(5, 13, 25, .98));
    box-shadow:
        0 18px 55px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255,255,255,.035);
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.howto-card::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -100px;
    border-radius: 50%;
    background: rgba(24, 135, 255, .08);
    filter: blur(3px);
    pointer-events: none;
}

.howto-card:hover {
    transform: translateY(-5px);
    border-color: rgba(45, 153, 255, .5);
    box-shadow:
        0 24px 65px rgba(0, 0, 0, .38),
        0 0 30px rgba(0, 130, 255, .08);
}

.howto-card-number {
    position: absolute;
    top: 14px;
    right: 20px;
    font-size: 82px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.08em;
    color: rgba(75, 157, 255, .055);
    pointer-events: none;
}

.howto-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.howto-card-top span {
    color: #5da6df;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

.howto-card-top b {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(48, 143, 255, .4);
    background: rgba(23, 106, 190, .10);
    color: #65b1ff;
    font-size: 17px;
}

.howto-card h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 11px;
    max-width: 520px;
    color: #f6f8fd;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 900;
}

.howto-card > p {
    position: relative;
    z-index: 2;
    margin: 0 0 20px;
    max-width: 560px;
    color: rgba(224, 233, 244, .67);
    font-size: 14px;
    line-height: 1.65;
}

.howto-card > p strong {
    color: #35a9ff;
}

/* ORANGE */

.howto-orange {
    border-color: rgba(255, 143, 54, .27);
}

.howto-orange .howto-card-top b {
    border-color: rgba(255, 148, 55, .4);
    color: #ff9b45;
}

.howto-orange .howto-card-top span {
    color: #ff9b45;
}

.howto-orange > p strong {
    color: #ff9b45;
}

/* GREEN */

.howto-green {
    border-color: rgba(104, 231, 37, .23);
}

.howto-green .howto-card-top b {
    border-color: rgba(105, 230, 41, .42);
    color: #83ed43;
}

.howto-green .howto-card-top span {
    color: #83ed43;
}

.howto-green > p strong {
    color: #83ed43;
}

/* PURPLE */

.howto-purple {
    border-color: rgba(175, 105, 255, .25);
}

.howto-purple .howto-card-top b {
    border-color: rgba(180, 106, 255, .4);
    color: #c287ff;
}

.howto-purple .howto-card-top span {
    color: #c287ff;
}

.howto-purple > p strong {
    color: #c287ff;
}

/* TELEGRAM UI */

.telegram-ui {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(68, 157, 239, .28);
    border-radius: 17px;
    background:
        linear-gradient(160deg, #101f2f, #07111d);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 30px rgba(0,0,0,.25);
}

.tg-topbar,
.tg-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    color: #eaf3ff;
}

.tg-topbar strong,
.tg-chat-head strong {
    font-size: 13px;
}

.tg-chat-head > div {
    flex: 1;
    margin-left: 10px;
}

.tg-chat-head small {
    display: block;
    margin-top: 2px;
    color: #6f8aa4;
    font-size: 10px;
}

.tg-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px;
    padding: 10px 12px;
    border: 1px solid #2d9fff;
    border-radius: 12px;
    background: #081522;
    color: #edf7ff;
    box-shadow: 0 0 15px rgba(34, 154, 255, .12);
}

.tg-search strong {
    flex: 1;
    font-size: 12px;
}

.tg-search span {
    color: #6f8ba5;
}

.tg-tabs {
    padding: 2px 14px 10px;
    color: #6e8499;
    font-size: 10px;
}

.tg-result {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 12px 14px;
    padding: 11px;
    border-radius: 13px;
    background: #152535;
}

.tg-result.active {
    border: 1px solid rgba(255, 194, 20, .75);
    box-shadow: 0 0 15px rgba(255, 194, 20, .08);
}

.tg-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #ffb900, #ef681b);
    color: #07101a;
    font-weight: 950;
}

.tg-result div:nth-child(2) {
    flex: 1;
}

.tg-result strong {
    display: block;
    color: #f4f8ff;
    font-size: 12px;
}

.tg-result small {
    display: block;
    margin-top: 3px;
    color: #45b7ff;
    font-size: 10px;
}

.tg-check {
    color: #ffe100;
}

/* COMMANDS */

.tg-command {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 7px 12px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(27, 48, 68, .72);
}

.tg-command.selected {
    border: 1px solid #ffcf19;
    box-shadow: 0 0 15px rgba(255, 204, 20, .08);
}

.tg-command b {
    color: #fff;
    font-size: 12px;
}

.tg-command span {
    color: #8197ab;
    font-size: 10px;
}

.tg-bottom {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
    color: #688096;
    font-size: 10px;
}

.tg-bottom span:first-child {
    padding: 8px 11px;
    border-radius: 10px;
    background: #1789d6;
    color: white;
    font-weight: 800;
}

/* BOTÓN PRINCIPAL */

.tg-main-button {
    margin: 12px;
    padding: 13px;
    border: 1px solid #78ef27;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(45, 154, 20, .8), rgba(28, 98, 16, .85));
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 0 18px rgba(92, 237, 34, .10);
}

.tg-welcome {
    padding: 12px 14px 2px;
    color: #8198ad;
    font-size: 11px;
}

.tg-button-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 0 12px 14px;
}

.tg-button-grid span {
    padding: 9px 4px;
    border-radius: 8px;
    background: #172b3e;
    color: #e2edf8;
    text-align: center;
    font-size: 10px;
}

/* MENSAJE DE BÚSQUEDA */

.tg-user-message {
    width: fit-content;
    margin: 14px 12px 10px auto;
    padding: 10px 12px;
    border-radius: 13px 13px 3px 13px;
    background: #17649b;
    color: #fff;
    font-size: 13px;
}

.tg-user-message small {
    margin-left: 8px;
    color: #91c8e8;
    font-size: 9px;
}

.tg-searching {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 12px 14px;
    padding: 12px;
    border-radius: 12px;
    background: #142536;
}

.tg-searching > span {
    color: #41aaff;
    font-size: 22px;
}

.tg-searching strong,
.tg-searching small {
    display: block;
}

.tg-searching strong {
    color: #eaf4ff;
    font-size: 11px;
}

.tg-searching small {
    margin-top: 4px;
    color: #7890a5;
    font-size: 9px;
}

/* RESULTADOS */

.tg-results-title {
    padding: 13px 14px 7px;
    color: #cbd9e6;
    font-size: 11px;
}

.tg-category {
    padding: 4px 14px;
    color: #8ca7bd;
    font-size: 10px;
}

.tg-result-row {
    margin: 5px 12px;
    padding: 9px 10px;
    border-radius: 9px;
    background: #15283a;
    color: #dfeaf5;
    font-size: 10px;
}

.tg-result-row small {
    color: #7690a6;
}

.tg-result-row.selected-green {
    border: 1px solid #8aff2d;
    background: rgba(72, 135, 25, .20);
    color: #fff;
    box-shadow: 0 0 15px rgba(112, 255, 35, .09);
}

/* TEMPORADAS */

.tg-mini-title {
    padding: 13px;
    color: #f2f7fc;
    font-size: 12px;
    font-weight: 800;
}

.tg-divider {
    height: 1px;
    margin: 0 13px 12px;
    background: rgba(255,255,255,.15);
}

.tg-info {
    padding: 0 13px 10px;
    color: #8da2b6;
    font-size: 10px;
}

.tg-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 12px 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #182e41;
    color: #fff;
    font-size: 12px;
}

.tg-select.green-selected {
    border: 1px solid #8cff31;
    box-shadow: 0 0 15px rgba(119, 255, 37, .10);
}

.tg-select small {
    margin-left: auto;
    margin-right: 12px;
    color: #8499ad;
}

.tg-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 0 12px 13px;
}

.tg-navigation span {
    padding: 9px;
    border-radius: 8px;
    background: #152638;
    color: #8da5b9;
    text-align: center;
    font-size: 9px;
}

/* EPISODIOS */

.episodes-ui {
    padding-bottom: 12px;
}

.tg-episode {
    margin: 4px 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #15283a;
    color: #dce8f3;
    font-size: 10px;
}

.tg-episode.selected-green {
    border: 1px solid #82f52d;
    background: rgba(77, 140, 28, .22);
    color: #fff;
}

.tg-episode span {
    float: right;
    color: #8dff31;
}

/* SERVIDORES */

.server-ui {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 215px;
    padding: 20px;
    border: 1px solid rgba(47, 150, 255, .25);
    border-radius: 18px;
    background:
        radial-gradient(circle at 15% 50%, rgba(25, 143, 255, .14), transparent 30%),
        #081421;
}

.server-robot {
    display: grid;
    place-items: center;
    flex: 0 0 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid #219dff;
    background: radial-gradient(circle, #123a5d, #061321);
    box-shadow: 0 0 30px rgba(26, 151, 255, .18);
    font-size: 43px;
}

.server-status {
    flex: 1;
}

.server-status > strong {
    display: block;
    margin-bottom: 12px;
    color: #f0f7ff;
    font-size: 12px;
}

.server-progress {
    height: 7px;
    overflow: hidden;
    margin-bottom: 14px;
    border-radius: 20px;
    background: #142a3d;
}

.server-progress span {
    display: block;
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #148fff, #4ac5ff);
    box-shadow: 0 0 12px rgba(34, 159, 255, .55);
}

.server-check {
    margin: 7px 0;
    color: #91a6b8;
    font-size: 10px;
}

.server-check span {
    margin-right: 6px;
    color: #75e93a;
}

/* VLC */

.vlc-ui {
    position: relative;
    z-index: 2;
    padding: 15px;
    border: 1px solid rgba(177, 113, 255, .27);
    border-radius: 17px;
    background: #0b1521;
}

.vlc-logo {
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ef8a16;
    color: white;
    font-weight: 950;
}

.vlc-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 115px;
    margin-bottom: 12px;
    border-radius: 11px;
    background:
        radial-gradient(circle at center, rgba(51, 112, 160, .25), transparent 60%),
        #07101a;
    color: #fff;
}

.vlc-play {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.vlc-video strong {
    font-size: 14px;
}

.vlc-video small {
    margin-top: 3px;
    color: #8ea4b8;
    font-size: 8px;
}

.vlc-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vlc-options > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px;
    border-radius: 10px;
    background: #132333;
}

.vlc-options b {
    margin-bottom: 4px;
    color: #c48bff;
    font-size: 9px;
}

.vlc-options span {
    color: #8198ad;
    font-size: 9px;
}

.vlc-options .vlc-selected {
    color: #ffbd31;
    font-weight: 800;
}

/* PLANES */

.howto-plans {
    border-color: rgba(255, 187, 38, .35);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 157, 29, .10), transparent 35%),
        linear-gradient(145deg, rgba(22, 31, 40, .98), rgba(7, 13, 21, .99));
}

.howto-plans .howto-card-top span {
    color: #ffbd38;
}

.howto-plans .howto-card-top b {
    color: #ffc34a;
    border-color: rgba(255, 192, 48, .42);
}

.plans-mini-ui {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 7px;
}

.mini-plan {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
    background: #111e2c;
}

.mini-plan span {
    font-size: 17px;
}

.mini-plan strong {
    font-size: 12px;
}

.mini-plan b {
    font-size: 13px;
}

.mini-free {
    border-color: rgba(125, 255, 36, .55);
}

.mini-free strong {
    color: #7fff32;
}

.mini-pro {
    border-color: rgba(38, 172, 255, .55);
}

.mini-pro strong {
    color: #35b2ff;
}

.mini-plus {
    border-color: rgba(207, 92, 255, .55);
}

.mini-plus strong {
    color: #dc83ff;
}

.mini-ultra {
    border-color: rgba(255, 191, 39, .55);
}

.mini-ultra strong {
    color: #ffc52f;
}

.mini-plan-note {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: #91a5b8;
    font-size: 9px;
    line-height: 1.7;
}

.howto-final-button {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 11px;
    background: linear-gradient(135deg, #158eff, #0a6be0);
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(12, 116, 235, .20);
    transition: transform .2s ease, box-shadow .2s ease;
}

.howto-final-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(12, 116, 235, .30);
}

/* TIPS */

.howto-tip {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #6faee2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.howto-tip span {
    color: #2e9dff;
    font-size: 15px;
}

.orange-tip {
    color: #ffae67;
}

.orange-tip span {
    color: #ff9b42;
}

.green-tip {
    color: #8bdc58;
}

.green-tip span {
    color: #80ed35;
}

.purple-tip {
    color: #c49ce9;
}

.purple-tip span {
    color: #bd80ff;
}

/* BARRA FINAL */

.howto-bottom {
    position: relative;
    z-index: 2;
    width: min(1000px, 100%);
    margin: 45px auto 0;
    padding: 17px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 1px solid rgba(53, 144, 235, .18);
    border-radius: 15px;
    background: rgba(9, 22, 36, .72);
    color: #6f8da7;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
}

.howto-bottom i {
    color: #218fff;
    font-style: normal;
}

.howto-bottom strong {
    color: #ff9a40;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .howto-section {
        padding: 80px 5% 75px;
    }

    .howto-heading {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 38px;
    }

    .howto-heading > p {
        max-width: 650px;
    }

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

}

@media (max-width: 600px) {

    .howto-section {
        padding: 65px 14px 60px;
    }

    .howto-heading h2 {
        font-size: clamp(39px, 12vw, 58px);
    }

    .howto-heading > p {
        font-size: 14px;
    }

    .howto-grid {
        gap: 14px;
    }

    .howto-card {
        padding: 20px;
        border-radius: 19px;
    }

    .howto-card-number {
        font-size: 64px;
        top: 10px;
        right: 14px;
    }

    .howto-card h3 {
        font-size: 20px;
    }

    .howto-card > p {
        font-size: 13px;
    }

    .server-ui {
        flex-direction: column;
        align-items: stretch;
    }

    .server-robot {
        align-self: center;
    }

    .vlc-options {
        grid-template-columns: 1fr;
    }

    .howto-bottom {
        flex-wrap: wrap;
        gap: 10px;
        line-height: 1.5;
        text-align: center;
    }
}


/* =========================================================
   LO PIDES · GUÍA 10 PASOS · PULIDO VISUAL V2
   ========================================================= */

/* Más compacta y mejor aprovechada */
.howto-section {
    padding-top: 90px;
    padding-bottom: 85px;
}

.howto-heading {
    margin-bottom: 42px;
}

.howto-grid {
    gap: 16px;
    align-items: stretch;
}

/* Tarjetas más compactas */
.howto-card {
    padding: 24px;
    border-radius: 21px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.howto-card > p {
    margin-bottom: 15px;
}

.howto-card h3 {
    font-size: clamp(19px, 1.7vw, 24px);
    min-height: 52px;
}

/* Las interfaces ocupan mejor el ancho */
.telegram-ui {
    flex: 0 0 auto;
    border-radius: 15px;
}

/* ---------------------------------------------------------
   CABECERAS
   --------------------------------------------------------- */

.howto-card-top {
    margin-bottom: 14px;
}

.howto-card-top b {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

/* ---------------------------------------------------------
   TELEGRAM: MÁS GRANDE Y LEGIBLE
   --------------------------------------------------------- */

.tg-topbar,
.tg-chat-head {
    padding: 11px 13px;
}

.tg-search {
    margin: 10px;
    padding: 11px 12px;
}

.tg-search strong {
    font-size: 12px;
}

.tg-tabs {
    padding-bottom: 8px;
}

.tg-result {
    margin: 7px 10px 11px;
    padding: 10px;
}

.tg-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

/* ---------------------------------------------------------
   PASO 02
   --------------------------------------------------------- */

.howto-card:nth-child(2) .tg-command {
    margin: 5px 10px;
    padding: 9px 11px;
}

.howto-card:nth-child(2) .tg-command b {
    font-size: 11px;
}

.howto-card:nth-child(2) .tg-command span {
    font-size: 10px;
}

/* ---------------------------------------------------------
   PASO 03
   --------------------------------------------------------- */

.tg-main-button {
    margin: 10px;
    padding: 13px;
    font-size: 13px;
}

.tg-button-grid {
    gap: 5px;
    padding: 0 10px 11px;
}

.tg-button-grid span {
    padding: 9px 3px;
    font-size: 9px;
}

/* ---------------------------------------------------------
   PASO 04
   --------------------------------------------------------- */

.tg-user-message {
    margin-top: 11px;
}

.tg-searching {
    margin: 0 10px 11px;
}

/* ---------------------------------------------------------
   PASO 05
   RESULTADOS MÁS PROTAGONISTAS
   --------------------------------------------------------- */

.results-ui {
    padding-bottom: 8px;
}

.tg-results-title {
    padding: 11px 12px 6px;
    font-size: 11px;
}

.tg-category {
    padding: 3px 12px;
}

.tg-result-row {
    margin: 4px 10px;
    padding: 9px 10px;
    font-size: 10px;
}

/* ---------------------------------------------------------
   PASO 06
   --------------------------------------------------------- */

.season-ui {
    padding-bottom: 4px;
}

.tg-mini-title {
    padding: 11px 12px;
}

.tg-divider {
    margin: 0 12px 10px;
}

.tg-info {
    padding: 0 12px 8px;
}

.tg-select {
    margin: 0 10px 10px;
    padding: 12px;
}

/* ---------------------------------------------------------
   PASO 07
   EPISODIOS MÁS COMPACTOS
   --------------------------------------------------------- */

.episodes-ui {
    padding-bottom: 9px;
}

.episodes-ui .tg-mini-title {
    padding-bottom: 8px;
}

.tg-episode {
    margin: 3px 10px;
    padding: 7px 10px;
}

/* ---------------------------------------------------------
   PASO 08
   HACEMOS EL PROCESAMIENTO MUCHO MÁS VISUAL
   --------------------------------------------------------- */

.server-ui {
    min-height: 205px;
    padding: 18px;
    gap: 20px;
    background:
        radial-gradient(circle at 20% 50%, rgba(22, 146, 255, .17), transparent 32%),
        linear-gradient(145deg, #091827, #050e18);
}

.server-robot {
    flex-basis: 82px;
    width: 82px;
    height: 82px;
    font-size: 38px;
}

.server-status > strong {
    font-size: 13px;
}

.server-progress {
    height: 8px;
}

/* ---------------------------------------------------------
   PASO 09
   VLC MÁS GRANDE
   --------------------------------------------------------- */

.vlc-ui {
    padding: 13px;
}

.vlc-video {
    min-height: 105px;
}

.vlc-options > div {
    padding: 10px;
}

/* ---------------------------------------------------------
   PASO 10
   PLANES MÁS PREMIUM
   --------------------------------------------------------- */

.howto-plans {
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 169, 35, .12), transparent 36%),
        linear-gradient(145deg, #141b24, #070e17);
}

.plans-mini-ui {
    gap: 6px;
}

.mini-plan {
    padding: 9px 11px;
}

.mini-plan strong {
    font-size: 11px;
}

.mini-plan b {
    font-size: 12px;
}

.mini-plan-note {
    padding: 10px 12px;
    margin-top: 11px;
}

/* ---------------------------------------------------------
   TIPS ALINEADOS AL FINAL
   --------------------------------------------------------- */

.howto-tip {
    margin-top: 11px;
    min-height: 18px;
}

/* ---------------------------------------------------------
   NUMERACIÓN DE FONDO
   --------------------------------------------------------- */

.howto-card-number {
    font-size: 76px;
    opacity: .9;
}

/* ---------------------------------------------------------
   BARRA FINAL
   --------------------------------------------------------- */

.howto-bottom {
    margin-top: 34px;
}

/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (min-width: 1200px) {

    .howto-grid {
        width: min(1380px, 100%);
    }

    .howto-card {
        padding: 25px;
    }

    .howto-card h3 {
        font-size: 23px;
    }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .howto-section {
        padding-top: 75px;
    }

    .howto-card h3 {
        min-height: auto;
    }

}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .howto-section {
        padding: 60px 12px 60px;
    }

    .howto-heading {
        margin-bottom: 30px;
    }

    .howto-card {
        padding: 19px;
    }

    .howto-card h3 {
        font-size: 19px;
        line-height: 1.08;
    }

    .howto-card-number {
        font-size: 62px;
    }

    .server-ui {
        min-height: 0;
    }

    .server-robot {
        flex-basis: 75px;
        width: 75px;
        height: 75px;
    }

    .howto-bottom {
        margin-top: 28px;
    }

}


/* =========================================================
   PASO 09 · TEXTO PROFESIONAL DE VLC
   ========================================================= */

.vlc-ui::after {
    content: "📱 Reproduce tu contenido fácilmente con VLC. Descarga la aplicación desde Play Store si utilizas Android o desde App Store si utilizas iPhone. Una vez instalada, solo comparte el video con VLC y podrás seleccionar el audio y los subtítulos disponibles.";
    display: block;
    margin: 14px 2px 2px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 150, 61, .25);
    border-radius: 11px;
    background: rgba(255, 150, 61, .055);
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
}

@media (max-width: 600px) {
    .vlc-ui::after {
        font-size: 11px;
        line-height: 1.5;
        padding: 11px 12px;
    }
}


/* =========================================================
   LO PIDES · PLANES PREMIUM V2
   PULIDO VISUAL / CONVERSIÓN
   ========================================================= */

.plans-premium {
    position: relative;
    overflow: hidden;
    padding-top: 105px;
    padding-bottom: 105px;
    background:
        radial-gradient(circle at 15% 15%, rgba(34, 139, 255, .09), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(255, 145, 45, .07), transparent 30%);
}

.plans-premium-heading {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
}

.plans-premium-heading h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 70px);
    line-height: .95;
    letter-spacing: -.055em;
}

.plans-premium-heading h2 span {
    color: #258fff;
}

.plans-premium-heading p {
    max-width: 430px;
    margin: 0 0 5px;
    color: rgba(225, 235, 247, .64);
    font-size: 15px;
    line-height: 1.7;
}

/* GRID */

.plans-premium-grid {
    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* CARD BASE */

.premium-plan-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 27px 23px 23px;
    border-radius: 22px;
    border: 1px solid rgba(92, 147, 196, .20);
    background:
        linear-gradient(150deg, rgba(18, 31, 47, .98), rgba(5, 13, 23, .99));
    box-shadow:
        0 18px 55px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255,255,255,.035);
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.premium-plan-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    background: rgba(36, 143, 255, .07);
    pointer-events: none;
}

.premium-plan-card:hover {
    transform: translateY(-6px);
    border-color: rgba(66, 157, 255, .43);
    box-shadow:
        0 25px 65px rgba(0, 0, 0, .36),
        0 0 30px rgba(30, 136, 255, .07);
}

/* TOP */

.premium-plan-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.premium-plan-icon {
    display: grid;
    place-items: center;
    width: 47px;
    height: 47px;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    font-size: 22px;
}

.premium-plan-tag {
    padding: 6px 9px;
    border-radius: 7px;
    background: rgba(255,255,255,.045);
    color: #7992aa;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .15em;
}

/* TITLES */

.premium-plan-card h3 {
    position: relative;
    z-index: 2;
    margin: 20px 0 6px;
    color: #f5f8fc;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 950;
}

.premium-plan-description {
    position: relative;
    z-index: 2;
    min-height: 42px;
    margin: 0;
    color: rgba(216, 228, 241, .57);
    font-size: 12px;
    line-height: 1.55;
}

/* PRICE */

.premium-price {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 20px;
}

.premium-price sup {
    color: #4ba4ff;
    font-size: 17px;
    font-weight: 800;
}

.premium-price strong {
    color: #f8fbff;
    font-size: 43px;
    line-height: .95;
    font-weight: 950;
    letter-spacing: -.055em;
}

.premium-price span {
    margin-left: 5px;
    color: #71879d;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .1em;
}

.premium-price-free {
    display: block;
}

.premium-price-free strong {
    display: block;
    color: #8cff3c;
    font-size: 34px;
}

.premium-price-free span {
    display: block;
    margin: 5px 0 0;
}

/* DIVIDER */

.premium-divider {
    height: 1px;
    margin: 21px 0 18px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.12),
        rgba(255,255,255,.025)
    );
}

/* BENEFICIOS */

.premium-benefits {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 106px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.premium-benefits li {
    display: grid;
    grid-template-columns: 23px 1fr;
    gap: 8px;
    align-items: start;
    color: rgba(221, 232, 242, .70);
    font-size: 11px;
    line-height: 1.45;
}

.premium-benefits li > span {
    font-size: 14px;
    line-height: 1.2;
}

.premium-benefits li strong {
    color: #f0f6fc;
    font-weight: 850;
}

/* BOTONES */

.premium-plan-actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 7px;
    margin-top: 18px;
}

.premium-plan-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 10px 9px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .01em;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.premium-plan-button span {
    font-size: 13px;
}

.premium-plan-button:hover {
    transform: translateY(-2px);
}

.premium-plan-telegram {
    border: 1px solid rgba(43, 158, 255, .55);
    background: linear-gradient(
        135deg,
        rgba(22, 139, 230, .90),
        rgba(9, 93, 174, .95)
    );
    color: white;
    box-shadow: 0 9px 23px rgba(10, 109, 197, .14);
}

.premium-plan-telegram:hover {
    box-shadow: 0 12px 28px rgba(10, 109, 197, .25);
}

.premium-plan-web {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.035);
    color: #aabccd;
}

.premium-plan-web:hover {
    border-color: rgba(255,255,255,.22);
    color: #eaf2fa;
}

/* =========================================================
   GRATIS
   ========================================================= */

.premium-plan-free {
    border-color: rgba(126, 232, 64, .20);
}

.premium-plan-free .premium-plan-tag {
    color: #8ee75b;
}

.premium-plan-free .premium-plan-icon {
    border-color: rgba(126, 232, 64, .18);
    background: rgba(112, 226, 50, .06);
}

/* =========================================================
   PRO
   ========================================================= */

.premium-plan-pro {
    border-color: rgba(40, 159, 255, .22);
}

.premium-plan-pro .premium-plan-tag {
    color: #4caeff;
}

.premium-plan-pro .premium-plan-icon {
    border-color: rgba(40, 159, 255, .20);
    background: rgba(40, 159, 255, .07);
}

/* =========================================================
   PLUS · PROTAGONISTA
   ========================================================= */

.premium-plan-plus {
    margin-top: -9px;
    padding-top: 48px;
    border-color: rgba(168, 103, 255, .48);
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(180, 98, 255, .14),
            transparent 38%
        ),
        linear-gradient(
            150deg,
            rgba(27, 27, 48, .99),
            rgba(8, 13, 24, .99)
        );
    box-shadow:
        0 24px 70px rgba(0,0,0,.36),
        0 0 38px rgba(153, 79, 255, .08);
}

.premium-plan-plus:hover {
    border-color: rgba(193, 123, 255, .72);
    box-shadow:
        0 30px 80px rgba(0,0,0,.42),
        0 0 45px rgba(153, 79, 255, .13);
}

.premium-plan-plus .premium-plan-tag {
    color: #d28cff;
}

.premium-plan-plus .premium-plan-icon {
    border-color: rgba(194, 112, 255, .30);
    background: rgba(178, 92, 255, .09);
}

.premium-plan-plus .premium-price strong {
    color: #f3eaff;
}

.premium-plan-plus .premium-price sup {
    color: #ca80ff;
}

.premium-plan-plus .premium-plan-telegram {
    background: linear-gradient(
        135deg,
        #9d49ed,
        #7031bd
    );
    border-color: rgba(210, 137, 255, .55);
    box-shadow: 0 10px 27px rgba(125, 54, 200, .20);
}

/* BADGE POPULAR */

.premium-popular {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: linear-gradient(
        90deg,
        rgba(145, 70, 225, .95),
        rgba(184, 90, 255, .82)
    );
    color: #fff;
    text-align: center;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .16em;
}

/* =========================================================
   ULTRA
   ========================================================= */

.premium-plan-ultra {
    border-color: rgba(255, 169, 51, .30);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 157, 39, .13),
            transparent 38%
        ),
        linear-gradient(
            150deg,
            rgba(32, 28, 24, .98),
            rgba(10, 13, 18, .99)
        );
}

.premium-plan-ultra .premium-plan-tag {
    color: #ffb44b;
}

.premium-plan-ultra .premium-plan-icon {
    border-color: rgba(255, 175, 61, .28);
    background: rgba(255, 158, 42, .07);
}

.premium-plan-ultra .premium-price strong {
    color: #fff3df;
}

.premium-plan-ultra .premium-price sup {
    color: #ffab43;
}

.premium-plan-ultra .premium-plan-telegram {
    background: linear-gradient(
        135deg,
        #f08b25,
        #cf5d16
    );
    border-color: rgba(255, 176, 82, .55);
    box-shadow: 0 10px 27px rgba(212, 91, 19, .18);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .plans-premium-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-plan-plus {
        margin-top: 0;
    }

}

@media (max-width: 760px) {

    .plans-premium {
        padding: 75px 5% 75px;
    }

    .plans-premium-heading {
        display: block;
        margin-bottom: 35px;
    }

    .plans-premium-heading p {
        margin-top: 18px;
    }

    .plans-premium-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .premium-plan-card {
        padding: 23px 20px 20px;
    }

    .premium-plan-plus {
        padding-top: 47px;
    }

}


/* =========================================================
   PLANES · AJUSTE FINAL
   ========================================================= */

/* 1. Badge PLUS completamente visible */
.premium-plan-plus .premium-popular {
    left: 12px;
    right: 12px;
    top: 0;
    border-radius: 0 0 9px 9px;
    padding: 8px 12px;
    z-index: 10;
    white-space: nowrap;
}

/* 2. Igualar la estructura inferior de las tarjetas */
.premium-plan-card {
    display: flex;
    flex-direction: column;
}

.premium-plan-card .premium-benefits {
    flex: 1;
}

/* Mantener botones alineados */
.premium-plan-card > .premium-plan-button,
.premium-plan-card > .premium-plan-actions {
    margin-top: 20px;
}

/* 3. Mejorar ligeramente la legibilidad del badge */
.premium-popular {
    line-height: 1.2;
    text-align: center;
}

/* PLUS conserva su separación superior */
.premium-plan-plus {
    padding-top: 48px;
}

/* En móvil no dejamos el badge demasiado estrecho */
@media (max-width: 760px) {

    .premium-plan-plus .premium-popular {
        left: 10px;
        right: 10px;
    }

}


/* =========================================================
   LO PIDES · AJUSTE DISTINTIVO PLUS
   ========================================================= */

.premium-popular {
    min-width: 120px !important;
    width: auto !important;
    padding: 8px 18px !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 0 12px 0 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 5 !important;
}

.premium-plan-plus .premium-plan-top {
    padding-top: 14px !important;
}


/* =========================================================
   LO PIDES · COMUNIDAD PREMIUM
   ========================================================= */

.community-premium {
    position: relative;
    overflow: hidden;
    padding: 110px 0 90px;
    background:
        radial-gradient(circle at 12% 55%, rgba(0,132,255,.09), transparent 32%),
        radial-gradient(circle at 88% 45%, rgba(255,132,35,.07), transparent 30%);
}

.community-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}

.community-premium-heading {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto 55px;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: end;
    gap: 70px;
}

.community-premium-heading h2 {
    margin: 12px 0 0;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .9;
    letter-spacing: -3px;
    font-weight: 950;
    color: #f5f7fb;
}

.community-premium-heading h2 span {
    color: #248cff;
}

.community-premium-heading > p {
    margin: 0 0 8px;
    max-width: 470px;
    color: rgba(221,230,242,.66);
    font-size: 16px;
    line-height: 1.75;
}


/* GRID PRINCIPAL */

.community-premium-grid {
    position: relative;
    z-index: 2;
    width: min(1080px, calc(100% - 56px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 20px;
}


/* PANEL IZQUIERDO */

.community-premium-info {
    position: relative;
    min-height: 560px;
    padding: 42px;
    border: 1px solid rgba(48,145,255,.22);
    border-radius: 26px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(30,128,255,.14), transparent 38%),
        linear-gradient(145deg, #0d1c2c, #07111d 72%);
    box-shadow: 0 25px 70px rgba(0,0,0,.28);
}

.community-premium-info::after {
    content: "COMMUNITY";
    position: absolute;
    right: -20px;
    bottom: -22px;
    font-size: 92px;
    font-weight: 950;
    letter-spacing: -5px;
    color: rgba(255,255,255,.018);
    pointer-events: none;
}

.community-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border: 1px solid rgba(63,255,119,.2);
    border-radius: 999px;
    background: rgba(63,255,119,.055);
    color: #6cff7f;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.community-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58ff72;
    box-shadow: 0 0 12px rgba(88,255,114,.7);
}

.community-premium-info h3 {
    position: relative;
    z-index: 1;
    margin: 34px 0 14px;
    font-size: clamp(32px, 3.5vw, 50px);
    line-height: .98;
    letter-spacing: -1.8px;
    font-weight: 950;
    color: #f5f7fb;
}

.community-premium-info h3 span {
    color: #248cff;
}

.community-premium-description {
    position: relative;
    z-index: 1;
    max-width: 470px;
    margin: 0 0 34px;
    color: rgba(218,228,241,.65);
    font-size: 14px;
    line-height: 1.7;
}


/* FEATURES */

.community-feature-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
}

.community-feature {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    transition: .25s ease;
}

.community-feature:hover {
    border-color: rgba(43,143,255,.28);
    background: rgba(43,143,255,.055);
    transform: translateX(4px);
}

.community-feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(35,139,255,.09);
    border: 1px solid rgba(35,139,255,.16);
    font-size: 18px;
}

.community-feature strong {
    display: block;
    margin-bottom: 3px;
    color: #f3f6fb;
    font-size: 13px;
}

.community-feature span {
    display: block;
    color: rgba(213,224,238,.5);
    font-size: 11px;
    line-height: 1.45;
}


/* BOTÓN */

.community-premium-button {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding: 15px 18px;
    border: 1px solid rgba(44,145,255,.4);
    border-radius: 13px;
    background: linear-gradient(135deg, #168cff, #0871dc);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .5px;
    box-shadow: 0 12px 30px rgba(0,130,255,.18);
    transition: .25s ease;
}

.community-premium-button span {
    font-size: 17px;
}

.community-premium-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(0,130,255,.3);
}


/* CHAT */

.community-premium-chat {
    position: relative;
    min-height: 560px;
    border: 1px solid rgba(48,145,255,.2);
    border-radius: 26px;
    overflow: hidden;
    background: #081421;
    box-shadow: 0 25px 70px rgba(0,0,0,.3);
}

.community-chat-top {
    height: 78px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    background: rgba(13,28,43,.88);
}

.community-chat-avatar {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #168cff, #075fc0);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 7px 22px rgba(0,132,255,.25);
}

.community-chat-title {
    flex: 1;
}

.community-chat-title strong {
    display: block;
    color: #f4f7fb;
    font-size: 13px;
}

.community-chat-title span {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: rgba(215,225,239,.5);
    font-size: 10px;
}

.community-chat-title i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #56ff75;
    box-shadow: 0 0 8px rgba(86,255,117,.7);
}

.community-chat-menu {
    color: rgba(255,255,255,.45);
    letter-spacing: 3px;
}


/* CHAT BODY */

.community-chat-body {
    min-height: 390px;
    padding: 25px;
    background:
        radial-gradient(circle at 85% 20%, rgba(0,139,255,.07), transparent 30%),
        linear-gradient(180deg, #081522, #07111c);
}

.community-chat-date {
    width: fit-content;
    margin: 0 auto 24px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: rgba(224,234,246,.42);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.community-message {
    position: relative;
    max-width: 82%;
    margin-bottom: 14px;
    padding: 15px 16px 13px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 15px 15px 15px 5px;
    background: #112437;
}

.community-message-system {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 10px;
    align-items: start;
}

.community-message-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(33,139,255,.12);
    color: #3b9cff;
}

.community-message strong {
    display: block;
    margin-bottom: 5px;
    color: #f3f6fb;
    font-size: 12px;
}

.community-message p {
    margin: 0;
    color: rgba(220,230,241,.62);
    font-size: 11px;
    line-height: 1.5;
}

.community-message small {
    color: rgba(220,230,241,.3);
    font-size: 8px;
}

.community-message-highlight {
    border-color: rgba(255,151,57,.15);
    background: linear-gradient(135deg, rgba(255,139,45,.08), #112437);
}

.community-chat-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    color: rgba(216,227,240,.42);
    font-size: 10px;
}

.community-chat-activity span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55ff75;
    box-shadow: 0 0 8px rgba(85,255,117,.7);
}


/* FOOTER DEL CHAT */

.community-chat-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.05);
    background: #091724;
}

.community-chat-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 11px;
    color: rgba(218,228,240,.3);
    font-size: 10px;
    background: rgba(255,255,255,.025);
}

.community-chat-footer a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #168cff;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}


/* BARRA INFERIOR */

.community-premium-bottom {
    position: relative;
    z-index: 2;
    width: min(780px, calc(100% - 56px));
    margin: 24px auto 0;
    padding: 15px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 13px;
    background: rgba(10,22,35,.7);
    color: rgba(218,228,240,.38);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.community-premium-bottom strong {
    color: #3b9cff;
}

.community-premium-bottom i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .community-premium-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .community-premium-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .community-premium {
        padding: 80px 0 65px;
    }

    .community-premium-heading {
        padding: 0 20px;
    }

    .community-premium-heading h2 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .community-premium-grid {
        width: calc(100% - 30px);
    }

    .community-premium-info,
    .community-premium-chat {
        min-height: auto;
    }

    .community-premium-info {
        padding: 28px 22px;
    }

    .community-chat-body {
        padding: 20px 16px;
    }

    .community-premium-bottom {
        width: calc(100% - 30px);
        gap: 9px;
        font-size: 7px;
    }

}


/* =========================================================
   LO PIDES · CHAT DE COMUNIDAD REALISTA
   ========================================================= */

.community-message {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: start !important;
    max-width: 88% !important;
}

.community-message-short {
    max-width: 62% !important;
}

.community-message-javier {
    max-width: 82% !important;
}

.community-message-content {
    min-width: 0;
}

.community-message-name {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 900;
}

.community-name-blue {
    color: #24a1ff;
}

.community-name-purple {
    color: #d25cff;
}

.community-name-cyan {
    color: #22e0d0;
}

.community-name-brand {
    color: #f4f7fb;
}

.community-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 950;
    color: #fff;
    border: 2px solid rgba(255,255,255,.08);
}

.community-avatar-blue {
    background: linear-gradient(145deg, #315c87, #142b43);
}

.community-avatar-purple {
    background: linear-gradient(145deg, #9d4dcc, #3b1d59);
}

.community-avatar-cyan {
    background: linear-gradient(145deg, #0aa9a0, #12464b);
}

.community-avatar-brand,
.community-avatar-admin {
    background: linear-gradient(145deg, #168cff, #075ec0);
    border-color: rgba(38,151,255,.4);
    box-shadow: 0 0 20px rgba(20,135,255,.18);
}

.community-message p {
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.community-message p strong {
    color: #fff;
}

.community-message-admin {
    max-width: 90% !important;
    border-color: rgba(255,133,43,.55) !important;
    background:
        linear-gradient(135deg, rgba(255,126,38,.09), #112437) !important;
    box-shadow: inset 3px 0 0 rgba(255,139,48,.8);
}

.community-admin-name {
    margin-bottom: 6px;
    color: #ffd39d;
    font-size: 12px;
    font-weight: 950;
}

.community-admin-name span {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(31,143,255,.16);
    color: #45a7ff;
    font-size: 8px;
    letter-spacing: .5px;
}

.community-message-news {
    max-width: 90% !important;
    margin-top: 20px;
    border-color: rgba(156,65,255,.55) !important;
    background:
        linear-gradient(135deg, rgba(129,52,211,.12), rgba(17,36,55,.96)) !important;
}

.community-news-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, #9b42e8, #55228c);
    font-size: 19px;
}

.community-news-title {
    margin-bottom: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.community-online-text {
    flex: 1;
}

.community-online-avatars {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.community-online-avatars i {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin-left: -6px;
    border: 2px solid #081522;
    border-radius: 50%;
    background: #19324a;
    color: rgba(255,255,255,.8);
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
}

.community-online-avatars i:last-child {
    background: #203347;
    color: rgba(255,255,255,.55);
}


/* Más aire para la conversación */

.community-chat-body {
    min-height: 480px !important;
    padding: 26px 25px 22px !important;
}

.community-message + .community-message {
    margin-top: 14px;
}

.community-chat-activity {
    margin-top: 28px !important;
}


/* MOBILE */

@media (max-width: 600px) {

    .community-message,
    .community-message-admin,
    .community-message-news,
    .community-message-javier {
        max-width: 94% !important;
    }

    .community-message-short {
        max-width: 82% !important;
    }

    .community-message {
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        gap: 9px !important;
    }

    .community-avatar,
    .community-news-icon {
        width: 34px;
        height: 34px;
    }

    .community-message p {
        font-size: 11px !important;
    }

    .community-online-avatars {
        display: none;
    }

}


/* =========================================================
   LO PIDES · COMUNIDAD · AJUSTE DE ALTURA
   ========================================================= */

.community-premium {
    align-items: start !important;
}

.community-premium > * {
    align-self: start !important;
}

.community-chat-card {
    height: auto !important;
    min-height: 0 !important;
}

.community-chat-body {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 18px !important;
}

.community-chat-footer {
    min-height: 0 !important;
    height: auto !important;
}

.community-premium-card,
.community-premium-left,
.community-premium-copy {
    height: auto !important;
    min-height: 0 !important;
}

/* Evita que el grid estire artificialmente las columnas */
.community-premium {
    align-items: start !important;
}

.community-premium > div {
    align-self: start !important;
}

/* Un poco más compacto, sin perder aire */
.community-chat-activity {
    margin-top: 18px !important;
}

.community-chat-footer {
    padding-top: 14px !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .community-chat-card {
        height: auto !important;
    }

    .community-chat-body {
        min-height: 0 !important;
    }

}


/* =========================================================
   HERO FINAL POLISH
   Solo LO PIDES · no modifica otras secciones
   ========================================================= */

.hero-lopides .hero-inner {
    align-items: center !important;
}

.hero-lopides .hero-copy {
    padding-top: 4px !important;
}

.hero-lopides .hero-lead {
    max-width: 620px !important;
}

.hero-lopides .hero-bot-card {
    width: min(92%, 455px) !important;
    margin-right: 8px !important;
}

.hero-lopides .hero-bot-body {
    padding: 15px !important;
}

.hero-lopides .hero-visual {
    padding-top: 0 !important;
}

/* Un poco más de aire entre el bloque principal y las ventajas */
.hero-lopides .hero-mini-info {
    margin-top: 30px !important;
}

/* Mantener el Hero elegante en pantallas medianas */
@media (max-width: 1050px) {
    .hero-lopides .hero-inner {
        gap: 28px !important;
    }

    .hero-lopides .hero-bot-card {
        width: min(94%, 430px) !important;
    }
}

/* En móvil el panel vuelve a ocupar el ancho disponible */
@media (max-width: 820px) {
    .hero-lopides .hero-bot-card {
        width: 100% !important;
        max-width: 455px !important;
        margin-right: 0 !important;
    }

    .hero-lopides .hero-mini-info {
        margin-top: 24px !important;
    }
}


/* LOGO OFICIAL LO PIDES */
.brand-logo-image {
    display: block;
    width: 112px;
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 820px) {
    .brand-logo-image {
        width: 96px;
        max-height: 52px;
    }
}


/* =========================================================
   LOGO PRINCIPAL DEL HERO
   ========================================================= */

.hero-main-logo {
    width: 250px;
    margin: 0 0 18px 0;
    position: relative;
    z-index: 2;
}

.hero-main-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35));
}

/* Ajuste para pantallas medianas */
@media (max-width: 1050px) {
    .hero-main-logo {
        width: 220px;
        margin-bottom: 16px;
    }
}

/* Ajuste móvil */
@media (max-width: 820px) {
    .hero-main-logo {
        width: 190px;
        margin: 0 auto 16px;
    }
}


/* AJUSTE FINAL LOGO HERO: 300 PX */
.hero-main-logo {
    width: 300px !important;
    margin-bottom: 12px !important;
}

@media (max-width: 1050px) {
    .hero-main-logo {
        width: 250px !important;
        margin-bottom: 14px !important;
    }
}

@media (max-width: 820px) {
    .hero-main-logo {
        width: 210px !important;
        margin: 0 auto 14px !important;
    }
}


/* =========================================================
   CANGUIL DE MARCA · SECCIÓN TELEGRAM
   ========================================================= */

.telegram-canguil {
    width: 145px;
    height: 145px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-left: auto;
    margin-right: 8px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.telegram-canguil img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.35));
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        filter .45s ease;
}

.telegram-canguil:hover img {
    transform: translateY(-14px) rotate(-2deg) scale(1.04);
    filter: drop-shadow(0 22px 28px rgba(0,0,0,.45));
}

@media (max-width: 900px) {
    .telegram-canguil {
        width: 115px;
        height: 115px;
        margin-right: 0;
    }
}

@media (max-width: 700px) {
    .telegram-section {
        flex-wrap: wrap;
    }

    .telegram-canguil {
        order: 3;
        width: 105px;
        height: 105px;
        margin: 4px auto 0;
        flex-basis: 105px;
    }

    .telegram-section .primary-btn {
        order: 4;
        margin-left: auto;
        margin-right: auto;
    }
}


/* TELEGRAM · CANGUIL JUNTO AL BOTÓN */
.telegram-section {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.telegram-section .telegram-canguil {
    margin-left: auto !important;
    margin-right: 18px !important;
    width: 145px !important;
    height: 145px !important;
    flex-shrink: 0 !important;
}

.telegram-section .primary-btn {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
}

@media (max-width: 700px) {
    .telegram-section {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .telegram-section .telegram-canguil {
        width: 105px !important;
        height: 105px !important;
        margin: 0 4px 0 0 !important;
    }

    .telegram-section .primary-btn {
        margin: 0 !important;
    }
}

/* HOVER · BOTÓN ABRIR TELEGRAM */
.hero-btn-secondary:hover {
    background: #ff9d1c !important;
    border-color: #ff9d1c !important;
    color: #06101d !important;
    box-shadow: 0 10px 28px rgba(255, 157, 28, 0.28) !important;
}


/* =========================================================
   LO PIDES · UNIVERSO CINEMATOGRÁFICO
   Fondo animado exclusivo del Hero
   ========================================================= */

.hero-lopides {
    overflow: hidden !important;
}

/* Capa general */
.cinematic-bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Mantener todo el contenido por encima */
.hero-lopides .hero-inner,
.hero-lopides .hero-scroll {
    position: relative !important;
    z-index: 4 !important;
}

/* ---------------------------------------------------------
   HAZ DE PROYECTOR
   --------------------------------------------------------- */

.cinematic-projector {
    position: absolute;
    width: 900px;
    height: 900px;
    top: -260px;
    right: -260px;
    opacity: .22;
    transform: rotate(-17deg);
    transform-origin: center;
    background:
        conic-gradient(
            from 245deg at 50% 50%,
            transparent 0deg,
            rgba(32,151,255,.08) 24deg,
            rgba(32,151,255,.18) 39deg,
            transparent 58deg,
            transparent 360deg
        );
    filter: blur(3px);
    animation: cinematicBeam 12s ease-in-out infinite alternate;
}

@keyframes cinematicBeam {
    0% {
        transform: rotate(-17deg) translateX(0);
        opacity: .12;
    }
    100% {
        transform: rotate(-11deg) translateX(-70px);
        opacity: .23;
    }
}

/* ---------------------------------------------------------
   TIRAS DE PELÍCULA
   --------------------------------------------------------- */

.cinematic-film {
    position: absolute;
    width: 820px;
    height: 54px;
    left: -180px;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 25px,
            rgba(255,255,255,.075) 25px 34px,
            transparent 34px 54px
        );
    opacity: .24;
    transform: rotate(-17deg);
    animation: filmTravel 24s linear infinite;
}

.cinematic-film::before,
.cinematic-film::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 8px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.13) 0 8px,
            transparent 8px 31px
        );
}

.cinematic-film::before {
    top: 6px;
}

.cinematic-film::after {
    bottom: 6px;
}

.cinematic-film-one {
    top: 19%;
}

.cinematic-film-two {
    top: 72%;
    left: auto;
    right: -260px;
    opacity: .13;
    transform: rotate(14deg);
    animation-name: filmTravelReverse;
    animation-duration: 31s;
}

@keyframes filmTravel {
    from {
        transform: translateX(-80px) rotate(-17deg);
    }
    to {
        transform: translateX(480px) rotate(-17deg);
    }
}

@keyframes filmTravelReverse {
    from {
        transform: translateX(120px) rotate(14deg);
    }
    to {
        transform: translateX(-520px) rotate(14deg);
    }
}

/* ---------------------------------------------------------
   DESTELLOS CINEMATOGRÁFICOS
   --------------------------------------------------------- */

.cinematic-light {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    box-shadow:
        0 0 10px rgba(255,255,255,.45),
        0 0 25px rgba(39,153,255,.3);
    opacity: 0;
    animation: cinemaFlash 7s ease-in-out infinite;
}

.cinematic-light-one {
    top: 27%;
    left: 12%;
    animation-delay: 1s;
}

.cinematic-light-two {
    top: 63%;
    right: 14%;
    animation-delay: 4s;
}

@keyframes cinemaFlash {
    0%, 70%, 100% {
        opacity: 0;
        transform: scale(.5);
    }
    76% {
        opacity: .7;
        transform: scale(1);
    }
    82% {
        opacity: .15;
        transform: scale(1.8);
    }
}

/* ---------------------------------------------------------
   CANGUIL FANTASMA 🍿
   --------------------------------------------------------- */

.cinematic-popcorn {
    position: absolute;
    width: 105px;
    height: 105px;
    opacity: .075;
    filter:
        grayscale(.15)
        blur(.2px)
        drop-shadow(0 0 18px rgba(255,157,28,.16));
    animation: popcornFloat 11s ease-in-out infinite;
}

.cinematic-popcorn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cinematic-popcorn-one {
    right: 8%;
    top: 20%;
    animation-delay: -2s;
    transform: rotate(7deg);
}

.cinematic-popcorn-two {
    left: 8%;
    bottom: 8%;
    width: 72px;
    height: 72px;
    opacity: .045;
    animation-delay: -7s;
}

@keyframes popcornFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(7deg);
    }
    50% {
        transform: translate3d(-18px, -22px, 0) rotate(-4deg);
    }
}

/* ---------------------------------------------------------
   POLVO / LUZ DE PROYECTOR
   --------------------------------------------------------- */

.cinematic-dust {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,.65);
    opacity: .12;
    animation: dustMove 13s ease-in-out infinite;
}

.cinematic-dust-one {
    left: 37%;
    top: 22%;
    animation-delay: -2s;
}

.cinematic-dust-two {
    left: 63%;
    top: 31%;
    animation-delay: -6s;
}

.cinematic-dust-three {
    left: 72%;
    top: 67%;
    animation-delay: -9s;
}

.cinematic-dust-four {
    left: 27%;
    top: 72%;
    animation-delay: -4s;
}

@keyframes dustMove {
    0%, 100% {
        transform: translate(0, 0) scale(.7);
        opacity: .05;
    }
    50% {
        transform: translate(35px, -45px) scale(1.5);
        opacity: .32;
    }
}

/* ---------------------------------------------------------
   MÓVIL · MENOS CARGA VISUAL
   --------------------------------------------------------- */

@media (max-width: 820px) {
    .cinematic-projector {
        width: 600px;
        height: 600px;
        right: -250px;
        opacity: .12;
    }

    .cinematic-film {
        opacity: .11;
    }

    .cinematic-popcorn {
        opacity: .045;
    }
}

/* Usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .cinematic-bg *,
    .cinematic-bg {
        animation: none !important;
    }
}


/* =========================================================
   LO PIDES · CINEMA WOW
   Elementos cinematográficos interactivos
   ========================================================= */

.cinema-wow {
    position: absolute;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    opacity: 0;
}

/* ---------------------------------------------------------
   🎬 CLAQUETA
   --------------------------------------------------------- */

.cinema-clapper {
    right: 7%;
    top: 13%;
    width: 116px;
    transform: rotate(9deg);
    animation: wowClapper 10s ease-in-out infinite;
    opacity: .075;
}

.clapper-top {
    height: 22px;
    border-radius: 4px 4px 2px 2px;
    border: 1px solid rgba(255,255,255,.28);
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.18) 0 12px,
            transparent 12px 24px
        );
}

.clapper-body {
    height: 62px;
    margin-top: 4px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 3px;
    background: rgba(10,20,34,.72);
    padding: 12px;
    box-sizing: border-box;
}

.clapper-body b {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255,255,255,.7);
}

.clapper-body small {
    display: block;
    margin-top: 9px;
    font-size: 7px;
    letter-spacing: 1px;
    color: rgba(39,153,255,.65);
}

@keyframes wowClapper {
    0%, 100% {
        margin-top: 0;
    }
    50% {
        margin-top: -15px;
    }
}

/* ---------------------------------------------------------
   🎟️ TICKET
   --------------------------------------------------------- */

.cinema-ticket {
    left: 8%;
    top: 18%;
    width: 94px;
    height: 43px;
    padding: 7px 9px;
    box-sizing: border-box;
    border: 1px dashed rgba(255,157,28,.42);
    border-radius: 5px;
    background: rgba(255,157,28,.045);
    transform: rotate(-13deg);
    animation: wowTicket 13s ease-in-out infinite;
}

.cinema-ticket span {
    position: absolute;
    right: 7px;
    top: 5px;
    font-size: 13px;
    opacity: .65;
}

.cinema-ticket b {
    display: block;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(255,157,28,.62);
}

.cinema-ticket small {
    display: block;
    margin-top: 6px;
    font-size: 6px;
    letter-spacing: 1px;
    color: rgba(255,255,255,.28);
}

@keyframes wowTicket {
    0%, 100% {
        margin-top: 0;
        margin-left: 0;
    }
    50% {
        margin-top: 22px;
        margin-left: 14px;
    }
}

/* ---------------------------------------------------------
   🎞️ ROLLO DE PELÍCULA
   --------------------------------------------------------- */

.cinema-reel {
    right: 15%;
    bottom: 12%;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.12);
    background:
        radial-gradient(
            circle,
            transparent 0 10px,
            rgba(255,255,255,.025) 11px 24px,
            transparent 25px
        );
    animation: wowReel 18s linear infinite;
    opacity: .055;
}

.cinema-reel::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
}

.reel-hole {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.13);
}

.reel-hole.h1 {
    top: 9px;
    left: 33px;
}

.reel-hole.h2 {
    right: 9px;
    top: 33px;
}

.reel-hole.h3 {
    bottom: 9px;
    left: 33px;
}

.reel-hole.h4 {
    left: 9px;
    top: 33px;
}

.reel-center {
    position: absolute;
    left: 31px;
    top: 31px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.16);
}

@keyframes wowReel {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}

/* ---------------------------------------------------------
   🍿 PALOMITA INDIVIDUAL
   --------------------------------------------------------- */

.cinema-popcorn-pop {
    left: 43%;
    bottom: 14%;
    font-size: 24px;
    filter: grayscale(.15);
    opacity: .09;
    animation: wowPopcorn 9s ease-in-out infinite;
}

@keyframes wowPopcorn {
    0%, 100% {
        margin-top: 0;
        rotate: -8deg;
    }
    50% {
        margin-top: -32px;
        rotate: 12deg;
    }
}

/* ---------------------------------------------------------
   ✦ PEQUEÑOS DESTELLOS
   --------------------------------------------------------- */

.cinema-star {
    font-size: 13px;
    color: rgba(255,183,62,.65);
    animation: wowStar 6s ease-in-out infinite;
}

.star-one {
    left: 18%;
    bottom: 24%;
    animation-delay: -2s;
}

.star-two {
    right: 32%;
    top: 23%;
    animation-delay: -4s;
}

@keyframes wowStar {
    0%, 100% {
        opacity: .02;
        scale: .6;
    }
    50% {
        opacity: .6;
        scale: 1;
    }
}

/* ---------------------------------------------------------
   🖱️ PARALLAX
   --------------------------------------------------------- */

.cinema-wow {
    --mouse-x: 0px;
    --mouse-y: 0px;
}

.cinema-wow[data-depth="12"] {
    translate: calc(var(--mouse-x) * .25) calc(var(--mouse-y) * .25);
}

.cinema-wow[data-depth="18"] {
    translate: calc(var(--mouse-x) * .40) calc(var(--mouse-y) * .40);
}

.cinema-wow[data-depth="22"] {
    translate: calc(var(--mouse-x) * .48) calc(var(--mouse-y) * .48);
}

.cinema-wow[data-depth="28"] {
    translate: calc(var(--mouse-x) * .58) calc(var(--mouse-y) * .58);
}

.cinema-wow[data-depth="30"] {
    translate: calc(var(--mouse-x) * .65) calc(var(--mouse-y) * .65);
}

.cinema-wow[data-depth="35"] {
    translate: calc(var(--mouse-x) * .75) calc(var(--mouse-y) * .75);
}

/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */

@media (max-width: 820px) {
    .cinema-clapper {
        right: 2%;
        top: 10%;
        scale: .72;
    }

    .cinema-ticket {
        left: 2%;
        scale: .72;
    }

    .cinema-reel {
        right: 5%;
        bottom: 8%;
        scale: .72;
    }

    .cinema-popcorn-pop {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cinema-wow {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   CINEMA WOW · AJUSTE DE VISIBILIDAD
   ========================================================= */

/* La película ahora se descubre mejor */
.cinematic-film {
    opacity: .34 !important;
}

/* Segunda película permanece más discreta */
.cinematic-film-two {
    opacity: .19 !important;
}

/* Claqueta más reconocible */
.cinema-clapper {
    opacity: .12 !important;
}

/* Ticket ligeramente más visible */
.cinema-ticket {
    opacity: .10 !important;
}

/* Rollo sigue siendo un detalle escondido */
.cinema-reel {
    opacity: .075 !important;
}

/* Canguil fantasma, protagonista secundario */
.cinematic-popcorn-one {
    opacity: .10 !important;
}

.cinematic-popcorn-two {
    opacity: .055 !important;
}

/* Destellos */
.cinema-star {
    color: rgba(255,183,62,.82) !important;
}

/* Polvo de proyector */
.cinematic-dust {
    opacity: .16 !important;
}

@media (max-width: 820px) {
    .cinematic-film {
        opacity: .16 !important;
    }

    .cinematic-film-two {
        opacity: .09 !important;
    }

    .cinema-clapper {
        opacity: .07 !important;
    }

    .cinema-ticket {
        opacity: .06 !important;
    }
}


/* =========================================================
   LO PIDES · PLANES CINEMA
   Boletos cinematográficos flotantes
   ========================================================= */

.plans-section {
    position: relative !important;
    overflow: hidden !important;
}

.plans-premium-heading,
.plans-premium-grid {
    position: relative !important;
    z-index: 3 !important;
}

.plans-cinema-bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.plans-ticket {
    position: absolute;
    width: 142px;
    height: 58px;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 6px;
    background: rgba(10,20,34,.35);
    opacity: .10;
    transform-origin: center;
    filter: blur(.15px);
    will-change: transform;
}

.plans-ticket::before,
.plans-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-radius: 50%;
    background: #050a12;
}

.plans-ticket::before {
    left: -5px;
}

.plans-ticket::after {
    right: -5px;
}

.plans-ticket span {
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 15px;
    opacity: .65;
}

.plans-ticket b {
    display: block;
    font-size: 8px;
    letter-spacing: 1.8px;
    color: rgba(255,183,62,.75);
}

.plans-ticket small {
    display: block;
    margin-top: 7px;
    font-size: 6px;
    letter-spacing: 1px;
    color: rgba(255,255,255,.30);
}

/* Ticket 1 */
.plans-ticket-1 {
    left: 3%;
    top: 19%;
    transform: rotate(-12deg);
    animation: planTicketOne 14s ease-in-out infinite;
}

/* Ticket 2 */
.plans-ticket-2 {
    right: 2%;
    top: 12%;
    transform: rotate(10deg);
    opacity: .075;
    animation: planTicketTwo 17s ease-in-out infinite;
}

/* Ticket 3 */
.plans-ticket-3 {
    left: 10%;
    bottom: 13%;
    transform: rotate(8deg);
    opacity: .065;
    animation: planTicketThree 19s ease-in-out infinite;
}

/* Ticket 4 */
.plans-ticket-4 {
    right: 12%;
    bottom: 9%;
    transform: rotate(-8deg);
    opacity: .085;
    animation: planTicketFour 16s ease-in-out infinite;
}

/* Ticket 5 */
.plans-ticket-5 {
    left: 45%;
    top: 5%;
    transform: rotate(-5deg);
    opacity: .045;
    animation: planTicketFive 21s ease-in-out infinite;
}

@keyframes planTicketOne {
    0%, 100% {
        margin-top: 0;
        margin-left: 0;
    }
    50% {
        margin-top: -18px;
        margin-left: 13px;
    }
}

@keyframes planTicketTwo {
    0%, 100% {
        margin-top: 0;
        margin-right: 0;
    }
    50% {
        margin-top: 20px;
        margin-right: 16px;
    }
}

@keyframes planTicketThree {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        margin-left: -15px;
    }
}

@keyframes planTicketFour {
    0%, 100% {
        margin-top: 0;
        margin-right: 0;
    }
    50% {
        margin-top: -17px;
        margin-right: 12px;
    }
}

@keyframes planTicketFive {
    0%, 100% {
        margin-top: 0;
        opacity: .035;
    }
    50% {
        margin-top: 18px;
        opacity: .075;
    }
}

/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */

@media (max-width: 820px) {
    .plans-ticket {
        scale: .72;
        opacity: .05;
    }

    .plans-ticket-1 {
        left: -30px;
    }

    .plans-ticket-2 {
        right: -30px;
    }

    .plans-ticket-3,
    .plans-ticket-4 {
        display: none;
    }

    .plans-ticket-5 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plans-ticket {
        animation: none !important;
    }
}


/* =========================================================
   PLANES · TICKETS WOW 2.0
   ========================================================= */

.plans-ticket {
    opacity: .15 !important;
    box-shadow: 0 10px 35px rgba(0,0,0,.16);
    transition: opacity .5s ease;
}

.plans-ticket-1 {
    left: 1% !important;
    top: 23% !important;
}

.plans-ticket-2 {
    right: 1% !important;
    top: 16% !important;
}

.plans-ticket-3 {
    left: 5% !important;
    bottom: 15% !important;
}

.plans-ticket-4 {
    right: 7% !important;
    bottom: 13% !important;
}

.plans-ticket-5 {
    left: 47% !important;
    top: 3% !important;
    opacity: .075 !important;
}

.plans-ticket::after,
.plans-ticket::before {
    background: #050a12 !important;
}

@media (max-width: 820px) {
    .plans-ticket {
        opacity: .07 !important;
    }
}


/* PROFUNDIDAD DE LOS TICKETS */
.plans-ticket {
    translate: var(--ticket-x, 0px) var(--ticket-y, 0px);
}


/* =========================================================
   PLANES · TICKETS WOW · FINAL
   ========================================================= */

.plans-ticket {
    z-index: 1 !important;
    pointer-events: none !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18);
}

.plans-ticket-1 {
    opacity: .12 !important;
}

.plans-ticket-2 {
    opacity: .075 !important;
}

.plans-ticket-3 {
    opacity: .065 !important;
}

.plans-ticket-4 {
    opacity: .09 !important;
}

.plans-ticket-5 {
    opacity: .045 !important;
}

/* Movimiento suave adicional */
.plans-ticket-1 {
    animation-duration: 15s !important;
}

.plans-ticket-2 {
    animation-duration: 18s !important;
}

.plans-ticket-3 {
    animation-duration: 20s !important;
}

.plans-ticket-4 {
    animation-duration: 17s !important;
}

.plans-ticket-5 {
    animation-duration: 22s !important;
}

/* Que algunos boletos nazcan desde fuera de pantalla */
.plans-ticket-1 {
    left: -18px !important;
}

.plans-ticket-2 {
    right: -18px !important;
}

.plans-ticket-3 {
    left: 4% !important;
}

.plans-ticket-4 {
    right: 5% !important;
}

.plans-ticket-5 {
    left: 46% !important;
}

/* En pantallas pequeñas, mucho más discreto */
@media (max-width: 820px) {
    .plans-ticket {
        opacity: .045 !important;
    }

    .plans-ticket-1,
    .plans-ticket-2 {
        scale: .72;
    }
}


/* =========================================================
   PLANES · TICKETS CINEMA · VISIBILIDAD FINAL
   ========================================================= */

.plans-ticket {
    opacity: .18 !important;
    filter: blur(.1px) drop-shadow(0 8px 20px rgba(0,0,0,.22));
}

/* Ticket entrando desde la izquierda */
.plans-ticket-1 {
    left: -28px !important;
    top: 25% !important;
    opacity: .20 !important;
}

/* Ticket entrando desde la derecha */
.plans-ticket-2 {
    right: -25px !important;
    top: 17% !important;
    opacity: .15 !important;
}

/* Ticket inferior izquierdo */
.plans-ticket-3 {
    left: 1% !important;
    bottom: 13% !important;
    opacity: .13 !important;
}

/* Ticket inferior derecho */
.plans-ticket-4 {
    right: 3% !important;
    bottom: 11% !important;
    opacity: .16 !important;
}

/* Ticket fantasma central */
.plans-ticket-5 {
    left: 47% !important;
    top: 2% !important;
    opacity: .07 !important;
}

/* Pequeño brillo cinematográfico */
.plans-ticket::after,
.plans-ticket::before {
    box-shadow: 0 0 8px rgba(255,157,28,.08);
}

/* En móvil no competir con las tarjetas */
@media (max-width: 820px) {
    .plans-ticket {
        opacity: .055 !important;
    }

    .plans-ticket-1 {
        left: -45px !important;
    }

    .plans-ticket-2 {
        right: -45px !important;
    }
}


/* =========================================================
   LO PIDES · PLANES 3.0
   TICKETS CINEMATOGRÁFICOS VIVOS
   ========================================================= */

.plans-ticket {
    will-change: transform, opacity, margin;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------
   ENTRADA / SALIDA CINEMATOGRÁFICA
   --------------------------------------------------------- */

.plans-ticket-1 {
    left: -35px !important;
    animation:
        planTicketOne 15s ease-in-out infinite,
        planTicketFadeOne 15s ease-in-out infinite !important;
}

.plans-ticket-2 {
    right: -32px !important;
    animation:
        planTicketTwo 18s ease-in-out infinite,
        planTicketFadeTwo 18s ease-in-out infinite !important;
}

.plans-ticket-3 {
    left: -18px !important;
    animation:
        planTicketThree 20s ease-in-out infinite,
        planTicketFadeThree 20s ease-in-out infinite !important;
}

.plans-ticket-4 {
    right: -15px !important;
    animation:
        planTicketFour 17s ease-in-out infinite,
        planTicketFadeFour 17s ease-in-out infinite !important;
}

.plans-ticket-5 {
    top: -18px !important;
    animation:
        planTicketFive 22s ease-in-out infinite,
        planTicketFadeFive 22s ease-in-out infinite !important;
}

/* ---------------------------------------------------------
   APARICIÓN
   --------------------------------------------------------- */

@keyframes planTicketFadeOne {
    0%, 10% {
        opacity: 0;
    }

    25%, 68% {
        opacity: .20;
    }

    82%, 100% {
        opacity: 0;
    }
}

@keyframes planTicketFadeTwo {
    0%, 16% {
        opacity: 0;
    }

    30%, 70% {
        opacity: .15;
    }

    86%, 100% {
        opacity: 0;
    }
}

@keyframes planTicketFadeThree {
    0%, 14% {
        opacity: 0;
    }

    28%, 65% {
        opacity: .13;
    }

    82%, 100% {
        opacity: 0;
    }
}

@keyframes planTicketFadeFour {
    0%, 18% {
        opacity: 0;
    }

    32%, 72% {
        opacity: .16;
    }

    88%, 100% {
        opacity: 0;
    }
}

@keyframes planTicketFadeFive {
    0%, 20% {
        opacity: 0;
    }

    34%, 60% {
        opacity: .07;
    }

    78%, 100% {
        opacity: 0;
    }
}

/* ---------------------------------------------------------
   MOVIMIENTO SUAVE
   --------------------------------------------------------- */

@keyframes planTicketOne {
    0%, 100% {
        margin-top: 18px;
        margin-left: 0;
        rotate: -12deg;
    }

    50% {
        margin-top: -8px;
        margin-left: 20px;
        rotate: -7deg;
    }
}

@keyframes planTicketTwo {
    0%, 100% {
        margin-top: -5px;
        margin-right: 0;
        rotate: 10deg;
    }

    50% {
        margin-top: 25px;
        margin-right: 20px;
        rotate: 5deg;
    }
}

@keyframes planTicketThree {
    0%, 100% {
        margin-left: 0;
        rotate: 8deg;
    }

    50% {
        margin-left: -20px;
        rotate: 3deg;
    }
}

@keyframes planTicketFour {
    0%, 100% {
        margin-top: 8px;
        margin-right: 0;
        rotate: -8deg;
    }

    50% {
        margin-top: -15px;
        margin-right: 18px;
        rotate: -3deg;
    }
}

@keyframes planTicketFive {
    0%, 100% {
        margin-top: 0;
        rotate: -5deg;
    }

    50% {
        margin-top: 22px;
        rotate: 3deg;
    }
}

/* ---------------------------------------------------------
   PROFUNDIDAD CON EL MOUSE
   --------------------------------------------------------- */

.plans-ticket-1 {
    translate: calc(var(--ticket-x, 0px) * .40)
               calc(var(--ticket-y, 0px) * .40);
}

.plans-ticket-2 {
    translate: calc(var(--ticket-x, 0px) * .70)
               calc(var(--ticket-y, 0px) * .70);
}

.plans-ticket-3 {
    translate: calc(var(--ticket-x, 0px) * .50)
               calc(var(--ticket-y, 0px) * .50);
}

.plans-ticket-4 {
    translate: calc(var(--ticket-x, 0px) * .80)
               calc(var(--ticket-y, 0px) * .80);
}

.plans-ticket-5 {
    translate: calc(var(--ticket-x, 0px) * .30)
               calc(var(--ticket-y, 0px) * .30);
}

/* ---------------------------------------------------------
   PLUS · POPULAR
   --------------------------------------------------------- */

.premium-plan-plus {
    position: relative !important;
}

.premium-popular {
    min-width: 132px !important;
    width: 132px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    padding: 0 10px !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    border-radius: 0 0 12px 0 !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;

    z-index: 20 !important;
}

/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */

@media (max-width: 820px) {

    .plans-ticket-1 {
        left: -55px !important;
    }

    .plans-ticket-2 {
        right: -55px !important;
    }

    .plans-ticket-3,
    .plans-ticket-4 {
        opacity: .04 !important;
    }

    .plans-ticket-5 {
        display: none !important;
    }

    .premium-popular {
        min-width: 120px !important;
        width: 120px !important;
        height: 26px !important;
        font-size: 9px !important;
    }
}

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

    .plans-ticket {
        animation: none !important;
    }
}

/* =========================================================
   PLANES 3.0.1 · BADGE POPULAR
   ========================================================= */

.premium-plan-plus {
    position: relative !important;
    overflow: visible !important;
}

.premium-popular {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 150px !important;
    min-width: 150px !important;
    height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    padding: 0 !important;

    border-radius: 0 0 12px 12px !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-align: center !important;

    z-index: 50 !important;
}

/* =========================================================
   CÓMO FUNCIONA · CINEMA 3.1
   TIRA DE PELÍCULA CINEMATOGRÁFICA
   ========================================================= */

.howto-section {
    position: relative !important;
    overflow: hidden !important;
}

.howto-heading,
.howto-grid {
    position: relative !important;
    z-index: 3 !important;
}

.howto-grid {
    isolation: isolate !important;
}

/* TIRA PRINCIPAL */
.howto-grid::before {
    content: "";
    position: absolute !important;
    z-index: 0 !important;
    left: -12% !important;
    right: -12% !important;
    top: 52% !important;
    height: 154px !important;
    transform: translateY(-50%) rotate(-1deg) !important;
    border-top: 9px solid rgba(255,255,255,.065) !important;
    border-bottom: 9px solid rgba(255,255,255,.065) !important;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 34px,
            rgba(255,255,255,.095) 34px 48px,
            transparent 48px 82px),
        repeating-linear-gradient(90deg,
            rgba(7,15,27,.88) 0 118px,
            rgba(18,31,49,.82) 118px 236px) !important;
    box-shadow:
        0 0 45px rgba(19,132,255,.10),
        inset 0 18px 20px rgba(0,0,0,.28),
        inset 0 -18px 20px rgba(0,0,0,.28) !important;
    pointer-events: none !important;
}

/* FOTOGRAMAS */
.howto-grid::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    left: -8% !important;
    right: -8% !important;
    top: 52% !important;
    height: 112px !important;
    transform: translateY(-50%) rotate(-1deg) !important;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 12px,
            rgba(255,255,255,.055) 12px 20px,
            transparent 20px 30px,
            rgba(255,255,255,.055) 30px 38px,
            transparent 38px 116px) !important;
    box-shadow:
        inset 0 0 35px rgba(0,0,0,.35) !important;
    pointer-events: none !important;
    animation: cinemaFilmScroll 10s linear infinite !important;
}

/* LUZ QUE ATRAVIESA LA PELÍCULA */
.howto-section::before {
    content: "" !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 22% !important;
    bottom: 12% !important;
    left: -12% !important;
    width: 170px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(39,153,255,.10),
        rgba(255,255,255,.055),
        transparent) !important;
    filter: blur(18px) !important;
    transform: skewX(-12deg) !important;
    pointer-events: none !important;
    animation: cinemaProjectorSweep 8s ease-in-out infinite !important;
}

/* PEQUEÑO CARRETE DECORATIVO */
.howto-section::after {
    content: "✦" !important;
    position: absolute !important;
    z-index: 1 !important;
    right: 4% !important;
    top: 45% !important;
    font-size: 82px !important;
    color: rgba(255,183,62,.055) !important;
    pointer-events: none !important;
    animation: cinemaReelFloat 7s ease-in-out infinite !important;
}

/* LOS PASOS SIEMPRE ENCIMA */
.howto-card {
    position: relative !important;
    z-index: 5 !important;
}

/* REFLEJO AL PASAR EL MOUSE */
.howto-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255,255,255,.065) 50%,
        transparent 70%) !important;
    transform: translateX(-100%) !important;
}

.howto-card:hover::after {
    opacity: 1 !important;
    animation: cinemaCardShine .75s ease forwards !important;
}

@keyframes cinemaFilmScroll {
    from { background-position: 0 0; }
    to { background-position: 236px 0; }
}

@keyframes cinemaProjectorSweep {
    0%, 100% { left: -15%; opacity: 0; }
    15% { opacity: .25; }
    70% { opacity: .65; }
    100% { left: 115%; opacity: 0; }
}

@keyframes cinemaReelFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: .35; }
    50% { transform: translateY(-18px) rotate(30deg); opacity: .8; }
}

@keyframes cinemaCardShine {
    to { transform: translateX(100%); }
}

@media (max-width: 820px) {
    .howto-grid::before {
        height: 105px !important;
        opacity: .55 !important;
    }

    .howto-grid::after {
        height: 76px !important;
        opacity: .4 !important;
    }

    .howto-section::after {
        font-size: 48px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .howto-grid::after,
    .howto-section::before,
    .howto-section::after,
    .howto-card::after {
        animation: none !important;
    }
}

/* =========================================================
   CÓMO FUNCIONA 3.2 · TIRA CINEMATOGRÁFICA GLOBAL
   ========================================================= */

.howto-section {
    position: relative !important;
    overflow: hidden !important;
}

/* La nueva capa ocupa TODA la sección */
.howto-film-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Mantener títulos y tarjetas por encima */
.howto-heading,
.howto-grid {
    position: relative !important;
    z-index: 5 !important;
}

/* =========================================================
   TIRA PRINCIPAL
   ========================================================= */

.howto-film-bg::before {
    content: "";
    position: absolute !important;

    left: -8% !important;
    right: -8% !important;
    top: 50% !important;

    height: 190px !important;

    transform: translateY(-50%) rotate(-1deg) !important;

    background:
        /* perforaciones superiores */
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(255,255,255,.12) 18px 34px,
            transparent 34px 58px
        ) top / 116px 28px repeat-x,

        /* perforaciones inferiores */
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(255,255,255,.12) 18px 34px,
            transparent 34px 58px
        ) bottom / 116px 28px repeat-x,

        /* cuerpo de la película */
        linear-gradient(
            180deg,
            rgba(8,16,29,.92),
            rgba(14,27,44,.88),
            rgba(7,15,27,.94)
        ) !important;

    border-top:
        3px solid rgba(255,255,255,.08) !important;

    border-bottom:
        3px solid rgba(255,255,255,.08) !important;

    box-shadow:
        0 0 70px rgba(20,125,255,.10),
        inset 0 18px 30px rgba(0,0,0,.38),
        inset 0 -18px 30px rgba(0,0,0,.38) !important;

    animation: howtoFilmMove 14s linear infinite !important;
}

/* Línea central de la película */
.howto-film-bg::after {
    content: "";
    position: absolute !important;

    left: -5% !important;
    right: -5% !important;
    top: 50% !important;

    height: 2px !important;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,183,62,.0) 0 90px,
            rgba(255,183,62,.28) 90px 150px,
            rgba(255,183,62,.0) 150px 240px
        ) !important;

    transform: translateY(-50%) !important;

    opacity: .35 !important;

    animation: howtoFilmLine 9s linear infinite !important;
}

/* =========================================================
   BARRIDO DE LUZ
   ========================================================= */

.howto-film-light {
    position: absolute !important;

    top: 5% !important;
    bottom: 5% !important;
    left: -18% !important;

    width: 190px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(39,153,255,.08),
            rgba(255,255,255,.09),
            rgba(39,153,255,.05),
            transparent
        ) !important;

    filter: blur(22px) !important;
    transform: skewX(-12deg) !important;

    animation: howtoFilmSweep 11s ease-in-out infinite !important;
}

/* =========================================================
   CARRETES DECORATIVOS
   ========================================================= */

.howto-film-reel {
    position: absolute !important;

    width: 110px !important;
    height: 110px !important;

    border-radius: 50% !important;

    border:
        2px solid rgba(255,183,62,.08) !important;

    opacity: .45 !important;

    animation:
        howtoReelSpin 18s linear infinite,
        howtoReelFloat 7s ease-in-out infinite !important;
}

.howto-film-reel::before {
    content: "" !important;

    position: absolute !important;
    inset: 14px !important;

    border-radius: 50% !important;

    border:
        1px solid rgba(255,255,255,.07) !important;
}

.howto-film-reel::after {
    content: "✦" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    font-size: 22px !important;

    color: rgba(255,183,62,.15) !important;
}

.howto-film-reel-left {
    left: -42px !important;
    top: 31% !important;
}

.howto-film-reel-right {
    right: -42px !important;
    bottom: 25% !important;
    animation-delay: -5s !important;
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes howtoFilmMove {
    from {
        background-position:
            0 0,
            0 100%,
            0 0;
    }

    to {
        background-position:
            232px 0,
            232px 100%,
            0 0;
    }
}

@keyframes howtoFilmLine {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 360px 0;
    }
}

@keyframes howtoFilmSweep {
    0%, 100% {
        left: -18%;
        opacity: 0;
    }

    15% {
        opacity: .25;
    }

    55% {
        opacity: .65;
    }

    85% {
        opacity: .15;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

@keyframes howtoReelSpin {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes howtoReelFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -14px;
    }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 820px) {

    .howto-film-bg::before {
        height: 125px !important;
        opacity: .58 !important;
    }

    .howto-film-reel {
        width: 70px !important;
        height: 70px !important;
        opacity: .25 !important;
    }

    .howto-film-reel-left {
        left: -35px !important;
    }

    .howto-film-reel-right {
        right: -35px !important;
    }

    .howto-film-light {
        width: 120px !important;
    }
}

/* Menos movimiento */
@media (prefers-reduced-motion: reduce) {

    .howto-film-bg::before,
    .howto-film-bg::after,
    .howto-film-light,
    .howto-film-reel {
        animation: none !important;
    }
}


/* =========================================================
   CÓMO FUNCIONA 3.3 · FILM DIAGONAL GLOBAL
   La película recorre visualmente toda la sección
   ========================================================= */

.howto-section {
    position: relative !important;
    overflow: hidden !important;
}

/* Capa cinematográfica completa */
.howto-film-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* =========================================================
   TIRA PRINCIPAL
   ========================================================= */

.howto-film-bg::before {
    content: "";
    position: absolute !important;

    width: 145% !important;
    height: 112px !important;

    left: -22% !important;
    top: 43% !important;

    transform: rotate(-12deg) !important;
    transform-origin: center !important;

    background:
        /* perforaciones superiores */
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(255,255,255,.10) 18px 28px,
            transparent 28px 46px
        ) top / 100% 13px no-repeat,

        /* perforaciones inferiores */
        repeating-linear-gradient(
            90deg,
            transparent 0 18px,
            rgba(255,255,255,.10) 18px 28px,
            transparent 28px 46px
        ) bottom / 100% 13px no-repeat,

        /* cuerpo de la película */
        linear-gradient(
            180deg,
            rgba(8,22,38,.72),
            rgba(13,31,49,.52),
            rgba(8,22,38,.72)
        );

    border-top: 1px solid rgba(67,156,255,.12);
    border-bottom: 1px solid rgba(67,156,255,.12);

    box-shadow:
        0 0 35px rgba(20,125,255,.05),
        inset 0 0 28px rgba(0,0,0,.35);

    opacity: .34 !important;

    animation: howtoFilmGlobal 22s ease-in-out infinite;
}

/* Línea central de la película */
.howto-film-bg::after {
    content: "";
    position: absolute !important;

    width: 145% !important;
    height: 2px !important;

    left: -22% !important;
    top: 50% !important;

    transform: rotate(-12deg) !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(45,145,255,.20),
            rgba(255,183,62,.12),
            rgba(45,145,255,.20),
            transparent
        );

    opacity: .45 !important;
}

/* Movimiento casi imperceptible */
@keyframes howtoFilmGlobal {

    0%, 100% {
        transform:
            translate3d(-1.5%, 0, 0)
            rotate(-12deg);
    }

    50% {
        transform:
            translate3d(1.5%, -12px, 0)
            rotate(-12deg);
    }
}

/* =========================================================
   CARRETES LATERALES
   ========================================================= */

.howto-film-reel {
    position: absolute !important;

    width: 92px !important;
    height: 92px !important;

    border-radius: 50% !important;

    border: 2px solid rgba(255,255,255,.10) !important;

    background:
        radial-gradient(
            circle,
            rgba(255,183,62,.07) 0 8px,
            transparent 9px 20px,
            rgba(255,255,255,.035) 21px 27px,
            transparent 28px
        );

    box-shadow:
        inset 0 0 20px rgba(255,255,255,.025),
        0 0 30px rgba(20,125,255,.04);

    opacity: .22 !important;

    animation: howtoFilmReelFloat 9s ease-in-out infinite;
}

.howto-film-reel::before,
.howto-film-reel::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.055);
}

.howto-film-reel::after {
    inset: 36px;
    border-color: rgba(255,183,62,.10);
}

.howto-film-reel-left {
    left: -35px !important;
    top: 19% !important;
}

.howto-film-reel-right {
    right: -35px !important;
    top: 68% !important;
    animation-delay: -4s;
}

@keyframes howtoFilmReelFloat {

    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-18px) rotate(18deg);
    }
}

/* =========================================================
   HAZ DE LUZ CINEMATOGRÁFICO
   ========================================================= */

.howto-film-light {
    position: absolute !important;

    width: 180px !important;
    height: 100% !important;

    left: -220px !important;
    top: 0 !important;

    transform: skewX(-14deg) !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            transparent
        );

    opacity: .5 !important;

    animation: howtoFilmLight 14s linear infinite;
}

@keyframes howtoFilmLight {

    0% {
        left: -220px;
    }

    100% {
        left: 110%;
    }
}

/* =========================================================
   CAPAS SUPERIORES
   ========================================================= */

.howto-heading,
.howto-grid {
    position: relative !important;
    z-index: 3 !important;
}

.howto-card {
    position: relative !important;
    z-index: 4 !important;
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 820px) {

    .howto-film-bg::before {
        width: 175% !important;
        height: 82px !important;
        left: -38% !important;
        opacity: .22 !important;
        transform: rotate(-10deg) !important;
    }

    .howto-film-bg::after {
        width: 175% !important;
        left: -38% !important;
        transform: rotate(-10deg) !important;
        opacity: .25 !important;
    }

    .howto-film-reel {
        width: 62px !important;
        height: 62px !important;
        opacity: .12 !important;
    }

    .howto-film-reel-left {
        left: -30px !important;
    }

    .howto-film-reel-right {
        right: -30px !important;
    }
}

/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

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

    .howto-film-bg::before,
    .howto-film-light,
    .howto-film-reel {
        animation: none !important;
    }
}


/* =========================================================
   CÓMO FUNCIONA 3.4 · FILM RECORRIENDO LOS 10 PASOS
   ========================================================= */

.howto-section {
    position: relative !important;
    overflow: hidden !important;
}

/* =========================================================
   TIRAS CINEMATOGRÁFICAS POR TODA LA SECCIÓN
   ========================================================= */

.howto-film-bg::before {
    content: "";
    position: absolute !important;

    left: -18% !important;
    top: 7% !important;

    width: 136% !important;
    height: 82px !important;

    transform: rotate(-8deg) !important;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 20px,
            rgba(255,255,255,.10) 20px 31px,
            transparent 31px 48px
        ) top / 100% 10px no-repeat,

        repeating-linear-gradient(
            90deg,
            transparent 0 20px,
            rgba(255,255,255,.10) 20px 31px,
            transparent 31px 48px
        ) bottom / 100% 10px no-repeat,

        linear-gradient(
            180deg,
            rgba(9,25,42,.65),
            rgba(15,35,55,.40),
            rgba(9,25,42,.65)
        );

    border-top: 1px solid rgba(50,145,255,.10);
    border-bottom: 1px solid rgba(50,145,255,.10);

    box-shadow:
        0 0 35px rgba(20,125,255,.035),
        inset 0 0 25px rgba(0,0,0,.35);

    opacity: .28 !important;

    animation: howtoFilmRun 24s ease-in-out infinite;
}

/* =========================================================
   SEGUNDA PASADA
   ========================================================= */

.howto-film-bg::after {
    content: "";
    position: absolute !important;

    left: -18% !important;
    top: 34% !important;

    width: 136% !important;
    height: 82px !important;

    transform: rotate(-8deg) !important;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 20px,
            rgba(255,255,255,.075) 20px 31px,
            transparent 31px 48px
        ) top / 100% 10px no-repeat,

        repeating-linear-gradient(
            90deg,
            transparent 0 20px,
            rgba(255,255,255,.075) 20px 31px,
            transparent 31px 48px
        ) bottom / 100% 10px no-repeat,

        linear-gradient(
            180deg,
            rgba(9,25,42,.52),
            rgba(15,35,55,.30),
            rgba(9,25,42,.52)
        );

    border-top: 1px solid rgba(50,145,255,.08);
    border-bottom: 1px solid rgba(50,145,255,.08);

    box-shadow:
        0 0 30px rgba(20,125,255,.03),
        inset 0 0 22px rgba(0,0,0,.30);

    opacity: .22 !important;

    animation: howtoFilmRunReverse 27s ease-in-out infinite;
}

/* =========================================================
   TERCERA Y CUARTA PASADA
   Se crean con sombras de la capa principal
   ========================================================= */

.howto-film-bg {
    --film-shift-1: 0px;
    --film-shift-2: 760px;
    --film-shift-3: 1520px;
}

.howto-film-bg::before {
    box-shadow:
        0 760px 0 rgba(9,25,42,.45),
        0 1520px 0 rgba(9,25,42,.38),
        0 2280px 0 rgba(9,25,42,.30),
        0 0 35px rgba(20,125,255,.035),
        inset 0 0 25px rgba(0,0,0,.35);
}

/* =========================================================
   LÍNEAS DE CONEXIÓN ENTRE LOS PASOS
   ========================================================= */

.howto-film-bg {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(39,145,255,.025) 25%,
            rgba(255,183,62,.025) 50%,
            rgba(39,145,255,.025) 75%,
            transparent 100%
        );
}

/* =========================================================
   MOVIMIENTO
   ========================================================= */

@keyframes howtoFilmRun {

    0%, 100% {
        margin-left: 0;
        margin-top: 0;
    }

    50% {
        margin-left: 18px;
        margin-top: -10px;
    }
}

@keyframes howtoFilmRunReverse {

    0%, 100% {
        margin-left: 15px;
        margin-top: 0;
    }

    50% {
        margin-left: -15px;
        margin-top: 12px;
    }
}

/* =========================================================
   CARRETES LATERALES MÁS VISIBLES
   ========================================================= */

.howto-film-reel-left {
    left: -38px !important;
    top: 11% !important;
}

.howto-film-reel-right {
    right: -38px !important;
    top: 83% !important;
}

/* =========================================================
   LAS TARJETAS SIGUEN SIENDO PROTAGONISTAS
   ========================================================= */

.howto-heading,
.howto-grid {
    position: relative !important;
    z-index: 5 !important;
}

.howto-card {
    position: relative !important;
    z-index: 6 !important;
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 820px) {

    .howto-film-bg::before,
    .howto-film-bg::after {
        width: 175% !important;
        left: -38% !important;
        height: 62px !important;
        opacity: .16 !important;
    }

    .howto-film-bg::before {
        top: 8% !important;
        box-shadow:
            0 650px 0 rgba(9,25,42,.30),
            0 1300px 0 rgba(9,25,42,.25),
            0 1950px 0 rgba(9,25,42,.20);
    }

    .howto-film-bg::after {
        top: 38% !important;
    }

    .howto-film-reel {
        opacity: .10 !important;
    }
}

/* =========================================================
   MENOS MOVIMIENTO
   ========================================================= */

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

    .howto-film-bg::before,
    .howto-film-bg::after,
    .howto-film-reel {
        animation: none !important;
    }
}


/* =========================================================
   CÓMO FUNCIONA 4.0 · FILM CINEMATOGRÁFICO GLOBAL
   4 recorridos para acompañar los 10 pasos
   ========================================================= */

.howto-film-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.howto-heading,
.howto-grid {
    position: relative !important;
    z-index: 5 !important;
}

/* TIRAS */

.howto-film-strip {
    position: absolute !important;
    left: -18% !important;
    width: 136% !important;
    height: 82px !important;

    transform: rotate(-10deg) !important;
    transform-origin: center !important;

    border-top: 1px solid rgba(90,170,255,.09);
    border-bottom: 1px solid rgba(90,170,255,.09);

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 16px,
            rgba(255,255,255,.075) 16px 27px,
            transparent 27px 43px
        ) top / 100% 10px no-repeat,

        repeating-linear-gradient(
            90deg,
            transparent 0 16px,
            rgba(255,255,255,.075) 16px 27px,
            transparent 27px 43px
        ) bottom / 100% 10px no-repeat,

        linear-gradient(
            180deg,
            rgba(9,25,42,.46),
            rgba(16,35,55,.32),
            rgba(9,25,42,.46)
        );

    box-shadow:
        inset 0 0 24px rgba(0,0,0,.25),
        0 0 30px rgba(30,125,255,.025);

    opacity: .24 !important;
}

/* PRIMER RECORRIDO */
.howto-film-strip-1 {
    top: 8% !important;
    animation: howtoFilmPass1 28s ease-in-out infinite;
}

/* SEGUNDO RECORRIDO */
.howto-film-strip-2 {
    top: 31% !important;
    opacity: .19 !important;
    animation: howtoFilmPass2 34s ease-in-out infinite;
}

/* TERCER RECORRIDO */
.howto-film-strip-3 {
    top: 56% !important;
    opacity: .22 !important;
    animation: howtoFilmPass3 31s ease-in-out infinite;
}

/* CUARTO RECORRIDO */
.howto-film-strip-4 {
    top: 80% !important;
    opacity: .17 !important;
    animation: howtoFilmPass4 37s ease-in-out infinite;
}

/* MOVIMIENTO SUAVE */

@keyframes howtoFilmPass1 {
    0%, 100% {
        translate: -1.5% 0;
    }

    50% {
        translate: 1.5% -7px;
    }
}

@keyframes howtoFilmPass2 {
    0%, 100% {
        translate: 1% 0;
    }

    50% {
        translate: -1% 8px;
    }
}

@keyframes howtoFilmPass3 {
    0%, 100% {
        translate: -1% 0;
    }

    50% {
        translate: 1% -9px;
    }
}

@keyframes howtoFilmPass4 {
    0%, 100% {
        translate: 1.2% 0;
    }

    50% {
        translate: -1.2% 7px;
    }
}

/* MÓVIL */

@media (max-width: 820px) {

    .howto-film-strip {
        width: 150% !important;
        left: -25% !important;
        height: 64px !important;
        opacity: .13 !important;
    }
}

/* MENOS MOVIMIENTO */

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

    .howto-film-strip {
        animation: none !important;
    }
}


/* =========================================================
   CÓMO FUNCIONA 4.1 · COBERTURA COMPLETA 1 → 10
   Refuerzo visual para pasos 7, 8, 9 y 10
   ========================================================= */

/* TIRA PARA PASOS 7 Y 8 */
.howto-film-strip-3 {
    top: 62% !important;
    height: 88px !important;
    opacity: .22 !important;
    transform: rotate(-10deg) !important;
}

/* TIRA PARA PASOS 9 Y 10 */
.howto-film-strip-4 {
    top: 84% !important;
    height: 88px !important;
    opacity: .20 !important;
    transform: rotate(-10deg) !important;
}

/* Una segunda pasada muy tenue en la zona final */
.howto-film-bg {
    isolation: isolate;
}

.howto-film-strip-3,
.howto-film-strip-4 {
    z-index: 1 !important;
}

/* Mantener siempre las tarjetas por encima */
.howto-card {
    position: relative !important;
    z-index: 5 !important;
}

@media (max-width: 820px) {

    .howto-film-strip-3 {
        top: 62% !important;
        height: 68px !important;
        opacity: .13 !important;
    }

    .howto-film-strip-4 {
        top: 84% !important;
        height: 68px !important;
        opacity: .12 !important;
    }
}


/* =========================================
   HERO · DISPONIBLE EXCLUSIVAMENTE EN TELEGRAM
   ========================================= */

.hero-telegram-note {
    color: #24b8ff;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .hero-telegram-note {
        white-space: normal;
    }
}


/* FAQ · ENLACE A LA COMUNIDAD */
.faq-answer a {
    color: #24b8ff;
    font-weight: 800;
    text-decoration: none;
    transition: color .25s ease, text-shadow .25s ease;
}

.faq-answer a:hover {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(36, 184, 255, .55);
}


/* FAQ · TELEGRAM DESTACADO */
.faq-telegram-highlight {
    color: #24b8ff;
    font-weight: 800;
}


/* FAQ · PRIORIDAD DE SUSCRIPCIONES */
.faq-priority-highlight {
    color: #24b8ff;
    font-weight: 800;
}


/* =========================================
   CANGUILES · PARALLAX SCROLL CINEMÁTICO
   ========================================= */

.lopides-scroll-popcorns {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.lopides-scroll-popcorn {
    position: absolute;
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: .16;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
    will-change: transform;
    transition: opacity .35s ease;
}

.lopides-scroll-popcorn:nth-child(1) {
    left: 7%;
    top: 18%;
}

.lopides-scroll-popcorn:nth-child(2) {
    left: 88%;
    top: 31%;
}

.lopides-scroll-popcorn:nth-child(3) {
    left: 13%;
    top: 57%;
}

.lopides-scroll-popcorn:nth-child(4) {
    left: 82%;
    top: 69%;
}

.lopides-scroll-popcorn:nth-child(5) {
    left: 47%;
    top: 84%;
}

.lopides-scroll-popcorn:nth-child(6) {
    left: 93%;
    top: 91%;
}

@media (max-width: 700px) {
    .lopides-scroll-popcorn {
        width: 48px;
        height: 48px;
        opacity: .10;
    }

    .lopides-scroll-popcorn:nth-child(2),
    .lopides-scroll-popcorn:nth-child(4),
    .lopides-scroll-popcorn:nth-child(6) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lopides-scroll-popcorn {
        transform: none !important;
    }
}


/* =========================================
   CANGUILES · DETRÁS DEL CONTENIDO
   ========================================= */

.catalog-section {
    position: relative;
    z-index: 2;
}

.catalog-section > * {
    position: relative;
    z-index: 2;
}

.lopides-scroll-popcorns {
    z-index: 1;
}


/* FAQ · COMANDO PARA CANJEAR CÓDIGOS */
.faq-code-highlight {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 3px;
    border: 1px solid rgba(36, 184, 255, .35);
    border-radius: 6px;
    background: rgba(36, 184, 255, .08);
    color: #24b8ff;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: .2px;
}


/* MENU MOVIL LO PIDES */
@media (max-width: 900px) {
    .site-header {
        position: relative;
    }

    .site-header .main-nav.menu-open {
        display: flex !important;
        position: absolute;
        top: calc(100% + 10px);
        right: 16px;
        left: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 12px;
        background: #101827;
        border: 1px solid rgba(36, 184, 255, .25);
        border-radius: 14px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, .45);
        z-index: 9999;
    }

    .site-header .main-nav.menu-open a {
        display: block;
        padding: 14px 12px;
        border-radius: 8px;
    }

    .site-header .main-nav.menu-open a:hover {
        background: rgba(36, 184, 255, .1);
    }
}