/* ===== INDEX — landing page ===== */

/* ===== HERO SECTION ===== */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 50px;
    text-align: center;
    min-height: 45vh;
    background: var(--white);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 20%, rgba(26, 188, 245, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 29, 186, 0.05) 0%, transparent 50%);
    animation: bgMove 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bgMove {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-5%, 5%); }
}

.tagline {
    position: relative;
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.3;
    background: linear-gradient(135deg, var(--pink) 0%, var(--blue) 50%, var(--pink) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 28px;
    animation: shimmer 3s linear infinite;
}

.subtitle {
    position: relative;
    font-size: var(--text-xl);
    color: var(--gray);
    margin-top: 12px;
    font-weight: 500;
}

.welcome {
    position: relative;
    font-size: var(--text-2xl);
    color: var(--pink);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 28px;
}

/* ===== ACTIONS ===== */
.actions-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 340px;
}

/* ===== HERO THEMES GRID (visitantes) ===== */
.hero-themes-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    margin-top: 36px;
}

/* ===== THEMES SECTION ===== */
.themes-section {
    padding: 60px 20px 70px;
    background: var(--gray-light);
    position: relative;
}

.themes-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,0.3), #2dd4f0, rgba(14,165,233,0.3), transparent);
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-dark);
    margin-bottom: 8px;
    display: block;
    text-transform: none;
    letter-spacing: normal;
}

.section-title::before {
    display: none;
}

.section-subtitle {
    font-size: var(--text-xl);
    color: var(--gray);
}

.themes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.theme-card {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    box-shadow:
        0 5px 0 #d1d5db,
        0 7px 16px rgba(0,0,0,0.08);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    top: 0;
}

.theme-card:hover {
    top: -4px;
    border-color: var(--card-color, #d1d5db);
    box-shadow:
        0 9px 0 #d1d5db,
        0 12px 24px rgba(0,0,0,0.12);
}

.theme-card:active {
    top: 5px;
    box-shadow:
        0 0px 0 #d1d5db,
        0 1px 3px rgba(0,0,0,0.05);
}

.theme-image-container {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--card-gradient, linear-gradient(135deg, #e5e7eb, #d1d5db));
}

.theme-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-card:hover .theme-image {
    transform: scale(1.06);
}

.theme-card-bottom {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.theme-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.theme-card-name {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--gray-dark);
}

.theme-card-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.theme-card:hover .theme-card-arrow {
    background: var(--card-color, var(--gray));
}

.theme-card-arrow svg {
    width: 14px;
    height: 14px;
    stroke: var(--gray);
    transition: stroke 0.2s;
}

.theme-card:hover .theme-card-arrow svg {
    stroke: white;
}

/* ===== SECONDARY LINKS ===== */
.secondary-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-dark);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    padding: 16px 28px;
    border-radius: 14px;
    background: var(--white);
    position: relative;
    top: 0;
    box-shadow:
        0 4px 0 #d1d5db,
        0 6px 10px rgba(0,0,0,0.06);
    transition: all 0.15s;
}

.secondary-link:hover {
    top: 2px;
    box-shadow:
        0 2px 0 #d1d5db,
        0 3px 6px rgba(0,0,0,0.05);
}

.secondary-link:active {
    top: 4px;
    box-shadow:
        0 0px 0 #d1d5db,
        0 1px 3px rgba(0,0,0,0.03);
}

.secondary-link.youtube:hover {
    color: #dc2626;
}

.secondary-link svg {
    width: 22px;
    height: 22px;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 480px) {
    .themes-grid,
    .hero-themes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 540px) {
    .actions {
        flex-direction: row;
        max-width: 420px;
    }

    .btn {
        flex: 1;
    }
}

@media (min-width: 768px) {
    .hero {
        padding: 50px 40px 60px;
        min-height: 50vh;
    }

    .themes-section {
        padding: 70px 40px 90px;
    }

    .themes-grid {
        gap: 28px;
    }

}

@media (min-width: 1024px) {
    .themes-grid,
    .hero-themes-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* ===== CARTONES SECTION ===== */
.cartones-section {
    padding: 60px 20px 70px;
    background: var(--white);
    text-align: center;
    position: relative;
}

.cartones-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,0.3), #2dd4f0, rgba(14,165,233,0.3), transparent);
}

.cartones-preview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 36px auto 20px;
    max-width: 1400px;
}

.cartones-preview-item {
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    top: 0;
    transition: top 0.2s;
}

.cartones-preview-item:hover {
    top: -4px;
}

.cartones-preview-item:active {
    top: 4px;
}

.preview-label {
    margin-top: 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.preview-theme-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cartones-preview-img {
    width: 100%;
    border-radius: 16px;
    box-shadow:
        0 4px 0 #d1d5db,
        0 6px 12px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.cartones-preview-item:hover .cartones-preview-img {
    box-shadow:
        0 8px 0 #d1d5db,
        0 10px 20px rgba(0,0,0,0.1);
}

.cartones-preview-placeholder {
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 16px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e5e7eb;
    box-shadow:
        0 4px 0 #d1d5db,
        0 6px 12px rgba(0,0,0,0.06);
}

.cartones-preview-placeholder .preview-theme-dot {
    width: 32px;
    height: 32px;
}

.preview-card {
    width: 100%;
    background: var(--white);
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 4px 0 #d1d5db,
        0 6px 12px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.cartones-preview-item:hover .preview-card {
    border-color: #d1d5db;
    box-shadow:
        0 8px 0 #d1d5db,
        0 10px 20px rgba(0,0,0,0.1);
}

.cartones-preview-item:active .preview-card {
    box-shadow:
        0 0px 0 #d1d5db,
        0 1px 3px rgba(0,0,0,0.04);
}

.preview-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--gray-light);
    border-bottom: 1px solid #e5e7eb;
}

.preview-card-logo {
    height: 20px;
    width: auto;
}

.preview-card-url {
    font-size: 0.7rem;
    color: var(--gray);
    font-weight: 500;
}

.preview-card-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    padding: 12px;
}

.preview-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.55rem, 1.5vw, 0.75rem);
    font-weight: 600;
    border-radius: 6px;
    color: var(--gray-dark);
    background: #f3f4f6;
}

.preview-cell.has-number {
    background: #e8f5e9;
    color: #2e7d32;
}

.preview-cell.marked {
    background: var(--pink);
    color: white;
}

.preview-card-footer {
    padding: 8px;
    font-size: 0.7rem;
    color: var(--gray);
    border-top: 1px solid #e5e7eb;
}

.preview-card-grid-us {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 8px;
}

.preview-card-grid-us .preview-cell {
    aspect-ratio: 1.15;
    font-size: clamp(0.5rem, 1.3vw, 0.7rem);
}

.preview-bingo-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 4px 8px 0;
}

.preview-header-letter {
    aspect-ratio: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.6rem, 1.5vw, 0.78rem);
    font-weight: 800;
    color: var(--white);
    background: var(--blue);
    border-radius: 5px;
}

.preview-cell.free {
    background: var(--pink);
    color: var(--white);
    font-size: clamp(0.4rem, 1vw, 0.55rem);
    font-weight: 800;
}

/* === Preview Theme: Elegante === */
.preview-theme-elegante {
    border-color: #d4a574;
    box-shadow:
        0 4px 0 #c49a6c,
        0 6px 12px rgba(212, 165, 116, 0.2);
}
.cartones-preview-item:hover .preview-theme-elegante {
    border-color: #c49a6c;
    box-shadow:
        0 8px 0 #c49a6c,
        0 10px 20px rgba(212, 165, 116, 0.3);
}
.cartones-preview-item:active .preview-theme-elegante {
    box-shadow:
        0 0px 0 #c49a6c,
        0 1px 3px rgba(212, 165, 116, 0.1);
}
.preview-theme-elegante .preview-card-header {
    background: #faf8f5;
    border-bottom-color: #e8d5c0;
}
.preview-theme-elegante .preview-card-url { color: #b8935a; }
.preview-theme-elegante .preview-cell { background: #faf8f5; }
.preview-theme-elegante .preview-cell.has-number {
    background: #f0e8d8;
    color: #6b5a3e;
}
.preview-theme-elegante .preview-cell.marked {
    background: linear-gradient(135deg, #d4a574, #c49a6c);
    color: white;
}
.preview-theme-elegante .preview-card-footer {
    color: #b8935a;
    border-top-color: #e8d5c0;
}

/* === Preview Theme: Fiesta === */
.preview-theme-fiesta {
    border-color: #e91e63;
    box-shadow:
        0 4px 0 #c2185b,
        0 6px 12px rgba(233, 30, 99, 0.2);
}
.cartones-preview-item:hover .preview-theme-fiesta {
    border-color: #c2185b;
    box-shadow:
        0 8px 0 #c2185b,
        0 10px 20px rgba(233, 30, 99, 0.3);
}
.cartones-preview-item:active .preview-theme-fiesta {
    box-shadow:
        0 0px 0 #c2185b,
        0 1px 3px rgba(233, 30, 99, 0.1);
}
.preview-theme-fiesta .preview-card-header {
    background: #fff0f5;
    border-bottom-color: #fce4ec;
}
.preview-theme-fiesta .preview-card-url { color: #e91e8e; }
.preview-theme-fiesta .preview-cell { background: #fff9db; }
.preview-theme-fiesta .preview-cell.has-number {
    background: #ffe4ec;
    color: #c2185b;
}
.preview-theme-fiesta .preview-cell.marked {
    background: #e91e63;
    color: white;
}
.preview-theme-fiesta .preview-card-footer {
    color: #e91e8e;
    border-top-color: #fce4ec;
}

/* === Preview Theme: Neón === */
.preview-theme-neon {
    background: #0a0a1a;
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow:
        0 4px 0 #0a0a2e,
        0 6px 12px rgba(0, 255, 255, 0.12);
}
.cartones-preview-item:hover .preview-theme-neon {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow:
        0 8px 0 #0a0a2e,
        0 10px 20px rgba(0, 255, 255, 0.2);
}
.cartones-preview-item:active .preview-theme-neon {
    box-shadow:
        0 0px 0 #0a0a2e,
        0 1px 3px rgba(0, 0, 0, 0.2);
}
.preview-theme-neon .preview-card-header {
    background: #111122;
    border-bottom-color: rgba(0, 255, 255, 0.2);
}
.preview-theme-neon .preview-card-logo { filter: brightness(2); }
.preview-theme-neon .preview-card-url { color: rgba(0, 255, 255, 0.7); }
.preview-theme-neon .preview-cell {
    background: #111122;
    color: #e0f7fa;
}
.preview-theme-neon .preview-cell.has-number {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
}
.preview-theme-neon .preview-cell.marked {
    background: rgba(255, 0, 128, 0.8);
    color: white;
    box-shadow: 0 0 6px rgba(255, 0, 128, 0.4);
}
.preview-theme-neon .preview-card-footer {
    color: rgba(0, 255, 255, 0.7);
    border-top-color: rgba(0, 255, 255, 0.2);
}

/* === Preview Theme: Naturaleza === */
.preview-theme-naturaleza {
    background: #faf3e8;
    border-color: #4a7c59;
    box-shadow:
        0 4px 0 #3a6347,
        0 6px 12px rgba(74, 124, 89, 0.15);
}
.cartones-preview-item:hover .preview-theme-naturaleza {
    border-color: #3a6347;
    box-shadow:
        0 8px 0 #3a6347,
        0 10px 20px rgba(74, 124, 89, 0.25);
}
.cartones-preview-item:active .preview-theme-naturaleza {
    box-shadow:
        0 0px 0 #3a6347,
        0 1px 3px rgba(74, 124, 89, 0.1);
}
.preview-theme-naturaleza .preview-card-header {
    background: #f5f0e4;
    border-bottom-color: #c8d5b9;
}
.preview-theme-naturaleza .preview-card-url { color: #4a7c59; }
.preview-theme-naturaleza .preview-cell {
    background: #f5efe3;
    color: #2d5016;
}
.preview-theme-naturaleza .preview-cell.has-number {
    background: #e0f0d8;
    color: #2d5016;
}
.preview-theme-naturaleza .preview-cell.marked {
    background: #4caf50;
    color: white;
}
.preview-theme-naturaleza .preview-card-footer {
    color: #4a7c59;
    border-top-color: #c8d5b9;
}

/* === Preview Theme: Oceano === */
.preview-theme-oceano {
    background: #f0f8ff;
    border-color: #1e88e5;
    box-shadow:
        0 4px 0 #1565c0,
        0 6px 12px rgba(30, 136, 229, 0.15);
}
.cartones-preview-item:hover .preview-theme-oceano {
    border-color: #1565c0;
    box-shadow:
        0 8px 0 #1565c0,
        0 10px 20px rgba(30, 136, 229, 0.25);
}
.cartones-preview-item:active .preview-theme-oceano {
    box-shadow:
        0 0px 0 #1565c0,
        0 1px 3px rgba(30, 136, 229, 0.1);
}
.preview-theme-oceano .preview-card-header {
    background: #e3f2fd;
    border-bottom-color: #90caf9;
}
.preview-theme-oceano .preview-card-url { color: #1565c0; }
.preview-theme-oceano .preview-cell {
    background: #e8f4fd;
    color: #1a3a5c;
}
.preview-theme-oceano .preview-cell.has-number {
    background: #bbdefb;
    color: #1a3a5c;
}
.preview-theme-oceano .preview-cell.marked {
    background: linear-gradient(135deg, #0288d1, #0097a7);
    color: white;
}
.preview-theme-oceano .preview-card-footer {
    color: #1976d2;
    border-top-color: #90caf9;
}

/* === Preview Theme: Real === */
.preview-theme-real {
    background: #faf8ff;
    border-color: #7b1fa2;
    box-shadow:
        0 4px 0 #6a1b9a,
        0 6px 12px rgba(123, 31, 162, 0.15);
}
.cartones-preview-item:hover .preview-theme-real {
    border-color: #6a1b9a;
    box-shadow:
        0 8px 0 #6a1b9a,
        0 10px 20px rgba(123, 31, 162, 0.25);
}
.cartones-preview-item:active .preview-theme-real {
    box-shadow:
        0 0px 0 #6a1b9a,
        0 1px 3px rgba(123, 31, 162, 0.1);
}
.preview-theme-real .preview-card-header {
    background: #f3e5f5;
    border-bottom-color: #ce93d8;
}
.preview-theme-real .preview-card-url { color: #6a1b9a; font-style: italic; }
.preview-theme-real .preview-cell {
    background: #f5f0fa;
    color: #3c1a5c;
}
.preview-theme-real .preview-cell.has-number {
    background: #e1bee7;
    color: #3c1a5c;
}
.preview-theme-real .preview-cell.marked {
    background: linear-gradient(135deg, #8e24aa, #6a1b9a);
    color: white;
}
.preview-theme-real .preview-card-footer {
    color: #8e24aa;
    border-top-color: #ce93d8;
    font-style: italic;
}

/* === Preview Theme: Otono === */
.preview-theme-otono {
    background: #fdf6ee;
    border-color: #bf6c2a;
    box-shadow:
        0 4px 0 #a0581e,
        0 6px 12px rgba(191, 108, 42, 0.15);
}
.cartones-preview-item:hover .preview-theme-otono {
    border-color: #a0581e;
    box-shadow:
        0 8px 0 #a0581e,
        0 10px 20px rgba(191, 108, 42, 0.25);
}
.cartones-preview-item:active .preview-theme-otono {
    box-shadow:
        0 0px 0 #a0581e,
        0 1px 3px rgba(191, 108, 42, 0.1);
}
.preview-theme-otono .preview-card-header {
    background: #faebd7;
    border-bottom-color: #dcc4a0;
}
.preview-theme-otono .preview-card-url { color: #a0522d; }
.preview-theme-otono .preview-cell {
    background: #faf0e4;
    color: #5d3a1a;
}
.preview-theme-otono .preview-cell.has-number {
    background: #ffe0b2;
    color: #5d3a1a;
}
.preview-theme-otono .preview-cell.marked {
    background: linear-gradient(135deg, #e65100, #bf360c);
    color: white;
}
.preview-theme-otono .preview-card-footer {
    color: #a0522d;
    border-top-color: #dcc4a0;
}

/* === Preview Theme: Pastel === */
.preview-theme-pastel {
    background: #fdf6ff;
    border-color: #d8b4fe;
    box-shadow:
        0 4px 0 #c084fc,
        0 6px 12px rgba(216, 180, 254, 0.2);
}
.cartones-preview-item:hover .preview-theme-pastel {
    border-color: #c084fc;
    box-shadow:
        0 8px 0 #c084fc,
        0 10px 20px rgba(216, 180, 254, 0.35);
}
.cartones-preview-item:active .preview-theme-pastel {
    box-shadow:
        0 0px 0 #c084fc,
        0 1px 3px rgba(216, 180, 254, 0.1);
}
.preview-theme-pastel .preview-card-header {
    background: #faf5ff;
    border-bottom-color: #e9d5ff;
}
.preview-theme-pastel .preview-card-url { color: #a78bfa; }
.preview-theme-pastel .preview-cell {
    background: #f5f0ff;
    color: #6b5b8a;
}
.preview-theme-pastel .preview-cell.has-number {
    background: #ede9fe;
    color: #6b5b8a;
}
.preview-theme-pastel .preview-cell.marked {
    background: linear-gradient(135deg, #c084fc, #f9a8d4);
    color: white;
}
.preview-theme-pastel .preview-card-footer {
    color: #a78bfa;
    border-top-color: #e9d5ff;
}

/* === Preview Theme: Nocturno === */
.preview-theme-nocturno {
    background: #0d1b2a;
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow:
        0 4px 0 #0a1520,
        0 6px 12px rgba(255, 215, 0, 0.08);
}
.cartones-preview-item:hover .preview-theme-nocturno {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow:
        0 8px 0 #0a1520,
        0 10px 20px rgba(255, 215, 0, 0.15);
}
.cartones-preview-item:active .preview-theme-nocturno {
    box-shadow:
        0 0px 0 #0a1520,
        0 1px 3px rgba(0, 0, 0, 0.2);
}
.preview-theme-nocturno .preview-card-header {
    background: #1b2838;
    border-bottom-color: rgba(255, 215, 0, 0.2);
}
.preview-theme-nocturno .preview-card-logo { filter: brightness(2); }
.preview-theme-nocturno .preview-card-url { color: rgba(255, 215, 0, 0.7); }
.preview-theme-nocturno .preview-cell {
    background: #1b2838;
    color: #c5cae9;
}
.preview-theme-nocturno .preview-cell.has-number {
    background: rgba(255, 215, 0, 0.08);
    color: #c5cae9;
}
.preview-theme-nocturno .preview-cell.marked {
    background: #1565c0;
    color: white;
    box-shadow: 0 0 6px rgba(21, 101, 192, 0.4);
}
.preview-theme-nocturno .preview-card-footer {
    color: rgba(255, 215, 0, 0.7);
    border-top-color: rgba(255, 215, 0, 0.2);
}

.cartones-pdf-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px auto 24px;
    padding: 12px 24px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    font-size: var(--text-sm);
    color: #0369a1;
}

.cartones-pdf-note svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cartones-cta-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.cartones-cta.btn {
    flex: 0 0 auto;
    width: auto;
}

@media (max-width: 1023px) {
    .cartones-preview {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 599px) {
    .cartones-preview {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .cartones-preview::-webkit-scrollbar {
        display: none;
    }
    .cartones-preview-item {
        min-width: 210px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* --- Mobile: < 480px --- */
@media (max-width: 479px) {
    .hero {
        padding-top: 24px;
    }

    .themes-section {
        padding: 40px 12px 50px;
    }

    .themes-grid {
        gap: 16px;
    }
}

/* ===== VOICES SECTION ===== */
.voices-section {
    padding: 60px 20px 70px;
    background: #f8fafc;
    text-align: center;
    position: relative;
}

.voices-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(14,165,233,0.3), #2dd4f0, rgba(14,165,233,0.3), transparent);
}

.voices-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.voice-card {
    position: relative;
    background: var(--white);
    border-radius: 20px;
    padding: 28px 16px 18px;
    border: 2px solid #e5e7eb;
    box-shadow:
        0 5px 0 #d1d5db,
        0 7px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voice-card:hover {
    top: -4px;
    border-color: var(--voice-color, #d1d5db);
    box-shadow:
        0 9px 0 #d1d5db,
        0 12px 24px rgba(0, 0, 0, 0.12);
}

.voice-card:active {
    top: 3px;
    box-shadow:
        0 1px 0 #d1d5db,
        0 2px 4px rgba(0, 0, 0, 0.05);
}

.voice-avatar-wrapper {
    width: 118px;
    height: 118px;
    margin-bottom: 14px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-avatar {
    width: 146px;
    height: 146px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.voice-card:hover .voice-avatar {
    border-color: var(--voice-color, var(--blue));
}

.voice-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--gray-dark);
    margin-bottom: 2px;
}

.voice-flag {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.voice-card--hidden {
    display: none;
}

.voice-card--reveal {
    display: flex;
    animation: voiceReveal 0.4s ease forwards;
}

@keyframes voiceReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.voices-show-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.voices-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--blue);
    background: #fff;
    border: 2px solid var(--blue);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.voices-show-more-btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

.voices-show-more-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}

.voices-show-more-btn:hover .voices-show-more-icon {
    transform: translateY(3px);
}

.voices-show-more-btn--hidden {
    display: none;
}

.theme-card--hidden {
    display: none;
}

.theme-card--reveal {
    animation: voiceReveal 0.4s ease forwards;
}

.themes-show-more-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.themes-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--blue);
    background: #fff;
    border: 2px solid var(--blue);
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.themes-show-more-btn:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

.themes-show-more-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}

.themes-show-more-btn:hover .themes-show-more-icon {
    transform: translateY(3px);
}

.voice-tone {
    font-size: var(--text-sm);
    color: var(--gray);
    margin-bottom: 14px;
}

.voice-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 14px;
    border: 2px solid var(--voice-color, var(--blue));
    background: transparent;
    color: var(--voice-color, var(--blue));
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.voice-play-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.voice-play-btn:hover {
    background: var(--voice-color, var(--blue));
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.voice-play-btn:active {
    transform: scale(0.95);
}

.voice-play-btn.playing {
    background: var(--voice-color, var(--blue));
    color: #fff;
    animation: voice-pulse 0.8s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 8px rgba(26, 188, 245, 0.2); }
}

@media (max-width: 767px) {
    .voice-btn-full {
        display: none;
    }
}

/* Voices responsive */
@media (min-width: 768px) {
    .voices-section {
        padding: 70px 40px 90px;
    }

    .voices-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

@media (min-width: 1024px) {
    .voices-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1440px) {
    .voices-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 24px;
    }
}

@media (max-width: 479px) {
    .voices-section {
        padding: 40px 12px 50px;
    }

    .voices-grid {
        gap: 16px;
    }
}

/* ===== YOUTUBE CTA SECTION ===== */
.youtube-cta-section {
    padding: 24px 24px;
    text-align: center;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid #e5e7eb;
}

.youtube-cta-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.youtube-cta-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--gray);
    margin: 0;
}

.youtube-cta-text {
    display: none;
}

.youtube-cta-btn {
    font-size: inherit !important;
}

@media (max-width: 479px) {
    .youtube-cta-section {
        padding: 20px 12px;
    }

    .youtube-cta-content {
        gap: 12px;
    }
}