/*!
Theme Name: cuatrobetlive
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cuatrobetlive
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

cuatrobetlive is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
:root{
	--bg:#070815;
	--bg2:#0a0e22;
	--panel:#0e1530;
	--card:#111b3c;
	--ink:#eaf2ff;
	--mut:rgba(234,242,255,.72);

	--neo:#00f5d4;
	--vio:#7c5cff;
	--pink:#ff3bd7;
	--lime:#b9ff00;
	--gold:#ffb703;

	--line: rgba(255,255,255,.12);
	--line2: rgba(255,255,255,.08);

	--r:10px;
	--max:1180px;
	--shadow: 0 18px 50px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
	font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:var(--ink);
	line-height:1.45;
	background:
			radial-gradient(900px 520px at 18% 0%, rgba(124,92,255,.25), transparent 62%),
			radial-gradient(900px 520px at 82% 12%, rgba(0,245,212,.18), transparent 62%),
			radial-gradient(700px 380px at 50% 86%, rgba(255,59,215,.12), transparent 68%),
			linear-gradient(180deg,var(--bg),var(--bg2));
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(var(--max),calc(100% - 48px));margin:0 auto}

/* ===== Header ===== */
header{
	position:sticky;top:0;z-index:50;
	background:rgba(7,8,21,.84);
	backdrop-filter: blur(12px);
	border-bottom:1px solid var(--line);
}
.head{
	display:flex;align-items:center;justify-content:space-between;
	padding:14px 0;
	gap:14px;
}
.brand{
	display:flex;align-items:center;gap:10px;
	font-weight:1100;font-style:italic;
}
.brand .mark{
	width:14px;height:14px;border-radius:3px;
	background:linear-gradient(135deg,var(--neo),var(--vio));
	box-shadow:0 0 26px rgba(0,245,212,.35);
}
.nav{
	display:flex;gap:14px;
	font-size:12px;font-weight:900;
	color:rgba(234,242,255,.85);
}
.nav a{opacity:.78}
.nav a:hover{opacity:1}
.actions{display:flex;gap:10px;align-items:center}
.search{
	display:flex;align-items:center;gap:8px;
	padding:8px 12px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.05);
}
.search input{
	width:220px;
	background:transparent;border:0;outline:0;color:#fff;
}
.btn{
	border:1px solid rgba(255,255,255,.16);
	background:transparent;
	color:#fff;
	padding:10px 14px;
	border-radius:999px;
	font-weight:1000;
	font-size:12px;
	cursor:pointer;
}
.btn.primary{
	background: #FF6671;
	border:0;
	color:#08121a;
}
@media(max-width:980px){
	.nav{display:none}
	.search input{width:140px}
}

/* ===== Minimal centered hero ===== */
.hero{
	padding:56px 0 44px;
	text-align:center;
}
.hero h1{
	margin:0;
	font-size: clamp(34px,5vw,68px);
	font-weight:1200;
	letter-spacing:-.8px;
	text-transform:uppercase;
}
.hero h1 span{color:var(--lime)}
.hero .cta{
	margin-top:18px;
	display:inline-flex;align-items:center;gap:10px;
	padding:12px 18px;
	border-radius:999px;
	background:#FF6671;
	color:#fff;
	font-weight:1100;
	border:0;cursor:pointer;
	box-shadow:0 18px 44px rgba(124,92,255,.25);
}
.hero .cta svg{width:16px;height:16px}
.heroHint{
	margin-top:14px;
	color:rgba(234,242,255,.62);
	font-size:12px;
}

/* ===== Panels ===== */
.section{padding:42px 0}
.panel{
	background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
	border:1px solid var(--line);
	border-radius:var(--r);
	box-shadow:var(--shadow);
	overflow:hidden;
}
.panelHead{
	padding:14px 16px;
	border-bottom:1px solid var(--line2);
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;
}
.panelHead b{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:rgba(234,242,255,.85);
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
	font-size:11px;
	padding:8px 10px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(0,0,0,.12);
	color:rgba(234,242,255,.82);
	font-weight:1000;
}

/* ===== Icons / features ===== */
.grid4{
	padding:16px;
	display:grid;
	grid-template-columns: repeat(4,1fr);
	gap:12px;
}
.tile{
	background:rgba(0,0,0,.12);
	border:1px solid rgba(255,255,255,.10);
	border-radius:var(--r);
	padding:14px;
}
.icon{
	width:36px;height:36px;border-radius:8px;
	display:grid;place-items:center;
	background:linear-gradient(135deg, rgba(0,245,212,.22), rgba(124,92,255,.22));
	border:1px solid rgba(255,255,255,.12);
}
.icon svg{width:18px;height:18px}
.tile b{display:block;margin-top:10px;font-size:13px}
.tile span{display:block;margin-top:6px;font-size:12px;color:var(--mut);line-height:1.55}
@media(max-width:980px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid4{grid-template-columns:1fr}}

/* ===== SEO Prose + table ===== */
.proseWrap{padding:16px}
.prose{
	background:rgba(0,0,0,.10);
	border:1px solid rgba(255,255,255,.10);
	border-radius:var(--r);
	padding:16px;
}
.prose h2{
	margin:0;
	font-size:18px;
	letter-spacing:-.2px;
}
.prose h3{
	margin:16px 0 8px;
	font-size:12px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:rgba(234,242,255,.82);
}
.prose p{
	margin:10px 0 0;
	color:var(--mut);
	font-size:13px;
	line-height:1.7;
}
.callout{
	margin-top:14px;
	padding:12px 14px;
	border-left:4px solid var(--gold);
	background:rgba(255,183,3,.10);
	border-radius:var(--r);
	color:rgba(255,243,219,.9);
	font-size:13px;
	line-height:1.6;
}
.tableWrap{
	margin-top:12px;
	overflow:auto;
	border:1px solid rgba(255,255,255,.10);
	border-radius:var(--r);
	background:rgba(0,0,0,.08);
}
table{
	width:100%;
	border-collapse:collapse;
	min-width:720px;
}
th,td{
	padding:12px 12px;
	border-bottom:1px solid rgba(255,255,255,.10);
	text-align:left;
	font-size:13px;
}
th{
	background:rgba(255,255,255,.06);
	text-transform:uppercase;
	letter-spacing:.12em;
	font-size:11px;
}
td small{color:rgba(234,242,255,.55)}

/* ===== Rank table (compact) ===== */
.rankWrap{padding:16px}
.rank{
	display:grid;
	grid-template-columns: 1fr;
	gap:10px;
}
.rankRow{
	display:grid;
	grid-template-columns: 1.2fr .7fr .7fr .9fr;
	gap:10px;
	align-items:center;
	padding:12px 12px;
	border-radius:var(--r);
	border:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.10);
	font-size:12px;
}
.rankRow b{font-size:12px}
.badge{
	display:inline-flex;align-items:center;gap:8px;
	padding:8px 10px;border-radius:999px;
	border:1px solid rgba(255,255,255,.12);
	background:rgba(255,255,255,.05);
	font-weight:1000;
	color:rgba(234,242,255,.84);
}
.badge i{width:8px;height:8px;border-radius:999px;background:var(--neo);display:inline-block}
.rankRow strong{color:var(--neo)}
@media(max-width:980px){
	.rankRow{grid-template-columns:1fr 1fr}
}

/* ===== Promo strip ===== */
.promo{padding:16px}
.strip{
	display:flex;align-items:center;justify-content:space-between;
	gap:14px;
	padding:14px 14px;
	border-radius:var(--r);
	border:1px dashed rgba(255,255,255,.18);
	background:rgba(255,255,255,.05);
}
.strip b{font-size:13px}
.strip span{font-size:12px;color:rgba(234,242,255,.62)}
.strip .btn.primary{white-space:nowrap}
@media(max-width:860px){.strip{flex-direction:column;align-items:flex-start}}

/* ===== Slots (5 cards) ===== */
.slotsWrap{padding:16px}
.slots{
	display:grid;
	grid-template-columns: repeat(5,1fr);
	gap:12px;
}
.slot{
	border-radius:var(--r);
	overflow:hidden;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.12);
}
.slot img{object-fit:cover}
.slot .body{padding:10px}
.slot b{font-size:13px}
.meta{
	margin-top:6px;
	display:flex;justify-content:space-between;
	font-size:11px;color:rgba(234,242,255,.62);
}
.slot button{
	margin-top:10px;
	width:100%;
	padding:9px 10px;
	border-radius:10px;
	border:1px solid rgba(255,255,255,.14);
	background: #FF6671;
	color:#fff;
	font-weight:700;
	font-size:12px;
	cursor:pointer;
}
.slot button:hover{
	background: #b94851;
	color:#08121a;
	border-color:transparent;
}
@media(max-width:1100px){.slots{grid-template-columns:repeat(2,1fr)}}

/* ===== Two-column content (more SEO) ===== */
.cols{padding:16px}
.colsGrid{
	display:grid;
	grid-template-columns: 1.2fr .8fr;
	gap:12px;
	align-items:start;
}
.box{
	background:rgba(0,0,0,.10);
	border:1px solid rgba(255,255,255,.10);
	border-radius:var(--r);
	padding:14px;
}
.box h3{
	margin:0;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.12em;
	color:rgba(234,242,255,.82);
}
.box p{margin:10px 0 0;color:var(--mut);font-size:13px;line-height:1.7}
.ul{
	margin:10px 0 0;
	padding-left:18px;
	color:rgba(234,242,255,.72);
	font-size:13px;
	line-height:1.7;
}
@media(max-width:980px){.colsGrid{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.faqWrap{padding:16px}
details{
	border:1px solid rgba(255,255,255,.12);
	border-radius:var(--r);
	padding:12px;
	margin-bottom:10px;
	background:rgba(0,0,0,.10);
}
summary{cursor:pointer;font-weight:1100;font-size:13px}
details p{margin:10px 0 0;color:var(--mut);font-size:13px;line-height:1.6}

/* ===== Footer ===== */
footer{
	margin-top:36px;
	border-top:1px solid var(--line);
	background:rgba(7,8,21,.86);
}
.fgrid{
	padding:28px 0 16px;
	display:grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap:16px;
}
.fbrand{
	font-weight:1100;font-style:italic;
	color:var(--neo);
	display:flex;align-items:center;gap:10px;
}
.fbrand .mark{
	width:12px;height:12px;border-radius:3px;
	background:linear-gradient(135deg,var(--pink),var(--vio));
}
.ftext{margin-top:10px;color:rgba(234,242,255,.62);font-size:12px;line-height:1.6;max-width:380px}
.fcol h4{
	margin:0 0 10px;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.1em;
	color:rgba(234,242,255,.82);
}
.fcol a{display:block;padding:6px 0;font-size:12px;color:rgba(234,242,255,.62)}
.fcol a:hover{color:#fff}
.fbottom{
	border-top:1px solid rgba(255,255,255,.08);
	padding:12px 0 16px;
	color:rgba(234,242,255,.45);
	font-size:11px;
}
.fbottom .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.howto-list{
	margin:12px 0 0;
	padding-left:20px;
}
.howto-list li{
	margin:8px 0;
	font-size:13px;
	line-height:1.7;
	color:var(--mut);
}

.reviews-grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:12px;
}
.review-card{
	border-radius:var(--r);
	overflow:hidden;
	border:1px solid rgba(255,255,255,.10);
	background:rgba(0,0,0,.12);
	padding:14px;
}
.review-top{
	display:flex;
	justify-content:space-between;
	gap:10px;
	margin-bottom:10px;
}
.review-top strong{
	font-size:13px;
	color:#fff;
}
.review-top span{
	color:var(--gold);
	font-size:12px;
}
.review-card p{
	margin:0;
	color:var(--mut);
	font-size:13px;
	line-height:1.65;
}

.faqWrap details p{
	margin:10px 0 0;
	color:var(--mut);
	font-size:13px;
	line-height:1.6;
}

@media(max-width:1100px){
	.reviews-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
	.reviews-grid{grid-template-columns:1fr}
}