/* rejilla-bento — rejilla de piezas de distinto tamaño, como una caja bento.
   Portado del `bento-grid` de la cantera.

   Sirve para la sección "todo lo que hacemos" sin caer en las TRES TARJETAS
   IDÉNTICAS CENTRADAS que delatan un mockup de IA: aquí cada pieza tiene el
   tamaño que merece su contenido, y eso ya cuenta una jerarquía. */
[data-lui~="bento"]{
  --lui-hueco:1rem;
  --lui-alto:13rem;           /* alto de una fila; una pieza "alta" ocupa dos */
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  grid-auto-rows:var(--lui-alto);
  gap:var(--lui-hueco);
}

[data-lui~="bento"] > *{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.4rem;
  border:1px solid var(--lui-linea,#e6e6e0);
  border-radius:16px;
  background:var(--lui-superficie,#fff);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s;
}
[data-lui~="bento"] > *:hover{transform:translateY(-3px);border-color:var(--lui-acento,#c8a24a)}

/* Tamaños. Se piden con atributos en la pieza, no con clases numeradas tipo
   `col-span-2`, para que se lea qué es cada cosa. */
[data-lui~="bento"] > [data-lui-ancho="2"]{grid-column:span 2}
[data-lui~="bento"] > [data-lui-alto="2"]{grid-row:span 2}

/* En móvil TODO a una columna y una fila: un `span 2` en una pantalla de 390 px
   deja huecos vacíos y descoloca la rejilla entera. */
@media (max-width:640px){
  [data-lui~="bento"]{grid-template-columns:1fr;grid-auto-rows:minmax(11rem,auto)}
  [data-lui~="bento"] > [data-lui-ancho="2"],
  [data-lui~="bento"] > [data-lui-alto="2"]{grid-column:auto;grid-row:auto}
}

/* Imagen de fondo de una pieza, con velo para que el texto siga leyéndose. */
[data-lui~="bento"] > * > img.lui-fondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
[data-lui~="bento"] > *:has(> img.lui-fondo)::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.12) 62%,transparent);
}
[data-lui~="bento"] > *:has(> img.lui-fondo) > :not(img){position:relative;z-index:2;color:#fff}

[data-lui~="bento"] h3{margin:0 0 .35rem;font-size:1.06rem;line-height:1.3}
[data-lui~="bento"] p{margin:0;font-size:.9rem;line-height:1.55;color:var(--lui-atenuado,#75756c)}
[data-lui~="bento"] > *:has(> img.lui-fondo) p{color:rgba(255,255,255,.82)}

@media (prefers-reduced-motion:reduce){
  [data-lui~="bento"] > *{transition:none}
  [data-lui~="bento"] > *:hover{transform:none}
}