/*
=========================================
BTC APUESTAS
MAIN CSS
=========================================
*/

:root{

--bg:#080808;
--bg2:#101010;
--bg3:#181818;

--card:#121212;

--border:#252525;

--text:#ffffff;
--text2:#bdbdbd;

--accent:#f7931a;
--accent-hover:#ffab42;

--success:#27ae60;
--danger:#e74c3c;

--radius:18px;

--transition:.28s ease;

--shadow:0 15px 45px rgba(0,0,0,.45);

--container:1280px;

}



*{
margin:0;
padding:0;
box-sizing:border-box;
}



html{

scroll-behavior:smooth;

}



body{

background:var(--bg);

color:var(--text);

font-family:Inter,system-ui,sans-serif;

font-size:clamp(.95rem,1vw,1.05rem);

line-height:1.7;

overflow-x:hidden;

}



img{

max-width:100%;

height:auto;

display:block;

}



a{

color:inherit;

text-decoration:none;

transition:var(--transition);

}



button{

font:inherit;

cursor:pointer;

background:none;

border:none;

}



input{

font:inherit;

}



.container{

width:min(calc(100% - 32px),var(--container));

margin-inline:auto;

}



.site-main{

padding:80px 0;

min-height:70vh;

}



::selection{

background:var(--accent);

color:#000;

}



/* ===========================
Typography
=========================== */



h1{

font-size:clamp(2.2rem,5vw,4rem);

line-height:1.1;

margin-bottom:28px;

font-weight:800;

}



h2{

font-size:clamp(1.8rem,3vw,2.8rem);

margin:48px 0 24px;

line-height:1.2;

}



h3{

font-size:clamp(1.3rem,2vw,1.8rem);

margin-bottom:18px;

}



h4{

margin-bottom:16px;

}



p{

margin-bottom:22px;

color:var(--text2);

}



strong{

color:#fff;

}



ul,
ol{

padding-left:22px;

margin-bottom:24px;

}



li{

margin-bottom:10px;

}



blockquote{

padding:30px;

background:var(--bg2);

border-left:4px solid var(--accent);

border-radius:var(--radius);

margin:40px 0;

}



code{

background:#000;

padding:3px 8px;

border-radius:8px;

}



pre{

overflow:auto;

background:#050505;

padding:20px;

border-radius:16px;

}



/* ===========================
Header
=========================== */



.site-header{

position:sticky;

top:0;

left:0;

width:100%;

z-index:9999;

background:rgba(8,8,8,.75);

backdrop-filter:blur(20px);

border-bottom:1px solid rgba(255,255,255,.05);

}



.header-inner{

display:flex;

align-items:center;

justify-content:space-between;

height:82px;

}



.logo-text{

font-size:2rem;

font-weight:900;

letter-spacing:-1px;

}



.logo-text span{

color:var(--accent);

}



/* ===========================
Desktop menu
=========================== */



.desktop-menu{

display:flex;

align-items:center;

gap:34px;

list-style:none;

}



.desktop-menu li{

margin:0;

}



.desktop-menu a{

color:#fff;

font-weight:600;

position:relative;

padding:8px 0;

}



.desktop-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

height:2px;

width:0;

background:var(--accent);

transition:.3s;

}



.desktop-menu a:hover{

color:var(--accent);

}



.desktop-menu a:hover::after{

width:100%;

}



/* ===========================
Buttons
=========================== */



.header-actions{

display:flex;

align-items:center;

gap:14px;

}



.search-btn,

.burger{

width:48px;

height:48px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:var(--bg2);

transition:.25s;

}



.search-btn:hover,

.burger:hover{

background:var(--accent);

transform:translateY(-2px);

}



.search-btn svg{

stroke:#fff;

stroke-width:2;

fill:none;

}



.burger{

display:none;

flex-direction:column;

gap:6px;

}



.burger span{

width:24px;

height:2px;

background:#fff;

transition:.3s;

}



/* ===========================
Buttons
=========================== */



.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

background:var(--accent);

color:#000;

font-weight:700;

border-radius:16px;

transition:.3s;

}



.btn:hover{

background:var(--accent-hover);

transform:translateY(-3px);

box-shadow:var(--shadow);

}



/* ===========================
Cards
=========================== */



.card{

background:var(--card);

border:1px solid var(--border);

border-radius:22px;

padding:28px;

transition:.3s;

}



.card:hover{

transform:translateY(-6px);

border-color:var(--accent);

}



/* ===========================
Tables
=========================== */



table{

width:100%;

border-collapse:collapse;

margin:40px 0;

background:var(--card);

overflow:hidden;

border-radius:20px;

}



th{

background:var(--accent);

color:#000;

padding:18px;

text-align:left;

}



td{

padding:18px;

border-top:1px solid var(--border);

}



/* ===========================
Forms
=========================== */



input,
textarea,
select{

width:100%;

background:var(--bg2);

border:1px solid var(--border);

border-radius:16px;

padding:16px;

color:#fff;

transition:.25s;

}



input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(247,147,26,.15);

}



input[type=submit]{

background:var(--accent);

color:#000;

font-weight:700;

cursor:pointer;

}



input[type=submit]:hover{

background:var(--accent-hover);

}



/* ==========================================
   SEARCH OVERLAY
========================================== */

.search-overlay{

position:fixed;
inset:0;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,.88);
backdrop-filter:blur(18px);

opacity:0;
visibility:hidden;

transition:.35s ease;

z-index:10000;

}

.search-overlay.active{

opacity:1;
visibility:visible;

}

.search-box{

width:min(92%,700px);

}

.search-box form{

display:flex;
gap:16px;

}

.search-box input[type="search"]{

flex:1;

height:62px;

font-size:1.05rem;

padding:0 22px;

background:#111;

border:1px solid #2a2a2a;

color:#fff;

border-radius:18px;

}

.search-box input[type="submit"]{

width:170px;

height:62px;

border:none;

background:var(--accent);

color:#000;

font-weight:700;

border-radius:18px;

transition:.25s;

}

.search-box input[type="submit"]:hover{

background:var(--accent-hover);

}

.close-search{

position:absolute;

top:35px;
right:35px;

font-size:40px;

color:#fff;

transition:.3s;

}

.close-search:hover{

color:var(--accent);
transform:rotate(90deg);

}



/* ==========================================
   MOBILE MENU
========================================== */

.mobile-overlay{

position:fixed;

inset:0;

background:rgba(8,8,8,.96);

backdrop-filter:blur(24px);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:9999;

}

.mobile-overlay.active{

opacity:1;

visibility:visible;

}



.close-menu{

position:absolute;

top:32px;

right:32px;

font-size:42px;

color:#fff;

transition:.3s;

}

.close-menu:hover{

color:var(--accent);

transform:rotate(90deg);

}



.mobile-logo{

font-size:2.2rem;

font-weight:900;

margin-bottom:60px;

}



.mobile-logo span{

color:var(--accent);

}



.mobile-menu{

list-style:none;

display:flex;

flex-direction:column;

align-items:center;

gap:26px;

}



.mobile-menu li{

margin:0;

}



.mobile-menu a{

font-size:clamp(1.4rem,3vw,2rem);

font-weight:700;

transition:.3s;

}



.mobile-menu a:hover{

color:var(--accent);

transform:translateX(6px);

}



.mobile-search{

margin-top:60px;

width:min(90%,420px);

}



/* ==========================================
   FOOTER
========================================== */

.site-footer{

margin-top:80px;

border-top:1px solid var(--border);

background:#050505;

}



.footer-inner{

padding:60px 0;

display:flex;

flex-direction:column;

align-items:center;

gap:30px;

}



.footer-logo{

font-size:2rem;

font-weight:900;

}



.footer-logo span{

color:var(--accent);

}



.footer-menu{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:28px;

list-style:none;

}



.footer-menu li{

margin:0;

}



.footer-menu a{

color:#bdbdbd;

}



.footer-menu a:hover{

color:var(--accent);

}



.copyright{

font-size:.9rem;

color:#7d7d7d;

}



/* ==========================================
   WORDPRESS
========================================== */

.alignwide{

max-width:1200px;

margin-left:auto;

margin-right:auto;

}


.alignfull{

width:100%;

margin-left:0;

margin-right:0;

}



.wp-caption{

max-width:100%;

margin:30px 0;

}



.wp-caption-text{

margin-top:12px;

font-size:.9rem;

color:#999;

text-align:center;

}



.gallery{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}



.gallery img{

border-radius:18px;

}



/* ==========================================
   TABLET
========================================== */

@media(max-width:1100px){

.desktop-nav{

display:none;

}

.burger{

display:flex;

}

.header-inner{

height:76px;

}

}



/* ==========================================
   992
========================================== */

@media(max-width:992px){

.container{

width:min(calc(100% - 28px),100%);

}

.site-main{

padding:60px 0;

}

.search-box form{

flex-direction:column;

}

.search-box input[type="submit"]{

width:100%;

}

.footer-menu{

flex-direction:column;

gap:18px;

}

}



/* ==========================================
   768
========================================== */

@media(max-width:768px){

h1{

font-size:2.4rem;

}

h2{

font-size:1.9rem;

}

.card{

padding:22px;

}

table{

display:block;

overflow-x:auto;

}

.header-inner{

height:72px;

}

.logo-text{

font-size:1.7rem;

}

}



/* ==========================================
   576
========================================== */

@media(max-width:576px){

.container{

width:calc(100% - 24px);

}

.mobile-menu{

gap:22px;

}

.mobile-menu a{

font-size:1.45rem;

}

.close-menu,

.close-search{

top:22px;

right:22px;

}

}



/* ==========================================
   480
========================================== */

@media(max-width:480px){

.site-main{

padding:45px 0;

}

.header-inner{

height:68px;

}

.logo-text{

font-size:1.5rem;

}

.search-btn,
.burger{

width:44px;

height:44px;

}

.card{

padding:18px;

border-radius:18px;

}

}



/* ==========================================
   390
========================================== */

@media(max-width:390px){

body{

font-size:.95rem;

}

.mobile-logo{

font-size:1.8rem;

}

.mobile-menu a{

font-size:1.25rem;

}

}



/* ==========================================
   360
========================================== */

@media(max-width:360px){

h1{

font-size:2rem;

}

h2{

font-size:1.6rem;

}

.logo-text{

font-size:1.35rem;

}

}



/* ==========================================
   320
========================================== */

@media(max-width:320px){

.container{

width:calc(100% - 18px);

}

.header-actions{

gap:8px;

}

.search-btn,
.burger{

width:40px;

height:40px;

}

.mobile-menu a{

font-size:1.1rem;

}

}



.site-header{

transition:.35s ease;

}

.site-header.scrolled{

background:rgba(8,8,8,.93);

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.site-header.header-hidden{

transform:translateY(-100%);

}

.desktop-menu a{

padding:12px 18px;

border-radius:14px;

}

.desktop-menu a:hover{

background:rgba(247,147,26,.08);

}

.logo-text{

transition:.3s;

}

.logo-text:hover{

color:var(--accent);

}

.logo-text:hover span{

color:#fff;

}

.search-overlay{

transition:.35s;

}

.mobile-overlay{

transition:.35s;

}


/*==================================================
ENTRY CONTENT
==================================================*/

.entry-content{

max-width:900px;

margin:auto;

}



.entry-content>*:first-child{

margin-top:0;

}



.entry-content>*:last-child{

margin-bottom:0;

}



.entry-content h1{

font-size:clamp(2.2rem,5vw,3.8rem);

margin:0 0 35px;

line-height:1.15;

}



.entry-content h2{

margin:60px 0 24px;

font-size:clamp(1.8rem,3vw,2.6rem);

}



.entry-content h3{

margin:42px 0 20px;

font-size:1.5rem;

}



.entry-content h4{

margin:35px 0 18px;

}



.entry-content p{

margin-bottom:24px;

font-size:1.08rem;

line-height:1.85;

color:var(--text2);

}



.entry-content a{

color:var(--accent);

font-weight:600;

}



.entry-content a:hover{

color:#fff;

}



.entry-content img{

border-radius:18px;

margin:40px auto;

}



.entry-content ul,

.entry-content ol{

margin:30px 0;

padding-left:24px;

}



.entry-content li{

margin-bottom:12px;

}



.entry-content table{

display:table;

width:100%;

overflow:hidden;

border-radius:18px;

margin:40px 0;

}



.entry-content th{

background:var(--accent);

padding:18px;

color:#000;

}



.entry-content td{

padding:18px;

background:#121212;

border-top:1px solid #222;

}



.entry-content blockquote{

margin:40px 0;

padding:30px;

border-left:4px solid var(--accent);

background:#121212;

border-radius:18px;

}



.entry-content hr{

margin:60px 0;

border:none;

height:1px;

background:#222;

}



/*==================================================
RELATED
==================================================*/

.related-posts{

margin-top:100px;

}



.related-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.related-card{

background:#111;

border:1px solid #222;

border-radius:20px;

overflow:hidden;

transition:.3s;

}



.related-card:hover{

transform:translateY(-8px);

border-color:var(--accent);

}



.related-thumb img{

width:100%;

aspect-ratio:16/9;

object-fit:cover;

}



.related-card h3{

padding:20px;

font-size:1.15rem;

}



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

@media(max-width:900px){

.related-grid{

grid-template-columns:1fr;

}

.entry-content{

max-width:100%;

}

}






/*==================================================
BREADCRUMBS
==================================================*/

.btc-breadcrumbs{

display:flex;

align-items:center;

flex-wrap:wrap;

gap:10px;

margin-bottom:45px;

font-size:.9rem;

color:#888;

}



.btc-breadcrumbs a{

color:#aaa;

transition:.25s;

}



.btc-breadcrumbs a:hover{

color:var(--accent);

}



.btc-breadcrumbs span{

color:#555;

}



.btc-breadcrumbs span:last-child{

color:#fff;

font-weight:600;

}



@media(max-width:576px){

.btc-breadcrumbs{

font-size:.82rem;

margin-bottom:30px;

}

}



/*==================================================
POST GRID
==================================================*/


.posts-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.post-card{

background:var(--card);

border:1px solid var(--border);

border-radius:22px;

overflow:hidden;

transition:.3s;

}



.post-card:hover{

transform:translateY(-7px);

border-color:var(--accent);

}



.post-image img{

width:100%;

aspect-ratio:16/9;

object-fit:cover;

}



.post-card-content{

padding:25px;

}



.post-card h2{

font-size:1.4rem;

margin:0 0 15px;

}



.post-card h2 a:hover{

color:var(--accent);

}



.archive-header{

max-width:800px;

margin-bottom:50px;

}



.archive-header p{

color:var(--text2);

}



@media(max-width:992px){

.posts-grid{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:650px){

.posts-grid{

grid-template-columns:1fr;

}

}



/*==================================================
SEARCH
==================================================*/


.search-header{

margin-bottom:50px;

}



.search-header h1{

font-size:clamp(2rem,4vw,3rem);

}



.search-header span{

color:var(--accent);

}



/*==================================================
404
==================================================*/


.error-page{

min-height:65vh;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}



.error-number{

font-size:clamp(6rem,18vw,12rem);

font-weight:900;

line-height:1;

color:var(--accent);

opacity:.9;

}



.error-page h1{

margin:30px 0 15px;

}



.error-page p{

max-width:500px;

}


.page-content{

width:100%;

}


.entry-content{

max-width:900px;

margin:0 auto;

}


.entry-content .alignwide{

width:auto;

max-width:1100px;

margin-left:auto;

margin-right:auto;

transform:none;

}


.entry-content .alignfull{

width:100%;

margin-left:0;

transform:none;

}

.entry-header{

margin-bottom:40px;

}


.entry-title{

font-size:clamp(2.2rem,5vw,3.6rem);

line-height:1.15;

font-weight:800;

margin:0;

}



/* ==========================================
   FORCE DARK TABLE BORDERS
========================================== */

.entry-content table,
.entry-content table *,
.wp-block-table table,
.wp-block-table table * {

    border-color:#262626 !important;

}



.entry-content table,
.wp-block-table table {

    width:100% !important;

    border-collapse:separate !important;

    border-spacing:0 !important;

    background:#111 !important;

    border:1px solid #262626 !important;

    border-radius:18px !important;

    overflow:hidden !important;

}



.entry-content table th,
.entry-content table td,
.wp-block-table table th,
.wp-block-table table td {

    background:#111 !important;

    color:#d5d5d5 !important;

    border-top:1px solid #262626 !important;

    border-bottom:1px solid #262626 !important;

    border-left:1px solid #262626 !important;

    border-right:1px solid #262626 !important;

    padding:16px 20px !important;

}



.entry-content table th,
.wp-block-table table th {

    background:#181818 !important;

    color:#fff !important;

    font-weight:700 !important;

}



.entry-content table tr,
.wp-block-table table tr {

    background:#111 !important;

}



.entry-content table tr:hover,
.wp-block-table table tr:hover {

    background:#161616 !important;

}



.entry-content table tbody tr:last-child td,
.wp-block-table table tbody tr:last-child td {

    border-bottom:0 !important;

}



/* Mobile */

@media(max-width:768px){

    .entry-content table,
    .wp-block-table table {

        display:block !important;

        overflow-x:auto !important;

        white-space:nowrap !important;

    }

}