.hero { grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); align-items: center; gap: clamp(40px,5vw,80px); min-height: 600px; padding-block: 46px 52px; }
.hero-copy { min-width: 0; }
h1 { font-size: clamp(54px,5.65vw,91px); line-height: 1.08; }
h1 .title-accent { font-size: 1.13em; line-height: 1.05; }
.eyebrow { margin-bottom: 26px; font-size: 11px; letter-spacing: .1em; }
.eyebrow-line { flex-shrink: 0; }
.hero-description { max-width: 40ch; margin: 25px 0 22px; line-height: 1.75; }
/* Botón "Hablemos" reintroducido en esta ronda (venía sacado por redundancia con Contacto/
   Conversemos). El override de min-width ya existía para este mismo hero antes de sacarlo;
   se reinstala para que un label corto ("Hablemos") no quede angosto/desproporcionado dentro
   de la píldora. */
.primary-link { min-width: 174px; justify-content: space-between; }
.console-stage { position: relative; inset: auto; width: 100%; height: auto; margin: 0; min-width: 0; }
.console-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.console-stage::before { inset: -65px -20px; background: radial-gradient(ellipse at 65% 45%,#88b84e12,transparent 68%); }
.console { position: relative; border: 1px solid #b1d08335; border-radius: 18px; background: linear-gradient(130deg,#1a211b,#111713 80%); box-shadow: 0 28px 65px -32px #000b,0 1px 0 #d7f0ae0d inset; overflow: hidden; }
.console-header { display: flex; align-items: center; gap: 13px; padding: 22px 25px; border-bottom: 1px solid var(--line); background: #c4e88503; }
.agent-symbol { display: grid; place-items: center; width: 43px; height: 43px; background: #c4e8850a; border: 1px solid #c4e88535; border-radius: 12px; color: var(--lime); overflow: hidden; flex-shrink: 0; }
.agent-symbol svg { width: 31px; height: 31px; stroke-width: 1.8; }
.agent-symbol img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.console-name { font: 500 19px/1.25 var(--display); letter-spacing: -.03em; }
.console-name small { display: block; margin-top: 5px; font: 400 10px/1.4 var(--font); letter-spacing: .13em; color: #a7b39f; }
.console-status { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; font: 500 11px/1 var(--font); letter-spacing: .12em; color: #a9b89e; white-space: nowrap; }
.console-body { padding: 29px 27px 30px; }
.console-caret { display: inline-block; width: 7px; height: 15px; background: var(--lime); opacity: .8; animation: caret-pulse 2.4s ease-in-out infinite; animation-play-state: paused; }
.hero.is-playing .console-caret { animation-play-state: running; }
@keyframes caret-pulse { 0%,100% { opacity: .8; } 50% { opacity: .18; } }
.console-transcript { margin: 0; display: grid; gap: 11px; }
.console-line { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.line-glyph { flex-shrink: 0; padding-top: 2px; font: 400 13px/1 Consolas,'Courier New',monospace; color: #8f9f85; }
.status-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.status-title { color: #e7ecdf; font: 500 14px/1.35 var(--font); letter-spacing: -.005em; }
.status-detail { color: #aeb9a8; font: 400 13px/1.6 var(--font); }
.status-detail.is-positive { color: var(--lime); }
/* Efecto de "carga" ambiental de la consola: reemplaza al latido de fondo (.hero-signature,
   sacado por pedido del usuario). La barra ya existía como relleno fijo en 20%; ahora un
   segmento de ancho fijo (25% del contenedor) barre de punta a punta en loop, ida y vuelta,
   con el mismo gating ya auditado (WCAG 2.2.2) que el resto del motion de la consola. */
.console-progress { position: relative; margin-top: 24px; height: 3px; border-radius: 999px; background: #c4e88516; overflow: hidden; }
.console-progress > span { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 25%; background: var(--lime); border-radius: inherit; transform: translateX(-100%); animation: progress-sweep 2.6s ease-in-out infinite; animation-play-state: paused; }
.hero.is-playing .console-progress > span { animation-play-state: running; }
@keyframes progress-sweep { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
.console-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 25px; border-top: 1px solid var(--line); font-size: 12px; color: #a9b89e; letter-spacing: .08em; }
.partners { min-height: 122px; gap: 45px; }
.partners h2 { font-size: 21px; margin-top: 8px; }
.section-index { font-size: 11px; letter-spacing: .1em; }
.partner-logos { justify-content: center; gap: clamp(48px,7vw,110px); }
.partner-datadog { width: 112px; height: 82px; }
.partner-datadog img { width: 146px; left: -17px; }
.partner-elevenlabs { width: 150px; }
.partner-next { font: 500 27px/1 var(--display); letter-spacing: -.04em; color: #a1af98; opacity: .65; }
.partner-next:hover { opacity: .65; }
.contact { padding-block: 52px 48px; }
.contact-topline { align-items: center; }
.contact-topline p { font-size: 14px; }
.contact-invitation { padding-block: 22px 29px; }
.contact h2 { font-size: clamp(48px,6.1vw,94px); }
.contact-arrow { width: 80px; height: 80px; }
.contact-arrow svg { width: 33px; height: 33px; }
.site-footer { font-size: 12px; }
/* Tag de versión del footer: mismo tratamiento monoespaciado/técnico que .line-glyph (única
   fuente monospace ya usada en la página) y el mismo tono apagado que .console-status. */
.footer-version { font: 400 11px/1 Consolas,'Courier New',monospace; letter-spacing: .08em; color: #a9b89e; }
@media (min-width:1500px) { .hero { min-height: 715px; } }
@media (min-width:961px) and (max-width:1100px) {
  .hero { gap: 34px; min-height: 605px; padding-block: 52px 62px; }
  h1 { font-size: 5.65vw; }
  .eyebrow { font-size: 10px; letter-spacing: .06em; gap: 8px; }
  .eyebrow-line { width: 18px; }
  .hero-description { font-size: 14px; }
  .console-header { padding: 18px; }
  .console-body { padding: 24px 18px; }
  .console-footer { padding-inline: 18px; }
}
@media (max-width:960px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: auto; padding-block: 40px 45px; }
  .hero-copy { display: block; pointer-events: auto; }
  h1 { font-size: clamp(38px,8.3vw,72px); }
  .eyebrow { font-size: 11px; letter-spacing: .07em; margin-bottom: 22px; }
  .hero-description { font-size: 16px; margin-block: 22px; }
  .console-stage { margin-top: 38px; max-width: 620px; align-self: center; }
  .partners { min-height: 145px; gap: 28px; }
  .partner-logos { gap: 30px; }
  .partners h2 { font-size: 19px; }
}
@media (max-width:600px) {
  .site-header { height: 84px; }
  .hero { padding-block: 32px 36px; }
  h1 { font-size: clamp(34px,10.25vw,60px); line-height: 1.1; }
  .eyebrow { font-size: 10px; gap: 9px; letter-spacing: .06em; }
  .eyebrow > span:last-child { max-width: 100%; }
  .eyebrow-line { width: 17px; }
  .hero-description { font-size: 15px; line-height: 1.7; }
  .desktop-break { display: none; }
  .console-stage { margin-top: 32px; }
  .console-header { padding: 14px 18px; }
  .console-name small { font-size: 10px; }
  .console-status { font-size: 10px; gap: 6px; }
  .console-body { padding: 17px 18px 18px; }
  .console-transcript { gap: 12px; }
  .status-title { font-size: 13px; }
  .status-detail { font-size: 12px; }
  .console-progress { margin-top: 18px; }
  .console-footer { min-height: 52px; padding: 3px 18px; }
  .partners { display: block; padding-block: 27px; }
  .partners-intro { display: block; }
  .partners-intro .section-index { max-width: none; font-size: 11px; }
  .partners h2 { text-align: left; font-size: 22px; margin-top: 7px; }
  .partner-logos { flex-wrap: wrap; row-gap: 18px; gap: 16px; margin-top: 23px; justify-content: center; }
  .partner-datadog { width: 92px; height: 74px; }
  .partner-datadog img { width: 132px; left: -20px; }
  .partner-elevenlabs { width: 126px; }
  .partner-next { font-size: 22px; }
  .contact { padding-block: 32px; }
  .contact-topline { display: block; }
  .contact-topline p { margin-top: 15px; }
  .contact h2 { font-size: clamp(29px,8.9vw,49px); }
  .contact-arrow { width: 53px; height: 53px; }
  .contact-arrow svg { width: 26px; height: 26px; }
  .contact-invitation { padding-block: 23px; }
}
@media (max-width:370px) {
  .console-header { gap: 10px; }
  .console-name { font-size: 18px; }
  .console-status { gap: 0; }
  .console-status-label { display: none; }
  .console-body { padding-inline: 15px; }
  .console-transcript { gap: 10px; }
  .status-title { font-size: 12.5px; }
  .status-detail { font-size: 11.5px; }
  .partner-logos { gap: 10px; }
  .partner-datadog { width: 80px; }
  .partner-datadog img { left: -26px; }
  .partner-elevenlabs { width: 112px; }
  .partner-next { font-size: 19px; }
}
@media (prefers-reduced-motion:reduce) { .console-caret, .console-progress > span { animation: none; } }

/* Editorial console: static system-status log, five lines always in the DOM. On first
   entering the viewport the five lines type in once (console.js), gated by the same
   .hero.is-playing state as the heartbeat/caret (paused button, tab visibility,
   prefers-reduced-motion) — pausing mid-typing freezes it, it never restarts on re-entry.
   The visible title/detail text lives in [data-type-text] and starts empty; the always-
   complete text for assistive tech is the sibling .console-sr per line. The trailing caret
   stays hidden until the whole sequence finishes (.is-typing-done), so it doesn't blink at
   an empty line before its text has typed in. */
.console-header { border-bottom: 0; padding-bottom: 16px; }
.console-name { font-size: 18px; }
.console-body { padding: 18px 27px 20px; }
.console-footer { min-height: 46px; padding-block: 4px; }
.console-caret { display: none; }
.hero.is-typing-done .console-caret { display: inline-block; }
@media (max-width:600px) {
  .console-header { padding: 17px 18px 11px; }
  .console-name { font-size: 17px; }
  .console-body { padding: 20px 18px 21px; }
  .console-footer { min-height: 50px; padding-inline: 18px; }
}