/* ==========================================================================
   INCODAP — Servicios (referencia visual)
   Encima de /css/home.css. La página siempre es clara: la Mac de Saúl está
   en modo oscuro y los tableros deben verse como en una oficina.
   ========================================================================== */

html { color-scheme: light; }

/* --------------------------------------------------------------------------
   Hero: la mesa de trabajo
   -------------------------------------------------------------------------- */

.mesa-hero { padding: clamp(3rem, 7vh, 5rem) 0 clamp(2.5rem, 6vh, 4rem); overflow: hidden; }

.mesa-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.mesa-texto h1 {
    font-size: clamp(2.3rem, 4.8vw, 3.6rem);
    margin-bottom: 1.1rem;
}
.mesa-texto h1 span { display: block; }
.mesa-texto .entrada { margin-bottom: 2rem; }
.mesa-texto .hero-acciones { margin-bottom: 0; }

.mesa-col { min-width: 0; }
.mesa-nota { margin-top: 1.4rem; font-size: .875rem; color: var(--tinta-3); text-align: center; }

/* La mesa escala con su ancho: todo lo de adentro está en cqw */
.mesa {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 100 / 78;
    width: 100%;
}

.obj__cap { margin-top: .9cqw; font-size: clamp(11px, 2cqw, 13px); font-weight: 600; color: var(--tinta-2); text-align: center; }

/* Monitor */
.monitor { position: absolute; left: 20cqw; top: 0; width: 80cqw; z-index: 1; }
.monitor__pantalla {
    aspect-ratio: 16 / 10;
    background: var(--blanco);
    border-radius: 2cqw;
    border: 1.3cqw solid #1b2026;
    box-shadow: var(--sombra-2), 0 0 0 .3cqw #2c333a;
    overflow: hidden;
}
.monitor__cuello { width: 10cqw; height: 3.8cqw; margin: 0 auto; background: linear-gradient(90deg, #aeb6bd, #d3d8dc 50%, #aeb6bd); }
.monitor__base { width: 30cqw; height: 1.8cqw; margin: 0 auto; border-radius: 99px; background: linear-gradient(#cdd3d8, #a6aeb5); box-shadow: 0 .6cqw 1.2cqw rgba(20, 24, 28, .12); }

/* El tablero de adentro */
.tab {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .9em;
    padding: 1.1em 1.3em;
    font-size: clamp(9px, 1.5cqw, 12px);
    line-height: 1.35;
}
.tab__titulo { font-size: 1em; font-weight: 600; margin-bottom: .7em; color: var(--tinta); }
.tab__cab { display: flex; justify-content: space-between; align-items: center; }
.tab__cab b { font-family: var(--display); font-size: 1.15em; letter-spacing: -.02em; }
.tab__cab span { color: var(--tinta-3); }

.tab__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linea); border-radius: .8em; }
.tab__kpis > div { padding: .7em .9em .6em; min-width: 0; }
.tab__kpis > div + div { border-left: 1px solid var(--linea); }
.tab__kpis dt { color: var(--tinta-2); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab__kpis dd { font-family: var(--display); font-weight: 700; font-size: 1.9em; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tab__kpis dd small { font-family: var(--texto); font-weight: 500; font-size: .5em; color: var(--tinta-2); letter-spacing: 0; margin-left: .15em; }

.tab__cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.45fr 1fr; gap: .9em; }
.tab__panel { border: 1px solid var(--linea); border-radius: .8em; padding: .8em .9em; min-width: 0; overflow: hidden; }

/* Barras: finas, extremo redondeado, una sola en rojo (la que se salió) */
.barra { display: grid; grid-template-columns: 6.2em 1fr 2.4em; align-items: center; gap: .6em; padding: .28em 0; font-size: .95em; }
.barra span { color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra i { display: block; height: .65em; border-radius: 0 3px 3px 0; background: #b9c0c7; width: var(--v); clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--salida); }
.barra em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.barra--baja i { background: var(--rojo); }
.barra--baja em { color: var(--rojo); }
[data-barras].lista .barra i { clip-path: inset(0 0 0 0); }
[data-barras].lista .barra:nth-child(2) i { transition-delay: 60ms; }
[data-barras].lista .barra:nth-child(3) i { transition-delay: 120ms; }
[data-barras].lista .barra:nth-child(4) i { transition-delay: 180ms; }
[data-barras].lista .barra:nth-child(5) i { transition-delay: 240ms; }
[data-barras].lista .barra:nth-child(6) i { transition-delay: 300ms; }
[data-barras].lista .barra:nth-child(7) i { transition-delay: 360ms; }

.alertas { list-style: none; }
.alertas li { display: flex; gap: .55em; align-items: baseline; padding: .42em 0; border-top: 1px solid var(--linea-2); font-size: .92em; line-height: 1.3; transition: opacity 420ms var(--salida), transform 420ms var(--salida); }
.alertas li:first-child { border-top: 0; }
.alertas li.nueva { opacity: 0; transform: translateY(-.4em); }
.alertas time { flex: none; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* Teléfono de la mesa */
.tel {
    position: absolute;
    left: 0;
    top: 12cqw;
    width: 23cqw;
    z-index: 2;
}
.tel__pantalla {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 2.05;
    border-radius: 3.4cqw;
    border: 1cqw solid #1b2026;
    background: var(--blanco);
    box-shadow: var(--sombra-2);
    font-size: clamp(9px, 1.25cqw, 11px);
    line-height: 1.3;
    overflow: hidden;
}
.tel__estado { display: flex; justify-content: space-between; padding: .9em 1.1em .2em; font-size: .85em; font-weight: 600; color: var(--tinta-2); }
.tel__titulo { font-family: var(--display); font-weight: 700; font-size: 1.25em; letter-spacing: -.02em; padding: .6em 1.1em .3em; }
.ent { list-style: none; padding: 0 1.1em; display: flex; flex-direction: column; }
.ent li { display: grid; grid-template-columns: 1fr auto; gap: .1em .5em; padding: .65em 0; border-top: 1px solid var(--linea); }
.ent b { font-size: .95em; }
.ent span { grid-column: 1; color: var(--tinta-2); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: .78em; font-weight: 600; color: var(--tinta-2); background: var(--blanco); border: 1px solid var(--linea); border-radius: 99px; padding: .25em .6em; white-space: nowrap; }
.ent em.ok { color: var(--rojo); border-color: rgba(212, 32, 26, .25); background: var(--rojo-piso); }
.tel__boton { margin: auto 1.1em 1.1em; padding: .75em; border-radius: .8em; background: var(--rojo); color: #fff; font-weight: 600; text-align: center; font-size: .95em; }

/* Báscula */
.bascula { position: absolute; left: 30cqw; top: 60cqw; width: 28cqw; z-index: 2; }
.bascula__lcd {
    background: #1b2026;
    color: #e9edf0;
    border-radius: 1.3cqw;
    padding: 1.2cqw 1.6cqw 1.1cqw;
    box-shadow: var(--sombra-2);
    font-variant-numeric: tabular-nums;
}
.bascula__valor { font-family: var(--display); font-weight: 700; font-size: 4.4cqw; line-height: 1; letter-spacing: -.03em; }
.bascula__valor small { font-family: var(--texto); font-weight: 500; font-size: .42em; margin-left: .3em; color: #b9c0c7; }
.bascula__estado { display: flex; align-items: center; gap: .4em; margin-top: .8cqw; font-size: clamp(8px, 1.5cqw, 12px); font-weight: 600; color: #b9c0c7; }
.bascula__estado svg { width: 1.1em; height: 1.1em; color: #fff; }

/* Etiqueta */
.ticket { position: absolute; left: 65cqw; top: 59cqw; width: 24cqw; z-index: 2; }
.ticket__papel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9em;
    align-items: center;
    background: var(--blanco);
    border-radius: .7cqw;
    padding: 1.1cqw 1.2cqw;
    box-shadow: var(--sombra-2);
    border-top: 1px dashed var(--linea);
    transform: rotate(-3deg);
    font-size: clamp(9px, 1.25cqw, 11px);
    line-height: 1.3;
}
.ticket__papel b { display: block; font-family: var(--display); font-size: 1.15em; letter-spacing: -.02em; }
.ticket__papel > div > span { display: block; color: var(--tinta-2); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket__papel > div { min-width: 0; }
.qr { width: 5.4cqw; height: 5.4cqw; fill: var(--tinta); shape-rendering: crispEdges; }

/* Conectores: el dato viaja de cada objeto al tablero */
.con { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.con__linea { fill: none; stroke: var(--tinta-3); stroke-opacity: .42; stroke-width: 1.5; }
.con__paquete {
    fill: none;
    stroke: var(--rojo);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: .07 1;
    stroke-dashoffset: 1.07;
    animation: viaja 2.4s cubic-bezier(.16, 1, .3, 1) infinite;
    animation-delay: var(--espera, 0s);
}
@keyframes viaja {
    0%   { stroke-dashoffset: 1.07; opacity: 0; }
    8%   { opacity: 1; }
    55%  { stroke-dashoffset: 0; opacity: 1; }
    62%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* En columna: el monitor ocupa todo y los objetos se acomodan debajo */
@container (max-width: 520px) {
    /* El teléfono se ve en grande más abajo, en la sección de apps.
       El alto de la mesa va en la media query de abajo: una regla de
       contenedor no puede cambiar al propio contenedor. */
    .monitor { left: 0; width: 100cqw; }
    .monitor__pantalla { aspect-ratio: 4 / 3; }
    .tel { display: none; }
    .bascula { left: 8cqw; top: 86cqw; width: 40cqw; }
    .bascula__valor { font-size: 6cqw; }
    .bascula__estado { font-size: clamp(9px, 2cqw, 12px); }
    .ticket { left: 56cqw; top: 85cqw; width: 38cqw; }
    .ticket__papel { font-size: clamp(9px, 1.9cqw, 12px); }
    .qr { width: 8cqw; height: 8cqw; }
    .tab__kpis { grid-template-columns: repeat(2, 1fr); }
    .tab__kpis > div:nth-child(3) { border-left: 0; }
    .tab__kpis > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
    .tab__cuerpo { grid-template-columns: 1fr; }
    .tab__panel--alertas { display: none; }
}

/* --------------------------------------------------------------------------
   Secciones de servicio
   -------------------------------------------------------------------------- */

.serv { padding: clamp(4rem, 9vh, 6.5rem) 0; }
.serv--nieve { background: var(--nieve); }

.serv__cab { max-width: 46rem; margin-bottom: 2.5rem; }
.serv__cab h2, .partido__texto h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin-bottom: .9rem; }
.serv__cab p, .partido__texto > p { color: var(--tinta-2); font-size: 1.05rem; max-width: 56ch; }

.partido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.partido__texto > p + p { margin-top: 1rem; }

/* Ficha del servicio: qué entra, qué sale, dónde corre, casos */
.ficha { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; }
.ficha dt { font-size: .8rem; font-weight: 700; margin-bottom: .35rem; }
.ficha dd { font-size: .925rem; color: var(--tinta-2); line-height: 1.5; }
.ficha .enlace-rojo { margin-top: .5rem; font-size: .875rem; }
.ficha--casos { grid-template-columns: 1.2fr 1fr; }
.ficha--vertical { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.8rem; }

/* Marco de navegador con el demo en vivo */
.marco { position: relative; border-radius: 18px; overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-2), 0 0 0 1px rgba(20, 24, 28, .06); }
/* El demo sigue hacia abajo: el borde inferior se desvanece en vez de cortar una fila */
.marco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(250, 251, 251, 0), var(--nieve-2)); pointer-events: none; }
.marco__barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .7rem .6rem 1rem; background: var(--nieve); border-bottom: 1px solid var(--linea); }
.marco__titulo { font-size: .875rem; font-weight: 600; color: var(--tinta-2); background: var(--blanco); border: 1px solid var(--linea); border-radius: 8px; padding: .4rem .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.marco__abrir { flex: none; display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; color: var(--rojo); padding: .45rem .7rem; border-radius: 8px; transition: background 160ms; }
.marco__abrir svg { width: 15px; height: 15px; }
.marco__abrir:hover { background: var(--rojo-piso); }
.marco__vista { position: relative; height: calc(900px * var(--escala, .8)); overflow: auto; overscroll-behavior-x: contain; background: var(--nieve-2); -webkit-overflow-scrolling: touch; }
.marco__vista:focus-visible { outline-offset: -2px; }
.marco__lienzo { position: relative; width: calc(1440px * var(--escala, .8)); height: 100%; }
.marco__lienzo iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform: scale(var(--escala, .8)); transform-origin: 0 0; background: var(--nieve-2); }

/* Teléfono con el demo */
.telm-figura { margin: 0; justify-self: center; width: min(100%, 340px); }
.telm { border-radius: 48px; background: #1b2026; padding: 10px; box-shadow: var(--sombra-2); }
.telm__pantalla { position: relative; aspect-ratio: 390 / 844; border-radius: 38px; overflow: hidden; background: var(--blanco); }
.telm__pantalla iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--escala, 1)); transform-origin: 0 0; background: var(--blanco); }
.telm-figura figcaption { margin-top: 1rem; font-size: .875rem; color: var(--tinta-3); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .8rem; }
.telm-figura .enlace-rojo { font-size: .875rem; }

.partido--tel { grid-template-areas: "texto tel" "apps tel"; grid-template-rows: auto 1fr; align-items: start; row-gap: 0; }
.partido--tel .partido__texto { grid-area: texto; }
.partido--tel .apps { grid-area: apps; align-self: start; }
.partido--tel .telm-figura { grid-area: tel; align-self: center; }
.apps-titulo { margin-top: 1.6rem; margin-bottom: 1rem; font-size: 1rem; }
.apps-lista { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.apps-lista li { display: flex; gap: .9rem; align-items: flex-start; }
.apps-lista img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.apps-lista b { display: block; font-weight: 600; }
.apps-lista span { display: block; font-size: .9rem; color: var(--tinta-2); line-height: 1.45; }
.app-tiendas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.app-tiendas a { font-size: .8rem; font-weight: 600; color: var(--tinta-2); border: 1px solid var(--linea); border-radius: 6px; padding: .2rem .55rem; transition: color 160ms, border-color 160ms; }
.app-tiendas a:hover { color: var(--rojo); border-color: rgba(212, 32, 26, .35); }

/* Hardware: tres objetos, cada uno con su lectura */
.equipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; }
.equipo-obj { display: flex; flex-direction: column; gap: .5rem; }
.equipo-obj h3 { margin-top: 1.2rem; }
.equipo-obj > p { font-size: .95rem; color: var(--tinta-2); line-height: 1.55; }
.objeto { height: 170px; display: flex; flex-direction: column; }
.objeto > * { flex: 1; min-height: 0; }
.bascula--grande .bascula__lcd { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.impresora { display: flex; flex-direction: column; justify-content: flex-start; }
.sensor { display: flex; flex-direction: column; justify-content: space-between; }

.bascula--grande { position: static; width: 100%; }
.bascula--grande .bascula__lcd { border-radius: 12px; padding: 1.1rem 1.25rem 1rem; box-shadow: var(--sombra); }
.bascula--grande .bascula__valor { color: #fff; }
.bascula--grande .bascula__valor { font-size: 2.6rem; }
.bascula--grande .bascula__estado { margin-top: .5rem; font-size: .85rem; }

.impresora { position: relative; background: var(--nieve); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem .9rem 1.1rem; }
.impresora__ranura { height: 10px; border-radius: 5px; background: #1b2026; margin: 0 .3rem; }
.ticket__papel--grande { flex: none; margin: -2px .9rem 0; border-radius: 0 0 8px 8px; padding: .9rem 1rem; font-size: .85rem; transform: none; box-shadow: var(--sombra-2); border-top: 0; }
.impresora__ranura { flex: none; }
.ticket__papel--grande .qr { width: 44px; height: 44px; }
.ticket__papel--grande > div > span { white-space: normal; overflow: visible; }

.sensor { border: 1px solid var(--linea); border-radius: 12px; padding: .9rem 1rem .8rem; background: var(--nieve-2); }
.sensor__cab { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.sensor__cab span { font-size: .8rem; color: var(--tinta-2); }
.sensor__cab b { font-family: var(--display); font-size: 1.6rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sensor__linea { width: 100%; height: 56px; display: block; }
.sensor__linea line { stroke: var(--linea); stroke-width: 1; stroke-dasharray: 3 3; }
.sensor__linea polyline { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sensor__pie { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tinta-3); margin-top: .35rem; }

/* Flujo: herramientas, sistema, salidas */
.flujo { position: relative; display: grid; grid-template-columns: 1fr auto 1.1fr; gap: 2rem clamp(2.5rem, 7vw, 6rem); align-items: center; padding: 1rem 0; }
.flujo__col { list-style: none; display: flex; flex-direction: column; gap: .6rem; position: relative; z-index: 2; }
.flujo__col--entrada li { align-self: flex-start; background: var(--blanco); border: 1px solid var(--linea); border-radius: 10px; padding: .55rem 1rem; font-weight: 600; font-size: .95rem; box-shadow: var(--sombra); }
.flujo__nodo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; background: var(--tinta); color: #fff; border-radius: 18px; padding: 1.6rem 1.8rem; min-width: 190px; box-shadow: var(--sombra-2); }
.flujo__nodo img { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 4px; margin-bottom: .4rem; }
.flujo__nodo b { font-family: var(--display); font-size: 1.2rem; letter-spacing: -.02em; }
.flujo__nodo span { font-size: .85rem; color: rgba(255, 255, 255, .7); }
.flujo__col--salida { gap: 1rem; }
.flujo__col--salida li { display: grid; grid-template-columns: 24px 1fr; gap: .1rem .8rem; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: .9rem 1.1rem; box-shadow: var(--sombra); }
.flujo__col--salida svg { width: 22px; height: 22px; color: var(--rojo); grid-row: 1 / span 2; }
.flujo__col--salida b { font-weight: 600; font-size: .95rem; }
.flujo__col--salida span { font-size: .85rem; color: var(--tinta-2); }
.flujo .con__paquete { animation-duration: 3.2s; }

/* Business intelligence: el tablero de ejemplo */
.bi { background: var(--blanco); border-radius: 18px; padding: 1.5rem 1.6rem 1.3rem; box-shadow: var(--sombra-2), 0 0 0 1px rgba(20, 24, 28, .05); }
.bi__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bi__cab h3 { font-size: 1.05rem; }
.bi__cab span { font-size: .8rem; color: var(--tinta-3); }
.bi__barras .barra { grid-template-columns: 6.5rem 1fr 3rem; font-size: .9rem; padding: .32rem 0; }
.bi__barras .barra i { height: 10px; }
.bi__alerta { display: flex; gap: .55rem; align-items: center; margin-top: 1rem; padding: .7rem .9rem; border-radius: 10px; background: var(--rojo-piso); color: var(--rojo-alto); font-size: .875rem; font-weight: 600; }
.bi__alerta svg { width: 18px; height: 18px; flex: none; }
.bi__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.1rem; }
.bi__tiles > div { border-top: 1px solid var(--linea); padding: .85rem 0 0; }
.bi__tiles dt { font-size: .8rem; color: var(--tinta-2); }
.bi__tiles dd { font-family: var(--display); font-weight: 700; font-size: 1.8rem; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bi__tiles small { display: flex; gap: .3rem; align-items: center; font-size: .8rem; color: var(--tinta-2); margin-top: .25rem; line-height: 1.35; }
.bi__tiles small svg { width: 13px; height: 13px; flex: none; }
.bi__tabla { margin-top: 1rem; font-size: .875rem; }
.bi__tabla summary { cursor: pointer; color: var(--tinta-2); font-weight: 600; padding: .3rem 0; list-style: none; display: inline-flex; align-items: center; gap: .45rem; }
.bi__tabla summary::-webkit-details-marker { display: none; }
.bi__tabla summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 180ms var(--salida); margin-left: 2px; }
.bi__tabla[open] summary::before { transform: rotate(45deg); }
.bi__tabla summary:hover { color: var(--rojo); }
.bi__tabla table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.bi__tabla caption { text-align: left; color: var(--tinta-3); padding-bottom: .4rem; }
.bi__tabla th, .bi__tabla td { text-align: left; padding: .4rem 0; border-top: 1px solid var(--linea); }
.bi__tabla td:last-child, .bi__tabla th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Equipo: la lista */
.equipo-nota { font-size: .95rem; color: var(--tinta-2); background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: .9rem 1.1rem; }
.lista { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-2), 0 0 0 1px rgba(20, 24, 28, .05); overflow: hidden; }
.lista__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--linea); }
.lista__cab b { font-family: var(--display); font-size: 1.05rem; letter-spacing: -.02em; }
.lista__cab span { font-size: .8rem; color: var(--tinta-3); }
.lista__tabla { width: 100%; border-collapse: collapse; }
.lista__tabla td { padding: .8rem 1.5rem; font-size: .95rem; border-top: 1px solid var(--linea-2); }
.lista__tabla tr:first-child td { border-top: 0; }
.lista__tabla td:last-child { color: var(--tinta-2); text-align: right; }
.lista__pie { padding: 1rem 1.5rem; background: var(--nieve); font-size: .875rem; color: var(--tinta-2); }

/* Tres formas de trabajar */
.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.forma { padding-top: 1.3rem; border-top: 2px solid var(--tinta); }
.forma h3 { margin-bottom: .5rem; }
.forma p { font-size: .95rem; color: var(--tinta-2); line-height: 1.55; }

/* Lo que preguntarías */
.qa { max-width: 60rem; }
.qa > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: .4rem 3rem; padding: 1.2rem 0; border-top: 1px solid var(--linea); }
.qa > div:last-child { border-bottom: 1px solid var(--linea); }
.qa dt { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; }
.qa dd { color: var(--tinta-2); line-height: 1.55; }

/* Lo que se pierde */
.perdida h2 { max-width: 22ch; margin-bottom: 1.6rem; }
.perdida__lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2.5rem; max-width: 60rem; }
.perdida__lista li { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .82); font-size: 1rem; line-height: 1.55; }
.perdida__nota { margin-top: 2rem; color: #fff; font-weight: 600; }

/* Productos propios */
.propios { margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--linea); }
.propios__titulo { font-size: .95rem; color: var(--tinta-2); margin-bottom: 1.2rem; max-width: 62ch; }
.propios__fila { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem 2rem; margin-bottom: 1.2rem; }
.propios__fila li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.propios__fila img { width: 36px; height: 36px; border-radius: 9px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .mesa-rejilla { grid-template-columns: 1fr; gap: 2.5rem; }
    .mesa { max-width: 640px; }
    .partido { grid-template-columns: 1fr; }
    .partido--tel { grid-template-areas: "texto" "tel" "apps"; row-gap: 2rem; }
    .ficha { grid-template-columns: 1fr 1fr; }
    .ficha--casos { grid-template-columns: 1fr; }
    .equipos { grid-template-columns: 1fr; max-width: 520px; }
    .flujo { grid-template-columns: 1fr; justify-items: center; gap: 2rem; }
    .flujo .con { display: none; }
    .flujo__col { width: 100%; max-width: 420px; }
    .flujo__col--entrada { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .flujo__nodo::before, .flujo__nodo::after { content: ""; position: absolute; left: 50%; width: 2px; height: 2rem; background: var(--tinta-3); opacity: .45; transform: translateX(-50%); }
    .flujo__nodo::before { bottom: 100%; }
    .flujo__nodo::after { top: 100%; }
    .formas { grid-template-columns: 1fr; gap: 1.8rem; max-width: 36rem; }
    .perdida__lista { grid-template-columns: 1fr; max-width: 36rem; }
}

@media (max-width: 580px) {
    .mesa { aspect-ratio: 100 / 114; }
}

@media (max-width: 600px) {
    .ficha { grid-template-columns: 1fr; gap: 1.2rem; }
    .qa > div { grid-template-columns: 1fr; gap: .3rem; }
    .bi { padding: 1.2rem 1.1rem 1rem; }
    .bi__barras .barra { grid-template-columns: 5.2rem 1fr 2.6rem; }
    .bi__tiles { grid-template-columns: 1fr; }
    .lista__tabla td { padding: .7rem 1.1rem; font-size: .9rem; }
    .lista__cab, .lista__pie { padding-inline: 1.1rem; }
    .marco__titulo { white-space: normal; }
    .telm { border-radius: 40px; padding: 8px; }
    .telm__pantalla { border-radius: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .con__paquete { display: none; }
    .alertas li.nueva { opacity: 1; transform: none; }
    [data-barras] .barra i { clip-path: inset(0); }
}