/* Page-specific tweaks for pages/services.html */
.service-category .service-grid{
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* ---- Insurance visual (replaces a photo in #seguros with a light CSS/SVG animation) ---- */
.feature-media--visual{
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--teal-100), var(--paper-raised) 65%);
}
.insurance-visual{
  position: relative;
  width: 72%;
  max-width: 300px;
}
.insurance-visual__card{ width: 100%; height: auto; overflow: visible; filter: drop-shadow(var(--shadow-md)); }
.insurance-visual__card .card-bg{ fill: var(--paper-raised); stroke: var(--line); stroke-width: 1.5; }
.insurance-visual__card .card-chip{ fill: var(--green-100); stroke: var(--green-600); stroke-width: 2; }
.insurance-visual__card .card-lines-thin{ fill: none; stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; }
.insurance-visual__card .card-emblem-bg{ fill: var(--color-accent); }
.insurance-visual__card .card-emblem-cross{ fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.insurance-visual__card .card-pulse{
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: insurance-pulse-draw 3.2s var(--ease-in-out) infinite;
}
@keyframes insurance-pulse-draw{
  0%{ stroke-dashoffset: 260; }
  55%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -260; }
}
.insurance-visual__badge{
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-raised);
  color: var(--color-brand);
  box-shadow: var(--shadow-sm);
  animation: insurance-badge-float 4.5s var(--ease-in-out) infinite;
}
.insurance-visual__badge svg{ width: 18px; height: 18px; }
.insurance-visual__badge--1{ top: -8%; left: -10%; animation-delay: 0s; }
.insurance-visual__badge--2{ bottom: -6%; right: -8%; animation-delay: 1.1s; background: var(--green-100); color: var(--green-600); }
.insurance-visual__badge--3{ top: 42%; right: -14%; animation-delay: 2.2s; }
@keyframes insurance-badge-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}