/* QuinielaLab — Landing de ventas. Profesional, impactante y sencillo. */
.qll {
	--g:#0a6e3c; --g-d:#075a30; --g-l:#12864a; --gold:#b4791d;
	--ink:#12241a; --ink-soft:#5a6b60; --line:#e4ece7; --bg-soft:#f5f9f6;
	--radius:16px; --shadow:0 10px 30px rgba(10,60,35,.08);
	max-width:1080px; margin:0 auto; color:var(--ink);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	line-height:1.5;
}
.qll *{ box-sizing:border-box; }
.qll svg{ width:1em; height:1em; }

/* Botones */
.qll-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
	padding:.9rem 1.5rem; border-radius:999px; font-weight:700; font-size:1.02rem;
	text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.qll-btn-primary{ background:var(--g); color:#fff !important; box-shadow:0 8px 20px rgba(10,110,60,.28); }
.qll-btn-primary:hover{ background:var(--g-d); transform:translateY(-2px); box-shadow:0 12px 26px rgba(10,110,60,.34); }
.qll-btn-ghost{ background:transparent; color:var(--g) !important; border:1.5px solid var(--line); }
.qll-btn-ghost:hover{ border-color:var(--g); background:var(--bg-soft); }
.qll-btn-block{ width:100%; }

/* HERO */
.qll-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:center;
	padding:3.5rem 1.5rem 2.5rem; background:
		radial-gradient(1200px 500px at 85% -10%, rgba(18,134,74,.10), transparent 60%),
		linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
	border-radius:24px; margin-top:1rem; }
.qll-eyebrow{ display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.14em;
	text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.qll-h1{ font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; font-weight:800; letter-spacing:-.02em; margin:0 0 1rem; }
.qll-lead{ font-size:1.12rem; color:var(--ink-soft); margin:0 0 1.6rem; max-width:34ch; }
.qll-cta-row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.qll-micro{ font-size:.86rem; color:var(--ink-soft); margin-top:1rem; }

/* Boleto decorativo */
.qll-hero-art{ display:flex; justify-content:center; }
.qll-ticket{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
	padding:1rem 1.1rem; width:100%; max-width:300px; transform:rotate(1.5deg); }
.qll-ticket-head{ display:flex; justify-content:space-between; align-items:center;
	font-weight:800; color:var(--g); border-bottom:2px solid var(--line); padding-bottom:.5rem; margin-bottom:.5rem; }
.qll-ticket-j{ font-size:.8rem; color:var(--gold); }
.qll-ticket-row{ display:flex; align-items:center; gap:.3rem; padding:.12rem 0; }
.qll-ticket-n{ width:1.3rem; font-size:.72rem; color:var(--ink-soft); text-align:center; }
.qll-cell{ flex:1; text-align:center; font-size:.8rem; font-weight:700; color:var(--ink-soft);
	background:var(--bg-soft); border-radius:5px; padding:.2rem 0; }
.qll-cell.on{ background:var(--g); color:#fff; }

/* TRUST */
.qll-trust{ display:flex; justify-content:center; gap:2.2rem; flex-wrap:wrap;
	padding:1.4rem; margin:1.4rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.qll-trust div{ display:flex; align-items:center; gap:.5rem; color:var(--ink-soft); font-weight:600; font-size:.94rem; }
.qll-trust svg{ width:1.25rem; height:1.25rem; color:var(--g); }

/* SERVICIOS */
.qll-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; padding:2rem 1.5rem; }
.qll-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
	padding:1.6rem 1.4rem; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.qll-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.qll-card-featured{ border-color:transparent; box-shadow:0 14px 34px rgba(10,110,60,.14);
	outline:2px solid var(--g); }
.qll-tag{ position:absolute; top:-.7rem; left:1.4rem; background:var(--gold); color:#fff;
	font-size:.7rem; font-weight:800; padding:.2rem .7rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.qll-ico{ width:2.6rem; height:2.6rem; display:flex; align-items:center; justify-content:center;
	background:var(--bg-soft); border-radius:12px; color:var(--g); margin-bottom:.9rem; }
.qll-ico svg{ width:1.4rem; height:1.4rem; }
.qll-card h3{ font-size:1.2rem; margin:0 0 .4rem; }
.qll-card p{ color:var(--ink-soft); font-size:.95rem; margin:0 0 1.1rem; flex:1; }
.qll-link{ color:var(--g); font-weight:700; text-decoration:none; }
.qll-link:hover{ color:var(--g-d); }
.qll-link-strong{ font-size:1.02rem; }

/* CÓMO FUNCIONA */
.qll-h2{ font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-.01em; text-align:center; margin:0 0 1.6rem; }
.qll-how{ padding:2.5rem 1.5rem; }
.qll-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.qll-step{ text-align:center; padding:0 .5rem; }
.qll-step-n{ display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
	border-radius:50%; background:var(--g); color:#fff; font-weight:800; font-size:1.1rem; margin-bottom:.8rem; }
.qll-step h4{ margin:0 0 .3rem; font-size:1.05rem; }
.qll-step p{ color:var(--ink-soft); font-size:.92rem; margin:0; }

/* PRECIO */
.qll-pricing{ padding:1rem 1.5rem 3rem; }
.qll-price-card{ max-width:460px; margin:0 auto; text-align:center; background:#fff;
	border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:2.2rem 1.8rem; }
.qll-price{ display:flex; align-items:baseline; justify-content:center; gap:.3rem; margin:.4rem 0; }
.qll-price-num{ font-size:3.2rem; font-weight:800; color:var(--g); letter-spacing:-.02em; }
.qll-price-unit{ font-size:1.1rem; color:var(--ink-soft); font-weight:700; }
.qll-price-sub{ color:var(--ink-soft); margin:0 0 1.3rem; }
.qll-list{ list-style:none; margin:0 0 1.6rem; padding:0; text-align:left; display:inline-block; }
.qll-list li{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; font-size:.98rem; }
.qll-list svg{ width:1.15rem; height:1.15rem; color:var(--g); flex:0 0 auto; }

/* Planes (Básico/Medio/Pro) */
.qll-pricing-h{ text-align:center; }
.qll-pricing-sub{ text-align:center; color:var(--ink-soft); max-width:56ch; margin:.2rem auto 1.8rem; }
.qll-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:940px; margin:0 auto 1.8rem; }
.qll-plan{ position:relative; background:#fff; border:1px solid var(--line); border-radius:20px;
	padding:1.9rem 1.4rem 1.6rem; text-align:center; display:flex; flex-direction:column;
	transition:transform .15s ease, box-shadow .15s ease; }
.qll-plan:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.qll-plan-featured{ border-color:var(--g); box-shadow:0 14px 34px rgba(10,110,60,.16); }
.qll-plan-badge{ position:absolute; top:-.75rem; left:50%; transform:translateX(-50%); background:var(--gold);
	color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
	padding:.28rem .85rem; border-radius:999px; white-space:nowrap; }
.qll-plan-name{ font-size:1.15rem; margin:.2rem 0 .4rem; }
.qll-plan-price{ display:flex; align-items:baseline; justify-content:center; gap:.25rem; }
.qll-plan-num{ font-size:2.5rem; font-weight:800; color:var(--g); letter-spacing:-.02em; }
.qll-plan-unit{ font-size:1rem; color:var(--ink-soft); font-weight:700; }
.qll-plan-uses{ color:var(--ink); font-weight:600; margin:.55rem 0 .1rem; }
.qll-plan-year{ color:var(--ink-soft); font-size:.85rem; margin:0 0 1.2rem; }
.qll-plan .qll-btn{ margin-top:auto; }
.qll-list-center{ display:block; text-align:center; max-width:480px; margin:0 auto; }
.qll-list-center li{ justify-content:center; }

.qll-legal{ text-align:center; font-size:.8rem; color:#9aa8a0; padding:0 1.5rem 2rem; }

/* RESPONSIVE */
@media (max-width:820px){
	.qll-hero{ grid-template-columns:1fr; text-align:center; padding-top:2.5rem; }
	.qll-hero-txt{ order:1; } .qll-hero-art{ order:2; margin-top:1.5rem; }
	.qll-lead{ margin-left:auto; margin-right:auto; }
	.qll-cta-row{ justify-content:center; }
	.qll-services{ grid-template-columns:1fr; }
	.qll-steps{ grid-template-columns:1fr; gap:1.8rem; }
	.qll-plans{ grid-template-columns:1fr; max-width:420px; }
}