/* Ojkita_ · Sección "¿Qué necesitas?". Solo CSS, sin JavaScript.
   Todo bajo .oj-que y con prefijo oj-q-. Mismas fuentes y colores que el hero (ojkita-hero.css). */

.oj-que{
  --oj-crema:#F1ECE1; --oj-negro:#13110F; --oj-azul:#1D3BFF; --oj-rojo:#D2371C; --oj-fill-3:#F1ECE1;
  --oj-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --oj-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --oj-gutter:clamp(16px,4vw,48px);
  width:100%;background:var(--oj-negro);color:var(--oj-crema);
  font-family:var(--oj-display);font-size:16px;line-height:1.4;text-align:left;
  padding:clamp(56px,8vw,112px) 0 0;
}
.oj-que *,.oj-que *::before,.oj-que *::after{box-sizing:border-box}
.oj-que h2,.oj-que h3,.oj-que p,.oj-que ul,.oj-que li{margin:0;padding:0;list-style:none;text-transform:none}

.oj-que .oj-q-head{max-width:1360px;margin:0 auto;padding:0 var(--oj-gutter) clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.oj-que .oj-q-h{font-weight:900;font-size:clamp(44px,8vw,120px);line-height:.9;font-stretch:78%;letter-spacing:-.035em;color:var(--oj-crema)}
.oj-que .oj-q-lead{max-width:30ch;font-size:clamp(17px,1.6vw,22px);line-height:1.4;color:var(--oj-crema)}

.oj-que .oj-q-list{border-top:1px solid rgba(241,236,225,.3)}
.oj-que .oj-q-list li{border-bottom:1px solid rgba(241,236,225,.3)}

/* cada fila es un enlace; el relleno de color es el único gesto del componente */
.oj-que .oj-q-row{--oj-fill:var(--oj-azul);--oj-on:#fff;position:relative;display:block;overflow:hidden;color:var(--oj-crema);text-decoration:none;background:none;border:0}
.oj-que li:nth-child(2) .oj-q-row{--oj-fill:var(--oj-rojo);--oj-on:#fff}
.oj-que li:nth-child(3n) .oj-q-row{--oj-fill:var(--oj-fill-3);--oj-on:var(--oj-negro)}
.oj-que .oj-q-row::before{content:"";position:absolute;inset:0;background:var(--oj-fill);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.oj-que .oj-q-row:visited{color:var(--oj-crema)}
.oj-que .oj-q-row:hover,.oj-que .oj-q-row:focus-visible,.oj-que .oj-q-row:active{color:var(--oj-on);text-decoration:none}
.oj-que .oj-q-row:hover::before,.oj-que .oj-q-row:focus-visible::before{transform:scaleX(1)}
.oj-que .oj-q-row:focus-visible{outline:3px solid currentColor;outline-offset:-8px}

.oj-que .oj-q-in{position:relative;max-width:1360px;margin:0 auto;padding:clamp(24px,3.2vw,44px) var(--oj-gutter);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;grid-template-areas:"t d g";gap:16px 40px;align-items:center}
.oj-que .oj-q-t{grid-area:t;font-weight:900;font-size:clamp(34px,5.2vw,76px);line-height:.95;font-stretch:78%;letter-spacing:-.03em;color:inherit;text-wrap:balance}
.oj-que .oj-q-d{grid-area:d;display:flex;flex-direction:column;gap:16px;font-size:clamp(17px,1.5vw,20px);line-height:1.4;color:inherit}
.oj-que .oj-q-chips{display:flex;flex-wrap:wrap;gap:8px}
.oj-que .oj-q-chips span{padding:4px 10px;border:1px solid currentColor;font:500 12px/1.3 var(--oj-mono);letter-spacing:.08em;text-transform:uppercase}
.oj-que .oj-q-go{grid-area:g;width:56px;height:56px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.oj-que .oj-q-row:hover .oj-q-go,.oj-que .oj-q-row:focus-visible .oj-q-go{transform:translateX(8px)}

@media (max-width:860px){
  .oj-que .oj-q-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t g" "d d";gap:20px 16px;align-items:start}
  .oj-que .oj-q-go{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .oj-que .oj-q-row::before,.oj-que .oj-q-go{transition:none!important}
}