/* como.css — «How it works» (D282), con los tokens de la casa (D112): el escenario de tinta de
   las portadas arriba y, debajo, secciones de tarjetas. Móvil primero (375); a 1024 las materias
   son filas de tres columnas y lo demás, tres tarjetas en fila. */
.como .stage-in{gap:22px}
/* los saltos a cada sección, sobre la tinta */
.como-saltos{display:flex;flex-wrap:wrap;gap:8px}
.como-saltos a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;
  color:#F6F4EF;border:1px solid rgba(255,194,75,.45);background:rgba(255,255,255,.04);transition:background .2s,border-color .2s}
.como-saltos a:hover{background:rgba(255,194,75,.14);border-color:var(--gold)}
.como-h{scroll-margin-top:76px}
.como-que{max-width:52ch}
.como-sec{margin-top:40px;min-width:0}
.como-h{font-family:var(--serif);font-weight:400;font-size:30px;line-height:34px;letter-spacing:-.01em;text-wrap:balance}
.como-sub{font-size:15px;line-height:22px;color:var(--ink2);margin-top:6px;max-width:56ch}

/* 2 · por dónde empezar: una tarjeta por materia */
.como-materias{display:grid;gap:12px;margin-top:16px}
.como-materia{display:grid;gap:12px;min-width:0}
.como-materia>*{min-width:0}
.como-nombre{display:flex;align-items:center;gap:12px;min-width:0}
.como-nombre .ig{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;
  font-family:var(--math);font-size:20px;color:var(--gold);
  background:linear-gradient(145deg,#1B2356,#0B1030);box-shadow:0 0 0 1px rgba(255,194,75,.35) inset,0 6px 14px -6px rgba(255,159,46,.5)}
.como-nombre h3{font-size:18px;line-height:23px;font-weight:600;letter-spacing:-.005em;min-width:0;text-wrap:balance}
.como-texto{display:grid;gap:6px}
.como-texto p{font-size:15px;line-height:22px}
.como-primero{color:var(--ink2)}
.como-primero b{color:var(--ink);font-weight:600}
.como-ir{display:flex;flex-wrap:wrap;gap:8px}
.como-ir .btn-sm{white-space:normal;text-align:center;line-height:18px;padding:8px 16px;flex:1 1 auto}
.como-hoy{margin-top:16px;padding:12px 16px;border-radius:16px;font-size:15px;line-height:22px;
  background:rgba(255,194,75,.14);color:var(--ink);border:1px solid rgba(255,194,75,.35)}

/* 3, 4 y 5 · tres tarjetas */
.como-tres{list-style:none;display:grid;gap:12px;margin-top:16px;min-width:0}
.como-tres>*{min-width:0;display:flex;flex-direction:column;gap:6px}
.como-tres b,.como-tres h3{font-size:16px;line-height:21px;font-weight:600}
.como-tres p{font-size:15px;line-height:22px;color:var(--ink2)}
.como-tres .link{margin-top:auto;align-self:flex-start;min-height:36px}
.como-n{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1;color:var(--goldText)}
.como-pie{margin-top:40px}

@media (min-width:640px){
  .como-materia{grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:20px}
  .como-nombre,.como-texto{grid-column:1}
  .como-ir{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-self:center;min-width:220px}
  .como-ir .btn-sm{flex:none}
}
@media (min-width:1024px){
  .como-sec{margin-top:56px}
  .como-h{font-size:38px;line-height:42px}
  .como .stage-in{grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:end;column-gap:48px}
  .como-saltos{flex-direction:column;align-items:stretch}
  .como-materia{grid-template-columns:230px minmax(0,1fr) 290px;padding:20px 22px}
  .como-ir .btn-sm{white-space:nowrap}
  .como-nombre{grid-column:1;grid-row:1}
  .como-texto{grid-column:2;grid-row:1}
  .como-ir{grid-column:3;grid-row:1}
  .como-tres{grid-template-columns:repeat(3,minmax(0,1fr))}
}