/* IT Workers — Deferred CSS (non-critical) */
/* BENTO GRID */
.bento-section { position:relative; z-index:1; padding:0 2rem 80px; }
.bento-inner { max-width:1200px; margin:0 auto; }
.bento-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto auto; gap:1rem; }
.bento-card { background:var(--bg-dark2); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius-lg); padding:2rem; position:relative; overflow:hidden; transition:border-color 0.3s, box-shadow 0.3s; }
.bento-card:hover { border-color:rgba(255,255,255,0.15); box-shadow:0 8px 40px rgba(255,255,255,0.03); }
.bento-card.span2 { grid-column:span 2; }
.bento-card.big { grid-column:span 2; grid-row:span 1; }
.bento-card-label { font-family:var(--mono); font-size:0.7rem; color:var(--text-light-muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:0.75rem; }
.bento-stat { font-family:var(--mono); font-size:3.5rem; font-weight:700; color:var(--text-light); line-height:1; }
.bento-stat-sm { font-family:var(--mono); font-size:2rem; font-weight:700; color:var(--text-light); line-height:1; }
.bento-card p { font-size:0.875rem; color:var(--text-light-muted); margin-top:0.5rem; line-height:1.5; }
.bento-card h3 { font-family:var(--heading); font-size:1rem; font-weight:600; margin-bottom:0.35rem; }
.bento-red-accent { color:var(--text-light); }
.bento-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(220,38,38,0.07) 0%, transparent 60%); opacity:0; transition:opacity 0.3s; pointer-events:none; }
.bento-card:hover::before { opacity:1; }

/* AI dots animation */
.ai-dots { display:flex; gap:6px; margin-top:1rem; align-items:center; }
.ai-dot { width:8px; height:8px; border-radius:50%; background:#22C55E; animation:dot-pulse 1.4s ease-in-out infinite; }
.ai-dot:nth-child(2) { animation-delay:0.2s; background:rgba(34,197,94,0.6); }
.ai-dot:nth-child(3) { animation-delay:0.4s; background:rgba(34,197,94,0.4); }
.ai-dot:nth-child(4) { animation-delay:0.6s; background:rgba(34,197,94,0.25); }
.ai-dot:nth-child(5) { animation-delay:0.8s; background:rgba(34,197,94,0.12); }
@keyframes dot-pulse { 0%,80%,100%{transform:scale(1);opacity:0.6} 40%{transform:scale(1.4);opacity:1} }

/* LATAM dots */
.latam-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:0.75rem; }
.latam-country { font-size:0.7rem; color:var(--text-light-muted); display:flex; align-items:center; gap:5px; }
.latam-country::before { content:''; width:5px; height:5px; border-radius:50%; background:rgba(34,197,94,0.7); flex-shrink:0; }

/* SECTIONS */
section { padding:100px 2rem; }
.section-inner { max-width:1200px; margin:0 auto; }
.section-label { font-family:var(--mono); font-size:0.75rem; color:var(--text-light-muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:0.75rem; }
.section-title { font-family:var(--heading); font-size:clamp(2rem,4vw,2.8rem); font-weight:700; letter-spacing:-1px; margin-bottom:1rem; line-height:1.15; }
.section-desc { font-size:1.05rem; color:inherit; opacity:0.6; max-width:600px; line-height:1.7; }

/* SPOTLIGHT CARDS */
.spotlight-card { position:relative; overflow:hidden; cursor:pointer; }
.spotlight-card::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle 150px at var(--mx,50%) var(--my,50%), rgba(220,38,38,0.15), transparent 70%);
  opacity:0; transition:opacity 0.3s; pointer-events:none;
}
.spotlight-card:hover::before { opacity:1; }
.spotlight-card > * { position:relative; z-index:1; }

/* METHOD */
.method-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem; }
.method-card { background:var(--bg-light); color:var(--text-dark); border:1px solid #E5E7EB; border-radius:var(--radius); padding:2rem 1.5rem; transition:all 0.3s; cursor:pointer; }
.method-card:hover { border-color:rgba(220,38,38,0.2); transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,0.12); }
.method-number { font-family:var(--mono); font-size:2.5rem; font-weight:700; color:#D1D5DB; opacity:0.3; line-height:1; margin-bottom:1rem; }
.method-card h3 { font-size:1.1rem; font-weight:600; margin-bottom:0.75rem; }
.method-card p { font-size:0.9rem; color:var(--text-dark-muted); line-height:1.6; }

/* IA SECTION */
#ia-hunting { background:var(--bg-dark); border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04); position:relative; z-index:1; }
.ia-content { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-top:3rem; }
.ia-features { list-style:none; display:flex; flex-direction:column; gap:1.25rem; }
.ia-features li { display:flex; gap:1rem; align-items:flex-start; }
.ia-icon { width:40px; height:40px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.ia-features li h4 { font-size:1rem; font-weight:600; margin-bottom:4px; }
.ia-features li p { font-size:0.875rem; color:var(--text-light-muted); line-height:1.5; }
.ia-visual { background:var(--bg-dark2); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius-lg); padding:3rem; text-align:center; position:relative; overflow:hidden; }
.ia-visual::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; background:radial-gradient(circle, var(--red-glow) 0%, transparent 70%); }
.ia-big-number { font-family:var(--mono); font-size:5rem; font-weight:700; color:var(--text-light); position:relative; line-height:1; }
.ia-big-label { font-size:1.1rem; color:var(--text-light-muted); margin-top:0.5rem; position:relative; }
.ia-sub-stats { display:flex; justify-content:center; gap:3rem; margin-top:2rem; position:relative; }
.ia-sub-stat strong { display:block; font-family:var(--mono); font-size:1.5rem; color:var(--text-light); }
.ia-sub-stat span { font-size:0.8rem; color:var(--text-light-muted); }

/* CATEGORIES */
.cat-tabs { display:flex; gap:0.5rem; margin-top:3rem; margin-bottom:2rem; flex-wrap:wrap; }
.cat-tab { padding:10px 20px; border-radius:50px; border:1px solid #D1D5DB; background:transparent; color:var(--text-dark-muted); font-family:var(--font); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.3s; }
.cat-tab:hover, .cat-tab.active { background:var(--red); color:#fff; border-color:var(--red); }
.cat-panel { display:none; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; }
.cat-panel.active { display:grid; }
.role-card { background:var(--bg-light); border:1px solid #E5E7EB; border-radius:var(--radius); padding:1.25rem; transition:all 0.3s; cursor:pointer; }
.role-card:hover { border-color:rgba(220,38,38,0.2); transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,0.1); }
.role-card h4 { font-size:0.95rem; font-weight:600; }
.role-tag { display:inline-block; font-size:0.65rem; font-weight:600; padding:2px 8px; border-radius:50px; text-transform:uppercase; letter-spacing:0.5px; }
.tag-hot { background:rgba(34,197,94,0.1); color:#22C55E; }
.tag-growing { background:rgba(245,158,11,0.15); color:#F59E0B; }
.tag-stable { background:rgba(34,197,94,0.15); color:#22C55E; }
.role-card p { font-size:0.8rem; color:var(--text-dark-muted); margin-top:0.4rem; line-height:1.5; }
.role-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.25rem; }

/* TESTIMONIALS SCROLLING COLUMNS */
#testimonios { background:var(--bg-dark2); border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04); position:relative; z-index:1; }
.testimonials-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.testimonials-viewport { height:520px; overflow:hidden; position:relative; mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); -webkit-mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); }
.testimonials-track { display:flex; flex-direction:column; gap:1rem; }
.testimonials-track.col1 { animation:scroll-col 22s linear infinite; }
.testimonials-track.col2 { animation:scroll-col 28s linear infinite; }
.testimonials-track.col3 { animation:scroll-col 19s linear infinite; }
@keyframes scroll-col { from{transform:translateY(0)} to{transform:translateY(-50%)} }
.t-card { background:var(--bg-dark3); border:1px solid rgba(255,255,255,0.07); border-radius:var(--radius); padding:1.5rem; flex-shrink:0; transition:border-color 0.3s; }
.t-card:hover { border-color:rgba(220,38,38,0.3); box-shadow:0 4px 20px rgba(220,38,38,0.06); }
.t-stars { color:#F59E0B; font-size:0.8rem; letter-spacing:2px; margin-bottom:0.75rem; }
.t-text { font-size:0.85rem; color:var(--text-light-muted); line-height:1.65; font-style:italic; margin-bottom:1rem; }
.t-author { font-size:0.75rem; color:var(--text-light); font-weight:600; }
.t-role { font-size:0.72rem; color:var(--text-light-muted); margin-top:2px; }

/* FAQ / SEO SECTION */
#por-que { background:var(--bg-light); color:var(--text-dark); position:relative; z-index:1; }
.porq-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:3rem; align-items:center; margin-top:2.5rem; }
.porq-card-dark { background:var(--bg-dark); border-radius:20px; padding:2.5rem; color:#fff; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.porq-vs-row { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.porq-side { flex:1; text-align:center; }
.porq-company { font-size:0.72rem; color:rgba(255,255,255,0.4); margin-bottom:0.6rem; text-transform:uppercase; letter-spacing:1.5px; }
.porq-days { font-family:var(--heading); font-size:2.2rem; font-weight:800; line-height:1; }
.porq-days.green { color:#22c55e; text-shadow:0 0 20px rgba(34,197,94,0.4); }
.porq-days.muted { color:rgba(255,255,255,0.2); text-decoration:line-through; text-decoration-color:rgba(220,38,38,0.5); }
.porq-sub { font-size:0.72rem; color:rgba(255,255,255,0.3); margin-top:0.4rem; }
.porq-divider { font-family:var(--mono); font-size:0.75rem; color:rgba(255,255,255,0.2); flex-shrink:0; padding:0 0.5rem; }
.porq-badges { display:flex; flex-wrap:wrap; gap:0.5rem; }
.porq-badges span { background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.25); border-radius:6px; padding:5px 12px; font-size:0.75rem; color:#818cf8; }
.porq-text p { color:#4B5563; font-size:0.95rem; line-height:1.85; margin-bottom:1.3rem; }
.porq-hl { color:var(--indigo); font-weight:700; }
@media(max-width:768px){ .porq-grid { grid-template-columns:1fr; } }

/* GEO FAQ CARDS */
.geo-card { transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; cursor:default; }
.geo-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,0.35) !important; box-shadow:0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06); }
@keyframes geo-glow { 0%,100%{text-shadow:none} 50%{text-shadow:0 0 40px rgba(255,255,255,0.15), 0 0 80px rgba(255,255,255,0.05)} }
.geo-main-title { animation:geo-glow 5s ease-in-out infinite; }
@media(max-width:600px){ .geo-card-inner { grid-template-columns:1fr !important; } .geo-num { font-size:1.5rem !important; min-width:auto !important; } }

/* COMPARISON */
#comparacion { background:var(--bg-dark2); border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04); position:relative; z-index:1; }
.comparison-table { margin-top:3rem; border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.comparison-header { display:grid; grid-template-columns:1fr 1fr 1fr; background:var(--bg-dark3); }
.comparison-header div { padding:1.25rem 1.5rem; font-size:0.85rem; font-weight:600; color:var(--text-light-muted); text-transform:uppercase; letter-spacing:0.5px; }
.comparison-header div:nth-child(2) { background:linear-gradient(135deg,#7F1D1D,#991B1B) !important; color:#FCA5A5 !important; }
.comparison-header div:last-child { color:#4ADE80 !important; background:rgba(22,163,74,0.12) !important; border-left:2px solid rgba(34,197,94,0.4); display:flex !important; align-items:center !important; gap:10px !important; }
.cmp-logo { height:38px; width:auto; filter:brightness(0) invert(1); flex-shrink:0; }
.comparison-row { display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid rgba(255,255,255,0.05); }
.comparison-row:nth-child(even) { background:rgba(255,255,255,0.02); }
.comparison-row div { padding:1rem 1.5rem; font-size:0.875rem; color:var(--text-light-muted); display:flex; align-items:center; gap:8px; }
.comparison-row div:first-child { font-weight:500; color:var(--text-light); }
.comparison-row div:last-child { color:var(--text-light); font-weight:500; }
.check { color:#22C55E; flex-shrink:0; }
.cross { color:#EF4444; flex-shrink:0; }

/* PAIN SECTION */
#pain { background:var(--bg-dark); position:relative; z-index:1; }
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.pain-card { background:var(--bg-dark2); border:1px solid rgba(255,255,255,0.06); border-radius:var(--radius); padding:2rem; position:relative; overflow:hidden; transition:all 0.3s; }
.pain-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.08); }
.pain-card:hover { border-color:rgba(255,255,255,0.12); box-shadow:0 8px 32px rgba(255,255,255,0.03); }
.pain-icon { width:44px; height:44px; margin-bottom:1.25rem; color:var(--text-light-muted); }
.pain-card h3 { font-family:var(--heading); font-size:1.1rem; font-weight:600; margin-bottom:0.6rem; }
.pain-card p { font-size:0.875rem; color:var(--text-light-muted); line-height:1.6; }

/* CONTACT */
#contacto { background:var(--bg-dark); border-top:1px solid rgba(255,255,255,0.04); position:relative; z-index:1; }
#contacto::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:400px; background:radial-gradient(ellipse, var(--red-glow) 0%, transparent 70%); pointer-events:none; }
.contact-inner { max-width:700px; margin:0 auto; text-align:center; position:relative; }
.contact-form { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:3rem; margin-top:2.5rem; text-align:left; backdrop-filter:blur(12px); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* FOOTER */
footer { background:var(--bg-dark2); color:var(--text-light); border-top:1px solid rgba(255,255,255,0.06); padding:3rem 2rem; position:relative; z-index:1; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:0.85rem; color:var(--text-light-muted); }
.footer-links { display:flex; gap:1.5rem; list-style:none; }
.footer-links a { color:var(--text-light-muted); text-decoration:none; font-size:0.85rem; transition:color 0.3s; }
.footer-links a:hover { color:var(--text-light); }

/* LOGO STRIP */
.logo-strip { background:var(--bg-dark2); border-top:1px solid rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.05); padding:2.5rem 2rem; position:relative; z-index:1; }
.logo-strip-inner { max-width:1200px; margin:0 auto; }
.logo-strip-label { text-align:center; font-size:0.75rem; color:var(--text-light-muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:2rem; font-family:var(--mono); }
.logo-strip-grid { display:flex; justify-content:center; align-items:center; gap:3rem; flex-wrap:wrap; }
.logo-pill { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:50px; padding:10px 24px; font-size:0.85rem; font-weight:600; color:var(--text-light-muted); letter-spacing:0.5px; white-space:nowrap; transition:border-color 0.3s; }
.logo-pill:hover { border-color:rgba(220,38,38,0.3); color:var(--text-light); }

/* WHATSAPP FLOAT */
.wa-float-wrapper { position:fixed; bottom:90px; right:28px; z-index:99; display:flex; align-items:center; gap:12px; }
.wa-label { background:rgba(0,0,0,0.8); color:#fff; font-size:0.8rem; font-weight:600; padding:8px 14px; border-radius:50px; white-space:nowrap; opacity:0; transform:translateX(10px); transition:all 0.3s; pointer-events:none; }
.wa-float-wrapper:hover .wa-label { opacity:1; transform:translateX(0); }
.wa-float { width:120px; height:120px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 6px 28px rgba(37,211,102,0.5); transition:all 0.3s; position:relative; }
.wa-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,0.5); animation:wa-expand 2s ease-out infinite; }
.wa-ring:nth-child(2) { animation-delay:0.6s; border-color:rgba(37,211,102,0.3); }
.wa-ring:nth-child(3) { animation-delay:1.2s; border-color:rgba(37,211,102,0.15); }
@keyframes wa-expand { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.7);opacity:0} }
.wa-float:hover { transform:scale(1.08); box-shadow:0 8px 36px rgba(37,211,102,0.6); }
.wa-float svg { width:54px; height:54px; fill:#fff; position:relative; z-index:1; }

/* HERO ANIMATIONS */
@keyframes fade-up { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.hero-badge { animation:fade-up 0.6s ease both; animation-delay:0.1s; }
h1 { animation:fade-up 0.65s ease both; animation-delay:0.2s; }
.hero-sub { animation:fade-up 0.65s ease both; animation-delay:0.3s; }
.hero-stats { animation:fade-up 0.65s ease both; animation-delay:0.4s; }
.hero-actions { animation:fade-up 0.65s ease both; animation-delay:0.5s; }
.hero-form { animation:fade-up 0.8s ease both; animation-delay:0.35s; }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ALL SECTIONS z-index */
section, .logo-strip, .bento-section { position:relative; z-index:1; }

/* FOCUS STATES */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }

/* RESPONSIVE */
@media(max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-form { max-width:500px; }
  .method-grid { grid-template-columns:repeat(2,1fr); }
  .ia-content { grid-template-columns:1fr; }
  .testimonials-columns { grid-template-columns:1fr 1fr; }
  .testimonials-columns .testimonials-viewport:last-child { display:none; }
  .bento-grid { grid-template-columns:1fr 1fr; }
  .bento-card.big { grid-column:span 2; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .mobile-toggle { display:block; }
  .hero { padding:100px 1.5rem 60px; }
  .method-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  section { padding:60px 1.5rem; }
  .seo-grid { grid-template-columns:1fr !important; gap:2rem !important; }
  #mercado .seo-grid, #mercado > div > div { grid-template-columns:1fr !important; gap:2rem !important; }
  .pain-grid { grid-template-columns:1fr; }
  .comparison-table { overflow-x:auto; }
  .comparison-header, .comparison-row { min-width:600px; }
  #pablo .section-inner > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
  .testimonials-columns { grid-template-columns:1fr; }
  .testimonials-columns .testimonials-viewport:not(:first-child) { display:none; }
  .bento-grid { grid-template-columns:1fr; }
  .bento-card.big, .bento-card.span2 { grid-column:span 1; }
  .rotating-wrap { min-width:200px; }
  .wa-float { width:56px !important; height:56px !important; }
  .wa-float svg { width:26px !important; height:26px !important; }
  .wa-float-wrapper { bottom:80px; right:20px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition:none; opacity:1; transform:none; }
  * { transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

/* FLOATING LABELS */
.float-group { position:relative; margin-bottom:1rem; }
.float-group input, .float-group select, .float-group textarea {
  width:100%; padding:20px 16px 8px; background:#fff;
  border:1.5px solid #D1D5DB; border-radius:8px;
  color:#1A1A1A; font-family:var(--font); font-size:1rem;
  transition:border-color 0.2s, box-shadow 0.2s; outline:none;
}
.float-group input:focus, .float-group select:focus, .float-group textarea:focus {
  border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,0.1);
}
.float-label {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:0.9rem; color:#9B9A94; pointer-events:none;
  transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
  background:transparent;
}
.float-group input:focus ~ .float-label,
.float-group input:not(:placeholder-shown) ~ .float-label,
.float-group select:focus ~ .float-label,
.float-group select:valid ~ .float-label,
.float-group textarea:focus ~ .float-label,
.float-group textarea:not(:placeholder-shown) ~ .float-label {
  top:10px; transform:translateY(0); font-size:0.7rem;
  color:#DC2626; font-weight:600; letter-spacing:0.3px; text-transform:uppercase;
}
.float-group textarea { padding-top:24px; resize:vertical; min-height:90px; }
.float-group .textarea-label { top:16px; transform:none; }
.float-group textarea:focus ~ .textarea-label,
.float-group textarea:not(:placeholder-shown) ~ .textarea-label { top:6px; transform:none; font-size:0.7rem; color:#DC2626; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; }
.float-group select { padding:20px 16px 8px; cursor:pointer; }
.float-group select ~ .float-label { top:10px; transform:translateY(0); font-size:0.7rem; font-weight:600; letter-spacing:0.3px; text-transform:uppercase; }
.float-group select:focus ~ .float-label { color:#DC2626; }
.float-group select:valid ~ .float-label { color:#DC2626; }

/* CONTACT GRID */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; max-width:1100px; margin:0 auto; position:relative; }
.contact-cta-col { padding-top:1rem; }
.contact-cta-col h2 { font-family:var(--heading); font-size:2.2rem; font-weight:700; line-height:1.2; margin-bottom:1.5rem; }
.contact-highlights { list-style:none; display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.contact-highlights li { display:flex; align-items:center; gap:12px; font-size:0.95rem; color:var(--text-light-muted); }
.contact-highlights li svg { flex-shrink:0; color:#22C55E; }
@media(max-width:900px) { .contact-grid { grid-template-columns:1fr; gap:2rem; } }

/* =========================================
   2026 VISUAL UPGRADE
   ========================================= */
:root {
  --indigo: #6366F1;
  --indigo-hover: #818CF8;
  --indigo-glow: rgba(99,102,241,0.12);
}

/* AURORA AMBIENT BACKGROUND */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 5% 10%, rgba(99,102,241,0.04) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 90%, rgba(220,38,38,0.035) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(56,189,248,0.015) 0%, transparent 70%);
}

/* GRADIENT TEXT UTILITIES */
.gt { background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.72) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gt-red { background:linear-gradient(135deg,var(--red) 0%,#F87171 55%,#FBBF24 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gt-indigo { background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-hover) 50%,#38BDF8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* SCROLL PROGRESS — GRADIENT */
#scroll-progress { background:linear-gradient(90deg,var(--red),var(--indigo),#38BDF8,var(--red)) !important; background-size:300% 100% !important; animation:grad-shift 4s linear infinite !important; }
@keyframes grad-shift { 0%{background-position:0%} 100%{background-position:300%} }

/* HERO BADGE — INDIGO */
.hero-badge { background:rgba(99,102,241,0.1) !important; border-color:rgba(99,102,241,0.3) !important; color:var(--indigo-hover) !important; font-weight:600 !important; letter-spacing:0.8px !important; }
.hero-badge::before { display:none !important; }

/* HERO H1 GRADIENT */
h1 { text-shadow:none; }
.hero h1 { color:#fff; }

/* HERO STATS UPGRADE */
.stat-number { background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.75) 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; font-size:2.25rem !important; letter-spacing:-1px; }

/* BTN RED — GRADIENT */
.btn-red { background:linear-gradient(135deg,var(--red) 0%,#B91C1C 100%) !important; box-shadow:0 4px 20px rgba(220,38,38,0.22); }
.btn-red:hover { background:linear-gradient(135deg,var(--red-hover) 0%,var(--red) 100%) !important; box-shadow:0 8px 32px rgba(220,38,38,0.38) !important; }
.form-submit { background:linear-gradient(135deg,var(--red) 0%,#B91C1C 100%) !important; }
.form-submit:hover { background:linear-gradient(135deg,var(--red-hover) 0%,var(--red) 100%) !important; }

/* HERO FORM — PREMIUM GLASS */
.hero-form { background:linear-gradient(145deg,rgba(255,255,255,0.07) 0%,rgba(255,255,255,0.03) 100%) !important; border:1px solid rgba(255,255,255,0.14) !important; box-shadow:0 24px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important; }

/* BENTO CARDS — DEPTH */
.bento-card { background:linear-gradient(145deg,rgba(255,255,255,0.048) 0%,rgba(255,255,255,0.018) 100%) !important; }
.bento-card:hover { box-shadow:0 8px 40px rgba(99,102,241,0.08), 0 0 0 1px rgba(255,255,255,0.13) !important; }
.bento-stat { background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.7) 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
.bento-red-accent { background:linear-gradient(135deg,#22c55e 0%,#4ade80 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
.bento-stat-sm { background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.7) 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }

/* SECTION LABEL — INDIGO ACCENTED */
.section-label { display:inline-flex; align-items:center; gap:8px; color:var(--indigo-hover) !important; font-size:0.7rem !important; letter-spacing:2.5px !important; }
.section-label::before { content:''; display:inline-block; width:22px; height:1.5px; background:linear-gradient(90deg,var(--indigo),transparent); flex-shrink:0; }

/* PAIN CARDS — GRADIENT TOP ACCENT */
.pain-card::before { background:linear-gradient(90deg,var(--red),var(--indigo)) !important; height:2px !important; opacity:0.55; }
.pain-card:hover::before { opacity:1 !important; }

/* METHOD CARDS — COLORED TOP BORDER */
.method-card { border-top:3px solid var(--red) !important; transition:all 0.3s; }
.method-card:nth-child(2) { border-top-color:var(--indigo) !important; }
.method-card:nth-child(3) { border-top-color:#38BDF8 !important; }
.method-card:nth-child(4) { border-top-color:#22C55E !important; }
.method-number { font-size:2.2rem !important; opacity:0.22 !important; }

/* IA VISUAL — INDIGO ACCENT */
.ia-visual { background:linear-gradient(135deg,rgba(99,102,241,0.07) 0%,rgba(255,255,255,0.025) 100%) !important; border:1px solid rgba(99,102,241,0.2) !important; box-shadow:0 0 80px rgba(99,102,241,0.07); }
.ia-big-number { background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.7) 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }

/* TESTIMONIAL CARDS */
.t-card { background:linear-gradient(145deg,rgba(255,255,255,0.048) 0%,rgba(255,255,255,0.018) 100%) !important; }
.t-card:hover { border-color:rgba(99,102,241,0.28) !important; box-shadow:0 4px 24px rgba(99,102,241,0.07) !important; }
.t-stars { background:linear-gradient(90deg,#F59E0B,#FBBF24) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; letter-spacing:1px !important; }

/* ROLE CARDS — GRADIENT BOTTOM REVEAL */
.role-card { position:relative; overflow:hidden; }
.role-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--red),var(--indigo)); opacity:0; transition:opacity 0.3s; }
.role-card:hover::after { opacity:1; }

/* LOGO PILLS */
.logo-pill { background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.1) !important; transition:all 0.3s !important; }
.logo-pill:hover { background:rgba(99,102,241,0.08) !important; border-color:rgba(99,102,241,0.3) !important; color:#fff !important; }

/* LOGO STRIP MARQUEE */
.logo-marquee-outer { overflow:hidden; mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent); }
.logo-marquee-track { display:flex; gap:1.5rem; animation:marquee-scroll 28s linear infinite; width:max-content; }
.logo-marquee-outer:hover .logo-marquee-track { animation-play-state:paused; }
@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* CAT TABS */
.cat-tab:hover, .cat-tab.active { background:linear-gradient(135deg,var(--red),#B91C1C) !important; border-color:transparent !important; }

/* CONTACT FORM */
.contact-form { background:linear-gradient(145deg,rgba(255,255,255,0.055) 0%,rgba(255,255,255,0.02) 100%) !important; border:1px solid rgba(255,255,255,0.12) !important; box-shadow:0 24px 80px rgba(0,0,0,0.4) !important; }

/* NAV UPGRADE */
nav { box-shadow:0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.45) !important; }
.nav-cta { background:linear-gradient(135deg,var(--red),#B91C1C) !important; box-shadow:0 2px 12px rgba(220,38,38,0.25); }

/* WA FLOAT SIZE */
.wa-float { width:108px; height:108px; box-shadow:0 6px 24px rgba(37,211,102,0.45); }
.wa-float svg { width:51px; height:51px; }

/* SECTION DIVIDER FADE */
.section-inner { position:relative; }

/* COMPARISON TABLE HEADER — styles in main CSS block above */

/* HERO INNER TEXT TREATMENT — subtle word glow on keyword */
.hero-text-accent { color:var(--red); text-shadow:0 0 40px rgba(220,38,38,0.35); }

/* GUARANTEE STRIP — card hover lift */
.guarantee-item { transition:transform 0.25s, background 0.25s; border-radius:12px; }
.guarantee-item:hover { background:rgba(255,255,255,0.035); transform:translateY(-2px); }

/* PULSE DOT GREEN */
.pulse-green { display:inline-block; width:8px; height:8px; border-radius:50%; background:#22C55E; animation:pulse-green-anim 2s infinite; }
@keyframes pulse-green-anim { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }

/* CARD GLOW ON HOVER */
.bento-card.spotlight-card:hover { box-shadow:0 12px 50px rgba(99,102,241,0.1), 0 0 0 1px rgba(255,255,255,0.12) !important; }

/* ============================================================
   UX POLISH LAYER — Focus, Accessibility, Mobile, Consistency
   ============================================================ */

/* SKIP TO CONTENT */
.skip-link { position:absolute; top:-120px; left:1rem; background:var(--indigo); color:#fff; padding:12px 24px; border-radius:8px; font-weight:700; font-size:0.9rem; z-index:9999; text-decoration:none; transition:top 0.2s ease; white-space:nowrap; }
.skip-link:focus { top:1rem; outline:none; }

/* SCROLL OFFSET — nav no tapa las secciones */
html { scroll-padding-top:88px !important; }

/* FOCUS VISIBLE — INDIGO (reemplaza rojo) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--indigo) !important; outline-offset:3px; border-radius:4px; }

/* HERO FORM — focus indigo */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--indigo) !important; box-shadow:0 0 0 3px rgba(99,102,241,0.12) !important; }

/* FLOAT LABELS — focus + filled state en indigo */
.float-group input:focus,
.float-group select:focus,
.float-group textarea:focus { border-color:var(--indigo) !important; box-shadow:0 0 0 3px rgba(99,102,241,0.12) !important; }
.float-group input:focus ~ .float-label,
.float-group input:not(:placeholder-shown) ~ .float-label,
.float-group select:focus ~ .float-label,
.float-group select:valid ~ .float-label,
.float-group textarea:focus ~ .float-label,
.float-group textarea:not(:placeholder-shown) ~ .float-label,
.float-group textarea:focus ~ .textarea-label,
.float-group textarea:not(:placeholder-shown) ~ .textarea-label { color:var(--indigo) !important; }

/* WHATSAPP FLOAT — tamaño correcto, no invasivo */
.wa-float { width:60px !important; height:60px !important; box-shadow:0 4px 18px rgba(37,211,102,0.42) !important; }
.wa-float svg { width:28px !important; height:28px !important; }
.wa-float-wrapper { bottom:28px !important; right:28px !important; }
@media(max-width:768px) {
  .wa-float { width:52px !important; height:52px !important; }
  .wa-float svg { width:24px !important; height:24px !important; }
  .wa-float-wrapper { bottom:20px !important; right:16px !important; }
}

/* GUARANTEE STRIP — fix mobile overflow */
@media(max-width:640px) {
  .guarantee-item { min-width:100% !important; border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.06) !important; }
  .guarantee-item:last-child { border-bottom:none !important; }
}

/* COMPARISON HEADER — columna "tradicionales" neutral */
.comparison-header div:nth-child(2) { background:rgba(255,255,255,0.03) !important; color:rgba(255,255,255,0.38) !important; }

/* MOBILE NAV — animate in */
.nav-links.show { animation:nav-fade-in 0.22s ease both; }
@keyframes nav-fade-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

/* FORM SUBMIT — disabled state */
.form-submit:disabled { cursor:not-allowed !important; }
button:disabled { cursor:not-allowed !important; }

/* STICKY BAR — indigo accent */
#sticky-bar { border-top-color:rgba(99,102,241,0.28) !important; }

/* PORQ BADGES — hover indigo */
.porq-badges span { cursor:default; transition:all 0.2s; }
.porq-badges span:hover { background:rgba(99,102,241,0.18) !important; border-color:rgba(99,102,241,0.4) !important; color:#a5b4fc !important; }

/* LOGO IMG COMPARISON — size */
.cmp-logo { height:30px !important; }

/* REVEAL — smoother easing */
.reveal { transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1) !important; }

/* NAV CTA — micro lift on active */
.nav-cta:active { transform:translateY(0) scale(0.97) !important; }

/* SCROLL PROGRESS — top aligned with nav */
#scroll-progress { top:0 !important; height:2px !important; }

/* HERO FORM — submit button active state */
.form-submit:active { transform:translateY(1px) scale(0.99); transition:transform 0.1s; }

/* BENTO — cursor default (not pointer) */
.bento-card { cursor:default; }

/* ROLE CARDS — fix cursor */
.role-card { cursor:default; }

/* MOBILE — hero actions spacing */
@media(max-width:768px) {
  .hero-actions { gap:0.75rem; }
  .btn-wa { font-size:0.9rem; padding:12px 24px; }
}

/* COMPARISON TABLE — mobile scroll indicator */
@media(max-width:768px) {
  .comparison-table::after { content:'← Desliza para ver →'; display:block; text-align:center; font-size:0.7rem; color:var(--text-light-muted); padding:8px; background:rgba(255,255,255,0.02); }
}

/* PAGE IMAGES — prevent layout shift */
img { max-width:100%; height:auto; }

/* SELECTION COLOR */
::selection { background:rgba(99,102,241,0.25); color:#fff; }
::-moz-selection { background:rgba(99,102,241,0.25); color:#fff; }

/* SCROLLBAR — webkit custom */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-dark2); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.22); }

/* Responsive overrides */
    @keyframes path-draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
    @keyframes path-flow { 0%,100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -2000; } }
    .p { fill:none; stroke-dasharray:2000; }
.marquee-track { display:flex; width:max-content; }
.marquee-inner { display:flex; gap:0.6rem; padding-right:0.6rem; animation:marquee-scroll 35s linear infinite; }
.marquee-track:hover .marquee-inner { animation-play-state:paused; }
@keyframes marquee-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
.mtag { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:6px 16px; border-radius:50px; font-size:0.8rem; color:var(--text-light-muted); white-space:nowrap; transition:background 0.2s, color 0.2s; }
.mtag:hover { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.25); color:#fff; }
@media(max-width:768px) { .seo-grid { grid-template-columns:1fr !important; gap:2.5rem !important; } }
@media(max-width:768px) { .blog-grid { grid-template-columns:1fr !important; } }
@media(max-width:1024px) and (min-width:769px) { .blog-grid { grid-template-columns:1fr 1fr !important; } }
@media(max-width:768px) {
  /* Stat cards — grid está en el .reveal mismo */
  [aria-label="Sobre IT Workers"] .reveal[style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr !important; }
  /* Stat cards y facts grid — grid en hijo directo de .reveal */
  [aria-label="Sobre IT Workers"] .reveal > div[style*="grid-template-columns:repeat(3"] { grid-template-columns:1fr !important; }
  /* Text 2-col — grid en .reveal mismo */
  [aria-label="Sobre IT Workers"] .reveal[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; gap:2rem !important; }
  /* Comparison cards — grid en hijo de .reveal */
  [aria-label="Sobre IT Workers"] .reveal > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
  /* Facts grid bottom */
  [aria-label="Sobre IT Workers"] .reveal > div[style*="grid-template-columns:repeat"] { grid-template-columns:repeat(2,1fr) !important; }
  /* Sección padding mobile */
  [aria-label="Sobre IT Workers"] { padding:60px 1.25rem !important; }
}