/* ============================================================
   MÓDULOS DE PORTADA
   Mosaico Metro · Muro de clientes · Asistente
   ============================================================ */

/* ══════════ MOSAICO METRO ══════════ */
.metro {
  display: grid;
  /* La vista es solo para el mosaico: hay espacio, las baldosas crecen. */
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  grid-auto-rows: 184px;
  grid-auto-flow: dense;
  gap: 12px;
}
@media (max-width: 1080px) { .metro { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 190px; } }
@media (max-width: 720px) {
  .metro { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 168px; gap: 10px; }
}

.tile {
  position: relative; overflow: hidden;
  border-radius: var(--r-sm);
  color: var(--white); text-align: left;
  display: block; width: 100%; height: 100%;
  background: var(--navy-700);
  -webkit-font-smoothing: antialiased;
  /* Aísla el pintado: con once baldosas animadas garantiza el recorte
     y evita recalcular el resto de la página en cada fotograma. */
  contain: paint;
}
/* Al pasar el cursor la baldosa solo crece. El color del texto NO cambia:
   `a:hover` de base.css pinta los enlaces en carmesí y ganaba en especificidad
   a `.tile`, así que había que devolvérselo explícitamente. */
.tile:hover, .tile:focus-visible { transform: scale(1.03); z-index: 5; }
a.tile:hover { text-decoration: none; color: var(--white); }
a.tile--light:hover { color: var(--ink); }
.tile { transition: transform var(--dur-fast) var(--ease-out); }

.tile--wide { grid-column: span 2; }
.tile--big  { grid-column: span 2; grid-row: span 2; }
@media (max-width: 720px) { .tile--big { grid-row: span 2; } }

/* Paleta del mosaico: solo variantes de marca, nada nuevo */
.tile--navy       { background: var(--navy-700); }
.tile--navy-deep  { background: var(--navy-900); }
.tile--navy-mid   { background: var(--navy-600); }
.tile--crimson    { background: var(--crimson-600); }
.tile--crimson-dp { background: var(--crimson-800); }
.tile--light {
  background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  -webkit-font-smoothing: auto;
}
.tile--light .tile__kicker { color: var(--accent-ink); }


/* Dos caras que rotan verticalmente, al estilo Metro */
.tile__faces {
  position: absolute; inset: 0;
  /* El contenedor mide dos baldosas de alto; cada cara debe ocupar la mitad
     de ese contenedor, es decir una baldosa exacta. Con 100% cada cara medía
     dos baldosas y el contenido caía fuera del recorte. */
  display: grid; grid-template-rows: 50% 50%;
  height: 200%;
  /* Ciclo completo de 30 s: cada baldosa muestra sus dos caras dentro de
     esa ventana. El desfase reparte las vueltas para que no giren a la vez. */
  animation: tile-rotar var(--tile-dur, 30s) var(--ease-in-out) infinite;
  animation-delay: var(--tile-delay, 0s);
}
.tile__face {
  padding: var(--sp-5); display: flex; flex-direction: column;
  justify-content: space-between; height: 100%; overflow: hidden;
}
.tile--big .tile__face { padding: var(--sp-6); }

.tile__icon { opacity: .92; }
.tile__kicker {
  font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  opacity: .74; margin-bottom: 7px;
}
.tile__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: 1.2rem; line-height: 1.16; letter-spacing: -.02em;
  /* La baldosa recorta: nunca debe verse una frase cortada a media letra */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile--big .tile__title  { -webkit-line-clamp: 5; }
.tile--wide .tile__title { -webkit-line-clamp: 3; }
/* En la baldosa mínima el subtítulo se recorta a tres líneas */
.tile:not(.tile--big):not(.tile--wide) .tile__sub { -webkit-line-clamp: 3; }

/* Sobre carmesí sólido el texto secundario va a plena opacidad: bajarla
   reduce aún más un contraste que ya está justo. */
.tile--crimson .tile__sub, .tile--crimson-dp .tile__sub { opacity: 1; }

/* Baldosa de acción: una sola cara, sin rotación */
.tile--fijo .tile__faces { animation: none; height: 100%; grid-template-rows: 100%; }
.tile:not(.tile--big):not(.tile--wide) .tile__face > div:last-child .tile__title {
  font-size: 1.08rem;
}
.tile--big .tile__title  { font-size: 2rem; }
.tile--wide .tile__title { font-size: 1.42rem; }
.tile__sub {
  font-size: var(--fs-sm); line-height: 1.5; opacity: .88;
  margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tile--big .tile__sub { -webkit-line-clamp: 6; font-size: var(--fs-body); }
.tile__num {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: 2.7rem; line-height: 1; letter-spacing: -.03em;
}
.tile--big .tile__num { font-size: 4rem; }

@keyframes tile-rotar {
  0%, 45%   { transform: translateY(0); }
  50%, 95%  { transform: translateY(-50%); }
  100%      { transform: translateY(0); }
}

/* El mosaico se detiene al interactuar con él: pasar el cursor o entrar con
   el teclado congela la rotación para poder leer la baldosa. */
.metro:hover .tile__faces,
.metro:focus-within .tile__faces { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tile__faces { animation: none; height: 100%; grid-template-rows: 100%; }
  .tile__face + .tile__face { display: none; }
}


/* ══════════ MURO DE CLIENTES ══════════ */
.muro {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}
@media (max-width: 640px) { .muro { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.marca-cliente {
  position: relative; aspect-ratio: 5 / 3;
  border-radius: var(--r-sm); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--sp-4); color: var(--white);
  background: var(--navy-700);
  -webkit-font-smoothing: antialiased;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
/* El texto no cambia de color al pasar el cursor: `a:hover` de base.css lo
   teñía de carmesí sobre un fondo navy o carmesí, y no cuadraba con ninguno. */
a.marca-cliente:hover, a.marca-cliente:focus-visible {
  transform: translateY(-3px); box-shadow: var(--sh-md);
  text-decoration: none; color: var(--white);
}
a.marca-cliente:hover .marca-cliente__nombre { color: var(--white); }
.marca-cliente--navy      { background: var(--navy-700); }
.marca-cliente--navy-deep { background: var(--navy-900); }
.marca-cliente--crimson   { background: var(--crimson-600); }

.marca-cliente__logo { display: flex; align-items: center; gap: 9px; }
.marca-cliente__sigla {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: .72rem; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.marca-cliente__nombre {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: .93rem; line-height: 1.15; letter-spacing: -.015em;
  color: var(--white);
}
.marca-cliente__pie {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; opacity: .74;
}
.marca-cliente__dato {
  position: absolute; inset: auto 0 0 0; padding: var(--sp-4);
  background: rgba(4,18,42,.93);
  font-size: var(--fs-micro); line-height: 1.4; opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.marca-cliente:hover .marca-cliente__dato,
.marca-cliente:focus-visible .marca-cliente__dato { opacity: 1; transform: none; }
.marca-cliente__dato b { color: var(--white); }

.muro-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-muted);
}

/* Cinta continua de nombres, para dar sensación de volumen */
.cinta { overflow: hidden; padding-block: var(--sp-4); }
.cinta__pista { display: flex; gap: var(--sp-6); width: max-content;
  animation: marquee 60s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__item {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: 1rem; letter-spacing: -.02em; color: var(--navy-300);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .cinta__pista { animation: none; } }

/* ══════════ ASISTENTE ══════════ */
.asistente {
  border: var(--border); border-radius: var(--r-lg);
  background: var(--white); overflow: hidden; box-shadow: var(--sh-md);
  display: flex; flex-direction: column;
}
.asistente__head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); border-bottom: var(--border); background: var(--navy-050);
}
.asistente__avatar {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--navy-700); color: var(--white);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  -webkit-font-smoothing: antialiased;
}
.asistente__nombre { font-weight: var(--weight-semi); font-size: var(--fs-sm); color: var(--ink-strong); }
.asistente__estado { font-size: var(--fs-micro); color: var(--ink-subtle); }

.asistente__hilo {
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4);
  min-height: 190px; max-height: 460px; overflow-y: auto; scroll-behavior: smooth;
}
.msj { max-width: 92%; }
.msj--usuario { align-self: flex-end; max-width: 82%; }
.msj--usuario .msj__burbuja {
  background: var(--navy-700); color: var(--white);
  border-radius: var(--r-md) var(--r-md) 2px var(--r-md);
  -webkit-font-smoothing: antialiased;
}
.msj__burbuja {
  padding: var(--sp-4); border-radius: var(--r-md) var(--r-md) var(--r-md) 2px;
  background: var(--paper-alt); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--ink);
}
.msj__burbuja strong { color: var(--ink-strong); }
.msj--usuario .msj__burbuja strong { color: var(--white); }

.caso-chip {
  display: block; margin-top: var(--sp-3);
  border: var(--border); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4); background: var(--white);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.caso-chip:hover { text-decoration: none; box-shadow: var(--sh-sm); border-color: var(--navy-300);
  border-left-color: var(--accent); }
.caso-chip__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.caso-chip__sigla {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--navy-700); color: var(--white);
  font-size: .62rem; font-weight: var(--weight-bold); -webkit-font-smoothing: antialiased;
}
.caso-chip__nombre { font-weight: var(--weight-semi); font-size: var(--fs-sm); color: var(--ink-strong); }
.caso-chip__meta { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-subtle); margin-left: auto; white-space: nowrap; }
.caso-chip__texto { display: block; font-size: var(--fs-micro); color: var(--ink-muted); line-height: 1.55; }
.caso-chip__texto + .caso-chip__texto { margin-top: var(--sp-2); }
.caso-chip__texto b { color: var(--ink-strong); font-weight: var(--weight-semi); }

.asistente__pie { border-top: var(--border); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.asistente__form { display: flex; gap: var(--sp-3); }
.asistente__form .input { flex: 1; }
.asistente__sugerencias { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.sugerencia {
  font-size: var(--fs-micro); padding: .35rem .7rem; border-radius: var(--r-pill);
  border: var(--border); background: var(--white); color: var(--ink-muted);
  text-align: left; transition: all var(--dur-fast);
}
.sugerencia:hover { border-color: var(--navy-300); background: var(--navy-050); color: var(--ink); }
.asistente__nota { margin-top: var(--sp-3); font-size: 10px; color: var(--ink-subtle); }

.escribiendo { display: inline-flex; gap: 4px; align-items: center; }
.escribiendo i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--navy-300);
  animation: puntos 1.1s var(--ease-in-out) infinite;
}
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes puntos { 0%,100% { opacity: .3; transform: translateY(0); }
                    50% { opacity: 1; transform: translateY(-3px); } }

/* ══════════ FILAS INTERACTIVAS DEL PANEL DEL HERO ══════════ */
button.hero-panel__row {
  width: 100%; text-align: left; color: inherit;
  border-radius: var(--r-sm); cursor: pointer;
}
button.hero-panel__row:hover { background: rgba(255,255,255,.1); }
button.hero-panel__row .hero-panel__val { color: var(--white); display: flex; }
button.hero-panel__row:hover .hero-panel__val { transform: translateX(3px); }
.hero-panel__val { transition: transform var(--dur-fast) var(--ease-out); }

/* ══════════ TARJETA DE CASO ══════════ */
.casos-grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
}
.caso-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  background: var(--white); border: var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); scroll-margin-top: 7rem;
  transition: box-shadow var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}
.caso-card:hover { box-shadow: var(--sh-md); border-color: var(--navy-200); transform: translateY(-2px); }
.caso-card__head { display: flex; gap: var(--sp-4); align-items: center; }
.caso-card__sigla {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px;
  display: grid; place-items: center; color: var(--white);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: .82rem;
  background: var(--navy-700); -webkit-font-smoothing: antialiased;
}
.caso-card__nombre { font-size: var(--fs-h4); font-weight: var(--weight-semi);
  color: var(--ink-strong); line-height: 1.2; }
.caso-card__meta { font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-subtle); margin-top: 3px; }

.caso-card__cuerpo { margin: 0; display: grid; gap: var(--sp-2); }
.caso-card__cuerpo dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent-ink); font-weight: var(--weight-bold);
}
.caso-card__cuerpo dd { margin: 0 0 var(--sp-3); font-size: var(--fs-sm);
  color: var(--ink-muted); line-height: 1.55; }
.caso-card__cuerpo dd:last-child { margin-bottom: 0; }

.caso-card__pie {
  margin-top: auto; padding-top: var(--sp-4); border-top: var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.caso-card__pie .tag:hover { background: var(--accent-soft); color: var(--crimson-800); text-decoration: none; }

.filtros-casos {
  display: grid; gap: var(--sp-4);
  grid-template-columns: minmax(220px, 2fr) 1fr 1fr;
  align-items: end;
}
@media (max-width: 820px) { .filtros-casos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filtros-casos { grid-template-columns: 1fr; } }

.caso-destacado {
  border: 2px solid var(--accent); border-radius: var(--r-lg);
  padding: var(--sp-2); background: var(--accent-soft); margin-bottom: var(--sp-7);
}
.caso-destacado .caso-card { border-color: transparent; }

/* ══════════ VISTAS DE LA PORTADA ══════════
   La portada no se desplaza: cada sección ocupa el mismo espacio y la
   navegación las intercambia. Solo hay una visible a la vez.            */
[data-vista][hidden] { display: none !important; }
[data-vista] { animation: vista-entra var(--dur-slow) var(--ease-out) both; }
/* Titulares que solo reciben foco por programa al cambiar de vista: no son
   alcanzables con Tab, así que el anillo no comunica nada y se lee como un
   defecto. El foco sí se mueve, para los lectores de pantalla. */
[data-vista] [tabindex="-1"]:focus,
[data-vista] [tabindex="-1"]:focus-visible { outline: none; }
@keyframes vista-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { [data-vista] { animation: none; } }

/* Cada vista llena el alto útil de la ventana: el pie empieza justo por debajo
   del pliegue y sólo aparece al desplazarse. `svh` evita que la barra de
   direcciones del móvil provoque un desbordamiento de unos píxeles. */
.vista-cuerpo {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}

/* Vista de pantalla: el contenido se centra verticalmente en el alto útil.
   Al ser `min-height` y no `height`, si el contenido crece —el catálogo
   desplegado, por ejemplo— la caja crece con él y nada queda inalcanzable. */
.vista--pantalla {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column;
}
.vista--pantalla > .hero,
.vista--pantalla > .section {
  /* Columna, no fila: una sección con dos `.container` los apilaba en
     horizontal y cada uno se quedaba con la mitad del ancho. */
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
}
/* El centrado ya lo hace el contenedor: la sección no necesita su propio
   relleno vertical y así el mosaico cabe entero en la ventana. */
.vista--pantalla > .section { padding-block: var(--sp-6); }
.vista--pantalla > .hero > .container,
.vista--pantalla > .section > .container { width: 100%; }
/* La barra de sector cierra la vista de inicio, pegada al pliegue */
.vista--pantalla > .adaptive-bar { flex: 0 0 auto; }

/* ══════════ CATÁLOGO COMPLETO DE SERVICIOS ══════════ */
.catalogo-panel[hidden] { display: none !important; }
.catalogo-panel {
  margin-top: var(--sp-8); padding-top: var(--sp-8);
  border-top: 2px solid var(--navy-100);
  animation: vista-entra var(--dur-slow) var(--ease-out) both;
}
.catalogo { display: grid; gap: var(--sp-5); }
@media (min-width: 1000px) { .catalogo { grid-template-columns: 1fr 1fr; } }

.linea {
  border: var(--border); border-radius: var(--r-lg); background: var(--white);
  padding: var(--sp-5); scroll-margin-top: 7rem;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.linea__cab { display: flex; gap: var(--sp-4); align-items: flex-start; }
.linea__icono {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--navy-700); color: var(--white);
}
.linea__nombre { font-size: var(--fs-h4); font-weight: var(--weight-semi);
  color: var(--ink-strong); line-height: 1.25; }
.linea__promesa { font-size: var(--fs-sm); color: var(--accent-ink);
  font-weight: var(--weight-medium); margin-top: 3px; }
.linea__ver { margin-left: auto; flex-shrink: 0; }
@media (max-width: 560px) { .linea__cab { flex-wrap: wrap; } .linea__ver { margin-left: 0; } }

.linea__servicios { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.linea__servicios li {
  display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: 0;
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.5;
  padding: var(--sp-3) var(--sp-4); background: var(--paper-alt);
  border-radius: var(--r-sm);
}
.linea__servicios svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.linea__pie {
  margin-top: auto; padding-top: var(--sp-4); border-top: var(--border);
  display: grid; gap: var(--sp-3); font-size: var(--fs-micro); color: var(--ink-muted);
}
.linea__pie b {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--ink-subtle);
  font-weight: var(--weight-bold); margin-bottom: 2px;
}
.linea__sectores { display: flex; flex-wrap: wrap; gap: 5px; }
.linea__sectores .tag { cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.linea__sectores .tag:hover { background: var(--accent-soft); color: var(--crimson-800); }

/* La baldosa «Ver todas» es un botón: debe comportarse como las demás */
button.tile { text-align: left; font: inherit; color: var(--white); cursor: pointer; }
button.tile.tile--light { color: var(--ink); }

/* ══════════ PANEL DE ÚLTIMOS CASOS ══════════
   Mismo componente en el hero y en la vista del asistente: contenedor navy
   institucional, título en blanco y filas de cuatro columnas alineadas entre
   sí — sector, detalle del trabajo, avance y flecha.                        */

/* En el hero el panel ocupa todo el alto de la fila y reparte sus filas en
   ese espacio: así el bloque se ve tan alto como la columna de texto. Nunca
   más alto que lo que queda de la primera pantalla —ventana menos cabecera,
   menos la barra «Soy de» que cierra la vista, menos el relleno del hero—:
   lo que sobre se desplaza dentro de la lista, con la barra pintada del color
   del panel (como en el asistente). Así la barra de sector queda entera dentro
   de la ventana, con su borde inferior en el pliegue. */
.hero__inner > .casos-panel {
  display: flex; flex-direction: column; min-height: 0;
  max-height: calc(100svh - var(--header-h, 72px) - var(--adaptive-bar-h, 64px)
                   - 2 * clamp(1.5rem, .75rem + 2vw, 2.5rem));
}
.hero__inner > .casos-panel .casos-panel__lista {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-evenly;
  scrollbar-width: thin; scrollbar-color: var(--panel-bg) var(--panel-bg);
}
.hero__inner > .casos-panel .casos-panel__lista::-webkit-scrollbar { width: 8px; }
.hero__inner > .casos-panel .casos-panel__lista::-webkit-scrollbar-track { background: transparent; }
.hero__inner > .casos-panel .casos-panel__lista::-webkit-scrollbar-thumb {
  background: var(--panel-bg); border-radius: 4px; }

.casos-panel {
  /* Navy más profundo que el institucional: da más peso al bloque sin salirse
     de la familia. Blanco encima: 16.9:1.
     El color vive en una variable porque la barra de desplazamiento de la
     lista se pinta con él para volverse imperceptible. */
  --panel-bg: #091D38;
  background: var(--panel-bg); color: var(--white);
  border-radius: var(--r-md); padding: var(--sp-6);
  box-shadow: var(--sh-lg); -webkit-font-smoothing: antialiased;
}
.casos-panel__cab {
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.casos-panel__titulo {
  color: var(--white); font-family: var(--font-display);
  font-size: var(--fs-h4); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-head); line-height: 1.2;
}
.casos-panel__sub {
  margin-top: var(--sp-2); font-size: var(--fs-micro);
  color: var(--navy-200); line-height: 1.5; max-width: 46ch;
}

/* Rejilla única para todas las filas: así las columnas quedan alineadas
   aunque el texto de cada caso mida distinto. */
.casos-panel__lista { display: grid; }
.caso-fila {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: var(--sp-5);
  width: 100%; text-align: left; color: inherit;
  padding: var(--sp-5) var(--sp-3); border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.caso-fila + .caso-fila { border-top: 1px solid rgba(255,255,255,.09); }
.caso-fila:hover { background: rgba(255,255,255,.08); text-decoration: none; }
/* Filas intercaladas: navy del panel, carmesí de marca, navy, carmesí… Sobre
   el carmesí todo va en blanco (el navy-200 del sector no contrasta ahí). */
.caso-fila:nth-child(even) { background: var(--accent); border-top-color: transparent; }
.caso-fila:nth-child(even) + .caso-fila { border-top-color: transparent; }
.caso-fila:nth-child(even) .caso-fila__sector,
.caso-fila:nth-child(even) .caso-fila__detalle { color: rgba(255,255,255,.88); }
.caso-fila:nth-child(even) .caso-fila__detalle b,
.caso-fila:nth-child(even) .caso-fila__flecha { color: var(--white); }
.caso-fila:nth-child(even):hover { background: var(--accent-hover); }
.caso-fila:hover .caso-fila__flecha { transform: translateX(3px); }

.caso-fila__texto { min-width: 0; display: grid; gap: 6px; }
.caso-fila__sector {
  font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--navy-200);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Necesidad y solución, una línea cada una: la fila mide lo mismo que antes
   (sector + dos líneas) y el panel del hero sigue cabiendo en la ventana. El
   texto completo lo cuenta Bastión al tocar la fila. */
.caso-fila__detalle {
  font-size: var(--fs-sm); line-height: 1.55; color: var(--navy-100);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.caso-fila__detalle b { color: var(--white); font-weight: var(--weight-semi); }
.caso-fila__flecha { color: var(--white); display: flex;
  transition: transform var(--dur-fast) var(--ease-out); }

.casos-panel__pie { margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.16); }

@media (max-width: 520px) {
  .caso-fila { grid-template-columns: minmax(0, 1fr) 16px; gap: var(--sp-3); }
}

/* Filtro por categoría: el visitante llegó tocando un trabajo, así que el
   panel se acota a su sector y ofrece la salida de vuelta a todos. */
.casos-panel__quitar {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4);
  font-size: var(--fs-micro); color: var(--navy-200);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill); padding: .3rem .7rem .3rem .55rem;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.casos-panel__quitar:hover { background: rgba(255,255,255,.16); color: var(--white); }

/* El trabajo del que Bastión está hablando ahora mismo */
.caso-fila[aria-current] { background: rgba(255,255,255,.1); }
.caso-fila[aria-current] .caso-fila__detalle { color: var(--white); }
.caso-fila[aria-current] .caso-fila__sector { color: var(--accent); }
.caso-fila:nth-child(even)[aria-current] { background: var(--accent-press); }
.caso-fila:nth-child(even)[aria-current] .caso-fila__sector { color: var(--white); }

/* ══════════ VISTA DEL ASISTENTE ══════════ */

/* Volver: icono + texto, en el flujo y no flotando. Es la salida de la vista,
   y tiene que leerse como tal antes de que el visitante busque el «atrás». */
.vista-volver { margin-bottom: var(--sp-5); }
.btn-volver {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .4rem .8rem .4rem .6rem; border-radius: var(--r-pill);
  border: var(--border); background: var(--white);
  font-size: var(--fs-micro); font-weight: var(--weight-semi);
  color: var(--ink-muted); box-shadow: var(--sh-xs);
  transition: color var(--dur-fast), border-color var(--dur-fast),
              background var(--dur-fast), transform var(--dur-fast);
}
.btn-volver:hover {
  color: var(--ink-strong); border-color: var(--navy-300); background: var(--navy-050);
}
.btn-volver:hover svg { transform: translateX(-2px); }
.btn-volver svg { transition: transform var(--dur-fast) var(--ease-out); }

.asistente-grid {
  display: grid; gap: var(--sp-8);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
}
@media (max-width: 900px) { .asistente-grid { grid-template-columns: 1fr; gap: var(--sp-7); } }

/* Modo consulta: el asistente se queda con toda la vista. El panel de casos no
   se destruye —se oculta— para que volver a los casos no cueste un repintado. */
.asistente-grid[data-modo="consulta"] { grid-template-columns: minmax(0, 1fr); }
.asistente-grid[data-modo="consulta"] > .casos-panel { display: none; }
.asistente-grid[data-modo="consulta"] .asistente {
  max-width: 46rem; margin-inline: auto; width: 100%;
}
.asistente-grid[data-modo="consulta"] .asistente__hilo {
  min-height: calc(100svh - var(--header-h) - 340px); max-height: none;
}
.asistente-grid[data-modo="consulta"] .msj { max-width: 78%; }
.asistente-grid[data-modo="consulta"] .msj--usuario { max-width: 68%; }

.asistente__head { position: relative; }
.asistente__ident { min-width: 0; }
.asistente__cerrar { margin-left: auto; flex-shrink: 0; gap: 6px; }

.asistente__cta { display: grid; gap: var(--sp-3); }
.asistente__cta .asistente__nota { margin-top: 0; text-align: center; }

/* Piezas del mensaje con el que Bastión cuenta un trabajo */
.msj__titulo {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--fs-body); color: var(--ink-strong); line-height: 1.25;
}
.msj__meta {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-subtle); margin-bottom: var(--sp-3);
}
.msj__burbuja p + p { margin-top: var(--sp-3); }
.msj__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.msj__pie { margin-top: var(--sp-3); font-size: var(--fs-micro); }

/* Resumen de la entrevista: lo que el visitante nos contó, devuelto en limpio */
.resumen-caso {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
}
.resumen-caso dt {
  color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .06em;
  font-size: 10px; padding-top: 2px; white-space: nowrap;
}
.resumen-caso dd { color: var(--ink-strong); }

.sugerencia--accion {
  border-color: var(--accent); background: var(--accent); color: var(--white);
  font-weight: var(--weight-semi); -webkit-font-smoothing: antialiased;
}
.sugerencia--accion:hover { background: var(--accent-ink); border-color: var(--accent-ink);
  color: var(--white); }
.sugerencia--salto { color: var(--ink-subtle); font-style: italic; }

/* ══════════ VISTA · CÓMO TRABAJAMOS ══════════ */
/* Variante compacta de los pasos, para que la vista entre en una pantalla */
.steps--ceñidos { gap: var(--sp-4); }
.steps--ceñidos .step { padding-left: var(--sp-8); }
.steps--ceñidos .step::before { width: 32px; height: 32px; font-size: var(--fs-micro); }
.steps--ceñidos .step::after { left: 15.5px; top: 38px; bottom: calc(-1 * var(--sp-4) + 3px); }
.steps--ceñidos .step h4 { font-size: var(--fs-body); margin-bottom: 3px; }
.steps--ceñidos .step p { font-size: var(--fs-micro); line-height: 1.5; }

/* Las cuatro razones en 2×2 en vez de apiladas: el mismo diseño ocupa la mitad
   de alto y la vista entra en una pantalla. */
.razones-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .razones-grid { grid-template-columns: 1fr; } }
.razones-grid .card { padding: var(--sp-5); }
.razones-grid .card__icon { width: 38px; height: 38px; margin-bottom: var(--sp-4); }
.razones-grid .card__title { font-size: var(--fs-body); margin-bottom: var(--sp-2); }
.razones-grid .card__text { font-size: var(--fs-micro); line-height: 1.55; }


.cifras-tira {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6);
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border);
}
.cifras-tira > div { display: grid; gap: 2px; }
.cifras-tira b {
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em;
  color: var(--ink-strong); line-height: 1;
}
.cifras-tira span { font-size: var(--fs-micro); color: var(--ink-muted); max-width: 22ch; }
.cifras-tira .btn { margin-left: auto; }

/* ══════════ MURO DE CLIENTES · tarjetas más grandes ══════════ */
.muro { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
@media (max-width: 620px) { .muro { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.marca-cliente { aspect-ratio: 16 / 10; padding: var(--sp-4); border-radius: var(--r-md); }
.marca-cliente__sigla { width: 34px; height: 34px; font-size: .78rem; }
.marca-cliente__nombre { font-size: .98rem; }
.marca-cliente__pie { font-size: 11px; }

/* Tarjeta de acción del muro */
.marca-cliente--accion {
  background: var(--accent); align-items: flex-start; justify-content: center;
  gap: var(--sp-3); cursor: pointer; text-align: left;
}
.marca-cliente--accion:hover { transform: translateY(-3px); }
.marca-cliente--accion .marca-cliente__nombre { font-size: 1.35rem; }
.marca-cliente--accion small { font-size: var(--fs-micro); opacity: .9; line-height: 1.4; }

/* Listado compacto de la cartera completa */
.lista-clientes {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  max-height: 46vh; overflow-y: auto; padding-right: var(--sp-2);
}
.lista-clientes a {
  display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4);
  border: var(--border); border-radius: var(--r-sm); background: var(--white);
  color: var(--ink);
}
.lista-clientes a:hover { border-color: var(--navy-300); background: var(--navy-050);
  text-decoration: none; }
.lista-clientes b { font-size: var(--fs-sm); font-weight: var(--weight-semi); }
.lista-clientes span { font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-subtle); }

/* La lista de casos del asistente nunca desborda la ventana */
.asistente-grid .casos-panel__lista {
  /* La lista nunca empuja la vista fuera de la ventana: lo que sobra se
     desplaza dentro del panel. */
  max-height: calc(100svh - var(--header-h) - 380px);
  min-height: 200px; overflow-y: auto;
  /* La barra se pinta del color del panel: sigue estando —y sigue
     arrastrándose— pero no dibuja una línea clara sobre el navy. El borde de
     la lista lo marca el desvanecido inferior, no un riel. */
  scrollbar-width: thin; scrollbar-color: var(--panel-bg) var(--panel-bg);
}
/* En modo casos el hilo comparte pantalla con el panel de trabajos, así que se
   acota; en modo consulta se estira (ver más abajo). */
.asistente-grid[data-modo="casos"] .asistente__hilo {
  min-height: 200px; max-height: calc(100svh - var(--header-h) - 320px);
}
.asistente-grid .asistente__sugerencias { max-height: 30vh; overflow-y: auto; }
.asistente-grid .casos-panel__lista::-webkit-scrollbar { width: 8px; }
.asistente-grid .casos-panel__lista::-webkit-scrollbar-track { background: transparent; }
.asistente-grid .casos-panel__lista::-webkit-scrollbar-thumb {
  background: var(--panel-bg); border-radius: 4px; }

/* Panel de casos: filas aún más holgadas */
.caso-fila { padding: var(--sp-5) var(--sp-3); }
.asistente-grid .caso-fila { padding: var(--sp-4) var(--sp-3); }

/* ── Cuéntenos su caso (caso.html, D-0022) ────────────────────────────────
   Todo cabe en la ventana: la sección mide el alto de la ventana menos la cabecera; el
   chat hace scroll por dentro y nunca crece. Al agendar, dos columnas: chat a la
   izquierda (referencia) y agenda/resumen a la derecha. Scroll de página solo hasta el pie. */
.caso-seccion { position: relative; isolation: isolate; height: calc(100vh - var(--header-h, 72px)); min-height: 520px; padding: var(--sp-4) 0; box-sizing: border-box; }
.panal--caso { display: block; }           /* el panal del hero se oculta en pantallas estrechas; aquí es el fondo y se queda */
.caso-marco[data-caso-etapa="decision"] { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); justify-content: stretch; }
.caso-marco[data-caso-etapa="decision"] .caso-col-lado { display: block; }
.caso-decision .btn + .btn { margin-top: var(--sp-2); }
.caso-marco { height: 100%; display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: var(--sp-5); min-height: 0; }
.caso-marco[data-caso-etapa="agenda"], .caso-marco[data-caso-etapa="listo"] { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); justify-content: stretch; }
.caso-col { min-height: 0; height: 100%; }
.caso-col-lado { display: none; overflow-y: auto; }
.caso-marco[data-caso-etapa="agenda"] .caso-col-lado, .caso-marco[data-caso-etapa="listo"] .caso-col-lado { display: block; }
.caso-asistente { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.caso-hilo { flex: 1 1 auto; min-height: 0; max-height: none; padding: var(--sp-4); gap: var(--sp-3); }
.caso-hilo .msj__burbuja { padding: var(--sp-3) var(--sp-4); }
[data-caso-pantalla][hidden], .caso-panel__sub[hidden], .caso-error[hidden] { display: none !important; }
.caso-form { padding: var(--sp-3) var(--sp-4); border-top: var(--border); }
.caso-form .textarea { min-height: 52px; }
.caso-form__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.caso-panel { transform: none !important; padding: var(--sp-5); }
.caso-panel__cab { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.caso-panel__titulo { font-family: var(--font-display); font-size: var(--fs-h4); margin: 0; }
.caso-panel__sub { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 var(--sp-3); }
.caso-panel__h3 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: var(--sp-3) 0 var(--sp-2); }
.caso-agenda .field { margin: 0; }
.caso-cal__grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: var(--sp-3); }
.caso-cal__dia {
  display: grid; justify-items: center; gap: 0; padding: 4px 2px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink);
  font: inherit; line-height: 1.1;
}
.caso-cal__dia:hover { border-color: var(--navy-300); }
.caso-cal__dia.is-activo { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.caso-cal__dow { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.caso-cal__num { font-size: .95rem; font-weight: var(--weight-semi); }
.caso-cal__mes { font-size: 9px; opacity: .75; }
.caso-horas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); }
.caso-franjas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: var(--sp-3); }
.caso-franja {
  padding: 6px 2px; font: inherit; font-size: var(--fs-micro); line-height: 1.1; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--ink);
}
/* Libre y ocupado se distinguen de un vistazo: verde con borde firme frente a
   rojo tachado y punteado. El hover de una hora libre la pinta de rojo de marca
   con letra blanca (petición del 2026-09-13). */
.caso-franja__hora { display: block; font-size: var(--fs-small); }
.caso-franja small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.caso-franja.is-libre { background: #E8F5EE; color: var(--ok); border-color: var(--ok); font-weight: var(--weight-semi); }
.caso-franja.is-libre:hover, .caso-franja.is-libre:focus-visible { background: var(--crimson-600); color: var(--white); border-color: var(--crimson-600); }
.caso-franja.is-ocupado { background: var(--crimson-050); color: var(--crimson-700); border: 1px dashed var(--crimson-300); cursor: not-allowed; opacity: .85; }
.caso-franja.is-ocupado .caso-franja__hora { text-decoration: line-through; }
.caso-franja.is-activa, .caso-franja.is-activa:hover { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.caso-panel__leyenda { font-weight: normal; text-transform: none; letter-spacing: 0; margin-left: var(--sp-2); }
.caso-panel__leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin: 0 3px 0 6px; vertical-align: middle; border: 1px solid var(--line); }
.caso-panel__leyenda i.is-libre { background: #E8F5EE; border-color: var(--ok); }
.caso-panel__leyenda i.is-ocupado { background: var(--crimson-050); border: 1px dashed var(--crimson-300); }
.caso-consent { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-micro); color: var(--ink-muted); margin: var(--sp-3) 0; }
.caso-consent input { margin-top: 3px; }
.caso-error { color: #b42318; font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.caso-resumen {
  white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.5; max-height: 34vh; overflow-y: auto;
  background: var(--paper-alt); border: var(--border); border-radius: var(--r-sm); padding: var(--sp-3); margin: 0 0 var(--sp-3);
}
.caso-listo .btn + .btn { margin-top: var(--sp-2); }
@media (max-width: 860px) {
  .caso-seccion { height: auto; min-height: 0; }
  .caso-marco, .caso-marco[data-caso-etapa="decision"], .caso-marco[data-caso-etapa="agenda"], .caso-marco[data-caso-etapa="listo"] { grid-template-columns: 1fr; height: auto; }
  .caso-col { height: auto; }
  .caso-asistente { height: 62vh; }
  .caso-marco[data-caso-etapa="agenda"] .caso-asistente, .caso-marco[data-caso-etapa="listo"] .caso-asistente { height: 36vh; }
  .panal--caso { display: none; }
  .caso-cal__grid { grid-template-columns: repeat(6, 1fr); }
}