/* Hero V2 aprobado. Estilos exclusivos de inicio; sin JS se ve el resultado completo. */
.home-hero {
  --hero-cycle: 18s; --hero-text: #D9E7FA; --hero-muted: #AAC3DE; --hero-window-bg: #10243A;
  --hero-outline: #426077; --hero-terminal-bg: #091C30; --hero-code: #C2E4EE; --hero-green: #55E1C9;
  position: relative; isolation: isolate; overflow: hidden; color: var(--white);
  background: radial-gradient(ellipse at 88% 13%,#252A65,transparent 43%),radial-gradient(ellipse at 57% 100%,#0A4752,transparent 43%),linear-gradient(115deg,#102542,#152449 90%);
}
.home-hero::before { content: ''; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(circle at 65% 53%,rgb(34 211 238 / .1),transparent 22%); pointer-events: none; }
.hero-wrap { width: min(100% - 48px,1132px); padding-block: 75px 30px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: 62px; }
.hero-copy,.hero-demonstration { min-width: 0; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; color: #A8DCF5; font-size: .6875rem; letter-spacing: .12em; margin: 0; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--luminous-teal); flex-shrink: 0; }
.hero-copy h1 { color: var(--white); font-size: clamp(2.75rem,4.5vw,4.375rem); line-height: 1.09; letter-spacing: -.047em; margin: 28px 0; }
.hero-copy h1 em { color: var(--luminous-teal); }
.hero-lead { font-size: 1rem; line-height: 1.85; color: #C4D9F3; max-width: 480px; }
.hero-copy .button-row { margin: 27px 0; gap: 12px; }
.hero-copy .btn { padding: 16px 20px; font-size: .8125rem; }
.home-hero .btn-primary { background: var(--orange); border-color: var(--orange); color: var(--deep-navy); }
.home-hero .btn-primary:hover { background: #FFAD75; border-color: #FFAD75; }
.hero-note { font-size: .75rem; color: var(--hero-muted); }
.hero-scene { position: relative; min-height: 525px; perspective: 1100px; }
.hero-glow { position: absolute; inset: 10% 0 8%; border-radius: 50%; background: radial-gradient(circle,rgb(20 128 120 / .32),transparent 65%); pointer-events: none; }
.hero-window { position: relative; margin-top: 12px; border: 1px solid var(--hero-outline); background: var(--hero-window-bg); border-radius: 17px; box-shadow: 0 30px 75px #0007; overflow: hidden; transform: rotateY(-5deg) rotateX(2deg); }
.hero-chrome { min-height: 42px; background: #1A3048; border-bottom: 1px solid #344A62; display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 0 18px; color: #AFC4D9; font-size: .625rem; letter-spacing: .07em; }
.hero-dots { color: #8FB0BF; font-size: 1.25rem; letter-spacing: 2px; }
.hero-work { padding: 25px 24px 20px; min-height: 435px; line-height: 1.4; background-image: linear-gradient(#FFFFFF05 1px,transparent 1px),linear-gradient(90deg,#FFFFFF05 1px,transparent 1px); background-size: 28px 28px; }
.hero-tools { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 13px; }
.hero-tool { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; border: 1px solid var(--hero-outline); border-radius: 8px; background: var(--hero-window-bg); color: var(--hero-green); }
.hero-tool-code { color: #FCA66B; }
.hero-tool .icon { width: 18px; height: 18px; }
.hero-codebar { display: flex; flex-wrap: wrap; gap: 7px; font: .75rem/1.4 ui-monospace,Consolas,monospace; color: #B0C8DE; margin-bottom: 15px; }
.hero-codebar > span { color: #C1A1FF; }
.hero-codebar b { color: var(--hero-green); font-weight: 500; }
.hero-panel-title { font-family: var(--heading-font); font-weight: 600; font-size: 1.8125rem; line-height: 1.1; letter-spacing: -.035em; margin: 0 0 13px; }
.hero-panel-title > span { color: var(--luminous-teal); }
.hero-terminal { border: 1px solid #335773; background: var(--hero-terminal-bg); border-radius: 10px; padding: 13px; margin: 17px 0; color: var(--hero-code); font: .75rem/1.8 ui-monospace,Consolas,monospace; min-height: 93px; }
.hero-line { display: block; white-space: nowrap; max-width: 100%; }
.hero-line b { color: var(--hero-green); font-weight: 500; }
.hero-dashboard { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.hero-chart { background: var(--soft-blue); color: var(--deep-navy); border-radius: 10px; padding: 15px; min-height: 137px; overflow: hidden; }
.hero-chart strong { display: block; font-size: .75rem; }
.hero-chart small { display: block; font-size: .6875rem; color: #4C647D; margin-top: 3px; }
.hero-bars { display: flex; gap: 7px; height: 74px; align-items: end; margin-top: 9px; }
.hero-bars i { width: 17%; background: linear-gradient(var(--luminous-teal),var(--brand-teal)); border-radius: 3px 3px 0 0; transform-origin: bottom; }
.hero-bars i:nth-child(1) { height: 36%; }.hero-bars i:nth-child(2) { height: 57%; }.hero-bars i:nth-child(3) { height: 49%; }.hero-bars i:nth-child(4) { height: 78%; }.hero-bars i:nth-child(5) { height: 100%; }
.hero-tiles { display: grid; gap: 9px; }
.hero-tile { background: var(--white); color: var(--deep-navy); padding: 12px; border: 1px solid #D2E1EF; border-radius: 8px; font-size: .6875rem; font-weight: 600; }
.hero-tile > span { color: var(--violet); margin-right: 5px; }
.hero-brand-result { display: flex; align-items: center; gap: 14px; margin-top: 15px; padding: 11px 14px; border: 1px solid #37677B; border-radius: 10px; background: linear-gradient(90deg,var(--pale-teal),var(--white)); color: var(--deep-navy); position: relative; overflow: hidden; }
.hero-brand-result::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 35%,#FFFFFFAA 50%,transparent 65%); transform: translateX(-150%); pointer-events: none; }
.hero-brand-result img { width: 118px; height: auto; display: block; flex-shrink: 0; }
.hero-brand-caption { font-size: .6875rem; line-height: 1.5; color: #476779; font-weight: 600; }
.hero-brand-caption strong { display: block; color: #116D66; font-size: .6875rem; letter-spacing: .07em; }
.hero-status { display: flex; align-items: start; gap: 8px; color: #91D8D0; font-size: .6875rem; margin-top: 17px; min-height: 2.8em; }
.hero-pulse { height: 7px; width: 7px; margin-top: 4px; flex-shrink: 0; background: var(--luminous-teal); border-radius: 50%; }
.hero-type { color: var(--hero-green); display: inline-block; width: 15ch; white-space: nowrap; }
.hero-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--hero-green); vertical-align: -.12em; }
.hero-illustration-note { font-size: .6875rem; margin-top: 13px; color: var(--hero-muted); text-align: center; }
.hero-live-strip { margin-top: 23px; border: 1px solid #FFFFFF24; border-radius: 11px; background: #071E3280; overflow: hidden; padding: 13px 17px; display: flex; align-items: center; gap: 16px; position: relative; }
.hero-live-strip::before { content: ''; position: absolute; top: 0; left: 0; width: 32%; height: 2px; background: linear-gradient(90deg,transparent,var(--luminous-teal),#FF9A46,transparent); transform: translateX(-100%); }
.hero-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--luminous-teal); flex-shrink: 0; }
.hero-live-strip > strong { font-size: .625rem; letter-spacing: .12em; color: #8BDED5; white-space: nowrap; }
.hero-live-strip > p { flex: 1; font-size: .75rem; color: var(--hero-text); }
.hero-live-strip > p > span { color: #FFAB70; font-weight: 600; }
.hero-toggle { flex-shrink: 0; margin-left: auto; padding: 9px 12px; min-height: 44px; background: transparent; color: var(--white); border: 1px solid #7F9ABA; border-radius: 7px; font-size: .75rem; }
.hero-toggle:hover { border-color: var(--luminous-teal); }

/* Un reloj de 18 s: código → interfaz → marca (visible 10,62–15,3 s) → transición. */
.home-hero.is-animated::before { animation: hp-ambient 18s ease-in-out infinite alternate; }
.is-animated .hero-window { animation: hp-window var(--hero-cycle) ease-in-out infinite; }
.is-animated .hero-line { animation: hp-line-one var(--hero-cycle) steps(38,end) infinite; }
.is-animated .hero-line:nth-child(2) { animation-name: hp-line-two; }
.is-animated .hero-line:nth-child(3) { animation-name: hp-line-three; }
.is-animated .hero-bars i { animation: hp-grow var(--hero-cycle) ease-in-out infinite; }
.is-animated .hero-tile { animation: hp-tile-one var(--hero-cycle) ease-in-out infinite; }
.is-animated .hero-tile:nth-child(2) { animation-name: hp-tile-two; }
.is-animated .hero-tile:nth-child(3) { animation-name: hp-tile-three; }
.is-animated .hero-brand-result { animation: hp-brand var(--hero-cycle) ease-in-out infinite; }
.is-animated .hero-brand-result::before { animation: hp-shine var(--hero-cycle) ease-in-out infinite; }
.is-animated .hero-tool { animation: hp-tools var(--hero-cycle) ease-in-out infinite; }
.is-animated .btn-glint::before { animation: cta-glint-cycle 10s ease-in-out infinite; }
.is-animated .btn-glint:is(:hover,:focus-visible)::before { animation-play-state: paused; }
.is-animated .hero-pulse,.is-animated .hero-live-dot { animation: hp-pulse 2.5s ease-in-out infinite; }
.is-animated .hero-caret { animation: hp-blink .8s step-end infinite; }
.is-animated .hero-live-strip::before { animation: hp-strip 9s linear infinite; }
.home-hero.is-paused::before,.home-hero.is-paused *,.home-hero.is-paused *::before { animation-play-state: paused; }
@keyframes hp-window { 0%,4% { opacity: 0; transform: translateY(24px) rotateY(-8deg) scale(.96); } 10%,83% { opacity: 1; transform: translateY(0) rotateY(-5deg) scale(1); } 94%,100% { opacity: 0; transform: translateY(12px) rotateY(-5deg) scale(.985); } }
@keyframes hp-line-one { 0%,12% { clip-path: inset(0 100% 0 0); opacity: 0; } 23%,83% { clip-path: inset(0); opacity: 1; } 94%,100% { clip-path: inset(0); opacity: 0; } }
@keyframes hp-line-two { 0%,19% { clip-path: inset(0 100% 0 0); opacity: 0; } 30%,83% { clip-path: inset(0); opacity: 1; } 94%,100% { clip-path: inset(0); opacity: 0; } }
@keyframes hp-line-three { 0%,26% { clip-path: inset(0 100% 0 0); opacity: 0; } 37%,83% { clip-path: inset(0); opacity: 1; } 94%,100% { clip-path: inset(0); opacity: 0; } }
@keyframes hp-grow { 0%,30% { transform: scaleY(.05); opacity: .2; } 45%,83% { transform: scaleY(1); opacity: 1; } 94%,100% { opacity: .2; transform: scaleY(.15); } }
@keyframes hp-tile-one { 0%,33% { opacity: 0; transform: translateX(18px); } 42%,85% { opacity: 1; transform: translateX(0); } 95%,100% { opacity: 0; } }
@keyframes hp-tile-two { 0%,36% { opacity: 0; transform: translateX(18px); } 45%,85% { opacity: 1; transform: translateX(0); } 95%,100% { opacity: 0; } }
@keyframes hp-tile-three { 0%,39% { opacity: 0; transform: translateX(18px); } 48%,85% { opacity: 1; transform: translateX(0); } 95%,100% { opacity: 0; } }
@keyframes hp-brand { 0%,47% { opacity: 0; transform: translateY(15px) scale(.97); clip-path: inset(0 100% 0 0); } 59%,85% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0); } 94%,100% { opacity: 0; clip-path: inset(0); } }
@keyframes hp-shine { 0%,60% { transform: translateX(-150%); } 75%,100% { transform: translateX(150%); } }
@keyframes hp-strip { from { transform: translateX(-100%); } to { transform: translateX(430%); } }
@keyframes hp-tools { 0%,8% { opacity: 0; transform: translateY(6px); } 18%,82% { opacity: 1; transform: translateY(0); } 94%,100% { opacity: 0; transform: translateY(4px); } }
@keyframes hp-ambient { to { transform: translate(9%,5%); } }
@keyframes hp-blink { 50% { opacity: 0; } }
@keyframes hp-pulse { 50% { opacity: .45; transform: scale(.85); } }

@media (max-width: 1100px) {
  .hero-grid { gap: 38px; }
  .hero-copy .btn { padding-inline: 16px; }
  .hero-work { padding-inline: 18px; }
  .hero-brand-result { gap: 10px; padding-inline: 11px; }
  .hero-brand-caption strong { letter-spacing: .02em; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-wrap { padding-top: 58px; }
  .hero-scene { max-width: 600px; margin-inline: auto; }
  .hero-copy h1 { font-size: clamp(2.75rem,7vw,4.375rem); }
  .hero-lead { max-width: 580px; }
}
@media (max-width: 560px) {
  .hero-wrap { width: calc(100% - 38px); padding-block: 43px 28px; }
  .hero-grid { gap: 25px; }
  .hero-copy h1 { font-size: clamp(2.625rem,11vw,3.625rem); letter-spacing: -.045em; margin: 25px 0; }
  .hero-copy .eyebrow { font-size: .625rem; letter-spacing: .07em; }
  .hero-lead { font-size: .9375rem; }
  .hero-note { font-size: .6875rem; }
  .hero-scene { min-height: 0; perspective: none; }
  .hero-window { transform: none; }
  .hero-work { padding: 17px 13px; min-height: 350px; }
  .hero-panel-title { font-size: 1.375rem; }
  .hero-terminal { font-size: .6875rem; padding: 10px; overflow-wrap: anywhere; }
  .hero-line { white-space: normal; min-height: 3.6em; }
  .hero-dashboard { grid-template-columns: 1fr; }
  .hero-chart { min-height: 130px; padding: 12px; }
  .hero-tiles { grid-template-columns: 1fr; gap: 7px; }
  .hero-tile { padding: 9px 11px; font-size: .75rem; }
  .hero-brand-result { gap: 10px; padding: 10px; flex-wrap: wrap; }
  .hero-brand-result img { width: 112px; }
  .hero-brand-caption { font-size: .6875rem; }
  .hero-chrome { padding-inline: 10px; font-size: .5625rem; letter-spacing: .03em; }
  .hero-live-strip { flex-wrap: wrap; gap: 8px 10px; padding: 12px; }
  .hero-live-strip > p { flex-basis: 100%; }
  .hero-toggle { margin-left: auto; }
  .hero-status { min-height: 4.2em; }
  .is-animated .hero-window { animation-name: hp-mobile; }
}
@keyframes hp-mobile { 0%,5% { opacity: 0; transform: translateY(12px); } 12%,85% { opacity: 1; transform: translateY(0); } 95%,100% { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .home-hero::before,.home-hero *,.home-hero *::before { animation: none !important; transition: none !important; }
  .hero-window { opacity: 1 !important; transform: none !important; }
  .hero-line,.hero-tile,.hero-brand-result,.hero-tool { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-bars i { transform: none !important; opacity: 1 !important; }
  .hero-caret,.hero-toggle { display: none !important; }
  .hero-live-strip::before { transform: none; }
}
@media print { .home-hero { background: white; color: black; } .hero-copy h1,.hero-lead,.hero-note { color: black; } .hero-scene,.hero-live-strip,.hero-toggle { display: none; } .hero-grid { display: block; } }