:root {
--blue-deep: #0a1628;
--blue-mid: #0d2347;
--blue-glow: #1a4fa0;
--blue-accent: #2563eb;
--blue-bright: #3b82f6;
--orange: #f97316;
--orange-bright: #fb923c;
--cyan: #22d3ee;
--white: #f0f6ff;
--gray-light: #94a3b8;
--card-bg: rgba(13,35,71,0.72);
--card-border: rgba(59,130,246,0.25);
--glass: rgba(10,22,40,0.6);
}
[data-theme="light"] {
--blue-deep: #e8f0fe;
--blue-mid: #dbeafe;
--blue-glow: #93c5fd;
--blue-accent: #1d4ed8;
--blue-bright: #2563eb;
--orange: #ea580c;
--orange-bright: #f97316;
--cyan: #0891b2;
--white: #1e293b;
--gray-light: #475569;
--card-bg: rgba(219,234,254,0.72);
--card-border: rgba(37,99,235,0.3);
--glass: rgba(232,240,254,0.8);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Exo 2', sans-serif;
background-color: var(--blue-deep);
color: var(--white);
overflow-x: hidden;
transition: background-color 0.4s, color 0.4s;
}
.bg-circuit {
position: fixed;
inset: 0;
z-index: 0;
background-image: url('../img/fondo-circuito.jpg');
background-size: cover;
background-position: center;
transition: filter 0.4s;
}
[data-theme="dark"] .bg-circuit {
filter: hue-rotate(200deg) saturate(1.2) brightness(0.28) contrast(1.1);
}
[data-theme="light"] .bg-circuit {
filter: hue-rotate(190deg) saturate(0.6) brightness(0.9) contrast(0.8) invert(1);
}
.bg-overlay {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
transition: background 0.4s;
}
[data-theme="dark"] .bg-overlay {
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,0.18) 0%, transparent 70%),
linear-gradient(180deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.82) 100%);
}
[data-theme="light"] .bg-overlay {
background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(147,197,253,0.35) 0%, transparent 70%),
linear-gradient(180deg, rgba(232,240,254,0.55) 0%, rgba(219,234,254,0.82) 100%);
}
.page { position: relative; z-index: 2; }
nav {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0.9rem 3rem;
backdrop-filter: blur(18px);
border-bottom: 1px solid var(--card-border);
background: var(--glass);
transition: background 0.4s, border-color 0.4s;
}
.nav-logo img { height: 52px; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
font-family: 'Rajdhani', sans-serif;
font-weight: 600; font-size: 0.95rem;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--white); text-decoration: none;
position: relative; padding-bottom: 2px;
transition: color 0.2s;
}
.nav-links a::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 2px;
background: var(--orange); border-radius: 2px;
transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--orange-bright); }
.theme-toggle {
background: none; border: 1px solid var(--card-border);
border-radius: 50%; width: 38px; height: 38px;
cursor: pointer; color: var(--white);
font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
transition: border-color 0.3s, background 0.3s;
}
.theme-toggle:hover { background: var(--card-bg); border-color: var(--orange); }
.hero {
min-height: 92vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 5rem 2rem 4rem;
position: relative;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
background: rgba(249,115,22,0.12);
border: 1px solid rgba(249,115,22,0.4);
border-radius: 100px; padding: 0.35rem 1.1rem;
font-family: 'Rajdhani', sans-serif;
font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--orange-bright);
margin-bottom: 2rem;
animation: fadeUp 0.6s both;
}
.hero-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }
.hero h1 {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(2.6rem, 5.5vw, 5.2rem);
font-weight: 700; line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
animation: fadeUp 0.7s 0.1s both;
}
.hero h1 em { font-style: normal; color: var(--orange); }
.hero h1 strong { color: var(--cyan); font-style: normal; }
.hero-sub {
font-size: 1.15rem; font-weight: 300;
color: var(--gray-light); max-width: 620px;
line-height: 1.7; margin-bottom: 2.8rem;
animation: fadeUp 0.7s 0.2s both;
}
.hero-ctas {
display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
animation: fadeUp 0.7s 0.3s both;
}
.btn-primary {
background: var(--orange); color: #fff;
border: none; border-radius: 8px;
padding: 0.85rem 2.2rem;
font-family: 'Rajdhani', sans-serif;
font-size: 1rem; font-weight: 700;
letter-spacing: 0.06em; cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 24px rgba(249,115,22,0.35);
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-primary:hover { background: var(--orange-bright); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(249,115,22,0.5); }
.btn-secondary {
background: transparent;
color: var(--white); border: 1px solid var(--card-border);
border-radius: 8px; padding: 0.85rem 2.2rem;
font-family: 'Rajdhani', sans-serif;
font-size: 1rem; font-weight: 600;
letter-spacing: 0.06em; cursor: pointer;
text-decoration: none;
backdrop-filter: blur(8px);
transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.btn-secondary:hover { border-color: var(--blue-bright); background: var(--card-bg); transform: translateY(-2px); }
.hero-stats {
display: flex; gap: 3rem; margin-top: 4rem; flex-wrap: wrap; justify-content: center;
animation: fadeUp 0.7s 0.4s both;
}
.stat { text-align: center; }
.stat-num {
font-family: 'Rajdhani', sans-serif;
font-size: 2.4rem; font-weight: 700;
color: var(--cyan); line-height: 1;
}
.stat-num .orange { color: var(--orange); }
.stat-label { font-size: 0.8rem; color: var(--gray-light); margin-top: 0.3rem; letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
section { padding: 6rem 3rem; max-width: 1200px; margin: 0 auto; }
.section-tag {
font-family: 'Rajdhani', sans-serif;
font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--orange); margin-bottom: 0.8rem;
display: block;
}
.section-title {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700; line-height: 1.15;
margin-bottom: 1.2rem;
}
.section-desc {
color: var(--gray-light); font-size: 1.05rem;
line-height: 1.8; max-width: 640px; margin-bottom: 3.5rem;
}
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1.5rem; }
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px; padding: 2rem;
backdrop-filter: blur(16px);
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
position: relative; overflow: hidden;
}
.card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--orange), var(--blue-bright));
opacity: 0; transition: opacity 0.3s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.35); border-color: rgba(59,130,246,0.5); }
.card:hover::before { opacity: 1; }
.card-icon {
width: 52px; height: 52px; border-radius: 12px;
background: rgba(249,115,22,0.12);
border: 1px solid rgba(249,115,22,0.3);
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; margin-bottom: 1.2rem;
}
.card h3 {
font-family: 'Rajdhani', sans-serif;
font-size: 1.25rem; font-weight: 700;
margin-bottom: 0.6rem; color: var(--white);
}
.card p { font-size: 0.93rem; color: var(--gray-light); line-height: 1.7; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 1.5rem; }
.service-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px; padding: 2.2rem;
backdrop-filter: blur(16px);
display: flex; gap: 1.4rem; align-items: flex-start;
transition: transform 0.25s, box-shadow 0.25s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.service-icon {
font-size: 2rem; min-width: 48px;
display: flex; align-items: center; justify-content: center;
}
.service-body h3 {
font-family: 'Rajdhani', sans-serif;
font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem;
}
.service-body p { font-size: 0.9rem; color: var(--gray-light); line-height: 1.65; }
.service-tag {
display: inline-block; margin-top: 0.8rem;
background: rgba(34,211,238,0.1);
border: 1px solid rgba(34,211,238,0.25);
border-radius: 100px; padding: 0.2rem 0.8rem;
font-size: 0.75rem; color: var(--cyan);
font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.08em;
}
.service-tag.orange-tag {
background: rgba(249,115,22,0.1);
border-color: rgba(249,115,22,0.25);
color: var(--orange-bright);
}
.validation-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.validation-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.validation-list li {
display: flex; gap: 1rem; align-items: flex-start;
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 12px; padding: 1.1rem 1.4rem;
backdrop-filter: blur(16px);
font-size: 0.93rem; color: var(--gray-light); line-height: 1.6;
transition: border-color 0.2s;
}
.validation-list li:hover { border-color: var(--blue-bright); }
.validation-list li .check { color: var(--cyan); font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; }
.validation-visual {
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 20px; padding: 2.5rem; backdrop-filter: blur(16px);
display: flex; flex-direction: column; gap: 1.2rem; align-items: center;
}
.accuracy-ring {
position: relative; width: 160px; height: 160px;
}
.accuracy-ring svg { transform: rotate(-90deg); }
.accuracy-ring .ring-bg { fill: none; stroke: var(--card-border); stroke-width: 10; }
.accuracy-ring .ring-fill {
fill: none; stroke: var(--cyan); stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 440;
stroke-dashoffset: 44;
transition: stroke-dashoffset 1.5s ease;
}
.accuracy-label {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
text-align: center;
}
.accuracy-num {
font-family: 'Rajdhani', sans-serif;
font-size: 2.4rem; font-weight: 700; color: var(--cyan); line-height: 1;
}
.accuracy-sub { font-size: 0.72rem; color: #f8fafc !important; letter-spacing: 0.1em; }
.accuracy-desc { font-size: 0.88rem; color: #f8fafc !important; text-align: center; line-height: 1.6; }
.metrics-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 3rem; }
.metric-box {
flex: 1; min-width: 180px;
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 16px; padding: 1.8rem 1.5rem; backdrop-filter: blur(16px);
text-align: center;
}
.metric-val {
font-family: 'Rajdhani', sans-serif;
font-size: 2.8rem; font-weight: 700;
color: var(--orange); line-height: 1;
}
.metric-label { font-size: 0.85rem; color: var(--white); margin-top: 0.4rem; line-height: 1.4; }
.metric-bar-wrap { margin-top: 3rem; }
.bar-item { margin-bottom: 1.4rem; }
.bar-label { display: flex; justify-content: space-between; margin-bottom: 0.4rem; font-size: 0.9rem; }
.bar-track { height: 8px; background: var(--card-border); border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; transition: width 1.5s ease; }
.bar-orange { background: linear-gradient(90deg, var(--orange), var(--orange-bright)); }
.bar-cyan { background: linear-gradient(90deg, var(--cyan), var(--blue-bright)); }
.bar-blue { background: linear-gradient(90deg, var(--blue-bright), #818cf8); }
.demand-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 1.5rem; }
.demand-card {
background: var(--card-bg); border: 1px solid var(--card-border);
border-radius: 16px; padding: 2rem; backdrop-filter: blur(16px);
transition: transform 0.25s, box-shadow 0.25s;
}
.demand-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.demand-card .icon { font-size: 2.2rem; margin-bottom: 1rem; }
.demand-card h4 {
font-family: 'Rajdhani', sans-serif;
font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem;
}
.demand-card p { font-size: 0.88rem; color: var(--gray-light); line-height: 1.65; }
.cta-section {
text-align: center; padding: 7rem 2rem;
position: relative;
}
.cta-glow {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 600px; height: 300px;
background: radial-gradient(ellipse, rgba(249,115,22,0.12) 0%, transparent 70%);
pointer-events: none;
}
.cta-section h2 {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700; margin-bottom: 1.2rem;
position: relative;
}
.cta-section p { color: var(--gray-light); max-width: 520px; margin: 0 auto 2.5rem; font-size: 1.05rem; line-height: 1.7; position: relative; }
.divider {
max-width: 1200px; margin: 0 auto;
border: none; border-top: 1px solid var(--card-border);
}
footer {
background: var(--glass); border-top: 1px solid var(--card-border);
backdrop-filter: blur(18px);
padding: 3rem; text-align: center;
font-size: 0.88rem; color: var(--gray-light);
}
footer img { height: 40px; margin-bottom: 1.2rem; opacity: 0.8; }
.wa-float {
position: fixed; bottom: 2.2rem; right: 2.2rem; z-index: 999;
display: flex; align-items: center; gap: 0.8rem;
background: #25d366;
border-radius: 100px;
padding: 0.7rem 1.3rem 0.7rem 0.7rem;
text-decoration: none;
box-shadow: 0 6px 32px rgba(37,211,102,0.45);
transition: transform 0.2s, box-shadow 0.2s;
animation: waBounce 3s 1s infinite;
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 10px 40px rgba(37,211,102,0.6); animation: none; }
.wa-float svg { width: 32px; height: 32px; flex-shrink: 0; }
.wa-text { display: flex; flex-direction: column; }
.wa-label { font-size: 0.68rem; color: rgba(255,255,255,0.8); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }
.wa-num { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: 0.04em; line-height: 1.2; }
@keyframes waBounce {
0%,90%,100%{transform:translateY(0)}
93%{transform:translateY(-6px)}
96%{transform:translateY(0)}
98%{transform:translateY(-3px)}
}
@media(max-width:900px){
nav { padding: 0.9rem 1.5rem; }
.nav-links { gap: 1.2rem; }
section { padding: 4rem 1.5rem; }
.validation-grid { grid-template-columns: 1fr; }
}
@media(max-width:640px){
.nav-links {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--blue-deep);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
z-index: 200;
font-size: 1.3rem;
}
.nav-links.open { display: flex; }
.nav-links a { color: var(--white); font-size: 1.2rem; }
.hamburger {
display: flex !important;
flex-direction: column;
gap: 5px;
cursor: pointer;
z-index: 300;
background: none;
border: none;
padding: 8px;
}
.hamburger span {
display: block;
width: 26px;
height: 3px;
background: var(--orange);
border-radius: 3px;
transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.close-menu {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 2rem;
color: var(--white);
cursor: pointer;
background: none;
border: none;
}
.hero h1 { font-size: 2rem; }
.hero-stats { gap: 1.5rem; }
}
.hamburger { display: none; }
#navLogo { transition: filter 0.4s; }
[data-theme="light"] #navLogo { filter: drop-shadow(0 0 8px rgba(0,0,0,0.15)); background: transparent; }
[data-theme="dark"] #navLogo { filter: none; }
.nav-logo { background: transparent; padding: 4px 8px; border-radius: 8px; transition: background 0.4s; }
[data-theme="light"] .nav-logo { background: rgba(13,35,71,0.85); border-radius: 8px; padding: 6px 12px; }
@media(max-width:700px){
#contacto > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
#contactForm > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
.about-grid { grid-template-columns: 1fr !important; }
}
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 2.5rem auto 0; }
@media(max-width:900px){ .pricing-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:580px){ .pricing-grid { grid-template-columns: 1fr; } }
.price-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.8rem 1.5rem; position: relative; transition: transform 0.2s, border-color 0.2s; }
.price-card:hover { transform: translateY(-4px); border-color: var(--blue-bright); }
.price-card.featured { border-color: var(--orange); box-shadow: 0 0 30px rgba(249,115,22,0.15); }
.price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; padding: 3px 14px; border-radius: 20px; white-space: nowrap; }
.price-type { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--orange); font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; }
.price-name { font-size: 1.15rem; font-weight: 700; color: var(--white); margin-bottom: 0.3rem; }
.price-desc { font-size: 0.82rem; color: var(--gray-light); margin-bottom: 1rem; min-height: 2.5rem; }
.price-amount { font-size: 2.2rem; font-weight: 800; color: var(--white); line-height: 1; }
.price-amount span { font-size: 1rem; font-weight: 400; color: var(--gray-light); }
.price-range { font-size: 0.78rem; color: var(--gray-light); margin: 0.3rem 0 1rem; }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.3rem; }
.price-features li { font-size: 0.85rem; color: var(--gray-light); display: flex; gap: 0.5rem; }
.price-features li::before { content: "✓"; color: var(--orange); font-weight: 700; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1000px; margin: 2rem auto 0; align-items: start; }
@media(max-width:700px){ .about-grid { grid-template-columns: 1fr; } }
.stat-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3); border-radius: 30px; padding: 0.4rem 1rem; font-size: 0.85rem; color: var(--orange); font-weight: 600; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.trust-badge { display: flex; align-items: center; gap: 0.5rem; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.82rem; color: var(--gray-light); font-weight: 500; }
.audit-img { border-radius: 12px; border: 1px solid rgba(59,130,246,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.3); width: 100%; cursor: pointer; transition: transform 0.2s; }
.audit-img:hover { transform: scale(1.02); }
.trust-bar{background:rgba(59,130,246,.08);border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);padding:.7rem 2rem;overflow:hidden}
.trust-inner{display:flex;gap:2.5rem;align-items:center;flex-wrap:wrap;justify-content:center}
.trust-item{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--gray-light);white-space:nowrap;font-weight:500}
.trust-item svg{width:16px;height:16px;color:var(--orange);flex-shrink:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2rem}
@media(max-width:800px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.steps{grid-template-columns:1fr}}
.step{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:1.5rem;text-align:center;transition:transform .2s}
.step:hover{transform:translateY(-4px)}
.step-num{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue-bright),var(--orange));display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:#fff;margin:0 auto 1rem}
.step h3{font-size:1rem;color:var(--white);margin-bottom:.5rem}
.step p{font-size:.85rem;color:var(--gray-light);line-height:1.6}
.testi-bg{background:linear-gradient(135deg,var(--blue-deep) 0%,#1e3a5f 100%)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.testi-grid{grid-template-columns:1fr}}
.testi-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.stars{color:#f59e0b;font-size:1rem;letter-spacing:2px}
.testi-result{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange);background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.3);border-radius:20px;padding:.25rem .8rem;display:inline-block}
.testi-text{font-size:.88rem;color:rgba(255,255,255,.75);line-height:1.7;font-style:italic;flex:1}
.testi-author{display:flex;align-items:center;gap:.8rem;margin-top:.5rem}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue-bright),var(--orange));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0}
.testi-name{display:block;font-size:.88rem;font-weight:700;color:#fff}
.testi-role{display:block;font-size:.75rem;color:rgba(255,255,255,.5)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;transition:transform .2s,border-color .2s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--blue-bright)}
.blog-img{height:120px;display:flex;align-items:center;justify-content:center;font-size:3rem}
.blog-img.energia{background:linear-gradient(135deg,#1e3a5f,#0d2347)}
.blog-img.teleco{background:linear-gradient(135deg,#1a2f1a,#0d2347)}
.blog-img.pymes{background:linear-gradient(135deg,#2d1a0e,#1e3a5f)}
.blog-content{padding:1.2rem}
.blog-tag{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--orange);text-transform:uppercase}
.blog-result-pill{display:inline-block;margin:.4rem 0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#4ade80;font-size:.75rem;font-weight:700;padding:.2rem .7rem;border-radius:20px}
.blog-content h3{font-size:.95rem;color:var(--white);margin:.4rem 0 .5rem;line-height:1.4}
.blog-content p{font-size:.82rem;color:var(--gray-light);line-height:1.6}
.blog-meta{font-size:.75rem;color:var(--gray-light);margin-top:.8rem;opacity:.7}
.faq-list{max-width:760px;margin:2rem auto 0;display:flex;flex-direction:column;gap:.8rem}
.faq-item{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden}
.faq-q{padding:1.1rem 1.3rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--white);font-size:.95rem;user-select:none;transition:background .2s}
.faq-q:hover{background:rgba(59,130,246,.08)}
.faq-arrow{color:var(--orange);font-size:1.1rem;transition:transform .25s}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a.open{max-height:300px}
.faq-a-inner{padding:.2rem 1.3rem 1.1rem;font-size:.88rem;color:var(--gray-light);line-height:1.7}
.section-inner{max-width:1100px;margin:0 auto;padding:0 1rem}
.section-sub{color:var(--gray-light);font-size:1rem;max-width:600px;margin:.5rem auto 0;text-align:center}
@media(max-width:640px){
div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
.legal-footer { margin:1rem auto 0; max-width:900px; display:flex; flex-wrap:wrap; justify-content:center; gap:0.55rem 1.25rem; color:var(--gray-light); font-size:0.86rem; line-height:1.6; }
.legal-footer strong { color:var(--white); font-weight:700; }
.footer-links { margin-top:1rem; display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
.footer-links a { color:var(--orange); text-decoration:none; font-weight:700; font-size:0.88rem; }
.footer-links a:hover { text-decoration:underline; }
.privacy-modal { display:none; position:fixed; inset:0; z-index:1100; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,0.78); backdrop-filter:blur(8px); }
.privacy-modal.open { display:flex; }
.privacy-modal-card { width:min(760px, 100%); max-height:85vh; overflow:auto; background:var(--blue-mid); border:1px solid var(--card-border); border-radius:12px; box-shadow:0 24px 80px rgba(0,0,0,0.45); padding:1.5rem; color:var(--gray-light); }
.privacy-modal-card h2 { color:var(--white); font-size:1.7rem; margin-bottom:0.7rem; }
.privacy-modal-card h3 { color:var(--orange); font-size:1rem; margin:1.2rem 0 0.35rem; }
.privacy-modal-card p { margin:0.35rem 0; line-height:1.65; }
.privacy-modal-card ul { margin:0.4rem 0 0.2rem 1.2rem; line-height:1.6; }
.privacy-modal-close { float:right; border:0; background:rgba(255,255,255,0.08); color:var(--white); width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:1.1rem; }
.privacy-modal-close:hover { background:rgba(249,115,22,0.22); color:var(--orange); }
.sample-delivery { margin-top: 3rem; }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.sample-card { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.045); border-radius: 8px; padding: 1rem; overflow: hidden; }
.sample-card h3 { margin: 0 0 .45rem; font-size: 1rem; color: #f8fbff; }
.sample-card p { margin: 0 0 .8rem; color: rgba(245,249,255,.68); font-size: .86rem; line-height: 1.55; }
.sample-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; }
.sample-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .78rem; }
.sample-table th, .sample-table td { padding: .55rem .65rem; border-bottom: 1px solid rgba(255,255,255,0.07); text-align: left; white-space: nowrap; }
.sample-table th { color: var(--cyan); font-weight: 700; background: rgba(255,255,255,0.045); }
.sample-note { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--cyan); background: rgba(0,240,255,0.07); color: rgba(245,249,255,.68); border-radius: 6px; font-size: .92rem; line-height: 1.55; }
@media(max-width:640px){ .sample-table { min-width: 460px; } .sample-card { padding: .85rem; } }
.audit-proof { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 2rem; align-items: center; margin-top: 2rem; }
.audit-proof img { width: 100%; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 60px rgba(0,0,0,.35); background: rgba(255,255,255,.04); }
.audit-points { display: grid; gap: .85rem; }
.audit-point { padding: .95rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); color: rgba(245,249,255,.68); line-height: 1.55; }
.audit-point strong { color: #f8fbff; }
@media(max-width:760px){ .audit-proof{grid-template-columns:1fr;} }
img, svg, video { max-width: 100%; }
.page { width: 100%; overflow-x: clip; }
@media(max-width:640px){
.wa-float { right: .85rem; bottom: .85rem; padding: .72rem .85rem; gap: .55rem; }
.wa-float svg { width: 26px; height: 26px; }
.wa-label { font-size: .6rem; }
.wa-num { font-size: .9rem; }
body { padding-bottom: 4.6rem; }
}
nav { background: rgba(10,22,40,.94) !important; border-bottom: 1px solid rgba(59,130,246,.28) !important; transition: none !important; gap: 1rem; }
[data-theme="light"] nav { background: rgba(10,22,40,.94) !important; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; background: transparent !important; padding: 0 !important; }
.nav-logo img { height: 58px !important; width: auto; max-width: 320px; object-fit: contain; display: block; }
.nav-links { align-items: center; gap: .85rem; }
.nav-links a { color: #f0f6ff !important; font-size: .84rem; white-space: nowrap; }
.nav-links a.active:not(.nav-cta), .nav-links a:hover { color: var(--orange-bright) !important; }
.nav-links a.active:not(.nav-cta)::after { width: 100%; }
.nav-links a.nav-cta { background: var(--orange); color: #fff !important; border-radius: 8px; padding: .55rem .8rem; box-shadow: 0 6px 22px rgba(249,115,22,.32); }
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover { background: var(--orange-bright); color: #fff !important; }
.theme-toggle { color: #f0f6ff !important; border-color: rgba(255,255,255,.22) !important; background: rgba(255,255,255,.04) !important; }
@media(max-width:1160px){
nav { padding: .8rem 1.4rem; }
.nav-logo img { height: 50px !important; max-width: 250px; }
.nav-links { gap: .55rem; }
.nav-links a { font-size: .76rem; }
.nav-links a.nav-cta { padding: .48rem .65rem; }
}
@media(max-width:900px){ .nav-logo img { max-width: 230px; } }
@media(max-width:640px){
nav { padding: .75rem 1rem !important; }
.nav-logo img { height: 44px !important; max-width: 190px; }
.nav-links { background: rgba(10,22,40,.98) !important; gap: 1.6rem; padding: 5rem 1rem; }
.nav-links a { font-size: 1rem; }
.nav-links a.nav-cta { padding: .75rem 1.1rem; }
}
body[data-theme="light"] nav, body[data-theme="dark"] nav { background: #0a1628 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 45px rgba(0,0,0,.22) !important; }
body[data-theme="light"] footer, body[data-theme="dark"] footer { background: #0a1628 !important; border-top: 1px solid rgba(255,255,255,.10) !important; color: rgba(235,244,255,.72) !important; }
.nav-logo img { height: 68px !important; max-width: 370px !important; }
.nav-form-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .72rem 1rem; border-radius: 8px; background: linear-gradient(135deg, #ff8c1a, #ffb347); color: #0a1628 !important; font-weight: 900; font-size: .86rem; text-decoration: none; box-shadow: 0 10px 22px rgba(255,140,26,.28); white-space: nowrap; }
.nav-form-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(255,140,26,.36); }
.close-menu { display: none !important; }
body[data-theme="light"] .card, body[data-theme="light"] .service-card, body[data-theme="light"] .price-card, body[data-theme="light"] .sample-card, body[data-theme="light"] .demand-card, body[data-theme="light"] .metric-card, body[data-theme="light"] .audit-point, body[data-theme="light"] .accuracy-card, body[data-theme="light"] .validation-list li, body[data-theme="light"] .faq-item, body[data-theme="light"] .blog-card, body[data-theme="light"] .testi-card, body[data-theme="light"] .feedback-panel, body[data-theme="light"] div[style*="background:var(--card-bg)"], body[data-theme="light"] div[style*="background: var(--card-bg)"] { background: linear-gradient(145deg, rgba(7,18,34,.86), rgba(16,34,58,.74)) !important; border-color: rgba(255,255,255,.13) !important; box-shadow: 0 22px 60px rgba(5,12,24,.22) !important; color: #eef6ff !important; }
body[data-theme="light"] .price-card p, body[data-theme="light"] .service-card p, body[data-theme="light"] .sample-card p, body[data-theme="light"] .demand-card p, body[data-theme="light"] .testi-card p, body[data-theme="light"] .feedback-panel p, body[data-theme="light"] .audit-point p, body[data-theme="light"] .metric-card p, body[data-theme="light"] .faq-item p, body[data-theme="light"] .blog-card p, body[data-theme="light"] div[style*="background:var(--card-bg)"] p, body[data-theme="light"] div[style*="background: var(--card-bg)"] p { color: rgba(235,244,255,.78) !important; }
body[data-theme="light"] input, body[data-theme="light"] select, body[data-theme="light"] textarea, body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea { background: rgba(6,16,31,.88) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #f0f6ff !important; }
body[data-theme="light"] input::placeholder, body[data-theme="light"] textarea::placeholder, body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder { color: rgba(235,244,255,.56) !important; }
body[data-theme="light"] #contacto div[style*="background:var(--blue-mid)"], body[data-theme="dark"] #contacto div[style*="background:var(--blue-mid)"] { background: linear-gradient(145deg, rgba(7,18,34,.90), rgba(16,34,58,.80)) !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 24px 70px rgba(5,12,24,.28) !important; }
.feedback-panel { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, .85fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; padding: 1.4rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); }
.feedback-panel h3 { margin: .5rem 0 .65rem; font-size: clamp(1.35rem, 2vw, 2rem); }
.feedback-form { display: grid; gap: .75rem; }
.feedback-form input:not([type="hidden"]):not([tabindex="-1"]), .feedback-form textarea, .feedback-form select { background: rgba(220, 230, 242, 0.18) !important; border: 1px solid rgba(180, 200, 225, 0.40) !important; color: #f8fbff !important; border-radius: 8px; padding: 0.72rem 1rem; font-size: 0.95rem; outline: none; transition: border 0.2s, background 0.2s; }
.feedback-form input:not([type="hidden"]):not([tabindex="-1"]):focus, .feedback-form textarea:focus { background: rgba(220, 230, 242, 0.28) !important; border-color: var(--orange) !important; }
.feedback-form input::placeholder, .feedback-form textarea::placeholder { color: rgba(220, 235, 255, 0.70) !important; }
body[data-theme="light"] .feedback-form input:not([type="hidden"]):not([tabindex="-1"]), body[data-theme="light"] .feedback-form textarea, body[data-theme="light"] .feedback-form select { background: rgba(235, 241, 250, 0.95) !important; border: 1px solid rgba(100, 140, 200, 0.35) !important; color: #1a2a3a !important; }
body[data-theme="light"] .feedback-form input::placeholder, body[data-theme="light"] .feedback-form textarea::placeholder { color: rgba(60, 90, 130, 0.65) !important; }
footer { padding: 1.35rem 1rem 1.55rem !important; font-size: .74rem !important; line-height: 1.45 !important; }
footer img { display: block; height: 88px !important; width: auto; max-width: min(430px, 92vw) !important; margin: 0 auto .65rem !important; opacity: 1 !important; }
.legal-footer { max-width: 920px; margin: 0 auto; }
.legal-footer p { margin: .25rem 0 !important; }
@media (max-width: 1160px) { .nav-logo img { height: 56px !important; max-width: 260px !important; } .nav-form-btn { padding: .62rem .82rem; font-size: .8rem; } }
@media (max-width: 768px) { nav { gap: .45rem; padding: .58rem .7rem !important; } .nav-logo img { height: 42px !important; max-width: 155px !important; } .nav-form-btn { min-height: 36px; padding: .46rem .58rem; font-size: .72rem; } .theme-toggle { min-height: 36px; padding: .45rem .55rem !important; } #themeBtn span:last-child { display: none; } .hamburger { width: 38px; height: 36px; } .feedback-panel { grid-template-columns: 1fr; padding: 1rem; } footer img { height: 68px !important; } footer { font-size: .70rem !important; } }
@media (max-width: 420px) { .nav-logo img { max-width: 128px !important; height: 36px !important; } .nav-form-btn { font-size: .68rem; padding: .42rem .48rem; } }
.trust-bar { display: none !important; }
body[data-theme="light"] .card, body[data-theme="light"] .service-card, body[data-theme="light"] .price-card, body[data-theme="light"] .sample-card, body[data-theme="light"] .demand-card, body[data-theme="light"] .metric-card, body[data-theme="light"] .audit-point, body[data-theme="light"] .accuracy-card, body[data-theme="light"] .validation-list li, body[data-theme="light"] .faq-item, body[data-theme="light"] .blog-card, body[data-theme="light"] .testi-card, body[data-theme="light"] .feedback-panel, body[data-theme="light"] .legal-card, body[data-theme="light"] .corex-panel, body[data-theme="light"] div[style*="background:var(--card-bg)"], body[data-theme="light"] div[style*="background: var(--card-bg)"] { background: linear-gradient(145deg, rgba(32,52,78,.88), rgba(47,70,100,.78)) !important; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 18px 46px rgba(5,12,24,.18) !important; }
body[data-theme="dark"] .card, body[data-theme="dark"] .service-card, body[data-theme="dark"] .price-card, body[data-theme="dark"] .sample-card, body[data-theme="dark"] .demand-card, body[data-theme="dark"] .metric-card, body[data-theme="dark"] .audit-point, body[data-theme="dark"] .accuracy-card, body[data-theme="dark"] .validation-list li, body[data-theme="dark"] .faq-item, body[data-theme="dark"] .blog-card, body[data-theme="dark"] .testi-card, body[data-theme="dark"] .feedback-panel, body[data-theme="dark"] .legal-card, body[data-theme="dark"] .corex-panel, body[data-theme="dark"] div[style*="background:var(--card-bg)"], body[data-theme="dark"] div[style*="background: var(--card-bg)"] { background: linear-gradient(145deg, rgba(20,38,64,.90), rgba(34,56,86,.78)) !important; border-color: rgba(255,255,255,.16) !important; }
footer, footer p, footer span, footer strong, footer a, .legal-footer, .legal-footer p, .legal-footer span { color: rgba(248,252,255,.92) !important; }
footer a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; max-width: 1120px; margin: 2.4rem auto 0; align-items: stretch; }
.legal-card { min-width: 0; overflow-wrap: anywhere; word-break: normal; border-radius: 8px; padding: clamp(1.25rem, 1.6vw, 1.8rem); color: #eef6ff; }
.legal-card h3 { margin: 0 0 .85rem; color: #fff; font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.12; }
.legal-card p { margin: .65rem 0 0; color: rgba(240,246,255,.84) !important; font-size: clamp(.86rem, .95vw, .98rem); line-height: 1.48; }
.legal-card a { color: #7dd3fc !important; }
.corex-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 300px); gap: 1.5rem; align-items: center; max-width: 1060px; margin: 2.2rem auto 0; padding: clamp(1.2rem, 2vw, 2rem); border-radius: 8px; }
.corex-panel img { width: 100%; max-width: 300px; justify-self: center; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.corex-copy h3 { margin: .65rem 0 .75rem; color: #fff; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.12; }
.corex-copy p { color: rgba(240,246,255,.82) !important; line-height: 1.68; }
section, .section-inner, .page, nav, footer { max-width: 100%; }
img { max-width: 100%; height: auto; }
@media (min-width: 1800px) { section { max-width: 1500px; } .section-inner { max-width: 1320px; } .hero { min-height: 620px; } body { background-size: cover; } }
@media (max-width: 980px) { .legal-grid { grid-template-columns: 1fr; max-width: 680px; } .corex-panel { grid-template-columns: 1fr; text-align: center; } .corex-panel img { max-width: 260px; } }
@media (max-width: 640px) { .legal-grid { gap: .9rem; margin-top: 1.4rem; } .legal-card { padding: 1rem; } .legal-card p { font-size: .84rem; line-height: 1.42; } .corex-panel { padding: 1rem; } }
body[data-theme="light"] { --white: #172033; --gray-light: #334155; --card-bg: rgba(38, 58, 86, .86); --card-border: rgba(69, 105, 150, .28); }
.page { overflow: visible !important; }
body { overflow-x: hidden !important; }
.page > section:not(.hero), section.section, section[id="servicios"], section[id="datos"], section[id="demanda"], section[id="legal"], section[id="contacto"] { padding-top: clamp(2.2rem, 4vw, 4.2rem) !important; padding-bottom: clamp(2.8rem, 5vw, 5rem) !important; }
.hero { min-height: auto !important; padding-top: clamp(3rem, 5vw, 5rem) !important; padding-bottom: clamp(3rem, 5vw, 5rem) !important; }
.section-tag, .section-title, .section-desc, .hero-badge, .hero h1, .hero-sub { opacity: 1 !important; visibility: visible !important; position: relative; z-index: 3; }
body[data-theme="light"] .section-title, body[data-theme="light"] h1.section-title, body[data-theme="light"] h2.section-title, body[data-theme="light"] .hero h1, body[data-theme="light"] .cta-section h2, body[data-theme="light"] section > h1, body[data-theme="light"] section > h2 { color: #1b2738 !important; text-shadow: 0 1px 0 rgba(255,255,255,.35) !important; }
body[data-theme="light"] .section-desc, body[data-theme="light"] .hero-sub, body[data-theme="light"] .cta-section > p, body[data-theme="light"] section > p { color: #334155 !important; text-shadow: none !important; }
body[data-theme="light"] .section-tag { color: #ea580c !important; background: rgba(249, 115, 22, .10) !important; border-color: rgba(249, 115, 22, .28) !important; }
body[data-theme="light"] .section-title em, body[data-theme="light"] .hero h1 em, body[data-theme="light"] .cta-section h2 em { color: #f97316 !important; }
body[data-theme="light"] .hero h1 strong { color: #0e7490 !important; }
.card, .service-card, .price-card, .sample-card, .demand-card, .metric-card, .audit-point, .accuracy-card, .validation-list li, .faq-item, .blog-card, .testi-card, .feedback-panel, .legal-card, .corex-panel, .step, div[style*="background:var(--card-bg)"], div[style*="background: var(--card-bg)"] { background: linear-gradient(145deg, rgba(39, 58, 86, .90), rgba(52, 75, 108, .82)) !important; border: 1px solid rgba(125, 164, 210, .22) !important; color: #f4f8ff !important; box-shadow: 0 18px 42px rgba(9, 20, 35, .20) !important; backdrop-filter: blur(12px) !important; }
.card h3, .service-card h3, .price-card h3, .sample-card h3, .demand-card h3, .demand-card h4, .metric-card h3, .audit-point strong, .accuracy-card h3, .validation-list strong, .faq-q, .blog-card h3, .testi-card h3, .feedback-panel h3, .legal-card h3, .corex-panel h3, .step h3, div[style*="background:var(--card-bg)"] h3, div[style*="background: var(--card-bg)"] h3, div[style*="background:var(--card-bg)"] h4, div[style*="background: var(--card-bg)"] h4 { color: #f8fbff !important; text-shadow: none !important; }
.card p, .service-card p, .price-card p, .sample-card p, .demand-card p, .metric-card p, .audit-point, .accuracy-card p, .validation-list li, .faq-a-inner, .blog-card p, .testi-card p, .feedback-panel p, .legal-card p, .corex-panel p, .step p, div[style*="background:var(--card-bg)"] p, div[style*="background: var(--card-bg)"] p { color: rgba(239, 246, 255, .84) !important; text-shadow: none !important; }
.card .service-tag, .service-tag, .price-badge { color: #ffb86b !important; border-color: rgba(249, 115, 22, .30) !important; background: rgba(249, 115, 22, .12) !important; }
input, select, textarea { background: rgba(39, 58, 86, .88) !important; border: 1px solid rgba(125, 164, 210, .30) !important; color: #f8fbff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; }
input::placeholder, textarea::placeholder { color: rgba(239, 246, 255, .66) !important; }
select option { background: #263a56; color: #f8fbff; }
#contacto div[style*="grid-template-columns:1fr 1fr"], #contacto div[style*="background:var(--blue-mid)"] { background: transparent !important; box-shadow: none !important; border: 0 !important; }
#contacto form, .feedback-form { position: relative; }
@media (max-width: 768px) { .page > section:not(.hero), section.section, section[id="servicios"], section[id="datos"], section[id="demanda"], section[id="legal"], section[id="contacto"] { padding-top: 2rem !important; } .section-title { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; } .section-desc { font-size: .96rem !important; } }
.card, .service-card, .price-card, .sample-card, .demand-card, .metric-card, .audit-point, .accuracy-card, .validation-list li, .faq-item, .blog-card, .testi-card, .feedback-panel, .legal-card, .corex-panel, .step, div[style*="background:var(--card-bg)"], div[style*="background: var(--card-bg)"] { background: linear-gradient(145deg, #263a56, #334966) !important; border-color: rgba(140, 178, 220, .24) !important; color: #f8fbff !important; box-shadow: 0 18px 44px rgba(12, 24, 42, .24) !important; }
.card p, .service-card p, .price-card p, .sample-card p, .demand-card p, .metric-card p, .audit-point, .accuracy-card p, .validation-list li, .faq-a-inner, .blog-card p, .testi-card p, .feedback-panel p, .legal-card p, .corex-panel p, .step p, div[style*="background:var(--card-bg)"] p, div[style*="background: var(--card-bg)"] p { color: rgba(245, 249, 255, .88) !important; }
input, select, textarea { background: #2a3f5e !important; border-color: rgba(150, 190, 235, .34) !important; color: #f8fbff !important; }
body[data-theme="light"] { --white: #172033; --gray-light: #2f4057; }
body[data-theme="light"] .bg-overlay { background: linear-gradient(180deg, rgba(232,240,254,.38) 0%, rgba(219,234,254,.58) 100%) !important; }
.page > section:not(.hero), section.section, section[id="servicios"], section[id="datos"], section[id="demanda"], section[id="nosotros"], section[id="legal"] { max-width: 1250px !important; padding: clamp(2.8rem, 4vw, 4.8rem) clamp(1.1rem, 3.6vw, 3rem) !important; margin: 0 auto !important; min-height: auto !important; text-align: left; }
section[id="nosotros"] { text-align: center !important; }
.section-tag { display: inline-block !important; width: 100%; margin-bottom: .85rem !important; padding: .18rem .55rem !important; color: #f97316 !important; background: rgba(249,115,22,.10) !important; border: 0 !important; opacity: 1 !important; }
.section-title, section > h1, section > h2, .cta-section h2 { color: #172033 !important; opacity: 1 !important; visibility: visible !important; margin-bottom: 1.1rem !important; text-shadow: 0 1px 0 rgba(255,255,255,.28) !important; }
.section-desc, section > p, .cta-section > p { color: #2f4057 !important; opacity: 1 !important; visibility: visible !important; max-width: 760px !important; margin-bottom: 2.5rem !important; line-height: 1.75 !important; }
.card, .service-card, .price-card, .sample-card, .demand-card, .metric-card, .audit-point, .accuracy-card, .validation-list li, .faq-item, .blog-card, .testi-card, .feedback-panel, .legal-card, .corex-panel, .step, .trust-badge, .about-grid > div, div[style*="background:var(--card-bg)"], div[style*="background: var(--card-bg)"] { background: linear-gradient(145deg, rgba(35, 53, 78, .96), rgba(53, 75, 106, .92)) !important; border: 1px solid rgba(135, 174, 220, .26) !important; color: #f8fbff !important; border-radius: 8px !important; box-shadow: 0 18px 44px rgba(12, 24, 42, .24) !important; backdrop-filter: blur(12px) !important; }
.about-grid > div { padding: clamp(1.25rem, 2vw, 1.8rem); }
.about-grid > div:nth-child(2) { text-align: center !important; }
.card h3, .service-card h3, .price-card h3, .sample-card h3, .demand-card h3, .demand-card h4, .metric-card h3, .audit-point strong, .accuracy-card h3, .validation-list strong, .faq-q, .blog-card h3, .testi-card h3, .feedback-panel h3, .legal-card h3, .corex-panel h3, .step h3, .trust-badge strong, .about-grid h3, div[style*="background:var(--card-bg)"] h3, div[style*="background: var(--card-bg)"] h3, div[style*="background:var(--card-bg)"] h4, div[style*="background: var(--card-bg)"] h4 { color: #ffffff !important; }
.card p, .service-card p, .price-card p, .sample-card p, .demand-card p, .metric-card p, .audit-point, .accuracy-card p, .validation-list li, .faq-a-inner, .blog-card p, .testi-card p, .feedback-panel p, .legal-card p, .corex-panel p, .step p, .trust-badge, .about-grid p, .about-grid li, div[style*="background:var(--card-bg)"] p, div[style*="background: var(--card-bg)"] p { color: rgba(245, 249, 255, .88) !important; }
.about-grid strong, .legal-card a { color: #93d5ff !important; }
input, select, textarea { background: #2a3f5e !important; border: 1px solid rgba(150, 190, 235, .34) !important; color: #f8fbff !important; }
input::placeholder, textarea::placeholder { color: rgba(245,249,255,.68) !important; }
select option { background: #263a56; color: #f8fbff; }
.nav-roi-btn { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 42px; min-width: 58px; padding: .58rem .68rem; border-radius: 8px; border: 1px solid rgba(34,211,238,.38); background: rgba(34,211,238,.10); color: #dffaff; font-weight: 900; font-size: .84rem; letter-spacing: .06em; cursor: pointer; box-shadow: 0 10px 22px rgba(34,211,238,.10); }
.nav-roi-btn:hover { background: rgba(34,211,238,.18); transform: translateY(-1px); }
.roi-nav-icon { display: inline-flex; line-height: 1; font-size: 1rem; }
.roi-nav-text { display: inline-flex; line-height: 1; }
@media (max-width: 768px) { .nav-roi-btn { min-height: 36px; min-width: 42px; padding: .42rem .48rem; font-size: .72rem; } }
@media (max-width: 420px) { .roi-nav-text { display: none; } }
.roi-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: .5rem; background: rgba(5,12,24,.82); backdrop-filter: blur(8px); }
.roi-modal.open { display: flex; }
.roi-card { width: min(1200px, 99vw); max-height: 98vh; overflow-y: auto; background: linear-gradient(145deg, #17253a, #263a56); border: 1px solid rgba(125,164,210,.30); border-radius: 10px; padding: .35rem .85rem; color: #f8fbff; position: relative; box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.roi-card::-webkit-scrollbar { width: 5px; }
.roi-card::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
.roi-card::-webkit-scrollbar-thumb { background: rgba(255,153,51,.3); border-radius: 3px; }
.roi-close { position: absolute; top: .7rem; right: .7rem; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f97316; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.roi-close:hover { background: #ea6a0a; }
.roi-head { margin-bottom: .3rem; }
.roi-head h2 { color: #fff; margin: .15rem 2.2rem .15rem 0; font-size: 1.05rem; font-weight: 700; }
.roi-head p { color: rgba(245,249,255,.75); font-size: .8rem; margin: .1rem 0 .2rem; }
.section-tag { display: inline-block; padding: .2rem .55rem; background: rgba(255,165,0,.1); border: 1px solid rgba(255,165,0,.3); border-radius: 20px; font-size: .68rem; color: #ffa500; margin-bottom: .3rem; font-weight: 600; }
.roi-selector-row { margin: .15rem 0; }
.roi-base-label { color: rgba(245,249,255,.78); font-size: .78rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.roi-base-select { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #f8fbff; padding: .3rem .7rem; font-size: .83rem; cursor: pointer; }
.roi-sliders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .05rem .9rem; margin: .08rem 0 .12rem; }
.roi-slider-row { display: flex; flex-direction: column; gap: .01rem; }
.roi-slider-header { display: flex; justify-content: space-between; align-items: baseline; }
.roi-slider-label { font-size: .78rem; font-weight: 600; color: rgba(245,249,255,.88); }
.roi-slider-value { font-size: .92rem; font-weight: 700; color: #ff9933; white-space: nowrap; }
.roi-pill { font-size: .64rem; background: rgba(255,153,51,.15); color: #ff9933; border: 1px solid rgba(255,153,51,.3); border-radius: 10px; padding: 1px 4px; vertical-align: middle; }
.roi-slider { width: 100%; height: 4px; border-radius: 3px; appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.18); cursor: pointer; accent-color: #ff9933; outline: none; }
.roi-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #ff9933; cursor: pointer; border: 2px solid #fff; transition: transform .1s; }
.roi-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.roi-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #ff9933; cursor: pointer; border: 2px solid #fff; }
.roi-slider-range { display: flex; justify-content: space-between; font-size: .56rem; color: rgba(245,249,255,.35); line-height: 1; margin-top: .01rem; }
.roi-results { display: grid; grid-template-columns: repeat(4, minmax(100px,1fr)); gap: .35rem; margin: .2rem 0; }
.roi-results div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .3rem .45rem; }
.roi-results span { display: block; color: rgba(245,249,255,.65); font-size: .7rem; margin-bottom: .2rem; }
.roi-results strong { color: #fff; font-size: clamp(.9rem, 1.4vw, 1.25rem); }
.roi-extra { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .3rem; margin: .2rem 0; }
.roi-extra div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: .25rem .45rem; }
.roi-extra span { display: block; color: rgba(245,249,255,.6); font-size: .66rem; margin-bottom: .1rem; }
.roi-result-bar { height: 44px; border-radius: 6px; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #666; margin: .25rem 0; transition: background .35s; }
.roi-bar-left { display: flex; flex-direction: column; gap: 2px; }
.roi-bar-label { text-transform: uppercase; font-size: 10px; color: rgba(0,0,0,.6); font-weight: 700; letter-spacing: .08em; }
.roi-bar-msg { font-size: 13px; font-weight: 800; color: rgba(0,0,0,.88); }
.roi-bar-value { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; }
.roi-cta-btn { background: #ff9933; color: #fff; border: none; padding: 8px 24px; border-radius: 6px; font-weight: 700; font-size: 13px; width: 100%; text-transform: uppercase; cursor: pointer; letter-spacing: .04em; transition: background .2s; margin: .2rem 0; }
.roi-cta-btn:hover { background: #ff7700; }
.roi-note { color: rgba(245,249,255,.6) !important; font-size: .75rem; margin: .15rem 0 .05rem !important; line-height: 1.4; }
@media (max-width: 900px) { .roi-sliders-grid { grid-template-columns: repeat(2, 1fr); } .roi-extra { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .roi-sliders-grid { grid-template-columns: 1fr; } .roi-results { grid-template-columns: 1fr 1fr; } .roi-extra { grid-template-columns: 1fr 1fr; } .roi-bar-value { font-size: 26px; } .roi-channels { grid-template-columns: 1fr; } }
.roi-contact-modal { background: linear-gradient(145deg,#17253a,#263a56); border: 1px solid rgba(125,164,210,.3); border-radius: 12px; padding: 1.4rem 1.6rem; width: min(480px,95vw); color: #f8fbff; position: relative; }
.roi-contact-header { margin-bottom: .9rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(255,165,0,.2); }
.roi-contact-header h2 { font-size: 1.15rem; color: #fff; margin: .25rem 2.5rem .3rem 0; font-weight: 700; }
.roi-contact-header p { font-size: .82rem; color: rgba(245,249,255,.72); margin: 0; }
.roi-contact-fields { display: grid; gap: .6rem; margin-bottom: .9rem; }
.roi-contact-fields label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: rgba(220,235,255,.85); }
.roi-field { background: rgba(220,230,242,.18); border: 1px solid rgba(180,200,225,.40); border-radius: 8px; color: #f8fbff; padding: .72rem 1rem; font-size: .95rem; outline: none; transition: border .2s, background .2s; width: 100%; box-sizing: border-box; font-family: inherit; }
.roi-field:focus { background: rgba(220,230,242,.28); border-color: var(--orange); }
.roi-field::placeholder { color: rgba(220,235,255,.70); }
.roi-field-select { appearance: none; -webkit-appearance: none; background: rgba(220,230,242,.18) url("image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ff9933'/%3E%3C/svg%3E") no-repeat right .9rem center; padding-right: 2.2rem; cursor: pointer; }
.roi-field-select option { background: #17253a; }
.roi-field-textarea { resize: none; line-height: 1.5; } 
.roi-base-reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.roi-base-card { background: rgba(255,165,0,.07); border: 1px solid rgba(255,165,0,.25); border-radius: 8px; padding: .5rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.roi-base-card-label { font-size: .7rem; font-weight: 700; color: #ffa500; text-transform: uppercase; letter-spacing: .06em; }
.roi-base-card select { background: transparent; border: none; color: #f8fbff; font-size: .9rem; outline: none; cursor: pointer; padding: .15rem 0; width: 100%; }
.roi-base-card select option { background: #17253a; }
.roi-reg-label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: rgba(220,235,255,.85); }
.roi-channel-label { font-size: .8rem; font-weight: 700; color: rgba(220,235,255,.85); margin-bottom: .45rem; }
.roi-channels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.roi-channel-btn { border-radius: 8px; padding: .65rem .4rem; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: center; transition: opacity .15s; border: none; }
.roi-channel-btn:hover { opacity: .85; }
.roi-wa { background: #25d366; color: #fff; }
.roi-em { background: #4a90e2; color: #fff; }
.roi-fo { background: #ff9933; color: #fff; }
/* ═══════════════════════════════════════════════════════
   BANNER DE COOKIES
═══════════════════════════════════════════════════════ */
#cookie-banner {
    position: fixed;
    bottom: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100% - 2rem));
    background: #0f172a;
    border: 1px solid #1e3a5f;
    border-radius: 16px;
    padding: 1.4rem 1.8rem;
    z-index: 9999;
    box-shadow: 0 -4px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(249,115,22,.15);
    transition: bottom .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
#cookie-banner.visible {
    bottom: 1.5rem;
    opacity: 1;
}
#cookie-banner .ck-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #f97316;
    letter-spacing: .3px;
}
#cookie-banner .ck-head svg {
    flex-shrink: 0;
}
#cookie-banner p {
    font-size: .875rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
}
#cookie-banner p a {
    color: #f97316;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#cookie-banner p a:hover {
    color: #fb923c;
}
.cookie-btns {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#cookie-reject {
    background: transparent;
    border: 1px solid #334155;
    color: #64748b;
    padding: .55rem 1.3rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s;
    font-family: inherit;
}
#cookie-reject:hover {
    border-color: #64748b;
    color: #94a3b8;
}
#cookie-accept {
    background: #f97316;
    border: none;
    color: #fff;
    padding: .55rem 1.6rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s;
    font-family: inherit;
}
#cookie-accept:hover {
    background: #fb923c;
    transform: translateY(-1px);
}
@media (max-width: 480px) {
    #cookie-banner {
        padding: 1.1rem 1.1rem;
        border-radius: 12px;
    }
    .cookie-btns {
        justify-content: stretch;
    }
    #cookie-reject, #cookie-accept {
        flex: 1;
        text-align: center;
    }
}