/* consultorIA · índice de las demos (/demos/): la grilla de tarjetas que estaba en el home hasta el 20-10 (1 + 3 + 3;
   en celular, filas compactas). Va después de /assets/gratis/gratis.css, que pone los tokens, la barra, el pie y el modo
   oscuro; aquí solo van las tarjetas y los tres tokens que el contenido gratuito no usa. */
:root{--hover-borde:#CBD5E1; --marco-fondo:#FFFFFF; --marco-borde:#DCE2EE}
:root[data-tema="oscuro"]{--hover-borde:#3E4452; --marco-fondo:#1C1F28; --marco-borde:#2E3340}
@media(prefers-color-scheme:dark){:root:not([data-tema="claro"]){--hover-borde:#3E4452; --marco-fondo:#1C1F28; --marco-borde:#2E3340}}

.demos{margin-top:1.8rem}
.demos__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.flecha{display:inline-block;transition:transform .25s var(--ease)}
.case{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
@media(hover:hover){.case:hover{border-color:var(--hover-borde)}}
.case__shot{position:relative;aspect-ratio:16/10;border-bottom:1px solid var(--line);background:var(--tint);overflow:hidden}
/* Miniaturas: un estado real de cada demo (assets/mini-*.svg), cargadas en diferido. */
.case__img{display:block;width:100%;height:100%;object-fit:cover}
.case__body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.2rem}
.case__type{font-size:.84rem;font-weight:500;color:var(--slate-2);line-height:1.4}
.case__titulo{font-size:1.12rem;font-weight:700;line-height:1.3;letter-spacing:-.02em;margin:.45rem 0 .4rem}
.case__desc{color:var(--slate);font-size:.94rem}
.case__cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.9rem;min-height:44px;font-weight:600;font-size:.95rem;color:var(--tinta)}
.case__cta::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.case:hover .case__cta .flecha{transform:translateX(4px)}
.case:focus-within{border-color:var(--hover-borde)}
@supports selector(:has(*)){
  .case:has(.case__cta:focus-visible){outline:3px solid var(--violet);outline-offset:3px}
  .case__cta:focus-visible{outline:none}
}
/* En columnas, etiqueta, título, descripción y enlace de las tarjetas de una misma fila quedan a la misma altura aunque
   una etiqueta o un título usen más líneas (subgrid; sin soporte, cada tarjeta se ve como antes). */
@supports (grid-template-rows:subgrid){
  @media(min-width:721px){
    .case:not(.case--feat){display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
    .case:not(.case--feat) .case__body{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
    .case:not(.case--feat) .case__type{align-self:start}
  }
}
/* Destacada: demo contable */
.case--feat{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.case--feat .case__shot{aspect-ratio:auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(1.1rem,3vw,2.4rem);border-bottom:0;border-right:1px solid var(--line);background:var(--tint)}
.case__frame{border-radius:12px;background:var(--marco-fondo);border:1px solid var(--marco-borde);overflow:hidden}
.case__frame picture,.case__frame img{display:block;width:100%;height:auto}
.case__pie{margin-top:.75rem;font-size:.82rem;color:var(--slate)}
.case--feat .case__body{justify-content:center;padding:2.4rem 2.6rem}
.case--feat .case__titulo{font-size:clamp(1.3rem,1rem + 1vw,1.7rem);line-height:1.2;margin:.5rem 0 .7rem;text-wrap:balance}
.case--feat .case__desc{font-size:1.04rem;max-width:40ch}
.case--feat .case__cta{align-self:flex-start;margin-top:1.5rem;padding:0 1.35rem;min-height:50px;border-radius:100px;background:var(--tinta);color:var(--sobre-tinta)}
.case--feat:hover .case__cta{background:var(--tinta-hover)}
/* Alto contraste (forced-colors): el pie de la vitrina conserva un color legible del sistema. */
@media(forced-colors:active){.case__pie{color:CanvasText}}

@media(max-width:960px){
  .demos__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case--feat{grid-template-columns:1fr}
  .case--feat .case__shot{border-right:0;border-bottom:1px solid var(--line)}
  .case--feat .case__body{padding:1.8rem 1.6rem}
}
@media(max-width:720px){
  .demos{margin-top:1.4rem}
  .demos__grid{grid-template-columns:1fr;gap:.75rem}
  .case--feat{margin-bottom:.6rem}
  .case--feat .case__shot{padding:1rem 1rem 1.1rem}
  .case--feat .case__body{padding:1.5rem 1.25rem 1.4rem}
  .case--feat .case__cta{align-self:flex-start}
  .case:not(.case--feat){display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:0 .95rem;padding:.65rem;border-radius:14px}
  .case:not(.case--feat) .case__shot{width:96px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px}
  .case:not(.case--feat) .case__body{padding:0}
  .case:not(.case--feat) .case__type,.case:not(.case--feat) .case__desc{display:none}
  .case:not(.case--feat) .case__titulo{font-size:1rem;margin:0 0 .1rem}
  .case:not(.case--feat) .case__cta{padding-top:0;min-height:30px;margin-top:0;font-size:.86rem;font-weight:500;color:var(--slate-2)}
  .case:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){.flecha,.case{transition:none}}