/* AI HTML Blocks #3 - generado automaticamente. */
#aihtmlblock-3 {
--primary: #77a632;
--primary-light: #a4d957;
--primary-dark: #4a661f;
--black: #050505;
--black-soft: #0d0d0d;
--white: #ffffff;
--gray-light: #e0e0e0;
--gray-dark: #888888;
--danger: #ff4d4d;
--danger-dark: #8a0000;
}#aihtmlblock-3 * { margin: 0; padding: 0; box-sizing: border-box; }#aihtmlblock-3 { scroll-behavior: smooth; }#aihtmlblock-3 {
background-color: var(--black);
color: var(--white);
line-height: 1.6;
overflow-x: hidden;
}#aihtmlblock-3 h1, #aihtmlblock-3 h2, #aihtmlblock-3 h3, #aihtmlblock-3 h4 { letter-spacing: -0.02em; }#aihtmlblock-3 .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }#aihtmlblock-3 .bg-grid {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 70%);
z-index: 0; pointer-events: none;
}#aihtmlblock-3 .bg-glow {
position: absolute; border-radius: 50%; filter: blur(120px); z-index: 0; pointer-events: none;
}#aihtmlblock-3 .glow-green { background: var(--primary); width: 600px; height: 600px; opacity: 0.15; }#aihtmlblock-3 .glow-red { background: var(--danger); width: 500px; height: 500px; opacity: 0.1; }#aihtmlblock-3 .hero {
min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;
position: relative; background: radial-gradient(circle at 50% 50%, #141414 0%, var(--black) 100%);
overflow: hidden; padding: 120px 0;
}#aihtmlblock-3 .hero::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
animation: scanVertical 4s linear infinite; z-index: 1; opacity: 0.5;
box-shadow: 0 0 15px var(--primary);
}@keyframes scanVertical {
0% { top: 0%; opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.8; }
100% { top: 100%; opacity: 0; }
}#aihtmlblock-3 .hero-content { max-width: 1000px; position: relative; z-index: 2; }#aihtmlblock-3 .badge {
display: inline-block; padding: 10px 24px; border: 1px solid var(--primary);
color: var(--primary-light); border-radius: 50px; font-size: 0.85rem; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 32px;
background: rgba(119, 166, 50, 0.1); backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(119, 166, 50, 0.2);
}#aihtmlblock-3 .hero h1 { font-size: 4.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 30px; }#aihtmlblock-3 .hero h1 span {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}#aihtmlblock-3 .hero p { font-size: 1.3rem; color: var(--gray-light); margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 300; }#aihtmlblock-3 .btn-primary {
display: inline-block; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white); padding: 20px 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem;
border-radius: 8px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px;
box-shadow: 0 10px 30px rgba(119, 166, 50, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
border: none; cursor: pointer; position: relative; overflow: hidden;
}#aihtmlblock-3 .btn-primary::after {
content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.6s ease;
}#aihtmlblock-3 .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(119, 166, 50, 0.6); }#aihtmlblock-3 .btn-primary:hover::after { left: 100%; }#aihtmlblock-3 .section-tag { color: var(--primary); font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 15px; font-weight: 600; display: block; }#aihtmlblock-3 .why-update { padding: 140px 0; position: relative; background: var(--black); }#aihtmlblock-3 .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }#aihtmlblock-3 .why-text h2 { font-size: 3rem; margin-bottom: 30px; line-height: 1.2; }#aihtmlblock-3 .why-text p { color: var(--gray-light); margin-bottom: 30px; font-size: 1.1rem; font-weight: 300; }#aihtmlblock-3 .benefit-list { list-style: none; }#aihtmlblock-3 .benefit-list li {
display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 1.1rem; transition: all 0.3s ease;
}#aihtmlblock-3 .benefit-list li:hover { padding-left: 15px; color: var(--primary-light); }#aihtmlblock-3 .benefit-list li::before {
content: '✓'; color: var(--black); background: var(--primary); width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; flex-shrink: 0;
}#aihtmlblock-3 .why-visual {
background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 24px; padding: 40px;
position: relative; overflow: hidden; backdrop-filter: blur(20px);
}#aihtmlblock-3 .why-visual::before {
content: ''; position: absolute; inset: 0; border-radius: 24px; padding: 1px;
background: linear-gradient(135deg, var(--primary), transparent 50%, var(--primary-light));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5;
}#aihtmlblock-3 .speed-o-meter { text-align: center; margin-bottom: 30px; }#aihtmlblock-3 .speed-o-meter .score { font-size: 5rem; font-weight: 800; color: var(--primary); }#aihtmlblock-3 .speed-o-meter .label { text-transform: uppercase; letter-spacing: 2px; color: var(--gray-dark); }#aihtmlblock-3 .stat-row { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.05); }#aihtmlblock-3 .stat-row span:first-child { color: var(--gray-light); }#aihtmlblock-3 .stat-row span:last-child { color: var(--white); font-weight: 600; }#aihtmlblock-3 .danger-zone {
padding: 140px 0; background: linear-gradient(180deg, var(--black) 0%, #1a0505 50%, var(--black) 100%);
text-align: center; position: relative; overflow: hidden;
}#aihtmlblock-3 .danger-zone .bg-grid { opacity: 0.5; background-image: linear-gradient(rgba(255, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 0, 0, 0.03) 1px, transparent 1px); }#aihtmlblock-3 .danger-header { max-width: 800px; margin: 0 auto 60px; position: relative; z-index: 2; }#aihtmlblock-3 .danger-header h2 { font-size: 3rem; color: var(--white); margin-bottom: 20px; }#aihtmlblock-3 .danger-header h2 span { color: var(--danger); }#aihtmlblock-3 .danger-header p { color: var(--gray-light); font-size: 1.2rem; }#aihtmlblock-3 .danger-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 2; }#aihtmlblock-3 .danger-card {
background: rgba(255, 0, 0, 0.03); border: 1px solid rgba(255, 0, 0, 0.15); padding: 35px;
border-radius: 16px; text-align: left; transition: all 0.3s ease; position: relative; overflow: hidden;
}#aihtmlblock-3 .danger-card:hover { border-color: var(--danger); background: rgba(255, 0, 0, 0.08); transform: translateY(-5px); }#aihtmlblock-3 .danger-icon { font-size: 2rem; margin-bottom: 20px; display: inline-block; color: var(--danger); }#aihtmlblock-3 .danger-card h4 { font-size: 1.2rem; margin-bottom: 10px; color: var(--white); }#aihtmlblock-3 .danger-card p { font-size: 0.95rem; color: var(--gray-light); }#aihtmlblock-3 .danger-warning {
margin-top: 60px; padding: 25px; border: 1px dashed var(--danger); border-radius: 12px;
max-width: 700px; margin-left: auto; margin-right: auto; background: rgba(255, 0, 0, 0.05);
position: relative; z-index: 2;
}#aihtmlblock-3 .danger-warning p { color: var(--white); font-weight: 500; }#aihtmlblock-3 .danger-warning strong { color: var(--danger); }#aihtmlblock-3 .comparison { padding: 140px 0; background: var(--black-soft); position: relative; }#aihtmlblock-3 .comp-header { text-align: center; margin-bottom: 80px; }#aihtmlblock-3 .comp-header h2 { font-size: 3.5rem; font-weight: 800; max-width: 800px; margin: 0 auto; line-height: 1.2; }#aihtmlblock-3 .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }#aihtmlblock-3 .comp-col { padding: 50px; }#aihtmlblock-3 .comp-bad { background: #0f0f0f; border-right: 1px solid rgba(255,255,255,0.05); }#aihtmlblock-3 .comp-good { background: linear-gradient(135deg, rgba(119, 166, 50, 0.05) 0%, rgba(255,255,255,0.01) 100%); position: relative; }#aihtmlblock-3 .comp-good::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--primary); }#aihtmlblock-3 .comp-title-bad { color: var(--gray-dark); text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 10px; }#aihtmlblock-3 .comp-subtitle-bad { font-size: 1.8rem; margin-bottom: 30px; color: #ccc; }#aihtmlblock-3 .comp-title-good { color: var(--primary); text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; margin-bottom: 10px; }#aihtmlblock-3 .comp-subtitle-good { font-size: 1.8rem; margin-bottom: 30px; color: var(--white); }#aihtmlblock-3 .comp-list { list-style: none; }#aihtmlblock-3 .comp-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; font-size: 1.05rem; color: var(--gray-light); }#aihtmlblock-3 .comp-bad li::before { content: '✕'; color: var(--danger); font-weight: bold; margin-top: 2px; }#aihtmlblock-3 .comp-good li::before { content: '✓'; color: var(--primary); font-weight: bold; margin-top: 2px; }#aihtmlblock-3 .modern-benefits { padding: 140px 0; background: var(--black); text-align: center; }#aihtmlblock-3 .modern-benefits h2 { font-size: 3.5rem; margin-bottom: 60px; }#aihtmlblock-3 .benefits-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }#aihtmlblock-3 .benefit-card {
background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 30px 20px;
border-radius: 16px; transition: all 0.4s ease; position: relative; overflow: hidden;
}#aihtmlblock-3 .benefit-card::before {
content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;
background: linear-gradient(0deg, rgba(119, 166, 50, 0.1) 0%, transparent 100%); transition: height 0.4s ease;
}#aihtmlblock-3 .benefit-card:hover { transform: translateY(-10px); border-color: var(--primary); }#aihtmlblock-3 .benefit-card:hover::before { height: 100%; }#aihtmlblock-3 .benefit-card .icon { font-size: 2.5rem; margin-bottom: 20px; display: block; }#aihtmlblock-3 .benefit-card h4 { font-size: 1.1rem; margin-bottom: 10px; position: relative; z-index: 1; }#aihtmlblock-3 .benefit-card p { font-size: 0.9rem; color: var(--gray-dark); position: relative; z-index: 1; }#aihtmlblock-3 .time-investment {
padding: 140px 0;
background: var(--black-soft);
position: relative;
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
}#aihtmlblock-3 .ti-header { text-align: center; margin-bottom: 80px; }#aihtmlblock-3 .ti-header h2 { font-size: 3.5rem; font-weight: 800; max-width: 900px; margin: 0 auto; line-height: 1.2; }#aihtmlblock-3 .ti-header p { color: var(--gray-light); font-size: 1.2rem; max-width: 700px; margin: 20px auto 0; }#aihtmlblock-3 .time-meter-wrapper {
max-width: 900px; margin: 0 auto 60px; position: relative; padding: 40px 20px 60px;
}#aihtmlblock-3 .time-meter-track {
height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; position: relative;
background: linear-gradient(90deg, var(--gray-dark) 0%, var(--primary) 15%, var(--primary-light) 25%, var(--primary) 100%);
}#aihtmlblock-3 .meter-point {
position: absolute; top: 50%; transform: translate(-50%, -50%);
width: 20px; height: 20px; background: var(--white); border: 3px solid var(--primary);
border-radius: 50%; box-shadow: 0 0 15px var(--primary);
}#aihtmlblock-3 .meter-point.recommended { width: 28px; height: 28px; background: var(--primary-light); border-color: var(--white); }#aihtmlblock-3 .meter-label {
position: absolute; top: 35px; transform: translateX(-50%); text-align: center; width: 180px;
}#aihtmlblock-3 .meter-label .hours { display: block; font-size: 1.5rem; font-weight: 700; color: var(--white); }#aihtmlblock-3 .meter-label .desc { font-size: 0.85rem; color: var(--gray-dark); text-transform: uppercase; letter-spacing: 1px; }#aihtmlblock-3 .meter-label.recommended .hours { color: var(--primary-light); font-size: 1.8rem; }#aihtmlblock-3 .time-cards { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 24px; }#aihtmlblock-3 .time-card {
background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
backdrop-filter: blur(20px); padding: 35px; border-radius: 20px;
border: 1px solid rgba(255,255,255,0.06); transition: all 0.3s ease;
display: flex; flex-direction: column;
}#aihtmlblock-3 .time-card:hover { transform: translateY(-5px); border-color: rgba(119, 166, 50, 0.3); }#aihtmlblock-3 .time-card.featured { border-color: var(--primary); box-shadow: 0 10px 40px rgba(119, 166, 50, 0.15); position: relative; }#aihtmlblock-3 .time-card.featured::before {
content: 'RECOMENDADO'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--primary); color: var(--black); padding: 6px 16px; border-radius: 20px; font-size: 0.75rem;
font-weight: 700; letter-spacing: 1px;
}#aihtmlblock-3 .tc-hours { font-size: 2.5rem; font-weight: 800; color: var(--white); margin-bottom: 5px; }#aihtmlblock-3 .tc-title { font-size: 1.1rem; color: var(--primary); margin-bottom: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }#aihtmlblock-3 .time-card p { font-size: 0.95rem; color: var(--gray-light); margin-bottom: 15px; }#aihtmlblock-3 .time-card ul { list-style: none; padding: 0; margin-top: auto; }#aihtmlblock-3 .time-card ul li { font-size: 0.9rem; color: var(--gray-dark); margin-bottom: 8px; padding-left: 20px; position: relative; }#aihtmlblock-3 .time-card ul li::before { content: '▹'; color: var(--primary); position: absolute; left: 0; }#aihtmlblock-3 .ti-note {
text-align: center; margin-top: 50px; padding: 20px 30px; background: rgba(119, 166, 50, 0.05);
border: 1px solid rgba(119, 166, 50, 0.2); border-radius: 12px; max-width: 800px; margin-left: auto; margin-right: auto;
display: flex; align-items: center; justify-content: center; gap: 15px;
}#aihtmlblock-3 .ti-note p { color: var(--gray-light); margin: 0; font-size: 1rem; }#aihtmlblock-3 .ti-note span { font-size: 1.5rem; }#aihtmlblock-3 .cta-final {
padding: 160px 0; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
text-align: center; position: relative; overflow: hidden;
}#aihtmlblock-3 .cta-final::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background-image: radial-gradient(rgba(0,0,0,0.2) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3;
}#aihtmlblock-3 .cta-content { position: relative; z-index: 2; max-width: 850px; margin: 0 auto; }#aihtmlblock-3 .cta-final h2 { font-size: 4rem; margin-bottom: 20px; font-weight: 800; color: var(--black); line-height: 1.1; }#aihtmlblock-3 .cta-final p { font-size: 1.2rem; margin-bottom: 40px; color: rgba(0,0,0,0.8); font-weight: 400; }#aihtmlblock-3 .btn-dark {
background: var(--black); color: var(--white); padding: 22px 55px; text-decoration: none; font-weight: 700;
font-size: 1.1rem; border-radius: 8px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px;
display: inline-block; box-shadow: 0 15px 40px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
}#aihtmlblock-3 .btn-dark:hover { transform: translateY(-5px) scale(1.02); background: var(--white); color: var(--black); }@media (max-width: 968px) {#aihtmlblock-3 .hero h1 { font-size: 2.8rem; }#aihtmlblock-3 .why-grid, #aihtmlblock-3 .comp-grid, #aihtmlblock-3 .time-cards { grid-template-columns: 1fr; gap: 40px; }#aihtmlblock-3 .danger-grid, #aihtmlblock-3 .benefits-grid { grid-template-columns: 1fr 1fr; }#aihtmlblock-3 .comp-bad { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }#aihtmlblock-3 .cta-final h2 { font-size: 2.5rem; }#aihtmlblock-3 .section-tag, #aihtmlblock-3 .comp-header h2, #aihtmlblock-3 .modern-benefits h2, #aihtmlblock-3 .ti-header h2 { font-size: 2rem; }#aihtmlblock-3 .time-meter-wrapper { padding-bottom: 80px; }#aihtmlblock-3 .meter-label { width: 100px; }#aihtmlblock-3 .meter-label .hours { font-size: 1.1rem; }#aihtmlblock-3 .meter-label.recommended .hours { font-size: 1.3rem; }}