/* Hero */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 168px 0 96px;
  color: #fff;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/backgrounds/nova-hero-bg.png");
  background-size: cover;
  background-position: center;
  transform: scale(1);
  animation: hero-bg-kenburns 9s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-bg-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg {
    animation: none;
  }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(6, 12, 24, 0.78) 0%, rgba(6, 12, 24, 0.55) 30%, rgba(6, 12, 24, 0.18) 60%, rgba(6, 12, 24, 0.4) 100%);
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.hero-copy {
  text-align: left;
  max-width: 620px;
}

.hero-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blue-200);
  border: 1px solid rgba(124, 194, 251, 0.35);
  background: rgba(124, 194, 251, 0.08);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(44px, 5.5vw, 68px);
  margin-bottom: 60px;
}

.hero-tagline {
  font-family: var(--font-alt);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blue-100);
  max-width: 620px;
  white-space: nowrap;
  margin-bottom: 40px;
}

.hero-tagline .ia-highlight {
  background: linear-gradient(90deg, var(--blue-300), var(--status-resolved));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.85))
    drop-shadow(0 3px 16px rgba(0, 0, 0, 0.6));
}

.hero-tagline.is-placeholder {
  color: rgba(255, 138, 138, 0.85);
  font-style: italic;
}

/* Estilos del ticket-panel movidos a snippets/centralweb-ticket-panel.html para reutilizar después */

@media (max-width: 900px) {
  .hero-copy {
    text-align: center;
    margin: 0 auto;
  }

  .hero-tagline {
    max-width: none;
    white-space: normal;
  }
}

/* Brand mark watermark — oversized, cropped logo motif in green, ambient across sections */

.brand-mark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

.brand-mark .mark-ring {
  fill: none;
  stroke: var(--status-resolved);
}

.brand-mark .mark-node {
  fill: var(--status-resolved);
}

.brand-mark--hero {
  width: 620px;
  height: 620px;
  left: -180px;
  bottom: -220px;
  opacity: 0.16;
}

.brand-mark--about {
  width: 460px;
  height: 460px;
  left: -150px;
  top: -120px;
  opacity: 0.14;
}

.brand-mark--apps {
  width: 480px;
  height: 480px;
  right: -150px;
  top: -140px;
  opacity: 0.07;
}

.brand-mark--footer {
  width: 420px;
  height: 420px;
  right: -110px;
  bottom: -150px;
  opacity: 0.16;
}

.brand-mark--usecases {
  width: 460px;
  height: 460px;
  left: -140px;
  bottom: -170px;
  opacity: 0.07;
}

@media (max-width: 640px) {
  .brand-mark {
    display: none;
  }
}

/* About */

.about {
  position: relative;
  padding: var(--section-padding) 0;
  overflow: hidden;
  /* Tinte tomado de la foto del hero (zona clara ~HSL 190°), no del azul plano de los tokens */
  background: linear-gradient(160deg, #f5f9fa 0%, #e2f0f3 55%, #c9e4e8 100%);
}

/* Ambient brand ring + node motif, echoing the hero */

.about-orbit {
  position: absolute;
  top: 50%;
  right: -14%;
  width: 620px;
  height: 620px;
  transform: translateY(-50%);
  z-index: 0;
}

.about-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1.5px solid rgba(13, 31, 60, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.about-ring-1 {
  width: 100%;
  height: 100%;
  animation: spin 45s linear infinite;
}

.about-ring-2 {
  width: 66%;
  height: 66%;
  border-color: rgba(36, 86, 201, 0.26);
  animation: spin 35s linear infinite reverse;
}

.about-ring-3 {
  width: 38%;
  height: 38%;
  border-color: rgba(57, 198, 163, 0.4);
  animation: spin 25s linear infinite;
}

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.about-node {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.about-node--blue {
  background: var(--accent);
  box-shadow: 0 0 10px 2px rgba(36, 86, 201, 0.3);
}

.about-node--green {
  /* A mitad de camino entre el teal de la foto y el verde de marca (--status-resolved), para que no quede descolgado del resto del sitio */
  background: #39c6a3;
  box-shadow: 0 0 10px 2px rgba(57, 198, 163, 0.35);
}

.about-node--side {
  top: 50%;
  left: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .about-ring-1,
  .about-ring-2,
  .about-ring-3 {
    animation: none;
  }
}

.about-layout {
  position: relative;
  z-index: 1;
  max-width: 620px;
  text-align: left;
}

.about-intro h2 {
  font-size: clamp(32px, 4.6vw, 46px);
  margin: 16px 0 20px;
}

.about-intro p {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 800px) {
  .about-layout {
    text-align: center;
  }

  .about-orbit {
    display: none;
  }
}

/* Apps grid */

.apps {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: var(--section-padding) 0;
  color: #fff;
}

.apps-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../assets/backgrounds/apps-aurora-bg.png");
  background-size: cover;
  background-position: center;
}

.apps-shine {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* copia de la misma foto, más brillante, revelada por una máscara que recorre de lado a lado:
     lo que se ve "encenderse" es la estela real, no una forma de luz agregada encima */
  background-image: url("../assets/backgrounds/apps-aurora-bg.png");
  background-size: cover;
  background-position: center;
  filter: brightness(1.25) saturate(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 45%, black 55%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 45%, black 55%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: apps-shine-travel 8s linear infinite;
  will-change: mask-position;
  pointer-events: none;
}

@keyframes apps-shine-travel {
  from {
    -webkit-mask-position: 200% 0;
    mask-position: 200% 0;
  }
  to {
    -webkit-mask-position: -100% 0;
    mask-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apps-shine {
    animation: none;
  }
}

.apps-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(1, 7, 30, 0.55) 0%, rgba(1, 7, 30, 0.25) 40%, rgba(1, 7, 30, 0.55) 100%);
}

.apps .container {
  position: relative;
  z-index: 1;
}

.apps-layout {
  position: relative;
  z-index: 1;
  display: grid;
  /* 3 franjas: texto (piso 320px) | espacio vacío que absorbe lo que sobra | panel (piso 460px, lo que necesita para no cortarse) */
  grid-template-columns: minmax(320px, 420px) minmax(40px, 1fr) minmax(460px, 520px);
  gap: 40px;
  align-items: center;
  /* Más ancho que el container estándar del sitio (1160px) — acá necesitamos lugar para 3 franjas */
  max-width: 1600px;
}

.apps-copy {
  grid-column: 1;
  text-align: left;
}

.apps-visual {
  grid-column: 3;
}

.apps-copy .eyebrow {
  /* Mismo turquesa del acento de "Qué es", para que quede conectado a esa paleta */
  color: #39c6a3;
}

.apps-copy h2 {
  font-size: clamp(32px, 4.5vw, 44px);
  color: #fff;
  margin-bottom: 20px;
}

.apps-tagline {
  font-size: 17px;
  line-height: 1.6;
  color: var(--blue-100);
  max-width: 480px;
  margin-bottom: 32px;
}

.apps-cta {
  font-size: 14px;
  padding: 11px 24px;
}

.apps-cta-text {
  background: linear-gradient(90deg, var(--blue-300), #39c6a3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.75))
    drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
}

@media (max-width: 900px) {
  .apps-layout {
    grid-template-columns: 1fr;
  }

  .apps-copy,
  .apps-visual {
    grid-column: 1;
  }

  .apps-copy {
    text-align: center;
  }

  .apps-tagline {
    max-width: none;
    margin: 0 auto;
  }
}

.apps-grid {
  /* Oculta hasta sumar una 2da app — con una sola, el panel de la izquierda cubre esa función */
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Botonera de centralweb.html — dos CTAs (ir a la app / volver) en vez del botón único de apps-cta */

.cw-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Header genérico reutilizado por "El flujo", "Para quién es" y FAQ de centralweb.html */

.cw-features-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}

.cw-features-header h2 {
  font-size: clamp(28px, 4vw, 38px);
}

.cw-feature-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--blue-100);
  padding: 3px 9px;
  border-radius: 999px;
}

/* Fondo aurora extendido: cubre la intro (.apps) + "El flujo" (.cw-steps) en centralweb.html */

.cw-flow-bg {
  position: relative;
  overflow: hidden;
}

/* La intro (.apps) acá comparte fondo con "El flujo" — sin panel al lado, ocupa
   solo lo que necesita su contenido, para que las tarjetas queden pegadas debajo. */
.cw-flow-bg .apps {
  min-height: 0;
  display: block;
  padding: 100px 0 16px;
}

.apps-layout--centered {
  grid-template-columns: 1fr;
  max-width: 640px;
  text-align: center;
}

.apps-layout--centered .apps-copy {
  grid-column: 1;
  text-align: center;
}

.apps-layout--centered .cw-actions {
  justify-content: center;
}

/* Características (centralweb.html) — sin orden implícito, así que van en una sola fila */

.cw-steps {
  position: relative;
  z-index: 1;
  padding: 8px 0 var(--section-padding);
}

.cw-steps .cw-features-header {
  margin-bottom: 80px;
}

.cw-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 40px 32px;
}

.cw-step {
  text-align: center;
}

.cw-step h3 {
  font-size: 17px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cw-step p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

/* Variante oscura de "El flujo" — texto sobre el fondo aurora de .cw-flow-bg */

.cw-steps--on-dark h2 {
  color: #fff;
}

.cw-steps--on-dark .cw-step h3 {
  color: #fff;
}

.cw-steps--on-dark .cw-step p {
  color: var(--blue-200);
}

/* Mini-mockups por paso — mismo lenguaje visual que .ticket-panel, datos 100% ficticios */

.cw-step-visual {
  background: rgba(8, 17, 32, 0.92);
  border: 1px solid rgba(124, 194, 251, 0.3);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.7);
  padding: 10px;
  margin-bottom: 14px;
  text-align: left;
  font-size: 11px;
}

.cw-mock-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-100);
  padding-bottom: 8px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(124, 194, 251, 0.16);
}

.cw-mock-head-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status-resolved);
  box-shadow: 0 0 6px 1px rgba(61, 220, 132, 0.5);
  flex-shrink: 0;
}

.cw-mock-list-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-300);
  margin-bottom: 8px;
}

.cw-mock-event-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-300);
  margin-bottom: 4px;
}

.cw-mock-event-label--auto {
  color: var(--status-resolved);
  margin-top: 7px;
}

.cw-mock-msg {
  padding: 7px 8px;
  border-radius: 5px;
  background: rgba(124, 194, 251, 0.08);
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cw-mock-msg:last-child {
  margin-bottom: 0;
}

.cw-mock-msg--auto {
  background: rgba(61, 220, 132, 0.1);
}

.cw-mock-msg-from {
  font-weight: 700;
  color: var(--blue-100);
  font-size: 11px;
}

.cw-mock-msg-preview {
  color: var(--blue-200);
  font-size: 10.5px;
}

.cw-mock-list-item,
.cw-mock-user,
.cw-mock-status-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 5px;
  color: var(--blue-100);
  margin-bottom: 3px;
}

.cw-mock-list-item {
  padding: 12px 9px;
  font-size: 12.5px;
  gap: 10px;
  margin-bottom: 5px;
}

.cw-mock-list-item:last-child,
.cw-mock-user:last-child,
.cw-mock-status-option:last-child {
  margin-bottom: 0;
}

.cw-mock-user.is-selected,
.cw-mock-status-option.is-selected {
  background: rgba(79, 163, 247, 0.18);
}

.cw-mock-user {
  justify-content: space-between;
}

.cw-mock-user-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cw-mock-user-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  background: var(--status-open);
  border-radius: 999px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.cw-mock-badge-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--blue-300);
  background: rgba(124, 194, 251, 0.12);
  border-radius: 4px;
  padding: 2px 6px;
}

.cw-mock-chevron {
  color: var(--blue-300);
  font-size: 15px;
  line-height: 1;
}

.cw-mock-inbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 5px;
  background: rgba(124, 194, 251, 0.08);
}

.cw-mock-inbox-subject {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.cw-mock-inbox-subject strong {
  font-size: 11.5px;
  color: var(--blue-100);
}

.cw-mock-inbox-subject span {
  font-size: 10px;
  color: var(--blue-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-mock-inbox-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--blue-200);
  flex-shrink: 0;
}

.cw-mock-inbox-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.cw-mock-inbox-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cw-mock-inbox-status.is-open {
  color: var(--status-open);
}

.cw-mock-inbox-status.is-open .dot {
  background: var(--status-open);
}

.cw-mock-user-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.cw-mock-user-dot.is-online {
  background: var(--status-resolved);
}

.cw-mock-status-option .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cw-mock-status-option.is-open .dot {
  background: var(--status-open);
}

.cw-mock-status-option.is-waiting .dot {
  background: var(--status-waiting);
}

.cw-mock-status-option.is-closed .dot {
  background: var(--status-closed);
}

.cw-steps-future {
  text-align: center;
  max-width: 640px;
  margin: 40px auto 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .cw-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cw-steps-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 340px;
    margin: 0 auto;
    gap: 28px;
  }
}

/* Casos de uso (centralweb.html) */

.cw-usecases {
  position: relative;
  overflow: hidden;
  padding: var(--section-padding) 0;
  /* Mismo degradé y anillos orbitando que "Qué es Nova DGT" en la portada */
  background: linear-gradient(160deg, #f5f9fa 0%, #e2f0f3 55%, #c9e4e8 100%);
}

.cw-usecases .container {
  position: relative;
  z-index: 1;
}

.cw-usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.cw-usecase {
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  border: 1px solid var(--border);
}

.cw-usecase h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.cw-usecase p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 800px) {
  .cw-usecases-grid {
    grid-template-columns: 1fr;
  }
}

/* FAQ (centralweb.html) */

.cw-faq {
  padding: var(--section-padding) 0;
  background: var(--blue-50);
}

.cw-faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.cw-faq-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.cw-faq-item:last-child {
  border-bottom: none;
}

.cw-faq-item h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.cw-faq-item p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

.cw-faq-note {
  text-align: center;
  max-width: 640px;
  margin: 32px auto 0;
  color: rgba(255, 138, 138, 0.9);
  font-size: 13px;
  font-style: italic;
}

/* CTA final (centralweb.html) */

.cw-final-cta {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--navy) 100%);
  text-align: center;
}

.cw-final-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.cw-final-cta h2 {
  color: #fff;
  font-size: clamp(26px, 3.6vw, 36px);
  max-width: 520px;
}

/* Panel "bandeja en vivo" de CentralWeb — reintegrado desde snippets/centralweb-ticket-panel.html */

.apps-visual {
  position: relative;
}

.ticket-panel {
  background: rgba(8, 17, 32, 0.92);
  border: 1px solid rgba(124, 194, 251, 0.22);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.ticket-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(124, 194, 251, 0.16);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--blue-200);
}

.ticket-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-resolved);
  box-shadow: 0 0 8px 2px rgba(61, 220, 132, 0.6);
  flex-shrink: 0;
  animation: ticket-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes ticket-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-panel-dot {
    animation: none;
  }
}

.ticket-panel-title {
  flex-grow: 1;
}

.ticket-panel-count {
  color: var(--blue-300);
}

.ticket-panel-count #ticket-count {
  color: #fff;
  font-weight: 600;
}

.ticket-panel-cols {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.9fr 0.95fr 0.95fr;
  gap: 12px;
  padding: 10px 20px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(124, 194, 251, 0.1);
}

.ticket-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.9fr 0.95fr 0.95fr;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(124, 194, 251, 0.08);
  font-size: 13px;
  align-items: center;
  transition: background-color 0.2s ease;
}

.ticket-row:hover {
  background-color: rgba(79, 163, 247, 0.1);
}

.ticket-row.is-updated {
  animation: row-flash 1.6s ease-out;
}

@keyframes row-flash {
  from {
    background-color: rgba(79, 163, 247, 0.22);
  }
  to {
    background-color: transparent;
  }
}

.ticket-row:last-child {
  border-bottom: none;
}

.ticket-subject {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticket-subject strong {
  font-weight: 700;
}

.ticket-subject span {
  color: var(--text-muted);
  font-size: 11px;
}

.ticket-id,
.ticket-date {
  font-family: var(--font-mono);
  color: var(--blue-200);
  font-size: 12px;
}

.ticket-assignee {
  font-size: 12px;
  color: var(--text-muted);
}

.ticket-assignee.is-assigned {
  color: var(--blue-100);
}

.ticket-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  width: fit-content;
}

.ticket-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.ticket-status.is-open {
  color: var(--status-open);
}
.ticket-status.is-open::before {
  background: var(--status-open);
  animation: dot-pulse-open 1.8s ease-in-out infinite;
}

.ticket-status.is-waiting {
  color: var(--status-waiting);
}
.ticket-status.is-waiting::before {
  background: var(--status-waiting);
  animation: dot-pulse-waiting 1.8s ease-in-out infinite;
}

.ticket-status.is-closed {
  color: var(--status-closed);
}
.ticket-status.is-closed::before {
  background: var(--status-closed);
  /* cerrado no pulsa — ya no necesita llamar la atención */
}

@keyframes dot-pulse-open {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.55);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0);
  }
}

@keyframes dot-pulse-waiting {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(79, 163, 247, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(79, 163, 247, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-row.is-updated {
    animation: none;
  }
  .ticket-status.is-open::before,
  .ticket-status.is-waiting::before {
    animation: none;
    box-shadow: 0 0 6px 1px currentColor;
  }
}

@media (max-width: 560px) {
  .ticket-panel-cols span:nth-child(4),
  .ticket-panel-cols span:nth-child(5),
  .ticket-row .ticket-assignee,
  .ticket-row .ticket-date {
    display: none;
  }

  .ticket-panel-cols,
  .ticket-row {
    grid-template-columns: 2fr 0.8fr 0.9fr;
  }
}

/* Panel dentro de la tarjeta de "Llega el email" — espacio angosto, va en versión
   compacta de 3 columnas (igual que en mobile) y sin fila de encabezados ni tercer
   caso, para que su alto quede parejo con el resto de las tarjetas. */
.cw-step .ticket-panel-cols {
  display: none;
}

.cw-step .ticket-row:nth-child(3) {
  display: none;
}

.cw-step .ticket-row .ticket-assignee,
.cw-step .ticket-row .ticket-date {
  display: none;
}

.cw-step .ticket-row {
  grid-template-columns: 2fr 0.8fr 0.9fr;
}

.cw-step .ticket-panel-head {
  padding: 12px 14px;
}

.cw-step .ticket-row {
  padding: 11px 14px;
}

@media (max-width: 640px) {
  .hero {
    padding: 150px 0 80px;
  }
}