/* ══════════════════════════════════════════════════════════════════════════
   Sannu Contact · la página propia (fase 4 de «El hola viaja»)
   ──────────────────────────────────────────────────────────────────────────
   Se carga solo en /contact/, detrás de hilo.css y viaje.css.

   · Campo de color: la cabecera toma el turquesa de Contact (#029F97)
     llevado a profundo, en los dos modos. Es una banda, como el cierre de
     la portada: dentro, los tokens --h-* se redefinen para texto claro.
   · El gran momento: la cola en directo a la derecha de la cabecera
     (pagina-contact.js). Lecturas en numerales tabulares, como un panel de
     supervisión.
   · El recorrido «Entra → Cola → Agente → Campaña» sustituye a la vitrina:
     el trazo avanza con el scroll y cada recorte aparece en su etapa.
   ══════════════════════════════════════════════════════════════════════════ */

body.pagina-contact {
  --c-campo: #0E3A37;
  --c-campo-2: #134542;
  --c-tinta: #2FD3C6;
}

/* ── El campo de la cabecera ─────────────────────────────────────────── */

/* La sombra de 100vmax recortada a lo alto pinta la banda a todo el ancho
   sin crear scroll horizontal (una caja de 100vw sí lo crea cuando hay
   barra de desplazamiento). */
body.pagina-contact .entry-content > .wp-block-group:first-child {
  position: relative;
  background: var(--c-campo) !important;
  box-shadow: 0 0 0 100vmax var(--c-campo) !important;
  /* Hacia arriba sube 24 px: el margen de <main>, para que la banda nazca
     justo bajo la cabecera del sitio. */
  clip-path: inset(-24px -100vmax 0 -100vmax);
  --h-texto: #EAF7F5;
  --h-suave: #B4D3CF;
  --h-tenue: #8DB3AE;
  --h-linea: rgb(255 255 255 / 10%);
  --h-linea-2: rgb(255 255 255 / 22%);
  color: var(--h-texto);
  color-scheme: dark;
  padding-bottom: clamp(3.5rem, 8vh, 6rem) !important;
  margin-bottom: clamp(3rem, 6vw, 5rem) !important;
}
body.pagina-contact .entry-content > .wp-block-group:first-child p.has-gris-color { color: var(--h-suave) !important; }
/* En claro, el logotipo de producto también va en su versión para fondo
   oscuro: la banda lo es en los dos modos. */
html[data-tema="claro"] body.pagina-contact .entry-content > .wp-block-group:first-child img[src*="sannu-contact-comun"] { content: url("../marca/contact-fondo-oscuro.png"); }

/* Con la cola: dos columnas en escritorio. El texto a la izquierda, la
   pieza a la derecha ocupando todas las filas. */
@media (min-width: 1000px) {
  body.pagina-contact .entry-content > .wp-block-group:first-child.con-cola {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: dense;
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    align-content: center;
    padding-left: max(24px, calc(50% - 590px)) !important;
    padding-right: max(24px, calc(50% - 590px)) !important;
  }
  body.pagina-contact .entry-content > .wp-block-group:first-child.con-cola > * { grid-column: 1; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  body.pagina-contact .entry-content > .wp-block-group:first-child.con-cola > .cola-viva { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0 !important; }
  body.pagina-contact .entry-content > .wp-block-group:first-child.con-cola h1.has-titulo-1-font-size { font-size: clamp(2.6rem, 2.4vw + 1.4rem, 4rem) !important; }
}

/* ── La cola en directo ──────────────────────────────────────────────── */

.cola-viva {
  margin: 2.6rem 0 0;
  padding: 0;
  font-variant-numeric: tabular-nums;
}
.cola-escena {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  border: 1px solid var(--h-linea);
  background: var(--c-campo-2);
  overflow: hidden;
}
.cola-escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cola-rotulo {
  position: absolute;
  top: 5%;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--h-tenue);
  letter-spacing: 0.01em;
}
.cola-rotulo-0 { left: 4%; }
.cola-rotulo-1 { left: 42%; }
.cola-rotulo-2 { left: 66%; }

.cola-lecturas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--h-linea);
}
.cola-lectura { padding: 1rem 0.8rem 0.9rem 0; min-width: 0; }
.cola-lectura + .cola-lectura { padding-left: 1rem; border-left: 1px solid var(--h-linea); }
.cola-lectura dt { font-size: 0.8rem; font-weight: 600; color: var(--h-suave); line-height: 1.3; }
.cola-lectura dd {
  margin: 0.25rem 0 0;
  font-family: var(--h-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--h-texto);
}
.cola-nota { display: block; margin-top: 0.35rem; font-size: 0.75rem; font-weight: 700; color: var(--c-tinta); transition: color 200ms ease; }
.cola-lectura-nivel.bajo dd, .cola-lectura-nivel.bajo .cola-nota { color: #FFC24B; }

.cola-mando { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.9rem 0 0; }
.cola-mando-texto { font-size: 0.85rem; font-weight: 700; color: var(--h-suave); }
.cola-botones { display: flex; gap: 0.35rem; }
.cola-boton {
  min-width: 48px;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--h-linea-2);
  background: none;
  color: var(--h-texto);
  font: 700 0.95rem var(--h-letra);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--h-sale);
}
.cola-boton:hover { border-color: var(--c-tinta); }
.cola-boton:active { transform: scale(0.97); }
.cola-boton[aria-pressed="true"] { background: var(--c-tinta); border-color: var(--c-tinta); color: #032421; }
.cola-boton:focus-visible { outline: 2px solid var(--c-tinta); outline-offset: 2px; }
.cola-pie { margin-top: 0.8rem; font-size: 0.78rem; line-height: 1.45; color: var(--h-tenue); max-width: 60ch; }

@media (max-width: 999px) {
  .cola-viva { max-width: 640px; }
}
@media (max-width: 520px) {
  .cola-escena { aspect-ratio: 4 / 3; border-radius: 16px; }
  .cola-lectura { padding-right: 0.4rem; }
  .cola-lectura + .cola-lectura { padding-left: 0.6rem; }
  .cola-lectura dt { font-size: 0.72rem; }
  .cola-lectura dd { font-size: 1.45rem; }
  .cola-nota { font-size: 0.68rem; }
  .cola-mando { flex-direction: column; align-items: flex-start; }
}

/* ── El recorrido de una llamada ─────────────────────────────────────── */

.trayecto {
  width: min(1180px, 100%);
  max-width: 1180px !important;
  margin: 0 auto clamp(4rem, 8vw, 6rem) !important;
}
.trayecto-cabecera { margin-bottom: clamp(2rem, 4vw, 3rem); }
.trayecto-titulo { margin: 0 !important; font-size: clamp(2rem, 2.4vw + 1rem, 3.2rem) !important; letter-spacing: -0.035em; line-height: 1.05; }

.trayecto-cuerpo { position: relative; --riel: 56px; }
.trayecto-riel { position: absolute; left: calc(var(--riel) / 2 - 1px); top: 0; height: 0; width: 2px; background: var(--h-linea-2); border-radius: 2px; }
.trayecto-lleno { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--h-contact) 30%, transparent), var(--h-contact)); transform-origin: top; transform: scaleY(1); border-radius: 2px; }
.trayecto-viajera { position: absolute; left: -6px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--h-texto); box-shadow: 0 0 0 4px color-mix(in srgb, var(--h-contact) 45%, transparent), 0 2px 8px rgb(0 0 0 / 35%); display: none; }
.trayecto-viva .trayecto-lleno { transform: scaleY(0); }
.trayecto-viva .trayecto-viajera { display: block; }

.trayecto-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 6vw, 5rem); }
.trayecto-etapa {
  display: grid;
  grid-template-columns: var(--riel) minmax(0, 0.75fr) minmax(0, 1.25fr);
  grid-template-areas: "marca texto piezas";
  column-gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  margin: 0;
}
.trayecto-marca { grid-area: marca; display: grid; justify-items: center; gap: 0.45rem; padding-top: 0.2rem; }
.trayecto-punto { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--h-linea-2); background: var(--h-fondo); transition: border-color 220ms ease, background-color 220ms ease, transform 220ms var(--h-sale); }
/* El nombre tapa el riel con el color del fondo: el trazo pasa por detrás. */
.trayecto-nombre { position: relative; z-index: 1; padding: 0.15rem 0.2rem; background: var(--h-fondo); font-size: 0.72rem; font-weight: 800; line-height: 1.2; color: var(--h-tenue); transition: color 220ms ease; }
.trayecto-etapa.activa .trayecto-punto { border-color: var(--h-contact); background: var(--h-contact); transform: scale(1.12); }
.trayecto-etapa.activa .trayecto-nombre { color: var(--h-texto); }

.trayecto-texto { grid-area: texto; padding-top: 0.1rem; }
.trayecto-texto h3 { margin: 0 0 0.6rem !important; font-size: clamp(1.35rem, 1vw + 1rem, 1.8rem) !important; letter-spacing: -0.025em; line-height: 1.15; }
.trayecto-texto p { margin: 0 !important; color: var(--h-suave); max-width: 38ch; }

.trayecto-piezas { grid-area: piezas; display: grid; gap: 1rem; }
/* Campaña lleva dos recortes: uno bajo otro, cada uno a su tamaño. */
.trayecto-piezas-dos { grid-template-columns: minmax(0, 1fr); }
.trayecto-pieza { box-sizing: border-box; justify-self: start; width: 100%; margin: 0; padding: 0.45rem; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--h-linea); box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 22px 44px -26px rgb(0 0 0 / 70%); }
.trayecto-pieza img { display: block; width: 100%; height: auto; border-radius: 11px; }

/* La aparición del recorte: se destapa de arriba abajo, como un panel que
   se despliega, en 480 ms con salida fuerte. Solo con el script vivo. */
.trayecto-viva .trayecto-pieza { clip-path: inset(0 0 100% 0 round 16px); opacity: 0.4; transform: translateY(12px); transition: clip-path 480ms var(--h-sale), opacity 300ms ease, transform 480ms var(--h-sale); }
.trayecto-viva .trayecto-etapa.vista .trayecto-pieza { clip-path: inset(0 0 0 0 round 16px); opacity: 1; transform: none; }
.trayecto-viva .trayecto-etapa.vista .trayecto-pieza + .trayecto-pieza { transition-delay: 90ms; }

/* La capacidad: cifras de instrumento al final del camino. */
.trayecto-capacidad {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--h-linea-2);
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: 1rem 3rem;
  align-items: end;
}
.trayecto-capacidad-titulo { margin: 0 !important; font-family: var(--h-display); font-weight: 700; font-size: clamp(1.1rem, 0.8vw + 0.9rem, 1.5rem); color: var(--h-suave); letter-spacing: -0.02em; }
.trayecto-cifras { display: flex; flex-wrap: wrap; gap: 1rem clamp(2rem, 5vw, 4.5rem); margin: 0; }
.trayecto-cifra { display: flex; flex-direction: column-reverse; gap: 0.3rem; }
.trayecto-cifra dd {
  margin: 0;
  font-family: var(--h-display);
  font-weight: 800;
  font-size: clamp(3.6rem, 7vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--h-texto);
}
.trayecto-cifra dt { font-weight: 700; color: var(--h-suave); font-size: 1rem; }

@media (max-width: 860px) {
  .trayecto-cuerpo { --riel: 34px; }
  .trayecto-etapa { grid-template-columns: var(--riel) minmax(0, 1fr); grid-template-areas: "marca texto" ". piezas"; row-gap: 1.2rem; column-gap: 0.9rem; }
  .trayecto-nombre { font-size: 0.66rem; }
  .trayecto-capacidad { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .trayecto-cifra dd { font-size: clamp(3.2rem, 15vw, 4.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .trayecto-punto, .trayecto-nombre { transition: none; }
  .cola-boton { transition: background-color 150ms ease, color 150ms ease; }
  .cola-boton:active { transform: none; }
}