/* =========================================================
   COTNAS SORTEOS - CSS COMPLETO DE RECUPERACIÓN
   Ruta: /var/www/cotnas/sorteos/assets/css/sorteos.css
   Estilo retro Twitch / morado / 3D
========================================================= */

:root {
    --bg0: #07000f;
    --bg1: #110020;
    --bg2: #21003c;
    --card: rgba(18, 6, 38, 0.88);
    --card2: rgba(35, 12, 65, 0.78);
    --twitch: #9146ff;
    --twitch2: #b66cff;
    --purple: #6d28d9;
    --pink: #ff3df2;
    --cyan: #32f6ff;
    --green: #4cff97;
    --gold: #ffd166;
    --text: #ffffff;
    --muted: rgba(255,255,255,.72);
    --muted2: rgba(255,255,255,.54);
    --border: rgba(183, 96, 255, .32);
    --border2: rgba(255,255,255,.12);
    --shadow-purple: 0 0 45px rgba(145,70,255,.25);
    --shadow-cyan: 0 0 34px rgba(50,246,255,.18);
    --max: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg0);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:
        radial-gradient(circle at 18% 10%, rgba(145,70,255,.34), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(255,61,242,.18), transparent 28%),
        linear-gradient(135deg, #08000f 0%, #16002b 42%, #08000f 100%);
    overflow-x: hidden;
}

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

a:hover {
    color: var(--cyan);
}

img {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

.retro-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
}

.retro-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(145,70,255,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(145,70,255,.09) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.12));
}

.retro-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .45;
}

.retro-glow-one {
    left: -120px;
    top: 70px;
    background: rgba(145,70,255,.45);
}

.retro-glow-two {
    right: -140px;
    top: 280px;
    background: rgba(255,61,242,.25);
}

.sorteos-header {
    width: min(var(--max), calc(100% - 32px));
    min-height: 86px;
    margin: 32px auto 26px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 26px;
    background: rgba(10, 1, 24, .78);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-purple), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
}

.sorteos-brand,
.brand-link {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, #bb5cff, var(--twitch));
    box-shadow: 0 0 30px rgba(145,70,255,.48);
    color: white;
    font-weight: 1000;
}

.sorteos-brand strong {
    display: block;
    color: white;
    font-size: 17px;
    letter-spacing: .18em;
    font-weight: 1000;
}

.sorteos-brand small {
    display: block;
    color: var(--muted2);
    margin-top: 3px;
    font-size: 13px;
}

.sorteos-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-link {
    padding: 12px 16px;
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    background: rgba(255,255,255,.055);
    border: 1px solid var(--border2);
}

.nav-link:hover {
    color: white;
    border-color: rgba(145,70,255,.65);
    box-shadow: 0 0 22px rgba(145,70,255,.22);
}

.sorteos-main {
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto 70px;
}

.hero,
.hero-twitch,
.sorteo-hero,
.streamer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 44px;
    align-items: center;
    min-height: 410px;
    margin: 34px 0;
    padding: 42px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top left, rgba(50,246,255,.12), transparent 30%),
        linear-gradient(145deg, rgba(145,70,255,.19), rgba(255,61,242,.06)),
        rgba(9,0,24,.86);
    border: 1px solid var(--border);
    box-shadow: 0 30px 90px rgba(0,0,0,.42), var(--shadow-purple);
}

.hero-title,
.hero h1,
.hero-twitch h1,
.sorteo-hero h1,
.content-card h1,
.reward-private-card h1,
.admin-detail-hero h1,
.admin-edit-card h1,
.admin-page-title h1,
.sorteos-page-title h1 {
    margin: 12px 0 20px;
    font-size: clamp(42px, 6vw, 82px);
    line-height: .96;
    letter-spacing: -.06em;
    color: white;
    text-shadow: 0 8px 0 rgba(98,54,178,.55), 0 0 25px rgba(255,255,255,.09);
}

.kicker,
.section-kicker,
.section-title span,
.admin-detail-hero .kicker,
.admin-result-card .kicker,
.admin-edit-card .kicker,
.admin-page-title .kicker,
.sorteos-page-title .kicker {
    display: inline-flex;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(50,246,255,.5);
}

.hero-text,
.page-subtitle,
.hero p,
.content-card p,
.reward-private-card p,
.admin-detail-description {
    color: var(--muted);
    line-height: 1.65;
    font-size: 16px;
}

.hero-actions,
.admin-detail-actions,
.form-actions,
.admin-form-actions,
.edit-actions,
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.btn,
button.btn,
input[type="submit"].btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    cursor: pointer;
    color: white;
    background: rgba(255,255,255,.08);
    font-weight: 950;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.btn:hover {
    transform: translateY(-2px);
    color: white;
    border-color: rgba(145,70,255,.72);
    box-shadow: 0 0 28px rgba(145,70,255,.28);
}

.btn-twitch,
.btn-primary {
    background: linear-gradient(135deg, var(--twitch), var(--twitch2));
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 0 34px rgba(145,70,255,.34);
}

.btn-secondary {
    background: rgba(255,255,255,.08);
}

.btn-danger {
    background: linear-gradient(135deg, #ff3b6b, #b3003b);
}

.btn-success {
    background: linear-gradient(135deg, var(--green), #15b969);
    color: #050b08;
}

.btn-disabled,
.btn:disabled,
button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.btn-small {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
}

.slot-machine,
.winner-machine,
.retro-machine {
    position: relative;
    padding: 28px;
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(23,4,48,.8);
    border: 1px solid rgba(184,102,255,.36);
    box-shadow: 0 30px 80px rgba(0,0,0,.42), var(--shadow-purple);
    transform: perspective(900px) rotateY(-5deg) rotateX(3deg);
}

.slot-window,
.winner-window,
.machine-window {
    min-height: 190px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, #140020, #050009);
    border: 1px solid rgba(145,70,255,.45);
    box-shadow: inset 0 0 40px rgba(0,0,0,.65);
}

.slot-label {
    color: var(--gold);
    font-size: 12px;
    letter-spacing: .34em;
    text-transform: uppercase;
    font-weight: 1000;
}

.winner-name,
.slot-name,
.machine-name {
    width: min(420px, 90%);
    padding: 18px;
    text-align: center;
    border-radius: 18px;
    color: white;
    background: linear-gradient(135deg, #ffd166, #ff9300);
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 1000;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 0 36px rgba(255,163,26,.55);
    text-shadow: 0 0 12px rgba(255,255,255,.8);
}

.machine-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.machine-dots span,
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff4fd8;
    box-shadow: 0 0 16px currentColor;
}

.machine-dots span:nth-child(2),
.dot:nth-child(2) {
    background: #ffe66d;
}

.machine-dots span:nth-child(3),
.dot:nth-child(3) {
    background: #5dff85;
}

.content-card,
.reward-private-card,
.admin-detail-hero,
.admin-result-card,
.admin-participants-box,
.admin-edit-card,
.admin-form-card,
.sorteo-detail-card,
.card,
.panel,
.dashboard-card {
    width: min(var(--max), calc(100% - 32px));
    margin: 28px auto;
    padding: 30px;
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(145,70,255,.16), rgba(255,61,242,.055)),
        rgba(15,4,34,.88);
    border: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(0,0,0,.42), var(--shadow-purple);
    backdrop-filter: blur(18px);
}

.section-title {
    margin: 0 0 24px;
}

.section-title h1,
.section-title h2 {
    margin-top: 8px;
}

.card-grid,
.giveaways-grid,
.sorteos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.giveaway-card,
.sorteo-card {
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,.055);
    border: 1px solid var(--border2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.giveaway-card h3,
.sorteo-card h3 {
    margin: 0 0 12px;
    font-size: 24px;
}

.admin-table,
.table-wrap table,
table.sorteos-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 18px;
}

.table-wrap {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--border2);
}

.admin-table th,
.admin-table td,
table.sorteos-table th,
table.sorteos-table td,
.table-wrap th,
.table-wrap td {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
}

.admin-table th,
table.sorteos-table th,
.table-wrap th {
    color: #eadcff;
    background: rgba(145,70,255,.2);
    font-weight: 1000;
}

.admin-table td,
table.sorteos-table td,
.table-wrap td {
    color: white;
}

.admin-detail-table,
.sorteo-info-card,
.info-table {
    margin-top: 22px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.1);
}

.admin-detail-row,
.sorteo-info-row,
.info-row {
    display: grid;
    grid-template-columns: 230px 1fr;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.admin-detail-row:last-child,
.sorteo-info-row:last-child,
.info-row:last-child {
    border-bottom: 0;
}

.admin-detail-row strong,
.sorteo-info-row strong,
.info-row strong {
    padding: 16px;
    color: #eadcff;
    background: rgba(145,70,255,.14);
    font-weight: 950;
}

.admin-detail-row span,
.sorteo-info-row span,
.info-row span {
    padding: 16px;
    color: var(--text);
    word-break: break-word;
}

.admin-share-box {
    margin: 20px 0 24px;
    padding: 18px;
    border-radius: 20px;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.12);
}

.admin-share-box strong {
    display: block;
    margin-bottom: 10px;
    color: #ffe3a3;
    font-weight: 950;
}

.admin-share-url {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    color: var(--green);
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(61,255,156,.18);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 800;
    overflow-x: auto;
    white-space: nowrap;
}

.admin-reward-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin: 10px 0 16px;
    padding: 9px 13px;
    border-radius: 999px;
    color: #fff1c0;
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.28);
    font-weight: 850;
}

.admin-winner-box {
    margin-top: 16px;
    padding: 20px;
    border-radius: 20px;
    background: rgba(61,255,156,.1);
    border: 1px solid rgba(61,255,156,.28);
}

.admin-winner-name {
    display: block;
    margin-top: 6px;
    color: #baffd9;
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 950;
    text-shadow: 0 0 24px rgba(61,255,156,.34);
}

.admin-form,
.sorteos-form,
.edit-form,
form.admin-form,
form.sorteos-form,
form.edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.form-group,
.form-row,
.admin-form .form-row,
.edit-form .form-row {
    display: grid;
    gap: 8px;
}

.form-group.full,
.form-row.full,
.admin-form .full,
.edit-form .full {
    grid-column: 1 / -1;
}

.form-group label,
.form-row label,
.admin-form label,
.edit-form label {
    color: #eadcff;
    font-weight: 850;
}

.form-group input,
.form-group textarea,
.form-group select,
.form-row input,
.form-row textarea,
.form-row select,
.admin-form input,
.admin-form textarea,
.admin-form select,
.edit-form input,
.edit-form textarea,
.edit-form select {
    width: 100%;
    min-height: 48px;
    padding: 13px 14px;
    color: white;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    outline: none;
}

.form-group textarea,
.form-row textarea,
.admin-form textarea,
.edit-form textarea {
    min-height: 118px;
    resize: vertical;
    line-height: 1.5;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.edit-form input:focus,
.edit-form textarea:focus,
.edit-form select:focus {
    border-color: rgba(145,70,255,.75);
    box-shadow: 0 0 0 4px rgba(145,70,255,.16);
}

.form-group select option,
.form-row select option,
.admin-form select option,
.edit-form select option {
    color: white;
    background: #17002b;
}

.form-help,
.help-text {
    color: var(--muted2);
    font-size: 13px;
    line-height: 1.5;
}

.reward-secret-box {
    margin-top: 26px;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.14);
}

.reward-secret-box label {
    display: block;
    margin-bottom: 12px;
    color: #ffdf7e;
    font-weight: 900;
}

.reward-key-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.reward-key-wrap input {
    flex: 1;
    min-width: 260px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(180,90,255,.45);
    background: rgba(0,0,0,.45);
    color: var(--green);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
    outline: none;
}

.reward-help {
    margin-top: 14px;
    color: rgba(255,255,255,.72);
}

.inline-form {
    display: inline-block;
}

.alert-card,
.alert,
.error-card,
.error-box {
    width: min(var(--max), calc(100% - 32px));
    margin: 24px auto;
    padding: 18px;
    border-radius: 18px;
    line-height: 1.5;
    border: 1px solid var(--border2);
    background: rgba(255,255,255,.06);
}

.alert-error,
.error-card,
.error-box {
    color: #ffd1da;
    background: rgba(255,75,110,.1);
    border-color: rgba(255,75,110,.3);
}

.alert-success {
    color: #baffd9;
    background: rgba(61,255,156,.1);
    border-color: rgba(61,255,156,.3);
}

.alert-warning {
    color: #ffe3a3;
    background: rgba(255,209,102,.1);
    border-color: rgba(255,209,102,.3);
}

.error-card code,
.error-box code,
.content-card code {
    display: block;
    margin: 16px 0;
    padding: 15px;
    border-radius: 14px;
    color: white;
    background: rgba(0,0,0,.35);
    overflow-x: auto;
    white-space: pre-wrap;
}

.sorteos-footer {
    width: min(var(--max), calc(100% - 32px));
    margin: 40px auto 24px;
    padding: 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: var(--muted2);
}

.sorteos-footer strong {
    color: white;
    margin-right: 12px;
}

@media (max-width: 920px) {
    .hero,
    .hero-twitch,
    .sorteo-hero,
    .streamer-hero {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .slot-machine,
    .winner-machine,
    .retro-machine {
        transform: none;
    }
}

@media (max-width: 760px) {
    .sorteos-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sorteos-nav {
        justify-content: flex-start;
    }

    .content-card,
    .reward-private-card,
    .admin-detail-hero,
    .admin-result-card,
    .admin-participants-box,
    .admin-edit-card,
    .admin-form-card,
    .sorteo-detail-card,
    .card,
    .panel,
    .dashboard-card,
    .hero,
    .hero-twitch,
    .sorteo-hero,
    .streamer-hero {
        width: min(100% - 22px, var(--max));
        padding: 22px;
        border-radius: 22px;
    }

    .admin-form,
    .sorteos-form,
    .edit-form,
    form.admin-form,
    form.sorteos-form,
    form.edit-form {
        grid-template-columns: 1fr;
    }

    .admin-detail-row,
    .sorteo-info-row,
    .info-row {
        grid-template-columns: 1fr;
    }

    .admin-detail-row strong,
    .sorteo-info-row strong,
    .info-row strong {
        padding-bottom: 6px;
    }

    .admin-detail-row span,
    .sorteo-info-row span,
    .info-row span {
        padding-top: 6px;
    }

    .hero-actions,
    .admin-detail-actions,
    .form-actions,
    .admin-form-actions,
    .edit-actions,
    .card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn,
    .admin-detail-actions .btn,
    .form-actions .btn,
    .admin-form-actions .btn,
    .edit-actions .btn,
    .card-actions .btn,
    .reward-key-wrap .btn {
        width: 100%;
    }

    .reward-key-wrap input {
        width: 100%;
        min-width: 0;
    }

    .hero-title,
    .hero h1,
    .hero-twitch h1,
    .sorteo-hero h1,
    .content-card h1,
    .reward-private-card h1,
    .admin-detail-hero h1,
    .admin-edit-card h1 {
        font-size: clamp(34px, 12vw, 54px);
    }
}
/* =========================================================
   COTNAS SORTEOS - MEJORA BLOQUE "ACTIVOS Y RECIENTES"
   Añadir al final de /var/www/cotnas/sorteos/assets/css/sorteos.css
========================================================= */

.sorteos-section,
.giveaways-section,
.recent-section {
    width: min(var(--max), calc(100% - 32px));
    margin: 42px auto 70px;
}

.sorteos-section .section-title,
.giveaways-section .section-title,
.recent-section .section-title {
    margin-bottom: 24px;
}

.sorteos-section .section-title h2,
.giveaways-section .section-title h2,
.recent-section .section-title h2 {
    margin: 10px 0 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1;
    letter-spacing: -0.045em;
    text-shadow: 0 5px 0 rgba(98, 54, 178, 0.45);
}

.giveaways-grid,
.sorteos-grid,
.recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 22px;
}

.giveaway-card,
.sorteo-card,
.recent-giveaway-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(145, 70, 255, 0.24), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(18, 6, 38, 0.88);
    border: 1px solid rgba(183, 96, 255, 0.28);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.giveaway-card::before,
.sorteo-card::before,
.recent-giveaway-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.giveaway-card:hover,
.sorteo-card:hover,
.recent-giveaway-card:hover {
    transform: translateY(-4px);
    border-color: rgba(145, 70, 255, 0.72);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        0 0 40px rgba(145, 70, 255, 0.24);
}

.giveaway-card:hover::before,
.sorteo-card:hover::before,
.recent-giveaway-card:hover::before {
    transform: translateX(120%);
}

.giveaway-status,
.sorteo-status,
.card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #d9c8ff;
    background: rgba(145, 70, 255, 0.15);
    border: 1px solid rgba(145, 70, 255, 0.28);
    font-size: 13px;
    font-weight: 900;
}

.giveaway-status.status-open,
.sorteo-status.status-open,
.card-status.status-open {
    color: #baffd9;
    background: rgba(61, 255, 156, 0.1);
    border-color: rgba(61, 255, 156, 0.28);
}

.giveaway-status.status-drawn,
.sorteo-status.status-drawn,
.card-status.status-drawn {
    color: #ffe6a8;
    background: rgba(255, 209, 102, 0.11);
    border-color: rgba(255, 209, 102, 0.3);
}

.giveaway-card h3,
.sorteo-card h3,
.recent-giveaway-card h3 {
    margin: 8px 0 10px;
    font-size: clamp(23px, 3vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: white;
}

.giveaway-card p,
.sorteo-card p,
.recent-giveaway-card p {
    margin: 10px 0;
    color: rgba(255,255,255,0.74);
    line-height: 1.55;
}

.giveaway-reward,
.sorteo-reward,
.card-reward {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 9px 12px;
    border-radius: 999px;
    color: #fff1c0;
    background: rgba(255, 209, 102, 0.12);
    border: 1px solid rgba(255, 209, 102, 0.28);
    font-weight: 900;
}

.giveaway-meta,
.sorteo-meta,
.card-meta {
    display: grid;
    gap: 8px;
    margin: 16px 0 18px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255,255,255,0.08);
}

.giveaway-meta-row,
.sorteo-meta-row,
.card-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: rgba(255,255,255,0.74);
    font-size: 14px;
}

.giveaway-meta-row strong,
.sorteo-meta-row strong,
.card-meta-row strong {
    color: #eadcff;
}

.giveaway-winner,
.sorteo-winner,
.card-winner {
    margin-top: 14px;
    padding: 15px;
    border-radius: 18px;
    color: #baffd9;
    background: rgba(61, 255, 156, 0.1);
    border: 1px solid rgba(61, 255, 156, 0.24);
    font-weight: 900;
}

.giveaway-card .btn,
.sorteo-card .btn,
.recent-giveaway-card .btn {
    margin-top: 12px;
}

.empty-state,
.no-giveaways,
.no-sorteos {
    padding: 34px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(145, 70, 255, 0.15), rgba(255, 61, 242, 0.05)),
        rgba(15, 4, 34, 0.78);
    border: 1px solid rgba(183, 96, 255, 0.26);
    color: rgba(255,255,255,0.74);
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}

.empty-state h3,
.no-giveaways h3,
.no-sorteos h3 {
    margin: 0 0 12px;
    color: white;
    font-size: 26px;
}

@media (max-width: 760px) {
    .sorteos-section,
    .giveaways-section,
    .recent-section {
        width: min(100% - 22px, var(--max));
        margin-top: 32px;
    }

    .giveaways-grid,
    .sorteos-grid,
    .recent-grid {
        grid-template-columns: 1fr;
    }

    .giveaway-card,
    .sorteo-card,
    .recent-giveaway-card {
        padding: 22px;
        border-radius: 22px;
    }

    .giveaway-meta-row,
    .sorteo-meta-row,
    .card-meta-row {
        flex-direction: column;
        gap: 3px;
    }
}


/* =========================================================
   COTNAS SORTEOS - MEJORA FORZADA "ACTIVOS Y RECIENTES"
   Añadir AL FINAL de /var/www/cotnas/sorteos/assets/css/sorteos.css
   Esta versión usa selectores amplios + !important porque algunas páginas
   no usan las clases esperadas.
========================================================= */

/* Bloque general de la zona inferior/listados */
.sorteos-main section,
.sorteos-main .sorteos-section,
.sorteos-main .giveaways-section,
.sorteos-main .recent-section,
main section,
main .sorteos-section,
main .giveaways-section,
main .recent-section {
    width: min(var(--max, 1180px), calc(100% - 32px)) !important;
    margin: 46px auto 72px !important;
}

/* Título de sección */
.sorteos-main section > .kicker,
.sorteos-main section > span:first-child,
.sorteos-main .section-title span,
main section > .kicker,
main .section-title span {
    display: inline-flex !important;
    color: var(--cyan, #32f6ff) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 16px rgba(50,246,255,.55) !important;
}

.sorteos-main section h2,
.sorteos-main .section-title h2,
main section h2,
main .section-title h2 {
    margin: 12px 0 26px !important;
    font-size: clamp(30px, 4vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
    color: #fff !important;
    text-shadow: 0 5px 0 rgba(98,54,178,.45), 0 0 22px rgba(145,70,255,.22) !important;
}

/* Grid/lista de sorteos */
.giveaways-grid,
.sorteos-grid,
.recent-grid,
.sorteos-list,
.giveaway-list,
.sorteos-main section > div:not(.section-title),
main section > div:not(.section-title) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 22px !important;
}

/* Tarjetas de sorteos: cubre muchas clases posibles y articles/cards genéricas */
.giveaway-card,
.sorteo-card,
.recent-giveaway-card,
.sorteos-list > *,
.giveaway-list > *,
.sorteos-grid > *,
.giveaways-grid > *,
.recent-grid > *,
.sorteos-main section article,
.sorteos-main section .card,
main section article,
main section .card {
    position: relative !important;
    overflow: hidden !important;
    padding: 28px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at top right, rgba(145,70,255,.30), transparent 34%),
        radial-gradient(circle at bottom left, rgba(50,246,255,.10), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)),
        rgba(18,6,38,.91) !important;
    border: 1px solid rgba(183,96,255,.36) !important;
    box-shadow:
        0 26px 66px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.09),
        0 0 34px rgba(145,70,255,.14) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* Evita que afecte a formularios internos raros */
.sorteos-main section form,
main section form {
    display: block !important;
}

/* Brillo animado de tarjeta */
.giveaway-card::before,
.sorteo-card::before,
.recent-giveaway-card::before,
.sorteos-list > *::before,
.giveaway-list > *::before,
.sorteos-grid > *::before,
.giveaways-grid > *::before,
.recent-grid > *::before,
.sorteos-main section article::before,
.sorteos-main section .card::before,
main section article::before,
main section .card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent) !important;
    transform: translateX(-130%) !important;
    transition: transform .55s ease !important;
}

.giveaway-card:hover,
.sorteo-card:hover,
.recent-giveaway-card:hover,
.sorteos-list > *:hover,
.giveaway-list > *:hover,
.sorteos-grid > *:hover,
.giveaways-grid > *:hover,
.recent-grid > *:hover,
.sorteos-main section article:hover,
.sorteos-main section .card:hover,
main section article:hover,
main section .card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(145,70,255,.78) !important;
    box-shadow:
        0 34px 86px rgba(0,0,0,.45),
        0 0 46px rgba(145,70,255,.25) !important;
}

.giveaway-card:hover::before,
.sorteo-card:hover::before,
.recent-giveaway-card:hover::before,
.sorteos-list > *:hover::before,
.giveaway-list > *:hover::before,
.sorteos-grid > *:hover::before,
.giveaways-grid > *:hover::before,
.recent-grid > *:hover::before,
.sorteos-main section article:hover::before,
.sorteos-main section .card:hover::before,
main section article:hover::before,
main section .card:hover::before {
    transform: translateX(130%) !important;
}

/* Texto dentro de tarjetas */
.giveaway-card h3,
.sorteo-card h3,
.recent-giveaway-card h3,
.sorteos-list h3,
.giveaway-list h3,
.sorteos-grid h3,
.giveaways-grid h3,
.recent-grid h3,
.sorteos-main section article h3,
.sorteos-main section .card h3,
main section article h3,
main section .card h3 {
    margin: 10px 0 12px !important;
    color: #fff !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    text-shadow: 0 4px 0 rgba(98,54,178,.34) !important;
}

.giveaway-card p,
.sorteo-card p,
.recent-giveaway-card p,
.sorteos-list p,
.giveaway-list p,
.sorteos-grid p,
.giveaways-grid p,
.recent-grid p,
.sorteos-main section article p,
.sorteos-main section .card p,
main section article p,
main section .card p {
    color: rgba(255,255,255,.78) !important;
    line-height: 1.58 !important;
}

/* Botones dentro de las tarjetas */
.giveaway-card .btn,
.sorteo-card .btn,
.recent-giveaway-card .btn,
.sorteos-list .btn,
.giveaway-list .btn,
.sorteos-grid .btn,
.giveaways-grid .btn,
.recent-grid .btn,
.sorteos-main section article .btn,
.sorteos-main section .card .btn,
main section article .btn,
main section .card .btn,
.sorteos-main section article a[href*="recompensa"],
.sorteos-main section .card a[href*="recompensa"],
main section article a[href*="recompensa"],
main section .card a[href*="recompensa"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin-top: 14px !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    color: #06160d !important;
    background: linear-gradient(135deg, var(--green, #4cff97), #15b969) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 0 30px rgba(61,255,156,.22) !important;
    text-decoration: none !important;
}

/* Estado/ganador/premio aunque estén como texto simple */
.giveaway-card strong,
.sorteo-card strong,
.recent-giveaway-card strong,
.sorteos-list strong,
.giveaway-list strong,
.sorteos-grid strong,
.giveaways-grid strong,
.recent-grid strong,
.sorteos-main section article strong,
.sorteos-main section .card strong,
main section article strong,
main section .card strong {
    color: #fff !important;
}

.sorteos-main section article:has(a[href*="recompensa"]),
.sorteos-main section .card:has(a[href*="recompensa"]),
main section article:has(a[href*="recompensa"]),
main section .card:has(a[href*="recompensa"]) {
    border-color: rgba(61,255,156,.38) !important;
}

/* Separadores */
.sorteos-main hr,
main hr {
    border: 0 !important;
    height: 1px !important;
    margin: 42px auto !important;
    width: min(var(--max, 1180px), calc(100% - 32px)) !important;
    background: linear-gradient(90deg, transparent, rgba(145,70,255,.35), transparent) !important;
}

@media (max-width: 760px) {
    .giveaways-grid,
    .sorteos-grid,
    .recent-grid,
    .sorteos-list,
    .giveaway-list,
    .sorteos-main section > div:not(.section-title),
    main section > div:not(.section-title) {
        grid-template-columns: 1fr !important;
    }

    .giveaway-card,
    .sorteo-card,
    .recent-giveaway-card,
    .sorteos-list > *,
    .giveaway-list > *,
    .sorteos-grid > *,
    .giveaways-grid > *,
    .recent-grid > *,
    .sorteos-main section article,
    .sorteos-main section .card,
    main section article,
    main section .card {
        padding: 22px !important;
        border-radius: 22px !important;
    }
}


/* =========================================================
   COTNAS SORTEOS - MEJORA CUADRADOS + LETRA PRO
   Añadido al final. No elimina tu CSS base.
========================================================= */

body,
button,
input,
select,
textarea {
    font-family: "Inter", "Montserrat", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1,
h2,
h3,
h4,
.hero-title,
.winner-name,
.slot-name,
.machine-name,
.sorteos-brand strong,
.btn,
.nav-link,
.kicker,
.section-kicker {
    font-family: "Inter", "Montserrat", "Arial Black", "Segoe UI", system-ui, sans-serif !important;
    font-weight: 950 !important;
}

h1,
.hero-title,
.hero h1,
.hero-twitch h1,
.sorteo-hero h1 {
    letter-spacing: -0.065em !important;
}

h2 {
    letter-spacing: -0.045em !important;
}

/* Bloque de sorteos activos */
.sorteos-section,
.giveaways-section,
.recent-section,
.sorteos-main section,
main section {
    width: min(var(--max, 1180px), calc(100% - 32px)) !important;
    margin: 52px auto 76px !important;
}

.sorteos-section .section-title,
.giveaways-section .section-title,
.recent-section .section-title,
.sorteos-main section .section-title,
main section .section-title {
    text-align: left !important;
    margin-bottom: 28px !important;
}

.sorteos-section .section-title h2,
.giveaways-section .section-title h2,
.recent-section .section-title h2,
.sorteos-main section h2,
main section h2 {
    display: inline-block !important;
    margin: 12px 0 0 !important;
    color: #fff !important;
    font-size: clamp(34px, 4vw, 56px) !important;
    line-height: .95 !important;
    text-shadow: 0 5px 0 rgba(98,54,178,.58), 0 0 26px rgba(145,70,255,.25) !important;
}

/* Grid de cuadrados */
.giveaways-grid,
.sorteos-grid,
.recent-grid,
.sorteos-list,
.giveaway-list,
.sorteos-main section > div:not(.section-title),
main section > div:not(.section-title) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* Tarjetas cuadradas */
.giveaway-card,
.sorteo-card,
.recent-giveaway-card,
.sorteos-list > *,
.giveaway-list > *,
.sorteos-grid > *,
.giveaways-grid > *,
.recent-grid > *,
.sorteos-main section article,
.sorteos-main section .card,
main section article,
main section .card {
    aspect-ratio: 1 / 1 !important;
    min-height: 275px !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 24px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
        radial-gradient(circle at 18% 12%, rgba(50,246,255,.20), transparent 28%),
        radial-gradient(circle at 82% 14%, rgba(255,61,242,.18), transparent 30%),
        radial-gradient(circle at 50% 115%, rgba(145,70,255,.44), transparent 44%),
        rgba(17,3,38,.94) !important;
    border: 1px solid rgba(183,96,255,.42) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12), 0 0 38px rgba(145,70,255,.17) !important;
    transform-style: preserve-3d !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}

/* Marco interior */
.giveaway-card::after,
.sorteo-card::after,
.recent-giveaway-card::after,
.sorteos-list > *::after,
.giveaway-list > *::after,
.sorteos-grid > *::after,
.giveaways-grid > *::after,
.recent-grid > *::after,
.sorteos-main section article::after,
.sorteos-main section .card::after,
main section article::after,
main section .card::after {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    pointer-events: none !important;
}

/* Brillo diagonal */
.giveaway-card::before,
.sorteo-card::before,
.recent-giveaway-card::before,
.sorteos-list > *::before,
.giveaway-list > *::before,
.sorteos-grid > *::before,
.giveaways-grid > *::before,
.recent-grid > *::before,
.sorteos-main section article::before,
.sorteos-main section .card::before,
main section article::before,
main section .card::before {
    content: "" !important;
    position: absolute !important;
    top: -30% !important;
    left: -65% !important;
    width: 55% !important;
    height: 160% !important;
    transform: rotate(18deg) !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) !important;
    opacity: .7 !important;
    transition: left .65s ease !important;
    pointer-events: none !important;
}

.giveaway-card:hover,
.sorteo-card:hover,
.recent-giveaway-card:hover,
.sorteos-list > *:hover,
.giveaway-list > *:hover,
.sorteos-grid > *:hover,
.giveaways-grid > *:hover,
.recent-grid > *:hover,
.sorteos-main section article:hover,
.sorteos-main section .card:hover,
main section article:hover,
main section .card:hover {
    transform: translateY(-7px) perspective(700px) rotateX(2deg) rotateY(-2deg) !important;
    border-color: rgba(50,246,255,.55) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.52), 0 0 42px rgba(145,70,255,.30), 0 0 26px rgba(50,246,255,.14) !important;
}

.giveaway-card:hover::before,
.sorteo-card:hover::before,
.recent-giveaway-card:hover::before,
.sorteos-list > *:hover::before,
.giveaway-list > *:hover::before,
.sorteos-grid > *:hover::before,
.giveaways-grid > *:hover::before,
.recent-grid > *:hover::before,
.sorteos-main section article:hover::before,
.sorteos-main section .card:hover::before,
main section article:hover::before,
main section .card:hover::before {
    left: 120% !important;
}

/* Texto de tarjetas */
.giveaway-card h3,
.sorteo-card h3,
.recent-giveaway-card h3,
.sorteos-list h3,
.giveaway-list h3,
.sorteos-grid h3,
.giveaways-grid h3,
.recent-grid h3,
.sorteos-main section article h3,
.sorteos-main section .card h3,
main section article h3,
main section .card h3 {
    position: relative !important;
    z-index: 2 !important;
    margin: 12px 0 10px !important;
    color: #fff !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
    text-shadow: 0 4px 0 rgba(98,54,178,.58), 0 0 22px rgba(255,255,255,.13) !important;
}

.giveaway-card p,
.sorteo-card p,
.recent-giveaway-card p,
.sorteos-list p,
.giveaway-list p,
.sorteos-grid p,
.giveaways-grid p,
.recent-grid p,
.sorteos-main section article p,
.sorteos-main section .card p,
main section article p,
main section .card p {
    position: relative !important;
    z-index: 2 !important;
    margin: 7px 0 !important;
    color: rgba(255,255,255,.78) !important;
    line-height: 1.38 !important;
    font-size: 15px !important;
}

.giveaway-card strong,
.sorteo-card strong,
.recent-giveaway-card strong,
.sorteos-list strong,
.giveaway-list strong,
.sorteos-grid strong,
.giveaways-grid strong,
.recent-grid strong,
.sorteos-main section article strong,
.sorteos-main section .card strong,
main section article strong,
main section .card strong {
    color: #ffffff !important;
    font-weight: 1000 !important;
    text-shadow: 0 0 12px rgba(145,70,255,.22) !important;
}

/* Botones de tarjeta */
.giveaway-card .btn,
.sorteo-card .btn,
.recent-giveaway-card .btn,
.sorteos-list .btn,
.giveaway-list .btn,
.sorteos-grid .btn,
.giveaways-grid .btn,
.recent-grid .btn,
.sorteos-main section article .btn,
.sorteos-main section .card .btn,
main section article .btn,
main section .card .btn,
.sorteos-main section article a[href*="sorteo"],
.sorteos-main section .card a[href*="sorteo"],
.sorteos-main section article a[href*="recompensa"],
.sorteos-main section .card a[href*="recompensa"],
main section article a[href*="sorteo"],
main section .card a[href*="sorteo"],
main section article a[href*="recompensa"],
main section .card a[href*="recompensa"] {
    position: relative !important;
    z-index: 2 !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin-top: 12px !important;
    padding: 11px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    color: #06160d !important;
    background: linear-gradient(135deg, var(--green, #4cff97), #13ca73) !important;
    font-weight: 1000 !important;
    text-decoration: none !important;
    box-shadow: 0 0 28px rgba(76,255,151,.24) !important;
}

/* Tarjeta con recompensa */
.sorteos-main section article:has(a[href*="recompensa"]),
.sorteos-main section .card:has(a[href*="recompensa"]),
main section article:has(a[href*="recompensa"]),
main section .card:has(a[href*="recompensa"]) {
    border-color: rgba(76,255,151,.48) !important;
    background:
        linear-gradient(145deg, rgba(76,255,151,.10), rgba(255,255,255,.025)),
        radial-gradient(circle at 15% 15%, rgba(50,246,255,.18), transparent 30%),
        radial-gradient(circle at 80% 15%, rgba(145,70,255,.32), transparent 34%),
        rgba(14,8,34,.95) !important;
}

/* No deformar bloques grandes */
.hero,
.hero-twitch,
.sorteo-hero,
.streamer-hero,
.content-card,
.reward-private-card,
.admin-detail-hero,
.admin-result-card,
.admin-participants-box,
.admin-edit-card,
.admin-form-card,
.sorteo-detail-card,
.panel,
.dashboard-card {
    aspect-ratio: auto !important;
}

@media (max-width: 900px) {
    .giveaways-grid,
    .sorteos-grid,
    .recent-grid,
    .sorteos-list,
    .giveaway-list,
    .sorteos-main section > div:not(.section-title),
    main section > div:not(.section-title) {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .giveaways-grid,
    .sorteos-grid,
    .recent-grid,
    .sorteos-list,
    .giveaway-list,
    .sorteos-main section > div:not(.section-title),
    main section > div:not(.section-title) {
        grid-template-columns: 1fr !important;
    }

    .giveaway-card,
    .sorteo-card,
    .recent-giveaway-card,
    .sorteos-list > *,
    .giveaway-list > *,
    .sorteos-grid > *,
    .giveaways-grid > *,
    .recent-grid > *,
    .sorteos-main section article,
    .sorteos-main section .card,
    main section article,
    main section .card {
        aspect-ratio: auto !important;
        min-height: 240px !important;
    }
}
   COTNAS SORTEOS - FIX TARJETA GIGANTE "ACTIVOS Y RECIENTES"
   Añadir AL FINAL de /var/www/cotnas/sorteos/assets/css/sorteos.css
   Corrige el fallo donde el contenedor entero se convierte en una tarjeta enorme.
========================================================= */

/* La sección NO debe ser tarjeta ni cuadrado */
.sorteos-section,
.giveaways-section,
.recent-section,
.sorteos-main section,
main section {
    width: min(1080px, calc(100% - 32px)) !important;
    margin: 34px auto 48px !important;
    padding: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* El título de sección tampoco debe entrar dentro del grid */
.sorteos-section .section-title,
.giveaways-section .section-title,
.recent-section .section-title,
.sorteos-main section .section-title,
main section .section-title {
    display: block !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
}

/* El grid real de sorteos */
.giveaways-grid,
.sorteos-grid,
.recent-grid,
.sorteos-list,
.giveaway-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
}

/* IMPORTANTE:
   Anula reglas anteriores demasiado amplias tipo:
   main section > div:not(.section-title)
   porque convertían el contenedor completo en una tarjeta gigante.
*/
.sorteos-main section > div:not(.section-title):not(.giveaways-grid):not(.sorteos-grid):not(.recent-grid):not(.sorteos-list):not(.giveaway-list),
main section > div:not(.section-title):not(.giveaways-grid):not(.sorteos-grid):not(.recent-grid):not(.sorteos-list):not(.giveaway-list) {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Solo estas clases son tarjetas */
.giveaway-card,
.sorteo-card,
.recent-giveaway-card,
.sorteos-list > article,
.giveaway-list > article,
.sorteos-grid > article,
.giveaways-grid > article,
.recent-grid > article,
.sorteos-list > .sorteo-card,
.giveaway-list > .sorteo-card,
.sorteos-grid > .sorteo-card,
.giveaways-grid > .sorteo-card,
.recent-grid > .sorteo-card,
.sorteos-list > .giveaway-card,
.giveaway-list > .giveaway-card,
.sorteos-grid > .giveaway-card,
.giveaways-grid > .giveaway-card,
.recent-grid > .giveaway-card {
    aspect-ratio: 1 / 1 !important;
    min-height: 230px !important;
    max-height: 285px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
        radial-gradient(circle at 18% 12%, rgba(50,246,255,.18), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(255,61,242,.16), transparent 32%),
        rgba(17,3,38,.94) !important;
    border: 1px solid rgba(183,96,255,.42) !important;
    box-shadow:
        0 20px 52px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.10),
        0 0 30px rgba(145,70,255,.15) !important;
}

/* Texto dentro de la tarjeta, más controlado */
.giveaway-card h3,
.sorteo-card h3,
.recent-giveaway-card h3,
.sorteos-list > article h3,
.giveaway-list > article h3,
.sorteos-grid > article h3,
.giveaways-grid > article h3,
.recent-grid > article h3 {
    font-size: clamp(18px, 2vw, 25px) !important;
    line-height: 1.04 !important;
    margin: 6px 0 7px !important;
}

.giveaway-card p,
.sorteo-card p,
.recent-giveaway-card p,
.sorteos-list > article p,
.giveaway-list > article p,
.sorteos-grid > article p,
.giveaways-grid > article p,
.recent-grid > article p {
    font-size: 13px !important;
    line-height: 1.28 !important;
    margin: 5px 0 !important;
}

/* Botón compacto */
.giveaway-card .btn,
.sorteo-card .btn,
.recent-giveaway-card .btn,
.sorteos-list > article .btn,
.giveaway-list > article .btn,
.sorteos-grid > article .btn,
.giveaways-grid > article .btn,
.recent-grid > article .btn,
.giveaway-card a[href*="sorteo"],
.sorteo-card a[href*="sorteo"],
.recent-giveaway-card a[href*="sorteo"],
.giveaway-card a[href*="recompensa"],
.sorteo-card a[href*="recompensa"],
.recent-giveaway-card a[href*="recompensa"] {
    min-height: 34px !important;
    padding: 8px 13px !important;
    font-size: 13px !important;
    margin-top: 8px !important;
}

/* Si solo hay un sorteo, que no ocupe todo el ancho */
.giveaways-grid:has(> :only-child),
.sorteos-grid:has(> :only-child),
.recent-grid:has(> :only-child),
.sorteos-list:has(> :only-child),
.giveaway-list:has(> :only-child) {
    grid-template-columns: minmax(230px, 290px) !important;
}

/* Alternativa por si el navegador no soporta :has del todo */
.giveaways-grid > :only-child,
.sorteos-grid > :only-child,
.recent-grid > :only-child,
.sorteos-list > :only-child,
.giveaway-list > :only-child {
    width: 100% !important;
    max-width: 290px !important;
}

/* Responsive */
@media (max-width: 760px) {
    .giveaways-grid,
    .sorteos-grid,
    .recent-grid,
    .sorteos-list,
    .giveaway-list {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    }

    .giveaway-card,
    .sorteo-card,
    .recent-giveaway-card,
    .sorteos-list > article,
    .giveaway-list > article,
    .sorteos-grid > article,
    .giveaways-grid > article,
    .recent-grid > article {
        min-height: 205px !important;
        max-height: none !important;
    }
}

@media (max-width: 520px) {
    .giveaways-grid,
    .sorteos-grid,
    .recent-grid,
    .sorteos-list,
    .giveaway-list {
        grid-template-columns: 1fr !important;
    }

    .giveaway-card,
    .sorteo-card,
    .recent-giveaway-card,
    .sorteos-list > article,
    .giveaway-list > article,
    .sorteos-grid > article,
    .giveaways-grid > article,
    .recent-grid > article {
        aspect-ratio: auto !important;
        min-height: 190px !important;
        max-width: 100% !important;
    }
}


/* =========================================================
   COTNAS SORTEOS - HOME 3 SORTEOS POR FILA + 20% MÁS GRANDES
   Añadido al final SIN borrar nada del CSS original.
   Clase real detectada en index.php/CSS: .giveaway-grid / .giveaway-card
========================================================= */

/* Contenedor principal de la home */
.sorteos-main {
    width: min(var(--max, 1180px), calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Título de la sección Sorteos */
.sorteos-main .section-title {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 54px auto 28px !important;
    padding: 0 !important;
}

.sorteos-main .section-title h2 {
    font-size: clamp(34px, 4vw, 54px) !important;
    line-height: .95 !important;
    margin: 8px 0 0 !important;
}

/* GRID REAL DE LA HOME: 3 por fila */
.sorteos-main .giveaway-grid,
.giveaway-grid {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto 76px !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;

    align-items: stretch !important;
    justify-items: stretch !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Tarjeta: 20% más grande y proporcionada */
.sorteos-main .giveaway-grid .giveaway-card,
.giveaway-grid .giveaway-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    min-height: 360px !important;
    height: auto !important;
    margin: 0 !important;

    aspect-ratio: auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Interior real de la tarjeta */
.sorteos-main .giveaway-grid .giveaway-card-inner,
.giveaway-grid .giveaway-card-inner {
    position: relative !important;
    overflow: hidden !important;

    width: 100% !important;
    min-height: 360px !important;
    height: 100% !important;

    padding: 28px !important;
    border-radius: 30px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(50,246,255,.18), transparent 32%),
        radial-gradient(circle at 86% 16%, rgba(255,61,242,.18), transparent 34%),
        radial-gradient(circle at 50% 115%, rgba(145,70,255,.42), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
        rgba(17,3,38,.95) !important;

    border: 1px solid rgba(183,96,255,.46) !important;
    box-shadow:
        0 28px 74px rgba(0,0,0,.43),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 38px rgba(145,70,255,.18) !important;

    transform-style: preserve-3d !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

/* Brillo interno */
.sorteos-main .giveaway-grid .giveaway-card-inner::before,
.giveaway-grid .giveaway-card-inner::before {
    content: "" !important;
    position: absolute !important;
    top: -35% !important;
    left: -70% !important;
    width: 58% !important;
    height: 170% !important;
    transform: rotate(18deg) !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) !important;
    opacity: .65 !important;
    pointer-events: none !important;
    transition: left .65s ease !important;
}

/* Marco interior */
.sorteos-main .giveaway-grid .giveaway-card-inner::after,
.giveaway-grid .giveaway-card-inner::after {
    content: "" !important;
    position: absolute !important;
    inset: 11px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    pointer-events: none !important;
}

.sorteos-main .giveaway-grid .giveaway-card-inner:hover,
.giveaway-grid .giveaway-card-inner:hover {
    transform: translateY(-6px) perspective(760px) rotateX(1.5deg) rotateY(-1.5deg) !important;
    border-color: rgba(50,246,255,.58) !important;
    box-shadow:
        0 36px 92px rgba(0,0,0,.52),
        0 0 46px rgba(145,70,255,.30),
        0 0 24px rgba(50,246,255,.14) !important;
}

.sorteos-main .giveaway-grid .giveaway-card-inner:hover::before,
.giveaway-grid .giveaway-card-inner:hover::before {
    left: 125% !important;
}

/* Estado del sorteo */
.sorteos-main .giveaway-grid .giveaway-status,
.giveaway-grid .giveaway-status {
    position: relative !important;
    z-index: 2 !important;

    width: fit-content !important;
    max-width: 100% !important;

    margin: 0 0 14px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
}

/* Título de tarjeta */
.sorteos-main .giveaway-grid .giveaway-card h3,
.giveaway-grid .giveaway-card h3 {
    position: relative !important;
    z-index: 2 !important;

    margin: 10px 0 14px !important;
    color: #fff !important;

    font-size: clamp(30px, 2.55vw, 42px) !important;
    line-height: .96 !important;
    letter-spacing: -.052em !important;

    text-shadow:
        0 5px 0 rgba(98,54,178,.54),
        0 0 22px rgba(255,255,255,.12) !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* Descripción */
.sorteos-main .giveaway-grid .giveaway-description,
.sorteos-main .giveaway-grid .giveaway-card p,
.giveaway-grid .giveaway-description,
.giveaway-grid .giveaway-card p {
    position: relative !important;
    z-index: 2 !important;

    margin: 10px 0 16px !important;
    color: rgba(255,255,255,.80) !important;

    font-size: 15px !important;
    line-height: 1.48 !important;
}

/* Meta/datos internos */
.sorteos-main .giveaway-grid .giveaway-meta,
.giveaway-grid .giveaway-meta {
    position: relative !important;
    z-index: 2 !important;

    margin: 14px 0 18px !important;
    padding: 15px !important;
    border-radius: 18px !important;

    background: rgba(0,0,0,.20) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
}

/* Ganador */
.sorteos-main .giveaway-grid .giveaway-winner,
.giveaway-grid .giveaway-winner {
    position: relative !important;
    z-index: 2 !important;

    margin: 14px 0 18px !important;
    padding: 15px !important;
    border-radius: 18px !important;
}

/* Acciones al final */
.sorteos-main .giveaway-grid .giveaway-actions,
.giveaway-grid .giveaway-actions,
.sorteos-main .giveaway-grid .card-actions,
.giveaway-grid .card-actions {
    position: relative !important;
    z-index: 2 !important;

    margin-top: auto !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Botones de tarjeta */
.sorteos-main .giveaway-grid .btn,
.giveaway-grid .btn,
.sorteos-main .giveaway-grid a[href*="sorteo"],
.giveaway-grid a[href*="sorteo"],
.sorteos-main .giveaway-grid a[href*="recompensa"],
.giveaway-grid a[href*="recompensa"] {
    position: relative !important;
    z-index: 2 !important;

    width: fit-content !important;
    min-width: 160px !important;
    min-height: 46px !important;

    padding: 12px 22px !important;
    border-radius: 999px !important;

    font-size: 15px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

/* Si hay tarjetas que no tienen wrapper .giveaway-card-inner */
.sorteos-main .giveaway-grid > article:not(:has(.giveaway-card-inner)),
.giveaway-grid > article:not(:has(.giveaway-card-inner)),
.sorteos-main .giveaway-grid > .giveaway-card:not(:has(.giveaway-card-inner)),
.giveaway-grid > .giveaway-card:not(:has(.giveaway-card-inner)) {
    min-height: 360px !important;
    padding: 28px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(50,246,255,.18), transparent 32%),
        radial-gradient(circle at 86% 16%, rgba(255,61,242,.18), transparent 34%),
        radial-gradient(circle at 50% 115%, rgba(145,70,255,.42), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
        rgba(17,3,38,.95) !important;
    border: 1px solid rgba(183,96,255,.46) !important;
    box-shadow:
        0 28px 74px rgba(0,0,0,.43),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 38px rgba(145,70,255,.18) !important;
}

/* Tablet: 2 por fila */
@media (max-width: 1100px) {
    .sorteos-main .giveaway-grid,
    .giveaway-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 860px !important;
    }
}

/* Móvil: 1 por fila */
@media (max-width: 720px) {
    .sorteos-main .giveaway-grid,
    .giveaway-grid {
        grid-template-columns: 1fr !important;
        max-width: 94% !important;
        gap: 20px !important;
    }

    .sorteos-main .giveaway-grid .giveaway-card,
    .giveaway-grid .giveaway-card,
    .sorteos-main .giveaway-grid .giveaway-card-inner,
    .giveaway-grid .giveaway-card-inner {
        min-height: auto !important;
    }

    .sorteos-main .giveaway-grid .btn,
    .giveaway-grid .btn,
    .sorteos-main .giveaway-grid a[href*="sorteo"],
    .giveaway-grid a[href*="sorteo"],
    .sorteos-main .giveaway-grid a[href*="recompensa"],
    .giveaway-grid a[href*="recompensa"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}
/* =========================================================
   COTNAS SORTEOS - BLOQUE TWITCH CONECTADO LIMPIO
========================================================= */

.twitch-account-panel {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.twitch-account-box {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 10%, rgba(50, 246, 255, .14), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    border: 1px solid rgba(185, 116, 255, .38);
    box-shadow:
        0 16px 36px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.twitch-account-avatar {
    width: 74px;
    height: 74px;
    min-width: 74px;
    object-fit: cover;
    border-radius: 20px;
    padding: 4px;
    background: linear-gradient(145deg, #32f6ff, #ff3df2 55%, #9146ff);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        0 0 0 5px rgba(145,70,255,.14),
        0 12px 26px rgba(0,0,0,.35),
        0 0 22px rgba(50,246,255,.16);
}

.twitch-account-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.twitch-account-info span {
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    font-weight: 800;
}

.twitch-account-info strong {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 1000;
    line-height: 1.05;
    text-shadow: 0 3px 0 rgba(93,55,170,.55);
}

.twitch-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-size: .84rem;
    font-weight: 900;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
}

.twitch-logout-btn:hover {
    background: rgba(255,61,242,.18);
    border-color: rgba(255,90,190,.42);
}

.twitch-community-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 26px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 1000;
    letter-spacing: -.01em;
    background:
        radial-gradient(circle at 25% 0%, rgba(255,255,255,.18), transparent 38%),
        linear-gradient(135deg, #9146ff, #6f2dff 55%, #3b176f);
    border: 1px solid rgba(185,116,255,.55);
    box-shadow:
        0 18px 42px rgba(145,70,255,.28),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.twitch-community-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 54px rgba(145,70,255,.36),
        0 0 22px rgba(50,246,255,.12);
}

@media (max-width: 720px) {
    .twitch-account-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .twitch-account-box,
    .twitch-community-btn {
        width: 100%;
    }

    .twitch-community-btn {
        min-height: 48px;
    }
}
/* =========================================================
   COTNAS SORTEOS - FIX FINAL HOME TARJETAS
   Mantiene tu CSS completo y corrige:
   - 3 sorteos por fila
   - tarjetas 20% más grandes
   - altura automática para que no tape botones
   - botones siempre visibles
========================================================= */

.sorteos-main .giveaway-grid,
.giveaway-grid {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto 76px !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;

    align-items: stretch !important;
    justify-items: stretch !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* La tarjeta exterior NO debe forzar altura cuadrada */
.sorteos-main .giveaway-grid .giveaway-card,
.giveaway-grid .giveaway-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    display: block !important;
    overflow: visible !important;
}

/* Interior real de la tarjeta */
.sorteos-main .giveaway-grid .giveaway-card-inner,
.giveaway-grid .giveaway-card-inner {
    position: relative !important;
    overflow: hidden !important;

    width: 100% !important;
    height: auto !important;
    min-height: 430px !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    padding: 30px !important;
    border-radius: 30px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(50,246,255,.18), transparent 32%),
        radial-gradient(circle at 86% 16%, rgba(255,61,242,.18), transparent 34%),
        radial-gradient(circle at 50% 115%, rgba(145,70,255,.42), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
        rgba(17,3,38,.95) !important;

    border: 1px solid rgba(183,96,255,.46) !important;
    box-shadow:
        0 28px 74px rgba(0,0,0,.43),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 38px rgba(145,70,255,.18) !important;

    transform-style: preserve-3d !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

/* Brillo interno */
.sorteos-main .giveaway-grid .giveaway-card-inner::before,
.giveaway-grid .giveaway-card-inner::before {
    content: "" !important;
    position: absolute !important;
    top: -35% !important;
    left: -70% !important;
    width: 58% !important;
    height: 170% !important;
    transform: rotate(18deg) !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) !important;
    opacity: .65 !important;
    pointer-events: none !important;
    transition: left .65s ease !important;
}

/* Marco interior */
.sorteos-main .giveaway-grid .giveaway-card-inner::after,
.giveaway-grid .giveaway-card-inner::after {
    content: "" !important;
    position: absolute !important;
    inset: 11px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    pointer-events: none !important;
}

.sorteos-main .giveaway-grid .giveaway-card-inner:hover,
.giveaway-grid .giveaway-card-inner:hover {
    transform: translateY(-6px) perspective(760px) rotateX(1.5deg) rotateY(-1.5deg) !important;
    border-color: rgba(50,246,255,.58) !important;
    box-shadow:
        0 36px 92px rgba(0,0,0,.52),
        0 0 46px rgba(145,70,255,.30),
        0 0 24px rgba(50,246,255,.14) !important;
}

.sorteos-main .giveaway-grid .giveaway-card-inner:hover::before,
.giveaway-grid .giveaway-card-inner:hover::before {
    left: 125% !important;
}

/* Status */
.sorteos-main .giveaway-grid .giveaway-status,
.giveaway-grid .giveaway-status {
    position: relative !important;
    z-index: 2 !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
}

/* Título */
.sorteos-main .giveaway-grid .giveaway-card h3,
.giveaway-grid .giveaway-card h3 {
    position: relative !important;
    z-index: 2 !important;

    margin: 10px 0 14px !important;
    color: #fff !important;

    font-size: clamp(30px, 2.55vw, 42px) !important;
    line-height: .96 !important;
    letter-spacing: -.052em !important;

    text-shadow:
        0 5px 0 rgba(98,54,178,.54),
        0 0 22px rgba(255,255,255,.12) !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* Descripciones */
.sorteos-main .giveaway-grid .giveaway-description,
.sorteos-main .giveaway-grid .giveaway-card p,
.giveaway-grid .giveaway-description,
.giveaway-grid .giveaway-card p {
    position: relative !important;
    z-index: 2 !important;

    margin: 10px 0 16px !important;
    color: rgba(255,255,255,.80) !important;

    font-size: 15px !important;
    line-height: 1.48 !important;
}

/* Datos del sorteo */
.sorteos-main .giveaway-grid .giveaway-meta,
.giveaway-grid .giveaway-meta {
    position: relative !important;
    z-index: 2 !important;

    margin: 14px 0 18px !important;
    padding: 15px !important;
    border-radius: 18px !important;

    background: rgba(0,0,0,.20) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
}

/* Ganador */
.sorteos-main .giveaway-grid .giveaway-winner,
.giveaway-grid .giveaway-winner {
    position: relative !important;
    z-index: 2 !important;

    margin: 14px 0 18px !important;
    padding: 15px !important;
    border-radius: 18px !important;

    background: rgba(255,209,102,.10) !important;
    border: 1px solid rgba(255,209,102,.25) !important;
}

/* Acciones siempre al final */
.sorteos-main .giveaway-grid .giveaway-actions,
.giveaway-grid .giveaway-actions,
.sorteos-main .giveaway-grid .card-actions,
.giveaway-grid .card-actions {
    position: relative !important;
    z-index: 2 !important;

    margin-top: auto !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Botones */
.sorteos-main .giveaway-grid .btn,
.giveaway-grid .btn,
.sorteos-main .giveaway-grid a[href*="sorteo"],
.giveaway-grid a[href*="sorteo"],
.sorteos-main .giveaway-grid a[href*="recompensa"],
.giveaway-grid a[href*="recompensa"] {
    position: relative !important;
    z-index: 2 !important;

    width: fit-content !important;
    min-width: 160px !important;
    min-height: 46px !important;

    padding: 12px 22px !important;
    border-radius: 999px !important;

    font-size: 15px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

/* Si alguna tarjeta no tiene .giveaway-card-inner */
.sorteos-main .giveaway-grid > article:not(:has(.giveaway-card-inner)),
.giveaway-grid > article:not(:has(.giveaway-card-inner)),
.sorteos-main .giveaway-grid > .giveaway-card:not(:has(.giveaway-card-inner)),
.giveaway-grid > .giveaway-card:not(:has(.giveaway-card-inner)) {
    min-height: 430px !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 30px !important;
    border-radius: 30px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(50,246,255,.18), transparent 32%),
        radial-gradient(circle at 86% 16%, rgba(255,61,242,.18), transparent 34%),
        radial-gradient(circle at 50% 115%, rgba(145,70,255,.42), transparent 46%),
        linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
        rgba(17,3,38,.95) !important;

    border: 1px solid rgba(183,96,255,.46) !important;
    box-shadow:
        0 28px 74px rgba(0,0,0,.43),
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 38px rgba(145,70,255,.18) !important;
}

/* Tablet: 2 por fila */
@media (max-width: 1100px) {
    .sorteos-main .giveaway-grid,
    .giveaway-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 860px !important;
    }
}

/* Móvil: 1 por fila */
@media (max-width: 720px) {
    .sorteos-main .giveaway-grid,
    .giveaway-grid {
        grid-template-columns: 1fr !important;
        max-width: 94% !important;
        gap: 20px !important;
    }

    .sorteos-main .giveaway-grid .giveaway-card,
    .giveaway-grid .giveaway-card,
    .sorteos-main .giveaway-grid .giveaway-card-inner,
    .giveaway-grid .giveaway-card-inner {
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }

    .sorteos-main .giveaway-grid .btn,
    .giveaway-grid .btn,
    .sorteos-main .giveaway-grid a[href*="sorteo"],
    .giveaway-grid a[href*="sorteo"],
    .sorteos-main .giveaway-grid a[href*="recompensa"],
    .giveaway-grid a[href*="recompensa"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   FIX VISUAL DEFINITIVO - TARJETAS HOME SIN DOBLE BORDE
   Corrige:
   - rayas visuales fuera de la tarjeta
   - borde exterior más grande que la caja
   - doble marco
   - tarjetas con altura flexible y botón visible
========================================================= */

/* GRID REAL DE LOS SORTEOS */
.sorteos-main .giveaway-grid,
.giveaway-grid {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto 70px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: start !important;
    justify-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* WRAPPER EXTERIOR: SIN ESTILO VISUAL */
.sorteos-main .giveaway-grid > .giveaway-card,
.giveaway-grid > .giveaway-card,
.sorteos-main .giveaway-grid > article.giveaway-card,
.giveaway-grid > article.giveaway-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
}

/* ELIMINAR PSEUDO-ELEMENTOS DEL WRAPPER */
.sorteos-main .giveaway-grid > .giveaway-card::before,
.sorteos-main .giveaway-grid > .giveaway-card::after,
.giveaway-grid > .giveaway-card::before,
.giveaway-grid > .giveaway-card::after,
.sorteos-main .giveaway-grid > article.giveaway-card::before,
.sorteos-main .giveaway-grid > article.giveaway-card::after,
.giveaway-grid > article.giveaway-card::before,
.giveaway-grid > article.giveaway-card::after {
    content: none !important;
    display: none !important;
}

/* TARJETA REAL */
.sorteos-main .giveaway-grid > .giveaway-card .giveaway-card-inner,
.giveaway-grid > .giveaway-card .giveaway-card-inner,
.sorteos-main .giveaway-grid > article.giveaway-card .giveaway-card-inner,
.giveaway-grid > article.giveaway-card .giveaway-card-inner {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    min-height: 385px !important;
    height: 100% !important;
    padding: 28px !important;
    border-radius: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(50,246,255,.14), transparent 30%),
        radial-gradient(circle at 84% 18%, rgba(255,61,242,.16), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(17,3,38,.96) !important;
    border: 1px solid rgba(183,96,255,.40) !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 26px rgba(145,70,255,.14) !important;
    transition: transform .20s ease, border-color .20s ease, box-shadow .20s ease !important;
}

/* BRILLO INTERIOR CONTROLADO */
.sorteos-main .giveaway-grid > .giveaway-card .giveaway-card-inner::before,
.giveaway-grid > .giveaway-card .giveaway-card-inner::before,
.sorteos-main .giveaway-grid > article.giveaway-card .giveaway-card-inner::before,
.giveaway-grid > article.giveaway-card .giveaway-card-inner::before {
    content: "" !important;
    position: absolute !important;
    top: -20% !important;
    left: -55% !important;
    width: 38% !important;
    height: 140% !important;
    transform: rotate(18deg) !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.10) 50%,
        transparent 100%
    ) !important;
    pointer-events: none !important;
    opacity: .55 !important;
    transition: left .55s ease !important;
}

/* MARCO INTERIOR CORRECTO */
.sorteos-main .giveaway-grid > .giveaway-card .giveaway-card-inner::after,
.giveaway-grid > .giveaway-card .giveaway-card-inner::after,
.sorteos-main .giveaway-grid > article.giveaway-card .giveaway-card-inner::after,
.giveaway-grid > article.giveaway-card .giveaway-card-inner::after {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    pointer-events: none !important;
}

/* HOVER */
.sorteos-main .giveaway-grid > .giveaway-card .giveaway-card-inner:hover,
.giveaway-grid > .giveaway-card .giveaway-card-inner:hover,
.sorteos-main .giveaway-grid > article.giveaway-card .giveaway-card-inner:hover,
.giveaway-grid > article.giveaway-card .giveaway-card-inner:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(50,246,255,.45) !important;
    box-shadow:
        0 28px 72px rgba(0,0,0,.45),
        0 0 34px rgba(145,70,255,.22),
        0 0 18px rgba(50,246,255,.10) !important;
}

.sorteos-main .giveaway-grid > .giveaway-card .giveaway-card-inner:hover::before,
.giveaway-grid > .giveaway-card .giveaway-card-inner:hover::before,
.sorteos-main .giveaway-grid > article.giveaway-card .giveaway-card-inner:hover::before,
.giveaway-grid > article.giveaway-card .giveaway-card-inner:hover::before {
    left: 120% !important;
}

/* CONTENIDO POR ENCIMA DE LOS EFECTOS */
.sorteos-main .giveaway-grid > .giveaway-card .giveaway-card-inner > *,
.giveaway-grid > .giveaway-card .giveaway-card-inner > *,
.sorteos-main .giveaway-grid > article.giveaway-card .giveaway-card-inner > *,
.giveaway-grid > article.giveaway-card .giveaway-card-inner > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ESTADO */
.sorteos-main .giveaway-grid .giveaway-status,
.giveaway-grid .giveaway-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

/* TÍTULO */
.sorteos-main .giveaway-grid .giveaway-card h3,
.giveaway-grid .giveaway-card h3 {
    margin: 8px 0 12px !important;
    font-size: clamp(28px, 2.3vw, 42px) !important;
    line-height: .96 !important;
    letter-spacing: -.05em !important;
    color: #fff !important;
    text-shadow: 0 5px 0 rgba(98,54,178,.54) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* PREMIO / DESCRIPCIÓN */
.sorteos-main .giveaway-grid .giveaway-card p,
.giveaway-grid .giveaway-card p,
.sorteos-main .giveaway-grid .giveaway-description,
.giveaway-grid .giveaway-description {
    margin: 8px 0 !important;
    color: rgba(255,255,255,.80) !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
}

/* BLOQUE META */
.sorteos-main .giveaway-grid .giveaway-meta,
.giveaway-grid .giveaway-meta {
    margin: 14px 0 16px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    background: rgba(0,0,0,.18) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

/* GANADOR */
.sorteos-main .giveaway-grid .giveaway-winner,
.giveaway-grid .giveaway-winner {
    margin: 14px 0 16px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
}

/* ACCIONES AL FINAL */
.sorteos-main .giveaway-grid .giveaway-actions,
.giveaway-grid .giveaway-actions,
.sorteos-main .giveaway-grid .card-actions,
.giveaway-grid .card-actions {
    margin-top: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
}

/* BOTONES */
.sorteos-main .giveaway-grid .btn,
.giveaway-grid .btn,
.sorteos-main .giveaway-grid a[href*="sorteo"],
.giveaway-grid a[href*="sorteo"],
.sorteos-main .giveaway-grid a[href*="recompensa"],
.giveaway-grid a[href*="recompensa"] {
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 175px !important;
    min-height: 46px !important;
    margin-top: 10px !important;
    padding: 12px 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 1000 !important;
    white-space: normal !important;
    text-align: center !important;
}

/* SI HAY SOLO UNA TARJETA, QUE NO OCUPE TODO */
.sorteos-main .giveaway-grid > .giveaway-card:only-child,
.giveaway-grid > .giveaway-card:only-child {
    max-width: 370px !important;
}

/* TABLET */
@media (max-width: 1100px) {
    .sorteos-main .giveaway-grid,
    .giveaway-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* MÓVIL */
@media (max-width: 720px) {
    .sorteos-main .giveaway-grid,
    .giveaway-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .sorteos-main .giveaway-grid > .giveaway-card .giveaway-card-inner,
    .giveaway-grid > .giveaway-card .giveaway-card-inner,
    .sorteos-main .giveaway-grid > article.giveaway-card .giveaway-card-inner,
    .giveaway-grid > article.giveaway-card .giveaway-card-inner {
        min-height: auto !important;
        padding: 24px !important;
        border-radius: 24px !important;
    }

    .sorteos-main .giveaway-grid .btn,
    .giveaway-grid .btn,
    .sorteos-main .giveaway-grid a[href*="sorteo"],
    .giveaway-grid a[href*="sorteo"],
    .sorteos-main .giveaway-grid a[href*="recompensa"],
    .giveaway-grid a[href*="recompensa"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   COTNAS SORTEOS - IMAGEN DEL JUEGO EN CARDS Y DETALLE
   Añadido sin borrar el diseño actual.
========================================================= */
.giveaway-game-image-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 118px !important;
    margin: 0 0 16px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.24) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.30) !important;
}
.giveaway-game-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: scale(1.01) !important;
}
.giveaway-card:hover .giveaway-game-image,
.sorteo-card:hover .giveaway-game-image {
    transform: scale(1.05) !important;
    transition: transform .28s ease !important;
}
.sorteo-game-image-panel {
    align-self: stretch !important;
    min-height: 330px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(183,96,255,.34) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.35), 0 0 34px rgba(145,70,255,.18) !important;
}
.sorteo-game-image-panel img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    object-fit: cover !important;
    object-position: center !important;
}
.form-image-preview {
    margin-top: 10px !important;
    width: min(420px, 100%) !important;
    height: 160px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(0,0,0,.25) !important;
}
.form-image-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
@media (max-width: 920px) {
    .sorteo-game-image-panel,
    .sorteo-game-image-panel img { min-height: 220px !important; }
}