/* ============================================================
   HERO V2 — layout split + mockup + orbes
   ============================================================ */

.brand-accent { color: var(--color-acento); }

.hero-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #0b1f45 0%, #0d2858 50%, #0a1a3a 100%);
	overflow: hidden;
	padding: 120px 0 60px;
}

.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}
.hero-orb--1 { width: 500px; height: 500px; background: rgba(26,90,180,.35); top: -120px; right: -80px; }
.hero-orb--2 { width: 350px; height: 350px; background: rgba(232,160,32,.18); bottom: 0; left: -80px; }
.hero-orb--3 { width: 200px; height: 200px; background: rgba(80,160,255,.2); top: 40%; left: 35%; }

.hero-grid-overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.hero-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 1;
}

.hero-content { max-width: 560px; }

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .8rem;
	font-weight: 600;
	color: rgba(255,255,255,.75);
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(255,255,255,.06);
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 28px;
	letter-spacing: .04em;
}
.hero-badge-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #22c55e;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(34,197,94,.25);
	animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
	0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
	50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.1); }
}

.hero-title {
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	font-weight: 900;
	line-height: 1.1;
	color: var(--color-blanco);
	margin-bottom: 20px;
	letter-spacing: -.02em;
}
.hero-highlight { color: var(--color-acento); display: inline-block; }
.hero-subtitle {
	font-size: 1.05rem;
	color: rgba(255,255,255,.65);
	line-height: 1.7;
	margin-bottom: 36px;
	max-width: 480px;
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-cta .btn-primary {
	background: var(--color-acento);
	color: #1a1a1a;
	padding: 14px 28px;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 4px 20px rgba(232,160,32,.4);
}
.hero-cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232,160,32,.5); }
.hero-cta .btn-ghost {
	background: #25d366;
	color: #fff;
	border-color: #25d366;
}
.hero-cta .btn-ghost:hover {
	background: #1dbb59;
	border-color: #1dbb59;
}

.hero-stats { display: flex; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.hero-stat { display: flex; flex-direction: column; padding-right: 32px; }
.hero-stat strong { font-size: 1.6rem; font-weight: 900; color: var(--color-blanco); line-height: 1; }
.hero-stat span { font-size: .75rem; color: rgba(255,255,255,.5); margin-top: 3px; }
.hero-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,.15); margin-right: 32px; flex-shrink: 0; }

/* MOCKUP */
.hero-visual { position: relative; }
.mockup-browser {
	background: #1a2744;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.1);
	box-shadow: 0 32px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05) inset;
	transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
	transition: transform .4s ease;
}
.hero-visual:hover .mockup-browser { transform: perspective(1000px) rotateY(-1deg) rotateX(1deg); }

.mockup-bar { background: #111d35; padding: 10px 16px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.15); }
.mockup-dot:nth-child(1) { background: #ff5f57; }
.mockup-dot:nth-child(2) { background: #ffbd2e; }
.mockup-dot:nth-child(3) { background: #28c840; }
.mockup-url { background: rgba(255,255,255,.07); border-radius: 6px; padding: 4px 16px; font-size: .72rem; color: rgba(255,255,255,.4); margin-left: 8px; flex: 1; text-align: center; }

.mockup-screen { padding: 24px; background: #f8faff; }
.mockup-hero-block { background: linear-gradient(135deg, #0d2858, #1a3a6b); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.mockup-tag { width: 80px; height: 10px; background: rgba(232,160,32,.5); border-radius: 999px; margin-bottom: 12px; }
.mockup-h1 { height: 14px; background: rgba(255,255,255,.85); border-radius: 6px; margin-bottom: 8px; width: 90%; }
.mockup-h1--short { width: 65%; margin-bottom: 12px; }
.mockup-p { height: 8px; background: rgba(255,255,255,.3); border-radius: 4px; margin-bottom: 6px; width: 100%; }
.mockup-p--short { width: 75%; margin-bottom: 14px; }
.mockup-btn-row { display: flex; gap: 8px; }
.mockup-btn { height: 24px; width: 80px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.mockup-btn--fill { background: var(--color-acento); border-color: var(--color-acento); }
.mockup-cards-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mockup-card { background: var(--color-blanco); border-radius: 8px; overflow: hidden; border: 1px solid #e8ecf4; }
.mockup-card-img { height: 50px; background: linear-gradient(135deg, #e8f4f8, #d4eaf5); }
.mockup-card-img--2 { background: linear-gradient(135deg, #fef3e8, #fde8c8); }
.mockup-card-img--3 { background: linear-gradient(135deg, #f0fdf4, #dcfce7); }
.mockup-card-line { height: 7px; background: #e8ecf4; border-radius: 4px; margin: 8px 8px 4px; }
.mockup-card-line--short { width: 60%; margin-top: 0; }

/* Floating badges */
.hero-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--color-blanco);
	border-radius: 12px;
	padding: 10px 16px;
	font-size: .82rem;
	font-weight: 700;
	color: var(--color-primario);
	box-shadow: 0 8px 32px rgba(0,0,0,.2);
	white-space: nowrap;
	animation: float-up 3s ease-in-out infinite;
}
.hero-float-icon { font-size: 1.1rem; }
.hero-float--1 { bottom: 60px; left: -40px; animation-delay: 0s; }
.hero-float--2 { top: 30px; right: -24px; animation-delay: 1s; }
.hero-float--3 { bottom: 140px; right: -32px; animation-delay: 2s; }

@keyframes float-up {
	0%,100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@media (max-width: 1024px) {
	.hero-wrap { grid-template-columns: 1fr; gap: 40px; }
	.hero-content { max-width: 100%; }
	.hero-visual { display: none; }
	.hero-section { min-height: auto; padding: 140px 0 80px; }
}
@media (max-width: 600px) {
	.hero-title { font-size: 2.2rem; }
	.hero-cta { flex-direction: column; align-items: flex-start; }
	.hero-stats { flex-wrap: wrap; gap: 16px; }
	.hero-stat-sep { display: none; }
	.hero-stat { padding-right: 20px; }
}