/* modules/Services/frontend/assets/services.css
 * Layout de la sección Servicios. Sin look de identidad.
 */

/* Sección compacta: el grid de motions es alto, y si la sección supera el alto de la pantalla las
   tarjetas se cortan al llegar a Servicios. En vez de alargarla, achicamos su altura total —menos
   padding vertical, encabezado más cerca, gaps más ajustados— para que el conjunto entre en pantalla. */
.lcl-container .lcl-services {
  padding-block: var(--space-8);
}
@media (max-width: 560px) {
  .lcl-container .lcl-services { padding-block: var(--space-7); }
}

.lcl-container .lcl-services__header {
  max-width: 720px;
  margin-bottom: var(--space-5);
  text-align: center;
  margin-inline: auto;
}

.lcl-container .lcl-services__grid {
  /* Acotamos el ancho del grid (cards más angostas, centradas) en vez de capar el motion por separado.
     Así el motion llena el ancho de la card y el texto también → ambos del MISMO ancho y alineados, y
     a la vez baja la altura del motion (~162px por fila) lo justo para que la sección entre en pantalla
     sin cortar las animaciones. */
  max-width: 840px;
  margin-inline: auto;
  align-items: stretch;
  gap: var(--space-4);
}

.lcl-container .lcl-services__item {
  height: 100%;
}

/* Con las cards compactas, el título baja a la escala 'title-2' para que no se vea desproporcionado
   sobre un recuadro chico. Fallback para temas que no definen --fs-title-2.
   El selector incluye __grid para ganarle por especificidad (4 clases) a la regla del tema
   `.lcl-container.theme-modern .lcl-h3` (3 clases), que carga después y si no nos pisaría. */
.lcl-container .lcl-services__grid .lcl-services__item h3,
.lcl-container .lcl-services__grid .lcl-services__item .lcl-h3 {
  font-size: var(--fs-title-2, 17px);
  /* Red de seguridad para cards muy angostas: si una palabra larga sin espacios no entra, que parta
     dentro de la card en vez de salirse. Sin hyphens (Safari mete guiones dobles feos); break-word
     rompe limpio y solo actúa cuando de verdad no cabe. El ancho de card 1:1 (tema) evita que actúe. */
  overflow-wrap: break-word;
}

.lcl-container .lcl-services__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: var(--r-md);
  background: var(--accent-bg-soft);
  color: var(--accent-pressed);
}

/* Sin forzar fill: los íconos de línea (set inline de Services) traen su propio
   fill="none" stroke="currentColor"; un ícono relleno declara su fill inline. */
.lcl-container .lcl-services__icon svg {
  width: 26px;
  height: 26px;
}

/* ─── Motions: "videos" hechos en CSS+JS (estilo radar) que reemplazan el icono ───
   Lenguaje visual COMPARTIDO por todos los temas: misma base .lcl-motion (encuadre, ritmo,
   tokens); cada tema solo cambia el "dibujo" en .lcl-motion--<tema>. Anima solo opacity/width
   (sin reflow). El verde (#16a34a) es semántico (seguro/SSL/ok), no identidad de marca. */
.lcl-container .lcl-motion {
  position: relative;
  width: 100%;
  /* El motion llena el ancho de la card (= ancho del texto). Su altura la fija el aspect-ratio sobre
     ese ancho; el tamaño se regula acotando el grid (.lcl-services__grid), no capando el motion. */
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  /* En apariencia clara: cremita del acento (--accent-bg-soft, 12% del acento sobre el fondo claro). */
  background: var(--accent-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

/* Fila inferior (maps · chat · responsive): siempre en gris —incluso en apariencia clara— para que esa
   fila quede unificada (el mapa ya es gris). La fila superior queda en cremita en claro. */
.lcl-container .lcl-motion--maps,
.lcl-container .lcl-motion--chat,
.lcl-container .lcl-motion--responsive {
  background: #e9eef2;
}

/* En apariencia oscura ('dark' y 'dark-navy') la cremita se va a negro (el accent-bg-soft mezcla con el
   fondo oscuro): forzamos un gris claro explícito para que el stage no se oscurezca. data-color-scheme
   puede estar en el container (modo global) o en el wrapper de una sección con override → cubrimos ambos. */
.lcl-container[data-color-scheme="dark"] .lcl-motion,
.lcl-container[data-color-scheme="dark-navy"] .lcl-motion,
.lcl-container [data-color-scheme="dark"] .lcl-motion,
.lcl-container [data-color-scheme="dark-navy"] .lcl-motion {
  background: #e9eef2;
}

/* Los motions de "dibujo centrado" (navegador, sobre, chat, escudo) tienen medidas en px pensadas para
   un stage ancho; en una card angosta el dibujo llena el recuadro y se ve "con zoom". Achicamos solo el
   dibujo (su único hijo) para devolverle el aire, sin tocar el ancho del stage ni recortar nada. Los
   full-bleed (mapa, responsive) son por porcentaje: ya se ven proporcionados a cualquier tamaño, así que
   quedan fuera. transform-origin centrado (default) los mantiene centrados. */
.lcl-container .lcl-motion > * {
  transform: scale(0.8);
}
.lcl-container .lcl-motion--maps > *,
.lcl-container .lcl-motion--responsive > * {
  transform: none;
}

/* Card con motion: hover MARCADO — se agranda y levanta por encima de las vecinas con transform
   (no width/height → cero saltos del grid). focus-within lo hace accesible por teclado. */
.lcl-container .lcl-services__item--motion {
  position: relative;
  transition: transform 0.35s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
              box-shadow 0.35s ease;
  will-change: transform;
}
.lcl-container .lcl-services__item--motion:hover,
.lcl-container .lcl-services__item--motion:focus-within {
  transform: scale(1.12);
  z-index: 2;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

/* ─── Motion 'domain': navegador que teclea el dominio + candado + "en línea" ─── */
.lcl-container .lcl-motion__browser {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Barra del navegador: 3 puntos + barra de direcciones. */
.lcl-container .lcl-motion__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 9px;
  background: #f1f3f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.lcl-container .lcl-motion__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  flex: none;
}
.lcl-container .lcl-motion__url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}

/* Candado dibujado en CSS (cuerpo + arco): cero requests, nítido a cualquier escala. */
.lcl-container .lcl-motion__lock {
  position: relative;
  flex: none;
  width: 9px;
  height: 8px;
  margin-top: 3px;
  border-radius: 2px;
  background: #16a34a;
}
.lcl-container .lcl-motion__lock::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border: 1.5px solid #16a34a;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

/* Reposo = estado FINAL (la card se ve completa). La animación la dispara JS añadiendo .is-anim al
   recuadro: intro al entrar en viewport + replay al hover, UNA pasada (ver el bloque .is-anim abajo).
   --chars lo siembra el renderer = largo del dominio. */
.lcl-container .lcl-motion__typed {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  /* Ancho del typewriter = largo del dominio (chars × 1ch), pero NUNCA más que la barra: max-width
     evita que un dominio largo (o una card angosta) desborde el browser y se corte contra su borde;
     en ese caso trunca dentro de la barra como un navegador real. */
  width: calc(var(--chars) * 1ch);
  max-width: 100%;
  border-right: 1.5px solid transparent;
}
/* steps() solo en el tramo de tipeo (timing-function por-keyframe); luego mantiene el ancho y al
   cerrar el ciclo vuelve a 0 de golpe (re-teclea). */
@keyframes lcl-motion-type {
  0%   { width: 0; animation-timing-function: steps(var(--chars)); }
  45%  { width: calc(var(--chars) * 1ch); }
  100% { width: calc(var(--chars) * 1ch); }
}
@keyframes lcl-motion-caret {
  50% { border-right-color: #1f2937; }
}

/* "Página" cargada: aparece tras tipear (~48% del ciclo), se mantiene y reinicia con el bucle. */
.lcl-container .lcl-motion__page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  min-height: 48px;
}
@keyframes lcl-motion-page {
  0%, 48%   { opacity: 0; transform: translateY(6px); }
  56%, 100% { opacity: 1; transform: none; }
}
.lcl-container .lcl-motion__check {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
}
.lcl-container .lcl-motion__check::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lcl-container .lcl-motion__caption {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

/* ─── Motion 'email': un sobre que vuela a la bandeja + la dirección corporativa que aparece ─── */
.lcl-container .lcl-motion__mail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Sobre dibujado en CSS: cuerpo blanco con borde acento + solapa (triángulo) en acento. */
.lcl-container .lcl-motion__envelope {
  position: relative;
  display: block;
  width: 76px;
  height: 50px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.lcl-container .lcl-motion__envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-top: 24px solid var(--accent);
}
/* Vuela en ~1s (25% del ciclo), aterriza y se mantiene; al cerrar el ciclo vuelve a salir y re-vuela. */
@keyframes lcl-motion-fly {
  0%        { transform: translateX(-140px) rotate(-10deg); opacity: 0; }
  12%       { opacity: 1; }
  16%       { transform: translateX(6px) rotate(2deg); }
  25%, 100% { transform: translateX(0) rotate(0); opacity: 1; }
}

/* La dirección entra después de que el sobre aterriza (~30% del ciclo) y se mantiene hasta reiniciar. */
.lcl-container .lcl-motion__address {
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #1f2937;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 5px 12px;
}
@keyframes lcl-motion-addr {
  0%, 30%   { opacity: 0; transform: translateY(6px); }
  38%, 100% { opacity: 1; transform: none; }
}

/* ─── Motion 'maps': pin que cae sobre el mapa + ficha del negocio con fotos y reseña ─── */
.lcl-container .lcl-motion--maps {
  padding: 0; /* el mapa va de borde a borde, como un mapa real */
}
.lcl-container .lcl-motion__map {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #e9eef2;
}
/* Calles: cuadrícula tenue + una avenida diagonal blanca, para que lea como mapa sin imágenes. */
.lcl-container .lcl-motion__map-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 47%, #fff 47% 53%, transparent 53%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px) 0 0 / 38px 100%;
}

/* Pin (gota) de Google: cae desde arriba con un rebote y se queda. */
.lcl-container .lcl-motion__pin {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 22px;
  height: 22px;
  margin: -22px 0 0 -11px;
  background: #ea4335;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
}
.lcl-container .lcl-motion__pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: #fff;
  border-radius: 50%;
}
@keyframes lcl-motion-drop {
  0%        { transform: translateY(-60px) rotate(-45deg); opacity: 0; }
  10%       { opacity: 1; }
  18%       { transform: translateY(7px) rotate(-45deg); }
  24%, 100% { transform: translateY(0) rotate(-45deg); opacity: 1; }
}

/* Ficha del local: foto(s) + nombre + reseña. Aparece tras caer el pin y se mantiene hasta reiniciar. */
.lcl-container .lcl-motion__listing {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: calc(100% - 24px);
  max-width: 220px;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}
@keyframes lcl-motion-listing {
  0%, 30%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  40%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.lcl-container .lcl-motion__photos {
  display: flex;
  gap: 4px;
  flex: none;
}
.lcl-container .lcl-motion__photo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.lcl-container .lcl-motion__photo:nth-child(1) { background: linear-gradient(135deg, var(--accent), #ffd28a); }
.lcl-container .lcl-motion__photo:nth-child(2) { background: linear-gradient(135deg, #4f9da6, #b8e0d2); }
.lcl-container .lcl-motion__photo:nth-child(3) { background: linear-gradient(135deg, #8a6fb0, #d6c3e8); }
.lcl-container .lcl-motion__listing-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.lcl-container .lcl-motion__listing-name {
  font: 600 12px/1.1 system-ui, sans-serif;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lcl-container .lcl-motion__stars {
  font-size: 11px;
  letter-spacing: 1px;
  color: #fbbc04;
}

/* ─── Motion 'chat': chatbot que deriva a WhatsApp ─── */
.lcl-container .lcl-motion__chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  max-width: 230px;
}
.lcl-container .lcl-motion__bubble {
  font: 500 12px/1.3 system-ui, sans-serif;
  padding: 8px 12px;
  border-radius: 14px;
  max-width: 85%;
}
.lcl-container .lcl-motion__bubble--bot {
  background: #fff;
  color: #1f2937;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@keyframes lcl-motion-bubble {
  0%, 8%    { opacity: 0; transform: translateX(-12px); }
  16%, 100% { opacity: 1; transform: none; }
}
/* "Está escribiendo": aparece tras el saludo y queda; los puntos botan en bucle propio. */
.lcl-container .lcl-motion__typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 9px 11px;
  background: #fff;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.lcl-container .lcl-motion__typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9aa0a6;
}
.lcl-container .lcl-motion__typing i:nth-child(2) { animation-delay: 0.15s; }
.lcl-container .lcl-motion__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lcl-motion-typing {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}
@keyframes lcl-motion-typing-show {
  0%, 18%   { opacity: 0; }
  26%, 100% { opacity: 1; }
}
/* Botón de WhatsApp (la derivación): verde de marca; aparece al final. */
.lcl-container .lcl-motion__wa {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font: 600 12px/1 system-ui, sans-serif;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}
@keyframes lcl-motion-wa {
  0%, 42%   { opacity: 0; transform: translateY(8px); }
  52%, 100% { opacity: 1; transform: none; }
}

/* ─── Motion 'backup': respaldos automáticos + mantenimiento (seguridad) ─── */
.lcl-container .lcl-motion__guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lcl-container .lcl-motion__shield-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Anillo de sincronización (lo "automático/continuo"); gira una vuelta por pasada. */
.lcl-container .lcl-motion__sync {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
}
@keyframes lcl-motion-spin {
  to { transform: rotate(360deg); }
}
/* Escudo con check: aparece con un pequeño rebote por ciclo. */
.lcl-container .lcl-motion__shield {
  position: relative;
  width: 50px;
  height: 60px;
  background: linear-gradient(135deg, #16a34a, #34d399);
  clip-path: polygon(50% 0, 100% 18%, 100% 60%, 50% 100%, 0 60%, 0 18%);
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.35);
}
.lcl-container .lcl-motion__shield::after {
  content: '';
  position: absolute;
  left: 35%;
  top: 30%;
  width: 9px;
  height: 16px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
@keyframes lcl-motion-shield {
  0%, 12%   { opacity: 0; transform: scale(0.6); }
  26%       { opacity: 1; transform: scale(1.08); }
  34%, 100% { opacity: 1; transform: scale(1); }
}
.lcl-container .lcl-motion__guard-label {
  font: 600 12px/1 system-ui, sans-serif;
  color: #1f2937;
}

/* ─── Motion 'responsive': el sitio adaptado de computadora a celular ─── */
.lcl-container .lcl-motion__devices {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El marco pasa de proporción monitor (ancho) a teléfono (alto); el contenido se reacomoda solo. */
.lcl-container .lcl-motion__screen {
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
  padding: 8px;
  width: 78%;
  height: 64%;
  background: #fff;
  border: 3px solid #1f2937;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
@keyframes lcl-motion-resize {
  0%, 32%   { width: 78%; height: 64%; }
  48%, 84%  { width: 34%; height: 88%; }
  100%      { width: 78%; height: 64%; }
}
.lcl-container .lcl-motion__row {
  flex: none;
  height: 8px;
  border-radius: 4px;
  background: #e3e7eb;
}
.lcl-container .lcl-motion__row--head {
  height: 12px;
  background: var(--accent);
}
.lcl-container .lcl-motion__row--short {
  width: 60%;
}

/* La animación corre SOLO cuando JS añade .is-anim al recuadro (intro al entrar en viewport + replay al
   hover), UNA pasada. En reposo todo queda en su estado final (reglas base de arriba). Si el JS no carga,
   los motions quedan estáticos en su estado final (degradación elegante). Gateado a no-preference: con
   reduced-motion no anima aunque .is-anim esté. */
@media (prefers-reduced-motion: no-preference) {
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__typed {
    animation: lcl-motion-type 4s, lcl-motion-caret 0.7s step-end 4;
  }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__page        { animation: lcl-motion-page 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__envelope    { animation: lcl-motion-fly 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__address     { animation: lcl-motion-addr 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__pin         { animation: lcl-motion-drop 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__listing     { animation: lcl-motion-listing 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__bubble--bot { animation: lcl-motion-bubble 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__typing      { animation: lcl-motion-typing-show 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__typing i    { animation: lcl-motion-typing 1s 3; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__wa          { animation: lcl-motion-wa 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__shield      { animation: lcl-motion-shield 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__sync        { animation: lcl-motion-spin 4s linear; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__guard-label { animation: lcl-motion-page 4s; }
  .lcl-container .lcl-services__item--motion.is-anim .lcl-motion__screen      { animation: lcl-motion-resize 4s; }
}

/* Con reduced-motion: tampoco el agrandado al hover. */
@media (prefers-reduced-motion: reduce) {
  .lcl-container .lcl-services__item--motion {
    transition: none;
  }
  .lcl-container .lcl-services__item--motion:hover,
  .lcl-container .lcl-services__item--motion:focus-within {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   Variante 'bento' — cards de tamaño variado (1:1 mockup): grilla de 3 columnas,
   cards con span 1|2, card oscura con grilla de fondo y listado de chips de orden.
   Colores por token; entran con reveal escalonado (delays nth-child).
   ─────────────────────────────────────────────────────────────────────────── */
.lcl-container .lcl-services__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.lcl-container .lcl-services__bento-item {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--surface), var(--bg-secondary));
  box-shadow: var(--shadow-1);
}
.lcl-container .lcl-services__bento-item--wide { grid-column: span 2; }
.lcl-container .lcl-services__bento-item--split {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.lcl-container .lcl-services__bento-item--split .lcl-services__bento-main {
  flex: 1;
  min-width: 220px;
}

/* Card oscura (Historial) */
.lcl-container .lcl-services__bento-item--dark {
  background: linear-gradient(160deg, var(--label-primary), oklch(0.30 0.04 260));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-2);
}
.lcl-container .lcl-services__bento-item--dark .lcl-h3 { color: #fff; }
.lcl-container .lcl-services__bento-item--dark .lcl-body { color: oklch(0.9 0.01 257); }

/* Glow decorativo (claro) / grilla de fondo (oscuro) */
.lcl-container .lcl-services__bento-glow {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-bg-soft), transparent 70%);
  pointer-events: none;
}
.lcl-container .lcl-services__bento-item--dark .lcl-services__bento-glow {
  inset: 0;
  right: auto;
  top: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 120% at 90% 10%, #000, transparent 70%);
  mask-image: radial-gradient(120% 120% at 90% 10%, #000, transparent 70%);
}
.lcl-container .lcl-services__bento-main { position: relative; }

/* Ícono del bento */
.lcl-container .lcl-services__bento-item .lcl-services__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--accent-bg-soft);
  color: var(--accent-pressed);
  margin-bottom: 18px;
}
.lcl-container .lcl-services__bento-item--dark .lcl-services__icon {
  background: oklch(1 0 0 / 0.12);
  color: #fff;
}

/* Listado de chips de orden (card Historial) */
.lcl-container .lcl-services__orders {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 200px;
}
.lcl-container .lcl-services__order {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: oklch(1 0 0 / 0.08);
  border: 1px solid oklch(1 0 0 / 0.12);
}
.lcl-container .lcl-services__order-code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: oklch(0.85 0.05 256);
}
.lcl-container .lcl-services__order-label { font-size: 13px; flex: 1; }
.lcl-container .lcl-services__order-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.lcl-container .lcl-services__order-status--ok   { background: oklch(0.62 0.13 155 / 0.25); color: oklch(0.85 0.13 155); }
.lcl-container .lcl-services__order-status--warn { background: oklch(0.74 0.14 75 / 0.25);  color: oklch(0.86 0.14 80); }
.lcl-container .lcl-services__order-status--default { background: var(--accent-bg-soft); color: var(--accent-pressed); }

/* Reveal escalonado de las cards bento */
.lcl-container .lcl-services__bento-item:nth-child(2) { transition-delay: 80ms; }
.lcl-container .lcl-services__bento-item:nth-child(3) { transition-delay: 160ms; }
.lcl-container .lcl-services__bento-item:nth-child(4) { transition-delay: 240ms; }
.lcl-container .lcl-services__bento-item:nth-child(5) { transition-delay: 320ms; }
.lcl-container .lcl-services__bento-item:nth-child(6) { transition-delay: 400ms; }

@media (max-width: 860px) {
  .lcl-container .lcl-services__bento { grid-template-columns: 1fr; }
  .lcl-container .lcl-services__bento-item--wide { grid-column: span 1; }
  .lcl-container .lcl-services__bento-item--split { display: block; }
  .lcl-container .lcl-services__orders { margin-top: 18px; }
}