/* =========================================================
   BYTESCR — Estilos One Page
   Mobile-first. Consume las variables definidas en style.css (:root)
   ========================================================= */

body {
	font-family: var(--font-body);
	color: var(--bytes-ink);
	background: var(--bytes-bg);
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: 1.15;
	margin: 0 0 16px;
}

p { margin: 0 0 16px; color: var(--bytes-ink-soft); }

.bytes-container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}

.bytes-section { padding: 64px 0; }
.bytes-section--alt { background: var(--bytes-bg-alt); }
.bytes-section__title { font-size: clamp(28px, 4vw, 40px); }
.bytes-section__subtitle { font-size: clamp(20px, 3vw, 26px); margin-top: 40px; }
.bytes-section__lead { font-size: 18px; max-width: 640px; }

/* ---------- BOTONES ---------- */
.bytes-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	font-size: 15px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	border: 2px solid transparent;
	cursor: pointer;
}
.bytes-btn--primary { background: var(--bytes-primary); color: #fff; }
.bytes-btn--primary:hover { background: var(--bytes-primary-dark); transform: translateY(-1px); }
.bytes-btn--outline { border-color: var(--bytes-border); color: var(--bytes-ink); background: transparent; }
.bytes-btn--outline:hover { border-color: var(--bytes-primary); color: var(--bytes-primary); }
.bytes-btn--whatsapp { background: #1FAA59; color: #fff; }
.bytes-btn--whatsapp:hover { background: #178a47; }
.bytes-btn--whatsapp svg { width: 18px; height: 18px; }

/* ---------- HEADER ---------- */
.bytes-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bytes-border);
}
.bytes-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 16px; }
.bytes-header__logo { display: block; text-decoration: none; }
.bytes-header__logo img { max-height: 44px; width: auto; }
.bytes-header__logo-text { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--bytes-ink); }

.bytes-nav { display: none; }
.bytes-nav__list { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.bytes-nav__list a { text-decoration: none; color: var(--bytes-ink); font-weight: 500; font-size: 15px; }
.bytes-nav__list a:hover { color: var(--bytes-primary); }

.bytes-header__actions { display: flex; align-items: center; gap: 12px; }
.bytes-header__cta { display: none; }

.bytes-nav__toggle {
	background: none; border: none; cursor: pointer; padding: 8px;
	display: flex; flex-direction: column; gap: 5px;
}
.bytes-nav__toggle-bar { width: 22px; height: 2px; background: var(--bytes-ink); display: block; }

@media (min-width: 900px) {
	.bytes-nav { display: block; }
	.bytes-header__cta { display: inline-flex; }
	.bytes-nav__toggle { display: none; }
}

/* Menú móvil desplegable */
@media (max-width: 899px) {
	.bytes-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--bytes-white);
		border-bottom: 1px solid var(--bytes-border);
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease;
	}
	.bytes-nav.is-open { max-height: 480px; }
	.bytes-nav__list { flex-direction: column; gap: 0; padding: 8px 20px 20px; }
	.bytes-nav__list li { border-bottom: 1px solid var(--bytes-border); }
	.bytes-nav__list a { display: block; padding: 14px 0; }
}

/* ---------- HERO ---------- */
.bytes-hero { padding-top: 56px; padding-bottom: 56px; }
.bytes-hero__grid { display: grid; gap: 40px; align-items: center; }
.bytes-hero__title { font-size: clamp(30px, 5vw, 48px); }
.bytes-hero__subtitle { font-size: 18px; max-width: 520px; }
.bytes-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0; }
.bytes-hero__tagline { font-family: var(--font-mono); font-size: 13px; color: var(--bytes-primary); }
.bytes-hero__visual { display: none; }

@media (min-width: 960px) {
	.bytes-hero__grid { grid-template-columns: 1fr 1fr; }
	.bytes-hero__visual { display: block; }
}

.bytes-hero__pulse circle { animation: bytes-pulse 2.4s ease-in-out infinite; }
.bytes-hero__pulse circle:nth-child(2) { animation-delay: .3s; }
.bytes-hero__pulse circle:nth-child(3) { animation-delay: .6s; }
@keyframes bytes-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- GRIDS / CARDS ---------- */
.bytes-grid { display: grid; gap: 24px; margin-top: 40px; }
.bytes-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .bytes-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bytes-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.bytes-card {
	background: var(--bytes-white);
	border: 1px solid var(--bytes-border);
	border-radius: var(--radius);
	padding: 28px;
	transition: box-shadow .2s ease, transform .2s ease;
}
.bytes-card:hover { box-shadow: 0 12px 30px rgba(11,95,255,.08); transform: translateY(-2px); }
.bytes-card__icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; background: var(--bytes-bg-alt); border-radius: 12px; color: var(--bytes-primary); margin-bottom: 16px; }
.bytes-card__icon svg { width: 24px; height: 24px; }
.bytes-card__title { font-size: 19px; margin-bottom: 8px; }
.bytes-card__desc p { margin-bottom: 0; }
.bytes-card__link { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--bytes-primary); text-decoration: none; }
.bytes-card__meta { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--bytes-accent); }
.bytes-card__media img { border-radius: 10px; margin-bottom: 16px; }
.bytes-card__services { font-size: 14px; }

.bytes-principle h3 { font-size: 18px; }

/* ---------- SOLUCIONES / FLUJO ---------- */
.bytes-soluciones__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .bytes-soluciones__grid { grid-template-columns: 1.1fr 0.9fr; } }

.bytes-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 20px 0; }
.bytes-tags li { background: var(--bytes-white); border: 1px solid var(--bytes-border); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }

.bytes-callout { background: var(--bytes-white); border-left: 4px solid var(--bytes-accent); border-radius: 10px; padding: 20px 24px; margin-top: 20px; }
.bytes-callout h3 { font-size: 17px; margin-bottom: 6px; }
.bytes-callout__note { font-size: 13px; font-style: italic; margin: 0; }

.bytes-flow { display: flex; flex-direction: column; align-items: center; gap: 0; }
.bytes-flow__node {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	background: var(--bytes-white); border: 1px solid var(--bytes-border);
	border-radius: 14px; padding: 20px 28px; width: 100%; max-width: 240px; text-align: center;
	font-weight: 600; font-size: 14px;
}
.bytes-flow__icon { width: 28px; height: 28px; color: var(--bytes-primary); }
.bytes-flow__line { width: 2px; height: 32px; background: repeating-linear-gradient(to bottom, var(--bytes-accent) 0 6px, transparent 6px 12px); }
.bytes-flow__line { animation: bytes-flow-move 1.2s linear infinite; }
@keyframes bytes-flow-move { from { background-position-y: 0; } to { background-position-y: 24px; } }

/* ---------- ASISTENTE VIRTUAL DEMO ---------- */
.bytes-asistente__grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .bytes-asistente__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.bytes-check-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.bytes-check-list li { padding-left: 28px; position: relative; font-weight: 500; }
.bytes-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--bytes-accent); font-weight: 700; }

.bytes-demo {
	background: var(--bytes-ink);
	border-radius: 24px;
	padding: 20px;
	max-width: 360px;
	margin: 0 auto;
	color: #fff;
}
.bytes-demo__badge { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #A9B4C8; text-align: center; margin-bottom: 12px; }
.bytes-demo__screen {
	background: #101826;
	border-radius: 16px;
	min-height: 260px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bytes-demo__bubble { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.bytes-demo__bubble--bot { background: #1E2A3D; align-self: flex-start; border-bottom-left-radius: 4px; }
.bytes-demo__bubble--user { background: var(--bytes-accent); color: #06251A; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 600; }
.bytes-demo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bytes-demo__actions button {
	flex: 1 1 auto; background: var(--bytes-accent); color: #06251A; border: none; border-radius: 999px;
	padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.bytes-demo__reset { margin-top: 14px; width: 100%; background: transparent; border: 1px solid #37455A; color: #C7D0DE; padding: 10px; border-radius: 999px; cursor: pointer; font-size: 13px; }
.bytes-demo__reset:hover { border-color: var(--bytes-accent); color: #fff; }

/* ---------- EMPRESAS / LOGOS ---------- */
.bytes-logos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: center;
	margin-top: 40px;
}
@media (min-width: 720px) { .bytes-logos { grid-template-columns: repeat(4, 1fr); } }
.bytes-logos__item { display: flex; align-items: center; justify-content: center; height: 90px; }
.bytes-logos__img { max-height: 60px; width: auto; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.bytes-logos__item a:hover .bytes-logos__img,
.bytes-logos__item a:focus .bytes-logos__img { filter: grayscale(0%); opacity: 1; }

/* ---------- PROCESO ---------- */
.bytes-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 24px; counter-reset: step; }
@media (min-width: 960px) { .bytes-steps { grid-template-columns: repeat(4, 1fr); } }
.bytes-steps__item { background: var(--bytes-white); border: 1px solid var(--bytes-border); border-radius: var(--radius); padding: 24px; }
.bytes-steps__num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--bytes-primary); color: #fff; border-radius: 50%; font-weight: 700; margin-bottom: 12px; }
.bytes-steps__item h3 { font-size: 16px; }
.bytes-steps__item p { font-size: 14px; margin-bottom: 0; }

/* ---------- CTA ---------- */
.bytes-cta { background: linear-gradient(135deg, var(--bytes-primary) 0%, var(--bytes-primary-dark) 100%); color: #fff; text-align: center; }
.bytes-cta__inner { max-width: 640px; }
.bytes-cta__logo img { max-height: 48px; margin: 0 auto 20px; filter: brightness(0) invert(1); }
.bytes-cta__title { color: #fff; font-size: clamp(24px, 4vw, 34px); }
.bytes-cta__text { color: rgba(255,255,255,.85); }
.bytes-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; }
.bytes-cta .bytes-btn--outline { border-color: rgba(255,255,255,.5); color: #fff; }
.bytes-cta .bytes-btn--outline:hover { border-color: #fff; }

/* ---------- CONTACTO / FORM ---------- */
.bytes-contacto__grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .bytes-contacto__grid { grid-template-columns: 1.2fr 0.8fr; } }

.bytes-form { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .bytes-form { grid-template-columns: 1fr 1fr; } }
.bytes-form__row--full { grid-column: 1 / -1; }
.bytes-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.bytes-form input,
.bytes-form select,
.bytes-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--bytes-border); border-radius: 10px;
	font-family: var(--font-body); font-size: 15px; background: var(--bytes-white); color: var(--bytes-ink);
}
.bytes-form input:focus, .bytes-form select:focus, .bytes-form textarea:focus {
	outline: 2px solid var(--bytes-primary); outline-offset: 1px; border-color: var(--bytes-primary);
}
.bytes-form__checkbox label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 14px; }
.bytes-form__checkbox input { width: auto; margin-top: 3px; }
.bytes-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bytes-form__status { font-weight: 600; margin-top: 4px; }
.bytes-form__status[data-state="error"] { color: #C0392B; }
.bytes-form__status[data-state="success"] { color: #1FAA59; }

.bytes-faq__list { margin-top: 20px; display: grid; gap: 10px; }
.bytes-faq__item { background: var(--bytes-bg-alt); border-radius: 12px; padding: 6px 18px; }
.bytes-faq__item summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; }
.bytes-faq__item summary::-webkit-details-marker { display: none; }
.bytes-faq__item summary::after { content: "+"; float: right; font-size: 20px; }
.bytes-faq__item[open] summary::after { content: "–"; }
.bytes-faq__answer { padding-bottom: 16px; font-size: 14px; }

/* ---------- FOOTER ---------- */
.bytes-footer { background: var(--bytes-ink); color: #B9C2D0; padding: 48px 0 24px; }
.bytes-footer__inner { display: grid; gap: 32px; }
@media (min-width: 900px) { .bytes-footer__inner { grid-template-columns: 1fr 1fr 1fr; } }
.bytes-footer__brand img { filter: brightness(0) invert(1); max-height: 40px; }
.bytes-footer__brand p { color: #8895A8; margin-top: 8px; }
.bytes-footer__nav { display: flex; flex-direction: column; gap: 10px; }
.bytes-footer__nav a, .bytes-footer__contact a { color: #B9C2D0; text-decoration: none; }
.bytes-footer__nav a:hover, .bytes-footer__contact a:hover { color: #fff; }
.bytes-footer__socials { display: flex; gap: 14px; margin-top: 10px; }
.bytes-footer__legal { grid-column: 1 / -1; border-top: 1px solid #232E42; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; }
.bytes-footer__legal a { color: #8895A8; text-decoration: none; }
.bytes-footer__legal p { margin: 0 0 0 auto; color: #6A7789; }

/* ---------- WHATSAPP FLOAT ---------- */
.bytes-whatsapp-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 600;
	width: 56px; height: 56px; border-radius: 50%;
	background: #1FAA59; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 20px rgba(0,0,0,.2);
	transition: transform .15s ease;
}
.bytes-whatsapp-float svg { width: 28px; height: 28px; color: #fff; }
.bytes-whatsapp-float:hover { transform: scale(1.06); }

/* ---------- LEGAL / 404 ---------- */
.bytes-legal, .bytes-404 { padding: 80px 0; }
.bytes-legal__content :is(h2,h3) { margin-top: 28px; }
.bytes-404 { text-align: center; }
.bytes-404 h1 { font-size: 96px; color: var(--bytes-primary); }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
	.bytes-hero__pulse circle,
	.bytes-flow__line,
	.bytes-card,
	.bytes-btn,
	.bytes-whatsapp-float { animation: none !important; transition: none !important; }
}

/* BYTESCR 2.1: identidad oscura blindada contra CSS antiguo en caché. */
:root, body {
	--bytes-primary:#9DFF20; --bytes-primary-dark:#5FB800; --bytes-accent:#C7FF5B;
	--bytes-ink:#F5F7F4; --bytes-ink-soft:#AAB4AC; --bytes-bg:#050706;
	--bytes-bg-alt:#0A0E0B; --bytes-border:#202A22; --bytes-white:#101612;
	--bytes-glow:rgba(157,255,32,.24);
}
html { color-scheme:dark; }
body { background:radial-gradient(circle at 82% 8%,rgba(157,255,32,.09),transparent 28rem),#050706; color:#F5F7F4; }
.bytes-section { padding:clamp(76px,9vw,116px) 0; }
.bytes-section--alt { background:#0A0E0B; border-block:1px solid rgba(157,255,32,.07); }
.bytes-section__title { color:#F5F7F4; letter-spacing:-.035em; }
.bytes-section__title::before { content:"//"; color:#9DFF20; margin-right:12px; font:600 .45em/1 var(--font-mono); vertical-align:.3em; }
.bytes-section__lead,p { color:#AAB4AC; }
.bytes-header { background:rgba(5,7,6,.92); border-color:rgba(157,255,32,.13); backdrop-filter:blur(18px); }
.bytes-brand-logo { width:min(210px,42vw); max-height:46px; object-fit:contain; }
.bytes-nav__list a { color:#E2E7E3; }
.bytes-nav__list a:hover { color:#9DFF20; }
.bytes-nav__toggle-bar { background:#9DFF20; }
.bytes-btn--primary { color:#071000; background:linear-gradient(135deg,#C9FF67,#9DFF20); box-shadow:0 12px 35px rgba(116,210,0,.17); }
.bytes-btn--primary:hover { color:#030600; background:#CFFF73; transform:translateY(-3px); box-shadow:0 0 26px var(--bytes-glow); }
.bytes-btn--outline { color:#E8ECE9; border-color:#344137; }
.bytes-hero { min-height:calc(100vh - 74px); background:#050706; color:#F5F7F4; display:grid; align-items:center; }
.bytes-hero__title { color:#F5F7F4; font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-.055em; }
.bytes-hero__subtitle { color:#C1C9C3; line-height:1.65; }
.bytes-hero__tagline { color:#9DFF20; }
.bytes-hero__visual { filter:drop-shadow(0 0 34px rgba(157,255,32,.16)); animation:bytes-neon-float 5s ease-in-out infinite; }
.bytes-card,.bytes-principle,.bytes-steps__item,.bytes-flow__node,.bytes-callout,.bytes-faq__item { background:linear-gradient(145deg,#121914,#090D0A); border-color:rgba(157,255,32,.14); }
.bytes-card h3,.bytes-principle h3,.bytes-steps__item h3,.bytes-flow__node { color:#F5F7F4; }
.bytes-card p,.bytes-principle p,.bytes-steps__item p { color:#AAB4AC; }
.bytes-card:hover { border-color:rgba(157,255,32,.38); box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 28px rgba(157,255,32,.07); transform:translateY(-6px); }
.bytes-card__icon { background:rgba(157,255,32,.08); color:#9DFF20; border:1px solid rgba(157,255,32,.16); }
.bytes-tags li { background:rgba(157,255,32,.055); border-color:rgba(157,255,32,.18); color:#E0E6E1; }
.bytes-demo { background:linear-gradient(160deg,#111813,#050806); border:1px solid rgba(157,255,32,.28); box-shadow:0 26px 80px rgba(0,0,0,.52); }
.bytes-demo__screen { background:#060A07; }
.bytes-demo__bubble--user,.bytes-demo__actions button { background:#9DFF20; color:#071000; }
.bytes-steps__num { background:#9DFF20; color:#071000; box-shadow:0 0 20px var(--bytes-glow); }
.bytes-cta { background:radial-gradient(circle at 50% 0,rgba(157,255,32,.18),transparent 55%),#060A07; border-block:1px solid rgba(157,255,32,.22); }
.bytes-cta__logo img,.bytes-footer__brand img { filter:none; }
.bytes-form input,.bytes-form select,.bytes-form textarea { background:#0A0F0B; border-color:#273229; color:#F3F6F3; }
.bytes-footer { background:#020302; border-top:1px solid rgba(157,255,32,.14); }
@keyframes bytes-neon-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@media (max-width:959px) { .bytes-hero{min-height:auto}.bytes-hero__visual{display:block;max-width:480px;margin:auto} }
@media (prefers-reduced-motion:reduce) { .bytes-hero__visual{animation:none} }
.bytes-reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms); }
.bytes-reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .bytes-reveal{opacity:1;transform:none;transition:none} }