/* =========================================================
   BITSIDEAS — Sectores que atendemos
   Dos filas de tres paneles. Al pasar el cursor, el panel
   se expande dentro de SU fila y los otros dos se achican.
   ========================================================= */
.sectors{display:flex;flex-direction:column;gap:20px;width:100%}

.sect-row{display:flex;gap:16px;height:440px}

.sect{
  position:relative;flex:1 1 0;min-width:0;height:100%;
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;text-align:left;
  background:var(--brand-900);
  transition:flex-grow .95s var(--ease-out),box-shadow .5s var(--ease);
}
.sect.is-on{flex-grow:5;box-shadow:var(--shadow-lg)}
.sect:focus-visible{outline:3px solid var(--accent-400);outline-offset:3px}

.sect img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.03);transition:transform .9s var(--ease-out);
}
.sect.is-on img{transform:scale(1.1)}

.sect__scrim{
  position:absolute;inset:0;transition:background .45s var(--ease);
  background:
    linear-gradient(0deg,rgba(24,21,31,.96) 0%,rgba(24,21,31,.78) 26%,rgba(24,21,31,.34) 58%,rgba(24,21,31,.14) 86%),
    linear-gradient(180deg,rgba(24,21,31,.55) 0%,transparent 30%);
}
.sect.is-on .sect__scrim{
  background:
    linear-gradient(0deg,rgba(24,21,31,.97) 0%,rgba(24,21,31,.82) 32%,rgba(24,21,31,.46) 62%,rgba(24,21,31,.18) 88%),
    linear-gradient(180deg,rgba(24,21,31,.5) 0%,transparent 26%);
}

.sect__kicker{
  position:absolute;top:16px;left:18px;right:18px;z-index:2;
  font-family:var(--font);font-weight:700;font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.sect__body{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;transition:right .5s var(--ease-out)}
.sect.is-on .sect__body{right:88px}

.sect__title{
  color:#fff;font-family:var(--font);font-weight:600;letter-spacing:-.015em;line-height:1.14;
  font-size:1.05rem;transition:font-size .45s var(--ease-out);
}
.sect.is-on .sect__title{font-family:var(--font-light);font-weight:300;font-size:2.1rem}

.sect__desc{
  font-size:.83rem;color:rgba(255,255,255,.9);line-height:1.55;max-width:82%;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease-out),opacity .35s var(--ease),margin-top .5s var(--ease);
}
.sect.is-on .sect__desc{max-height:190px;opacity:1;margin-top:11px;font-size:.94rem;color:#fff}

.sect__list{
  display:flex;flex-direction:column;gap:7px;max-width:82%;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease-out) .05s,opacity .35s var(--ease) .05s,margin-top .5s var(--ease);
}
.sect.is-on .sect__list{max-height:170px;opacity:1;margin-top:12px}
.sect__list li{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;color:rgba(255,255,255,.92);line-height:1.42}
.sect__list svg{width:13px;height:13px;flex:0 0 auto;margin-top:4px;color:var(--accent-400);stroke:currentColor;stroke-width:2.8;fill:none}

.sect__go{
  position:absolute;right:20px;bottom:20px;z-index:3;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-600);color:#fff;
  box-shadow:0 8px 20px -6px color-mix(in srgb,var(--brand-600) 70%,transparent);
  opacity:0;transform:scale(.6) translate(6px,6px);
  transition:opacity .35s var(--ease),transform .42s var(--ease-out),background .25s var(--ease),color .25s var(--ease);
}
.sect.is-on .sect__go{opacity:1;transform:none}
.sect__go:hover{background:#fff;color:var(--brand-900);transform:scale(1.06)}
.sect__go svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Móvil: tarjetas apiladas ---------- */
@media (max-width:920px){
  .sect-row{height:auto;flex-direction:column;gap:12px}
  .sect{flex:none;height:132px;transition:height .5s var(--ease-out)}
  .sect.is-on{height:auto;min-height:330px;flex-grow:0}
  .sect__body{left:16px;right:16px;bottom:16px}
  .sect.is-on .sect__body{right:62px}
  .sect__title{font-size:1rem}
  .sect.is-on .sect__title{font-size:1.4rem}
  .sect__desc,.sect__list{max-width:100%}
  .sect.is-on .sect__desc{font-size:.86rem;max-height:240px}
  .sect__go{width:44px;height:44px;right:14px;bottom:14px}
  .sect__go svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){
  .sect,.sect img,.sect__desc,.sect__list,.sect__go{transition:none}
}